Σχεδιασμός στο πρόγραμμα περιήγησης

Περιεχόμενο

• Οφέλη στο σχεδιασμό με κώδικα
• Τα δεδομένα πρώτα
• Κινητή καλοσύνη δωρεάν
• Εύρεση κοινής γλώσσας
• Μάθετε πιο γρήγορα
• Ταχεία επανάληψη
• Γρηγορότερος χρόνος για εκκίνηση
• Γιατί HTML5;
• Το μαγικό χαρακτηριστικό δεδομένων
• CSS3 - είναι το νέο Photoshop
• Sass + Compass: μαγικά νόστιμο
• jQuery: ω, ναι μπορείτε
• Πλαίσια
• Τελικές σκέψεις

Αυτό το άρθρο δημοσιεύτηκε για πρώτη φορά στο τεύχος 235 του περιοδικού .net - το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων.

Δεν ήμουν ποτέ οπαδός να κάνω περισσότερη δουλειά από ό, τι χρειαζόμουν. Τείνω να αξιολογήσω τις μεθόδους και τα εργαλεία με βάση την ικανότητά τους να με κάνουν ή την ομάδα μου πιο αποτελεσματικά. Πόσο γρήγορα μας οδηγούν σε ένα προϊόν που λειτουργεί; Πόσο αποτελεσματικά είναι στην επικοινωνία; Μένουν εκτός δρόμου;

Με τα χρόνια, έχω προσαρμόσει τη διαδικασία σχεδίασης και τα εργαλεία μου. Φαντάζομαι ότι θα συνεχίσω να το κάνω. Αυτή είναι η φύση του σχεδιασμού για την τεχνολογία και τον ιστό. Αυτή η βιομηχανία εξελίσσεται συνεχώς. η διαδικασία και τα εργαλεία μας πρέπει να εξελιχθούν επίσης.

Τα HTML5 και CSS3 διευκολύνουν τη μετάβαση περισσότερων από τη διαδικασία σχεδιασμού ανάντη - μακριά από το Photoshop και περισσότερο προς έναν ζωντανό, αναπνευστικό σχεδιασμό. Εργαλεία όπως το Foundation, το Bootstrap και το jQuery κάνουν τη μετακίνηση περισσότερων από τη διαδικασία σχεδίασης σε κώδικα πιο προσιτή.

Οφέλη στο σχεδιασμό με κώδικα

Πρώτον, δεν προτείνω να εγκαταλείψω το Photoshop ή οποιοδήποτε άλλο πρόγραμμα επεξεργασίας οπτικού σχεδιασμού από τη ροή εργασίας σας. Αντ 'αυτού, θα επικεντρωθώ στα οφέλη της μετακίνησης αυτού του σχεδιασμού σε κώδικα νωρίτερα από αργότερα.

Τα δεδομένα πρώτα

Αυτό που πάντα μου άρεσε να σχεδιάζω με HTML είναι ότι ενθαρρύνει τη σκέψη από την πρώτη άποψη δεδομένων. Αντίθετα, χρησιμοποιώντας προγράμματα σχεδίασης όπως το Illustrator, το OmniGraffle ή το Balsamiq, ξεκινάτε με ένα πλαίσιο και το γεμίζετε με δεδομένα.

Σε HTML δημιουργείτε το DOM (μοντέλο αντικειμένου εγγράφου), σαν να δημιουργείτε έναν πίνακα περιεχομένων. Είναι μια επιστροφή στον πραγματικό σχεδιασμό πληροφοριών με σημαντικές ιεραρχίες. Το HTML5 το κάνει ένα βήμα παραπέρα με την προσθήκη νέων σημασιολογικών στοιχείων: άρθρο, ενότητα, κεφαλίδα, άκρη, υποσέλιδο και ούτω καθεξής. Αυτή η προσέγγιση με βάση τα δεδομένα συνδυάζεται όμορφα με τα πρώτα, ανταποκρινόμενα σχέδια για κινητά.

Κινητή καλοσύνη δωρεάν

