Adobe Digital Publishing Suite by dualpixel

Produção deconteúdo para iPad treinamento >> treinamento

CAPÍTULO 1 - VISÃO GERALPLATAFORMA DE PUBLICAÇÃO DIGITAL(ADOBE DIGITAL PUBLISHING SUITE)Através da Digital Publishing Suite (DPS) designers que produzem material impresso,como revistas, livros, anuários, etc com InDesign CS5 e CS5.5 podem tornar esse con-teúdo acessível via dispositivos moveis - Tablets. Atualmente é possível publicar paraiPad; Playbook (RIM) e Android Tablets.Recursos de interatividade podem ser adicionados ao documento possibilitando aos lei-tores uma nova experiência de acesso à informação e entretenimento. Através de toquese gestos imagens são ampliadas, rotacionadas, expandidas; audios e vídeos exibidos,entre outros.O QUE É O DIGITAL PUBLISHING SUITESe você já tem um iPad já deve ter acessado a Apple Store e visto uma infinidade deaplicativos para diversas funcionalidades. Então, criar aplicativos para Tablets não é umanovidade? Certamente não!Hoje em dia, a grande maioria dos aplicativos existente na AppleStore é fruto de horas(senão, dias) de trabalho em programação, basicamente na linguagem Objective-C.O que a Adobe oferece através desta plataforma de publicação é eliminar a etapa deprogramação. Você envia o conteúdo da revista ou outro tipo de publicação e a Adobelhe entrega esse mesmo conteúdo dentro de um App, pronto para distribuição não sóna Apple Store, como também, na Android Market e App World (RIM).O sistema DPS não é um software e nem um plug-in. Trata-se de um serviço, nos moldesdo Cloud Computing, comercializado por assinatura.INSTALAÇÃO DO DIGITAL PUBLISHING SUITEUsuários de InDesign CS5 e CS5.5 precisam instalar o conjunto Folio Producer para teracesso as ferramentas de criação do formato Folio. Sim, é possível trabalhar com InDe-sign CS5 e produzir todos os recursos de interatividade disponíveis para iPad.Folio ProducerApós instalação desse pacote dois novos painéis ficamdisponíveis no InDesign. Acesse Menu > Window >Extensions.◾◾ Overlay Creator - painel responsável pela con- figuração e controle dos principais recursos de interatividade disponíveis na plataforma. www.dualpixel.com.br | felipesantos@dualpixel.com.br 5

◾◾ Folio Builder - central de criação, edição e atua- lização dos arquivos Folios. A partir deste painel é realizado todo gerenciamento da publicação, no InDesign.A seguir informo os links para download do FolioProducer:Windows - http://www.adobe.com/support/downloads/product.jsp?product=172&platform=WindowsMAC OS - http://www.adobe.com/support/downloads/product.jsp?product=172&platform=MacintoshO QUE É O FORMATO FOLIOEste formato reune a publicação criada no InDesign, com todos os recursos de interati-vidade. Arrisco uma comparação com o formato PDF, no sentido que ambos são empa-cotadores. A diferença é que o Folio não possui o suporte de um “Acrobat Reader”, quepermitisse a distribuição de Folios fora das AppStores.VISÃO GERAL DO FLUXO DE TRABALHO Folio ID CS5 Overlay Creator Elementos Edição dos Organização Arquivo Interativos no ID Metadados das Seções FOLIO Videos, Audios, etc Layout Layout Horizontal Vertical Upload do App Adobe cria Envio do Arquivo Teste no Upload para AppleStore o Aplicativo Folio para Adobe iPad para iTunesobservações:6 Curso de Produção de Conteúdo para iPad

DECISÕES DE DESIGNOrientação — Vertical, Horizontal, or Both?É possível criar publicações com orientação simples, ou seja, só vertical ou horizontal,bem como com as duas opções (mais utilizada atualmente). Contudo não é possívelmesclar os tipos de orientação das páginas. Por exemplo, não pode haver uma seçãosó na vertical e a capa com dupla orientação. Layouts com orientação simples não sãoajustados quando o leitor muda a posição do iPad. Apenas a exibição de vídeos em telacheia se ajusta entre as posições vertical e horizontal.Muito se comenta que a orientação ideal para revista seja a vertical (portrait), pelo há-bito natural da leitura, outros defendem que para leitura em tela o ideal seja layouts nahorizontal. Acredito que não há certo ou errado nesta questão. A verdade é que produzirpublicações com dupla orientação é bem mais trabalhoso e, se num futuro próximo, vocêquiser disponibilizar sua publicação para outros Tablets comece a pensar em produzirlayouts na vertical e horizontal para diferentes formatos de dispositivos, como: 1024×768(iPad), 1280×800 (Galaxy Tab; Xoom), entre outros.Uma saída mais criativa é criar publicações com dupla orientação, onde cada página(vertical e horizontal) traga conteúdos distintos ou complementares. Veja algumas ideias:A página horizontal pode ser dedicada a informações mais visuais (video, slideshow),enquanto a versão vertical possua mais informação textual.Para um manual tipo passo-a-passo, a página vertical pode trazer as instruções para atarefa, já na página horizontal aparecem fotos com antes e depois. Muitas revistas dia-gramam duas versões de cada matéria, uma dica é incluir fotos diferentes do mesmotema em cada layout para se valer do dinamismo da leitura. www.dualpixel.com.br | felipesantos@dualpixel.com.br 7

