InDesign Publica iPadAndroid

InDesign Avançado - Técnicas de Publicação (iPad e Android)

Bem-vindo ao InDesign.

Este material de apoio foi desenvolvido pelo DRC para auxiliar ao profissional em InDesign a aumentar sua performance. Nesta apostila você encontrará informações para torná-lo um diagramador Crossmedia. O InDesign CS6 permite que você crie e publique em todos os tipos de mídias existentes, através de um fluxo de trabalho dinâmico incorporando todos os tipos de conteúdo da indústria criativa (Texto/ Imagem/ Audio/ Video). O conteúdo desenvolvido no laboratório deve ser extendido por você para o estudo em casa sempre que possível. Mantenha este material ao seu lado em todos os Treinamentos e faça suas próprias anotações para fixar o aprendizado. 5. Publicar para Print

5. Publicar para Desktop 5. Publicar para Web 1. Planejamento

2. Aplicativo

3. Editar

4. Gerenciar 5. Publicar para Reader 5. Publicar para Mobile

Servidores Externos

T

Bons estudos,

Mauricio Brancalion.

1- InDesign Avançado

5. Publicar para Tablet

Índice

Indíce Bem-vindo ao InDesign.......................................................................................................... 1 Asset Digital Management...................................................................................................... 6 Conteúdo na era digital........................................................................................................... 6 Sistemas DAM.......................................................................................................................... 7 Sistemas Digital Publishing..................................................................................................... 8 Digital Publishing com HTML5............................................................................................. 9 O Sistema Adobe CC............................................................................................................. 10 Creative Cloud. ...................................................................................................................... 10 Servidor Acrobat e DPS......................................................................................................... 11 Edge Tools & Services............................................................................................................ 12 PhoneGap Builder.................................................................................................................. 13 Técnicas de Tratamento de Conteúdo................................................................................. 14 Importação e Exportação...................................................................................................... 14 Data Merge.............................................................................................................................. 15 1. Preparando a Planilha........................................................................................................ 15 2. Salvando para o Formato CSV.......................................................................................... 16 3. Importando pelo painel Data Merge............................................................................... 17 4. Etapas do Comando Merged Documet........................................................................... 18 5. Aplicando Estilos em dados do DataMerge.................................................................... 20 6. Finalizando o Arquivo em PDF........................................................................................ 21 XML......................................................................................................................................... 22 1. Importando um Arquivo XML......................................................................................... 23 2. Painel Structure e Painel Tags........................................................................................... 24 3. Adicionando Estilos de Texto........................................................................................... 25 4. Exportando um Arquivo XML......................................................................................... 26 5. Find/Change para troca de Tags....................................................................................... 27 Scripts....................................................................................................................................... 28 1. Instalando um Script Javascript........................................................................................ 29 2. Rodando um Script............................................................................................................ 30 3. Gerenciamento de Estilos e Finalização.......................................................................... 32 Técnicas de Automação de Conteúdo................................................................................. 34 Grep Styles............................................................................................................................... 34 1. GREP Styles Pelo Comando Finde/Change.................................................................... 35 2. Grep Styles Dentro de Estilos de Parágrafo.................................................................... 36 Text Variable............................................................................................................................ 38 1. Aplicando Text Variable em número de capítulos......................................................... 39 2. Usando Text Variable para inserção de data de sáida.................................................... 40 3. Definido um Text Variable personalizado...................................................................... 41


Índice Cross-Reference...................................................................................................................... 42 1. Aplicando Cross-Reference com Paragraph Style.......................................................... 43 2. Aplicando Cross-Reference com Text Anchor............................................................... 44 Ferramentas de Alternate Layout......................................................................................... 45 1. Page Tool............................................................................................................................. 46 2. Edit Page Size...................................................................................................................... 47 3. Content Collector e Content Placer................................................................................. 48 4. Liquid Layout...................................................................................................................... 49 5. Create Alternate Layout..................................................................................................... 50 Tipos de Exportação.............................................................................................................. 51 Exportação PDF Print............................................................................................................ 51 1. PDF/X-3, PDF/X-4 e PDF/X-5......................................................................................... 52 2. Web-To-Print...................................................................................................................... 53 2. Print Fine Art...................................................................................................................... 54 Conteúdo + Interatividade.................................................................................................... 55 Ferramentas PDF Interactive................................................................................................ 56 1. Workspace PDF Interactive.............................................................................................. 57 2. Painel Media........................................................................................................................ 58 3. Painel Buttons and Forms................................................................................................. 59 4. Painel Hiperlinks................................................................................................................ 60 5. Painel Bookmarks.............................................................................................................. 61 6. Painel Page Transitions...................................................................................................... 62 8. Importação SWF................................................................................................................. 63 Worflow PDF Interactive....................................................................................................... 64 1. Determinando o Tipo e Formato..................................................................................... 65 2. Layout Estático.................................................................................................................... 66 3. Inserido Interatividade...................................................................................................... 67 4. Criando e Inserindo um arquivo SWF............................................................................ 68 5. Exportando como PDF Interactive.................................................................................. 69 Finalização e Fechamento PDF Interactive......................................................................... 70 Ferramentas SWF e FLA....................................................................................................... 72 1. Workspace Digital Publishing.......................................................................................... 73 2. Painéis PDF Interacative................................................................................................... 74 3. Painel Animation............................................................................................................... 75 4. Painel Timing...................................................................................................................... 76 5. Painel Object States............................................................................................................ 77 6. Painel Page Transition - Page Turn.................................................................................. 78 Workflow SWF e FLA............................................................................................................ 79 1. Formato............................................................................................................................... 80 2. Layout Estático.................................................................................................................... 81 3. Inserindo Interatividade para arquivos SWF.................................................................. 82 4. Exportando no formato SWF e FLA................................................................................ 83 5. Importando em um arquivo InDesign ou Flash............................................................ 84 Finalização e Fechamento SWF e FLA................................................................................ 85 Ferramentas HTML5............................................................................................................. 88 3- InDesign Avançado

Índice 1. Formato e Grid System ..................................................................................................... 89 2. Ancoragem de objetos pelo frame................................................................................... 90 3. Object Export Options...................................................................................................... 91 4. Painel Articles..................................................................................................................... 92 5. Export Tagging................................................................................................................... 93 Workflow HTML5.................................................................................................................. 94 1. Determinando o Tipo e Formato..................................................................................... 95 2. Layout Estático.................................................................................................................... 96 3. Ancoragem e Exportação de Objetos.............................................................................. 97 4. Definindo a ordem com Painel Articles.......................................................................... 98 5. Exportando e utilizando o Dreamweaver para CSS e Javascript.................................. 99 Finalização e Fechamento HTML5.................................................................................... 100 Ferramentas EPUB............................................................................................................... 104 1. Formato............................................................................................................................. 105 2. Ancoragem de objeto pelo frame................................................................................... 106 3. Object Export Options.................................................................................................... 107 4. Painel Articles................................................................................................................... 108 5. Export Tagging................................................................................................................. 109 6. Table Of Contents para EPUB........................................................................................ 110 7. Painel Media...................................................................................................................... 111 8. Painel Hiperlinks e comando Footnote......................................................................... 112 9. Formato Book para EPUB............................................................................................... 113 10. Comando File Info......................................................................................................... 114 Workflow EPUB................................................................................................................... 115 EPUB 2.0................................................................................................................................ 116 1. Arquivo .indd.................................................................................................................... 116 2. Estilos de Paragrafo e Character.................................................................................... 117 3 Ancoragem......................................................................................................................... 118 4. Object Export Options.................................................................................................... 119 5. Table Of Content - TOC.................................................................................................. 120 EPUB 3.0................................................................................................................................ 123 EPUB 3.0 with fixed layout................................................................................................. 123 Finalização e Fechamento EPUB........................................................................................ 124 Visualização em Dispoitivos............................................................................................... 125 Ferramentas FOLIO............................................................................................................. 126 1. Workspace Digital Publishing........................................................................................ 127 2. Painéis PDF Interactive e SWF....................................................................................... 128 3. Painel Folio Overlays....................................................................................................... 129 4. Comando Insert HTML.................................................................................................. 130 5. Painel Folio Builder e Folio Preview.............................................................................. 131 6. Ferramenta Page e Painel Liquid Layout...................................................................... 132 7. Ferramenta Page - Comando Create Alternate Layout............................................... 133


Índice 8. Ferramenta Content Collector/Place............................................................................. 134 Workflow FOLIO.................................................................................................................. 135 1. Determinando o Tipo e Formato................................................................................... 137 1. Layout Estático.................................................................................................................. 138 3. Inserindo Interatividade com Painel Folio Overlays................................................... 139 4. Criando formatos variados com Liquid Layout........................................................... 140 5. Preview no Desktop e em Dispositivo conectado........................................................ 141 6. Atualização de conteúdo e split view............................................................................. 142 Conversão de INDD para FOLIO...................................................................................... 143 Finalização e Fechamento FOLIO...................................................................................... 144 Conversão FOLIO para APP............................................................................................... 147 Fluxo Crossmedia................................................................................................................. 150 Do Papel ao Tablet................................................................................................................ 150 Workflow Crossmedia......................................................................................................... 150 Preparando o Conteúdo...................................................................................................... 151 Inserindo o Conteúdo.......................................................................................................... 151 Tranposrtando o Conteúdo................................................................................................. 153 Adaptando o Conteúdo....................................................................................................... 154 Exportando Conteúdo Crossmedia................................................................................... 155 Extras..................................................................................................................................... 156 Livros...................................................................................................................................... 156 Revistas.................................................................................................................................. 156 Sites......................................................................................................................................... 156 Sites Adobe............................................................................................................................ 156 Empresas de DAM............................................................................................................... 157 Plugins DPS........................................................................................................................... 157 Stores...................................................................................................................................... 157


Asset Digital Management T

T T

PDF

SWF

T

HTML5

EPUB

Conteúdo na era digital.

01

FOLIO

Estamos atravessando um período de transformações tecnólogicas significativas para indústria, as possibilidades de suportes e o impacto ambiental vem permitindo o surgimento de novos meios e mídias e com isso um fluxo maior de conteúdo. Se fossem apenas mudanças de quantidade de produção, seria difícil mas possível de se contornar com os conhecimentos que já adquirimos, mas a transformação atual envolve a evolução eletrônica e com ela a evolução de processamento de conteúdo. No caso do mundo profissional da diagramação quando se fala em conteúdo era evidente em que se fale de Texto e Imagem, formas de conteúdo imperantes nas produções gráficas, mas hoje, em meios eletrônicos, passamos a incluir o Audio e o Video em nossas saídas. Para que esta adequação aos novos tempos seja plena e profissionalmente bem feita, é preciso incluir no planejamento Editorial, Comercial e Institucional, desde o ínicio de uma produção, a possibilidade de utilização de todos os tipos de conteúdo para que um fluxo de produção possa ser estabelecido e entregar o maior número de publicações em um maior número de suportes, sendo assim, nas palavras do mercado: Criar um fluxo Crossmedia de publicação “on” e “offline”. Portanto Gerenciamento Digital de Conteúdo, ou DAM (Digital Asset Management), é a primeira parte do planejamento Crossmedia de publicação. O conteúdo continua sendo captado de maneira analógica e digital, porém com o uso de redes, servidores e banco de dados passa a pertencer ao ambiente digital de produção, onde é possível manipular qualquer manifestação e expressão humana convertida em “Dados” que alimentam um sistema informativo/criativo e assim planejar todos os possíveis modos de interação entre a obra e o público.


Sistemas DAM.

Existem diversos sistemas DAM no mercado atualmente. No Brasil temos a 24/7 id e a Epyx (Braço da WoodWing no Brasil) como exemplos de empresas deste mercado. O que diferencia uma empresa para que ela seja identificada neste segmento, é ela possuir um aplicativo de gerenciamento de conteúdo e exportação crossmedia. Este tipo de aplicativo é baseado em servidores externos e internos para criação de um ambiente de trabalho com pessoas locais e remotas permitindo que uma ou mais publicações possam ser produzidas com integração e agilidade. Devido ao custos de aquisição e manutenção este tipo de plataforma é mais aconselhada para editoras e provedores de conteúdo de médio a grande porte, pois o número de envolvidos e a distância entre sua equipe serão os mais beneficiados. Para pequenas editoras e editores independentes uma solução baseada em aplicativos como InCopy, InDesign, Quark e plugins tornam-se mais viáveis economicamente e exigem manutenções e atualizações mais simples. Basicamente a ferramenta mais importante é a criação de Espelhos de publicações digitais que facilitam muito o acompanhamento pelo editor da produção de todas as saídas de uma publicação até seu fechamento para envio ao canal de distribuição físico ou digital.


Sistemas Digital Publishing.

Dentro dos sistemas DAM é possível ter uma sistema Digital Publishing. O sistema Digital Publishing é a parte destinada as publicações digitais interativas, como o Folio da Adobe, o AVE da Aquafadas, o Zave da Quark e muitos outros. Todos estes formatos acima não são formatos finais de publicação e venda, são pré-formatos que necessitam de uma conversão final para os formatos de aplicativos das grandes fabricantes de Tablets e Celulares, isso se deve ao fato de que catálogos, portfolios, revistas, jornais e livros-aplicativos, devem ser lançados como APP nas principais Stores atuais, apenas o formato EPUB é que possui a característica de formato universal de publicação digital e tem sido utilizado muito mais para livros definido um mercado específico. No caso dessas publicações periódicas serem tratadas como APP é possível atribuir em sua definição o diferencial de publicação periódica e não um APP e desta forma dependendo do sistema do dispositivo este tipo de APP vai ser redirecionado a outro APP do tipo banca ou quiosque que permite ao usuário final identificá-lo como um periódico tradicional. Todos estes sistemas de publicação digital acabam por utilizar a linguagem HTML5 para embarcar a interatividade, uma vez, que tal linguagem utiliza uma programação universal que facilita a visualização em qualquer sistema ou dispositivo, o fato de estes fabricantes criarem pré-formatos se deve ao fato de utilizar um meio que crie a dependência de seu sistema para criação, produção e publicação dos periódicos em todas as Stores do mercado.


Digital Publishing com HTML5.

A base de toda interatividade das publicações digitais está no uso da linguagem HTML5, portanto é fato que publicar um periódico totalmente em HTML5 que não utilize um sistema DPS é verdadeiro e de 2011 para cá muitos designers e programadores vem desenvolvendo técnicas para a criação, produção e publicação de periódicos isentos de sistemas e taxas de grandes empresas do mercado como a Adobe e Quark. A tarefa não é das mais simples e as vezes podem parecer que estão “Livres” de custos mas na verdade podem até ter custos elevados principalmente se você levar em consideração o tempo gasto para aprendizado e implementação. Casos como o jornal Financioal Times, Revista Playboy, Aside Magazine, Jornal Folha de São Paulo, são alguns caso que ilustram empresas que partiram para o desenvolvimento de seus aplicativos periódicos sem a utilização de sistemas DPS disponíveis no mercado, podem ser considerados casos de sucesso em evolução, pois a dependência em partes de que o usuário tenha acesso wi-fi ou internet por banda, limita consideravelmente o número de usuários uma vez que nem todos Tablets e Smartphones, hoje, possuem acesso contsnte e ilimitado a internet. Quem vem trazendo um grande avanço neste sentido é a empresa Mozzilla Firefox que recentemente desenvolveu seu sistema operacional para Tablets e Smartphones e criaram a primeira loja totalmente voltada para a distribuição e venda de aplicativos feitos totalmente com linguagem HTML5/CSS3/JS, isto evidencia que em um futuro próximo os aplicativos considerados nativos (que funcionam apenas no sistema operacional para que foram desenvolvidos) darão lugar ou terão a competição cada vez maior de aplicativos do tipo WebApp que tem uma característica fundamental a seu favor: a universalidade.


