U2 rwd unidad1 hernan beati new

Responsive Web Design Diseño flexible para PC, celulares y tabletas (y relojes, televisores, heladeras, etc…)

Hernán Beati @hernan_beati hernan@saberweb.com.ar

Hernán Beati

Diseñador gráfico (+19 años) → Web (+14 años) Analista de Sistemas / Desarrollador Web (+13 años) Diseñador de Webs Móviles (+2 años)

Autor de:

Terminando libro sobre:

Y empezando otro sobre Responsive Web Design

Docente en:

Unidad 1:

Introducci贸n al dise帽o web adaptable

Antes, la web podía ser rígida: 1995:

640 x 480px 2000:

2005:

800 x 600px

1024 x 768px

Ancho líquido (%) era suficiente...

Pero los monitores crecieron...

Y siguen, y seguirรกn, creciendo...

Y tambiĂŠn se achicaron en celulares y tabletas...

22.70% = Otros!

DIVERSIDAD

“La web y los estándares web han sido siempre responsive” Bruce Lawson La web es inherentemente flexible, el problema es el “sobre-diseño” (clavar todo con alfileres…)

Toda web se “miniaturiza”  Textos ilegibles  Fotos irreconocibles  Enlaces no pulsables  Zoom constante  Scroll = horizontal + vertical ! ! ! ! le b a Inus

1er Objetivo = adaptar el dise単o

Distinto tamaño = distinto diseño

2 columnas -tableta chica1 columna -celularhttp://www.mediaqueri.es

3 columnas -tableta grande-

3 columnas (o más) -PC-

驴Qu茅 puede entregarle RWD a cada dispositivo?

-Distinto c贸digo CSS -Y distinto c贸digo HTML (x CSS)

Esos CSS, ¿qué deberían cambiar?

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

¿Cómo lo cambian?

Con la técnica de Media Queries Distintos estilos dependiendo de características del dispositivo (condiciones)

驴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" e l b a media="print"> iliz b i t a p m o c n i etc... e n to Mala

e l , a i de

驴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{ le b i t pa m p{ font-size:14pt; } o c y , n 贸 i c i t } e p a ol s Una

驴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" /> s u o l So

en e r c s s o ar e m

¿Cómo agregar medio + condición?

Esquema:

<link media="medio and (condición)" href="hoja.css" /> -Ejemplo en HTML:

<link rel="stylesheet" media="screen and (minwidth:1024px)" href="grande.css" /> -Ejemplo en CSS:

@media screen and (min-width:1024px) { … }

¿Qué propiedades CSS puedo detectar con condiciones?  Width / Height / Device-width / Device-height  Orientation (portrait o landscape)  Aspect-ratio y Device-aspect-ratio  Color, Color-index y Monochrome  Resolution (300dpi)  Y “supuestamente” más...

¿Cuáles usaremos el 99% de casos?  Width (con min-width y/o max-width)  Resolution y Aspect-ratio

Ejercicio 1 1) Crear una página con un título y varios párrafos, y vincularle una hoja CSS. 2) Definirle un tamaño de texto global (al body) en “pixeles”; y dentro de una media querie, definirle otro tamaño más chico para cuando el dispositivo mida “menos de 800px”

Ejercicio 2 Al ejercicio anterior, dentro de otra media querie extra, definirle otro tamaño más chico de fuentes para cuando el dispositivo mida “menos de 480px”

Nos ganamos un cafĂŠ!...

Vamos al break, y seguimos en 10 minutos

Objetivo de medidas de fuentes:

Garantizar la legibilidad

PREGUNTA: ¿El pixel es una unidad de medida “fija” (independiente) o “relativa” (dependiente)?

Probemos a aumentar el tama単o de fuente en px en Explorer... 多se puede?

¡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” media querie que aplique!!!...

1. Tama単o de fuentes (I) Porcentajes + Ems body{ font-size:60%; }

Body en %

h1{ font-size:2em; }

Elementos en Em

p{ font-size:1em; } @media screen and (min-width:480px) { body{font-size:80%;} }

Cambiando un % cambia todo el esquema

1. Tama単o de fuentes (II) @media screen and (min-width:600px) { body{ font-size:80%; } } @media screen and (min-width:1024px) { body{ font-size:100%; } }

Ejercicio 3 - Modificar el ejercicio anterior para que las unidades de medida de fuentes sean flexibles

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

Script compatibilizador <!--[if lt IE 9]> <script src=”http://css3-mediaqueriesjs.googlecode.com/svn/trunk/css3mediaqueries.js”></script> <![endif]--> <meta http-equiv="X-UA-Compatible" content="IE=edge">

Viewport <meta name="viewport" content="width=device-width, initial-scale=1">

http://www.youtube.com/watch?feature=player_embedded&v=OP2GnAFeFTY

Ejercicio 4 - Modificar el ejercicio anterior agregando la etiqueta viewport y el script compatibilizador

Breakpoints 1) Scaffolding “acumula” estilos Al menos 480px Al menos 800px (también aplica anterior) Al menos 1024px (también aplica anteriores)

2) Rangos: excluye Al menos 320 y como máximo 480 Al menos 481 y como máximo 800 (no aplica anterior) Al menos 801 (no aplica anteriores)

Mobile First: el orden importa El orden de los breakpoints ยกimporta mucho! http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Ejercicio 4 - Crear cuatro condiciones con media queries, ordenando según el concepto Mobile First: - 1er tamaño, para celular, sin media querie - 2do tamaño, de 320 a 480 - 3er tamaño, de 480 a 800 - 4to 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