Fluxo de trabalho do desenvolvimento de protótipos

Ao combinar o painel Páginas com outros eficientes recursos do Fireworks, você pode criar rapidamente protótipos interativos da Web e de software. Para converter um protótipo finalizado em um site funcional, basta exportá-lo para o Adobe Flash®, o Adobe Flex®, o Adobe AIR™ ou o Adobe Dreamweaver®.

Consulte os seguintes artigos no Fireworks Developer Center para obter dicas gerais sobre a criação de protótipos de fluxos de trabalho:

Para assistir a um tutorial de vídeo sobre como desenvolver protótipos de interfaces de aplicativo, consulte www.adobe.comlrvid4034_fw_br.

Criar as páginas

No painel Páginas, crie o número desejado de páginas ou telas para o design inicial. À medida que o design evoluir, é possível adicionar ou subtrair páginas conforme necessário.

Criar o layout de elementos comuns de design

Na tela de desenho, crie o layout de elementos de design que você deseja compartilhar entre várias páginas, como barras de navegação e imagens de plano de fundo. Para alinhar elementos, use Guias inteligentes. Para obter o máximo de flexibilidade, estruture seu layout com CSS. (Consulte Guias inteligentes e Criação de layouts baseados em CSS.).

Compartilhar elementos comuns entre várias páginas

Quando você compartilha elementos comuns, uma única alteração atualiza automaticamente todas as páginas afetadas. Use uma página-mestre para compartilhar todos os elementos que ela contém ou compartilhe camadas para copiar subconjuntos de elementos. (Consulte Usar uma página-mestre e Compartilhar camadas.)

Adicionar elementos exclusivos a páginas individuais

Em cada página, adicione elementos exclusivos de forma, navegação ou design. No painel Biblioteca comum, você encontrará vários botões, caixas de texto e menus pop-up que dinamizam o processo de design. Símbolos de componentes nas pastas Flex Components, HTML, Mac, Win, Web & Application e Menu Bars incluem propriedades que você pode personalizar para ocorrências de símbolos individuais. (Consulte Criar e usar símbolos componentes.)

Simular a navegação do usuário com links

A partir de objetos da Web, como fatias, pontos de acesso ou botões de navegação, crie links entre as várias páginas do seu protótipo. (Consulte Criar links para páginas em um documento do Fireworks.)

Exportar o protótipo interativo finalizado

O Fireworks oferece vários formatos de saída para o seu protótipo e todos eles preservam links de hipertexto para navegação em páginas. Consulte os seguintes artigos:

Criação de layouts baseados em CSS

Você pode projetar layouts baseados em CSS em um documento do Fireworks e, em seguida, convertê-los em páginas HTML com regras CSS que repliquem seus layouts. Layouts em CSS oferecem uma abordagem com base em padrões e proporcionam um código que pode ser usado em vários navegadores.

Para assistir a um tutorial de vídeo sobre como criar layouts de páginas HTML baseados em CSS, consulte www.adobe.comlrvid4035_fw_br. Consulte também os seguintes recursos:

Sobre o layout de página CSS

O Fireworks permite o design de páginas e a exportação instantânea do código HTML e CSS com o uso de um mecanismo de exportação que analisa o posicionamento dos objetos. Além disso, é possível definir o alinhamento das páginas e especificar uma imagem de plano de fundo a ser repetida.

Você pode usar os elementos HTML disponíveis na pasta HTML da Biblioteca comum. A pasta HTML contém elementos HTML, como botões, objetos de lista suspensa e campos de texto. As propriedades desses elementos podem ser editadas com o uso do painel Propriedades do símbolo. Quando você arrasta qualquer um dos elementos de formulário até a página, o mecanismo de exportação insere marcas <form> ao exportar o layout em CSS.

Qualquer texto no qual você tenha inserido uma fatia aparecerá como imagens no HTML exportado. Se quiser que esse texto apareça como texto, use os componentes HTML na Biblioteca comum. Os componentes HTML incluem títulos de 1 a 6 e elementos de link.

Regras para layouts em CSS

Observe algumas regras ao criar layouts em CSS para poder chegar aos resultados esperados.

Regra 1: use retângulos para exportar texto e fatias em imagens de exportação

