Ljudje, ki delajo v oblikovanje spletnih strani industrija primerja razvoj spletnega mesta za čelne strani s trinožnim blato. Te tri noge - tri plasti spletnega razvoja - obsegajo strukturo, slog in vedenje spletnega mesta.
Zakaj bi morali ločevati sloje?
Ko ustvarjate spletno stran, mora biti njena struktura prenesena v vaš HTML, vizualni slogi v CSSin vedenja skriptov. Nekatere prednosti ločevanja slojev so:
- Skupni viri: Ko napišete zunanjo datoteko CSS ali JavaScript, jo lahko uporabi katera koli stran na spletnem mestu. Če morate to datoteko spremeniti, morda posodobite nekatere tipografske sloge na spletnem mestu bo spremembo dobila vsaka stran, ki uporablja ta slog. Vsake strani na spletnem mestu ni treba posebej urejati, kar bi lahko pomenilo naporno delo za veliko spletno mesto.
- Hitrejši prenosi: Ko je stranka prvič prenesla skript ali tabelo slogi, jo spletni brskalnik shrani v predpomnilnik. Ker so ti skupni viri zdaj v predpomnilnik brskalnika, druge strani, ki so zahtevane v brskalniku, se naložijo hitreje, kar izboljša splošno hitrost in zmogljivost strani.
- Veččlanske ekipe: Če na spletnem mestu hkrati dela več oseb, uporabite sisteme za nadzor različic, ki omogočajo prijavo in odjavo datotek, da zagotovite, da vsi sodelujejo z najnovejše različice. Ta postopek je veliko težje izvesti, če se slogi in vedenja prepletajo s strukturnimi dokumenti.
- SEO: Spletno mesto, ki prikazuje jasno ločitev sloga in strukture, bo verjetno boljše za iskalnike, ker so lahko učinkoviteje pajka po vsebini in razume stran, ne da bi se zataknil v vizualni slog in vedenje informacije.
- Dostopnost: Zunanji slogovni listi in skriptne datoteke so bolj dostopni ljudem in brskalnikom. Programska oprema, kot je bralniki zaslona lahko vsebino iz strukturne plasti lažje obdelajo, ne da bi se ukvarjali s slogi, ki jih tako ali tako ne morejo uporabiti.
- Združljivost nazaj: Spletno mesto, ki je zasnovano z ločenimi razvojnimi plastmi, je bolj verjetno, da bo združljivo z nazaj, ker brskalniki in naprave, ki ne morejo uporabljati določenih slogov CSS ali imajo onemogočen JavaScript, si lahko še vedno ogledajo HTML. Nato lahko svoje spletno mesto postopoma izboljšate s funkcijami za brskalnike, ki jih podpirajo.
HTML: Strukturni sloj
Temelj je struktura ali vsebinski sloj spletne strani HTML kodo te strani. Tako kot hišni okvir ustvarja močne temelje, na katerih je zgrajen preostali del hiše, trden temelj HTML ustvarja platformo, na kateri je mogoče ustvariti spletno stran.
V strukturni plasti shranite vso vsebino, ki jo vaše stranke želijo prebrati ali pogledati. Struktura HTML je lahko sestavljena iz besedila in slik in vključuje hiperpovezave ki ga bodo obiskovalci uporabljali za navigacijo po spletnem mestu. Te informacije so kodirane v skladu s standardi HTML5 in lahko vključuje besedilo, slike in večpredstavnost (video, zvok itd.).
Vsak vidik vsebine spletnega mesta mora biti predstavljen v strukturni plasti. To ločevanje omogoča strankam, ki imajo izklopljen JavaScript ali ki si ne morejo ogledati CSS, dostop do celotnega spletnega mesta, če ne celo do vseh njegovih funkcij.
CSS: Sloj slogov
Ta plast narekuje, kako bo strukturiran dokument HTML videti na obiskovalcih spletnega mesta in ga definira CSS (Cascading Style Sheets). Te datoteke vsebujejo slogovna navodila za prikaz dokumenta v spletnem brskalniku. Slogovna plast običajno vključuje medijska vprašanja ki spreminjajo prikaz spletnega mesta glede na velikost zaslona in naprave.
Vsi vizualni slogi spletnega mesta morajo biti v zunanjem listu slogi. Uporabite lahko več tabel slogi, vendar je za vsako datoteko CSS potrebna zahteva HTTP, ki vplivajo na delovanje spletnega mesta.
JavaScript: vedenjski sloj
Vedenjski sloj naredi spletno mesto interaktivno, kar omogoča strani, da se odziva na dejanja uporabnika ali spreminja glede na niz pogojev. JavaScript je najpogosteje uporabljen jezik za vedenjsko plast, vendar CGI in PHP se zelo pogosto uporabljajo.
Ko se razvijalci sklicujejo na vedenjsko plast, večina med njimi pomeni plast, ki se aktivira neposredno v spletnem brskalniku. S to plastjo lahko neposredno komunicirate z objektnim modelom dokumenta. Pisanje veljavnega HTML-ja v vsebinski plasti je pomemben za interakcije DOM v vedenjski plasti. Ko vgradite vedenjski sloj, uporabite zunanje datoteke skriptov, tako kot pri CSS, za optimizacijo hitrosti in učinkovitosti.