Apostila Ebook 2017-Ead

www.dualpixel.com.
br
Sumário Capítulo 6 Tabelas
Capítulo 7 exportação do arquivo epub

Capítulo 1 mercado do livro digital
1 - Painel de exportação - epub layout fluído................... 33
1 - que é um eBook ?....................................................... 4
2 - epub 3 - como produzir?............................................. 6 Capítulo 8 Acessibilidade
3 - ePUB 3 - onde visualizar?........................................... 7
4 - ePUB 3 - onde distribuir?............................................ 8 Capítulo 9 - Validação
1 - Validação pelo epubcheck.......................................... 40
Capítulo 2 boas práticas de produção
1 - Formatação do texto................................................... 9 Capítulo 10 SIGIL - Editor de ePUB
2 - Nomenclatura............................................................. 11 1 - Criar do sumário externo............................................ 42
3 - Formatação de imagens e Vetores.............................. 12 2 - Edição do sumário externo......................................... 43
3 - Criar do sumário interno............................................. 44
Capítulo 3 indesign CC na prática 4 - Divisão do eBook........................................................ 45
1 - Novo documento........................................................ 13 5 - Capa........................................................................... 46
2 - Encadeamento do texto.............................................. 15 6 - Dicionários.................................................................. 47
3 - Remoção de espaços vazios....................................... 16 7 - Verificação ortográfica................................................ 47
4 - Estilos de caracter...................................................... 17 8 - Caracteres especiais................................................... 48
5 - Preflight - Estilos de Parágrafo.................................... 18 9 - Metadados.................................................................. 49
6 - Formatações Básicas de Texto.................................... 20
7 - Notas de Rodapé......................................................... 22 Capítulo 11 xhtml e css para epub
8 - Hyperlink Externo....................................................... 23 1 - Do que é feito um ePUB?............................................ 50
9 - Hyperlink Interno (Referência Cruzada)...................... 24 2 - Arquivo Content.opf.................................................... 51
3 - Relação InDesign & XHTML / CSS................................ 53
Capítulo 4 imagens e objetos 4 - Sintaxe do CSS............................................................ 56
1 - Imagens - INLINE........................................................ 25
2 - Objetos - ancorado..................................................... 25 Capítulo 12 multimídia
3 - Elementos Gráficos..................................................... 26 1 - Áudio.......................................................................... 60
2 - Vídeo.......................................................................... 61
Capítulo 5 sumário e divisão dos capítulos Principais tags do HTML................................................... 62
1 - Sumário...................................................................... 29 Preparação no InDesign CC.............................................. 63
2 - Divisão dos Capítulos.................................................. 30 Caixa de ferramentas...................................................... 64
Versão 16 - Julho de 2017
dualpixel | www.dualpixel.com.br 2
O Curso Após completar este curso,
você será capaz de:
» » Curso prático que orienta na produção
de eBooks, em formato ePUB 3.0 através »» Entender as diferenças entre os formatos de eBook.
do InDesign CC, em conjunto com outras »» Entender o mercado e seus canais de distribuição.
ferramentas como Sigil (editor de ePUB).
»» Adaptar layouts da mídia impressa para digital eBooks / ePUB.
Contém várias dicas de plug-ins e scripts
para otimizar o fluxo de trabalho. »» Configurar os comandos de exportação para ePUB conforme seu fluxo
de trabalho.
»» Usa o InDesign Creative Cloud - CC 2015 ou
superior. »» Trabalhar com fontes embutidas.
»» Destinado a designers, editoras, agências e »» Inserir Metadados obrigatórios.

todos os interessados em migrar para o Digital »» Usar imagens escalonáveis no ePUB.
Publishing.
»» Criar hyperlinks, âncoras, notas de rodapé.
»» Os participantes devem ter experiência mínima
»» Criar sumários para barra de navegação do leitor e interna no
no uso do InDesign. documento.
»» Trabalhar com tabelas autoajustáveis.
»» Criar vinhetas, boxes, texto ao contorno.
»» Entender a relação entre XHTML e CSS na formatação do ePUB.
»» Otimizar o código gerado pelo InDesign, com mecanismos de busca.
»» Usar recursos de multimidia no formato ePUB - áudio e vídeo
»» Validar um arquivo ePUB. Exemplos práticos de como resolver conflitos.
»» Conhecer o formato ePUB3, características e aplicações.
»» Adaptar o formato ePUB para plataforma Amazon/Kindle - mobi/KF8.
CAPÍTULO 1 MERCADO DO LIVRO DIGITAL
1 - QUE É UM EBOOK ? Formato EPUB 3 - Recursos

eBook - electronic book é um termo genérico que pode ser aplicado a qualquer »» Baseado nas especificação HTML5
tipo de publicação digital. Continua a usar extensão .xhtml - XHTML 5
Atualmente, o principal formato utlizado é o EPUB, con tudo há vários outros - »» Nova estrutura do sumário externo
PDF, iBooks Author, Layout Fixo, etc. Sai o arquivo TOC.NCX — Usa o TOC.xhtml
Uso da tag <nav>
»» Mantém a compatibilidade com leitores

antigos - inclui o suporte ao TOC.NCX
»» Suporte a formatação com CSS 3
»» Multimidia. uso das tags <video> e

<audio>
»» Gráficos e Efeitos.
EPUB – ELECTRONIC PUBLICATION »» Animações por CSS3
Formato desenvolvido pelo consórcio IDPF – International Digital Publishing »» Uso de javascript
Forum nasceu para suprir a lacuna deixada pelo formato PDF que não atende as
novas necessidades de leitura nos dispositivos móveis. »» Sincronização de texto e áudio (SMIL e CSS)
Sua principal característica é possuir o conteúdo fluido, que permite sua fácil adap- »» Suporte ao MathML
tação a diferentes larguras de tela, fato que não ocorre no formato PDF.
»» Melhor suporte a fontes (OTF e WOFF)
Atualmente, na versão 3.0, é destinado para produção de livros, com suporte ao
»» Melhor suporte ao SVG
uso de imagens, tabelas e demais elementos de layout. Permite incluir hyperlinks,
vídeo e áudio, entre outros recursos de interatividade. Possui duas versões:
»» ePUB de Layout Fluido
»» ePUB de Layout Fixo
Áudio
Vídeo ePUB 2
ePUB 3
Layout Layout
Animação FIXO FLUIDO
Áudio
Vídeo
Botões
Slideshow Responsivo
Layout Fixo Layout Fluido

Com o lançamento do EPUB 3, o IDPF incluiu todas as O Electronic Publication (EPUB), nasceu como formato
funcionalidades da nova especificação do EPUB num em 2007, através do consórcio IDPF, seguindo a es-
formato que preservava a posição dos objetos, esse trutura de um website empacotado para distribuição
variante do EPUB chama-se Layout Fixo. A própria de conteúdo estático, com funções de acessibilidade
Apple descontinuou o desenvolvimento do formato e portabilidade entre plataformas e dispositivos.
próprio em prol a adoção do formato aberto EPUB 3
de Layout de Fixo.
2 - EPUB 3 - COMO PRODUZIR?
O Trabalhoso O Amador O Técnico O Expert O Profissional

»» Reedição dos textos. »» Conversões simples. »» Edição no código. »» Edição direta do ePUB »» Marcação do texto.
»» Exportar as imagens. »» Muito genérico. »» Poucos recursos »» Gratuito »» Produção do ePUB

automáticos. para validação.
»» Rediagramação. »» Funciona como »» Muitos recursos
bilioteca. »» Sumário, notas, »» Aplica muitas
Divisões. marcações no código.
ESTILOS DESIGN TESTES VALIDAÇÃO DISTRIBUIÇÃO

