Άτομα που εργάζονται στο σχεδιασμός ιστοσελίδων Η βιομηχανία παρομοιάζει την ανάπτυξη ιστοτόπων front-end με ένα σκαμνί με τρία πόδια. Αυτά τα τρία σκέλη - τα τρία επίπεδα ανάπτυξης ιστού - περιλαμβάνουν τη δομή, το στυλ και τις συμπεριφορές ενός ιστότοπου.
Γιατί πρέπει να διαχωρίσετε τα επίπεδα;
Όταν δημιουργείτε μια ιστοσελίδα, η δομή της πρέπει να υποβιβάζεται στον 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 χρησιμοποιούνται πολύ συχνά.
Όταν οι προγραμματιστές αναφέρονται στο επίπεδο συμπεριφοράς, οι περισσότεροι σημαίνουν το επίπεδο που ενεργοποιείται απευθείας στο πρόγραμμα περιήγησης ιστού. Χρησιμοποιήστε αυτό το επίπεδο για άμεση αλληλεπίδραση με το μοντέλο αντικειμένου εγγράφου. Σύνταξη έγκυρου HTML στο επίπεδο περιεχομένου είναι σημαντικό για αλληλεπιδράσεις DOM στο επίπεδο συμπεριφοράς. Όταν δημιουργείτε το επίπεδο συμπεριφοράς, θα πρέπει να χρησιμοποιείτε εξωτερικά αρχεία σεναρίων, όπως και με το CSS, για να βελτιστοποιήσετε την ταχύτητα και την απόδοση.