Tablas y Frames, Flexbox y Grid
1. Hojas de Estilo (CSS) 🎨
Una Hoja de Estilo en Cascada (CSS, del inglés Cascading Style Sheets) es el lenguaje que describe la presentación de un documento escrito en un lenguaje de marcado, como HTML.
Función y Principio Clave
La función principal de CSS es separar el Contenido (estructurado en HTML) de la Presentación (el diseño, colores, fuentes, y disposición).
Presentación: Define cómo se debe ver el contenido (ej., el texto principal debe ser azul, centrado y con fuente Arial).
Consistencia: Permite aplicar el mismo estilo a múltiples páginas web de un sitio, asegurando uniformidad visual con solo modificar un archivo.
Eficiencia: Reduce el tamaño de los archivos HTML, haciendo que la página cargue más rápido.
Tipos de Inclusión de CSS
Externa: El método más recomendado. Los estilos se definen en un archivo separado (
.css) y se vinculan al documento HTML.Interna: Los estilos se definen dentro de la sección
<head>del documento HTML, utilizando la etiqueta<style>.En Línea (Inline): Los estilos se aplican directamente a un elemento HTML específico utilizando el atributo
style. Es el menos recomendado para el diseño general.
2. Tablas y Plantillas (Templates) 🖼️
El término "tablas" en este contexto se refiere históricamente a la estructura utilizada para el diseño, mientras que las "plantillas" son la evolución moderna para crear diseños consistentes.
Tablas para Diseño (Histórico)
Anteriormente, los desarrolladores web usaban las etiquetas
<table>,<tr>y<td>(que están diseñadas para datos tabulares) para estructurar el diseño de toda la página (ej., crear barras laterales y encabezados fijos).Estatus: Esta práctica está obsoleta. Hoy en día, la estructura y el diseño se manejan con HTML semántico y CSS (utilizando modelos como Flexbox o Grid).
Plantillas o Templates (Actual)
Una Plantilla (Template) es un archivo o conjunto de archivos que define la estructura, disposición y apariencia común de un sitio web completo.
Función: Permite que ciertas partes del diseño (ej., el encabezado, el menú de navegación, y el pie de página) se mantengan idénticas en todas las páginas, mientras que solo el contenido central cambia.
Uso: Son esenciales en los Sistemas de Gestión de Contenidos (CMS) como WordPress o Joomla, y en frameworks de desarrollo (como Django o React), ya que separan la lógica de la presentación.
Ventaja: Garantizan la coherencia y facilitan el mantenimiento del sitio.
3. Marcos (Frames) y Iframes 🧱
Los marcos son una técnica para dividir la ventana del navegador en múltiples secciones, cada una cargando un documento HTML diferente.
Marcos (Frameset) (Obsoleto)
Mecánica: Se usaba la etiqueta
<frameset>para dividir la ventana del navegador en cuadros fijos (ej., un marco a la izquierda para el menú y un marco principal a la derecha para el contenido).Problemas: Dificultaban el uso de marcadores (bookmarks), complicaban el SEO (optimización para motores de búsqueda) y afectaban la accesibilidad.
Estatus: Están obsoletos en HTML5.
Iframes (Inclusión Moderna)
Mecánica: Un Marco Interno (Iframe) es la etiqueta
<iframe>. Permite incrustar otro documento HTML dentro del documento HTML actual, independientemente del resto de la página.Uso Común: Se utiliza extensamente hoy en día para incrustar contenido de otras fuentes de manera segura (ej., mapas de Google Maps, videos de YouTube, widgets de redes sociales).
Ventaja: Permite la integración de contenido externo sin alterar el diseño principal de la página.
1. La Necesidad del Cambio: Adiós a Tablas y Frames 🚫
El diseño web evolucionó de enfoques basados en la estructura (tablas) a enfoques basados en el contenido y la presentación (HTML + CSS).
| Método Obsoleto | Problema Principal | Solución Moderna |
Tablas (<table>) | No son semánticas para diseño; son lentas de renderizar; son rígidas y no responden bien a diferentes tamaños de pantalla. | CSS Flexbox y Grid |
Frames (<frameset>) | Problemas de accesibilidad, SEO, y usabilidad (el usuario no podía compartir el link exacto al contenido). | JavaScript, Iframes (uso limitado) y CSS Layouts |
2. Flexbox (Modelo de Caja Flexible) 💪
Flexbox está diseñado para la maquetación de una dimensión (ya sea filas o columnas). Su objetivo principal es distribuir el espacio entre los ítems de un contenedor y alinear el contenido de forma eficiente. Es ideal para componentes pequeños o medianos como barras de navegación, formularios o galerías simples.
Conceptos Clave de Flexbox
| Concepto | Propiedad CSS | Función |
| Contenedor (Flex Container) | display: flex; | Define la región que tendrá el diseño flexible. Todas las propiedades de Flexbox se aplican aquí. |
| Eje Principal | flex-direction | Define si los ítems se disponen en fila (row) o en columna (column). |
| Eje Secundario (Cross Axis) | align-items | Controla la alineación de los ítems perpendicularmente al Eje Principal. |
| Distribución de Espacio | justify-content | Controla cómo se distribuyen los ítems y el espacio entre ellos a lo largo del Eje Principal. |
| Envoltura (Wrap) | flex-wrap | Permite que los ítems salten a una nueva línea si no caben en una sola. |
Analagía: Piensa en Flexbox como una fila de soldados marchando. Puedes decirles que se paren juntos (
justify-content: flex-start;), que se separen equitativamente (justify-content: space-around;) o que se alineen al centro (tanto horizontal como verticalmente).
3. Grid (Modelo de Rejilla) 📐
CSS Grid Layout está diseñado para la maquetación de dos dimensiones (filas y columnas simultáneamente). Su objetivo es estructurar áreas completas de una página, como la cabecera, el cuerpo principal, las barras laterales y el pie de página. Es la herramienta moderna ideal para la maquetación global de una web.
Conceptos Clave de Grid
| Concepto | Propiedad CSS | Función |
| Contenedor (Grid Container) | display: grid; | Define la región que tendrá el diseño de cuadrícula. |
| Definición de Columnas/Filas | grid-template-columns / grid-template-rows | Define el número y el tamaño de las columnas y filas de la rejilla. |
Unidad fr | 1fr, 2fr, etc. | Una unidad de fracción que representa el espacio disponible en el contenedor, esencial para el diseño responsive. |
| Posicionamiento de Ítems | grid-column-start/end / grid-row-start/end | Permite que un ítem se extienda a través de varias celdas o filas, uniendo áreas del diseño. |
| Áreas Nombradas | grid-template-areas | Permite nombrar áreas del diseño (ej: header, sidebar, footer) y dibujar la estructura usando esos nombres. |
Analagía: Piensa en Grid como la estructura de un edificio. Defines dónde estará el vestíbulo (cabecera), dónde los ascensores (barra lateral) y dónde las oficinas (contenido principal) antes de meter el mobiliario.
4. Diseño Responsivo: La Ventaja Fundamental
La mayor debilidad de las tablas y frames era su rigidez. Flexbox y Grid, en cambio, fueron creados pensando en el diseño responsivo (Responsive Web Design).
Con Flexbox: Puedes usar la propiedad
flex-wrap: wrap;para que los elementos salten automáticamente a la siguiente línea cuando no haya espacio suficiente, adaptándose a pantallas pequeñas.Con Grid: Puedes redefinir completamente la estructura de la página usando consultas de medios (Media Queries). Por ejemplo:
En el escritorio, defines un diseño de tres columnas.
Cuando la pantalla es pequeña (móvil), usas una Media Query para redefinir el Grid a una sola columna, apilando el contenido verticalmente.
Este enfoque permite una experiencia de usuario óptima en cualquier dispositivo, algo imposible de lograr de forma limpia y eficiente con las tablas.
Comentarios
Publicar un comentario