LA ESTRUCTURA DE UNA PAGINA WEB

Los elementos de la Web se componen de textos, imágenes, vídeos… Y se colocan dentro de la página de la forma que facilite mejor su entendimiento y uso. La colocación de estos elementos sobre la página se llama estructura. La forma en que se colocan los elementos se define como la estructura de la página. Los elementos de una correcta estructura son: • Cabecera o header: normalmente se coloca en la parte superior de la página. • Logo: es la marca o título que tiene la página • Menú: es el elemento principal de navegación entre los apartados. Lo podemos encontrar también en el pie de página. • Cuerpo de la página o body: donde introducimos los contenidos principales. • Pie de página o footer: cierre, copyright, créditos…

Patrones de diseño web adaptables

Los patrones de diseño web adaptables evolucionan rápidamente, pero existen varios patrones establecidos que funcionan bien en los diferentes equipos de escritorio y dispositivos móviles.

Los patrones 

Con el propósito de lograr una comprensión simple y fácil, cada uno de los que se presentan a continuación se crearon con lenguaje de marcado real a través de flexbox, generalmente con tres divde contenido dentro de un contenedor principal de div

Mostly Fluid

 El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas. 

Colocación de columnas En el caso de los diseños con varias columnas de ancho completo, durante el proceso de colocación de columnas éstas únicamente se colocan de forma vertical debido a que el ancho de la ventana es demasiado reducido para el contenido.

Layout shifter 

El patrón Layout shifter es el más adaptable, ya que posee varios puntos de interrupción en diferentes anchos de pantalla.

Tiny tweaks

 El patrón Tiny tweaks permite realizar pequeños cambios en el diseño, como ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o desplazar el contenido de maneras muy poco significativas.

Off canvas

 En lugar de apilar contenido verticalmente, el patrón Off canvas coloca contenido menos usado (tal vez menús de navegación o de apps) fuera de la pantalla y solo lo muestra cuando el tamaño de la pantalla es suficientemente grande. 
 

En esta muestra, en lugar de apilarse el contenido verticalmente, se usa una declaración transform: translate (-250px, 0) para ocultar dos de los div de contenido fuera de la pantalla mediante la propiedad. Se usa JavaScript para mostrar los divs agregando una clase abierta al elemento para hacerlo visible. A medida que se ensancha la pantalla, el posicionamiento fuera de esta se elimina de los elementos y estos se muestran dentro de la ventana de visualización visible.