Navegar é preciso: múltiplas listas no ePUB

Márcio Duarte, em 12/02/2013. Categoria: Blog, Laboratório do eBook, Tutoriais 0

Navegar no ePUB é preciso

Um livro pode ser facilmente comparado a um oceano: um mar de conteúdo aguardando ser explorado. Se você é do tipo aventureiro – e a narrativa é linear –, basta iniciar na página um e ser levado pela maré da história, atavessando o oceano da narrativa até o outro lado: o fim do volume, sem ao menos passar pelo sumário.

Mas esse não é o caso para boa parte dos livros. Didáticos, por exemplo, se beneficiam muito da múltiplas listas de figuras, quadros, tabelas e gráficos. Estes instrumentos de navegação adicionais ajudam muito o leitor a se localizar ou simplesmente explorar o livro sob outro ponto de vista.

É importante que, no eBook, os itens dessas listas se tranformem em hiperlinks para facilitar/direcionar a busca pelo conteúdo. Como a navegação pelo conteúdo de um livro eletrônico não é tão intuitiva como em um livro tradicional, elas são fundamentais.

Bússola defeituosa

No mundo do livro impresso, não há muito segredo em criar estes elementos de navegação, os principais programas de edição de texto trazem as ferramentas para isso. Mas no digital, a questão não é muito simples se estes livros foram construídos no Indesign.

O programa da Adobe é bem omisso na tarefa de exportar essas listas para o formato ePUB com seus respectivos links. Apesar de permitir a criação de múltiplos sumários no documento, ele permite escolher apenas uma das diversas listas do livro na janela de exportação (CS5.5 ou superior, figura 1), que será usada para gerar o sumário padrão do ePUB (o arquivo .ncx, no ePUB2, e o arquivo de navegação em HTML, no ePUB3). As demais listas são simplesmente ignoradas no código XHTML gerado pelo Indesign.

Janela de exportação de ePUB do Indesign CS6

Figura 1: Janela de exportação para ePUB do Indesign CS6 – escolha apenas uma lista

Claro, é possível recriar todos os links de cada item das listas manualmente, com a ajuda do recurso de referências cruzadas, mas isso está muito longe do ideal. Felizmente, há uma forma alternativa de suplantar as deficiências do Indesign, ao menos no quesito “listas”, como veremos a seguir.

Reorientação com o Sigil

As múltiplas listas de navegação de um documento do Indesign podem ser facilmente recriadas posteriormente no ePUB exportado, utilizando o Sigil. O segredo é, ainda no Indesign, antes da exportação, mapear tags de cabeçalho (headings, <h1> a <h6>) nos estilos de parágrafo dos itens de cada lista desejada: uma tag “h” para cada tipo de lista (figura 3), usando a opção “Editar todas as marcas de exportação”, no menu do painel de estilo de caractere ou de parágrafo. A ordem aplicação dos níveis de tags de cabeçalho nos estilos que serão usados nas listas não é importante

Janela de mapeamento de tags do Indesign CS6

Figura 2: Mapeando os estilos de parágrafo com as tags de cabeçalho antes da exportação

Os frames com as listas geradas originalmente pelo Indesign devem ser removidos antes da exportação. A seguir, exporte o ePUB pelo Indesign e siga os seguintes passos:

1 Gerando novo sumario interno

