Comportamientos del layout

comportamientos de layouts

Una Pagina Web en su parte más sencilla esta compuesta por cajas que ordenadas horizontal y verticalmente forman la estructura (layout) de una Web, estas cajas representan los menús,barras de navegación, imágenes, títulos, etc.

estructura de un documento

En una pagina web standard, se visualizan normalmente 6 cajas imaginarias: encabezado navegación sección artículos complementos pie

El encabezado es una caja horizontal que suele ocupar el ancho de la página. A la izquierda del encabezado suele ubicarse el logotipo de la web o de la empresa.

No es una norma esta estructura pero si es una costumbre en el desarrollo de las web.

encabezado del documento

} header

nav}

banner}

Este tipo de columnas, se le emplea para ubicar algunos elementos importantes de la página, como enlaces externos, navegación interna, publicidad, informaciones adicionales y contenidos secundarios.

columna de exploración

columna de exploración}

Esta zona del diseño de la página, es la que menos reglas ya que en ella se encuentran los contenidos principales de la página, el diseño (como anteriormente hemos comentado) depende en gran medida estos contenidos.

área de contenido

sección}

artículos}

aside}

Finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se colocan algunos elementos importantes, como el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.

pie de contenido

footer}

Existen además en razón de las posibilidades de navegación en nuevos dispositivos, modos de interpretar esta estructura de contenidos.

Se trata de un diseño de página web en el que se ha fijado un contenedor con un ancho fijo en el que se incluyen componentes con anchos también prefijados o basados en porcentajes relativos al contenedor.

El contenedor principal está parametrizado para no variar, independientemente de la resolución de pantalla del usuario que visita la página y tiene la misma anchura para todos los usuarios.

layouts fijos

En el siguiente ejemplo, se muestra el esquema general de un diseño de página web de ancho fijo. Los componentes internos se fijan a 520, 200 y 200 píxeles, respectivamente.

Son más fáciles de usar y de personalizar en términos de diseño.

Los anchos son los mismos para todos los navegadores, así que hay menos problemas con las imágenes, formularios, vídeo y otros contenidos que son de ancho fijo.

ventajas

Un diseño de ancho fijo puede crear un espacio vacío excesivo para los usuarios con resoluciones de pantalla más grande.

Con resoluciones de pantalla más pequeñas, puede requerir una barra de desplazamiento horizontal, según el ancho fijado para la estructura.

Suele tratarse de diseños menos valorados en términos de usabilidad.

inconvenientes

En este estilo de estructura, la mayoría de los componentes internos tienen anchos en porcentaje, lo que les permite ajustarse a la resolución de pantalla del usuario. Se pueden fijar ciertos elementos en los diseños fluidos, tales como los márgenes, pero el layout en general se basa en porcentajes de anchura de los elementos.

layouts fluidos o elásticos

En el siguiente ejemplo, se muestra el esquema general de un diseño de página web basado en relaciones de porcentajes.

La ventaja principal de este planteamiento es que, si está bien desarrollado, se adaptará a cualquier tipo de resolución o dispositivo. Por otra parte, al ocupar un mayor espacio en la ventana del navegador, permite mostrar más contenido sin necesidad de hacer scroll.

ventajas

Dependen de un lenguaje de programación en transición, por lo que se debe de generar varias adaptaciones para su correcta visualización

inconvenientes

calcular dimensiones

Existen muchos modos de poder calcular como manejar la proporción de los contenidos en una maquetación fluida, pero particularmente podemos centrarnos en una formula:

traspasar datos de valores absolutos a relativos

Supongamos que tenemos un layout de 637px de ancho con dos columnas, una de 204px y la otra de 420px. Queremos convertir estas medidas a porcentajes.

objetivo ÷ contexto = resultado

Podemos definir el ancho de 637px como 100%. Ahora queremos ver cuánto ocupan los otros dos elementos. Es tan fácil como esto:

420px ÷ 637 px= 65.9340659% 204px ÷ 637px = 32.025117%

encargo tres

www.cthchile.com

Basados en la explicación de la clase de hoy, realizarán el traspaso de grilla fija a flexible, utilizando para ello los elementos de conversión revisados

Traspaso a porcentajes Resoluciones de pantalla de dispositivos

traspaso a grilla flexible

1. Trabajar solo con la portada del sitio cthchile 2. Crear elementos de representación para computadora, tablet (horizontal, vertical) y smartphone horizontal, vertical) 3. Redefinir completamente la propuesta estética de los elementos de interfaz

posibilidades de traspaso

elementos a entregar

Archivos digitales (fireworks / illustrator) de cada una de las propuestas de wireframes (5 en total)

Archivos digitales (fireworks / illustrator) de cada una de las propuestas de mockups (5 en total)

Expresar en las propuestas de wireframes el porcentaje de cada uno de los elementos estructurales (main, header, aside, section, article, footer, nav, etc) que conforman la interfaz

se entrega

como determino la cantidad de columnas para mi grilla según el dispositivo

3 - 6

6 - 8 8 - 1212 - 24

puedes crear las grillas desde gridulator.com

entrega: 28/10