»» Marcação do »» Ajustes de layout »» Mobile-first »» EPUB-Checker (IDPF) »» Site / Lojas
conteúdo com Estilos
»» Sumário, Divisão, etc »» Em telas de formatos/ »» Online até 10 MB »» Livre ou Protegido
plataformas diferentes (DRM)
»» Offline acima de 10 MB
3 - EPUB 3 - ONDE VISUALIZAR?
DESKTOP MOBILE E-READER
iBooks
iBooks
KINDLE - Amazon LEV - Saraiva
Adobe Digital
Kindle Reader Edition 4.5
 AZARDI
KOBO - Cultura
Nesta categoria de leitores
 NÃO há suporte aos recursos

do ePUB3
Readium Kindle Reader Adobe Digital

Gitden
Edition 4.5
4 - EPUB 3 - ONDE DISTRIBUIR?
FECHADAS SEMI-ABERTO ABERTAS

»» DISTRIBUIÇÃO LIVRE
- SEM DRM
AGREGADORES
São intermediários Digital Right Management - DRM

TAXAS DE PAGAMENTOS entre livrarias/lojas e Digital Right Management (Gerenciamento
PREÇO DE CAPA editoras. de Direitos Autorais) é um processo para
 »» Apple - 70%
»» Amazon - 30% - 70%

evitar a criação de cópias não autorizadas.
Pode ser aplicado em softwares e arquivos
digitais, tipo o EPUB.
»» Google - 50% Empresas com distribuição fechada como
Amazon e Apple, que utilizam seus próprios
devices para leitura do conteúdo possuem um
DRM próprio.
No geral, o mercado utiliza os serviços da Adobe

Content Server para aplicação de DRM.
CAPÍTULO 2 BOAS PRÁTICAS DE PRODUÇÃO
1 - Formatação do texto
»» A unidade padrão de tamanho de corpo
(pontos - pt) é convertida dentro da
formatação - CSS para a unidade (em).
»» A unidade (em) equivale a 100% da fonte

padrão dos leitores - 12 pt.
Aplique estilos de parágrafo e caractere
em todo texto.
»» Troque as entradas de parágrafo

pelo controle de espaço antes
e espaço depois da paleta de
parágrafo (via estilo, claro).
(InDesign CC)
»» Footnotes são convertidos para

hyperlinks.
»» Utilize um perfil de preflight para verificar

alterações nos estilos.
»» Nunca utilize fontes tipo PostScript - Type 1.

Estas são exclusivas para impressão.
»» Escolha fontes tipo OpenType e TrueType

para utilização em arquivos eBooks.
2 - Nomenclatura
»» Os nomes dos arquivos do InDesign NÃO
devem conter espaços, nem caracteres
especiais (ü, â, é, ç). Use hífens (-) ou
underscores (_)
»» Essa mesma regra vale para as imagens,

nomes dos estilos e demais arquivos
importados.
»» Criar nomes curtos para estilos e

documentos.
»» Espaços são substituídos por %20, o que

não é reconhecido por vários eReaders.
»» 300 kb é o tamanho máximo de cada

arquivo XHTML no ePUB.
3 - Formatação de imagens e Vetores
»» Criar imagens para Capa num arquivo à parte com 1000 px de
altura e 150 ppi (largura proporcional).
»» Inserir imagens como objetos INLINE.
»» Controlar a posição das imagens através dos estilos de

parágrafo.
»» Controlar a posição dos objetos através dos estilos de objetos.
»» Utilizar imagens entre 600 a 1200 pixels de largura com 150 ppi.
»» Exportar para o formato ePUB com a opção de otimização

automática de imagens. Mantenha também sempre habilitada a
opção Em relação à página / Relação ao fluxo do texto
»» Imagens com transparência devem utilizar o formato PNG
UNIDADES Porcentagem EM Pixel Viewport Height

»» Largura das imagens »» Tamanho das fontes »» Margem entre »» Altura de imagens e
DE MEDIDA e objetos parágrafos (até 30px) objetos
»» Margem entre
»» Margem das páginas parágrafo
(eBook)
CAPÍTULO 3 INDESIGN CC NA PRÁTICA
1 - Novo documento
Quando for possível crie um novo documento no
InDesign para produção do eBook. No Menu File >
New > Document
»» No campo Intent habilite a opção Web.
»» Em Page Size escolha 640 x 840, orientação

vertical.
»» Em Margins coloque 20 px em todos os lados,

como referência. Iremos editar as margens
após a exportação para ePUB.
»» Desta forma a dimensão da página já fica

adequada ao tamanho recomendado das
imagens (600 pixels de largura) e atenderá a
qualquer tipo de eReader.
 File > New > Document
O QUE NÃO É EXPORTADO ORDEM DE LEITURA DOS ARQUIVOS
PELO INDESIGN
»» Elementos das páginas mestras
»» Elementos vetoriais complexos
»» Numeração automática de páginas
»» Margens
»» Quebra de página
»» Posição das imagens e gráficos
»» FORMATAÇÃO FORA DOS ESTILOS
Na versão InDesign CC a Adobe mostra um impor- cas próprias, por isso mudanças, ainda que sutis, são
tante amadurecimento para a exportação do formato frequentes entre plataformas e leitores diferentes.
ePUB. Pode-se concluir que a versão Creative Cloud Um exemplo é a recente possibilidade de aplicar
conseguiu reunir o melhor das versões anteriores valores de margem diferentes para o topo, base,
- CS5.5 e CS6 - corringindo falhas e otimizando al- esquerda e direita no arquivo ePUB, contudo alguns
guns processos. leitores ignoram esta informação e aplica o mesmo
Ressalto que cada leitor de ePUB possui característi- valor do topo para todos os lados.
2 - Encadeamento do texto Encadeamento Aumtomático
A primeira coisa a ser feita num arquivo de InDesign é o encadeamento do texto »» Ao importar um texto para o InDesign,
em todos os capítulos. As partes pré-textual e pós-textual devem ficar em mantenha pressionada tecla SHIFT, antes de
caixas de texto separadas para a correta aplicação da semântica(1) clicar com o cursor na página.
Elementos pré-textuais mais comuns Elementos pós-textuais mais comuns »» Desta forma todo texto será distribuido
automaticamente. Novas páginas serão
»» Folha de rosto »» Posfácio criadas se necessário
»» Dedicatória »» Apêndice
»» Epigrafe ou Citação »» Glossário
»» Listas (tabelas, figuras, »» Bibliografia
abreviações, etc) »» Índice
»» Prefácio »» Colofão
»» Introdução
»» Sumário Encadeando Quadros de Texto
» » Para encadear quadros já existentes,
basta clicar no símbolo ‘+’, para carregar
Já o conteúdo textual: capítulos, partes, volumes, etc devem ser enacadeados,
o texto em excesso, e com a tecla ALT
por capítulo ou todo o livro, conforme o fluxo de trabalho adotado.
pressionada clicar na sequência de caixas
(1) Semântica é o estudo do significado. Incide sobre a relação entre significantes, tais como pa-
para encadea-las.
lavras, frases, sinais e símbolos, e o que eles representam.
Habilite a visualização do Texto Encadeado para confirmar

se o comando foi corretamente aplicado. Menu View >
Extras > Show Text Threads
 Menu View > Extras > Show Text Threads

Texto encadeado
3 - Remoção de espaços vazios
Para documentos sem controle de espaçamento (antes ou depois do parágrafo)
através de Estilos é indicado remover os parágrafos vazios, bem como excesso
de espaço entre letras e palavras. Assim teremos uma ideia real do layout.
O comando Find/Change NÃO precisa ter o texto

selecionado pelas Ferramentas de Texto ou Seta
 Menu Edit > Find/Change... 1
Find/Change em 3 passos:
1 Clique no item Query.
 2 Escolha Multiple Return/Space to 2 3

