Post on 24-Jan-2017
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
Índice de la presentación
• Planeando nuestra aplicación
• Construcción
• Publicación
• Conclusiones
Planeando nuestra aplicación
• Objetivos
• Problemas
• Soluciones
• Viabilidad
• Decisión final
Objetivo: Triunfar
Objetivo: Triunfar
¿Qué hace falta para triunfar?
¿Qué hace falta para triunfar?
¿Qué hace falta para triunfar?
¿Qué hace falta para triunfar?
Y ...
Llegar a todos los públicos
Problema: La fragmentación
Fragmentación: Sistemas Operativos.
Fragmentación: Tamaño de pantalla.
Fragmentación: Método de entrada.
Fragmentación: Hardware.
Fragmentación: Errores software.
Fragmentación: Conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs
Solución: Una única aplicación
Solución: Una única aplicación multiplataforma
Estudio de la solución: Tecnologías disponibles
HTML 5. Potencia y capacidades para tu browser
E"quetas semán"cas
<header>
<nav> <section>
<article>
<figure>
<footer>
<menu>
Acceso Hardware
Filesystem SensoresAlmacenamiento local
Funcionamiento offline
Comunicaciones en "empo realNoQficaciones
WebSockets
Web workers
Mul"media y Gráficoscanvas 2D y 3D
gráficos vectoriales (SVG)
audio y vídeo
Javascript. El lenguaje de programación de la web.
prototype
eval
isFunction
typeof
instanceof
Object
new Function()
Object.isPrototypeOf()
Clases y objetos
CSS 3. Experiencia de usuario de última generación
Selectores
TipograZas personalizadas
Efectos en textos
Organización en columnasSemi Transparencias
Colores personalizados
Esquinas redondeadas
GradientesSombras
Animaciones
Transformaciones
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
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/
Construyendo nuestra aplicación multiplataforma
• Demo
• Primeros pasos
• Componentes UI
• Capacidades HTML 5
• Diseño personalizado
http://js-interlat-demo.herokuapp.com
Primeros pasos. El documento
Primeros pasos. El viewport
Primeros pasos. Estructura de la aplicación
Diseño personalizado.
• CSS
• jQuery Theme Roller
Publicando nuestra aplicación multiplataforma
• Como aplicación nativa
• Como aplicación híbrida
• Como aplicación web
Como aplicación nativa
... ...
Como aplicación híbrida
... ...
Como aplicación web. Instalación
Como aplicación web. Instalación II
Conclusión
Buena solución...
Conclusión
Buena solución...
... pero no definitiva.
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