Εκφράζοντας IT

Re-Ποδηλασία είναι Buzzword και στην ανάπτυξη Web δεν σημαίνει ότι δεν υπάρχουν διαφορετικές. Είναι εξοικονομεί ενέργεια, από την άποψη της προσπάθειας!

Πάνω από χρόνια γράφοντας CSS και HTML από τη δημιουργία σχεδίων, έχω ακολουθήσει μερικές από τις καλύτερες πρακτικές, για την επιδίωξη των εξοικονομώντας χρόνο και ενέργεια σε αυτό που συνήθως ως όρος «επανεφεύρεση του τροχού». Ξανά και ξανά, έχω τον εαυτό μου είπαν, ότι πρέπει να δημιουργήσει μερικά πρότυπα, μερικά πρότυπα επαναχρησιμοποιήσιμα CSS ότι θα χρησιμοποιήσετε ΑΠΟ ΤΗ ΣΥΣΚΕΥΑΣΙΑ στο μέλλον τη δουλειά μου. Αν και δεν είναι εντελώς, αλλά δεν είχα καταφέρει να επιτύχει ορισμένους από τους στόχους.

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

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

Κλειδιά ανακύκλωση των CSS:

Χρησιμοποιήστε συμβάσεις ονομασίας

Αυτό πρέπει να είναι ο πιο σημαντικός παράγοντας στη λήψη της CSS / HTML επαναχρησιμοποιήσιμα. Δίνοντας ονόματα συνεπείς με τα στοιχεία της σελίδας επιτρέπει την επαναχρησιμοποίηση των συστατικών σελίδα και στυλ τους με ελάχιστη ή τροποποιήσεις. Σύμφωνα με αυτό το επιχείρημα, ακόμη και HTML5, σε μια σημαντική αλλαγή για την αλλαγή τους προκατόχους του, είναι να εισαγάγει κάποια συγκεκριμένα διαρθρωτικά ετικέτες. <article>, <section>, <header>, <aside>, και <nav> [ Τι θα φέρει το HTML5; ]. Ακόμη και με την HTML 4 (ή κάτω), είναι καλύτερα να αναφέρουμε πρότυπο ενότητες της σελίδας σας consistanly όπως στο παρακάτω απλό παράδειγμα ...

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

  <div id="container">
    <div id="header"> ... </ p>
    <div id="nav"> ... </ p>
    <div id="sidebar"> ... </ p>
    <div id="footer"> ... </ p>
   </ Span> 

Προεπιλογή Επαναφορά στυλ (CSS Επαναφέρει): Εάν χρησιμοποιείτε ένα πλαίσιο ή γράψε τη δική σου, θα πρέπει να παρέχουν CSS Επαναφέρει [ Τι είναι CSS Επαναφέρει; ], όπως μείωση ή την εξάλειψη των οπτικών μερικές φορές αντιφάσεις που εμφανίζονται μεταξύ των διαφόρων browsers. Με απλά λόγια ο μηχανισμός επαναφοράς CSS ορίζει το στυλ του στοιχείου HTML στο μηδέν ή μηδενικές τιμές, με αποτέλεσμα να παρακάμψετε τις προεπιλεγμένες τιμές πρόγραμμα περιήγησης μπορεί να δημιουργεί. Αυτό παρέχει μια καθαρή πλάκα για να ρυθμίσετε τις ιδιότητες αυτών των στοιχείων άκυρη κάθε User-Agent προεπιλογών [ CSS2.1 προεπιλογών χρήστη Φύλλο στυλ Agent ]. Όλα τα πλαίσια CSS χρειάζεται επαναφορά του μηχανισμού. Αν γράφετε το δικό σας Επαναφέρει CSS, μια λέξη της προσοχής είναι ότι, αν τύχει να ξεχάσετε να επαναφέρετε μια βασική ιδιότητα, θα μπορούσε να οδηγήσει σε cross-browser ζητήματα, που είναι πολύ δύσκολο για τον εντοπισμό σφαλμάτων. Θυμηθείτε, Κρατήστε ένα αντίγραφο των επαναφορά στυλ και απόθεση τους σε κάθε νέο έργο που δημιουργείτε.

  σώμα, div, dl, dt, dd, ul, ol, Li,
  H1, H2, H3, H4, H5, H6,
  προ, τη μορφή, πεδίων, των εισροών, επιλέξτε, textarea,
  p, blockquote, τραπέζι, ου, TD
  {
    σύνορα: 0px?
    margin: 0?
    padding: 0?
  } 

Ορισμός προεπιλογών (Στυλ Baseline) Στοιχεία για:

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

Οι περισσότεροι πλαισίων CSS, πάντα εισάγει ορισμένες νέες προεπιλογές, εκτός από την επαναφορά στυλ προεπιλεγμένο πρόγραμμα περιήγησης.
Αυτές οι προεπιλογές είναι άκυρες των User-Agent προεπιλογών (απογυμνωθεί μακριά από το Reset CSS), αυτά θα είναι συνεπής σε όλους τους φυλλομετρητές.

Θυμηθείτε, τα στυλ εκκίνησης χρησιμοποιούνται για να ορίσετε στυλ που πρόκειται να χρησιμοποιηθούν για το σχεδιασμό επίπεδο. π.χ..

  html {font-size: 77%? font-family: Arial, sans-serif?}
 ισχυρή, H1, H2, H3, H4, H5, H6 {font-weight: bold?} 

Περίληψη Στυλ για την Κοινή HTML Εξαρτήματα και κοινές κατατάξεις:

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