Single Return/Space.
3 Clique em Change All.
4 - Estilos de caracter
O formato ePUB tem necessidades específicas para uma correta formatação dos
Como instalar um Script?
textos. Por isso a atenção nesta etapa deve ser total. Uma correta aplicação dos
estilos - caracter e parágrafo, sem violações e formatações locais resulta numa No painel de Scripts, clique com botão direito sobre
marcação do texto no formato ePUB de forma clara e precisa, evitando sujeiras a pasta USER. Escolha a opção Reveal in Explorer,
no código XHTML e CSS. para exibir a pasta Scripts Panel.
Agora, basta copiar os scripts dentro da pasta

 Menu Window > Utilities > Scripts SCRIPTS PANEL. Não é preciso reiniciar o In-
Design.
Script Preptext
Aplica um estilo de caracter a formatação
do texto, abaixo. Não inclui a informação
da família da fonte. Para aplicar o script no
»» bold, documento, clique com a
ferramenta de TEXTO na primeira
»» itálico,
caixa de texto.
»» bold itálico,
»» versalete, Então, clique 2x em preptext,
no painel Scripts
»» sub/sobrescrito,
»» sublinhado.
OUTROS SCRIPTS
RenameStyles — renomeia os estilos de parágrafo

e caracter de forma correta para os eBooks - sem
acento, espaços e caracteres especiais.
Lista caracter / Lista parágrafo — cria uma

lista com a aparência de todos os estilos
5 - Preflight - Estilos de Parágrafo
Para controlar as violações de estilo utilize um perfil de Preflight (Perfil de InDesign Creative Cloud
Comprovação). Acesse o painel pelo Menu Window > Output > Preflight. Com A partir do CC 2014, o InDesign possui o recurso de
painel aberto escolha Define Profiles no submenu. exibir direto no documento TODA violação nos esti-
los de parágrafo e caractere, com um simples clicar
do mouse. Veja o destaque nas imagens abaixo.
 Menu Window > Output > Preflight
Abra o submenu do
painel e escolha Define
Profiles...
Na configuração do
Preflight habilite a
função - Substituições
de Estilo De
Parágrafo e Estilo de
Caracter, na aba Texto,
2 conforme figura ao lado.
Eliminando as violações do texto Clique na caixa de texto com a ferramenta
de TEXTO para usar o painel Preflight
O painel Preflight exibe as áreas de texto com alterações no estilo
(parágrafo e caracter). Clique no Número da Página para identificar o
texto no documento.
2 3
O sinal de (+) confirma a violação no Há duas opções.
estilo. Passe o mouse sobre o símbolo Redefine - atualiza o estilo com a
1 Identifique as áreas com violação. (+) para saber as alterações. nova formatação.
Clear Overrides - elimina as

alterações. Retorna ao estilo
original.
SUPER DICA - Pode-se selecionar todo o

Utilize o comando DELETE ALL UNUSED,
TEXTO (Ctrl+A) e limpar as violações de
 no submenu do painel de Estilo de Pará-
grafo, para deletar estilos não utilizados.
 estilo em lote.
ATENÇÃO ao comentário do FELIPE.
6 - Formatações Básicas de Texto
A versão CC do InDesign consegue incorporar mais recursos visuais ao ePUB, como
capitulares e superscript. Com a chegada da versão Creative Cloud novas funções
foram acrescentadas.
TÍTULOS
Evite hifenizar
títulos e tópicos.
Desabilite essa
função no estilo.
FORMATAÇÃO BÁSICA CAPITULARES /

ESTILO ANINHADO
»» Basic Character.
Drop Caps permite o uso de estilo de caractere
»» Advanced Character.
(ePUB 3)
»» Indents and Spacing.
Nested Styles aplica estilo de caractere em parte
»» Bullets and Numbering do texto ou na primeira linha do parágrafo.
»» Character Color
Espaços Vazios
Para exportar parágrafos sem conteúdo - espaços
vazios, utilize o caracter especial NonBreaking
Aplique pelo Menu Type > Insert White Space

— Alt/Ctrl+X / Opt/Cmd+X.
Menu Type > Insert White

 Space > NonBreaking
Estilo Coringa I
Para maior controle no espaçamento entre
parágrafos em partes específicas no
texto, recomenda-se a criação de
um Estilo de Parágrafo Coringa.
LISTAS Neste estilo aplique valores de

Espaço Depois do Parágrafo.
»» Bullets Máximo de 30px.
»» Number Sempre utilize junto ao parágra-
fo vazio, o caracter especial
Para exportação no InDesign são bem suportadas
NonBreaking
no ePUB no padrão de números e “bolinhas”.
7 - Notas de Rodapé
Notas de rodapé são exportadas automaticamente
como hyperlinks e inseridas ao final de cada divisão  Menu Type > Insert Footnote
do documento.
O InDesign CC preserva o fio separador da Nota de

rodapé.
 Menu Type > Document Footnote Options...
Prefix/Suffix
melhoram a
visualização da
nota.
1
Não use Sobrescrito,
4
nem estilo de
caracter 2
Desabilite o
fio separador,
Faça um estilo de localizado na parte
parágrafo para o
texto das notas.
3 superior das Notas
(opcional).
Mude o caracter
separador.
8 - Hyperlink Externo
O formato ePUB aceita hyperlinks externos - sites e email - além de âncoras de
navegação - referência cruzada. A formatação dos hyperlinks será realizada
pela folha de estilo - CSS, após a exportação.
Crie Hyperlinks com a ferramenta de TEXTO,

 Menu Window > Interactive > Hyperlinks selecionando o texto que deseja tornar um
hyperlink.
9 - Hyperlink Interno (Referência Cruzada)
A criação da Ãncora
20
 não pode ter TEXTO
selecionado
10
Em seguida selecione a parte do texto que será

o ponto de partida - hyperlink - para a âncora
recém-criada.
Para se criar uma referência cruzada no do-
Escolha o painel Hyperlink > Novo Hyperlink
cumento primeiro faz-se o ponto de destino.
> âncora de texto.
Acesse o painel Hyperlink > Novo Hyperlink
de Destino e atribua um nome para o ponto
de âncora...
CAPÍTULO 4 IMAGENS E OBJETOS
1 - Imagens - INLINE 2 - Objetos - ANCORADO

Utilize as imagens de forma INLINE dentro da caixa Utilize os objetos de forma ANCORADA dentro da caixa
principal de texto. Cada imagem aplicada no seu principal de texto. Cada objeto aplicado no seu
próprio parágrafo. próprio parágrafo.
Copie as imagens com a ferramenta de seta preta e Utilizando o Icone Azul do quadro do objeto, arraste
com a ferramenta de texto crie um novo parágrafo o mesmo para a posição do texto onde deseja exibir .
para colar a imagem
Para controlar o alinhamento, margens e
Para controlar o alinhamento das imagens aplique um tamanho das imagens aplique um estilo de objeto.
estilo de parágrafo. Utilize entrelinha automática;
espaço antes e depois do parágrafo e escolha o tipo
de alinhamento horizontal. ANCORANDO OBJETOS
Configurar um ESTILO DE PARÁGRAFO para imagem, use
a FERRAMENTA DE TEXTO, para selecionar a imagem.
Boxes, Olhos, vinhetas e
demais objetos devem
utilizar a opção de
ANCORAGEM. Menu
»» Capa - arquivo à parte com 1000
Object > Anchored Object.
px de altura e 150 ppi (largura
proporcional).
»» Inserir imagens INLINE.
 »» Controlar a posição das

imagens através dos estilos de
Clique no ícone azul e
arraste para o local que
parágrafo. deseja “ancorar” o objeto.
Senão esses objetos serão
»» Utilizar imagens entre 600 a 1200 rasterizados.
pixels de largura com 150 ppi.
3 - Elementos Gráficos
BOXES / VINHETAS / OLHOS
O InDesign preserva a formatação de fio e preenchi-
mento dos objetos. Com InDesign CC é obrigató-
rio o uso do Estilo de objeto. Uma boa notícia que
facilita a produção de layouts mais elaborados no
formato digital.
Estilos de objeto
Item obrigatório na formatação de boxes e olhos no
InDesign CC, para preservar a aparência do objeto -
preenchimento, fios, espaçamento interno.
1
Aplique sempre Estilos de Objeto via menu Window
> Styles > Object Styles.
2
Menu Window > Styles >
 Object Styles