O Sistema Adobe CC

Creative Cloud. Acesse Aqui

02

Em 2012 com a chegada do Creative Suite 6 a Adobe trouxe uma inovação, seu serviço de Cloud Computing, denominado Creative Cloud. Com Creative Cloud a Adobe passa a permitir que você assine seus aplicativos e serviços por um valor mensal, facilitando o acesso para um designer autônomo e até mesmo pequenas empresas que necessitam de suas ferramentas criativas. A partir de uma conta de e-mail você pode iniciar no sistema optando pela conta Free, que permite acesso ao Trial (30 dias de experimentação) e há alguns serviços de forma limitada. Existe a possibilidade de assinar o Serviço na opção Single App, que dá direito a usar um aplicativo Adobe (Exemplo: Photoshop) e também a alguns serviços limitados, e ainda, é possível assinar com a conta Professional App, onde você tem total acesso a aplicativos e serviços Adobe. Com esta medida a Adobe se torna efetivamente um Sistema, onde cada vez fica mais intuitivo e rápido o acesso e o uso de vários aplicativos para criação de todo tipo de conteúdo (Texto, Imagem, Audio, Video e etc). Vale lembrar que desde que a Adobe adquiriu a Macromedia e seus aplicativos (Flash, Dreamweaver, Fireworks etc) ela também adquiriu seu SDK chamado Flex SDK, esta linguagem está por trás de toda estrutura do Adobe Air e da linguagem ActionScript. Com a evolução do HTML5 nos últimos anos, e consequentemente do Javascript como linguagem de função aberta, a Adobe perdeu seu grande mercado Web com sites e aplicações em Flash (Sistemas Operacionais Mobile não aceitam Flash), porém a Adobe vem trabalhando em novas ferramentas baseadas em HTML5, CSS e Javascript, denominadas de Edge & Tools e vem trabalhando em melhorias do Flash Builder, Adobe Air e Flash para obter melhores conversões entre as linguagens. As ferramentas Edge & Tools fazem parte dos serviços gratuítos do Creative Cloud enquanto estão em sua fase Beta. Para mairores informações clique aqui. Em 2013 o Sistema passa a se chamar CC.


Servidor Acrobat e DPS.

Uma vez escolhido o sistema Adobe para criação e produção das publicações digitais, é inevitável o conhecimento e uso dos portais Acrobat e Digital Publishing. É através deste portais que você vai gerenciar toda produção feita de PDF Interativos e Folios dentro dos servidores Adobe. Qualquer publicação gratuíta ou paga que será enviada para as Stores Apple e Google terá primeiro que ser enviada aos servidores Acrobat e DPS da Adobe. No caso do servidor Acrobat há diversas tarefas e serviços que podem ser realizadas com PDF Print e Interactive permitindo uma grande funcionalidade (inclusive a criação e envio de formulários via PDF). No caso do servidor DPS todo arquivo .indd transformado em .folio fica armazenado e é possível gerenciar, compartilhar e incluir metadados para que futuramente sejam publicados. Uma vez feita estas etapas uma ferramenta chamada DPS AppBuilder permite que se converta os arquivos .folio em arquivos de aplicativos nativos como .ipa (iOs apple) e .apk (Os Android) entre outros formatos dependendo da assinatura que o usuário adquiriu com a Adobe. O portal DPS também permite que importe Articles criados totalmente em HTML eliminando o InDesign da etapa de criação, porém vale lembrar que voltamso ao mesmo problema (principalmente para os designers) que necessitamos desta forma totalmente do ambiente de programação não tendo uma interface visual para a criação, como no caso do InDesign que facilita e agrega todo seu conhecimento de design para ser aplicado a uma publiação Digital. As publicações no formato EPUB nõa possuem no caso da Adobe um servidor destinado a seu gerenciamento, uma vez que , as publicações neste formato se tratam de publicações finais e ao exportar do InDesign o EPUB já está pronto para inclusão em um e-commerce ou Store para venda direta.


Edge Tools & Services.

Como a base das publicações digitais é a linguagem HTML, a Adobe tratou de desenvolver nos últimos anos (ainda em versões beta) novas ferramentas que utilizam o HTML5/CSS3/JS para desenvolver conteúdo pronto para publicação em qualquer dispositivo. Esta ferramentas levam o nome de Edge Tools, um pacote de ferramentas que permite o total desenvolvimento de conteúdo HTML5 responsivo e adaptável as ferramentas Adobe e ferramentas de terceiros. A principal necessidade dessas novas ferramentas está no fato de que todo desenvolvimento da Adobe no primeira década do século XXI está associada a linguagem Flex, adquirida com a compra da Macromedia e a linguagem ActionScript juntamente adquirida e desenvolvida. Os esforços da Adobe neste sentido permitram odesenvolvimento do Adobe Air, do Falsh Builder e do Servidor Bussinnes Catalyst, todos voltados para a produção de RIAS (Aplicações Ricas para Internet). Apesar de serem grandes ferramentas e atenderem aos seus propósitos, elas tem caráter proprietário, o que invianbiliza uma disseminação universal, pois a Internet não pode estar presa a uma propriedade de uma ou determindas empresas, seu cárater inicial sempre foi a possibilidade de uma rede global e universal, portanto, a Adobe sabe destas condições e tratou de desenvolver as ferramentas Edges que permitem utilizar as linguagens universais para a criação e produção de conteúdo. Sua última aquisição foi a empresa Nitobi que desenvolveu o PhoneGap. Com o Phonegap a Adobe passa a integrar todoa sua Suite de aplicativos e serviços com todos as sáidas de aplicativos nativos do mercado, porém programados em HTML5/CSS3/JS.


PhoneGap Builder.

O PhoneGap Builder é a ferramenta que constrói toda produção HTML5 utilizada para conversão para os principais formatos de APP atuais do mercado, .ipa(iOs); .apk(Android); .ipk(HP); .xap(Microsoft); .wgz (Simbyam). O PhoneGap cria estas conversões através de um arquivo .zip que contenha uma aplicação HTML/CSS/JS. Uma aplicação HTML não contém apenas o código que você publicaria na Web, ela contém um arquivo de manifesto, ícones para as Stores e o certificado digitais obrigatórios exigidos pelas Stores atuais. Com este pacote produzido é possível converter o arquivo e colocá-los a venda nas Stores, portanto a aquisição da Adobe do PhoneGap trouxe uma ferramenta poderosa para o usuário Adobe que passa a contar com um ambiente de desenvolvimento completo. Vale ressaltar que a Adobe tornou o PhoneGap uma ferramenta universal e gratuita para a fundação Apache, ou seja, é possível utilizar o PhoneGap fora do sistema Adobe, porém é preciso utiliza-lo a partir de um cadastro no GitHub, uma ferramenta de depósito de códigos abertos na Web que permite que qualquer pessoa veja, use e modifique seu código para criação de outros aplicativos , isso é um fator muito importante pois o desenvolvimento se torna universal e ganha novos adeptos e novas funcionalidades a todo momento em diversas partes do mundo, uma vez que você desenvolver um aplicativo que ache interessante, rentável e você não quer abrí-lo a comunidade global você lança ele pelo PhoneGap do Creatve Cloud Adobe e protege sua aplicação do repositório público. Portanto muito desenvolvimento virá nos próximos anos por este caminho que agiliza e universaliza o conhecimento e a produção de APP.


Técnicas de Tratamento de Conteúdo T

03

T

Importação e Exportação.

Atualmente a criação e o armazenamentos de dados cada vez mais encontram-se em Ambientes Digitais, esses ambientes, no caso do armazenamento, podem ser desde HDs e Pendrives, até em Servidores e imensos Bancos de Dados, portanto a palavra Software, cada vez mais em desuso, dá lugar à palavra Aplicativo, que determina um programa independente de plataforma ou browser de acesso. É claro que para um aplicativo se tornar totalmente disponível em todos os sistemas demanda de uma série de programações com elementos nativos de cada sistema, porém cada vez mais vemos novas tecnologias que desenvolvem aplicativos universais. O InDesign é um software e desde que foi criado o pacote Creative Suite ele passou a fazer parte de todas suas versões. Hoje podemos olhar para o InDesign como um aplicativo Desktop (funciona em PC Mac ou Win) e sua participação vem aumentando na indústria, podemos até compará-lo , com medidas proporções, com um Framework, devido ao grande número de conteúdo que ele importa e o grande número de formatos que ele exporta. Das mídias atuais o InDesign cobre todas desde a impressa, passando pelo Desktops, Web, Mídias Digitais e Interativas, a única mídia que o InDesign não gera um formato de exportação é para a TV Interativa, porém ainda é uma tecnologia muito nova no Brasil em fase de implementação. Impressoras de todos so tipos e portes, navegadores web, PCs, Readers, Mobile e Tablets são suportes e dispositivos onde o InDesign exporta conteúdo, portanto conhecer as maneiras de importar conteúdo e os parâmetros exatos de exportação para cada mídia é essencial usando ou não um fluxo Crossmedia de publicação.


Data Merge.

O Painel Data Merge (Windows>Utilities>Data Merge) permite que você importe dados (Texto e Imagen) armazenados na extensão .csv. O formato CSV (Comma Separeated Values) é uma extensão utilizada nos principais aplicativos (editores de texto, planilhas e etc) e nos principais banco de dados (MySql, Access, FileMaker e etc), ao importar o arquivo o InDesign reconhece os campos de conteúdo, que podem ser arrastados para os frames que compõe o layout. Veja abaixo a sequência de construção e inserção de um arquivo DataMerge e de um catálogo para impressão:

1. Preparando a Planilha. Ao receber o arquivo de planilha é preciso prepará-lo para a conversão em CSV. Ao abrir a planilha (Excel ou Open Office e etc) verifique se os campos de “Categoria” estão listados em uma linha ou em uma coluna. Selecione a linha ou a coluna completamente , clique com o botão direito e acesse o item “Formatar Células”, uma janela vai abrir e no campo Categoria escolha “Texto” isso permite que o programa exporta as categorias em CSV como texto e não fórmulas matmáticas. Se sua planilha possue categorias de imagens é preciso inserir um “@” antes do nome da categoria de imagem veja o exemplo a seguir:


2. Salvando para o Formato CSV. Uma vez que você tratou a planilha para a conversão CSV é preciso salvar no formato. Vá em File>Save As> escolha um nome para o arquivo e no tipo de formato escolha .csv. Pronto dessa forma você criou o arquivo certo que pode ser importado para o InDesign pelo Painel Data Merge.


3. Importando pelo painel Data Merge. Com o arquivo .CSV salvo, vá no InDesign em Window>Utilities>Data Merge, clique e o Painel surgirá na área de trabalho. O Painel Data merge possui um ícone no topo de seu lado direito que leva a um menu suspenso. Neste Menu o primeiro comando chama-se>Select Data Source, clique no comando e surge uma janela que permite a inserção de uma arquivo .csv no painel Data Merge. Feito deve surgir todos os campos de categoria da planilha inserida no Painel Data Merge. Para os campos que identificam texto terão uma letra “T” antes do campo e para os campos que identificam as imagens terá um ícone de imagem antes do campo.


4. Etapas do Comando Merged Documet. Nesta etapa o Indesign já tem o conteúdo importado para o Painel Data Merge agora é preciso criar um template usando a ferramenta Frames para conter na página um campo para cada categoria importada. Feito o Template basta selecionar o frame e clicar em cima da categoria no Painel Data Merge e assim o campo do layout fica atrelado a categoria importada. Após fazer o procedimento para todos os campos basta clicar no ícone no canto inferior direito do Painel Data Merge que é a ferramenta Merged Document, ao clicar você tem acesso a um painel de três abas: Records; Multiple Layout Record; Options. no campo Records você vai atribuir a quantidade de dados que serão importados e o modo que eles serão importados. O campo Multiple Record Layout só habilita se você utilizar a inserção de múltiplos dados no Painel Record. utilizando este modo você pode definir as distâncias do conteúdo das margens da página e a distância entre um conteúdo e outro. Você também pode definir se a ordem de inserção de dados será distrbuida em linhas ou colunas. Na Aba Options você pode definir como as imagens que estão listadas ao arquivo .csv vão ser importadas para o layout.



5. Aplicando Estilos em dados do DataMerge. Outro item importante que pode ser atribuido ao Data Merge é definir estilos de character, de parágrafos e de objetos aos campos de inserção de conteúdo, dessa forma, você permite que todo conteúdo processado pelo painel no comando Merged Dcoument seja criado com estilos, facilitando a troca posterior dos estilos e criando layouts com visuais distintos. Para isso basta abrir os Painéis de Estilos e criar um estilo para cada campo de acordo com sua necessidade (texto, imagens, molduras etc). após criado os estilos basta clicar na caixa e no estilo para vincular assim como feito nas categorias do Data Merge.


6. Finalizando o Arquivo em PDF. Você pode fazer vários teste de layout e inserção de dados pelo Data Merge, uma vez que o o documento matriz nunca é sobreposto pelo comando Merged Dcoument, pois este sempre cria uma versão nomedodumento-1.indd do documento de origem. Feitos os testes de layoput e escolhido o que melhor define o visual dos dados, basta ir File>Export> Tipo de formato PDF Print. Na janela PDF no campo Preset>Press Quality ou qualuqer outro formato que desejar, defina as marcas de sáida e clique em> OK par exportar.


XML.

XML é a abreviação de eXtensible Markup Language, é uma linguagem de marcação assim como , HTML e XHTML. Linguagens de marcação permitem adicionar uma “Tag” a um conteúdo e desta forma determinar um grupo de conteúdo varíavel a um tipo ou classe. A diferença entre XML e o HTML, é que o primeiro permite criar “Tags” com qualquer nome que utilize caracteres válidos, já o segundo permite que se utilize um número determinado de “Tags” especificadas e padronizadas no mundo todo. Com XML posso utilizar como exemplo a tag para definir um grupo de imagens personalizadas da minha editora, já no HTML é necessário que toda foto que será inserida em um documento utilize a “Tag” pois em qualquer parte do mundo e qualquer navegador (Browser) interpreta esta tag como um conteúdo de imagem.