Εάν το διαβάζετε, πιθανότατα σχεδιάζετε για κινητά. Και πιθανότατα θα πρέπει να σχεδιάσετε μια φόρμα ή δύο. Με το HTML5, είστε τυχεροί. Πριν από το HTML5, οι τύποι εισαγωγής σας ήταν σχεδόν είτε πεδίο κειμένου είτε κωδικός πρόσβασης. Το HTML5 εισήγαγε έναν αριθμό επιπλέον τύπων εισόδου, όπως:

input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "ημερομηνία-ώρα">

Αυτό που είναι πραγματικά καταπληκτικό για αυτούς τους πρόσθετους, μοναδικούς τύπους εισόδου είναι ότι τα προγράμματα περιήγησης για κινητά σε iOS και Android τα αναγνωρίζουν και ανταλλάσσουν αυτόματα ένα πληκτρολόγιο με γνώμονα τα συμφραζόμενα - χωρίς να απαιτούνται ειδικές προσθήκες ή hacks jQuery. Ω και αν το πρόγραμμα περιήγησής σας δεν ξέρει τι τύπος εισαγωγής = "email"> είναι, τότε είναι απλώς προεπιλογή σε μια εισαγωγή κειμένου.

Εύρεση κοινής γλώσσας

«Είναι καταπληκτικό το πώς μπορούν οι σχεδιαστές και οι προγραμματιστές μας να λειτουργούν στην ίδια γλώσσα» - John Drago, προγραμματιστής εφαρμογών στην Inflection.

Δείτε αν αυτό ακούγεται οικείο. Βρίσκομαι σε μια αίθουσα συσκέψεων με μισούς δωδεκάδες προγραμματιστές από την πλευρά του διακομιστή που μπορούν να κωδικοποιήσουν κύκλους γύρω μου σε Ruby, Python, Java ή .NET. Είμαι ο μόνος σχεδιαστής. Μερικές από τις προτάσεις μου απορρίφθηκαν αρχικά ως υπερβολικά περίπλοκες για εφαρμογή. Περπατώ μέχρι τον πίνακα και αρχίζω να γράφω HTML και CSS στον πίνακα για το πώς θα μπορούσε να εφαρμοστεί ο σχεδιασμός. Ξαφνικά ο τόνος της συνομιλίας αλλάζει και ένας από τους προγραμματιστές λέει απρόθυμα, "Λοιπόν, ναι - αν το κάνουμε με αυτόν τον τρόπο, θα μπορούσε να λειτουργήσει."

Η μεταφορά περισσότερων από τη διαδικασία σχεδιασμού μου σε κώδικα έχει βελτιώσει τις συζητήσεις με προγραμματιστές. Υπάρχει ένα επιπλέον επίπεδο σεβασμού που κερδίζεται γνωρίζοντας πώς να σχεδιάζετε τα σχέδιά σας σε κώδικα. Δεν χρειάζεται να είστε ειδικός για να κερδίσετε αυτόν τον σεβασμό. Ενώ οι δεξιότητές μου σε HTML και CSS είναι σταθερές, οι ικανότητές μου στη JavaScript είναι μέτριες στην καλύτερη περίπτωση. Και δεν ντρέπομαι να το παραδεχτώ. Ωστόσο, όταν συνεργαζόμαστε με προγραμματιστές frontend ή διακομιστές, το γεγονός ότι μπορούμε να μιλάμε σε μια κοινή γλώσσα ή να συναντάμε στα μισά του δρόμου, είναι ένα τεράστιο πλεονέκτημα.

Μάθετε πιο γρήγορα

Ενώ τα wireframes και τα οπτικά σύνθετα μπορούν να βοηθήσουν στον σχεδιασμό, αυτά τα στατικά αντικείμενα είναι θεωρητικά. Πόσες φορές προσπαθήσατε να εξηγήσετε μια αλληλεπίδραση σε κάποιον, μόνο για να τους απαντήσει, "Υποθέτω ότι θα πρέπει να το δω". Όσο πιο γρήγορα φτάσετε σε ένα πρωτότυπο, κάτι με το οποίο μπορούν να αλληλεπιδράσουν οι άνθρωποι, τόσο πιο γρήγορα μπορείτε να δοκιμάσετε το σχεδιασμό και να δείτε αν οι ιδέες λειτουργούν.

