Upload
patricio-rodriguez-m
View
218
Download
0
Embed Size (px)
DESCRIPTION
Definición de que es un layout para web
Citation preview
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