Τα τρία επίπεδα του σχεδιασμού ιστοσελίδων

Γιατί όλες οι ιστοσελίδες είναι χτισμένες με συνδυασμό δομών, στυλ και συμπεριφορών

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

Τα τρία επίπεδα της ανάπτυξης ιστού

• Δομή ή επίπεδο περιεχομένου
  • Η δομή ή το επίπεδο περιεχομένου μιας ιστοσελίδας είναι ο υποκείμενος κώδικας HTML αυτής της σελίδας. Όπως το σκελετό ενός σπιτιού δημιουργεί ένα ισχυρό θεμέλιο πάνω στο οποίο είναι χτισμένο το υπόλοιπο σπίτι, έτσι και μια σταθερή βάση HTML δημιουργεί μια πλατφόρμα πάνω στην οποία μπορεί να δημιουργηθεί ένας ιστότοπος. Η δομή HTML μπορεί να αποτελείται από κείμενο ή εικόνες και περιλαμβάνει τους υπερσυνδέσμους που θα χρησιμοποιούν οι επισκέπτες για να περιηγηθείτε σε αυτόν τον ιστότοπο.
• Στυλ ή στυλ παρουσίασης
  • Το στυλ ή το στρώμα παρουσίασης υπαγορεύει πώς ένα δομημένο έγγραφο HTML θα εμφανίζεται στους επισκέπτες ενός ιστότοπου. Αυτή η στρώση ορίζεται από το CSS (Cascading Style Sheets). Αυτά τα αρχεία περιέχουν στυλ που υποδεικνύουν τον τρόπο εμφάνισης του εγγράφου σε ένα πρόγραμμα περιήγησης ιστού. Στον ιστό του σήμερα, το στυλ στυλ μπορεί επίσης να περιλαμβάνει τα μηνύματα πολυμέσων που μπορούν να αλλάξουν την προβολή ενός ιστότοπου με βάση διαφορετικά μεγέθη οθόνης και συσκευές .
• η ΣΥΜΠΕΡΙΦΟΡΑ
  • Το επίπεδο συμπεριφοράς είναι το επίπεδο μιας ιστοσελίδας που μπορεί να ανταποκρίνεται σε διαφορετικές ενέργειες χρήστη ή να κάνει αλλαγές σε μια σελίδα βάσει ενός συνόλου συνθηκών. Για τις περισσότερες ιστοσελίδες, το επίπεδο συμπεριφοράς θα είναι οι αλληλεπιδράσεις JavaScript στη σελίδα.

Γιατί πρέπει να διαχωρίσετε τα επίπεδα;

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

Μερικά από τα οφέλη του διαχωρισμού των στρωμάτων είναι:

• Κοινοί πόροι
  • Όταν γράφετε ένα εξωτερικό αρχείο CSS ή αρχείο JavaScript, μπορείτε να χρησιμοποιήσετε το αρχείο αυτό από οποιαδήποτε σελίδα στον ιστότοπό σας. Αν χρειαστεί να κάνετε μια αλλαγή σε αυτό το αρχείο, ίσως να ενημερώσετε κάποια τυπογραφικά στυλ στον ιστότοπο, κάθε σελίδα που χρησιμοποιεί αυτό το φύλλο στυλ θα πάρει την αλλαγή. Δεν χρειάζεται να επεξεργάζεστε κάθε σελίδα του ιστότοπου μεμονωμένα, η οποία για μεγαλύτερη περιοχή θα μπορούσε να είναι μια εξαντλητική επιχείρηση.
• Ταχύτερη λήψη
  • Μόλις το σενάριο ή το φύλλο στυλ λήφθηκε από τον πελάτη σας την πρώτη φορά, αποθηκεύεται προσωρινά από το πρόγραμμα περιήγησης ιστού. Επειδή οι εν λόγω κοινόχρηστοι πόροι περιέχονται τώρα στην προσωρινή μνήμη, άλλες σελίδες που ζητούνται στο πρόγραμμα περιήγησης φορτώνουν πιο γρήγορα, γεγονός που βελτιώνει τη συνολική ταχύτητα και την απόδοση της σελίδας.