Ταχεία επανάληψη

Πότε ήταν η τελευταία φορά που ένα τελικό σχέδιο που στάλθηκε στην παραγωγή ταιριάζει ακριβώς με το Photoshop comp σας; Σχεδόν ποτέ. Με τον ψηφιακό σχεδιασμό προϊόντων, η αλλαγή συμβαίνει συνεχώς. Επιπλέον, αλλαγές όπως η αύξηση του μεγέθους των επικεφαλίδων από 22pt σε 24pt σε μερικές δεκάδες οθόνες μπορεί να διαρκέσουν ώρες στο Photoshop. Τα έξυπνα αντικείμενα σάς προσφέρουν κάποιο επίπεδο αντικειμενοστραφής σχεδίασης στο Photoshop. Δυστυχώς, οι περισσότεροι οπτικοί σχεδιαστές που γνωρίζω δεν χρησιμοποιούν αρκετά έξυπνα αντικείμενα. Με το CSS, επειδή ενθαρρύνει μια πιο συστηματική προσέγγιση στο σχεδιασμό, οι τυπογραφικές αλλαγές χρειάζονται λεπτά αντί για ώρες.

Τι γίνεται με την αλλαγή των γραμμικών ντεγκραντέ σε όλα τα κουμπιά σας; Ή το μέγεθος ενός περιγράμματος; Τι γίνεται με την αλλαγή από τετράγωνες γωνίες σε στρογγυλεμένες 2px; Στο Photoshop, αυτό μπορεί να διαρκέσει ώρες και πρέπει να τον κωδικοποιήσετε. Η δυνατότητα σχεδιασμού σε κώδικα βοηθά στην αποφυγή της επιστροφής στο Photoshop για επανάληψη της οπτικής σχεδίασης. Όταν μετακινείτε αυτές τις αλλαγές προς τα πάνω σε κώδικα, χρησιμοποιώντας CSS3 και Sass (τα οποία θα καλύψω αργότερα σε αυτό το άρθρο), μπορούν να συμβούν σε πραγματικό χρόνο και χρειάζονται μόνο λίγα λεπτά.

Γρηγορότερος χρόνος για εκκίνηση

Με τα χρόνια, καθώς άλλαξα περισσότερο από τη ροή εργασίας του σχεδιασμού μου προς τα πάνω σε κώδικα, γνώρισα μια πραγματική βελτίωση - περίπου 20 έως 30% μείωση του χρόνου στην αγορά. Όσο περισσότερο το κάνω αυτό, τόσο λιγότερο χρόνο ξοδεύω τις προσπάθειες αναπαραγωγής. Ξοδεύω λιγότερους κύκλους πηγαίνοντας στο Photoshop ή στο Fireworks και μετά επαναλαμβάνω την εργασία σε κώδικα.

Σε κάποιο σημείο ο σχεδιασμός πρέπει να διασυνδεθεί με κάποιο είδος backend, είτε πρόκειται για μια εφαρμογή CMS, Rails ή κάτι άλλο. Δεδομένου ότι το μεγαλύτερο μέρος του σχεδιασμού μου είναι σε κώδικα, η ολοκλήρωση γίνεται νωρίτερα από αργότερα. Πριν από μερικά χρόνια, ένας από τους πελάτες μου, το PointRoll, πήγε από το πρωτότυπο στην παραγωγή σε πέντε ημέρες.

Γιατί HTML5;

Το HTML5 είναι ευκολότερο από τις προηγούμενες εκδόσεις του HTML. Πάρτε για παράδειγμα τη δήλωση τύπου εγγράφου. Σε προηγούμενες εκδόσεις HTML, το ΕΓΓΡΑΦΗ έμοιαζε κάπως έτσι:

! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

Και υπήρχαν έξι διαφορετικές εκδόσεις. Ευτυχώς το HTML5 ΕΓΓΡΑΦΗ μοιάζει με αυτό:

! DOCTYPE HTML>

