Crea tu Web: Indice de diseño

Indice Visión general Previos Estructura Diseño Herramientas Recursos

 

El texto en una página web

Aunque las páginas que viajan por la red son excelentes plataformas multimedia, no cabe duda que cualquier página va a tener texto y datos y listas. Este sitio que estás visitando es un claro ejemplo de ello. En la introducción veíamos que el texto no debe ser lo predominante en una página web, y que si es indispensable que nuestra página tenga mucha literatura lo mejor es distribuirla y organizarla de manera que no se vea un panorama demasiado árido.

Leer en la pantalla de un ordenador causa cierto rechazo, y en una pantalla de móvil no digamos. Estas páginas, por ejemplo, normalmente serán leídas en sobremesa, portátil o tablet. Así que es necesario buscar formas de distribuir el texto por la página de forma que no parezca demasiado compacto. Además de, por supuesto, seguir unas guías de estilo adecuadas.

Tablas
Hasta la llegad del HTML5 las tablas eran quizás el mejor método para ordenar el texto, y otros elementos, en una página web. Una tabla básicamente es una colección de celdas organizadas en filas y columnas, pero esta organización tan cuadriculada puede romperse combinando varias celdas en una sola o dividiento una celda en varias filas o columnas. Esto convierte a la tabla en un elemento tremendamente versátil para repartir texto, e imágenes, en la página. En los ejemplos siguientes tienes algunas tablas modificadas en este sentido, se les han puesto bordes para que veas como se han combinado o dividido las celdas.
   
   
 
     
 
   
 
   
   
Sin HTML5 reserva para las tablas un uso más restringido. Las tablas quedan para lo que son: mostrar datos, como listas de precios, catálogos... No es que no puedan usarse como se hacía en HTML4 es perfectamente posible, pero la filosofía del nuevo lenguaje de marcas procura dar a cada elemento de la página un uso determinada (elementos nav para barras de navegación, section para apartados, etc).
Capas: elementos DIV
Es otra alternativa para repartir los componentes de la página. Son elementos DIV con posicionamiento absoluto, es decir, cajas o bloques con contendio que podemos colocar en el lugar de la página que queramos (incluso fuera de ella). Desde las layer del antiguo Netscape hasta hoy día la forma de crear y usar esas capas ha cambiado bastante, no solo el nombre, DIV. Las capas o bloques son casi como pequeñas páginas en el sentido que pueden tener cualquier tamaño y pueden contener cualquier componente HTML: texto, tablas, imágenes, formularios, otras capas (DIV)... Estas capas o bloques son también muy útiles para crear animaciones en las páginas o para crear páginas con contenidos a varios niveles (como si tuvieras varias páginas en un mismo sitio, unas sobre otras). Por ejemplo si pulsas en este enlace verás que ocurre. En el lenguaje de marcas actual, HTML 5,las DIV y sus variantes son recomendadas en lugar de usar tablas. Además otra gran ventaja es que estos elementos DIV puede reordenarse o redimensionarse en función del tamaño de la pantalla. Son vitales para el diseño adaptativo o en ingles: responsive.
Los estilos CSS

El actual HTML5 separa totalmente el contenido de la página de la forma de presentarlo, la vieja aspiración del HTML. De ahí que use elementos específicos en función de la finalidad de su contenido: un elemento <nav> está pensado para ser contener un menú de navegación, por ejemplo. Y de ahí también que cualquier página web actual venga acompañada de una buena colección de definiciones de estilo CSS: conjunto de reglas que dicen como mostar el contenido de la página. Se definen, por ejemplo, colores, tamaños de letras, o formas de presentar los bloques DIV de una página.

Asi, con las reglas CSS puedes hacer invisible un elemento DIV, o definir su tamaño, si tiene bordes o no, y como se deben mostrar: como una tabla, como filas o como celdas, o como bloques, o bloques en linea....Toda una vareidad a elegir. Pero lo interesante es una manera de mostrar los bloques DIV llamada grid que imita y enriquece a la estructura tabla. En CSS un bloque grid define columnas y filas, pero además permite fundirlas o dividirlas (como se hace en las table) pero de manera dinámica. Con lo que facilita mucho el trabajo al diseñar páginas responsive (el diseño adaptativo), porque permite redefinir una estructura tipo tabla al modificar el tamaño de la pantalla donde se ve nuestra página web.

CSS también provee la disposición de bloques tipo flex, que no es más que una manera de mostrar un bloque grande con bloques hijos en su interior. Es también una manera de crear una estructura tipo tabla. Los bloques hijo se reparten dentro de un bloque padre en horizontal y/o en vertical. Sigue siendo una estructura dinámica y por tanto muy aplicable en diseño responsive.

Estructura de los sitios web
Las imágenes en tu página


Diseño Web | Plantillas Web | Guia de Estilo | Lenguaje HTML

Comunidad Virtual. Alojamiento web gratis