1. Importando um Arquivo XML. Você pode importar arquivos XML vindo de diversas fontes como por exemplo um servidor offline, um servirdor online, um aplicativo editor de texto ou de planilhas e etc. A grande vantagem é que independente de sua origem uma vez estruturado ele pode alimentar qualquer layout de Texto e Imagem no InDesign. Com algumas mudanças e surgimentos de novos mercados como as publicações digitais atualmente a importação XML é melhor utiulizada no InDesign para originar a importação de dados dinâmicos no arquivo-pai, ou seja, o arquivo que será utilizado para ser o arquivo mestre de todas as publicações que utilizarem o conteúdo. Tendo o arquivo em mão vá em Window>Utilities>Tags, você irá abrir o Painel Tags na área de trabalho e clicar no ícone no top à direita e clicar no comando> New Tags, escolha o arquivo XML que irá ser importado e clique em Ok. Após isso todas as Tags que fazem parte da estrutura do XML importado ficarão listadas em ordem alfabética no Painle Tags. Crie seu layout normalmente como se fosse diagramar uma publicação, após criada a estrutura visual nas páginas com os Frames do InDesign você pode conectar as Tags importadas com os respectivos campos que formaram o conteúdo, após esta etapa vá em View>Structure>View Structure, esta opção permite que você visualize em seu canto esquerdo da área de trabalho um painel que mostra todos os campos conectados do layout com alguma Tag do Painel Tags. Neste ponto o arquivo está pronto para receber o arquivo XML via o comando de importação no menu File. (note que no painel View>Structure Temos o comando Show Tagged Frames que permite mostrar todos os campos onde uma Tag foi atrelada com sua respectiva cor) Então vá em File>Import XML e traga o arquivo XML que já havia sido introduzido no Painel Tags, escolhe no painel de importação (Show Import Options) a opção Merge Content e clique em OK, o InDesign vai se encarregar de importar para cada campo do layout atrelado a uma Tag o conteúdo que esta marcado no arquivo XML e assim preenchendo automaticamente o layout.


2. Painel Structure e Painel Tags. Todo processo de importação e exportação de XML utiliza os paineis Structure e Tags. No Painel Structurte é possível gerenciar todos atributos dos campos e conteúdos ligados com XML, é possível trocar conteúdo de lugar , adicionar, retirar, olhar detalhes de cada conteúdo e muitas outras coisas. É muito importante que você tenha total controle da estrutura de seu XML através do Painel Structure, pois a ordem das Tags devem estar ligadas com a ordem do documento XML, resumindo o XML nada mais é do que um conteúdo que esta etiquetado em uma ordem , mas que no layout pode estar diagramado de maneira distinta permitindo que se tenha uma total separação de formato, conteúdo e estilo. O Painel Tags Organiza as etiquetas importadas ou criadas no InDesign em ordem alfabética para que você possa atrelar aos formatos do layout, repare que toda vez que você inicia um arquivo o Painel Tags ele sempre exibe uma tag de cor azul chamada Root, isto apenas é uma definição do InDesign que pode ou não ser utilizada dessa forma, ou seja, se a Tag raiz de seu XML for outra você terá que clicar nesta Tag Root e troca seu nome para o nome da Tag raiz de seu XML e certificar-se que toda estrutura de seu arquivo XML seja criada dentro desta Tag.


3. Adicionando Estilos de Texto. Uma vez que todo conteúdo foi introduzido e preencheu o layout da maneira especificada pelo atrelamento das Tags e Frames é possível também criar um vínculo entre as Tags importadas com estilos de Characther e Paragraph do InDesign. Para isto vá ao menu Structure e no ícone do topo a direita clique para visualizar o menu suspenso, no menu selecione Map Tag to Styles, surge uma janela que permite que você faça o vincúlo manulamente estilo por estilo ou se suas Tags e seus estilos possuem os mesmos nomes você pode utilizar o botão “Map by Name” e o InDesign automáticamente vincúla cada Tag com seu respectivo estilo.


4. Exportando um Arquivo XML. Outra forma de trabalhar com o XML no InDesign é fazer o processo reverso, ou seja, Taggear um arquivo de InDesign campo a campo do Layout, definir uma ordem no Painel Structure e exportar um arquivo XML para que possa ser inserido a um banco de dados offline, um banco de dados online, um aplicativo editor de texto ou planilha e etc. Lembre-se que neste caso se você taggear imagens ao longo de seu arquivo elas serão exportadas em uma pasta separada e dentro do arquivo XML terá o link para cada imagem. Muitas pessoas precisam deste tipo de processo pois os bancos de dados ou qualquer outro documento pode ser alimentado por um conteúdo que originalmente foi criado no InDesign e pode muito bem ser usado para alimentar um site ou um sistema de informações.


5. Find/Change para troca de Tags. Este é um recurso poderoso do InDesign para diversas tarefas e o XML também pode aproveitá-lo para otimizar sua produção. Imagine que você tenha uma documento totalmente Taggeado e que está pronto para ser exportanto, e você descobre que uma Tag está errada ou que é preciso substituir uma Tag por outra de validade em um banco de dados externo, para isso a ferramenta Find/Change pode ser muito útil. Vá em Edit>Find/ Change no campo Change Style clique para acessar a janela de troca de estilos de character ou de paragraph, na aba lateral o último item é o XML, basta escolher entre as Tags listadas a que você deseja alterar para um determinado elemento e o InDesign se encarregá da troca.


Scripts.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus dynamicus. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.


1. Instalando um Script Javascript. Para inserir um script javascript basta copiá-lo e colá-lo dentro da pasta javascript do InDesign. Para acessar a pasta basta ir ao Painel Script, Window>Utilities>Samples>Javascript e clique em cima da psta javascript com o botão direito, no MAC irá aparecer “Reveal in Finder” e no WIN vai aparacer “Show Explorer” ao clicar surge a janela com a pasta javascript basta dar um colar e o script será adicionado ao InDesign automaticamente.


2. Rodando um Script. Para rodar um Script basta dar um duplo clique em cima do mesmo. No caso do Script Calendar Wizard ao acionar com o duplo clique ele abre uma janela de configuração de todos os parâmetros para a construção de um calendário mês a mês ou de um intervalo ao longo do ano ou de uma ano inteiro.



3. Gerenciamento de Estilos e Finalização. O calendário gerado pelo Script Calendar Wizard cria um arquivo, ou insere um calandário dentro de uma área em um arquivo e cria todo sua funcionalidade com Layers, Tables, Estilos Swatches, sendo assim todo sua configuração é automática para todos os meses, basta editar um estilo e todos os meses contendo aquele estilo serão alterados.



Técnicas de Automação de Conteúdo T

T

Grep Styles Se você já utilizou a linha de comando “Find/Change” no InDesign através da aba “Texto”, você vai ampliar muito sua capacidade de busca/troca usando a aba “Grep”, isto ocorre pelo fato de a abra Grep permitir diversas expressões de busca que a aba “Texto” não consegue realizar. Para uma verificação imediata basta clicar no botão “@” de ambas as abas e verificar como na aba “Grep” há algumas linhas a mais que levam a vários itens novos. O aprendizado de busca/troca tem alguns níveis de alcance, em primeiro lugar como dito antes se você já sabe utilizar o botão “@” permite que você utilize de modo primário alguns expressões de busca/troca, se você já visitou o “Help” (Help>Indesign Help) no tópico text>FindChange você encontra uma tabela com todos os códigos que permitem criar expressões na aba “texto” e na aba “Grep”. Com o auxilio desta tabela fica mais fácil compreender o que cada código pode fazer e também interpretar códigos de expressões adquiridas em tutoriais em livros ou internet, com o passar do tempo utilizando estas expressões e memorizando você é capaz de criar suas próprias expressões de acordo com sua necessidade, portanto não se aflije e respeite sua evolução ao longo da necessidade de sua produção.


1. GREP Styles Pelo Comando Finde/Change Vá em Edit>Find/Change e escola a segunda aba Grep para ter acesso aos comandos. note que a primeira diferença com a aba Text pode ser notada clicando no botão “@” e verificando um aumento no número de listas de comando que o Grep permite, e dessa forma permite criar busca/troca com mais detalhes que a aba Text. Outro fator interessante é que a maioria dos comandos de Grep sempre se iniciam com “˜” ou com “\” e que o uso de “(“ “)” permite que se isole determinados trechos das buscas para que tenha a mudança em uma ou mais partes separadas ao longo do trecho buscado. No exemplo a seguir vamos fazer a busca/troca de um trecho de palavras entre parênteses e trocar o estilo aplicado ao grupo. Para isso no Campo Find: colocaremos a expressão \(.+\) que busca: Abrir paranteses segudo de qualquer dígito uma ou mais vezes repetidas fecha paranteses. Ao clicar no botão Find o InDesign irá selecionar qualquer campo de caracteres que estão entre paranteses incluindo os parenteses. Depois no campo Change Format atribuímos um novo Character Stye ou Paragraph Style e clicando no botão Change o Estilo dos caracteres selecionados mudarão sem afetar o conteúdo escrito no intervalo.


2. Grep Styles Dentro de Estilos de Parágrafo. A partir do CS4 foi introduzida a ferramenta Grep dentro do estilo de parágrafo permitindo atribuir automações com uso de estilo. Ao criar um estilo e configurá-lo na aba Grep interna temos um campo para a inserção de um Character Style e de uma função Grep. Você pode colocar somatória de funções Grep dentro de um mesmo estilo para isso basta apenas clicar no botão inferior New Grep Style. Claro que desta forma não utilizamos o Grep como no comando Find/Change para busca e troca , mas sim para definir um determinada alteração quando aplicado o estilo em um bloco de texto. O exemplo que vemos aqui utiliza a variável de condição “or” (Símbolo Grep “|” ) Imagine que temos um bloco de texto onde será aplicado um determinado paragraph style mas que toda primeira palavra dos parágrafos deste bloco serão em negrito, podemos então usar no campo character style do Grep um estilo para definir o negrito e no campo abaixo especificar com o comando”|” quais palavras serão afetadas por este character style dentro daquele pragraph style, portanto no campo da expressão podemos indicar as palavras separando-as com o símbolo “|”.



Text Variable Text Variable é um item inserido no documento que varia de acordo com o contexto. O InDesign já traz em seu painel uma série de variáveis que podem simplesmente serem utilizadas ou se você preferir você pode criar suas próprias variáveis dependendo de sua necessidade. Muitas variáveis permitem um bom trabalho quando inseridas nas páginas mestras permitindo assim um bom controle do conteúdo. A mairoria das variáveis permitem a inclusão de texto antes e depois da variável, desta forma muitas configurações são possíveis. Os tipos pré-definidos de variáveis são: Número de capítulo, ‘Data de criação’, ‘Data de modificação’ e ‘Data de saída’, ‘Formato da data’, Nome do arquivo, ‘Incluir caminho de pasta completo’, ‘Incluir extensão de arquivo’, Nome da imagem, Número da última página, ‘Cabeçalho corrido’ e Texto personalizado.


1. Aplicando Text Variable em número de capítulos. A variável de capítulo (Chapter Number) pode ser aplicada em uma página-mestra de um único arquivo ou pode ser aplicada a vários arquivos usando o Book. Você pode colocar mais de uma variável de texto de um mesmo tipo dentro de um documento do InDesign, por exemplo, no caso da utilização de um variável de capítulo você pode utilizar uma variável para definir “Capitúlo 1” e outra variável de capítulo para defnir “Cap.1”. Para inserir vá em Type>Text Variable>Insert Variable. Ao clicar um número “1” é adicionado a sua master page indicando a automação atribuida. Para que você coloque um prefixo ou sufixo que acompanhe o número do capítulo vá em Type>Text Variable>Define e na janela que surge defina um texto no campo “Text Before” para um texto vir antes da numerção de capítulo e em “Text After” para adicionar um texto após a numeração. Para a utilização em um arquivo Book, após a importação de todos arquivos .indd que farão parte e escolha um dos arquivos para ser o arquivo que contenha o Text Variable e mantenha o “Indicador de Style and Source” tikado neste arquivo. Ao utilizar o comando no menu do Book, Update Chapter & Numbers o InDesign irá aplicar a Text Variable Chapter Number em todos arquivos do Book.


2. Usando Text Variable para inserção de data de sáida. Outra forma de utilização que permite variar a data do projeto no rodapé ou em qualquer ponto de um PDF, desta forma você permite que o InDesign atualize a data do projeto que sairá na impressão. Para aplicá-lo vá em Type>Text Variable>Insert Variable>Creation Date. Para adicionar um texto antes da data e um texto após a data clique primeiro em Type>Text Variable>Define escolha a variável Creation Date e clique em Edit, preencha os campos Text Before e Text After.


3. Definido um Text Variable personalizado. Outra forma de utilizar o Text Variable é criar versões das variáveis pré-definidas e salvar como um Preset novo. Vá em Type>Text Variable>Define, clique no botão>New, na paleta escolha o nome de sua variável e escolha o tipo de variável que ela se enquadra. Todo Text Variable que você cria fica armazanado no arquivo .indd que você salvou, você pode reutilizar um Text Variable criado em um novo arquivo .indd, para isso basta entrar em Type>Text Variable>Define e clique no botão Load, escolha o arquivo .indd que contenha a variável que você quer reutilizar clique em OK e a variável fará parte do seu novo arquivo .indd.


Cross-Reference Inserir Cross-Reference em um documento permite que se crie âncoras de uma parte de um documento a outra parte do mesmo documento, um exemplo simples e prático é quando ao longo do texto você coloca entre aspas o “número da página” onde se encontra a fotografia ou ilustração referente aquele trecho do texto. Uma Cross Reference pode ter 2 destinos: um Paragraph Style ou um Anchor Text, que já entra no domínio dos Hiperlinks. Para criar uma Cross Reference, Menu Window > Text > Cross Reference. Para criar uma Cross Reference, coloca-se o cursor onde pretende introduzir o marcador (source cross-reference) clique no botão Create New Cross-Reference. Se houver um texto selecionado, este é substituído pelo marcador.


1. Aplicando Cross-Reference com Paragraph Style. Para aplicar um Cross-Reference a partir de uma Paragraph Style é preciso colocar o cursor de texto onde se deseja a inclusão da referência cruzada, após isso clique no menu do Painel Hiperlinks/Cross-Reference> Insert Cross-Reference, surge uma janela onde você pode configurar qual documento do InDesign a referência estará associada e a qual estilo de parágrafo, ao selecionar o estilo de parágrafo uma lista ao lado é exibida com todos os termos que estão associados aquele estilo, basta escolher para qual dos termos a referência cruzada indica e clicar em Ok, desta forma surge no ponto que você escolheu a referência cruzada para aquele determinado trecho ou para outro arquivo .indd. A referência cruzada criada a partir do Paragraph Style pode ser usada tanto para texto como para imagens, quando você quiser atribuir a uma imagem basta que esta imagem tenha uma legenda com Paragraph Style aplicado, cria-se a referência cruzada ligada a legenda que automáticamente levará a imagem escolhida.


2. Aplicando Cross-Reference com Text Anchor. Outra forma de aplicar um Cross-Reference é liga-lo a uma âncora de Texto, da mesma forma que na ligação com estilos, posicione o cursor em um ponto de texto e cliqeu no menu Hiperlinks/Cross-Reference> Insert Cross-Reference no campo Link To escolha> Text Anchor a aba abaixo vai mostrar o campo para escolha do arquivo .indd de origem e o campo Text Anchor, aqui será listado os text anchor que você crou anteriormente a aplicação da referência cruzada


