comportamientos de layouts

estructura de un documento

Una Pagina Web en su parte ms sencilla esta compuesta por cajas que
ordenadas horizontal y verticalmente forman la estructura (layout)de una
Web, estas cajas representan los mens,barras de navegacin, imgenes,
ttulos, etc.

En una pagina web standard, se

visualizan normalmente 6 cajas
imaginarias:

encabezado
navegacin
seccin
artculos
complementos
pie

encabezado del documento

El encabezado es una caja horizontal que suele ocupar el ancho de la

pgina. 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.

header

nav

banner

columna de exploracin

Este tipo de columnas, se le emplea para ubicar algunos elementos

importantes de la pgina, como enlaces externos, navegacin interna,
publicidad, informaciones adicionales y contenidos secundarios.

columna de
exploracin

rea de contenido

Esta zona del diseo de la pgina, es la que menos reglas ya que en ella se
encuentran los contenidos principales de la pgina, el diseo (como
anteriormente hemos comentado) depende en gran medida estos
contenidos.

seccin

artculos

aside

pie de contenido

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 polticas del sitio y asuntos legales, datos de
contacto, enlaces a sitios relacionados, enlaces internos, etc.

footer

Existen adems en razn de las

posibilidades de navegacin en
nuevos dispositivos, modos de
interpretar esta estructura de
contenidos.

layouts fijos

Se trata de un diseo de pgina web en el que se ha fijado un contenedor

con un ancho fijo en el que se incluyen componentes con anchos tambin
prefijados o basados en porcentajes relativos al contenedor.
El contenedor principal est parametrizado para no variar,
independientemente de la resolucin de pantalla del usuario que visita la
pgina y tiene la misma anchura para todos los usuarios.

En el siguiente ejemplo, se muestra el esquema general de un diseo de

pgina web de ancho fijo. Los componentes internos se fijan a 520, 200 y
200 pxeles, respectivamente.

ventajas

Son ms fciles de usar y de personalizar en trminos de diseo.

Los anchos son los mismos para todos los navegadores, as que hay
menos problemas con las imgenes, formularios, vdeo y otros contenidos
que son de ancho fijo.

inconvenientes

Un diseo de ancho fijo puede crear un espacio vaco excesivo para los
usuarios con resoluciones de pantalla ms grande.
Con resoluciones de pantalla ms pequeas, puede requerir una barra de
desplazamiento horizontal, segn el ancho fijado para la estructura.
Suele tratarse de diseos menos valorados en trminos de usabilidad.

layouts fluidos o elsticos

En este estilo de estructura, la mayora de los componentes internos tienen

anchos en porcentaje, lo que les permite ajustarse a la resolucin de
pantalla del usuario. Se pueden fijar ciertos elementos en los diseos
fluidos, tales como los mrgenes, pero el layout en general se basa en
porcentajes de anchura de los elementos.

En el siguiente ejemplo, se muestra el esquema general de un diseo de

pgina web basado en relaciones de porcentajes.

ventajas

La ventaja principal de este planteamiento es que, si est bien

desarrollado, se adaptar a cualquier tipo de resolucin o dispositivo. Por
otra parte, al ocupar un mayor espacio en la ventana del navegador,
permite mostrar ms contenido sin necesidad de hacer scroll.

inconvenientes

Dependen de un lenguaje de programacin en transicin, por lo que se

debe de generar varias adaptaciones para su correcta visualizacin

calcular dimensiones

traspasar datos de valores absolutos a relativos

Existen muchos modos de poder calcular como manejar la proporcin de

los contenidos en una maquetacin fluida, pero particularmente podemos
centrarnos en una formula:

objetivo contexto = resultado

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.

Podemos definir el ancho de 637px como 100%. Ahora queremos ver

cunto ocupan los otros dos elementos. Es tan fcil como esto:
420px 637 px= 65.9340659%
204px 637px = 32.025117%

encargo tres

www.cthchile.com

traspaso a grilla flexible

Basados en la explicacin de la clase de hoy, realizarn el traspaso de grilla

fija a flexible, utilizando para ello los elementos de conversin revisados
Traspaso a porcentajes
Resoluciones de pantalla de dispositivos

posibilidades de traspaso

1. Trabajar solo con la portada del sitio cthchile

2. Crear elementos de representacin para computadora, tablet (horizontal,
vertical) y smartphone horizontal, vertical)
3. Redefinir completamente la propuesta esttica de los elementos de
interfaz

elementos a entregar

se entrega
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

como determino la cantidad de

columnas para mi grilla segn el
dispositivo

6-8
3-6

12 - 24
8 - 12

puedes crear las grillas desde gridulator.com

entrega: 28/10