3
EPUB AND HTML
Comandos dedicados para exportação
em formato ePUB. Controla:
»» Alinhamento 1
»» Margens 2
»» Largura 3
»» Rasterização.
Objetos complexos (1)
Para maior controle de páginas mais complexas e com
maior número de elementos uma boa opção é raste-
rizar (transformar em imagem) todo o conjunto.
Sem perder a possibilidade de edição no InDesign.
Escolha a opção RASTERIZE CONTAINER. Todo objeto
será rasterizado mantendo a aparência do layout.
Texto ao contorno (2) 1

Com InDesign CC é possível habilitar a opção de texto
ao contorno direto do documento. Através do comando
EPUB and HTML, no painel de Estilo de Objeto,
escolha entre as opções flutuar para direita (float right)
/ flutuar para esquerda (float left). Podemos combinar 2
essa função com o controle da largura do objeto.

 Object Styles
3
EPUB AND HTML
Comandos dedicados para exportação em formato
ePUB. Controla:
»» Rasterização 1
»» Alinhamento 2
»» Margens 2
»» Largura 3
Text Frame Options
Painel essencial para criação de vinhetas e boxes de
textos. Permite o controle do espaço interno da caixa
de texto e alinhamento na vertical.
Menu Object >

 Text Frame Options
Acesse sempre com a ferramenta de SETA.

Clique na caixa de texto para habilitar o
painel.
Text Wrap (Texto em Contorno)

Sempre que utilizar TEXTO EM CONTORNO utilize uma
defesa entre o objeto/imagem e o texto
 Menu Object > Text Wrap
Acesse sempre com a ferramenta de SETA.

Clique no objeto/imagem para aplicar a
desefa contra o texto.
CAPÍTULO 5 SUMÁRIO E DIVISÃO DOS CAPÍTULOS
1 - Sumário
PRODUÇÃO DO SUMÁRIO EXTERNO
No fluxo de trabalho integrado com InDesign e Sigil, a
produção do SUMÁRIO, no InDesign fica por conta da
marcação dos estilos de parágrafo, com as TAGs de
2
cabeçalho - h1, h2, h3, etc..

 Paragraph Styles > SubMenu
3
(1) Acesse o submenu do painel Estilo APLIQUE AS
de Parágrafo, escolha a opção Edit All
TAGS DO HTML
Export Tags / Editar todas as marcas
de exportação,
Nãose esqueça de
(2) Neste painel podemos associar os aplicar as tags aos
estilos de parágrafo (que fazem parte do estilos de parágrafo
Sumário) as TAGs de HTML - h1, h2, h3, ... e caracter.
(3) Também marcamos a semântica NÃO PRECISA
1 dos itáligos e negritos que irão alterar PREENCHER A CLASS
a entonação da leitura no modo de
acessibilidade dos ereaders.
2 - Divisão dos Capítulos
DIVISÃO BASEADA EM ESTILOS
Na versão CC qualquer estilo de parágrafo pode ser um
indicativo de quebra do conteúdo. Habilite esta função
no campo Exportar Marcações do painel Estilos de
Parágrafo.

 Paragraph Styles > SubMenu
2
(1) Acesse o submenu do painel Estilo de Parágrafo,

escolha a opção Edit All Export Tags / Editar todas
as marcas de exportação,
(3) É possível, também, habilitar a quebra em

diferentes estilos de parágrafo, de uma só vez.
CAPÍTULO 6 TABELAS
Na versão CC o Indesign consegue exportar GENERAL
todas as informações sobre as tabelas desde
Informe qual estilo de parágrafo será
que se tenha aplicado os estilos de tabelas
aplicado ao texto da célula.
e de células.
Na maioria das vezes as tabelas não são feitas

para telas menores, exigem um grande tempo
para ajustes no layout, e no final, podem ser es-
tragadas se o leitor mudar o tamanho da fonte.
Ainda assim, todo o esforço é válido, e colocar

tabelas como imagem no livro digital deve ser TEXT
considerada a última das soluções. Como ima-
gem a informação da tabela não participa da Aplique valores de espaçamento interno
indexação para a pesquisa, e pode ter a leitura das células (Máximo de 5px).
prejudicada em certos dispositivos. Faça sua Ajuste o alinhamento na vertical.
tabela em texto sempre que possível.
Estilos de Célula
STROKES AND FILLS
Configure os fios da célula
»» Espessura
»» Tipo
»» Cor
 SEMPRE APLIQUE UM
PREENCHIMENTO NA CÉLULA -
PAPER
Estilo de Tabela
Elimine o fio da tabela. Todo ajuste

da aparência da tabela é definido
pelos Estilos de Célula.
APLICAR A TABELA NO
DOCUMENTO
Cole a tabela direto na caixa de

texto do documento. Não utilize
a caixa de texto da tabela.
CAPÍTULO 7 EXPORTAÇÃO DO ARQUIVO EPUB
1 - Painel de exportação - epub layout fluído

Entre todas as novidades do InDesign CC certamente aquela mais visível aos usuários já acostumados a usarem
o comando de exportação para ePUB é a total reformulação deste conjunto de painéis. A nova distribuição
está mais organizada dividindo os painéis pelo conteúdo do ePUB, além de trazer novas opções. Entenda a
função de cada painel.
GENERAL TEXT
Aqui podemos escolher a versão do ePUB; Capa; Painel reúne ações relacionadas ao controle do texto
Sumário; Navegação e divisão em tópicos e capítulos. como quebras; notas de rodapé e listas. Essas opções
Essas informações estavam espalhadas em dois painéis funcionam igual a versão anterior.
diferentes nas versões anteriores.
CONVERSION SETTING
Painel relacionado ao controle da qualidade e
otimização das imagens exportadas para o formato
ePUB. Mantém as mesmas opções já encontradas
em versões anteriores do InDesign.
OBJECT
Adicionar arquivo CSS Reset para
O painel Images mudou de nome e agora chama-se controle e formatação de pontos
Object, mas continua atuando apenas nas imagens chave no ePUB.
do documento. O visual do painel ficou mais claro e a
área de CSS expressa bem o controle das imagens no
tamanho e alinhamento.
CSS
Novo painel CSS responsável pela produção da folha
de estilo. Nesta versão, também, controla a aplicação
das margens no ePUB. Infelizmente ainda em pixels.
O uso de CSS adicional continua valendo. Tudo igual.
PAINEL DE EXPORTAÇÃO - EPUB LAYOUT FIXO
JAVASCRIPT
Os comandos de exportação para ePUB de Layout Fixo são bem
Por aqui sem alterações.
semelhantes aos utilizados na produção do ePUB de Layout Fluido. Seguem
alguns comentários:
GENERAL
A opção de Layout Fixo é destinada
apenas para ePUB 3. Na aba General
podemos controlar como será a
aparência da publicação:
»» Convert Spread to Landscape

(página duplas)
»» Disable Spreads (páginas

simples).
CSS
Uma característica interessante é que
METADATA não há como não gerar a folha de
estilo CSS durante a exportação. Pois
A principal mudança do comando de exportação está para controle da posição do layout o
relacionada aos metadados. Nesta versão podemos arquivo CSS é fundamental, contudo a
exportar um ePUB contendo os principais campos de opção de incluir um arquivo adicional
metadados já preenchidos. Evitando muitas vezes de CSS continua presente.
edições pós-exportação e erros de validação.
As demais opções são semelhantes
Itens obrigatórios - Título, Data, Autor e Idioma a exportação do Layout Fluido já
(estilo de parágrafo). comentada no item anterior.
CAPÍTULO 8 ACESSIBILIDADE
Acessibilidade visa permitir através de um conjunto de práticas que todos tenham