Ferramentas de Alternate Layout.

As ferramentas para construção de layout alternativo são: Ferramenta Page Size; Ferramenta Content Collector; Ferramenta Content Placer; Painel Liquid Layout; Comando Create Alternate Layout. Este conjunto de ferramentas permite que se tranporte conteúdo entre páginas e arquivos, e que se crie layouts variados com conteúdo linkado e estilos separados por pastas. Com estas ferramentas é possível criar versões de formatos para um mesmo conteúdo adaptado para diferentes formatos e diferentes mídias.

T

T

T

T T


1. Page Tool. A ferramenta Page Tool se encontra no primeiro módulo da ferramenta tools. Ao pressioná-la surge uma moldura editável em volta de toda a área da página, esta moldura editável é que permite se atribuir mudanças de formato a página e com Liquid Layout aos objetos da página também. Ao selecionar uma das pontas editáveis da ferramenta com o mouse podemos mover livremente pelo Pasteboard, se pressionarmos junto a tecla Alt/Option a página modificará para o novo tamanho que você criou alterando o formato original da página.


2. Edit Page Size. Juntamente com a Ferramenta Page Tool nós podemos utilizar a Ferramenta Edit Page Size localizada no rodapé do Painel Pages, ao lado da ferramenta de criação de páginas. A Ferramenta Edit Page Size permite que se modifique o formato de uma página para um formato específico (como o A4 por exemplo) ou para um formato Custom que você pode definir suas medidas e nome. Quando utilizado o formato custom uma janela secundária se abre permitindo que se insira o nome do novo formato criado e suas medidas ao pressionar o botão Add o formato criado passa a fazer parte dos formatos pré-criados pelo InDesign.


3. Content Collector e Content Placer. Outra ferramenta que pode ser utilizada para alteração de formato é a Conten Collector e a Content Placer , mas aqui o foco fica no conteúdo, diferente da ferramenta page tool. A Content Collector quando clicada abre um container posicionado na parte inferior da tela, onde é possivel , temporariamente, armazenar conteúdos que estão em uma página para outra página do mesmo documento ou para páginas em outros documentos, ele permite que você faça um Place dinâmico e com Link fazendo com que o conteúdo sempre esteja linkado ao conteúdo inicial. Com a Content Collector é possível copiar itens separados, grupos de itens, páginas completas e até mesmo itens do Pasteboard. É possível também copiar textos linkados (Tread Text) como um único conjunto de textos usando o item Collect All Treadead Frames. Já a Content Placer permite que você cole o conteúdo armazenado em outras páginas ou outros arquivos, ao fazer a escolha de onde será colado basta inserir com um clique para inserir com o mesmo tamanho do original ou você pode arrastar o mouse e segurar o botão para fazer uma redimensionamento da área. Ao incorporar o conteúdo em um novo espaço você pode pedir que o InDesign mantenha links de vínculos como o objeto original, para que caso seu conteúdo seja modificado, a modificação ocorrerá em todos os vincúlos copiados e também permite que se mapeie e copie os estilos para que as cópias mantenha as características iniciais de estilo.


4. Liquid Layout. Esta ferramenta pode ser utilizada junto com a ferramenta Page Tool, a Liquid Layout permite que ao editar o formato de uma página você possa atribuir condições para que o conteúdo também se redimensione ou auto-ajuste para o novo formato. A ferramenta trabalha com 4 opções de redimensionamento de conteúdo são elas: Scale; Re-Center; Guided Based e Object Based, cada uma destas funções permitem ajuste de parêmetros que auxiliam no transporte do conteúdo para novos formatos. Sem dúvida das quatro opções a mais completa é a Object Based pois permite que se atribua parâmetros objeto por objeto desta forma permitindo um controle muito maior das opções de autodimesinamento. Com o Painel Liquid Layout ou diretamente com a ferramente Page Tool ao selecionar o item Object Based,o InDesign habilita a possibilidade de Autofit para o objeto selecionado, Resize de Altura e Largura do Objeto e o Pin que são os parâmetros de fixação dos pontos (Topo, Rodapé, Direita e Esquerda) do objeto para que ao se modificar o tamanho da página o objecto não sai da posição fixada. O uso primário dessa ferramenta se deve ao fato da necessidade, hoje, de se leiautar a versão Horizontal e Vertical para as páginas de publicações digitais no formato Folio, mas é possívle usar os benefícios do Liquid Layout pra qualquer tipo de saída do InDesign facilitando o reuso de uma diagramação em outra posição ou formato.


5. Create Alternate Layout. Após a definição e testes com a ferramenta Liquid Layout o comando Create Alternate Layout se encarrega de fazer a confecção do novo layout sem que se perca o layout anterior em que foi baseado. Com o comando é possível manter em um mesmo arquivo de InDesign diversos layouts para saídas de mesma mídia, isso facilita a adaptação dos formatos para os diferentes dispositivos em uma mesma mídia. Para cada layout construido com o comando o Painel Pages vai criando uma nova Coluna de Layout com o nome que você especificou, esta organização no começo pode ser um pouco confusa pois no documento as páginas são mostradas uma embaixo das outras mesmo tendo tamanhos e orientações diferentes, mas no Painel Pages eles sempres aparecerão uma ao lado da outra, coluna por coluna, para cada nova página que você cria ela fica armazenada na coluna de seu formato logo abaixo da página anterior. O comando também cria as páginas mestras de cada formato que foi feito assim a qualquer momento você pode utilizar todos recursos de Master Pages definidos para cada formato presente no arquivo.


Tipos de Exportação

04

Exportação PDF Print

Os avanços do InDesign em suas últimas versões têm se concentrado principalmente nas saídas para produtos digitais, mas isso não quer dizer que o formato promissor e principal não seja mais o PDF para impressão. Os processos de impressão também vem evoluindo nos últimos anos e permitindo inovações, impressoras digitais e nanográficas estão surgindo e permitindo que se alcance volumes de impressão siginificativos como do tradicional Off-Set com a vantagem de permitirem o uso de dados variáveis entregando impressões de alta qualidade e customização de conteúdo. As novas ferramentas como a Content Collector/Content Placer e Liquid Layout não devem ser olhadas como exclusivas das publicações digitais, elas também permitem que se varie formatos para impressos e agilidade em produção de campanhas e produtos físicos. A nova versão do Acrobat Pro (Hoje na XI) continua evoluindo e permitindo que automações, importações e exportações de PDF se conectem com os mais diversos sistemas de impressão e processamentos de impressos. A saída de arquivo utilizando o formato Book (.inb) hoje é uma realidade consolidada na indústria gráfica, não apenas uma inovação, permite que equipes distantes alimentem uma publicação ou um trabalho de produção de máquinas e ambientes diferentes e no final resultando em um único PDF Print até mesmo imposicionado (Usando o comando Print Booklet ou sistemas similares). Há mais de 15 anos foi estabelecida a norma ISO 15930-1:2006, ou mais conhecida como PDF/X. Em constante evolução a norma já conta com as versões PDF/X-1, PDF/X1-A, PDF/X-2, PDF/X-3, PDF/X-4 e a PDF/X-5. Para cada numeração da norma as mudanças de possibilidades para transparências, permissão de espectro de cores RGB e LAB permitem inovações e qualidades dificilmente alcançadas em tempos anteriores.


1. PDF/X-3, PDF/X-4 e PDF/X-5. Aqui temos um infográfico que demonstra as principais difrenças entre os formatos existentes de PDF/X. O PDF/X 1-A sem dúvida é o formato mais utilizado, mas novas fábricas e novos equipamentos vem implementando os novos formatos devido as mudanças naturais de processos e workflows.


2. Web-To-Print. Um segmento que vem crescendo muito na indústria é a possibilidade de impressão sob demanda pelo processo Web-To-Print, trata-se de um processo automatizado que permite atender milhares de usuários espalhados no mundo por um sistema on line via internet conectado a um processo de impressão, mais conhecido como On Demand. A Xerox criadora do Xmpie um produto que foi lançado para trabalhar em união ao InDesign, hoje tem um processo web-to-print muito eficiente através de um aplicativo on line chamado UStore que permite a criação de todo um processo webto-print para implementação em gráficas como equipamentos de impressão digital. Abaixo temos a página do Xmpie na web.


2. Print Fine Art. O segmento de Fine Art foi inaugurado pelo mercado fotográfico Digital, na busca de melhores impressões foi desenvolvida uma técnica denominada Giclée, que permite impressões da alta qualidade somando a eficiência dos softwares de tratamento, quantidade de cores de impressão e papéis especiais que podem ser confeccionados até mesmo em puro algodão. Hoje o mercado de Fine Art já possui diversos adeptos e também atende a reprodução de obras de arte e pinturas digitais.


Conteúdo + Interatividade.

Para cada tipo de exportação o InDesign possue ferramentas específicas que auxiliam no desnvolvimento e finalização dos arquivos. Algumas ferramentas participam de uma ou mais exportações pela necessidade do memso tipo de conteúdo. A seguir vemos um infográfico dos tipos de exportação e suas ferramentas, nas páginas seguintes é aprofundado o uso de cada uma delas e o passo-a-passo para chegar a saída de cada tipo de exportação. PDF Interactive

Painel Media Painel Hiperlinks Painel Buttons Painel Transitions Painel Bookmarks Painel Preview Toc

SWF e FLA

HTML5

EPUB

FOLIO

Painel Media Painel Hiperlinks Painel Buttons Painel Transitions Painel Bookmarks Painel Preview Painel Animation Painel Timing Painel Object State Toc * O arquivo SWF pode ser reimportado para um arquivo PDF Interactive

Painel Media Painel Hiperlinks Painel Article Ancoragem Objetc Export Export Tagging

Painel Media Painel Hiperlinks Painel Article Ancoragem Objetc Export Export Tagging Toc Footnote

Painel Media Painel Hiperlinks Painel Buttons Painel Object State Folio Overlays Insert HTML Liquid Layout Folio Builder


* Permite incor- * Permite incorporar CSS e Javas- porar CSS excript externo terno. Javascript externo somente na versão 3.0

Ferramentas PDF Interactive.

Ao utilizar o InDesign para exportação PDF Interactive, vá em Workspace>Intercative for PDF, esta ação abre em seu InDesign todos os painéis que podem inserir interatividade em um PDF. Os painéis são: Page Transitions; Hyperlinks; Bookmarks; Buttons and Forms; Media; SWF Preview e Sample Buttons and Forms. É possível também inserir um arquivo SWF pelo comando File>Place ou pelo Painel Media. Você pode utilizar o Flash ou o próprio InDesign para criar um arquivo SWF. Outro fator importante ao utilizar a exportação PDF Interactive é que você pode criar dois tipos de documento: 1 - PDF com intent print com inserção de interatividade - Esta formatação permite que o usuário final veja o PDF em sua tela do computador e que também imprima (escolhendo se inclui a interatividade ou não). 2 - PDF com intent web com inserção de interatividade- Esta formatação leva em consideração as medidas de telas em pixel e usa os diversos atributos interativos para que o usuário final visualize apenas em seu computador sem a necessidade de imprimir.


1. Workspace PDF Interactive. O InDesign traz alguns Workspaces pré-definidos para organização da área de trabalho, desde o CS4 foi incluído o Workspace Interactive fo PDF que exibe os painéis básicos mais os painéis que permitem adicionar interatividade válida em um exportação PDF.


2. Painel Media. O Painel Media permite que você importe Audio e Video para um arquivo do InDesign, é o único processo que permite a introdução de Audios e Videos. Para inserção basta clicar no ícone no rodapé do lado direito do Painel e uma janela de inserção abre permitindo a busca de um arquivo local. A Adobe indica o formato MP3 para os Audios e MP4 (com compressão H264) para os Vídeos. Para inserção de videos na Web o InDesign permite que se conecte uma URL de um video no formato .flv. A inserção de Audio só aparece no Painel SWF Preview se você estiver usando botões ou Auto play (para tocar automaticamente). A Inserção de video permite que se utilize controles em cima do video ou que se crie botões para controlá-lo.


3. Painel Buttons and Forms. O Painel Buttons no CS6 passou a se chamar Buttons and Forms pois o InDesign a partir desta versão permite que você crie, edite e exporte um formulário dentro de um arquivo PDF Interativo, porém a distribuição deste formulário depende do uso do Acrobat Pro para prepará-lo para o envio a uma lista de e-mails e contatos. O Painel Button permite que você habilite ações a um botão e que você planeje o layout dos três principais estados de um botão: Normal; Rollover; Click, dessa forma você pode alterar contorno, preenchimento e texto de cada estado de cada botão criado.


4. Painel Hiperlinks. O Painel Hiperlinks permite que você crie diversos tipos de conexão de elementos interna e externamente, sendo que a ligação de Link para web através de URL e o link entre páginas de um mesmo arquivo como o comando Page são as mais utilizadas. Você ainda pode configurar ações que utilizem a paleta Hiperlinks e comunhão com a paleta Cross-Reference. Para a aplicação de um item basta selecioná-lo na área do arquivo e clicar no menu no topo direito do painel> New Hiperlink abre-se uma janela de configuração que permite que se escolha o tipo de vínculo e estilo do vínculo.


5. Painel Bookmarks. O Painel Bookmars permite que se crie um Sumário interativo a partir de uma ligação de âncora (anchor) de um texto, objeto e imagem constante em uma página. As âncoras criadas com o Painel vão alimentar o comando Bookmarks no Adobe Acrobat Pro e Reader e permitir que se tenha um índice na aba lateral do visualizador de PDF. Se você utilizar a ferramenta TOC (Table Of Contents) para gerar um sumário para o corpo do seu documento você pode deixar configurado para que o InDesign utilize o mesmo conteúdo para criar o Bookmarks automaticamente dispensando o uso do Painel.


6. Painel Page Transitions. O InDesign assim como o PowerPoint e o KeyNote possui uma ferramenta para adicionar transição de página. Este Painel contém alguns Presets já configurados para a utilização. Todos podem ser utilizados menos o Page Transitions>Page Turn que só pode ser utilizado na exportação SWF. Você pode aplicar o Page Transition individualmente nas páginas ou clicando no ícone no rodapé direito você aplica o mesmo Page Transition para todas as páginas do documento.


8. Importação SWF. O PDF Interativo nativamente não aceita os Painéis destinados a animação e sobreposição de objetos, porém ele aceita a inserção de arquivos SWF (Apenas para visualizadores Acrobat Desktop) primeiramente os profissionais passaram a criar animações no próprio Flash e introduzir no InDesign, mas o próprio InDesign permite que você use as ferramentas de animação e exporta um SWF para ser importado em um documento. Portanto é necessário que você crie um arquivo com a dimensão exata do espaço que você quer colocar no documento que vai se tornar o PDF Interativo. Para a inserção use o Painel Media e importe o SWF como um arquivo de video escolha a função Autoplay e na função Poster> Select Actual Frame.


Worflow PDF Interactive. 1.Formato Doc ou Presentation

2.Template


3.Media e Buttons

4.Forms

