![Page 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/3.jpg)
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.
![Page 4: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/4.jpg)
Background-size
![Page 5: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/5.jpg)
Ejercicio 2
- Agregar un wallpaper como fondo del body.
- Estirarlo según espacio disponible, usando background-size:cover.
![Page 6: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/6.jpg)
Hacer líquidas las <img>
.liquida { max-width:100%; height:auto; box-sizing:border-box; /* descuenta borde */
}Aunque... se transfieren igual!
![Page 7: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/7.jpg)
Ejercicio 3
- Insertar una imagen de contenido con la etiqueta <img> y volverla líquida.
![Page 8: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/8.jpg)
Problema de la etiqueta IMG
<img src=“un-solo-src.jpg”>
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
![Page 9: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/9.jpg)
Posibles técnicas para adaptar img
![Page 10: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/11.jpg)
b) Nuevo tag Picture
-Aunque aún no es estándar, se puede usar <picture> con un polyfill (script JS).
![Page 12: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/12.jpg)
Ejemplo de Picture (a futuro)
<picture>
<source src="chica.jpg">
<source src="mediana.jpg" media="(min-width: 450px)">
<source src="grande.jpg" media="(min-width: 800px)">
<source src="extragrande.jpg" media="(min-width: 1000px)">
<img src="chica.jpg" alt="Algo"><!-- Fallback -->
</picture>
![Page 13: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/13.jpg)
Picture polyfill
http://cdn.mobify.com/mobifyjs/examples/capturing-picturepolyfill/index.html
![Page 14: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/15.jpg)
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).
![Page 16: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/16.jpg)
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'>
![Page 17: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/17.jpg)
Puntos a tener en cuenta:
![Page 18: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/18.jpg)
Varias imágenes (crop) = + arte
![Page 19: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/19.jpg)
Breaks de layout NO son los de fotos
![Page 20: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/20.jpg)
¿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?
![Page 21: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/21.jpg)
Alta Resolución en dispositivos
(Retina y otros)
![Page 22: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/23.jpg)
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) {
…
}
![Page 24: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/24.jpg)
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);
}
}
![Page 25: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/25.jpg)
IMG con picture para alta resolución<div data-picture data-alt="Algo">
<div data-src="small.jpg"></div> <div data-src="small.jpg" data-media="(min-device-pixel-ratio: 2.0)"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="medium_x2.jpg" data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="large_x2.jpg" data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> <div data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback --> <noscript> <img src="external/imgs/small.jpg" alt="Algo"> </noscript>
</div>
![Page 26: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/26.jpg)
Menúes de Navegación adaptables
![Page 27: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/28.jpg)
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/
![Page 29: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/30.jpg)
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/
![Page 31: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/31.jpg)
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/
![Page 32: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/32.jpg)
4. Botón Toggle (3 rayitas)
Pros: fácil, convencional.
Contras: Requiere JS.
![Page 33: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/33.jpg)
Patrones COMPLEJOS de navegación
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
![Page 34: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/34.jpg)
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).
![Page 35: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/35.jpg)
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).
![Page 36: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062809/5665b4e81a28abb57c94aade/html5/thumbnails/36.jpg)
¿Preguntas?