La mejor forma de evaluar un diseño es verlo en dispositivo para el que fue hecho, mientras más rápido sea esto en el proceso, mejor. Para diseñar sitios web, es fácil: utilizas la función “preview in browser” en Fireworks para crear un prototipo cliqueable de las páginas que has diseñado. Pero cuando diseñas para iPhone, es un poco más difícil.

Prototipos de iPhone con Fireworks

Este tutorial muestra como usar un par de scripts para hacer que funcione tu prototipo de Fireworks para el iPhone. El método descrito en este tutorial es más útil para diseño de aplicaciones para iPhone que para el diseño web en móviles.

La idea detrás del método

Seguramente has intentado abrir un prototipo HTML creado en Fireworks en tu iPhone. No se ve nada bien. Hay márgenes que no quieres, el zoom no se puede controlar, la carga entre páginas toma demasiado tiempo. Por supuesto, puedes pedirle a un desarrollador que te ayude, pero hay otra alternativa: ¡construir tu prototipo en Fireworks!

El método mostrado en este tutorial, combina Fireworks con un poco de jQuery y PHP, para darte no sólo un prototipo que puedas ver, sino interactuar directamente en tu iPhone como si fuera una aplicación real(ver figura 1).

Figura 1. Concepto de como llevar tu prototipo de Fireworks a un iPhone.

Figura 1. Concepto de como llevar tu prototipo de Fireworks a un iPhone.

Antes de que aprendas como ajustar tu prototipo de Fireworks, es importante entender los principios de este concepto, que puedes lograr y por que.

El utilizar esta técnica para construir tu prototipo de Fireworks para iPhone te da una serie de ventajas, para que los usuarios potenciales de tu aplicación obtengan la mejor previsualización de como va a funcionar. Al utilizar Fireworks, tu prototipo tiene los siguientes beneficios:

  • Dar clic en las diferentes pantallas en la forma en la que normalmente lo harías con un mockup de Fireworks.
  • Hacer uso de la pantalla completa (sin los botones de Safari)
  • Exportar directamente de Fireworks sin la necesidad de cambiar CSS o HTML después.
  • Abrir la aplicación directamente en la pantalla principal del iPhone.
  • Desabilitar el zoom.
  • Enviar hipervínculos a cada iPhone sin ser un desarrollador oficial de iPhone.

Por el otro lado, no quieres aprender técnicas avanzadas de programación o poner a tus usuarios complicaciones innecesarias para ver tu prototipo. Estos son algunos puntos dolorosos que este método previene:

  • Aprender Objective-C o depender de alguien que si domine el lenguaje.
  • Hacer demasiados pasos antes de poder ver las pantallas en el dispositivo.
  • Esperar a que cargue cada pantalla cada vez que das clic en un botón.

Demostración del método

La mejor manera de entender esta idea es viendo un pequeño demo.

  1. Asegurate de que tu iPhone esta en una red veloz (Wi-Fi o 3G).
  2. Abre este link en Safari dentro de tu iPhone http://www.unitid.nl/iprototype/demo (generalmente mando los links a mi mail para abrirlos en mi iPhone)
  3. Sigue las instrucciones.

Este demo esta hecho con FIreworks, con la ayuda de PHP y jQuery. jQuery es una biblioteca de JavaScript; PHP es un lenguaje para construir sitios dinámicos. Se intentó hacer esto con otras herramientas para hacer prototipos, pero ninguna fue tan fácil de usar.

Nota: Puedes aprender más de PHP en el artículo, Ajustando un ambiente de desarrollo PHP para Dreamweaver. Descubre más de jQuery en el artículo, JavaScript para diseñadores web.

Como funciona

¿Cómo puedes crear un prototipo como este? Esta es una vista general de los pasos necesarios. Explicare más a detalle después:
¿Cómo puedes crear un prototipo como este? Esta es una vista general de los pasos necesarios. Explicare más a detalle después:

  1. Descarga el archivo .zip para este artículo, el cual contiene algunas carpetas con archivos PHP y jQuery.
  2. Crea las pantallas en Fireworks como lo harías normalmente. Empieza con un área de trabajo de 320 x 480 y llama la primera página index (sin capitales, por favor).
  3. Utiliza hotspots en lugar de slices para crear vínculos a las diferentes páginas.
  4. Exporta el mokup a HTML y las imágenes como lo harías normalmente para probar el prototipo en un navegador.
  5. Una vez satisfecho con la funcionalidad en tu navegador, exporta el archivo en el formato de la biblioteca de Dreamweaver (.lbi) a la carpeta Library.
  6. Sube el set completo de archivos de tu prototipo a un servidor que pueda ejecutar PHP.
  7. Con tu iPhone visita la página index de tu prototipo: http://www.yourwebsite.com/path_to_iprototype/iprototype

