El documento habla sobre el desarrollo de contenido web para múltiples pantallas. Presenta una agenda que incluye temas como los navegadores móviles, contenido elástico, HTML5 y Flash, cómo llegaron a Wallaby, aplicaciones móviles vs web, y tecnologías como jQuery Mobile y PhoneGap. El objetivo es enseñar a crear sitios web que funcionen bien en dispositivos móviles de manera sencilla.

1. Contenido Web en
Múltiples Pantallas
Edgar Parada
edgarparada@activ.com.mx
Adobe Community Champion

2. México

3. México

4. México

5. México

6. México

7. México

8. México

9. México

10. México

11. Agenda
• Motivación / Ecosistema Móvil
• Browsers Móviles
• Contenido Elásticos
• HTML5 y Flash "Pequeños" Tips
• Cómo llegamos a Wallaby
• Apps Móviles vs Web
• Mirando hacia jQuery Mobile, PhoneGap y demás...
• Inspiración

12. Motivación
Actualmente hay una realidad en la industria “Los
usuarios esperan que sus sitios funcionen en sus
teléfonos” (y tablets!) esto dentro de poco tiempo va
a provocar que el soporte móvil se convierta en algo
estándar para cualquier sitio web.
Los diseñadores/desarrolladores web deberían estar
aprendiendo a crear sitios web móviles, no es difícil.

13. Ecosistema Móvil
Análisis de Canalys a nivel global, 2010 Q4

14. Browsers Móviles
Mid-range (45%) Business (35%) High-end (20%)
Presto Mango - Webkit Webkit
Gecko - Webkit Trident Webkit
http://quirksmode.org/mobile/browsers.html

15. Dominio de iPhone
El iPhone (y ahora
Android) fueron creados
como SO para navegar.
Apple se aseguro que
aquellos que compraran
un iPhone también
compraran un plan de
datos para navegar.

16. Un poco de testing (demo)
Probablemente ya tenés un iPhone o un Android, así que lo
primero es conseguir un Nokia o un BlackBerry de medio
cachete.
Lo segundo es un emulador, puedes revisar algunos aquí
http://mobiforge.com/emulators/page/mobile-emulators
Un plugin no sería mala idea, por ejemplo Web Developer
Toolbar con Small Screen Text Rendering
Y por último un servidor web, que por comodidad y rapidez
puede ser local.

17. Contenidos Elásticos
Hablamos de estirar un
layout pensando en que su
tamaño cambie cuando el
usuario modifique el tamaño
de la tipografía.
La idea es aprovechar la
mezcla de unidades
(absolutas y/o relativas) para
lograr layouts autoajustables.

18. HTML5 o Flash
HTML5 y Flash
HTML5 representa un gran avance para el desarrollo web móvil,
entre algunas de sus características: Soporte Offline, Canvas y Video,
API de Geolocalización, Formularios Avanzados.

19. ¿Como llegamos a Wallaby?

20. Apps Móviles vs Web
Anteriormente pensar en aplicaciones para dispositivos móviles era
solo posible a partir tecnologías propietarias.
Hoy en día tenemos múltiples opciones: desarrollo nativo,
tecnologías cross-platform, HTML5/CSS & Javascript.

21. Gracias Totales :-)
Edgar Parada
Adobe Community Champion