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.
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 fontes | Botão em texto | Áudio | Âncora | Animação (botão) | Rotação da tela (vertical / horizontal |
| Sumário interno | Galeria de fotos | Vídeo | Botão em imagem | Conteúdo em scroll | Página simples e dupla |
| Sumário Externo | EPUB-Type | Hyperlink | Animaçã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.
_2. A caixa de conteúdo deverá ser inserida dentro da máscara pelo comando Edit > Paste Into (Editar > Colar em)
_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.
_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.
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.
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.
_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.
_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.
Deixe um comentário