Ljudi koji rade u web dizajn industrija je razvoj web stranica s prednjim krajevima usporedila s tronožnom stolicom. Te tri noge - tri sloja web razvoja - sastoje se od strukture, stila i ponašanja web mjesta.
Zašto biste trebali razdvojiti slojeve?
Kada izrađujete web stranicu, njezina bi struktura trebala biti prenesena u vaš HTML, vizualni stilovi u CSSi ponašanja prema skriptama. Neke od prednosti razdvajanja slojeva su:
- Zajednički resursi: Kada napišete vanjsku CSS ili JavaScript datoteku, bilo koja stranica na web mjestu može je koristiti. Ako trebate izmijeniti tu datoteku, možda u ažurirati neke tipografske stilove na web mjestu, svaka stranica koja koristi tu tablicu stilova dobit će promjenu. Nije potrebno uređivati svaku stranicu web stranice pojedinačno, što bi moglo biti naporan poduhvat za veliko web mjesto.
- Brže preuzimanja: Nakon što je kupac prvi put preuzeo skriptu ili tablicu stilova, web preglednik ih sprema u predmemoriju. Budući da su ti zajednički resursi sada sadržani u predmemorija preglednika, ostale stranice koje se traže u pregledniku brže se učitavaju, što poboljšava ukupnu brzinu i performanse stranica.
- Timovi s više osoba: Ako na web mjestu odjednom radi više osoba, upotrijebite sustave za kontrolu verzija koji omogućuju prijavu i odjavu datoteka kako bi se osiguralo da svi rade s najnovije verzije. Ovaj je postupak mnogo teže izvesti ako su stilovi i ponašanja isprepleteni s strukturnim dokumentima.
- SEO: Web mjesto koje pokazuje jasno razdvajanje stila i strukture vjerojatno će biti bolje za pretraživače jer one mogu učinkovitije indeksirati taj sadržaj i razumjeti stranicu bez da se zajebavaju u vizualnom stilu i ponašanju informacija.
- Pristupačnost: Vanjske tablice stilova i datoteke skripti dostupnije su ljudima i preglednicima. Softver kao što je čitači zaslona mogu lakše obrađivati sadržaj iz sloja strukture bez bavljenja stilovima koje ionako ne mogu koristiti.
- Povratna kompatibilnost: Web stranica koja je dizajnirana s odvojenim razvojnim slojevima vjerojatnije je da će biti unatrag kompatibilna jer preglednici i uređaji koji ne mogu koristiti određene CSS stilove ili kojima je JavaScript onemogućen mogu i dalje pregledavati HTML. Tada svoju web stranicu možete postupno poboljšavati značajkama za preglednike koji ih podržavaju.
HTML: Sloj strukture
Temelj je struktura ili sloj sadržaja web stranice HTML kod te stranice. Baš kao što okvir kuće stvara snažne temelje na kojima se gradi ostatak kuće, čvrsti temelji HTML-a stvaraju platformu na kojoj se može stvoriti web stranica.
Sloj strukture je mjesto na kojem pohranjujete sav sadržaj koji vaši kupci žele proč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 mjestu. Ovi su podaci kodirani u skladu sa standardima HTML5 a može sadržavati tekst, slike i multimediju (video, audio itd.).
Svaki aspekt sadržaja web mjesta trebao bi biti predstavljen u sloju strukture. Ovo razdvajanje omogućava kupcima koji imaju isključen JavaScript ili koji ne mogu pregledavati CSS pristup cijelom web mjestu, ako ne i svim njegovim funkcijama.
CSS: Sloj stilova
Ovaj sloj diktira kako će strukturirani HTML dokument izgledati posjetiteljima web mjesta i definiran je s CSS (Kaskadni listovi stilova). Te datoteke sadrže stilske upute za prikaz dokumenta u web pregledniku. Sloj stila obično uključuje medijski upiti koji mijenjaju prikaz web stranice na temelju veličina zaslona i uređaj.
Svi vizualni stilovi web stranice trebali bi se nalaziti u vanjskoj tablici stilova. Možete koristiti više tablica stilova, ali svaka CSS datoteka zahtijeva HTTP zahtjev za dohvaćanjem, koji utječu na izvedbu web mjesta.
JavaScript: sloj ponašanja
Sloj ponašanja čini web stranicu interaktivnom, omogućujući stranici da reagira na radnje korisnika ili se mijenja na temelju niza uvjeta. JavaScript je najčešće korišteni jezik za sloj ponašanja, ali CGI i PHP se vrlo često koriste.
Kada se programeri pozivaju na sloj ponašanja, većina njih misli na sloj koji se aktivira izravno u web pregledniku. Koristite ovaj sloj za izravnu interakciju s objektnim modelom dokumenta. Pisanje valjanog HTML-a u sloju sadržaja važan je za DOM interakcije u sloju ponašanja. Kada gradite u sloju ponašanja, trebali biste koristiti vanjske datoteke skripti, baš kao i CSS, za optimizaciju brzine i performansi.