acesso a conteúdos, sistemas, locais, etc tendo alguma deficiência ou não.
No caso dos livros digitais, as técnicas descritas neste capítulo tem o objetivo de
melhorar a estrutura e significado do conteúdo, permitindo que diferentes siste-
mas de leitura sejam capazes de identificar as partes principais do eBook (pré/
pós-textuais, textuais - veja no capítulo 2), a hierarquia do conteúdo, imagens
e suas descrições, bem como melhorar a navegação do ebook em geral.
Separar apresentação e conteúdo

Por padrão todos os eBooks são exportados do InDesign já mantendo essa regra.
Conteúdo em HTML e formatação em CSS. Evite aplicar marcações sobre desta-
ques do texto, como itálicos (enfâse na leitura) e negrito (importância) com a tag
<span>. Utilize sempre <em> (itálicos) e <strong> (negritos).
Use imagens apenas para imagens, não para tabelas ou

texto
Qualquer conteúdo transformado em imagem não está disponível para leitores
com deficiência visual. Se a conversão para imagem for inevitável forneça uma
descrição através da tag ALT
Use descrições de imagem e texto alternativo

Toda imagem deve ter uma descrição, legenda ou texto alternativo, a menos que
seja exclusivamente decorativo. Consulte as Diretrizes de imagens do centro
DIAGRAM para EPUB 3 (https://goo.gl/sDKMgp).
Menu Objeto > Opções de
No InDesign acesse o comando Opções de Exportação do Objeto para ativar  Exportação do Objeto
a descrição da imagem ou aplicar uma direto pelo painel.
Defina o(s) idioma(s)
Para garantir que cada palavra seja processada (e lida) corretamente, especifique
o idioma padrão do conteúdo num estilo da caracter próprio. Marque palavras ou
frases com esse estilo. E para finalizar associe o estilo de caracter a tag <i>
Crie um estilo de caracter

contendo apenas as
informações do idioma e tag
Todo o texto deve estar disponível em uma ordem de leitura

O texto não deve ser apresentado como imagens, ser reordenado pelo CSS ou re-
querer scripts para acessar. Use as novas tags do HTML5 para melhor identificação
das partes do conteúdo.
Menu Window > Styles > Paragraph Styles >

 SubMenu
SECTION - atribua a tag section aos estilos de Quadro de gráfico básico e Quadro
de texto básico. As caixas de texto principais devem ser Section.
ARTICLE - blocos e quadros de texto com informações extras. O ideal que esses
conteúdos tenham autonomia do texto principal, como um artigo ou depoimento.
Associe as Tags Sectio, Article e Aside aos estilos de objetos
ASIDE - representam um conteúdo de referência ao texto principal, saindo da conforme a função do conteúdo na publicação.
ordem linear da leitura.
Forneça uma navegação completa
Tenha no mínimo um sumário bem estruturado (através das Tags h1, h2, h3, ...),
tanto para os sistemas de leitura (sumário externo), bem como dentro da publi-
cação (sumário interno). Conforme o perfil da obra utilize de outras listas, como
listas de tabelas, figuras.
Controle quais arquivos serão visiveis na estrutura do ebook pelo recurso

<itemref linear = “no”>, do arquivo content.opf. (ePUB 3 apenas)
Declare imagens e legendas

As imagens e legendas precisam ser marcadas com as novas tags <figure> e
<figcaption>. Utilize o painel Editar todas as marcas de exportação
para associar os estilos de parágrafo das imagens e legendas para as suas
tags correspondentes.
Crie uma estrutura significativa sempre que possível

Aplique o atributo epub:type as princi-
pais partes do conteúdo (pré/pós-textual)
criando uma estrutura lógica e melhorando
a navegação por toda obra.
Com a melhora dos leitores cada vez a semân-

tica do ePUB será identificada, criando novas
rotas de navegação de forma automática.
Com a ferramente de seta preta selecio-

ne a caixe de texto destas partes da obra
(prefácio, agradecimento, ficha, glossário,
bibliografia, etc) e aplique o epub:type
adequado.  Menu Objeto > Opções de exportação de objeto
OS PRINCIPAIS EPUB:TYPE PARA UTILIZAÇÃO
Elementos pré-textuais mais comuns Elementos pós-textuais mais comuns
»» Folha de rosto (Foreword) »» Posfácio (Afterword)

»» Dedicatória (Dedication) »» Apêndice (Appendix)
»» Epigrafe ou Citação (Epigraph) »» Glossário (Glossary)
»» Listas de tabelas, figuras (lot, loi) »» Bibliografia (Bibliography)
»» Prefácio (Preface) »» Índice (Index)
»» Introdução (Bodymatter) »» Colofão (Colophon)
»» Sumário (toc)
Fornecer acesso alternativo ao conteúdo da mídia /

Utilize sempre as tags nativas de <video> e <audio> para conteúdo multimí-
dia. Forneça opções como descrição, legendas e transcrições de áudio.
Para fórmulas matemáticas utilize a linguagem MathML ou descreva o significado

da fórmula na tag ALT da imagem.
Usar metadados de acessibilidade

Aplique no content.opf metadados que irão ajudar os sistemas de leitura dos
ebooks a identificar que existem materiais acessíveis. Veja quais são esses meta-
dados no PDF - Indd-Html-Css
ACESSIBILIDADE
Aplique essas técnicas como rotina em todos os
eBooks. São recursos úteis para todos: usuários com e
sem deficiência, sistemas de leitura e o ebook estará melhor
preparado para os próximos eReaders.
CAPÍTULO 9 - VALIDAÇÃO
Etapa importante no processo de finalização e distribuição do ePUB, visto que

o principal servidor de DRM do mercado - Adobe Content Server - utiliza como
pré-requisito a validação do ePUB.
Neste capítulo são apresentadas as principais formas de validação.
1 - Validação pelo epubcheck

ePUBCheck é o engine utilizado pelo órgão gestor do
formato ePUB - International Digital Publishing Forum
(IDPF).
Sendo também utilizado pelo sistema de DRM da Adobe,

assim torna-se um item obrigatório para conclusão
de todos os projetos que sejam distribuídos com DRM
incluso.
http://validator.idpf.org/
O validador ePUBCheck do IDPF acei-

ta arquivos até 10MB para validação

online. Arquivos maiores devem utili-
zar o utilitário Pagina ePUBChecker,
que trabalha com o mesmo engine
do IDPF em modo offline.
Pagina EPUB-Checker - software para validação offline
CAPÍTULO 10 SIGIL - EDITOR DE EPUB
Sigil é um editor Open Source e gratuito para o formato ePUB2 A vantagem principal do Sigil é a de dispor em um só programa
e ePUB3. Ele é projetado para editar de modo fácil os arquivos vários instrumentos necessários para a criação de um bom ePUB,
ePUB fornecendo recursos avançados, como controle direto inclusive o Flighcheck, um programa que controla eventuais
do XHTML; Estilos; Sumário; Metadados; Imagens; Relatórios, erros no arquivo.
entre outros.
Preview do Conteúdo
Estrutura interna Sumário
do ePUB

Atualmente,
na versão 9.8,
não há suporte
para o formato
ePUB com Layout Fixo
Clips Localizar/substituir validação Tela de Preview
1 - Criar do sumário externo
A primeira etapa a ser realizada no Sigil é a produção do Sumário. O Sigil identifica as marcações realizadas
no InDesign, dos estilos de parágrafo para as Tags de HTML (h1, h2, etc)
 Menu Tools > Table of Content > Generate Table of Content
O comando Genarate TOC cria o SUMÁRIO

EXTERNO, para o padrão ePUB3 - arquivo
 toc.xhtml
Leitores antigos utilizam o arquivo

toc.ncx, compatível com ePUB2
EPUB 3
SUMÁRIO EPUB 2
Após criar o sumário externo, acesse
o Menu TOOLS > Epub 3 Tools > EPUB 2
Generate NCX from NAV
2 - Edição do sumário externo
O comando de EDIÇÃO DO SUMÁRIO é a maneira mais prática e fácil, para atualizar e editar
sumários no eBook.
 Menu Tools > Table of Content > Edit Table of Content
(1) No painel Edit Table of

Content é possível adicionar
itens ao sumário pelos botões
1 Add Above e Add Below.
(2) Clique em Select Target

para definir o arquivo de destino.
2
Se for preciso utilize antes a
opção da barra de propriedades
Insert ID .
3 - Criar do sumário interno
É possível aplicar um sumário interno ao eBook, sendo uma réplica do sumário externo.
 Menu Tools > Table of Content > Create HTML Table of Content
1 - SUMÁRIO EXTERNO
2 - SUMÁRIO INTERNO
O comando de gerar o SUMÁRIO INTERNO ativa o

arquivo toc.xhtml, na estrutura do ePUB, tornando o
 mesmo, visível no ePUB.
É preciso ocultar esse arquivo com o comando

linear=”no” <itemref idref=”toc” linear=”no” />
4 - Divisão do eBook
Normalmente o arquivo de ePUB consiste numa única caixa de texto, encadeadas,
para assim tornar o conteúdo fluido. Essa é a essência do formato de livro digital.
Apesar do InDesign permitir a quebra do documento baseada em qualquer estilo

de parágrafo, com Sigil podemos refinar ainda mais essa tarefa.
DIVISÃO DE 1 ARQUIVO
Para quebrar um arquivo XHTML em dois arquivos, basta possicionar o cursor no
local da quebra e escolher
ACIMA. Livro contínuo com 2 capítulos no mesmo arquivo

 Menu Edit > Split at Cursor XHTML. ABAIXO. Arquivos separados melhorando a
navegação e leitura do conteúdo.
DIVISÃO DE VÁRIOS ARQUIVOS

Se você deseja quebrar vários arquivos ou um longo arquivo XHTML em arquivos
menores, essa ferramenta pode otimizar seu tabalho.
Em cada ponto de quebra aplique o comando INSERT→ SPLIT MARKER. Após
a marcação dos pontos use EDIT→SPLIT AT MARKERS. O comando irá quebrar
todos os arquivos de uma só vez. Caso decida mesclar dois ou mais arquivos tam-
bém é possível, veja como.
MESCLANDO ARQUIVOS
Para mesclar arquivos adjacentes ou não é muito fácil. Basta selecionar os arqui-
vos no painel BOOK BROWSER - lado esquerdo da interface - use a tecla CTRL /
Command para selecionar os arquivos, então acesse com botão direito / ctrl+click
a opção MERGE, ou utilize o atalho Ctrl+M.
5 - Capa
2A
Para inclusão da CAPA uti-
lize o conjunto de arqui-
vos KITCAPA (HTML, CSS
e Imagem). 2B
»» Capa - arquivo à
parte com 1000
px de altura e
150 ppi (largura
proporcional).
2C
3A
3B
6 - Dicionários 7 - Verificação ortográfica
Infelizmente o Sigil não oferece por padrão suporte ao Sigil melhora a cada versão sua função de verificação. Uma vez habi-
idioma português-brasileiro para uso de verificação litado o dicionário Português, nas preferências do programa podemos
ortográfica. Contudo podemos instalar dicionários de visualizar as palavras e termos em discordância com nosso dicionário.
outros editores de código aberto.
Acesse a opção TOOLS→SPELLCHECK→HIGHLIGHT MISSPELLED
Através do painel Language no menu EDIT→PREFE- WORDS para visualizar apenas no painel Code View as palavras
RENCES, escolha a opção OPEN PREFERENCES em conflito.
LOCATION e copie os arquivos de dicionário do mate-
ral de aula para a pasta - HUNSPELL_DICTIONARIES. Agora o PAINEL CODE VIEW irá sublinhar em vermelho palavras que
estejam fora do dicionário. O dicionário em português-brasileiro do curso
já está compatível com a nova regra ortográfica.
Semelhante aos demais editores de texto, o Sigil exibe uma lista de

opções e permite adicionar a palavra ao dicionário.
8 - Caracteres especiais
Outra função muito bem-vinda é a possibilidade de
incluir caracteres especiais diretamente no ePUB.
Use o menu INSERT→SPECIAL CHARACTERS para

visualizar o painel com dezenas de caracteres não
acessíveis pelo uso do teclado.
Este comando funciona pelo painel BOOK VIEW E

CODE VIEW. Passe o mouse sobre o caracter para
saber o código e descrição do mesmo.
Para otimizar o uso dos caracteres

especiais é possível criar um CLIP
para cada caracter especial que você
utiliza.
9 - Metadados
Outro ponto forte do Sigil é a aplicação dos metadados.
Item obrigatório para validação do ePUB.
Para editar os metados dos arquivos acesse o item de
Menu TOOLS →METADATA EDITOR
 Menu Tools > Metadata
CAMPOS OBRIGATÓRIOS
Para validação do ePUB sempre preencha esses

quatro campos do Metadados
»» Title
»» Author
»» Language
»» Date Publication
CAMPOS COMPLEMENTARES
Estes também são necessários, para a correta

identificação e publicação do eBook
»» Identifier: ISBN number »» Clique no botão ADD METADATA para

acessar uma grande lista de propriedades
»» Files-as: pode ser utilizado para
e informações que podem ser inseridas ao
classificação do nome do autor, da forma
arquivo ePUB.
“sobrenome, nome”
»» Description
CAPÍTULO 11 XHTML E CSS PARA EPUB
1 - Do que é feito um ePUB?

Após a exportação para o formato ePUB o arquivo do InDesign é literalmente divi-
dido em várias partes para constituir um eBook. Aqui seguem os principais com-
ponentes que formam o ePUB.
Pasta meta-inf
Contém o arquivo container.xml que é o mesmo para todos os ePUBs e não deve
ser alterado. Identifica o arquivo content.opf
O arquivo encryption.xml é gerado pelo InDesign com informações de licença

das fontes embutidas.
Arquivo Mimetype
O arquivo mimetype é igual para todos os ePUBs e não deve nem ser retirado do
pacote, muito menos editado. Contém apenas uma linha de texto - application/
epub+zip
Pasta OEBPS
OEBPS é Open eBook Publication Structure, onde as coisas realmente acontecem.
Nesta pasta estão todos os contéudos editáveis:
»» Todos XHTML com o conteúdo da »» Pasta para áudio e vídeo.

obra. Não devem exceder 300Kb A partir do Sigil 7.0
cada. »» Content.opf - xml que contém
»» Pasta com arquivo CSS com a os metadados e a lista de todo
formatação e aparência do ePUB conteúdo do ePUB
»» Pasta para imagens »» toc.ncx - xml que define a
»» Pasta para fontes navegação, ordem de leitura do
eBook
2 - Arquivo Content.opf
Importante componente da estrutura do arquivo EPUB. Responsável pela indexa-
ção de todo o conteúdo do arquivo EPUB, registro dos metadados e identificação
de pontos importantes da obra, como a Capa, inicio do conteúdo, entre outros.
Formado por quatro principais partes
»» metadata
»» manifest
»» spine
»» guide
METADATA
Recebe os dados do
painel de exportação do
InDesign. Específica a
capa; fontes para iBooks
e data de modificação do
arquivo.
MANIFEST SPINE
Nesta parte encontra-se a referência a todo os arquivos que fazem parte do pacote A espinha dorsal do ePUB, responsável pela or-
EPUB. Cada elemento ocupa uma tag <item>, que recebe os atributos id (identificação dem de leitura/exibição dos arquivos.
única) e href (caminho do arquivo dentro do pacote EPUB). Ainda há o media-type e
Na versão ePUB 3.0 é possível controlar quais
o atributo properties, que é usado em situações específicas, conforme abaixo:
arquivos serão visualizados através do atributo -
Valores para o atriburo properties linear=”no”, também conhecido por conteúdo
properties=”cover-image“ imagem da capa não-linear.
properties=”mathml” páginas com MathML
properties=”nav” sumário externo - navegação - toc
properties=”remote-resources” Streaming de áudio/video (arquivos externos)
properties=”scripted” páginas com javascript
properties=”svg” páginas com SVG
Confira a tabela com os principais media-type utilizados num arquivo EPUB
Media Type Tipo de Arquivo

IMAGENS
image/gif formato GIF
image/jpeg formato JPEG
image/png formato PNG
image/svg+xml formato SVG
CONTEÚDO
application/xhtml+xml aquivos XHTML
application/x-dtbncx+xml arquivo NCX (sumário do ePUB 2.0)
text/css Folhas de estilo CSS
FONTES
application/vnd.ms-opentype Fonte Open Type
application/font-woff Fonte WOFF
MULTIMIDIA / INTERATIVIDADE
audio/mpeg arquivos de áudio mp3
video/mp4 arquivo de video mp4 (codec H264)
text/javascript arquivos Javascript
GUIDE 3 - Relação InDesign & XHTML / CSS
A função da tag <guide> é identificar partes importantes Um dos maiores desafios na produção de livros digitais, por desginers grá-
do documento. Em outras palavras, adicionar semântica ficos e diagramadores, está no entendimento da relação entre InDesign e
ao conteúdo do ePUB. Arquivos comumente marcados XHTML/CSS.
são a Capa (type=”cover”); Sumário (type=”cover”);
Prefácio; notas de rodapé, entre outros. XHTML é uma linguagem de marcação, apenas aplica rótulos - tags - para
identificação e reconhecimento dos leitores.
Contudo para a versão ePUB 3.0 a tag <guide> é de-
preciada pela adoção do epub-type. Uma extensa lista CSS se utiliza das marcações do XHTML para aplicar formatação - aparên-
semântica com identificação das diferentes partes de cia (cores, estilos, tamanho) e posicionamento (margens, espaçamentos)
uma publicação. dos objetos - textos, imagens, tabelas - do documento.
XHTML CSS
CONTEÚDO E
FORMATAÇÃO JUNTOS
CONTEÚDO FORMATAÇÃO
A estrutura abaixo mostra a marcação do CONTEÚDO, com uso das tags
HTML, junto com a FORMATAÇÃO (leia-se, CSS), com a aplicação do estilo
pelo atributo CLASS.
MARCAÇÃO COMPLETA ENTRE INDESIGN, XHTML E CSS
»» Estilo de parágrafo - texto <p class=”texto”> texto texto texto </p>
»» Estilo de caracter - bold <span class=”bold” > texto </span>
»» Estilo de Objeto - caixa <div class=”caixa” > texto - imagem </div>
»» Estilo de Tabela - tabela <table class=”tabela” > ... </table>
»» Estilo de Célula - cabeça <td class=”cabeca” > texto </td>
»» Iten do Sumário - tit01 <h1 class=”tit01” > texto </h1>
.indd
h1.tit01 {
color:#d9002a;
font-family:"DejaVu Sans", sans-serif;
font-size:1.333em;
font-style:normal;
.xhtml
font-variant:normal;
font-weight:bold;
line-height:1.2;
margin-bottom:14px;
.css
margin-left:0px;
margin-right:0px;
margin-top:14px;
text-align:justify;
text-decoration:none;
text-indent:0px; }
4 - Sintaxe do CSS
Considero o entendimento do CSS fundamental para
a correta produção do formato ePUB. Por isso vale
o esforço de entender mais sobre a estrutura dessa
linguagem.
h1.tit01 { Seletores - identificam a parte do conteúdo que será

1 color:#d9002a; 1 formatada pelas propriedades. Usam as tags de HTML
font-family:"DejaVu Sans", sans-serif; »» p
2 font-size:1.333em; »» span
font-style:normal;
»» div
font-variant:normal; 3
»» h1 - h6
font-weight:bold;
line-height:1.2; »» table
margin-bottom:14px; »» body
margin-top:14px; combinadas com os estilos criados no InDesign - no
text-align:justify; CSS recebem o nome de class. Class NÃO podem
text-indent:0px; } começar com números ou espaços.
MODELO DE CAIXA Propriedades - atributos de formatação — fontes,

2 tamanho, margem, fios, bordas, posição, etc.
As propriedades são várias e sempre são declaradas

com o sinal de dois pontos, no final.
Valores - cada propriedade recebe um valor, coforme

3 o tipo de formatação.
Para completar a sentença de propriedade e valor

coloque o sinal de ponto e vírgula para indicar o
fim da formatação.
CLIPS
Clips é uma produtiva função do Sigil que permite
você guardar pedaços de código - SNIPPETS - dentro
do documento para uso futuro.
Vamos conhecer algumas funções do Clip
CLIP EDITOR
No painel CLIP EDITOR, clique em ADD ENTRY para

adiconar uma formatação pré-configurada. Clip Edi-
tor trabalha com marcações em HTML.
 Menu Tools > Clip Editor
CLIP BAR EXEMPLOS TÍPICOS PARA CLIPS
Habilite essa opção no menu VIEW→TOOLBARS→-

CLIPS para exibir em formato de botão os primeiros
20 Clips que não estejam aninhados num grupo.
Destacar uma parte do texto, formatações
de listas através do CLIP torna a tarefa
muita mais fácil e produtiva.

Caracter especial - \1
Os botões irão mostrar o NOME DO CLIP, por isso Marcação
defina nomes curtos para otimizar o espaço na barra Trata-se de um caracter
<span class=”marcador”>\1</span> de troca, pois permite a
de propriedades.
aplicalção do CLIP, em
qualquer parte do texto.
Formatação CSS
CLIP WINDOW
span.marcador {
Outra forma de adicionar Clips no ePUB é através
background-color:yellow;
do painel Clips. Acesse pelo menu VIEW→CLIPS e
padding:0.1em;
visualize todos os clips disponíveis. Muito prático.
}
BORDAS
LISTAS
Uso de caracteres unicode
http://www.alanwood.net/unicode/dingbats.html
http://www.alanwood.net/unicode/#links
li.lista:before {
content: '\272A';
padding-right: 3px; }
Estilos de Objetos - CSS3

A versão CC suporta demais efeitos de layout como:
bordas arredondadas.
Sombra deverá ser aplicada via comando de CSS3.
VEJA O SITE - HTTP://LAYERSTYLES.ORG
Leitura não linear

O arquivo linkado fica oculto e aparece em pop-up
Edição realizado no arquivo CONTENT.OPF
<spine toc="ncx">
<itemref idref="tabela" linear="no" />
CAPÍTULO 12 MULTIMÍDIA
1 - Áudio DICA
Estrutura para arquivos de ÁUDIO
A partir do InDesign CS6 podemos trabalhar com ar-
quivos de áudio inseridos diretamente no documento »» Formatos
do InDesign e exportados para ePUB. Contudo esse MP3 e M4A - Há uma recomendação da Apple para o formato .M4A,
suporte ficou mais estável na versão CC 2014. contudo ambos funcionam.
Tanto o formato ePUB2 e principalmente a nova versão »» Visualização

- ePUB3 já utilizam a tag de media <audio> </audio> iBooks, Nook Color tablets, Kobo app reader, Gitden (android) e
para marcação dos arquivos de áudio. Readium (extensão do browser Chrome).
HTML
<div class="_idGenObjectLayout-3"> FALLBACK
Não esqueça
<audio id="_idAudio000" controls="controls" de aplicar o
autoplay="autoplay" Fallback no
áudio e vídeo.
loop="loop"> Veja no PDF -
Indd-Html-Css
<source src="audio/Be_Happy_1.mp3" type="audio/mpeg" />
</audio>
</div>
CSS div._idGenObjectLayout-3 { #_idAudio000, #_idVideo000 {

text-align:center; width:100%;
margin: 20px 0 30px 0; } display: inline-block; }
2 - Vídeo DICA
A partir do InDesign CS6 podemos trabalhar com Estrutura para arquivos de Vídeo
arquivos de vídeo inseridos diretamente no arquivo
de InDesign e exportados para ePUB. Contudo esse »» Formatos
suporte ficou mais estável na versão CC 2014. MP4 e M4V ambos com codec H.264
Tanto o formato ePUB2 e principalmente a nova versão - »» Visualização

