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
38
Embed
Scripts para elementos adaptables + Metodología Objetivos: -Incorporar scripts que vuelvan adaptables distintos elementos de páginas web (videos, slides,
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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
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).
- 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”.