Σοβαρά. Αυτό είναι. Σοκαριστικά απλό.

Κατά τη δημιουργία μιας τυπικής σελίδας HTML, υπάρχουν ορισμένα κοινά στοιχεία, όπως μια κεφαλίδα, κύρια περιοχή περιεχομένου, πλευρική γραμμή και υποσέλιδο. Είμαι βέβαιος ότι έχετε δει κάτι τέτοιο στο παρελθόν:

div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>

Τίποτα από το συνηθισμένο εκεί. Αλλά μόλις συμπληρωθεί με περιεχόμενο, αυτό το πρότυπο μετατρέπεται σε σούπα div. Αντίθετα, με τα νέα σημασιολογικά στοιχεία του HTML5, μπορείτε να κάνετε κάτι πιο απλό και πιο εύκολο στη σάρωση, όπως αυτό:

κεφαλίδα> nav> / nav> / κεφαλίδα> άρθρο> άκρη> / άκρη> / άρθρο> υποσέλιδο> / υποσέλιδο>

Κοίτα αυτό. Κάτι που έχει νόημα.

Το μαγικό χαρακτηριστικό δεδομένων

Το HTML5 έρχεται με ένα άλλο φοβερό άγκιστρο που σας δίνει τη δυνατότητα να δημιουργήσετε το δικό σας σημασιολογικό νόημα: το δεδομένα-. Προηγουμένως, εάν θέλετε να εκχωρήσετε κάτι σημαντικό σε ένα στοιχείο DOM, περιορίζατε τα αναγνωριστικά, τις τάξεις και τους ρόλους.

Δυστυχώς, τα αναγνωριστικά πρέπει να είναι μοναδικά. Τα μαθήματα είναι καθολικά (yippee!), Αλλά η χρήση τους μπορεί γρήγορα να γίνει χάος. Οι ρόλοι είναι ένα μη χρησιμοποιημένο περιουσιακό στοιχείο που παρέχει σημαντική σημασία για την ARIA. Πρόσφατα, χρησιμοποιώ δεδομένα - για μια πλατφόρμα ανάλυσης παρακολούθησης συμβάντων που αναπτύσσουμε στο Inflection.Είμαστε μεγάλοι θαυμαστές που δοκιμάζουν τα σχέδιά μας. Όταν εργαζόμαστε σε εφαρμογές ή σελίδες που έχουν μεγάλη αλληλεπίδραση, θα θέλαμε να έχουμε πιο αναλυτικές πληροφορίες σχετικά με την αφοσίωση των πελατών στη σελίδα.

Εισάγετε το δεδομένα-. Με αυτό μπορείτε να αντιστοιχίσετε, να περάσετε και να συνδεθείτε με ένα μοντέλο «καθορισμού του δικού σας». Έτσι, για παράδειγμα, μπορείτε να το κάνετε αυτό:

input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "εγγραφή τύπος εισαγωγής = "button" data-id = "Linkedin" dataregion = "main" data-event = "register">

Μπορούμε να επισυνάψουμε έναν ακροατή με JavaScript στη σελίδα και κάθε φορά που ένας πελάτης αιωρείται, ή κάνοντας κλικ σε αυτό το κουμπί, μπορούμε να παρακολουθούμε αυτήν τη δραστηριότητα. Αντί να μπορούμε να παρακολουθούμε μόνο ότι κάποιος εγγράφηκε μέσω OAuth στο Twitter, μπορούμε να δούμε ότι αιωρήθηκε πάνω από το Facebook, μετά το Twitter, μετά το LinkedIn και τελικά αποφάσισαν να επιλέξουν το Twitter για το μοντέλο OAuth.

Φανταστείτε να το επεκτείνετε σε έναν ιστότοπο όπως το Pinterest ή στο νέο σχεδιασμό Myspace όπου οι πελάτες μεταφέρουν και ρίχνουν πλακίδια για να τα αναδιατάξουν βάσει ενδιαφέροντος. Ή ενδεχομένως να κρύβετε πλακίδια που δεν τους ενδιαφέρουν δεδομένα- Το χαρακτηριστικό σας επιτρέπει να επισυνάψετε ή να αντιστοιχίσετε ένα επιπλέον επίπεδο σημασιολογικής σημασίας σε πράγματα που μπορείτε να ορίσετε. Για ιστότοπους και εφαρμογές που βασίζονται σε μεγάλο βαθμό στο Ajax ανοίγει απεριόριστες ευκαιρίες.

