Μια υπόθεση για την κωδικοποίηση των συρμάτων σας

Η εργασία ως σχεδιαστής μέρα με τη μέρα μπορεί να είναι επίπονη. Ευτυχώς, το πεδίο έχει επεκταθεί και έτσι η διαδικασία έχει γίνει πιο απλή. Πολλά δωρεάν εργαλεία και πόροι είναι έξω εκεί.

Τα συρματοπλέγματα φέρνουν την κομψότητα να σχεδιάζουν μακέτες. Πρόκειται για τη βασική δομή μιας ιστοσελίδας, αφαιρώντας τα χρώματα και τις βελτιώσεις.

Χρησιμοποιούνται για να δουν τις έννοιες σχεδιασμού μόνο με τα βασικά στοιχεία και μπορούν να δώσουν μια χρήσιμη προοπτική σε κάθε έργο.

Τα περισσότερα wireframes δημιουργούνται σε σουίτες λογισμικού όπως το Adobe Photoshop και το Fireworks, αλλά μερικοί ιστότοποι σάς επιτρέπουν να δημιουργείτε εικόνες από wireframe απευθείας στο πρόγραμμα περιήγησης.

Σε αυτή την ανάρτηση, θα προχωρήσουμε στην κωδικοποίηση μιας βασικής εικόνας wireframe σε HTML και CSS και θα δούμε πώς μπορεί να ωφεληθεί η δημιουργική διαδικασία.

Γιατί να ασχοληθούμε;

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

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

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

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

Πρωτότυπο κορδέλες σε κώδικα

Για χρόνια, το λογισμικό σχεδίασης Adobe αποτελεί την κορυφαία σουίτα για τη δημιουργία wireframe, αλλά ο ιστός έχει υποστεί ουσιαστικές αλλαγές και εξακολουθεί να εξελίσσεται.

Η άνοδος των προτύπων κωδικοποίησης και η αύξηση του Τεκμηρίωση HTML5 είναι μεγάλα βήματα προς ένα κοινό ιστό. Τώρα, η κωδικοποίηση ενός βασικού πλαισίου συρραφής σε HTML και CSS δεν είναι άλλο έργο παρά η αντιμετώπιση της εργασίας στο Fireworks.

Με τα wireframes, μπορείτε να επιτεθείτε σε ένα project head-on από πολλές γωνίες. Μπορείτε ακόμα να ελέγξετε τη συμβατότητα με τις τεχνικές και τα προγράμματα περιήγησης CSS2 και CSS3. Τα πράγματα δεν χρειάζεται να είναι σύνθετα στην αρχή. ένα wireframe χρησιμεύει απλώς ως ένα στερεό θεμέλιο για να ξεκινήσει η κωδικοποίηση.

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

Τυποποιήστε τον κώδικα για το Long Haul

Τα συρματοπλέγματα εξοικονομούν χρόνο στη διαδικασία ανάπτυξης. Εάν τα στυλ CSS για τα βασικά στοιχεία σας είναι ήδη γραμμένα, τότε το υπόλοιπο είναι απλώς πλήρωσης (σημαντικό υλικό πλήρωσης, το μυαλό σας).

Ξεκινήστε σωστά, με τον σωστό τύπο εγγράφου HTML και δομή καταλόγου. Οι τύποι εγγράφων δεν είναι πολύ διαφορετικοί μεταξύ τους. Μπορείτε να διαβάσετε σχετικά με αυτά στο Σελίδα W3C Specs . Δεν έχουν σημασία στο παλιό μοντέλο του World Wide Web, αλλά το HTML5 είναι λεπτομερές και επιτρέπει στον ιστότοπό σας να μεγαλώνει.

Πρέπει να δοκιμάσετε συμβατότητα σε όσο το δυνατόν περισσότερα λειτουργικά συστήματα και προγράμματα περιήγησης, και το στάδιο πρωτότυπου wireframe είναι ο ιδανικός χρόνος για να το κάνετε αυτό, επειδή εσείς είστε ήδη επικεντρωμένος στην οργάνωση της διάταξης.

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

