Diseñorama » Tutoriales

Una aplicación para iPhone en minutos con IUI

Escrito por Andreas Krohn en 31.07.08

El iPhone 3G fué lanzado hace algunas semanas, así es que es tiempo de escribir una página o aplicación para el iPhone para aprovecharla novedad. Empecé a trabajar en una página específica para iPhone de enlatele.com.mx – porqué no deberían de poder encontrar los mexicanos la progamación de tele en su iPhone? Puedes ver el resultado final en iphone.enlatele.com.mx. Como lo único que quiero hacer es mostrar contenido basado en web en el iPhone, no hay necesidad de usar el API del iPhone y construir una aplicación, sino construir una página específica para el iPhone, y fué sorprendentemente fácil!

Algunas lecciones generales que aprendí, antes de que empecemos con el código en sí:

• Las páginas para iPhone se tratan de listas. Entre más listas, mejor, aparentemente. En una pantalla pequeña, no puedes hacer mucho más, o si quieres hacerlo, es mejor dejar a los usuarios de iPhone usar tu página normal.
• Escribe una página separada para el iPhone. No detectes si un usuario usa iPhone y redirecciones automaticamente. Una de las cosas buenas del iPhone es que es posible interactuar con páginas normales bastante bien en una pantalla pequeña, así es que no quites esta posibilidad a tus usuarios. Mejor crea un subdominio específico para iPhone, como iphone.enlatele.com.mx, o m.enlatele.com.mx.
• La conexión en un iPhone no siempre es la mejor, así es que evita imágenes si no hay una necesidad real para ellas. Esto tal vez no sea importante a la mitad de Nueva York o Estocolmo, pero al escribir una página para México prefiero ser cuidadoso y mantener el peso al mínimo.

Usé solamente HTML, CSS y JavaScript, empaquetados lindamente en el framework IUI Básicamente todo lo que haces es bajarlo, importar el CSS y JS a tu HTML, escribir listas con ciertas clases de CSS y IUI hace el resto. IUI tiene incluso versiones minimizadas para hacer la página más pequeña (y más rápida de bajar a un iPhone). Esto es lo que tengo en el head de mi página:

    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <style type="text/css" media="screen">import "iui/iuix.css";</style>
    <style type="text/css" media="screen">import "styles.css";</style>

La etiqueta meta “viewport” es necesaria para que el navegador Safari en el iPhone sepa cómo interpretar el contenido. Sin esa etiqueta corrres el riesgo de que la página se vea poep en el iPhone que en un navegador normal.

En el cuerpo de mi documento HTML, especifico los menús para el iPhone, es decir, listas listas y más listas. El código para el menú principal es:

    <ul id="home" title="Enlatele.com.mx" selected="true">
    <li class="group">Canales</li>
    <li><a href="channelgroup.html?=canales_abc">A-B-C</a></li>
    <li><a href="channelgroup.html?=canales_def">D-E-F</a></li>
    <li><a href="channelgroup.html?=canales_ghi">G-H-I</a></li>
    <li><a href="channelgroup.html?=canales_jkl">J-K-L</a></li>
    <li><a href="channelgroup.html?=canales_pqr">P-Q-R</a></li>
    <li><a href="channelgroup.html?=canales_stu">S-T-U</a></li>
    <li><a href="channelgroup.html?=canales_vwxyz">V-W-Y-X-Y-Z</a></li>
    <li class="group">Proveedores</li>
    <li><a href="#sky">Sky</a></li>
    <li><a href="#cablevision">Cablevision</a></li>
    <li><a href="#mastv">MASTV</a></li>
    <li><a href="#tvabierta">TV Abierta</a></li>
    </ul>

Esto resulta en esta página (como se puede ver en iphone.enlatele.com.mx)

:

IUI le da estilos automáticamente. La estructura esencial de esta lista es:

