Κωδικοποίηση σχεδίου ιστού για ταχύτητα και ποιότητα
Η ομορφιά του να είναι ένας σχεδιαστής ιστοσελίδων δημιουργεί ένα λεπτομερές, δημιουργικό και πρωτότυπο σχεδιασμό ιστοσελίδων στο Photoshop , χωρίς να πρέπει να σκέφτεστε (ως επί το πλείστον) πώς θα κωδικοποιηθεί .
Κατά τη διάρκεια της φάσης σχεδιασμού, είναι όλα σχετικά με το βλέμμα , και είτε η κωδικοποίηση μπορεί να ληφθεί μέριμνα αργότερα, είτε να ανατεθεί σε έναν προγραμματιστή.
Είτε έτσι είτε αλλιώς, δεν σκέφτεστε την ανάπτυξη της χρηστικότητας ή της λειτουργικότητας είναι ένας πολύ καλός τρόπος για έναν σχεδιαστή να μην αισθάνονται περιορισμένοι στη διαδικασία σχεδιασμού.
Αυτός είναι ένας πολύ καλός τρόπος σκέψης και μπορεί να οδηγήσει στα καλύτερα σχέδια. Ωστόσο, μόλις χρειαστεί να κωδικοποιηθεί, εμείς ως σχεδιαστές βρισκόμαστε σε ένα δύσκολο σημείο.
Σε αυτό το άρθρο, θα βρείτε μερικές απλές συμβουλές που μπορούν να βοηθήσουν τους σχεδιαστές να μάθουν βασικά τη μετατροπή XHTML / CSS αποτελεσματικά για έναν ιστότοπο γρήγορης φόρτωσης που είναι ακριβής στο αρχικό PSD.
Πρέπει είτε να περικόψουμε και να κωδικοποιήσουμε τα σχέδια εαυτούς μας, είτε να απενεργοποιήσουμε ένα μέρος των κερδών μας σε ένα outsourcing PSD σε μια εταιρεία XHTML / CSS ή έναν προγραμματιστή. Ως αρχικά σχεδιαστές, η δεύτερη επιλογή είναι συνήθως η καλύτερη επιλογή για τον πελάτη, διότι θα προσφέρει τα καλύτερα αποτελέσματα.
Μερικές φορές όμως, όπως και με μικρότερα έργα ή με άλλο τρόπο, πρέπει να κωδικοποιήσουμε έναν ιστότοπο για τον εαυτό μας . Όποια και αν είναι η αιτία, δεν πρέπει να είναι πτώση, ή κάτι που χρειάζεται υπερβολικό χρόνο.
Κάνοντας τον εαυτό σας εναντίον της εξωτερικής ανάθεσης
Αυτό το άρθρο είναι πιο στοχευμένο στους σχεδιαστές ιστοσελίδων, αν και ελπίζουμε ότι εκείνοι που είναι προγραμματιστές μπορούν να πάρουν κάτι μακριά από αυτό. Εστιάζοντας πίσω στους σχεδιαστές, όμως, είναι κοινό για πολλούς σχεδιαστές ιστοσελίδων να μην αρέσουν να κωδικοποιούν ιστοσελίδες. Μας αρέσει να σχεδιάζουμε . Υπάρχουν μερικές εξαιρέσεις, αλλά ως επί το πλείστον πρόκειται για τη στάση απέναντί της.
Πολλοί σχεδιαστές έχουν ανακαλύψει το πλεονέκτημα της εξωτερικής ανάθεσης : πληρώνουν μια εξωτερική εταιρεία για να φέσουν και να κωδικοποιήσουν το σχέδιό σας, να το πάρουν πίσω σε λίγες μέρες και να εξοικονομήσετε χρόνο και προσπάθεια να το κάνετε μόνοι σας.
Αν κάποιος δεν έχει εμπειρία με την κωδικοποίηση μιας ιστοσελίδας αρκετά αποτελεσματικά, δαπανώντας πάρα πολύ χρόνο σε αυτό μπορεί να μην αξίζει αυτό που θα πρέπει να πληρώνονται για ένα έργο.
Για παράδειγμα, αν ένας άπειρος κωδικοποιητής επρόκειτο να περάσει πολλές ώρες προσπαθώντας να καταλάβει πώς να κωδικοποιήσει ένα σχέδιο που μόλις δημιουργήθηκε, ο χρόνος που δαπανάται μπορεί εύκολα να αξίζει περισσότερο από ό, τι κοστίζει απλώς απλά να αναθέσει την εργασία.
Επίσης, η χρέωση του πελάτη για την εργασία εξωτερικής ανάθεσης αντί για τη δική σας εργασία μπορεί να είναι οικονομικά αποδοτική για αυτούς, καθώς και για τον αποτελεσματικό χρόνο για τον εαυτό σας. (Ω, και θα βοηθήσετε την αναπτυξιακή κοινότητα, δίνοντάς τους επίσης μια δουλειά!)
Έρχεται όμως ένας χρόνος σε κάθε σταδιοδρομία του σχεδιαστή, όμως, όπου δεν είναι πρακτικό να αναθέσουμε μια εργασία. Μερικά παραδείγματα θα ήταν:
- Δεν βρίσκεστε σε ένα ισχυρό οικονομικό σημείο.
Ειδικά για τους ελεύθερους επαγγελματίες, ισχυροί οικονομικοί μήνες έρχονται και φεύγουν. Εάν είστε λίγο χαμηλά στην τράπεζα, ίσως δεν είναι η καλύτερη επιλογή να ξοδέψετε $ 150 περίπου για την εξωτερική ανάθεση, όταν θα μπορούσατε να πληρώσετε το κομμάτι της επιπλέον για να κάνετε την εργασία μόνοι σας. Ενώ ο πελάτης θα αντισταθμίσει την πληρωμή στον outsourcer ως μέρος της πληρωμής του έργου, αυτό ακριβώς κάνει τα οικονομικά σας να σπάσει ακόμα και για το αναπτυξιακό τμήμα της ιστοσελίδας. Κάνοντας το μόνοι σας, είναι πολύ περισσότερη δουλειά, αλλά είναι και πολύ περισσότερα χρήματα στην τσέπη σας. - Είναι ένα μικρό έργο.
Το έργο είναι κάτω από $ 1000; Έχει πάνω από το 1/10 του προϋπολογισμού του έργου να μην πάει απευθείας σε σας αξίζει τον κόπο; Εάν αναθέσετε σε τρίτους το τμήμα κωδικοποίησης που είναι υπερβολικά μεγάλο από ένα ποσοστό του έργου, ίσως είναι πιο πρακτικό να το κάνετε μόνοι σας. Επίσης, τα μικρότερα έργα είναι πιθανότατα πιο απλά, οπότε δεν χρειάζεται απαραίτητα να χρειαστεί πολύς χρόνος. - Όταν χρειάζεται ειδική εξυπηρέτηση πελατών ή προσαρμογή.
Κάποια έργα χρειάζονται λίγο περισσότερη φροντίδα πελατών, από εσάς, τον σχεδιαστή. Ανάλογα τόσο με τον πελάτη όσο και με το έργο, ίσως είναι καλύτερο να καταρρεύσει το κομμάτι τεμαχισμού και το κομμάτι σε περισσότερο διαχειρίσιμα κομμάτια, με ορισμένα κομμάτια να μεταβάλλονται κατά τη γνώμη του πελάτη καθ 'όλη τη διάρκεια της διαδικασίας. Σε κάθε περίπτωση όπου εσείς, ο σχεδιαστής, θα πρέπει να συνεχίσετε να αλλάζετε τον κώδικα για να ικανοποιήσετε τις ανάγκες του πελάτη μετά την κωδικοποίηση του αρχικού ιστότοπου, ίσως είναι καλύτερο να το κάνετε μόνοι σας.
Συνεπώς, εναπόκειται σε εσάς να βασίζεται σε κάθε έργο, σε κάθε πελάτη και σε κάθε σειρά περιστάσεων, να αποφασίσει αν θα αναθέσει το τμήμα κωδικοποίησης ή όχι.
Ως πλεονέκτημα για την εξωτερική ανάθεση, οι έμπειροι κωδικοποιητές μπορούν να δημιουργήσουν μια ταυτόσημη κωδικοποιημένη έκδοση στο PSD σας , διατηρώντας παράλληλα την ταχύτητα φόρτωσης και τη χρηστικότητα.
Εάν βρίσκεστε στην κατάσταση όπου έχετε / θέλετε να κόψετε και να κωδικοποιήσετε έναν ιστότοπο τον εαυτό σας, ακολουθούν ορισμένες γενικές συμβουλές για να 1) εξοικονομήσετε χρόνο έτσι ώστε να μην χρειάζεται να εργαστείτε για $ 2 / hr και 2) να παρέχετε καλύτερα αποτελέσματα για ο πελάτης σας, ως έμπειρος προγραμματιστής, διατηρώντας παράλληλα τα έξοδα εξωτερικής ανάθεσης.
1. Φέτα αποτελεσματικά
Το Photoshop και το Fireworks έρχονται με ένα ενσωματωμένο εργαλείο κοπής που επιτρέπει σε έναν σχεδιαστή να κωδικοποιεί έναν ιστότοπο απευθείας σε HTML. Ωστόσο, ακόμη και σύγχρονες εκδόσεις αυτών των τεμαχίων λογισμικού δημιουργούν σήμανση βάσει πίνακα. Αυτό δεν είναι πολύ χρήσιμο για τον σύγχρονο web designer, φυσικά.
Αυτός είναι ο λόγος για τον οποίο η ανάπτυξη και η κωδικοποίηση του ιστότοπου είναι μια ξεχωριστή πρακτική που λαμβάνει το δικό της ταλέντο και εμπειρία. Όλα τα σχέδια web χρειάζονται κάποια κωδικοποίηση χεριών και μια διαδικασία σκέψης πίσω από αυτό. Κανένα λογισμικό δεν μπορεί να τα κάνει όλα για σας.
Ακόμα, το εργαλείο slice σε Photoshop και Fireworks μπορεί να χρησιμοποιηθεί καλά για το τμήμα ανάπτυξης του web design . Το θέμα είναι να μάθουμε πώς να χρησιμοποιούμε αποτελεσματικά το εργαλείο φέτας.
Αντί να ψάχνετε σε ένα ολόκληρο σεμινάριο φέτας και κωδικοποίησης εδώ, ένα μεγάλο σεμινάριο πάνω στο nettuts + μπορεί να βοηθήσει πολλούς: " Φέτα και ζάρια ότι PSD "Περνά τις βασικές διεργασίες σκέψης, καθώς και τον τεχνικό τρόπο, για τον τεμαχισμό ενός web design με τον μοντέρνο και σωστό τρόπο - ενώ χρησιμοποιείτε το παραδοσιακό εργαλείο φέτας.
Είναι σε χρονολογική σειρά, με διαφορετικές προβολές για κάθε φάση της αναπτυξιακής διαδικασίας, καθώς και χρήσιμους συνδέσμους με παρόμοια και πρόσθετα προγράμματα προβολής.
Το πρώτο βήμα είναι να δείτε αυτά τα μαθήματα και να πάρετε τα πιο σημαντικά σημεία από αυτά: γνωρίζετε ποιες είναι οι εικόνες για κομμάτια, πώς μπορείτε να βελτιστοποιήσετε αυτές τις εικόνες για την ισορροπία ποιότητας και ταχύτητας και ποια στοιχεία του PSD σας πρέπει να είναι απλά XHTML και CSS .
Ακριβώς παρακολουθώντας μια πιο έμπειρη διαδικασία και επεξήγηση του προγραμματιστή μπορεί να βοηθήσει έναν σχεδιαστή με λίγη φέτα και κωδικοποίηση εμπειρία μάρτυρες μια διαδικασία που είναι πιο αποτελεσματική.
2. Απλοποιήστε το CSS
Μερικές φορές, ο πρώτος τρόπος με τον οποίο κάποιος υπολογίζει πώς να χρησιμοποιήσει το CSS για να επιτύχει ένα συγκεκριμένο αποτέλεσμα δεν είναι ο καλύτερος τρόπος να το κάνει. Αν βρεθείτε να δημιουργήσετε πάρα πολλές προσαρμοσμένες τάξεις ή περίπλοκες τακτικές διαφορετικά, για να επιτύχετε ένα αποτέλεσμα, σκεφτείτε έναν εναλλακτικό τρόπο για να το κάνετε πιο αποτελεσματικά.
Ως επί το πλείστον, αυτό έρχεται με εμπειρία. Όσο περισσότερο κωδικοποιείτε έναν ιστότοπο και ανακαλύπτετε νέες τεχνικές, τόσο πιο εύκολα θα χρησιμοποιήσετε το CSS.
Για τους τρόπους του αρχαρίου για την απλούστευση του CSS, ελέγξτε το άρθρο του Woork σχετικά με το " Αρχή προς τα κάτω προσέγγιση για την απλούστευση του κώδικα CSS ".
Το άρθρο μοιράζεται συμβουλές σχετικά με την ισορροπία χρήσης του CSS για να δημιουργήσετε το βασικό πλαίσιο και το συγκεκριμένο στυλ, πώς να χρησιμοποιήσετε αποτελεσματικά τα προεπιλεγμένα στοιχεία HTML και πότε είναι σκόπιμο να δημιουργήσετε τις δικές σας κλάσεις ή αναγνωριστικά.
3. Χρησιμοποιήστε το CSS Shorthand και ελαχιστοποιήστε τη σήμανση HTML
Όσο μικρότερο είναι το μέγεθος ενός αρχείου, τόσο πιο γρήγορα γίνεται φόρτωση και είναι τόσο απλό. Η χρήση της συντομογραφίας CSS και η ελαχιστοποίηση του μήκους της σήμανσης XHTML με επαναχρησιμοποίηση στοιχείων είναι ένας πολύ καλός τρόπος για να γίνει αυτό.
Η κωδικοποίηση ενός ολόκληρου ιστότοπου πρέπει να είναι μια ισορροπία της σήμανσης και του styling που σημειώνει με το CSS. Η σήμανση θα πρέπει να χρησιμοποιείται για τη δομή και το CSS θα πρέπει να χρησιμοποιείται για το styling, έτσι ένας πολύ καλός τρόπος για να βρούμε αυτή την ισορροπία είναι να έχουμε αυτό κατά νου.
Εκτός από αυτό, η πρακτική απαιτεί απλώς κατανόηση των τεχνικών χαρακτηριστικών της σύντομης γραφής CSS, καθώς και απόκτηση εμπειρίας.
Ελέγξτε μερικά από τα παρακάτω μαθήματα για mastering CSS στενογραφία:
Επίσης, η κατάργηση των περιττών κενών θέσεων μπορεί να βοηθήσει στην ταχύτητα φόρτωσης των σημείων σήμανσης και CSS. Όπως με ένα ελαχιστοποιημένο αρχείο JavaScript (όπως το jquery.min.js), τα μικρότερα αρχεία θα καταστήσουν τον χρόνο φόρτωσης πιο αποτελεσματικό, επιτρέποντας στον επεξεργαστή να τα διαβάσει πιο γρήγορα.
Όπως συμβαίνει και με το CSS και τη σήμανση, δεν είναι πρακτικό να αφαιρέσετε όλους τους κεντρικούς χώρους για λόγους επεξεργασίας και διαχείρισης.
Αντ 'αυτού, πάρτε σε μια πρακτική της εσοχής και τη χρήση γραμμών διαλείμματα μόνο όταν είναι απαραίτητο. Επίσης, αφαιρέστε τυχόν σχόλια εντός της σήμανσης και του φύλλου στυλ που δεν είναι απαραίτητα για τη συντήρηση του ιστότοπου.
4. Smush.it
Χρησιμοποιήστε ένα εργαλείο όπως Το Smush.it της Yahoo να τραβήξετε ακόμα περισσότερες εικόνες. Ένα εργαλείο όπως αυτό χρησιμοποιεί έναν αλγόριθμο συμπίεσης που μειώνει σημαντικά το μέγεθος του αρχείου, χωρίς να θυσιάζεται η ποιότητα της εικόνας. Μια μέση μείωση περίπου 40% όλων των εικόνων μπορεί να κάνει μια τεράστια διαφορά στον χρόνο φόρτωσης ενός ιστοτόπου.
Απλά φορτώστε όλες τις εικόνες για τον ιστότοπο, αφού έχουν βελτιστοποιηθεί αρχικά στο Photoshop, στην εφαρμογή Smush.it. Θα σας δώσει μια νέα λίστα εικόνων για λήψη, εξηγώντας πόσο χώρος σώθηκε και πώς.
5. Δώστε προσοχή στην εντολή CSS & Markup Order
Έχοντας τα δομικά στοιχεία πριν από τα στοιχεία περιεχομένου ή το στυλ blockquote πριν από το στυλ παραγράφου δεν θα καταστήσει τα φορτία στυλ φύλλου πιο γρήγορα. Ωστόσο, ένα φύλλο στυλ φορτώνεται με τη σειρά που παρουσιάζεται στο φύλλο στυλ , οπότε κάποιος μπορεί να το χρησιμοποιήσει για να κάνει έναν ιστότοπο να εμφανίζεται σαν να φορτώνεται πιο γρήγορα.
Για παράδειγμα, εάν σε ένα φύλλο στυλ, όλα τα περιεχόμενα, οι εικόνες και το στυλ κειμένου ορίστηκαν για πρώτη φορά, τα στοιχεία αυτά θα φορτώνονταν πριν φορτωθούν οποιαδήποτε φόντα, δομικά στοιχεία ή εικόνες σχεδίασης.
Εξαιτίας αυτού, φαίνεται ότι ο σχεδιασμός ιστού φορτώνεται ελαφρώς πιο αργά από ό, τι εάν είδαμε πρώτα το φόντο και τη δομή.
Με τη δομή και την κύρια εικόνα πρώτα, ο θεατής έχει κάτι να επικεντρωθεί για εκείνα τα δευτερόλεπτα όπου το περιεχόμενο εξακολουθεί να φορτώνεται.
6. Να γνωρίζετε πότε να χρησιμοποιήσετε τη δέσμη ενεργειών από την πλευρά του υπολογιστή ή από την πλευρά του διακομιστή
Για βασικά έργα, οι σχεδιαστές ιστοσελίδων πιθανότατα δεν θα μπει σε υπερβολικό προγραμματισμό. Εντούτοις, ενδέχεται να απαιτούνται ορισμένες δέσμες ενεργειών για μια απλή φόρμα επικοινωνίας ή για ειδικά εφέ πλοήγησης.
Ό, τι και αν είναι, μπορούν να χρησιμοποιηθούν δύο τύποι γλωσσών δέσμης ενεργειών: στην πλευρά του πελάτη (όπου η γλώσσα δέσμης ενεργειών εκτελείται στο πρόγραμμα περιήγησης του χρήστη) ή στην πλευρά του διακομιστή (η γλώσσα δέσμης ενεργειών εκτελείται στον διακομιστή).
Το JavaScript και οποιαδήποτε βιβλιοθήκη βρίσκεται κάτω από αυτό, είναι η πιο κοινή γλώσσα προγραμματισμού από την πλευρά του πελάτη. Επειδή εκτελείται τοπικά στο πρόγραμμα περιήγησης του χρήστη, δεν χρειάζεται να εκτελείται καθ 'όλη τη διαδρομή προς το διακομιστή για να κάνει την επεξεργασία του, καθιστώντας έτσι ταχύτερη. Το scripting από την πλευρά του διακομιστή είναι ελαφρώς πιο αργό, αλλά λειτουργεί πολύ καλά σε μικρές δόσεις και όταν χρησιμοποιείται σωστά.
Χρησιμοποιήστε δέσμες ενεργειών διακομιστή για οτιδήποτε απαιτεί βάση δεδομένων ή οτιδήποτε είναι απαραίτητο για τον σκοπό της ιστοσελίδας. Δεδομένου ότι ο χρήστης μπορεί να απενεργοποιήσει το JavaScript, αλλά δεν μπορεί να απενεργοποιήσει μια γλώσσα διακομιστή, το scripting από την πλευρά του διακομιστή είναι ασφαλές να χρησιμοποιηθεί για οποιεσδήποτε ανάγκες ιστοτόπου.
Για παράδειγμα, μια φόρμα επικοινωνίας, αν και είναι ελαφριά και μπορεί να μην απαιτεί βάση δεδομένων, χρησιμοποιείται καλύτερα με μια γλώσσα από την πλευρά του διακομιστή επειδή είναι ακόμα προσβάσιμη για κάποιον με JavaScript disabled.
Συνολικά, οι περισσότεροι ιστότοποι που απαιτούν πρόσθετες δέσμες ενεργειών θα πρέπει να έχουν ισορροπία και των δύο. Ορισμένες μικρότερες ιστοσελίδες μπορεί να χρειάζονται μόνο το ένα ή το άλλο, αλλά είναι σημαντικό να μην χρησιμοποιείτε μόνο ένα για χάρη αυτού. Να γνωρίζετε πότε, και γιατί, να χρησιμοποιείτε το καθένα.
7. Τελευταίο, αλλά όχι λιγότερο, επικυρώστε
Αυτό είναι προφανές για τους περισσότερους από εμάς, αλλά όπως συμβαίνει με οποιοδήποτε άρθρο όπως αυτό, πρέπει να ειπωθεί: καθ 'όλη τη διαδικασία της κωδικοποίησης και όταν όλα λέγονται και γίνονται, επικυρώνεται ο κώδικας CSS και XHTML.
Όλοι γνωρίζουμε τα πλεονεκτήματα της επικύρωσης, καθώς μπορεί να κάνει τα διάφορα προγράμματα περιήγησης να κάνουν όμοια, να κάνουν τις ιστοσελίδες να φορτώνονται γρηγορότερα και είναι ένας γενικός έλεγχος σφαλμάτων για τον σημασιολογικό κώδικα.
Ένα επιπλέον πλεονέκτημα για τη διεξαγωγή αυτής της διαδικασίας, όμως, είναι να διερευνήσει νέες τεχνικές για τον χειρισμό του κώδικα CSS και της σήμανσης.
Εάν έχετε εφαρμόσει ένα συγκεκριμένο αποτέλεσμα σε ένα σχέδιο ιστού που δεν επικυρώνει ή δεν δίνει προειδοποίηση, οι πιθανότητες είναι ότι το W3 έχει έναν λόγο για αυτό. Αυτές είναι εξαιρετικές στιγμές για την έρευνα άλλων επιλογών για να δημιουργήσετε το ίδιο αποτέλεσμα, αλλά με έναν καλύτερο, πιο επικυρωμένο τρόπο.
Τυλίγοντας
Μερικοί σχεδιαστές φοβούνται ότι θα πρέπει να θυσιάσουν την ποιότητα στην απεικόνιση του σχεδίου όταν κωδικοποιούν το XHTML / CSS για να κάνουν έναν ιστότοπο γρήγορης φόρτωσης - αλλά αυτό δεν είναι αλήθεια.
Υπάρχουν πολλοί τρόποι για τον έξυπνο κωδικό που μπορεί να δημιουργηθεί για μια φιλική προς το χρήστη, γρήγορη φόρτωση ιστότοπου που ανταποκρίνεται στην ποιότητα ενός σχεδιαστή. Χρησιμοποιώντας αυτές τις συμβουλές μπορεί να βοηθήσει, αλλά υπάρχουν πολλά άλλα πράγματα που πρέπει να μάθετε.
Θυμηθείτε, αν είστε ένας άπειρος κομμωτής και κωδικοποιητής, μπορεί να είναι αργός από την αρχή, ειδικά όταν εξακολουθεί να βρίσκεται στη διαδικασία εκμάθησης. Ίσως γνωρίζουμε τα XHTML και CSS, αλλά είναι μια εντελώς διαφορετική ικανότητα να μάθουμε πώς να το κάνουμε αποτελεσματικά. Όπως ακριβώς έπρεπε να μάθουμε όταν σχεδιάζουμε, πρέπει να μάθουμε πώς να κωδικοποιούμε όμορφα .
Γράφτηκε αποκλειστικά για WDD από Kayla Knight .
Αυτές είναι γενικευμένες συμβουλές, οπότε φροντίστε να μοιραστείτε τις πρόσθετες συμβουλές για την πρακτική της κοπής ενός σχεδίου και την κωδικοποίησή του, ειδικά από την οπτική του σχεδιαστή.