Ξεκινώντας τη δομή του δομικού πλαισίου εγγράφων

Ο καλύτερος τρόπος για να ξεκινήσετε είναι με ένα κενό σχιστόλιθο, επειδή σας προσφέρει την πιο δημιουργική. Τα προφανή στοιχεία που πρέπει να συμπεριληφθούν στον κώδικα (όπως σε οποιοδήποτε άλλο έγγραφο ιστού) είναι html , head και body .

Αυτός είναι ο σκελετός. Θα χρειαστείτε μερικά ακόμα στοιχεία για να φαίνεται καλές το wireframe. ο div (ή διαίρεση) είναι αξιοσημείωτη. Αυτό είναι το στοιχείο που χρησιμοποιείται για την τοποθέτηση ορισμένων περιοχών της σελίδας, όπως το λογότυπο ή το πλαίσιο αναζήτησης.

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

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

Δουλεύοντας με header και footer Στοιχεία

Θα παρατηρήσετε στο παραπάνω παράδειγμα ότι χρησιμοποίησα ένα div με αναγνωριστικό header για να διαχωρίσω την πλοήγηση τίτλων μου. Αυτό είναι απολύτως αποδεκτό και τίποτα δεν είναι λάθος με τον παραπάνω κώδικα. Ωστόσο, το HTML5 μας δίνει άλλες επιλογές.

ο header στοιχείο των νέων προδιαγραφών HTML5 σας επιτρέπει να καθορίσετε περαιτέρω τη δομή σας, η οποία είναι χρήσιμη κυρίως για ανιχνευτές ιστοσελίδων και συσκευές ανάγνωσης οθόνης, οι οποίες διαχωρίζουν ένα τμήμα "τίτλου" από το περιεχόμενο. Δεν πρέπει να κάνει καμιά διαφορά στους χρήστες σας και διατηρεί τον κώδικα του πλοίου και δείχνει ότι καταλαβαίνετε πραγματικά τι μιλάτε.

Ένα άλλο ενδιαφέρον στοιχείο που προστέθηκε είναι footer . Ίδια ιδέα: χρησιμοποιήστε αυτό το στοιχείο αντί του div για να διαχωρίσετε το περιεχόμενο υποσέλιδου σας. Γενικά, τα υποσέλιδα είναι εκτός λειτουργίας και περιέχουν βασικές πληροφορίες σχετικά με τον ιστότοπο ή την εταιρεία.

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

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

Τεχνικές CSS για το στυλ πλαισίων

Αν καταλαβαίνετε το HTML και έχετε συνεργαστεί με τον ιστό για λίγο, τότε ίσως γνωρίζετε κάποια βασικά CSS. Πολλά από τα νέα χαρακτηριστικά του CSS3 είναι για την προσθήκη φανταχτερών στρογγυλεμένων γωνιών και σκιάσεων στο κείμενο.

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

Αν ενδιαφέρεστε για τις νέες ιδιότητες και τους επιλογείς του CSS3, τότε ανατρέξτε στο Webdesigner Depot συλλογή των βελτιώσεων . Περιέχει οδηγούς σε όλο τον ιστό για τις νέες λειτουργίες του CSS3.

Προσθέτωντας clearfix σε Στυλ

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

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

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

Εμφάνιση CSS: Διατήρηση Εξωτερικών Στυλ

Τι να κάνει με την τοποθέτηση CSS είναι μια άλλη σημαντική απόφαση. Οι επαγγελματίες σχεδιαστές ιστοσελίδων και οι προγραμματιστές προτείνουν απλά να διατηρήσετε μια ανεξάρτητη .css αρχείο, ξεχωριστά από τον κώδικα HTML.

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

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

