<
Menu

Tableless



Imagem post: ePub: Aprenda a criar um livro digital

ePub: Aprenda a criar um livro digital

Conheça as vantagens do formato, aprenda a criar um livro do zero, descubra as melhores práticas e porquê você deve correr dos geradores automáticos.

Introdução

Com a crescente popularização de tablets e leitores digitais não há dúvida de que os livros eletrônicos vieram para ficar. O formato ePub vem cada vez mais se consolidando como o padrão definitivo para eBooks. As editoras procuram profissionais especializados, mas, aqui no Brasil não existem muitos que de fato possuem o know-how necessário para desenvolver livros no padrão. Na verdade o que acontece é que as editoras estão alocando o tipo de profissional errado para a função. Um diagramador padrão, acostumado com editoração impressa via softwares visuais como Indesign vai ter problemas ao tentar lidar com linhas de código. Já um desenvolvedor front-end vai se sentir em casa já que criar e editar um livro digital é basicamente lidar com XHTML e folhas de estilo em CSS. Neste artigo vou comentar sobre as vantagens (e desvantagens) deste padrão e como com algumas poucas dicas você poderá editar um livro digital.

Por que não usar PDF?

O PDF tem muitas vantagens. Até a sua tia que te liga toda semana para perguntar de novo como faz para ler o resultado da Megasena na internet sabe como abrir um PDF. E do ponto de vista do design é ótimo. Hey, você tem muito mais controle do layout! Você pode colocar imagens e textos como quiser sem se preocupar com nada. Exceto… Você já tentou ler um PDF em um smartphone? É simplesmente agonizante. É necessário dar zoom in e out a cada frase diferente. Ou tentar ler tudo em um tamanho de letra absurdamente pequeno…

Isto acontece por que o PDF é baseado no suporte físico de uma folha, o que simplesmente não faz sentido no mundo digital. Vou explicar: um artista que pretende pintar uma nova obra de arte precisa saber o tamanho da tela. Da mesma maneira, ao editar um livro, ou qualquer outro tipo de documento para a impressão, é necessário saber o tamanho da folha para aí então fazermos toda a diagramação. O problema é que em um ambiente digital não existe uma folha. Existe um viewport (ou seja, área de visualização) que pode ser, bem, do tamanho que o usuário quiser! Se ele for ler o seu livro no browser pode aumentar e diminuir o tamanho da janela até a resolução máxima do monitor. Ou pode optar por ler em um tablet, smartphone, eReader… Enfim, a questão é que não temos como determinar a medida de altura e largura da mesma maneira que fazíamos com o papel. E o PDF, como foi pensado para ser impresso, precisa desta medida fixa.

Sobre o ePub

ePub é abreviação de Eletronic Publication, ou seja, Publicação Eletrônica. É um formato de livro aberto e gratuito criado pelo IDPF, um fórum internacional de publicação digital. Os livros deste formato são fluidos, o que permite que a experiência de leitura seja legal em qualquer tamanho da tela, sistema operacional ou dispositivo que você escolher. Desde que você tenha um app para isto, é claro. Mas isto não é muita preocupação. Existem leitores gratuitos para quase todos os aparelhos e sistemas operacionais (se você não conhece nenhum dê uma olhadinha no final do texto). Outro aspecto bacana do ePub é o controle que ele dá ao usuário. É possível realizar buscas, navegar através de links, aumentar e diminuir o tamanho da letra, trocar as fontes, a paleta de cores, etc. Sim, isto significa que se o cara quiser ler o livro inteiro em Comics Sans ele pode! Mas se isto deixar o usuário feliz quem somos nós para dizer não?

Como editar

Bem, agora que você já sabe como ler e por que usar, vamos descobrir como é um livro digital por dentro! Criei um livro de exemplo para utilizar neste tutorial. Você pode baixa-lo aqui. Mas qualquer outro livro que você tiver neste formato vai servir para o nosso experimento.