O mecanismo de exportação exporta o texto inserido em retângulos. Como apenas as imagens cobertas por fatias retangulares são exportadas, insira as fatias nas imagens para que elas sejam exportadas. Essas fatias indicam ao mecanismo de exportação onde estão as imagens.

Regra 2: evite a sobreposição de objetos

O mecanismo de exportação trata texto, imagens e retângulos como blocos retangulares. Ele examina o tamanho e a posição desses objetos para determinar as linhas e colunas lógicas de modo a inseri-los no layout. Insira com cuidado os objetos, de forma que os seus limites não fiquem sobrepostos.

Regra 3: planeje o layout para linhas e colunas

O mecanismo de exportação procura partições lógicas em que um campo visual desobstruído possa ser inserido entre objetos ou grupos de objetos. Coloque seu layout de coluna dentro de um retângulo para impedir que o mecanismo de exportação insira uma linha lógica que quebre esse layout.

Regra 4: trate o documento como bidimensional

Ao projetar a sua página, use retângulos para delimitar objetos que você deseja tratar como filhos do retângulo. O mecanismo de exportação detecta essas relações entre pais e filhos. O mecanismo de exportação verifica os elementos filho para determinar linhas e colunas lógicas, como na Regra 3.

Além dessas regras, observe o seguinte:

  • O mecanismo de exportação exporta apenas retângulos primitivos. Para exportar os cantos arredondados dos retângulos, insira fatias retangulares sobre eles.

  • Para que os traçados dos retângulos sejam exportados, insira fatias retangulares sobre os retângulos que contêm esses traçados.

  • Para exportar símbolos, insira uma fatia retangular sobre eles.

  • Para exportar filtros que foram aplicados ao texto ou a retângulos, insira fatias retangulares sobre eles.

Exportar um layout de CSS

O Fireworks permite exportar os layouts que você cria como arquivos baseados em CSS. Dessa forma, é possível abrir e editar esses arquivos no Dreamweaver ou em outro editor compatível com CSS.

  1. Escolha Arquivo > Exportar.

  2. No menu pop-up Exportar, escolha CSS e imagens.

  3. Clique em Opções para definir as propriedades da página HTML.

  4. Clique em Procurar para especificar uma imagem de fundo e defina a disposição lado a lado da imagem de fundo:

    • Selecione Sem repetição para exibir a imagem apenas uma vez.

    • Selecione Repetir para repetir ou dispor a imagem lado a lado horizontalmente e verticalmente.

    • Selecione a opção Repetir x para dispor a imagem lado a lado horizontalmente.

    • Selecione a opção Repetir y para dispor a imagem lado a lado verticalmente.

  5. Selecione o alinhamento de página no navegador como à esquerda, centralizado ou à direita.

  6. Selecione a rolagem de anexos como fixa ou rolagem.

  7. Clique em OK e, em seguida, em Salvar.

Criar uma demonstração de documento

Você pode criar uma demonstração do documento do Fireworks com o qual está trabalhando. A demonstração é aberta em um navegador para demonstrar os recursos e permite que você navegue entre as páginas.

  1. Selecione Comandos > Demonstrar documento atual.

  2. Selecione as páginas para as quais deseja criar uma demonstração e clique em Criar demonstração.

  3. Selecione a pasta e clique em Abrir.

Desenvolvimento do protótipo de aplicativos Flex

O processo de desenvolvimento de protótipos para o Flex é como o fluxo de trabalho usado para sites e interfaces de software. (Consulte Fluxo de trabalho do desenvolvimento de protótipos.) Com o Fireworks, você pode arrastar componentes do Flex até a tela de desenho, especificar suas propriedades e exportar a interface do usuário resultante para MXML. Em seguida, pode refinar cada interface do usuário no Flex Builder.

Criar a interface do usuário do Flex

Usando o painel Páginas, crie o número desejado de telas de interface para o design inicial.

Inserir componentes de design do Flex no layout

