FirefoxOS Desarrollando Apps Moviles con HTML5

Transcripción

FirefoxOS
La Web es la Plataforma
Desarrollando Apps Móviles con HTML5
Indice de temas
La Era de las WebApps
La Web es la Plataforma
Desarrollando una WebApp Móvil
Referencias
HTML5: La era de las WebApps
Semántica
Multimedia
Conectividad
APIs
CSS3
Offline
Dispositivo
Gráficos
Semántica
● Nuevos elementos para definir
claramente las diferentes partes
de la página.
● Mejores algoritmos de parseo
(ej: web crawlers)
Semántica
● <nav>
Define un conjunto de links de navegación.
● <section>
Define un agrupamiento temático de contenido, típicamente con un
encabezado.
● <article>
Define una sección independiente y autocontenida, con entidad
propia.
Semántica
● <header>
Define encabezado para una sección del documento. Contenedor
de contenido introductorio.
● <aside>
Define contenido relacionado a un artículo o a la página (Ej:
Glosario).
● <footer>
Define información relacionada al elemento contenedor.
Mutimedia
● En la versión anterior de HTML los Browsers se valían
de plugins para reproducir ciertos formatos multimedia.
● HTML5 incluye dos elementos nuevos para reproducir
contenido multimedia directo en el Browser: <audio> y
<video>
Mutimedia
● <video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Su Navegador no soporta el tag video.
</video>
Ver ejemplo:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
Mutimedia
● <audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Su navegador no soporta el tag audio.
</audio>
Conectividad
● HTML5 permite conectarse con el servidor en formas
novedosas e innovadoras.
○ WebSockets: Conexión permanente página/servidor e
intercambio de datos no-HTML.
○ Server-sent events: Permite al servidor enviar eventos
(push) al cliente.
○ WebRTC: Comunicación en tiempo real (videoconferencia)
Conectividad
● WebSockets
○ Canal de comunicación full-duplex (bi-direccional).
○ Es un gran avance para transmisión de datos en tiempo
real. Orientada a eventos.
○ Reduce el overhead dramáticamente. Optimiza ancho
de banda y latencia de red.
Conectividad
● WebSockets: Handshake
○ Una vez que cliente y servidor intercambian el primer
mensaje del protocolo handshake se establece una
conexión por WebSocket.
○ A partir del Handshake exitoso los mensajes sólo tienen
un overhead de 2 bytes!.
Conectividad
● WebSockets: Comparativa Overhead
○ Polling: Request+Response Header = 871 bytes por
request.
■ Cada cliente hace 1 request segundo.
○ WebSocket: 2 bytes por mensaje.
■ Cada cliente recibe 1 mensaje por segundo
Conectividad
● WebSockets: Comparativa Overhead
Fuente::
http://www.websocket.org/quantum.html
Conectividad
● WebSockets
○ Ejemplo en Server Java: http://blog.idrsolutions.
com/2013/12/websockets-an-introduction/
○ Ejemplo con Server PHP: Librerías
PHP WebSocket: https://code.google.com/p/phpwebsocket/
Ratchet: http://socketo.me/
Conectividad
● Server-sent events
○ El servidor inicia la comunicación enviando
eventos+datos (se invierte la comunicacion
tradicional cliente/servidor).
○ Orientado a eventos
Conectividad
● Server-sent events: Cliente
Creando conexión
Escuchando todos lo
mensajes
var evtSource = new
evtSource.onmessage =
EventSource("serverside.php"); function(e) {
//CODIGO JavaScript aqui
}
Escuchando un evento
evtSource.addEventListener
("ping", function(e) {
//CODIGO JavaScript aqui
}, false);
Conectividad
● Server-sent events: Servidor
○ El formato del stream del Evento es un string con
el siguiente formato, ej:
event: userconnect
data: {"username": "bobby", "time": "02:33:48"}
event: usermessage
data: {"username": "bobby", "time": "02:34:11", "text": "Hi
everyone."}
APIs
● WebWorkers: Concurrencia en JavaScript
○ Proveen una manera sencilla de ejecutar scripts en
background en otro hilo (thread) de ejecución.
○ Mecanismo de pase de mensajes para intercambiar
información con la página.
○ Permiten construir WebApps escalables y responsivas.
APIs
● WebWorkers: Iniciando un Worker
var myWorker = new Worker("my_task.js");
myWorker.addEventListener('message', function(e) {
//Recibo info del Worker
console.log(e.data);
}, false);
myWorker.postMessage("datos enviados el worker"); //Inicia el Worker
APIs
● WebWorkers: Worker (my_task.js)
function procesar() {
//Codigo JavaScript
}
self.addEventListener('message', function(e) {
// Send the message back.
self.postMessage('You said: ' + e.data);
}, false);
APIs
● Manipulando el Historial del Navegador
○ window.history nos dá acceso al historial de navegación.
Podemos ir hacia atrás, adelante y manipular el contenido
del historial de usuario.
○ Algunos métodos: back, forward, go, pushState,
replaceState.
APIs
● Content Editable
○ HTML5 permite a la mayoría de los elementos ser editables
con el atributo contentEditable.
○ Ejemplo:
<div contenteditable="true">
Este contenido puede ser editado por el usuario.
</div>
APIs
● Drag and Drop
○ Los elementos se pueden marcar como draggables.
○ Eventos para controlar el proceso de drag and drop:
dragstart, dragenter, dragover, dragleave, drag, drop,
dragend.
○ Objeto DataTransfer para transportar datos.
APIs
● Eventos Online y Offline
○ Para hacer una WebApp Offline necesitamos saber cuando
se está en modo offline u online.
○ navigator.onLine (true/false): Indica si estamos en modo
online o no.
○ window.addEventListener('online', updateOnlineStatus);
CSS3
●
●
●
●
●
●
●
●
Selectores
Box Model
Backgrounds y Bordes
Efectos de texto
Transformaciones 2D/3D
Animaciones
Layout de Multiples Columnas
Interface de Usuario
Ver http://www.css3.com
Offline
● App Cache:
○ Mecanismo de AppCache para correr WebApps en forma
Offline.
○ Para habilitar AppCache se debe poner el atributo
manifest en las paginas de la aplicación:
■ <html manifest="example.appcache">...</html>
Offline
● App Cache:
○ El archivo manifest de cache es un archivo de texto que
lista los recursos que el Browser debe hacer caching.
CACHE MANIFEST
# v1 - 2011-08-13
# This is a comment.
http://www.example.com/index.html
http://www.example.com/header.png
Offline
● sessionStorage:
○ Almacenamiento clave/valor que dura la sesión de la
página.
● localStorage:
○ Almacenamiento por clave/valor como sessionStorage
pero persistente.
Offline
● IndexedDB:
○ Web Standard que permite almacenar grandes
cantidades de datos estructurados.
○ Se pueden almacenar datos Blobs (binarios).
○ Se suele utilizar el protocolo Asincrónico para operar con
la Base de datos.
Dispositivo
● API de la Camara:
a. <input type="file" id="take-picture" accept="image/*">
b. var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
//Obtener referencia foto obtenida con camara o archivo elegido.
var files = event.target.files, file;
if (files && files.length > 0) {
file = files[0];
} };
Dispositivo
● Eventos Touch:
○ TouchEvent: touchstart, touchend, touchleave, touchcancel,
touchmove.
○ Touch: Punto de contacto del usuario con la superficie.
○ TouchList: Lista de Touch (ej: multi-touch).
Dispositivo
● Geolocalizacion:
○ La API de Geolocalizacion permite al usuario proveer su
ubicación a las WebApps.
Ejemplo de uso:
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
Gráficos
● Canvas:
○ Elemento HTML que permite hacer dibujos, manejar
imágenes y animaciones básicas.
● WebGL:
○ APi JavaScript para renderizar gráficos 2D/3D
● SVG:
○ Lenguaje XML para describir gráficos vectoriales.
Apps DEMO’s:
● Juegos:
○ Cut the rope: http://ctr.clay.io/
○ FlappyBird: http://flappybird.io/
○ HTML5 GameDev: http://www.html5gamedevelopment.com
● Mozilla Demo Studio:
○ https://developer.mozilla.org/es/demos/
FirefoxOS: La Web es la Plataforma
● Misión y Objetivos.
○ Mozilla. Acuerdos/Partners.
● Arquitectura de la Plataforma.
● Marketplace.
● FirefoxOS Simulator.
● Misión y Objetivos:
○ Inclusión. Feature Phones -> Smartphones
○ Poner al usuario primero. Sistema Operativo
abierto y libre.
○ Lenguaje de la web como plataforma de
construcción de apps (HTML+CSS+JS).
○ Open Web. Llevar la Web al móvil.
● Arquitectura de la Plataforma.
●
Gaia: Interfaz de usuario, controla
todo lo que se dibuja en pantalla.
●
Gecko: Motor del Web Browser
(implementa los standards HTML,
CSS, JavaScript).
●
Gonk: Kernel Linux y capa de
abstracción de hardware (Comparte
con Android).
● Mozilla. Acuerdos/Partners
○ ¿Que Gana Mozilla?
■ Tracción
■ Fabricantes: Construcción de Dispositivos.
■ Operadoras: Infraestructura de comunicación, llegada
al usuario final.
■ Lenguaje de la web: Gran base de desarrolladores
experimentados.
○ ¿Que Ganan las Operadoras?
■ Retoman control de parte del ecosistema que habían
perdido (Apps y Servicios)
○ ¿Que Ganan los Fabricantes?
■ No depender de un solo proveedor de software
(Google: Android)
○ Oportunidad para Desarrolladores
■ Mercados emergentes: Muchas personas con feature
phones.
■ Nuevo ecosistema. Posicionarse al inicio de la ola.
■ Poca competencia.
■ Lenguaje de la Web (HTML+CSS+JS).
● Marketplace: ¿Como publicar la App?.
○ Elegir entre Hosted o Packaged
○ Ingresar en el Marketplace (https://marketplace.firefox.com/)
■
■
Ingresar/Registrarse como usuario
Ingresar datos de la aplicación, screenshots, videos, modelo de
pago
○ Mainfest App file (manifest.webapp)
● Marketplace: ¿Como publicar la App?.
○ Mainfest App file (manifest.webapp), JSON
{ "name": "MiSitio Mobile",
"description": "MiSitio slogan!",
"launch_path": "http://misitio.com/index.html",
"icons": { “60": "http://misitio.com/icon.png",
"128": "http://misitio.com/icon-128.png" },
"developer": { "name": "MiSitio Team", ”url": "http://misitio.com" },
"default_locale": "es" }
● Marketplace: Apps Empaquetadas vs Alojadas.
○ App Alojadas (Hosted):
■ Corren en un servidor como cualquier sitio web.
■ No tienen acceso a APIs del dispositivo.
○ App Empaquetada (Packaged):
■ Se empaquetan en archivos .zip con los recursos.
■ Pueden ser: web app, privileged app, certified app.
■ privileged y certified apps tienen acceso a APIs del
dispositivo
● Marketplace: Monetización
○ Firefox Marketplace soporta 3 modelos de pago
■ App Pagas o Freemium.
■ Suscripción (planificado)
■ Pagos In-App.
○ Market propios o de terceros:
■ Se puede descargar el Market libremente.
■ Una empresa u organismo puede tener su propio
Market.
● FirefoxOS Simultator
○ Complemento de Firefox para simular un dispositivo
movil con FirefoxOS
○ Permite hacer Debugging
● Baabler: ¿Qué es Baabler?.
Se puede acceder al video en: http://baabler.com/que
● Baabler: ¿Qué es Baabler?.
○ Comunidad de personas que convierten páginas web
a audio para aprovechar tiempos improductivos.
○ Necesitamos App para dispositivos No-Android:
HTML5 como solución multi-plataforma.
○
“HTML5 should not be considered as a whole. Cherry-pick the
technology that suits the solution”
● Baabler: Requerimientos y Desafíos
1. Slide Menu.
2. Leer RSS Feeds.
3. Mochila: Almacenamiento Offline.
4. No Bloquear UI.
● Baabler: (1) Slide Menu
○ JQuery Mobile:
■ Eventos swipeleft, swiperight (animate)
○ Muchas vistas en la misma página o una página por
vista. (Problema WebWorkers dejan de funcionar
cuando cambia página)
● Baabler: (2) Leer RSS Feeds
○ Parsing del XML y convertir cada item en HTML
<item>
<title>Titulo1</title>
<link>...</link>
<description>...</description>
<enclosure url="http://URL/archivo.mp3" />
<itunes:author />
<pubDate>...</pubDate>
</item>
<p>
Titulo1<br><br>
<audio controls="">
<source src="http://URL/archivo.mp3"></source>
</audio>
<a href="javascript:agregarMochila
('$link','$title','http://URL/archivo.mp3');">
</p>
● Baabler: (3) Mochila: Almacenamiento Offline.
○ IndexedDB:
■ Permite volumen de datos considerable del lado
cliente, permite datos binarios (mp3).
■ Operaciones Asincrónicas
○ Reproducir audio en modo Offline:
■ Atributo “src” del tag audio => blob en IndexedDB
● Baabler: (5) No Bloquear UI.
○ WebWorkers para Syncronizar Mochila:
■ Acceso a IndexedDB aun no disponible => Pasar Mochila
como Array y luego el Worker devuelve el array con el dato
binario a la página.
■ Si cambia la página termina el Worker (Single Page App?)
○ Descargas de MP3 vía AJAX (async).
Referencias
●
FirefoxOS:
○ Guias de diseño, gooides y más: http://buildingfirefoxos.com/
○ Doc: https://developer.mozilla.org/es/Firefox_OS
○ Video & Presentations: https://hacks.mozilla.org/2012/11/firefox-os-video-presentationsand-slides-on-the-os-webapis-hacking-and-writing-apps/
○ http://www.mozilla.org/es-ES/firefox/os/
●
HTML5:
○ HTML5 Rocks: http://www.html5rocks.com/es/
○ ¿Can I Use? Tabla de soporte y compatibilidad: http://caniuse.com/
○ Doc en Mozilla, guías y más: https://developer.mozilla.org/es/docs/HTML/HTML5
○ W3Schools, test de snipets de codigo, etc.: http://www.w3schools.com
¡GRACIAS!
● Lic. Matías Basilico
○ Blog: http://mbasilico.com.ar
○ E-Mail: [email protected]
○ Twitter: @mbasilico

FirefoxOS Desarrollando Apps Moviles con HTML5

Transcripción

Documentos relacionados

Fernando Peñaranda Camacho

Rafael Martín-cuevas Redondo

CONVOCATORIA PARA DESARROLLADOR WEB

Curso Desarrollo de Aplicaciones Móviles.