Creación de prototipos para aplicaciones de Flex y Adobe AIR

Al combinar el panel Páginas con otras características eficaces de Fireworks, puede crear rápidamente prototipos para software y sitios Web interactivos. Para convertir un prototipo finalizado en un sitio en funcionamiento, tan sólo tiene que exportarlo a Adobe Flash^®, Adobe Flex^®, Adobe AIR™ o Adobe Dreamweaver^®.

Consulte los siguientes artículos en el centro para desarrolladores de Fireworks para obtener sugerencias generales sobre creación de prototipos para flujos de trabajo:

• Artículo de Nick Myers sobre el diseño de productos interactivos con Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_es (en inglés)

• Artículo de Dave Cronin sobre las tendencias de la industria en la creación de prototipos: http://www.adobe.com/go/learn_fw_prototypingtrends_es (en inglés)

• Artículo de Matt Stow sobre el uso de las plantillas de CSS predefinidas en Fireworks: Prebuilt CSS templates in Fireworks CS4 (en inglés).

• Artículo de Jim Babbage sobre importación, exportación, símbolos, creación de prototipos y aplicación de escalas en Fireworks CS4, Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling (en inglés).

• Tutoriales de vídeo de Dave Hogue sobre el uso de Fireworks para el diseño de interacción y la creación rápida de prototipos:

  • Using Fireworks for information and interaction design (Uso de Fireworks para diseño de interacción e información, en inglés): http://www.adobe.com/go/learn_fw_infointeract_es

  • Creating interactive prototypes with Fireworks (Creación de prototipos interactivos con Fireworks; en inglés): http://www.adobe.com/go/learn_fw_creatinginteractivepro_es

  • Rapid prototyping with Fireworks (Creación rápida de prototipos con Fireworks; en inglés): http://www.adobe.com/go/learn_fw_rapidpro_es

  • Fireworks as part of the complete design process (Fireworks como parte de un proceso de diseño completo; en inglés): http://www.adobe.com/go/learn_fw_completedesignpro_es

• Artículo sobre el diseño de una aplicación de sitios Web con Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_es (en inglés).

• Artículo de Kumar Vivek sobre el diseño para dispositivos móviles mediante Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_es (en inglés).

Para ver un tutorial de vídeo sobre la creación de prototipos para interfaces de aplicaciones, visite www.adobe.com/go/lrvid4034_fw_es.

Crear las páginas

En el panel Páginas, cree el número deseado de páginas o pantallas para el diseño inicial. A medida que el diseño evoluciona, puede añadir o quitar páginas, según precise.

Diseñar elementos comunes de disposición

En el lienzo, diseñe los elementos de disposición que desee que compartan varias páginas, como barras de navegación e imágenes de fondo. Para alinear elementos, utilice las Guías inteligentes. Para obtener la máxima flexibilidad, estructure la disposición con CSS. (Consulte Guías inteligentes y Creación de disposiciones basadas en CSS).

Compartir elementos comunes en varias páginas

Cuando se comparten elementos comunes, un único cambio actualiza automáticamente todas las páginas afectadas. Utilice una página maestra para compartir todos los elementos que contenga, o comparta las capas para copiar subconjuntos de elementos. (Consulte Utilizar una página maestra y Compartir capas).

Añadir elementos únicos a páginas individuales

En cada página, agregue elementos únicos de diseño, navegación o formato. En el panel Biblioteca común encontrará numerosos botones, cuadros de texto y menús emergentes que aceleran el proceso de diseño. Los símbolos de componente de las carpetas Flex Components, HTML, Mac, Win, Web & Application y Menu Bars contienen propiedades que se pueden personalizar para casos de símbolos individuales. (Consulte Crear y utilizar símbolos de componente).

Simular navegación del usuario con vínculos

Desde objetos Web, como divisiones, zonas interactivas o botones de navegación, establezca vínculos entre las distintas páginas de su prototipo. (Consulte Vincular a páginas en un documento de Fireworks).

Exportar el prototipo terminado e interactivo

Fireworks ofrece distintos formatos de salida para el prototipo, y todos conservan los hipervínculos para la navegación de la página. Consulte los siguientes artículos:

