Como produzir ebooks interativos com Adobe InDesign

Como Produzir eBooks Interativos – Dicas práticas

A forma de como produzir eBooks interativos mudou no ano de 2014, após a atualização do InDesign CC 2014.

Todos os recursos de interatividade ficaram compatíveis com formato EPUB 3 de layout fixo: hyperlinks, âncoras, marcadores, botões, estados de objeto, vídeo, áudio e animações. Tudo direto do InDesign.

A versão de Layout Fixo se diferencia, principalmente, pelo suporte aos recursos interativos, além é claro, por manter a posição dos elementos da página.

Atualmente contamos com duas variações do EPUB – Layout Fluido e Layout Fixo. Ambos disponíveis no painel de exportação do InDesign.

A interatividade no ebook pode ocorrer com ou sem a interação do leitor. Um exemplo típico são os objetos animados, que podem ter como evento, que dispara a animação, um botão ou o ato de carregar da página.

No painel Animação podemos controlar qual evento irá ativar a animação – carregar a página, botão, clique na página, entre outros.

Considerando como premissa de projeto a utilização de algum tipo de interatividade temos duas opções de formatos para escolher: EPUB 3 e HTML5.

Se o ponto de virada do formato EPUB de layout fixo ocorreu em 2014, com a atualização do InDesign – conforme citei no início do artigo – para o formato HTML5 ocorreu um pouco antes.

Em 2012, foi lançado o plugin IN5, que possibilita a exportação direta em HTML5 a partir do InDesign, mantendo todo layout da página e incluindo uma variedade de recursos interativos, do InDesign e do próprio plugin IN5. Saiba mais assistindo esta playlist – Método IN5.

Interatividade: produção x distribuição

Se você já tentou produzir ebook interativo a partir do InDesign deve ter percebido que há um vazio entre os recursos disponíveis nas ferramentas de produção e o suporte por parte dos softwares de leitura.

Acredito que já tenha ouvido frases como “ebook interativo só funciona na Apple”; “É preciso fazer um app para ter um ebook interativo”, entre outras.

Bem, eu tenho duas boas notícias para você 🙂

A primeira é que há sim uma forma de distribuir ebooks interativos além da Apple, incluindo as plataformas Windows e Android, em desktop e mobile, respectivamente.

Já a segunda é que para saber mais sobre como aplicar recursos interativos em diferentes plataformas você precisa assistir o webinar eBook Interativo: o certo e o errado.

Neste webinar especial você irá entender como combinar o formato CERTO, com a plataforma CERTA para não mais ERRAR na produção e distribuição de livros digitais interativos em layout fixo.

Confira a lista de recursos que serão apresentados durante o webinar

