Front-End Ανάπτυξη Συμβουλές για να ζήσουν από.
Το παρακάτω είναι ένα άρθρο που διάβασα σε ένα blog για front-end προγραμματιστές και κωδικοποίησης των πρακτικών και σκέφτηκα ότι θα το δώσετε. Είναι από Doug Neiner, ένας συντάκτης στο Κωδικοποίηση καυσίμων σας και είναι πρόεδρος του Pixel στούντιο Γραφιστικής . Είναι εθισμένος στις νέες τεχνολογίες, και συγκεκριμένα αγαπά ο ελεύθερος χρόνος με το WordPress, Ruby on Rails και jQuery.
Αυτό που ακολουθεί είναι μια σειρά από 10 πράγματα που πρέπει να θυμάστε και να εξασκείτε για κάθε έργο ανάπτυξης ιστοσελίδων. Έχω εδώ αναφέρονται με σειρά σπουδαιότητας, όπως πολλά από τα μέτρα που χτίζουν από κάθε άλλη. Εάν πάρετε τίποτα άλλο μακριά από την ανάγνωση, παρακαλώ πάρτε Κανόνες # 1 και # 2 στην καρδιά και την πρακτική τους. Νομίζω ότι αυτά τα δύο επίλυση των προβλημάτων θα οδηγήσει σε καλύτερο σχεδιασμό και την καλύτερη εφαρμογή σε δικτυακούς τόπους σε ολόκληρο το Διαδίκτυο.
1. Φορτίστε αρκετά, και στη συνέχεια κάποιες
Ειδικά σε δύσκολους οικονομικούς καιρούς, επιχειρήσεις και ιδιώτες που προσπαθούν να μειώσουν το κόστος και να κρατήσει τα έργα στο ελάχιστο. Λόγω αυτής της γνώσης, όπως εμείς τους web developers να προσπαθήσουμε να προχωρήσουμε μέσα από κάθε φάση όσο το δυνατόν γρηγορότερα. Εμπρός ανάπτυξη τέλος, ωστόσο, να λάβει ένα σημαντικό ποσό του χρόνου, αν γίνει σωστά. Δεν επαρκώς φόρτισης για την εποχή μας οδηγεί σαν προγραμματιστές να πηδήξουμε πάνω από τα πράγματα που ξέρουμε είναι σημαντικό μόνο για να κρατήσει το έργο εντός του προϋπολογισμού. Ο κανόνας είναι απλός ... που κανονικά δεν θα πάρει το χρόνο να το κάνουμε σωστά, αν δεν έχετε το χρόνο να πάρει. Ο μόνος τρόπος για να πάρετε περισσότερες «χρόνος» ως προγραμματιστής, είναι να εγγυηθεί το χρόνο που ξοδεύουν σωστά αποζημιωθούν. Σε εκείνο το σημείο και μόνο μπορεί να τις καρδιές και το μυαλό μας να είναι πλήρως συνδεδεμένο σε έργα μας ... και μόνο τότε μπορούμε να παίρνετε το χρόνο να ακολουθήσει τις υπόλοιπες 9 κανόνες.
2. Εκπαιδεύστε τον Σχεδιαστή
Για εκείνους που είναι ένας σχεδιαστής / προγραμματιστής όλα-σε-ένα μηχάνημα, αυτό θα πρέπει να είναι εύκολη. Ωστόσο, προγραμματιστές που εργάζονται με ή για έναν σχεδιαστή να έχουν μια μοναδική ευθύνη. Όπως πολλοί σχεδιαστές από το χώρο εκτύπωσης, εναπόκειται σε σας, ο κύριος του έργου, να τους εκπαιδεύσει σχετικά με τις δυνατότητες που τα σχέδιά τους. Όχι ... δεν είπα να τους ενημερώσετε για τα 150 + jQuery plugins που χρησιμοποιείτε, ή τις σκέψεις σας σχετικά με τη χρήση UL / LI σύνθετο έναντι μιας σειράς Α ετικέτες. Είπα να εκπαιδεύσει τους τις δυνατότητες. Βοηθήστε τους να κατανοήσουν πώς ο σχεδιασμός τους μπορεί να εμφανίσει σε διαφορετικές συσκευές. Βοηθήστε τους να καταλάβουν πώς να μόχλευσης επανάληψη υπόβαθρο και πλακάκια σχέδια για την επίτευξη μεγάλα σχέδια με ελάχιστο μέγεθος αρχείου.
Μην αφήνετε τη δημιουργικότητα αποκλειστικά για τον σχεδιαστή, είτε! Αυτή είναι η ευκαιρία σας να αποδείξετε είστε δημιουργικοί, καθώς και με την εύρεση του τέλειου τεχνολογικές λύσεις για να καλύψει τις ανάγκες του σχεδιαστή. Λέγοντας αυτά "απλά δεν γίνεται με αυτόν τον τρόπο« για κάθε αίτημα είναι ένας σίγουρος τρόπος για να προκαλέσει απογοήτευση και στις δύο πλευρές. Βάλτε το μυαλό σας να εργαστείτε γύρω από την εξεύρεση τρόπων εμπόδια.
Σημείωση: άρθρα 3 έως 10 χτίσει από αυτούς τους δύο πρώτους κανόνες. Μερικοί από τους ακόλουθους κανόνες απαιτούν πρόσθετα γραφικά από το σχεδιαστή, και όλοι οι κανόνες που χρειάζονται χρόνο για να ακολουθήσει. Κάντε μια δέσμευση για τους κανόνες 1 και 2, και οι υπόλοιποι κανόνες, αφενός, θα έχει νόημα και να τελικού προϊόντος σας ότι πολύ καλύτερα.
3. Σκεφτείτε σε στρώματα, όχι σε φέτες
Ακόμη και σήμερα, εξακολουθεί να χρησιμοποιούμε τη φράση «κόψτε το σχέδιο" για να περιγράψει τη διαδικασία της μετάβασης σε ένα σχέδιο από το Illustrator ή το Photoshop στο τελικό HTML / CSS διάταξης. Ενώ αυτό είναι ακόμα σε μεγάλο βαθμό ακριβείς, το όνομά του διαψεύδει την παλαιά έννοια του τεμαχισμού ένα σχέδιο σε κομμάτια και την επανασύνδεσή της (συνήθως σε έναν πίνακα) πίσω στη σελίδα HTML.
Αυτό ήταν το παλιό ιστό. Η νέα ιστοσελίδα χρησιμοποιεί την έννοια της διαστρωμάτωσης, στοίβαξη, και z-index για την επίτευξη σχέδια με το βάθος. Ως προγραμματιστής, να είστε βέβαιος να πάρει στρωματοειδούς PSD αρχεία ή αρχεία AI στρώματα από το σχεδιαστή εναντίον ενός επίπεδος σχεδιασμός. Αυτό θα σας επιτρέψει να έχετε πολύ μεγαλύτερη ευελιξία στον τρόπο βάζετε μαζί μια ιστοσελίδα. Να θυμάστε, όταν εργάζονται σε στρώματα, να εξετάσει τα στοιχεία HTML που είναι απαραίτητα για τη δομή πριν από την προσφυγή με την προσθήκη επιπλέον στοιχεία div και span. Μπορείτε να χρησιμοποιήσετε μια επαναλαμβανόμενη κάθετη διάρθρωση στο html στοιχείο, ένα επαναλαμβανόμενο και οριζόντια υποβάθρου σχετικά με το body , χωρίς να φέρει στοιχείο την επίφοβη div#wrapper για να λύσει τις θλίψεις σας υπόβαθρο.
4. Χρησιμοποιήστε την καλύτερη μορφή της εικόνας
Τι είναι η "καλύτερη μορφή της εικόνας», θα ρωτήσετε; Είναι αυτό που ταιριάζει καλύτερα στο έργο στο χέρι. PNG, GIF, και αρχεία JPEG έχουν όλα διαφορετικά πλεονεκτήματα. Όταν δεν υπάρχει διαφάνεια σε μια εικόνα, να δοκιμάσουν τα οποία το μέγεθος του αρχείου / ποιότητα εικόνας είναι καλύτερη μεταξύ PNG, GIF και JPEG. Για μεγάλες εικόνες, JPEG, σχεδόν πάντα θα κερδίσει για το μέγεθος vs ποιότητας. Για μικρές εικόνες χωρίς διαφάνεια, δείτε ποια έχει καλύτερη μέγεθος αρχείου PNG ή GIF. Αν αποφασίσετε σε GIF, να είστε βέβαιος να παίξετε με τις επιλογές και τις πρόσμειξης με απώλειες επιλογές (Μήπως γνωρίζουν καν Photoshop έχει ένα "απώλειες" για την επιλογή GIF;). Συχνά μπορείτε να αποσπάσουν ακόμη και μικρότερα αρχεία από το Photoshop με την προσαρμογή των ρυθμίσεων εξόδου ακόμη περισσότερο.
Για τις εικόνες που πρέπει να έχουν διαφάνεια, να πάρετε μελετημένες αποφάσεις σχετικά με το πώς θα χρησιμοποιηθούν. Αν θα στρώσεις πάνω από ένα σύνθετο πλαίσιο, μπορεί να χρειαστεί να εξετάσει τη χρήση ενός αρχείου PNG. Αν το φόντο είναι αρκετά συνεπής ότι η ματ χρώμα του μηχανισμού GIF δεν θα ξεχωρίζουν ελάχιστα, αν δείτε το αρχείο GIF είναι μικρότερο. GIF έχει το πλεονέκτημα ότι δεν χρειάζονται πρόσθετα προγράμματα για να λειτουργήσει στον IE6.
Όσον αφορά τη χρήση JPEG: Αν χρησιμοποιείτε το JPEG ως μέρος της διεπαφής χρήστη (και όχι μόνο για να εμφανίσετε μια φωτογραφία, κλπ), να είστε βέβαιος να αφήσει ανοικτά τα προφίλ ICC κατά την αποθήκευση για το web. Ορισμένα προγράμματα περιήγησης θα τιμήσει το προφίλ και να παράγει μια χρωματική διαφορά μεταξύ GIF / PNG αρχεία JPEG και του ίδιου χρώματος. Αυτό είναι ένα απλό πρόβλημα να αποφευχθεί μόνο με την απενεργοποίηση των προφίλ ICC.
Τι και αν είναι χάνω-χάνει την κατάσταση; Υπήρξαν φορές που χρειάζομαι την πλήρη διαφάνεια της ΠΝΓ με την πολυπλοκότητα της εικόνας πιο κατάλληλο για μια μορφή JPEG. Σε αυτές τις περιπτώσεις εγώ συχνά στοίβα (θυμηθείτε, ότι σε στρώσεις) δύο εικόνες: μια μορφή PNG για τη διαφάνεια, και GIF για το περίπλοκο ζήτημα της εικόνας. Πρόκειται για τη δημιουργική επίλυση προβλημάτων, όπως αυτό που θα εξασφαλίσει τις σελίδες σας φορτώνουν γρήγορα, και ότι το σχέδιο διατηρεί την ακεραιότητά του.
5. Μάθετε πότε πρέπει να χρησιμοποιείτε κλάσεις εναντίον ταυτότητες
Σκέφτηκα ότι αυτό ήταν απλά κοινή λογική, αλλά προφανώς δεν είναι όπως βλέπω πολλούς προγραμματιστές που χρησιμοποιούν ονόματα κατηγορία όπου θα πρέπει να χρησιμοποιούν ταυτότητες. Δεν μπορεί να φαίνεται σαν ένα μεγάλο πρόβλημα, αλλά θα όταν προσπαθείτε να στοχεύσετε ένα στοιχείο χρησιμοποιώντας Javascript.
Η ιδέα είναι απλή, αν θα υπάρξει μόνο ένα στοιχείο σε μια συγκεκριμένη σελίδα, χρησιμοποιήστε ένα αναγνωριστικό. Εάν θα υπάρξουν πολλές παρουσίες σε μια συγκεκριμένη σελίδα, χρησιμοποιήστε τα ονόματα τάξη. Οποτεδήποτε ένα στοιχείο είναι το ένα του-ένα είδος, χρησιμοποιήστε ένα αναγνωριστικό. Ότι είναι απλό! Πράγματα όπως ul.navigation για την κύρια γραμμή πλοήγησης ή div.site-logo δεν έχουν κανένα νόημα. Κάθε ένα από αυτά τα στοιχεία είναι διαφορετικά και θα πρέπει να έχουν και id.
Αντί της προσθήκης ενός άλλου κανόνα στη λίστα μας, επιτρέψτε μου κατ 'κάτι άλλο εδώ: δεν χρησιμοποιούν πάρα πολλές κλάσεις! Πάρτε τον ακόλουθο κώδικα για ένα ακραίο παράδειγμα (Παρατηρήστε ότι εμφανίζεται τάξεις έξι φορές):
Για όσους τον κωδικό συχνά, αντιλαμβάνεστε αυτό είναι ένα γελοίο παράδειγμα, αλλά δείχνει την πλάνη του υπερβολική χρήση τάξεις. Χρησιμοποιήστε μόνο ό, τι χρειάζεστε για τη σωστή ύφος και την ενίσχυση (μέσω Javascript) το HTML, τίποτα περισσότερο.
6. Κάντε σελίδες σας Responsive
Σημαντικό ότι η σελίδα αποκρίνεται σωστά, όπως ο τελικός χρήστης πλοηγείται μέσα από αυτό. Χρησιμοποιώντας συμβάσεις, όπως αποτελέσματα ανατροπής της εικόνας καθώς και: κατάδειξης, ενεργών και: τα κράτη εστίαση δεν μπορεί να τονιστεί αρκετά. Δεν θέλετε να επιτεθεί το χρήστη με πάρα πολλές αλληλεπιδράσεις ή στυλ, αλλά οι περισσότεροι άνθρωποι ανταποκρίνονται καλά στην οπτική ανατροφοδότηση. Εδώ είναι εύκολο για σας: Οι σύνδεσμοι πρέπει να αλλάξει κατάσταση, όταν το ποντίκι περνάει από πάνω τους ... διάστημα! Δεν αρκεί ότι ο browser εμφανίζει ένα μικρό χέρι δείχνει μια σύνδεση. Δεν μπορώ να σας πω πόσο απογοητευτικό είναι να πραγματοποιήσετε αναζήτηση από μια σελίδα με μαύρο κείμενο που ψάχνουν για τους σκούρο γκρι συνδέσεις και ελπίζει και προσεύχεται ότι το χέρι φαίνεται να αφήνει να ξέρετε βρήκα ένα!
Χρησιμοποιώντας συμβάσεις όπως οι "Είστε εδώ" ή περιγραφικών δεικτών εργαλείο-άκρες όλα εμπίπτουν στην κατηγορία αυτή. Η μεγαλύτερη αλληλεπίδραση και την ανατροφοδότηση που εμφανίζεται στο χρήστη ενώ πλοηγηθείτε σε μια περιοχή, τόσο το καλύτερο.
7. Πάντα Χρήση CSS Παιδάκια για ανατροπές
Αν δεν ξέρετε τι είναι CSS Παιδάκια, ελέγξτε έξω αυτό το άρθρο στο περιοδικό χάρμα ή το ένα στο A List Apart για λεπτομέρειες. Για όσους ξέρουν τι είναι, γιατί δεν μπορείτε να χρησιμοποιήσετε!; Αν μου πείτε, λόγω της έλλειψης χρόνου, θέλω να σας παραπέμψω με το άρθρο # 1 σε αυτή τη λίστα. Παρελθόν από το επιχείρημα του χρόνου, δεν μπορώ να σκεφτώ κανένα όφελος πιο σημαντική από τη χρήση CSS Παιδάκια για ανατροπές εικόνας. Ελέγξτε το Starter για jQuery χώρο. Σχεδόν όλα τα κομμάτια διεπαφή χρήστη κατασκευάστηκε με τη χρήση ενός μόνο αρχείου PNG (εικονίζεται παρακάτω). Τα φορτία διεπαφή όλα με τη μία, και όλες οι φτερουγίζω / ενεργές καταστάσεις είναι άμεσα διαθέσιμα. Καμία καθυστέρηση για ένα: hover εικόνα για να φορτώσει? Ένα αίτημα στο διακομιστή και όχι 10 +. Πρόκειται για ένα φανταστικό εργαλείο στο εμπρόσθιο άκρο κωδικοποίησης Toolkbox ότι οι προγραμματιστές πρέπει να χρησιμοποιούν πιο συχνά.
8. Κατανοήστε τη διαφορά μεταξύ Flash και Javascript
Νομίζω ότι την Javascript για να κάνει καταπληκτικά πράγματα. Επίσης, αγαπώ τη διεύρυνση των ορίων του τι μπορεί να κάνει. Μου αρέσει να δημιουργώ widgets και plugins όπως ακριβώς τον επόμενο τύπο ... αλλά το Javascript δεν μπορεί να λύσει όλα τα προβλήματα στην δυναμική ανάπτυξη ιστοσελίδων. Αντί να δαπανούμε 10 ώρες μιμηθούμε ένα χαρακτηριστικό Flash που θα διαρκέσει από 1 ώρα για να κάνει στο Flash, κάνετε τη σωστή επιλογή και να επιλέξετε το Flash. Από την άλλη πλευρά, αν απλά χρειάζεστε ένα στροφικού εικόνα ... δεν τολμήσεις να ανοίξει Flash!
9. Δοκιμάστε το site σας σε πολλά προγράμματα περιήγησης (συμπεριλαμβανομένου του IE6)
Αυτό απαιτεί χρόνο, δεν υπάρχει καμία αμφιβολία γι 'αυτό. Έχω αναπτύξει σε Mac, και έχετε ένα PC (και πολλαπλά εικονικά περιβάλλοντα PC) που επιτρέψτε μου δοκιμή είναι περισσότεροι από τους κανονικούς ανθρώπους περιήγησης χρησιμοποιούν σήμερα. Αν δεν έχετε το Google Analytics εκθέσεις που λένε ότι κανείς δεν χρησιμοποιεί IE ή ο καθένας χρησιμοποιεί Firefox, δεν κάνει μια υπόθεση για το πώς οι άνθρωποι θα περιηγηθείτε το site σας. Δεν λέω ότι κάνουν οι τοποθεσίες μοιάζουν μεταξύ τους, αλλά τα κάνουμε να λειτουργούν, λειτουργία, και να φαίνονται ωραία (Και σίγουρα παρόμοια!) Στα περισσότερα προγράμματα περιήγησης.
Σημείωση: Το αναφέρω τον IE6 ειδικά επειδή ο μεγαλύτερος πελάτης μου είναι μια εταιρεία που εξακολουθεί να χρησιμοποιεί IE6. Έχω αναπτύξει μια κωδικοποίηση στυλ που μου επιτρέπει να χτίσει γρήγορα για σύγχρονα προγράμματα περιήγησης, και να εφαρμόσει μόνο μερικά φύλλο στυλ και διορθώνει το javascript, ώστε η περιοχή φαίνεται δεξιά στον IE6. Είμαι βέβαιος ότι χάνουν κάποια άκρη με τον τρόπο αυτό τον τρόπο, αλλά με σώζει από πολλές στιγμές αμηχανίας.
10. Πάντα Κρατήστε στο μυαλό Συντήρηση
Όπως σας είναι "τεμαχισμό" του Photoshop ένα σχέδιο, ή η προετοιμασία σας CSS και Javascript, συντήρηση κρατήσει στο μυαλό. Κάποια τρελή-δροσερό αμυχή CSS που χρησιμοποιούμε σήμερα μπορεί να επανέλθει στο στέκι σας αργότερα. Ντάμπινγκ κανόνες CSS όπου εσείς επιθυμείτε σε ένα αρχείο CSS μπορεί να φανεί γρήγορα αυτή τη στιγμή (Guilty!), αλλά θα κάνουν την αλλαγή και την επικαιροποίησή τους αργότερα έναν εφιάλτη.
Ένα σημαντικό βήμα για να θυμόμαστε εμφανίζεται αφού έχετε φόντο ετοιμάστηκε αρχείο ενός σχεδιαστή για εξαγωγή από το Photoshop ή Illustrator: Θυμηθείτε να αποθηκεύσετε μια έκδοση του αρχείου ακριβώς πριν από την εξαγωγή. Με αυτόν τον τρόπο, αν χρειαστεί να το επανεξάγουν αργότερα, προσθέστε άλλο ένα κουμπί, να αλλάξετε μια γραμμή κειμένου, κ.λπ., θα είστε σε θέση να εξάγει και πάλι γρήγορα. Το Photoshop αποθηκεύει συνήθως επιλογές Μορφή εικόνας, ρυθμίσεις συμπίεσης, ματ και χρώματα για να κάνουν τη δουλειά σας ακόμα πιο εύκολη.
Συμπέρασμα
Υπάρχουν μια σειρά από άλλα πράγματα που είναι σημαντικά για Front End προγραμματιστές να κρατήσει στο μυαλό, αλλά νομίζω ότι αυτά είναι μερικά από τα πιο σημαντικά. Πολλά θα μπορούσε να ισχυριστεί ότι αυτά δεν είναι κανόνες, αλλά εγώ σας προκαλώ να σκεφτείτε τους ως τέτοια. Ίσως θα είναι λιγότερο πιθανό να σπάσει το συμφέρον του χρόνου ή χρημάτων για το επόμενο έργο σας.
