Confía tu proyecto a un equipo profesional

Three20 es un proyecto de código abierto en Objetive-C, alojado en github, que ha sido desarrollado por el creador del famoso framework iUI (Joe Hewitt).

Tras haber finalizado hace tan sólo unos días un proyecto, también de código abierto, para implementar Facebook en nuestras aplicaciones,  ahora nos sorprende con Three20.

Three20 se compone de una serie de controles muy útiles para nuestras aplicaciones, como un visor de imágenes, un editor de emails, un visor de tablas al estilo de UITableView, un editor de texto, una clase clon de NSURLRequest con nuevos añadidos, etc.

En github, además de estos controles, disponen de un ejemplo llamado TTCatalog, el cuál muestra dichos controles en funcionamiento.

Actualmente Three20 continua en desarrollo, así que habrá que seguirlo muy de cerca.

Os presentamos otra idea para un desarrollo Web para nuestro dispositivo iPhone. Viene de la mano de CSS-Tricks y nos muestra la forma de realizar una aplicación Web, con un elegante estilo y apta para mostrar contenidos de una fuente RSS. (Fuentes disponibles)

Aunque indican que la idea es que pueda ser utilizada para cualquier dispositivo móvil, inicialmente está desarrollada para iPhone y lo consiguen gracias a un estilo de la librería JQuery, en concreto JQuery Slider que muestra como de una sección a otra la pantalla es desplazada, y de SimplePie para recopilar contenidos de una fuente RSS.

El manual que nos presenta CSS-Tricks se divide en varios puntos:

1. Crear el entorno para iPhone. En este punto nos muestra como utilizar el meta-tag viewport para mostrar el contenido en toda la resolución de nuestro dispositivo iPhone y como nos apoyamos en ciertos estilos de CSS.

2. Recoger datos de una fuente RSS. Lo siguiente será recoger los contenidos que deseamos mostrar de un origen de feeds de RSS, gracias a SimplePie, la cual está desarrollada en PHP.

3. Creando las cabeceras de nuestros contenidos. El tercer punto será mostrar en HTML apoyándonos de nuevo en CSS las cabeceras de los contenidos utilizando para ello acertadas imágenes en PNG con transparencia. 

4. Crear las páginas de los contenidos. Una vez seleccionemos cualquier cabecera de algún artículo, este será mostrado en una página, previo efecto de desplazamiento, utilizando el estilo slider de JQuery que antes comentábamos.

5. Implementando la opción de volver. Para finalizar y de nuevo gracias a JQuery, nos muestran como implementar la opción de volver, volviendo a hacer uso del estilo de desplazamiento.

El resultado es realmente bueno y aquí podéis ver una demostración del mismo.

Cada vez me gusta más la idea de trabajar con Jiggy a la hora de desarrollar para iPhone. Si ya os contaba que podemos usar librerias conocidas como iUI o cualquier desarrollo Web, la idea de incluir gran parte de la librería UIKit del SDK de iPhone me agrada bastante, además del resto de plugins con los que podemos trabajar.

Tras una consulta realizada en el foro acerca de la creación de una barra de progreso, no he podido resistirme a crearla, y en cuestión de 5 minutos, incluyendo la creación del proyecto, he podido comprobar en mi propio dispositivo como quedaba. Esa es otra de las ventajas que destaco de Jiggy, y es la posibilidad de ejecutar la aplicación en mi propio iPhone o iPod Touch sin necesidad de simuladores.

Solo echo en falta la posibilidad de depurar desde el propio IDE de Jiggy, pero quien sabe si algún día podemos disfrutar de el. De momento lo más cercano es la consola que nos aparece en la parte inferior del IDE y que podemos ir comprobando los valores de nuestras variables mediante log(“variable”);

Lo dicho, aquí os dejo el código que debeís incluir en vuestro fichero main.js creado por defecto, sin eliminar las dos primeras lineas que nos genera el asistente.

Plugins.load( "UIKit" );

Application.setStatusBarMode( 3 , 0 , 0 , 0);

MainWin = new UIWindow( UIHardware.fullScreenApplicationContentRect );

MainWin.setHidden(false);

MainWin.orderFront();

MainWin.makeKey();

MainWin.backgroundColor = [ 0.0 , 0.0 , 0.0 , 1.0 ];

onLoad = function()

{

var pb = new UIProgressBar( [10 , 35 , 300 , 48 ] );

pb.setStyle( 0 );

MainWin.addSubview( pb );

var progress = 0;

var timer = new Timer( 0.07 );

timer.onTimer = function()

{

progress += 5;

if ( progress > 100 )

{

timer.stop();

var extra = new UIAlertSheet( "Atencion!" , [ "OK" ], 1);

extra.setTitle("")

extra.setAlertSheetStyle(2);

extra.setBodyText( "Ejemplo con barra de progreso" );

extra.onButtonClicked = function(button)

{

if ( button == 1 )

{

extra.dismiss( true );

}

}

extra.presentSheetInView( MainWin );

log( "SACABÓ" );

return;

}

pb.setProgress( progress / 100 );

}

timer.start();

}

Como primer ejemplo de aplicación Web para nuestro dispositivo iPhone / iPod Touch, vamos a practicar con el evento encargado de controlar los cambios de orientación.

El ejemplo es bastante sencillo y nos muestra como en nuestro elemento body controlamos dicho evento onorientationchange() y tras llamar a la función que definamos (en nuestro caso orientationChange), detectamos a través de nuestro objeto window el tipo de orientación que hemos realizado.

<script type="application/x-javascript"><!--

function orientationChange()

{

 var str = "Orientation: ";

 switch(window.orientation)

 {

 case 0:

 	str += "Portrait";

 break;

 case -90:

 	str += "Landscape (right, screen turned clockwise)";

 break;

 case 90:

 	str += "Landscape (left, screen turned counterclockwise)";

 break;

 case 180:

 	str += "Portrait (upside-down portrait)";

 break;

 }

 

document.getElementById("mode").innerHTML = str;

}

// --></script>

 

 

<h4 id="mode">Ras sed nibh.</h4>

Donec semper lorem ac dolor ornare interdum. Praesent condimentum. Suspendisse

lacinia interdum augue. Nunc venenatis ipsum sed ligula. Aenean vitae lacus. Sed

sit amet neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices

posuere cubilia Curae; Duis laoreet lorem quis nulla. Curabitur enim erat, gravida

ac, posuere sed, nonummy in, tortor. Donec id orci id lectus convallis egestas.

Duis ut dui. Aliquam dignissim dictum metus.

Existen tres posibilidades, orientación hacia la derecha, hacia la izquierda y orientación completa de 180 grados. Para nuestro ejemplo cambiamos el texto de nuestro elemento h4 para mostrar que recibimos el evento correctamente.

Podemos probar este ejemplo en la dirección http://www.iphonesoftware.es/taller/orientacion/index.html