ePub: um guia básico para o design de livros digitais

Então gente, estava eu me preparando para um freela, quando me deparei com um universo “meio novo” pra mim: ePub.

Na verdade, o começo da história é que eu queria poder oferecer algo além do PDF “basicão”, e queria ver o que mais eu poderia fazer para melhorar a oferta, e a navegação de quem leria esse conteúdo em dispositivos móveis. Comecei a pesquisar sobre e aqui nesse post estão as minhas descobertas.

Pra me ajudar com isso, depois de pesquisar a respeito e ainda estar cheia de dúvidas, contei com a ajuda mais que especial do Bruno Rodrigues, da Barbohouse! O Bruno já trabalha há um tempinho com livros digitais e inclusive o mestrado dele foi sobre esse tema (além de já ter apresentado artigos em eventos, etc, etc – em resumo, o cara manja). Eis que tivemos a ideia de escrever esse post juntos, pra ajudar outras pessoas que também possam estar com as mesmas dúvidas. Bora lá?

O que são livros digitais

Os livros digitais, também chamados de eBooks (eletronic books), são livros que foram concebidos para serem lidos no meio digital, em tablets, computadores, smartphones e e-readers. Eles podem ser a adaptação de uma obra impressa ou ser nativo digital.

Existem muitos formatos de eBooks e as maneiras para comprar ou baixar também são variadas (você pode saber mais sobre o assunto aqui). Navegando na internet, é muito comum você achar conteúdos em PDF ou em ePub.

PDF e ePUB

O PDF seria a forma mais rápida para você baixar e ler um conteúdo no formato digital, contudo, ele não representa todo o potencial dos eBooks. Isso porque o PDF é pensado como um arquivo pronto para ser impresso, ou seja, a princípio ele não é um formato planejado com interação. Até existem os PDFs interativos, que permitem uma interação linear com links e hiperlinks; mesmo assim, no quesito “responsividade”, ele fica aquém do ePub.

Sabemos que um produto digital é responsivo quando, em resumo, seu conteúdo é ajustado automaticamente em qualquer largura de tela onde for aberto. Esse ajuste pode ser o deslocamento de objetos de um lugar para outro, a mudança do estilo de textos, a troca de comportamento de algumas interações, etc. É importante dizer que um design responsivo é diferente de um design adaptativo. Neste último, existem duas ou mais versões do mesmo produto que foram criadas de maneira diferente, uma para cada tipo de tela. Já o responsivo é um produto que se adapta a qualquer tela.

E o que isso tem a ver com os eBooks?

O ePub é um formato de eBook que funciona em qualquer dispositivo e seu conteúdo “se molda” na tela. Existem várias opções de leitores de ePub que podem ser facilmente baixados, tanto pra pc, quanto para dispositivos móveis.

Esse formato foi criado por uma organização chamada IDPF  (International Digital Publishing Forum) com objetivo de popularizar um novo formato de leitura digital. Você pode saber tudo sobre o ePub no site oficial deles (infelizmente apenas em inglês).

Outros benefícios do ePub é que, além de adaptar o conteúdo, na versão 3 você pode inserir arquivos de áudio, vídeo, animações e interações de toque (como jogos)! 

Vale citar, também, que é possível criar um arquivo ePub com layout fixo, se você quiser ter total controle do design de sua publicação.

Em síntese, com essa tabela, fica mais fácil de entender:

epub

Fonte: http://www.barbohouse.com.br/publicacao-de-livros-e-ebooks/

Beleza, já vi(mos) que atualmente é mais inteligente apostar em ePub. Certo, mas e agora?

Como criar um ePub?

Existem várias formas de se criar um ePub. Existem conversores de PDF para ePub (como o Calibre), existem programas que exportam os arquivos em ePub (como o Indesign), etc. Porém, nem sempre os resultados são satisfatórios e com qualidade (como na maior parte das coisas geradas automaticamente). Gostei bastante de ter lido essa explicação do Tableless, ePub: Aprenda a criar um livro digital.

No final desse post vamos colocar alguns exemplos de ePubs bem legais para você baixar e desfrutar.

