Quienes trabajan en la industria del diseño web comparan el desarrollo de sitios web front-end con un taburete de tres patas. Estas tres etapas, las tres capas del desarrollo web, comprenden estructura, estilo y comportamientos.
¿Por qué debería separar las capas?
Cuando está creando una página web, su estructura debe ser relegada a su HTML, los estilos visuales al CSS y los comportamientos a los scripts. Algunos de los beneficios de separar las capas son:
- Recursos compartidos: Cuando escribe un archivo CSS o JavaScript externo, cualquier página del sitio puede usar ese archivo. Si necesita hacer un cambio en ese archivo, tal vez para actualizar algunos estilos tipográficos en el sitio web, cada página que use esa hoja de estilo obtendrá el cambio. No es necesario editar cada página del sitio web individualmente, lo que podría ser una tarea agotadora para un sitio web grande.
- Descargas más rápidas: Una vez que el cliente ha descargado el script o la hoja de estilo por primera vez, el navegador web lo almacena en caché. Debido a que estos recursos compartidos ahora están contenidos en la memoria caché del navegador, otras páginas que se solicitan en el navegador se cargan más rápidamente, lo que mejora la velocidad general de la página y el rendimiento.
- Equipos multi-persona: Si tiene más de una persona trabajando en un sitio web a la vez, puede usar sistemas que permiten registrar y sacar archivos para asegurarse de que todos trabajen con las últimas versiones. Esto es mucho más difícil de hacer si los estilos y comportamientos se entrelazan con documentos de estructura.
- SEO: Es probable que un sitio que tenga una clara separación de estilo y estructura tenga un mejor rendimiento para los motores de búsqueda, ya que pueden rastrear ese contenido de manera más efectiva y comprender la página sin quedar atascado en el estilo visual y la información de comportamiento.
- Accesibilidad: Las hojas de estilo externas y los archivos de script son más accesibles para las personas y los navegadores. Los programas como los lectores de pantalla pueden procesar contenido desde la capa de estructura más fácilmente sin tratar con estilos que no pueden usar de todos modos.
- Compatibilidad con versiones anteriores: Es más probable que un sitio que esté diseñado con capas de desarrollo separadas sea compatible con versiones anteriores porque los navegadores y dispositivos que no pueden usar ciertos estilos CSS o que tienen JavaScript deshabilitado aún pueden ver el HTML. Luego puede mejorar su sitio web progresivamente con características para los navegadores que las admiten.
HTML: la capa de estructura
La estructura o capa de contenido de una página web es el código HTML subyacente de esa página. Al igual que el marco de una casa crea una base sólida sobre la cual se construye el resto de la casa, una base sólida de HTML crea una plataforma sobre la cual se puede crear un sitio web.
La capa de estructura es donde almacena todo el contenido que sus clientes desean leer o leer. La estructura HTML puede consistir en texto e imágenes, e incluye los hipervínculos que los visitantes usarán para navegar por el sitio web. Esto está codificado en HTML5 compatible con los estándares y puede incluir texto, imágenes y multimedia (video, audio, etc.).
Cada aspecto del contenido de un sitio debe estar representado en la capa de estructura. Esto permite a los clientes que tienen JavaScript desactivado o que no pueden ver el acceso de CSS a todo el sitio web, si no toda su funcionalidad.
CSS: la capa de estilos
Esta capa determina cómo se verá un documento HTML estructurado para los visitantes de un sitio y se define mediante CSS (hojas de estilo en cascada). Estos archivos contienen instrucciones estilísticas sobre cómo se debe mostrar el documento en un navegador web. La capa de estilo generalmente incluye consultas de medios que cambian la visualización de un sitio según el tamaño de la pantalla y el dispositivo.
Todos los estilos visuales de un sitio web deben residir en una hoja de estilo externa. Puede usar varias hojas de estilo, pero recuerde que cada archivo CSS requiere una solicitud HTTP para recuperarlo, lo que afecta el rendimiento del sitio.
JavaScript: la capa de comportamiento
La capa de comportamiento hace que un sitio web sea interactivo, lo que permite que la página responda a las acciones del usuario o cambie según un conjunto de condiciones. JavaScript es el lenguaje más utilizado para la capa de comportamiento, pero CGI y PHP también se usan con mucha frecuencia.
Cuando los desarrolladores se refieren a la capa de comportamiento, la mayoría de ellos se refieren a la capa que se activa directamente en el navegador web. Utilice esta capa para interactuar directamente con el DOM (Modelo de objetos de documento). Escribir HTML válido en la capa de contenido es importante para las interacciones de DOM en la capa de comportamiento. Cuando construyes en la capa de comportamiento, debes usar archivos de script externos, al igual que con CSS, para optimizar la velocidad y el rendimiento.