• El ID “home” en la etqueta ul. Los IDs como este son usados en IUI para identificar submenus, etc. Por ejemplo, el enlace a Sky es <a href="#sky">Sky</a>, que enlaza a otro ul en la misma página con el ID “sky” <ul id="sky" title="Sky">. Esto significa que puedo tener casi toda mi estructura de menu, con submenus, en una sola página. Una vez que el iPhone baja la página, no es necesaria una conexión más cuando bajas un submenu.
• title=“Enlatele.com.mx” is el encabezado de la página
• selected=“true” en el ul significa que este es el primer menú que se carga.
• <li class="group">Canales</li> crea una agrupación en el menú, una forma de hacer que se vea bonito sin trabajo.
• Ahora la parte realmente buena de IUI que es que se encarga de cargar el contenido dinámicamente a tu página actual transparentemente. Para la página de enlatele hay listados de canales de tele que no se cargan hasta que el usuario hace clic en un elemento del menú. Así es que si un usuario quiere una lista de los canales que empiezan por D, E o F, hace clic en <li><a href="channelgroup.html?=canales_def">D-E-F</a></li>. IUI inserta el contenido de channelgroup.html en la página usando AJAX (y el ?=canales_def es solamente para que el sistema de enlatele sepa qué canales cargar). La página channelgroup.html debe contener la lista de canales que se va a incluir cuando se haga clic en el link, nada más:
  

  
      <ul id="canales_abc" title="Canales A-B-C">
      <li><a href="channel.html?canal=a_e_mx_west">A&E MX West</a></li>
      <li><a href="channel.html?canal=american_network">American Network</a></li>
      <li><a href="channel.html?canal=animal_planet_latinam">Animal Planet LatinAm</a></li>
      <li><a href="channel.html?canal=animax">Animax</a></li>
      </ul>
  
  

Así es que ninguna etiqueta <html> ni <body>, la lista que ves arriba es todo el contenido de channelgroup.html.

IUI también hace automáticamente otras cosas que quieres en tus páginas para iPhone, como insertar un botón para regresar a la pantalla anterior (que sólo se ve bien en Safari porque utiliza estilos específicos de Safari, así es que no te preocupes si se ve feo cuando lo pruebas en Firefox) , poniendo un gráfico cuando se cargan las páginas, etc. Se pueden hacer muchas cosas más avanzadas, pero puedes lograr mucho con tan sólo lo básico. Lo mejor es que hace que sea realmente rápido implementar algo que se ve y funciona bien en el iPhone. Claro, hay una parte que falta, que es el llenar las páginas de contenido, pero eso es programación y no lo veremos en este artículo.

Si te interesa hacer más contenido móvil, especialmente el diseño, checa el Design Stencil Kit para móbil de Yahoo . Contiene todas las piezas que necesitas para hacer prototipos y diseños para el iPhone y otras plataformas móviles.

Andreas Krohn escribe sobre mashups y tecnología en su blog digitalistic . Su último proyecto es el buscador de hosting WebHostNinja .

---

Comentarios

1. 1 agosto 2008, 01:23Ana Belén Ramón

   muchas gracias por el artículo!

   solo un pequeño detalle, ¿no sería mejor redirigir a la versión iPhone directamente y añadir un enlace de “Ver versión completa de la web”?

2. 1 agosto 2008, 09:10Jesús Cortés

   Enhorabuena por el artículo, te leo desde hace años, y sinceramente, espero que sea por muchos más :)

   Os dejo un par de enlaces interesantes sobre el desarrollo web para móviles y para iPhone en particular:

   http://www.anieto2k.com/2007/07/04/trucos-y-consejos-para-desarrollar-para-el-iphone/

   http://www.csslab.cl/2008/07/10/desarrollos-web-para-iphone/

   http://www.iphonewebdev.com/

3. 11 agosto 2008, 04:40Daniel

   Excelente herramienta, muy útil!
   Y por cierto, ¿porqué la gente sigue haciendo este tipo de spam medianamente disfrazado, como el del comment de arriba?
   En fin.

4. 18 septiembre 2008, 17:43Jesús Cortés

   ¿Compartir información es hacer spam? La gente anda muy paranoica últimamente….

5. 1 octubre 2008, 22:42Guillermo

   Impresionante, creo que nos habeis salvado nuestra interfaz, porque estabamos recibiendo quejas y no teniamos ni idea de que le paba.

6. 20 julio 2009, 21:12Daniel

   Muy buen dato para tener en cuenta

---

¡Comenta!

Nombre:

Email:

URL:

Mensaje: