Enviado para você por Penha através do Google Reader:
via Pinceladas da Web - Movido a XHTML, CSS e WebStandards de Pedro Rogério em 23/04/08
Se você irá mostrar a um cliente o desenho do site em um papel, sabe o valor de apresentá-lo em uma versão interativa com links. Os usuários do Visio sabem que é muito simples criar protótipos interativos em HTML a partir de um set de Wireframes (Arquivo > Salvar como página Web). Mas dessa forma ocorre uma desvantagem se você precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, serão criados muitos arquivos HTML e várias imagens.
Os PDF's são ideais para serem enviados por e-mail, mas leva-se tempo para criar protótipos interativos em PDF com o Visio. Abaixo você verá um tutorial de como fazer isso:
- 1. Crie links nas páginas de primeiro plano, não nas de segundo plano - utilize os stencils do documento para gerenciar suas modificações.
- É uma pratica habitual quando se cria wireframes no Visio colocar os elementos standard das páginas - topo, conteúdo, navegação - em uma página de fundo (background), assim os elementos se repetem em cada página de primeiro plano (foreground). De qualquer forma, quando publicado em PDF, o Visio não cria links para as camadas de background. Para criar protótipos interativos em PDF eles devem estar na página em primeiro plano. Isso significa que para uma distribuição de página standard, todos os elementos de navegação devem estar em cada página do wireframe. Poderia-se copiar e colar os elementos de navegação em cada página, mas isso seria um trabalho duro. Ao invés disso, utilize os stencils do documento. Funciona assim:
- 1.1 - Crie um painel de navegação, utilizando uma forma distinta para cada link. Por exemplo, para criar 5 abas na parte superior da página, cosntrua cada aba em um bloco de texto separado.
- 1.2 - Para adicionar links, aperte CTRL + K para abrir o quadro de diálogos de links. Depois de adicionar o Sub-link (não o link direto), clique em browse (examinar) e encontre a página que está seu wireframe, ao qual deseja linkar (ou introduza a URL).
- 1.3 - Repita o primeiro e o segundo passo sempre que necessário. Uma vez que estiver pronto o painel de navegação, agrupeo (selecione todos os elementos, e aperte Shift+CTRL+G).
- 1.4 - Abra os Stencils do documento: Arquivo > Formas > Mostrar Stencils do documento.
- 1.5 - Arraste os elementos agrupados de navegação ao painel de Stencils.
- 1.6 - Clique com o botão direito sobre o grupo de elementos e renomeios (por exemplo: "NavBar").
- 1.7 - Em cada página de seu wireframe, arraste oe elementos sobre a página de primeiro plano e os coloque em sua posição.
- 1.8 - Se necessitar fazer modificações no grupo de navegação, clique com o botão direito sobre o Stencil do documento, e selecione Edição Mestre > Edição de forma Mestre. Qualquer modificação feita será atualizada automaticamente em qualquer página.
- 2. Utilize o menu PDF no Visio, ao invés de imprimir através do Adobe PDF no menu de impressão.
- Para que os links do PDF funcionem, utilize o menu PDF no Visio (Adobe PDF > Converter para Adobe PDF). Por alguma razão, se utilizar Arquivo > Imprimir e escolher Adobe PDF como impressora, os links do PDF não funcionam.
- O resultado final será links funcionando em cada página. Para alterar os estados dos botões ou criar outros elementos interativos, é necessário editar os arquivos no Acrobat
- Leve-o ao nível seguinte.
- Esse artigo de Boxes & Arrows é uma fantástica revisão de como criar protótipos em PDF clicáveis com camadas, multimídia e muito mais. Foi centrado no uso avançado das ferramentas de edição do Acrobat
Referências
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - Movido a XHTML, CSS e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
0 comentários:
Postar um comentário