De ce toate site-urile sunt construite cu o combinație de structură, stil și comportament
O analogie obișnuită care este folosită pentru a descrie dezvoltarea de site-uri web de pe front-end este că este ca un scaun cu 3 picioare. Aceste trei picioare, care sunt, de asemenea, cunoscute ca cele trei straturi de dezvoltare web, sunt Structura, Stilul și comportamentele.
Cele trei niveluri de dezvoltare web
- Structura sau stratul de conținut
- Structura sau stratul de conținut al unei pagini web este codul HTML care stă la baza paginii respective. Ca un cadru al casei creează o fundație solidă pe care se construiește restul casei, așa că fundația solidă a HTML creează o platformă pe care poate fi creat un site web. Structura HTML poate consta din text sau imagini și include hyperlink-urile pe care vizitatorii le vor folosi pentru a naviga în jurul site-ului respectiv.
- Stil sau stil de prezentare
- Stratul de stil sau de prezentare dictează modul în care un document HTML structurat va arăta vizitatorilor unui site. Acest strat este definit de CSS (Sheets of Cascading Style Sheets). Aceste fișiere conțin stiluri care indică modul în care documentul ar trebui afișat într-un browser web. Pe Web-ul de astăzi, stratul de stil poate include și interogări media care pot schimba afișarea unui site pe baza unor dimensiuni și dispozitive diferite .
- Comportament
- Stratul de comportament este stratul unei pagini Web care poate răspunde diferitelor acțiuni ale utilizatorilor sau poate modifica o pagină pe baza unui set de condiții. Pentru majoritatea paginilor web, nivelul de comportament ar fi interacțiunile JavaScript din pagină.
De ce ar trebui să separați straturile?
Când creați o pagină web, este de dorit să păstrați straturile cât mai separate. Structura ar trebui să fie confidențiată cu HTML, cu stilurile vizuale cu CSS și cu comportamentele pentru toate scenariile pe care site-ul le utilizează.
Unele dintre beneficiile separării straturilor sunt:
- Resurse partajate
- Când scrieți un fișier CSS extern sau un fișier JavaScript, puteți utiliza acel fișier prin orice pagină de pe site-ul dvs. web. Dacă trebuie să faceți o modificare a acelui fișier, probabil pentru a actualiza unele stiluri tipografice pe site-ul web, fiecare pagină care folosește foaia de stil va primi schimbarea. Nu este nevoie să editați fiecare pagină a site-ului în mod individual, care pentru un site mai mare ar putea fi o afacere extenuantă.
- Descărcări mai rapide
- Odată ce scriptul sau foaia de stil au fost descărcate de clientul dvs. pentru prima dată, acesta este stocat în cache de către browserul de web. Deoarece aceste resurse partajate sunt acum stocate în memoria cache, alte pagini care sunt solicitate în browser se încarcă mai repede, ceea ce îmbunătățește viteza și performanța globală a paginilor.
- Grupuri cu mai multe persoane
- Dacă aveți mai multe persoane care lucrează simultan pe un site Web, puteți utiliza sisteme care permit "verificarea" și "verificarea" fișierelor pentru a vă asigura că toți cei din echipă lucrează cu cele mai recente versiuni ale acestor fișiere. Acest lucru este mult mai greu de făcut dacă stilurile și comportamentele sunt interconectate cu documentele de structură.
- SEO
- Un site care are o separare clară a stilului și a structurii este probabil să funcționeze mai bine pentru motoarele de căutare, deoarece acele site-uri pot accesa mai ușor conținutul respectiv și pot înțelege pagina fără a fi împotmolit cu informații de stil sau comportament.
- Accesibilitate
- Formatele de stil externe și fișierele de script sunt mai accesibile pentru utilizatori și pentru browsere. Deoarece există o separare a stilului și a structurii, software-ul precum cititorii de ecran poate procesa mai ușor conținutul din stratul de structură fără a fi împotmolit de stiluri pe care nu le pot folosi oricum.
- Compatibilitate înapoi
- Când aveți un site proiectat cu straturile de dezvoltare, acesta va fi mai compatibil înapoi, deoarece browserele sau dispozitivul care nu poate utiliza anumite stiluri CSS sau care ar putea fi dezactivate JavaScript pot să vizualizeze HTML-ul. Site-ul dvs. web poate fi apoi îmbunătățit treptat cu funcții pentru browserele care le suportă.
HTML - stratul de structură
Stratul de structură este locul unde stocați tot conținutul pe care clienții dvs. doresc să îl citească sau să îl privească. Acesta va fi codificat în HTML5 compatibil cu standardele și poate include text și imagini, precum și multimedia (video, audio, etc.). Este important să vă asigurați că fiecare aspect al conținutului site-ului dvs. este reprezentat în stratul de structură. Acest lucru permite tuturor clienților care au dezactivat JavaScript sau care nu pot vedea CSS pentru a avea acces la întregul site web, dacă nu la toate funcționalitățile site-ului respectiv.
CSS - stratul de stiluri
Veți crea toate stilurile vizuale pentru site-ul dvs. web într-o foaie de stil externă. Puteți utiliza mai multe foi de stiluri, dar rețineți că fiecare fișier CSS separat necesită o preluare HTTP, care afectează performanța site-ului.
JavaScript - stratul de comportament
JavaScript este cel mai frecvent utilizat limbaj pentru stratul de comportament, dar așa cum am menționat anterior, CGI și PHP pot genera, de asemenea, comportamente de pagină Web. Acestea fiind spuse, atunci când majoritatea dezvoltatorilor se referă la stratul de comportament, înseamnă că stratul care este activat direct în browserul web - deci JavaScript este aproape întotdeauna limba aleasă. Utilizați acest strat pentru a interacționa direct cu modelul DOM sau Document Object. Scrierea HTML validă în stratul de conținut este, de asemenea, importantă pentru interacțiunile DOM în stratul de comportament.
Când construiți în stratul de comportament, ar trebui să utilizați fișiere de script externe la fel ca în cazul CSS. Ați obținut toate aceleași avantaje ale utilizării unei foi de stil externe.