7 dicas salva-vidas para projetos de eBooks com iBooks Author

Márcio Duarte, em 09/11/2013. Categoria: Tutoriais 37

Dicas salva-vidas para iBooks Author

Após quase um ano envolvido diretamente com projetos de eBooks para iBooks Author – sobre o qual já falei várias vezes aqui no blog –, é hora de compartilhar algumas dicas úteis que resultaram dessas experiências.

O software é geralmente intuitivo, mas há algumas armadilhas escondidas pelo processo, que só são reveladas durante o trabalho (ugh!). Além disso, algumas operações que seriam simples à primeira vista demandam soluções um pouco mais criativas. Vamos às dicas:

1. Limite a quantidade de elementos multimídia para uma melhor performance de leitura

Por oferecer várias alternativas para conteúdo rico, é fácil aplicar esses recursos indiscriminadamente no iBooks Author. O excesso de imagens, vídeos, áudio, widgets e fontes pode prejudicar fortemente a performance do arquivo e dificultar o download, particularmente em iPads com conexão 3G.

De forma geral, é recomendado usar apenas os recursos que contribuam de verdade para o conteúdo, evitando o “oba-oba” de elementos sem propósito algum.

No caso de livros extensos, com muitos recursos multimídia, é recomendável ficar atento ao tamanho do arquivo final no formato .ibooks, a fim de mantê-lo em níveis aceitáveis, pois, por mais interessante que seja, poucos terão paciência para baixar um livro de 500 mb via 3G…

Confira no site da Apple mais orientações específicas sobre tamanho e performance de arquivos.

2. Faça microcorreções no livro fora do Mac

Vamos supor que seja necessária alguma alteração simples porém urgente no livro, e você só possui um PC à disposição. Se a correção for simples, pode ser feita no Windows mesmo.

A exemplo do ePUB, o arquivo gerado pelo iBooks Author para distribuição final, no formato .ibooks, não passa de um arquivo compactado (.zip) com arquivos XML, XHTML, imagens, fontes e vídeos.

Assim, pequenas alterações no texto do livro – como, por exemplo, a substituição ou a adição de acentos, pontos por vírgulas, traços por hífens, e palavras não editáveis pela interface do iBooks Author (leia a dica 3) – podem ser feitas em qualquer editor de código, em qualquer sistema operacional.

Apenas tome cuidado para não realizar edições muito radicais no texto, ou remover outras partes do código necessárias, pois sem dúvida elas afetarão o layout e podem até mesmo invalidar o arquivo.

Basta mudar a extensão de .ibooks para .zip para descompactar os arquivos do livro, que podem então ser editados no seu editor de código preferido, como o Notepad++, no Windows (figura 1).

Editando o conteúdo de um arquivo do iBooks no Windows

Figura 1. Editando o código do arquivo .ibooks no Notepad++ , no Windows

Após a edição do código, a recompactação pode ser feita por meio de algum dos vários utilitários de compactação de ePUB gratuitos disponíveis pela web. Ao fim desse processo, basta renomear a extensão do arquivo novamente para.ibooks para permitir que o iBooks o reconheça sem problemas.

3. Antes de iniciar um projeto, confira se o idioma do Mac OS é o mesmo do livro

Essa dica é fundamental! Verificar o idioma deve ser o primeiro passo em qualquer projeto (figura 2).

Janela de preferências de idioma no Mac OS X

Figura 2. Alterando o idioma do sistema nas preferências do Mac OS X.

O programa usa alguns rótulos de texto automáticos para descrição de seções e capítulos do livro, como as palavras “capítulo” e “seção“, localizados antes do número (figura 3).

Estes rótulos são extremamente úteis para numerar automaticamente os capítulos e seções.

O problema é que estes rótulos dependem do idioma do sistema. Se este está em inglês, por exemplo, eles serão configurados nesse idioma, definitivamente, e não há como alterá-los no iBooks Author, mesmo alterando o idioma do Mac após o arquivo ter sido salvo. :(

Rótulos automaticos no iBooks Author

Figura 3. Rótulos automáticos no iBooks Author

Mas se você já criou o seu livro de 800 páginas, em português, com seções no idioma em inglês, não se desespere. :) Ainda é possível alterar esses rótulos no código fonte do arquivo .ibooks gerado ao final do trabalho (figura 4), com a ajuda de um editor de texto, conforme descrevi na dica 2.

Editando o código no Sublime Text, no Mac

Figura 4. Buscando o texto a ser trocado no código HTML do livro.

4. Utilize um widget HTML para embutir PDFs

É possível embutir um PDF de múltiplas páginas no livro com a ajuda de um widget HTML personalizado. A técnica é muito simples e preparei um modelo de widget pronto para isso no link abaixo.

[download id="8" format="2"] Formato Zip » Tamanho: 25kb

