Este documento presenta una introducción a diseño web móvil con jQuery Mobile. Comienza explicando los requisitos técnicos como herramientas web, jQuery Mobile, simuladores y SDKs. Luego describe brevemente las tecnologías web móviles como HTML5, geolocalización y almacenamiento local. Explica que jQuery Mobile es un framework para crear interfaces móviles basadas en HTML5 para las principales plataformas móviles usando jQuery. Finalmente, muestra cómo modificar temas, iconos y colores en jQuery Mobile usando Adobe Fireworks

1. Diseño con jQuery
Mobile
@edgarparada

2. Agenda
• Introducción HTML5
• Web Móvil
• jQuery Mobile
• Demo
• ¿Preguntas?

3. Requisitos
• Web Tools (Dreamweaver, Expression Web, Aptana, Coda, etc.)
• jQuery Mobile
• Simulador o Dispositivo
• Servidor Web (MAMP o WAMP)
• SDKs
• WebWorks http://developer.blackberry.com/html5

4. ¿Qué es?
Web Semántica
Canvas
CSS3
Video
Geolocalización
Almacenamiento Local
Forms

5. Web Móvil
Smartphones
Tablets
WebKit
SDKs
caniuse.com
modernizr

6. jQuery Mobile
Un sistema para crear UI basado
en HTML5 para las plataformas
móviles más populares,
construído con jQuery.

7. jQuery Mobile Prototyping

8. Crear un tema jQuery Mobile con
Fireworks CS6
El tema de jQuery Mobile incluye algunos sprites y and
swatches, es posible usar Fireworks CS6 para modificarlos.

9. Icon Placeholders
Dentro de los sprites asociados a los temas en jQuery Mobile
un concepto importante son los icon placeholders, con
Fireworks CS6 se pueden crear nuevos iconos.

10. jQuery Mobile Swatches
Se pueden seleccionar direrentes iconos para nuestros
controles en jQuery Mobile.

11. Bootstrap, from Twitter

12. jQuery Mobile Icon Pack

13. Split View

14. ¿Preguntas?
Diseño con jQuery
Mobile
@edgarparada