ePUB3 já utilizam a tag de media <video> para marcação iBooks, Nook Color tablets, Kobo app reader, Gitden (android) e
dos arquivos de video. Readium (extensão do browser Chrome).
HTML
<div class="_idGenObjectLayout-3">
<video id="_idVideo000" poster="image/3589.png"
controls="controls" autoplay="autoplay" loop="loop">
<source src="video/cycling.mp4" type="video/mp4" />
</video>
</div>
CSS div._idGenObjectLayout-3 { #_idAudio000, #_idVideo000 {

text-align:center; width:100%;
margin: 20px 0 30px 0; } display: inline-block; }
PRINCIPAIS TAGS DO HTML
PREPARAÇÃO NO INDESIGN CC
1. Ajustar o perfil do documento para web [Unidade em pixels 11. Criar estilos de objetos para formatação dos objetos.
- botão direito na régua] Configurar a aba - EPUB and HTML - aplicar as tags
Section, Article e Aside, conforme o conteúdo
2. Aplicar o encadeamento no texto nos capítulos. Deixar a
parte pré-textual e pós-textual em caixas de texto separadas. 12. SUMÁRIO - Associar os estilos de parágrafo que farão parte
do sumário as tags do HTML - h1. h2, [Paragrapf Styles >
3. Uso de fontes OpenType ou TrueType - preferência por fontes Submenu > Edit All Export Tags]
livres (open source)
13. SEMÂNTICA - Aplicar as tags de itáligo <em>, negrito
4. Verificar parágrafos em branco (vazios) e eliminá-los <strong>, imagens <figure>, legenda <figcaption>,
[Edit >Find/Change - opção GREP - Multiple Return] [Paragrapf Styles > Submenu > Edit All Export Tags]
5. Usar o script Preptext para aplicar os estilos de Bold, Italic e 14. DIVISÃO CAPÍTULOS - Escolher quais estilos de parágrafo
BoldItalic [Window > Utilities > Scripts > PrepText] serão utilizados como divisores do documento
[Paragrapf Styles > Submenu > Edit All Export Tags]
6. Usar o script RenameStyle para corrigir os nones dos estilos
[Window > Utilities > Scripts > RenameStyles] 15. Criar estilos de tabela e células. Inserir as tabelas direto
na massa de texto (inline).
7. Verifique se não há violações nos estilos de parágrafo e
caractere [Painel Estilo de Parágrafo/Caractere] 16. Aplicar hyperlinks para sites e referências cruzadas
[Window > Interactive > Hyperlinks]
8. Confira o formato e resolução das imagens — máximo de
1200 pixel com 150 ppi 17. Aplicar notas de rodapé. [Type > Insert Footnote...]
9. Aplicar as imagens INLINE junto com o texto [copiar com 18. Incorporar o estilo de CSS - css-padrao.css - durante a
seta preta e colar com ferramenta de texto] exportação do arquivo para correção e ajustes na formatação
do ePUB
10. Aplicar vinhetas, fotos com legenda e demais objetos
ANCORADOS (box azul) - junto ao parágrafo que deseja
posicionar o objeto [arrastar o “box azul” do objeto para
um parágrafo novo]
CAIXA DE FERRAMENTAS
SITES SOBRE EPUB VALIDADORES

