Contenido

PastryKit, framework JS/CSS para trabajar con iPhone de Apple

16 dic

+ 5

PastryKit, es un framework destinado para crear aplicaciones para iPhone como si fueran nativas. El framework, desarrollado por Apple, forma parte de una página pública que Apple ofrece como “Manual de usuario” online del iPhone. La página solo está disponible desde el iPhone, así que si intentamos acceder desde cualquier navegador nos redireccionará a otra versión.

Desde Safari, podemos acceder indicando el Agente de usuario adecuado:

PastryKit
(Ver Imagen)

La URL a la que debemos acceder es:

http://help.apple.com/iphone/3/mobile/

En ella podemos ver los ficheros JS y CSS del framework. Por el momento, es lo único que tenemos ya que no hay documentación al respecto por parte de Apple, aunque ahora será cuestión de tiempo que alguien saque una documentación no oficial que nos muestre las opciones de esta herramienta.

JS:

  • http://help.apple.com/ipodtouch/3/mobile/dist/PastryKit-ug-compact.js
  • http://help.apple.com/ipodtouch/3/mobile/javascript.js

CSS:

  • http://help.apple.com/ipodtouch/3/mobile/style/stylesheet.css

Via

Geolocalización en el iPhone/iTouch 3.0

17 jul

+ 6

Una de las muchas mejoras que el nuevo firmware del iPhone 3.0 ha traido es la posibilidad de geolocalizar dispositivos desde Safari.

map-location
(Ver Imagen)

Código

// Obtenemos la localización
function displayLocation(position){
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;

 // Hacemos algo ...
}

// En caso de error
function handleError(error){
 switch (error.code){
 // Si el usuario no nos dá permisos.
 case error.PERMISSION_DENIED:
 alert('Sorry. Permission to find your location has been denied.')
 break

 // Si la posición no puede ser localizada.
 case error.POSITION_UNAVAILABLE:
 alert('Sorry. Position unavailable.')
 break
 default:
 alert(error.code)
 }
}

// Llamamos al método de localización
navigator.geolocation.watchPosition(displayLocation, handleError);

Como vemos en el código anterior, lanzamos el método watchPosition() del objeto navegator.geolocation pasándole dos parámetros, uno para el caso de ir todo correcto (displayLocation) y handleError nos capturará cualquier error que pueda ocurrir en el proceso.

En dislayLocation vemos como el objeto que recibimos como parámetro (position) nos ofrece las coordenadas que podremos usar para nuestro script.

map-permission
(Ver Imagen)

Por otro lado el usuario deberá aceptar si quiere compartir su geolocalización o seguir en el anonimato. Esto puede dar lugar a un nuevo tipo de aplicaciones para este dispositivo.

NimbleKit, aplicaciones nativa para iPhone con HTML y JS

27 may

+ 3

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.

road-map
(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

BaseJS, un framework JS exclusivo para el iPhone

27 abr

+ 0

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é :D (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.

Simulador de iPhone para Windows

20 feb

+ 2

Los que desarrollamos para el iPhone, estamos de enhorabuena ya que Backbaud Labs nos ha desarrollado un simulador de iPhone para Windows. Usando el motor gráfico de Safari para Windows podremos ver nuestros diseños como si en un iPhone los estuvieramos viendo.

HTML5 llega al iPhone

3 feb

+ 9

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.

Aprende a programar para el iPhone

3 nov

+ 4

Si estás pensando en desarrollar aplicaciones para el iPhone, esta colección de manuales te ayudará a comprender y a exportar de tu cabeza esas ideas y convertirlas en código Cocoa.

Oculta la barra de navegación en Mobile Safari sin Javascript

3 oct

+ 7

Mobile Safari es el navegador que nos encontramos en los iPhone/iPod Touch y sus aplicaciones web está revolucionando la navegación móvil de una forma espectacular. Hace unas semanas vimos como ocultar la barra de navegación usando Javascript y vimos que de esta forma agrandamos la parte visible de la página mostrando más información a usuario, algo realmente importante en este tipo de dispositivos.

Ahora via Ajaxian, descubro la forma de hacer mediante el uso de tags <meta /> en nuestro <head />:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Podemos ver una demo directamente desde este enlace.

Listas Genius de canciones similares con PHP

16 sep

+ 15

Hace unos días Apple lanzó el Firmware 2.1 para el iPhone/iTouch y la verdad es que las mejoras han sido sustanciales, no solo en cuanto a consumo de batería, velocidad del dispositivo, o mejoras visuales. Sinó que  han añadido un nuevo sistema llamado Genius.

Genius es un algoritmo que dado una canción el te sugiere canciones similares a las que tienes incluidas en el iPhone/iTouch (o tambien mediante iTunes 8 en tu equipo).

A mi personalmente me ha encantado la idea. Y he estado pensando en como deberían tener montado el tinglado para obtener esas similitudes. Evidentemente no creo que tenga los datos relacionados en su poder, deben usar una aplicación externa para sacar esas similitudes. Supongo que Last.fm es la mejor opción, pero no he leido nada y no sé exactamente si lo han sacado de ahi…. YO SI!!:D

He hecho una prueba con la API de Last.fm, que es muy sencilla de usar y he montado un buscador de similitudes de canciones, para ello tendremos que introducir un artísta y una canción, entonces Last.fm nos devuelve las canciones similares que sus millones de usuarios sabiamente han relacionado :D

Echarle un vistazo a phpGenius (a veces me asusto con lo ingenioso que soy con los nombres xDD) y el código (no controlo muchas carácteres especiales, así que acentos o comillas harán que la aplicación cause error).

Gestión de eventos Touch del iPhone

18 ago

+ 3

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.