aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

La muestra de que las aplicaciones web móviles son el futuro y de que la conectividad que ellas permiten están haciendo que la mayoría de negocios se esten migrando a Internet es la facilidad con la que navegadores móviles como Safari Mobile nos permiten transformar una página web en una aplicación nativa para estos dispositivos (al menos en apariencia).

(Ver Imagen)

En matt.might.net publican una serie de parámetros que deberemos conocer para conseguir que la apariencia de nuestra página sea prácticamente igual a la de cualquier aplicación nativa que descarguemos de la App Store y sin necesidad de tener que convertirla a Object C.

Jaipho, nos permite crear una galería de imágenes ideal para los dispositivos iPhone.

(Ver Imagen)

La apariencia, muy similar a la galería del propio iPhone, nos permite visualizar muy fácilmente esas imágenes que queremos mostrar al mundo.

Demo / Descargar / Manual de instalación

NimbleKit es una extensión de Xcode con el que podremos desarrollar aplicaciones para el iPhone/iPod Touch pero sin necesidad de saber Object C. Se trata de intentar hacer que los desarrolladores web tengamos posibilidad de realizar estas aplicaciones e incluso subirlas al App Store de Apple. Todo ello, desarrolllando como lo venimos haciendo, usando tecnologías como HTML y Javascript.

(Ver Imagen)

Dispone de una serie de funciones que activarán los elementos nativos del dispositivo. Además de …

• Control completo de la apariencia de la aplicación
• Posibilidad de reproducir sonido en streaming
• Controlar la vibración
• Soporte de la Agenda
• Acceso a ficheros
• Acceso a Internet

Paul Armstrong, ha desarrollado BaseJS. Un framework Javascript especializado en los nuevos dispositivos móviles, concretamente los que usan WebKit como navegador web.

new io('/results.json', {
    format: 'json',
    method: 'post',
    params: { mustache: true },
    onSuccess: function(response) { 
        alert(response); // response == data returned from server
    }, 
    onFailure: function() { 
        alert('There was an error getting the data');
    }
});

Una de las curiosidades de este framework es que usa Sizzle como selector CSS3, lo que nos permite obtener todas las posibilidades establecidas por el estandar CSS3 con la que seleccionar elementos de nuestro DOM, sin tener en cuenta la velocidad del mismo. Todo esto siempre y cuando el navegador no tenga incorporado querySelector(), en caso contrario el se encargará de generar la llamada ha Sizzle para que dispongamos de el selector.

En tan solo 8kb, no podemos hacer maravillas, pero nos dará más de lo que necesitamos para hacer aplicaciones robustas y completamente compatibles con estos dispositivos.

El framework se encarga de extender los objetos nativos del lenguaje y elementos del DOM, algo diferente a lo que hace jQuery, que extiende elementos ondemand. De esta forma una vez cargada la página, todos los elementos disponen de las nuevas funcionalidades.

Tambien se aprovecha de la curiosa «caché» del iphone para almacenar datos. Y es que esta caché, por llamarla de alguna manera, no es una caché en si mismo, sinó un sistema de ficheros menores a 25kb que mediante la modificación de cabeceras «Expires» y «Cache-control» nos permite almacenar 19 ficheros de 25kb lo que es igual a 475kb de caché 😀 (Aunque se borrará al reinciar el dispositivo)

Podeis ver el código y la documentación o si directametne quereis descargarlo y poneros a trabajar con él desde aqui mismo.

Ajaxian nos alegra esta mañana anunciando que el iphone será el primer dispositivo móvil que dispondrá de algunas de las maravillas del HTML5 en su navegador web.

Almacenamiento DOM

Concretamente, la versión 2.1 del nuevo iPhone dispondrá de una base de datos para almacenamiento DOM de nuestras aplicaciones.

try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var mydb = openDatabase(shortName, version, displayName, maxSize);

 	// Creamos las tablas
 	createTables(mydb);

 	// Ejecutamos UPDATE
 	updateRow('jdoe', 'fuschia');
    }
} catch(e) {
    // Error handling code goes here.
    if (e == INVALID_STATE_ERR) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
    return;
}

function createTables(db)
{
    db.transaction(
        function (transaction) {

            /* CREAMOS LA TABLA SI NO EXISTE . */
            transaction.executeSql('CREATE TABLE people(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL DEFAULT "John Doe", shirt TEXT NOT NULL DEFAULT "Purple");', [], nullDataHandler, errorHandler);

            /* AÑADIMOS DATOS. */
            transaction.executeSql('insert into people (name, shirt) VALUES ("Joe", "Green");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("Mark", "Blue");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("Phil", "Orange");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("jdoe", "Purple");', [], nullDataHandler, errorHandler);
        }
    );
}