CSS3 - είναι το νέο Photoshop

Το CSS3 έφερε ένα εντελώς νέο επίπεδο σχεδίασης εμφάνιση και αίσθηση που απαιτούσε εικόνες φόντου, φέτες και την περίφημη τεχνική «συρόμενων πορτών». Ευτυχώς, αυτό είναι όλο το παρελθόν.

Ας ρίξουμε μια ματιά στο να φτιάξουμε ένα φανταχτερό κουμπί με γραμμική κλίση, στρογγυλεμένες γωνίες, σκιά κειμένου που του δίνει ένα ωραίο εφέ τύπου γράμματος και μια λάμψη στο αιωρούμενο. Η εκμάθηση αυτών των τεχνικών θα προχωρήσει πολύ. Καθένα από αυτά μπορεί να χρησιμοποιηθεί ανεξάρτητα, ή σε διάφορους συνδυασμούς για να τραβήξει σχεδόν οποιαδήποτε από τις τρέχουσες οπτικές θερμές τάσεις στον ιστό σήμερα.

Αρχικά, ας κάνουμε μερικές προσαρμογές στην προεπιλογή κουμπί> και τύπος εισαγωγής = "υποβολή"> στοιχεία. Υποθέτοντας ότι χρησιμοποιείτε μία από τις τυπικές επαναφορές CSS, θα προσθέσουμε απλώς ένα μικρό μέγεθος και χώρο αναπνοής.

/ * Κουμπιά κουμπιών, των οποίων τα κουμπιά. ======================================= * * / κουμπί, είσοδος [type = "submit"] {ύψος: 2.7em; επένδυση: .4em .7em; ύψος γραμμής: 1,9; }

Πρωτότυπο: Τα κουμπιά και οι εισόδους που υποβάλλονται μπορεί να είναι δύσκολο να επανασχεδιαστούν. Έχω διαπιστώσει ότι προσαρμόζοντας το ύψος της γραμμής σε 1,6 ή μεγαλύτερο, μπορείτε να αποφύγετε το χάσιμο της ανάγκης ενός επιπλέον div ή span μέσα στο κουμπί> ετικέτα.

Τώρα "διορθώσαμε" το πρόβλημα των κουμπιών μας, μπορούμε να δημιουργήσουμε ένα .btn μάθημα για να μας δώσει ένα ωραίο καθαρό κουμπί με στρογγυλεμένες γωνίες, γραμμική κλίση, περίγραμμα, και αυτή η γραμματοσειρά.

