Όσοι εργάζονται στον κλάδο του σχεδιασμού ιστοσελίδων παρομοιάζουν την ανάπτυξη δικτυακού τόπου σε ένα τριών τεσσάρων σκαμπό. Αυτά τα τρία σκέλη - τα τρία επίπεδα ανάπτυξης ιστού - περιλαμβάνουν δομή, στυλ και συμπεριφορές.
Γιατί πρέπει να διαχωρίσετε τα επίπεδα;
Όταν δημιουργείτε μια ιστοσελίδα, η δομή της πρέπει να υποβιβάζεται στην HTML σας, τα οπτικά στυλ στο CSS και τις συμπεριφορές σε σενάρια. Μερικά από τα οφέλη του διαχωρισμού των στρωμάτων είναι:
- Κοινόχρηστοι πόροι: Όταν γράφετε ένα εξωτερικό αρχείο CSS ή JavaScript, οποιαδήποτε σελίδα του ιστότοπου μπορεί να χρησιμοποιήσει αυτό το αρχείο. Αν χρειαστεί να κάνετε μια αλλαγή σε αυτό το αρχείο, ίσως να ενημερώσετε κάποια τυπογραφικά στυλ στον ιστότοπο, κάθε σελίδα που χρησιμοποιεί αυτό το φύλλο στυλ θα πάρει την αλλαγή. Δεν χρειάζεται να επεξεργάζεστε κάθε σελίδα του ιστότοπου μεμονωμένα, η οποία θα μπορούσε να είναι μια εξόχως σημαντική επιχείρηση για μια μεγάλη ιστοσελίδα.
- Ταχύτερη λήψη: Μόλις το σενάριο ή το φύλλο στυλ λήφθηκε από τον πελάτη σας για πρώτη φορά, αποθηκεύεται προσωρινά από το πρόγραμμα περιήγησης ιστού. Επειδή αυτοί οι κοινόχρηστοι πόροι περιέχονται τώρα στην προσωρινή μνήμη του προγράμματος περιήγησης, άλλες σελίδες που ζητούνται στο πρόγραμμα περιήγησης φορτώνουν πιο γρήγορα, γεγονός που βελτιώνει τη συνολική ταχύτητα σελίδας και την απόδοση.
- Ομάδα πολλών ατόμων: Εάν έχετε περισσότερα από ένα άτομα που εργάζονται σε έναν ιστότοπο ταυτόχρονα, μπορείτε να χρησιμοποιήσετε συστήματα που επιτρέπουν στα αρχεία να ελέγχονται μέσα και έξω, για να εξασφαλιστεί ότι όλοι εργάζονται με τις πιο πρόσφατες εκδόσεις. Αυτό είναι πολύ πιο δύσκολο να γίνει αν τα στυλ και οι συμπεριφορές είναι αλληλένδετες με έγγραφα δομής.
- SEO: Ένας ιστότοπος που έχει σαφή διαχωρισμό στυλ και δομής είναι πιθανό να έχει καλύτερες επιδόσεις για τις μηχανές αναζήτησης, επειδή μπορεί να ανιχνεύσει το περιεχόμενο πιο αποτελεσματικά και να καταλάβει τη σελίδα χωρίς να χάνεται στο οπτικό στυλ και τις πληροφορίες συμπεριφοράς.
- Προσιτότητα: Τα εξωτερικά φύλλα στυλ και αρχεία σεναρίων είναι πιο προσιτά στους χρήστες και στα προγράμματα περιήγησης. Λογισμικό όπως οι αναγνώστες οθόνης μπορούν να επεξεργάζονται περιεχόμενο από το στρώμα δομής πιο εύκολα χωρίς να ασχολούνται με στυλ που δεν μπορούν να χρησιμοποιήσουν ούτως ή άλλως.
- Συμβατότητα προς τα πίσω: Ένας ιστότοπος που έχει σχεδιαστεί με ξεχωριστά στρώματα ανάπτυξης είναι πιθανότερο να είναι συμβατός προς τα πίσω, επειδή τα προγράμματα περιήγησης και οι συσκευές που δεν μπορούν να χρησιμοποιήσουν συγκεκριμένα στυλ CSS ή έχουν απενεργοποιημένη JavaScript, μπορούν να εξακολουθήσουν να προβάλλουν το HTML. Στη συνέχεια, μπορείτε να βελτιώσετε προοδευτικά τον ιστότοπό σας με δυνατότητες για τα προγράμματα περιήγησης που τα υποστηρίζουν.
HTML: Το στρώμα δομής
Η δομή ή το επίπεδο περιεχομένου μιας ιστοσελίδας είναι ο υποκείμενος κώδικας HTML αυτής της σελίδας. Ακριβώς όπως το σκελετό ενός σπιτιού δημιουργεί ένα ισχυρό θεμέλιο πάνω στο οποίο είναι χτισμένο το υπόλοιπο σπίτι, ένα στέρεο υπόβαθρο HTML δημιουργεί μια πλατφόρμα πάνω στην οποία μπορεί να δημιουργηθεί ένας ιστότοπος.
Το δομικό στρώμα είναι εκεί όπου αποθηκεύετε όλο το περιεχόμενο που θέλουν οι πελάτες σας να διαβάσουν ή να κοιτάξουν. Η δομή HTML μπορεί να αποτελείται από κείμενο και εικόνες και περιλαμβάνει τους υπερσυνδέσμους που θα χρησιμοποιούν οι επισκέπτες για να περιηγηθείτε στον ιστότοπο. Αυτό κωδικοποιείται σε HTML5 που συμμορφώνεται με τα πρότυπα και μπορεί να περιλαμβάνει κείμενο, εικόνες και πολυμέσα (βίντεο, ήχο κ.λπ.).
Κάθε πτυχή του περιεχομένου ενός ιστότοπου θα πρέπει να εκπροσωπείται στο επίπεδο δομής. Αυτό επιτρέπει στους πελάτες που έχουν απενεργοποιήσει τη JavaScript ή που δεν μπορούν να δουν πρόσβαση CSS σε ολόκληρο τον ιστότοπο, αν όχι σε όλες τις λειτουργίες του.
CSS: Το επίπεδο στυλ
Αυτή η στρώση υπαγορεύει το πώς ένα δομημένο έγγραφο HTML θα εμφανίζεται στους επισκέπτες ενός ιστότοπου και ορίζεται από το CSS (Cascading Style Sheets). Αυτά τα αρχεία περιέχουν συμβολικές οδηγίες για τον τρόπο προβολής του εγγράφου σε ένα πρόγραμμα περιήγησης ιστού. Το στυλ στυλ συνήθως περιλαμβάνει ερωτήματα μέσων που αλλάζουν την προβολή ενός ιστότοπου με βάση το μέγεθος της οθόνης και τη συσκευή.
Όλα τα οπτικά στυλ για έναν ιστότοπο θα πρέπει να βρίσκονται σε ένα εξωτερικό φύλλο στυλ. Μπορείτε να χρησιμοποιήσετε πολλαπλά φύλλα στυλ, αλλά να θυμάστε ότι κάθε αρχείο CSS απαιτεί ένα αίτημα HTTP για να το ανακτήσει, επηρεάζοντας την απόδοση του ιστότοπου.
JavaScript: Το επίπεδο συμπεριφοράς
Το επίπεδο συμπεριφοράς καθιστά μια ιστοσελίδα διαδραστική, επιτρέποντας στη σελίδα να ανταποκρίνεται στις ενέργειες των χρηστών ή να αλλάζει βάσει ενός συνόλου συνθηκών. Η JavaScript είναι η πιο συχνά χρησιμοποιούμενη γλώσσα για το στρώμα συμπεριφοράς, αλλά πολύ συχνά χρησιμοποιούνται CGI και PHP.
Όταν οι προγραμματιστές αναφέρονται στο στρώμα συμπεριφοράς, οι περισσότεροι από αυτούς σημαίνουν το επίπεδο που ενεργοποιείται απευθείας στο πρόγραμμα περιήγησης ιστού. Χρησιμοποιείτε αυτό το επίπεδο για να αλληλεπιδράσετε απευθείας με το DOM (Μοντέλο αντικειμένου εγγράφου). Η σύνταξη έγκυρης HTML στο επίπεδο περιεχομένου είναι σημαντική για τις αλληλεπιδράσεις DOM στο στρώμα συμπεριφοράς. Όταν δημιουργείτε το στρώμα συμπεριφοράς, θα πρέπει να χρησιμοποιείτε εξωτερικά αρχεία δέσμης ενεργειών, όπως και με το CSS, για τη βελτιστοποίηση της ταχύτητας και της απόδοσης.
