Construyendo y publicando nuestra primera APP
-
Upload
interlat-group -
Category
Mobile
-
view
658 -
download
1
description
Transcript of Construyendo y publicando nuestra primera APP
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
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.
Índice de la presentación
• Planeando nuestra aplicación
• Construcción
• Publicación
• Conclusiones
@calonso
Planeando nuestra aplicación
• Objetivos
• Problemas
• Soluciones
• Viabilidad
• Decisión final
@calonso
Objetivo: Triunfar
@calonso
¿Qué hace falta para triunfar?
Y ...
@calonso
Llegar a todos los públicos
@calonso
Problema: La fragmentación
@calonso
Fragmentación: Sistemas Operativos.
@calonso
Fragmentación: Tamaño de pantalla.
@calonso
Fragmentación: Método de entrada.
@calonso
Fragmentación: Hardware.
@calonso
Fragmentación: Errores software.
@calonso
Fragmentación: Conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs
@calonso
Solución: Una única aplicación multiplataforma
@calonso
Estudio de la solución: Tecnologías disponibles
@calonso
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
Javascript. El lenguaje de programación de la web.
prototype!
eval!
isFunction!
typeof!
instanceof!
Object!
new Function()!
Object.isPrototypeOf()!
Clases y objetos!
@calonso
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
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
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
Decisión final
@calonso
Construyendo nuestra aplicación multiplataforma
• Demo
• Primeros pasos
• Componentes UI
• Capacidades HTML 5
• Diseño personalizado
@calonso
http://js-interlat-demo.herokuapp.com
@calonso
Primeros pasos. El documento
@calonso
Primeros pasos. El viewport
@calonso
Primeros pasos. Estructura de la aplicación
@calonso
Componentes UI
@calonso
Componentes UI.
@calonso
Componentes UI
@calonso
Componentes UI
@calonso
@calonso
@calonso
@calonso
@calonso
Diseño personalizado.
• CSS
• jQuery Theme Roller
@calonso
Publicando nuestra aplicación multiplataforma
• Como aplicación nativa
• Como aplicación híbrida
• Como aplicación web
@calonso
Como aplicación nativa
... ...
@calonso
Como aplicación híbrida
... ...
@calonso
Como aplicación web. Instalación
@calonso
Como aplicación web. Instalación II
@calonso
Conclusión
Buena solución... ... pero no definitiva.
@calonso
Carlos Alonso Pérez Web Developer - OffsideGaming Site: http://mrcalonso.com Email: [email protected] Twitter: @calonso
@calonso
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
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…