Review of how fragmentation makes it difficult for developers to create and publish multiplatform applications (mobile & web) and how HTML5 and jQuery Mobile technologies stack can help us build that 'one size fits all' application

1. www.interlat.co
–
info@interlat.co
-­‐
h2p://www.facebook.com/interlat
-­‐
www.twi2er.com/interlat
-­‐
PBX:
57(1)
658
2959
-­‐
Bogotá
-­‐
Colombia
Aula
Virtual:
h2p://www.interlat.co/moodle/
Miércoles de Profundización en
e-business
Tema : Construyendo y publicando nuestra primera
App multiplataforma.
Conferencista: Carlos Alonso Pérez
País: España

2. Índice de la presentación
• Planeando nuestra aplicación
• Construcción
• Publicación
• Conclusiones

3. Planeando nuestra aplicación
• Objetivos
• Problemas
• Soluciones
• Viabilidad
• Decisión final

4. Objetivo: Triunfar

5. Objetivo: Triunfar

6. ¿Qué hace falta para triunfar?

7. ¿Qué hace falta para triunfar?

8. ¿Qué hace falta para triunfar?

9. ¿Qué hace falta para triunfar?
Y ...

10. Llegar a todos los públicos

11. Problema:

12. Problema: La fragmentación

13. Fragmentación: Sistemas Operativos.

14. Fragmentación: Tamaño de pantalla.

15. Fragmentación: Método de entrada.

16. Fragmentación: Hardware.

17. Fragmentación: Errores software.

18. Fragmentación: Conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs

19. Solución: Una única aplicación

20. Solución: Una única aplicación multiplataforma

21. Estudio de la solución: Tecnologías disponibles

22. HTML 5. Potencia y capacidades para tu browser
E"quetas
semán"cas
<header>
<nav> <section>
<article>
<figure>
<footer>
<menu>
Acceso
Hardware
Filesystem Sensores
Almacenamiento
local
Funcionamiento
offline
Comunicaciones
en
"empo
real
NoQficaciones
WebSockets
Web
workers
Mul"media
y
Gráficos
canvas
2D
y
3D
gráficos
vectoriales
(SVG)
audio
y
vídeo

23. Javascript. El lenguaje de programación de la web.
prototype
eval
isFunction
typeof
instanceof
Object
new Function()
Object.isPrototypeOf()
Clases y objetos

24. CSS 3. Experiencia de usuario de última generación
Selectores
TipograZas
personalizadas
Efectos
en
textos
Organización
en
columnasSemi
Transparencias
Colores
personalizados
Esquinas
redondeadas
Gradientes
Sombras
Animaciones
Transformaciones

25. jQuery Mobile. Desarrollo móvil rápido y sencillo
Javascript
no
intrusivo
Plugins
Máxima
compaQbilidad
Muy
ligero
Ampliamente
usado‘write
less,
do
more’
Documentación

26. Viabilidad técnica
SI
•
Geolocalización
(GPS)
•
Reproducción
mulQmedia
•
Sensores
de
movimiento
•
Almacenar
datos
locales
•
Acceso
offline
NO
•
Otros
sensores
•
Cámara
•
NoQficaciones
•
Web
GL
•
Alto
rendimiento
h2p://mobilehtml5.org/

27. Decisión final

28. Construyendo nuestra aplicación multiplataforma
• Demo
• Primeros pasos
• Componentes UI
• Capacidades HTML 5
• Diseño personalizado

29. http://js-interlat-demo.herokuapp.com

30. Primeros pasos. El documento

31. Primeros pasos. El viewport

32. Primeros pasos. Estructura de la aplicación

33. Componentes UI

34. Componentes UI.

35. Componentes UI

36. Componentes UI

41. Diseño personalizado.
• CSS
• jQuery Theme Roller

42. Publicando nuestra aplicación multiplataforma
• Como aplicación nativa
• Como aplicación híbrida
• Como aplicación web

43. Como aplicación nativa
... ...

44. Como aplicación híbrida
... ...

45. Como aplicación web. Instalación

46. Como aplicación web. Instalación II

47. Conclusión
Buena solución...

48. Conclusión
Buena solución...
... pero no definitiva.

49. www.interlat.co
–
info@interlat.co
-­‐
h2p://www.facebook.com/interlat
-­‐
www.twi2er.com/interlat
-­‐
PBX:
57(1)
658
2959
-­‐
Bogotá
-­‐
Colombia
Aula
Virtual:
h2p://www.interlat.co/moodle/
Gracias!
Carlos Alonso Pérez
Web Developer - OffsideGaming
Site: http://mrcalonso.com
Email: info@mrcalonso.com
Twitter: @calonso