comportamientos del layout
DESCRIPTION
Definición de que es un layout para webTRANSCRIPT
![Page 1: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/1.jpg)
comportamientos de layouts
![Page 2: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/2.jpg)
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
![Page 3: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/3.jpg)
En una pagina web standard, se visualizan normalmente 6 cajas imaginarias: encabezado navegación sección artículos complementos pie
![Page 4: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/4.jpg)
![Page 5: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/5.jpg)
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
![Page 6: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/6.jpg)
} header
![Page 7: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/7.jpg)
nav}
![Page 8: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/8.jpg)
banner}
![Page 9: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/9.jpg)
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
![Page 10: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/10.jpg)
columna de exploración}
![Page 11: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/11.jpg)
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
![Page 12: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/12.jpg)
sección}
![Page 13: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/13.jpg)
artículos}
![Page 14: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/14.jpg)
aside}
![Page 15: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/15.jpg)
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
![Page 16: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/16.jpg)
footer}
![Page 17: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/17.jpg)
Existen además en razón de las posibilidades de navegación en nuevos dispositivos, modos de interpretar esta estructura de contenidos.
![Page 18: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/18.jpg)
![Page 19: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/19.jpg)
![Page 20: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/20.jpg)
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
![Page 21: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/21.jpg)
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.
![Page 22: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/22.jpg)
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
![Page 23: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/23.jpg)
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
![Page 24: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/24.jpg)
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
![Page 25: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/25.jpg)
En el siguiente ejemplo, se muestra el esquema general de un diseño de página web basado en relaciones de porcentajes.
![Page 26: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/26.jpg)
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
![Page 27: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/27.jpg)
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
![Page 28: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/28.jpg)
calcular dimensiones
![Page 29: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/29.jpg)
![Page 30: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/30.jpg)
![Page 31: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/31.jpg)
![Page 32: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/32.jpg)
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
![Page 33: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/33.jpg)
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
![Page 34: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/34.jpg)
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%
![Page 35: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/35.jpg)
encargo tres
![Page 36: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/36.jpg)
www.cthchile.com
![Page 37: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/37.jpg)
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
![Page 38: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/38.jpg)
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
![Page 39: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/39.jpg)
elementos a entregar
![Page 40: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/40.jpg)
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
![Page 41: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/41.jpg)
como determino la cantidad de columnas para mi grilla según el dispositivo
![Page 42: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/42.jpg)
3 - 6
6 - 8 8 - 1212 - 24
![Page 43: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/43.jpg)
puedes crear las grillas desde gridulator.com
![Page 44: Comportamientos del layout](https://reader033.vdocuments.net/reader033/viewer/2022042822/5695d43c1a28ab9b02a0c4bf/html5/thumbnails/44.jpg)
entrega: 28/10