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

Con la salida del nuevo iPhone 3G y la apertura del App Store con aplicaciones nativas para este dispositivo, WordPress ha aprovechado y ha creado una aplicación con la que podremos administrar nuestro WordPress sin necesidad de usar Safari para ello.

[Ver video de demostración]

Diego Martín Lafuente (aka MiniD) nos ha sorprendido esta madrugada con la presentación de un framework CSS/XHTML para desarrollar aplicaciones web para el iPhone e iPod Touch.

IMG

El framework, sigue la línea de iUI desarrollado por Joe Hewitt, emulando una aplicación nativa evitando romper el equilibrio que Apple consiguió con su dispositivo.

Gracias a que el iPhone/iTouch utiliza Safari, nos permite utilizar las propiedades en selectores de CSS3 extendiendo las posibilidades que Diego ha sabido aprovechar, que junto a un HTML estandarizado y semánticamente correcto nos permite hacer una aplicación de cálidad con muy poca inversión de tiempo.

Diego nos ha dejado una demo para que veamos que ta ha quedado, sinó dispones de un iPhone/iTouch, puedes visualizarlo correctamente con Safari. Un 10 Diego (No serás Maradona??)

WPTouch es un nuevo theme para WordPress pensado y adaptado para los dispositivos de Apple, especialmente los iPhone e IPod Touch.

Al igual que otros que ya hemos visto, este adapta el aspecto de nuestro WordPress para que encaje perfectamente en estos dispositivos. Además WPTouch nos alegra con una serie de funcionalidades interesates:

• Ajax y efectos, con Prototype + Script.aculo.us
• Páginas de busqueda, login, archive, categories, pages, tags.
• Sistema navido de enlaces sociales
• Sistema de personalización desde el panel de administrador
• Paginación mediante Ajax
• Soporte de envio de mails nativo del iPhone/iTouch
• Insercción de comentarios mediante Ajax
• Personalización de iconos
• Sistema de control de las páginas que mostremos y las que no.
• Interacción con Flickr.
• …

Instalación

Como todos los themes y plugins, el sistema de instalación es relativamente sencillo.

1. Descargamos el fichero
2. Subimos a la carpeta wp-content/plugins/ de nuestro WordPress
3. Activamos desde el panel de administración
4. Lo disfrutamos.

Configuración

Todas las posibles configuraciones las encontraremos en Opciones > WPTouch.

Descargar

Versión 1.0

En EsferaiPhone hoy han publicado un juego que todos conocemos, ¿Quieres ser millonario?. Sin duda la ceja de Carlos Sobera hizo de este concurso uno de los más famosos de la última década. Pues ahora gracias a Millionaire podemos jugar en nuestro iPhone/iPod Touch.

Como era normal quería probarlo, por que aunque estuviera en Italiano podría ver si me interesaría tenerlo aunque fuera en ingles (cuando lo saquen). Al instalarlo cual ha sido mi sorpresa al encontrar una carpeta llamada «questions» con una base de datos en su interior 😀

Usando el plugin SQL Lite de Firefox, he podido editarla y ver que dentro están todas las preguntas, 12688 preguntas, con sus respectivas respuestas. He pensado que podríamos recopilar una cuantas preguntas geeks y hacer una versión de ¿Quieres ser millonario? para geeks.

Para ello he creado una página bastante chorra en la que podremos introducir las preguntas que se nos ocurran. Existen 5 niveles, desde fácil a Dios Supremo y los usuarios son los que deciden esa pregunta a que nivel corresponde.

Cuando haya algo más o menos decente podría ser divertido echarse una partidita, incluso con las almacenadas podríamos montar un juego online, pero eso ya se verá.

Os dejo la dirección de donde podeis dejar llevar vuestro imaginación e intentar hacer las preguntas más complicadas posibles.

[¿Quieres ser millonario? Version Geek?]

Hace tiempo que quería hacer una versión personalizada para los usuarios que visitan el blog desde el iPhone e iTouch, aprovechando el descubrimiento de Massive News «Mobile Edition» he pensado en hacer uso de él y condicionar la visualización del blog dependiendo del dispositivo desde el que se ve.

Usando el fichero my-hacks.php he añadido una condición que me indica si el usuario está accediendo desde un iPhone/iPod Touch y en caso afirmativo le digo que para ese usuario me cargue el theme Massive News «Mobile Edition».

