Imágenes líquidas y navegación adaptable Objetivos: - Incoporar técnicas que permitan entregar distintas imágenes según dispositivo, y volverlas líquidas. - Crear menúes adaptables. Unidad 3

Imágenes de fondo Crear distintas imágenes por cada imagen (una por cada tamaño), que no supere ancho máximo de zona disponible en ese breakpoint.

Ejercicio 1 - Agregar una imagen de fondo como fondo de un elemento (mobile first, chico por defecto). - Adaptarla según espacio disponible, usando media queries, mostrando otra versión más grande en tablets y PC.

Background-size

Ejercicio 2 - Agregar un wallpaper como fondo del body. - Estirarlo según espacio disponible, usando background-size:cover.

Hacer líquidas las.liquida { max-width:100%; height:auto; box-sizing:border-box; /* descuenta borde */ } Aunque... se transfieren igual!

Ejercicio 3 - Insertar una imagen de contenido con la etiqueta y volverla líquida.

Problema de la etiqueta IMG Si el dispositivo muestra esa foto “achicada”, igual descargará la versión grande... (transferencia de Kb inútiles en redes lentas) A futuro, W3C permitirá detectar ancho de banda, que es la clave

Posibles técnicas para adaptar img

a) Usar solamente fondos CSS -Además del HTML, se requiere editar la hoja CSS ante cada nueva foto (para agregar la url de una foto distinta en cada media querie) -Eso dificulta mucho o impide uso de CMS -Puede ser aplicable solo en sitios muy chicos

b) Nuevo tag Picture -Aunque aún no es estándar, se puede usar con un polyfill (script JS).

Ejemplo de Picture (a futuro)

Picture polyfill

Ejercicio 4 - Insertar una imagen de contenido que sea distinta para cada uno de tres rangos de tamaño (chica, mediana y grande) usando el polyfill de picture.

c) Detectar User Agent en el servidor -No es 100% seguro (abundan las falsas detecciones, aunque puede salvarse con link a versión complementaria a la actual).

src.sencha.io Agregar antes del src real (ruta absoluta a la foto GRANDE) <img src=' com/mis-fotos/mi-foto1.jpg' alt='Mi foto grande'>

Puntos a tener en cuenta:

Varias imágenes (crop) = + arte

Breaks de layout NO son los de fotos

¿Y si usamos fotos “medianas” que varíen muy poco? ¿Y si la versión PC no tuviera fotos “gigantes”, sino solo “medianas”, y se escalaran un 30/40% aprox. en móviles?

Alta Resolución en dispositivos (Retina y otros)

Device pixel ratio (dpr) -PC = 1 -Tablets Android = entre 1.33 y 3 -Muchos teléfonos Android = entre 1.5 y 3 -Retina = 3.4 (iPhone 4 y 4S) -Galaxy S4 = 4.5 (441 dpi!!) -Próximamente = 5, 6, 7, etc... Referencia:

96dpi = dpr “1” (dpr = device pixel ratio) Equivalencias (min-resolution: 1.5dppx), (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2) { … }

Fondos para alta resolución #foto { background-image: url(baja-calidad.png); only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { #foto { background-image: url(alta-calidad.png); }

IMG con picture para alta resolución

Menúes de Navegación adaptables

A tener en cuenta en touch: tamaño y cantidad - Apple pide enlaces como mínimo de 44 x 44px - Cantidad: máximo 5 o 6 botones

Patrones de diseño de Navegación 1. Top Nav (el problema de “no hacer nada”) 2. Enlace a un menú al pie 3. Select con options 4. Botón toggle (3 rayitas)

1. Top Nav (“no hacer nada”) Contras: Inusable. Ocupa principio de pantalla. Referencias: Height Matters Don’t Let Your Menu Take Over

2. Enlace al pie Pros: fácil, sin JS, en PC usa absolute o fixed para subirlo, botón en header. Referencias: navigation/

3. Select Pros: fácil, sin JS, con CSS se puede ocultar un menú y mostrar el otro. Referencias: navigation/

4. Botón Toggle (3 rayitas) Pros: fácil, convencional. Contras: Requiere JS.

Patrones COMPLEJOS de navegación design/

Ejercicio 5 - Agregar un menú adaptable a un sitio, que al verlo en celular cambie por “enlace al pie” (usar absoluto o fijo para subirlo en PC).

Tarea para el hogar: - Agregar un menú adaptable a un sitio, que al verlo en celular cambie por “select” (usar display:none según corresponda).

¿Preguntas?