En este webinar CARLOS ALONSO PEREZ nos permite analizar la variedad que existe en el mercado de los dispositivos móviles (telefonos, smartphones, tabletas) y como esta variedad se convierte en una complicación para los que queremos dedicarnos al mundo de las aplicaciones y/o videojuegos móviles. Se presenta la solución: una aplicación mutiplataforma y se vera una pequeña demostración de como crear y publicar una utilizando HTML5, JS y CSS3 como únicas herramientas.

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/
Construyendo y publicando
nuestra primera aplicación
multiplataforma
Carlos Alonso Pérez

2. 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/
ESTE WEBINAR ES REALIZADO GRACIAS A
TU NUEVO CANAL DE
NEGOCIOS EN INTERNET.

3. Índice de la presentación
• Planeando nuestra aplicación
• Construcción
• Publicación
• Conclusiones
@calonso

4. Planeando nuestra aplicación
• Objetivos
• Problemas
• Soluciones
• Viabilidad
• Decisión final
@calonso

5. Objetivo: Triunfar
@calonso

6. ¿Qué hace falta para triunfar?
Y ...
@calonso

7. Llegar a todos los públicos
@calonso

8. Problema:
La fragmentación
@calonso

9. Fragmentación: Sistemas Operativos.
@calonso

10. Fragmentación: Tamaño de pantalla.
@calonso

11. Fragmentación: Método de entrada.
@calonso

12. Fragmentación: Hardware.
@calonso

13. Fragmentación: Errores software.
@calonso

14. Fragmentación: Conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs
@calonso

15. Solución: Una única aplicación
multiplataforma
@calonso

16. Estudio de la solución: Tecnologías disponibles
@calonso

17. HTML 5. Potencia y capacidades para tu browser
Etiquetas semánticas
<header>!
<nav>! <section>!
<article>!
<figure>!
<footer>!
<menu>!
Acceso Hardware
Filesystem Sensores
Almacenamiento local
Funcionamiento offline
Comunicaciones
en tiempo real
Notificaciones
WebSockets
Web workers
Multimedia y Gráficos
canvas 2D y 3D
gráficos vectoriales (SVG)
audio y vídeo
@calonso

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

19. CSS 3. Experiencia de usuario de última generación
Selectores
Tipografías personalizadas
Efectos en textos
Organización en columnasSemi Transparencias
Colores personalizados
Esquinas redondeadas
Gradientes
Sombras
Animaciones
Transformaciones
@calonso

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

21. Viabilidad técnica
SI
• Geolocalización (GPS)
• Reproducción multimedia
• Sensores de movimiento
• Almacenar datos locales
• Acceso offline
NO
• Otros sensores
• Cámara
• Notificaciones
• Web GL
• Alto rendimiento
http://mobilehtml5.org/
@calonso

22. Decisión final
@calonso

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

24. http://js-interlat-demo.herokuapp.com
@calonso

25. Primeros pasos. El documento
@calonso

26. Primeros pasos. El viewport
@calonso

27. Primeros pasos. Estructura de la aplicación
@calonso

28. Componentes UI
@calonso

29. Componentes UI.
@calonso

30. Componentes UI
@calonso

31. Componentes UI
@calonso

32. @calonso

33. @calonso

34. @calonso

35. @calonso

36. Diseño personalizado.
• CSS
• jQuery Theme Roller
@calonso

37. Publicando nuestra aplicación multiplataforma
• Como aplicación nativa
• Como aplicación híbrida
• Como aplicación web
@calonso

38. Como aplicación nativa
...
...
@calonso

39. Como aplicación híbrida
...
...
@calonso

40. Como aplicación web. Instalación
@calonso

41. Como aplicación web. Instalación II
@calonso

42. Conclusión
Buena solución...
... pero no definitiva.
@calonso

43. Carlos Alonso Pérez
Web Developer - OffsideGaming
Site: http://mrcalonso.com
Email: info@mrcalonso.com
Twitter: @calonso
@calonso

44. 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
@CALONSO

45. 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/
SINTONIZA INTERLAT.TV
PARA PRÓXIMAS EMISIONES…