.btn {display: inline-block; περίγραμμα: 1px στερεό # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; ακτίνα περιγράμματος: 4px; επένδυση: .4em .7em; φόντο: # edeff2; φόντο: -webkit-gradient (γραμμικό, 0% 0%, 0% 100%, από (#fefefe), color-stop (0,55, # edeff2), έως (# e4e6e9)); φόντο: -moz-linear-gradient (κεντρική κορυφή, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160.172.187, .7) 0 0 .2em 0; box-shadow: rgba (160.172.187, .7) 0 0 .2em 0; χρώμα: # 6c7786; μέγεθος γραμματοσειράς: 1.1em; text-shadow: #fefefe 1px 0 1px; ύψος γραμμής: 1.375em δρομέας: δείκτης; }

Και μετά ένα ωραίο εφέ αιωρήματος με μια λεπτή λάμψη χρησιμοποιώντας το κουτί-σκιά μέθοδος:

.btn: hover, .btn: εστίαση {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2 εικονοστοιχεία; φόντο: # e6e9eb; φόντο: -webkit-gradient (γραμμικό, 0% 0%, 0% 100%, από (# f7f7f7), color-stop (0,55, # f6f6f7), έως (# e6e9eb)); φόντο: -moz-lineargradient (κεντρική κορυφή, # f7f7f7, # f6f6f7 55%, # e6e9eb); χρώμα: # 45484b; κείμενο-σκιά: rgb (255,255,255) 1px 1px 0; περίγραμμα-χρώμα: # c9c9c0; }

Τώρα, δεν είμαι οπαδός της γραφής του γραμμικού κώδικα κλίσης. Είναι μακρύ και μπερδεμένο. Όπως μπορείτε να δείτε, έχω συμπεριλάβει μόνο την έκδοση για -Μοζ, -webkit, και το τυπικό μοντέλο. Εάν θέλετε να συμπεριλάβετε εκδόσεις -o και -ms, θα πρέπει να διπλασιάσετε τον κωδικό.

Υπάρχουν δύο άλλες επιλογές. Το ένα είναι μια γεννήτρια CSS3. Υπάρχουν πολλά διαθέσιμα στον Ιστό, συμπεριλαμβανομένου του ColorZilla. Αλλά αν θέλετε να ανεβάσετε λίγο το παιχνίδι σας, σκεφτείτε να βουτήξετε στο Sass: σε συνδυασμό με το Compass, είναι θεό.

Sass + Compass: μαγικά νόστιμο

Μπορείτε να σταματήσετε να ελπίζετε για την έκδοση CSS4 unicorn. Είναι εδώ και ονομάζεται Sass + Compass. Το Sass σημαίνει Syntactically Awesome Stylesheets: κληρονομείτε όλα τα παραδοσιακά οφέλη του CSS3 με τις πρόσθετες χαρές μεταβλητών, mixins, extender και άλλων καλούδων.

Πρόσφατα έφτιαξα ξανά ένα αρχείο CSS 5.000 γραμμών που είχε περισσότερες από 30 παραλλαγές στην ίδια απόχρωση του μπλε. Με το Sass, αντικατέστησα κάθε παραλλαγή με αυτόν τον κωδικό:

χρώμα: μπλε $;

Με τον ορισμό $ μπλε στο δικό μου _variables.scss αρχείο, μπορώ να δημιουργήσω ένα προεπιλεγμένο χρώμα στο οποίο μπορεί να αναφέρεται κάθε αρχείο CSS ή SCSS. Όποιος γράφει CSS μπορεί να χρησιμοποιήσει $ μπλε και δεν χρειάζεται να ανησυχείτε για τη χρήση ενός σταγονόμετρου, την εύρεση ενός δεκαεξαδικού κώδικα, ή το χρώμα RGB, RGBA ή HSL.

Θυμάστε αυτόν τον γραμμικό κώδικα ντεγκραντέ; Αντί να γράφετε πολλές γραμμές κώδικα, τι γίνεται με αυτό:

@ συμπερίληψη φόντου (γραμμική-κλίση (# b1cfdc, # 7a9cac));

Αφήστε το Sass και το Compass να κάνουν τη βαριά ανύψωση και να δημιουργήσουν τη σωστή σύνταξη για εσάς: ολοκληρωμένο. Ας υποθέσουμε ότι θέλετε μια πιο σκούρα ή ελαφρύτερη έκδοση ενός χρώματος. Θα μπορούσατε να μετακινήσετε το σταγονόμετρο γύρω από το Photoshop ή απλά να χρησιμοποιήσετε τις εντολές φωτισμού / σκουρότητας στο Sass:

@ συμπερίληψη φόντου (γραμμική-κλίση (σκουρόχρωμο ($ litegray, 2%), σκουρόχρωμο ($ υπόλευκο, 5%)));

Αυτό θα δημιουργήσει μια γραμμική κλίση με 2% σκοτεινό $ lite-γκρι και 5% σκοτεινιάστηκαν υπόλευκο. Χαμήλα! Δεν χρειάζεστε καν τους κωδικούς HEX ή RGB.

jQuery: ω, ναι μπορείτε

Έχω μια ομολογία να κάνω. Το JavaScript χρησιμοποιήθηκε για να με εκφοβίσει. Τότε βρήκα το jQuery. Δεν θα ισχυριστώ ότι είμαι γκουρού JavaScript, αλλά είμαι πολύ σίγουρος ότι μπορώ να κάνω σχεδόν κάθε είδους μετάβαση ή λειτουργία που χρειάζομαι για να χρησιμοποιήσω το jQuery.

Πάρτε, για παράδειγμα, τη δυνατότητα εμφάνισης δευτερεύοντος αριθμού τηλεφώνου στην οθόνη κάνοντας κλικ σε έναν σύνδεσμο Προσθήκη νέου αριθμού. Χρησιμοποιώντας το jQuery, γράφετε απλώς αυτό:

// - Προοδευτική αποκάλυψη - // $ ('. New-number'). Click (function () {$ ('. Alt-number'). FadeIn ("fast");});

Ψάχνετε κάτι πιο προηγμένο; Υπάρχει πιθανώς μια προσθήκη για αυτό. Οι βασικές συμπεριφορές είναι εύκολες και οι πολύπλοκες είναι προσβάσιμες με το jQuery.

Πλαίσια

Δύο από τα πιο ισχυρά πλαίσια σήμερα είναι το Foundation and Bootstrap. Τώρα, προτού απορρίψετε τα πλαίσια CSS, επιτρέψτε μου να σας ρωτήσω κάτι. Χρησιμοποιείτε το jQuery; Ruby on Rails; Τζάνγκο; Όλα τα πλαίσια.

Ακριβώς όπως το jQuery και το RoR, το Foundation και το Bootstrap γεννήθηκαν από την αναγνώριση ότι υπάρχουν αρκετά πράγματα που κάνουμε ξανά και ξανά (όπως επαναφορά, τυπογραφία, πλέγματα, φόρμες, κουμπιά, πλοήγηση και λίστες). Το Foundation και το Bootstrap προσφέρουν και τα δύο υποστήριξη για ανταποκρινόμενα σχέδια μέσω της χρήσης τάξεων βοηθού. Και τα δύο είναι καλά τεκμηριωμένα και έχουν δοκιμαστεί στο δρόμο, ώστε να μπορείτε να τα χρησιμοποιήσετε με αυτοπεποίθηση.

Μία βασική διαφορά μεταξύ των δύο: Το Bootstrap βασίζεται στο σύστημα LESS για προεπεξεργασία CSS, ενώ το Foundation βασίζεται στο Sass. Προτιμώ το Sass από το LESS λόγω των πρόσθετων δυνατοτήτων του, αλλά και το Sass και το LESS σκουπίζουν το παραδοσιακό CSS σε κομμάτια.

Μια τελευταία σκέψη για τα πλαίσια. Για όσους δεν θέλουν να κληρονομήσουν το επιπλέον φούσκωμα του πλαισίου κάποιου άλλου, σκεφτείτε να επιλέξετε ένα υπάρχον και να το αφαιρέσετε στα γυμνά οστά ή να μαζέψετε κεράσι από μερικά για να κυλήσετε τα δικά σας. Σε κάθε περίπτωση, δεν υπάρχει κανένας λόγος να ξεκινάτε από το μηδέν κάθε φορά.

Τελικές σκέψεις

Θέλετε μεγαλύτερο έλεγχο σχετικά με τον τρόπο με τον οποίο τελικά τελειώνει το σχέδιό σας; Μετακινήστε περισσότερες διαδικασίες προς τα πάνω στον κώδικα. Η HTML5 επιτέλους δίνει νόημα στο DOM. Καλή απαλλαγή σε παράλογο ΕΓΓΡΑΦΗs και divitis. Το CSS3 είναι το νέο Photoshop: γραμμικές ντεγκραντέ, περίγραμμα ακτίνων και σκιές κουτιού FTW! Και με εργαλεία όπως το Bootstrap, το Foundation, το Sass και το jQuery, η μετακίνηση του σχεδιασμού προς τα πάνω στον κώδικα δεν ήταν ποτέ πιο εύκολη.

Ανακαλύψτε 55 εκπληκτικά παραδείγματα HTML5 στο Creative Bloq.