Post on 25-Jan-2016
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.
Unidad 4
Ejercicio para el hogar
- Copiar el código del demo de fitvids y aplicarlo en una página propia.
Video a distintos bit ratesPlugin Infinite HD app – Octoshape
Usado por Vorterix (caro, pero excelente)
Ejercicio 1
- Descargar los demos del slider responsive e insertarlo en una página, configurando algunas variantes.
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/
¡No hacer líquida la img del mapa!
<style>
#mapa img{max-width:none !important}
</style>
<div id="mapa"></div>
Tablas adaptablesAmbos extremos son un problema
“Verticalizar” las columnashttp://css-tricks.com/responsive-data-tables/
Variante Mobile First:http://jsbin.com/arixic
http://dbushell.com/2012/01/05/responsive-tables-2/
Scroll por filas
Tarea para el hogar
- Insertar una tabla adaptable usando la técnica de scroll por filas.
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.
a) Decisiones de arquitectura de la información previas al prototipo
¿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.
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.
Otro enfoque: dos arquitecturas
Detección de servidor, y responsive dentro de su versión
La solución de distintos contenidos
requiere Programación:
RESSResponsive Server Side
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
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>
¿Cómo dar opción de “des-responsivizar”y volver a “responsivizar”?
Con Responsive Viewporthttp://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%; }
}
Uso de librerías de detección
¿Para qué?
1. Redireccionar
2. Adaptar contenidos (imágenes, etc.)
3. Entregar distintos contenidos (targeting)
4. Analytics
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
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):
}
Plugins de Mobile Detect
https://github.com/serbanghita/Mobile-Detect#3rd-party-modules--submit-new
• Wordpress• Drupal• Joomla• Magento
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”.
b) Un proceso de diseño adaptable.
Procesos de diseño
Proceso de diseño tradicional → sitio tradicional
Proceso de diseño responsive → sitio responsive
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.
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 menora mayor”
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)
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).
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/
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ónHace 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/
¡Muchas gracias!