5.Bookmarks5.ePreview Transitions

1. Determinando o Tipo e Formato. Vá em File> Newe Document escolha o Intent Print para criar um PDF Interativo que manterá o formato de impressão ou escolha Intent Web para o PDF Interativo que terá o formato de uma apresentação para monitores ou Dispositivos Móveis. Para o PDF com Intent Print o uso de grid de colunas fica a critério do seu tipo de documento, para o PDF com Intent Web o grid de coluna pode ser mudado para 12 colunas com 12 pixels de largura de gutter. As margens também diferem de um Intent para o outro pois no caso do Intent Web não há necessidade de margens Left e Right pois é possível colocar o Adobe Reader em modo Full Screen e aproveitar toda tela.


2. Layout Estático. Como primeira tarefa mantenha a construção de seu arquivo como se fosse uma publicação impressa, ou seja, se preocupe com a disposição dos elementos para preencher a página a interatividade será inserida depois. Lembre-se que para PDF Interativo do tipo Document você deve manter o Intent Print e para o PDF Interativo do tipo Presentation você pode utilizar o Intent Web. Quando utilizar o PDF Interativo para apresentaçãoes que serão vistas no Desktop você pode utilizar um Grid System para auxiliar na criação do design. (Link no Capitulo Extras).


3. Inserido Interatividade. Após definir as áreas de conteúdo é preciso inserir os espaços onde ocorreram interatividades, a principal característica de layout interativos é que eles permitem onde teria espaço para uma determinado conteúdo em um impresso ampliar estas áreas com sobreposições informações externas com links, áreas de Audio e Video. Análise seu documento e veja os campos que se tornarão hieprlinks, selecione-o vá até o Painel Hiperlinks clique no menu e escolha> New hiperlink, na janela seguinte que abrirá escolha no campo Link To: URL e no campo abaixo Destination escolha URL insira o endereço web que você quer abrir com o link e mantenha o item Shared Hiperlink Destination.


4. Criando e Inserindo um arquivo SWF. Você pode inserir um arquivo SWF em um arquivo que será exportado como PDF Interativo e você pode utilizar o próprio InDesign para criá-lo. Para isso você deve criar um arquivo .indd separado de seu arquivo PDF, neste arquivo você pode utilizar todos os painéis que já utilizou no PDF Interativo e usar os Painéis Animation, Timing e Object States que permitem interatividades que só funcionam em um arquivo exportado como SWF. Após a inserção de Interatividade você deve exportá-lo como SWF. Este arquivo SWF agora pode ser incorporado ao arquivo .indd que será um PDF Interativo, para isso utilize o Painel Media e importe o SWF como se fosse um arquivo de video, aplique o comando Play on Page Load e no Poster>Current Frame e basta exportar o arquivo como PDF Interativo e no Adobe Reader verificar o funcionamento de um arquivo SWF.


5. Exportando como PDF Interactive. Vá em File>Export escolha um nome para o projeto e no campo Tipo de Formato> PDF Interactive, uma janela de configuração surge, defina a quantidade páginas, se o arquivo será visualizado automaticamente a exportação o modo de apresentação das páginas e a inclusão de interatividades, page transitions e formulários, há um campo destinado a compressão das imagens e um botão>Security para inserção de senha para abertura ou controle de edição, clique em OK e seu arquivo PDF Interactive será exportado.


Finalização e Fechamento PDF Interactive.

Após a construção do arquivo com a arte e a interatividade é chegado o momento de finalizar e exportar o arquivo PDF Interativo. Vamos em File> Export surge uma janela que permite a adição do nome que você vai definir para o arquivo e na parte inferior no campo Tipo de Formato> Escolha PDF Interactive, ao término clique em OK e uma pequena janela surge na tela. a seguir os campos de configuração e suas opções: File>Export Permite que você defina o nome do arquivo e o tipo de formatação de sáida.

Janela> Export Page - Permite exporta todas as páginas ou escolher uma ou intervalo. Pages/Spread - Para exportar uma página emabixo da outra ou espelhadas. View After Exporting - Quando selecionado abre o programa padrão de visualização automáticamente. Embed Page Thumbnails Quando selecionado permite incorporar as miniaturas das páginas. Create Acrobat Layers - Quan-


do selecionado permite a visualização de camadas do Acrobat. View - Permite a escolha do modo de visualização no Acrobat. Layout - Permite a escolha do modo que as páginas vão aparecer no Acrobat. Presentation Open in Full Screen Mode - Quando escolhido permite abrir em tela cheia automático no Acrobat. Flip Page Every - Quando escolhido permite indicar os segundos de intervalo para a virada de página automática. Page Transition - Permite escolher um tipo de animação entre as viradas de página (Page Flip apenas para SWF). Forms and Media - Permite habilitar ou não os formulários, audios, videos do documento na exportação. Tagged PDF - Permite criar uma estrutura lógica para ser utilizada pelo Acrobat Pro. Image Handling - Permite a compressão e troca de resolução de imagens JPG para otimizar a exportação. Security - Permite a inclusão de senhas para bloqueio de acesso inicial e acesso de edição e modficiação do conteúdo do documento exportado.


Ferramentas SWF e FLA.

Quando foi adicionada esta exportação na versão CS5 o SWF ainda tinha um peso grande como plugin para os browsers, porém com a chegada dos Tablets e Smartphones modernos e a negação do iOs para o formato (seguido hoje pelo sistema Android e Windows Phone) tornou a exportação SWF algo interessante apenas para browsers desktops e consequentemente algo não interessante para o mercado atual, porém ainda há uma utilidade para a exportação SWF, a inclusão de animaçãoes SWF dentro de um PDF Interactivo. Você pode utilizar o próprio InDesign para criar um arquivo que utiliza as ferramentas de animação, utilizar a exportação para SWF e reimportar o arquivo, através do Painel Media, para o arquivo que será exportado como PDF Interactive. Caso você exporte este arquivo com a extensão FLA, permite que você abra este arquivo no próprio Flash e produza uma animação com mais recursos e ações e também reimporta-la para um arquivo PDF Interactive. As ferramentas utilizada no InDesign para SWF e FLA são: Painel Animation - Permite utilizar Presets de animações e animação a partir de um path desenhado. É possível estabelecer uma série de configurações para melhor atender a ideia de seu projeto. Painel Timing - Permite ordenar e agrupar elementos animados de uma página, é possível estabelecer ordem de disparo das animações e quais animações vão ocorrer simultâneamente e quais vão ocorrer em intervalos (Delay) determinados. Painel Object States - Permite criar áreas interativas com camadas (States) é muito utilizado para criar Slideshows mas pode ser muito interessante para aumentar o número de conteúdo em uma única página empilhando fotos, textos, audio e videos. Painel Media - Permite importar o arquivo SWF como um conteúdo animado para outros arquivos .indd em especial para o PDF Interactive.


1. Workspace Digital Publishing. No workspace digital publishing são adicionado os painéis que permitem animações e sobreposições de conteúdo, estes painéis permitem ampliar as possibilidades das exportações de SWF e FOLIO principalmente. O painel Liquid Layout também faz parte deste workspace e após a instalação do Plugin Folio Producer é adicionado os painéis Folio Overlays e Folio Builder.


2. Painéis PDF Interacative. Todos os painéis que já foram utilizados no workspace PDF Interactive também farão parte do workspace digital publishing e todas suas funções também adicionam interatividades em SWF, HTML, EPUB e FOLIOS.


3. Painel Animation. O painel Animation permite que você use animações baseadas em Actionscript dentro do InDesign. Você pode utilizar modelos prontos de animações acessando o item>Preset e pode também transformar qualquer Path vetorial selecionado junto a um objeto com a ferramenta>Convert Motion Path localizada no rodapé do painel a direita. No painel animation você controla tempo, eventos, efeitos, rotações, localização e direção para um objeto animado.


4. Painel Timing. Após você ter criado uma ou mais animações que possuem disparo automático ao carregar a página você pode utilizar o painel Timing para definir a ordem de disparo destas animações bem como definir quais serão disparadas primeiro e quais serão disparadas juntas (utilizando a corrente no rodapé do painel), você ainda pode definir um tempo de Delay para aumentar ou diminuir o tempo de disparo entre as animações ou grupos de animações.


5. Painel Object States. O Painel Object States permite a criação de conteúdo sobreposto em camadas, para isso você deve selecionar dois ou mais objetos (Textos, vetores ou Bitmaps) e clicar no menu em> New Object State, feito isso o item Object Name permite colocar um nome ao objeto e logo abaixo surge a lista em camadas acessível de cada item pertencente ao Object State. Para que você possa acessar as camadas é preciso a utilização de botões com as ações que interagem com States (PDF e SWF) para ter a exibição automática como um slideshow de cada State você pode utilizar o item Slideshow no Painel Folio Overlays (Somente para FOLIO).


6. Painel Page Transition - Page Turn. A exportação SWF permite que se aplique o item Page Turn do painel page transition que permite o efeito de transição de página imitando a virada de página como de um impresso. Quando aplicado e importado como SWF em um PDF Interativo seu funcionamento é mantido.


Workflow SWF e FLA. 1.Formato

2.Template


3.Media

4.Animation

5.Object State

5. Preview

1. Formato. Para as produções destinadas a exportação SWF e FLA o formato varia de acordo com a área de inserção deste documento em um outro documento como PDF , HTML e etc. Como o formato Flash está se dissociando do formato de publicação devido a falta de suporte ao formato nos novos sistemas de Tablets e Mobiles, seu melhor uso hoje fica para inserção em PDF Interativos.


2. Layout Estático. Assim como em qualquer outro formato interativo, defina o layout estático do projeto de acordo com as regras básicas do design gráfico do projeto como um todo e após inicie a colocação de áreas interativas, no caso do SWF como já se utiliza o painel Object States lembre-se que a quantidade de conteúdo x a área de conteúdo aumenta consideravelmente por página devido a possibilidade de empilhar em States vários elementos.


3. Inserindo Interatividade para arquivos SWF. A inserção de interatividade no SWF conta com todos os painéis do workspace PDF Interactive e os Painéis do workspace Digital Publishing (menos o painel Folio Overlays), mas lembre que ao importar Audio e Video em um arquivo que será exportado como SWF é criada uma pasta separada do arquivo contendo o Audio e Video, não ocorre aqui como no PDF Interativo que empacota todo conteúdo dentro de um único arquivo PDF. Como o formato Flash vem sendo substituido por HTML5 ele é uma boa opção para a publicação de animações de objetos enquanto os novos softwares Adobe não são incorporados na Suíte.


4. Exportando no formato SWF e FLA. A exportação SWF conta com uma janela com opções muito semelhantes a do PDF Interactive, porém te malgumas opções a mais como a possibilidade de embutir fontes utilizadas no projeto, definir se o SWF será incorporado dentro de um HTML, aumentar e diminuir as proporções do arquivo, definir a quantidade frames por segundo e comprimir imagens JPG e PNG. Se a exportação for como SWF você tem o arquivo final de publicação, se a exportação for como FLA você tem um arquivo que pode ser incorporado no Flash, porém ao importá-lo o conteúdo que aparece no Stage será todo rasterizado o que acaba por não ter muita ultilidade, mas todo conteúdo é adicionado a bilioteca do Flash facilitando seu reuso, mas uma nova animação deve ser feita no Flash, o que ainda é uma vantagem pois a possibilidade de ferramentas e recursos de Actions e até mesmo a conversão para JavaScript (veja o capítulo Extras) permite uma boa troca de conteúdos entre formatos.


5. Importando em um arquivo InDesign ou Flash. Com o SWF em mãos e sendo um SWF que não contenha Audio e Video podemos aplicá-lo a um arquivo InDesign que vai se tornar um PDF Interactivo ou incorporar a um arquivo FLA do Flash podendo convertê-lo em vários formatos de saída. Com as mudanças que os Sistemas Operacionais de Tablets que não incluem o SWF, o processo de publicação pelo Flash está cada vez mais preso aos próprios softwares Adobe ou a softwares que convertam SWF para saídas HTML5. A importação no InDesign se dá via Painel Media permitindo sua exportação apenas no PDF Ineterativo ou em um HTML para Browsers Desktop, e a inserção ao Flash se dá via File>Import.


Finalização e Fechamento SWF e FLA

Para a exportação SWF vá em File>Export e escolha o tipo de formato> SWF. Lembre-se que ao utilizar Audio e Video na exportação SWF eles serão exportados em uma pasta anexada por Links ao documento SWF o que acaba por invalidar este formato como um formato final de publicação (Isso no InDEsign). A exportação FLA segue o mesmo procedimento porém é uma exportação para que se inclua o conteúdo no Flash sem a necessidade de importação pelo comando import, porém esta facilidade só é aproveitada para manter os arquivos já na biblioteca do Flash, pois no Stage (a área de animação do Flash) o conteúdo é mostrado agurpada e até rasterizado como imagem.


Na aba General você configura as páginas que serão exportadas, se as interatividades serão exportadas e a dimensão do arquivo.


Aba advanced permite alterar a quantidade de frames/segundo da animação e como os textos serão exportados, também mostra as fontes que estão sendo embutidas na exportação.


Ferramentas HTML5.

Na última versão o InDesign incorporou a exportação HTML5 e também o comando Insert HTML que permite incorporar (Embeded) conteúdos já publicados na Internet como videos do Youtube, mapas do Google Maps e qualquer outro conteúdo de texto, imagem e audio. Muitos acham a esta exportação falha ou imcompleta, porém é preciso entender quais benefícios ela pode trazer ao seu fluxo de produção. É preciso entender que todo documento HTML é um documento que segue um fluxo contínuo com elementos dispostos em linhas uma embaixo da outra, ou seja, a disposição natural de um arquivo HTML é de um Texto, que contém links e âncoras para outros textos ou outras regiões de um texto, porém quando a web começou , lá para o meios da década de 90, para que fosse possível a diagramação deste conteúdo utilizando a área de maneira mais parecida com um impresso foi utilizado Tabelas para permitir que se definisse locais na região da tela para o conteúdo permanecer, com o passar do tempo surgiu o CSS uma linguagem que permite definir regiões de layout por outro método, utilizando a Tag DIV, e com isso layouts menos engessados surgiram na web deixando -a mais rica visualmente, anos mais tarde com a intensa utilização do Flash e do SWF, os sites passaram a incoporar animações, audio e video e uma maior liberdade de layout visto que era possível fazer até um site inteiro dentro do Flash. Esta prática resolveria os problemas de conteúdo e layout porém o plugin de propriedade Adobe para rodar os arquivos SWF retira da Web seu prórprio cárater de uma linguagem universal e aberta, e por isso os esforços que vem se concentrando em transformar o HTML5 em um padrão Web são fortemente defendidos por muitos países, empresas e pessoas, e, até mesmo a Adobe tomou inciativa e vem desenvolvendo diversas ferramentas em HTML, CSS e Javascript. Acesse neste Link


