Per què tots els llocs web es construeixen amb una combinació d'estructura, estil i comportament
Una analogia comú que s'utilitza per descriure el desenvolupament de llocs web frontal és que és com un tamboret de 3 potes. Aquestes 3 cames, que també es coneixen com les 3 capes de desenvolupament web, són Estructura, Estil i Comportament.
Les tres capes de desenvolupament web
- Estructura o capa de contingut
- L'estructura o la capa de contingut d'una pàgina web és el codi HTML subjacent d'aquesta pàgina. Igual que el marc d'una casa, es crea una base sòlida sobre la qual es construeix la resta de la casa, de manera que una base sòlida de HTML crea una plataforma sobre la qual es pot crear un lloc web. L'estructura HTML pot consistir en text o imatges i inclou els hipervincles que els visitants utilitzaran per navegar per aquest lloc web.
- Estil o capa de presentació
- L'estil o la capa de presentació estableixen com es veurà un document HTML estructurat als visitants d'un lloc. Aquesta capa està definida per CSS (Fulls d'estil en cascada). Aquests fitxers contenen estils que indiquen com s'ha de mostrar el document en un navegador web. A la web d'avui, la capa d'estil també pot incloure consultes multimèdia que poden canviar la visualització d'un lloc en funció de diferents mides i dispositius de pantalla .
- Comportament
- La capa de comportament és la capa d'una pàgina web que pot respondre a diferents accions de l'usuari o fer canvis a una pàgina en funció d'un conjunt de condicions. Per a la majoria de les pàgines web, el nivell de comportament seria la interacció de JavaScript a la pàgina.
Per què hauria de separar les capes?
Quan creeu una pàgina web, és convenient mantenir les capes tan separades com sigui possible. L'estructura s'hauria de confiar als vostres HTML, als estils visuals de CSS i als comportaments de qualsevol script que el lloc utilitzi.
Alguns dels avantatges de separar les capes són:
- Recursos compartits
- Quan escriviu un fitxer CSS extern o un fitxer JavaScript, podeu utilitzar aquest fitxer per qualsevol pàgina del vostre lloc web. Si necessiteu fer un canvi en aquest fitxer, potser per actualitzar alguns estils tipogràfics al lloc web, totes les pàgines que utilitzin aquest full d'estil obtindran el canvi. No cal editar totes les pàgines del lloc web individualment, que per a un lloc més gran podria ser una empresa esgotadora.
- Descàrregues més ràpides
- Un cop el guió o el full d'estil ha estat descarregat pel vostre client per primera vegada, el navegador web ho emmagatzema a la memòria cau. Atès que aquests recursos compartits ara estan continguts a la memòria cau, les pàgines que es demanen al navegador es carreguen amb més rapidesa, la qual cosa millora la velocitat i el rendiment general de la pàgina.
- Equips multipersonals
- Si teniu més d'una persona que treballa en un lloc web alhora, podeu utilitzar els sistemes per a "check-in" i "check-out" dels fitxers per assegurar-vos que tots els usuaris de l'equip treballin amb les últimes versions d'aquests fitxers. Això és molt més difícil de fer si els estils i els comportaments estan entrellaçats amb documents d'estructura.
- SEO
- Un lloc que tingui una clara separació d'estil i estructura és probable que funcioni millor per als motors de cerca, ja que aquests llocs poden rastrejar més eficaçment aquest contingut i comprendre la pàgina sense aturar-se amb l'estil visual o la informació del comportament.
- Accessibilitat
- Els fulls d'estil externs i els fitxers de seqüència de comandaments són més accessibles per a les persones i els navegadors. Com que hi ha una separació d'estil i estructura, el programari, com els lectors de pantalla, pot processar el contingut de forma més senzilla a la capa d'estructura sense estancar-se per estils que no poden utilitzar de totes maneres.
- Compatibilitat cap a enrere
- Quan tingueu un lloc que estigui dissenyat amb les capes de desenvolupament, serà més compatible cap enrere perquè els navegadors o dispositius que no poden utilitzar determinats estils CSS o que poden tenir JavaScript desactivat encara poden veure el codi HTML. El vostre lloc web es pot millorar progressivament amb funcions per als navegadors que els admeten.
HTML: la capa d'estructura
La capa d'estructura és on s'emmagatzema tot el contingut que els clients volen llegir o veure. Això es codificarà en estàndards compatibles amb HTML5 i pot incloure text i imatges, així com multimèdia (vídeo, àudio, etc.). És important assegurar-se que tots els aspectes del contingut del vostre lloc es representen a la capa d'estructura. Això permet que qualsevol client que tingui JavaScript desactivat o que no pugui veure CSS encara té accés a tot el lloc web, si no tota la funcionalitat d'aquest lloc.
CSS: la capa d'estils
Crearà tots els estils visuals del vostre lloc web en un full d'estils extern. Podeu utilitzar diversos fulls d'estil, però recordeu que cada fitxer CSS separat requereix una sol · licitud HTTP per obtenir, afectant el rendiment del lloc.
JavaScript: la capa de comportament
JavaScript és el llenguatge més utilitzat per a la capa de comportament, però com ja he esmentat anteriorment, CGI i PHP també poden generar conductes de pàgines web. Dit això, quan la majoria dels desenvolupadors fan referència a la capa de comportament, vol dir que la capa s'activa directament al navegador web, de manera que JavaScript és gairebé sempre l'idioma que triï. Utilitza aquesta capa per interactuar directament amb el DOM o el Model d'objectes de document. L'escriptura d'HTML vàlid a la capa de contingut també és important per a les interaccions DOM a la capa de comportament.
Quan compileu la capa de comportament, haureu d'utilitzar fitxers de seqüència externs igual que amb CSS. Tens totes les avantatges d'utilitzar un full d'estils extern.