Abra o ePUB no Sigil e acione o gerador de sumário no menu “Tools > Table of contents > Generate Table of contents” (“Ferramentas > Sumário > Gerar sumário” . Crie a primeira lista, selecionando a tag de cabeçalho que atribuiu à ela no Indesign, excluindo todos os demais níveis (figura 3).

Gerador de sumários do Sigil

Figura 3: seleção das tags de cabeçalho correspondente aos elementos da lista

2 Gerando novas listas em XHTML

Logo em sequida, acione a opção para gerar a lista em HTML no menu “Tools > Table of Contents > Create HTML table of contents” (“Ferramentas > Sumário > Criar sumário HTML” ). O Sigil criará um novo arquivo (TOC.xhtml) incluindo apenas os elementos da lista desejada (figura 4);

Janela de edição de código do Sigil

Figura 4: Arquivo TOC.xhtml, com código gerado para lista de tabelas.

3 Possibilitando a geração de mais listas

Essa é a parte mais importante: renomeie o arquivo TOC na interface do Sigil (clique com o botão direito em cima no nome do arquivo) e substitua, na seção do content.opf, o trecho de código que faz com que o Sigil reconheça esse arquivo como um sumário propriamente dito, de type="toc" para type="text" (figura 5).

Seção "guide" do content.opf, dentro do ePUB

Figura 5: alterando o código no content.opf

4 Listas adicionais

Para criar mais listas, repita os passos 1 a 3. Ao fim do processo, recrie o sumário principal com o mesmo recurso, a fim de restaurar o arquivo .ncx com todos os níveis de título e subtítulo originais do texto.

Se quiser incluir os títulos das listas como links no sumário padrão, altere as tags dos títulos para <h1>. Assim o Sigil as reconhecerá na interface do gerador de sumário. Para terminar, reorganize os arquivos xhtml na ordem de leitura desejada, no explorador de arquivos do Sigil (Book Browser).

Também é interessante manter a semântica do código, usando o mesmo nível de tags de cabeçalho em todo os títulos de figuras, quadros, tabelas etc, o que se resolve com uma simples busca e substituição.

Uma última observação: como o HTML considera apenas seis níveis de cabeçalho (<h1> a <h6>) e o Sigil não reconhece outras tags na geração de sumários, a quantidade de listas é limitada. É preciso reservar as tags mais importantes para o texto (<h1> para títulos, <h2> para subtítulos nível 2 etc), usando as tags restantes para as listas.

Clique no botão abaixo para baixar os arquivos originais do Indesign e o ePUB final com múltiplas listas de navegação para testar a técnica demonstrada neste artigo:

Baixar arquivo Formato Zip » Tamanho: 1.3mb

Navegação para além-mar

A verdade é que estes modelos de navegação vindos do livro tradicional não são totalmente adequados para o digital, até porque não há mais cola e lombada para ditar a ordem de leitura. Conteúdo vivo – não linear, colaborativo – é o futuro do livro digital, desafiando a forma tradicional como textos são lidos, criados, encontrados e compartilhados. Mas enquanto essa promessa não se solidifica, é preciso ao menos oferecer ao leitor formas práticas e conhecidas de encontrar o que procura.

A especificação ePUB3 vem aos poucos vislumbrando formas mais atualizadas de resolver a questão da navegação, prevendo várias alternativas para explorar o conteúdo do livro, por meio de múltiplas listas, no novo documento de navegação, mas ainda não há solução padronizada para outros itens fundamentais: índices, referências cruzadas, glossários e anotações – estes são assuntos ainda em discussão.

Crédito da foto usada como base para ilustração do artigo: Zach Klein (cc)

Um livro, múltiplas telas

Márcio Duarte, em 26/08/2012. Categoria: Dicas, Laboratório do eBook 0

Cada plataforma tem suas particularidades na apresentação do conteúdo do livro

Acapacidade do ePUB ser realmente multiplataforma é, sem dúvida, a principal promessa do formato, ainda que essa não seja, nem de longe, a realidade. Não seria interessante ter seus livros digitais funcionando consistentemente em todos os programas de leitura, com bela tipografia, conteúdo bem estruturado e legível? É, seria… mas por causa da fragmentação de plataformas e do suporte irregular ao padrão, o que acontece é que, na prática, é difícil manter um mínimo de consistência na exibição do conteúdo, principalmente se ele é um pouco mais complexo visualmente falando, com listas, quadros, tabelas, fontes personalizadas e múltiplos estilos. É a “síndrome do cobertor curto”: estilos complexos aplicados em uma plataforma “A” interferem na visualização do texto na plataforma “B”, e vice-versa.

Ainda que isso esteja longe de ser resolvido, há um recurso muito útil do CSS para lidar com esse problema e garantir que o seu livro matenha um controle mínimo da apresentação do texto, ao menos nas plataformas dominantes: as media queries. Para quem não sabe, as media queries, agora oficialmente recomendadas pelo W3C, são o coração do webdesign responsivo e regulam a aplicação de estilos CSS de acordo com as características do ambiente de apresentação do conteúdo (media types). Assim, é possível ter estilos CSS que, por exemplo, só são aplicados ao conteúdo quando este é impresso ou quando é visualizado em uma tela de celular. A lista de aplicações é enorme e há até previsão para utilização em TVs. Na demonstração abaixo, a media query significa: parágrafos exibidos em uma área de visualização (viewport) de, no mínimo, 1024px de largura (como a do iPad em formato paisagem) devem ter a cor vermelha:

@media screen and (min-width: 1024px) {
p { color: red; }
}

Podemos ativar as media queries dentro do CSS (exemplo acima) ou no próprio XHTML, como no exemplo a seguir:

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="estilos.css" />

Uma media query referenciada na seção <head> do documento XHTML.

Usando as media queries no ePUB

O recurso é poderoso, mas não faz parte da especificação ePUB 2.0.1, e sim do ePUB3. Portanto, ainda não é suportado em boa parte dos eReaders que usam o Adobe RMSDK (ou Adobe Reader Mobile Software Development Kit), um dos principais motores de renderização do mercado, mas que ainda não foi atualizado para ePUB3. Apesar disso, já podemos usar as media queries a nosso favor para aperfeiçoar a apresentação do livro nos sistemas de leitura que as suportam, como o iBooks e o Readium. O segredo é criar duas folhas de estilo: uma voltada a eReaders que reconhecem o recurso (geralmente os baseados no Webkit) e outra voltada aos eReaders que usam o RMSDK (Nook, eReaders da Sony, Positivo Alfa, Adobe Digital Editions, Saraiva Reader, Cultura Reader, Bluefire e outros).

A primeira folha de estilos deve conter todo o CSS padrão do livro e a segunda, os estilos para os eReaders que suportam media queries. Para que essa técnica funcione, é preciso que as media queries sejam aplicadas em uma folha de estilo separada, referenciada no XHTML após a primeira, com os estilos padrão. Ela é inefetiva se todo o código estiver em apenas um CSS (o RMSDK simplesmente o ignora dessa forma). Veja um exemplo:

<link href="padrao.css" rel="stylesheet" type="text/css" /> <!-- CSS padrao -->
<link href="otimizado.css" media="all and (min-width: 240px)" rel="stylesheet" type="text/css" /> <!-- CSS otimizado -->

Este pedaço de código deve ser inserido no <head> de todos os arquivos XHTML. Os estilos vão nos respectivos arquivos CSS. Não se esqueça de referenciá-los na seção manifest do arquivo .opf

Os eReaders com RMSDK vão simplesmente ignorar a segunda folha de estilos (otimizado.css), que pode ser utilizada para melhorar ou resolver problemas na formatação do livro nos eReaders com Webkit, que permitem uma gama de possibilidades de formatação muito maior, desde listas com marcadores personalizados, gradientes sem o uso de imagens, até quadros com cantos arredontados. Dessa forma, é possível aplicar o conceito de melhoria progressiva (Progressive Enhancement) aos eBooks, e ter versões mais refinadas tipograficamente nos leitores mais avançados, sem prejudicar a formatação e a acessibilidade dos livros nos eReaders menos capazes. Livros apresentados no iBooks, particularmente, podem ser muito beneficiados dessa técnica, já que o suporte a CSS no leitor da Apple é muito mais avançado que os demais.

Demonstração de tipografia avançada para Webkit (iBooks)

Figura 1: um exemplo de tipografia avançada para o motor Webkit, que utiliza apenas CSS. Soluções assim já funcionam no iBooks. (clique na imagem para visitar o site de origem)

Obviamente, essa técnica tem suas limitações quando falamos de livros digitais, pois nem sempre é possível resolver todos os problemas de apresentação visual somente no CSS; há casos onde é necessário alterar também o código XHTML para solucionar bugs de formatação. Sem falar na insistência de alguns programas e dispositivos em ignorar por padrão o CSS original do livro, impondo cegamente sua própria folha de estilos, como acontece no eReader Nook e no aplicativo Aldiko, no Android.

Painel do leitor Nook

Figura 2: O famigerado publisher defaults, sempre desligado por padrão, no Nook. Não há media query que dê jeito…

Apesar das limitações dos eReaders, as media queries devem se tornar cada vez mais necessárias no mundo dos eBooks, na medida em que observamos a proliferação de aparelhos (o iPad mini vem por aíjá veio ao mundo), programas voltados à leitura com suporte a EPUB3 e livros lidos a partir do próprio navegador. Diante desse cenário de múltiplas telas e resoluções, toda carta na manga é bem-vinda.

Extras

Para saber se o seu eReader suporta media queries, baixe o ePUB de teste no link abaixo e abra-o no programa/dispositivo de leitura. O arquivo possui os exemplos de código utilizados neste artigo.

Baixar arquivo Formato ePUB » Tamanho: 310kb

ePUB3: a evolução das publicações digitais

Márcio Duarte, em 15/06/2012. Categoria: Laboratório do eBook, Resenhas 9

A sigla do momento em termos de produção de eBooks é ePUB3, a nova versão do padrão aberto de publicações digitais que promete romper diversas limitações da implementação atual: maiores recursos para layout e estruturação do conteúdo, interatividade, animações, áudio, vídeo, tipografia avançada, suporte a fórmulas matemáticas, narração de texto em voz alta, acessibilidade, entre outros goodies, abraçando uma maior diversidade de publicações, para múltiplas plataformas, em qualquer idioma, não só para livros de texto plano como esse formato tem sido geralmente aplicado.

Apesar da novidade, o fato é que ainda estamos em um estágio muito preliminar da adoção desse novo padrão (ok, estamos em um estágio preliminar em relação a eBooks de forma geral, mas essa é outra história). No momento em que escrevo este artigo, nenhum programa disponível é capaz de gerar um ePUB3 válido automaticamente (o Indesign CS6 oferece uma exportação nativa, que, apesar de experimental, pode gerar um ePUB3 válido para livros mais simples). Mas esse problema deve ser resolvido em breve. Alguns desenvolvedores anunciaram suporte nativo para criação de ePUB3, temos um leitor (Readium) e um validador (ePUBCheck) oficiais, uma utilíssima tabela de suporte aos novos recursos entre os principais dispositivos do mercado, além de dois outros programas de leitura que já suportam o formato (iBooks e AZARDI) e um bonus: a Apple anunciou aos desenvolvedores que começará a aceitá-los na sua iBookstore. Estes são sinais de que o mercado está mesmo adotando o novo padrão.

Do ponto de vista prático, as mudanças no arquivo do livro em si não são tão radicais como parecem, como veremos nesse artigo. A complexidade aparece quando os novos recursos disponibilizados pela especificação são considerados no código própriamente dito. Aí o desenvolvimento de um ePUB3 pode realmente ser visto como produção de software, e não somente produção editorial.

Vamos revisar em linhas gerais algumas das principais dúvidas sobre a nova versão, com respostas às perguntas mais óbvias – lembrando que as respostas consideram algum nível de intimidade com o código:

O que difere um ePUB2 de um ePUB3?

Apesar de oferecer uma série de novos recursos, um ePUB3 se assemelha bastante ao velho conhecido ePUB2: um arquivo compactado com a mesma extensão .epub, e a mesma estrutura básica de pastas, com eventuais imagens, fontes, vídeos e arquivos de texto. É relativamente simples transformar um ePUB2 comum em ePUB3 com poucas mudanças em partes do código – desde que não sejam adicionados novos recursos “pirotécnicos”, claro. Há um bom grau de interoperabilidade entre as versões, que “conversam” relativamente bem. A vantagem principal do ePUB3 é oferecer novas soluções padronizadas para os recursos avançados que citamos no início do artigo, baseados em padrões abertos.

Um epub3 descompactado e seus arquivos

Figura 1: um ePUB3 por dentro. Mais do mesmo, não?

Então um ePUB2 vai ser lido em um leitor ePUB3?

Sim, já que a nova especificação orienta que os novos programas de leitura ofereçam suporte retroativo à versão 2.

E um ePUB3, pode ser aberto nos eReaders atuais, que só suportam ePUB2?

Até pode, mas os eReaders do momento não foram pensados para os recursos do ePUB3. O livro provavelmente apresentará problemas de toda espécie, que vão variar de acordo com o eReader e o conteúdo da publicação. A especificação anterior, (ePUB 2.0.1) não previu compatibilidade com versões futuras, embora exista alguma flexibilidade nesse aspecto. Se deseja mesmo manter uma compatibilidade cruzada entre as versões, é necessário planejá-la de antemão e testá-la intensamente, ainda que isso seja válido para publicações sem muitos recursos de interatividade ou layout. Uma lista de melhores práticas nesse quesito pode ser vista no fórum do IDPF.

O que posso fazer de interessante em um ePUB3?

A lista de possibilidades é imensa, mas isso vai realmente depender do sistema de leitura, já que uma parte das funcionalidades não é obrigatória, como o suporte a Javascript, por exemplo. De forma geral, você pode implementar idéias interessantes como:

  • Um livro ilustrado com animações e narração em áudio que acompanha o texto;
  • Livros com texto em diversos idiomas, com caracteres especiais e até com ordem de leitura invertida – de trás para frente, como em um mangá;
  • Híbridos (app/livro) como, por exemplo, um material promocional para músicos, simulando um disco de vinil animado (single).
  • Mini-jogos, enquetes e simulações junto ao texto, muito úteis em conteúdos educacionais;
  • Publicações com streaming de vídeo e áudio, baixados on demand.
  • Um romance onde partes do conteúdo é alterado de acordo com a localização do dispositivo.

Figura 2. Vídeo com um exemplo das potencialidades do formato

Quanto à compactação/descompactação do arquivo?

Não muda. Podem ser utilizadas as mesmas ferramentas e processos de antes.

O que acontece com o sumário (arquivo NCX)?

No ePUB3, o sumário deve ser criado em um arquivo XHMTL comum, que pode ser estilizado assim como o texto. Este arquivo pode ou não ser inserido no fluxo do texto, via tag <spine> do arquivo .opf. Para compatibildade com o ePUB2, recomenda-se manter também o sumário no formato NCX, já que os futuros eReaders de ePUB3 devem ignorá-lo por padrão, mas ele não é mais obrigatório. A criação do novo documento de navegação pode até ser automatizado por scripts, com base no NCX do ePUB2.

Quanto ao arquivo .opf (package document)?

É mantido no ePUB3 e a estrutura é a mesma do ePUB2, com modificações. Algumas propriedades se tornaram obsoletas, mas podem ser mantidas para efeito de compatibilidade, pois não interferem no funcionamento do ePUB3, sendo um exemplo a seção <guide>. Já outros elementos precisam ser atualizados, como a propriedade “version”, na qual é especificada a versão do ePUB. É ela que efetivamente ativa o suporte às novas funcionalidades.

O que acontece com os demais arquivos obrigatórios (mimetype, conteiner.xml)

Permanecem intocados, nos mesmos locais de sempre.

Os arquivos HTML do conteúdo de um livro na versão 2 precisam mudar para se adaptar ao ePUB3?

De forma geral, o conteúdo dentro das tags <head> e <body> de uma publicação de texto puro, em ePUB2, pode ser mantido, mas a seção inicial dos documentos deve ser obrigatoriamente alterada para se adeaquar ao ePUB3. Como a mudança é padrão para todos eles, pode ser automatizada com a ajuda de expressões regulares, via GREP. É recomendável também usar sempre a extensão .xhtml para todos os arquivos do conteúdo.

Confira um exemplo de código recomendado para o início dos documentos .xhtml, para livros em português brasileiro:

ePUB2

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN"
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

ePUB3

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="pt-BR" lang="pt-BR">

Acessibilidade

Ainda que o mesmo conteúdo de um ePUB2 possa ser interpretado corretamente pelos programas leitores de ePUB3 sem muitas alterações, ao adaptá-lo para a nova versão, é importante repensá-lo à luz da acessibilidade promovida pelas novas tags disponíveis no HTML5, como <section>, ou pela propriedade epub:type, que descrevem semanticamente a função do conteúdo que enclausuram e oferecem métodos alternativos para a interpretação do código pelos sistemas de leitura. Pessoas com deficiência visual agradecem, pois a otimização da estrutura do conteúdo vai facilitar a interpretação audível e a navegação em dispositivos com tecnologia assistiva como o iPad e seu Voice Over. Sem falar que um conteúdo bem estruturado facilita a estilização e a adaptação do livro para outros formatos. Um guia bem interessante de acessibilidade no ePUB pode ser visto aqui. Vale a leitura.

O futuro das publicações digitais? Mesmo?

Tudo isso é muito bonito, mas não seria contraprodutivo investir em uma tecnologia que se baseia em arquivo, diante da promessa do conteúdo na nuvem, acessível em qualquer lugar, apontando para o futuro? Talvez, mas no momento, nenhuma outra solução apresenta o mesmo conjunto de qualidades oferecidas pelo ePUB quando se fala de leitura digital com portabilidade e adaptação automática do conteúdo à múltiplos dispositivos, ou seja, sem necessidade de conexão, considerando diferenciais importantes como padrões abertos, acessibilidade, estruturação e navegação de conteúdo, além dos imprescindíveis metadados. Portabilidade ainda é – e talvez sempre seja – fundamental quando consideramos os altos custos e cobertura das conexões móveis. Mas esta é uma questão que permanece em aberto e só teremos uma boa resposta para essa pergunta nos próximos capítulos desse livro.

Para saber mais