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 <img>

.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 <img> y volverla líquida.

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

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 <picture> con un polyfill (script JS).

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>

Picture polyfill

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

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

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 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'>

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:

http://norfipc.com/celulares/medidas-pantalla-resolucion-telefonos-celulares-tabletas.html

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) {

…

}

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);

}

}

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>

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)

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

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

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/

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/

4. Botón Toggle (3 rayitas)

Pros: fácil, convencional.

Contras: Requiere JS.

Patrones COMPLEJOS de navegación

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-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?