function updateRow(name, shirt) {
	db.transaction(
    function (transaction) {
        transaction.executeSql("UPDATE people set shirt=? where name=?;",
            [ shirt, name ]); // array of values for the ? placeholders
    }
	);
}

Disponemos de una documentación bastante detallada que nos permitirá hacer uso de esta fantástica propiedad.

Caché HTML5 de Aplicaciones

Cuando seleccionemos guardar nuestra aplicación en el Home Screen, esta automáticamente se guardará en caché, siempre y cuando lo especifiquemos mediante el tipo MIME correspondiente. Una forma de hacer más rápidas las aplicaciones para los clientes.

Esta capacidad será exclusiva de Safari Mobile y no aparecerá en ninguna otra versión de WebKit.

Hace ya más de un año hablamos, medio en cachondeo, sobre los nuevos eventos DOM de los nuevos dispositivos multitáctiles, como el iPhone o iPod Touch. En aquel artículo divagaba con un compañero de trabajo de la posibilidad de controlar estos eventos desde Javascript para así ampliar las opciones de las aplicaciones web para estos dispositivos.

Pues ya son una realidad, gracias a las opciones que la gente de Apple nos pone a nuestra disposición, podemos gestionar estos eventos fácilmente.

// Inicio del evento Touch
document.addEventListener('touchstart', function(e) {}, false);
// Durante el evento Touch
document.addEventListener('touchmove', function(e) {}, false);
// Termina el evento Touch
document.addEventListener('touchend', function(e){}, false);

Como podemos ver en el código anterior nos encontramos 3 nuevos eventos , ‘touchstart‘, ‘touchmove‘ y ‘touchend‘ que se encargan de gestionar los 3 estados en los que el evento provocar. Al igual que toda la gestión de eventos DOM seguimos una misma estructura:

document.addEventListener('EVENTO', ACCION, CAPTURE);

La ACCION que definimos será una función que recibirá por parámetro el elemento event con la información necesaria sobre el evento.

document.addEventListener('touchstart', function(e) {
        // Posición inicial del evento touch
        var touch = e.touches[0];
	// Posición X
	pageX = touch.pageX;
	// Posición Y
	pageY = touch.pageY;
}, false);

Para repescar la información del evento debemos usar el array de touches en el que encontraremos la información necesaria para conocer la posición, inicial en este caso, de nuestro movimiento. Los atributos pageX y pageY nos dan las coordenadas X,Y de nuestro dedo en la pantalla.

Conociendo esto podemos hacer un pequeño experimento:

// Valores iniciales
var pageX = pageY = 0;
// Sensibilidad en pixels
var sensibilidad = 10;
// Evento START
document.addEventListener('touchstart', function(e) {
	// Posición inicial del evento touch
	var touch = e.touches[0];

	// Posición X
	pageX = touch.pageX;

	// Posición Y
	pageY = touch.pageY;
}, false);

// Evento MOVE
document.addEventListener('touchmove', function(e) {
        // Evitamos que se mueva la página 
        e.preventDefault();
	var touch = e.touches[0];
	// Variación de la posición Y
	var Y = pageY - touch.pageY;

	// Variación de la posición X
	var X = pageX - touch.pageX;

	// Dirección Y
	if (Y < sensibilidad) dirY = 'abajo';
	else if (Y > sensibilidad) dirY = 'arriba';
	else dirY = 'centro';

	//Dirección X
	if (X < sensibilidad) dirX = 'derecha';
	else if (X > sensibilidad) dirX = 'izquierda';
	else dirX = 'centro';

	document.getElementById("info").innerHTML = '<h2>' +dirY+ " " + dirX + '</h2>';
}, false);

// Evento END
document.addEventListener('touchend', function(e){return;}, false); // No hacemos nada

Si tienes un iPhone o un iPod Touch puedes verlo funcionando en un ejemplo que he montado en 2 minutos.

Si estamos desarrollando una aplicación para el iPhone, probablemente nos guste la idea de ocultar la barra de navegación, en muchas aplicaciones web diseñadas para estos dispositivos ya lo podemos ver, entre ellas el iMeneame.

Ocultándola, ganamos espacio de lectura inmediatamente después de acabar la carga de la página, lo que en ciertas aplicaciones, permite una o dos líneas más de contenido. La barra no desaparece, sino que hacemos que el scroll baje hasta ocultarla, de esa forma podemos disponer de ella para cuando la necesitemos simplemente dirigiéndonos a la parte superior de la página.

El javascript necesario

addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1);}

Como podemos ver, únicamente se trata de un función que nos coloca el scroll de la página en la posición indicada al ejecutarse el evento onload. Añadiendo esto a nuestro fichero JS tendremos la barra de navegación oculta. Más fácil imposible 😀