A extensão ePub é um formato de livros compactado. Faça um teste: renomeie o arquivo deste tutorial de meulivro.epub para meulivro.zip ou meulivro.rar que você poderá ver o conteúdo do pacote. No entanto, uma coisa importante de se ter em mente é que não são todos os softwares editores que estão preparados para salvar neste formato. Até dá para ler os arquivos XHTML separados, mas você teria que abrir manualmente, editar e recompactar a cada mudança de volta para ePub o que não seria nada prático. Felizmente existem alguns softwares como Sigil que são específicos para a edição de código de ePubs. Eles não tem um visual muito bonito mas cumprem com a função direitinho. Bem, vamos explorar os arquivos…

Obs. Existem outras especificações opcionais, mas vou me manter dentro do fundamental.
Obs.2 Os nomes dos arquivos são case sensitive.

A Estrutura

Vamos voltar ao nosso ePub! Ao descompactar a pasta você vai ter o seguinte:

arquivo mimetype
pasta META-INF

  • container.xml

pasta OEBPS

  • content.opf
  • toc.ncx
  • style.css
  • titulo.html
  • capitulo1.html
  • capitulo2.html

Para que serve tudo isso e como eu crio sozinho?

Mimetype

A função do mimetype é informar ao sistema operacional qual é o tipo do arquivo. O mimetype é um simples arquivo de texto ASCII.  Para criar um mimetype basta abrir qualquer editor (ou até mesmo o bloco de notas) e escrever esta linha de código:

application/epub+zip

Salve como mimetype (sem nenhuma extensão) e pronto. Está feito! O mimetype é igual para qualquer ePub. Então copiar de um outro ePub da certo também.

Container.xml

Deve ficar dentro da pasta  META-INF. A função deste arquivo é agregar todos os outros. Bora criar um!

[cc escaped="true"  lang="xml"]

<?xml version=”1.0″ encoding=”UTF-8″?>
<container xmlns=”urn:oasis:names:tc:opendocument:xmlns:container” version=”1.0″>
<rootfiles>
<rootfile full-path=”OEBPS/content.opf” media-type=”application/oebps-package+xml”/>
</rootfiles>
</container>
[/cc]

Content.opf

Descreve o conteúdo de todos os arquivos. Apesar da extensão esquisita é só criar um xml e depois salvar como .opf É composto das seguintes partes: metadata, manifest e spine. O esqueleto dele é assim:

[cc escaped="true"  lang="xml"]
<?xml version=”1.0″ encoding=”UTF-8″?>
<package xmlns=”http://www.idpf.org/2007/opf” unique-identifier=”EPB-UUID” version=”2.0″>
<!– insira os parâmetros aqui –>
</package>
[/cc]

Metadata

Não tem muito segredo aqui. São as informações do seu livro.

Itens obrigatórios:

  • title - O título do seu livro.
  • language - A Lingua utilizada. Como o livro está em português eu escolhi pt-br.
  • identifier - Um código único para o seu livro. Pode ser o ISBN, por exemplo.

Itens opcionais:

  • creator – O criador. No caso, você.
  • contributor – Contribuidor
  • publisher - Editora
  • subject - Assunto
  • description – Descrição do livro
  • date - Data
  • type - Tipo
  • format – Formato
  • source – Fonte
  • relation – Relação
  • coverage – Cobertura
  • rights – O tipo de licença. Creative Commons, por exemplo.

Bem, vamos preencher nossas metadatas. Eu inseri o seguinte entre as tags package:

[cc escaped="true"  lang="xml"]

<metadata xmlns:opf=”http://www.idpf.org/2007/opf”
xmlns:dc=”http://purl.org/dc/elements/1.1/”>
<dc:title>Saga do primeiro ePub</dc:title>
<dc:creator opf:role=”aut” opf:file-as=”Dani”>Dani</dc:creator>
<dc:date opf:event=”original-publication”>2012</dc:date>
<dc:publisher>Tableless</dc:publisher>
<dc:date opf:event=”epub-publication”>2012-01-30</dc:date>
<dc:subject>Primeiro ePub</dc:subject>
<dc:subject>Estudos</dc:subject>
<dc:source>Tableless</dc:source>
<dc:rights>Pode copiar galera!</dc:rights>
<dc:identifier id=”EPB-UUID”>minhaid</dc:identifier>
<dc:language>pt-br</dc:language>
</metadata>