É bem comum de encontrar por aí ebooks e ePubs que são só texto puro, sem imagens, sem diferenciações na diagramação e nada de detalhes. Isso porque nem todo mundo sabe como lidar com as peculiaridades que esse formato de arquivo tem. E confesso que realmente não achei tão simples assim. É meio complexo, na verdade, mas segundo o Bruno, depois que a gente aprende, vê que é tranquilo, hehe.

Resumindo, a melhor opção é configurar as características do seu ePub de forma manual, para que o resultado seja satisfatório e você tenha controle sobre a diagramação. Isso significa que você vai precisar entender um pouco de HTML/CSS e ter paciência.

A opção que eu escolhi, foi criar a diagramação no Indesign, exportar como Epub (flexível), e alterar as características do arquivo no código dele.

Agora a receitinha de bolo:

Ingredientes

Modo de Preparo

  1. Diagrame seu texto no Adobe Indesign. Importante: crie estilo de parágrafos e estilos de caracteres para cada parte do texto, por exemplo, para títulos, subtítulos, parágrafos e, até mesmo, para as imagens. Esses estilos serão as classes do arquivo CSS do seu ePub (falaremos sobre isso a seguir). Não perca muito tempo com alinhamento e separação de páginas, pois isso tudo é ignorado no ePub fluido e devem ser definidos apenas nos estilos.
  2. Depois de diagramar, exporte seu arquivo como .ePub 2 (reflowable). Na hora da exportação ainda é possível dizer para o Indesign separar cada sessão do livro por estilos de parágrafo (geralmente é o estilo que você criou para o título de cada capítulo);
  3. Só exporte como ePUB 3 caso você tenha inserido vídeo, áudio ou animação no seu texto (o Indesign CC 2015 é uma mão na roda para ePub 3);
  4. Abra um descompactador (Winzip, por exemplo), leve seu arquivo .ePub para dentro dele, e depois descompacte. O ePub é composto por duas pastas: META-INF e OEBPS. E um arquivo mimetype. A pasta que nos interessa é a OEBPS, pois nela contém toda a estrutura XHTML e CSS, bem como imagens e tipografias usadas;
  5. Abra os XHTML e o CSS no seu software preferido de edição de texto (mencionamos exemplos anteriormente, caso vc ainda não utilize nenhum) e mande ver na edição do seu arquivo por lá. É tipo como trabalhar em um site, se você manja um pouco de web design será mais fácil. O Indesign te oferece algumas possibilidades de diagramação antes de exportar o ePub, contudo, coisas mais avançadas (como tabelas) são mais simples de serem resolvidas direto no HTML.
  6. O arquivo style.css é o que dá cor e forma para seu texto e nele você encontrará os estilos de caractere e de parágrafo que você criou no InDesign, lembra? Já os XHTML nada mais são do que a estrutura textual onde você encontra seu conteúdo pré-diagramado no InDesign, dividido em tags de títulos e parágrafos;
  7. Faça as modificações estruturais e de estilo que você achar pertinente. Se você criar uma nova página XHTML ou acrescentar uma nova imagem ou fonte, não esqueça de “declará-los” no arquivo content.opf (apenas para epub 3). Se você quer mudar a ordem de apresentação das páginas, faça isso no arquivo toc.ncx, que é como se fosse o sumário do ePub;
  8. Se você terminou suas alterações, agora abra o programa Epubpack. Busque o arquivo mimetype no seu ePub e defina a pasta de destino do epub. Clique em create ePub file.
  9. Pronto, seu arquivo ePub foi compactado e criado novamente!
  10. Após você ter o ePub gerado, você deve validá-lo, ou seja, conferir se o arquivo tem algum tipo de erro que precisa ser corrigido. Você pode fazer isso upando o ePub no site específico para validação da IDPF: http://validator.idpf.org/
  11. Caso tenha algo pra arrumar, faça os ajustes necessários, e caso não tenha, é só correr pro abraço ;)

Se você quiser saber mais sobre o assunto, pode (e deve) acessar o blog da Barbohouse – editora de livros digitais –  e também pode dar uma olhada nos artigos que o Bruno já escreveu sobre o tema. E você também pode conferir o site da International Digital Publishing Forum (IDPF), que foi quem criou esse formato de arquivo.

E como prometido, aqui estão as amostras ePub, que o Bruno cedeu pra gente :D

Um beijo,
e até a próxima!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s