HTML5 και CSS3: Συρματοποίηση στο τελικό προϊόν
Είναι μια κλασική περίπτωση του Photoshop έναντι του ιστότοπου. Τα υπάρχοντα εργαλεία πλαισίωσης και πρωτοτύπων δεν είναι σε θέση να αντανακλούν με ακρίβεια το περιβάλλον του ιστού.
Παράγουν στατικά σχέδια τα οποία δεν μπορούν να δουν μέσα από τη μεταβλητή που είναι γνωστή ως πρόγραμμα περιήγησης ιστού. Και όταν χτίζετε τον τελικό ιστότοπο, ορισμένα στοιχεία δεν θα φαίνονται ακριβώς όπως τα σχέδια των ομολόγων τους, και ο πελάτης θα παρατηρήσει αυτές τις μικρές διαφορές στις γραμματοσειρές, την τοποθέτηση κλπ.
Μπορεί να είστε πιο άνετοι με ένα πρόγραμμα γραφικών και να κάνετε τις επαναλήψεις του σχεδιασμού να φαίνεται να διαρκούν περισσότερο εάν πρέπει να κωδικοποιήσετε το HTML.
Ωστόσο, τα πλεονεκτήματα της δημιουργίας ενός wireframe στην HTML από την αρχή αρχίζουν να αντισταθμίζουν τις εναλλακτικές λύσεις: όχι μόνο έχουμε νέα στοιχεία διαμόρφωσης σε HTML5 και ισχυρότερους επιλογείς και στυλ στο CSS3, αλλά συνδυάζοντας τους, μπορούμε να πετάξουμε μαζί ένα απλό διάταξης γρήγορα.
Ακούμε μια νέα εταιρεία καθημερινά ( 37Σήματα , Atomiq και οι υπολοιποι ) εξηγεί την υιοθέτησή του πρωτοτύπου HTML. Ο κύριος λόγος είναι ότι η διαδικασία είναι εκπληκτικά εύκολη όταν έχετε τα κατάλληλα εργαλεία στη θέση της. Είστε έτοιμοι να μάθετε πόσο εύκολη είναι αυτή η διαδικασία και όταν τελειώσετε, θα έχετε ένα ξεκίνημα για την επόμενη σας κατασκευή.
Γρήγορη διάταξη με HTML5
Το HTML5 φέρνει ένα σύνολο εξαιρετικών νέων δομικών στοιχείων που διευκολύνουν τη γρήγορη απομίμηση ενός εγγράφου με λιγότερες κατηγορίες και αναγνωριστικά. Μόλις κατανοήσετε τον σκοπό αυτών των στοιχείων, θα είστε σε θέση να δημιουργήσετε μια τραχιά διάταξη σελίδας μέσα σε λίγα λεπτά.
Αν δεν είστε εξοικειωμένοι με αυτά τα νέα στοιχεία, εδώ είναι μια γρήγορη εισαγωγή. Τα νέα στοιχεία παρέχουν μια πιο καθαρή δομή εγγράφων από πριν, ενώ σας απελευθέρωσαν για να απομακρυνθείτε από τη βαριά χρήση των divs. Ο Lachlan Hunt περιγράφει αυτά τα στοιχεία ωραία στο " Μια προεπισκόπηση της HTML5 ":
- ο
articleστοιχείο αντιπροσωπεύει ένα ανεξάρτητο τμήμα ενός εγγράφου, σελίδας ή ιστότοπου. Είναι κατάλληλο για περιεχόμενο όπως ειδήσεις και δημοσιεύσεις ιστολογίου, αναρτήσεις φόρουμ και μεμονωμένα σχόλια. - ο
sectionστοιχείο αντιπροσωπεύει ένα γενικό τμήμα ενός εγγράφου ή μιας εφαρμογής, όπως ένα κεφάλαιο. - ο
headerστοιχείο αντιπροσωπεύει την κεφαλίδα μιας ενότητας. Οι κεφαλίδες μπορούν να περιέχουν κάτι περισσότερο από την επικεφαλίδα του τμήματος. για παράδειγμα, θα ήταν εύλογο να συμπεριληφθούν υπο-τίτλοι, πληροφορίες ιστορικού εκδόσεων και χορτάρια. - ο
navστοιχείο αντιπροσωπεύει ένα τμήμα συνδέσμων πλοήγησης. Είναι κατάλληλο τόσο για πλοήγηση στον ιστότοπο όσο και για πίνακα περιεχομένων. - ο
asideτο στοιχείο είναι για περιεχόμενο που σχετίζεται εφαπτομενικά με το περιεχόμενο γύρω από αυτό και είναι χρήσιμο για την επισήμανση πλευρικών λωρίδων. - ο
footerστοιχείο αντιπροσωπεύει το υποσέλιδο ενός τμήματος. Περιλαμβάνει χαρακτηριστικά στοιχεία σχετικά με αυτήν την ενότητα, όπως το όνομα του συντάκτη, συνδέσμους σε σχετικά έγγραφα και δεδομένα πνευματικών δικαιωμάτων.
Στην ιστοσελίδα του παραδείγματος μου, θέλω μια κεντρική σελίδα, με μια κεφαλίδα, μια πλαϊνή μπάρα στα αριστερά, μια περιοχή για το κύριο περιεχόμενο και ένα υποσέλιδο. Έχω χρησιμοποιήσει στοιχεία HTML5 για να επισημάνω τη δομή, με ένα article στοιχείο για να περιέχει τα πάντα.
Example Αυτά τα στοιχεία και οι διαιρέσεις είναι αδιάστατες και αόρατες, εκτός αν ορίσετε ιδιότητες στυλ ή τοποθετήσετε περιεχόμενο σε αυτά. Για να καταστούν λειτουργικά, πρέπει να τους αναθέσουμε προσωρινά τα ύψη. Πρέπει επίσης να ορίσουμε τα στοιχεία HTML σε display: block; έτσι ώστε το πρόγραμμα περιήγησης να τα αναγνωρίζει (απαιτείται επιπλέον εργασία για τον IE).
article, header, nav, aside, section, footer {display: block;min-height: 100px; }Πριν τοποθετήσουμε τα στοιχεία, πρέπει να μπορέσουμε να απεικονίσουμε τη διάταξη. Η ιδανική λύση για την απεικόνιση της δομής χωρίς περιεχόμενο θα ήταν εύκολο να καταργηθεί αργότερα και δεν θα επηρέαζε τον σχεδιασμό.
Επιλογή 1: Περιγράμματα
Το περίγραμμα η ρύθμιση είναι συμβατή με όλα τα σύγχρονα προγράμματα περιήγησης και δεν επηρεάζει το πλάτος των στοιχείων, ενώ το border χαρακτηριστικό.
article, header, nav, aside, section, footer {outline: 1px solid #000; }
Επιλογή 2: HSLa
Το HSLa (ή ακόμα και το RGBa) σας δίνει μια καλύτερη αντιπροσώπευση της ιεραρχίας των στοιχείων, επειδή η αδιαφάνεια θα κάνει τα επικαλυπτόμενα στοιχεία να φαίνονται πιο σκούρα. Αλλά αν σκοπεύετε να έχετε βασικά χρώματα φόντου στη μακέτα, τότε αυτή η μέθοδος μπορεί να μην λειτουργεί καλά.
article, header, nav, aside, section, footer {background: hsla(200, 30%, 30%, .4); }
Θέση
Η μέθοδος για την τοποθέτηση στοιχείων είναι θέμα προσωπικής προτίμησης και έχετε πολλές επιλογές: εργαλεία μέτρησης στο πρόγραμμα περιήγησης ή το λειτουργικό σύστημα, εικόνες πλέγματος φόντου (που έχω επιλέξει), πλαίσια CSS με βοήθεια πλέγματος και διάταξης ή λογισμικό όπως Dreamweaver. Η τοποθέτηση είναι το πιο σημαντικό κομμάτι και θα πρέπει να λειτουργήσει σωστά από την αρχή. Ο κώδικας που γράφετε εδώ πιθανότατα να παραμείνει στο τελικό προϊόν.
Στο παράδειγμά μου, έχω δώσει στη σελίδα ένα σταθερό πλάτος, με μια πλαϊνή μπάρα στα αριστερά και το περιεχόμενο στα δεξιά, τόσο μεταξύ της κεφαλίδας και του υποσέλιδου.
body > article {width: 760px;margin: 0 auto; }article article {overflow: hidden;width: 750px;margin: 20px 0;padding: 5px; }aside {width: 150px;float: left; }section {float: right;width: 590px; }Σε όλη τη διαδικασία, μπορώ να δω κάθε τμήμα και να δω πού θα εμφανιστεί. Εδώ είναι το αποτέλεσμα:
Μην ανησυχείτε για τη συμβατότητα του προγράμματος περιήγησης μέχρι να φτάσετε στο τελικό προϊόν. Συνιστούμε ανεπιφύλακτα να αφήνετε σημειώσεις μέσω σχολίων CSS, επισημαίνοντας ποιες περιοχές θα πρέπει να επιστρέψετε (οι οποίες θα είναι κατά κύριο λόγο οι επιλογείς και τα χαρακτηριστικά που απαιτούν πρόσθετη φροντίδα για συγκεκριμένα προγράμματα περιήγησης).
Πρωτότυπο περιεχόμενο
Όταν ολοκληρωθεί η διάταξη, μπορεί να χρειαστεί να προσθέσετε δείγμα περιεχομένου. Η πιο συνηθισμένη μέθοδος σήμερα είναι να ρίχνετε κομμάτια του Lorem Ipsum και υδατογράφημα stock στη σελίδα. Γιατί να επανεφεύρουμε τον τροχό;
HTML Ipsum είναι μια εξαιρετική ιστοσελίδα που αναδιπλώνει το κείμενο Lorem Ipsum σε κοινή προσθήκη. Η κατοχή όλων των στοιχείων σε μια σελίδα δεν θα μπορούσε να είναι ευκολότερη.
PlaceHold.it προσφέρει εικόνες με σύμβολα κράτησης θέσης σε οποιοδήποτε μέγεθος χρειάζεστε καλώντας κάθε εικόνα μέσω μιας αίτησης URL (όπως π.χ. http://placehold.it/350x150 , όπου η πρώτη τιμή είναι το πλάτος και η δεύτερη το ύψος):
PlaceKitten λειτουργεί ακριβώς όπως το PlaceHold.it, εκτός από τις εικόνες με πιο ευχάριστες εικόνες:
Αντί να προσθέτετε προηγμένο JavaScript για τους χάρτες, μπορείτε να τραβήξετε έναν βασικό χάρτη ως εικόνα μέσω Στατικά Χάρτες Google . Απαιτείται ένα κλειδί API ή μοναδική υπογραφή, αλλά θα πρέπει να το πάρετε ούτως ή άλλως εάν το τελικό προϊόν περιέχει ένα χάρτη.
Προσομοίωση συμπεριφοράς
Οι σύγχρονες ιστοσελίδες περιέχουν λειτουργίες που είναι δύσκολο να επικοινωνούν μέσω στατικών κορνιζών: επεκτάσεις και συρρικνούμενα στοιχεία, μεταβάσεις, μεταφορά και απόθεση, δυναμικά μενού κλπ. Θα χρειαστεί να χρησιμοποιήσετε τελικά μια βιβλιοθήκη JavaScript, έτσι ώστε να φορτώσετε τώρα μια βιβλιοθήκη και scripting σε μερικά η βασική λειτουργικότητα δεν θα έβλαπτε.
Μπορείτε να αποφύγετε τη λήψη μέσω της φόρτωσης του jQuery από το δίκτυο περιεχομένου του. Μιμηθείτε την επιδιωκόμενη συμπεριφορά με μερικές λειτουργίες αντί να γράψετε τον πραγματικό κώδικα. Για παράδειγμα, εάν ένα στοιχείο πρέπει να εμφανίζεται όταν κάνετε κλικ σε ένα σύνδεσμο (για παράδειγμα, ένα παράθυρο σύνδεσης ή μια φόρμα επικοινωνίας), τότε δημιουργήστε ένα γρήγορο πλαίσιο του παραθύρου, αποκρύψτε το από προεπιλογή και, στη συνέχεια, χρησιμοποιήστε το jQuery για να το αποκαλύψετε με κλικ.
Εφόσον το μόνο που χρειάζεται να κάνετε για να μιμηθείτε τη συμπεριφορά, ο πελάτης θα είναι σε θέση να δει το αποτέλεσμα για τον εαυτό του, αντί να χρειαστεί να χύσει μια σειρά χαρτών ροής ή εξηγήσεων.
Προσομοίωση καταστάσεων
Εάν δημιουργείτε πλαίσια κορνίζας για μια εφαρμογή ιστού αντί για έναν ιστότοπο, ίσως θελήσετε να εμφανίσετε γρήγορα αρκετές καταστάσεις μιας σελίδας. Θα μπορούσατε να δημιουργήσετε διαφορετικά αντίγραφα του συρμάτινου πλαισίου, το καθένα από τα οποία άλλαξε για να εμφανίσετε μια συγκεκριμένη κατάσταση ή θα μπορούσατε να χρησιμοποιήσετε PolyPage .
Το PolyPage είναι ένα plug-in jQuery που σας δίνει τη δυνατότητα να χρησιμοποιήσετε τάξεις στο σημείωμά σας για να αντιπροσωπεύετε στοιχεία που θα ήταν διαθέσιμα για διαφορετικές καταστάσεις (για παράδειγμα, συνδεδεμένα και αποσυνδεδεμένα). Μπορείτε να μεταβείτε σε κάθε κράτος με ένα σύνδεσμο, βοηθώντας έτσι να αποτυπώσετε εύκολα τις διαφορές στον πελάτη χωρίς να χρειάζεται αρκετές σελίδες.
Τελικές σκέψεις
Ενώ τα αρχικά σχέδια πάντοτε φαίνονται πανέμορφα σε χαρτί ή σε PDF, η κατασκευή των σελίδων HTML από την αρχή έχει αρκετά πλεονεκτήματα.
Εξοικονομήστε το χρόνο που θα ξοδέψατε αναδημιουργώντας το σχέδιο σε κώδικα. Αποφεύγετε τη σύγχυση να αναρωτιέστε γιατί το τελικό προϊόν δεν μοιάζει ακριβώς με το πρωτότυπο. Και εξοικονομείτε τόσο εσείς όσο και τον πελάτη χρόνο, χρήματα και νεύρα.
Ο Michael Botsko είναι εκπαιδευτής ιστοσελίδων και εκπαιδευτής τεχνολογίας Ιστού στο Πόρτλαντ του Όρεγκον. Του αρέσει να εργάζεται τόσο στον πελάτη όσο και στον πελάτη ανοιχτή πηγή έργα με Botsko.net , LLC. Όταν δεν εργάζεται, απολαμβάνει να περάσει χρόνο με τα δύο παιδιά του και την υπέροχη σύζυγό του.
Ποια εργαλεία ταχείας διάταξης και προτυποποίησης παραβλέψα; Ποια είναι τα πλεονεκτήματα του σχεδιασμού και της κατασκευής αργότερα;