Suporte a fontesBotão
em texto
ÁudioÂncoraAnimação
(botão)
Rotação da tela
(vertical / horizontal
Sumário
interno
Galeria de fotosVídeoBotão em imagemConteúdo em scrollPágina simples e dupla
Sumário ExternoEPUB-TypeHyperlinkAnimação (auto-play)Leitura do Texto (Read Aloud)Exibir e ocultar botões

Dicas práticas para ebooks interativos com InDesign

Neste artigo vou te ensinar dois recursos práticos para potencializar a experiência de leitura em ebooks interativos produzidos com Adobe InDesign, nos formatos EPUB 3 e HTML5 (Método IN5).

Vamos começar!

EPUB 3 FXL

Também conhecido pela abreviação de EPUB 3 FXL – Fixed Layout, tem como principal aplicação publicações com foco no layout e interatividade.

O ponto forte do EPUB é ser um formato aberto, o que permite maior autonomia tanto na produção, quanto na distribuição, utilizando diferentes canais, inclusive pelo próprio site da editora.

O outro lado da moeda está nos ecossistemas fechados de plataformas como a Apple e Amazon. Caso uma editora decida utilizar essas plataformas ficará refém dos seus recursos e limitações.

Acompanhe no tutorial a seguir sobre como aplicar conteúdo em scroll, em texto e imagem, direto pelo InDesign.

Primeiro, instale o plugin Universal Scrolling Frames, para ativar esse recurso no InDesign

Conteúdo em scroll no EPUB 3 FXL

Scrollable frame (quadro de rolagem) permite exibir texto e imagem através de uma máscara.

Muito útil para exibir uma maior quantidade de informação sem sobrecarregar o layout com informações.

A opção padrão deste recurso é ajustar o canto superior esquerdo do caixa de conteúdo com o caixa da máscara, como ponto inicial.

_1. Crie duas caixas: uma será o conteúdo com texto, caso utilize imagens de preferência para ancorar as imagens dentro da caixa de texto e a segunda caixa será a máscara.

Elementos necessários para fazer um scroll – caixas de conteúdo (texto e/ou imagem) e da máscara.

_2. A caixa de conteúdo deverá ser inserida dentro da máscara pelo comando Edit > Paste Into (Editar > Colar em)

Utilize o comando Editar > Colar em para aplicar o conteúdo dentro da máscara.

_3. Tenha cuidado em manter a largura da caixa da máscara, pelo menos 6 pixels maior que o conteúdo, essa é área reservada para exibir o scroll na vertical.

_4. Caso utilize como conteúdo mais que uma caixa de texto ou imagem, esses deverão ser agrupados para assim habilitar o comando Paste Into / Colar em.

_5. Para aplicar o recurso de scroll, já com plugin instalado, acesso o menu Window > Universal Scrolling Frames.

Após instalado o plugin irá adicionar uma nova opção no menu Janela.

_6. Selecione a caixa da máscara (não o conteúdo), e escolha a direção do scroll (vertical, horizontal) e se deseja exibir a indicação de scroll. Marque Hide para ocultar a barra de scroll.

Configure o scroll conforme o layout.

O diferencial do EPUB 3 FXL está na facilidade de produção, direto no InDesign, e potencial interativo, incluindo multimídia, galeria de imagens, pop-ups, botões e animações.

Contudo, permite a produção de apenas um formato de documento, 768 x 1024px, por exemplo.

O que restringe a experiência de leitura em telas menores. Se aproximando do PDF nesse aspecto, pois a página irá reduzir ou ampliar conforme o tamanho do dispositivo, smartphone ou tablet, respectivamente.

A próxima dica deste artigo irá te ensinar como contornar essa limitação do EPUB 3 FXL combinando o Alternate Layout, do InDesign, com plugin IN5 para produção de páginas com formato otimizado para desktop e mobile. Continue a leitura para aprender esse recurso!

HTML 5 – Método IN5

Por trás de tudo que vemos na web está o HTML5, mas não pense que essa linguagem de marcação de texto faz tudo sozinha.

Sem a participação do Cascading Style Sheets (CSS) e do JavaScript nossa vida online seria monocromática e estática.

Ebooks interativos produzidos em HTML5 tem características bem distintas do formato EPUB 3 FXL, em especial, quanto a distribuição.

Não há lojas, nem plataformas proprietárias, o acesso acontece direto no navegador, sendo essencialmente online.

Contudo, a partir do HTML5 é possível embarcar todo conteúdo em formato de app permitindo o acesso offline do mesmo.

Se você quer entender os benefícios e desafios de utilizar o HTML5 para ebooks interativos te convido a assistir o webinar eBook Interativo: o certo e o errado.

A seguir, acompanhe o tutorial, passo a passo, para aplicar o recurso de Alternate Layout no InDesign, para assim criar publicações com formato otimizado para desktop e mobile.

Confira nesta LIVE mais detalhes sobre esse poderoso recurso.

Alternate Layout

Há muito tempo o InDesign já permite criar múltiplos formatos no mesmo documento e dividir uma publicação em seções. O recurso de Alternate Layout é um upgrade nessas funções.

Disponível através do painel Páginas, o primeiro passo é ativar a exibição das páginas por Alternate Layout.

Ative a exibição do modo Layout Alternativo pelo painel Páginas.

Sem dúvidas, esse recurso é uma excelente opção na produção de layouts com tamanhos variados, não apenas para ebooks, mas atende, também, a produção de campanhas para mídia impressa, para anúncios, cartazes, entre outros.

Concordo que se trata de uma mudança radical no fluxo de produção e que os profissionais deverão se adaptar já que, em um primeiro momento, lidar com diferentes formatos em um mesmo documento pode parecer um pouco confuso.

Por isso, o painel Páginas foi adaptado para exibir de forma organizada tanta informação. Siga as etapas listadas neste tutorial e aprenda a tirar o máximo desse recurso fantástico.

Para criar um layout Alternativo:

_1. Escolha no menu Layout > Criar Layout Alternativo ou pelo submenu do painel Página a mesma opção está disponível.

Adicione um layout alternativo ao projeto direto pelo painel Páginas.

_2. No quadro de Criar Layout Alternativo defina o formato do novo layout. Para desktop recomendo o formato 1024×768, na horizontal, para melhor aproveitamento da tela. Já para mobile o formato inicial da página pode ser 414×735, com a proporção 16:9 atende a maioria dos celulares atualmente.

Formatos típicos para mobile e desktop.

_3. Ao criar um alternate layout todos os estilos contidos no primeiro layout foram repassados para o segundo, em um grupo a parte, o que permite uma liberdade de ajuste entre os layouts.

_4. Para cada layout criado é adicionada uma nova página mestra para permitir ajustes específicos em cada layout.

_5. É criado um vínculo entre os textos do primeiro com segundo layout. Sendo assim, as alterações de texto realizados no primeiro layout serão automaticamente aplicadas no segundo. E o melhor, sem mudar a aparência do texto em cada layout.

Importante: Para ser compatível com o plugin do IN5 o alternate layout precisa ter formatos diferentes, mas o mesmo número de páginas. Fica a dica!


Chegamos ao fim do nosso artigo com dicas práticas, desejo que este conteúdo te ajude a produzir mais e melhor ebook interativos.

COMPARTILHAR:
, , , ,

Felipe Santos

Eu ajudo designers, editores, autores e entusiastas sobre publicações digitais (EPUB 3, HTML5 e App) a produzir e publicar conteúdo unindo técnica e design, mesmo para quem não sabe nada de programação. Vem comigo, colocar sua publicação para o Mundo :)

Deixe um comentário