Oni koji rade u industriji web dizajna uspoređuju razvoj web stranica na prednjoj stranici na stolicu s tri noge. Ova tri noga - tri sloja web razvoja - obuhvaćaju strukturu, stil i ponašanja.
Zašto biste razdvojili slojeve?
Kada stvarate web stranicu, njezina bi struktura trebala biti prebačena na HTML, vizualne stilove u CSS i ponašanja u skripte. Neke od prednosti razdvajanja slojeva su:
- Dijeljeni resursi: Kada napišete vanjsku CSS ili JavaScript datoteku, svaka stranica na web-lokaciji može upotrijebiti tu datoteku. Ako trebate izmijeniti tu datoteku, možda ažurirati neke tipografske stilove na web stranici, svaka stranica koja koristi taj stiltira dobit će promjenu. Nema potrebe uređivati svaku stranicu web stranice pojedinačno, što bi moglo biti naporan pothvat za velikim web stranicama.
- Brže preuzimanja: Nakon što prvi put preuzme skriptu ili stilski obrazac, vaš je klijent spremio web preglednik. Budući da su ti dijeljeni resursi sada sadržani u predmemoriji preglednika, brže se učitavaju i druge stranice koje se traže u pregledniku, što poboljšava ukupnu brzinu i performanse stranice.
- Više momčadi: Ako imate više od jedne osobe koja radi na web stranici odjednom, možete koristiti sustave koji dopuštaju provjeravanje i provjeru datoteka kako bi se osiguralo da svi rade s najnovijim verzijama. To je mnogo teže učiniti ako su stilovi i ponašanja isprepleteni sa strukturnim dokumentima.
- SEO: Web mjesto koje ima jasno razdvajanje stila i strukture vjerojatno će bolje funkcionirati za tražilice jer mogu učinkovitije pretraživati i indeksirati taj sadržaj i razumjeti stranicu, a da se ne opterećuju vizualnim informacijama o stilu i ponašanju.
- Pristupačnost: Vanjski stilski listovi i skripta datoteke dostupniji su ljudima i preglednicima. Softver poput čitača zaslona lakše obrađuje sadržaj iz strukturalnog sloja bez rješavanja stilova koje ionako ne mogu koristiti.
- Kompatibilnost natrag: Web mjesto dizajnirano s odvojenim razvojnim slojevima vjerojatno će biti kompatibilno s natrag, jer preglednici i uređaji koji ne mogu koristiti određene CSS stilove ili koji imaju onemogućen JavaScript mogu i dalje vidjeti HTML. Zatim možete poboljšati svoju web stranicu progresivno pomoću značajki za preglednike koji ih podržavaju.
HTML: Strukturni sloj
Struktura ili sadržajni sloj web stranice temeljni je HTML kôd te stranice. Baš kao što okvir za kuću stvara čvrsti temelj na kojem se gradi ostatak kuće, čvrsti temelj HTML-a stvara platformu na kojoj se može kreirati web stranica.
Slojevi strukture pohranjuju sav sadržaj koji vaši klijenti žele čitati ili pogledati. HTML struktura može se sastojati od teksta i slika, a uključuje i hiperveze koje će posjetitelji koristiti za kretanje po web stranici. To je kodirano u HTML5 kompatibilnim standardima i može uključivati tekst, slike i multimediju (video, audio, itd.).
Svaki aspekt sadržaja web mjesta trebao bi biti predstavljen u sloju strukture. To omogućuje korisnicima koji su isključili JavaScript ili koji ne mogu vidjeti CSS pristup cijeloj web stranici, ako ne i sve njezine funkcionalnosti.
CSS: Stilski sloj
Ovaj sloj diktira kako će strukturirani HTML dokument izgledati posjetiteljima web mjesta i definiran je CSS (Cascading Style Sheets). Te datoteke sadrže stilske upute o načinu prikaza dokumenta u web pregledniku. Stilski sloj obično uključuje medijske upite koji mijenjaju prikaz web mjesta na temelju veličine zaslona i uređaja.
Svi vizualni stilovi web-lokacije trebaju nalaziti u vanjskom stilskom listu. Možete koristiti više stilskih listova, ali imajte na umu da svaka CSS datoteka zahtijeva HTTP zahtjev za dohvaćanje, što utječe na performanse web mjesta.
JavaScript: Slojevi ponašanja
Slojevi ponašanja čine web stranicu interaktivnom, omogućujući stranici da odgovori na korisničke radnje ili da se promijeni na temelju skupa uvjeta. JavaScript je najčešće korišten jezik za sloj ponašanja, ali često se koristi i CGI i PHP.
Kada se programeri odnose na sloj ponašanja, većina njih znači sloj koji se aktivira izravno u web pregledniku. Koristite ovaj sloj za izravno komuniciranje s DOM-om (Document Object Model). Pisanje valjanog HTML-a u sloju sadržaja važan je za DOM interakcije u sloju ponašanja. Kada izgradite sloj ponašanja, trebali biste upotrijebiti vanjske skripte, kao i kod CSS-a, za optimizaciju brzine i performansi.