http://www.idpf.org/ http://bit.ly/ePUBChecker - offline
http://bit.ly/videos-ebook http://validator.idpf.org/ - online até 10MB
http://bit.ly/videos-html https://ebookflightdeck.com/
http://bit.ly/dualpixel_ebooks http://epubtest.org/
PROGRAMAS POST-EDIÇÃO, SITE SOBRE XML, XHTML, CSS, ...

http://www.w3schools.com/
FINALIZAÇÃO DO EPUB
http://timtec.com.br/
Sigil: Gratuito. Programa para a edição do ePUB 2 -
ePUB 3
http://sigil-ebook.com
Brackets: Gratuito. Programa para a edição do

código XHTML, CSS e XML
http://brackets.io/
www.dualpixel.com.br
Este material foi produzido de forma criteriosa e cuidadosa. Contudo, erros durante a diagramação, digitação e impressão podem ter acontecido. Os autores não
assumem qualquer responsabilidade por eventuais danos ou perdas a pessoas ou bens, originados do uso ou das informações contidas nesta publicação.
Todos os nomes registrados e marcas registradas ou direitos de uso citados nesta publicação pertencem aos seus respectivos
proprietários.
©dualpixel - julho de 2017

Apostila Ebook 2017-Ead

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Ebook 2017-Ead

