Ano: 2013 2012 2011

Edição: 7 6 5 4 3 2 1

Autores: Ricardo Minoru Horie e Jean Pluvinage

Editora: Bytes & Types Com. e Serv. Ltda.

Edição: 2011 - 1a edição

Revisão técnica: Juliana Midori Horie e Ana Cristina Pedrozo

Projeto gráfico: Ricardo Minoru Horie e Juliana Midori Horie

Diagramação: Ricardo Minoru Horie

Capa: Getulino Pacheco

Conversão: Digital Publish & Print

Copyright © 2011 da Bytes & Types Ltda.

Dados Internacionais de Catalogação na Publicação (CIP)

(Câmara Brasileira do Livro, SP, Brasil)

Horie, Ricardo Minoru, 1971-

Revistas Digitais para iPad e outros tablets – Arte-finalização, Geração e Distribuição /Ricardo Minoru Horie e Jean Pluvinage. - - São Paulo : Bytes & Types, 2011.

Bibliografia.

ISBN: 978-85-60819-45-4

1. Computação gráfica 2. Arquivos - Processamento 3. Artes gráficas 4. Editoração eletrônica 09-1578

CDD-005.74

Sumário para catálogo sistemático:

1. Computação Gráfica: Aplicativos 005.74

Todos os direitos reservados. Proibida a reprodução total ou parcial, por qualquer meio ou processo, por sistemas gráficos, fotográficos, reprográficos, Internet, eBooks. Vedada a memorização e/ou recuperação total ou parcial em qualquer sistema de processamento de dados e a inclusão de qualquer parte da obra em qualquer programa juscibernético. Essas proibições aplicam-se também às características gráficas da obra e à sua editoração. A violação dos direitos autorais é punível como crime (art. 184 e parágrafos, do Código Penal, cf. Lei n. 6.895, de 17.12.80) com pena de prisão e multa, conjuntamente com busca e apreensão e indenizações diversas (artigos 102, 103 parágrafo único, 104, 105, 106 e 107 itens 1, 2 e 3 da Lei n. 9.610, de 19.06.98, Lei dos Direitos Autorais).

Esse material foi produzido de forma criteriosa e cuidadosa. Não obstante, podem ter acontecido erros na diagramação, digitação, produção e impressão. O autor e editora não assumem qualquer responsabilidade por eventuais danos ou perdas a pessoas ou bens, originados do uso ou das informações contidas nessa publicação.

Adobe Acrobat é marca registradas da Adobe Systems Incorporated.

Adobe InDesign e outros produtos citados da Adobe são marcas registradas da Adobe Systems Incorporated.

Todos os demais nomes registrados, marcas registradas ou direitos de uso citados neste livro pertencem aos seus respectivos proprietários.

Críticas, dúvidas e sugestões: livros@bytestypes.com.br

Para conhecer outros títulos da editora:

www.bytestypes.com.br

livros@bytestypes.com.br

Dedicatórias (Ricardo Minoru Horie)

À minha esposa Cibele;

Ao meu filho Pedro;

Aos meus pais Maria Neuza e Massato;

Às minhas irmãs Carolina e Juliana;

E, principalmente, à memória do meu querido irmão Fabio.

Agradecimentos (Ricardo Minoru Horie)

Juliana Midori Horie, pelos projetos gráficos do miolo e da capa, assim como na revisão técnica desse livro.

Ana Cristina Pedrozo, pela leitura crítica e sugestões.

Roberta e Almiro, pelo suporte logístico e por me ajudarem à solucionar várias de minhas dúvidas técnicas.

Ismael Guarneli e Alexandre Keese, pela cessão dos arquivos de edições da revista PhotoPro que serviram de exemplo para ilustrar este livro.

Reconhecimentos (Ricardo Minoru Horie)

Gostaria de reconhecer e agradecer a ajuda que me foi dada, de forma direta ou indireta, pelas milhares de pessoas com as quais tive a oportunidade de manter contato eletrônico, e pelas várias centenas que tive o prazer de conhecer pessoalmente nesses mais de 20 anos de área gráfica e “de estrada” por este País.

Agradeço às pessoas que me ensinaram por meio de cursos e palestras que frequentei, dos livros que li e, sobretudo, às que me fizeram perguntas (que nem sempre consigo responder de imediato), sugestões e críticas (sempre bem-vindas).

Pessoas que me ajudaram a chegar ao patamar de amadurecimento e conhecimento técnico em que me encontro neste momento e, ainda me ajudarão a evoluir mais, pois tenho plena certeza de que há ainda muito a aprender e a ensinar.

Afinal de contas, também é ensinando que se aprende!

Dedicatórias (Jean Pluvinage)

À minha mãe Maria José de Camargo Penteado.

À minha irmã Stéphanie Pluvinage.

Ao meu sobrinho Antonin Pluvinage.

À Arlinda Ivone da Rocha e Gilda Cintra.

Ao meu avô e eterno goleiro do São Paulo, Pedro Octávio de Camargo Penteado.

Agradecimentos (Jean Pluvinage)

Todos os meus colegas da APS Feiras & Eventos pela companhia, amizade, aprendizado, apoio e toda a experiência adquirida com a diagramação da revista Desktop Publishing.

Aos colegas e professores da FCA+D - CEUNSP (Faculdade de Comunicação e Artes - Centro Universitário N. Sra. do Patrocínio) pela amizade e aprendizado do ofício de jornalista.

Todos os meus colegas e professores do SENAC pela amizade e aprendizado do ofício de designer gráfico.

Reconhecimentos (Jean Pluvinage)

Gostaria de reconhecer e agradecer ao apoio da reitoria do CEUNSP e da diretoria da FCA+D, que me ofereceram a oportunidade de diagramar, escrever, fotografar, ilustrar e editar um jornal-laboratório mensal voltado para mais de dez mil estudantes. Uma experiência insubstituível para meu amadurecimento profissional.

Sobre o autor Ricardo Minoru Horie

Atua há mais de 20 anos na indústria gráfica no segmento de pré-impressão com treinamentos e consultorias técnicas para empresas, além de ministrar regularmente seminários, palestras, oficinas e cursos pelo País.

Autor de mais de 50 livros técnicos na área de editoração eletrônica, dentre eles: “Coleção InDesign”, “Acrobat Pro e Pro Extended para uso gráfico”, “PitStop Pro – Análise e edição avançada de PDFs”, “eBooks - Arte-finalização para livros eletrônicos nos formatos ePub e Mobi”, “Dicas, Truques & Macetes – Adobe InDesign”, “Arte-finalização de Arquivos para Artes Gráficas”, “Catálogo de Fontes do Font Folio 9“, “Utilizando o Photoshop” e “Utilizando o InDesign”.

Foi pioneiro como autor de livros eletrônicos para o segmento gráfico no Brasil. É beta tester de vários produtos, tais como, InDesign, Acrobat e PitStop.

Por mais de uma década colaborou com a edição brasileira da revista Publish, tendo atuado como colunista e editor executivo. Desde 2007 passou a compor a equipe de colunistas, palestrantes e consultores da revista Desktop Publishing. Também é membro das comissões de estudos de Pré-Impressão Eletrônica e Impressão Digital da ONS 27/ABTG.

Foi colunista do jornal O Estado de São Paulo e docente do curso superior de tecnologia gráfica do Senai “Theobaldo De Nigris”, considerado e reconhecido internacionalmente como o mais importante centro de aprendizado gráfico na América Latina.

É sócio/diretor junto com André Borges Lopes na Bytes & Types (www.bytestypes.com.br), empresa especializada em consultorias técnicas e treinamentos na área gráfica.

Sobre o autor Jean Pluvinage

Diagramador da revista Desktop Publishing, uma das principais revistas de artes gráficas da América Latina onde colabora com matérias sobre InDesign, QuarkXPress e, principalmente, a criação e diagramação de revistas digitais para visualização em tablets.

Também diagrama a revista ExpoPrint Report, que trata do maior evento gráfico da América Latina.

Ministra o curso do grupo PhotoPro “Criação de revistas interativas para tablets” e foi instrutor no evento InDesign Experience 2010.

Autor de matérias sobre narrativa digital, entre elas: “A arte narrativa na vida digital” e “Próxima partida: Homem X Máquina”, publicadas na revista Continuum do Itaú Cultural.

Foi redator-chefe do jornal-laboratório “O Arauto”, jornal mensal de 30.000 exemplares da FCA+D - CEUNSP, o maior jornal universitário do Brasil.

Aluno-líder na apresentação do jornal “O Arauto” durante a Expocom Regional Sudeste (Exposição de Pesquisa Experimental em Comunicação), evento paralelo à Intercom Sudeste 2010, que ocorreu em Vitória (ES).

Também foi aluno-líder na apresentação de uma revista digital para tablet na Expocom Regional Sudeste de 2011, que ocorreu em São Paulo (SP). Apresentação histórica: por ser o primeiro trabalho acadêmico em uma mídia tablet para a Expocom, foi necessário uma autorização especial para expor sua revista.

Referências bibliográficas

- ALI, Fatima. A arte de editar revistas. São Paulo: Editora Companhia Nacional, 2009.

- FERRARI, Pollyana. Jornalismo digital. São Paulo: Contexto, 2009.

- FERRARI, Pollyana (Org.) Hipertexto, hipermídia: as novas ferramentas da comunicação digital. São Paulo: Contexto, 2010.

- SCALZO, Marília. Jornalismo de revista. São Paulo: Contexto, 2009.

- ROYO, Javier. Design digital. São Paulo: Edições Rosari, 2008.

Marcas registradas

- Adobe Acrobat Pro Extended, Adobe Acrobat Pro, Adobe Acrobat Professional, Adobe Acrobat Distiller, Adobe Photoshop, Adobe PageMaker, Adobe Illustrator, Adobe InDesign são marcas registradas da Adobe Systems Incorporated.

- Windows XP, Vista e 7 são marcas registradas da Microsoft Corporation.

- Macintosh e Mac OS são marcas registradas da Apple Computer Inc.

- QuarkXPress é marca registrada da Quark Inc.

- Todos os demais nomes e marcas registradas citados neste livro pertencem aos seus respectivos proprietários.

Apresentação

O mercado de eReaders (para livros digitais) e de tablets têm recebido dezenas de lançamentos de novos modelos de dispositivos mês a mês. A demanda por conteúdos adaptados a estes dispositivos não fica atrás, e também vem aumentando de forma exponencial por parte dos leitores.

Especificamente, no caso das revistas periódicas, suas tiragens e respectivas vendas vinham diminuindo, há anos, em função da concorrência, sobretudo da Internet e suas inúmeras fontes de notícias, artigos, reportagens etc. Num período relativamente curto de tempo, a partir de 2010, notou-se o nascimento de um novo modelo de negócios para este segmento: as revistas digitais.

Trata-se de uma nova forma de produzir, consumir e distribuir conteúdo que se encontra, literalmente, na ponta de nossos dedos.

Ela fornece uma narrativa diferente de uma revista tradicional. Diferente por ter uma linguagem nova, que reúne o que há de melhor da mídia impressa com a mídia digital: conteúdo segmentado, personalizado, portátil, com recursos multimídia, interativos e hipertextuais.

Como afirmou o filósofo Marshall Mc Luhan: “O meio é a mensagem”, ou seja, o conteúdo é alterado pelo meio em que ele é transmitido.

Por isso, esse híbrido ou amálgama do impresso com o digital cria uma mídia única que deve ter um conteúdo próprio, para explorar ao máximo todas as suas possibilidades e potenciais. Exploração que exige o domínio das ferramentas de edição e diagramação de revistas digitais.

Sobre este livro

Este livro foi planejado de forma a prover os conhecimentos necessários para que profissionais de diagramação de produtos editoriais dos mais variados segmentos possam produzir revistas digitais no formato Folio, para serem lidos e visualizados em tablets como o iPad, Galaxy Tab, Xoom, entre dezenas de opções.

Usando como ferramenta principal o InDesign CS5.5 e alguns outros utilitários, este livro cobre todos os conceitos, tecnologias e procedimentos necessários para se produzir revistas digitais com qualidade.

Um processo ágil e eficiente para editores e designers, pois não requer a aprendizagem de códigos e programação, apenas o conhecimento do software Adobe InDesign e sua solução integrada para desenvolvimento de aplicativos digitais de venda de revistas, o Adobe Digital Publishing Suite.

É recomendável que o interessado possua conhecimentos de nível intermediário no InDesign mas, de qualquer forma, conceitos mais complexos e importantes estão descritos neste livro.

Ele descreve os conceitos, características, cuidados, procedimentos técnicos, preparação dos elementos de página, limitações, boas práticas na diagramação, além das técnicas de conversão dos conteúdos para o formato Folio.

Portanto, mãos à obra! Essa é a hora de explorar um novo universo, cujos limites dependem apenas da nossa criatividade. Chegou a vez de uma nova narrativa.

Boa leitura!

Os autores

Como utilizar este livro

Para melhor compreensão dos procedimentos de arte-finalização e geração de revistas digitais no formato Folio, o conteúdo deste volume foi dividido em capítulos concisos cujos nomes definem de forma clara os assuntos tratados.

Isso permite ao leitor, que quer aprender, ou está enfrentando algum problema específico ou mesmo possui alguma dúvida, ir diretamente para o capítulo que trata do assunto.

O livro foi projetado para fornecer informações objetivas e bem ilustradas.

Convenções usadas neste livro

A seguir, serão detalhadas algumas convenções usadas nesta obra.

Sistemas operacionais utilizados

Para a confecção deste livro, nos baseamos no Windows XP e 7, e Mac OS X (10.6).

Ícones

Mesmo usuários experientes podem desconhecer ou deixar escapar pequenos e grandes recursos, assim como armadilhas escondidas nos aplicativos do pacote, ou mesmo descobrir novas formas de se realizar tarefas. Por isso, identificamos estas dicas e armadilhas com ícones.

Dica

São lembretes de utilização do aplicativo e/ou formas alternativas de se realizar uma mesma tarefa.

Atenção

Identificam itens ou processos que podem originar resultados diferentes ou indesejados.

Cuidado

Requer uma atenção especial do leitor, pois o uso de um determinado comando, opção ou configuração oferece risco de problemas sérios com consequências onerosas.

Dicas e observações importantes

Antes de iniciar o processo de aprendizado de arte-finalização de revistas eletrônicas, atente para as seguintes dicas e observações:

É altamente recomendável o uso de versões iguais ou superiores ao InDesign CS5. A versão utilizada na confecção deste livro foi a CS5.5, que possui alguns avanços bem interessantes.

O controle de qualidade e busca por problemas foi feito usando três ferramentas: o Adobe Content Viewer, um iPad e um Galaxy Tab. Acreditamos que eles representam e simulam os acertos e problemas que seriam exibidos na imensa maioria dos tablets e dispositivos móveis.

Itens fundamentais

Para tirar proveito do conteúdo deste livro, algumas premissas têm de ser atendidas pelo leitor.

Possuir uma cópia do Adobe InDesign CS5 ou superior.

Possuir acesso à Internet banda larga.

Arquivos de exercício

Preparamos a título de exercício, uma revista fictícia, cujos arquivos podem ser enviados para os interessados.

Caso tenha interesse, solicite o link para download enviando um e-mail para livros@bytestypes.com.br.

01 | CONCEITOS DE REVISTAS DIGITAIS

Uma revista digital é uma publicação periódica formatada para leitura em tablets e outros dispositivos móveis.

Sua principal característica é a junção de elementos gráficos e editoriais tradicionais da mídia impressa com recursos digitais, que são os recursos interativos, hipertextuais e multimídia. Ou seja, para que uma revista seja realmente digital, não basta fazer um PDF estático de uma revista impressa e inserir em um tablet. É necessário que a revista tenha, efetivamente, uma linguagem digital, e que reaja aos toques do leitor na tela do dispositivo de leitura.

Essa nova mídia iniciou sua popularização com a versão digital da revista Wired, publicação voltada para notícias de ciência e tecnologia da editora norte-americana Condé-Nast. A edição da revista interativa digital para leitura em iPads foi lançada em maio de 2010.

Desde então, editoras de todo o mundo vêm buscando oferecer a versão digital de suas publicações e já existem até mesmo publicações criadas exclusivamente para a mídia tablet, sem versão impressa.

Essa nova mídia ainda tem muitas possibilidades e potenciais, mas já é possível distinguir os elementos únicos que compõem sua linguagem, como veremos a seguir.

01.1 | Elementos vindos das revistas impressas

01.1.1 | Periodicidade

A revista digital não é como um website, que atualiza seu conteúdo constantemente. Ela se divide em edições publicadas periodicamente, e ser bimestral, mensal, quinzenal ou semanal.

Essa periodicidade é importante na linguagem da revista, pois, ao invés de informar notícias “quentes” (que aconteceram recentemente), há um foco maior na análise aprofundada e na contextualização dos fatos.

Isso porque as revistas não tem como concorrer com a velocidade quase instantânea do rádio ou dos websites.

A título de curiosidade, a publicação “The Daily” para tablets, tem periodicidade diária, assim como a revista Brasil 247 tem duas edições, o que agrega a temporalidade das notícias de um jornal diário à identidade de uma revista digital.

01.1.2 | Segmentação

Uma revista pode atingir um público-alvo mais restrito do que os meios de comunicação de massa como os jornais e a televisão.

Há revistas segmentadas por público (masculinas, femininas, juvenis, infantis, para pais e mães), por interesse (automobilismo, culinária e qualquer outro hobby ou atividade), por profissão ou área profissional (médicos, publicitários, profissionais de informática etc.), revistas de empresas, institucionais, de associações, entre outras.

Com a redução dos custos da produção de revistas digitais, será possível atingir públicos cada vez mais específicos. Quanto maior a personalização, maior será a relação de intimidade entre leitor e revista.

01.1.3 | Portabilidade

Revistas são fáceis de se manusear e carregar. E os tablets mantém esse elemento da mídia impressa, sendo mais fácil de transportar e usar do que um notebook ou netbook.

01.1.4 | Identidade gráfica

Cada revista tem sua identidade própria, formada por seus logos, capas e outros itens de seu projeto gráfico, tais como tipografia, paleta de cores, diagramação, fotos e ilustrações que compõem uma publicação com personalidade única.

É só mencionar um retângulo amarelo para lembrarmos da National Geographic. A revista é graficamente mais ousada do que websites comerciais, pois não tem restrições tecnológicas ao misturar textos com imagens.

Já a revista digital une o melhor dos dois mundos: tem a identidade gráfica da revista impressa e um espectro maior de cores passíveis de serem exibidas, pois usa o espaço RGB ao invés do CMYK usado nas revistas impressas.

01.2 | Elementos vindos dos meios digitais

01.2.1 | Leitura multimídia

Os meios digitais oferecem uma narrativa que combina elementos estáticos, como textos e gráficos, com elementos dinâmicos como áudios, vídeos e infográficos interativos.

Isso permite uma experiência multisensorial, que usa a visão e a audição, mais a nova experiência tátil de manusear informações nos tablets com a ponta dos dedos.

01.2.2 | Interatividade

No começo da Internet, as possibilidades de interação do usuário com seu meio digital eram limitadas a portais estáticos.

Com o surgimento da Web 2.0, o usuário deixa de ser o espectador de um monólogo e ganha poder para interferir e participar do conteúdo produzido.

Nos tablets, muito além de experiências simples como o apertar de botões (o que é considerado uma experiência reativa, ao invés de interativa), há a possibilidade de acessar a Web, sem sair das páginas da revista, além de acessar redes sociais com o Facebook. Orkut e blogs como o Twitter.

01.2.3 | Hipertexto

A ordem de leitura, no meio digital, superou a linearidade dos meios impressos. O leitor cria sua própria experiência narrativa por meio de links inseridos em textos e gráficos.

No tablet, o artigo de uma revista digital pode ter um link para uma página específica, para um outro artigo, para uma página na Web, alterando a sequência em que o leitor adquire as informações.

01.3 | Elementos exclusivos das revistas digitais para tablets

01.3.1 | Orientação dupla

Uma revista digital pode ser lida em dois formatos ou duas orientações de tela: na vertical e na horizontal.

Basta mudar a orientação do tablet para que o dispositivo mude automaticamente o formato da revista.

O uso de uma orientação dupla não é obrigatória, uma revista pode ter um formato único. Mas dar ao usuário a possibilidade de alterar sua experiência de leitura é, com certeza, um atrativo muito forte para um periódico.

01.3.2 | Profundidade

Revistas ocidentais impressas têm uma leitura da esquerda para a direita. Diversas revistas orientais, como os mangás japoneses, são famosos por sua leitura oriental da direita para a esquerda.

As revistas digitais, além de suportar esses dois tipos de leitura, ganham uma nova dimensão: a de profundidade, com páginas acima ou abaixo de outras páginas.

Com isso, é preciso “virar páginas” para cima ou para baixo na tela dos tablets. Como ainda estamos acostumados com a leitura impressa, é preciso deixar bem sinalizado que um artigo se estende pelo eixo vertical.

01.4 | Custos

01.4.1 | Custos de produção industrial

Independentemente do tipo de suporte de publicação (papel ou tablet) existe os custos de produção do conteúdo das revistas, que são gerados pelos jornalistas, redatores, revisores, editores, fotógrafos, ilustradores, diagramadores e os outros custos administrativos das editoras.

Mas, um dos maiores custos é a produção industrial do processo gráfico para imprimir os milhares e até mesmo, centenas de milhares de exemplares.

Revistas digitais não têm esse último custo.

01.4.2 | Custos de distribuição

O processo de distribuição de revistas impressas demanda um esforço e custos consideráveis, pois exige que os exemplares sejam fisicamente entregues aos assinantes e as bancas de jornais e de revistas espalhadas pelo País e, em muitos casos, pelo mundo.

Mas a distribuição digital via tablet também envolve custos: você precisará se cadastrar como desenvolvedor do sistema operacional do tablet no qual a revista será publicada e comprar um serviço de distribuição e venda de revistas digitais.

01.4.3 | Custos de estoques e encalhes

Outro custo relativamente alto das editoras de revistas impressas, relacionado ao processo industrial gráfico tradicional, é o de produzir tiragens muitas vezes maiores do que a necessidade estimada e, consequentemente, ter de manter revistas em estoque que muitas vezes não são comercializadas pelo desinteresse do público e/ou porque a informação se tornou desatualizada.

A partir desse momento, adquirem outro tipo de custo: que é o de encalhe.

Já uma revista digital só precisa ter um exemplar de cada edição estocada em um servidor, já que dá origem a quantas cópias forem necessárias e comercializadas.

01.4.4 | Prazo e conveniência de entrega

Revistas demoram alguns dias para serem entregues no endereço dos assinantes e também nas bancas de jornais.

Além disso, o interessado que não tem assinatura, tem de se deslocar até a banca para comprar seu exemplar. No caso das revistas digitais, são necessários pouquíssimos cliques em um tablet e segundos de espera para poder desfrutar do conteúdo da revista adquirida.

01.5 | A linguagem da revista digital

Antes de começar a produção de uma revista digital, seja uma revista nova e exclusiva para tablets ou a adaptação de uma revista impressa, é preciso compreender que essa nova mídia tem uma narrativa própria.

A linguagem dessa mídia envolve a exploração de uma narrativa digital imersiva, mas que mantém a personalidade editorial e gráfica de uma publicação impressa.

Essa nova narrativa digital deve instigar o leitor a explorar as páginas, buscar botões, procurar por opções de áudio, vídeo e animações; ou seja, se no impresso todas as informações estão à mostra, no tablet, há a possibilidade de ocultar informações, acessíveis apenas pela ação do usuário, que deve procurar ativamente o conteúdo oculto.

Essa exploração lúdica deve agregar o prazer de descobrir os níveis de profundidade da revista com o conhecimento e a informação que o leitor busca.

Por isso, o trabalho de criação de conteúdo para uma revista tablet exige uma integração total entre jornalistas ou redatores e designers. Os jornalistas não devem apenas se limitar a escrever os textos, mas também combinar com os designers a forma como suas narrativas serão apresentadas e quais recursos serão usados.

Os jornalistas devem adquirir informações auditivas e visuais para que os designers complementem o texto escrito com conteúdo oculto a ser descoberto pelos leitores. Esse conteúdo oculto deve ser relevante. Não basta adicionar recursos que não tenham relação nenhuma com o texto, ou recursos redundantes que não acrescentam informações.

Os recursos digitais não são adornos luxuosos, não servem apenas para chamar a atenção. Assim como o design gráfico facilita a leitura da revista impressa, o design dos elementos gráficos e digitais da revista tablet buscam facilitar a legibilidade e compreensão dos conceitos e temas abordados pela revista digital.

Dominar essa narrativa não é tarefa das mais fáceis, mas permite uma experiência extremamente sedutora e imersiva.

01.6 | Formatos de revistas digitais

Um dos formatos mais populares, e compatível com os principais tablets (Apple iPad, Samsung Galaxy Tab e Motorola Xoom) é o Folio, anteriormente conhecido como Issue.

01.7 | Revista digital não é eBook ou ePub

Muitas pessoas confundem as revistas digitais com livros digitais ou definem tudo como ePub ou eBook. Isso está errado.

O ePub é a abreviação para Electronic Publication e é um formato de arquivo para livros digitais, os chamados eBooks.

Esses arquivos podem ser abertos em boa parte dos dispositivos eletrônicos, como o iPad e o Galaxy Tab. Podem ser criados a partir do InDesign, QuarkXPress ou Word. Um livro ePub tem muitas limitações em relação a uma revista digital.

Não é possível diagramar um ePub à vontade, pois ele usa uma estrutura linear, contínua, ou seja, o arquivo define a sequência do que irá exibir: primeiro, um parágrafo de texto, depois, uma imagem, e assim por diante. Se o leitor aumentar o corpo do texto, as páginas do ePub aumentam. Isso impede até mesmo a criação de cabeçalhos e rodapés, pois não há páginas fixas.

Já em uma revista digital, é possível diagramar as páginas com a mesma identidade gráfica de uma revista impressa, o que gera um resultado visual muito mais interessante.

Uma revista digital não pode ser visualizada em um eReader como o Kindle ou Alpha, pois, basicamente, eles só tem a função de ler eBooks, mas pode ser visualizada por um tablet.

A regra é simples: a revista digital é voltada para leitura de revistas e os eBooks são voltados para leitura de livros, manuais, textos longos e extensos.

Para aprender a gerar livros eletrônicos (eBooks), recomendamos o livro “Coleção eBooks - Arte-finalização para livros eletrônicos nos formatos ePub e Mobi” editado pela Bytes & Types e que pode ser adquirido na loja virtual a partir do link http://loja.bytestypes.com.br/eBook-v1.html

02 | APLICATIVOS E DISPOSITIVOS DE LEITURA DE REVISTAS DIGITAIS

02.1 | Aplicativos não são revistas digitais

A venda e leitura de revistas digitais é realizada diretamente no tablet do usuário. Para isso, é necessário a instalação de um aplicativo.

Estes aplicativos (também conhecidos como Apps) são basicamente programas para tablet, assim como jogos eletrônicos, desenhos etc.

Os programas voltados para revistas digitais devem exercer duas funções básicas: oferecer, gratuitamente ou por meio de pagamento, a publicação desejada e permitir a visualização dessa publicação.

Existem aplicativos que disponibilizam a leitura de apenas uma publicação. Isso ocorre, geralmente, no caso de livros interativos ou publicações especiais.

Já uma revista, por ser periódica, precisa de um aplicativo que disponibiliza para download diversas edições.

As soluções como a Adobe Digital Publishing Suite (ADPS) oferece serviços de construção de aplicativos sem a necessidade de conhecer códigos de programação.

A instalação dos aplicativos ocorre por meio de lojas nativas do sistema operacional do tablet.

Todos os aplicativos para o iPad são adquiridos pela loja App Store, que pode ser acessada diretamente no tablet ou por meio do programa iTunes instalado em um computador desktop.

Para os tablets com sistema operacional Android, os aplicativos são adquiridos pelo Android Market, que também pode ser acessado no site https://android.market.com.

02.2 | Leitura de revistas digitais em computadores comuns

A ADPS permite visualizar e testar revistas digitais em computadores comuns (desktops, notebooks, netbooks etc.) por meio do aplicativo Content Viewer.

Ele acompanha o Folio Producer Tools, componentes integrados ao InDesign CS5.5 (e ao InDesign CS5 por meio de download no site da Adobe).

Existe também uma versão do Content Viewer para tablet. Trata-se de um aplicativo gratuito que pode ser adquirido na App Store da Apple e no Android Market. Esse programa permite testar suas revistas digitais diretamente nos tablets.

Somente o Content Viewer pode visualizar e interagir com sua revista digital. E o acesso à visualização e teste da sua publicação no Content Viewer, tanto em um computador desktop ou no tablet, é feito somente por meio de login de sua conta Adobe ao seu servidor web da ADPS.

Portanto, a pirataria de uma revista digital é extremamente difícil. Uma pessoa só terá acesso a sua revista fora do seu aplicativo de venda se ela acessar o seu servidor web, que é protegido com login e senha, ou se ela receber, diretamente do proprietário, um convite para participar como leitor ou coautor da publicação.

Programas como o Adobe Digital Editions não têm relação alguma com as revistas digitais da ADPS e só podem ler arquivos ePub e PDF (o ePub é um dos formatos mais populares para livros digitais, os eBooks).

03 | SOLUÇÕES PARA PUBLICAÇÃO DIGITAL

Atualmente, existem várias soluções para criação, publicação e venda de revistas digitais para tablets.

Há soluções em que a interatividade é inserida diretamente em um software de edição de publicações digitais, para formatar páginas que serão exportadas em um arquivo compatível para leitura em tablets.

Nesse caso, temos exemplos como a Adobe Digital Publishing Suite, Aquafadas, App Studio (inserido no Quark Publishing System), Censhare Publishing System, PressRun, RovingBird ePublisher, Vjoon K4, entre outros.

E existem as que partem de um arquivo PDF, no qual, após sua inserção em um servidor, é possível adicionar opções de interatividade. Nesse caso, temos como exemplo Mygazines, PixelMags, RareWire, Zinio, entre outros.

Neste livro, iremos utilizar a solução desenvolvida pela Adobe (Adobe Digital Publishing Suite), por acreditarmos que será a mais popular devido ao seu potencial de ser acessível a uma maior quantidade de profissionais e empresas.

03.1 | Adobe Digital Publishing Suite

A solução Adobe para criação e publicação de revistas digitais é a Adobe Digital Publishing Suite (ADPS).

Trata-se da solução que ajudou a popularizar a mídia das revistas digitais, principalmente com a divulgação da revista digital da Wired. Sua solução, aliás, foi incorporada ao sistema Woodwing Enterprise, que era, antes, a principal concorrente da ADPS para soluções de revistas.

A ADPS conta com diversos recursos de interatividade, como imagens que giram em 360o, vídeos, áudios, panoramas, entre outros recursos.

Sua principal vantagem é a integração total com o InDesign, sem que o diagramador necessite inserir códigos de programação para gerar uma revista digital.

Atualmente, os tablets compatíveis com a solução ADPS são o Apple iPad, BlackBerry PlayBook e diversos dispositivos com sistema operacional Android, como, o Galaxy Tab. Obviamente, a ADPS continuará sendo atualizada para se adaptar aos diversos novos fabricantes e modelos que ainda entrarão no mercado.

A ADPS é uma solução paga, que permite a publicação e venda de revistas digitais em um aplicativo personalizado de vendas.

Mas, mesmo sem a compra desse conjunto de serviços, ainda é possível criar e fazer o preview de suas revistas digitais para leitura em tablets. Isso porque o conjunto de ferramentas para criação e edição de publicações digitais, o Folio Producer Tools, já está disponível no aplicativo InDesign CS5.5 (e também em sua versão anterior, o InDesign CS5, por meio de download no site da Adobe).

03.1.1 | Componentes da ADPS

A suíte ADPS é dividida em quatro edições:

- Creative Edition, que é a solução gratuita, voltada para qualquer indivíduo que quiser testar e visualizar arquivos digitais;

- Single Edition, é uma solução barata para a publicação de uma única publicação digital (ou seja, não é voltada para revistas periódicas). Uma vez publicada, a revista não pode ser atualizada. Mas, por enquanto, ela só está disponível nos EUA:

- Professional Edition, voltada para editoras e publicações de médio porte;

- Enterprise Edition, voltada para empresas de grande porte.

A Creative Edition não tem nenhum serviço de distribuição, assinatura, venda e análise de dados. Já as outras três edições contam com diversos recursos, conforme o quadro a seguir:

* O Single Edition, por enquanto, só está disponível nos EUA e somente para iPad.

Todos esses serviços são realizados por meio de componentes e ferramentas da ADPS, integradas a um fluxo de trabalho que parte da criação no InDesign até a visualização no tablet, de acordo com o gráfico a seguir:

O Creative Edition só tem acesso aos serviços de criação, autoração e visualização de uma revista digital.

Os outros serviços, hospedados em um servidor web, podem ser adquiridos com as versões Single Edition, Professional Edition ou a Enterprise Edition.

03.2 | Fluxo de trabalho da ADPS

Vejamos em detalhes como todos esses componentes se integram.

03.2.1 | Criação

Envolve a diagramação de páginas no InDesign CS5 ou CS5.5. Veremos isso com mais detalhes nos próximos capítulos sobre criação de layouts.

03.2.2 | Autoração

Será necessário usar o Folio Producer Tools, já disponíveis no InDesign CS5.5 (e no InDesign CS5 por meio de download no site da Adobe) para inserir as opções de interatividade.