Εκτός από τον καθορισμό επαναχρησιμοποιήσιμων ορισμούς στυλ για τους κοινούς HTML Εξαρτήματα, θα μπορούσαμε να αφηρημένες κατηγορίες στυλ που σχετίζονται με την τυπογραφία, το χρώμα ή ακόμα και τη διάταξη. Εγώ τείνουν να χρησιμοποιούν κοινά μαθήματα ... όπως Clearfix, Font08, FontGrey, AlignL, DisplayB κλπ.

  input μορφή {border: 0px? υπόβαθρο: # ffffff? padding: 0px 10px? _padding: 0px 0px? ύψος: 26px? χρώμα: # 000000? γραμμή-ύψος: 30px? font-size: 1.1em?}
 textarea μορφή {border: 0px? υπόβαθρο: # ffffff? χρώμα: # 000000? font-size: 0,9 em? γραμμή-ύψος: 1.5em? υπερχείλιση: ορατός?}
 . Fbold {font-weight: τολμηρό? Χρώμα: # cccccc?}
 . Fgrey {color: # 666666?}
 . Flightgrey {color: # bbbbbb?}
 . Clearfix {σαφής: τόσο?}
 . Διαχωριστικό {σύνορα-top: 1px solid # 647B06? Σύνορα-κάτω: 1px solid # 9CC00A? Ύψος: 0px?}
 . Displayb {display: block?}. Displayn {display: none?}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: δικαίωμα?}. Floatl {float: αριστερά?} 

Διορθώσεις στην κοινή ιδιορρυθμίες φυλλομετρητή

Διάφορα προγράμματα περιήγησης εφαρμόσουν κώδικα CSS και παρέχει διαφορετικό επίπεδο υποστήριξης για τις προδιαγραφές CSS. Το αποτέλεσμα αυτό .... "Παραξενιές Browser", ότι είμαστε προγραμματιστές έφυγαν για την αντιμετώπιση της. Ειδικά, IE6 στοιχειώνει πλέον CSS προγραμματιστές με μια προθεσμία για να ανταποκριθεί. Τα καλά νέα είναι ότι η εμπειρία έχει συγκεντρώσει το δυνατόν ΕΠΑΝΑΧΡΗΣΙΜΟΠΟΙΗΣΙΜΗ διορθώσεις σε αυτά τα θέματα (όπως αποκαλείται συχνά CSS αμυχές ).

Θυμηθείτε, Κρατήστε αυτές τις αμυχές / διορθώσεις πρακτικό

  / * Το ζουμ εξής: 1 κανόνας είναι ειδικά για τον IE6 + IE7.  * /
    * Html. Clearfix,
    *:. Πρώτο παιδί + html {clearfix
           ζουμ: 1?
      } 

Κρατήστε Εξευγενισμός CSS σας

• Η συνήθεια της ανακύκλωσης δεν θα έρχονται σε σας με την ημέρα. Πρέπει να αναπτυχθεί. Έτσι σχεδιάζουν σας Re-Ποδηλασία. Έχετε αυτό στο μυαλό σας ότι θα μπορούσε αφηρημένη προεπιλογές στυλ, ορισμοί τυπογραφία, σχεδιαγράμματα, HTML Στυλ Στοιχείων κ.λπ. Προσπαθήστε να σκεφτούμε το μέλλον.
• Επίσης κοιτάζουμε πίσω στο παρελθόν τα έργα σας, θα βοηθήσει στον εντοπισμό στυλ ότι έχετε την τάση να χρησιμοποιείτε συχνά σε όλη την porjects. Περίληψη αυτό.
• Αφαιρέστε τυχόν αχρησιμοποίητο στυλ. Η πρακτική αυτή θα κρατήσει πλαίσιο CSS σας από ένα κοινό σύμπτωμα που ονομάζεται «Φούσκωμα» -
• Αφαιρέστε επαναλαμβανόμενες μορφές.
• Φτιάξτε ένα σύνολο στυλ που είναι αρκετά ευέλικτο ώστε να το μεταφέρουν σε όλα τα έργα.

Μια ματιά στα πλαίσια CSS

Τέλος. Αν είναι εμπνευσμένα και σκοπεύουν να χρησιμοποιήσουν ένα ή περισσότερα από τα πλαίσια CSS, Heres είναι γρήγορη λίστα με μερικές δημοφιλείς ....

• 960 ΔΕΣΜΗΕ : Το 960 ΔΕΣΜΗΕ είναι μια προσπάθεια για τον εξορθολογισμό web ανάπτυξη της ροής εργασίας με την παροχή που χρησιμοποιούνται συνήθως διαστάσεις, βασίζεται σε πλάτος 960 pixel. Υπάρχουν τρεις παραλλαγές: 12, 16 και 24 στήλες, οι οποίες μπορούν να χρησιμοποιηθούν χωριστά ή σε συνδυασμό. Η σκέψη ότι τίποτα δεν μπορείτε να δημιουργήσετε ένα για το δικό σας αρκετά εύκολα, το πλαίσιο προβλέπει πρότυπα πλέγμα για εκτύπωση σε μορφή PDF, το οποίο μπορεί κανείς να χρησιμοποιήσει για να σκίτσο designs.Bet σελίδα σας, αυτό θα κάνει μια επαγγελματική εντύπωση, αν φέρετε μερικά φύλλα όταν πηγαίνετε σε έναν πελάτη για τη συλλογή UI απαιτήσεις. Παρέχει επίσης βασικές πρότυπα πλέγμα για γνωστά σχεδιαστικά προγράμματα όπως το Fireworks, Flash, InDesign, Illustrator, Photoshop, το Visio, κ.λπ. παρέχοντας μια "μίζα για δέκα" για να ξεκινήσει το έργο το σχέδιό σας.
• Σχεδιάγραμμα : σχεδιάγραμμα παρέχει ευδιάκριτα ταξινομούνται τα αρχεία CSS για Επαναφέρει, πλέγματα, έντυπα, εκτύπωση, τυπογραφία, για Plug-κουμπιά, καρτέλες και ξωτικά κλπ. Επίσης παρέχει υποστήριξη για το IE ως ξεχωριστό περιλαμβάνουν.
• SenCSs : Σε αντίθεση με τους δύο παραπάνω, SenCSs (προφέρεται Sense), δεν έχει ορισμούς για CSS διάταξης. Κάνει περιλαμβάνουν γραμματοσειρές, μαξιλαράκια, τα περιθώρια, πίνακες, λίστες, κεφαλίδες, Η Eτικέτα Blockquote, φόρμες και άλλα.
• BlueTrip : αρχική απαίτηση του στη φήμη ήταν ότι, ήταν ένας συνδυασμός από τα καλύτερα χαρακτηριστικά γνωρίσματα που παρέχονται από άλλα πλαίσια, όπως άλλοι μπλε εκτύπωσης, ταξιδιού oli ... απ 'όπου παίρνει το όνομά του. Το χαρακτηριστικό της περιλαμβάνει 24-στήλη πλέγματος, στυλ τυπογραφίας, στυλ ORM, εκτύπωσης, κουμπιά κλπ.
• YUI πλέγματα : Έφερε σε σας από το δίκτυο προγραμματιστών Yahooo, υποστηρίζει υγρό πλάτους (100%) σχεδιαγράμματα καθώς και προκαθορισμένο σταθερό πλάτος σε διατάξεις 750px, 950px, και 974px, και η δυνατότητα εύκολης προσαρμογής σε οποιοδήποτε αριθμό. Όπως μπορείτε να δείτε, του μόνο τα τεχνικά Εξαρτήματα διάταξη. YUI παρείχε επίσης HTML / CSS σύνολα για άλλα στοιχεία σελίδας
• YAML (Yet Another Multicolumn Διάταξη)
• Emastic

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

Με περιορισμένες δεξιότητες σετ μου με εργαλεία όπως το Photoshop και Illustrator, μπορώ να ομολογήσω με ειλικρίνεια ότι είμαι καλύτερος από ό, τι προγραμματιστής Είμαι ένας σχεδιαστής. Αλλά το ιστορικό μου με πυρήνα (διακομιστή) με την ανάπτυξη Java / PHP / COBOL, υπήρξε μια πολύ θετική επίδραση στην ανάπτυξη των δεξιοτήτων UI μου. Αυτό που εννοώ είναι, ενώ η δημιουργία των σχεδίων μου, δηλαδή κάθε φορά που κάνω το σχεδιασμό, σκέφτομαι πως ο σχεδιασμός μπορεί να μετατραπεί σε καλύτερη HTML-CSS και κάνοντας το HTML-CSS, δίνω μια σκέψη για το backend τεχνολογία και να λογικά ότι ότι η HTML που μπορεί να εφαρμοστεί εύκολα σε XSL βρόχους ή αποσπάσματα PHP κλπ.

Πάνω από χρόνια, έχω ρίξει το κεφάλι για να σχεδιάζει με UI σχεδιαστές που πιθανώς donot έχουν ιδέα τι HTML ή CSS είναι. Όλα αυτά τα χρόνια έχω σκεφτεί ότι θα ζητήσει για πολύ, αν θέλω απλώς περιμένουν ο σχεδιαστής, ο οποίος προσπαθεί να shov "αδύνατο να κώδικα" του σχεδίου κάτω από το λαιμό μου, για να καταλάβετε ακριβώς λίγο τι σχεδιασμός του θα πρέπει να μετατραπούν σε. Αυτό θα βοηθήσει έτσι δεν είναι;

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

Ευχαριστώ τον Jay Elliot Αποθέματα ... νιώθω ανακουφισμένος!

Εδώ είναι μερικά αποσπάσματα από το άρθρο Elliots .

Πω πω, τι την ημέρα! Ξεκίνησε με ένα μικρό τιτίβισμα και έκλεισε με μια συζήτηση που έμοιαζε να σαρώσει ολόκληρη την κοινότητα του σχεδιασμού ιστοσελίδων. Φαίνεται ότι υπάρχουν κάποιες πολύ ισχυρές απόψεις που πραγματοποιήθηκε για το θέμα του κατά πόσον σχεδιαστές ιστοσελίδων θα πρέπει να είναι σε θέση να κώδικα.
...
Έτσι, πριν φτάσουμε σε αυτό, επιτρέψτε μου να ανακεφαλαιώσουμε γρήγορα αυτό που είπα σήμερα το πρωί στο Twitter:

Ειλικρινά, είμαι σοκαρισμένος ότι το 2010 είμαι ακόμα έρχονται σε «σχεδιαστές ιστοσελίδων» που δεν μπορούν να κωδικοποιήσουν τα δικά τους σχέδια. Καμία δικαιολογία.

... Θα έχουν πάει λίγο πιο συγκεκριμένος στο tweet μου. Μιλούσα για τους σχεδιαστές που δεν έχουν καν την πιο βασική HTML και CSS δεξιότητες για να μετατρέψει μια επίπεδη σχεδίαση σε πραγματικό χώρο. Δεν ανθρώπους που σκόπιμα επιλέγουν να μην κωδικό? Αυτοί που δεν μπορούν. Και είμαι επίσης αναφέρεται μόνο στον κώδικα front-end εδώ? Φυσικά είναι γελοίο να πιστεύουν ότι οι σχεδιαστές θα πρέπει επίσης να είναι εκπληκτικό back-end προγραμματιστές ...

Παίρνουμε «web» σχέδια έστειλε στο Illustrator, 300dpi, αδύνατο να κώδικα, δεν υπάρχει συνοχή / χρηστικότητα.
~ Η Amy Mahon

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

Στο τέλος της ημέρας, δεν χάνω τον ύπνο που μπορεί να κωδικοποιήσει και ποιος δεν μπορεί. Είμαι ακριβώς πραγματικά έκπληκτοι να διαπιστώσουν τόσοι πολλοί σχεδιαστές που διαθέτουν front-end δεξιότητες, όπως Σκέφτηκα ότι αυτό ήταν ένα πράγμα του παρελθόντος.

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

Χθες, μετά το θέμα που αντιμετώπισε με το CSS Επαναφέρει στο Google Chrome ... σκέφτηκα να σκάψει λίγο βαθύτερα στην περιοχή των Style Sheets User Agent ...
Βρέθηκαν αυτόν τον πίνακα σε προκαθορισμένες τιμές του CSS2.1 τα Style Sheets User Agent ... (για όσους δεν γνωρίζουν τι σημαίνει «Φύλλα Στυλ User Agent" είναι να ακολουθήσετε Ποια είναι τα Style Sheets User Agent (προδιαγραφές) .

Για τον πλήρη κατάλογο των CSS 2,1 Φύλλα Στυλ User Agent προεπιλογών κάντε κλικ εδώ

Χθες, όπως και κάθε άλλο «Ημέρα γουρουνιών Ground", δούλευα σε ορισμένες διαμορφώσεις CSS / tableless. Όλα πήγαιναν καλά στον IE 7, ύψους 3 και Chrome, εώς ξαφνικά, είδα κάποια σχετική επιτυχία-un περιθώρια δει μόνο στο Google Chrome. Αν και πολύ παράξενο και μεγάλο ποσοστό του πληθυσμού, ήταν κάποια νέα bug / θέμα που είχα συναντάμε, υπήρξε τελικά κάποια μπαχαρικό στο κοσμικό έργο μου. Σαντ (αλλά ωραίο) που πήρε καθοριστεί μέσα σε λίγα λεπτά του καθετήρα ...

Βασικά, αυτό έμοιαζε με το Google Chrome αγνοούνται CSS Επαναφέρει μου (περιθώριο: 0px). Είναι πραγματικά προκλήθηκε από το στυλ πράκτορα χρήστη (-webkit-padding-start: 40px). Έτσι, η λύση ήταν να επαναφέρετε αυτό το στυλ από τη padding: 0 απρεπώς τα στοιχεία.
Ένας καλός τρόπος για να αποφευχθεί αυτό το πρόβλημα από το να συμβεί σε οποιοδήποτε στοιχείο είναι η χρήση ενός παγκόσμιου Υπόλοιπο CSS ως εξής

* {Margin: 0? Padding: 0?}

Ποια είναι τα Style Sheets Πράκτορες Χρηστών (Προδιαγραφές);
Το ακόλουθο απόσπασμα έχει ληφθεί από http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , παρακάτω link για να διαβάσετε περισσότερα για τα Style Sheets User Agent

CSS 1 εισάγει την ιδέα, δηλώνοντας ότι κάθε Πράκτορα Χρήστη (UA, συχνά «πλοηγού» ή «πελάτη ίντερνετ) θα έχουν ένα φύλλο προεπιλεγμένο στυλ που παρουσιάζει έγγραφα σε ένα λογικό - αλλά αναμφισβήτητα εγκόσμια - τρόπο. CSS 2 αναφέρει ότι σύμφωνα πράκτορες χρήστη πρέπει να εφαρμόσετε ένα φύλλο στυλ προεπιλεγμένο (ή συμπεριφέρονται σαν να έκανε) και ότι η προεπιλογή φύλλο ενός πράκτορα χρήστη στυλ θα πρέπει να παρουσιάσει τα στοιχεία της γλώσσας εγγράφου με τρόπους που συνάδουν προς τις γενικές προσδοκίες παρουσίαση για τη γλώσσα του εγγράφου? CSS 3 είναι πιθανό να είναι το ίδιο μυαλό.

Δεδομένου ότι οι προδιαγραφές CSS αφεθεί στις υλοποιήσεις εάν θέλετε να χρησιμοποιήσετε ένα "πραγματικό" φύλλο στυλ για οθόνη προεπιλογή ή όχι, δεν είναι εκπληκτικό ότι δεν μπορείτε να βρείτε ένα φύλλο προεπιλεγμένο στυλ σε κάθε φάκελο εγκατάστασης του προγράμματος περιήγησης. Σε αντίθεση με τον Internet Explorer της Microsoft καθώς και Όπερα, για παράδειγμα (και όσο ξέρω), Gecko browsers όπως Firefox και Netscape Navigator (προσέξτε για "html.css"), αλλά και τον Konqueror καθιστά μάλλον απλό να κατανοήσει τους στυλ προεπιλογή.

Ούτε εγώ είμαι πολύ νέος για να User Interface (UI) της ανάπτυξης, ούτε είμαι ένας βετεράνος και έβαλα όπως πάντα, θα ταιριάζει στο προφίλ του UI για την ανάπτυξη περισσότερο από ότι ενός σχεδιαστή, χωρίς λύπη. Oh well! Τι μπορώ να γράφω για; ... Για λίγο (πρέπει να είναι εδώ και χρόνια όχι κάποιο μικρότερο) τώρα, κάθε λίγο και λιγάκι όταν δεν μπει σε ένα κομμάτι του σχεδιασμού UI (όταν ο επαγγελματίας σχεδιαστής έχει πάει για διακοπές), πάντα επίκλιση σταματήσει να σκέφτεται αν θα πρέπει να μου το σχεδιασμό να είναι σωστά ή όχι complient (ειλικρινά, δεν θα μπορούσα να πετύχουμε 100% συμμόρφωση με τα πρότυπα, Αν ήθελα πάρα πολύ). Τότε εγώ τον εαυτό μου πείτε, τι χάλια! ... Ο σχεδιασμός θα πρέπει να είναι απλό, όμορφο και κυρίως φαίνεται να μπορούν να χρησιμοποιηθούν, δεν πρέπει να κάνουν τους επισκέπτες να το σκάσω ... ή αναπήδηση (ως τεχνικός). Τι καλό θα ήταν ωραίο tableless διαμόρφωσης CSS είναι για τον επισκέπτη, ο οποίος δεν γνωρίζει σε όλες τις έξυπνες ΥΠΕΡΚΕΙΜΕΝΟΥ και επικαλυπτόμενων φύλλων στυλ κάτω από το δέρμα της ιστοσελίδας σας ... Zilch!
Θα πρέπει να φανείτε συμπαθητικοί και να είναι εύκολη στη χρήση ... τότε έρχεται η όλα τα πράγματα πρότυπα.

I stumbbled accross αυτό το blog είσοδος από Jason Fried των 37 σημάτων (Για όσους δεν γνωρίζουν είναι 37 σήματα τα onces που έχουν δημιουργήσει κάποιες εκπληκτικές εφαρμογές web, όπως Basecamp, κλπ Campfire) που έγραψε κάτι παρόμοιο το 2004 και πιστέψτε με, περίπου 5 χρόνια και να μην αλλάξει πολύ από ότι ... ήμουν στην ευχάριστη θέση να διαβάσει τη θέση του, όπως Συμφωνώ απόλυτα με ό, τι έχει να πει και ο επίσης το γεγονός, της δεν είναι σίγουρος για το τι ακριβώς λέει για το ένστικτό του και έτσι είναι δικό μου

Jason Fried: «Υπάρχει πάρα πολύς λόγος για CSS και XHTML, τα πρότυπα και Προσβασιμότητα και δεν μιλάμε για αρκετά άτομα. CSS και προτύπων Κωδικός Συμβατότητα είναι απλώς εργαλεία - πρέπει να ξέρετε τι πρέπει να οικοδομήσουμε με αυτά τα εργαλεία. Μεγάλη, χαίρομαι που σας UI δεν χρησιμοποιεί πίνακες. Και τι έγινε; Ποιος νοιάζεται αν εξακολουθεί να μην αφήσουμε τους ανθρώπους να επιτύχουν τους στόχους τους. Πρότυπα του Παγκοσμίου Ιστού είναι μεγάλη, αλλά τα δικά τους πρότυπα των ανθρώπων περιλαμβάνουν πάρει τα πράγματα γίνοντα (και ότι είναι ακόμα πολύ δύσκολο να κάνουμε σε απευθείας σύνδεση).

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

Ταμείο πλήρες άρθρο του Jason Fried

DISCALIMER: Αυτό δεν σημαίνει ότι δεν πρέπει να ανησυχούν γι 'πρότυπα καθόλου. Τα πρότυπα είναι καλό να έχουμε και να επιμείνουμε σε αυτές όσο το δυνατόν περισσότερο. Το μόνο που πρέπει να κατανοήσουμε ότι η καλή σχεδίαση UI δεν σημαίνει πάντα το 100% πληρεί τα πρότυπα ή αντίστροφα ....

Από τη λίστα μου με τα διδάγματα που αντλήθηκαν μου, ακολουθούν μερικά UI Σχεδιασμός και Ανάπτυξη χρυσούς κανόνες ... Heres το TOP 10 ... όχι ότι έχετε ακολουθήσει τους πάρα πολύ ...

1. Προσέξτε των χρηστών σας. Οι χρήστες μπορούν να κάνουν ή να σπάσει το site σας. Donot χρήστη να κάνει το βλέμμα σαν σύνολο idoit, εντελώς ανίκανη να χρησιμοποιείτε τον ιστοτόπο σας. Αυτό είναι κακό!

2. Διατηρήστε την απλότητα και την ευκολία χρήσης πρωτογενούς guidlines σας. Πάρα πολλά πράγματα στην οθόνη, τόσο μεγαλύτερη είναι η πιθανότητα ότι ο χρήστης θα μπερδευτεί ή αποσπάται από την αρχική αποστολή τους.

3. Να είστε στα όρια ... donot επιδοθούν πάρα πολύ σε χρηστικότητα, προσιτότητα και πρότυπα. Χρησιμοποιήστε αποτελεσματικά πρότυπα και να τους καταλάβει στην ομάδα. Αυτό θα εξασφαλίσει τη συνοχή δικαίωμα στο προϊόν

4. Πρότυπο τον απαίτηση. Δεδομένου ότι, αυτές τις μέρες οι διασυνδέσεις χρησιμοποιούν είναι πλούσια, Πρωτότυπα είναι πάντα καλύτερο από το να κάνουμε απλά wireframes και η τελευταία είναι άκυρη αξιοπρεπούς αλληλεπιδράσεις, θα αδυνατούν να προσφέρουν στον πελάτη μια σαφή εικόνα του τελικού προϊόντος που αναπτύσσεται. Πάντα, είναι πιο εύκολο να μετατρέψετε τα πρωτότυπα στα τελικά παραδοτέα. Επίσης! πρωτοτύπων με όλα τα ζητήματα που αλληλεπίδραση θα μπορούσε να εξομαλυνθεί νωρίτερα στον κύκλο ανάπτυξης.

5. Συνοχή στο σχεδιασμό και την αλληλεπίδραση σας είναι πολύ σημαντική. Donot συγχέουμε χρήστη με απρόβλεπτες αλληλεπιδράσεις και gizmos.

6. Κατανόηση "Δήλωση Αποστολής Design" σας. Aways επικεντρωθεί στον πρωταρχικό σκοπό της δράσης του beign σελίδα. Επίσης, κάνει μια λίστα με δευτεροβάθμια ενέργειές σας στη σελίδα, και θα τους δοθεί προτεραιότητα.

7. Μεριμνούν για τη σωστή ενημέρωση των χρηστών του site. Με περισσότερες από τις ιστοσελίδες σχεδιαστεί γύρω από AJAX, παρέχουν οπτικές ενδείξεις για τον χρήστη σχετικά με τις αλλαγές στη σελίδα. Ο χρήστης πρέπει να δοθεί η αναγνώριση της την ολοκλήρωση των εργασιών που εκτελεί. Donot κάνει ο χρήστης να περιμένει και να μαντέψουν, για παράδειγμα. παρέχουν οι δείκτες προόδου για uplaods αρχείο.

8. Χρησιμοποιείστε κατάλληλα ελέγχους. Για παράδειγμα Χρήση Επιλέξτε αναπτυσσόμενη λίστα για τις μικρές λίστες μόνο, donot επιτρέπουν στο χρήστη να επιλέξει μία από τις 200 πόλεις με επιλεγμένα κουτιά. Κατανοήστε τη διαφορά μεταξύ ενός κουμπιού και ένα σύνδεσμο. Μια σύνδεση και το κουμπί έχουν διαφορετικούς σκοπούς, donot χρησιμοποιήσετε μία για την άλλη. Δώστε το δικαίωμα ελέγχου να αλληλεπιδρούν με μια σελίδα πιο εύκολη. Αποφύγετε τη χρήση μενού, το οποίο είναι περισσότερο από δύο επίπεδα βαθιά. Μην επανεφεύρουμε τον τροχό. Χρησιμοποιήστε το πρότυπο των ελέγχων, να προσαρμόσετε τους μόνο αν είναι πολύ απαραίτητο. Καθορίστε τυχόν ελέγχους που απαιτούνται για έθιμο τοποθεσία πρώτο χέρι σας, έτσι ώστε να μπορούν να δημιουργηθούν και να δοκιμάζονται ανεξάρτητα, έτοιμο για χρήση απέναντι από τον χώρο.

9. Donot επαναλάβει πάρα πολύ για το σχεδιασμό. Θυμηθείτε! Το σύνολο του προϊόντος αποτελείται από περισσότερα από μόνη της σχεδιασμό. Φτιάξτε το κατάλληλο χρονοδιάγραμμα στο χρονοδιάγραμμα του έργου σας για επαναλήψεις σχεδιασμό και να επιμείνουμε σε αυτό. Επανάληψη μας βοηθά να μάθετε τι λειτουργεί και τι δεν, ξεχωρίσω τα προβληματικά σημεία. Ως μια καλή διεπαφή παίρνει το χρόνο, παρέχει χρόνο για επαναλήψεις σε την αρχή του κύκλου ανάπτυξης, έτσι ώστε επαναλήψεις σχεδιασμό doesnot άμεσα εξισώνουν τις εργασίες της. Πάρα πολύ θα μπορούσε να επαναλάβει jeopradize προθεσμίες.

10. Καθίστε αναπαυτικά και να σκέφτονται σαν χρήστης μερικές φορές.

Έχετε δει animoto.com; Καλά! αυτό δεν αποτελεί μ.Χ., μου άρεσε πολύ! και είναι φιλί UI πράγματι ASS

Ήρθα σε αυτό το site πριν από λίγες εβδομάδες. Είδε την πρώτη σελίδα, DINT ενοχλεί πολύ. Για μένα, ήταν ακριβώς ένα άλλο site με κάποιο πλούσιο περιεχόμενο Flash, επιτρέποντας στους χρήστες να ανεβάσετε εικόνες, να επιλέξετε κάποιο κομμάτι και να το μετατρέψει σε μια ωραία παρουσίαση φωτογραφιών. Κατεβάστε FLV, και βάλτε το σε οποιαδήποτε τοποθεσία της επιλογής σας (το YouTube, Metacafe, το Facebook και το συμπαθεί) ... ΠΕΡΙΟΔΟΣ.

Χθες όταν είδα τις εσωτερικές σελίδες της ροής, η οποία πήρε το χρήστη μέσω της δημιουργίας αυτού του slideshow .... Πήγα OH WOW! Όταν συνειδητοποίησα ότι δεν υπήρχε λίγο φλας που χρησιμοποιείται. Ήταν πράγματι μια πλούσια User Interface. Όλες οι προγραμματιστές UI πρέπει να φιλοδοξούν να δημιουργήσουν ή τουλάχιστον να είναι ένα μέρος της ομάδας που έχει κάνει αυτή η διασύνδεση .... Απολύτως λαμπρό! Και Έμπνευση!

Ρίξτε μια ματιά ... http://animoto.com/ ... και εγγραφούν και να παίξουν με αυτό ... μόνο τότε μπορείτε να εκτιμήσετε την ιδιοφυΐα.

Όταν διάβασα αυτό το άρθρο στο A List Apart " Faux απόλυτη τοποθέτηση
από τον Eric Sol ", εγώ δεν ήταν τίποτα λιγότερο από εντυπωσιασμένος. Είχα, επίσης, κατάθλιψη majorly, να προκαλέσει, ειλικρινά αναρωτιέμαι, γιατί λοξοτομεί εγώ καταλήξουμε σε κάτι υπέροχο, όπως αυτό.

Συνήθως, όταν δημιουργούμε CSS layouts, χρησιμοποιούμε "ΘΕΣΗ" ή "πλέει", ή ένα πολύ κακό συνδυασμό και των δύο. Eric Sol και η ομάδα του καθορίζουν ένα δίπλα στο άψογη τεχνική του νέου τύπου της τεχνικής διαμόρφωσης CSS, που έχουν βαφτίσει ως "ψεύτικη απόλυτη τοποθέτηση" μετά την τεχνική faux στήλες που προσομοιώνει την παρουσία μιας στήλης.

Γνωρίζετε ότι το πρόβλημα όλοι μας οι προγραμματιστές έχουν CSS με αποσύνθεση διατάξεις (Οι απρόσμενες αλλαγές περιεχομένου που προκαλούν ολόκληρες στήλες με αναδίπλωση, όταν χρησιμοποιούμε επέπλευσε διατάξεις) ... Καλά! Φαίνεται Ιστορία!
Η τεχνική αυτή διάταξη είναι ακόμη πολύ μικρά, και πρέπει να διαγραφούν από όλες αυτές τις γκουρού CSS εκεί έξω, πριν να γίνει ένας μη γραπτές τυποποιημένες. Είμαι στην ευχάριστη θέση να το χρησιμοποιήσει ΤΩΡΑ! ... Και είμαι ήδη στη μέση της μετατροπής νωρίτερα προβληματική / κυμαινόμενου un-απαραίτητα σχεδιαγράμματα μου σε διάταξη FAP ήδη ... και είμαι ευτυχής να πω το "είμαστε ήδη χρησιμοποιούν ψεύτικη απόλυτη τοποθέτηση για αυτό το ιστολόγιο χώρο καθώς και« ... ΜΕΤΑΒΑΣΗ δοκιμάσετε, ΤΩΡΑ!

Kudos Eric!

Περισσότερα στοιχεία τα DOM στη σελίδα, καθιστά πιο αργή, πιο αργή είναι η πρόσβαση στο DOM της JavaScript. Ένας μεγάλος αριθμός των DOM στοιχεία μπορεί να οφείλεται κακό σχεδιασμό διάταξης. Για παράδειγμα, ένθετους πίνακες ενδέχεται να έχουν χρησιμοποιηθεί για σκοπούς διάταξης. Χρησιμοποιήστε οποιαδήποτε ετικέτα HTML, όπου είναι λογικό σημασιολογικά. Για παράδειγμα πίνακες για χρήση donot διατάξεις, αλλά donot διστάσετε να τις χρησιμοποιήσουν, όπου μπορείτε να εμφανίσετε τα δεδομένα σε μορφή πίνακα, και ως εκ τούτου θα χρησιμοποιήσει μειώσει DOM στοιχεία, σε σχέση, σε μια παρόμοια δομή που δημιουργήθηκε χρησιμοποιώντας μόνο divs ..

Για να ελέγξετε τον αριθμό των DOM στοιχεία στην HTML σελίδα σας, πληκτρολογήστε απλά το εξής στην κονσόλα του Firebug του: document.getElementsByTagName('*').length

Δεν υπάρχει πρότυπο που ως προς το πόσα στοιχεία DOM είναι πάρα πολλά. Ελέγξτε άλλες παρόμοιες σελίδες που έχουν καλή markup.Eg. Αρχική σελίδα του Yahoo! είναι ένα πολύ απασχολημένος σελίδα και ακόμα κάτω από 700 στοιχεία (HTML).

Χρησιμοποιήστε πάρει Αιτήσεις για το AJAX

Έχει διαπιστωθεί ότι όταν χρησιμοποιείτε το XMLHttpRequest, ΜΕΤΑ εφαρμόζεται στα προγράμματα περιήγησης σε δύο στάδια: την αποστολή των κεφαλίδων πρώτα και στη συνέχεια την αποστολή δεδομένων. Έτσι, είναι καλύτερο να χρησιμοποιήσετε GET, το οποίο λαμβάνει μόνο ένα TCP πακέτο να στείλει (εκτός αν έχετε πολλά τα cookies). Το μέγιστο μήκος διεύθυνση URL στον IE είναι 2Κ, οπότε αν έχετε να στείλετε περισσότερους από 2Κ δεδομένα ενδέχεται να μην είναι σε θέση να χρησιμοποιήσει GET.
Μια ενδιαφέρουσα πλευρά επιρροή είναι ότι POST χωρίς στην πραγματικότητα να δημοσιεύσετε οποιαδήποτε στοιχεία που συμπεριφέρεται όπως GET. ΠΑΡΤΕ προορίζεται για ανάκτηση πληροφοριών, οπότε είναι λογικό (σημασιολογικά) να χρησιμοποιούν ΠΑΡΕΙ όταν ζητάτε μόνο τα δεδομένα, σε αντίθεση με την αποστολή δεδομένων που θα αποθηκεύονται στην πλευρά του διακομιστή.

Αποφύγετε Σύγχρονη καλεί AJAX

Όταν κάνετε "Αίας" αιτήσεων, μπορείτε να επιλέξετε είτε async ή λειτουργία συγχρονισμού. ASYNC λειτουργία λειτουργεί το αίτημα στο παρασκήνιο, ενώ άλλες δραστηριότητες, πρόγραμμα περιήγησης μπορεί να συνεχίσει να επεξεργάζεται. Συγχρονισμός λειτουργία θα περιμένει για το αίτημα να επιστρέψει πριν συνεχίσετε.
Οι αιτήσεις που υποβάλλονται με τη λειτουργία συγχρονισμού θα πρέπει να αποφεύγεται. Τα αιτήματα αυτά θα προκαλέσουν το πρόγραμμα περιήγησης για να κλειδώσει για το χρήστη μέχρι να επιστρέψει αιτήματος. Σε περιπτώσεις όπου ο διακομιστής είναι απασχολημένος και η απάντηση διαρκεί μια στιγμή, το πρόγραμμα περιήγησης του χρήστη (και ίσως OS) δεν θα επιτρέψει κάτι άλλο να γίνει. Στις περιπτώσεις όπου μια απάντηση ποτέ λάβει σωστά, ο περιηγητής μπορεί να συνεχίσει να μπλοκάρει μέχρι η αίτηση έληξε.
Αν νομίζετε ότι η κατάστασή σας απαιτεί λειτουργία συγχρονισμού, το πιθανότερο είναι καιρός να ξανασκεφτούμε το σχέδιό σας. Πολύ λίγα (αν υπάρχει) καταστάσεις απαιτούν πραγματικά Ajax αιτήματα σε λειτουργία συγχρονισμού.

Βελτιστοποίηση Εικόνων

Βελτιστοποίηση σημαίνει απλά κρατώντας το μέγεθος της μικρής εικόνας διατηρώντας την ποιότητα της εικόνας στο απαιτούμενο επίπεδο. Υπάρχουν φορτία των διαδικασιών που κάποτε μπορεί να πραγματοποιήσει τη βελτιστοποίηση εικόνων πριν να φορτωθούν στο διακομιστή για την παράδοση. Τα εργαλεία που χρησιμοποιούμε για τη δημιουργία αυτών των εικόνων (Photoshop, πυροτεχνήματα κ.λπ.) έχουν συνήθως τα εργαλεία που επιτρέπουν στους χρήστες να βελτιστοποιήσουν την εικόνα για χρήση ιστοσελίδων.
• Ελέγξτε το GIF για να δείτε αν χρησιμοποιείτε ένα μέγεθος παλέτα που αντιστοιχεί στον αριθμό των χρωμάτων στην εικόνα. Όταν μια εικόνα με 4 χρώματα και μια παλέτα χρωμάτων 256, τότε η εικόνα θα μπορούσε να είναι περαιτέρω βελτιωμένη

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

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

• Εάν χρησιμοποιείτε ένα favicon.ico, κρατήστε το μικρό, κατά προτίμηση υπό 1K.

Χρησιμοποιήστε κλιμακώνονται σωστά / αλλαγή μεγέθους της εικόνας.

Πάντα προσπαθώ και να χρησιμοποιήσετε τις εικόνες αλλάζουν μέγεθος, δηλαδή, δεν χρησιμοποιούν μια μεγαλύτερη εικόνα από ό, τι χρειάζεστε μόνο και μόνο επειδή μπορείτε να ορίσετε το πλάτος και το ύψος σε HTML. Εάν θέλετε να εμφανίσετε ένα 100px X 100px εικόνα στη σελίδα, τότε δεν χρησιμοποιούν κλίμακα κάτω 200x200px εικόνα.

Χρησιμοποιήστε Προοδευτική Εικόνες

Ο web browser καθιστά ήδη Εικόνες σταδιακά. Για να γίνει ακόμα καλύτερη, με εξαίρεση απλά GIF ή PNG εικόνες με το "πλέγμα" επιλογή, ή JPEG φωτογραφίες σας με την «προοδευτική» επιλογή.

Υπάρχει μία διαρκής συζήτηση μεταξύ των χρηστών του ιστού ως προς το εάν η χρήση της προοδευτικής εικόνα είναι μια ευλογία ή ένα εμπόδιο. Επίσης, μια προοδευτική εικόνα ζυγίζει περίπου 20% περισσότερο από ό, τι μη προοδευτική ομόλογό του. Έτσι, Αν νομίζετε ότι διάταξη χρησιμοποιεί εικόνες που δεν θα εμποδίζουν την εμπειρία χρήστη από το να είναι προοδευτικό, να αισθάνονται ελεύθεροι να το πράξουν.