Zašto su svi sajtovi izgrađeni kombinacijom strukture, stila i ponašanja
Uobičajena analogija koja se koristi za opis razvoja prednjeg sajta jeste to što je kao stolica sa 3 noge. Ove 3 noge, koje su poznate i kao 3 sloja veb razvoja, su Struktura, Stil i Odnosi.
Tri sloja razvoja weba
- Struktura ili sloj sadržaja
- Struktura ili sloj sadržaja web stranice je osnovni HTML kôd te stranice. Kao okvir kućišta stvara snažnu osnovu na kojoj se gradi ostatak kuće, tako da čvrsta osnova HTML-a stvara platformu na kojoj se može kreirati web-sajt. HTML struktura može se sastojati od teksta ili slika i uključuje hiperveze koje će posjetitelji koristiti za navigaciju oko te web stranice.
- Stil ili prezentacijski sloj
- Stil ili sloj prezentacije diktira kako će strukturirani HTML dokument izgledati na posetiocima sajta. Ovaj sloj je definisan CSS (Cascading Style Sheets). Ove datoteke sadrže stilove koji ukazuju na to kako bi dokument trebalo da bude prikazan u veb pregledaču. Na današnjem Vebu, sloj stila može uključivati i medijske upite koji mogu menjati prikaz stranice na osnovu različitih veličina i uređaja ekrana .
- Ponašanje
- Sloj ponašanja je sloj web stranice koja može odgovoriti na različite akcije korisnika ili izvršiti promjene na stranici zasnovane na skupu uslova. Za većinu web stranica, nivo ponašanja biće interakcije JavaScripta na stranici.
Zašto biste odvojili slojeve?
Kada kreirate web stranicu, poželjno je da slojevi budu što razdvojeni. Strukturu treba dodijeliti HTML-u, vizuelnim stilovima CSS-a i ponašanju prema bilo kojoj skripti koju sajt koristi.
Neke od prednosti odvajanja slojeva su:
- Zajednički resursi
- Kada napišete spoljnu CSS datoteku ili datoteku JavaScript, možete ga koristiti bilo kojom stranom na vašoj web lokaciji. Ako želite da napravite promenu u toj datoteci, možda ćete ažurirati neke tipografske stilove na veb lokaciji, svaka stranica koja koristi tu stilsku tablicu dobiće promjenu. Ne postoji potreba za uređivanjem svake stranice web stranice pojedinačno, što za veće sajtove može biti naporno preduzeće.
- Brže preuzimanje
- Jednom kada je vaš klijent prvi put preuzeo skriptu ili stylesheet, njegovo web pretraživač kešira. Pošto su ovi zajednički resursi sada sadržani u keš memoriji, druge stranice koje se zahtevaju u brzi pretraživaču brže učitavaju, što poboljšava ukupnu brzinu stranice i performanse.
- Multi-person timovi
- Ako imate više od jedne osobe koja radi na web lokaciji odjednom, možete koristiti sisteme za "prijavljivanje" i "odjavu" datoteka kako biste osigurali da svi u timu rade sa najnovijim verzijama ovih datoteka. Ovo je mnogo teže učiniti ako su stilovi i ponašanja prepleteni sa strukturnim dokumentima.
- SEO
- Sajt koja ima jasno razdvajanje stila i strukture verovatno će bolje funkcionisati za pretraživače, jer te stranice mogu efikasnije popisati taj sadržaj i razumjeti stranicu, a da se ne otežavaju informacijama o vizuelnom stilu ili ponašanju.
- Pristupačnost
- Spoljni stil listovi i datoteke skripti su dostupniji ljudima i pretraživačima. Pošto postoji to odvajanje stila i strukture, softver kao što je čitač ekrana može lakše obrađivati sadržaj iz strukturnog sloja, a da ga ne zaglavi stilovima koje oni uopće ne mogu koristiti.
- Kompatibilnost sa nazad
- Kada imate sajt koji je dizajniran sa razvojnim slojevima, biće više kompatibilan jer pretraživači ili uređaji koji ne mogu koristiti određene CSS stilove ili koji mogu imati onemogućen JavaScript mogu i dalje prikazati HTML. Tada web stranica može biti progresivno poboljšana funkcijama za pregledače koji ih podržavaju.
HTML - strukturni sloj
Strukturni sloj služi za skladištenje svih sadržaja koji vaši kupci žele čitati ili gledati. Ovo će biti kodirano u standardnim HTML5 standardima i može uključivati tekst i slike, kao i multimediju (video, audio, itd.). Važno je osigurati da svaki aspekt sadržaja vašeg sajta bude predstavljen na sloju strukture. Ovo omogućava bilo kom korisnicima koji su isključili JavaScript ili koji ne mogu videti CSS da imaju pristup celoj web lokaciji, ako ne i svim funkcijama tog web sajta.
CSS - sloj stilova
Vi ćete kreirati sve svoje vizuelne stilove za vašu web stranicu u spoljašnjem stilu. Možete koristiti više stilova, ali zapamtite da svaka odvojena CSS datoteka zahteva HTTP zahtjev za preuzimanje, utičući na performanse sajta.
JavaScript - sloj ponašanja
JavaScript je najčešće korišćeni jezik za sloj ponašanja, ali kao što sam i ranije pomenuo, CGI i PHP mogu takođe generirati ponašanje web stranica. To što se kaže, kada se većina programera odnosi na sloj ponašanja, oni znače taj sloj koji se aktivira direktno u Veb pregledaču - tako da je JavaScript skoro uvijek jezik izbora. Ovaj sloj koristite za direktno interakciju sa DOM ili Object Object Model. Pisanje važećeg HTML-a u sloju sadržaja je takođe važno za interakcije DOM-a u sloju ponašanja.
Kada izgradite sloj ponašanja, trebalo bi da koristite vanjske datoteke s skriptama kao u CSS-u. Dobijate sve iste prednosti korišćenja spoljašnjeg stila.