Zakaj so vsa spletna mesta zgrajena s kombinacijo strukture, sloga in vedenja
Skupna analogija, ki se uporablja za opis sprednjega razvoja spletne strani, je, da je kot blazina s tremi nogami. Te 3 noge, ki so znane tudi kot trije sloji spletnega razvoja, so struktura, stil in vedenje.
Trije plasti spletnega razvoja
- Struktura ali vsebinska plast
- Struktura ali vsebinski sloj spletne strani je osnovna HTML koda te strani. Kot hišni okvir ustvarja trdno podlago, na kateri je zgrajena preostala hiša, pa tudi trdna podlaga HTML ustvari platformo, na kateri lahko ustvarite spletno mesto. Struktura HTML lahko vsebuje besedilo ali slike in vključuje hiperpovezave, ki jih bodo obiskovalci uporabili za navigacijo po tej spletni strani.
- Slog ali predstavitveni sloj
- Stavek s slogom ali predstavitvijo narekuje, kako bo strukturiran dokument HTML prikazal obiskovalcem spletnega mesta. Ta sloj je definiran s CSS (Cascading Style Sheets). Te datoteke vsebujejo sloge, ki prikazujejo, kako naj se dokument prikaže v spletnem brskalniku. V današnjem spletu slogovni sloj lahko vključuje tudi medijske poizvedbe, ki lahko spremenijo prikaz spletnega mesta na podlagi različnih velikosti in naprav zaslona .
- Vedenje
- Obnašanje je sloj spletne strani, ki se lahko odzove na različna dejanja uporabnika ali spremeni stran glede na niz pogojev. Za večino spletnih strani bi bila stopnja vedenja interakcija JavaScript na strani.
Zakaj bi morali ločiti sloje?
Ko ustvarjate spletno stran, je zaželeno ohraniti plasti čim bolj ločene. Strukturo je treba zaupati vašim HTML-jevam, vizualnim slogom v CSS-u in vedenju za katere koli skripte, ki jih spletno mesto uporablja.
Nekatere prednosti ločevanja plasti so:
- Skupna sredstva
- Ko napišete zunanjo datoteko CSS ali datoteko JavaScript, jo lahko uporabite na kateri koli strani vašega spletnega mesta. Če morate spremeniti to datoteko, morda za posodobitev nekaterih tipografskih slogov na spletnem mestu, bo vsaka stran, ki uporablja to slogovno oznako, prejela spremembo. Vsako stran spletnega mesta ni treba urejati posamično, kar bi lahko bilo za večje spletno mesto naporno podjetje.
- Hitrejše nalaganje
- Potem ko je stranka prvič prenesla skript ali slogan, jo je shranil spletni brskalnik. Ker so ta skupna sredstva zdaj v predpomnilniku, druge strani, ki so zahtevane v obremenitvi brskalnika hitreje, kar izboljša splošno hitrost in učinkovitost strani.
- Več ekip
- Če imate več kot eno osebo, ki dela na spletni strani hkrati, lahko uporabite sisteme za »prijavo« in »preverjanje« datotek, da zagotovite, da vsi v ekipi delajo z najnovejšimi različicami teh datotek. 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 ta spletna mesta učinkoviteje preiščejo vsebino in razumejo stran, ne da bi se obogatila z informacijami o vizualnem slogu ali vedenju.
- Dostopnost
- Zunanji listi slogov in datoteke skript so bolj dostopni ljudem in brskalnikom. Ker obstaja ločitev sloga in strukture, programska oprema, kot so bralniki zaslona, lahko lažje obdeluje vsebino iz strukturnega sloja, ne da bi jo obogatili slogi, ki jih nikakor ne morejo uporabiti.
- Združljivost v ozadju
- Ko imate spletno mesto, ki je zasnovano z razvojnimi plasti, bo bolj združljivo nazaj, ker brskalniki ali naprava, ki ne morejo uporabiti določenih stilov CSS ali imajo lahko onemogočen JavaScript, še vedno lahko ogledajo HTML. Nato se lahko vaše spletno mesto postopno izboljša s funkcijami za brskalnike, ki jih podpirajo.
HTML - strukturni sloj
Strukturni sloj je, če shranjujete vse vsebine, ki jih vaše stranke želijo brati ali gledati. To bo kodirano v HTML5 standardih, ki lahko vsebujejo besedilo in slike ter multimedijske vsebine (video, zvok itd.). Pomembno je, da se v strukturnem sloju predstavi vsak vidik vsebine vašega spletnega mesta. To omogoča vsem uporabnikom, ki so izključili JavaScript ali si ne morejo ogledati CSS, da imajo še vedno dostop do celotne spletne strani, če ne vse funkcionalnosti tega spletnega mesta.
CSS - sloj slogov
Vse svoje vizualne sloge boste ustvarili za svojo spletno stran v zunanjem slognem listu. Uporabite lahko več stilov, vendar ne pozabite, da vsaka ločena datoteka CSS zahteva pridobitev HTTP-a, ki vpliva na uspešnost spletnega mesta.
JavaScript - vedenjski sloj
JavaScript je najpogosteje uporabljen jezik za vedenjski sloj, vendar kot sem že omenil, lahko CGI in PHP ustvarita tudi vedenje spletnih strani. Če rečemo, da se večina razvijalcev sklicuje na vedenjsko plast, to pomeni, da je sloj, ki se aktivira neposredno v spletnem brskalniku, zato je JavaScript skoraj vedno jezik izbire. Ta sloj uporabljate za neposredno interakcijo z modelom DOM ali Object Object Document. Pisanje veljavnega HTML-ja v vsebinski plasti je pomembno tudi za interakcije DOM v ravnini.
Ko zgradite vedenjsko plast, uporabite zunanje skriptne datoteke, tako kot pri CSS. Dobite vse iste prednosti uporabe zunanjega slogovnega lista.