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.

Presentación del tema: "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."— Transcripción de la presentación:

1 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

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

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

4 Background-size

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

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

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

8 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

9 Posibles técnicas para adaptar img

10 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

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

12 Ejemplo de Picture (a futuro)

13 Picture polyfill http://cdn.mobify.com/mobifyjs/examples/capturing-picturepolyfill/index.html

14 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. https://github.com/scottjehl/picturefill

15 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).

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

17 Puntos a tener en cuenta:

18 Varias imágenes (crop) = + arte

19 Breaks de layout NO son los de fotos

20 ¿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?

21 Alta Resolución en dispositivos (Retina y otros)

22 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: http://norfipc.com/celulares/medidas-pantalla-resolucion-telefonos-celulares-tabletas.html

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

24 Fondos para alta resolución #foto { background-image: url(baja-calidad.png); } @media 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); }

25 IMG con picture para alta resolución

26 Menúes de Navegación adaptables

27 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

28 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) http://bradfrostweb.com/blog/web/responsive-nav-patterns/

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

30 2. Enlace al pie Pros: fácil, sin JS, en PC usa absolute o fixed para subirlo, botón en header. Referencias: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first- navigation/

31 3. Select Pros: fácil, sin JS, con CSS se puede ocultar un menú y mostrar el otro. Referencias: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first- navigation/

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

33 Patrones COMPLEJOS de navegación http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive- design/

34 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).

35 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).

36 ¿Preguntas?