Na tela de desenho, insira componentes do Flex a partir da pasta Flex no painel Biblioteca comum. Esses símbolos componentes funcionam especificamente com a exportação MXML para garantir que você obtenha os resultados esperados. Ao exportar um documento como MXML, cada um desses símbolos é convertido em suas respectivas marcas MXML. Os objetos não reconhecidos como componentes do Flex são exportados como bitmaps, que são vinculados ao MXML por meio de uma marca <mx:Image>. (Consulte Criar e usar símbolos componentes.

Observação:

Ao editar um componente de design do Flex no Fireworks, você pode copiar o código XML modificado para o projeto do Flex. Isso poupa tempo quando se deseja replicar o comportamento do componente modificado em um projeto.

Os símbolos de Cursor, Barra de rolagem, Guia e Dica de ferramenta são ignorados durante uma saída MXML, pois não têm conversão direta do Fireworks para o MXML. Por exemplo, o símbolo de Barra de rolagem aparece automaticamente em ocorrências de contêineres do Flex quando seu conteúdo pode ser rolado. No Fireworks, esses símbolos servem simplesmente como indicadores do funcionamento das partes de um design de interface.

Observação:

Fatias de imagem, sobreposições e pontos de acesso aplicam-se apenas a protótipos com base em HTML. Evite esses objetos da Web ao criar protótipos do Flex.

Compartilhar componentes comuns do Flex entre várias páginas

Quando você compartilha um único componente do Flex em várias páginas, uma única alteração atualiza automaticamente todas as páginas (ou telas) afetadas. É possível usar uma página-mestre para compartilhar todos os componentes do Flex que ela contém ou compartilhar camadas para copiar subconjuntos de componentes. (Consulte Usar uma página-mestre e Compartilhar camadas.)

Especificar propriedades para os componentes do Flex

No painel Propriedades do símbolo (Janela > Propriedades do símbolo), especifique as propriedades e os eventos para cada componente do Flex inserido na tela de desenho.

Exportar o layout do Flex para MXML

Exporte o layout da interface do usuário do Flex e abra o arquivo MXML resultante no Flex. O Fireworks exporta o MXML necessário com o posicionamento absoluto e todos os estilos mantidos. Os desenvolvedores do Flex podem usar essa interface sem precisar recriar o layout no Flex.

Editar propriedades de componentes do Flex

Você pode editar as propriedades e os eventos de componentes do Flex no painel Propriedades do símbolo.

  1. Selecione o componente do Flex na tela de desenho.

  2. Abra o painel Propriedades do símbolo (Janela > Propriedades do símbolo).

  3. Defina as propriedades e os eventos do componente no painel Propriedades do símbolo.

Exportar um documento do Fireworks para MXML

O Fireworks pode ajudar no desenvolvimento de layouts para aplicativos sofisticados da Internet ao possibilitar a exportação de recursos de bibliotecas comuns como componentes conhecidos para uso no Adobe Flex Builder. O Fireworks exporta o código necessário do Flex (MXML) com o posicionamento absoluto e os estilos mantidos.

Ao finalizar o desenvolvimento de um protótipo de aplicativo do Flex, exporte-o para MXML para edição adicional no Flex Builder. Na exibição Design, o protótipo se parece com seu equivalente no Fireworks, exceto por componentes como cursores e barras de rolagens, que não são exportados.

  1. Escolha Arquivo > Exportar.

  2. No menu pop-up Exportar, selecione MXML e imagens.

  3. Selecione Colocar imagens em subpasta se quiser salvar as imagens em uma pasta separada do código MXML.

  4. Selecione Somente página atual, para exportar apenas a página atualmente selecionada.

  5. Clique em Salvar para concluir a exportação.

    Todas as imagens associadas ao protótipo são exportadas para a pasta de imagens. Além disso, as imagens de páginas MXML completas também são criadas com os outros arquivos de imagem. Páginas MXML não exigem essas imagens de visualização e podem ser removidas.

Criar e exportar revestimentos flexíveis

Você pode aplicar revestimento a componentes do Flex no Fireworks e exportá-los para uso na criação de sites e interfaces de aplicativo com base no Flex.

Componentes flexíveis de revestimento

Você pode criar revestimentos para vários componentes flexíveis com base nos modelos de revestimentos Flex e editá-los no Fireworks.

  1. Selecione Comandos > Aplicação de revestimento flexível > Novo revestimento flexível.

  2. Siga um destes procedimentos:

    • Para criar revestimentos flexíveis para todos os componentes disponíveis, selecione Vários componentes.

      O Fireworks cria um único documento com todos os componentes flexíveis disponíveis.

    • Para especificar os componentes para os quais você deseja criar revestimentos, selecione Componentes específicos.

      Selecione apenas os componentes com um estilo específico anexado ou selecione todas as ocorrências do componente.

  3. Clique em OK.

Exportar revestimentos flexíveis

  1. Selecione Comandos > Aplicação de revestimento flexível > Exportar revestimento flexível.

  2. Selecione a pasta para a qual deseja exportar o documento do Fireworks e clique em Abrir.

Limitações de exportação do MXML

Antes de usar o recurso de exportação MXML do Flex, é importante conhecer suas capacidades e limitações:

A exportação MXML não aplica revestimento a componentes

A exportação para MXML não cria revestimentos para componentes no Flex, mesmo que você os tenha modificado no Fireworks. A exportação MXML simplesmente gera documentos MXML para uso no Flex. Esses documentos também podem incluir imagens vinculadas para objetos do Fireworks que não podem ser convertidos em marcas MXML. Essas imagens são adicionadas ao documento MXML por meio de marcas <mx:Image>.

A exportação MXML ignora fatias

Como a exportação MXML foi projetada para gerar um documento com base em marcas para uso com o Flex, as fatias não são levadas em consideração na criação de imagens ou células de tabela. Quando a exportação MXML cria imagens, ela utiliza as configurações de otimização do documento para determinar o formato da imagem e o método de compactação.

As propriedades MXML são limitadas a propriedades de símbolos elaborados

O recurso de exportação MXML baseia as propriedades de uma marca MXML no componente Flex do Fireworks. O Fireworks oferece um subconjunto de componentes do Flex com um número limitado de propriedades.

Os estilos são incorporados

Propriedades reconhecidas como estilos são separadas das marcas MXML criadas, mas são mantidas no mesmo documento MXML dentro de uma marca <mx:Style>. O Fireworks não pode definir os estilos em um arquivo CSS externo.

Não há suporte para quadros

Ao criar designs e layouts para saída MXML, não use quadros. Se quiser ter diferentes designs em um documento, use páginas.

Desenvolvimento do protótipo de aplicativos Adobe AIR

O Adobe® AIR™ para Fireworks permite transformar um protótipo do Fireworks em um aplicativo de computador. Por exemplo, algumas páginas de protótipo podem interagir umas com as outras para exibir dados. Você pode usar o Adobe AIR para compactar esse conjunto de páginas em um pequeno aplicativo que pode ser instalado no computador de um usuário. Quando o usuário executa o aplicativo a partir de sua área de trabalho, o aplicativo é carregado e exibe o protótipo em sua própria janela, sem depender de um navegador. Os usuários podem, então, procurar o protótipo localmente em seus computadores, sem uma conexão com a Internet.

Veja o artigo de Ethan Eismann sobre o Adobe AIR e a experiência de marca: http://www.adobe.com/go/learn_fw_airexperiencebrand_br.

Adicionar eventos de mouse do Adobe AIR

Você pode adicionar eventos de mouse predefinidos do Adobe AIR a objetos no seu documento. O Fireworks oferece quatro eventos de mouse predefinidos: fechar janela, arrastar janela, maximizar janela e minimizar janela.

  1. Selecione os objetos na tela de desenho aos quais você deseja aplicar o comportamento de evento de mouse.

  2. Selecione Comandos > Eventos de mouse do AIR e escolha o evento.

Visualizar um aplicativo Adobe AIR

Você pode visualizar um aplicativo Adobe AIR sem definir parâmetros de aplicativos Adobe AIR.

  1. Selecione Comandos > Criar pacote AIR e clique em Visualizar.

Criar um aplicativo Adobe AIR

  1. Selecione Comandos > Criar pacote AIR e defina as seguintes opções:

    Nome do aplicativo

    Especifique o nome que é exibido nas telas de instalação quando os usuários instalam o aplicativo. A extensão especifica o nome do site do Fireworks por padrão.

    ID do aplicativo

    Insira um ID exclusivo para o seu aplicativo. Não use espaços ou caracteres especiais no ID. Os únicos caracteres válidos são 0-9, a-z, A-Z, . . (ponto) e - (traço). Essa configuração é obrigatória.

    Versão

    Especifique um número de versão para o aplicativo. Essa configuração é obrigatória.

    Pasta de menu do programa

    Especifique a pasta no Menu Iniciar do Windows na qual você deseja criar o atalho para o aplicativo. (Não se aplica ao Mac OS)

    Descrição

    Adicione uma descrição do aplicativo para exibi-la quando o usuário instalar o aplicativo.

    Copyright

    Especifique o aviso de copyright exibido nas informações da seção Sobre para aplicativos Adobe AIR instalados em sistemas operacionais Mac. Essas informações não são usadas para aplicativos instalados no Windows.

    Conteúdo do pacote

    Selecione Documento atual para selecionar automaticamente a pasta da qual os arquivos são incluídos.

    Conteúdo raiz

    Clique em Procurar para eleger a página exibida como conteúdo raiz. Se você tiver selecionado Documento atual, o conteúdo raiz será automaticamente definido.

    Arquivos incluídos

    Especifique os arquivos ou pastas a serem incluídos no aplicativo. Você pode adicionar arquivos HTML e CSS, arquivos de imagem e arquivos de bibliotecas JavaScript. Clique no botão com sinal de adição (+) para adicionar arquivos e no ícone Pasta para adicionar pastas. Para excluir um arquivo ou uma pasta da lista, selecione o arquivo ou a pasta e clique no botão de subtração (-). Os arquivos ou pastas selecionados para inclusão no pacote Adobe AIR devem pertencer à pasta de conteúdo raiz.

    Cromagem do sistema e Transparente

    Especifique o estilo de janela (ou cromagem) a ser usado quando os usuários executarem o aplicativo em seus computadores. A cromagem do sistema envolve o aplicativo com o controle de janela padrão do sistema operacional. A cromagem transparente elimina o sistema de cromagem padrão e permite criar uma cromagem própria para o aplicativo. Os recursos transparentes permitem criar janelas de aplicativo com formas não retangulares.

    Largura e altura

    Especifique as dimensões da janela do aplicativo em pixels quando ela é aberta.

    Selecionar imagens de ícones

    Clique para selecionar imagens personalizadas para os ícones do aplicativo. Selecione uma pasta para cada tamanho de ícone e selecione o arquivo de imagem que você deseja usar. Apenas arquivos PNG são suportados para imagens de ícone de aplicativo.

    Observação:

    As imagens personalizadas selecionadas devem residir no site do aplicativo e seus caminhos devem ser relativos à raiz do site.

    Assinatura digital

    Clique em Definir para assinar o aplicativo com uma assinatura digital. Essa configuração é obrigatória. Para obter mais informações, consulte a seção a seguir.

    Arquivo de pacote

    Especifique a pasta na qual salvar o novo instalador do aplicativo (arquivo .air). O local padrão é a raiz do site. Clique no botão Procurar para selecionar um local diferente. O nome de arquivo padrão é baseado no nome do site com a extensão .air. Essa configuração é obrigatória.

Assinar um aplicativo Adobe AIR com um certificado digital

Uma assinatura digital fornece a garantia de que o código de um aplicativo não foi alterado ou corrompido desde a sua criação pelo autor do software. Todos os aplicativos Adobe AIR exigem uma assinatura digital e não podem ser instalados sem ela.

  1. Na caixa de diálogo Criar pacote AIR, clique no botão Definir ao lado da opção Assinatura digital.

  2. Na caixa de diálogo Assinatura digital, siga um destes procedimentos:

    • Para assinar um aplicativo com um certificado digital pré-adquirido, clique no botão Procurar, selecione o certificado, insira a senha correspondente e clique em OK.

    • Para criar o seu próprio certificado digital autoassinado, clique no botão Criar e preencha a caixa de diálogo. A opção de tipo de chave de certificado refere-se ao nível de segurança desse certificado: 1024-RSA usa uma chave de 1024 bits (menos segura) e 2048-RSA usa uma chave de 2048 bits (mais segura). Quando terminar, clique em Criar. Em seguida, insira a senha correspondente na caixa de diálogo Assinatura digital e clique em OK.

      Observação:  É necessário que o Java® Runtime Environment (JRE) esteja instalado em seu computador.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online