[/cc]

Manifest

É um manifesto mesmo. Deve conter (em qualquer ordem) a lista de todos os arquivos da sua publicação. Exceto mimetype, container.xml e content.opf É necessário especificar uma ID única para cada arquivo. Você pode nserir estas informações antes ou depois da metadata. O importante é que esteja também dentro da tag package. No caso do nosso livro-tutorial ficou assim:

[cc escaped="true"  lang="xml"]

<manifest>
<!– Documentos –>
<item id=”titulo” href=”titulo.html” media-type=”application/xhtml+xml” />
<item id=”capitulo1″ href=”capitulo1.html” media-type=”application/xhtml+xml” />
<item id=”capitulo2″ href=”capitulo2.html” media-type=”application/xhtml+xml” />

<!– CSS Style Sheets –>
<item id=”main-css” href=”style.css” media-type=”text/css”/>

<!– NCX –>
<item id=”ncx” href=”toc.ncx” media-type=”application/x-dtbncx+xml”/>
</manifest>

[/cc]

Spine

A espinha do livro, ou seja, a ordem de leitura. Aqui você deve colocar apenas os arquivos tipo HTML na ordem que você deseja que apareça no livro, chamando cada um pelo ID que você definiu no manifesto. Tome cuidado para não duplicar nenhum arquivo ou ID. Como você já adivinhou, deve ser inserido entre as tags package também.

[cc escaped="true"  lang="xml"]

<spine toc=”ncx”>
<itemref idref=”titulo” linear=”yes”/>
<itemref idref=”capitulo1″ linear=”yes”/>
<itemref idref=”capitulo2″ linear=”yes”/>
</spine>

[/cc]

toc.ncx

TOC é uma sigla para Table of Contents, ou seja, o indice do livro. Também é um arquivo xml salvo com a terminação .ncx Possui a seguinte estrutura:

#head

  • uid — o identificador único em content.opf
  • depth — níveis do sumário >= 1
  • totalPageCount — to 0
  • maxPageNumber — to 0

#navMap

O sumário em si

#navPoint

  • id — único do arquivo
  • playOrder —ordem de navegação (iniciando em 1)

O nosso índice ficou assim então:

[cc escaped="true"  lang="xml"]

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE ncx
PUBLIC “-//NISO//DTD ncx 2005-1//EN” “http://www.daisy.org/z3986/2005/ncx-2005-1.dtd”>
<ncx xmlns=”http://www.daisy.org/z3986/2005/ncx/” version=”2005-1″>
<head>
<meta name=”dtb:uid” content=”idtest”/>
<meta name=”dtb:depth” content=”3″/>
<meta name=”dtb:totalPageCount” content=”0″/>
<meta name=”dtb:maxPageNumber” content=”0″/>
</head>
<docTitle>
<text>Saga do primeiro ePub</text>
</docTitle>
<docAuthor>
<text>Dani</text>
</docAuthor>
<navMap>
<navPoint id=”titulo” playOrder=”1″>
<navLabel>
<text>Titulo</text>
</navLabel>
<content src=”titulo.html”/>
</navPoint>
<navPoint id=”capitulo1″ playOrder=”2″>
<navLabel>
<text>Capitulo 1</text>
</navLabel>
<content src=”capitulo1.html”/>
</navPoint>
<navPoint id=”capitulo2″ playOrder=”2″>
<navLabel>
<text>Capitulo 2</text>
</navLabel>
<content src=”capitulo2.html”/>
</navPoint>
</navMap>
</ncx>

[/cc]

 

Os capítulos

