workshop de responsive web design hernán beati. introducción al diseño web adaptable objetivo: -...
TRANSCRIPT
![Page 1: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/1.jpg)
Workshop de Responsive Web Design
Hernán Beati
![Page 2: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/2.jpg)
Introducción al diseño web adaptableObjetivo:
-Experimentar las técnicas que permiten adaptar los contenidos, la maquetación, la navegación, los medios y textos, según las capacidades del dispositivo empleado por cada usuario.
Unidad 1
![Page 3: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/3.jpg)
En la era de la web “rígida”era fácil definir el ancho del sitio
1995: 640 x 480px
2000: 800 x 600px
2005: 1024 x 768px
Ancho fijo centrado, o ancho líquido (en %)
![Page 4: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/4.jpg)
Pero los monitores crecieron...
![Page 5: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/5.jpg)
Y siguen y seguirán creciendo...
![Page 6: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/6.jpg)
Y también se achicaron en celulares y tabletas...
22.70% = Otros!
![Page 7: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/7.jpg)
DIVERSIDAD
![Page 8: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/8.jpg)
“La web y los estándares web han sido siempre responsive”
Bruce Lawson
Un texto HTML sin CSS es flexible,el problema es el “sobre-diseño”(clavar todo con alfileres…)
![Page 9: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/9.jpg)
Problema: “miniaturización”
Textos ilegibles Fotos irreconocibles Links no pulsables
Zoom constante Scroll ← horizontal →
Inusable!!!!
![Page 10: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/10.jpg)
1er Objetivo = adaptar el diseño
![Page 11: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/11.jpg)
1 columna -celular-
2 columnas-tableta chica-
3 columnas-tableta grande-
3 columnas (o más)-PC-
Distinto tamaño = distinto diseño
http://www.mediaqueri.es
![Page 12: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/12.jpg)
Esos CSS, ¿qué deberían cambiar?
¡¿TODO?!1) Optimizar layout (cantidad de columnas)
2) Adaptar textos y fotos decorativas para garantizar legibilidad
3) Hacer medios flexibles (fotos, sliders, videos, mapas, tablas de datos)
4) Herramientas de navegación adaptadas
![Page 13: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/13.jpg)
Distintos estilos
dependiendo de
características
del dispositivo
(condiciones)
¿Cómo hacer esos cambios?Con la técnica de Media Queries
![Page 14: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/14.jpg)
¿Dónde definir condiciones? (I)
1. Al vincular distintas hojas CSS:
<link rel="stylesheet" href="pantalla.css" media="screen">
<link rel="stylesheet" href="papel.css" media="print">
etc...
Mala idea, lento e incompatibilizable
![Page 15: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/15.jpg)
¿Dónde definir condiciones? (II)
2. En distintas zonas de una única hoja:
/* Estilos para todos los medios */ p{ font-size:2em; }
/* Estilos para papel */ @media print{
p{ font-size:14pt; }}
Una sola petición, y compatible
![Page 16: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/16.jpg)
¿Cómo detectar el medio?
Medios posibles: braille, handheld, print, projection, screen, tty, tv, embossed, speech
all (todos)
Ejemplo:
<link rel="stylesheet" media="screen" href="pantalla.css">
Solo se usan all y screen
![Page 17: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/17.jpg)
¿Cómo agregar medio + condición?
Esquema: medio and (condición)
-Ejemplo en HTML:
<link rel="stylesheet" media="screen and (min-width:1024px)" href="grande.css">
-Ejemplo en CSS:
@media screen and (min-width:1024px) {
…
}
![Page 18: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/18.jpg)
Width / Height / Device-width / Device-height
Orientation (portrait o landscape)
Aspect-ratio y Device-aspect-ratio
Resolution
Y “supuestamente” más... como Color, Color-index y Monochrome
¿Qué propiedades CSS puedo detectar con condiciones?
![Page 19: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/19.jpg)
¿Cuáles usaremos en el 99% de los casos?
Width (con min-width y/o max-width)
Resolution y Aspect-ratio
![Page 20: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/20.jpg)
Ejercicio 1
1) Crear una página con un título h1 y varios párrafos, y vincularle una hoja CSS.
2) Definirle un tamaño de texto global (al body) en “pixeles” de 24px; y dentro de una media querie, definirle otro tamaño más chico (de 12px) para cuando el dispositivo mida “menos de 800px”
![Page 21: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/21.jpg)
Ejercicio 2
Al ejercicio anterior, dentro de otra media querie extra, definirle otro tamaño todavía más chico de fuentes al body (9px) para cuando el dispositivo mida “menos de 480px”
![Page 22: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/22.jpg)
Objetivo de medidas de fuentes:
Garantizar la legibilidad
![Page 23: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/23.jpg)
PREGUNTA:
¿El pixel es una unidad de medida fija (independiente)
o relativa (dependiente)?
![Page 24: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/24.jpg)
Probemos a aumentar el tamaño de fuente en px en Explorer...
¿se puede?
![Page 25: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/25.jpg)
¡No sirve más usar px!
Si declaré fuentes en px en 20 declaraciones de mi hoja, tendré que redefinir el valor en px en los 20 lugares POR CADA resolución!!!!!... por “cada” media querie que aplique!!!...
![Page 26: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/26.jpg)
Porcentajes + Ems
body{ font-size:60%; }
h1{ font-size:2em; }
p{ font-size:1em; }
@media screen and (min-width:480px) {
body{font-size:80%;}
}
1. Tamaño de fuentes (I)
Elementos en Em
Body en %
Cambiando un % cambia todo el esquema
![Page 27: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/27.jpg)
Ejercicio 3
- Modificar el ejercicio anterior para que las unidades de medida de fuentes sean flexibles
![Page 28: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/28.jpg)
Script compatibilizador
https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js
1. Requiere un servidor (hosting o local), no soporta file: (ATENCION: con doble click al archivo NO ANDA)
2. Solo funciona en media queries dentro de una misma hoja de estilos, no lee <link ni @import
![Page 29: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/29.jpg)
Cómo incluirlo
<!--[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
![Page 30: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/30.jpg)
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
http://www.youtube.com/watch?feature=player_embedded&v=OP2GnAFeFTY
![Page 31: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/31.jpg)
@-webkit-viewport{width:device-width}@-moz-viewport{width:device-width}@-ms-viewport{width:device-width}@-o-viewport{width:device-width}@viewport{width:device-width}
Viewport en CSS y JS para IE 10 en Windows Phone 8
if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( document.createTextNode( "@-ms-viewport{width:auto!important}" ) ); document.getElementsByTagName("head")[0]. appendChild(msViewportStyle);}
http://cl.ly/code/1Q1E3S101A2R
![Page 32: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/32.jpg)
Ejercicio 4
- Modificar el ejercicio anterior agregando la etiqueta viewport y el script compatibilizador
![Page 33: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/33.jpg)
1) Scaffolding: “acumula” estilosAl menos 480px
Al menos 800px (también aplica anterior)
Al menos 1024px (también aplica anteriores)
2) Rangos: excluye (se usa para algo exclusivo de tamaños intermedios)
Al menos 320 y como máximo 480
Al menos 481 y como máximo 800 (no aplica anterior) (no aplica anteriores)
Breakpoints
![Page 34: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/34.jpg)
Mobile First: el orden importa
El orden de los breakpoints ¡importa mucho!http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
![Page 35: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/35.jpg)
Ejercicio 4
- Crear cuatro condiciones con media queries, ordenando según el concepto Mobile First:
- 1er tamaño, para celular base, sin media querie
- 2do tamaño, de 480 a 800
- 3er tamaño, de 800 a 1280
- Ultimo, más de 1280
Que en cada media querie cambie el color de fondo del body, así lo percibimos
![Page 36: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/36.jpg)
Nos ganamos un café!...
Seguimos en 15 minutos
![Page 37: Workshop de Responsive Web Design Hernán Beati. Introducción al diseño web adaptable Objetivo: - Experimentar las técnicas que permiten adaptar los contenidos,](https://reader034.vdocuments.co/reader034/viewer/2022051316/5665b4e31a28abb57c947a6b/html5/thumbnails/37.jpg)
¿Preguntas?