Tisti, ki delajo v industriji spletnega oblikovanja, razvijajo razvoj spletnih strani na tronološki stol. Te tri noge - tri plasti spletnega razvoja - obsegajo strukturo, slog in vedenje.
Zakaj bi morali ločiti sloje?
Ko ustvarjate spletno stran, je treba njegovo strukturo prenesti v svoj HTML, vizualne sloge v CSS in vedenje v skripte. Nekatere prednosti ločevanja plasti so:
- Skupna sredstva: Ko napišete zunanjo datoteko CSS ali JavaScript, lahko katero koli stran na spletnem mestu uporabi to datoteko. Če morate spremeniti to datoteko, morda za posodobitev nekaterih tipografskih slogov na spletnem mestu, bo vsaka stran, ki uporablja to slogovno oznako, prejela spremembo. Ni potrebe po urejanju vsake strani spletnega mesta posamično, kar bi lahko bilo zapleteno podjetje za veliko spletno mesto.
- Hitrejše nalaganje: Ko je stranka prvič prenesla skript ali slog, jo spletni brskalnik predpomni. Ker so ti skupni viri zdaj vključeni v predpomnilnik brskalnika, so druge strani, ki jih zahteva brskalnik hitreje, kar izboljša splošno hitrost in učinkovitost strani.
- Več ekip: Če imate več kot eno osebo, ki dela na spletnem mestu hkrati, lahko uporabite sisteme, ki omogočajo preverjanje datotek, da zagotovijo, da vsi delajo z najnovejšimi različicami. To je veliko težje storiti, če so slogi in vedenja prepleteni s strukturnimi dokumenti.
- SEO: Spletna stran, ki ima jasno ločitev sloga in strukture, bo verjetno bolje opravila za iskalnike, saj lahko to vsebino učinkoviteje piše in razume stran, ne da bi se oblekla v vizualnem slogu in vedenju.
- Dostopnost: Zunanji listi slogov in datoteke skript so bolj dostopni ljudem in brskalnikom. Programska oprema, kot so bralniki zaslona, lahko lažje obdeluje vsebino iz strukturnega sloja, ne da bi se ukvarjala s slogi, ki jih nikakor ne morejo uporabiti.
- Združljivost za nazaj: Spletna stran, ki je zasnovana z ločenimi razvojnimi sloji, je bolj verjetno, da bo združljiva z nazaj, ker lahko brskalniki in naprave, ki ne morejo uporabiti določenih stilov CSS ali onemogočiti JavaScript, še vedno ogledajo HTML. Nato lahko spletno mesto progresivno izboljšate s funkcijami za brskalnike, ki jih podpirajo.
HTML: strukturni sloj
Struktura ali vsebinski sloj spletne strani je osnovna HTML koda te strani. Tako kot hišni okvir ustvarja trdno podlago, na kateri je zgrajena preostala hiša, trdna podlaga HTML ustvarja platformo, na kateri je mogoče ustvariti spletno stran.
Strukturni sloj je, če shranjujete vse vsebine, ki jih vaše stranke želijo brati ali gledati. Struktura HTML lahko vsebuje besedilo in slike ter vključuje hiperpovezave, ki jih bodo obiskovalci uporabili za navigacijo po spletnem mestu. To je kodirano v HTML5, skladnih s standardi, in lahko vključuje besedilo, slike in večpredstavnost (video, zvok itd.).
Vsak vidik vsebine spletnega mesta mora biti predstavljen v strukturi. To omogoča uporabnikom, ki so izključili JavaScript ali si ne morejo ogledati dostopa CSS do celotnega spletnega mesta, če ne vse svoje funkcije.
CSS: sloj slogov
Ta sloj narekuje, kako bo strukturiran dokument HTML prikazal obiskovalce spletnega mesta in ga določi CSS (Cascading Style Sheets). Te datoteke vsebujejo slogovna navodila za prikaz dokumenta v spletnem brskalniku. Slogovni sloj običajno vključuje medijske poizvedbe, ki spreminjajo prikaz spletnega mesta glede na velikost zaslona in napravo.
Vsi vizualni slogi za spletno mesto bi morali biti v zunanji slogi. Uporabite lahko več stilov, vendar ne pozabite, da vsaka datoteka CSS zahteva zahtevo HTTP za njeno pridobitev, ki vpliva na uspešnost spletnega mesta.
JavaScript: vedenjski sloj
Odzivna plast omogoča interaktivno spletno stran, ki omogoča, da se stran odziva na dejanja uporabnika ali se spremeni na podlagi določenih pogojev. JavaScript je najpogosteje uporabljen jezik za vedenjsko plast, vendar se zelo pogosto uporabljajo tudi CGI in PHP.
Ko se razvijalci obrnejo na ravnanje, večina pomeni plast, ki se aktivira neposredno v spletnem brskalniku. Ta sloj uporabljate za neposredno interakcijo z DOM (model predmeta dokumenta). Pisanje veljavnega HTML v vsebinski plasti je pomembno za interakcije DOM v vedenjskem sloju. Ko zgradite vedenjsko plast, uporabite zunanje skriptne datoteke, tako kot pri CSS, da optimizirate hitrost in zmogljivost.