É aqui que entra o livro em si. Cada capitulo deve ficar em um HTML separado. Estes arquivos não são nada diferentes de HTMLs comuns:

 

[cc escaped="true"  lang="xml"]

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″ />
<title>Capítulo 1</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div>
<h3>Capítulo 1</h3>

<p>Hello World! Este é o primeiro capítulo do nosso livro. Yey!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</body>
</html>

[/cc]

Outros tipos de arquivos:

CSS – Uma folha de estilos normal.
Pasta images – Aqui devem ficar as imagens do livro. Formatos permitidos: jpeg, png, gif e svg+xml
Pasta fonts – Utilize esta pasta se você quiser embedar algum arquivo de fonte no seu documento. Lembre-se de utilizar sempre o formato Open Type pois alguns aplicativos de leitura não suportam True Type.

E agora basta compactar!

Selecione todos os arquivos e crie um arquivo compactado (pode ser .zip ou .rar). Depois é só renomear para .epub e ler no seu dispositivo favorito. Pronto! Você tem um livro digital! :)

Dicas importantes para editar um ePub

Semântica é sua amiga

Bem, se você é leitor do Tableless provavelmente não preciso dizer isso, mas vou dizer mesmo assim! É muito importante utilizar uma estrutura semântica aqui. Tags h1 a h6 para títulos, p para parágrafos… O que você já está mais do que cansado de saber a esta altura. Evite usar br para quebrar a linhas por que sem ter o tamanho de um container é difícil determinar quando de fato vai ser necessário quebrar a linha.

Evite seletores complexos

Leitores digitais não são tão sofisticados quanto browsers. Mantenha o seu CSS o mais simples possível.

Use tamanhos relativos

Como as “páginas” do seu livro vão aumentar e diminuir de acordo com o tamanho da tela do dispositivo não utilize pixels como medida para nada. Lembre-se: EM para texto e margens, porcentagens para figura. Isto vai garantir que o seu livro continue proporcional e escalável. E o seu leitor feliz!

Tamanho é Documento

Não use apenas um documento XHTML para o livro todo. A recomendação é que os capítulos tenham menos de 300k cada. Mais do que isto pode deixar alguns leitores, como o iBooks por exemplo, muito lentos! A razão é que estes apps consideram cada capítulo como um bloco de texto diferente. Se você colocar tudo em um documento só o aplicativo vai carregar tudo de uma vez a cada acesso.

Outra dica é tentar usar sempre imagens otimizadas para a web e com uma resolução não maior do que 1200 x 1600px.

Não pire muito na escolha de fontes

Evite usar fontes fora do padrão websafe. Você pode embedar fontes Open Type utilizando a propriedade @font-face mas isto não significa que voce deve. Para começar não são todos os leitores que aceitam isto e no final o seu arquivo pode ficar pesado demais e travar. E muitas vezes pode ser um trabalho extra inútil já que o seu usuário pode muito facilmente trocar de fonte. Se mesmo assim você quiser usar não escolha mais do que dois ou três tipos.

Edição visual

Sim. Existem alguns softwares que podem gerar o livro para você. O Adobe InDesign faz isto, o Pages do Mac… Mas falando sério: não vale a pena. O código vai ficar sujo e no final você vai ter que corrigir vários bugs. É como se você estivesse utilizando um editor “What you see is what you get” para fazer um site. Acho que vocês entendem o drama. Mas… se você for realmente caminhar por esta estrada escura tenha algumas coisas em mente:

  • Se você está acostumado com editoração nestes programas é preciso mudar alguns paradigmas. Esqueça páginas mestras, hifenização, numeração, pé de página… você não precisa se preocupar mais com estas coisas em um formato digital.
  • Crie estilos específicos para o que é título, parágrafo, etc e não esqueça de importa-los na hora de salvar o arquivo.
  • Cuidado ao gerar o TOC (table of contents, ou seja, o índice). Se você colocar mais de dois subniveis pode dar problemas de compatibilidade com alguns programas e o seu livro simplesmente não abrir.
  • Lembre-se que todas as imagens precisam estar ancoradas para que fluam juntamente com o texto.
  • Determine quebras de capítulos. No caso do InDesign, salve cada parte do livro em um arquivo diferente. Depois junte todos os arquivos em um formato “book”.

