Descargar la presentación
La descarga está en progreso. Por favor, espere
Publicada porYolanda Cárdenas Espejo Modificado hace 8 años
1
Workshop de Responsive Web Design Hernán Beati
2
Introducción al diseño web adaptable
Unidad 1 Introducción al diseño web adaptable Objetivo: -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.
3
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 %) 3 3
4
Pero los monitores crecieron...
4 4
5
Y siguen y seguirán creciendo...
5 5
6
Y también se achicaron en celulares y tabletas...
22.70% = Otros! 6 6
7
DIVERSIDAD 7 7
8
“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…) 8 8
9
Problema: “miniaturización”
Textos ilegibles Fotos irreconocibles Links no pulsables Zoom constante Scroll ← horizontal → Inusable!!!! 9 9
10
1er Objetivo = adaptar el diseño
10 10
11
Distinto tamaño = distinto diseño
2 columnas -tableta chica- 3 columnas (o más) -PC- 3 columnas -tableta grande- 1 columna -celular- 11 11
12
¡¿TODO?! Esos CSS, ¿qué deberían cambiar?
Optimizar layout (cantidad de columnas) Adaptar textos y fotos decorativas para garantizar legibilidad Hacer medios flexibles (fotos, sliders, videos, mapas, tablas de datos) Herramientas de navegación adaptadas 12 12
13
¿Cómo hacer esos cambios? Con la técnica de Media Queries
Distintos estilos dependiendo de características del dispositivo (condiciones) 13 13
14
Mala idea, lento e incompatibilizable
¿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 14 14
15
Una sola petición, y compatible
¿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 15 15
16
Solo se usan all y screen
¿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 16 16
17
¿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) { … } 17 17
18
¿Qué propiedades CSS puedo detectar con condiciones?
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 18 18
19
¿Cuáles usaremos en el 99% de los casos?
Width (con min-width y/o max-width) Resolution y Aspect-ratio 19 19
20
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” 20 20
21
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” 21 21
22
Garantizar la legibilidad
Objetivo de medidas de fuentes: Garantizar la legibilidad 22 22
23
PREGUNTA: ¿El pixel es una unidad de medida fija (independiente) o relativa (dependiente)? 23 23
24
Probemos a aumentar el tamaño de fuente en px en Explorer... ¿se puede?
24 24
25
¡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!!!... 25 25
26
1. Tamaño de fuentes (I) Porcentajes + Ems body{ font-size:60%; }
h1{ font-size:2em; } p{ font-size:1em; } @media screen and (min-width:480px) { body{font-size:80%;} } Body en % Elementos en Em Cambiando un % cambia todo el esquema 26 26
27
Ejercicio 3 - Modificar el ejercicio anterior para que las unidades de medida de fuentes sean flexibles 27 27
28
Script compatibilizador
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 28 28
29
Cómo incluirlo <!--[if lt IE 9]>
<script src=” js.googlecode.com/svn/trunk/css3- mediaqueries.js”></script> <![endif]--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> 29 29
30
Viewport <meta name="viewport" content="width=device-width, initial-scale=1"> 30 30
31
para IE 10 en Windows Phone 8
Viewport en CSS y JS para IE 10 en Windows Phone 8 @-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width} if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( document.createTextNode( ) ); document.getElementsByTagName("head")[0]. appendChild(msViewportStyle); }
32
Ejercicio 4 - Modificar el ejercicio anterior agregando la etiqueta viewport y el script compatibilizador 32 32
33
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 (se usa para algo exclusivo de tamaños intermedios) Al menos 320 y como máximo 480 Al menos 481 y como máximo (no aplica anterior) (no aplica anteriores) 33 33
34
Mobile First: el orden importa
El orden de los breakpoints ¡importa mucho! 34 34
35
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 35 35
36
Nos ganamos un café!... Seguimos en 15 minutos 36
37
¿Preguntas?
Presentaciones similares
© 2024 SlidePlayer.es Inc.
All rights reserved.