Oamenii care lucrează în web design industria compară dezvoltarea site-ului web frontal cu un scaun cu trei picioare. Aceste trei picioare - cele trei straturi ale dezvoltării web - cuprind structura, stilul și comportamentele unui site.
De ce ar trebui să separați straturile?
Când creați o pagină web, structura acesteia ar trebui să fie retrogradată în HTML, stiluri vizuale către CSS, și comportamente la scripturi. Unele dintre beneficiile separării straturilor sunt:
- Resurse partajate: Când scrieți un fișier CSS extern sau JavaScript, orice pagină de pe site poate utiliza acel fișier. Dacă trebuie să modificați fișierul respectiv, poate la actualizați câteva stiluri tipografice pe site, fiecare pagină care folosește acea foaie de stil va primi modificarea. Nu este nevoie să editați fiecare pagină a site-ului în mod individual, ceea ce ar putea fi o întreprindere istovitoare pentru un site web mare.
- Descărcări mai rapide: După ce scriptul sau foaia de stil a fost descărcat de clientul dvs. pentru prima dată, acesta este stocat în cache de browserul web. Deoarece aceste resurse partajate sunt acum conținute în cache-ul browserului, alte pagini care sunt solicitate în browser se încarcă mai repede, ceea ce îmbunătățește viteza și performanța generală a paginii.
- Echipe cu mai multe persoane: Dacă aveți mai multe persoane care lucrează simultan pe un site web, utilizați sisteme de control al versiunilor care permit verificarea și ieșirea fișierelor pentru a vă asigura că toată lumea lucrează cu ultimele versiuni. Acest proces este mult mai greu de realizat dacă stilurile și comportamentele sunt împletite cu documentele structurale.
- SEO: Un site care demonstrează o separare clară de stil și structură este probabil să funcționeze mai bine pentru motoarele de căutare, deoarece acestea poate să acceseze cu crawlere acel conținut mai eficient și să înțeleagă pagina fără să se împotmolească în stil vizual și comportament informație.
- Accesibilitate: Fișele de stil externe și fișierele script sunt mai accesibile pentru oameni și pentru browsere. Software cum ar fi cititoare de ecran poate procesa mai ușor conținutul din stratul de structură fără a trata stiluri pe care oricum nu le pot folosi.
- Compatibilitate inversă: Un site proiectat cu straturi de dezvoltare separate este mai probabil să fie compatibil cu versiunile anterioare, deoarece browserele și dispozitivele care nu pot utiliza anumite stiluri CSS sau care au JavaScript dezactivat pot vedea în continuare HTML. Apoi, puteți îmbunătăți site-ul dvs. progresiv cu funcții pentru browserele care le acceptă.
HTML: Stratul de structură
Structura sau stratul de conținut al unei pagini web este elementul de bază HTML codul acelei pagini. Așa cum cadrul unei case creează o bază solidă pe care este construit restul casei, o bază solidă de HTML creează o platformă pe care poate fi creat un site web.
Stratul de structură este locul în care stocați tot conținutul pe care clienții dvs. doresc să îl citească sau să îl privească. Structura HTML poate consta din text și imagini și include fișierul hyperlinkuri pe care vizitatorii îl vor folosi pentru a naviga în jurul site-ului web. Aceste informații sunt codificate în conformitate cu standardele HTML5 și poate include text, imagini și multimedia (video, audio etc.).
Fiecare aspect al conținutului unui site ar trebui să fie reprezentat în stratul de structură. Această separare permite clienților care au JavaScript dezactivat sau care nu pot vizualiza accesul CSS la întregul site web, dacă nu toate funcționalitățile sale.
CSS: Stratul de stiluri
Acest strat dictează modul în care un document HTML structurat va arăta vizitatorilor unui site și este definit de CSS (Foi de stil în cascadă). Aceste fișiere conțin instrucțiuni stilistice pentru modul în care documentul trebuie afișat într-un browser web. Stratul de stil include de obicei interogări media care schimbă afișarea unui site pe baza dimensiunea ecranului și dispozitivul.
Toate stilurile vizuale pentru un site web ar trebui să se afle într-o foaie de stil externă. Puteți utiliza mai multe foi de stil, dar fiecare fișier CSS necesită o cerere HTTP pentru a-l prelua, care afectează performanța site-ului.
JavaScript: Stratul de comportament
Stratul de comportament face un site web interactiv, permițând paginii să răspundă la acțiunile utilizatorilor sau să se schimbe pe baza unui set de condiții. JavaScript este cel mai des utilizat limbaj pentru stratul de comportament, dar CGI și PHP sunt foarte frecvent folosite, de asemenea.
Când dezvoltatorii se referă la stratul de comportament, majoritatea înseamnă stratul care este activat direct în browserul web. Utilizați acest strat pentru a interacționa direct cu Modelul de obiect document. Scrierea unui HTML valid în stratul de conținut este important pentru interacțiunile DOM în stratul de comportament. Când creați în stratul de comportament, ar trebui să utilizați fișiere de script externe, la fel ca în cazul CSS, pentru a optimiza viteza și performanța.