E quanto ao formato iBook da Apple?

A Apple lançou recentemente um software gratuito chamado iBooks Autor para a criação visual de livros digitais. Os livros no formato iBook são bem interativos, permitindo a implementação de elementos multimidia como videos (coisa que ainda está engatinhando no formato ePub). Com um “pequeno” porém. Sem muito alarde nos termos de serviço a Apple colocou uma clausula de exclusividade para livros comerciais. Ou seja, se você utilizar o software e vender o seu livro através da iBook Store não poderá vender em mais nenhum lugar. Sem contar que o programa é exclusivo para Mac.

Fique longe dos conversores automáticos!

Existem alguns softwares ainda que prometem converter de PDF para ePub. Fique longe deles! Sério. Eles são ainda piores que os editores visuais. Um software não consegue interpretar um livro da mesma maneira que um ser humano a menos que você diga a ele o que fazer. Se você não determinar “ei, isto é um título” ele não tem como fazer este tipo de decisão por você.

Os PDFs estão presos a um tamanho fixo, lembra? O que significa que as palavras precisam ser hifenizadas. Se você converter automaticamente (além do seu código ser a coisa menos semântica desde os sites feitos em tabelas) os hífens vão continuar lá, criando divisões no me-io das pala-vras on-de não pre-cisava! Pense nos números das páginas… se o texto flui isso significa que um mesmo livro pode (e vai) ter uma numeração diferente de acordo com o aparelho utilizado. Mas no caso da conversão automática os números no pdf vão continuar lá. Os títulos provavelmente vão estar errados também. Fora que muitos deixam marcas como “convertido pelo programa XYZ” em todas as páginas do livro.

Links úteis

  • IDPF - A organização responsável pela criação do ePub. O site deles é meio confuso, mas contém bastante informação a respeito do formato.
  • ePub Chech – Validação de ePub
  • Epub Format Construction Guide – Um meta-livro bem completo sobre o assunto.

Bibliotecas gratuitas

Aplicativos para a Leitura

Mac & PC

Linux

iOS

Android

Leitura no Browser

Por Dani Guerrato

Uma geek de 27 anos apaixonada por cinema, literatura, tecnologia e, é claro, internet! É designer, desenvolvedora front-end e co-fundadora do estúdio PopUp Design, localizado em São Paulo. Adora semântica e acha divertido ler o código fonte do site dos outros.

http://blog.popupdesign.com.br

Mais posts do autor