• Para compartir un prototipo flexible y basado en CSS con clientes o editarlo después en Adobe Dreamweaver, consulte Exportar una disposición CSS.

• Para crear un prototipo más convencional y basado en tabla, consulte Exportar HTML de Fireworks.

• Para distribuir una versión en PDF para comentarios o impresión, consulte Exportar archivos PDF de Adobe.

• Para crear un prototipo de aplicaciones Flex, consulte Creación de prototipos de aplicaciones Flex. Para crear una aplicación de Adobe AIR, consulte Crear una aplicación de Adobe AIR.

Creación de disposiciones basadas en CSS

Puede diseñar disposiciones basadas en CSS en un documento de Fireworks y, a continuación, convertirlas en páginas HTML con reglas CSS que repliquen las disposiciones. Las disposiciones basadas en CSS son compatibles con los estándares habituales y ofrecen un código de fácil uso y apto para distintos navegadores.

Para ver un tutorial de vídeo sobre la creación de disposiciones de páginas HTML basadas en CSS, visite www.adobe.com/go/lrvid4035_fw_es. Consulte también los siguientes recursos:

• Tutorial sobre la exportación de archivos CSS e imágenes en Fireworks, en http://www.adobe.com/go/learn_fw_exportcssimages_es (en inglés).

• Tutorial sobre la creación de diseños Web compatibles con estándares con Fireworks, en http://www.adobe.com/go/learn_fw_standardscompliantdesign_es (en inglés).

Acerca de la disposición de páginas con CSS

Fireworks facilita el diseño de páginas así como la exportación inmediata de los códigos HTML y CSS por medio de un motor de exportación que analiza la colocación de los objetos. Además, permite definir la alineación de las páginas y especificar una imagen de fondo constante.

Para todo ello, sírvase de los elementos HTML disponibles en la carpeta HTML de Biblioteca común. Esta carpeta contiene objetos HTML como botones, listas desplegables y campos de texto. Puede editar las propiedades de estos elementos en el panel Propiedades de símbolo. Al arrastrar cualquiera de los elementos de formato a la página, el motor de exportación inserta etiquetas <form> durante la exportación de la disposición basada en CSS.

El texto en el que haya colocado alguna división aparece como una imagen en el código HTML exportado. Si desea que aparezca como texto, use los componentes HTML de Biblioteca común. Algunos de ellos son los elementos headings1-6 y link.

Reglas para las disposiciones basadas en CSS

Es preciso observar unas cuantas reglas a la hora de crear disposiciones basadas en CSS a fin de obtener los resultados esperados.

El motor de exportación exporta como tal el texto colocado en rectángulos. Como sólo se exportan las imágenes cubiertas por divisiones rectangulares, coloque divisiones en las imágenes que desee exportar. Estas divisiones comunican al motor de exportación dónde se hallan las imágenes.

El motor de exportación trata el texto, las imágenes y los rectángulos como bloques rectangulares. Examina el tamaño y la posición de estos objetos para determinar las filas y las columnas lógicas que se deben colocar en la disposición. Coloque los objetos con cuidado de manera que sus límites no se superpongan.

El motor de exportación busca particiones lógicas donde colocar una línea clara de visión entre los objetos o los grupos de objetos. Encierre las disposiciones de las columnas en rectángulos para evitar que el motor de exportación inserte una fila lógica que rompa la continuidad de la columna en cuestión.

Al diseñar la página, use rectángulos para encerrar los objetos que se deban manipular como secundarios del rectángulo. El motor de exportación detecta las relaciones entre elementos principales y secundarios. Luego, explora los elementos secundarios para determinar las filas y las columnas lógicas de acuerdo con la regla 3.

Además de estas reglas, tenga en cuenta lo siguiente:

• El motor de exportación sólo exporta rectángulos primarios. Para exportar las esquinas redondeadas de los rectángulos, coloque divisiones rectangulares encima.

• Para exportar los trazos de los rectángulos exportados, coloque divisiones rectangulares encima de los rectángulos.