Isso é feito por meio do painel Overlay Creator (menu Window/Extensions/Overlay Creator). Veremos todas as opções do painel nos capítulos sobre interatividade.

Com os elementos estáticos e interativos já diagramados, será preciso enviar o arquivo para um servidor web por meio do painel Folio Builder (menu Window/Extensions/Folio Builder). O painel Overlay Creator permite fazer o preview e teste, a qualquer momento, de um arquivo aberto do InDesign que tenha o tamanho de um dispositivo tablet, por meio do botão Preview no painel.

O painel Folio Builder também permite visualizar e testar qualquer página que o painel importou para o servidor, por meio, também, de um botão Preview em seu painel.

O preview (também acessível sem os painéis, pelo menu File/Folio Preview) abrirá o arquivo no Content Viewer (do computador desktop), que é um aplicativo da Adobe que simula páginas de revistas digitais em um PC ou Mac.

03.2.3 | Produção

A produção da revista digital ocorre por meio do Folio Producer Service, serviço disponível no servidor web da Adobe (https://digitalpublishing.acrobat.com), que adiciona metadados e produz o arquivo final da revista, chamado de Folio. Também é possível distribuir sua revista para que outras pessoas possam revisar ou, até mesmo, serem coautores.

03.2.4 | Distribuição e venda

O Distribution Service permite hospedar e entregar arquivos Folio para um aplicativo personalizado no tablet.

Já o Ecommerce Service permite a venda de suas publicações dentro desse aplicativo personalizado.

03.2.5 | Análise

O Analytics Service faz uma análise da performance do conteúdo publicado. São relatórios da quantidade de edições baixadas, edições compradas, dos conteúdos mais populares, publicidades mais populares e da quantidade de vezes que seus aplicativos personalizados foram instalados.

03.2.6 | Construção do aplicativo e visualização

O Content Viewer para tablet é um aplicativo gratuito de leitura de arquivos Folio, que pode ser instalado, e em um iPad, BlackBerry PlayBook e em tablets com sistema operacional Android.

Com o Viewer Builder Service, é possível criar um Content Viewer personalizado, com o nome, logo e sistema de vendas de edições avulsas e/ou assinaturas de sua publicação.

Esse Content Viewer personalizado torna-se um aplicativo para tablet de venda e visualização dos seus arquivos Folio.

Opte por um aplicativo de Folio único ou múltiplos, ou seja, um aplicativo no qual é possível ler apenas uma revista digital e outro no qual é possível ler várias revistas.

03.3 | Custos da ADPS

Existem duas taxas para as edições pagas da ADPS. Os preços das edições pagas se referem ao pagamento nos Estados Unidos e são apenas uma referência. No Brasil, pelo menos no curto prazo, não haverá venda direta pela Adobe e o cliente deverá entrar em contato com futuros revendedores nacionais da ADPS.

03.3.1 | Preço do Single Edition

O Single Edition tem o custo único de US$ 395,00 por aplicativo de Folio único. Este é o único preço cobrado pela ADPS, que permite o download ilimitado de Folios pelos seus leitores. Lembrando, mais uma vez, que o Single Edition, por enquanto, só está disponível nos EUA.

03.3.2 | Taxa por uso de plataforma

Trata-se de uma taxa mensal que dá direito ao acesso dos serviços da ADPS dispostos no servidor web e também para ter acesso às atualizações regulares desses serviços.

A taxa do Professional Edition custa US$ 495,00 por mês. É possível optar por uma assinatura mensal ou anual. A diferença é que a anual permite uma maior quantidade de Folios disponíveis para download, de acordo com a taxa de serviço abaixo.

O pagamento dessa taxa é único para todos os títulos e publicações da editora ou cliente e inclui suporte técnico.

Já as taxas do Enterprise Edition, tanto por uso de plataforma como a taxa de serviço dependem da amplitude da cobertura e dos serviços requisitados pelo cliente, como, por exemplo, a adição de cursos de treinamento profissional Adobe para funcionários.

03.3.3 | Taxa de serviço

Trata-se de uma taxa paga para a Adobe toda vez que um usuário baixa um arquivo Folio para o seu tablet.

O custo depende da quantidade total de arquivos Folio que podem ser baixados pelos clientes. Quanto maior a quantidade, menor será a taxa. Segue abaixo a tabelo de preços para o Professional Edition

No Brasil, não é possível comprar diretamente o serviço da ADPS diretamente com a Adobe. A compra deve ser realizada com uma revendedora que no Brasil é a 24/7 Inteligência Digital, comercial@247id.com.br, www.247id.com.br. Os preços da revendedora podem ser diferentes dos praticados pela Adobe.

04 | REQUISITOS TÉCNICOS BÁSICOS PARA A CRIAÇÃO DE REVISTAS DIGITAIS

A criação de revistas digitais profissionais exigirá um computador que rode pelo menos um aplicativo para edição e conversão de publicações digitais.

A solução Adobe Digital Publishing Suite exige o InDesign CS5 ou o InDesign CS5.5. Recomenda-se o CS5.5, pois essa versão já possui os recursos e as ferramentas de criação de publicações digitais necessárias, bastando fazer o download de uma atualização no site da Adobe.

Já o CS5 exige o download e instalação de um plug-in, também disponível no site da Adobe.

Não se recomenda o uso de versões anteriores como o InDesign CS4, pois não há compatibilidade com estas soluções, nem recursos necessários.

04.1 | Estações de trabalho

04.1.1 | Mac ou PC?

Se pretende criar aplicativos de venda para o iPad, será preciso usar um Macintosh (Mac OS 10.6 ou uma versão posterior) para criar os certificados que a Apple exige na hora da submissão de novos aplicativos.

Aplicativos de venda para dispositivos Android também precisam de certificados, mas esses podem ser criados tanto em PC como Mac.

Para rodar o aplicativo InDesign CS5.5 e outros aplicativos da ADPS, são requisitos mínimos:

04.1.2 | PCs

- Processador Intel Pentium 4 ou AMD Athlon 64.

- Sistema operacional Windows XP com pelo menos o Service Pack 2 (recomenda-se o Service Pack 3); sistema operacional Windows Vista Home Premium, Business, Ultimate ou Enterprise com Service Pack 1; ou sistema operacional Windows 7.

- 1 GB de RAM (recomenda-se 2 GB).

- 1.6 GB de espaço livre em disco para a instalação; e mais espaço disponível é requerido durante a instalação (não é possível a instalação em dispositivos de armazenamento removíveis).

- Monitor com resolução mínima de 1.024 X 768 pixels (recomenda-se 1.280 X 800 pixels com placa de vídeo de 16 bits.

- Unidade de DVD-ROM.

- Adobe Flash Player (obrigatório para exportar arquivos SWF).

- Recomenda-se uma conexão de Internet banda larga, para usar o CS Live e seus recursos de armazenamento e compartilhamento de arquivos na nuvem (cloud computing). Também será necessária uma conexão para validar o aplicativo se ele fizer parte do Subscription Edition (edição de aluguel).

04.1.3 | Macintoshes

- Processador Intel Multicore.

- 1 GB de RAM (recomenda-se 2 GB).

- 1.6 GB de espaço livre em disco para a instalação; e mais espaço disponível é requerido durante a instalação (não é possível a instalação em dispositivos de armazenamento removíveis).

- Monitor com resolução mínima de 1.024 X 768 pixels (recomenda-se 1.280 X 800 pixels com placa de vídeo de 16 bits.

- Unidade de DVD-ROM.

- Adobe Flash Player (obrigatório para exportar arquivos SWF).

Recomenda-se uma conexão de Internet banda larga, para usar o CS Live e seus recursos de armazenamento e compartilhamento de arquivos na nuvem (cloud computing). Também será necessária uma conexão para validar o aplicativo se ele fizer parte do Subscription Edition (edição de aluguel).

04.2 | Requisitos para edição de imagens bitmap e ilustrações vetoriais

A produção de revistas digitais também envolve a edição de imagens, áudios, animações e vídeos.

Por isso, recomenda-se também a instalação e uso de editores de imagens raster como o Adobe Photoshop, editores de ilustração vetorial como o Adobe Illustrator, editores de áudio como o ProTools ou o Nuendo, editores de animação como o Adobe Flash Professional e editores de vídeo como o Adobe Premiere ou o Final Cut.

04.3 | Requisitos para distribuição de aplicativos

04.3.1 | Apple Store

Para publicar um aplicativo de vendas de revistas digitais para iPad, o tablet mais popular do mercado, é preciso ter uma conta de desenvolvedor do sistema operacional iOS da Apple (que tem o custo anual de US$ 99,00). Para isso, é preciso se cadastrar e efetuar o pagamento no site http://developer.apple.com/programs/ios/

04.3.2 | Android Market

Para publicar um aplicativo de venda no Android Market, voltado para diversos tablets com sistema operacional Android, é preciso se cadastrar como um desenvolvedor no site http://market.android.com/publish/signup. Isso envolve o pagamento de uma taxa de registro (US$ 25,00) com cartão de crédito, por meio do serviço Google Checkout.

05 | PRIMEIROS PASSOS

Neste capítulo iremos demonstrar os primeiros passos para se criar uma revista digital na ADPS, que poderá ser visualizada nos tablets (desde que os dispositivos tenham os sistemas operacionais iOS, Android ou QNX).

Em nosso passo a passo, veja a adaptação da revista PhotoPro, publicação impressa que é parte integrante da revista Desktop (www.revistadesktop.com.br), para uma versão digital.

Esta revista é voltada para tutoriais do editor de imagens Adobe Photoshop e conta com diversas dicas e técnicas para o aperfeiçoamento de trabalhos publicitários e fotográficos.

Opcionalmente, siga o tutorial para criar a sua própria revista que pode ser feita exclusivamente para tablets ou ser a adaptação da revista impressa da sua empresa para o meio digital. Nesse caso, preocupe-se em preservar a identidade visual da sua publicação, mantendo seus elementos gráficos e tipográficos.

05.1 | Primeiros passos

05.1.1 | Instalação de aplicativos e de plug-ins

Instale e atualize o InDesign CS5 ou CS5.5.

1. Acesse o site http://digitalpublishing.acrobat.com. Clique em Create account, no canto superior direito da página.

2. Agora será preciso criar a sua conta Adobe ID.

3. Insira os seus dados de e-mail, senha, nome, sobrenome, data de nascimento e país. Clique em Create Account. Ative sua conta pelo e-mail que cadastrou. Agora, volte ao site http://digitalpublishing.acrobat.com e, desta vez, clique em Sign In, no canto superior direito da página.

4. Você entrará no Dashboard, que é o servidor da Adobe para edição e publicação de Folios.

Antes de usar esse espaço, verifique a janela Updates. Ela contém todas as atualizações disponíveis dos plug-ins necessários para que seu aplicativo InDesign possa criar revistas digitais.

5. Será preciso instalar tanto a atualização do Folio Producer Tools quanto a atualização do Folio Builder Panel. Verifique se está baixando a versão correta, pois existem atualizações tanto para o CS5 quanto para o CS5.5.

Faça o download da versão mais atual do Adobe Air, um aplicativo gratuito que é necessário para rodar o programa Content Viewer para desktop. (http://get.adobe.com/air/).

05.1.2 | Criação de um workspace ideal

Personalize a sua área de trabalho para criar um ambiente voltado para a criação de revistas digitais.

Deixe à disposição os painéis Overlay Creator e Folio Builder (acessíveis a partir do menu Window/Extensions) e os painéis Hyperlinks, Buttons, Media, Object States e Preview (acessíveis a partir do menu Window/Interactive).

Salve este Workspace no menu Window/Workspace/New Workspace. Escolha um nome para a disposição da sua área de trabalho, com a opção Panel Locations ativada.

05.1.3 | Organização das pastas

Antes de começar a trabalhar com os arquivos do InDesign, é recomendado criar uma pasta/folder/diretório para armazenar os arquivos da sua revista.

Para facilitar sua identificação futura, atribua um nome a esta pasta de Folio com o número da edição e nome da publicação.

Se pretende criar várias versões de uma revista, com cada uma delas especificamente formatada para um tamanho de tela (1.024 X 768 pixels no iPad, 1.024 X 600 pixels no Samsung Galaxy Tab, entre outros), então cada versão deverá ter sua própria pasta de Folio.

Também recomendamos adicionar o formato de tela no nome de cada uma dessas pastas.

Neste exemplo, a revista Photoshop Pro nº33 tem uma pasta de Folio para sua versão digital em tablets com tela de 1.024 X 768 pixels e uma outra, separada, para tablets com tela de 1.024 X 600 pixels.

Lembre-se: você não precisa criar uma pasta para cada marca de tablet ou sistema operacional. Na ADPS, você precisa apenas criar uma pasta para cada formato de tela.

A pasta de Folio deve possuir subpastas, uma para cada artigo da revista, chamadas de pastas de artigos.

Sugerimos nomear as subpastas com o nome dos artigos a que se referem ou de seus autores. Se tiver certeza da sequência em que elas serão publicadas, insira números antes de seus nomes para deixá-las em ordem.

Sempre é possível alterar à vontade a sequência dos artigos no servidor web da Adobe.

Os anúncios de publicidade também funcionam como artigos, ou seja, cada um deve ter sua pasta.

Pasta de Folio da “Revista Photoshop Pro n. 33” com todas as suas pastas de artigos

Na captura de tela acima temos 11 subpastas de artigo que compõem a revista digital Photoshop Pro.

A capa da revista digital será a primeira página do primeiro artigo, por isso, nomeamos a primeira pasta como “01_Capa”.

A segunda pasta de artigo nesta revista digital é didática, com um artigo voltado para ensinar aos usuários como se navega em seu conteúdo.

A terceira pasta engloba todas as informações do editorial.

Depois, as pastas se alternam entre os tutoriais, identificados por seus autores, e as publicidades, identificadas por seus produtos.

Não se preocupe se precisar remover, adicionar ou alterar arquivos e pastas no meio da diagramação, ou depois de enviar sua revista ao servidor web, pois a ADPS reconhece qualquer alteração feita em um documento aberto em seu desktop e permite atualizar o resultado no servidor, assim como permite apagar, importar e alterar a ordem das pastas à vontade.

05.1.4 | Orientação única e orientação dupla

Com a pasta de Folio e de arquivos prontas, é hora de pensar nas possibilidades de leitura da sua revista.

Se a sua publicação for de orientação única (que só pode ser lida nos tablets na horizontal ou na vertical), cada subpasta deverá conter um arquivo de InDesign (com extensão INDD, que é o formato nativo do aplicativo).

Uma revista de orientação única deve sempre manter a mesma orientação, ou seja, se ela for vertical, deverá ser vertical em todas as páginas. Não se deve misturar orientações.

Agora, se pretende criar uma revista com orientação dupla, cada subpasta deverá conter dois arquivos de InDesign, ou seja, um arquivo para cada orientação. Isso ocorre porque a ADPS não consegue reconhecer páginas horizontais e verticais dentro do mesmo arquivo INDD.

Independentemente da sua revista ter orientação única ou dupla, todos os arquivos de InDesign devem seguir uma nomenclatura específica. Isso é muito importante, pois a ADPS reconhece o funcionamento da sua revista pela forma como nomeia os arquivos.

Todo arquivo de orientação vertical deve ter uma extensão “_v” (de vertical) no nome, e arquivos de extensão horizontal deve ter uma extensão “_h” (de horizontal) no nome.

Exemplo de subpasta para revista de orientação única, nesse caso, somente na vertical

Exemplo de subpasta com orientação dupla

Para muitos, criar uma revista de orientação dupla é uma tarefa divertida e interessante, mas, para outros, maçante, pois o diagramador terá o dobro de trabalho uma vez que é necessário diagramar cada página duas vezes.

05.1.5 | Armazenamento dos arquivos de mídia

Os arquivos dos documentos de mídia (imagens, áudios, vídeos e animações) a serem importados para as páginas no InDesign, podem ser armazenados em qualquer pasta de artigo que faça parte da sua pasta de Folio.

Esses elementos são vinculados da mesma maneira que imagens e ilustrações são usadas na produção de materiais impressos e devem ter os mesmos cuidados na hora de arte-finalizar os documentos de InDesign.

Desta forma, é plenamente possível usar o mesmo arquivo de mídia para as diferentes orientações da revista e para mais de um artigo, sem precisar fazer uma cópia desse documento.

Mas, para a boa organização, recomendamos guardar todos os arquivos de mídia usados em um artigo dentro da sua respectiva pasta, em uma subpasta chamada “links”.

Se o mesmo arquivo for usado com frequência, em mais de um artigo, como o logo da publicação, sugerimos deixar o arquivo na primeira pasta, em uma subpasta chamada “links comuns”. Dessa forma, sempre saberá onde estão os arquivos mais usados.

Exemplo de pastas de artigos, cada uma com uma subpasta links e seus respectivos artigos

05.2 | Criação do primeiro arquivo

Chegou a hora de criar o seu primeiro arquivo de InDesign para compor as páginas da sua revista.

1. No InDesign, use o comando Document do menu File/New.

2. Configure o quadro de diálogo conforme nossas sugestões.

No campo Intent, escolha Web.

Isso terá quatro consequências:

- As unidades de medida da página serão ajustadas para pixels.

- A opção Facing Pages será desativada (que só faz sentido para publicações impressas).

- O Transparency Blend Space (a mistura de objetos transparentes) será ajustado para o espaço de cor RGB.

- Todas as cores do painel Swatches serão ajustadas para o espaço de cor RGB.

3. No campo Page Size, coloque a medida de tela do tablet que servirá de plataforma para a sua revista.

No exemplo da revista PhotoPro, desenvolveremos primeiro uma versão para iPad, portanto o tamanho será 1.024 X 768 pixels.

4. Escolha, no campo Orientation, a opção Portrait (vertical) ou Landscape (horizontal) dependendo da orientação que quer para este arquivo.

5. Não coloque nenhum valor nos campos Bleed (sangria) pois, obviamente, não estamos lidando com um arquivo impresso que será refilado.

Em relação às margens, os valores dependerão da linguagem da sua revista e o quanto ela usa de espaço em branco. Em nosso exemplo, optamos por 45 pixels em todos os lados.

Lembre-se que o usuário poderá, em qualquer página da sua revista, ativar o navegador da ADPS. Ele ocupa 45 pixels de altura na parte superior e 90 pixels na parte inferior da sua página. E haverá sempre uma barra de rolagem de 6 pixels à direita da sua página se ela fizer parte de um artigo com eixo de leitura na vertical (ou seja, se você permitir que haja páginas uma acima das outras).

Depois de formatar seu novo documento, se é a primeira vez que você cria uma página formatada para tablet, clique no botão Save Preset e escreva “Revista digital 1.024x768” (ou outro formato que você escolheu). Dessa forma, toda vez que for criar uma nova página para sua revista, basta escolher o preset e o formato das páginas (além de outras características) estará previamente configurado.

6. Depois que a página em branco for exibida, recomendamos que este documento seja salvo com um nome de simples identificação e sem caracteres especiais, na sua respectiva pasta de arquivo.

Não se esqueça de incluir o sufixo “_v” ou “_h”, dependendo de sua orientação.

05.2.1 | Páginas com Smooth Scrolling

É possível também criar páginas personalizadas, ou seja, cuja largura e/ou altura sejam maiores do que a tela do seu tablet.

Quando estas páginas forem exibidas, graças ao recurso Smooth Scrolling no tablet, será possível rolar o conteúdo que ultrapassa o espaço da tela, como se estivesse usando a barra de rolagem de um navegador web. Essa opção é útil para páginas com muito conteúdo, como o expediente da revista ou o sumário de todas as matérias.

Para tanto, basta colocar as medidas especiais dessa página nos campos Page Size, na janela New Document. Por exemplo, 768 x 3.000 pixels para a orientação vertical e 1.024 X 3.000 pixels para a orientação horizontal. É fundamental ativar a opção Smooth Scrolling do seu artigo depois de enviar seus arquivos para o servidor web da Adobe.

Alguns cuidados e alertas para que este recurso funcione a contento:

- Só é possível criar as páginas personalizadas pelo New Document do menu File. Não mude o tamanho de uma página com a ferramenta Page Tool pois a ADPS não dá suporte à isso.

- Uma página com Smooth Scrolling não pode ter páginas adicionais, ela deve ser a única página de um artigo.

- Atualmente a ADPS só consegue usar o Smooth Scrolling no eixo vertical. Se quiser conteúdo extra no eixo horizontal, será preciso usar uma opção de interatividade chamada Scrollable Frame (ver capítulo “Inserção de elementos de interatividade com imagens bitmap”).

06 | PLANEJAMENTO E FLUXOGRAMA BÁSICO

06.1 | Planejamento

Para criar revistas digitais que permitam não apenas a assimilação do conteúdo por parte dos leitores, mas também que seja possível explorar os recursos de interatividade, o segredo é fazer um planejamento prévio antes de iniciar o trabalho de diagramação dos arquivos das revistas.

06.1.1 | Navegação

No caso de revistas impressas, mesmo que um leitor não conheça profundamente a divisão das seções da revista que está lendo, existem três maneiras de ler o conteúdo.

- De frente para trás;

- De trás para frente;

- Somente as seções ou artigos que lhe interessa.

Quando se trata de revistas digitais, a navegação pelo conteúdo não é linear e,portanto é muito fácil do leitor se perder.

Por isso, recomendamos um planejamento minucioso em relação à navegação entre os conteúdos e artigos.

06.1.1.1 | Seções

Dividir os artigos em seções claramente definidas e criar projetos gráficos específicos para cada uma destas seções é uma excelente estratégia.

Pode-se inclusive utilizar a estrutura de seções tradicionais utilizada pelos jornais e revistas impressas aos quais os leitores já estão acostumados, tais como Editorial, Expediente, Esportes, Economia etc.

06.1.2 | Espelho

Um item que ajuda muito no planejamento de divisão dos artigos nas seções, e também no planejamento de navegação é o chamado espelho editorial.

Trata-se de uma espécie de mapa das seções que pode ser rabiscado numa folha de papel ou criado em qualquer aplicativo de ilustração ou paginação. Veja um exemplo:

06.2 Fluxograma básico

07 | PREPARAÇÃO DOS CONTEÚDOS

Os elementos de página tais como ilustrações, imagens, vídeos e animações devem ser preparados conforme algumas especificações a serem descritas neste capítulo.

07.1 | Espaços de cor

Sempre use o espaço de cor RGB para garantir maior fidelidade em relação ao resultado final. Além disso, este espaço oferece um gamut (espectro de cores possíveis) maior.

Se optar por usar outros espaços de cores, como CMYK ou LAB, isto não impedirá o funcionamento da sua revista, mas o tempo de conversão aumenta consideravelmente.

07.1.1 | Conversão das cores do painel Swatches do InDesign

Uma página que foi criada com o objetivo de ser impressa tem, por padrão, as cores do painel Swatches no espaço de cores CMYK.

Para as revistas digitais é recomendável que sejam convertidas para o espaço RGB e infelizmente, elas têm de ser modificadas manualmente.

1. Abra o painel Swatches no menu Window/Swatches.

2. Clique duas vezes no nome da cor e o quadro de diálogo Swatch Options irá se abrir.

3. No campo Color Mode, mude de CMYK para RGB. Só não é possível converter a cor preta ([Black]), por isso crie um Black em modo RGB.

David Blatner criou um arquivo de swatches que está disponível no link http://goo.gl/eCNL4 e facilita bastante esta tarefa. Depois de fazer o download, importe-o para o painel swatches por meio do comando Load Swatches no menu do painel Swatches.

07.1.2 | Conversão dos espaços de cor das imagens

Se as imagens importadas no arquivo estão em modo CMYK, é altamente recomendável que sejam convertidas para o espaço de cor RGB.

1. Selecione as suas imagens no InDesign, escolha o comando Edit Original no painel Links e use seu editor de imagens para realizar a conversão (no Photoshop, por exemplo, vá no menu Image/Mode/RGB Color).

2. Salve e feche os documentos para serem futuramente atualizados no InDesign.

Caso existam muitas imagens a serem convertidas, recomendamos o uso de uma Action no Photoshop que automatiza este processo.

3. No InDesign, escolha o comando Update All Links no menu do painel Links.

07.2 | Ilustrações e elementos vetoriais

O InDesign possui recursos para criação de ilustrações vetoriais diretamente nos seus documentos e podem ser usadas com bastante segurança nas revistas digitais.

As ferramentas Rectangle, Ellipse e Polygon criam respectivamente formas retangulares, elípticas e poligonais. Traços podem ser criados com Line Tool e o painel Stroke as tornam mais elaboradas por meio das várias opções de tracejamento.

Se precisar de linhas ou elementos curvos irregulares, use a ferramenta Pen que usa curvas de Bézier para formar linhas matematicamente precisas.

No entanto, se forem necessárias ilustrações vetoriais mais elaboradas, recomendamos criá-las em aplicativos dedicados como o Illustrator e, depois, inserí-las no InDesign.

07.2.1 | Formatos de ilustrações vetoriais criadas fora do InDesign

As ilustrações vetoriais criadas em aplicativos como o Illustrator, FreeHand e CorelDRAW podem ser salvas nos formatos AI (formato nativo do Illustrator), EPS e PDF.

Até mesmo arquivos vetoriais no formato INDD (inserir um documento de InDesign dentro de um arquivo no formato INDD) podem ser usados.

Estes tipos de ilustrações serão rasterizadas (convertidos para bitmap) durante a exportação para o servidor Web da ADPS, se não fizerem parte de elementos interativos (para mais informações, consulte os capítulos sobre interatividade). Portanto, recomendamos rasterizar previamente qualquer imagem vetorial que fizer parte dos elementos interativos da ADPS.

07.3 | Resolução de imagens bitmap

As imagens que serão usadas na ADPS devem ter resolução próxima a 72 ppi e na medida exata em que é inserida na página de seu documento.

Resoluções muito menores farão com que a imagem pareça pixelizada. E maiores não são necessárias, pois a ADPS converterá suas imagens em uma única página de resolução menor.

Para ajustar a resolução, siga estes passos:

1. Abra suas imagens no Photoshop e vá até o menu Image/Image Size. Altere a resolução no campo Resolution para 72 ppi. Se você diminuir a resolução sem alterar o tamanho em pixels, desabilite a opção Resample Image.

2. Salve as imagens convertidas nas pastas das imagens do seu projeto de revista digital.

07.4 | Formatos recomendados de imagens

Para evitar arquivos Folio muito pesados (o tamanho é importante, pois a maioria dos leitores não querem e muitos não conseguem fazer downloads de arquivos muito grandes) é recomendável escolher com muito cuidado os formatos para salvamento, que dependem também se a imagem será estática ou interativa.

07.4.1 | Imagens sem interatividade

Imagens estáticas que não oferecerão nenhuma interatividade aos leitores podem estar em qualquer formato bitmap como JPEG, PSD (formato nativo do Photoshop) e TIFF.

Para salvar neste formato usando o Photoshop:

1. Abra a imagem a ser convertida. Use o comando Save As no menu File e escolha o formato que preferir no campo Format. Direcione para o diretório/folder onde suas imagens estão sendo armazenadas e pressione o botão OK.

2. No segundo quadro de diálogo, escolha as opções de forma a simplificar ao máximo o processamento da conversão de InDesign para o formato Folio, conforme as capturas de tela a seguir.

Arquivos de imagens com informações desnecessárias para a sua revista, como layers, perfis de cores embutidos, máscaras e paths não costumam colocar em risco sua publicação devido a compressão final. Mesmo assim, recomendamos que descarte estas opções a fim de simplificar os arquivos.

07.4.2 | Imagens com interatividade

Imagens que vão oferecer algum tipo de interatividade aos leitores (Panorama, Pan & Zoom, Image Sequence etc. Veremos mais sobre isso nos capítulos de interatividade), recomenda-se o uso do formato JPG ou PNG.

Para que os arquivos sejam leves, é necessário que não contenham informações desnecessárias, tais como layers, perfis de cores embutidos, máscara.

Caso escolha o formato JPEG, a qualidade deve ser definida para Medium ou se a imagem tiver áreas de transparência escolha o formato PNG.

.

07.5 | Especificações dos arquivos de áudio

Os arquivos de áudio que serão usados devem estar em formato MP3.

A taxa de compressão de 128 kbps (quilobits por segundo) é a qualidade padrão e reduz o arquivo para 10% de seu tamanho original.

Os procedimentos para conversão de arquivos de áudio serão descritos no capítulo 17 “Inserção de elementos de áudio, vídeo e animações“.

07.6 | Especificações dos arquivos de vídeo

Os arquivos de vídeo que serão usados devem estar em formato compatível com o iTunes.

Recomendamos vídeos em formato MP4 com o padrão de compressão h.264 (também conhecido como MPEG4 AVC).

Uma dica para converter seus arquivos para esse formato com estas especificações é usar o Adobe Media Encoder que vem com o Adobe Premiere Pro CS5.5. O Media Encoder permite converter seus vídeos para visualização no iPad, Galaxy Tab e outros dispositivos móveis.

Os procedimentos para conversão de arquivos de vídeo serão descritos no capítulo “Inserção de elementos de áudio, vídeo e animações“.

07.7 | Especificações dos arquivos de animações

Lembre-se que não é possível usar animações em Flash no iPad. Portanto, não use arquivos SWF. Além disso, arquivos Flash consomem mais bateria dos tablets.

Também não é possível usar as animações nativas do InDesign (criadas pelo painel Animation), pois a imagem animada será comprimida pela ADPS na hora de criar a revista interativa. Porém, há a possibilidade de exportar uma animação do InDesign em formato FLA e usar a solução Wallaby para criar um arquivo HTML5 que pode ser exibido na revista. Veremos isso em detalhes no capítulo “Inserção de elementos de áudio, vídeo e animações”.

08 | CUIDADOS COM OS PROJETOS GRÁFICOS

08.1 | Cuidados com os projetos gráficos

A tarefa de criação dos projetos gráficos e diagramação de uma revista digital no InDesign é semelhante com a criação de uma publicação impressa.

De forma bastante simplificada, ambas demandam a inserção de frames dentro das páginas para que recebam textos e imagens e que, por sua vez, devem ser formatadas e dispostas de forma harmônica para compor um layout que permita a leitura e compreensão do seu conteúdo.

No caso específico da revista digital, há de se tomar alguns cuidados extras e especiais.

08.1.1 | Cores de fundo das páginas

Para a aplicação de uma cor no fundo das páginas (background color), crie um retângulo colorido no fundo de uma página mestre e a aplique nas páginas que desejar.

Caso prefira diferentes cores para, por exemplo, identificar as seções de uma revista, duplique a página mestra, altere a cor dos retângulos e aplique estas páginas mestras nas páginas que desejar.

08.1.2 | Sangramento de elementos

Um recurso muito comum aplicado nos materiais impressos é a sangria.

Trata-se de posicionar um ou mais elementos nos cantos ou laterais das páginas de forma que extrapolem os limites externos da área de corte e, assim, quando forem refilados ou guilhotinados, não irão deixar áreas em branco nas margens.

Ao diagramar revistas digitais, não há necessidade de sangrar qualquer elemento para fora da página, apenas deixe-os no limite das bordas da página.

08.1.3 | Cuidados com tipografia e textos

Os elementos textuais da revista são rasterizados, ou seja, serão convertidos em imagens bitmap, e, portanto, nenhum texto de uma revista digital pode, por enquanto, ser selecionado.

A vantagem é que o leitor nunca enfrentará problemas com troca de fontes ou sumiço de caracteres especiais, tão comum nos impressos cujos arquivos foram usadas fontes de baixa qualidade.

08.1.3.1 | Padrões de fontes tipográficas

Ao desenvolver o projeto gráfico, o designer pode usar qualquer fonte, independente do padrão e fabricante.

Não há restrições como as dos navegadores web ou livros eletrônicos, que só compreendem determinadas fontes. Muito menos como os materiais que serão impressos em processos industriais que demandam fontes de padrões confiáveis (Type 1 ou OpenType) e de boa procedência.

Caso o processo de diagramação e conversão das revistas digitais seja feito por mais de uma pessoa e em computadores de plataformas diferentes, uma excelente sugestão seria trabalhar com fontes de padrão OpenType, pois são multiplataforma e podem ser usadas tanto no Windows como no Mac OS.

Caso não seja possível usar uma fonte de padrão OpenType, procure uma de padrão TrueType.

08.1.3.2 | Quantidade de fontes tipográficas

Não se deve usar dezenas de fontes na sua publicação, um bom layout usa no máximo, uma ou duas famílias de fontes.

08.1.3.3 | Qual o corpo mínimo?

Para a leitura de revistas digitais em tablets, dependendo da fonte escolhida, corpos menores que 14 pixels podem ficar muito pequenos e prejudicar a leitura.

Além disso, ler em dispositivo retro-iluminado, como é o caso dos tablets, causa mais desconforto ao longo do tempo do que ler um impresso e, por isso, a leitura deve ser a mais agradável possível, sem que o leitor precise aproximar mais o tablet para seus olhos ou precisar dar zoom nas páginas a toda hora.

08.1.3.4 | Legibilidade das fontes tipográficas escolhidas

Dê preferência, no projeto gráfico, para famílias de fontes que permitam a legibilidade dos conteúdos textuais.

A Comic Sans, por exemplo, pode parecer divertida em manchetes, mas torna péssima a leitura de um texto mais extenso.

08.1.3.5 | Quantidade de estilos disponíveis

Procure escolher famílias que possuam diversos estilos básicos, como Normal, Negrito, Itálico, Negrito-Itálico, Condensado etc. Isso permite variar o seu texto, sem sair do padrão da escolhida fonte.

08.1.3.6 | Serifadas ou não serifadas?

As fontes são divididas basicamente em dois grandes grupos: as serifadas (com pequenos traços e prolongamentos nas hastes) e as sem serifa.

As não-serifadas chamam a atenção e são recomendadas para textos curtos, manchetes e títulos.

Já as serifadas são recomendadas para a leitura de textos extensos, pois as serifas ajudam no reconhecimento das letras, principalmente em corpos pequenos, o que facilita a legibilidade e consequentemente a interpretação do conteúdo textual.

Nada o impede de usar fontes não serifadas para textos longos, mas recomenda-se usar corpos maiores (16 pixels, pelo menos) para ajudar na leitura.

08.1.3.7 Fontes fantasia

Também existem fontes chamadas de “fantasia”, muito usadas na elaboração de títulos que se integram com as imagens e o tema da sua publicação.

Elas são muito usadas nas revistas de vanguarda, de arte e para o público jovem. Recomenda-se usá-las de modo exclusivo: dedique uma dessas fontes para um artigo e evite repetí-las no resto da revista.

09 | DIAGRAMAÇÃO DE PÁGINAS DE CONTEÚDO ESTÁTICO

Se tomar os devidos cuidados na criação dos projetos gráficos que foram descritos no capítulo anterior, e respeitar as características peculiares das revistas digitais, de maneira geral, é possível fazer a diagramação de forma muito parecida com as tradicionais revistas impressas.

Para aprender ou se aperfeiçoar no uso do InDesign CS5 ou CS5.5, recomendamos os livros editados pela Bytes & Types e que podem ser adquiridos na loja virtual http://loja.bytestypes.com.br.

Vale lembrar que no caso de revistas digitais com orientação dupla (que serão lidas em tablets em pé ou deitados), é necessário diagramar cada layout duas vezes, uma para cada orientação.

É de suma importância que cada arquivo de InDesign que contenha um layout de orientação diferente seja armazenado na mesma pasta, mas com nomes ligeiramente diferentes: o que contém o layout vertical com o sufixo “_v” (de vertical) e o de layout horizontal com o sufixo “_h” (de horizontal).

Exemplo de subpasta com orientação dupla

Seguem exemplos de algumas páginas de conteúdo estático diagramadas no InDesign CS5 e CS5.5.

10 | CRIAÇÃO DE REVISTAS DIGITAIS PARA TABLETS DIFERENTES

Existem vários métodos para criar revistas digitais que serão visualizadas por tablets com telas de diferentes formatos.

Eis as são recomendações da ADPS:

- Crie uma pasta de Folio que será usada para todos os dispositivos.

Isso poupará muito trabalho de rediagramação para diferentes formatos de tela. Mas, em telas cuja proporção de altura X largura sejas diferentes dos documentos originais em sua pasta de Folio, a revista será ajustada para esse novo formato.

- Crie duas pastas de Folios. Uma com as dimensões de 1.024 X 768 e outro com dimensões de 1.024 X 600.

É preciso rediagramar sua revista para esses dois formatos de tela, mas pelo menos já terá garantido a adequação dela para a maioria dos tablets comercializados no Brasil, principalmente o iPad e o Galaxy Tab.

- Crie pastas de Folio para diversos formatos de tela, como 1.024 X 768, 1.024 X 600, 1.280 X 800 e 800 X 600.

Garantirá a visualização adequada para a quase totalidade dos tablets no mercado, mas terá que rediagramar suas páginas para todos esses arquivos.

10.1 | Renditions

As múltiplas versões da mesma revista diagramada para diferentes formatos é chamada de renditions.

Se houver múltiplas renditions do mesmo Folio, o aplicativo que o leitor baixar em seu tablet irá disponibilizar apenas a rendition que se aproxima mais ao formato de tela do tablet usado.

Caso o aplicativo mostre uma revista sem as dimensões exatas da tela, essa publicação será escalonada proporcionalmente (aumentada ou diminuída) e poderá adicionar barras pretas nas laterais, em cima e em baixo para ajustar a visualização.

10.1.1 | Atualização, rendition ou nova edição

Quando a revista digital for publicada, três configurações irão determinar se essa revista é uma atualização (para efetuar uma alteração ou correção de uma revista que já foi publicada), se é a mesma revista mas com rendition diferente (para um outro formato de tela), ou se é uma edição diferente. Essas configurações são Publication Title, Folio Number e Size.

Especifique o Publication Title (título da publicação) e o Folio Number (número do Folio) no Folio Producer, serviço presente no servidor da ADPS e disponível apenas nas edições pagas.

É possível especificar o Size (tamanho) da sua revista ao usar o painel Folio Builder quando criar um novo Folio (mais informações sobre o painel Folio Builder nos próximos capítulos).

10.1.1.1 | Atualização

Se as configurações de Publication Name, Folio Number e Size forem idênticas entre uma nova revista e uma já exportada para o servidor da ADPS, a nova revista irá substituir o Folio já publicado, mesmo se o conteúdo for diferente.

No aplicativo, uma mensagem irá alertar os leitores que há uma atualização dessa revista e pedirá permissão para fazer o download da revista atualizada.

10.1.1.2 | Rendition

Se as configurações de Publication Name e Folio Number forem as mesmas, mas as configurações de Size forem diferentes entre duas revistas, a ADPS irá considerá-las renditions diferentes, ou seja, a mesma revista, mas com diferentes formatos de tela.

O aplicativo de venda da sua revista irá perceber esses diferentes formatos e irá disponibilizar para o leitor o download apenas da revista, que tiver o formato que mais se aproxima da tela do tablet no qual o aplicativo foi instalado.

Por exemplo, se importar para o servidor da ADPS uma revista de dimensões 1.024 X 768 e uma outra revista de 1.024 X 600 (com mesmo nome e número da edição), então seu aplicativo no iPad fará apenas o download da primeira revista e seu aplicativo no Galaxy Tab fará apenas o download da segunda revista.

10.1.1.3 | Nova edição

Se o valor de Folio Number entre duas revistas forem diferentes (mesmo se o conteúdo gráfico e textual for idêntico), então a ADPS considerará que são revistas diferentes, como a edição de janeiro e de fevereiro de uma revista digital.

10.1.2 | Dicas para a criação de revistas para múltiplas rendições

- O aplicativo de venda da sua revista irá escalonar uma revista de formato diferente diminuindo-a, mas nunca aumentando-a.

Por exemplo, uma revista para iPad, com as dimensões de 1.024 X 768, terá seu conteúdo diminuído se essa publicação for visualizada em um tablet de tela menor. Mas, se visualizar esse aplicativo em um formato de tela maior que o do iPad, a revista ganhará barras pretas nas laterais, e em cima e em baixo, mas seu conteúdo não aumentará de tamanho.

- Se você, ou um coautor, adicionar artigos para uma revista que já está no servidor da ADPS por meio do painel Folio Builder, a relação largura X altura das páginas do artigo deve ser proporcional a relação largura X altura do tamanho do Folio. Por exemplo, ao criar um Folio no Folio Builder, e especificar o tamanho de 1.024 X 768, poderá depois adicionar novos artigos de 1.024 X 768 de tamanho e também artigos de 800 X 600 de tamanho (pois 800 X 600 e 1.024 X 768 tem a mesma proporção de 4 X 3 na relação altura X largura). Mas, nesse exemplo, artigos de 1.024 X 600 não poderão ser adicionados a esse Folio.

- Sempre que precisar mudar o tamanho da página do seu arquivo, nunca use o Page Tools. Use sempre o Document Setup, disponível no menu File/Document Setup, e mude os valores de Weight (largura) e Height (altura) do seu documento. Lembre-se de ativar o Layout Adjustment, disponível no menu Layout/Layout Adjustment, para que o conteúdo das suas páginas sejam alterados junto com o tamanho do seu documento.

11 | CRIAÇÃO DA CAPA DA REVISTA DIGITAL

11.1 | Criação da capa da revista digital

Uma vez que o “miolo” da revista digital está quase finalizado, chegou a hora de criar uma capa.

Seguem algumas sugestões e regras.

11.1.1 | Boa legibilidade

Busque o máximo de contraste entre o texto das chamadas e a imagem no fundo. Por isso, a arte para capas devem ser pensadas com áreas livres. Se existir um fundo com uma mistura caótica de cores e áreas claras e escuras, será difícil destacar suas manchetes.

O contraste mais forte é o de letras pretas em fundo branco. Vermelho sobre branco também chama a atenção e atrai o leitor.

11.1.2 | Hierarquia e harmonia

Procure estabelecer uma certa hierarquia na sua capa, ou seja, o olhar do leitor deve ser atraído para o elemento principal (geralmente a foto ou ilustração).

Depois, esse olhar deve ser dirigido sutilmente para os elementos secundários (como a manchete que explica a foto/ilustração principal) e, por fim, o leitor deve olhar os elementos terciários (as chamadas para outros temas e assuntos).

Se tudo que estiver na sua capa tiver o mesmo tamanho e importância, o leitor ficará perdido, sem saber onde focar o seu olhar primeiro.

11.1.3 | Vertical versus horizontal

Uma capa com duas orientações necessitará de uma foto ou ilustração que se adapte bem aos dois formatos.

É possível perder muitas informações na visualização de uma foto de paisagem ou de um arranha-céu se elas forem apresentadas na vertical ou na horizontal respectivamente.

Portanto, dê preferência para artes em formato quadrado, com bastante espaço em sua volta, para a inserção das manchetes.

Uma boa dica é usar imagens recortadas, com fundo transparente salvas no formato PSD ou TIFF (se a capa não tiver interatividade), ou no formato PNG, se a arte da capa for interativa.

Lembre-se também que, se quiser ter uma revista digital para vários tablets, será necessário, ajustar o design da capa para proporções diferentes.

11.1.4 | Duas capas – mil possibilidades

Não fique preso ao conceito de repetir a arte e as manchetes nas duas orientações. Use a sua imaginação e surpreenda o leitor.

Com duas orientações é possível fazer duas capas diferentes, não apenas no formato. Apenas tenha o cuidado de manter uma unidade gráfica.

Use o mesmo personagem da capa, mas em poses ou usando roupas diferentes, ou ainda em uma situação de antes/depois. Faça as duas capas dialogarem entre si de maneira inteligente.

11.1.5 | Capa e interação

Pense também nas possibilidades de uma capa interativa.

Uma interatividade que parece simples, mas que é extremamente útil, consiste em colocar links nas chamadas que levam o leitor diretamente ao artigo especificado.

Não faça da arte principal um link, pois o leitor precisa de um espaço para colocar um dos dedos na tela e virar a página ou acessar o navegador da ADPS e um link que ocupa toda a área da arte principal irá atrapalhá-lo.

Procure colocar esse link em uma área menor, na manchete, ou em uma chamada com o texto “Veja mais”, por exemplo.

Outra possibilidade é inserir um vídeo que mostra a capa animada. Por exemplo, o vídeo de uma modelo desfilando na passarela e ao fazer a pose final, o vídeo termina com chamadas aparecendo ao lado dela.

Cuidado com exageros: um vídeo que se inicia automaticamente pode ser legal na primeira vez, porém, torna-se irritante ver a animação toda vez que retornamos para a capa. Sugerimos que o vídeo da capa não seja automático.

Uma capa com efeitos de Image Sequence ou Slideshow também pode vir a ser muito interessante, porque permite, praticamente, capas infinitas em uma única página.

O leitor desliza os dedos ou aperta botões e escolhe qual capa vai querer para sua revista.

O diagramador pode fazer uma sequência de capas que tenham uma lógica narrativa, como uma história em quadrinhos feita de capas, ou uma capa para cada matéria importante.

Por ser uma nova mídia, a linguagem das capas de revistas digitais se expandiu, e muito. Tudo depende da sua criatividade para chamar a atenção do leitor.

11.2 | Procedimentos para criação da capa da revista digital

1. O primeiro passo é criar uma pasta para armazenar seus arquivos. É importante que ela seja a primeira subpasta que está dentro da pasta do projeto da revista digital.

Sugerimos que aplique o nome “01_Capa”. Crie também uma subpasta chamada “Links” e coloque nela todos os arquivos de imagem que pretende usar para compor a capa da sua revista.

É plenamente possível inserir elementos de interatividade nesta capa conforme as instruções dos capítulos anteriores, mas por uma questão didática, faremos com elementos estáticos.

2. Insira os elementos gráficos e textuais e os diagrame para fazer o layout da sua capa (ou das suas capas, caso queira uma de orientação dupla).

3. Salve na subpasta “01_Capa” os dois arquivos de InDesign para capa “Capa_v.indd” e “Capa_h.indd”.

12 | CRIAÇÃO DE UMA PÁGINA EXPLICATIVA DE NAVEGAÇÃO

É recomendável inserir nas primeiras páginas da sua revista, de preferência logo depois da capa, uma página que explique ao leitor como navegar na revista.

Ela deve fazer referência aos botões de navegação da ADPS e aos ícones e símbolos que foram criados para sinalizar os overlays presentes nas páginas.

Além disso, se possuir artigos que podem ser lidos no eixo vertical (de cima para baixo), ao invés do eixo horizontal como em todas as revistas impressas, é necessário explicar ao leitor sobre esse novo sentido de leitura.

Como ele está acostumado à leitura impressa, explique que a presença de um sinal gráfico significa a continuação do artigo na parte de baixo, ou o final de um artigo.

Para a criação de símbolos, recomendamos que busque uma linguagem gráfica de fácil reconhecimento, e que mantenha as mesmas cores, espessuras das linhas e estilo de ilustração.

Crie símbolos que se destaquem do conteúdo da revista. Afinal, o leitor precisa saber com exatidão o que é interativo e o que não é. Dessa forma, ele não ficará “tateando” em tudo na procura de alguma reação da revista, o que pode ser muito frustrante.

Não é preciso necessariamente usar símbolos para todos os tipos de interatividade (chamados pela ADPS de overlays).

Se quiser, faça símbolos para arquivos multimídia de áudio e vídeo e crie um símbolo de uma mão tocando na tela para sinalizar todos os outros overlays.

As opções de interatividade da revista, ou overlays, serão explicados em detalhes nos capítulos a seguir.

Por fim, se a sua revista tiver orientação dupla, indique ao leitor que ele pode girar o tablet para ver um layout diferente. Isso parece óbvio, mas novos leitores de revistas digitais podem não estar cientes disso.

No exemplo da revista PhotoPro, usamos listras na vertical no rodapé das páginas para indicar a continuação de um artigo no eixo vertical.

Exemplos de símbolos que indicam conteúdo interativo. Optamos por usar uma linguagem gráfica com a cor e o logo do Grupo PhotoPro, agregando a diversão de encontrar elementos interativos ao valor da marca

13 | CRIAÇÃO DE ÍNDICES INTERATIVOS NAS REVISTAS DIGITAIS

Todas as revistas digitais da ADPS já contam com um índice interativo, chamado de Table of Contents, no navegador do aplicativo. Para criá-lo, basta inserir os metadados de cada artigo por meio do painel Folio Builder ou pelo servidor.

Quando o leitor visualizar sua revista digital, ele poderá, a qualquer momento, tocar em uma área estática (sem nenhuma interatividade ou overlay) para abrir o navegador, visualizar as informações de cada artigo (título, autor, editoria) e selecioná-lo ou para ir diretamente para a página solicitada.

Uma revista pode contar com esse recurso sem precisar de uma página de índice entre seus artigos.

Mas, existem situações quando é realmente necessário que existam páginas que descrevam o conteúdo de todos os artigos. Por exemplo, a linha editorial da revista pode demandar um índice com chamadas e uma foto de grande porte para cada artigo, o que não é possível no Table of Contents do servidor da ADPS, que apenas exibe um Thumbnail de cada artigo.

Ou, talvez, queira fazer um índice mais refinado, com design que separe as editorias por cores e formas detalhadas.

Uma outra boa ideia é fazer um índice lúdico e interativo, no qual é possível não somente ter uma visão geral do conteúdo da revista como também manipular essa gama de títulos e fotos de uma forma inusitada.

Não importa o motivo, o índice irá funcionar da mesma forma como os outros artigos da sua revista. Mas há dicas importantes para se criar um índice funcional:

- Smooth Scrolling: A página de índice é um excelente exemplo para se aplicar o Smooth Scrolling. Trata-se do recurso em que a altura da página é maior que a tela do tablet e o leitor pode deslizar esse conteúdo como se estivesse usando a barra de rolagem de um website.

Mas, por enquanto, a ADPS só permite barra de rolagem no eixo vertical. Por exemplo, crie um documento de 1.024 X 3.000 pixels (para orientação horizontal) e um de 768 pixels X 3.000 pixels (para orientação vertical).

Além disso, uma página de Smooth Scrolling só é possível existir, que é suficiente para inserir todas as manchetes, textos descritivos e subtítulos que precisa.

- Hyperlinks: A principal vantagem de um índice digital em relação ao impresso é que um simples toque na própria chamada vai direto ao artigo desejado.

Para isso, basta inserir na área da chamada um botão invisível que vai diretamente para o artigo referente. (Veremos, mais adiante, como inserir esse tipo de interatividade.)

- É possível criar índices interativos, por exemplo, um slideshow.

Imagine um índice no qual cada chamada tenha um botão. Ao clicar nele, poderá ver as principais fotos da matéria e um texto descritivo.

Mas cuidado! Os elementos interativos, chamados pela ADPS de overlays, não podem conter outra interatividade dentro dela.

Por isso, um slide de um slideshow não pode conter um hiperlink, apenas imagens e textos. Deixe um espaço da sua página separada apenas para os hiperlinks e outro para slideshows e outros tipos de interatividade.

No exemplo da revista Photoshop Pro, sobre cada chamada há um botão invisível, com um hiperlink para a respectiva matéria. Ao lado, um slideshow que muda de slide automaticamente, revelando as principais imagens de todos os tutoriais

14 | REAPROVEITAMENTO DE UM ARQUIVO PARA IMPRESSÃO NA CRIAÇÃO DE UMA REVISTA DIGITAL

Em muitos casos, se já há um arquivo no InDesign criado para publicação de um impresso e quer usá-lo no tablet, pode ser mais fácil criar um novo arquivo com tamanho e especificações para uso digital, e levar os layouts para lá, do que fazer uma conversão.

Se, mesmo assim, for necessário o reaproveitamento, é possível fazer uma conversão direta, desde que alguns critérios sejam tomados e que serão descritos a seguir.

14.1 | Conversão

14.1.1 | Páginas faceadas

Desative a opção Facing Pages (caso seu documento esteja com essa opção ativada).

Para isso, vá no menu File/Document Setup.

14.1.2 | Unidades de medidas usadas

No Mac OS, vá até o menu InDesign/Preferences/Units & Increments ou no Windows, vá até o menu Edit/Preferences/Units & Increments.

Altere as medidas dos campos Horizontal, Vertical, Text Size e Stroke para Pixels.

Um atalho para definir mais facilmente esta unidade de medidas nas réguas é clicar com o botão direito em uma das réguas e escolher a opção Pixels.

14.1.3 | Ajustar o Transparency Blending Space

Para reajustar o Transparency Blending Space, vá para o menu Edit/Transparency Blending State/Document RGB.

14.1.4 | Alterações nas dimensões das páginas

Uma das tarefas mais trabalhosas, é solucionar os problemas de diagramação causados pela alteração nos valores das dimensões das páginas.

Na produção de revistas digitais, existem duas razões para mudar as medidas de um arquivo. A primeira é adaptar uma página impressa para a página de um tablet. A segunda é fazer a transposição de uma página horizontal para a vertical (ou vice-versa).

Nunca use o Page Tools para mudar as medidas, a ADPS não dá suporte para essa ferramenta.

1. Antes de qualquer alteração, vá no menu Layout/Layout Adjustment e ative a opção Enable Layout Adjustment.

Isso permitirá que os elementos inseridos nas páginas se ajustem melhor com a futura alteração nas medidas. Várias opções neste quadro de diálogo se tornam disponíveis.

Snap Zone: Controla a distância na qual um objeto irá automaticamente se alinhar a uma guia durante o ajuste.

Allow Graphics and Groups to Resize: Altera o tamanho de imagens e grupos proporcionalmente, de acordo com o ajuste da página.

Allow Ruler Guides to Move: Permite mover as guias proporcionalmente, de acordo com o ajuste.

Ignore Ruler Guide Alignments: Ignora o alinhamento de objetos a guias durante o ajuste das páginas. Normalmente queremos preservar esses alinhamentos e, portanto, não é preciso selecionar essa opção.

Ignore Object and Layer Locks: Ajusta objetos que estão bloqueados.

2. Acione o comando Document Setup do menu File e altere as medidas de largura (Width) e altura (Height) do documento.

Se quer apenas adaptar uma página já no tamanho correto para um tablet, de uma orientação para outra, basta alterar a opção Orientation.

As páginas e seus elementos serão ajustados para as novas medidas.

Estes procedimentos ajudam, mas não fazem milagres: será preciso depois fazer pequenos (e grandes) ajustes no layout dos elementos de página.

Procure não se prender totalmente ao conceito de sempre repetir todo o conteúdo de uma orientação na outra. Se o leitor tiver a certeza de que tudo o que está na vertical se repete na horizontal, ele pode querer mudar a orientação uma vez ou outra para ver a mudança do design, mas logo irá se contentar em ver toda a revista em uma orientação só.

O designer pode evitar isso com conteúdos exclusivos ou diferenciados para uma orientação. Como, um artigo sobre artes plásticas em que todo o texto está na orientação vertical e uma chamada avisa que os quadros do artista mencionado podem ser vistos ao girarmos o tablet.

15 | INSERÇÃO DE CONTEÚDOS INTERATIVOS

15.1 | Inserção de conteúdos interativos

Nos próximos capítulos serão descritos os recursos de interatividade do InDesign que podem ser inseridos nas revistas digitais.

Estes recursos permitem que o leitor interaja com os conteúdos de áudio, vídeo e animações para tornar a leitura da revista digital uma experiência multimídia e multisensorial.

Todos esses conteúdos interativos são aplicados no InDesign em uma espécie de camada chamada Overlay que reage ao toque do leitor nas telas dos tablets.

Estes conteúdos foram divididos em três tipos de efeitos interativos:

- Hiperlinks e Web Content

- Áudios, vídeos e animações

- Efeitos com imagens bitmap

15.1.1 | Introdução aos overlays

A adição de interatividade na ADPS ocorre por meio do painel Overlay Creator. Ele cria elementos interativos, também chamados de overlays, que se sobrepõem a todos os elementos não interativos.

Isso ocorre porque no processo de conversão de um arquivo INDD para uma revista digital, a ADPS reúne todos os elementos não interativos em uma única imagem JPEG, PNG ou PDF (dependendo da sua escolha) e sobrepõe a essa imagem os overlays.

Ou seja, elementos estáticos nunca ficarão acima de um overlay, e apenas um overlay pode se sobrepor a outro overlay.

São sete as opções de interatividade disponíveis no Overlay Creator:

- Hyperlink

- Slideshow

- Image Sequence

- Audio & Video

- Panorama

- Web Content

- Pan & Zoom

O único elemento interativo que não tem ligação direta com o Overlay Creator é o Scrollable frame, um frame cujo conteúdo pode ser navegado por uma barra de rolagem e que deve ser construído manualmente, como veremos mais adiante.

15.1.2 | Criação de overlays no Overlay Creator

Para as opções Slideshow, Hyperlink, Audio & Video e Pan & Zoom é preciso criar ou inserir o objeto no documento do InDesign para depois editar as opções de interatividade no painel.

Para as opções Image Sequence, Web Content e Panorama é preciso inserir uma imagem ou criar um frame retangular e, depois, usar o Overlay Creator para especificar a fonte das imagens (para o Image Sequence e Panorama) ou a fonte do URL ou arquivo (para o Web Content).

15.1.3 | Área de interação do Overlay

Na ADPS, o tamanho do frame criado ou inserido é exatamente o tamanho da área interativa que irá responder ao toque do dedo do usuário. Mas, caso modifique o tamanho do frame, pode-se fazer o conteúdo se adequar ao novo tamanho.

Para isso, selecione o frame e vá para o menu Object/Fitting/Fit Content Proportionally.

15.1.4 | Recomendações importantes para criação de overlays

- Tome muito cuidado com o tamanho mínimo do seu overlay. Usuários com dedos grandes terão dificuldades em acionar links e botões muito pequenos. Por isso, deixe as áreas interativas bem largas. Evite também a sobreposição de overlays.

- Imagens que fazem parte dos overlays Panorama, Pan & Zoom, Image Sequence e também as imagens que compõem o controller de áudio de Audio & Video não são comprimidas, portanto, evite a todo custo usar imagens pesadas.

- Comprima os arquivos originais, deixe-os em formato JPEG com resolução de 72 ppi. Para imagens com áreas transparentes, use o formato PNG ao invés do TIFF.

- As imagens que irão compor os overlays Panorama, Image Sequence (para ilusões de imagens com rotação de 360º), Pan & Zoom e as imagens do controller de áudio do Audio & Video devem ter as dimensões exatas em pixels e 72 ppi para se obter os melhores resultados. Por exemplo, se quiser usar uma sequência de imagens para uma área do tamanho de 500 X 500 pixels, procure usar somente imagens desse tamanho exato e com 72 ppi cada.

- Evite sangrar um overlay para fora da página. Ele deve estar inteiramente dentro da área do documento.

- Os tablets, pelo menos os da primeira geração, são bastante limitados em relação à quantidade de memória e velocidade do processador.

Para otimizar a navegação, o Content Viewer automaticamente renderiza múltiplas páginas adjacentes à página em que o leitor se encontra. Mas, se houverem diversas páginas adjacentes com conteúdo acima dos 30 MB, ao invés de uma rápida renderização, o leitor irá se deparar com uma tela cinza. Nesses casos, use o mínimo de overlays nestas páginas e intercale páginas com e sem overlay.

15.1.5 | Armazenamento dos arquivos que irão compor os overlays

Crie uma pasta para todas as imagens dos overlays de Panorama, Image Sequence e do controller de áudio do Audio & Video.

Se quiser conteúdo local HTML para um overlay de Web Content, também reúna todos os arquivos necessários em uma pasta separada.

De preferência, para facilitar sua localização, deixe essas pastas dentro da pasta de arquivo do artigo em que elas são usadas. Sugerimos nomear essas pastas com o tipo de overlay ou, então, com o tipo de overlay e o tema a que se refere.

Para as imagens, áudios e vídeos dos outros overlays, deixe tudo na pasta links, dentro da pasta de artigo em que esses arquivos de mídia foram usados.

16 | INSERÇÃO DE ELEMENTOS DE NAVEGAÇÃO NAS REVISTAS DIGITAIS

Neste capítulo será descrito o processo de inserção de elementos de navegação que permite que o leitor passeie pela revista digital de forma similar ao de um web site e seus hiperlinks.

16.1 | Overlays de hiperlinks

Um hiperlink se refere a um botão, um gráfico ou texto, que permite que o usuário navegue para uma outra página ou artigo da revista, para um web site ou para um aplicativo de envio de e-mail, entre outras possibilidades.

Há duas formas de se adicionar um hiperlink: pelo painel Buttons e pelo painel Hyperlinks.

16.1.1 | Crie hiperlinks com o painel Buttons

1. Crie o objeto que servirá de botão. Qualquer elemento pode servir para essa função: um frame gráfico com imagem, um frame de texto, um path ou ilustração vetorial.

Evite objetos menores do que 30 X 30 pixels, botões grandes são mais fáceis de serem identificados e apertados pelos leitores.

2. Abra o painel Buttons (menu Window/Interactive/Buttons). Selecione o objeto, clique no ícone Convert Object to a Button, que fica na parte inferior direita do painel. O seu objeto ganhará um contorno tracejado (quando o mouse passar em cima dele ou quando estiver selecionado) e ganhará um ícone de botão em seu canto inferior direito.

3. No campo Event, escolha a opção On Release, que é a única compatível com a ADPS. Isto aplicará a ação assim que o usuário tirar o dedo sobre ele.

As outras opções são recomendadas apenas para documentos interativos que serão manipulados por um mouse. On Roll Over, por exemplo, só irá efetuar a ação quando o ponteiro do mouse passar por cima do botão. Obviamente isso não funciona para uma interface que funciona com o toque de dedos.

4. Crie uma ação para o seu botão. Para isso, clique no sinal “+” ao lado de Actions. Uma lista irá aparecer, mas apenas algumas opções de hyperlinks são compatíveis com a solução ADPS, conforme a imagem a seguir.

Somente as ações em destaque são opções de hiperlink permitidas pela ADPS.

Opte pelas opções Go To First Page, Go To Last Page, Go To URL e Go To Page para criar botões de hiperlinks. Existem outras opções que podem ser usadas para a criação de um slideshow, mas veremos isso mais adiante.

É importante salientar que os botões da ADPS só podem realizar uma ação.

Go To First Page: Leva para a primeira página do artigo em que se encontra.

Go To Last Page: Leva para a última página do artigo em que se encontra.

Go To URL: Abre um browser e acessa o endereço URL especificado.

Go To Page: Leva para uma página específica do artigo em que ele está. Para isso, é preciso especificar o número da página no campo Page.

16.1.2 | Botão de hiperlink para outro artigo

Use a opção Go To URL para navegar em outro artigo.

1. Para isso, na caixa de texto da opção URL, troque “http://” por “navto://”.

2. Especifique o nome do artigo da forma como ele aparece no painel Folio Builder, ou seja, o nome da pasta onde estão guardados os arquivos INDD do seu artigo.

Nomeações válidas incluem navto://[nomedoartigo] e navto://[nomedoartigo]#n. Nesse caso, n se refere à página do artigo. A primeira página do artigo tem valor 0, portanto, para ir diretamente para a página 5, você deverá digitar “4” no lugar de “n”.

16.1.2.1 | Alterações da aparência dos botões

É possível também alterar a aparência dos botões quando ele for acionado ou quando ele estiver ativo.

1. Para isso, clique no símbolo do olho no estado “Click”. Dessa forma será ativada a edição da aparência do botão quando ele for clicado. Com este estado selecionado, será possível alterar à vontade a aparência do botão, como mudar o tamanho, a cor, a orientação etc.

Não ative o estado de Rollover que se encontra entre o estado Normal e o Click, pois esse é o estado quando o mouse está sobre o botão e isso não faz sentido na navegação por tablet.

A aparência do estado “Click” ficará visível para o leitor por alguns segundos a partir do momento em que ele tocar o botão, sinalizando que o botão foi acionado.

16.1.3 | Crie hiperlinks com o painel Hyperlinks

É possível usar também o painel Hyperlinks para acessar web sites, outros artigos ou outras páginas. No entanto, o painel Hyperlinks é mais recomendado para ser usado em textos.

Seguem algumas recomendações importantes:

- Se quiser que o texto inteiro seja um link, converta todo o seu frame em botão pelo painel Buttons.

- Tenha muito cuidado com textos de corpos muito pequenos, pois isso dificulta o acionamento dos seus hyperlinks.

- Não se esqueça de mudar também a cor do texto com hiperlink, para deixar claro ao leitor que ele pode tocar naquela palavra ou conjunto de palavras para navegar.

- Um hiperlink criado pelo painel Hyperlinks não muda sua aparência quando o leitor toca nela, pois não possui um estado de “Click” editável como no painel Buttons.

Passo a passo:

1. Selecione o frame ou texto que quer usar como hiperlink.

2. Abra o painel Hyperlinks (menu Windows/Interactive/Hyperlinks).

3. No painel Hyperlinks, vá no menu e escolha a opção New Hyperlink.

4. Desative a opção Shared Destination (essa opção deve ser evitada na solução ADPS).

5. No menu Link To, especifique uma URL (campo URL), endereço de e-mail (campo E-mail) ou página do seu artigo (campo Page), conforme veremos a seguir:

URL: Ao clicar em um hiperlink, o prefixo do endereço irá determinar se o leitor irá para um web site (http://), para uma página de aplicativo da App Store (itms://) ou para um artigo diferente da sua revista (navto://).

Ao fazer o link para uma página URL do iTunes App Store, desative a opção Open in Folio no painel Overlay Creator, caso contrário uma página de erro irá aparecer quando o botão for tocado.

A mesma opção deve ser desativada para um link do tipo itms:// para um aplicativo da App Store.

O link para um outro artigo funciona de modo similar ao do painel Buttons. Use o prefixo “navto://”. Depois, especifique o nome do artigo da forma como ele aparece no painel Folio Builder (ou seja, o nome da pasta onde estão guardados os arquivos INDD do seu artigo).

Nomeações válidas incluem navto://[nomedoartigo] e navto://[nomedoartigo]#n. Nesse caso, n se refere à página do artigo. A primeira página do artigo tem valor 0, portanto, para ir diretamente para a página 5, você deverá digitar “4” no lugar de “n”.

Email: Basta inserir um e-mail no campo Link To para que o leitor abra o aplicativo nativo de envio de e-mail ao clicar o botão.

Page: Não use esta opção para navegar para outros artigos, e sim a opção URL para isso, conforme explicado anteriormente.

Esta opção é para navegar pelas páginas do artigo em que o leitor está. Para isso, escolha o próprio arquivo no campo Document e selecione a página desejada no campo Page.

16.1.3.1 | Opções do Overlay Creator

Depois de ter criado seus hiperlinks, seja pelo painel Buttons, ou Hyperlinks, é possível editar como essas URLs serão abertas por meio do painel Overlay Creator.

Apenas botões com a ação Go To URL podem ser editados no Overlay Creator.

Textos com hiperlinks, por enquanto, não podem ser editados no painel, apenas frames e imagens vetoriais.

1. Selecione o frame ou path com link e vá para o painel Overlay Creator (menu Window/Extensions/Overlay Creator). Duas opções aparecem:

Open in Folio: Permite visualizar a página dentro do próprio aplicativo.

Não selecione essa opção se quiser um link para uma página do iTunes ou uma URL no formato “itms://” para um aplicativo da App Store. Textos com hiperlinks tem como padrão a opção Open in Folio e não podem ser editados.

Open in Device Browser: Permite visualizar a página em um browser nativo do seu tablet. Uma subopção aparece: Ask First. Se a opção for selecionada, o leitor será indagado previamente se quer mesmo acessar a página ao apertar o botão.

16.2 | Overlay Web Content

O Overlay Web Content permite visualizar e interagir com o conteúdo de uma página web disponível na Internet ou em um arquivo HTML local, usando o navegador nativo da revista e sem deixar a página em que o leitor está.

Sua importância para a mídia revista digital é enorme, pois ele agrega o dinamismo do conteúdo sempre atual da Web com a linguagem periódica do Folio. Por exemplo, agregar uma página do site ou blog da revista dentro de suas páginas, ou agregar o perfil do Twitter ou Facebook, levando os seus leitores a participarem de sua rede social de modo fácil e direto.

Caso esteja se perguntando: “Mas por que preciso incluir um website em uma revista?”. A resposta é que estamos falando de uma revista digital.

Pense sempre em um híbrido de impresso com Web. É preciso chamar muita atenção para que o leitor da sua revista impressa decida visitar seu website. Com o Web Content, ele não precisa nem digitar o endereço, o site já está lá dentro da própria página para ele ver.

Insira os seus sites e blogs, redes sociais, coloque a sua página de assinaturas.

Outra vantagem é poder transformar as suas animações Flash em HTML e visualizá-las com o Web Content, permitindo contornar o veto do iPad para conteúdo em Flash. Veremos como fazer isso no capítulo que trata de animações.

Para inserir um Web Content na sua página, siga o Passo a passo.

1. Abra o documento no InDesign.

2. Com a ferramenta Rectangle Frame Tool ou Rectangle Tool, crie um retângulo que será a área de visualização do conteúdo Web.

Procure criar uma área grande, para facilitar a visualização, mas que deixe um espaço livre em sua página para que o leitor possa também ativar o navegador da ADPS ou virar as páginas com facilidade.

É possível optar por inserir um pôster neste retângulo. O pôster é uma imagem estática que ocupa o espaço do seu overlay quando o leitor acessa a página.

No caso do Web Content, o pôster será substituído pelo overlay quando o leitor toca sobre ele, ou é substituído automaticamente pelo overlay se foi ativada a opção Auto Play no painel Overlay Creator.

A principal função do pôster é instruir o leitor de que essa área contém um arquivo interativo. Um exemplo seria criar um pôster cuja imagem é um fundo preto e texto branco dizendo “Toque aqui para conhecer nosso site”.

3. Para inserir o pôster, selecione o retângulo e use o comando Place no menu File. Escolha uma imagem que tenha, de preferência, as dimensões exatas das imagens que compõem seu Web Content.

4. Depois, com o retângulo selecionado, abra o painel Overlay Creator, e entre nas opções do Web Content.

URL or File: Especifique o endereço Web da página que quer mostrar, ou clique no ícone da pasta para localizar e indicar uma pasta com todo o conteúdo HTML local que foi criado.

Optar por indicar uma URL tem a vantagem de ser um método simples, fácil e que não exige conhecimento em programação. Outra vantagem é poder direcionar os leitores a vídeos e arquivos que seriam muito pesados no download da revista. Porém, nem todos os tablets têm conexão direta com a Internet. Há os mais baratos que só têm conexão via Wi-Fi e não acessam a Web sem elas. Nesse caso, os leitores não irão conseguir acessar o conteúdo do seu overlay.

Lembre-se de indicar todo o endereço URL no campo de texto, incluindo o prefixo “http://”.

Para qualquer URL que se redireciona automaticamente para uma URL voltada a dispositivos móveis, especifique a URL de dispositivos móveis e não a URL original. Por exemplo, use “http://mobile.twittea.com/ ”ao invés de “http://twitter.com/”.

Optar por uma pasta com arquivos HTML tem a vantagem de que o leitor poderá sempre visualizar esse conteúdo Web, mesmo sem conexão com Internet. Porém, isso exigirá conhecimento em linguagem HTML e arquivos pesados como vídeos farão parte do tamanho total do download da revista.

Lembre-se de que todos os elementos que irão compor sua pasta HTML local devem estar dentro da mesma pasta. Esta pasta deve conter o arquivo HTML (como index.html) e qualquer imagem e script que for utilizado por esse arquivo. Nomeie esta pasta como “Html” ou qualquer nome de fácil identificação e coloque-a na pasta de arquivo em que ela será usada.

Auto Play: O overlay irá carregar automaticamente o conteúdo Web a partir do momento em que o leitor acessar a página com o overlay.

Delay: Se o Auto Play estiver ativado, especifique, em Delay, quanto tempo (0 e 60 segundos) o overlay irá esperar antes de automaticamente carregar o conteúdo Web a partir do momento em que o leitor entrou na página.

Transparent Background: Preserva a transparência de background de páginas HTML. Se essa opção estiver desativada, o Content Background da página será usado no lugar.

Allow User Interaction: Permite ao usuário interagir com a página. Ele poderá, por exemplo, clicar em qualquer link disponível para ir a uma outra página Web.

Recomendamos que tome cuidado com essa opção. A revista digital já deve chamar o interesse e concorrer com todos os outros aplicativos que o leitor instalou em seu tablet. Por isso, é preciso focar o interesse dele na revista. Se existir acesso total à Web pelo Web Content, há o risco da atenção se dispersar com a navegação, saindo do site inicial e explorando a Web a contento. Se o seu Web Content busca a interação do usuário, ative essa opção, mas coloque o leitor diretamente na página de interesse. Se for apenas para visualizar conteúdo online, como os últimos twitts da revista, desative essa opção.

Scale Content to Fit: Permite que conteúdo Web seja escalonado para se adaptar ao tamanho do overlay. Se a opção não for ativada, a página Web terá o mesmo tamanho se fosse aberta no navegador padrão do dispositivo tablet. Isso pode ocasionar o corte de conteúdo para fora da área de visualização, e obrigar o leitor a sempre usar a barra de rolagem do overlay para ver toda a página, o que é uma experiência desconfortante.

17 | INSERÇÃO DE ELEMENTOS DE ÁUDIO, VÍDEO E ANIMAÇÕES

17.1 | Overlay de Áudio

Para revistas digitais, o melhor formato de áudio é o MP3.

As recomendações de preparação e conversão dos arquivos de áudio para este formato estão no capítulo “Preparação dos conteúdos”.

17.1.1 | Inserção de arquivos de áudio

Um arquivo de áudio pode ser inserido em um documento de InDesign da mesma forma como se insere uma imagem, ou seja por meio do comando Place do menu File. Basta localizar o arquivo e pressionar o botão Place.

Um frame com listras na diagonal irá aparecer junto ao ícone de um fone tocando música no canto superior esquerdo.

Esse frame pode ter qualquer dimensão, mas recomendamos que não o deixe muito pequeno para que o leitor não tenha dificuldades para pressioná-lo, nem muito grande a ponto de o leitor não ter espaço para ativar o navegador da ADPS ou virar a página.

17.2 | Overlay de Vídeos

Para arquivos de vídeo, recomendamos os formatos suportados pelo iTunes, como o MP4 com codificação h.264.

As recomendações de preparação e conversão dos arquivos de vídeo para este formato estão no capítulo “Preparação dos conteúdos”.

17.2.1 | Inserção de arquivos de vídeo

A inserção de um arquivo de vídeo ocorre da mesma forma que o de áudio ou imagem.

Use o comando Place do menu File. Localize o arquivo e pressione o botão Place.

Um frame com listras na diagonais irá aparecer temporariamente, com o ícone de uma película no canto superior esquerdo. Esse frame listrado será automaticamente substituído pelo frame do vídeo.

17.2.2 | Dimensões dos vídeos

Opte por vídeos na medida exata do tablet, que entram em modo de tela cheia, ou vídeos internos, que ocupam um determinado espaço da sua página.

Caso use um vídeo interno, crie um arquivo de vídeo com as dimensões exatas do vídeo que será usado, por exemplo, um vídeo com dimensões de 450 X 300 pixels.

Para filmes de tela cheia para o iPad e o Galaxy, crie filmes com largura de 1.024 pixels.

Recomenda-se arquivos de 10-12 MB de tamanho por minuto de filme para um bom equilíbrio entre peso do arquivo e qualidade do filme.

17.2.3 | Pôster para elementos de áudio e vídeo

É possível inserir um pôster no frame do vídeo ou áudio. Trata-se de uma imagem estática que aparece sobre a área do overlay assim que o leitor acessa a página.

A principal função do pôster é instruir o leitor de que essa área contém um arquivo interativo. Um exemplo seria criar um pôster cuja imagem é um fundo preto e texto branco dizendo “Toque aqui para assistir o vídeo” ou “Toque aqui para ouvir a música”.

Para inserir um pôster de áudio ou vídeo, selecione o frame que os contém e vá para o painel Media (menu Window/Interactivity/Media).

Esse paleta é muito útil para ter um preview do seu arquivo.

Recomendamos que não use as opções da área Options (para vídeo e áudio), pois é mais indicado configurar o Auto Play no Overlay Creator e a opção Loop não funciona corretamente.

Também não use as opções Controller e Navigation Points (somente para vídeo) pois estas opções do painel Media não funcionam com a ADPS. Mas as opções de Poster desse painel funcionam.

None: Não cria nenhum pôster, o que é muito ruim, afinal, como o leitor poderá saber que naquele espaço vazio existe um elemento interativo?

Standard: Um ícone padrão (um fone ou uma película) irá sinalizar ao leitor que há um elemento de áudio ou vídeo na página. Também não é uma opção recomendada, pois uma revista deve ser personalizada e os ícones não são atraentes.

From Current Frame: Essa opção é apenas para arquivos de vídeo. O frame do vídeo que estiver visível no painel Media se tornará o pôster de seu overlay. è possível controlar o frame que deseja com o controlador abaixo do vídeo no painel e depois clicar no ícone Click to use current frame as poster para atualizar o seu pôster.

Choose Image: Permite criar um pôster a partir de uma imagem. Deixe essa imagem dentro da pasta de artigo em que será usado seu vídeo ou áudio. Para melhores resultados, essa imagem deve ter a dimensão exata do frame e uma resolução de 72 ppi.

17.2.3.1 | Opções do Overlay Creator

Selecione seu arquivo de áudio ou vídeo e abra o painel Overlay Creator (menu Window/Extensions/Overlay Creator) para editar suas opções.

Controller Files: Clique no ícone da pasta para localizar e indicar uma pasta contendo as imagens dos botões Play (iniciar) e Pause (pausar). A ADPS irá inserir essas imagens sobre o overlay para indicar quando o áudio está tocando e quando está pausado. Sugerimos inseri-la na pasta de artigo em que se encontra o seu arquivo de áudio.

Essas imagens devem ter o formato PNG. Para melhores resultados, crie essas imagens com o mesmo tamanho do overlay de áudio. Por se tratarem de imagens PNG, se usar transparência, o pôster que foi escolhido para seu overlay de áudio aparecerá sob as partes transparentes dos botões.

É possível criar um par de botões, um que represente Play, e que deve ter obrigatoriamente o sufixo “_play”, e um que represente o Pause, e que deve ter obrigatoriamente o sufixo “_pause”.

Também é possível criar múltiplos botões de _play e _pause, que servem para indicar ao leitor o avanço do áudio.

Por exemplo, suponhamos que em pasta existam cinco botões _play e cinco botões _pause. Durante um período de tempo equivalente a um quinto do áudio, o leitor irá ver o primeiro botão de _play (se o áudio estiver pausado) e o primeiro botão de _pause (se o áudio estiver tocando).

Assim que o áudio passar desse período, o leitor verá o segundo botão de _play e _pause, e assim por diante.

Diferencie esses botões com números progressivos, mas antes dos sufixos _play e _pause.

Auto Play: Permite que seu arquivo de áudio ou vídeo comece automaticamente assim que o leitor acessar a página que contenha o elemento interativo.

Delay: Se a opção de Auto Play estiver ativada, é possível, em Delay, escolher o tempo de espera antes do vídeo ou áudio começar automaticamente a partir do momento em que o leitor acessou a página do overlay. Use um período entre 0 e 60 segundos.

Play Full Screen: Permite exibir o seu vídeo no modo de tela cheia. Se essa opção não estiver ativada, o vídeo será exibido dentro do frame da página em que foi inserido.

Tap to View Controller: Permite que o leitor toque no vídeo, enquanto ele está rodando, para revelar uma barra de controle com botões de Play e Pause. Se esta opção não estiver ativada, tocar o vídeo enquanto ele estiver rodando irá pausá-lo.

17.2.3.2 | Navegação por páginas que contenham áudio e vídeo

Se um elemento de áudio ou vídeo estiver rodando, o leitor poderá navegar por todas as páginas do artigo sem interrompê-los (desde que o vídeo não esteja em modo de tela cheia).

Mas, se o leitor mudar de artigo, eles serão interrompidos e reiniciados.

Além disso, só é possível ativar um áudio ou vídeo por vez. Se um estiver rodando e o segundo ser ativado, o primeiro irá automaticamente pausar para o segundo começar.

Mas, é possível usar os outros overlays enquanto um áudio ou vídeo estiver rodando, sem interrompê-los.

17.2.3.3 | Dicas importantes para o uso de elementos de áudio e vídeo

- Seja parcimonioso com arquivos de vídeo, pois eles tornam os arquivos das revistas digitais muito pesados.

- Geralmente, o leitor que adquire uma revista digital quer ler uma revista, e não assistir filmes. Por isso, é melhor inserir diversos vídeos de curta duração do que alguns poucos vídeos extensos. Foque mais no YouTube e menos em Hollywood.

- Use e abuse nos vídeos que servem para introduzir a sua capa, as boas vindas do editor ao leitor, making-of da revista ou de um dos artigos, vídeos com uma seção exclusiva da entrevista que o leitor acabou de ler. Sua imaginação é o limite.

- Quanto ao áudio, ele pode ter muitas funções. Pode servir para criar um ambiente de leitura, mas também para acrescentar informação jornalística, como ouvir diretamente os depoimentos dos entrevistados.

17.3 | Animações

Um dos formatos mais populares de animações vetoriais é o Flash, mas infelizmente, pelo menos por enquanto, não é suportado pelo InDesign para ser inserido diretamente dentro de Folios para leitura em dispositivos que usam Android e também não rodam nos iPads, pois a Apple não dá suporte para esse tipo de arquivo em seus dispositivos móveis.

Por isso, uma animação em Flash deverá ser convertida para outro formato e existem algumas técnicas para se fazer isso.

Mas, antes, crie ou verifique se sua animação tem um tamanho menor do que a maioria das telas dos tablets (menor do que 800 X 600 pixels, por exemplo) para evitar uma readaptação na animação para outros formatos. Salve a sua animação no formato FLA.

17.3.1 | Conversão de um arquivo Flash em uma sequência de imagens

A primeira forma de converter uma animação no formato Flash em um formato que possa ser lido em um iPad é rasterizá-la e transformá-la em um overlay Image Sequence. Use este Passo a passo.

1. Com a sua animação pronta e aberta no Flash, vá no menu File/Export/Export Movie. Uma caixa irá se abrir, escolha uma pasta vazia para salvar seus arquivos e no campo Format, escolha a opção JPEG Sequence. Essa opção irá salvar toda a sua animação em uma sequência de imagens JPEG. Clique em OK.

2. A caixa Export JPEG irá aparecer. Mantenha a largura e a altura determinada para a sua animação, com resolução de 72 dpi e clique em OK. Espere o Flash realizar a exportação.

3. Insira a pasta com todos os JPEGs na pasta de artigo que terá a animação.

4. Abra o seu documento de InDesign. Crie um retângulo com as dimensões exatas da sua animação.

5. Selecione esse retângulo, abra o painel Overlay Creator e habilite a opção Image Sequence.

Em Load Images, clique no ícone da pasta e selecione a pasta dos JPEGs.

Se quiser uma animação automática, selecione Auto Play. Teste sua animação clicando em Preview, no canto inferior esquerdo do painel Overlay Creator.

Se quiser que sua animação seja contínua, como uma borboleta batendo as asas eternamente, por exemplo, faça uma animação no Flash cujo último frame termine de forma igual ao primeiro frame. Depois, no Overlay Panel, nas opções do Image Sequence, ative a opção Loop.

17.3.2 | Conversão de um arquivo Flash em um vídeo

A segunda forma de se converter uma animação no formato Flash, é transformá-lo em um vídeo no formato MP4.

1. Com a animação pronta e aberta no Flash, vá no menu File/Export/Export Movie. Uma caixa irá se abrir, escolha uma pasta vazia fora da pasta da sua revista digital para salvar esse vídeo e, em Format, escolha a opção QuickTime.

2. Importe a animação no formato QuickTime no Adobe Media Encoder, e use o aplicativo para converter a animação no formato MP4, com codificação h.264.

3. Insira este vídeo MP4 na pasta de arquivo em que ele será usado.

4. Abra o InDesign e importe esse vídeo.

Insira-o no documento com tamanho exato de sua dimensão em pixels.

Vá no Overlay Creator e edite as opções de vídeo. Ative Auto Play se quiser que o vídeo comece automaticamente, por exemplo. Use o Preview, no canto inferior esquerdo do painel Overlay Creator, para testar a animação.

17.3.3 | Conversão de um arquivo Flash em um arquivo HTML

Para converter um arquivo Flash em um arquivo HTML, faça o download do Wallaby, que é um aplicativo ainda em betateste. Ele pode ser encontrado no site da Adobe Labs (http://goo.gl/vFERL).

1. Instale-o e abra-o.

2. Configure-o:

Select FLA File to Convert: Neste campo, clique em Browse para localizar e indicar um ou mais arquivos FLA, ou simplesmente arraste um ou mais arquivos FLA para esta janela.

Preferences: Ao clicar em Preferences, uma janela com duas opções se abrirá .Ative Preview in Default Browser para abrir cada arquivo FLA convertido no navegador padrão de seu computador. Ative Enable Logging para que o Wallaby gere um arquivo de relatório (log file) de formato .log para cada arquivo FLA convertido.

3. Pressione o botão Convert para converter seu arquivo Flash. A área Status irá indicar se a conversão foi bem- sucedida ou se conteve erros.

Erros e alertas ocorridos na conversão serão citados na janela Errors & Warnings. Se tudo deu certo, nada irá aparecer nesta janela.

4. Coloque todos os arquivos gerados pelo Wallaby na mesma pasta, com um nome de fácil identificação como “AnimacaoHTML” e a insira na pasta do artigo em que ela será usada.

5. Abra seu documento do InDesign, crie um retângulo com as mesmas dimensões da sua animação.

6. Selecione esse retângulo e vá no painel Overlay Creator, na parte do Web Content. Lá, indique em URL or File, o arquivo HTML gerado. Clique em Preview no canto inferior esquerdo do painel para testar a sua animação.

18 | INSERÇÃO DE ELEMENTOS DE INTERATIVIDADE COM IMAGENS BITMAP

18.1 | Efeitos com imagens bitmap

18.1.1 | Overlay de Slideshow

O overlay Slideshow cria slides que podem conter mais de um objeto, como um conjunto de imagens e textos. Ou seja, cada slide tem seus próprios frames de texto, frames de imagem e imagens vetoriais.

Algumas observações importantes:

- Um slide, por ser uma interação, não pode conter objetos interativos como conteúdo. Portanto, não pode inserir slides dentro de slides, vídeos, áudios e outros overlays, pois eles irão perder sua interatividade e não responderão a ação do leitor.

- As imagens que compõem um slideshow serão convertidas em imagens PNG ao serem exportadas para um Folio.

- Atualmente não é possível fazer um slideshow de tela inteira.

Passo a passo:

1. Abra o painel Object States no menu Window/Extensions/Object States.

2. Selecione todos os elementos que irão compor os seus slides. Esses elementos podem ser de qualquer natureza: frames de texto, frames de imagem ou imagens vetoriais.

3. No menu do painel Object States, clique em New State. Todos os elementos selecionados agora foram separados em estados de objeto. Apenas um elemento está visível em seu documento, o primeiro estado de objeto, que será o primeiro slide do Slideshow. Mas os demais podem ser visualizados selecionando-os pelo painel Object States.

Ao criar os slides, um contorno seccionado revela todo o espaço ocupado por eles, até mesmo o espaço ocupado pelos slides que não estão visíveis no documento. Além disso, um ícone de estados de objeto ficará visível no canto inferior direito do contorno.

Se quiser slides cujo conteúdo sejam frames com o mesmo tamanho e todos bem alinhados, selecione cada um e determine seu tamanho e altura nos valores W (Weight, largura em inglês) e H (Height, altura em inglês) no painel de controle.

18.1.1.1 | Ajustes nos frames

Pode ocorrer que o conteúdo de um frame precise ser reajustado depois de alterar o tamanho do frame.

1. Com o frame selecionado, vá no menu Object/Fitting/Fit Content Proportionally.

2. Depois, selecione todos os frames, vá no painel Align (menu Window/Object & Layout/Align). Na área Align Objects selecione Align left edges e Align top edges.

Se os elementos não estiverem perfeitamente alinhados, o leitor perceberá que cada slide se “movimenta” ao apertar os botões, e isso irá distraí-lo.

18.1.1.2 | Slideshow mais complexo

Para fazer um slideshow mais complexo, no qual cada slide apresenta seu próprio conjunto de frames de imagens, textos e imagens vetoriais, siga estes passos.

1. Selecione todos os elementos que farão parte do seu primeiro slide e agrupe-os no menu Object/Group.

2. Com todos os elementos agrupados, vá no painel Object States e no menu do painel escolha o comando New State.

O painel irá criar dois slides iguais. Não se preocupe, cada slide pode ser editado.

3. Selecione o segundo slide e altere à vontade o conteúdo do texto e das imagens.

Se quiser um terceiro slide, selecione o segundo slide no painel Object States, entre no menu do painel e escolha New State. Um terceiro slide será criado, cópia do segundo.

É possível, também editá-lo, assim como adicionar quantos slides quiser.

4. Escolha no painel Object States um nome para o grupo de slides no campo Object Name.

Se quiser criar a mesma sequência de slides tanto na página horizontal como na vertical, então cada documento deverá ter o seu grupo de slides, ambos com o mesmo nome no campo Object Name. Isso permite manter a continuidade quando o tablet é rotacionado. Ou seja, se o leitor estiver no quarto slide na página horizontal e girar o seu tablet, ele não voltarará para o primeiro slide, pelo contrário, continuará no slide em que ele estava anteriormente.

Cuidado ao copiar e colar seu grupo de slides de um documento para o outro. Ao fazer isso, o nome no campo Object Name do slideshow colado irá se alterar. Se o slideshow original fosse chamado de “exemplo”, o novo slideshow se tornaria “exemplo2”. E essa mudança de nome quebra a continuidade do slideshow ao rotacionarmos o tablet. Por isso, renomeie imediatamente seu slideshow depois de copiá-lo para uma nova página.

Ao nomear cada um de seus slides no painel Object States, ou nomear todo o conjunto de slides no campo Object Name do mesmo painel, nunca use pontuações ou caracteres especiais, para evitar problemas na exportação.

18.1.1.3 | Botões de navegação para o slideshow

Crie botões que irão permitir ao leitor navegar pelos slides, porém eles não são obrigatórios (Opte no painel Overlay Creator, por criar um slideshow que muda de slides automaticamente ou que possa ser navegado quando o leitor arrasta o dedo sobre o próprio slide).

Para criar esses botões de navegação, use este passo a passo:

1. Selecione o elemento que servirá de botão, abra o painel Buttons (menu Window/Interactive/Buttons) e clique no ícone Convert Object to Button.

No campo Event, escolha On Release, a única opção suportada pela ADPS. No campo Actions, clique no sinal “+”. Na lista que será apresentada, as opções Go To State, Go To Next State e Go To Previous State podem ser usadas.

Go To State: Levará o leitor para um slide específico.

Go To Next State: Levará o leitor para o próximo slide.

Go To Previous State: Levará o leitor para o slide anterior.

18.1.1.4 | Aparência do botão

É possível alterar a aparência do seu botão de navegação de slides quando ele for clicado.

1. Selecione o seu botão.

2. Ative a opção [Click] na área Appearance do painel Buttons.

O [Click] é a aparência do seu botão quando ele for clicado. Se ele estiver selecionado, pode alterar sua aparência normalmente, como qualquer elemento editável do InDesign.

Se um botão possuir a ação Go To State, a aparência de [Click] dele permanecerá visível enquanto o slide a que se refere o botão estiver selecionado. Isso é muito bom para o leitor saber qual botão ele apertou por último e ter certeza em que slide ele se encontra.

Já os botões com ação Go To Next State e Go To Previous State apenas mostrarão sua aparência de [Click] por um breve instante para demonstrar que foram ativados.

18.1.1.5 | Opções do Overlay Creator

Com o slideshow pronto, incluindo ou não botões de navegação, chegou a hora de editar opções adicionais de interatividade no Overlay Creator.

1. Selecione o seu slideshow, abra o painel Overlay Creator e entre na opção Slideshow. As seguintes opções podem ser ativadas:

Auto Play: Permite que o seu slideshow comece automaticamente. Essa opção pode ser personalizada:

Delay representa quantos segundos o Slideshow deverá esperar antes de começar automaticamente a partir do instante em que o leitor entrou na página do slideshow. Especifique um tempo entre 0 e 60 segundos.

Se Auto Play ou Tap to Play/Pause estiverem ativados, pode-se decidir no campo Interval, a duração da visualização de cada slide.

Se Auto Play ou Tap to Play/Pause estiverem ativados e a opção Loop estiver desativada, você pode especificar no campo Play_times, a quantidade de vezes que o slideshow será mostrado.

Se um slideshow automático for apresentado determinado número de vezes (com a opção Loop desativada), o slideshow irá parar no primeiro slide. Se quiser que o slideshow pare no último slide, então será preciso reverter a ordem dos slides no painel Object States e selecionar a opção Play in Reverse State Order no painel Overlay Creator. Isso fará com que o slideshow mantenha a sequência desejada, mas pare no primeiro slide do Object States, que é na verdade o último slide a ser apresentado.

Se Auto Play ou Tap to Play/Pause estiverem ativados, a opção Loop fará com que o slideshow não tenha fim: o último slide irá voltar para o primeiro. O slideshow só irá parar se o leitor tocar duas vezes na tela ou mudar de página.

Cross Fade: Permite uma transição de slides menos “dura”, na qual o slide atual aumenta sua transparência, revelando o próximo slide, até este estar totalmente visível. Especifique um valor entre 0.125 e 60 segundos. Essa opção funciona tanto para slideshows automáticos como os que usam botões de navegação.

Tap to Play/Pause: Permite que o leitor toque uma vez em um slideshow automático para iniciá-lo ou pausá-lo. Se o leitor tocar no slideshow duas vezes, ele será reiniciado

Swipe to Change Image: Permite navegar por um slideshow ao mover os dedos sobre um slide.

Com a opção Swipe to Change Image selecionada, pode-se ativar Stop at First/Last Image para que o slideshow pare no último slide quando o leitor avançar na apresentação ou no primeiro slide quando o leitor recuar (caso contrário o leitor poderá avançar e recuar continuamente). Essa opção se refere apenas à navegação direta com os dedos do leitor sobre o slide.

Hide Before Playing: Permite esconder o slideshow até o momento em que o leitor toque um botão para visualizar um slide. Isso é interessante para mostrar uma imagem estática, sem interatividade, antes do slideshow aparecer por cima dela.

Play in Reverse: Permite que o slideshow mostre as imagens na ordem reversa em relação a ordem dos slides no painel Object States.

18.1.1.6 | Dicas para slideshows

Em nosso exemplo da revista Photoshop Pro, optamos por fazer um slideshow complexo.

Como o assunto aborda tutoriais de Photoshop, em diversos passos, cada passo se transformou em um slide. Isso permite colocar o tutorial inteiro em uma página. Cada slide contém as instruções do que fazer no Photoshop junto a imagens ilustrativas.

Outro exemplo interessante foi a criação de botões de “antes” e “depois” para cada tutorial. Ou seja, é possível ver na mesma página a imagem original e a imagem depois do tratamento no Photoshop.

Optamos por botões com a ação Go To State ao invés de botões Go To Next State e/ou Go To Previous State pois queríamos que tivessem sua aparência alterada quando seu respectivo slide fosse selecionado.

Dessa forma o leitor saberá qual botão está ativado no momento, se é o do “antes” ou “depois”.

18.1.2 | Overlay de Image Sequence

Esse tipo de interatividade era conhecido anteriormente como Imagem de 360º pois seu exemplo mais famoso é uma sequência de imagens de um mesmo objeto, mas em ângulos diferentes.

Essa sequência, ao ser manipulada pelo leitor, cria a ilusão de óptica de que ele está “girando” o objeto.

Mas o Image Sequence permite mais do que isso. É possível criar, praticamente, qualquer sequência de imagens.

A diferença do Image Sequence para um Slideshow é que ele apresenta suas sequência de imagens em uma ordem determinada, enquanto que o Slideshow pode ser apresentado na ordem que o leitor desejar.

Além disso, a navegação do Image Sequence é feita somente por meio do toque do usuário no próprio Overlay e não é permitido o uso de botões.

Por fim, a principal diferença está na rapidez da apresentação do Image Sequence. Com o passar dos dedos, diversas imagens passam tão rápido que permitem criar efeitos impressionantes.

Além da rotação de 360º já mencionada, é possível dar ao leitor a sensação de controlar uma animação, como um pôr-do-sol, em que, o dedo controla a própria posição do sol na paisagem.

Portanto, o Image Sequence é recomendado para criação destes efeitos especiais, caso contrário, recomenda-se apresentar suas imagens em um Slideshow.

Cuidados importantes:

- As imagens que irão compor o Image Sequence devem estar em formato PNG ou JPEG e ter o mesmo nome na raiz, com uma mudança numérica progressiva no sufixo. Por exemplo: “Imagem_001.jpg”, “Imagem_002.jpg”, “Imagem_003.jpg” etc. Para melhores resultados, deixe as dimensões das imagens na medida exata em pixels em que elas serão visualizadas na página, além da resolução de 72 ppi.

- Para criar uma rotação suave de 360º use pelo menos 30 imagens. Mais do que isso irá aumentar o tamanho da sua revista desnecessariamente. Por se tratar de 30 imagens, cada uma deve mostrar o objeto com 12º de diferença em sua posição anterior.

- Para reduzir o tamanho desse Overlay, use preferencialmente imagens JPEG de qualidade média e compressão de 50% a 80%. Se precisar usar transparência, use apenas arquivos PNG.

18.1.2.1 | Imagens a partir de objetos 3D

Há diversas formas e aplicativos para se criar imagens a partir de um objeto 3D.

Vamos explicar a seguir um modo simples, por meio do recurso Repoussé do Photoshop CS5, e que não exige conhecimento avançado em programas dedicados a imagens tridimensionais, como o Modo ou Maya.

1. Abra o Photoshop e crie um novo documento no menu File/New. Com as dimensões exatas do seu overlay, 72 ppi, modo RGB e background transparente. Clique em OK.

2. Crie ou importe a sua imagem, máscara, texto ou path para este documento. Deixe tudo que fará parte da imagem 3D em um mesmo layer.

3. Selecione o layer da sua imagem. Se for um layer de texto, com o símbolo “T” no thumbnail, vá para o menu 3D/Repoussé/Text Layer.

Caso seja um path, selecione-o no painel Paths e vá para o menu 3D/Repoussé/Selected Path.

Se for uma máscara, selecione-a e vá para o menu 3D/Repoussé/Layer Mask.

Por fim, se for um layer de imagem, selecione o conteúdo do layer clicando em cima do thumbnail com o botão Control (Win) ou Command (Mac OS) pressionado, e, depois, vá para o menu 3D/Repoussé/Current Selection.

Essa opção só estará disponível se o seu computador tiver uma placa gráfica não integrada na motherboard. Também será preciso habilitar a aceleração de hardware via OpenGL, para isso vá em Edit/Preferences/Performance (no Windows) ou Photoshop/Preferences/Performance (no Mac OS).

4. A caixa de diálogo Repoussé se abre. Edite a extrusão aplicada na sua imagem pelas coordenadas dentro da caixa Extrude. Clique em OK.

No caso do símbolo do grupo PhotoPro, o efeito de “giro” no extrude foi alcançado ao aumentar o valor de Twist para 100. O buraco que passa através do círculo foi criado ao selecionar Hole da opção Type, em Internal Constraints.

5. Para renderizar sua imagem com qualidade, use o Adobe Ray Tracer, que é mais refinado que o OpenGL.

Para isso, selecione o layer de sua imagem e vá para o painel 3D (menu Window/3D) e escolha a opção Ray Traced Final no campo Quality. Espere a imagem ser progressivamente renderizada na tela.

6. Salve uma cópia desta imagem, lembrando-se de nomeá-la com um sufixo numérico. Pode ser “imagem_001”, por exemplo. Salve em JPG com compressão média ou PNG Caso queira usar transparência.

7. Para as próximas imagens, reverta a opção Quality de volta para Interactive para que o renderizador não tome o seu tempo.

Com o layer selecionado, escolha a ferramenta Object Rotate Tool no painel de ferramentas.

Não rotacione a imagem manualmente, no painel Options Panel e, nas coordenadas de Orientation, altere o valor de uma das coordenadas para 12. Isso irá rotacionar a imagem em 12º em um de seus eixos.

8. Ative novamente o Adobe Ray Tracer e salve uma cópia dessa imagem com um sufixo numérico progressivo. Se a primeira imagem foi “imagem_001”, esta deve ser “imagem_002”. Continue realizando a rotação de 12º dos passos anteriores até criar 30 imagens. Sugerimos criar uma ação para isso.

9. Reúna todas as imagens em uma mesma pasta. Nomeie a como “imagesequence” ou qualquer nome de fácil identificação e a insira na pasta de artigo em que seu overlay será usado.

18.1.2.2 | Insira o Image Sequence na sua página

Agora que existe uma pasta contendo sua sequência de imagens, siga este Passo a passo:

1. Abra o documento de InDesign no qual quer inserir seu overlay e crie um retângulo com a ferramenta Rectangle Tool ou Rectangle Frame. Esse retângulo servirá como um frame representativo do seu overlay.

2. Existe a opção de inserir um pôster neste retângulo. O pôster é uma imagem estática que ocupa o espaço do seu overlay quando o leitor acessa a página.

No caso do Image Sequence, o pôster é substituído pelo overlay quando o leitor toca sobre ele.

A principal função do pôster é instruir o leitor de que essa área contém um arquivo interativo. Um exemplo seria criar um pôster cuja imagem é um fundo preto e texto branco dizendo “Toque aqui para ver nosso logo em 360º”.

Para isso, selecione o retângulo e vá no menu File/Place e escolha uma imagem que tenha, de preferência, as dimensões exatas das imagens que compõem seu Image Sequence.

3. Selecione o retângulo e acesse o painel Overlay Creator, escolha o overlay Image Sequence para editar suas opções.

4. Em Load Images, clique no ícone da pasta para localizá-la e indique onde se encontram todas as imagens que compõem seu Image Sequence.

Se as imagens não tiverem as medidas exatas do seu retângulo, faça ajustes no frame ou no conteúdo.

Se selecionar a opção Show First Image Inicially, a primeira imagem da Image Sequence será usada como pôster. Se a opção Play in Reverse estiver ativada, a última imagem da Image Sequence será usada como pôster. Ative Auto Play para que a Image Sequence comece automaticamente.

Se Auto Play estiver ativado, especifique no campo Delay, o tempo de espera antes do seu Image Sequence começar automaticamente a partir do momento em que o leitor acessar a página. Defina com um valor entre 0 e 60 segundos.

Se Auto Play ou Tap to Play/Pause estiver ativado, decida, em Speed, a velocidade em frames por segundo (fps) do seu Image Sequence. Nesse caso, cada imagem que compõe o Image Sequence equivale a um frame. O valor mínimo é 1 (uma imagem do Image Sequence é mostrada a cada segundo) e o máximo é 30. Recomendamos o valor máximo para animações.

Se Auto Play ou Tap to Play/Pause estiver ativado e o Loop estiver desativado, decida em Play_time, a quantidade de vezes que a sua sequência de imagens será mostrada.

Se Auto Play ou Tap to Play/Pause estiver ativado, selecione a opção Loop para que sua sequência de imagens seja contínua. Toda vez que o overlay chegar na última imagem, ele irá recomeçar sua apresentação. Se o leitor tocar duas vezes no overlay, ele irá interromper a apresentação contínua.

Ative Tap to Play/Pause para que o leitor possa tocar no overlay para iniciar ou pausar a sequência automática de imagens. Ao tocar duas vezes no overlay, a sequência é reiniciada.

Ative Swipe to Change Image para que a sequência de imagens seja avançada ou retrocedida pelo movimento do dedo do leitor sobre o overlay. Se não quiser esta opção, deverá escolher Auto Play ou Tap to Play/Pause.

Se Swipe to Change Image estiver ativado, ative também Stop at First/Last Image para que o overlay termine na última imagem quando o leitor avançar e termine na primeira imagem quando ele retroceder Isso se refere apenas a navegação com o dedo do leitor sobre o overlay.

Ative Play In Reverse para que a sequência de imagens seja apresentada na ordem inversa.

18.1.3 | Efeito de Panorama de imagens

O efeito Panorama cria a ilusão de estar dentro de um ambiente 3D, além de rotacionar sua visão em 360º e dar zoom.

O que o Panorama realmente faz é reunir seis imagens e para montá-las na forma de um cubo, sendo cada imagem uma face interna dele. O leitor visualiza então o resultado como se estivesse dentro do cubo.

Portanto, para criar este efeito, são necessárias de seis imagens, uma para cada face do cubo, sendo uma de base, uma de topo e quatro laterais.

Recomendamos imagens em formato JPEG com 72 ppi, pois resoluções maiores permitem que o zoom fique nítido, mas aumentam muito o tamanho do arquivo.

18.1.3.1 | Criação de imagens para o Panorama

O aspecto mais difícil desse efeito está na composição e produção das imagens.

Panoramas de lugares reais exigem técnicas avançadas de fotografia e pós-produção. Panoramas artificiais podem ser criados com aplicativos de imagens 3D.

Algumas recomendações:

- Para criar panoramas reais, recomendamos o uso de uma câmera digital SLR com uma lente “olho de peixe”. O importante é que a lente tenha um ângulo de visão muito amplo, exigindo uma quantidade menor de fotos para registrar todo o campo de visão da posição do fotógrafo.

- Evite também problemas de paralaxe, que é a aparência de que a posição de um objeto se modificou devido à mudança de posição do observador. Para isso, não mude de posição ao capturar as imagens e sugerimos equipamentos profissionais como tripés com cabeça para movimento de Pan 360º que oferece a estabilidade a sua câmera.

- Não mude a distância focal durante a produção das fotos, portanto, nada de zoom in e zoom out.

- Salve as suas imagens em RAW antes da pós-produção, para que possa trabalhar com a melhor qualidade possível antes da conversão final das imagens para JPEG.

- Use o Photoshop para reunir todas as fotos que tirou e fazer uma colagem, criando uma imagem única que, depois, será separada em seis partes para formar o cubo 3D.

- O importante é que todas as fotos tenham áreas que se sobreponham as bordas das outras fotos, facilitando a integração das imagens na pós-produção. Recomendamos a sobreposição de, no mínimo, 40% de uma imagem sobre a outra.

1. Para facilitar e automatizar esse trabalho de colagem, coloque todas as fotos que produziu em uma pasta. Depois, no Photoshop, vá no menu File/Automate/Photomerge.

2. Na caixa Source Files, escolha em Use, a opção Folder. Clique em Browse para localizar e indicar a sua pasta de fotos. Ative a opção Blend Images Together. Na caixa de Layout, escolha a opção Spherical que irá editar suas imagens, mapeando-as como se elas tivessem sido inseridas no lado interno de uma esfera.

Mas, se optou por uma lente “olho de peixe” para produzir as fotos, escolha Auto como opção de Layout e ative também a opção Geometric Distortion Correction, essa opção irá corrigir distorções criadas pela lente.

3. Clique em OK. e o Photoshop irá transformar cada foto em um layer e alinhá-los com o uso de máscaras.

É possível editar as imagens e as máscaras para corrigir qualquer imperfeição que aparecer na colagem.

Podem surgir pixels transparentes nas bordas da sua imagem panorâmica. Nesse caso, use a ferramenta Crop Tool para cortar a sua imagem. Ou então, se a parte faltante for um fundo homogêneo como céu ou um campo, selecione a parte transparente de sua imagem e alguns pixels em seu entorno e vá no menu Edit/Fill/Content Aware. A seleção será preenchida de acordo com os pixels que estão ao redor da parte transparente.

4. Uma vez que a imagem panorâmica estiver pronta, será preciso dividí-la em seis imagens quadradas para compor o seu cubo.

Para isso, a Adobe recomenda o uso do software Pano2VR., que pode ser encontrado no site http://goo.gl/5GzYH . Na versão trial, ele deixará marcas d’água nas imagens.

Com o PanoV2R aberto, arraste a imagem que foi criada para dentro da janela Input.

Imagem de Bob Bringhurst

5. Clique em Convert Input. Em Type, selecione a opção Cube Faces e determine em Width a largura em pixels de cada face do cubo. Na opção Format, escolha JPEG (.jpg). Pressione Convert para criar seis imagens no endereço especificado em New Path.

6. Com as seis imagens prontas, as insira em uma pasta de nome “panorama” para facilitar sua identificação e coloque na pasta de artigo onde ela será usada.

7. Abra o documento de InDesign no qual o overlay Panorama será criado. Selecione a ferramenta Rectangle Frame Tool ou a Rectangle Tool e desenhe uma forma retangular em seu documento. Selecione-a e abra o painel Overlay Creator, nas opções de Panorama e configure suas opções.

Load Images: Clique no ícone da pasta para localizar e indicar a pasta com as suas seis imagens do panorama.

Use First Image for Poster: Ative esta opção para que a primeira imagem da sua pasta de panorama seja o pôster do overlay. O pôster é uma imagem estática que ocupa o espaço do seu overlay quando o leitor acessa a página. No caso do Panorama, o pôster é substituído pela visualização do ambiente 3D quando o leitor toca sobre ele. e sua principal função é instruir o leitor de que essa área contém um arquivo interativo.

Se não quiser uma imagem de seu panorama como pôster, não ative a opção First Image for Poster. Selecione o retângulo, vá no menu File/Place e escolha uma imagem na sua pasta de artigo que tenha, de preferência, as dimensões exatas do seu retângulo.

Independentemente da imagem do seu pôster, deixe bem claro ao leitor que aquilo é um efeito de 360º. Muitos leitores tocam no overlay e vêem a imagem ampliada do panorama sem saber que podem navegar para qualquer direção. Acham que se trata apenas de uma imagem estática ampliada e clicam diretamente no “X”, botão que fecha a visualização do ambiente, para voltar na página que estavam. Por isso, sugerimos ir além de colocar um ícone denotando interatividade. Insira textos ao lado do overlay ou no próprio overlay, usando a imagem do pôster, para explicar que se trata de um ambiente 3D interativo.

Inicial Zoom: Define os valores de zoom da imagem inicial. Especifique um valor entre a coordenada mínima e máxima. Essas coordenadas serão definidas em Field of View. Quanto menor o valor, mais próximo das faces do cubo estará o leitor.

Vertical/Horizontal: Especifique nestes campos os valores da área inicial que o leitor irá ver ao ativar o efeito. Especifique em Vertical o valor mínimo de -90 (o leitor verá inicialmente o chão do panorama) e o valor máximo de 90 (o leitor verá o teto). Para Horizontal, o valor mínimo é de -180 (rotaciona a visão inicial para toda a esquerda) e valor máximo de 180 (rotaciona a visão inicial para toda a direita).

Field of View: Especifica os valores mínimos e máximos do zoom. Se os dois campos tiverem o mesmo valor que o Inicial Zoom, o leitor não poderá dar zoom in e zoom out na visualização do ambiente.

Limit Vertical Pan: Limita o quanto o leitor pode rotacionar sua visão pelo eixo vertical. Recomendamos usar essa opção, pois, sem ela, o leitor que girar pelo eixo vertical até atingir o topo (-90º no valor Up) ou o chão (90º no valor Down) do panorama poderá continuar girando e visualizar o ambiente de “cabeça para baixo” – o que torna a navegação confusa. Usar o valor mínimo de -90º e máximo de 90º impede que o leitor possa dar voltas infinitas. Restringir esses valores diminui ainda mais o campo de visão. Se não quiser que o leitor se mova no eixo vertical, use o valor -1 em Up e 1 em Down.

Limit Horizontal Pan: Limita o quanto o leitor pode rotacionar pelo eixo horizontal. Se opção não estiver ativada, o leitor poderá girar quantas vezes quiser por esse eixo. Mas pode ser que o designer queira só dar destaque a uma parte do panorama, por exemplo, todos os controles de uma aeronave, mas não a porta de entrada que fica atrás. Se a intenção é permitir a visualização de metade do panorama, deixe -180 no valor de Left e 180 no valor de Right.

18.1.3.2 | Outras dicas

Esse efeito exige muito trabalho mas também gera resultados fantásticos. Seguem mais algumas dicas de aplicação:

- Procure usá-lo em ambientes inusitados, ricos em detalhes por todos os lados. Imagine uma propaganda de carro na qual se vê o interior do modelo como se fosse o motorista, ou conhecer os repórteres e editores da revista ao explorar sua sala de redação, ou mostrar o camarim de uma celebridade famosa.

- O review de um videogame poderá mostrar o ambiente de um jogo, revistas de decoração poderão mostrar salas e quartos.

- Como seria uma visão panorâmica da Guernica de Picasso? O que haveria do outro lado do corredor na pintura O Grito de Munch?

- Use a imaginação e surpreenda o leitor: o panorama na revista digital é uma nova forma de mídia dentro de uma outra nova forma de mídia.

18.1.4 | Efeito de Pan & Zoom

O overlay Pan & Zoom permite inserir imagens grandes dentro de frames pequenos de forma mais simples que o Panorama, embora sem poder ocupar toda a tela do tablet, nem simular tridimensionalidade.

O leitor pode movimentar a imagem para visualizar o conteúdo que está oculto fora do frame, além de poder dar zoom in e zoom out.

A melhor analogia dessa interatividade são os próprios frames de imagem do InDesign. Quando o conteúdo do frame é maior que o frame, podemos clicar no Content Grabber (o círculo que fica no centro do frame) para mover apenas o conteúdo.

Ele pode ter grande uso para visualizar listas, sumários, linhas do tempo, tiras em quadrinhos extensas, paisagens e muito mais.

1. Para criar o overlay, abra seu documento no InDesign. Depois, selecione a ferramenta Rectangle Tool ou Rectangle Frame Tool e crie um retângulo.

Por enquanto, a ADPS só permite formas retangulares para o Pan & Zoom.

2. Insira sua imagem dentro deste frame por meio do comando Place do menu File.

3. Mova a imagem com a ferramenta Direct Selection Tool até escolher uma posição adequada dentro do frame. Essa posição será automaticamente a posição inicial do seu overlay e também o pôster. O pôster é uma imagem estática que ocupa o espaço do seu overlay quando o leitor acessa a página.

No caso do Pan & Zoom, o pôster é substituído pelo overlay quando o leitor toca sobre ele. Se durante a navegação, o leitor tocar duas vezes seguidas no overlay, ele exibirá o pôster.

Mas, se quiser criar um pôster diferente, que não seja a posição inicial da sua imagem no overlay, basta criar um frame com as mesmas dimensões do overlay. Coloque esse novo frame sobre o overlay e ele se tornará o pôster. Ao tocar no pôster, o leitor visualizará o overlay, ao tocar duas vezes no overlay, voltará ao pôster. Mas esse frame do pôster só ficará visível se o seu overlay não for do tipo Pan Only, conforme especificado no Overlay Creator.

4. Deixe a sua imagem do overlay com a dimensão exata que ela terá, e não com a dimensão do frame. Por exemplo, se quer que o leitor visualize uma imagem de 1.000 X 1.000 pixels em um frame de 200 X 200 pixels, então crie uma imagem de 1.000 X 1.000 pixels e 72 ppi e insira essa imagem dentro do frame sem ajustes no tamanho.

O tamanho máximo de uma imagem para Pan & Zoom é de 2.000 pixels de largura e altura. Porém, a ADPS recomenda não usar um tamanho maior do que 1.024 X 1.024 pixels pois isso, além de aumentar o tamanho do arquivo, compromete o uso da memória dos tablets.

Para melhores resultados, não use imagens com transparência, e use o formato JPEG.

5. Depois de inserir sua imagem dentro do frame, use a ferramenta Selection Tool para selecionar o frame.

6. Clique e arraste uma das suas oito âncoras para cortar parte da visualização da imagem sem redimensionar o tamanho do conteúdo.

Não deixe o tamanho do frame maior que o tamanho da imagem.

7. Se quiser mudar o Zoom inicial do seu overlay, selecione o conteúdo com o Direct Selection Tool e mude seu tamanho alterando os valores de Scale X Percentage e Scale Y Percentage no painel Control.

É possível mudar o tamanho da imagem para 100% ou menos. O valor máximo é 100% e o valor mínimo será o que não deixa a largura ou altura da imagem menor do que a altura ou largura do frame.

8. Selecione o frame com sua imagem de overlay e entre no painel Overlay Creator, na opção Pan & Zoom.

9. Escolha uma destas duas opções:

Pan Only: Essa opção só permite mover a imagem, e desabilita o Zoom. Ela é útil para um overlay no qual o leitor pode mover o conteúdo apenas na vertical ou na horizontal. Para isso, deixe a largura ou altura da imagem do mesmo tamanho que a largura ou altura do frame. Com o Pan Only ativado, o canto superior esquerdo da sua imagem deverá estar localizado no canto superior esquerdo do frame.

Pan & Zoom: Essa é a opção que permite mover e dar zoom nas imagens, e também escolher uma posição inicial da sua imagem que não seja o canto superior esquerdo.

18.1.5 | Scrollable Frame

O Scrollable Frame é o único recurso interativo da ADPS que não tem opções editáveis no painel Overlay Creator.

Trata-se de um frame cujo conteúdo pode ser navegado por uma barra de rolagem e que deve ser construído manualmente.

Ele é recomendado apenas para navegação de frames de texto, ou frames de texto e imagens, pois o overlay Pan & Zoom é muito mais fácil de usar para navegação em frames de imagem.

1. Para criar um Scrollable Frame, primeiro entre no painel Layers (menu Window/Layers), vá ao menu do painel e clique em New Layer.

2. Nomeie esse layer como “Scrollable Content”. A ADPS irá reconhecer a função do layer pelo nome, por isso o nome deve ser exatamente o mesmo, sem aspas, respeitando as minúsculas e maiúsculas e sem ponto final.

3. Crie dois frames. O primeiro será o frame de visualização, que servirá como a janela que permitirá ver o conteúdo deslizável. O segundo é o frame de conteúdo, que terá o texto e/ou as imagens.

Se quiser um navegador que role apenas na vertical, faça com que o frame de visualização e o de conteúdo tenham a mesma largura. Se quiser que o navegador role somente na horizontal, o frame de visualização e conteúdo devem ter a mesma altura.

4. O frame de conteúdo deve ser inserido no layer “Scrollable Content” e o frame de visualização deve permanecer no Layer 1, o primeiro layer padrão do InDesign.

Nada além de frames de conteúdo e seus conteúdos respectivos devem ser inseridos no layer “Scrollable Content.”

Para mudar seu frame de conteúdo de layer, selecione-o e arraste o quadrado preenchido com a cor do Layer 1 para o layer Scrollable Content.

5. Depois de separar os frames por layer, renomeie-os. Para renomear, clique uma vez no nome de um frame no painel Layers, pause, e então clique de novo . Os dois frames devem ter o mesmo nome, inclusive respeitando as maiúsculas e minúsculas.

A: Frame de conteúdo de nome “Passaro”, que fica no layer Scrollable Content

B: Frame de visualização de nome “Passaro”, que fica no layer Layer 1

C: Painel Layers

6. O frame de conteúdo é transparente por padrão. Para que elementos da página não apareçam atrás desse frame, preencha-o com uma cor.

7. Pode ser escrito o texto dentro deste frame. Se quiser uma borda, para que o texto não fique junto às margens do frame, selecione o frame e vá para o menu Object/Text Frame Options.

A caixa Text Frame Options irá aparecer. Ative Preview para visualizar as alterações.

Mude os valores em Inset Spacing para aumentar as bordas internas do frame.

Lembre-se que seu frame de conteúdo nunca deve ter Overtext (texto em quantidade que ultrapassa o espaço do frame).

8. Também opte por inserir frames dentro do frame de conteúdo, como frames de texto e frames de imagens. Crie o conteúdo desses frames, selecione-os e agrupe-os pelo menu Object/Group. Depois, selecione o grupo e vá em Edit/Cut. Selecione o frame de conteúdo e vá em Edit/Paste Into.

A: Frame de conteúdo

B: Frames de texto e imagem agrupados

Frames de texto e imagem inseridos dentro do frame de conteúdo

9. Se quiser copiar o frame de conteúdo para outro documento do InDesign (provavelmente a mesma página voltada para outra orientação) não esqueça de ativar, no menu do painel Layers, a opção Paste Remember Layers. Dessa forma, quando copiar o frame de conteúdo, copiará também seu layer “Scrollable Content”, e não precisará perder tempo recriando esse layer.

10. Como o frame de conteúdo está em um outro layer, pode deixá-lo em qualquer lugar do seu documento, ele irá somente aparecer no navegador criado pelo frame de visualização. A posição inicial do conteúdo na revista será sempre igual: o canto superior esquerdo do conteúdo ficará no canto superior esquerdo do frame de visualização assim que o leitor acessar a página.

11. Se não deseja que o frame de conteúdo atrapalhe seu trabalho de diagramação na página, torne todo o layer “Scrollable Content” invisível ou deixe o frame de conteúdo no Pasteboard, a área fora do documento.

Nada disso impedirá a visualização do conteúdo na revista. Mas cuidado ao deixar todo o frame de conteúdo no Pasteboard. Qualquer link que ele contenha se perderá na exportação para o arquivo Folio. Para evitar isso, deixe parte do frame de conteúdo encostar no documento.

19 | DICAS DE OVERLAYS SOBREPOSTOS

Nenhum elemento estático, que não possui interatividade, pode ficar acima de um overlay, pois todos os elementos interativos ficam um layer acima dos layers estáticos que são achatados e viram uma imagem só.

Mas é possível criar máscaras que ficam acima dos overlays. Como? Basta transformar estas máscaras em overlays. Siga o passo-a-passo.

1. Crie o elemento que você quer sobrepor ao seu overlay. No nosso exemplo, faremos uma simples anel.

2. Selecione o objeto e vá no painel Object States. Clique em New State no menu do painel. O anel irá se transformará em um slideshow com dois slides iguais. Não altere a aparência do segundo slide, ele deve ser igual ao primeiro.

3. Selecione o seu slideshow e vá para o painel Overlay Creator que exibirá automaticamente a seção Slideshow. Ative apenas a opção Auto Play e Loop.

4. Pronto! Agora o seu elemento estático é um overlay, mas que o leitor não vai perceber que é um overlay, pois ele não vai mudar de aparêcia já que é um slideshow de slides iguais.

20 | CUIDADOS ANTES DA CONVERSÃO DOS FOLIOS

Antes de importar seus arquivos para o servidor da ADPS por meio do Folio Builder, verifique se os seguintes procedimentos foram efetuados na criação dos seus arquivos:

- Todo o conteúdo da sua revista deve estar dentro da pasta de Folio. Ou seja, nenhuma imagem, arquivo de mídia, arquivo INDD ou qualquer outro elemento que compõe a revista digital deve estar fora desta pasta.

Em caso de dúvida, use o painel Links para localizar arquivos que não estejam na pasta e insira-os corretamente (de preferência na pasta do artigo em que são usados).

Todos os seus artigos devem estar corretamente separados em pastas e elas devem estar na pasta de Folio.

Não insira nenhuma pasta adicional na pasta de Folio que não seja uma pasta de artigo, pois a ADPS irá interpretar que se trata de um artigo. Por isso, não crie pastas como “imagens”, “image sequence”, “html local” ou “links” no mesmo nível das pastas de artigos e sim dentro delas.

Toda pasta de artigo deve ter pelo menos um arquivo INDD criado no InDesign CS5 ou CS5.5. Este arquivo deve ter a nomeação correta, com a extensão “_v.indd” (para orientação vertical) ou “_h.indd” (para orientação horizontal) mesmo se a sua revista for de orientação única.

- Se a sua revista for de orientação única (leitura somente na orientação vertical ou somente na horizontal), toda pasta de arquivo deverá ter somente um arquivo INDD e todos estes arquivos devem ter a mesma extensão (“_v.indd” ou “_h.indd”). Mas nunca use pastas com arquivos de orientações diferentes (uma pasta com “_v.indd” e uma outra com “_h.indd”).

- Se a sua revista tiver duas orientações, cada pasta de artigo deverá ter um arquivo de extensão “_v.indd” e um de extensão “_h.indd”.

Esses dois arquivos não precisam ter os nomes antes da extensão iguais, mas é uma prática recomendada para facilitar a identificação e saber que um arquivo está relacionado ao outro.

- Com uma revista de duas orientações, verifique também se um arquivo “_v” tem a mesma quantidade de páginas que seu arquivo correspondente “_h”. Não é obrigatório ter a mesma quantidade de páginas. Mas, digamos que temos um arquivo “artigo_v.indd” com 3 páginas e um arquivo “artigo_h.indd” com 2 páginas, se o leitor estiver na terceira página do artigo_v e quiser mudar para a visualização horizontal, ele irá para a última página do artigo_h, que tem menos páginas, nesse caso a página 2. E o leitor, depois, não poderá alterar a orientação do tablet para ir da página 2 do artigo_h de volta para a página 3 do artigo_v, pois a ADPS levará o leitor para a página correspondente a página 2 do artigo_h, que é a página 2 do artigo_v.

- Verifique se todos os seus arquivos estão com tamanho proporcional ao tamanho especificado na criação do Folio. Por exemplo, se ao criar seu Folio no Folio Builder, especificado o tamanho de 1.028 X 768 pixels, todos os artigos que forem importados para este Folio devem ter o tamanho de 1.028 X 768 pixels ou a mesma proporção de largura X altura (como 800 X 600).

Uma vez exportado o Folio, não modifique a localização da sua pasta: o Folio Builder permite abrir seus arquivos diretamente pelo painel, pois sabe o caminho até cada um destes arquivos.

21 | GERAÇÃO DAS REVISTAS DIGITAIS

Este capítulo trata do processo de geração das revistas digitais a partir do InDesign no formato Folio.

21.1 | Introdução ao painel Folio Builder

Agora que a revista digital terminou de ser diagramada e arte-finalizada, chegou o momento de exportar a pasta de Folio, a pasta que representa sua revista e é dividida em pastas de arquivos, para o servidor da ADPS.

O servidor permite o acesso à revista pelo seu tablet, a adição de metadados e, caso tenha pago pelo serviço Professional ou Enterprise Edition, usar os serviços de distribuição, venda, assinatura e análise.

A importação da sua revista para o servidor é realizada por meio do painel Folio Builder. Que também permite visualização de todas as revistas e artigos que estão no servidor, abra esses artigos no InDesign, efetue atualizações após alguma modificação e adicione metadados.

21.1.1 | Conexão com o Folio Builder

1. Crie uma Adobe ID (caso você já não tenha uma). Para isso, entre no InDesign e vá para o painel Folio Builder (menu Window/Extensions/Folio Builder). Não é necessário ter um documento aberto para usá-lo.

2. Clique em Sign Up, que aparece em azul no painel, para ir diretamente ao site de cadastro da sua Adobe ID.

3. Insira todos os dados necessários para criar sua conta: um e-mail, senha, nome, data de nascimento e país. Clique em Create Account e confirme a inscrição pela caixa do e-mail que você inseriu na conta.

4. Com a conta criada, volte para o painel Folio Builder e clique em Sign In, que também está em azul no painel.

Insira seu e-mail da Adobe ID e sua senha. Ative a opção Stay signed in para que o painel entre diretamente na sua conta sempre que abrir o InDesign.

Você não é obrigado a se conectar com sua Adobe ID para criar uma revista digital. Basta clicar diretamente no botão New, na parte inferior do painel, para criar um Folio. Mas será um Folio local, que não permitirá ser editado no servidor da Adobe, nem ser testado em seu tablet, muito menos publicado.

21.1.2 | Navegação no Folio Builder

O painel Folio Builder oferece três áreas de visualização.

O Folio View mostra todos os Folios que estão no seu servidor. Só haverá um Folio se você estiver usando a Creative Edition, que é a versão gratuita da ADPS.

Ao clicar duas vezes no Folio View, ele o direciona para o Articles View, que revela todos os artigos deste Folio.

Se clicar em qualquer um destes artigos, será levado para o Layout View, que mostra as orientações disponíveis para esse artigo.

Caso dê um duplo-clique em um dos layouts, o documento será aberto no InDesign (a não ser que você esteja acessando sua conta da Adobe ID em um computador sem os seus arquivos originais, nesse caso não será possível abrir e editar os documentos).

1. Clique em Sign In (o hiperlink em azul) ou clique no menu do painel e selecione Sign In. Insira o e-mail e senha que usou para criar sua Adobe ID, ative a opção Stay signed in para manter-se sempre conectado, a não ser que esteja usando o computador de um cliente ou de terceiros.

2. O Folio Builder irá se conectar ao servidor, portanto, será preciso uma conexão com a Internet. Após a conexão, o Folio Builder irá mostrar o seu painel vazio, onde poderá criar um Folio e depois importar seus artigos pelo painel.

21.1.3 | Criação de um Folio novo

1. Para criar um Folio novo, vá no menu do Folio Builder e clique em New, ou clique em New na parte inferior do painel, ao lado de Preview. A janela New Folio se abrirá com diversas opções.

Folio Name: Coloque em Folio Name um nome que facilite a identificação da sua revista. É apenas um nome para identificação no servidor e no Folio Builder e é diferente do nome da publicação que aparecerá para o leitor no tablet.

Size: Especifique o tamanho da sua revista em pixels. Se sua publicação for para iPad, por exemplo, escolha o tamanho 1.024 X 768 pixels, caso vá para o Samsung Galaxy Tab, escolha o 1.024 X 600 pixels.

Leve sempre em conta não apenas o tamanho da tela, mas se há também a presença de um navegador que diminui o espaço de visualização da revista. Por exemplo, o Motorola Xoom tem um navegador que ocupa 48 pixels de espaço, diminuindo o espaço de publicação na tela de 1.280 X 800 pixels. Por isso, vá na opção Custom e especificar em Weight e Height o tamanho de 1.232 X 752 pixels para revistas.

Default Image Format: Especifique em que formato quer converter seus artigos. Trata-se de uma opção padrão para todos os artigos dessa revista, mas terá que optar por importar um ou mais artigos posteriormente e especificar para cada um deles um formato diferente desse padrão.

Escolha Automatic se quiser que o InDesign faça a escolha de exportar em JPEG, PNG ou PDF. Escolha JPEG ou PDF se preferir diminuir o peso em MB da sua revista ao possível custo de menor fidelidade na visualização das imagens e uma performance menos rápida. O PDF também tem a vantagem de permitir que o leitor dê zoom nas páginas sem conteúdo interativo.

Default JPEG Quality: Se escolheu Automatic, JPEG na opção Default Image Quality, deverá especificar aqui a qualidade do JPEG. Se escolheu PDF, a qualidade de JPEG será High, sem poder mudar. Quanto maior a qualidade, maior o tamanho do arquivo. Sugerimos deixar em High, para não correr riscos de ter imagens de má qualidade.

Local Content: Selecione este item caso queira editar a sua revista digital localmente. Dessa forma, os arquivos não serão importados para o servidor da Adobe, o que impedirá que edite as propriedades da sua revista pela Internet, testá-la no seu tablet e nem publicá-la. A vantagem é que será possível acessar este Folio no seu computador e testá-lo no aplicativo Content Viewer para desktop sem precisar ter conexão com a Internet. Para importar um Folio local posteriormente para o servidor, clique em Sign In e insira sua Adobe ID, selecione o seu Folio local e clique em Upload to Folio Producer no menu do painel.

2. O painel entrará no conteúdo do Folio, mostrando todos os artigos. Mas essa área está vazia, pois ainda é necessário importar os artigos para o servidor. É possível a qualquer momento, voltar para a lista de Folios, o Folio View, clicando na flecha ao lado esquerdo do nome da revista digital, no topo do painel.

Antes, a Adobe permitia apenas a criação de um Folio pelo painel Folio Builder. Agora, é possível criar quantos Folios quiser, mesmo sem pagar pela ADPS.

Por isso, é possível criar mais de um Folio, na bastando clicar novamente no botão New, na lista de Folios.

21.1.4 | Propriedades do Folio

Após ter criado seu Folio, especifique suas propriedades.

1. Acesse a lista de Folios no Folio Builder e clique em Properties no menu do painel.

2. Configures as opções.

Publication Name: Esse é o nome “oficial” da revista. É o nome que aparecerá para seu leitor no aplicativo. Coloque o nome da publicação, como, “PhotoPro” ou “Revista PhotoPro”.

Size: Determina o tamanho da revista.

Não é uma opção recomendada, pois irá alterar qualquer artigo que já tenha sido importado para o Folio, gerando resultados inesperados. Se quiser fazer a mesma revista para um formato novo, crie um novo Folio com arquivos diagramados especificamente para esse formato.

Cover Preview: Estabelece as imagens que servirão como pré-visualização da revista no aplicativo. É necessário especificar uma imagem para a orientação vertical e horizontal (ou apenas para uma delas se a sua revista for de orientação única). Crie imagens idênticas às capas da sua revista, exportando seu documento do InDesign diretamente para JPEG no menu File/Export.

Use imagens de 72 ppi em formato JPEG ou PNG com as mesmas medidas da tela do seu tablet, como 1.024 X 768 pixels para iPad, por exemplo.

3. Pressione o botão OK.

21.1.5 | Renomear o Folio

A qualquer momento é possível renomear seu Folio bastando selecioná-lo no Folio Builder e escolher o comando Rename no menu do painel.

Essa opção apenas muda o Folio Name da revista, que serve para identificação no Folio Builder. Para renomear o arquivo que os leitores irão ver, edite novamente o Publication Name, acessando o Properties no menu do painel.

21.1.6 |Apagar o Folio

Para apagar o Folio, selecione-o no Folio Builder e escolha o comando Delete no menu do painel, ou clique no ícone da lixeira no canto inferior direito no painel.

Use essa opção com cuidado, pois não há como voltar sua decisão. Ou terá que criar um novo Folio e exportar novamente a revista se quiser inserí-la de novo no servidor.

21.1.7 | Compartilhar Folios

É possível compartilhar a sua revista com outras pessoas, por exemplo, com o seu cliente, colegas de trabalho, editor, todos que tenham interesse em verificar o andamento da revista digital e que podem colaborar com sua produção.

1. Selecione o Folio no Folio Builder e clique em Share no menu do painel. A janela Share que irá aparecer, trata-se basicamente de uma mensagem de e-mail com um convite embutido.

Share this Folio: Insira o e-mail de quem deve visualizar os arquivos da revista digital. Se for enviar para mais de uma pessoa, separe os e-mails por ponto e vírgula.

Subject: É o “assunto” do seu e-mail. O título que irá aparecer para o destinatário.

Message: É a mensagem que irá aparecer para o destinatário.

2. Pressione o botão OK.

O destinatário que receber o convite se tornará coeditor da revista. Para isso, ele precisará também ter uma conta da Adobe ID, pois dessa forma, ele pode inserir a conta dele no aplicativo Content Viewer de um tablet para baixar e visualizar o seu Folio.

Se ele tiver acesso ao InDesign CS5 ou CS5.5 com Folio Builder, pode inserir a conta dele no painel, tendo acesso ao seu Folio, assim, ele poderá importar novos artigos para o seu Folio, adicionando-os a sua revista. Mas ele não poderá abrir e editar os seus artigos que estão no painel.

Um Folio compartilhado terá um ícone de compartilhamento ao lado de seu nome.

21.2 | Inserção de artigos no Folio Builder

Após criar um Folio no painel Folio Builder, será preciso inserir os artigos que irão compor esse Folio. Isso pode ser feito de duas maneiras: criando artigos a partir de um documento aberto ou importando artigos a partir de uma pasta.

21.2.1 | Criação de artigos a partir de um documento do InDesign

1. Crie o documento que servirá de artigo para a revista. De preferência, esse documento deve ter as mesmas dimensões que o tamanho especificado do seu Folio (determinado na opção Size ao criar o Folio no painel Folio Builder).

Mas, existem dois casos excepcionais em que o Folio Builder aceitará tamanhos diferentes:

Ao criar um documento com a mesma largura, mas com uma altura maior e de página única, por exemplo, uma página de 1.024 X 3.000 pixels para iPad, o Folio Builder irá adicionar esse artigo com o Smooth Scrolling, ou seja, será um artigo com barra de rolagem para ver conteúdo extra na vertical.

Ou também ao adicionar um artigo com medidas diferentes desde que essas medidas tenham a mesma proporção Largura X Altura das medidas do Folio.

Por exemplo, se após criar todos os artigos para um Folio destinado ao iPad, e quiser adicionar os mesmos artigos para um Folio destinado a um tablet com tela de 800 X 600 pixels, não haverá problema.

Os documentos dos artigos, criados com tamanho de 1.024 X 768 pixels tem a mesma proporção de largura X altura que um tamanho de 800 X 600 pixels (a proporção é de 4 por 3).

2. Com o documento aberto, clique duas vezes no nome do seu Folio no Folio Builder para entrar na visualização dos artigos.

3. Vá no menu do painel e clique em New, a janela New Article se abrirá com algumas opções.

Article Name: Especifica o nome do artigo. Trata-se apenas de um nome de fácil identificação no Folio Builder e que não irá aparecer no aplicativo.

Image Format: Determina o formato de conversão deste artigo. É possível optar por uma opção diferente do padrão escolhido para o Folio. Escolha Automatic se quiser que o InDesign faça a escolha de exportar em JPEG, PNG ou PDF. Escolha JPEG ou PDF se prefere diminuir o peso em MB da sua revista ao possível custo de menor fidelidade na visualização das imagens. O PDF também tem a vantagem de permitir que o leitor dê zoom nas páginas sem conteúdo interativo.

JPEG Quality: Ao escolher Automatic, JPEG na opção Default Image Quality, deverá especificar aqui a qualidade do JPEG. Se escolheu PDF, a qualidade de JPEG será High, e não é posível mudá-la. Quanto maior a qualidade, maior o tamanho do arquivo. Sugerimos deixar em High, para não correr riscos de ter imagens de má qualidade.

4. Se ainda não salvou o seu documento, o InDesign pedirá para salvá-lo antes de importar seu artigo. Lembre-se de salvar usando as extensões “_v.indd” ou “_h.indd”. Depois, ele iniciará a importação, que irá depender de uma conexão com a Internet, e demorará de acordo com o tamanho do documento, se há interatividade e o formato de exportação (JPEG, PNG ou PDF).

Este método só permite inserir uma orientação por artigo. Se a sua revista tiver duas orientações, abra o documento que contenha a outra orientação. Com esse documento aberto, clique duas vezes no nome do seu artigo para visualizar as orientações disponíveis. Só estará visível uma orientação, a adicionada anteriormente. Então, clique em New na parte inferior do painel Folio Builder e o painel irá automaticamente adicionar a outra orientação.

21.2.2 | Importação de artigos a partir de um documento do InDesign

O segundo método de importar arquivos para o InDesign é por meio da importação de pastas.

Pode-se importar um artigo, vários ou a revista inteira e também, posteriormente, adicionar novos artigos para a revista usando o mesmo método.

Mas, para a importação funcionar, voc organize corretamente as suas pastas, ou seja, ter uma pasta de Folio contendo pastas de arquivo, sendo que cada pasta deve ter um ou dois arquivos INDD com o sufixo correto (“_v” para layouts na vertical e “_h” para layouts na horizontal).

1. Com a revista devidamente organizada, abra o InDesign.

2. Dessa vez, não há necessidade de abrir nenhum documento. Vá no painel Folio Builder e abra o Folio no qual quer inserir os seus artigos. Na visualização dos artigos (Articles View), vá no menu do painel e clique em Import. Uma janela irá se abrir com diversas opções.

3. Em Import a Single Article, apenas um artigo único é importado. Isso é recomendável para adicionar arquivos que ficaram de fora. As opções desta janela seguem a mesma lógica explicada anteriormente neste capítulo. O Article Name é um nome para fácil identificação do artigo no Folio Builder e não estará visível ao leitor. Escolha um formato adequado para o seu artigo, que pode ser diferente do formato padrão que escolheu para o seu Folio. Por fim, clique no ícone da pasta para localizar e selecionar a pasta de artigo que contém arquivo (ou dois arquivos, se sua revista tiver duas orientações).

4. Em Import Multiple Files, é preciso apenas localizar e indicar a pasta de Folio contendo todas as suas pastas de artigos.

Durante a importação para o servidor, se algum dos artigos tiver erro de nomenclatura, a ADPS exibirá uma mensagem de erro e não irá importá-lo. Isso não impedirá o painel de importar os artigos seguintes.

5. Pressione o botão OK.

Para alterar a ordem dos seus artigos, basta simplesmente visualizar a lista de artigos do seu Folio, clicar em um e arrastar para a posição desejada.

21.2.3 | Arquivos extras para importação

21.2.3.1 | Imagens para o sumário

É possível tornar o sumário da revista digital ilustrado, ou seja, que imagens representem os artigos das revistas no sumário.

Dessa forma, o sumário permitirá que o leitor possa que o leitor possa navegar com facilidade pela revista.

1. Crie um arquivo PNG de 70 X 70 pixels que represente bem o artigo, de preferência, com a imagem da primeira página.

2. Deixe esse arquivo na respectativa pasta de artigo, junto com o artigo (ou os dois artigos) INDD.

Não é obrigatório inserir uma imagem PNG para o seu artigo, mas a ADPS usará uma imagem padrão nesse caso, criando um thumbnail da primeira página.

3. Essa imagem será importada junto com os outros arquivos (por meio da opção Import do Folio Builder).

Também é possível inserir uma imagem PNG ao selecionar o artigo no Folio Builder e clicar em Properties no painel do menu, onde é possível localizar e indicar a imagem.

A imagem PNG deve ser a única imagem presente na pasta do artigo. Todas as outras imagens devem estar em subpastas, como a subpasta “links”, por exemplo. Isso porque a Adobe só reconhecerá e usará a imagem PNG como thumbnail se não houver nenhum outro arquivo de imagem no mesmo nível hierárquico dos arquivos INDD.

Caso seja necessário usar o mesmo conteúdo para gerar revistas em diversos formatos, nossa sugestão é inserir também na pasta de Folio um arquivo XML. Ele pode conter a ordem correta dos artigos e as suas propriedades.

Esse arquivo, deve ser nomeado como “sidecar.xml” e será importado junto com os outros arquivos (por meio da opção Import do Folio Builder).

Veremos no próximo capítulo como criar esse tipo de arquivo.

Quando você for importar um novo Folio com os mesmos artigos, basta copiar o arquivo XML ao invés de inserir mais uma vez as informações de cada artigo.

21.3 | Outras operações com artigos

21.3.1 | Renomeie e apague artigos

Após importar o artigo, é possível, a qualquer momento, renomeá-lo. Para isso, selecione o seu artigo no Folio Builder e clique em Rename no menu do painel. Lembre-se que esse nome é apenas para facilitar a identificação no Folio Builder, e não será visto pelo leitor.

Pode ser apagado qualquer artigo ou layout, para isso basta selecioná-lo e escolher o comando Delete no painel, ou clicando na lixeira no canto inferior direito.

21.3.2 | Insira metadados nos artigos

No painel Folio Builder adicione informações úteis que estarão disponíveis ao leitor pelo navegador ADPS dos aplicativos das revistas.

Essas informações, que não fazem parte da revista em si, são conhecidas como metadados.

1. Selecione um artigo no Folio Builder e clique em Properties no menu do painel e configure as opções.

Title: Especifique o nome do artigo, pois este será o nome que os leitores verão no navegador. Portanto, deve ser um nome real como “Entrevista com Frank Zappa” e não o nome do arquivo como “entr_zap_h.indd”, por exemplo.

Description: Descrição do seu artigo que indique informações complementares ao título. Trata-se de uma entrevista? Com quem? É uma reportagem sobre o que? Que modelo e em que lugar foi feito o ensaio fotográfico?

Table of Contents Preview: Clique no ícone da pasta para localizar e indicar uma imagem PNG, que servirá para representar o seu artigo no Table of Contents (sumário) do navegador do aplicativo. O Table of Contents indicará o nome dos artigos e seus autores, além da imagem PNG, para que o leitor possa navegar com facilidade pela revista. Para isso, crie um arquivo PNG de 70 X 70 pixels que represente bem o seu artigo, de preferência com a imagem da primeira página.

2. Pressione o botão OK.

Não é obrigatório inserir uma imagem PNG no artigo, mas a ADPS usará uma imagem padrão nesse caso.

É possível inserir automaticamente essas imagens deixando-as em suas respectivas pastas de artigo antes de importar o artigo pelo Folio Builder.

Smooth Scrolling: Se o artigo tiver apenas uma página e altura maior do que a altura determinada pelo seu Folio, ele será considerado uma página com Smooth Scrolling, ou seja, uma página com conteúdo extra para ser explorado no eixo vertical com a barra de rolagem do navegador.

As opções Smooth Scrolling desta janela deveriam permitir escolher se deseja habilitar o Smooth Scrolling apenas no eixo horizontal, no vertical ou em ambos os eixos. Mas, como a ADPS por enquanto só permite Smooth Scrolling no eixo vertical, use apenas a opção Vertical Only..

Horizontal Swipe Only: Essa opção era conhecida como “Flatten”. Ao ativar essa opção, é possível navegar nas páginas do artigo mexendo o dedo para a esquerda ou direita, como se estivesse lendo uma revista impressa, ao invés de mover os dedos para cima ou para baixo. Essa é uma boa opção para um público que ainda não está acostumado com a linguagem das revistas digitais e não imagina que existam páginas uma abaixo da outra.

Byline: Nome do autor.

Kicker: Editoria da revista, a seção a qual pertence o seu artigo, por exemplo, entrevista, saúde, esportes, ensaio fotográfico, receita etc.

Advertisement: Ativar essa opção, indica que o artigo é um anúncio. Nesse caso, não irá aparecer no Table of Contents (sumário). Afinal, ninguém procura no sumário de uma revista, seja impressa ou digital, em que página estão os anúncios.

A: Kicker | B: Title | C: Byline | D: Description

21.3.3 | Editar e atualizar um artigo

A revista digital tem uma grande vantagem sobre o impresso: É possível corrigir erros mesmo depois de publicada. É possível editar e atualizar qualquer artigo importado para o Folio Builder.

Quando é editadaum artigo que faz parte de uma revista digital no servidor da ADPS, as mudanças efetuadas ficarão salvas no computador até o momento em que é atualizado o artigo.

Para editar o artigo, basta abrí-lo como se fosse um arquivo qualquer de InDesign. Não é preciso estar conectado na Internet ou cadastrado com sua Adobe ID no painel Folio Builder para fazer as edições.

É possível também abrir o arquivo pelo Folio Builder. Para isso, selecione o artigo e clique duas vezes sobre o layout do artigo que quer abrir.

Após a edição necessária, entre no Folio Builder com Adobe ID e selecione o artigo no qual realizou a edição, então, clique em Update no menu do painel. O painel efetuará uma nova importação a partir do arquivo editado e salvo nocomputador para substituir o arquivo antigo.

21.3.4 |Copiar um artigo para um outro Folio

Pode ser necessário copiar um artigo para um Folio diferente. Isso ocorrerá com páginas que são repetidas com frequência, como anúncios, a página explicativa de como usar uma revista digital, o expediente etc.

Para copiar o artigo, basta selecioná-lo no Folio Builder e clicar em Copy To no menu do painel. A janela Copy To irá aparecer e na opção New Location, indique um dos Folios na lista e clique em OK.

O artigo será copiado automaticamente (no servidor, e não os arquivos originais que estão no computador). Se tiver a versão gratuita da ADPS, aparecerá somente o próprio Folio do artigo na lista.

21.3.5 | Altere a ordem dos arquivos

No mundo do impresso a ordem dos artigos e anúncios é atrelada a um documento chamado gabarito ou espelho. Mas, na ADPS, é possível a qualquer momento mudar a ordem dos artigos.

Para alterar tanto mudar a ordem dos arquivos pelo painel Folio Builder, ao clicar e arrastar seu artigo para colocá-lo na ordem desejada, como também no servidor da ADPS. É possível também mudar a ordem por meio de um arquivo XML, que tem de ser disponibilizar na pasta de Folio, e que deve se chamar “sidecar.xml”.

Veremos no próximo capítulo como criar esse tipo de arquivo.

22 | ORDENAÇÃO DE ARTIGOS COM O XML

22.1 | Criação do arquivo XML para a importação da revista digital

A criação de um arquivo XML na pasta de Folio é um método opcional para ordenar os artigos da revista e adicionar informações como título, autor, descrição e editoria.

A princípio, isso não é necessário, existe a opção de ordenar e adicionar informações na revista manualmente no Folio Builder ou no servidor da ADPS.

Mas, caso precise criar a mesma revista para formatos diferentes, o arquivo XML permite ganhar tempo. Com ele, não é preciso escrever novamente todas as informações sobre autor, título, editoria e descrição em todos os artigos.

1. Esse artigo XML pode ser criado em um editor de texto comum ou em um editor XML.

2. O nome do arquivo deve se chamar exatamente “sidecar.xml” e deve conter informações sobre todos os artigos.

3. Esse arquivo XML deve ser inserido dentro da pasta de Folio, no mesmo nível das pastas de artigo e não dentro de uma delas.

A linguagem XML é usada para a portabilidade de dados e é diferente do HTML, que é voltado para a forma como esses dados são apresentados. Mas não se preocupe, para a criação do arquivo “sidecar”, basta copiar o texto abaixo e editar as partes em negrito no seu editor de texto.

Caso prefira, mande um e-mail para livros@bytestypes.com.br e solicite o envio do arquivo XML.

4. Copie e cole todo o conteúdo de <entry> e </entry> (incluindo essas próprias tags) para cada artigo da revista e edite as informações das tags subalternas.

Não coloque nada antes de <?xml version=”1.0” encoding=”UTF-8” standalone=”yes”?> <sidecar> e nada depois de </sidecar>.

Entre as tags de <folderName>, informe o nome da pasta do artigo. Coloque o nome da pasta com exatidão, respeitando maiúsculas e minúsculas. Em <articleTitle>, insira o nome do artigo que ficará visível para o leitor no aplicativo. Em <byline> e <author>, insira em ambos o nome do autor. Em <kicker>, a editoria que pertence o artigo (Moda, saúde, entrevista, ensaio fotográfico etc.) Em <description>, insira uma breve descrição do artigo.

Em <tags>, insira palavras-chave separadas por vírgula que tenham relação com o tema do artigo. Por exemplo, se for uma reportagem sobre circo, escreva “Circo”, “Domador”, “Trapezista”, “Palhaço”, “Malabarista”.

Em <isAd>, informa se o seu artigo é um anúncio ou não. Se for um anúncio, escreva “true”, se não for, escreva “false”. A ADPS não irá colocar artigos identificados como anúncios no Table of Contents (sumário).

Em <smoothScrolling>, coloque “always”, “portrait”, “landscape “ou “never”. Isso se refere ao fato do artigo ter ou não Smooth Scrolling, que ocorre quando a altura e/ou largura do layout for maior que o tamanho da tela e tiver apenas uma página. Atualmente a ADPS permite apenas Smooth Scrolling em layouts com altura maior que a altura da tela (por exemplo, 1.024 X 3.000 pixels no layout horizontal e 768 X 3.000 pixels no layout vertical de um iPad). Portanto, se o seu artigo não tiver Smooth Scrolling, insira o valor “never”. Se tiver, na vertical, insira o valor “portrait”.

Em <isFlattenedStack>, digite “true” se quer que um artigo com mais de uma página seja navegada apenas pela esquerda e direita, como uma revista impressa. E escreva “false” se quer que o artigo tenha páginas uma abaixo da outra, permitindo navegação para cima e para baixo.

A ordem das tags <entry> determina a ordem dos artigos na revista quando importá-los ou quando fizer uma atualização no Folio Builder. Se um folder de artigo não for citado no arquivo sidecar, ele será movido abaixo de todos os que foram listados.

22.2 | Mude a ordem dos artigos na atualização

Depois de importar os artigos para o painel Folio Builder, ainda há chances de mudar a ordem dos artigos por meio desse arquivo sidecar.xml.

1. Para isso, copie ou insira o arquivo sidecar.xml em uma pasta.

2. No painel Folio Builder, abra o Folio que quer editar. Depois, vá no menu do painel e clique em Import.

3. Selecione Import Multiple Articles. Clique no ícone da pasta, localize e indique a pasta na qual o arquivo sidecar.xml está inserido e clique OK.

A ordem de seus arquivos será atualizada de acordo com a ordem das tags de <entry> no arquivo XML.

23 | TESTES E REVISÃO DOS FOLIOS

Para revisar e testar Folios, deve-se usar o aplicativo Content Viewer. Que já vem com as ferramentas do Folio Producer Tools, disponíveis no InDesign CS5.5 ou no InDesign CS5 após instalação de plug-in no site de downloads da Adobe.com.

Essa versão que vem com o InDesign é também conhecida como Desktop Viewer, pois permite visualizar sua revista ou um dos artigos no próprio computador, sem precisar de um tablet.

Usaremos o termo Desktop Viewer para diferenciá-lo do Content Viewer para dispositivos móveis.

Para visualização em um tablet, será preciso procurar o aplicativo gratuito Content Viewer na App Store do iPad, e no Android Market de qualquer tablet com sistema operacional Android.

Após a instalação desse aplicativo, o usuário deverá inserir sua Adobe ID no botão Sign In. Feito isso, o aplicativo irá automaticamente mostrar todos os Folios que foram importados para seu servidor ADPS.

O aplicativo do Content Viewer para Android pode ser encontrado no seguinte endereço: http://goo.gl/6B1z8. Logo o Content Viewer também estará disponível para o BlackBerry PlayBook pelo aplicativo de vendas App World.

Observações importantes

- É possível fazer o preview de um documento INDD de qualquer tamanho no Desktop Viewer, mesmo que não exista nenhum tablet com a largura e a altura de tela que foi especificado. Mas, para fazer o preview de um Folio, todos os artigos que o compõem devem ter a mesma relação entre altura e largura (por exemplo, tanto 1.024 X 768 pixels e 800 X 600 pixels tem a mesma relação de 4 por 3).

- Não é possível fazer uma sequência de artigos inconsistentes, com mistura de orientações. Isso significa que se um artigo tiver duas orientações, todos os outros artigos do Folio devem ter duas orientações também. E se seu artigo tiver uma orientação, todos os outros artigos do Folio devem seguir a mesma orientação (horizontal ou vertical) desse artigo. Seu Folio pode ter artigos somente na vertical ou somente na horizontal.

23.1 | Preview e teste de Folios e artigos no Desktop Viewer

A qualquer momento é possível solicitar um preview e testar qualquer documento aberto no InDesign, por meio do painel Overlay Creator.

Para isso, basta somente ter o documento aberto no aplicativo, não é necessário nem salvá-lo, e clicar em Preview no canto inferior esquerdo do painel Overlay Creator. Isso abrirá o Desktop Viewer em seu computador.

O preview do Overlay Creator é perfeito para testes rápidos, pois verifica se um overlay está funcionando sem precisar salvar e exportar o arquivo para o servidor.

No Folio Builder, existe também um botão de preview no canto inferior esquerdo do painel, mas ele só fará previews do Folio ou artigo já importados para o servidor.

Para fazer o preview de toda a revista importada, selecione o Folio no Folio Builder e clique em Preview. Se for testar apenas um dos artigos, selecione o artigo em questão.

Por isso, o preview do Folio Builder é recomendado para fazer testes na revista como um todo, ao invés de um artigo isoladamente, ou para verificar se os metadados estão corretos (as informações como títulos dos artigos, nome dos autores, imagens PNG para o Table of Contents etc.).

Atualmente, o Desktop Viewer não consegue fazer teste e preview de arquivos exportados em formato PDF.

O leitor poderá rotacionar um Folio ou artigo no Desktop Viewer ao usar as teclas Control+R (Win) ou Command + R (Mac). Para dar zoom em um overlay que permita esse recurso, use as teclas de atalho Control+ +/- (Win) ou Command + +/- (Win).

23.2 | Preview e teste de Folios e artigos no Content Viewer para dispositivos móveis

Com o Content Viewer aberto em seu dispositivo móvel, o aplicativo irá automaticamente fazer a atualização de seus Folios importados para o servidor da ADPS.

Todo Folio com uma faixa azul na capa indica que se trata de um Folio importado para o Acrobat.com. Como toda importação de Folio é feita pelo Acrobat.com, isso indica que haverá outras formas no futuro de inserir um Folio no aplicativo.

Lembre-se sempre de atualizar seu aplicativo no tablet, para que possa ter acesso a versões melhores e com mais recursos.

Quando o Content Viewer detectar um Folio novo, ele irá avisar o leitor que poderá então fazer o download se mantiver sua conexão com a Internet.

Depois de efetuado o download, a revista estará disponível no tablet mesmo se o leitor perder a conexão com a rede.

Ele também pode clicar em Archive para “arquivar” sua revista. Isso libera a memória usada pelo tablet. A revista ainda estará disponível para download (precisando obviamente de conexão com a rede).

Se o seu Folio for apagado no servidor ou pelo painel Folio Builder, ainda será possível visualizar esse Folio caso o leitor tenha feito o download no Content Viewer , mas somente no tablet onde foi feito o download. Porém, ao clicar em Archive, esse Folio será apagado, sem a opção de baixar a revista novamente.

23.3 | Navegação com a interface da ADPS

O leitor pode visualizar todas as suas revistas no Content Viewer, capa por capa ou em conjunto, como se estivesse em uma banca. Para isso, clique nos ícones de visualização no canto superior direito do aplicativo.

Ao clicar diretamente na imagem do Folio, o leitor iniciará a navegação da revista a partir da capa.

A rotação do dispositivo móvel altera automaticamente o layout da revista se ela tiver duas orientações. O leitor pode mover os dedos para cima ou para baixo para mudar as páginas do artigo, e para a esquerda e direita para mudar de artigo. Se um artigo tiver a opção Horizontal Swipe Only ativada, mover o dedo pela esquerda ou pela direita mudará as páginas do artigo.

As áreas interativas da revista, os Overlays, são ativados ao tocar com o dedo diretamente sobre eles.

Se o leitor tocar sobre uma área da página sem interação, o navegador interno da ADPS irá aparecer. Ao tocar novamente na página, o navegador some.

Este navegador é composto por quatro botões na parte superior. São eles:

Home: Sai da revista para voltar à área principal do aplicativo, com todos os arquivos Folio disponíveis.

Back: Volta para a página anterior em que o leitor estava.

Table of Contents: Disponibiliza todos os artigos da revista (com exceção dos que foram marcados como anúncios) e mostra informações como nome de cada artigo e nome do autor.

Browse: Mostra de forma abrangente as páginas da revista e revela o título, nome do autor, editoria, descrição e as tags de cada artigo.

O leitor também poderá usar a barra de rolagem na parte inferior do navegador para navegar com rapidez pelas páginas do Folio.

A: Botão Home

B: Botão Back

C: Botão Table of Contents

D: Botão Browse

E: Barra de rolagem

24 | CRIAÇÃO DO APLICATIVO DE VENDA DE REVISTAS DIGITAIS

A esta altura sua revista já está pronta, o arquivo Folio gerado. Chegou a hora de criar o aplicativo de venda, este capítulo irá tratar dos procedimentos para isso.

24.1 | Criação de certificados e imagens para a criação do aplicativo de venda

Com a criação de sua revista digital, pode-se usar o Viewer Builder, serviço pago da ADPS, para criar o aplicativo de venda de suas revistas. Mas antes de usar este serviço, é preciso criar algumas imagens e certificados específicos.

Essas imagens se referem ao ícone do aplicativo e os splash screens. Splash screens são as imagens que aparecem por cerca de três segundos quando se inicia o aplicativo e oferecem alguma informação, geralmente o logo da empresa ou revista, enquanto o aplicativo está sendo carregado.

Todos os aplicativos precisam ser validados por um certificado, criado por um desenvolvedor. Isso vale tanto para um aplicativo do iOS da Apple como para um aplicativo do Android.

24.1.1 | Requerimentos de criação do aplicativo para a Apple Store

Para criar o seu aplicativo para a Apple Store, permitindo a busca e download por milhares de usuários, forneça os seguintes arquivos:

- Um certificado de distribuição p12 (com senha).

- Um arquivo do tipo mobileprovision de distribuição.

- Um certificado de desenvolvimento p12 (com senha).

- Um arquivo do tipo mobileprovision de desenvolvimento.

- Três imagens que servirão de ícone para o seu aplicativo. (três imagens com dimensões diferentes: 29 X 29, 50 X 50 e 72 X 72 pixels, em formato PNG).

- Splash Screens (duas imagens com dimensões diferentes: 1.024 X 768 e 768 X 1.024 pixels, em formato PNG).

Em relação às imagens dos ícones, não se preocupe em criar bordas nos cantos. As três imagens quadradas irão automaticamente ganhar essas bordas na hora da criação do aplicativo.

Exemplo de ícones com 29 X 29, 50 X 50 e 72 X 72 pixels

Exemplo de imagens para Splash Screens, na vertical e horizontal.

24.1.1.1 | Certificados Apple

Para a criação dos certificados da Apple, deve-se ter previamente uma conta de desenvolvedor Apple de iOS (que tem o custo de US$ 99,00 por ano).

1. Realize a inscrição e pagamento no site os desenvolvedores (http://goo.gl/vQxz).

2. Após sua conta de desenvolvedor estar disponível, será preciso também criar a identidade do seu aplicativo, chamado de App ID. Para criar essa App ID, vá no site http://developer.apple.com e entre no iOS Dev Center com sua conta de desenvolvedor Apple.

3. Clique em iOS Provisioning Profile, link que aparece no canto direito do iOS Dev Center.

4. No Provisioning Portal, há um menu na esquerda. Clique em App IDs e depois, clique no botão New App ID que surgirá na direita.

5. Insira, no campo Description, um nome que descreva o aplicativo. Use o nome da revista e não insira caracteres especiais ou acentuados.

6. Deixe Bundle Seed ID na opção Generate New.

7. Especifique um Bundle Identifier. Isso é o identificador único do seu aplicativo.

Sugerimos inserir uma nomeação que parece a de um site ao contrário, no formato “com.nomedaeditora.nomeda revista” (sem as aspas).

8. Pressione o botão Submit para que sua App ID apareça na lista.

24.1.2 | Sobre os certificados para aplicativo do iOS

A Adobe exige dois certificados, do tipo p12, um para desenvolvimento e um para distribuição, além de arquivos mobileprovision para cada um desses certificados.

O certificado de desenvolvimento é necessário para criar um aplicativo de teste, no qual poderá verificar a funcionalidade.

Uma vez que esse aplicativo passou por sua aprovação, a Adobe precisará do certificado de distribuição para criar o aplicativo de distribuição, que ficará disponível para seus clientes na App Store.

Para gerar esses certificados p12, crie um certificado, submetá-o ao servidor dos desenvolvedores Apple, faça o download desse certificado e use o aplicativo Keychain Access para exportar a chave privada desse certificado como um certificado do tipo p12.

Já o arquivo mobileprovision é usado para determinar quais iPads podem instalar e usar seu aplicativo de teste. Esse arquivo contém uma lista de iPads autorizados para testes, identificados por um número único, chamado de UDID. Deve-se criar um arquivo mobileprovision para o certificado de desenvolvimento e um para o certificado de distribuição. O mobileprovision para o certificado de distribuição não inclui nenhuma UDID.

24.1.2.1 | Crie o certificado de desenvolvimento

1. Vá no site http://developer.apple.com e entre no iOS Dev Center com sua conta de desenvolvedor Apple.

2. Clique em iOS Provisioning Profile, link que aparece no canto direito do iOS Dev Center.

3. No Provisioning Portal, há um menu na esquerda. Clique em Certificates.

4. Veja que há abas diferentes para desenvolvimento e para distribuição.

Primeiro, iremos criar um certificado para desenvolvimento. Selecione a aba de desenvolvimento e clique em Request Certificate.

4. A nova página terá um botão requisitando um arquivo do tipo CSR (Certificate Signing Request, ou requisição de assinatura de certificado). A própria página contém instruções de como criar esse arquivo.

5. Para criar esse arquivo CSR, temos de abrir o aplicativo Keychain Access. O Keychain Access é um aplicativo que só pode ser acessado por um Mac. Esse aplicativo se encontra na pasta Applications/Utilities. No menu desse aplicativo, vá para Keychain Access/Certificate Assistant/Request a Certificate from a Certificate Authorithy.

6. A janela Certificate Assistant irá se abrir.

Especifique um endereço de e-mail válido e um nome no campo Common Name (coloque o nome da sua revista). Não insira nada em CA Email Address e peça para salvar no computador, pela opção Request is_Saved to disk.

Não é necessário ativar a opção Let me specify key pair information, mas se fizer isso, especifique 2048 bits e RSA.

7. Escolha um local para salvar o arquivo CSR e clique em Save.

8. Assim que o certificado for criado, clique em Done. Uma chave pública e uma chave privada serão adicionados ao Keychain Access.

9. Agora que criamos nosso arquivo CSR, vamos enviá-lo para o Provisioning Portal. No iOS Provisioning Portal, clique em Choose File e localize o arquivo CSR que acabou de criar. Depois, clique em Submit no canto inferior direito da página.

10. O seu certificado será adicionado ao Provisioning Portal. Uma mensagem também será enviada ao endereço de e-mail que foi especificado.

11. Se aparecer o status “Pending issuance” na página, atualize a página ou troque de aba e volte para a aba Development. Isso deverá atualizar o status para “Issued”.

12. Clique em Download para baixar o certificado em seu computador.

Este é um certificado de desenvolvimento cujo arquivo se chama “developer_identity.cer”. Criaremos a partir desse arquivo um certificado do tipo p12.

13. Clique duas vezes no arquivo “developer_identity.cer”. Isso irá iniciar o aplicativo Keychain Access e instalar o certificado.

Caso clicar duas vezes no arquivo não der certo, importe-o pelo menu do Keychain Access, pelo menu File/Import Items e especifique o arquivo “developer_identity.cer”.

14. No menu da lateral esquerda do aplicativo Keychain Access, clique em Keys e na flechinha à esquerda da chave privada para expandi-la e verificar a presença do certificado.

15. Clique com a tecla Control apertada em cima da chave privada (onde a flecha vermelha indica – ou seja – na chave privada indicada pelo termo “private key” na aba Kind, e não na chave pública e nem no certificado que aparece abaixo da chave privada).

Selecione a opção Export “name”, sendo que “name” será o nome que você especificou no campo de texto Common Name ao criar o CSR.

16. Salve a sua chave no formato Personal Information Exchange (.p12).

Escolha um nome que permite não confundí-lo com o arquivo p12 que criaremos para o certificado de distribuição. Sugerimos inserir “dev” no final do nome.

17. Uma janela irá aparecer, solicitando a criação de uma senha.

Não deixe a senha em branco, pois é necessário informar para a Adobe a sua senha para este certificado.

Pronto! Você acaba de criar o seu certificado de desenvolvimento p12.

24.1.2.2 | Crie o arquivo mobileprovision de desenvolvimento

Este arquivo mobileprovision irá permitir o teste do aplicativo nos iPads que determinar.

Ao criar o mobileprovision para o certificado de desenvolvimento, especifique os iPads que quer usar para testes na seção Devices do Provisioning Portal e, depois, adicione esses iPads na seção Provisioning desse mesmo portal.

1. Vá no site http://developer.apple.com e entre no iOS Dev Center com sua conta de desenvolvedor Apple.

2. Clique em iOS Provisioning Profile, link que aparece no canto direito do iOS Dev Center.

3. No Provisioning Portal, há um menu na esquerda. Clique em Devices. Depois, clique em Add Devices no canto superior direito da janela.

4. Como podem ver, um desenvolvedor pode especificar até 100 dispositivos para testar seus aplicativos.

Especifique o nome do dispositivo e o seu código de identificação, conhecido como UDID.

Para descobrir o UDID de um iPad utilize o aplicativo Xcode ou pelo iTunes. No iTunes, selecione o dispositivo, clique em Serial Number para revelar o UDID, então, copie e cole o UDID. Para copiar, mesmo que o mouse não consiga selecionar o texto, basta clicar em Command+C para copiar o UDID. Depois, clique em Submit.

5. Agora, vá para o menu no lado esquerdo da página e clique em Provisioning. Verifique se está na aba Development e não na Distribution. Clique em New Profile, situado no canto superior direito.

6. Especifique um nome para o Profile (inclua “Dev” no nome para distinguí-lo do Profile para distribuição).

7. Selecione o certificado que aparece em Certificates, escolha a App ID que corresponde ao seu aplicativo e especifique os dispositivos (estarão disponíveis todos os adicionados na seção Devices) que deseja para testar o aplicativo.

7. Clique em Submit.

8. Clique em Download e salve o arquivo de formato “.mobileprovision” em seu computador.

9. Agora há dois arquivos que a Adobe irá precisar para criar um aplicativo de teste: o certificado p12 de desenvolvimento e o mobileprovision de desenvolvimento.

Guarde também o arquivo “developer_identity.cer” baixado do portal da Apple.

24.1.2.3 | Crie o certificado de distribuição

Agora, seguiremos passos similares para criar o certificado p12 de distribuição.

1. Vá no site http://developer.apple.com e entre no iOS Dev Center com sua conta de desenvolvedor Apple.

2. Clique em iOS Provisioning Profile, link que aparece no canto direito do iOS Dev Center.

3. No Provisioning Portal, há um menu na esquerda. Clique em Certificates. Veja que há uma aba para Development e uma para Distribution, selecione agora a aba Distribution.

4. Precisaremos requisitar um certificado pelo botão Request Certificate. Mas, para isso, teremos que criar um arquivo do tipo CSR (Certificate Signing Request, ou requisição de assinatura de certificado).

Para criar esse arquivo CSR, temos de abrir o aplicativo Keychain Access. Lembre-se que esse aplicativo só pode ser acessado em Macs. Esse aplicativo se encontra na pasta Applications/Utilities. No menu desse aplicativo, vá para Keychain Access/Certificate Assistant/Request a Certificate from a Certificate Authorithy.

5. A janela Certificate Assistant irá se abrir. Especifique um endereço de e-mail válido e um nome no campo Common Name (coloque o nome da sua revista e insira também “dist” ou “final” para especificar que será para um certificado de distribuição). Não insira nada em CA Email Address e peça para salvar no computador, pela opção Request is_Saved to disk.

6. Escolha um local para salvar o arquivo CSR e clique em Save.

7. Assim que o certificado for criado, clique em Done. Uma chave pública e uma chave privada serão adicionados ao Keychain Access.

24.1.2.4 | As novas chaves para o certificado de distribuição

Agora que criamos nosso arquivo CSR, vamos enviá-lo para o Provisioning Portal.

1. No iOS Provisioning Portal, na página “Certificates”, na aba Distribution, clique em Request Certificate. Na nova página, clique Choose File, localize e indique o arquivo CSR que acabou de criar. Depois, clique em Submit no canto inferior direito.

2. O seu certificado será adicionado ao Provisioning Portal. Uma mensagem também será enviada ao endereço especificado.

3. Se aparecer o status “Pending issuance” na página, atualize a página ou troque de aba e volte para a aba Development. Isso deverá atualizar o status para “Issued”.

4. Clique em Download para baixar o certificado em seu computador. Este é um certificado de distribuição chamado de “distribution_identity.cer”. Criaremos a partir desse arquivo um certificado do tipo p12.

5. Clique duas vezes no arquivo “distribution_identity.cer”. Isso irá iniciar o aplicativo Keychain Access e instalar o certificado.

Caso clicar duas vezes no arquivo não der certo, importe-o pelo menu do Keychain Access, pelo menu File/Import Items e especifique o arquivo “distribution_identity.cer”.

6. No menu da lateral esquerda do aplicativo Keychain Access, clique em Keys. Clique na flechinha à esquerda da chave privada (a chave para o aplicativo de distribuição e não o de desenvolvimento) para expandi-la e verificar a presença do certificado.

7. Clique com a tecla Control apertada em cima da chave privada (onde a flecha vermelha indica – ou seja – na chave privada indicada pelo termo “private key” na aba Kind, e não na chave pública e nem no certificado que aparece abaixo da chave privada, e nem na chave privada do aplicativo de desenvolvimento).

8. Selecione a opção Export “name”, sendo que “name” será o nome especificado no campo de texto Common Name ao criar o CSR.

9. Salve a sua chave no formato Personal Information Exchange (.p12). Escolha um nome que permite não confundí-lo com o arquivo p12 que criamos para o certificado de desenvolvimento. Sugiro inserir “dist” no final do nome.

10. Uma janela irá aparecer, solicitando a criação de uma senha.

Não deixe a senha em branco, pois deverá informá-la para a Adobe para este certificado.

Pronto! Você acaba de criar o seu certificado de distribuição p12.

24.1.2.5 | Crie o arquivo mobileprovision de distribuição

Um arquivo mobileprovision permite o teste do aplicativo nos iPads que forem determinados.

Mas um arquivo mobileprovision voltado para distribuição não especifica a identidade de nenhum iPad. Afinal, você quer que todos os iPads tenham permissão para a instalação desse aplicativo. Por isso, será preciso apenas criar um arquivo mobileprovision.

1. Vá no site http://developer.apple.com e entre no iOS Dev Center com sua conta de desenvolvedor Apple.

2. Clique em iOS Provisioning Profile, link que aparece no canto direito do iOS Dev Center.

3. No Provisioning Portal, há um menu na esquerda. Clique em Provisioning. Veja que há uma aba Development e uma aba Distribution. Selecione a Distribution e clique em New Profile.

4. Para Distribution Method, selecione a App Store.

5. Em Profile Name, especifique um nome para o Profile (inclua “Dist” no nome para distingui-lo do Profile para desenvolvimento).

6. Em App ID, selecione na lista a App ID de seu aplicativo.

7. Clique em Submit.

8. Na janela que lista seus Profiles de distribuição, seu novo Profile irá aparecer. Clique em Download e salve o arquivo “.mobileprovision” em seu computador.

Agora você tem todos os arquivos necessários para a Adobe criar um aplicativo de teste e um de distribuição. Guarde também o certificado de distribuição que você baixou do portal da Apple.

Neste exemplo, separamos os arquivos em duas pastas: uma pasta para o aplicativo de teste e uma para o de distribuição.

Ambos tem um arquivo “.cer” baixado do portal dos desenvolvedores Apple e dois arquivos necessários para a Adobe criar seu aplicativo no iOS: um certificado p12 e um mobileprovision.

24.1.2.6 | Teste os seus certificados

Você pode testar seus certificados p12 adicionando-os cada um no Keychain Access, caso não tenha feito isso ainda.

1. Clique duas vezes em um certificado p12 e digite a senha que você determinou para ele.

Assim que você digitar essa senha, você deverá ver o seu certificado na aba “login” do Keychain Access.

2. Expanda esse certificado clicando na flechinha à esquerda, para verificar se esse certificado contém uma chave privada.

O nome desse certificado também deve começar com “iPhone Distribution” ou “iPhone Developer” (sim, essa é a nomeação, mesmo se esse aplicativo for para iPad).

24.2 | Requerimentos de criação do aplicativo para o Android Market

Para criar o seu aplicativo para o Android Market, permitindo a sua busca e download por milhares de usuários, você deverá fornecer os seguintes arquivos:

- Um certificado p12 de chave privada.

- Três imagens que servirão de ícone para o seu aplicativo. (três imagens com dimensões diferentes: 36 X 36, 48 X 48 e 72 X 72 pixels, em formato PNG).

- Splash Screens (duas imagens com dimensões diferentes: 1.280 X 800 e 800 X 1.280 pixels, em formato PNG).

O Android usará apenas um tamanho de tela para as Splash Screens.

Se um tablet com Android tiver uma tela menor do que 1.280 X 800 pixels, o conteúdo nas bordas será cortado. Por isso, coloque sempre as informações importantes no centro da imagem e nunca nas bordas.

O primeiro splash (na versão horizontal neste exemplo) não terá conteúdo cortado em tablets de tela menor. Já o segundo splash não mostrará o logo da revista nesses tablets.

Para a criação de um aplicativo para o Android Market, você deverá ter previamente uma conta de desenvolvedor Android (que tem o custo de US$ 25,00).

Você pode realizar a inscrição e pagamento no site de desenvolvedores (http://goo.gl/N2XVQ). Esse mesmo site oferece todas as informações para a criação de um certificado privado (http://goo.gl/E9xFC).

Você pode criar esse certificado com o programa Keytool, tanto em um Mac OS como em um PC.

24.2.1 | Criação de certificado p12 para Android no Mac OS:

1. Abra o aplicativo Terminal, disponível no Mac: Applications/Utilities/Terminal.

2. Escreva ou copie a linha a seguir (substitua “myname.key.p12” por um nome que represente o seu certificado):

keytool -genkey -v -keystore myname.key.p12 -alias alias_name -keyalg RSA -keysize 2048 -storetype pkcs12 -validity 10000

O campo validity deve ser especificado com o valor 10000 para que a expiração desse certificado seja para uma data após 22 de outubro de 2033. O Android requer um certificado com expiração para depois dessa data.

3. Insira uma senha (de pelo menos seis caracteres) e reinsira essa senha novamente para confirmação.

Essa senha deverá ser disponibilizada para a Adobe, pois, por enquanto, o serviço Viewer Builder ainda não dá suporte para aplicativos Android personalizados.

4. O Terminal pedirá para você informar seu nome e sobrenome, seu grupo organizacional dentro da sua empresa, a sua empresa, cidade, Estado, a sigla de duas letras do seu Estado e confirmar tudo com “yes” (sem as aspas). Depois, pressione o botão Return do teclado.

5. Um certificado será salvo, geralmente na sua pasta de usuário. Copie esse arquivo para uma pasta que tenha também suas imagens de splash screen e de ícones para facilitar a localização e escreva em um local seguro a sua senha.

24.2.2 | Criação de certificado p12 para Android no Windows

1. Faça o download e instale o Java SDK – JDK (http://goo.gl/zXjC). Tome nota do local da instalação desse programa.

2. Abra o Command Prompt. Isso pode ser feito ao escrever “command” (sem as aspas) no campo de texto de Run, que fica no botão Start (Iniciar) do Windows.

3. Indique o diretório onde você instalou os comandos JDK.

Por exemplo, digite cd\ e depois digite cd\arquivo de programas\Java\jdk1.6.0\bin

Especifique o número da versão correta. Pode ocorrer que você precise trocar “arquivo de programas” por “program files” se estiver com um Windows em inglês.

4. Digite ou copie a linha seguinte (substitua “myname.key.p12” por um nome que represente seu certificado):

keytool -genkey -v -keystore myname.key.p12 -alias alias_name -keyalg RSA -storetype pkcs12 -keysize 2048 -validity 10000

O campo validity deve ser especificado com o valor 10000 para que a expiração desse certificado seja para uma data após 22 de outubro de 2033. O Android requer um certificado com expiração para depois dessa data.

5. Insira uma senha (de pelo menos seis caracteres) e reinsira essa senha novamente para confirmação.

Essa senha deverá ser disponibilizada para a Adobe, pois, por enquanto, o serviço Viewer Builder ainda não dá suporte para aplicativos Android personalizados.

6. O Prompt de comando pedirá para você informar seu nome e sobrenome, seu grupo organizacional dentro da sua empresa, a sua empresa, cidade, Estado, a sigla de duas letras do seu Estado e confirmar tudo com “yes” (sem as aspas). Depois, pressione o botão Return do teclado.

7. Um certificado será salvo, geralmente na sua pasta de usuário. Copie esse arquivo para uma pasta que tenha também suas imagens de splash screen e de ícones para facilitar a localização e escreva em um local seguro a sua senha.

Caso o certificado não tenha sido criado, substitua no Command Prompt a parte “-keystore myname.keystore” (sem as aspas) escrevendo uma localidade no computador que você tenha acesso, como, por exemplo, “-keystore c:users\jean\photopro.keystore” (sem as aspas).

25 | COMO E ONDE COLOCAR À VENDA OU DISTRIBUIÇÃO GRATUITA

A colocação da sua revista digital à venda (ou sua distribuição gratuita) depende da compra dos serviços da ADPS e de cadastros para se tornar um desenvolvedor de aplicativos orientados para determinado sistema operacional como o iOS e o Android.

Atualmente, a solução ADPS pode ser adquirida no Brasil por meio de um parceiro da Adobe, o 24/7 Inteligência Digital (www.247id.com.br).

A compra dos serviços ADPS, seja com o Professional Edition ou o Enterprise Edition, darão acesso ao suporte técnico e a diversos recursos disponíveis no servidor da Adobe dedicado a publicação digital: https://digitalpublishing.acrobat.com

Mas, mesmo sem a compra desses serviços, ainda é possível acessar esse servidor para editar os metadados das suas revistas digitais.

25.1 | Criação do aplicativo de venda

Mesmo com a revista pronta, ela precisará ser vendida por meio de um aplicativo. Para criá-lo siga este Passo a passo:

1. Acesse o servidor da Adobe dedicado a publicação digital (https://digitalpublishing.acrobat.com) e você terá como página inicial o Dashboard.

2. Entre no Viewer Builder, que é o recurso que irá criar o aplicativo de venda e leitura de seus Folios. A criação deste aplicativo exige arquivos e imagens, como imagens Splash (imagens que aparecem por três segundos na tela assim que o aplicativo é aberto) e certificados de desenvolvimento.

Mas, primeiro, decida no Viewer Builder se o aplicativo pelo qual os leitores irão acessar sua publicação digital, será voltado para visualização de um Folio único ou para visualização de múltiplos Folios.

25.1.1 | Aplicativo de Folio único

Um aplicativo para visualização de um Folio único (Single-Folio Viewer App) permite a criação de um aplicativo para leitura de apenas uma publicação digital, ou seja, de apenas um Folio.

Como revistas são caracterizadas pela periodicidade, essa é uma opção mais recomendada para uma edição especial, ou para um livro/conto/história interativa.

A página inicial de seu aplicativo não terá uma livraria com todas as edições disponíveis para download, já que há apenas uma edição disponível. O Viewer Builder pedirá que você especifique o Folio que fará parte do aplicativo.

Você pode criar este tipo de aplicativo para tablets iPad mas, por enquanto, não para tablets com Android.

Ao enviar o seu aplicativo para aprovação da Apple ou do Android, você poderá estabelecer o preço para download desse aplicativo (inclusive decidir que ele será gratuito).

25.1.2 | Aplicativo de Folio múltiplo

Já o aplicativo para visualização de múltiplos Folios é aquele voltado justamente para o acesso a mais de uma publicação digital, como as diferentes edições de uma revista periódica.

Você não vai especificar nenhum Folio por meio do Viewer Builder. Esse serviço criará um aplicativo sem Folios. Os Folios serão inseridos dentro do aplicativo por meio do Folio Producer Organizer (acessível no Dashboard).

1. Para isso, basta selecionar o Folio que você quer publicar e clicar no botão Publish, na parte de cima do Folio Producer Organizer.

Para remover um Folio já publicado, selecione esse Folio e clique no botão Remove, que fica ao lado de Publish.

Cada revista publicada desta forma estará visível na página inicial do aplicativo.

2. É necessário criar uma Adobe ID para cada aplicativo de múltiplos Folios que você criar. Portanto, se quiser três aplicativos para três revistas diferentes, terá que criar três Adobe IDs.

É possível criar dois tipos de revistas digitais para serem publicadas em aplicativos de múltiplos Folios: revistas gratuitas e pagas.

Qualquer Folio publicado que tenha seu valor definido como gratuito e público irá automaticamente aparecer no aplicativo com um botão de Download na lateral.

Após fazer o download da revista, ela já estará imediatamente disponível para visualização, sem nenhum custo. Mas qualquer Folio que você defina como pago e público deverá ser ligado a um sistema de compras estabelecido entre sua empresa e o iTunes ou Android Market.

Ao publicar um Folio, use o mesmo Product ID que usou ao estabelecer o sistema de compra com o iTunes/Android Market.

Todo Folio pago que for publicado irá aparecer na primeira página do aplicativo com um botão Buy ao seu lado.

Quando o leitor clica nesse botão, ele terá a oportunidade de pagar pela revista e, após o pagamento, ter acesso à publicação.

Mas além de poder comprar Folios avulsos, também é possível estabelecer um aplicativo de Folios múltiplos com opções de assinaturas.

Essa opção irá introduzir um botão Sign In para que um assinante possa acessar os Folios a que ele tem direito, dependendo da opção de assinatura que ele escolheu.

A página inicial oferecerá acesso a um plano (ou diferentes planos) de assinatura com um preço estabelecido pelo criador da revista.

Se você optou por uma conta Enterprise da ADPS, poderá também criar aplicativos de iPad apenas para distribuição interna. Ou seja, aplicativos disponíveis apenas para quem você convidar, que não são acessíveis publicamente na App Store.

Isso pode ser muito útil para revistas empresariais voltadas apenas para seus funcionários e acionistas, entre outras possibilidades.

25.2 | Edição das revistas no servidor da ADPS

25.2.1 | O Dashboard

No Dashboard, use o Analytics para ter acesso a dados sobre suas publicações digitais, como quantidade de downloads de suas revistas que os leitores fizeram, por exemplo.

25.2.2 | Folio Producer

Já o Folio Producer é o seu recurso principal para editar seus Folios antes de sua publicação.

Um representante da Adobe irá auxiliar o cliente com o estabelecimento de diversas contas para acesso ao Dashboard, dependendo das necessidades da empresa contratante.

Vale reforçar que é possível convidar pessoas para serem coautores de suas publicações digitais. Basta selecionar o seu Folio, no painel Folio Builder, e clicar em Share no menu do painel, inserindo posteriormente o e-mail de seu colega na mensagem a ser enviada. Essa pessoa poderá visualizar o Folio no Content Viewer do tablet dela, desde que ela tenha criado uma Adobe ID (que é gratuita) no Acrobat.com. Esse mesmo coautor pode adicionar novos artigos para o seu Folio, exportando-os por meio do painel Folio Builder se ele tiver um InDesign CS5 (com o Folio Producer Tools instalado) ou CS5.5. Mas ele não conseguirá abrir e editar os artigos que você criou por meio desse painel (afinal, ele não tem acesso aos arquivos originais INDD), nem terá acesso ao Dashboard, que é exclusivo a quem comprou o serviço ADPS.

Ao entrar no Folio Producer, dentro de Dashboard, será possível organizar, editar e publicar seus Folios, além de visualizar todos os Folios já publicados na seção Organizer e visualizar os artigos de um Folio na seção Editor.

O Organizer permite editar as propriedades da sua revista digital. Com o seu Folio selecionado, existem diversas opções na aba que fica no topo da página.

Open: Abre o Folio selecionado para edição dos seus artigos.

Delete: Apaga o Folio selecionado.

Símbolo do Share (duas pessoas): Permite compartilhar, ou descompartilhar seu Folio com colegas e clientes.

Publish: Publicar o Folio para o aplicativo de vendas, permitindo sua compra e download nos tablets (caso você já tenha pago a ADPS para efetuar a publicação). É possível optar por publicar em modo privado, para que os leitores não tenham acesso.

Remove: Esse botão ficará ativo após a publicação de seu Folio. Ele permite remover o seu Folio do servidor de Folios publicados no aplicativo de vendas.

Export: Esse botão também só ficará ativo após publicação do Folio. O Export exporta o Folio para o computador, em um arquivo zip. Depois de descompactado, será possível acessar os arquivos “.Folio” de cada artigo, que podem ser visualizados pelo Content Viewer para desktop.

Os Folios irão aparecer nesta página somente depois de terem sido importados pelo Folio Builder. Você tem diversas opções para editar seu Folio.

A lista de Folios fica abaixo dessa aba e permite alterar diretamente os metadados da sua revista digital.

Locked: Impede qualquer pessoa (o criador da revista ou qualquer coautor convidado por meio da opção Share do Folio Builder) atualize e modifique a revista.

Active: Ative essa opção para indicar que o seu Folio está em produção. Um ícone verde irá aparecer no Folio ativado no painel Folio Builder.

Folio Name: Apenas um nome de fácil identificação, para visualização na página do Folio Producer e no painel Folio Builder. Pode ser um nome técnico como “Revista_02_agosto”, pois esse nome não será visível ao leitor do seu Folio.

Publication Name: Nome do Folio que ficará visível ao leitor na página inicial de seu aplicativo, chamado de Viewer Library (que mostra todas as edições disponíveis para download) e no navegador interno do seu aplicativo. Insira o nome comercial da sua publicação.

Folio Number: O número da edição ou uma referência temporal da periodicidade sua publicação, como “01”, “nº1”, “Número 1”, “Abril de 2012”, “Verão 2012” etc.

Publication Date: Data de publicação da revista. Essa informação não ficará visível para o leitor e serve apenas para facilitar a localização do Folio no servidor.

Descrição: Descrição do Folio que ficará visível ao leitor no Viewer Library (a página inicial do seu aplicativo).

Vertical/Horizontal Preview: Especifique uma imagem em formato JPEG ou PNG para servir de ícone da revista no Viewer Library.

Ao se clicar duas vezes em um Folio, ou ao selecionar um Folio e clicar no botão Open na parte superior esquerda da página, no Folio Producer Organizer, entra-se na seção do Editor, para efetuar alterações no seu artigo. Algumas alterações de metadados já podem ser efetuados diretamente pelo painel Folio Builder, ao se selecionar o artigo e clicar em Properties no menu do painel. Mas há informações editáveis somente nesta seção, tanto pelo Thumbnail View como no List View.

O Folio Producer Editor possui uma aba na parte de cima da página com opções para editar os seus artigos.

Add: Adiciona um artigo ao seu Folio. Só é possível adicionar um artigo de um Folio que já esteja em seu servidor. Para isso, selecione o nome do Folio e o nome do artigo e clique em Add.

HTML: Importar recursos HTML para o seu Folio. Esses recursos devem estar compactados em um arquivo Zip que deve ser nomeado como “HTMLResources.zip”. Isso é para o caso de criar páginas baseadas em HTML ao invés de baseadas em InDesign. O HTMLResources irá conter todos os arquivos para o funcionamento das páginas HTML como imagens, scripts e CSS. Só é possível importar um HTMLResources.zip por Folio.

Botões de visualização: Permite visualizar seus artigos conforme a imagem a seguir.

A: Visualização dos artigos em forma de lista, List View (esquerda) e em forma de thumbnails, Thumbnail View (direita)

B: Visualização dos artigos em orientação horizontal (esquerda) e vertical (direita).

25.2.2.1 | Edição no Thumbnail View

Ao editar seus artigos no Thumbnail View, é possível mudar a ordem dos artigos diretamente, arrastando o artigo selecionado.

Além disso é possível também:

- Alterar as mesmas propriedades do artigo editáveis pelo Folio Builder. Todas as alterações feitas aqui serão refletidas na janela Properties do seu artigo no painel Folio Builder e vice-versa.

- Solicitar um preview da sua revista nas duas orientações e alterar o tamanho da visualização no slider Thumbnail Size, na parte de cima da página.

- Copiar um artigo de qualquer Folio para criar um artigo adicional. Para isso, clique no botão Add, na parte superior esquerda da página, e escolha um artigo do seu Folio ou de qualquer outro Folio em seu servidor para ser copiado.

- Copiar um artigo deste Folio para outro Folio deste servidor. Para tanto, selecione o artigo e clique no menu pop-up deste artigo, selecione então a opção Copy To e escolha um Folio para receber o artigo copiado.

- Neste mesmo menu pop-up, é possível renomear um artigo. Renomeá-los desta forma altera o Article Name, que é um nome usado apenas para fácil identificação do artigo (como por exemplo, “02_entrev_ronaldinho”) e que não será visualizado pelo leitor no aplicativo.

Cuidado ao usar este recurso! Isso pode quebrar links de um artigo para o outro, pois os links do tipo navto:// precisam usar os nomes exatos do Article Name.

25.2.2.2 | Edição no List View

Veja o descritivo das opções de edição de seus artigos no List View:

Order: Altera a ordem dos artigos.

Locked: Bloqueia um artigo, para que não seja atualizado pelo criador da revista nem por qualquer coautor.

Dowload Priority: Aumenta a prioridade do download de um artigo acima de um artigo anterior. O leitor poderá ler a revista mesmo se o download dela não estiver completo. Isso porque as páginas que já foram baixadas podem ser visualizadas. A prioridade dos primeiros artigos a serem baixados é do começo ao fim da revista.

Article Name: Altera o nome do artigo que é um nome usado apenas para fácil identificação do artigo e que não será visualizado pelo leitor no aplicativo. Novamente, cuidado ao usar este recurso! Isso pode quebrar links de um artigo para o outro, pois os links do tipo navto:// precisam usar os nomes exatos do Article Name.

Article Title: Altera os títulos dos artigos que são visíveis no navegador ADPS que o leitor acessa. Por isso, use nomes que são realmente usados em manchetes e títulos jornalísticos.

Alterar o Article Title não quebra os links do tipo navto://que apontam para o artigo, pois esse link faz referência ao Article Name e não ao Article Title.

Byline: O nome do autor (ou autores) do artigo. Este nome aparecerá no navegador do seu aplicativo. Pode-se deixar esse campo vazio se quiser (para seções que não tenham um autor específico, como o índice da revista, por exemplo).

Kicker: Áreas editoriais (como Esportes, Moda, Tecnologia etc.). Também ajuda a identificar um artigo quando o leitor ativa o navegador ao ler sua revista. Também pode ficar em branco (mas, por profissionalismo, recomendamos sempre identificar a função de um artigo).

Description: Descrição do artigo que ficará visível quando o leitor acessar o navegador da sua revista digital.

Tags: Palavras-chave que descrevem os elementos fundamentais do artigo e aparecem no modo Browse do navegador da revista digital. Por exemplo, se o artigo for sobre circo, suas tags serão “mágico”, “malabarista”, “palhaço”, “trapezista”.

Ad: Define se este artigo é ou não um anúncio. Anúncios não aparecem no Table of Contents (índice) do navegador da sua revista.

Smooth Scrooling: Ative esta opção (ao invés do padrão Off – Snap to Page) somente se o documento do seu artigo tiver a altura maior que a tela do tablet. (Por exemplo, um arquivo de 768 X 3.000 pixels para uma tela de iPad de 768 X 1.024 pixels).

H Swipe Only: Ative esta opção para as páginas serem lidas da esquerda para a direita (como na leitura clássica de um impresso) e não de cima para baixo.

TOC: Altera as imagens que representam respectivamente cada um dos artigos e ficam visíveis no navegador das revistas digitais. Clique em Change, na aba, para escolher uma imagem PNG de 70 X 70 pixels.

Lembre-se que, com exceção das opções Order, Locked, Dowload Priority e Tags, todas as outras opções podem ser diretamente alteradas na janela Properties do artigo dentro do painel Folio Builder do InDesign. Qualquer alteração nas opções desse artigo pelo painel se refletirá nas opções dispostas no servidor, e vice-versa.

25.3 | Publicação de um Folio

Chegou a hora de publicar sua revista!

1. Acesse o servidor da Adobe dedicado a publicação digital (https://digitalpublishing.acrobat.com) para ter acesso ao Dashboard.

2. No Dashboard, entre em Folio Producer, no Folio Producer Organizer, selecione um Folio (que foi exportado do InDesign a partir do painel Folio Builder) e clique em Publish.

3. Especifique o status e a identidade do Folio.

Status: Escolha entre Private (indisponível para os leitores) ou Public (o Folio ficará disponível para download aos leitores do seu aplicativo). Escolha também entre as opções Free (permite o download gratuito da revista) e Retail (permite o download apenas depois do pagamento dentro do aplicativo, clicando no botão Buy ao lado da revista) ou por meio de uma assinatura).

Você poderá estabelecer o preço da sua revista no site de desenvolvedores da Apple.

Product ID: A ADPS recomenda identificar seu produto como um website escrito ao contrário, no seguinte formato: com.nomedaeditora.nomedapublicacao.numerodaedicao (por exemplo: com.BytesandTypes.revistasurflegal.agosto2012).

Se o seu conteúdo for pago, ou seja, se você ativou a opção Retail em Status, então deixe o Product ID do Folio igual ao Product ID da sua loja, como o Product ID que você especificou na criação do aplicativo de venda no In App Purchase Process do iPad, por exemplo.

4. Por fim, clique em Publish. Pronto! Sua revista será publicada (a não ser que ela contenha erros como diferentes pastas de artigos com orientações conflitantes uma das outras ou artigos com proporção de largura e altura conflitantes com o tamanho do Folio).

Assim que o Folio for publicado, o botão Publish é substituído pelo botão Update. Isso permite que você atualize esse Folio pelo InDesign, envie a atualização pelo Folio Builder para o Dashboard e, por fim, atualize do Dashboard para o aplicativo de venda pelo botão Update.

Depois de publicado, o botão Remove também ficará ativo, caso você queira que essa publicação não fique mais disponível para download.

O botão Export também ficará ativo para exportar seu Folio para o computador em arquivos “.folio” que podem ser vistos no Content Viewer para desktop.

Mas, fique ciente que um leitor ainda poderá ler uma revista que ele baixou até o momento em que ele decidir arquivá-la.

26 | CONSIDERAÇÕES FINAIS, CHECKLIST E BOOKMARKS DE WEB SITES ÚTEIS

26.1 | Considerações finais

26.1.1 | Um novo horizonte

Parabéns por ter se dedicado ao estudo deste novo universo chamado revista digital.

Por se tratar de uma nova mídia a ser explorada, ainda há muito para se descobrir e também para se criar. Mas quem estiver preparado e atualizado, já terá enorme vantagem sobre os concorrentes: a vantagem de estar na frente, com melhor visão do mercado e conhecimento das ferramentas disponíveis.

A revista digital não vai matar a revista impressa, assim como a televisão não matou o rádio, mas sua presença irá crescer, e muito, diante de suas enormes vantagens de portabilidade, acessibilidade e funcionalidade. Esse crescimento só depende da iniciativa de pessoas como você, dispostas a produzir e criar novas formas de narrativa que eduquem, entretenham, informem e sensibilizem os leitores.

Se você quiser mostrar a produção de sua revista para o Jean Pluvinage, selecione seu Folio no Folio Builder e, no menu do painel, clique em Share. Na janela que irá aparecer, insira o e-mail jean.pluvinage@gmail.com na caixa de texto de Share this Folio with. O coautor terá o prazer de ver e testar sua revista.

26.2 | Checklist

26.2.1 | Versão do InDesign

- Uso de InDesign CS5 ou CS5.5.

26.2.2 | Updates e atualizações

- Entre no site http://digitalpublishing.acrobat.com e faça o download do Folio Producer Tools e do Folio Builder Panel pelos links da janela Updates.

26.2.3 | Organização de pastas e arquivos

- Todo o conteúdo da revista digital deve estar dentro de uma pasta, chamada pasta de Folio.

- Essa pasta de Folio contém apenas pastas de artigos.

26.2.4 | Nomeação dos arquivos

- Cada pasta de artigo contém pelo menos um arquivo INDD.

- Cada arquivo INDD da pasta de arquivo tem como extensão “_v.indd” (orientação vertical) ou “_h.indd” (orientação horizontal).

- Uma revista de orientação única tem arquivos INDD somente de extensão “_v.indd” ou somente de extensão “_h.indd”.

- Uma revista de orientação dupla deve ter sempre, em cada pasta de artigo, dois arquivos INDD, sendo um com a extensão “_v.INDD” e o outro com a extensão “_h.INDD”.

26.2.5 | Tamanho dos arquivos

- Todos os arquivos da pasta de Folio tem uma relação de largura e altura compatível com o tamanho do Folio. Por exemplo, um Folio para tela de iPad (1.024 X 768) pode ter arquivos com tamanho de 1.024 X 768 pixels e de 800 X 600 pixels, por exemplo. Mas não pode arquivos de 1.024 X 600 pixels.

- Um arquivo com altura maior do que a altura da tela do tablet será considerado um artigo com Smooth Scrolling (por exemplo, um arquivo de 1.024 X 3.000 pixels para a tela do iPad de 1.024 X 768 pixels). Esse arquivo deve conter apenas uma página. Por enquanto não é possível fazer artigos com Smooth Scrolling na horizontal (com largura maior do que a largura de tela do tablet).

26.2.6 | Imagens Bitmap

- Estão no espaço de cor RGB.

- Estão com resolução próxima de 72 ppi.

- Podem ser em qualquer formato, mas recomendamos, por questão de tamanho, JPEG e PNG (caso tenham transparência).

26.2.7 | Áudios

- Arquivos MP3 e para melhor relação entre qualidade e tamanho, use compressão de 128/kbps.

26.2.8 | Vídeos

- Arquivos compatíveis com o iTunes sendo o mais recomendado é o MP4 com compressão de h.264.

26.2.9 | Fontes

- Qualquer uma, com o tamanho mínimo de 14px.

- Caso ocorra transferência de arquivos InDesign entre PCs e Macs no seu fluxo de trabalho antes da publicação, use fontes Opentype para que ambas as plataformas reconheçam a fonte.

26.2.10 | Overlays

- Todos os overlays ficam acima de qualquer elemento que não seja um overlay.

- Para as opções Slideshow, Hyperlink, Audio & Video e Pan & Zoom é preciso criar ou inserir o objeto no documento do InDesign para depois editar as opções de interatividade no painel.

- Para as opções Image Sequence, Web Content e Panorama é preciso inserir uma imagem ou criar um frame retangular e, depois, usar o Overlay Creator para especificar a fonte das imagens (para o Image Sequence e Panorama) ou a fonte do URL ou arquivo (para o Web Content).

- As imagens que irão compor os overlays Panorama, Image Sequence (para ilusões de imagens com rotação de 360º), Pan & Zoom e as imagens do controller de áudio do Audio & Video devem ter as dimensões exatas em pixels e 72 ppi para se obter os melhores resultados.

- Overlays de Panorama, Image Sequence e do controller de áudio do Audio & Video devem ter todas as imagens que compõem o overlay dentro de uma pasta. Essa pasta deve conter exclusivamente as imagens do Overlay e estar inserida dentro de uma pasta de arquivo, de preferência na pasta de arquivo na qual o overlay é usado.

- Se o conteúdo local HTML foi colocado em overlay de Web Content, é necessário reunir todos os arquivos dentro de uma pasta. Essa pasta deve estar inserida dentro de uma pasta de arquivo, de preferência na pasta de arquivo na qual o overlay é usado.

- O overlay de Slideshow usado tanto na vertical como na horizontal deve ter o mesmo nome (Object Name no painel Object States) para manter o leitor no mesmo slide ao mudar a orientação.

- Para inserir dois overlays de Image Sequence iguais na mesma página, crie uma pasta com imagens iguais para cada um deles. Eles não funcionarão se o painel Overlay Creator ligar esses overlays à mesma pasta de imagens.

- Hyperlinks devem ter a nomenclatura completa, incluindo o prefixo (“http://”, por exemplo).

- Para conectar um artigo com o outro, use o prefixo “navto://” e o nome do artigo exatamente igual como ele é nomeado no Folio Builder, na seção Article View do painel (na importação, o Folio Builder automaticamente nomeia o artigo com o nome da pasta de artigo).

26.2.11 | Metadados

- Foram inseridos metadados para cada artigo, como nome, autor, descrição, editoria, thumbnail (uma imagem PNG de 70 X 70 pixels) ou tags. Tudo isso facilita a navegação do leitor.

- Foi indicado se os artigos são anúncios ou não, e se a leitura será feita no eixo horizontal ou de cima para baixo.

26.3 | Aplicativo de venda

- Antes de publicar a revista, é preciso um aplicativo de venda. Acesse o serviço ADPS que você, sua empresa ou a empresa cliente comprou e, no Viewer Builder, estabeleça se seu aplicativo será de Folio único ou múltiplo e, se for múltiplo, se terá também um sistema de assinaturas.

- Indique os ícones, imagens splash e certificados necessários para criar esse aplicativo e envie-o para aprovação no sistema de compras do tablet (App Store ou Android Market, por exemplo). Você precisará de uma conta de desenvolvedor sua, da sua empresa ou da empresa cliente.

26.3.1 | Publicação

- Ao publicar a revista, deixe seu status como Public e indique se será gratuita (Free) ou paga (Retail).

26.4 | Bookmarks de web sites úteis

26.4.1 | Adobe Digital Publishing Suite

Site oficial

- http://www.adobe.com/products/digitalpublishingsuite/

Blog oficial

- http://blogs.adobe.com/digitalpublishing/

Twitter

- http://twitter.com/AdobeDigitalPub

Fórum de ajuda

- http://fórums.adobe.com/community/dps/

Grupo de discussão sobre Revistas Digitais

- http://goo.gl/8unhb

26.4.2 | Cadastros

Desenvolvedor iOS Apple

- http://developer.apple.com/programs/ios/

Desenvolvedor Android

- http://developer.android.com/index.html

Criação de Adobe ID

- http://www.acrobat.com

26.4.3 | Mais informações sobre o mercado de publicações digitais

- http://www.bytestypes.com.br

26.4.4 | Downloads

Plug-ins para usar as ferramentas de interatividade do InDesign

- http://digitalpublishing.acrobat.com - Na janela Updates

Versão mais atual do Adobe Air

- http://get.adobe.com/air/

26.4.5 | Parceiro da ADPS no Brasil

24/7 Inteligencia Digital

- www.247id.com.br

OUTROS TÍTULOS DA EDITORA

Fluxos Colaborativos com InDesign & InCopy

Esta coleção trata do mais renomado e versátil aplicativo de paginação disponível no mercado, e largamente utilizado por designers e criativos em todo o mundo.

O objetivo é explicar de forma simples e objetiva, as várias ferramentas, comandos e recursos do InDesign CS5 para tornar o processo de diagramação de projetos gráficos tais como materiais publicitários, promocionais e editoriais, muito mais fácil e eficiente.

A coleção é composta por diversos volumes que concentram os recursos correlatos para a diagramação, arte-finalização e geração de arquivos PDF, além das novidades incorporadas na versão CS5.5.

Para facilitar o aprendizado, existem exemplos práticos Passo a passo e os procedimentos são ilustrados com as capturs de telas do aplicativo. Além disso, existem dezenas de valiosas dicas, truques, e principalmente avisos e recomendações espalhadas pelas páginas dos capítulos.

O quinto volume descreve os procedimentos, técnicas, recursos e comandos disponíveis no InDesign e InCopy utilizados para edição colaborativa de materiais editoriais e publicitários, além de servir de base para o gerenciamento de fluxos de trabalho paralelos em empresas de vários segmentos.

Um arquivo PDF com amostras do livro pode ser baixado do link www.bytestypes.com. br/livros ou solicitado diretamente á editora (livros@bytestypes.com.br).

Este volume, assim como outros livros, pode ser adquirido na loja virtual da Bytes & Types (http://loja.bytestypes.com.br), e enviado para qualquer local do País.

Resumo

- Autores: Ricardo Minoru Horie

Ana Cristina Pedrozo

- Qtd. de Páginas: 140

- Formato: 148 X 210 mm

- Peso: 330 g

www.bytestypes.com.br

livros@bytestypes.com.br

OUTROS TÍTULOS DA EDITORA

Coleção eBooks - Arte-finalização para livros eletrônicos nos formatos ePub e Mobi

O primeiro volume da coleção “eBooks” explica em detalhes os procedimentos para que profissionais de diagramação de livros dos mais variados segmentos, possam produzir livros eletrônicos nos formatos ePub, Mobi e PDF, para serem lidos e visualizados por aplicativos instalados em computadores de mesa, notebooks, netbooks, smartphones, celulares, eReaders e tablets tais como o iPad, Sony Reader, Nook, Kindle etc.

Usando como ferramenta principal o InDesign CS5, e alguns outros utilitários, o volume “Arte-finalização e conversão para livros eletrônicos” descreve os conceitos e características dos principais formatos, cuidados, procedimentos técnicos, preparação dos elementos de página, limitações dos projetos gráficos, boas práticas na diagramação, além das técnicas de conversão dos conteúdos para os formatos ePub, Mobi e PDF.

Trata-se da primeira publicação na língua portuguesa e do 46o livro do Ricardo Minoru Horie que publicou livros sobre InDesign, Photoshop, Acrobat, PitStop e outros temas ligados à pre-impressão e impressão digital.

Um arquivo PDF com amostras do livro pode ser baixado do link www.bytestypes.com. br/livros ou solicitado diretamente á editora (livros@bytestypes.com.br).

Este volume, assim como outros livros, pode ser adquirido na loja virtual da Bytes & Types (http://loja.bytestypes.com.br), e enviado para qualquer local do País.

Resumo

- Autores: Ricardo Minoru Horie

- Qtd. de Páginas: 140

- Formato: 148 X 210 mm

- Peso: 220 g

www.bytestypes.com.br

livros@bytestypes.com.br

Table of Contents

01 | CONCEITOS DE REVISTAS DIGITAIS

01.1 | Elementos vindos das revistas impressas

01.1.1 | Periodicidade

01.1.2 | Segmentação

01.1.3 | Portabilidade

01.1.4 | Identidade gráfica

01.2 | Elementos vindos dos meios digitais

01.2.1 | Leitura multimídia

01.2.2 | Interatividade

01.2.3 | Hipertexto

01.3 | Elementos exclusivos das revistas digitais para tablets

01.3.1 | Orientação dupla

01.3.2 | Profundidade

01.4 | Custos

01.4.1 | Custos de produção industrial

01.4.2 | Custos de distribuição

01.4.3 | Custos de estoques e encalhes

01.4.4 | Prazo e conveniência de entrega

01.5 | A linguagem da revista digital

01.6 | Formatos de revistas digitais

01.7 | Revista digital não é eBook ou ePub

02 | APLICATIVOS E DISPOSITIVOS DE LEITURA DE REVISTAS DIGITAIS

02.1 | Aplicativos não são revistas digitais

02.2 | Leitura de revistas digitais em computadores comuns

03 | SOLUÇÕES PARA PUBLICAÇÃO DIGITAL

03.1 | Adobe Digital Publishing Suite

03.1.1 | Componentes da ADPS

03.2 | Fluxo de trabalho da ADPS

03.2.1 | Criação

03.2.2 | Autoração

03.2.3 | Produção

03.2.4 | Distribuição e venda

03.2.5 | Análise

03.2.6 | Construção do aplicativo e visualização

03.3 | Custos da ADPS

03.3.1 | Preço do Single Edition

03.3.2 | Taxa por uso de plataforma

03.3.3 | Taxa de serviço

04 | REQUISITOS TÉCNICOS BÁSICOS PARA A CRIAÇÃO DE REVISTAS DIGITAIS

04.1 | Estações de trabalho

04.1.1 | Mac ou PC?

04.1.2 | PCs

04.1.3 | Macintoshes

04.2 | Requisitos para edição de imagens bitmap e ilustrações vetoriais

04.3 | Requisitos para distribuição de aplicativos

04.3.1 | Apple Store

04.3.2 | Android Market

05 | PRIMEIROS PASSOS

05.1 | Primeiros passos

05.1.1 | Instalação de aplicativos e de plug-ins

05.1.2 | Criação de um workspace ideal

05.1.3 | Organização das pastas

05.1.4 | Orientação única e orientação dupla

05.1.5 | Armazenamento dos arquivos de mídia

05.2 | Criação do primeiro arquivo

05.2.1 | Páginas com Smooth Scrolling

06 | PLANEJAMENTO E FLUXOGRAMA BÁSICO

06.1 | Planejamento

06.1.1 | Navegação

06.1.1.1 | Seções

06.1.2 | Espelho

06.2 Fluxograma básico

07 | PREPARAÇÃO DOS CONTEÚDOS

07.1 | Espaços de cor

07.1.1 | Conversão das cores do painel Swatches do InDesign

07.1.2 | Conversão dos espaços de cor das imagens

07.2 | Ilustrações e elementos vetoriais

07.2.1 | Formatos de ilustrações vetoriais criadas fora do InDesign

07.3 | Resolução de imagens bitmap

07.4 | Formatos recomendados de imagens

07.4.1 | Imagens sem interatividade

07.4.2 | Imagens com interatividade

07.5 | Especificações dos arquivos de áudio

07.6 | Especificações dos arquivos de vídeo

07.7 | Especificações dos arquivos de animações

08 | CUIDADOS COM OS PROJETOS GRÁFICOS

08.1 | Cuidados com os projetos gráficos

08.1.1 | Cores de fundo das páginas

08.1.2 | Sangramento de elementos

08.1.3 | Cuidados com tipografia e textos

08.1.3.1 | Padrões de fontes tipográficas

08.1.3.2 | Quantidade de fontes tipográficas

08.1.3.3 | Qual o corpo mínimo?

08.1.3.4 | Legibilidade das fontes tipográficas escolhidas

08.1.3.5 | Quantidade de estilos disponíveis

08.1.3.6 | Serifadas ou não serifadas?

08.1.3.7 Fontes fantasia

09 | DIAGRAMAÇÃO DE PÁGINAS DE CONTEÚDO ESTÁTICO

10 | CRIAÇÃO DE REVISTAS DIGITAIS PARA TABLETS DIFERENTES

10.1 | Renditions

10.1.1 | Atualização, rendition ou nova edição

10.1.1.1 | Atualização

10.1.1.2 | Rendition

10.1.1.3 | Nova edição

10.1.2 | Dicas para a criação de revistas para múltiplas rendições

11 | CRIAÇÃO DA CAPA DA REVISTA DIGITAL

11.1 | Criação da capa da revista digital

11.1.1 | Boa legibilidade

11.1.2 | Hierarquia e harmonia

11.1.3 | Vertical versus horizontal

11.1.4 | Duas capas – mil possibilidades

11.1.5 | Capa e interação

11.2 | Procedimentos para criação da capa da revista digital

12 | CRIAÇÃO DE UMA PÁGINA EXPLICATIVA DE NAVEGAÇÃO

13 | CRIAÇÃO DE ÍNDICES INTERATIVOS NAS REVISTAS DIGITAIS

14 | REAPROVEITAMENTO DE UM ARQUIVO PARA IMPRESSÃO NA CRIAÇÃO DE UMA REVISTA DIGITAL

14.1 | Conversão

14.1.1 | Páginas faceadas

14.1.2 | Unidades de medidas usadas

14.1.3 | Ajustar o Transparency Blending Space

14.1.4 | Alterações nas dimensões das páginas

15 | INSERÇÃO DE CONTEÚDOS INTERATIVOS

15.1 | Inserção de conteúdos interativos

15.1.1 | Introdução aos overlays

15.1.2 | Criação de overlays no Overlay Creator

15.1.3 | Área de interação do Overlay

15.1.4 | Recomendações importantes para criação de overlays

15.1.5 | Armazenamento dos arquivos que irão compor os overlays

16 | INSERÇÃO DE ELEMENTOS DE NAVEGAÇÃO NAS REVISTAS DIGITAIS

16.1 | Overlays de hiperlinks

16.1.1 | Crie hiperlinks com o painel Buttons

16.1.2 | Botão de hiperlink para outro artigo

16.1.2.1 | Alterações da aparência dos botões

16.1.3 | Crie hiperlinks com o painel Hyperlinks

16.1.3.1 | Opções do Overlay Creator

16.2 | Overlay Web Content

17 | INSERÇÃO DE ELEMENTOS DE ÁUDIO, VÍDEO E ANIMAÇÕES

17.1 | Overlay de Áudio

17.1.1 | Inserção de arquivos de áudio

17.2 | Overlay de Vídeos

17.2.1 | Inserção de arquivos de vídeo

17.2.2 | Dimensões dos vídeos

17.2.3 | Pôster para elementos de áudio e vídeo

17.2.3.1 | Opções do Overlay Creator

17.2.3.2 | Navegação por páginas que contenham áudio e vídeo

17.2.3.3 | Dicas importantes para o uso de elementos de áudio e vídeo

17.3 | Animações

17.3.1 | Conversão de um arquivo Flash em uma sequência de imagens

17.3.2 | Conversão de um arquivo Flash em um vídeo

17.3.3 | Conversão de um arquivo Flash em um arquivo HTML

18 | INSERÇÃO DE ELEMENTOS DE INTERATIVIDADE COM IMAGENS BITMAP

18.1 | Efeitos com imagens bitmap

18.1.1 | Overlay de Slideshow

18.1.1.1 | Ajustes nos frames

18.1.1.2 | Slideshow mais complexo

18.1.1.3 | Botões de navegação para o slideshow

18.1.1.4 | Aparência do botão

18.1.1.5 | Opções do Overlay Creator

18.1.1.6 | Dicas para slideshows

18.1.2 | Overlay de Image Sequence

18.1.2.1 | Imagens a partir de objetos 3D

18.1.2.2 | Insira o Image Sequence na sua página

18.1.3 | Efeito de Panorama de imagens

18.1.3.1 | Criação de imagens para o Panorama

18.1.3.2 | Outras dicas

18.1.4 | Efeito de Pan & Zoom

18.1.5 | Scrollable Frame

19 | DICAS DE OVERLAYS SOBREPOSTOS

20 | CUIDADOS ANTES DA CONVERSÃO DOS FOLIOS

21 | GERAÇÃO DAS REVISTAS DIGITAIS

21.1 | Introdução ao painel Folio Builder

21.1.1 | Conexão com o Folio Builder

21.1.2 | Navegação no Folio Builder

21.1.3 | Criação de um Folio novo

21.1.4 | Propriedades do Folio

21.1.5 | Renomear o Folio

21.1.6 |Apagar o Folio

21.1.7 | Compartilhar Folios

21.2 | Inserção de artigos no Folio Builder

21.2.1 | Criação de artigos a partir de um documento do InDesign

21.2.2 | Importação de artigos a partir de um documento do InDesign

21.2.3 | Arquivos extras para importação

21.2.3.1 | Imagens para o sumário

21.3 | Outras operações com artigos

21.3.1 | Renomeie e apague artigos

21.3.2 | Insira metadados nos artigos

21.3.3 | Editar e atualizar um artigo

21.3.4 |Copiar um artigo para um outro Folio

21.3.5 | Altere a ordem dos arquivos

22 | ORDENAÇÃO DE ARTIGOS COM O XML

22.1 | Criação do arquivo XML para a importação da revista digital

22.2 | Mude a ordem dos artigos na atualização

23 | TESTES E REVISÃO DOS FOLIOS

23.1 | Preview e teste de Folios e artigos no Desktop Viewer

23.2 | Preview e teste de Folios e artigos no Content Viewer para dispositivos móveis

23.3 | Navegação com a interface da ADPS

24 | CRIAÇÃO DO APLICATIVO DE VENDA DE REVISTAS DIGITAIS

24.1 | Criação de certificados e imagens para a criação do aplicativo de venda

24.1.1 | Requerimentos de criação do aplicativo para a Apple Store

24.1.1.1 | Certificados Apple

24.1.2 | Sobre os certificados para aplicativo do iOS

24.1.2.1 | Crie o certificado de desenvolvimento

24.1.2.2 | Crie o arquivo mobileprovision de desenvolvimento

24.1.2.3 | Crie o certificado de distribuição

24.1.2.4 | As novas chaves para o certificado de distribuição

24.1.2.5 | Crie o arquivo mobileprovision de distribuição

24.1.2.6 | Teste os seus certificados

24.2 | Requerimentos de criação do aplicativo para o Android Market

24.2.1 | Criação de certificado p12 para Android no Mac OS:

24.2.2 | Criação de certificado p12 para Android no Windows

25 | COMO E ONDE COLOCAR À VENDA OU DISTRIBUIÇÃO GRATUITA

25.1 | Criação do aplicativo de venda

25.1.1 | Aplicativo de Folio único

25.1.2 | Aplicativo de Folio múltiplo

25.2 | Edição das revistas no servidor da ADPS

25.2.1 | O Dashboard

25.2.2 | Folio Producer

25.2.2.1 | Edição no Thumbnail View

25.2.2.2 | Edição no List View

25.3 | Publicação de um Folio

26 | CONSIDERAÇÕES FINAIS, CHECKLIST E BOOKMARKS DE WEB SITES ÚTEIS

26.1 | Considerações finais

26.1.1 | Um novo horizonte

26.2 | Checklist

26.2.1 | Versão do InDesign

26.2.2 | Updates e atualizações

26.2.3 | Organização de pastas e arquivos

26.2.4 | Nomeação dos arquivos

26.2.5 | Tamanho dos arquivos

26.2.6 | Imagens Bitmap

26.2.7 | Áudios

26.2.8 | Vídeos

26.2.9 | Fontes

26.2.10 | Overlays

26.2.11 | Metadados

26.3 | Aplicativo de venda

26.3.1 | Publicação

26.4 | Bookmarks de web sites úteis

26.4.1 | Adobe Digital Publishing Suite

26.4.2 | Cadastros

26.4.3 | Mais informações sobre o mercado de publicações digitais

26.4.4 | Downloads

26.4.5 | Parceiro da ADPS no Brasil

Table of Contents

01 | CONCEITOS DE REVISTAS DIGITAIS

01.1 | Elementos vindos das revistas impressas

01.1.1 | Periodicidade

01.1.2 | Segmentação

01.1.3 | Portabilidade

01.1.4 | Identidade gráfica

01.2 | Elementos vindos dos meios digitais

01.2.1 | Leitura multimídia

01.2.2 | Interatividade

01.2.3 | Hipertexto

01.3 | Elementos exclusivos das revistas digitais para tablets

01.3.1 | Orientação dupla

01.3.2 | Profundidade

01.4 | Custos

01.4.1 | Custos de produção industrial

01.4.2 | Custos de distribuição

01.4.3 | Custos de estoques e encalhes

01.4.4 | Prazo e conveniência de entrega

01.5 | A linguagem da revista digital

01.6 | Formatos de revistas digitais

01.7 | Revista digital não é eBook ou ePub

02 | APLICATIVOS E DISPOSITIVOS DE LEITURA DE REVISTAS DIGITAIS

02.1 | Aplicativos não são revistas digitais

02.2 | Leitura de revistas digitais em computadores comuns

03 | SOLUÇÕES PARA PUBLICAÇÃO DIGITAL

03.1 | Adobe Digital Publishing Suite

03.1.1 | Componentes da ADPS

03.2 | Fluxo de trabalho da ADPS

03.2.1 | Criação

03.2.2 | Autoração

03.2.3 | Produção

03.2.4 | Distribuição e venda

03.2.5 | Análise

03.2.6 | Construção do aplicativo e visualização

03.3 | Custos da ADPS

03.3.1 | Preço do Single Edition

03.3.2 | Taxa por uso de plataforma

03.3.3 | Taxa de serviço

04 | REQUISITOS TÉCNICOS BÁSICOS PARA A CRIAÇÃO DE REVISTAS DIGITAIS

04.1 | Estações de trabalho

04.1.1 | Mac ou PC?

04.1.2 | PCs

04.1.3 | Macintoshes

04.2 | Requisitos para edição de imagens bitmap e ilustrações vetoriais

04.3 | Requisitos para distribuição de aplicativos

04.3.1 | Apple Store

04.3.2 | Android Market

05 | PRIMEIROS PASSOS

05.1 | Primeiros passos

05.1.1 | Instalação de aplicativos e de plug-ins

05.1.2 | Criação de um workspace ideal

05.1.3 | Organização das pastas

05.1.4 | Orientação única e orientação dupla

05.1.5 | Armazenamento dos arquivos de mídia

05.2 | Criação do primeiro arquivo

05.2.1 | Páginas com Smooth Scrolling

06 | PLANEJAMENTO E FLUXOGRAMA BÁSICO

06.1 | Planejamento

06.1.1 | Navegação

06.1.1.1 | Seções

06.1.2 | Espelho

06.2 Fluxograma básico

07 | PREPARAÇÃO DOS CONTEÚDOS

07.1 | Espaços de cor

07.1.1 | Conversão das cores do painel Swatches do InDesign

07.1.2 | Conversão dos espaços de cor das imagens

07.2 | Ilustrações e elementos vetoriais

07.2.1 | Formatos de ilustrações vetoriais criadas fora do InDesign

07.3 | Resolução de imagens bitmap

07.4 | Formatos recomendados de imagens

07.4.1 | Imagens sem interatividade

07.4.2 | Imagens com interatividade

07.5 | Especificações dos arquivos de áudio

07.6 | Especificações dos arquivos de vídeo

07.7 | Especificações dos arquivos de animações

08 | CUIDADOS COM OS PROJETOS GRÁFICOS

08.1 | Cuidados com os projetos gráficos

08.1.1 | Cores de fundo das páginas

08.1.2 | Sangramento de elementos

08.1.3 | Cuidados com tipografia e textos

08.1.3.1 | Padrões de fontes tipográficas

08.1.3.2 | Quantidade de fontes tipográficas

08.1.3.3 | Qual o corpo mínimo?

08.1.3.4 | Legibilidade das fontes tipográficas escolhidas

08.1.3.5 | Quantidade de estilos disponíveis

08.1.3.6 | Serifadas ou não serifadas?

08.1.3.7 Fontes fantasia

09 | DIAGRAMAÇÃO DE PÁGINAS DE CONTEÚDO ESTÁTICO

10 | CRIAÇÃO DE REVISTAS DIGITAIS PARA TABLETS DIFERENTES

10.1 | Renditions

10.1.1 | Atualização, rendition ou nova edição

10.1.1.1 | Atualização

10.1.1.2 | Rendition

10.1.1.3 | Nova edição

10.1.2 | Dicas para a criação de revistas para múltiplas rendições

11 | CRIAÇÃO DA CAPA DA REVISTA DIGITAL

11.1 | Criação da capa da revista digital

11.1.1 | Boa legibilidade

11.1.2 | Hierarquia e harmonia

11.1.3 | Vertical versus horizontal

11.1.4 | Duas capas – mil possibilidades

11.1.5 | Capa e interação

11.2 | Procedimentos para criação da capa da revista digital

12 | CRIAÇÃO DE UMA PÁGINA EXPLICATIVA DE NAVEGAÇÃO

13 | CRIAÇÃO DE ÍNDICES INTERATIVOS NAS REVISTAS DIGITAIS

14 | REAPROVEITAMENTO DE UM ARQUIVO PARA IMPRESSÃO NA CRIAÇÃO DE UMA REVISTA DIGITAL

14.1 | Conversão

14.1.1 | Páginas faceadas

14.1.2 | Unidades de medidas usadas

14.1.3 | Ajustar o Transparency Blending Space

14.1.4 | Alterações nas dimensões das páginas

15 | INSERÇÃO DE CONTEÚDOS INTERATIVOS

15.1 | Inserção de conteúdos interativos

15.1.1 | Introdução aos overlays

15.1.2 | Criação de overlays no Overlay Creator

15.1.3 | Área de interação do Overlay

15.1.4 | Recomendações importantes para criação de overlays

15.1.5 | Armazenamento dos arquivos que irão compor os overlays

16 | INSERÇÃO DE ELEMENTOS DE NAVEGAÇÃO NAS REVISTAS DIGITAIS

16.1 | Overlays de hiperlinks

16.1.1 | Crie hiperlinks com o painel Buttons

16.1.2 | Botão de hiperlink para outro artigo

16.1.2.1 | Alterações da aparência dos botões

16.1.3 | Crie hiperlinks com o painel Hyperlinks

16.1.3.1 | Opções do Overlay Creator

16.2 | Overlay Web Content

17 | INSERÇÃO DE ELEMENTOS DE ÁUDIO, VÍDEO E ANIMAÇÕES

17.1 | Overlay de Áudio

17.1.1 | Inserção de arquivos de áudio

17.2 | Overlay de Vídeos

17.2.1 | Inserção de arquivos de vídeo

17.2.2 | Dimensões dos vídeos

17.2.3 | Pôster para elementos de áudio e vídeo

17.2.3.1 | Opções do Overlay Creator

17.2.3.2 | Navegação por páginas que contenham áudio e vídeo

17.2.3.3 | Dicas importantes para o uso de elementos de áudio e vídeo

17.3 | Animações

17.3.1 | Conversão de um arquivo Flash em uma sequência de imagens

17.3.2 | Conversão de um arquivo Flash em um vídeo

17.3.3 | Conversão de um arquivo Flash em um arquivo HTML

18 | INSERÇÃO DE ELEMENTOS DE INTERATIVIDADE COM IMAGENS BITMAP

18.1 | Efeitos com imagens bitmap

18.1.1 | Overlay de Slideshow

18.1.1.1 | Ajustes nos frames

18.1.1.2 | Slideshow mais complexo

18.1.1.3 | Botões de navegação para o slideshow

18.1.1.4 | Aparência do botão

18.1.1.5 | Opções do Overlay Creator

18.1.1.6 | Dicas para slideshows

18.1.2 | Overlay de Image Sequence

18.1.2.1 | Imagens a partir de objetos 3D

18.1.2.2 | Insira o Image Sequence na sua página

18.1.3 | Efeito de Panorama de imagens

18.1.3.1 | Criação de imagens para o Panorama

18.1.3.2 | Outras dicas

18.1.4 | Efeito de Pan & Zoom

18.1.5 | Scrollable Frame

19 | DICAS DE OVERLAYS SOBREPOSTOS

20 | CUIDADOS ANTES DA CONVERSÃO DOS FOLIOS

21 | GERAÇÃO DAS REVISTAS DIGITAIS

21.1 | Introdução ao painel Folio Builder

21.1.1 | Conexão com o Folio Builder

21.1.2 | Navegação no Folio Builder

21.1.3 | Criação de um Folio novo

21.1.4 | Propriedades do Folio

21.1.5 | Renomear o Folio

21.1.6 |Apagar o Folio

21.1.7 | Compartilhar Folios

21.2 | Inserção de artigos no Folio Builder

21.2.1 | Criação de artigos a partir de um documento do InDesign

21.2.2 | Importação de artigos a partir de um documento do InDesign

21.2.3 | Arquivos extras para importação

21.2.3.1 | Imagens para o sumário

21.3 | Outras operações com artigos

21.3.1 | Renomeie e apague artigos

21.3.2 | Insira metadados nos artigos

21.3.3 | Editar e atualizar um artigo

21.3.4 |Copiar um artigo para um outro Folio

21.3.5 | Altere a ordem dos arquivos

22 | ORDENAÇÃO DE ARTIGOS COM O XML

22.1 | Criação do arquivo XML para a importação da revista digital

22.2 | Mude a ordem dos artigos na atualização

23 | TESTES E REVISÃO DOS FOLIOS

23.1 | Preview e teste de Folios e artigos no Desktop Viewer

23.2 | Preview e teste de Folios e artigos no Content Viewer para dispositivos móveis

23.3 | Navegação com a interface da ADPS

24 | CRIAÇÃO DO APLICATIVO DE VENDA DE REVISTAS DIGITAIS

24.1 | Criação de certificados e imagens para a criação do aplicativo de venda

24.1.1 | Requerimentos de criação do aplicativo para a Apple Store

24.1.1.1 | Certificados Apple

24.1.2 | Sobre os certificados para aplicativo do iOS

24.1.2.1 | Crie o certificado de desenvolvimento

24.1.2.2 | Crie o arquivo mobileprovision de desenvolvimento

24.1.2.3 | Crie o certificado de distribuição

24.1.2.4 | As novas chaves para o certificado de distribuição

24.1.2.5 | Crie o arquivo mobileprovision de distribuição

24.1.2.6 | Teste os seus certificados

24.2 | Requerimentos de criação do aplicativo para o Android Market

24.2.1 | Criação de certificado p12 para Android no Mac OS:

24.2.2 | Criação de certificado p12 para Android no Windows

25 | COMO E ONDE COLOCAR À VENDA OU DISTRIBUIÇÃO GRATUITA

25.1 | Criação do aplicativo de venda

25.1.1 | Aplicativo de Folio único

25.1.2 | Aplicativo de Folio múltiplo

25.2 | Edição das revistas no servidor da ADPS

25.2.1 | O Dashboard

25.2.2 | Folio Producer

25.2.2.1 | Edição no Thumbnail View

25.2.2.2 | Edição no List View

25.3 | Publicação de um Folio

26 | CONSIDERAÇÕES FINAIS, CHECKLIST E BOOKMARKS DE WEB SITES ÚTEIS

26.1 | Considerações finais

26.1.1 | Um novo horizonte

26.2 | Checklist

26.2.1 | Versão do InDesign

26.2.2 | Updates e atualizações

26.2.3 | Organização de pastas e arquivos

26.2.4 | Nomeação dos arquivos

26.2.5 | Tamanho dos arquivos

26.2.6 | Imagens Bitmap

26.2.7 | Áudios

26.2.8 | Vídeos

26.2.9 | Fontes

26.2.10 | Overlays

26.2.11 | Metadados

26.3 | Aplicativo de venda

26.3.1 | Publicação

26.4 | Bookmarks de web sites úteis

26.4.1 | Adobe Digital Publishing Suite

26.4.2 | Cadastros

26.4.3 | Mais informações sobre o mercado de publicações digitais

26.4.4 | Downloads

26.4.5 | Parceiro da ADPS no Brasil