Comentários (69)

  • J. Gomes (Portugal)

    A criação de livros no formato ePUB é realizada de forma mais simples do que a aqui citada, sem usar qualquer tipo de software. O mais relevante e mais trabalhoso tem a ver com a preparação dos conteúdos, nomeadamente na formatação do texto e seus parágrafos. Utilizando o MS Word, é possível colocar automaticamente as tags e , milhares que elas sejam, em breves segundos, bem como retirar os hifens de quebra de palavra, se os houver.
    É conveniente que se tenha idealizado um arquivo padrão ePUB com todos os conteúdos HTML ja em utf-8, um por capítulo, e os restantes que os vão controlar. Uns e outros terão apenas as linhas de código essenciais e inalteráveis. Assim, ao abrir o arquivo padrão ePUB com um software qualquer de descompactação, é possível editar os arquivos nele contidos, fazendo Copy/Paste (Copiar/Colar) do trabalho preparado com o MS Word para a área em branco dos arquivos HTML, e alterando os restantes de controlo para o nosso caso, título do livro, autor, autenticação, nomes dos capítulo na página de índice, etc.
    Em suma, é fundamental o conhecimento básico de HTML e CSS, não muito profundo, apenas aplicado à formatação do texto, e em alguns casos, hiperligações. Deixo um aviso: Deve-se visualizar o trabalho feito num dos leitores disponíveis para download. Caso as tags HTML estejam em falta ou incorretamente inseridas no texto, nada mais se pode visualizar depois do local do erro, devendo-se corrigir de imediato antes de o dar por terminado.

  • Jamais Desista

    GRAÇAS A DEUS ENCONTREI ESTE SITE…. ufa…tava difícil trabalhar com softwares que prometem uma boa conversão de formatos… Obrigado! GBY!

  • Cheidid

    Parabéns pelo site. Muito didática e competente. Uma dúvida: não consigo fazer quadros de texto coloridos aparecerem. Eles ficam bonitinhos lá no Sigil, mas quando vou ler num smartphone, por exemplo, o quadro e a cor desaparecem e fica somente o texto. Títulos de matérias, também, escritas em vermelho por exemplo, aparecem em preto no smartphone. É assim mesmo ou estou fazendo algo errado, falta algum controle ?

  • liperuf

    just what i needed! thanks

  • Pingback: Publique Seu Livro | Dicas de Roteiro

  • mi ajuda

    se eu não conseguir fazer um livro digital
    POR QUE?

  • Henrique Wanderson

    Primeiramente, mt obrigado por esse post Dani.
    Eu tive uma duvida e gostaria que alguem pfv me ajudasse, no Content.opf os parâmetros são a metadata, manifest e spine?
    SE sim tem uma ordem exata para coloca-los
    Se não onde colocam o metadata manifest e sine; e o que são os parâmetros

  • schreiyarai

    Dani,
    Fui procurar algo sobre ePub nessa vasta internet e encontrei o seu artigo. É apenas o primeiro sobre que eu leio e eu tenho que dizer: não vou precisar de muito mais coisas para começar a desenvolver ePubs do que voltar aqui; além, é claro, de me aprofundar um pouco mais em XHTML, coisa da qual eu tenho apenas uma noção.
    Preciso dizer que compartilho da sua opinião sobre editores wysiwyg e conversores – até hoje crio minhas pagininhas que preciso no bom e velho Notepad; usando no máááximo o Notepad++, que só dá uma otimizada na sintaxe dos arquivos, mas ainda me obriga a digitar letra por letra de tag por tag e assim por diante.
    Enfim; parabéns pelo artigo e muito obrigada por compartilhar seu conhecimento (: A partir daqui, posso partir para me aprofundar mais nisso, sem jamais esquecer a noção básica que você me proporcionou. Obrigada!

  • Eri Jonhson

    Dani, você é… Sem palavras ^^ Continue seu trabalho, você é muito boa nisso!

  • Usiel Barreto

    Espetacular! Amazing! Incredible! Grande dica para mim que queria tanto encontrar o livro Retirantes em epub! Um abraço!

  • Babby Reis

    Estou usando o procedimento que você citou, mas quando passo para o e-reader acontece de a separação de síbalas não ser correta… Alguma sugestão? Obrigada =^.^=

  • João Colbert Bello

    Cara amiga achei sensacional a maneira de comunicação sua. Agora veja meu caso, sou analfabeto digital e preciso fazer um livro. Ele esta montado para ser impresso salvo em disquete. Onde posso achar quem faça este trabalho para mim? Poderia me indicar alguma empresa ou profissional?
    Ficaria muito grato se pudesse me ajudar.

  • Milton Assis

    Posso fazer o serviço de Diagramação e conversão. É só entrar em contato pelo email que eu te passo mais informações sobre o serviço. milton.contatos@live.com

  • roberto

    I LIKE IT

  • Yuri

    Ola,eu não estou a compreender como fazer o livro,alguém pode me ajudar a entender por favor!

  • cleiton

    posso criar meu proprio livro através de meu tablet?

  • Viko Rezende

    Muito bom!!!!

  • Hugo

    Estou com a mesma dúvida, alguém ajuda?

  • Filipe

    Provavelmente é o leitor de E-books q vc está utilizando.