Enviado por

Direitos autorais:

Formatos disponíveis

www.dualpixel.com.

Capítulo 7 exportação do arquivo epub

Versão 16 - Julho de 2017

»» Destinado a designers, editoras, agências e »» Inserir Metadados obrigatórios.

»» Adaptar o formato ePUB para plataforma Amazon/Kindle - mobi/KF8.

1 - QUE É UM EBOOK ? Formato EPUB 3 - Recursos

»» Mantém a compatibilidade com leitores

»» Suporte a formatação com CSS 3

»» Multimidia. uso das tags <video> e

»» ePUB de Layout Fluido

»» ePUB de Layout Fixo

Layout Fixo Layout Fluido

O Trabalhoso O Amador O Técnico O Expert O Profissional

»» Exportar as imagens. »» Muito genérico. »» Poucos recursos »» Gratuito »» Produção do ePUB

ESTILOS DESIGN TESTES VALIDAÇÃO DISTRIBUIÇÃO

DESKTOP MOBILE E-READER

KINDLE - Amazon LEV - Saraiva

Nesta categoria de leitores

 NÃO há suporte aos recursos

Readium Kindle Reader Adobe Digital

FECHADAS SEMI-ABERTO ABERTAS

São intermediários Digital Right Management - DRM

»» Amazon - 30% - 70%

No geral, o mercado utiliza os serviços da Adobe

»» A unidade (em) equivale a 100% da fonte

»» Troque as entradas de parágrafo

»» Footnotes são convertidos para

»» Utilize um perfil de preflight para verificar

»» Nunca utilize fontes tipo PostScript - Type 1.

»» Escolha fontes tipo OpenType e TrueType

»» Essa mesma regra vale para as imagens,

»» Criar nomes curtos para estilos e

»» Espaços são substituídos por %20, o que

»» 300 kb é o tamanho máximo de cada

»» Inserir imagens como objetos INLINE.

»» Controlar a posição das imagens através dos estilos de

»» Controlar a posição dos objetos através dos estilos de objetos.

»» Exportar para o formato ePUB com a opção de otimização

»» Imagens com transparência devem utilizar o formato PNG

UNIDADES Porcentagem EM Pixel Viewport Height

»» No campo Intent habilite a opção Web.

»» Em Page Size escolha 640 x 840, orientação

»» Em Margins coloque 20 px em todos os lados,

»» Desta forma a dimensão da página já fica

 File > New > Document

»» Elementos das páginas mestras

»» Elementos vetoriais complexos

»» Numeração automática de páginas

»» Posição das imagens e gráficos

»» FORMATAÇÃO FORA DOS ESTILOS

Habilite a visualização do Texto Encadeado para confirmar

 Menu View > Extras > Show Text Threads

O comando Find/Change NÃO precisa ter o texto

 Menu Edit > Find/Change... 1

 2 Escolha Multiple Return/Space to 2 3

3 Clique em Change All.

Agora, basta copiar os scripts dentro da pasta

RenameStyles — renomeia os estilos de parágrafo

Lista caracter / Lista parágrafo — cria uma

Clear Overrides - elimina as

SUPER DICA - Pode-se selecionar todo o

FORMATAÇÃO BÁSICA CAPITULARES /

Aplique pelo Menu Type > Insert White Space