presentación mobile html5 en el startup weekend Google bootcamp. Fundación jala

1. Mobile HTML5
Carlos Olivera Terrazas
Startup Weekend Google Bootcamp
Fundación Jala, Cochabamba, Junio/2012

2. Acerca de…
• Consultor en mobile / mobile web
• Desarrollo mobile desde el 2002
• Finalista del concurso Google
Developer Day HTML5 2011
• Usuario activo en la comunidad de
desarrolladores jQuery Mobile

3. Mobile HTML5
• Beneficios de conocer/aplicar desarrollos
HTML5 en estrategias mobile
• Web HTML5
• Aplicaciones nativas HTML5 (hibridas)
• Recomendaciones

4. Antes…¿que es HTML5?
• Quinta revisión del estándar HTML
• Nuevos elementos HTML
• Nuevas APIs JavaScript
• CSS3
• Todavía en desarrollo
http://dev.w3.org/html5

5. HTML5 características
• Poder multimedia (Adobe Flash Killer)
• Nuevo estándar multiplataforma
• No rompe compatibilidad
• Solo usas las nuevas etiquetas/APIs si
las necesitas
http://bostonglobe.com/lifestyle
http://www.carlosoliverablog.com/gdd/ (Google Chrome)

6. HTML5 en smarphones y
tablets
• iOS con excelente soporte desde la
version 3.1
• Android buen soporte, cuidado con
versiones antiguas, Mobile Chrome
la estrella
• Blackberry desde la V60 buen
soporte, full HTML5 en la V10
• Windows Phone, buen soporte,
acelerado por hardware
http://mobilehtml5.org/

7. Beneficios
• Brindar al usuario una optima experiencia
no importa el dispositivo del que acceda
• Interactuar con todas las posibilidades de
los smartphones actuales:
geoposionamiento, multimedios, telefonía,
etc.
• Menores costos y tiempos de desarrollo
comparado con aplicaciones nativas
• Aprovechar los nuevos recursos del
marketing, Codigos QR, bluetooth, etc.

8. Web HTML5 Herramientas de
desarrollo
• jQuery Mobile
• Sencha Touch
• jQtouch
• ….
http://www.sencha.com/products/touch/
http://jquerymobile.com/ http://www.jqtouch.com/

9. jQuery Mobile

10. Sencha Touch 2

11. Aplicaciones híbridas
• El browser HTML5 embebido en una
aplicación
• Posibilidad de ser descargado
desde un store
• Acceso a APIs nativas como la
cámara, el acelerómetro, contactos,
etc.
• Phonegap la herramienta
http://phonegap.com/

12. Recomendaciones
• Testeo en dispositivos reales
• Tomar en cuenta que el usuario
puede tener su browser favorito
• Utilizar el meta viewport
• Optimizar la carga de librerías js,
tomar en cuenta la latencia de
las conexiones 2.5G/3G

13. ¡Gracias!
Carlos Olivera Terrazas
Twitter: @carlos_olivera
Linkedin: http://bo.linkedin.com/in/colivera
Google+: http://gplus.to/carlos_olivera