• Πολλαπλές ομάδες ατόμων
  • Αν έχετε περισσότερα από ένα άτομα που εργάζονται σε έναν ιστότοπο ταυτόχρονα, μπορείτε να χρησιμοποιήσετε συστήματα που "για check in" και "check out" αρχείων για να διασφαλιστεί ότι όλοι στην ομάδα εργάζονται με τις πιο πρόσφατες εκδόσεις αυτών των αρχείων. Αυτό είναι πολύ πιο δύσκολο να γίνει αν τα στυλ και οι συμπεριφορές είναι αλληλένδετες με έγγραφα δομής.

• SEO
  • Ένας ιστότοπος που έχει σαφή διαχωρισμό στυλ και δομής είναι πιθανό να έχει καλύτερες επιδόσεις για τις μηχανές αναζήτησης, δεδομένου ότι οι ιστότοποι μπορούν να ανιχνεύσουν αποτελεσματικότερα αυτό το περιεχόμενο και να κατανοήσουν τη σελίδα χωρίς να μπλοκαριστούν με οπτικό στυλ ή πληροφορίες συμπεριφοράς.
• Προσιτότητα
  • Τα εξωτερικά φύλλα στυλ και αρχεία σεναρίων είναι πιο προσιτά στους χρήστες και στα προγράμματα περιήγησης. Επειδή υπάρχει ο διαχωρισμός του στυλ και της δομής, το λογισμικό όπως οι αναγνώστες οθόνης μπορούν πιο εύκολα να επεξεργάζονται το περιεχόμενο από το στρώμα της δομής, χωρίς να κατακλύζονται από στυλ που δεν μπορούν να χρησιμοποιήσουν ούτως ή άλλως.
• Συμβατότητα προς τα πίσω
  • Όταν έχετε έναν ιστότοπο που έχει σχεδιαστεί με τα αναπτυξιακά στρώματα, θα είναι πιο συμβατό προς τα πίσω, επειδή τα προγράμματα περιήγησης ή η συσκευή που δεν μπορούν να χρησιμοποιήσουν συγκεκριμένα στυλ CSS ή τα οποία ενδέχεται να έχουν απενεργοποιημένη JavaScript, μπορούν να εξακολουθήσουν να προβάλλουν το HTML. Στη συνέχεια, ο ιστότοπός σας μπορεί να βελτιωθεί προοδευτικά με λειτουργίες για τα προγράμματα περιήγησης που τα υποστηρίζουν.

HTML - το Layer Δομής

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

CSS - το επίπεδο στυλ

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

JavaScript - το Layer Συμπεριφοράς

Η JavaScript είναι η πιο συχνά χρησιμοποιούμενη γλώσσα για το στρώμα συμπεριφοράς, αλλά όπως ανέφερα προηγουμένως, το CGI και η PHP μπορούν επίσης να δημιουργήσουν συμπεριφορές ιστοσελίδων. Τούτου λεχθέντος, όταν οι περισσότεροι προγραμματιστές αναφέρουν το στρώμα συμπεριφοράς, αυτό σημαίνει ότι το στρώμα που ενεργοποιείται κατευθείαν στο πρόγραμμα περιήγησης στο Web - οπότε το JavaScript είναι σχεδόν πάντα η γλώσσα επιλογής. Χρησιμοποιείτε αυτό το επίπεδο για να αλληλεπιδράσετε άμεσα με το DOM ή το Μοντέλο αντικειμένου εγγράφου. Η σύνταξη έγκυρης HTML στο επίπεδο περιεχομένου είναι επίσης σημαντική για τις αλληλεπιδράσεις DOM στο επίπεδο συμπεριφοράς.

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