Personas que trabajan en el diseño web La industria comparó el desarrollo de sitios web de front-end con un taburete de tres patas. Estas tres patas, las tres capas del desarrollo web, comprenden la estructura, el estilo y los comportamientos de un sitio.
¿Por qué debería separar las capas?
Cuando está creando una página web, su estructura debe estar relegada a su HTML, estilos visuales al CSSy 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 realizar un cambio en ese archivo, tal vez para actualizar algunos estilos tipográficos en el sitio web, todas las páginas que utilicen esa hoja de estilo recibirán 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: Después de que el cliente haya descargado la secuencia de comandos o la hoja de estilo por primera vez, el navegador web la almacena en caché. Debido a que estos recursos compartidos ahora están contenidos en el caché de navegador, otras páginas que se solicitan en el navegador se cargan más rápidamente, lo que mejora la velocidad y el rendimiento general de la página.
- Equipos de varias personas: Si tiene más de una persona trabajando en un sitio web a la vez, use sistemas de control de versiones que permitan registrar y retirar archivos para asegurarse de que todos estén trabajando con el Últimas Versiones. Este proceso es mucho más difícil de realizar si los estilos y comportamientos se entrelazan con documentos de estructura.
- SEO: Es probable que un sitio que demuestre una clara separación de estilo y estructura tenga un mejor rendimiento para los motores de búsqueda porque puede rastrear ese contenido de manera más eficaz y comprender la página sin atascarse en el estilo visual y el comportamiento información.
- Accesibilidad: Las hojas de estilo y los archivos de script externos son más accesibles para las personas y los navegadores. Software como lectores de pantalla pueden procesar el contenido de la capa de estructura más fácilmente sin tener que lidiar con estilos que no pueden usar de todos modos.
- Compatibilidad con versiones anteriores: Un sitio que está diseñado con capas de desarrollo independientes es más probable que 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 la HTML. A continuación, puede mejorar su sitio web de forma progresiva con funciones para los navegadores compatibles.
HTML: la capa de estructura
La estructura o capa de contenido de una página web es la base HTML código de esa página. Así como el marco de una casa crea una base sólida sobre la que 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 quieren leer o mirar. La estructura HTML puede constar de texto e imágenes, e incluye la hipervínculos que los visitantes utilizarán para navegar por el sitio web. Esta información está codificada en conformidad con los estándares. HTML5 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. Esta separación permite a los clientes que tienen JavaScript desactivado o que no pueden ver CSS acceder a todo el sitio web, si no a toda su funcionalidad.
CSS: la capa de estilos
Esta capa dicta cómo se verá un documento HTML estructurado para los visitantes de un sitio y está definida por CSS (Hojas de estilo en cascada). Estos archivos contienen instrucciones estilísticas sobre cómo debe mostrarse el documento en un navegador web. La capa de estilo generalmente incluye preguntas de los medios que cambian la visualización de un sitio en función de tamaño de pantalla y dispositivo.
Todos los estilos visuales de un sitio web deben residir en una hoja de estilo externa. Puede utilizar varias hojas de estilo, pero cada archivo CSS requiere una solicitud HTTP para recuperarlo, afectando 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 utilizan 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 modelo de objetos de documento. Escribir HTML válido en la capa de contenido es importante para las interacciones DOM en la capa de comportamiento. Cuando construye la capa de comportamiento, debe usar archivos de script externos, al igual que con CSS, para optimizar la velocidad y el rendimiento.