1. Formato e Grid System . Para documentos web podemos trabalhar com a largura de 960 pixels e utilizar o conceito de Grid System para dividir em 12 , 16 ou até 24 colunas, a altura do documento não tem definição uma vez que o ato de “rolar” a p´gina na web é uma ação conhecida e esperada pelos usuários. É interessante optar por uma margem Top e Bottom apenas para ajudar a definir o layout do Header e do Footer da página, as margens laterais pode ser 0. Lembre-se que o arquivo HTML será exportado em uma ordem vertical de conteúdo, a disposição que você vai definir no arquivo InDesign serve apenas para que você exporte com um JPG para ser um “Guia” para o desenvolvimento do layout em CSS e Javascript.


2. Ancoragem de objetos pelo frame. A primeira tarefa para uma boa exportação HTML é utilizar a nova técnica de ancoragem de texto e objetos utilizando o próprio frame. No frame dos objetos encontra-se um pequeno quadrado azul no top direito, este quadrado azul quando clicado e arrastado em direção a um texto cria uma linha de ancoragerm (Para ver a linha vá em View>Extras>Show Text Threads) dessa forma ao definir a ordem de exportação no Painel Article o texto adicionado com um objeto ancorado a ele sempre levará o objeto. Lembre-se que você deve sempre ancorar de um objeto para um texto e texto para texto não há necessidade de ser incorporado.


3. Object Export Options. No comando Objetc>Export Object Options você vai definir como e onde será a exportação dos objetos em HTML, neste painel você pode definir se ao objeto ficará fixo ou vai redimensionar com o tamanho da página ou browser de visualização, a resolução de saída o formato de imagem e o posicionamento na página, se você não definir o posicionamento aqui a exportação HTML sempre exporta os objetos a esquerda do layout da página. Lembre-se que no caso de objetos de Video e de Audio o Item custom Rasterization não pode estar selecionado.


4. Painel Articles. O painel Articles define qual a ordem de exportação do documento, é muito importante sua verificação, dos nomes dados a cada article criado e a ordem do conteúdo, pois é a ordem deste painel e não da página que será exportada no HTML. Para inserir um conteúdo no Painel basta selecionar o texto ou o objeto ( Lembre que objetos ancorado já estão selecionados ao selecionar o texto) e arrastar para cima do Painel Articles, uma janela surge para colocar o nome do Article. A qualquer momento você pode movimentar os Articles dentro do painel trocando a ordem de exportação do HTML.


