Tri sloja web dizajna

Zašto su sve web stranice izrađene kombinacijom strukture, stila i ponašanja

Zajednička analiza koja se koristi za opisivanje front-end web razvoj je da je to poput tri noge stolica. Ove 3 noge, koje su također poznate kao 3 sloja web razvoja, su Struktura, stil i Ponašanje.

Tri sloja web razvoj

• Struktura ili sloj sadržaja
  • Struktura ili sadržajni sloj web stranice temeljni je HTML kôd te stranice. Kao što je okvir kuće stvara snažan temelj na kojem se gradi ostatak kuće, tako i čvrst temelj HTML-a stvara platformu na kojoj se može kreirati web stranica. HTML struktura može se sastojati od teksta ili slika i uključuje hiperveze koje posjetitelji koriste za kretanje po toj web stranici.
• Stil ili prezentacijski sloj
  • Stil ili prezentacijski sloj diktira kako će strukturirani HTML dokument izgledati posjetiteljima web mjesta. Ovaj sloj definira CSS (Cascading Style Sheets). Te datoteke sadrže stilove koji upućuju na to kako bi dokument trebao biti prikazan u web pregledniku. Na današnjem webu sloj stila može uključivati ​​i medijske upite koji mogu promijeniti prikaz web mjesta na temelju različitih veličina zaslona i uređaja .
• Ponašanje
  • Sloj ponašanja jest sloj web stranice koja može odgovoriti na različite korisničke radnje ili napraviti izmjene na stranici na temelju skupa uvjeta. Za većinu web stranica, razina ponašanja bila bi interakcije JavaScript na stranici.

Zašto biste razdvojili slojeve?

Kada izrađujete web stranicu, poželjno je da slojevi budu odvojeniji što je više moguće. Struktura treba biti povjerena vašem HTML-u, vizualnim stilovima u CSS i ponašanju na bilo koje skripte koje stranica koristi.

Neke od prednosti razdvajanja slojeva su:

• Dijeljeni resursi
  • Kada napišete vanjsku CSS datoteku ili JavaScript datoteku, tu datoteku možete upotrijebiti bilo kojom stranicom vaše web stranice. 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 urediti svaku stranicu web stranice pojedinačno, što bi za veću web lokaciju moglo biti naporan pothvat.
• Brži preuzimanja
  • Nakon što je vaš klijent prvi puta preuzimao skriptu ili stilski tablicu, njegov je web preglednik spremljen u memoriju. Budući da su ti dijeljeni resursi sada sadržani u predmemoriji, brže se učitavaju i druge stranice koje se traže u pregledniku, što poboljšava ukupnu brzinu stranice i performanse.
• Više momčadi
  • Ako više od jedne osobe radi na web stranici odjednom, možete koristiti sustave za "check in" i "check out" datoteka kako biste osigurali da svi na timu rade s najnovijim verzijama tih datoteka. 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 one web stranice mogu učinkovitije pretražiti taj sadržaj i razumjeti stranicu a da se ne opterećuju vizualnim stilom ili informacijama o ponašanju.
• Pristupačnost
  • Vanjski stilski listovi i skripta datoteke dostupniji su ljudima i preglednicima. Zbog toga što se odvajanje stila i strukture softver poput čitača zaslona može lakše obrađivati ​​sadržaj iz strukturnog sloja, a da pritom ne padne na noge stilovima koji ionako ne mogu koristiti.
• Povratak kompatibilnosti
  • Kada imate web mjesto koje je dizajnirano s razvojnim slojevima, to će biti više kompatibilno unatrag jer preglednici ili uređaji koji ne mogu koristiti određene CSS stilove ili koji možda imaju onemogućen JavaScript mogu i dalje vidjeti HTML. Vaša web stranica može se postupno poboljšati pomoću značajki za preglednike koji ih podržavaju.

HTML - Strukturni sloj

Slojevi strukture pohranjuju sav sadržaj koji vaši klijenti žele čitati ili pogledati. To će biti kodirano u skladu s HTML5 standardima i može uključivati ​​tekst i slike, kao i multimediju (video, audio, itd.). Važno je provjeriti je li svaki aspekt sadržaja vaše web-lokacije predstavljen u sloju strukture. To omogućuje korisnicima koji imaju isključen JavaScript ili koji ne mogu vidjeti CSS da bi imali pristup cijeloj web stranici, ako ne i sve funkcionalnosti te web lokacije.

CSS - Stilski sloj

Izradit ćete sve svoje vizualne stilove za svoje web stranice u vanjskom stilu. Možete koristiti više stilskih listova, ali imajte na umu da svaka zasebna CSS datoteka zahtijeva HTTP zahtjev za dohvaćanje, što utječe na performanse web mjesta.

JavaScript - sloj ponašanja

JavaScript je najčešće korišten jezik za sloj ponašanja, ali kao što sam već spomenuo, CGI i PHP mogu generirati ponašanja na web stranici. Naime, kada se većina programera odnosi na sloj ponašanja, oni znače taj sloj koji se aktivira izravno u web pregledniku - tako da je JavaScript gotovo uvijek jezik izbora. Koristite ovaj sloj za izravno komuniciranje s modelom DOM ili objektom dokumenta. Pisanje valjanog HTML-a u sloju sadržaja također je važno za DOM interakcije u sloju ponašanja.

Kada izradite sloj ponašanja, trebali biste upotrijebiti vanjske datoteke skripte baš kao i kod CSS-a. Dobivate sve iste prednosti korištenja vanjskog stila.