Embed Size (px)
Citation preview
DESARROLLO WEBMULTIDISPOSITIVOVISIÓN GLOBAL Y FILOSOFÍA
SUMARIO
- Móvil vs. Escritorio- Adaptive Web Design- Implicaciones para el equipo
Móvil vs Escritorio
FLUJO DE TRABAJOTRADICIONALHASTA 2010
- Luis HerreroDesarrollo Web Multidispositivo
- Luis HerreroDesarrollo Web Multidispositivo
VERSIÓN ESPECÍFICA PARA MÓVILES
• ¿Resolución?
• Redirecciones
• Contenido duplicado
• Doble mantenimiento
MAYO 2010
Responsive Web DesignEthan Marcotte
http://alistapart.com/article/responsive-web-design
MAYO 2010
Responsive Web DesignEthan 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?
““”
WE DON’T KNOW
NavegadorResolución de pantallaTipo de conexión a InternetPrestaciones del dispositivoModo de input (teclado, táctil)
EVEN WHENWE THINKWE KNOW,
WE AREPROBABLY
WRONG- Aaron Gufstafson
Progressive Enhancement & Mobile
¿Y cómo lo hacemos?
Adaptive Web Design
ADAPTIVE WEB DESIGN
CREAR INTERFACES QUE SE ADAPTEN A LAS CAPACIDADES DEL USUARIO
ADAPTIVE WEB DESIGNAWD
RWDCREAR INTERFACES QUE SE ADAPTEN A LAS CAPACIDADES DEL USUARIO
TÉCNICAS:
MAQUETACIÓN FLUIDAIMÁGENES (Y VÍDEO) FLEXIBLES
MEDIA QUERIES
¿¿¿MEDIA QUÉ???
¿¿¿MEDIA QUÉ???
MEDIA QUERIESPuntos de corte establecidos en CSS
que nos permiten reorganizar la estructuradependiendo del ancho o alto de la pantalla
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
ADAPTIVE WEB DESIGNAWD
RWD
FeatureDetectionPerformance
Optimization
ContentStrategy
MobileFirstTest
CREAR INTERFACES QUE SE ADAPTEN A LAS CAPACIDADES DEL USUARIO
MÓVIL = MÍNIMO COMÚN MÚLTIPLO
INVIERTE LA LÍNEA DE PLATAFORMASEN EL PROCESO DE DISEÑO
EL DISEÑO ADAPTATIVOSE BASA EN LA
MEJORA PROGRESIVA
EL DISEÑO ADAPTATIVOSE BASA EN LA
MEJORA PROGRESIVA
CONTENTFIRST
RELEVANT
CONTENTFIRST
STRUCTURED
CONTENTFIRST
SIMPLICIDAD.
CONTENIDORENDIMIENTOCLAVES PARA UNA BUENAEXPERIENCIA DE USUARIO
TEST, TEST, TEST.
PROCESO DE TRABAJO
PROCESO HABITUAL
PROCESO DE TRABAJO
PROCESO HABITUAL
PROCESO DE TRABAJO
PROCESOADAPTATIVO
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
Implicacionespara el equipo
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
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