5. Export Tagging. O export Tagging define os estilos de texto que serão exportados para o HTML, deve-se dar preferência as forntes OpenType. ao selecionar um estilo de parágrafo para um determinado texto e aplicar seu atributos, abra novamente o estilo e vá ao último item da lista a esquerda> Export Tagging, em sua aba de configuração surge o campo EPUB and HTML neste campo é possivel configurar o uso de uma Tag HTML para titulos () ou para parágrafos (


Workflow HTML5. 1.Formato

2.Ancoragem

3.Article Capitulo 1 Capitulo 2 Capitulo 3 Capitulo 4

4.Object Export

5. Export Tagging H1 H3 P


5. Preview no Browser

1. Determinando o Tipo e Formato. Ao abrir um novo documento use o intent>web e como largura máxima 960 pixels, isso faz com que se crie uma página web com largura confortável para monitores pequenos e grandes, a altura não tem definição fica a critério da quantidade de conteúdo que será colocado. Uma divisão em colunas para criar um grid system facilita a diagramação, pode-se usar de 12 a 16 colunas para uma boa divisão. As margens são necessárias apenas para facilitar a construção da página uma vez que serão definidas na exportação HTML.


2. Layout Estático. Aqui temos o exemplo de um layout estático que será usado como template para a formatação do CSS externo, o InDesign exporta o conteúdo em HTML em linha, ou seja, um item abaixo do outro, será com o uso de CSS externo que poderemos formatar a disposição do conteúdo da maneira que a página foi pensada.


3. Ancoragem e Exportação de Objetos. Após a definição do layout estático é preciso fazer a ancoragem de todos objetos (Imagem, Audio e Video) com os textos que estão antes ou depois do elemento, você só pode ancorar um objeto por vez para cada texto. Após a exportação para que você controle como estes objetos serão exportados vá em Object>Object export options >EPUB and html e defina para cada objeto o tipo de rasterização e alinhamento que será utilizado na exportação final.


4. Definindo a ordem com Painel Articles. Com o arquivo totalmente ancorado e com o setup do comando object export options, é preciso abrir o painel articles em Window>Articles. O painel articles permite que se defina a ordem de exportação de cada parte da página, dividindo a página em seções, o empilhamento criado no painel define de cima para baixo quais partes serão exportadas para o html, a exportação irá obedecer a ordem criada no painel articles.


5. Exportando e utilizando o Dreamweaver para CSS e Javascript. Com o arquivo pronto vá File>Export e escolha o formato HTML para exportação uma janela de configuração se abre dividida em três abas: General, Images e Advanced sua configuração será exibida no próximo tópico.


Finalização e Fechamento HTML5.

Para a Exportação HTML vá em File>Export na janela seguinte escolha o nome do arquivo e no campo tipo de formato>HTML. Lembrando que o HTML exportado ainda não terá uma aparência de uma página web pois o InDesign cria os estilos de texto e objetos mas não cria estilos de formatação de layout. Para que o HTML que será exportado tenha formatação de layout é preciso na última aba da janela de exportação incluir um arquivo CSS externo que pode ser feito no Dreamweaver ou softwares similares. É muito comum fazer uma primeira exportação com o HTML puro apenas com os CSS de textos e objetos, abrir o arquivo no Dreamweaver tomar conhecimento dos nomes das Tags criadas pelo InDesign e aí sim desenvolver um CSS que possa ser incorporado em uma segunda exportação porém já com aparência e formatação de uma página web. A seguir as opções encontradas em cada aba da janela de exportação:


Aba General onde você deve escolher a exportação Same as Article Panel.


Aba Image que permite o setup de exportação das imagens.


Aba Advanced da exportação HTML que permite a inserção de CSS e Javascript externo.


Ferramentas EPUB.

O formato EPUB foi criado por um consórcio de diversas empresas e é regulado pelo IPDF (International Digital Publishing Forum), sua grande vantagem é ser um formato aberto por utilizar as linguagens web (xml, xhtml, css e javascript) e ao mesmo tempo possuir a possibilidade de inserir DRM (Digital Rights Management). O DRM permite que se restringe o número de Devices que o livro pode ser instalado, e desta maneira, permite que se proteja e comercialize em e-commerces, lojas virtuais especializadas e Stores como AppStore e Google Play. Atualmente temos três versões de EPUB no mercado: EPUB 2.0 - Permite criar livros com texto, imagens e hiperlinks. Inclui as informações do livro e seu número ISBN com metadados. Este formato é o que mai se aproxima do livro físico. Sua Estrutura básica é XHTML e CSS. A característica mais marcante deste formato é o total controle do layout por parte do leitor, que através do seu dispositivo e de seu aplicativo pode alterar fontes, seu tamanho, orientação visual e etc. EPUB 3.0 - Permite criar livros com Texto, Imagem, Audio, Video, Hiperlinks e Interatividades com Javascript. Inclui as informações do livro e seu número ISBN com metadados. Este formato permite a criação de um livro bem mais interativo e se afasta bastante da ideia de livro físico que conhecemos. Sua estrutura básica é XHTML, CSS e Javascript. A característica mais marcante deste formato é o total controle do layout por parte do leitor, que através do seu dispositivo e de seu aplicativo pode alterar fontes, seu tamanho, orientação visual e etc. EPUB 3.0 with fixed layout - De propriedade da Adobe, este formato permite criar livros com layout fixo, que permitem uma maior controle do layout pelo autor/produtor do que pelo leitor, portanto é um EPUB que permite interatividade e efeitos visuais mais próximos de um livro gráfico do que textual. As principais ferramentas para a produção de EPUB são: Painél Articles; Ancoragem pelo Frame; Object Export Options; Export Tagging; TOC sem numeração de páginas; Painel Hiperlinks; Painel Media e importação de CSS e Javascript.


1. Formato. Para criarmos um arquivo EPUB, escolha o intent web e use as medidas 600 x 800 pixels pois facilitarão a diagramação com fontes entre os tamanhos 9 a 22 pt. Não é necessário a configuração de colunas e as margens utilizadas serão apenas para auxiliar na diagramação, pois as margens de exportação serão definidas na exportação.


2. Ancoragem de objeto pelo frame. Da mesma forma que na exportação HTML na exportação EPUB é necessário ancorar os objetos (Imagem, Audio e Video) com os textos para que possam ser exportados entre os textos. Você pode ancorar um objeto a um texto anterior ou posterior ao objeto.


3. Object Export Options. Após a ancoragem vá em Object>Object Export Optins>EPUB anda HTML e defina as propriedades de exportação de cada objeto. Você pode configurar a rasterização e alinhamento das imagens e o alinhamento de audio e video. No caso do EPUB como será um livro e não uma página web você pode utilizar o comando Insert Page Break para criar quebras de páginas e separar partes do livro digital como as páginas de um livro impresso.


4. Painel Articles. Uma vez feito a ancoragem e o setup de objetos é necessário o uso do painel articles para definir a ordem de exportação do livro. Vá em Window>Articles e arraste o textos para o painel article e defina um article para cada parte do livro, a ordem que for criada no painel article é a ordem que será exportado pelo formato EPUB.


5. Export Tagging. Para que o InDesign leva as fontes e estilizações aplicadas aos textos é preciso utilizar estilos e dentro de cada estilo criado usar o comando Export Tagging, que é a última função da lista à esquerda do painel de estilo. Na função export tagging você pode configurar uma Tag HTML para os textos e definir um Class, Span, Strong e etc, basta você copiar no próprio campo Class o nome do estilo que você quer atribuído à tag HTML. O comando> Split Document EPUB permite que você informe a exportação EPUB que o estilo irá gerar quebra de páginas para manter uma aparência de páginas de livros.


6. Table Of Contents para EPUB. A ferramenta de sumário do InDesign, Table Of Contents, pode ser utilizada para gerar o sumário automático do livro. Vá em Layout> Table Of Contents e configure os campos para a construção do sumário a partir de um ou mais estilso de paragráfos escolhidos, lembre-se que o EPUB não pode sair do InDesign com número de páginas nem nas páginas e nem no sumário, portanto vá em Show Options e no item Page Number escolha >No Page Number, clique em OK e insira o Sumário em uma página.


7. Painel Media. O Painel Medis no EPUB pode ser utilizado para inserção de Audio e Video. O procedimento é o mesmo de qualquer outra inserção destes objetos, porém na exportação EPUB é necessário que eles estejam ancorados ao texto anterior ou posterior a sua localização no livro, Os comandos são os mesmo utilizados no Painel Media nõa necessitando de criação de botões para controlar nos leitores de EPUB. Exportar Audio e Video só pode quando utilizado a exportação EPUB 3.0.


8. Painel Hiperlinks e comando Footnote. O formato EPUB também permite a inserção de hiperlinks para conectá-lo a uma página web, sua aplicação é feita da mesma maneira que já foi feita em exportações PDF Interactive, SWF e HTML. Também temos a inserção de notas de rodapé como em um livro impresso, basta selecionar a parte do texto que será introduzida a nota clicar em Type>Footnote>Insert Footnote e automaticamente uma linha de inserção surge na margem Bottom da página para inserção do texto da nota e no local onde foi solicitada a inserção o número que corresponde a nota, a exportação fará um link entre a nota de rodapé e seu número no texto, quando exportado todas as notas de rodapé ficarão ao fim do capítulo do EPUB e ao clicar em um número de nota o aplicativo leva até a nota de rodapé e ao clicar no número da nota você volta para página onde está o número.


9. Formato Book para EPUB. É possível utilizar o formato Book (.indb) do InDesign para criar um EPUB, a vantagem aqui é a separação do livro em arquivos.indd para uma melhor diagramação ou uma diagramação em equipe. Utilizando o book cada arquivo .indd representará uma quebra de capítulo no livro, então é uma boa técnica de separar os capítulos de um livro extenso em gerar o sumário por arquivos.indd separados. Para exportar um EPUB do painel book vá ao menu lateral clique> Export to EPUB e o InDesign se encarrega de exportar todo livro em um único arquivo.


10. Comando File Info. A última tarefa, não menos importante, é a aplicação dos metadados para auxiliar na indexação do livro em sistemas de armazenamento e buscas. Para isso vá em File>FIle Info uma janela aparece e na sua primeira aba você encontra todos os campos para configuração básica de um arquivo EPUB, tais como, nome da obra, nome do autor , nome da editora etc. Preencha clique em OK e estas informações serão levadas na exportação EPUB.


Workflow EPUB. 1.Formato

2.Ancoragem

3.Article Capitulo 1 Capitulo 2 Capitulo 3 Capitulo 4

4.Object Export

5. Export Tagging H1 H3 P


5. Footnote e TOC 1

EPUB 2.0.

1. Arquivo .indd Você pode utilizar um arquivo .indd que já foi criado para uma exportação PDF Print ou criar um novo arquivo.indd já no intent web para iniciar a diagramação de um livro para ser exportado em formato EPUB. Se você iniciar a partir de um arquivo com intent Print, após abrir o arquivo no InDesign, vá em File>Document Setup e escolha o Intent> Web (somente no CS6) isso vai permitir que as medidas do arquivo passem a ser em “Pixel”, na mesma janela passe o tamanho do documento para o formato 600 x 800 pixels pois permite diagramar em um formato mais confortável e com medidas de texto confortáveis para a exportação. Feito isto vá em File>Save As para que você salve este arquivo modificado com outro nome para não salvar no arquivo print de origem. No caso de um livro que tenha sua versão inicial já em digital vá em File> New Document , escola Intent> Web. Desabilite o Facing Pages e escolha o formato 600 x 800 pixels, no campo da margem você pode colocar um valor apenas para a orientação enquanto diagrama pois a margem de exportação será definida no fim do processo na janel de exportação EPUB. (Veja a imagem a seguir para as medidas iniciais para um arquivo EPUB).


2. Estilos de Paragrafo e Character Após adequar o arquivo .indd para as medidas informadas acima e inserir o conteúdo de texto no arquivo, é necessário aplicar estilos em todos os textos para que o InDesign exporte todo conteúdo textual com fontes que podem ser embutidas, cores e estilos de família. O EPUB permite embutir fontes do tipo True Type. O processo de inserção de estilos é identico ao processo para um arquivo impresso, porém existe um novo item no painel de estilo chamado “Export Tagging” que deve ser configurado para exportação EPUB. O Export Tagging no paragraph style permite que se insira uma Tag HTML e um Class para que o estilo escolhido no InDesign possa ser exportado. Para isso dê um duplo clique no estilo aplicado a um texto e selecione o último item da lista à esquerda, ao selecionar surge a aba na direita que permite configurar a Tag de exportação e o nome do estilo que você pode colocar no campo Class para ser exportado. Existem também a opção de Split Document (somente no CS6) para que o estilo definido no campo Class faça a quebra de página toda vez que uma parte do livro tenha este estilo aplicado, o Split Document é um bom recurso para ser aplicado no estilo utilizado para separar os capítulos de um livro permitindo que todo capítulo sempre começaem uma nova página nunca encavalando com o final do capítulo anterior.


3 Ancoragem Após você configurar todos os textos é a hora de configurar as imagens para a exportação. Para qualquer imagem entra no “Fluxo” de texto é preciso utilizar o novo método de ancoragem inserido a partir do CS5.5, este método utiliza um novo quadrado azul que foi inserido no frame do InDesign, ao clicar com a Direct Selection em qualquer imagem ou objeto vetorial surge as bordas de acesso da figura, no canto superior direito apareçe um pequeno quadrado azul, ao clicar neste quadrado e mantendo o botão pressionado do mouse, você pode arrastar em direção ao texto mais próximo da figura e desta forma criar uma ancoragem entre a figura e o texto, lembre-se que a ancoragem deve ser feita sempre de um objeto para um texto e não de um texto para um objeto. Ao realizar este procedimento você garante que aquela imagem ou objeto será exportado juntamento com o texto que você ancorou permitindo dessa forma que você intercale entre os textos as imagens que ilustram os livro.


4. Object Export Options O passo seguinte apøes a ancoragem é uitlizar o comando> Object Export Options. Este comando permite que você defina algumas propriedades para imagens e objetos quando exportados para o EPUB. A o selecionar uma imagem ou objeto vá em Object>ObjectExportOptions>Aba EPUB and HTML, nesta aba você te mdois campos de configuração, o primeiro, permite configurar como a imagem ou objeto va iser rasterizado, você pode configurar a resolução e saída da imagem, o tipo de arquivo da rasterização e o nível de compressão. No segundo campo, você pode configurar o alinhamento do objeto (somente esta configuração garante a exportação certa do alinhamento do objeto), e você também pode definir se o objeto vai gerar uma quebra de página na exportação EPUB.


5. Table Of Content - TOC Para que você faça a exportação interativa do sumário do livro é necessário utilizar o comando Table Of Contents -TOC, este comando se encontra no menu Layout>Table Of Content


Tela do File Info para inserção de Metadados em um EPUB.


Aqui temos o livro finalizado para ser exportado em EPUB.


EPUB 3.0.

A exportação EPUB 3.0 foi introduzida no InDesign CS6, devido a homologação do formato pelo IDPF (Orgão internacional regulador de publicação digital). Esta versão permite incluir audio, video e automação javascript e com isso aumenta muito as possibilidades da produção de um livro interativo. A versão 3.0 mantém a característica de ser um EPUB Fluxo como no 2.0, portanto o design ainda é customizável pelos aplicativos e pelo usuário. As etapas de produção se assemelha muito ao EPUB 2.0 o que vamos incluir aqui é como incluímos Audio, Video e Javascript. Vale lembrar que é necessário que o aplicativo de leitura forneça suporte ao formato 3.0 caso contrário os objetosde audio, video e javascript não aparecem no livro.

EPUB 3.0 with fixed layout.

Cada grande fabricante de devices e aplicativos de produção tem investido em desenvolver versões de EPUB que permitem ter layout fixo. O primeiro formato foi o .iba da Apple que você precisa ter o APP iBookAuthor instalado em um Mac para poder produzir e este formato só abre no App iBooks e pode ser colocado à venda na iBookstore da Apple. A Amazon também desenvolveu seu formato fixo chamado KF8, a Aquafadas desenvolveu um Plugin para InDesign que permite exportar tanto EPUB 3.0 Fluxo e Fixo e a Adobe vem trabalhando no formato 3.0 with fixed layout. No Brasil as produções nestes formatos ainda são uma raridade mas vem ganhando frente devido a sua capacidade de agregar


Finalização e Fechamento EPUB.

Após a produção das etapas anteriores é preciso fazer a exportação para o formato EPUB do arquivo .indd. Ao clicar em File>Export e selecionar a exportação EPUB, surge uma janela com três abas de configuração: General, Image e Advanced. General - Permite o acesso as configurações globais da exportação EPUB: Version Setup Text Options View EPUB Image - Permite o acesso as configurações de resolução, alinhamento e compressão das imagens exportadas: Preserve Apparence from Layout Resolution Image Size Image Alingment Insert Page Break Insert Apply Image Conversion Ignore Object Export Options Advanced - Permite o acesso as configurações de divisão do livro, Metadados e inserção de estilos e javascript (somente no EPUB 3.0). Split Document EPUB Metadata CSS Options Javascript Options


Visualização em Dispoitivos.

Uma vez exportado o EPUB, que nada mais é do que um arquivo compactado como um .zip, ele está pronto para ser visualizado em qualquer dispositivo, apesar de se rum formato de publicação universal o EPUB Fluxo (2.0 e 3.0) reage de maneira diferente de acordo com cada dispositivo e cada aplicativo que você utilize para fazer o preview. Então temos: Desktop - Para visualizar no desktop você pode utilizar o Adobe Digital Edition, um aplicativo gratuíto da própria Adobe, ele funciona em Mac e Windows, mas deixa a desejar quanto a qualidade de visualização deixando vários itens de fora. Saraiva Digital Edition e Iba iOS - Para o sistema da Apple temso o iBooks, um ótimo visualizador de EPUB 2.0 e 3.0 e 3.0 Fixo tanto em iPad, iPod e iPhone. Permite ter uma visualização bem profissional com todos elementos. Android - Para o sistema Google podemos usar o Aldiko, entre muitos outrso, é um bom leitor de EPUBs permitindo configurações extras, verifique a versão do Android que você tem instalado se for as mais antigas o arquivo pode não ser visualizado. Amazon - Para poder ver o EPUB em seu Reader Kindle é preciso realizar uma conversão para o modelo de livro digital da Amazon. A Amazon permite por plugin ou em sua ferramenta de conversão transformar EPUB em Mobi seu formato público. A Amazon ainda possue o Formato KF8 para livros com layout fixo. Para visualizar no Amazon Kindle Fire o Tablet da Amazon você pode usar o Aldiko como no Android. Barnes & noble - Leitor Nook Reader Kobo Reader - Leitor da Livraria Cultura Bookviser - Leitor de EPUB para Windows Phone.


Ferramentas FOLIO.

O formato FOLIO permite a conversão de arquivos .indd em aplicativos para AppStore, Google Play e Amazon. A partir da instalação do Plugin Folio Producer e de uma conta no Portal Digital Publishing e do APP DPS Builder, você pode criar um fluxo on line de produção de catálogos, portfólios, revistas , jornais e livros do InDesign até as Stores. As principais ferramentas para produzir FOLIO são: Plugin Folio Producer; Painel Folio Overlays; Painle Folio Builder; Painel Media; Painel Object States; Comando Insert HTML (HTML Snippets), Painel Liquid Layout, Content Collector/Place e comando Create Alternate Layout. Devido ao grande número de Tablets e Smartphones no mercado a produção de arquivos FOLIO se torna uma trabalho bastante repetitivo, porém as novas ferramentas permitem que você acelere a produção criando layouts autmáticos e com conteúdo linkado para que as mudanças ao longo do projeto sejam feitas em um único arquivo e repassadas automáticamente aos outros. Outra grande vantagem é a utilização de pastas para separar os estilos (character e paragraph) permitindo que se altere as propriedades de estilo sem que altere em todas as páginas e arquivos linkados, assim problemas como tamanho de fontes podem ser controlados para cada layout separadamente. É importante que o planejamento inicial defina o número de Tablets e Smartphones que farão parte do fluxo para otimizar a produção.


1. Workspace Digital Publishing. Este workspace traz todos os painéis que podem ser utilizados pelo formato Folio, tirando os Paineis Animation e Timing, pois atualmente não é possível inserir as animações feitas no próprio InDesign em um arquivo Folio, para isso deve-se utilizar algum software de animação em HTML5 como é o caso do Adobe Edge Animate.


2. Painéis PDF Interactive e SWF. Os paíneis destinados a produção de PDF Interactive ( Menos o Page Transition e Formulários) funcionam na exportação Folio. O painel Object states tem muita utilidade devido sua capacidade de empilhamento de conteúdo e de inserção de conteúdo (Paste into dentro do State).


3. Painel Folio Overlays. O Painel Folio Overlays possui 8 tipos de interatividades. Hiperlinks - Utilizado para inserção links externos e internos. Slideshow - Permite criar slideshow sensível ao toque ou automático Image Sequence - Permite a criação de animações frame a frame com interação para imagens 2D e 3D. Audio & video - Permite a inserção Audio (MP3) e Videos (Mp4). Panorama - Permite a importação de imagens 360 graus com interatividade Web Content - Permite a inserção de URL e de HTML Nativos para ampliação das possibilidades de Interatividade Pan & Zoom - Permite aumentar/diminuir arrastar/soltar uma imagem dentro da área de um frame. Scrollable Frame - Permite criar áreas de deslize de conteúdo de texto ou imagens com inserção das outras interatividades dentro.


4. Comando Insert HTML. O comando insert HTML permite incorporar um código HTML que já esteja hospedado na internet para dentor do Folio (sua visualização vai requerer a conexão do Device em wi-fi ou Banda) Geralmente códigos como do youtube e Google Maps que venham dentro da Tag iframe. Sua inserção é muito simples, basta copiar o código fornecido pelo serviço web e colálo dentro do comando Insert HTML> e clicar em OK. ao fazer o preview do FOlio você verá o item web dentro de sua página Folio com possibilidade de interação.


5. Painel Folio Builder e Folio Preview. O Painel Folio Builder é o painel que converte um arquivo .indd para um arquivo Folio, temporariamente se você desejar ele guarda o arquivo em seu computador mas para que ele possa ser publicado é preciso que voce entre com seu login e senha Adobe para que voce acesse o servidor Adobe onde ele deve ficar armazenado. Para cada formato de Device você deve criar um Folio no Painel Folio Builder eles podem ter o mesmo nome porém sua dimensão será colocada para diferenciar cada Folio feito para cada tipo de sistema ou device.


6. Ferramenta Page e Painel Liquid Layout. A ferramenta Page e o Painel Liquid Layout são de extrema importância na produção de Folios, pois permite a rápida adaptação do layout para os diversos formatos de Devices. Também mantém a possibilidade de todo conteúdo estar linkado entre si facilitando quando a troca de conteúdo é realizada, basta a troca de conteúdo no primeiro layout para a atuliazação en todos os outros.


7. Ferramenta Page - Comando Create Alternate Layout. O comando Create Alternate Layout é que permite a criação de um novo layout em outro formato sem afetar o layout anterior, ele utiliza todo setup criado na ferramenta liquid layout, permite a linkagem de conteúdo, a cópia de estilos em pastas separadas e o uso de Smart Text reflow se sua caixas de testos foram criadas com o Primary Text Frame.


8. Ferramenta Content Collector/Place. A ferramenta Content Collector permite que você copie uma diagramação ou objeto por objeto de um arquivo .indd para outro arquivo .indd mantendo todas as características, pode também copiar de uma página para outra página dentro do mesmo arquivo .indd. A Content Placer permite que você cole um objeto ou uma diagramação em outra página ou arquivo com a opção de manter Links e Estilos.


Workflow FOLIO. 1.Portal DPS

2.Plugin

3.InDesign

4.Folio Builder

5. Portal DPS

A seguir os passos que devem ser realizados para a produção e publicação de um FOLIO no servidor Adobe: 1 - Criar a conta no portal www.digitalpublishing.acrobat.com. 2 - Baixar o Plugin Folio Producer de acordo com sua versão do ID no próprio portal Digital Publishing. 3 - Baixar o DPS App Builder para a construção de aplicativos (instalação só em MAC). 4 - Instalar o Plugin e o DPS App Builder. 5 - Abrir o Indesign selecionar o Workspace>Digital Publishing e verificar se há os painéis Folio Overlays e Folio Builder. 6 - Criar um documento .indd com intent Digital Publishing para cada seção da revista (Exemplo: Capa.indd; Editorial.indd; Materia.indd; e etc) 7 - Definir o layout estático da página e inserir interatividade com o painel Folio Overlays. 8 - Aplicar a Ferramenta de Liquid Layout e Alternate Layout. 9 - Fazer o Login no Painel Folio Builder. 10 - Criar um new Folio no Painel Folio Builder. 11 - Criar um Article para cada seção através do Painel Folio Builder (lembre que a versão Horizontal e Vertical da mesma seção vão dentro do mesmo artigo). 12 - Quando criar um Article a partir de um arquivo qu contenha vários layouts de diferentes medidas certifique que no campo Horizontal e Vertical do painel Article encontram-se os layouts correspondentes as medidas do Folio criado. 13- Fazer Login no portal DPS. 14 - Organizar e inserir metadados no Folio pelo link Folio Organizer. 15 - Publicar o Folio no Servidor Adobe.


16 - Exportar em formato .Zip para seu computador. 17 - Fazer login no DPS APP Builder. 18 - Criar um novo APP, incluido os ícones e splash de abertura do APP. 19 - Incluir o arquivo .zip exportado do portal DPS. 20 - Inserir os certificados de desenvolvimento e distribuição (adquiridos através da conta Apple ou Android). 21 - Clicar em Submit e aguardar a aprovação das Stores (pode levar de 3 a 7 dias úteis).


1. Determinando o Tipo e Formato. Inicie a produção do Folio a partir de um formato escolhido, o formato do iPad 1 e 2 768 x 1024 px por exemplo. Lembre-se de deixar uma área de margem por volta de 40 px para o Topo e o Bottom da página pois é a área onde aparecem os menus da ferramenta Adobe Viewer, para as laterais não há necessidade. No caso de utilização de um Grid System para Tablets tem sido utilizado a divisão em 8 colunas pois permite divisões boas para o toque e orgtanização do layout


1. Layout Estático. Como em todos outros porjetos interativos inicie a construção do layout a partir de uma concepção estática da página e após esta etapa inicie a inserção de interatividade. Deixe para produzir os layouts alternativos após a inserção de interatividade facilitando o fluxo de trabalho, e lembre-se que o primeiro layout se torna o layout-pai par todos os links de conteúdo dos outrso layouts.


3. Inserindo Interatividade com Painel Folio Overlays. O Painel Folio Overlays possui 8 formas de inserir interatividade em um arquivo .indd que se transformará em um Folio. Todas estas interatividades possuem a explicação de uso no próprio painel. Temos: Hiperlinks, Image Sequence, Slideshow, Audio e Video, Panorama, Pan & Zoom, Web Content e Scrollable Frames. A interatividade Panorama permite que se crie imagens 360 para serem acessadas pelo toque, para a utilização do efeito é necessário que se tenha uma foto previamente construída em um software de criação de fotos 360 graus. A interatividade Web Content permite que se insira desde um endereço URL até um HTML nativo usando CSS e Javascript, com o avanço do HTML5 é possível via Web Content aumentar consideravelmente as possibilidades de interações, é o caso de todas novas ferramentas Adobe denominadas Edge Tools que permite a pré-produação de animações, layouts resposivos e ações javascript que aumentam consideravelmente as possibilidades criativas.


4. Criando formatos variados com Liquid Layout. A ferramenta Page Tool e o Painel Liquid Layout permite a adaptação do layout para sua versão horizonta/vertical e sua versão para o tamanho de outros dispositivos. Você tem quatro formas de auxilio para adaptação: Scale, Recenter, Guide Based e Object Based, todas estas formas auxiliam para a adaptação sendo que a Object Based é a que permite um maior grau de adaptação devido a possibilidade de setup de objeto por objeto do layout, tanto para a fixação de sua posição quanto ao seu redimensionamento.


5. Preview no Desktop e em Dispositivo conectado. Você pode visualizar suas produções em Folio no próprio computador, basta ir em File>Folio Preview ou no próprio painel Overlay Creator clicar no botão localizado no rodapé do painel> Preview. Se você conectar via cabo um Tablet ou um Mobile surge no preview do painel Overlay Creator o nome do device conectado permitido que se faça uma visualização do Folio direto no DEvice sem a necessidade de envia-lo pelo Painel Folio Builder para o Servidor Adobe, agilizando a etapa de produção.


6. Atualização de conteúdo e split view. No Painel Pages os formatos de arquivos ficam divididos em colunas, cada coluna possue o nome dado ao formato e uma seta preta, nesta seta preta você tem o comando Create Alternate Layout que você utiliza para gerar os layouts para outros Devices, também temos o comando Split View que permite dividir a tela do InDesign em duas para que você possa ver dois layouts ao mesmo tempo e assim modificar tanto conte[udo quanto estilos e formatações e analisar em tempo real as modificações.


Conversão de INDD para FOLIO.

O Folio é um pré-formato, ou seja, ele é um formato intermediario entre o fromato .indd do InDesign para os formatos finais aplicativos nativos. Aplicativos nativos são os aplicativos feitos especificamente para uma AppStore com sua própria linguagem, por exemplo, o APP da Apple é construido com alinguagem objective C e o formato fina lde aplicativo tem a extensão .ipa, no caso do Android seu SDK é baseado em Java e a extensão final de seus aplicativos é .apk e assim para cada sistema operacional que produz aplicativos. O plugin que a Adobe fornece para ser instalado no InDesign permite que você converta arquivos .indd para arquivos .folio essa conversão ocorre através do painel Folio Builder


Finalização e Fechamento FOLIO.

Como o formato Folio depende do Painel Folio Builder ele não faz parte da lista de formatos no comando File>Export do InDesign, para sua finalização é necessário que se utilize o painel Folio Builder. Você pode usar o painel Folio Builder de duas maneiras, a primeira é simplesmente abrí-lo clicar no ícone>New Folio colocar o nome e as medidas do Folio e quando clicar em Ok, o Folio é criado localmente (ao seu lado fica um icone de uma Torre de computador Desktop) o que indica que ele ainda não foi transferido para o servidor DPS da Adobe. A segunda forma de exportar um Folio é primeiramente entrando com seu Login e Senha Adobe no Painle Folio Builder e em seguida ir ao botão>New Folio, dessa forma você estrea criando um Folio que automaticamente será enviado para o portal DPS (Utilize mesmo login e senha no endereço www.digitalpublishing.acrobat.com, clique no painel organizer e veja seu Folio na lista do servidor).


Algumas funções realtivas a exportaçõ de Folio podem ser feitas tanto no painel Folio Builder quanto no portal DPS, é o caso da nomeação do Folio, upload das imagens das capas (Vertical e Horizontal) e etc. É importante notar ao criar uma exportação Folio que é possível indicar qual versão você está utilizando, atualmente você pode usar da versão v20 até a versão v25 (Para saber maisa diferença entre cada uma baixe o APP DPS Tips na Itunes Store ou Google Play e você tem acesso a toda a explicação de cada versão já desenvolvida pela Adobe). A etapa seguinte da criação do Folio consiste em criar o Articles que irão dentro do Folio. Os Articles são as seções que irão alimantar o Folio. Para cada seção de sua Revista Digital é preciso criar um Article diferente contendo as versões Verticais e Horizontais criadas no InDesign com os arquivos .indd. O Sistema DPS permite que você crie Folios contendo apenas arquivos Verticais em cada seção, Folios contendo apenas arquivos Horizontais de cada seção e Folios contendo ambas as versões. No InDesign CS6 é possivel criar um arquivo .indd para cada seção da revista e dentro deste arquivo conter a versão horizontal e vertical de vários formatos de devices (iPad, iPhone,Android e etc).


Isto é possível devido a ferramenta de Liquid Layput e o comando Create Alternate Layout demonstrado anteriormente em nossa apostila. Desta forma os Folios criados no InDesign CS6 são muito mais dinâmicos pois permitem que se concetrem em um mesmo arquivo .indd todo conteúdo linkado dos diversos formatos permitindo que se faça alterações de conte¨do e formato com muita agilidade.


Conversão FOLIO para APP.

Para realizar a conversão de FOLIO para APP (ios ou Android) é preciso instalar o DPS App Builder (disponivel no portal digital publishing apenas para MAC). Com O DPS Buidler você cria o nome do APP, escolhe a plataforma, cria os icones, incorpora o .zip exportado do portal DPS e os certificados de desenvolvedor da Apple ou Google.


Abaixo temos as telas que devem ser preenchidas para a conversão de Folio em App.


Neste painel do DPS App Builder é que você vai acompanhar a aprovação do App pelas Stores. Uma vez que estiver com o sinal verde aprovado (pode levar de 3 a 7 dias úteis) seu App já estará a venda na Store.


05

Fluxo Crossmedia

Do Papel ao Tablet.

Depois de adquirir o conhecimento e definições de cada exportação do InDesign, você está apto para construir um fluxo Crossmedia. Um fluxo Crossmedia pode ser construído de qualquer Media para outra Mwedia, não há necessidade de que se inicie em um arquivo para exportação Print e depois vai em sequência até finalizar no Folio, Esta abordagem é feita aqui simplesmente pela ordem cronológica dos tipos de mídia que foram surgindo ao longo do tempo. O passo inicial mais importante é establecer um bom planejamento levando em consideração a quantidade de conteúdo e o número de mídias que serão publicadas.

Workflow Crossmedia. 1. Preparar o Conteúdo

2. Inserir o Conteúdo

T

3. Transportar o Conteúdo

4. Adaptar o Conteúdo T

T T

T

T

T

T T


5 Exportar os Formatos

Preparando o Conteúdo.

Defina uma pasta (Exemplo: Crossmedia_prj1), uma pasta de concentração de conteúdo é igualmente útil. (Exemplo: DataServer>Pasta Texto>PastaImagem>PastaAudio>Pasta Video>Pasta Códigos). É importante saber que a importação XML do InDesign suporta apenas Texto e Imagem e no caso das imagens ele apenas guradar um link que direciona para uma pasta externa, portanto , na prática o XML acaba sendo extramamente útil para a inserção de Texto. Contúdos de Imagens, Audio, Video e Códigos é melhor inserido e transportado pelos comandos e painéis mostrados no próximo tópico.

Inserindo o Conteúdo.

A inserção de conteúdo no InDesign pode ser feita através de: Comando Place - O Comando Place (File>Place) é o modo mais antigo e simples de inserir conteúdo, sua limitação é a impossibilidade de inserir Audio e Video. Com a opção>Show import options é possível acessar um painel de Setup antes que a inserção ocorra. Outro fator importante é que o comando Place permite ao inserir um arquivo de Texto utilizar a tecla Shift (manter apertada durante a inserção) para que o InDesign calcule automáticamente o número de páginas que devem ser abertas para que o texto inserido seja totalmente colocado sem ocorrer Overset Text. Comando Insert XML - O comando insert XML encontra-se em dois lugares, na linha de comando File>Insert XML e no Painel Structure (View>Structure>Show Structure). Apesar de poder inserir por este método Texto e Imagem, na prática se verifica que é mais eficiente para inserçnão de Texto. Uma vez importando um conteúdo por este método ele se torna vísivel no Painel Structure, onde e possível, além de analisar o conteúdo inserido, organizá-lo de acordo com a demanda de seu Layout. Outro ponto importante e que permite um maior nível de automação é previamente atarvés do Painel Tags (Window>Utilities>Tags) aplicar o comando>Load Tags e inserir primeiro no InDesign as Tags XML do documento, fazendo isso você pode criar todo Layout do arquivo atrelado as Tags inseridas e quando você fizer a inserção do arquivo XML (Pelo Insert XML) o conteúdo automáticamente preencherá o Layout já Tagueado.


Painel Data Merge - O Painel Data Merge (Window>Utilities>Data Merge) permite inserir Texto e Imagem a partir de um arquivo .CSV, lembre-se que este tipo de inserção de conteúdo é essencial para a inserção e criação de layouts com estrutura semelhante em todas as páginas e que é através do comando> Create Merged Document (No painel Data Merge) que você define o Layout, portanto é uma importação limitada. Painel Script - Com certa semelhança à importação Data Merge, a inserção de conteúdo pelo Painel Script também é limitada a função que foi determinada para seu código, basicamente também cria/importa Texto e Imagem. É possível também através de programação criar Scripts personalizados que automatizem tarefas específicas em seu fluxo. Atualmente a Adobe disponibiliza o download e a instalação do Painel Adobe Exchange que permite inserir novos Scripts diretamente do servidor Adobe sem a necessidade de procurá-los pela Internet. Painel Media - Este painel foi introduzido na versão CS5 extamente para suprir a impossibilidade de importar Audio e Video pelos processos listados anteriormente. É através deste painel que é possível inserir Audio, Video, SWF e FLV a partir de sua máquina ou de um local na Web. A Adobe indica os formatos MP3 e MP4(Codec H264) para inserção de conteúdo. O painel trabalha com algumas opções, tanto para Audio e Video, de interação com o conteúdo inserido. Os controles e Skins de controles sano baseados em arquivos Flash, o que permite com um pouco de conhecimento alterar seu visual. Os Audio e Videos que serão inseridos em arquivos FOLIO também são importados por este painel, porém alguns Setups de configuração serão realizados pelo Painel Folio overlays. Painel Folio Overlays - Apesar de ser um Painel exclusivo para a exportação FOLIO, alguns de seus componentes, como Web Content, Panorama e Image Sequence, permitem importar conteúdo que não podem ser importados por nenhum método anterior. A diferença desta opção de importação é que você seleciona a Pasta que contém o conteúdo para que ele seja importado em lote.


Tranposrtando o Conteúdo.

Uma vez que você compreendeu e determinou qual método você vai inserir o conteúdo, o próximo passo é iniciar seu transporte entre páginas e ou entre arquivos, para isso contamos com as ferramentas Content Collector e Content Placer. O processo utiliza uma área de transição (Content Conveyor) , que permite a cópia temporária de conteúdo (lembre-se que ao fechar o arquivo e fechar o InDesign os itens armazenados no Content Conveyor desaparecem). Existem diversas formas de você copiar o conteúdo (conforme foi demostrado no capítulo anterior sobre ferramentas) o importante é lembrar, no caso de um fluxo Crossmedia, que os conteúdos copiados e transportados devem estar com a opção Create Link selecionada para que, desta forma, seja possível criar um fluxo de páginas e ou arquivos ligados ao arquivo-pai (o.indd onde você iniciou o Fluxo Crossmedia), onde uma vez este arquivo-pai sendo alterado, altere todos os arquivos-filho do fluxo.


Adaptando o Conteúdo.

Nesta etapa o Fluxo Crossmedia já está produzido, porém algumas mídias, como é o caso do FOLIO, precisam de diferentes layouts para atander a diferentes plataformas e formatos mobile, isso não quer dizer que as ferramentas para adaptação de layout sejam utilizadas apenas para saídas digitais. Através da ferramenta Page Size, do Painel Liquid Layout e do comando Create Alternate Layout é possível agilizar a produção de múltiplos layouts. É importante lembrar que o procedimento de criação de múltiplos layouts é idêntico independente da exportação que for escolhida, porém o resultado em cada exportação tem efeitos diferenciados. Assim temos a seguinte definição: Exportação PDF - Tanto para o formato Print e Interactive o Liquid Layout possibilita realizar vários layouts em um mesmo arquivo e exportar em PDF separados diminuindo o números de arquivos .indd que você terá que gerenciar. Exportação SWF e FLA - Como o próprio InDesign permite exportar nestes formatos e também reimportar em outros documentos .indd, o Liquid Layout aqui, faria um bom papel de adaptação de uma mesma animação para diferentes saídas, neste caso você usa um documento .indd para guardar diversos formatos da mesma animação para usos em arquivos dieferentes. Exportação HTML- Esta exportação não sofre grandes mudanças com a ferramenta Liquid Layout, pois o formato da exportação HTML é definido por um ou mais arquivos CSS incorporados na exportação. Exportação EPUB - O formato EPUB é baseado em XHTML, e que também é afetado por arquivos CSS incorporados, porém como o livro físico possui vários formatos o EPUB também possui, na verdade por se tratar de um arquivo de fluxo contínuo, sua formatação é realizada pelo aplicativo e pelo usuário final, porém ao se utilizar tamanhos diferentes em seus arquivos .indd com Liquid Layout o formato da Capa (se utilizado na exportação a opção de rasterização da primeira página) será de acordo com as medidas em pixel escolhidas para o arquivo .indd de produção. Exportação FOLIO - Sem dúvida esta exportação usa todos os recursos atribuídos ao Painel Liquid Layout, devido ao número extenso de sistemas operacionais mobile e o número de dispositivos (Tablets e Mobiles) com tamanhos de telas diferentes, é quase que indispensável o uso do Painel Liquid Layout.


Exportando Conteúdo Crossmedia.

Com todo Fluxo Crossmedia linkado e com todos múltiplos layouts criados, no mesmo arquivo e ou vários arquivos, chegamos a etapa final, realizar a exportação para cada formato que o InDesign exporta. As etapas listadas a seguir se diferenciam para cada tipo de exportação e provavelmente envolvem outros profissionais e empresas até a conclusão do produto. Uma ferramenta comun que deve sempre ser lembrada nesta etapa é o Package (File>Package), não importa a saída que você vai gerar o Package é a ferramenta que permite reunir todos arquivos (inclusive Audio e Video) para uma pasta onde você determina seu local de salvamento e desta forma guardar cada arquivo .indd pertencente ao fluxo Crossmedia criado, portanto SEMPRE faça o Package de seus arquivos e mantenha seus projetos organizados para poder atender uma demanda de formatos e um maior números de clientes diferentes.


Extras

Livros.

Elementos do Estilo Tipográfico O Essencial do Design O Essencial da Cor Grid Construção e Desconstrução O que é e o que nunca foi Design Gráfico InDesign CS6

Revistas.

Publish Desktop W InDesign Magazine Computer Arts

Sites.

Chocola Design Behance Lynda

Sites Adobe.

Creative Cloud Acrobat DPS Bussinnes Catalyst Edge Tools Adobe TV InDesign User Group


06

Empresas de DAM. WoodWing Epyx (WoodWing Brasil) 247id

Plugins DPS. Digital Publishing App Studio Aquafadas Mag +

Stores.

AppStore GooglePlay Windows Phone Market Blackberry Firefox MarketPlace Amazon Kobo/Livraria Cultura Livraria Saraiva Gato Sabido Iba


InDesign Publica iPadAndroid

Recommend Documents