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.
Videos líquidos Fitvids.js http://fitvidsjs.com/ 2 2
Ejercicio para el hogar - Copiar el código del demo de fitvids y aplicarlo en una página propia. 3 3
Video a distintos bit rates Plugin Infinite HD app – Octoshape Usado por Vorterix (caro, pero excelente) 4 4
Slider responsive http://responsiveslides.com/
Ejercicio 1 - Descargar los demos del slider responsive e insertarlo en una página, configurando algunas variantes. 6 6
Mapas adaptables Alto fijo: <iframe width="90%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?ie=UTF8&...etc.. ."> </iframe> Alto variable: http://niklausgerber.com/blog/responsive-google-or-bing- maps/ 7 7
¡No hacer líquida la img del mapa! <style> #mapa img{ max-width:none !important } </style> <div id="mapa"></div> 8
Tablas adaptables Ambos extremos son un problema 9 9
“Verticalizar” las columnas Variante Mobile First: http://css-tricks.com/responsive-data-tables/ Variante Mobile First: http://jsbin.com/arixic 10 10
Scroll por filas http://dbushell.com/2012/01/05/responsive-tables-2/ 11 11
Tarea para el hogar - Insertar una tabla adaptable usando la técnica de scroll por filas. 12 12
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
a) Decisiones de arquitectura de la información previas al prototipo 14 14
¿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
-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) http://www.w3.org/TR/mobile-bp/#OneWeb -Reordenar contenidos, irlos “revelando” -Reordenar navegación (link de “ver más” y similares) -Priorizar, ordenar → ARQUITECTURA INFO. 16 16
Otro enfoque: dos arquitecturas Detección de servidor, y responsive dentro de su versión 17 17
RESS Responsive Server Side La solución de distintos contenidos requiere Programación: RESS Responsive Server Side 18 18
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
Tutorial de carga condicional http://24ways.org/2011/conditional-loading-for-responsive-designs/ <script> if (document.documentElement.clientWidth > 640) { searchNews('cats'); } </script> <div id="newsresults"> <!-- search results go here --> </div> Demo: http://media.24ways.org/2011/keith/cats-2.html <div id="newsresults"> <a href="http://www.google.com/search?q=cats&tbm=nws">Search Google News</a> </div> 20 20
¿Cómo dar opción de “des-responsivizar” y volver a “responsivizar”? 21 21
Con Responsive Viewport http://responsiveviewport.com/ Link a versión no responsive: http://www.sitio.com/?resp=no <?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
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
Librerías de detección. WURFL cloud (free 5.000 detecciones al mes, 2 caract.; u$s 10 al mes 50.000 det., 5 características; u$s 40 al mes 2 millones det., 10 características). http://wurfl.sourceforge.net/ DeviceAtlas (u$s 40 / month – 1 millón det.) http://www.deviceatlas.com/ DetectRight http://www.detectright.com/ O crear una propia!: http://www.weloveseo.com.au/useragents.php 24 24
25 25
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
Plugins de Mobile Detect https://github.com/serbanghita/Mobile-Detect#3rd-party-modules--submit-new Wordpress Drupal Joomla Magento 27 27
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
b) Un proceso de diseño adaptable. 29 29
Procesos de diseño Proceso de diseño tradicional → sitio tradicional Proceso de diseño responsive → sitio responsive 30 30
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
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
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
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
Testear: ¿38 emuladores alcanzan? http://www.mobilexweb.com/emulators Testear en dispositivos reales: -Device Anywhere http://www.keynotedeviceanywhere.com/ - Perfecto Mobile http://www.perfectomobile.com/ 35 35
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
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”. http://www.alconadadiseno.com.ar/blog/2013/03/construyendo-un-mejor-sitio-web-responsive/ 37 37
¡Muchas gracias! 38 38