Pero, ¿cómo funciona realmente?

Tras bambalinas, jQuery y PHP trabajan juntos para proveer una experiencia fluida. Aquí se muestra como (si no estas interesado, puedes brincar esta sección, Crear el .png en Fireworks):

  1. Cuando abres la URL del prototipo, jQuery verificará la altura de la pantalla y así sabrá si estas en un iPhone y si agregaste el vínculo al home screen.
  2. Si no lo has hecho(si la altura de la pantalla es menor de 480 pixeles), manda una alerta para que agregues el vínculo al tu home screen.
  3. Si entras al sitio desde tu home screen, la altura de tu ventana es de 480 pixeles, así que jQuery obtiene el contenido del mockup usando PHP.
  4. Todos los archivos .lbi se cargan y son cambiados un poco por PHP para proveer las rutas adecuadas a las imágenes, remover tags innecesarias y cambiar los vínculos para que jQuery pueda trabajar con ellos. Incluso las etiquetas envuelven a las imágenes y el id del div se ajusta al nombre del archivo.
  5. jQuery esconde todos los divs que encuentra en el HTML pero hace la página llamada index visible. Por eso necesitas esta página en tu archivo .png, de otra manera tu prototipo empezaría en blanco.
  6. Dar clic al mapa de una imagen (que fue creado como un hotspot) muestra el div al cual esta vinculado el URL.

Echale un vistazo al código fuente de los archivos para más detalles. El código contiene alguna documentación importante. Seguramente la mayoría de ustedes son diseñadores que no están muy interesados en el código, como yo.

Ajustes a tu prototipo

Para ajustar tu prototipo, tienes que descargar el archivo iprototype.zip generado para este artículo, crea un archivo PNG en Fireworks y exporta tus páginas como elementos de una biblioteca. No iré más a detalle en como usar Fireworks, pero resaltare algunos puntos importantes para que funcione el prototipo en un iPhone.

Si eres nuevo usando Fireworks, puedes encontrar más tutoriales de como usar páginas y hotspots en el Fireworks Developer Center. Por ejemplo, me viene a la mente Prototipos interactivos con HTML, CSS y JavaScript con Fireworks y Dreamweaver CS4.

Descarga los archivos

Descarga el archivo ZIP y extrae su contenido en tu disco duro. Estos archivos los tienes que subir a un servidor, así que asegurate de encontrarlos en tu cliente FTP o ponlos directamente en el servidor. Esto es lo que necesitas saber sobre los archivos en la carpeta iprototype. (ver Figura 2).
index.html: Archivo que abre el navegador. El archivo contiene algunas etiquetas meta, CSS, JavaScript y el call al archivo PHP.

  • Carpeta includes: Carpeta con algunos archivos necesarios para que funcione el prototipo.
  • additional.css: Este archivo inserta CSS adicional al HTML por si abres el prototipo en un navegador convencional como Firefox o Internet Explorer.
  • functions.php: Archivo que lee y modifica los archivos exportados de Fireworks.
  • icon.png: El icono que se ve en el home screen de tu iPhone (puedes diseñar uno por tu cuenta)
  • Carpeta img: Dos imágenes que son llamadas por el archivo additional.css para su uso en navegadores convencionales.
  • js > jquery.js: La biblioteca de JavaScript.
  • Carpeta Library: En esta carpeta exportas tus archivos de Fireworks. (Puedes utilizar estos archivos de prueba, pero deberás borrarlos antes de exportar los de tu prototipo.)
  • source > proto.png: Es el archivo fuente del prototipo.
Figura 2. Archivos dentro del ZIP

Figura 2. Archivos dentro del ZIP

Creación del PNG en FIreworks

Una buena forma para iniciar es descargar los elementos de la interfaz gráfica del iPhone de Metaspark (¡gracias por esto chicos!) Abre Fireworks y crea un nuevo archivo, ajusta el tamaño del documento a 320 x 480 y nombra la primera página index. Esto es importante, de otra forma, verás una pantalla en blanco cuando abras la página en tu iPhone. Incluso puedes iniciar con el archivo fuente PNG que viene en como demostración, lo puedes encontrar en la carpeta source dentro del ZIP. Si deseas un scroll has la página mayor a 480 pixeles.

Inserción de Páginas y Hotspots