• Para exportar los símbolos, coloque divisiones rectangulares encima.

• Para exportar los filtros aplicados al texto o a los rectángulos, coloque divisiones rectangulares encima.

Exportar una disposición CSS

Fireworks permite exportar las disposiciones creadas como archivos basados en CSS. Más adelante puede abrir y editar estos archivos basados en CSS en Dreamweaver o en otro editor compatible con CSS.

Crear un documento de demostración

Puede crear una demostración del documento de Fireworks en el que está trabajando. La demostración se abre en un navegador para mostrar las funciones y permite desplazarse por las páginas.

1. Seleccione Comandos > Documento actual de demostración.

2. Elija las páginas para las que desea crear la demostración y haga clic en Crear demostración.

3. Seleccione la carpeta y haga clic en Abrir.

Creación de prototipos de aplicaciones Flex

El proceso de creación de prototipos para Flex es similar al flujo de trabajo utilizado para los sitios Web y las interfaces de software. (Consulte Flujo de trabajo de creación de prototipos). Con Fireworks, puede arrastrar componentes de Flex al lienzo, especificar sus propiedades y exportar la interfaz de usuario resultante a MXML. Puede mejorar esa interfaz de usuario en Flex Builder.

Crear una interfaz de usuario de Flex

Con el panel Páginas, cree el número deseado de pantallas de la interfaz para el diseño inicial.

Insertar componentes de diseño de Flex en la disposición

En el lienzo, inserte componentes de Flex de la carpeta Flex en el panel Biblioteca común. Estos símbolos de componente funcionan específicamente con la exportación de MXML para asegurar la obtención de los resultados esperados. Al exportar el documento como MXML, cada símbolo se convierte en su etiqueta MXML respectiva. Los objetos no se reconocen como componentes de Flex sino que en su lugar se exportan como mapas de bits, que se vinculan a MXML mediante una etiqueta <mx:Image>. (Consulte Crear y utilizar símbolos de componente).

Los símbolos de cursor, barra de desplazamiento, ficha y consejo de herramienta se ignoran en la salida de MXML, ya que estos elementos no tienen una traducción directa de Fireworks a MXML. Por ejemplo, el símbolo de barra de desplazamiento aparece automáticamente en las instancias del contenedor de Flex cuando se puede desplazar por el contenido. En Fireworks, estos símbolos sólo sirven de indicadores del funcionamiento de las partes de un diseño de interfaz.

Compartir componentes de Flex comunes en varias páginas

Cuando se comparte un único componente de Flex en varias páginas, un único cambio actualiza automáticamente todas las páginas (o pantallas) afectadas. Puede utilizar una página maestra para compartir todos los componentes de Flex que contenga o compartir las capas para copiar subconjuntos de componentes. (Consulte Utilizar una página maestra y Compartir capas).

Especificar propiedades para los componentes de Flex

En el panel Propiedades de símbolo (Ventana > Propiedades de símbolo), especifique las propiedades y los eventos de cada componente de Flex insertado en el lienzo.

Exportar la disposición de Flex a MXML

Exporte la disposición de la interfaz de usuario de Flex y abra el archivo MXML resultante en Flex. Fireworks exporta el MXML necesario manteniendo todos los estilos y la posición absoluta. Los desarrolladores de Flex pueden utilizar esta interfaz sin tener que volver a crear la disposición en Flex.

Editar propiedades de componente de Flex

Puede editar las propiedades y los eventos de los componentes de Flex en el panel Propiedades de símbolo.

Exportar un documento de Fireworks a MXML

Fireworks puede ayudarle a diseñar aplicaciones sofisticadas de Internet (RIA) mediante la exportación de activos de la biblioteca común conocidos como componentes para su uso en Adobe Flex Builder. Fireworks exporta el código de Flex (MXML) necesario manteniendo todos los estilos y la posición absoluta.

Cuando finalice un prototipo de aplicación Flex, expórtelo a MXML para seguir editándolo en Flex Builder. En la vista de diseño, el prototipo se parece a su equivalente en Fireworks excepto en componentes tales como cursores y barras de desplazamiento que no se exportan.