CAPÍTULO 2 - NO INDESIGNCRIANDO DOCUMENTOS NO INDESIGN PARA PUBLICAÇÃO NO IPADAtravés da Plataforma de Publicação Digital da Adobe (DPS) é possível criar documentospara dispositivos móveis como o iPad. Você pode criar um layout com duas orientações(vertical e horizontal) para atender os recursos de exibição do iPad ou layouts com ape-nas uma única apresentação (vertical OU horizontal).Neste caso a publicação terá sempre a mesma visualização seja qual for a posição do iPad »» Importante: Não é possível ter no mesmo documento páginas com dupla orientação (vertical e horizontal) e outras com orientação simples (só vertical, por exemplo)Por padrão a leitura do documento é realizada no sentido vertical entre páginas de umamesma seção e no sentido horizontal para mover-se entre as diferentes seções do do-cumento.observações:8 Curso de Produção de Conteúdo para iPad

BOAS PRÁTICAS PARA CRIAÇÃO DO DOCUMENTO NO INDESIGN◾◾ Desabilite a opção facing pages.◾◾ Use pixel como unidade de medida. Quando possível crie um novo documento orien- tado para web. Escolha essa opção no campo Intent na janela New Document.◾◾ Evite trabalhar com imagens de alta resolução (300 dpi). Para as imagens utilizadas nos recursos interativos (Slideshows; Panaromas; 3600, etc) ajuste, previamente, o tamanho, resolução (72 dpi) e formato (JPEG ou PNG). As imagens utilizadas via Overlay Creator não são convertidas ou otimizadas quanto ao formato e resolução. Para obter os melhores resultados ajuste suas imagens antes.◾◾ Para imagens SEM recursos de interatividade é possível utilizar qualquer formato (PSD; TIFF; AI; EPS). Quando carregado no Folio Builder as imagens contidas no documento, sem interatividade, são convertidas para JPEG, PNG ou PDF e tem suas resoluções otimizadas.◾◾ Quando alterar a orientação do documento de vertical para horizontal (ou vice versa), considere o uso das linhas guias delimitando os objetos, em conjunto com a função Layout Adjustment, encontrada no menu Layout para o melhor resultado. »» Veja mais detalhes deste item no Anexo 1 - Convertendo layouts de Retrato para Paisagem◾◾ Utilize o InCopy para compartilhar o texto entre os documentos em modo retrato e paisagem. »» Veja mais detalhes deste item no Anexo 2 - Um conteúdo para dois layouts◾◾ De preferência as modo de cor RGB, ao invés de CMYK ou Lab.◾◾ Evite deixar elementos interativos “sangrando” na página, ou seja, além dos limites da página.◾◾ Utilize a página mestra para manter os elementos de layout padronizados em todo o documento.◾◾ Utilize o recurso do painel Book para centralizar as configurações dos estilos, amostras de cores, entre outros itens de todas as seções da publicação.◾◾ Para criar as seções de páginas utilize o recurso Move Pages da Paleta Pages. Assim você pode extrair uma sequencia de páginas de um documento para outro.CRIAÇÃO DO DOCUMENTO NOS MODOS RETRATO E PAISAGEMSe você está utilizando um documento configurado para midia impressa como base paraconstrução do seu conteúdo digital no iPad, possivelmente criar um novo documentoorientado para WEB seja a opção mais adequada, porém não muito prática. Por isso sigaas alterações abaixo para reconfigurar seu documento de PRINT para WEB. www.dualpixel.com.br | felipesantos@dualpixel.com.br 9

◾◾ Não use a opção Facing Pages - deixe apenas uma página por Spread◾◾ Clique com butão direto do mouse onde as duas réguas se encontram, na parte superior esquerda e escolha pixels como unidade de medida◾◾ Em Page Size especifique o formato da página conforme o dispositivo de leitura. Em nosso caso será o iPad que possui 1024 x 768 pixels de tela.◾◾ Escolha Menu Edit > Transparency Blend Space > RGB.◾◾ Para orientação escolha Portrait (retrato) ou Landscape (paisagem)◾◾ Siga os mesmos passos para criar o segundo documento. Quando salvar os arquivos não esqueça de incluir os sufixos _v para a versão vertical (portrait) e _h para versão horizontal (landscape), como por exemplo secao1_v.inddORDENANDO CORRETAMENTE AS PASTASO modulo Folio Builder utiliza da estrutura das pastas e do padrão de nomeação dosarquivos para determinar o que será incluído no arquivo .folio. É importante seguir opadrão da estrutura de pastas para evitar erros no modulo Folio Builder.Quando você carregar os arquivos de seu projeto dentro do Folio Builder estes precisamestar dentro de uma única pasta principal – Projeto, por exemplo. A pasta Projeto deveráobservações:10 Curso de Produção de Conteúdo para iPad