En Fireworks puedes hacer el uso de páginas. Cada página puede tener sus propios gráficos, botones y ajustes. Para poder navegar en diferentes pantallas, necesitas crear más de una página y vincularlas usando hotspots.

La manera más fácil de crear un hotspot es dar clic derecho en el elemento que quieras que funcione como botón y seleccionar Insert Hotspot. En el panel Properties, ingresa un nombre para el botón (ver Figura 3). Puedes hacerlo de manera manual o a través del menú pop-up. Si creas un vínculo a una página que no existe, verás un color negro de fondo (o el color que hayas puesto de fondo) en la pantalla y tendrás que cargar nuevamente el prototipo. Asegurate de que los vínculos sean correctos. Puedes exportar el prototipo como HTML e imágenes para revisar todo en tu navegador favorito.

Figura 3. Creación de hotspots.

Figura 3. Creación de hotspots.

Nota: Para aprender las mejores prácticas de como estructurar un documento de Fireworks, organizar objetos y reutilizar elementos comunes, puedes leer Uso de páginas, estados y layers en Fireworks CS4.

Si deseas ver el prototipo en un navegador convencional, tienes que agregar una página llamada homescreen en el archivo PNG. En esta página, coloca un screenshot de tu iPhone con el icono de la aplicación en el home screen. Genera un hotspot en el icono y has un vínculo con la página index.htm. Esta página no se mostrara en el prototipo cuando lo veas en el iPhone.

Exportar, subir y ver el prototipo.

Cuando este completo tu prototipo y no haya vínculos inservibles, debes exportar todas las páginas como elementos de una biblioteca de Dreamweaver en la carpeta Library. Sube los archivos a un servidor que ejecute PHP, y después abre el vínculo en tu iPhone.

Exportar a .lbi

En Fireworks, selecciona File / Export. Selecciona la carpeta Library y exporta el archivo como elementos de una biblioteca de Dreamwever. Las bibliotecas de Dreamweaver, son pequeñas piezas de código HTML que generalmente insertas en sitios web y que se actualizan automaticamente. Al exportar, no ingreses un nombre de archivo, los archivos serán nombrados acorde a tus páginas. Selecciona None en Slices; la opción Put images in Subfolder; deselecciona la opción Current Frame Only y da clic en Export (ver Figura 4).

Figura 4. Ajustes para exportar el archivo como una biblioteca de Dreamweaver.

Subir y ver el prototipo en tu iPhone

Todos los archivos en la carpeta iprototype deben estar en un servidor que pueda ejecutar PHP. Generalmente uso un cliente FTP en Dreamweaver para hacer esto. Desde tu iPhone navega a la URL con terminación /iprototype. Sigue las instrucciones en la pantalla (Figura 5). Puedes cambiar este texto si gustas. Lo puedes encontrar en el archivo index.html. Si abres la URL en un navegador convencional, asegurate de tener una página llamada “homescreen” incluida en tus páginas.

Figura 5. Mensaje al abrir la página en Safari.

Cosas que debes saber

Cada vez que abres el prototipo con el icono en tu home screen, las páginas primero deben cargar, antes de que puedas navegar en ellas. Incluso, la última página que verás al salir del prototipo se mostrará primero, pero desaparecerá cuando el resto de las páginas se hayan cargado. Como este método no soporta caching, tendrás que tomar esto en cuenta al mandar a tus clientes la URL o en pruebas de usabilidad.

Este método esta probado con prototipos de hasta 30 páginas, sin embargo pueden ocurrir problemas si tu prototipo tiene muchas más. Tendrás que trabajar un poco con el código o dividir la aplicación en dos (sólo con propósito de prueba, por supuesto).

A donde ir a partir de aqui

Si ya usas Fireworks y estas en el negocio del desarrollo o diseño de aplicaciones para iPhone, te va a gustar esta forma de ver tu diseño en el iPhone; es rápida, tamaño exacto en pixeles y es interactiva. No necesitas software adicional, cables o conocimiento de otros lenguajes de programación. Por supuesto, este método también tiene sus restricciones, pero es genial para mostrar a otros tu diseño y hacer algunas pruebas con el.

Seguiremos trabajando en el código para agregar más funcionalidad. Hemos notado que muchos diseñadores tienen dificultades para hacer prototipos para dispositivos móviles, no únicamente con el iPhone. Visita el sitio UNITiD (la mayor parte esta en alemán pero algunas cosas están en inglés ).

También puedes ver el siguiente video tutorial donde se muestra como se creo el demo.

Si eres nuevo en el diseño de aplicaciones para iPhone, recomiendo ver iPhone Human Interface Guidelines de Apple.

También te puede interesar:

Tags: , ,