construyendo y publicando nuestra primera app
DESCRIPTION
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.TRANSCRIPT
![Page 1: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/1.jpg)
www.interlat.co – [email protected] -‐ 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
![Page 2: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/2.jpg)
www.interlat.co – [email protected] -‐ 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.
![Page 3: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/3.jpg)
Índice de la presentación
• Planeando nuestra aplicación
• Construcción
• Publicación
• Conclusiones
@calonso
![Page 4: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/4.jpg)
Planeando nuestra aplicación
• Objetivos
• Problemas
• Soluciones
• Viabilidad
• Decisión final
@calonso
![Page 5: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/5.jpg)
Objetivo: Triunfar
@calonso
![Page 6: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/6.jpg)
¿Qué hace falta para triunfar?
Y ...
@calonso
![Page 7: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/7.jpg)
Llegar a todos los públicos
@calonso
![Page 8: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/8.jpg)
Problema: La fragmentación
@calonso
![Page 9: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/9.jpg)
Fragmentación: Sistemas Operativos.
@calonso
![Page 10: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/10.jpg)
Fragmentación: Tamaño de pantalla.
@calonso
![Page 11: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/11.jpg)
Fragmentación: Método de entrada.
@calonso
![Page 12: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/12.jpg)
Fragmentación: Hardware.
@calonso
![Page 13: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/13.jpg)
Fragmentación: Errores software.
@calonso
![Page 14: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/14.jpg)
Fragmentación: Conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs
@calonso
![Page 15: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/15.jpg)
Solución: Una única aplicación multiplataforma
@calonso
![Page 16: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/16.jpg)
Estudio de la solución: Tecnologías disponibles
@calonso
![Page 17: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/17.jpg)
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
![Page 18: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/18.jpg)
Javascript. El lenguaje de programación de la web.
prototype!
eval!
isFunction!
typeof!
instanceof!
Object!
new Function()!
Object.isPrototypeOf()!
Clases y objetos!
@calonso
![Page 19: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/19.jpg)
CSS 3. Experiencia de usuario de última generación
Selectores
Tipografías personalizadas
Efectos en textos
Organización en columnas Semi Transparencias
Colores personalizados
Esquinas redondeadas
Gradientes Sombras
Animaciones
Transformaciones
@calonso
![Page 20: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/20.jpg)
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
![Page 21: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/21.jpg)
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
![Page 22: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/22.jpg)
Decisión final
@calonso
![Page 23: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/23.jpg)
Construyendo nuestra aplicación multiplataforma
• Demo
• Primeros pasos
• Componentes UI
• Capacidades HTML 5
• Diseño personalizado
@calonso
![Page 24: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/24.jpg)
http://js-interlat-demo.herokuapp.com
@calonso
![Page 25: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/25.jpg)
Primeros pasos. El documento
@calonso
![Page 26: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/26.jpg)
Primeros pasos. El viewport
@calonso
![Page 27: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/27.jpg)
Primeros pasos. Estructura de la aplicación
@calonso
![Page 28: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/28.jpg)
Componentes UI
@calonso
![Page 29: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/29.jpg)
Componentes UI.
@calonso
![Page 30: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/30.jpg)
Componentes UI
@calonso
![Page 31: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/31.jpg)
Componentes UI
@calonso
![Page 32: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/32.jpg)
@calonso
![Page 33: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/33.jpg)
@calonso
![Page 34: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/34.jpg)
@calonso
![Page 35: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/35.jpg)
@calonso
![Page 36: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/36.jpg)
Diseño personalizado.
• CSS
• jQuery Theme Roller
@calonso
![Page 37: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/37.jpg)
Publicando nuestra aplicación multiplataforma
• Como aplicación nativa
• Como aplicación híbrida
• Como aplicación web
@calonso
![Page 38: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/38.jpg)
Como aplicación nativa
... ...
@calonso
![Page 39: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/39.jpg)
Como aplicación híbrida
... ...
@calonso
![Page 40: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/40.jpg)
Como aplicación web. Instalación
@calonso
![Page 41: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/41.jpg)
Como aplicación web. Instalación II
@calonso
![Page 42: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/42.jpg)
Conclusión
Buena solución... ... pero no definitiva.
@calonso
![Page 43: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/43.jpg)
Carlos Alonso Pérez Web Developer - OffsideGaming Site: http://mrcalonso.com Email: [email protected] Twitter: @calonso
@calonso
![Page 44: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/44.jpg)
www.interlat.co – [email protected] -‐ 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
![Page 45: Construyendo y publicando nuestra primera APP](https://reader034.vdocuments.mx/reader034/viewer/2022050904/546d753caf795962298b539c/html5/thumbnails/45.jpg)
www.interlat.co – [email protected] -‐ 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…