contar subpastas referentes a cada seção ou capítulo de seu documento. Por sua vez,para ser incluída no Folio Builder cada subpasta deverá conter um ou dois arquivos doInDesign (conforme a escolha do layout do documento - com orientação simples ou dupla(vertical e horizontal). Cada arquivo do InDesign pode conter várias páginas destinadaspara matéria ou anúncios.Dentro de cada subpasta deverá conter também um arquivo PNG (por exemplo, tocpre-view.png), que será utilizado como miniatura no Sumário gerado automaticamente peloFolio Builder. Se determinada subpasta não tiver o arquivo PNG, a miniatura será geradacom base na primeira página do arquivo do InDesign.Configuração do arquivo PNG: 70x70 pixels; sem transparência. »» Importante: A primeira página da primeira subpasta será utilizada como capa do arquivo .folioPAINEL OVERLAY CREATORInDesign utiliza o painel Overlay Creator para editar elementos interativos. Alguns recur-sos interativos como 360 viewers e Panoramas precisam de uma pasta de origem ondeestejam TODAS as imagens que farão parte do objeto interativo. Não delete esta pastade imagem, pois o Folio Builder irá utiliza-la para produzir o arquivo .folio. Caso mova apasta de lugar, atualize seu caminho no painel Overlay Creator. www.dualpixel.com.br | felipesantos@dualpixel.com.br 11

PASTASVocê pode organizar a estrutura de pastas de diferentes formas. Os arquivos de InDe-sign e as imagens, vídeos e audio inseridos no layout não precisam estar na mesmasubpasta — estes arquivos podem estar em qualquer diretório onde o InDesign consigamanter o link com eles.De qualquer forma é recomendável manter todos os arquivos agregados sob a mesmasubpasta, desta forma você melhora a organização do projeto e facilita a localizaçãodos mesmos.Para melhores resultados sempre utilize nomes SIMPLES para PASTAS E ARQUIVOS deINDD. Não use caracteres especiais, acentos ou espaço para nomear esses itens.PACOTEPara reunir todos os arquivos utilizados no projeto utilize o comando File > Package.Desta forma o InDesign exporta o próprio arquivo, todos os vínculos e as fontes utiliza-das numa mesma pasta.Verifique antes de usar este comando se não há vínculos ausentes ou modificados.CRIANDO DOCUMENTOS EM HTML PARA PUBLICAÇÃO NO IPADHá três maneiras de se aproveitar as vantagens do HTML na Plataforma Adobe para iPadLinks para sites. Através dos recursos de Hyperlinks ou Butões.Web View Overlay. Elemento interativo que exibe um site ou uma página HTML localdentro de uma área de trabalho.Arquivos em HTML. Ao invés de produzir arquivos de InDesign é possível utilizarsubpastas com arquivos em HTMLBOAS PRÁTICAS PARA A CRIAÇÃO DE UM DOCUMENTO EM HTMLArquivos em HTML atendem as orientações vertical e horizontal do iPad. Contudo, vocêpode criar arquivos individuais para cada orientação, para isso adicione os sufixos _v ou_h no final do nome do arquivo HTML, tal como capa_v.htmlobservações:12 Curso de Produção de Conteúdo para iPad

◾◾ O nome do arquivo não precisa ser index.html◾◾ Semelhante a estrutura com arquivos de InDesign, cada subpasta com arquivos em HTML deve conter um arquivo PNG para compor o sumário.◾◾ Configuração do arquivo PNG: 70x70 pixels; sem transparência.◾◾ Dynamic HTML (DHTML) não são suportados.A estrutura de pastas permite que cada elemento (imagens, scripts, CSS) associado como arquivo HTML esteja em uma pasta nomeada como HTMLResources e localizada nomesmo nível das demais pastas (seções) que formam o projeto. Outra opção é mantertodos os arquivos associados (imagens, scripts, CSS) na mesma pasta do arquivo HTMLPara permitir que o conteúdo se ajuste com diferentes tipos de dispositivos móveis comdiferentes resoluções de tela, adicione a declaração <meta> a seguir no arquivo HTML.<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>Utilize caminhos relativos no código HTML. Se você está linkando uma imagem no mesmonível do arquivo HTML, use conforme abaixo:<img src=”GlobalImage.jpg”/>Agora, se você está utilizando uma pasta como origem para as imagens declare destamaneira<img src=”../HTMLResources/image/GlobalImage.jpg”/>CRIANDO MINIATURAS PARA ARQUIVOS HTMLPara arquivos de InDesign o modulo Folio Builder cria automaticamente as miniaturas decada matéria, que são exibidas junto com os metadados. Com arquivos HTML este pro-cesso nem sempre gera os melhores resultados e dura mais tempo quando comparadocom arquivos em InDesign. Assim temos duas opções para construir essas miniaturascom arquivos em HTML.Deixe o modulo Folio Builder criar a miniatura com base na primeira página de cadaarquivo HTML, marcado a opção “Include scrubbers for HTML stacks”, no PainelFolio Builder. www.dualpixel.com.br | felipesantos@dualpixel.com.br 13

Crie suas próprias imagens para compor essas miniaturas. Salve arquivos em PNG comos nomes de “scrubberthumbnail_h.png” e “scrubberthumbnail_v.png”. Nãohá um limite de tamanho, contudo essas imagens serão ajustas no formato 221 x 166pixels (horizontal) e 125 x 166 (vertical). Assim sendo, para obter o melhor resultadosalve as miniaturas nestas dimensões.observações:14 Curso de Produção de Conteúdo para iPad

CAPÍTULO 3 - ELEMENTOS INTERATIVOSCRIANDO ELEMENTOS INTERATIVOSUtilize o Painel Overlay Creator (Window > Extensions > Overlay Creator) para criar eeditar elementos interativos. Há basicamente duas maneiras de criar um elemento in-terativo.Para Slideshows, hyperlinks, audio, video, image pans and scrollable content (conteúdorolável) crie ou importe os arquivos no documento do InDesign e ajustes as configuraçõesde cada recurso via Overlay CreatorPara 360 viewers, panoramas e web views desenhe um objeto (frame) retangular e im-porte uma imagem que será exibida como poster. Então especifique no painel OverlayCreator a origem das imagens que farão parte do recurso interativo e ajuste suas opçõesde configuração.Outra característica importante do Overlay Creator é que todo elemento que recebe al-gum recurso desta paleta será sempre exibido no topo da pilha de elementos do layout.RECURSOS INTERATIVOS COMPATÍVEIS COM DPSAtente que nem todos os recurso de interatividade do InDesign CS5 são suportados pelaplataforma de publicação digital (DPS). A seguir lista dos itens compatíveis:◾◾ Multi-State Objets (MSO): usado para criar slideshows◾◾ Hyperlinks: para URL; email; Páginas e Navto hyperlinks◾◾ Buttons: apenas o evento Release com 1 única ação agregada◾◾ Ações compatíveis: Go to destination; Go to first page; Go to last page; Go to URL; Go to page; Go to State; Go to previous and Go to next state.◾◾ Audio - use arquivos MP3. Não é possível realizar loop ou stream com arquivos de audio.◾◾ Video - use arquivos mp4; m4v na codificação h264 (HTML5) www.dualpixel.com.br | felipesantos@dualpixel.com.br 15

◾◾ Outros recursos disponíveis via Painel Overlay Creator: 360 viewers; web views; pan/ zoom; panoramas e scrollable frames.RECURSOS INTERATIVOS NÃO COMPATÍVEIS COM DPS◾◾ Animações - animações são rasterizadas pelo Folio Builder◾◾ Alguns Hyperlinks - Text Anchor e Shared Destination Hyperlinks◾◾ Algumas ações de butão - Go To Next Page, Go To Previous Page, Show/Hide Buttons, Butões de Controle de Som e Video. Ações múltiplas não são suportadas. Eventos do “mouse” On Click e On Rollover também não são suportados.◾◾ Outros recursos NÃO compatíveis: bookmarks; cross-reference e page transitions.BOAS PRÁTICAS NA CRIAÇÃO DE ELEMENTOS INTERATIVOS◾◾ Para criar elementos interativos escolha o espaço de trabalho Interactive, em Windows > Workspace > Interactive e tenha acesso aos painéis e recursos mais facilmente.◾◾ Para os recursos tipo Panaronas, 360 view e Web View crie pastas separadas para cada recurso com imagens já devidamente ajustas para 72dpi, formato JPEG ou PNG.◾◾ Para otimizar o tamanho do arquivo final crie essas imagens com as dimensões finais para exibição no iPad◾◾ No Photoshop e Illustrator utilize o recurso de salvar para web, em File > Save for Web & Devices para otimizar imagens.◾◾ O modulo Folio Builder não otimiza (aplica compressão) em imagens utilizadas pelo Painel Overlay Creator. Para reduzir o tamanho das imagens utilize o formato JPEG com qualidade médio (50 - 80%) ao invés do formato PNG◾◾ Para imagens com textos em tamanhos grandes (acima de 18 pt) use JPEG medio ou PNG. Para imagens com textos menores que 18 pt utilize o formato PNG◾◾ Dispositivos moveis como o iPad ainda tem limitações de memória. Páginas sequen- ciais com recursos interativos podem causar problemas como a exibição de um telaobservações:16 Curso de Produção de Conteúdo para iPad

cinza, devido a falta de recursos para exibir o conteúdo. Por precaução escolha bem os tipos e quantidades de recursos interativos inseridos no projeto, e sempre que possível alterne páginas com e interatividade com páginas sem conteúdo interativo.I- HYPERLINKSHyperlinks é um dos recurso mais úteis e simples de se trabalhar no InDesign. No InDe-sign use o Painel Hyperlinks para criar links para web; diferentes documentos (matérias);diferentes páginas no mesmo documento ou em outros. Siga as etapas:1 - Selecione um frame ou texto que você deseja utilizar como hyperlink2 - Abra o Painel Hyperlink (Window > Interactive > Hyperlinks).3 - No Painel Hyperlink escolha New Hyperlink no Menu do Painel4 - Na opção Link To, especifique uma das opções a seguir e clique em OK. O PainelOverlay Creator trabalha com as opções de link: URL; Email; File e Page.Não utilize as opções Text Anchor e Shared Destination.URLNa opção URL é possível criar links para web (http://), para um aplicativo na Apple Store(itms://) ou para diferentes documentos (navto://).Quando criar links para web sempre declare o endereço completo, por exemplo: http://www.adobe.com. Para links direcionados a Apple Store utilizando o comenado itms://,neste caso desabilite a opção “View in Context”, senão um aviso “Cannot OpenPage” será exibido quando o usuário tocar o link. O mesmo vale para links direcionadosà iTunes. www.dualpixel.com.br | felipesantos@dualpixel.com.br 17

Utilizando a opção navto:// é possível criar links para diferentes documentos ou páginasem diferentes documentos. Digite navto:// seguindo do nome da seção (Article Name).Se você deseja linkar uma página em específico, adicione o sinal # seguido do numeroda página.Para o InDesign a primeira página é considerada 0, assim digite #2, para linkar a página3, por exemplo: navto://nome_da_secao ou navto://nome_da_secao#2 (abre a página 3)EMAILDigite um email para abrir o aplicativo de email padrãoFILEPermite criar links para diferentes documentos dentro da pasta do projeto. Para ar-quivos contidos em outras pastas Prefira a opção Navto://PAGEPermite criar links para diferentes páginas dentro do documento ou dentro de outrosdocumentos dentro da pasta do projeto. Para arquivos contidos em outras pastas Prefiraa opção Navto://observações:18 Curso de Produção de Conteúdo para iPad

CONFIGURANDO OS HYPERLINKS NO PAINEL OVERLAY CREATORSelecione o hyperlink (ferramenta de Seta) e acesse o Painel Overlay Creator, em Window> Extensions > Overlay Creator.◾◾ Require Confirmation For External Links - Exibe uma tela de confirmação. Esta opção fica desabilitada quando a opção View In Context está marcada.◾◾ View In Context - Determina que o hyperlink será exibido dentro do Aplicativo ou diretamente no browser (Safari). Não utilize esta opção quando criar links para Apple Store (itms://) e iTunesNOTA: estas opções não estão disponíveis para hyperlinks de texto. Estetipo de link é configurado como View In Context, como padrão.HYPERLINKS A PARTIR DE BUTÕESCrie um objeto que será utilizado como butão. Por exemplo, você deseja que o butãotenha um link pro site de seu cliente. Vá na Paleta Buttons (Window > Interactive >Buttons) selecione o objeto e clique em Convert Object To Button. Marcado emvermelho abaixo. www.dualpixel.com.br | felipesantos@dualpixel.com.br 19

◾◾ Para a opção Event escolha Release. Alias, este é o único evento válido para o iPad.◾◾ Para Action escolha entre as ações suportadas. Em destaque na imagem acima.◾◾ Em azul ações suportadas para hyperlinks; em amarelo ações para Slideshow (Multi State Objects). Entre as opções disponíveis para navegação Go To Destination é util para criar Sumários e links entre seções. Crie um link de destino com a opção Page (não use Text Anchor) e faça um link entre uma chamada e o conteúdo da revista. Butões só podem ter um tipo ação habilitada por vez.LINK PARA PÁGINASDentre os métodos possíveis para se construir esse link, a opção PAGE é a mais funcio-nal. Quando criar um hyperlink escolha a opção PAGE no campoLink to e especifique odocumento e numero da página que será o destino do link.Quando quiser links para outro documento, primeiro abra o documento de destino e crieum hyperlink destination na página que você pretende destinar o link. Então configureum butão com a ação Go To Destination e especifique o destino previamente criado.NAVTOOutra opção possível está no recurso NAVTO. Quando criar um hyperlink ou butão (coma ação Go To URL) você pode trocar no campo URL de “http://” por “navto://”. Entãoespecifique um documento (e página) que você queira fazer o link. Alguns exemplos denavto link:navto://nome_seçãonavto://novidadesnavto://novidades#2 (link para a página 3)navto://novidades#3 (link para a página 4)Para o InDesign a primeira página é considerada 0, assim digite #2, para linkas a página 3,por exmplo: navto://nome_da_seção ou navto://nome_da_seção#2 (abre a página 3)observações:20 Curso de Produção de Conteúdo para iPad

Criando NAVTO hyperlink em documentos HTMLEm documentos HTML a opção navto torna-se ainda mais importante. Neste tipo de do-cumento a opção “navto://” é o principal caminho para se criar links.Crie links para um arquivos HTML: navto://nome_da_seção.A partir de um documento do InDesign crie um link para um arquivo HTML indicando onome da seção (e não o titulo da seção) que contém o arquivo HTML.Crie um link para um âncora do HTMLNão é possível criar um link para um página específica em HTML, mas é você pode linkarpara uma referência de âncora - navto://nome_do_folder#part4Atenção: para definir uma âncora no arquivo HTML, marque na parte do texto que desejecriar a âncora e insira as tags de âncora ao lado do texto, veja: “<a name=”part4”>Estaé a parte 4 do arquivo</a>.”Crie um link para arquivos do InDesignVocê também pode criar um link para um arquivo de InDesign a partir de um arquivoHTML.Veja um exemplo: <a href=”navto://nome_da_seção”>Link para ID documento</a>Indique para qual página deseja fazer link, adicionando a informação da página após onome do documento: <a href=”navto://nome_da_seção#3”>Link para ID documento</a>II - SLIDESHOWAtravés do comando de Objects States é possível criar um conjunto de imagens paraexibição tipo Slideshow. Se você exibir diferentes informações de texto e imagens emcada slideshow, agrupe-os antes num mesmo State. Ainda não é possível exibir slidsho-ws em modo full-screen.◾◾ No InDesign acessa a paleta, Object States (Window > Interactive > Object States) para criar o slide show. www.dualpixel.com.br | felipesantos@dualpixel.com.br 21

◾◾ Importe e prepare as imagens que deseja incluir no slideshow. Alinhe uma sobre a outra formando uma pilha◾◾ Na paleta Object States defina um nome para o slideshow »» Nota: Para manter a continuidade da exibiação entre os layouts vertical e horizontal mantenha o mesmo nome do slideshow am ambos os documentos. »» Atenção: Evite o uso de nomes com pontuação ou muito longos para evitar erros futuros◾◾ Crie butões para navegar entre as imagens do Slideshow. Use na paleta Buttons, a opção Action com Go To State para exibir um slide em específico. Marque Go To Next State a Go To Previous State para navegar entre as imagens.observações:22 Curso de Produção de Conteúdo para iPad

Se você deseja que a aparência do butão mude quando o usuário clicar no botão, marquena paleta Buttons a opção [Click] e mude a aparência.Para controlar a exibição do slideshow utilize o Painel Overlay Creator, seguindo as op-ções abaixo: »» Play On Page Load - incia o slideshow quando a pagina carrega. »» Delay - com a opção Play On Page Load ativa, este campo especifica o tempo de inicio do slideshow. »» Advance Every - Com a opção Play On Page ou Tap to play/pause ativas este campo determina o tempo entre cada transição do slideshow. www.dualpixel.com.br | felipesantos@dualpixel.com.br 23

»» Play_Time - Com a opção Play On Page ou Tap to play/pause ativas neste campo você determina quantas vezes o slideshow irá passar. »» Loop - Habilita o slideshow repetir em sequência até o usuário mudar de página. »» Tap to play/pause - Esta opção habilita o usuário, através do clique (tap), a dar inicio ou término ao slideshow. »» Stop at First/Last State - determina se o slideshow irá terminar na útima imagem. Se ficar desmarcado o slideshow passará em looping. »» Swipe to Change State - permite ao usuário passar as imagens com o toque dos dedos. »» Cross-fade - Aceita valores de 0.125 a 60 segundos. Trata-se da suavidade na transição entre as imagens. O tempo padrão é 0.5 segundo. »» Hidden Until Triggered - Quando marcado, o slideshow fica oculto até que usuário clique num botão para exibi-lo. »» Reverse Image Order - Exibe o slideshow na ordem inversa.III - IMAGE SEQUENCE OVERLAYImage Sequence é um recurso que permite exibir um objeto em seus 360 graus. Maseste recurso vai além disto, na verdade, exibe qualquer sequência de imagens. Vocêpode com criatividade e um pouco de trabalho criar pequenas animações e montagens.◾◾ Use imagens já otimizadas no tamanho e resolução que deseja exibir no Tablets. Por exemplo, 500 x 400 pixel com 72 ppi.◾◾ Trabalhe com os formatos JPG, compressão média, e PNG. Este último só se deseja manter a transparência no efeito.◾◾ Para rotações de 3600 suaves utilize o mínimo de 30 sequências para criar o efeito.observações:24 Curso de Produção de Conteúdo para iPad

◾◾ É fundamental que todas as imagens estejam na mesma pasta e com o mesmo nome raiz, alterando só sufixo, com um sequência numérica. Tipo, imagem001.jpg; ima- gem002.jpg;etc »» Nota: É possível obter imagens em 3D a partir de diferentes formas, como: Exportar uma sequência de imagens de um modelo 3D no Photoshop Extended; do Flash Professional; After Effects ou apartir de algum software 3D, como Sketch Up, Light Wave, entre outros.Para aplicar este recurso em seu documentos siga as opções abaixo:◾◾ Crie um retângulo na página◾◾ Acesse o Painel Overlay Creator (Window > Extensions > Overlay Creator) e marque a opção 360 Viewer.◾◾ No Painel clique no ícone da pasta, então localize o diretório onde estão as imagens em sequência e clique Open. A primeira imagem da sequência é exibida no layout.◾◾ Se preferir exibir uma imagem de poster, diferente do da primeira imagem da sequência, utilize o comando File > Place para inserir uma imagem como Poster. Mantenha as mesmas dimensões definidas para o efeito. No iPad o usuário acessa o 360 Viewer com um clique sobre o poster. Um duplo clique exibe a imagem de poster novamente.◾◾ Para ajustar a aparência do efeito altere os valores no Overlay Creator »» Show First Image Initially - Essa opção exibe a primeira imagem como poster. »» Play On Page Load - incia o 360 quando a pagina carrega. »» Delay - com a opção Play On Page Load ativa, este campo especifica o tempo de inicio do 360. »» Speed - Altere a velocidade de progressão das imagens. Mínimo valor é 1 frame por segundo e o máximo 30 frames. »» Play_Time - Com a opção Play On Page ou Tap to play/pause ativas neste campo você determina quantas vezes o 360 irá passar. »» Loop - Habilita o 360 a repetir em sequência até o usuário mudar de página. »» Tap to play/pause - Esta opção habilita o usuário, através do clique (tap), começar e terminar a exibição do 360. Um duplo clique exibe a imagem de poster novamente. »» Allow Swipe - permite ao usuário passar as imagens com o toque dos dedos. www.dualpixel.com.br | felipesantos@dualpixel.com.br 25

»» Stop at First/Last State - determina se o 360 irá terminar na última imagem. Se ficar desmarcado o 360 passará em looping. »» Reverse Image Order - Exibe o 360 na ordem inversa.IV - PANORAMAO panorama overlay permite ao leitor a ilusão de estar num ambiente, no qual ele tema visão panorâmica do local. O segredo deste recurso é possuir as imagens necessáriaspara exibir o efeito. O Painel Overlay Creator precisa de 6 imagens, que representam as6 faces de um cubo. Imagens originais e Imagens já convertidas para o padrão de 6 faces do cubo Panorama no iPadobservações:26 Curso de Produção de Conteúdo para iPad

»» Nota: para converter suas imagens panorâmicas no padrão de 6 faces do cubo, utilize o programa - Pano2vr em http://gardengnomesoftware.com/pano2vr_download.phpCom suas imagens já preparadas siga os passos a seguir:◾◾ Use imagens já otimizadas no tamanho e resolução que deseja exibir no Tablets. Por exemplo, 500 x 400 pixel com 72 ppi (ou maior).◾◾ Este recurso permite que o usuário dê Zoom na imagem, por isso recomendo resolu- ções maiores, como 150 ou 200 ppi.◾◾ Trabalhe com os formatos JPG, compressão média,◾◾ É fundamental que todas as imagens estejam na mesma pasta e com o mesmo nome raiz, alterando só sufixo, com um sequência numérica. Tipo, imagem001.jpg; imagem002.jpg;etc◾◾ No Painel clique no ícone da pasta, então localize o diretório onde estão as imagens no padrão de 6 faces e clique Open. A primeira imagem da sequência é exibida no layout.◾◾ Se preferir exibir uma imagem de poster, diferente do da primeira imagem da sequência, utilize o comando File > Place para inserir uma imagem como Poster. Mantenha as mesmas dimensões definidas para o efeito. No iPad o usuário acessa o Panorama Overlay com um clique sobre o poster.◾◾ Para ajustar a aparência do efeito altere os valores no Overlay Creator »» Use Primeira imagem como a vista inicial - Selecionar esta opção usa a primeira imagem como poster. »» Tela inicial - Para Zoom, especificar um valor de 1 a 100. »» Limite para Zoom - Se você não deseja que os usuários ampliar ou reduzir de um certo ponto, especificar os valores mínimo e máximo de 10 a 90. »» Limite Pan Vertical - Se você deseja permitir inclinação de apenas dois terços em direção ao topo, especifique -60. Especifique 60 para permitir a inclinação apenas dois terços para o fundo. O valor limite é de -90 e 90 para esse campo. »» Limite Pan Horizontal - Especifique entre -180 e 180 para visulizar todo área lateral da imagem.V - PAN E ZOOMEste recurso permite usar grandes imagens através de áreas menores, onde o usário podemover (pan) e dar zoom nas imagens. Para o melhor resultado deste recurso siga as instru-ções abaixo: www.dualpixel.com.br | felipesantos@dualpixel.com.br 27

◾◾ Atualmente, apenas áreas retangulares são possíveis.◾◾ Use imagens no formato JPG e PNG (sem transparência).◾◾ Para melhores resultados evite imagens maiores de 1024 por 1024 pixels com 72 ppi. Imagens maiores podem causar problemas de memória. O valor máximo aceitável de largura ou altura é 2000 pixels com 72 ppi.◾◾ Este recurso não suporta transparência.◾◾ Para aplicar o Pan e Zoom insira uma imagem e ajuste sua caixa da imagem sem alterar o tamanho da mesma. O tamanho da caixa define a área de visualização. Certifique-se que a caixa é menor que a imagem.◾◾ Para mudar o zoom inicial, selecione a imagem, com a Direction Selection Tool e altere seu tamanho.◾◾ Você pode reduzir o tamanho da imagem. O valor máximo de aumento do recurso é 100%◾◾ Por fim, selecione o frame da imagem, acesse o Painel Overlay Creator e marque a opção Pan & Zoom.◾◾ Nota: A opção Pan Only é útil para mascarar imagens que você deseja mover apenas na horizontal ou vertical. Quando esta opção está marcada o canto superior esquerdo da imagem precisa estar visível no canto superior esquerdo do frame.VI - SCROLLABLE FRAMEScrollable frame (numa melhor tradução caixa/conteúdo deslizante) permite exibir tex-to e imagem através de uma máscara. Muito útil para exibir uma maior quantidade deinformação sem sobrecarregar o layout com informações.Agora leitores não precisam virar a página para continuar numa matéria, basta mover otexto pra cima e dar sequência na leitura. A seguir dicas de como obter o máximo desterecurso.observações:28 Curso de Produção de Conteúdo para iPad

◾◾ Atualmente este efeito se ajusta no canto superior esquerdo do frame, como ponto inicial.◾◾ Primeiro crie um novo Layer como o nome Scrollable Content. Este nome é case-sensitive, então digite exatamente como acima. Este layer deverá ficar sobre os demais layers◾◾ Crie dois frames. Um será o conteúdo e ficará no Scrollable Content. O segundo será a máscara e ficará no layer padrão.◾◾ Tenha cuidados de manter a larura destes frames sempre as mesmas para efeitos de scroll na vertical.◾◾ Para exibir elementos de texto, imagem pela máscara, agrupe todos esses elementos e nova-os para a camada Scrollable Content.◾◾ O nome do frame (ou grupo) no Scrollable Content deve ser o mesmo nome que o frame da máscara, na camada padrão. »» Nota: O frame de conteúdo é transparente por padrão, caso deseja ocultar alguma informação da camada padrão, preencha o frame na camada Scrollable Content. »» Atenção: Para copiar este conjunto de um documento para outro. Marque a opção Paste Remenber Layers no submenu do Painel Layers. Desta forma a camada Scrollable Content será criada automaticamente no segundo documento. www.dualpixel.com.br | felipesantos@dualpixel.com.br 29

VII - AUDIO & VIDEOAUDIOSão aceitos somente arquivos MP3 para audio. Atualmente stream de audio não sãosuportados. Insira via comando Place o arquivo MP3 diretamente na páginaCom o frame de audio marcado acesse o Painel Overlay Creator e defina as seguintesconfigurações. »» Assests / Controller Files - para exibir uma sequência de imagens enquanto o audio toca. »» Play On Page Load - inicia o Audio quando a pagina carrega. »» Nota: Não são aceitos controles de audio via Button/Actionobservações:30 Curso de Produção de Conteúdo para iPad

VIDEOPara os melhores resultados crie (ou converta) o video para um formato definido, porexemplo, 400 x 300 pixel, com uma imagem de poster na mesma dimensão do video.Para vídeos em tela cheia devem ser otimizado para 1024 de largura. Siga as conside-rações abaixo:◾◾ Use formatos compatíveis com Apple iTunes. MP4, M4V com h.264 codec.◾◾ Atualmente stream de vídeos não são suportados. Para exibir um video via URL utilize o recurso de Web View ou HTML stack (seção).◾◾ Pelo comando Place insira o video direto no documento.◾◾ No painel Media insira a imagem de Poster. Crie uma imagem que identifique o video ao leitor.◾◾ Com o frame de video marcado, configure as opções do Painel Overlay Creator »» Play Inline - Marcada esta opção o video será exibido dentro do frame. Se desmarcada o video toca em full screen »» Show Controller on Tap - Exibe os controles pro usuário. Melhor deixar habilitada. »» Play on Page Load - começa a exibir o video quando a página é carregada. Podemos controlar o tempo para inicio do video. www.dualpixel.com.br | felipesantos@dualpixel.com.br 31

VIII - WEB CONTENT OVERLAYEste recurso permite exibir páginas da web dentro de um frame no InDesign, sem anecessidade de browsers. O usuário irá navegar pelo site através da área do frame. Épossível especificar um URL ou acionar um arquivo HTML local. »» Atenção: quando utilizar arquivo HTML local certifique-se que todos os arquivos (HTML, CSS, javascripts, imagens, etc) estejam na mesma pasta.Se você deseja exibir um site que tenha uma versão mobile, faça o link direto paraa versão mobile (por exemplo, http://mobile.twitter.com) e não para o URL original,http://twitter.com.Para realizar este recurso é fácil, Siga as seguintes etapas:◾◾ Crie um frame vazio. Se desejar importe uma imagem que servirá de poster para a exibição inicial do site.◾◾ Com a frame selecionado, acesse o painel Overlay Creator > Web Content◾◾ Nesta é possível realizar as seguintes configurações:Clique sobre a pasta, na aba Web Content, para especificar um URL local ou digite oendereço de uma site da web. É necessário o endereço completo, com “http://”. »» Auto play - Marque esta opção para exibir o site assim que págima carregar. Você pode especificar um delay (tempo de espera) para começar a exibir o site. »» Transparent Background - Caso queira manter as áreas transparentes do site deixe marcada esta opção. Quando desabilitada a cor de fundo será o preenchimento do frame. »» Allow User Interaction - Permite a interação do usuário no site. Por exemplo, clique em links e navegar por outras páginas. »» Scale Content to Fit - Quando marcada força o site a se ajustar na área definida para exibição na página. Se desmarcada, o site será exibido em seu tamanho original, o que poderá ocosionar cortes em algumas partes do site.observações:32 Curso de Produção de Conteúdo para iPad

www.dualpixel.com.br | felipesantos@dualpixel.com.br 49

www.dualpixel.com.brobservações:50 Curso de Produção de Conteúdo para iPad

http://ressources-numeriques-ldv.blogspot.fr	276
http://ressources-numeriques-ldv.blogspot.com	101
http://evoluodigital.blogspot.com	17
http://www.slideshare.net	6
http://evoluodigital.blogspot.com.br	3
http://ressources-numeriques-ldv.blogspot.ca	1

Adobe Digital Publishing Suite by dualpixel

by dualpixel

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 404

Statistics

Adobe Digital Publishing Suite by dualpixel Document Transcript