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

Flujo de trabajo de creación de prototipos

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:

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:

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:

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.

Regla 1: use rectángulos para exportar texto y divisiones para exportar imágenes.

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.

Regla 2: evite que los objetos se superpongan.

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.

Regla 3: planee la disposición de las filas y las columnas.

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.

Regla 4: trate el documento como una entidad bidimensional.

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.

  1. Elija Archivo > Exportar.

  2. En el menú emergente Exportar, seleccione CSS e imágenes.

  3. Haga clic en Opciones para configurar las propiedades de las páginas HTML.

  4. Haga clic en Examinar para especificar una imagen de fondo y establecer el mosaico de la imagen de fondo:

    • Seleccione sin repetición para mostrar la imagen sólo una vez.

    • Seleccione repetir para repetir o mostrar la imagen en mosaico horizontal o vertical.

    • Seleccione repetir-x para mostrar la imagen en mosaico horizontal.

    • Seleccione repetir-y para mostrar la imagen en mosaico vertical.

  5. Seleccione la alineación de la página en el explorador: izquierda, centro o derecha.

  6. Seleccione fija o desplazamiento como opción de desplazamiento de archivos adjuntos.

  7. Haga clic en Aceptar y, a continuación, en Guardar.

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).

Nota:

Cuando se edita un componente de diseño de Flex en Fireworks, se puede copiar el código XML modificado en el proyecto de Flex. De esta forma se ahorra tiempo al replicar el comportamiento del componente modificado en el proyecto.

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.

Nota:

Las divisiones de imagen, rollovers y las zonas interactivas sólo se aplican a los prototipos basados en HTML. Evite estos objetos Web cuando cree prototipos de Flex.

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.

  1. Seleccione el componente de Flex en el lienzo.

  2. Abra el panel Propiedades de símbolo (Ventana > Propiedades de símbolo).

  3. Defina las propiedades y los eventos del componente 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.

  1. Elija Archivo > Exportar.

  2. En el menú emergente Exportar, seleccione MXML e imágenes.

  3. Seleccione Colocar imágenes en subcarpeta si desea guardar las imágenes en una carpeta aparte del código MXML.

  4. Seleccione Sólo página actual para exportar sólo la página seleccionada actual.

  5. Haga clic en Guardar para completar la exportación.

    Las imágenes asociadas al prototipo se exportan a la carpeta de imágenes. Además, las imágenes de todas las páginas MXML también se crean con otros archivos de imágenes. Las páginas MXML no necesitan estás imágenes de vista previa y se pueden eliminar.

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

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

  2. Seleccione la carpeta a la que desee exportar el documento de Fireworks y haga clic en Abrir.

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 de MXML no enmascara los componentes

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>.

La exportación de MXML ignora las divisiones

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.

Las propiedades de MXML se limitan a propiedades de símbolos sofisticados

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.

Los estilos se incrustan

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.

Los fotogramas no están admitidos

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.

  1. Elija Comandos > Crear paquete AIR y haga clic en Vista previa.

Crear una aplicación de Adobe AIR

  1. Seleccione Comandos > Crear paquete AIR y defina las opciones siguientes:

    Nombre de la aplicación

    Especifique el nombre que aparece en las pantallas de instalación cuando los usuarios instalan la aplicación. De forma predeterminada, la extensión especifica el nombre del sitio de Fireworks.

    ID de la aplicación

    Especifique un ID exclusivo para la aplicación. No utilice espacios ni caracteres especiales en el ID. Los únicos caracteres válidos son 0-9, a-z, A-Z, . (punto) y - (guión). Este ajuste es necesario.

    Versión

    Especifique un número de versión para la aplicación. Este ajuste es necesario.

    Carpeta de menú del programa

    Especifique la carpeta del menú Inicio de Windows en la que se creará el método abreviado a la aplicación. (No se aplica en Mac OS).

    Descripción

    Especifique una descripción de la aplicación que aparecerá cuando el usuario instale la aplicación.

    Copyright

    Especifique el copyright que se muestra en la información de Acerca de para las aplicaciones de Adobe AIR instaladas en Mac OS. Esta información no se utiliza para las aplicaciones instaladas en Windows.

    Contenido del paquete

    Seleccione Documento actual para seleccionar automáticamente la carpeta en la que se incluyen los archivos.

    Contenido raíz

    Haga clic en Examinar para elegir la página que aparece como contenido raíz. Si selecciona Documento actual, el contenido raíz se define de forma automática.

    Archivos incluidos

    Especifique los archivos o las carpetas que se incluyen en la aplicación. Puede añadir archivos HTML y CSS, archivos de imagen y archivos de biblioteca JavaScript. Haga clic en el botón Más (+) para añadir archivos y en el icono de carpeta para añadir carpetas. Para eliminar un archivo o una carpeta de la lista, selecciónelos y haga clic en el botón Menos (-). Los archivos o las carpetas seleccionados para la inclusión en el paquete de Adobe AIR deben pertenecer a la carpeta del contenido raíz.

    Cromo del sistema y Transparente

    Especifique el estilo de ventana (o cromo) que se debe usar cuando los usuarios ejecuten la aplicación en sus equipos. El cromo del sistema rodea la aplicación con el control de ventana estándar del sistema operativo. Con la opción fondo cromático transparente se elimina el fondo cromático estándar del sistema y se puede crear un fondo cromático personal para la aplicación. Las capacidades transparentes permiten crear ventanas de aplicación que no son de forma rectangular.

    Anchura y altura

    Especifique las dimensiones de la ventana de la aplicación en píxeles cuando se abre.

    Seleccionar imágenes de icono

    Haga clic para seleccionar imágenes personalizadas para los iconos de la aplicación. Seleccione la carpeta para cada tamaño de icono así como el archivo de imagen que desee usar. Sólo se admiten archivos PNG para las imágenes de los iconos de la aplicación.

    Nota:

    Las imágenes personalizadas seleccionadas deben residir en el sitio de la aplicación y sus rutas deben ser relativas a la raíz del sitio.

    Firma digital

    Haga clic en Establecer para firmar la aplicación de forma digital. Este ajuste es necesario. Para más información, consulte la sección siguiente.

    Archivo de paquete

    Especifique la carpeta en la que se debe guardar el instalador de la aplicación (archivo .air). La ubicación predeterminada es la raíz del sitio. Haga clic en el botón Examinar para seleccionar otra ubicación. El nombre de archivo predeterminado se basa en el nombre del sitio con la extensión .air. Este ajuste es necesario.

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.

  1. En el cuadro de diálogo Crear paquete AIR, haga clic en el botón Establecer que aparece junto a la opción Firma digital.

  2. En el cuadro de diálogo Firma digital, realice una de las acciones siguientes:

    • Para firmar una aplicación con un certificado digital comprado, haga clic en el botón Examinar, seleccione el certificado e introduzca la contraseña correspondiente, a continuación, haga clic en Aceptar.

    • Para crear su propio certificado digital, haga clic en el botón Crear y complete el cuadro de diálogo. La opción de tipo de clave de certificado se refiere al nivel de seguridad del certificado: 1024-RSA utiliza una clave de 1024 bits (menos segura) y 2048-RSA utiliza una clave de 2048 bits (más segura). Cuando termine, haga clic en Crear. A continuación, introduzca la contraseña correspondiente en el cuadro de diálogo Firma digital y haga clic en Aceptar.

      Nota:  debe tener Java® Runtime Environment (JRE) instalado en el equipo.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?