Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Scripts para elementos adaptables + Metodología
Unidad 4 Scripts para elementos adaptables + Metodología Objetivos: -Incorporar scripts que vuelvan adaptables distintos elementos de páginas web (videos, slides, mapas, tablas). -Conocer una Metodología para tomar decisiones durante el proceso de diseño.
2
Videos líquidos Fitvids.js 2 2
3
Ejercicio para el hogar
- Copiar el código del demo de fitvids y aplicarlo en una página propia. 3 3
4
Video a distintos bit rates
Plugin Infinite HD app – Octoshape Usado por Vorterix (caro, pero excelente) 4 4
5
Slider responsive
6
Ejercicio 1 - Descargar los demos del slider responsive e insertarlo en una página, configurando algunas variantes. 6 6
7
Mapas adaptables Alto fijo:
<iframe width="90%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=" ."> </iframe> Alto variable: maps/ 7 7
8
¡No hacer líquida la img del mapa!
<style> #mapa img{ max-width:none !important } </style> <div id="mapa"></div> 8
9
Tablas adaptables Ambos extremos son un problema 9 9
10
“Verticalizar” las columnas Variante Mobile First:
Variante Mobile First: 10 10
11
Scroll por filas http://dbushell.com/2012/01/05/responsive-tables-2/
11 11
12
Tarea para el hogar - Insertar una tabla adaptable usando la técnica de scroll por filas. 12 12
13
METODOLOGIA RESPONSIVE
a) Decisiones de arquitectura de la información previas al prototipo. b) El proceso de diseño adaptable. Distintos enfoques. c) Wireframes adaptables. 13 13
14
a) Decisiones de arquitectura de la información previas al prototipo
14 14
15
¿Mismo contenido, o distinto?
RWD es: “Mismos datos, diferente diseño” pero... ¿ancho de banda? ¿Mismas tareas y contextos? No cambia tamaño: cambia el contexto (lo que pasa FUERA de la pantalla). No intentemos resolver un problema técnico, de arquitectura, con una solución de diseño, que solo “disimula” el problema. 15 15
16
-Reordenar contenidos, irlos “revelando” -Reordenar navegación
Enfoque recomendado por “Buenas prácticas” del W3C: One Web (una sola URL, mismas funciones y contenidos, aunque readaptados desde servidor) -Reordenar contenidos, irlos “revelando” -Reordenar navegación (link de “ver más” y similares) -Priorizar, ordenar → ARQUITECTURA INFO. 16 16
17
Otro enfoque: dos arquitecturas
Detección de servidor, y responsive dentro de su versión 17 17
18
RESS Responsive Server Side La solución de distintos contenidos
requiere Programación: RESS Responsive Server Side 18 18
19
Distintos contenidos (textos, etc)
@media all and (max-width:480px) { #columna { display:none; } Pero se transfieren igual... (mala performance) ¿Solución? Usar detección del lado del servidor 19 19
20
Tutorial de carga condicional
<script> if (document.documentElement.clientWidth > 640) { searchNews('cats'); } </script> <div id="newsresults"> <!-- search results go here --> </div> Demo: <div id="newsresults"> <a href=" Google News</a> </div> 20 20
21
¿Cómo dar opción de “des-responsivizar” y volver a “responsivizar”?
21 21
22
Con Responsive Viewport http://responsiveviewport.com/
Link a versión no responsive: <?php if (!$_GET['resp'] == 'no') { ?> <meta name="viewport" content="width=device-width"> <?php } ?> </head> <body class="<?php if (!$_GET['resp'] == 'no') { echo "resp"; } ?>"> CSS: .page-wrap { width: 100%; } @media (min-width: 40em) { .resp .page-wrap { width: 80%; } } 22 22
23
Uso de librerías de detección
¿Para qué? 1. Redireccionar 2. Adaptar contenidos (imágenes, etc.) 3. Entregar distintos contenidos (targeting) 4. Analytics 23 23
24
Librerías de detección.
WURFL cloud (free detecciones al mes, 2 caract.; u$s 10 al mes det., 5 características; u$s 40 al mes 2 millones det., 10 características). DeviceAtlas (u$s 40 / month – 1 millón det.) DetectRight O crear una propia!: 24 24
25
25 25
26
Librería muy simple: http://mobiledetect.net/
require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; if ( $detect->isMobile() ) { // Para cualquier móvil (teléfono o tableta): } if( $detect->isTablet() ){ // Para Tabletas. if( $detect->isMobile() && !$detect->isTablet() ){ // Solamente celulares (sin Tabletas): 26 26
27
Plugins de Mobile Detect
Wordpress Drupal Joomla Magento 27 27
28
Si falla RESS, está RWD! ¿Qué pasa si falla la detección? Sitio para PC llega al móvil Pero aunque la versión para PC se entregue a un móvil, el diseño se adaptará a ese dispositivo, porque nuestro CSS usará RWD. Y como además usamos enfoque de Mobile First, los elementos destinados a pantallas grandes, no llegan a su destino tampoco. En el peor de los casos, el móvil descargará algunas imágenes adicionales o un poco de marcado o JavaScript que no necesita. La experiencia todavía sería adecuada para móvil. No está nada mal para un “peor escenario”. 28 28
29
b) Un proceso de diseño adaptable.
29 29
30
Procesos de diseño Proceso de diseño tradicional → sitio tradicional
Proceso de diseño responsive → sitio responsive 30 30
31
Proceso lineal antiguo: PSD → HTML
1. Un Wireframe por plantilla 2. Un Photoshop (alta fidelidad) El cliente/jefe lo ve “estático” 3. Se codifica. Si no gusta, vuelve al comienzo. 31 31
32
Proceso nuevo: Wireframes en HTML
1. Un Wireframe por rango a cubrir 2. Photoshop más ancho (PC) 3. Photoshop mediano (tableta) 4. Photoshop angosto (celular) ¿El cliente ve y aprueba PSDs? ¡NO!!... 3. Se codifica (HTML primero → celular) 4. Se codifica (tableta segundo) 5. Se codifica (PC última) El cliente usa, prueba y aprueba Etapa de diseño: “de mayor a menor” Código: “de menor a mayor” 32 32
33
Mi metodología responsive: bocetar desde PC para abajo
1) Empezar wireframes para PC más grande 2) Reacomodar quitando flotados de bloques para sitio mediano (para Tabletas). 3) Reacomodar quitando flotados para versión chica (celulares) 33 33
34
Codificar de celular hacia arriba
1) Codificar celular primero (HTML tendrá ese orden). 2) Codificar para tabletas segundo (agregar contenedores). 3) Codificar para PC al final (agregar contenedores). 34 34
35
Testear: ¿38 emuladores alcanzan?
Testear en dispositivos reales: -Device Anywhere - Perfecto Mobile 35 35
36
Conclusión - No esperemos la perfección. Cualquier “algo” es mejor que “nada”… Ya sabemos técnicas para adaptar: tipografías, layouts, imágenes y backgrounds, navegación, videos, tablas, mapas, slides. Conceptos Mobile First, viewport y compatibilidad con Explorer
37
El progreso, no la perfección
Hace unos años, un cliente, hablando de su sitio web, dijo: “No te preocupes por hacer mi sitio web perfecto. Sólo trabaja en lo que es mejor. Si constantemente estamos haciendo lo mejor, vamos en la dirección correcta”. 37 37
38
¡Muchas gracias! 38 38
Presentaciones similares