<?php
function is_iphone($user_agent) {
        return (bool)eregi('(iPhone|iPod)', $user_agent);
        }

function theme_for_iphone($tpl) {
        if (!is_iphone($_SERVER['HTTP_USER_AGENT'])) return $tpl;
        else return "mobile";
}

add_filter('template', 'theme_for_iphone');
?>

 Como podemos ver, es un código bastante claro que me ayuda a distinguir entre iPhone/iPod y el resto.

Para que todo funcione correctamente, he introducido el theme en el directorio wp-content/themes/ y he activado el plugin wp-pagenavi, que se complementa perfectamente para mejorar gráficamente la paginación del theme.

Por el momento no he podido hacer que funcione con 1BlogCacher o WP-Cache, pero solo es cuestión de tiempo 😀

Via Ajaxian, descubor que Apple ha publicado un ejemplo con el que podremos conocer la orientación de nuestro dispositivo. Conociendo si está apaisado o vertical, podemos controlar, aún más nuestras aplicaciones web. 

Mediante una propiedad del window de Safari, podremos conocer en que posición está colocado nuestro dispositivo, y mediante un método creado para esto, nos avisará en el momento en que esta posición cambie.

Ejemplo

window.onorientationchange = function(){
  var orientation=window.orientation; //Orientación actual del dispositivo
  switch(orientation) {
    case 0: ...; break;
    case 90: ...; break;
    case -90:  ...; break;
  }
}

De esta forma en cuanto el dispositivo cambie de orientación, nos avisará mediante el método onorientationchange y mediante javascript podremos manipular nuestra página para adaptarla a las nuevas condiciones. 

Si eres un desarrollador concienciado en que la tecnología móvil será una trozo importante del pastel de Internet, seguro que coincides conmigo en que el iPhone/iPod Touch es el comienzo de lo que ha de venir. Por ese motivo hemos de empezar a pensar en apostar por el desarrollo sobre estos dispositivos y la forma más fácil es mediante Jiggy.

Jiggy es un IDE para que puedas desarrollar para tu iPhone/iPod Touch mediante un editor completamente web. Instalando una aplicación en tu dispositivo, cargarás un servidor web con los ficheros necesarios para que la edición desde tu navegador sea posible. Ver video.

Trás la insercción de código nos aparecerá una aplicación nueva en nuestro SpringBoard que al ejecutarla lanzará nuestro código.

Instalación

Para instalar la aplicación, podemos hacerlo directamente desde Instaler o descargar el zip directamente desde aqui. 

Instaler

1. Añadimos una source nueva ( http://jiggyapp.com/i ) a nuestro instaler
   
2.  Actualizamos las sources
3. Descargamos JiggyApp

Anatomía de una JiggyApp

Las JiggyApp, se componen de una serie de ficheros:

• Jiggy, Se trata del ejecutable que lanzará nuestra aplicación.
• Info.plist: Fichero requerido por el iPhone con la información básica sobre la aplicación.
• icon.png: El icono que hayamos decidido usar para nuestra aplicación.
• metadata.js: La metadata de nuestra aplicación se encontrará aqui.
• main.js: Fichero principal de nuestra JiggyApp. Este fichero es el que se ejecuta cuando lanzamos nuestra aplicación.

Tenemos una documentación bastante bien detallada para que no tengas limitaciones a la hora de ponerte a desarrollar.

Hola mundo versión JiggyApp

Plugins.load( "UIKit" );

var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
window.setHidden( false );
window.orderFront();
window.makeKey();
window.backgroundColor = [ 0.8 , 0 , 0, 1 ];

var mainView = new UIScroller();
mainView.contentSize = [ window.bounds[ 2 ] * 2 , window.bounds[ 3 ] * 2 ];
mainView.backgroundColor = [ 0 , 0 , 0 , 0 ];

window.setContentView( mainView );

var hello = new UITextLabel( [ 20 , 20 , window.bounds[ 2 ] - 40 , 100 ] );

hello.text = "Hello World!";
hello.backgroundColor = [ 0 , 0 , 0 , 0.25 ];
hello.setFont( new Font( "Trebuchet MS" , 2 , 46 ) );
hello.color = [ 1 , 1 , 1 , 1 ];
hello.centersHorizontally = true;

mainView.addSubview( hello );