Τα στοιχεία σελίδας παρέχουν περαιτέρω παραδείγματα. Θα κωδικοποιήσετε το div τα δοχεία για το περιεχόμενο και τις πλευρικές κορνίζες, αλλά θα στυλ και θέση τους χρησιμοποιώντας CSS. Για έναν σχεδιαστή, η κατανόηση του τρόπου διαχωρισμού του περιεχομένου και του στυλ είναι το κλειδί για την πλοήγηση των καλωδίων.

Εφαρμογή δυναμικών αντικειμένων θέσης στοιχείου σελίδας

Τα φανταστικά εφέ jQuery και τα στοιχεία ιστού Ajax-ified φαίνεται να είναι οργισμένα. Οι τάσεις μεγαλώνουν και σχεδόν όλες οι δημοφιλείς ιστοσελίδες διαθέτουν κάποιο δυναμικό περιεχόμενο. Είναι σημαντικό να εξεταστεί. Εάν συμπληρώσουν το σχέδιο, γιατί να μην λειτουργούν μπλοκ στο wireframe σας;

Η ανάπτυξη ενός ολόκληρου συστήματος back-end για ένα δυναμικό πλαίσιο σύνδεσης ενδέχεται να μην είναι πρακτικό, αλλά σημειώνοντας ότι οι βιβλιοθήκες JavaScript που χρειάζεστε είναι μια καλή αρχή. Θα μπορούσατε επίσης να δημιουργήσετε κώδικα στυλ που να δομήσουν αυτό το πλαίσιο και να ρυθμίσετε τα πράγματα στη θέση τους για αργότερα, όταν θα προσθέσετε χρώμα και λεπτομέρειες.

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

Κοινά λάθη ανάπτυξης δικτύων

Είναι δύσκολο να πάει στραβά όταν αρχίζετε να κωδικοποιείτε τη βασική δομή μιας ιστοσελίδας, αλλά να έχετε υπόψη σας ορισμένες λεπτομέρειες.

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

Κρατήστε τα πράγματα απλά και σωστά. Η παρατήρηση αυτή είναι ένα συνηθισμένο λάθος και θα παρακωλύσει την ικανότητά σας να τηρείτε τις προθεσμίες. Ένα σύρμα δεν χρειάζεται να είναι σχεδόν τέλειο. Υποτίθεται ότι πρόκειται για ένα περίγραμμα της ιστοσελίδας. Ακόμη και ένα αυστηρά HTML και CSS wireframe θα πρέπει να αποτελείται μόνο από περιγράμματα στοιχείων σελίδας.

Αποφύγετε την παράκαμψη εστιάζοντας στους κύριους στόχους σας. Θυμηθείτε γιατί αρχίσατε τη διαδικασία με wireframe στην πρώτη θέση!

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

ΕΝΑ τόνο άρθρων στον ιστό σχετίζονται με τη διαδικασία κατασκευής καλωδίων. Έχω καλύψει την κωδικοποίηση και την πλευρά ανάπτυξης των πραγμάτων, αλλά για να μάθετε περισσότερα σχετικά με wireframing, συνεχίστε την ανάγνωση. Οι συμβουλές σχεδιασμού είναι εκεί έξω. απλά πρέπει να τα βρείτε!

Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot από Τζέικ Ροσέλ , ένας παθιασμένος σχεδιαστής ιστοσελίδων και ένας ενθουσιώδης κοινωνικός μέσων. Ο Τζέικ αγαπά να διαβάζει και να γράφει για τις τελευταίες τάσεις του ψηφιακού Διαδικτύου και τη δικτύωση στην κοινότητα σχεδιασμού. Ελέγξτε τον έξω στο Twitter @jakerocheleau για περισσότερα σχετικά με το έργο του.

Ποιες είναι οι εμπειρίες σας με τη διαδικασία wireframe; Εργάζεστε πρώτα στον κώδικα ή σε κάποιο άλλο είδος λογισμικού; Τι νομίζετε ότι είναι μερικά οφέλη για το πρωτότυπο στον κώδικα πρώτα;