Para usá-lo, faça o seguinte:

  • Renomeie o seu PDF para arquivo.pdf;
  • Baixe o widget e, no Finder, descompacte o zip;
  • Clique com o botão direito sobre o ícone do widget e escolha a opção “Mostrar conteúdo do pacote/Show package contents“ no menu contextual (figura 5);
  • Arraste seu PDF para o diretório-raiz do widget – substituindo o que está lá – e feche a janela. Pronto! Ele pode ser importado/arrastado para o documento do iBooks Author.

Menu contextual do Finder, no Mac OS X

Figura 5. “Mostrar conteúdo do pacote“ de um widget, no Finder

5. Use botões ocultos para visualizar tabelas, gráficos, vídeos e widgets em tela cheia

Em certas situações, pode ser interessante omitir tabelas, imagens, vídeos e outros elementos extra-textuais do fluxo normal de leitura, e criar links simples para eles dentro do próprio texto, abrindo-os em tela cheia, seja para economizar espaço ou para criar um visual mais “limpo”.

Nativamente, o iBooks Author oferece a opção de criar miniaturas de vários elementos e abrí-los em tela cheia, mas eles ainda ocupam espaço no layout.

É possível resolver a questão inserindo imagens transparentes no lugar dessas miniaturas. Assim, uma tabela, por exemplo, pode ser visualizada em tela cheia a partir de um trecho do próprio texto.

Como é mais simples mostrar do que descrever essa técnica, assista ao vídeo a seguir e baixe o arquivo .iba de exemplo para conferir a técnica na prática. A sequência de passos também está logo abaixo do vídeo.

[download id="9" format="2"] Formato Zip » Tamanho: 8mb

  • Crie uma imagem PNG transparente no seu editor de imagens. Escolha um tamanho equivalente ao ocupado pelo link no texto, pois ela será a área clicável para o leitor. Dimensões um pouco maiores facilitam o clique;
  • No iBooks Author, adicione um estilo qualquer ao texto que funcionará como um hyperlink falso – por exemplo, com uma cor, simulando um link real;
  • A seguir, selecione o elemento (imagem, vídeo, gráfico, widget) que deseja abrir em tela cheia e, no painel Inspetor, acione a opção de “Mostrar objeto como miniatura/Show object as Thumbnail”;
  • Substitua a miniatura padrão pelo PNG transparente criado no passo 1 e posicione o widget (que ficará invisível) abaixo do link.

6. Adicione formas complexas no documento (com a ajuda do Apple Keynote)

É fácil inserir ou desenhar formas básicas no iBooks Author, como quadrados, círculos, estrelas ou polígonos, mas formas um pouco mais complexas são inviáveis de se criar com precisão utilizando as ferramentas nativas.

Mas há uma solução para isso. Usando um pequeno script no Mac, é possível importar qualquer forma vetorial SVG (criadas no Inkscape ou Adobe Illustrator) para o Keynote. Daí, basta simplesmente copiar e colar diretamente para o iBooks Author, que é capaz de reconhecer objetos do Keynote nativamente. Essa formas mais complexas podem ser usadas para mascarar imagens e outros efeitos interessantes (figura 6).

Máscara complexa para imagem no iBooks Author

Figura 6. Forma complexa sendo usada como máscara para uma fotografia.

O script para colocar em prática essa dica é gratuito e pode ser baixado no site do autor. Há também uma versão para exportação nativa a partir do Adobe Illustrator.

7. Trabalhando com objetos em 3D dentro do livro

O iBooks Author permite a importação de objetos em 3D – no formato Collada (.dae) – que podem ser manipulados pelo leitor.

Embora permitam aplicações interessantes, esses objetos podem comprometer a performance do livro caso sejam muito complexos, ou, como dizem os experts em 3D, com “um alto número de polígonos”.

Segundo a documentação do programa, é preciso manter essa contagem de polígonos abaixo de 20.000 para suportar todas as versões do iPad, o que acaba limitando o uso desse recurso na verdade, pois modelos mais interessantes visualmente são naturalmente mais complexos.

A melhor opção é mesmo usar apenas objetos 3D simples. Um bom programa para gerá-los é o SketchUp, que possui uma versão gratuita (figura 7). Dentre os vários programas 3D que testei, foi o que gerou modelos no formato Collada de melhor compatibilidade com o iBooks Author.

Versão gratuita do SketchUP

Figura 7. Modelos 3d simples, construídos no SketchUp

Após criado o objeto 3D, é possível usar o plugin Cleanup – também gratuito – para reduzir a complexidade dos modelos. É rápido e os resultados são satisfatórios com as opções padrão.

* Para importação, o SketchUp só suporta os formatos 3DS e Collada . Se o seu modelo está em outro formato, você pode convertê-lo a partir do Blender, programa 3D de código aberto.

Um livro, múltiplas telas

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

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.

[download id="4" format="2"] Formato ePUB » Tamanho: 310kb