Crear y exportar máscaras Flex

Puede enmascarar componentes de Flex en Fireworks y exportarlos para su uso en la creación de sitios Web basados en Flex e interfaces de aplicaciones.

Enmascarar componentes Flex

Es posible crear máscaras para una gran variedad de componentes Flex a partir de plantillas específicas que se puedan editar en Fireworks.

1. Elija Comandos > Máscaras Flex > Nueva máscara Flex.

2. Siga uno de estos procedimientos:

   • Para crear máscaras Flex para todos los componentes disponibles, seleccione Varios componentes.

     Fireworks crea un solo documento con todos los componentes Flex disponibles.

   • Si desea especificar los componentes para los que desea crear la máscara, seleccione Componentes concretos.

     Seleccione sólo los componentes con un estilo determinado adjunto o todas las instancias del componente.

3. Haga clic en Aceptar.

Exportar máscaras Flex

Limitaciones de exportación de MXML

Antes de utilizar la función de exportación de MXML de Flex, es importante que conozca sus capacidades y limitaciones:

La exportación a MXML no crea máscaras para los componentes en Flex, incluso si los ha modificado en Fireworks. La exportación de MXML simplemente genera documentos MXML para su uso en Flex. Estos documentos también pueden incluir imágenes vinculadas para objetos de Fireworks que no se pueden convertir en etiquetas MXML. Estas imágenes se añaden al documento MXML mediante etiquetas <mx:Image>.

Ya que la exportación de MXML está diseñada para generar documentos basados en etiquetas para su uso con Flex, las divisiones no se tienen en cuenta al crear imágenes o celdas de tabla. Cuando la exportación de MXML crea imágenes, utiliza los ajustes de optimización del documento para determinar el formato de la imagen y el método de compresión.

La función de exportación de MXML basa las propiedades de una etiqueta MXML en el componente de Flex en Fireworks. Fireworks proporciona un subconjunto de componentes de Flex con un número limitado de propiedades.

Las propiedades reconocidas como estilos se separan de las etiquetas MXML creadas, pero se mantienen en el mismo documento MXML en una etiqueta <mx:Style>. Fireworks no puede definir los estilos en un archivo CSS externo.

Cuando cree diseños y disposiciones para la salida de MXML, no utilice fotogramas. Si desea diferentes diseños en un documento, utilice páginas.

Creación de prototipos de aplicaciones de Adobe AIR

Adobe^® AIR™ para Fireworks permite transformar un prototipo de Fireworks en una aplicación de escritorio. Por ejemplo, algunas páginas de prototipo interactúan entre sí para mostrar datos. Puede utilizar Adobe AIR para empaquetar este conjunto de páginas en una pequeña aplicación que se puede instalar el equipo del usuario. Cuando el usuario ejecuta la aplicación desde el escritorio, la aplicación carga y muestra el prototipo en su propia ventana de aplicación, independiente del navegador. El usuario puede examinar el prototipo de forma local en su equipo sin conexión a Internet.

Consulte el artículo de Ethan Eismann sobre Adobe AIR y la marca de experiencia: http://www.adobe.com/go/learn_fw_airexperiencebrand_es (en inglés).

Añadir eventos de ratón de Adobe AIR

Es posible añadir eventos de ratón predefinidos de Adobe AIR a los objetos del documento. Fireworks ofrece cuatro eventos de ratón predefinidos: cerrar ventana, arrastrar ventana, maximizar ventana y minimizar ventana.

1. Seleccione los objetos del lienzo a los que desee aplicar el evento de ratón.

2. Elija Comandos > Eventos de ratón AIR y seleccione el evento apropiado.

Previsualizar una aplicación de Adobe AIR

Puede previsualizar una aplicación de Adobe AIR sin definir ningún parámetro de la aplicación.

Crear una aplicación de Adobe AIR

Firmar una aplicación de Adobe AIR con un certificado digital

Una firma digital proporciona la garantía de que el código de la aplicación no se ha modificado ni corrompido desde que lo creó el autor del software. Todas las aplicaciones de Adobe AIR necesitan una firma digital y no se pueden instalar si ella.