Firefox vuela en primera clase: Mi charla en el #Gusenet #BackToMyRoots

Actualización: El vídeo está disponible en youtube:

Hace algo más de una semana, en el pasado Gusenet, tuve la oportunidad de dar una charla breve sobre un tema no exento de polémica, Firefox OS, la apuesta del navegador libre por los mercados en vías de desarrollo.

BmJMbpPIYAEs5HO

Durante aproximadamente media hora, pudimos repasar conceptos como:

  • Arquitectura
  • Servicios disponibles
  • Apariencia
  • Persistencia de datos

Todo ello a través de tres demos:

En la primera no pasamos del “hola mundo” aunque definimos el manifest, el fichero que necesita Firefox OS para que la app funcione:

{
  "name": "Gusenet",
  "description": "Gusenet Manager",
  "launch_path": "/demo/app1/index.html",
  "icons": {
    "128": "/demo/app1/icon.png"
  },
  "developer": {
    "name": "Roberto Luis Bisbe",
    "url": "http://rlbisbe.net"
  },
  "default_locale": "es"
}
Hola mundo!

Hola mundo!

En la segunda, con el mismo estilo (es decir, plano) agregamos la posibilidad de llamar por teléfono y además, notificaciones:

function Platform()
{
		this.phoneCall = function(phonenumber)
		{
			var call = new MozActivity({
		      name: "dial",
		      data: {
		      number: phonenumber
		      }});
		};

		this.notify = function(value) {
			var n = new Notification(value);
			n.onshow = function () { 
			  setTimeout(n.close, 5000); 
			}
		}
};

Por otra parte usamos IndexDB para almacenamiento local:

function DB() {
	var __self = this;
	var _db;

	function _getObjectStore()
	{
		var transaction = _db.transaction(["speakers"], "readwrite");
		return transaction.objectStore("speakers");
	}

	this.load = function(callback)
	{
		var request = indexedDB.open("speakers", 3);

		request.onsuccess = function(event){
			_db = this.result;
			if (callback) {callback()};
		}

		request.onupgradeneeded = function(event) {
		  var db = event.target.result;
		  var objectStore = db.createObjectStore("speakers", { autoIncrement : true });
		};
	}

	this.save = function(value) {
		var objectStore = _getObjectStore();
		objectStore.add(value);
	};

	this.getAll = function(callback)
	{
		var objectStore = _getObjectStore();
		objectStore.openCursor().onsuccess = function(event) {
		  var cursor = event.target.result;
		  if (cursor) {
	  		callback(cursor.value);
		    cursor.continue();
		  }
		};
	};
}
Base de datos, teléfono y notificaciones

Base de datos, teléfono y notificaciones

Finalmente, mediante el uso de los “Building Blocks” pudimos conseguir una apariencia nativa, mediante las sections de HTML5, y algo de CSS, y javascript:


	<section role="region" id="index" data-position="current">
		<header class="fixed">
			<menu type="toolbar">
	            <button id="btn-add"><span class="icon icon-add">add</span></button>
         	</menu>
         	<h1>Gusenet - Ponentes</h1>
		</header>
		<article class="scrollable header">
			<div data-type="list">
				<ul id="speakers">
					
				</ul>
			</div>
		</article>
	</section>

	<section role="region" id="add" data-position="right">
		<header class="fixed">
			<h1>Agregar Nuevo</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<p><input type="text" id="name" placeholder="Nombre" required=""></p>
				<p><input type="tel" id="phone" placeholder="Telefono" required=""></p>
				<p><input type="submit" class="button" value="Agregar" /></p>
			</form>
		</article>
	</section>
Lista telefónica con estilos Gaia

Lista telefónica con estilos Gaia

Agregando un elemento a nuestra agenda con la interfaz nativa del sistema

Agregando un elemento a nuestra agenda con la interfaz nativa del sistema

Las slides están disponibles en SlideShare:

Las demos completas están disponibles aquí:

https://app.box.com/s/37jg8rx3dsqdg2i25bqf

Finalmente, los enlaces los saco del PDF y están a continuación:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s