Κώδικας

Γιατί κάνει καθαρή σήμανση στο Web Design;

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

Η καθαρή σήμανση και η οικοδόμηση με πρότυπα ιστού όχι μόνο σας βοηθά να το κάνετε αυτό, αλλά θα σας εξοικονομήσει χρόνο και χρήμα μακροπρόθεσμα.

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

Πρώτα Javascript, στη συνέχεια CSS, XML και αργότερα AJAX. Η ευρεία υιοθέτηση του κώδικα HTML 5 βρίσκεται πολύ κοντά, με τους Firefox, Safari, Opera και Chrome να έχουν ήδη σχεδόν πλήρη υποστήριξη HTML 5 (το αργό παιδί στο μπλοκ, ο Internet Explorer, καθυστερεί ως συνήθως).

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

Τι σημαίνει να έχεις "καθαρό" σήμα;

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

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

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

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

Γιατί να με νοιάζει? Λειτουργεί, δεν είναι αρκετό;

Κάθε έργο έχει μια επιθετική προθεσμία και κάθε πελάτης θέλει το site που ξεκίνησε χθες. Έτσι, ως web developers και designers είμαστε υπό συνεχή πίεση να δουλεύουμε γρηγορότερα και πιο αποτελεσματικά.

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

Σίγουρα, λειτουργεί ... για τώρα, για σένα. Τι γίνεται με τον επόμενο χρόνο ή τρία χρόνια από τώρα; Τι γίνεται με τα νέα προγράμματα περιήγησης; Τι γίνεται με την προσβασιμότητα;

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

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

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

Ίσως να νομίζετε ότι είναι πιο γρήγορο να πέσετε απλά στο inline CSS αντί να προσθέσετε σωστά μια νέα κλάση στο φύλλο στυλ σας. Και ίσως να πιστεύετε ότι είναι πιο γρήγορο να πετάξετε σε οποιαδήποτε HTML μπορείτε να φτύνετε χωρίς να έχετε υπόψη τη συνολική δομή του εγγράφου.

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

Επεκτασιμότητα, προσβασιμότητα, μετάφραση και μελλοντική αποτύπωση

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

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

Ο ιστότοπός σας μπορεί να μεταφραστεί σε μισή γλώσσα, καθώς οι αναγνώστες από όλο τον κόσμο βρίσκουν το περιεχόμενό σας. Χάρη στην Αρχείο Internet , Η μνήμη cache της Google και άλλες, οι σελίδες που δημοσιεύετε σήμερα θα είναι περίπου για πολύ, πολύ καιρό ακόμα και αφού έχουν αφαιρεθεί από τον ζωντανό ιστότοπό σας.

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

Να κάνει και don'ts:

  • Χρησιμοποιείτε ετικέτες όπως προορίζονται. Για παράδειγμα: h1 είναι το πρώτο στοιχείο ανώτατου επιπέδου στη σελίδα, στη συνέχεια h2, h3 και ούτω καθεξής. Πρέπει να υπάρχει μόνο μία ετικέτα h1 ανά σελίδα.
  • DO ονομάστε τις κλάσεις CSS και τα αναγνωριστικά σας χρησιμοποιώντας σημαντικούς όρους και αναρωτηθείτε αν κάποιος άλλος θα γνωρίζει τι κάνει μια κλάση / ταυτότητα μόνο από το όνομά της. Ποια σύμβαση ονοματολογίας έχει μεγαλύτερη έννοια: # box12 ή # comment-footer;
  • ΚΑΝΕΤΕ καλή χρήση της κληρονομιάς CSS. Για παράδειγμα: εάν ορίσετε μια γραμματοσειρά σε ένα κοντέινερ, δεν χρειάζεται να το καθορίσετε ξανά σε κάθε στοιχείο παιδιού εκτός αν το παιδικό στοιχείο χρειάζεται να χρησιμοποιήσει διαφορετική γραμματοσειρά. Αυτό θα κρατήσει τα φύλλα στυλ σας φτωχό και γρήγορο για φόρτωση.
  • ΜΗ επικυρώστε τα HTML, CSS και XML και διορθώστε όσο το δυνατόν περισσότερα σφάλματα. Δώστε προσοχή στις προειδοποιήσεις που δημιουργούνται επίσης.
  • ΚΑΝΕΤΕ διπλό έλεγχο WYSIWYG δημιουργείται κώδικας και καθαρίστε όπως είναι απαραίτητο. Είναι πασίγνωστοι για τη φθορά του ογκώδους, φουσκωμένου σήματος με τα περιττά, άχρηστα σκουπίδια.
  • ΜΗΝ εισάγετε inline styles ή εξωτερικές ετικέτες και χαρακτηριστικά ακριβώς επειδή είστε σε μια βιασύνη.
  • Μην εγκαταλείπετε το "λειτουργεί". Ακριβώς επειδή μια σελίδα το κάνει αυτό δεν σημαίνει ότι η σήμανση κάτω από την κουκούλα είναι συμβατή με τα πρότυπα, χωρίς προβλήματα ή φιλική μηχανή αναζήτησης.

Περαιτέρω ανάγνωση και πόροι


Γράφτηκε αποκλειστικά για το WDD από τον Jeff Couturier.

Παρακολουθείτε τα πρότυπα ιστού στις ιστοσελίδες σας; Γιατί ή γιατί όχι? Παρακαλώ μοιραστείτε τα σχόλιά σας μαζί μας.

σχέδιο πρότυπα ιστού καθαρή σήμανση