Desarrollo web multidispositivo
- 1. DESARROLLO WEB MULTIDISPOSITIVO VISIÓN GLOBAL Y FILOSOFÍA
- 2. SUMARIO - Móvil vs. Escritorio - Adaptive Web Design - Implicaciones para el equipo
- 4. FLUJO DE TRABAJO TRADICIONAL HASTA 2010 - Luis Herrero DesarrolloWeb Multidispositivo
- 5. - Luis Herrero DesarrolloWeb Multidispositivo
- 6. VERSIÓN ESPECÍFICA PARA MÓVILES • ¿Resolución? • Redirecciones • Contenido duplicado • Doble mantenimiento
- 7. MAYO 2010 Responsive Web Design Ethan Marcotte http://alistapart.com/article/responsive-web-design
- 8. MAYO 2010 Responsive Web Design Ethan Marcotte http://alistapart.com/article/responsive-web-design Can we really continue to commit to supporting each new user agent with its own bespoke experience? “ “”
- 12. WE DON’T KNOW
- 13. Navegador Resolución de pantalla Tipo de conexión a Internet Prestaciones del dispositivo Modo de input (teclado, táctil)
- 14. EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG - Aaron Gufstafson Progressive Enhancement & Mobile
- 16. ¿Y cómo lo hacemos?
- 18. ADAPTIVE WEB DESIGN CREAR INTERFACES QUE SE ADAPTEN A LAS CAPACIDADES DEL USUARIO
- 19. ADAPTIVE WEB DESIGN AWD RWD CREAR INTERFACES QUE SE ADAPTEN A LAS CAPACIDADES DEL USUARIO
- 21. TÉCNICAS: MAQUETACIÓN FLUIDA IMÁGENES (Y VÍDEO) FLEXIBLES MEDIA QUERIES
- 22. ¿¿¿MEDIA QUÉ???
- 23. ¿¿¿MEDIA QUÉ??? MEDIA QUERIES Puntos de corte establecidos en CSS que nos permiten reorganizar la estructura dependiendo del ancho o alto de la pantalla
- 24. RESPONSIVE WEB DESIGN • Olvidarse del píxel y pensar en PORCENTAJES. • No basarse en ningún dispositivo (DEVICE-AGNOSTIC). • El lienzo ya no existe. • Maquetación muy organizada y modular (SMACSS). • Imágenes y video flexibles: soluciones no definitivas RETOS
- 25. ADAPTIVE WEB DESIGN AWD RWD Feature DetectionPerformance Optimization Content Strategy Mobile First Test CREAR INTERFACES QUE SE ADAPTEN A LAS CAPACIDADES DEL USUARIO
- 27. MÓVIL = MÍNIMO COMÚN MÚLTIPLO INVIERTE LA LÍNEA DE PLATAFORMAS EN EL PROCESO DE DISEÑO
- 29. EL DISEÑO ADAPTATIVO SE BASA EN LA MEJORA PROGRESIVA
- 30. EL DISEÑO ADAPTATIVO SE BASA EN LA MEJORA PROGRESIVA
- 31. CONTENT FIRST
- 37. SIMPLICIDAD.
- 38. CONTENIDO RENDIMIENTO CLAVES PARA UNA BUENA EXPERIENCIA DE USUARIO
- 40. PROCESO DE TRABAJO PROCESO HABITUAL
- 41. PROCESO DE TRABAJO PROCESO HABITUAL
- 43. ADAPTIVE WEB DESIGN • Cambio de mentalidad. • Cambio en el proceso de trabajo. • Mayores necesidades técnicas. • Actualización constante de conocimientos y técnicas. • Cambio en timings y presupuestos. CONSIDERACIONES
- 45. IMPLICACIONES PARA EL EQUIPO • Instalación de navegadores y simuladores. • WIFI disponible. • Siempre que sea posible, dispositivos reales. • Sistema de control de versiones (GIT). NECESIDADES TÉCNICAS
- 46. IMPLICACIONES PARA EL EQUIPO • Maquetación avanzada y MODULAR. • Técnicas de Responsive. • Acercamiento y técnicas de diseño visual en web adaptativa. • Javascript enfocado a la carga condicional de contenidos. • Touch Events para dispositivos táctiles. • Preprocesadores (SASS). • GIT al menos a nivel básico. CONOCIMIENTOS