Um livro, múltiplas telas

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

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

Testando seus ePUBs: Calibre Content Server

Márcio Duarte, em 01/05/2012. Categoria: Dicas, Laboratório do eBook 8

Atualização (21/01/2013): o app Calibre Companion facilita um pouco esse processo. Saiba mais

Apesar da maior parte dos dispositivos e aplicativos de leitura de livros digitais se basearem em apenas dois motores de renderização de eBooks, – Webkit e Adobe Reader Mobile SDK – não é raro encontrar variações na interpretação do código entre os programas que usam o mesmo motor, principalmente em livros com formatação mais complexa, simplesmente por que há diferentes versões e implementações desses engines. Na prática, testar o seu ePUB para garantir a ele o título de “livro multiplataforma” acaba indo além de validá-lo somente no iBooks (Webkit) ou no Adobe Digital Editions (RMSDK), dois dos maiores representantes dos referidos motores. É recomendável testá-lo também em outros programas e aparelhos de leitura, um processo que, geralmente, leva tempo e, na grande maioria dos casos, não conta com ferramentas especializadas para isso (Nota: em breve um post sobre quais eReaders e aplicativos são mais recomendados para testar seus eBooks).

Sem fios!

No caso dos eReaders com tela e-ink, as opções padrão se limitam a conectar o dispositivo ao desktop via USB para ter acesso ao espaço de armazenagem interno e só então copiar o seu livro para a pasta correspondente, de forma direta, via sistema, ou com a ajuda de outro programa, como o ADE, em um processo conhecido como sideloading. Para visualizar se a sua alteração no código foi bem sucedida, é necessário ejetar esse volume interno e, só então, atualizar a biblioteca do dispositivo… isso para cada dispositivo de teste. Executar uma tarefa como essa repetidas vezes, ao longo de semanas, não é nada produtivo.

Mas no caso de tablets e smartphones, há mais flexibilidade no processo de sideloading, que pode ser feito via Wi-Fi ou mesmo remotamente, pela web. Nesta série de artigos, veremos quais são as principais opções para testar seus livros com mais eficiência nas principais plataformas do mercado, suas vantagens e desvantagens, começando pelo…

Calibre Content Server

O Calibre, velho conhecido gerenciador de livros digitais para múltiplas plataformas, pode ser usado como um servidor de arquivos particular, baseado no sistema OPDS (Open Publication Distribution System) que é muito útil para testar seus livros diretamente via Wi-Fi, ou via web, nos programas que suportam o OPDS, como o Aldiko e o Moon+ (veja uma lista completa de programas que “conversam” com o Calibre). Assim, você pode simplesmente arrastar seu livro para a janela do Calibre e ele estará disponível diretamente na interface de adição de bibliotecas do programa de leitura do seu gadget Android que tenha acesso sem fio. Há outras opções para carregar arquivos remotamente, mas nenhuma oferece uma solução tão universal, especificamente voltada a eBooks como o servidor OPDS.

Biblioteca do Calibre e a interface do servidor de livros

Figura 1: Biblioteca do Calibre e a interface do servidor de livros

Mesmo nos dispositivos iOS (iPhone, iPad, iPod Touch), o servidor interno do Calibre é uma alternativa para carregar seus livros mais rapidamente nos programas de leitura sem conectar o dispositivo via USB. Abrindo o endereço do servidor do Calibre no Safari Mobile, é possível escolher em que aplicativo deseja abrir o arquivo ePUB: um recurso nativo do sistema da Apple.

Abrindo o servidor do Calibre pelo Safari Mobile, no iPad

Figura 2: Abrindo o servidor do Calibre pelo Safari Mobile, no iPad

Vantagens

  • Funcionalidade grátis e multiplataforma;
  • Atualização sem fios: é mais flexível que o sideloading tradicional via USB, permitindo que possa ser usado em vários aparelhos ao mesmo tempo;
  • Funciona com os aplicativos de leitura também no emulador do Android, caso você não tenha um dispositivo real (mais sobre isso, em um próximo artigo);
  • A solução mais universal para testar seus livros nos aplicativos de ePUB do Android (e em alguns eReaders também);
  • Pode ser usado também para criar a sua biblioteca pessoal na nuvem.

Desvantagens

  • Não é uma solução criada especificamente para produtores de eBooks, como o Book Proofer da Apple é para o aplicativo iBooks (iOS). Nele, o livro pode ser editado sem envio para a biblioteca e atualização no eReader, todo o processo é feito pelo aplicativo, que atualiza constantemente o iBooks a cada alteração. Mas como o Calibre não foi criado com essa finalidade, não há muita esperança nesse sentido.

Como usar

1º passo: no Calibre, vá até o menu “Preferências > Preferências” e clique na opção “Compartilhando pela rede”. Verifique as configurações e ative o servidor no botão “Iniciar servidor”.

Janela de preferências do Calibre

Figura 3: Janela de preferências do Calibre

2º passo: adicione o seu livro à biblioteca do Calibre;

3º passo: ainda no computador, verifique o seu número IP na rede local (saiba como encontrar o seu IP no Windows e no Mac).

Janela de rede nas preferências do sistema do Mac

Figura 4 : Janela de rede nas preferências do sistema do Mac

4º passo: abra o programa de leitura desejado (Aldiko, Moon+, FBReader etc) no seu dispositivo (tablet, smartphone) e localize a função para adicionar um novo catálogo. No Aldiko, por exemplo, clique no ícone de carrinho de compras, depois do botão do aparelho e em “Meus catálogos”. Clicando no botão “+” você adiciona um novo catálogo. Insira um nome para o seu catálogo e o seu IP, seguido da porta especificada nas preferências do Calibre. Um exemplo: 192.168.1.20:8080 (o valor após os dois pontos é o número da porta).

Inserção do endereço do servidor. À esquerda, no app Moon+, à direita, no Aldiko

Figura 5: Inserção do endereço do servidor. À esquerda, no app Moon+, à direita, no Aldiko

Abrindo o link para o servidor você encontrará todos os livros no catálogo do Calibre que estão no seu desktop. De lá você pode adicionar livro à biblioteca do aplicativo.

 Interface do catálogo no Moon+ e no Aldiko

Figura 6: Interface do catálogo no Moon+ e no Aldiko, com todos os livros da biblioteca criada no desktop

5º passo: Para visualizar no eReader as alterações no código do seu livro feitas a partir do desktop, adicione o livro novamente à biblioteca do Calibre e atualize o catálogo do aplicativo de leitura (clique no botão voltar do seu dispositivo e abra novamente o link).

Não há dúvidas que esse processo está longe do ideal. Testar livros nos ereaders, tablets ou smartphones ainda é um processo pouco eficiente, mas a solução oferecida pelo Calibre já auxilia nessa etapa. No próximo artigo da série, veremos como uma abordagem alternativa para testar seus livros durante o desenvolvimento: pela dobradinha Wi-Fi/FTP.

Atualização (21/01/2013): O desenvolvedor do Calibre lançou um aplicativo (Calibre Companion, pago, só para Android) para facilitar o gerenciamento de livros da sua biblioteca que pode ser usado para reduzir os passos para testar seus livros nos dispositivos Android. Em vez de abrir o servidor de arquivos do Calibre em cada app de leitura para atualizar o livro, como explicado neste artigo, o app oferece uma interface única, via WiFi, para carregar o seu livro em qualquer programa de leitura instalado no seu dispositivo Android (figura 7). Se você precisa realizar essa tarefa muitas vezes no Android, vale o preço.

Calibre Companion

Figura 7: Interface do Calibre Companion para carregamento de eBooks para os apps de leitura.

eBook HD: o display retina e os impactos na produção

Márcio Duarte, em 18/03/2012. Categoria: Laboratório do eBook 0

retina-display

Com 75% de participação no mercado de tablets, é óbvio que o iPad dita o ritmo da adoção das tecnologias utilizadas no dia-a-dia de quem trabalha com produção de conteúdo editorial digital. Não deve ser diferente com a introdução da tela do tipo “retina”, com resolução de 2048 x 1536 pixels, no novo iPad. Considerando o impacto dessa tecnologia no desenvolvimento de apps, após o lançamento do iPhone 4, algo semelhante deve ocorrer na produção de livros e revistas digitais.

No caso dos aplicativos para iOS, desenvolvedores tiveram que adaptar seu fluxo de trabalho de forma a incluir versões em maior resolução de imagens e vídeos. eBooks criados como apps devem seguir por um caminho parecido. Várias plataformas de criação de revistas digitais, com o Adobe DPS, Mag+ e Aquafadas Publishing System já incluíram ou planejam incluir suporte a esse display. Já aqueles criados no formato ePUB tem seus próprios desafios, como veremos neste artigo.

Implicações (ou complicações) para a produção

A regra é clara: quanto mais imagens e vídeos o seu ePub tiver, maior o impacto no trabalho. ePUBs de layout flúido, onde o texto predomina, não serão impactados de forma significativa, pois a apresentação do texto independe de resolução. Mas em se tratando de ePUBs que usam muitas imagens – e vídeos –, sejam de layout fixo ou layout flúido, os impactos são significativos. Criar um ePUB ricamente ilustrado, realmente multi-plataforma, passa a ter várias (im|com)plicações:

  • Imagens maiores impactam na performance de leitura: leitores de eBook possuem caracterísitcas de hardware muito distintas. Um arquivo leve e com código otimizado é essencial para garantir uma boa experiência de leitura entre os eReaders. Uma versão otimizada para o iBooks, no iPad3, repleta de imagens em altíssima resolução, pode sofrer de lentidão extrema em um eReader instalado em um celular Android, com hardware menos capaz. A própria Apple sugere que, para otimizar a performance do arquivo, a soma das imagens utilizadas em cada arquivo XHTML de um livro não seja maior que 10mb (sem compressão).
  • Há um limite de 50mb para download de arquivos no iOS via 3G: arquivos com tamanho acima disso vão limitar o acesso ao seu livro para leitores que usam 3G para baixar livros. Normalmente, um ePub não chega a tanto, mas há casos onde isso é uma realidade. Alcançar um equilíbrio entre alta qualidade das imagens e fácil acesso ao livro passa a ser mais importante nestes casos.
  • Imagens com texto embutido (gráficos, infográficos e mapas) dependem do tamanho de apresentação: um mapa ricamente detalhado, em alta resolução, pode se beneficiar do recurso de zoom nativo do iBooks, no novo iPad, revelando detalhes importantes e melhorando a legibilidade de eventuais trechos de texto. O mesmo mapa não terá a mesma chance em um leitor de eBooks como o Aldiko, um dos mais populares na plataforma Android, mas que não permite redimensionar a imagem. O texto em arquivo assim simplesmente se torna ilegível. Esse é um problema antigo do formato ePUB, mas fica mais evidente por causa na discrepância na resolução das telas. Encontrar um meio termo entre as duas plataformas pode não ser possível em certas situações.
  • Bancos de imagem cobram por resolução: caso você não produza suas próprias fotos, ícones, vídeos e ilustrações, e conte com um banco de imagens, prepare-se, pois o custo é diretamente dependente do tamanho em pixels que pretende adquirir. Versões vetorizadas, independentes de resolução, também são mais caras que versões em bitmap, quando disponíveis.
  • Maior tempo para produção: com imagens em alta resolução, apresentadas em telas mais capazes, fica mais evidente a necessidade de otimização do tamanho do arquivo e o cuidado com o tratamento da imagem. Por exemplo: um detalhe praticamente imperceptível em baixa resolução pode revelar detalhes “não desejáveis”, digamos assim, em uma imagem de alta resolução. Algo semelhante ocorreu na transição da TV analógica para a digital. Além disso, a gama de cores (gamut) do novo iPad é a maior entre os tablets. Há muita variação entre os displays. Imagens nas quais a cor seja um elemento crítico, demandam maior cuidado – e mais trabalho – na edição.

Estratégias e possíveis soluções

Ok, a tela retina representa, em tese, mais custos e mais trabalho. Mas como resolver algumas destas questões? Veremos que é possível minimizar alguns dos impactos na produção com uma boa dose de estratégia. Veja algumas dicas:

  • Verifique se é mesmo necessário adicionar imagens em alta resolução. Em muitos casos, pode não valer a pena reduzir a performance de leitura em relação ao ganho de qualidade. É sempre importante verificar esse equilíbrio antes de tomar a decisão de adicionar suporte à tela retina do iPad. O iOS possui um sistema nativo de redimensionamento que cuida para manter o tamanho relativo da imagem mesmo na tela retina. Isso quer dizer que suas imagens não ficarão piores, apenas não se beneficiarão da altíssima resolução da tela.
  • Adote independência de resolução: daqui em diante, utilizar recursos como SVG, CSS e formatos vetoriais nos programas de ilustração e edição de imagem é uma alternativa para fugir de alguns dos problemas causados pela variação na resolução das telas. Programas como Illustrator, Inkscape, Skencil – os dois últimos gratuitos –, são boas pedidas para criar conteúdo independente de resolução. Mas mesmo no Photoshop, tradicionalmente um programa voltado a pixels, é possível contar com vários elementos vetoriais que podem ser escalonados sem prejuízo para a qualidade, e salvá-los para a resolução final de apresentação. Para fotografias, no entanto, a solução parece mesmo adiquirir ou produzí-las em alta resolução desde o início. Do lado das tecnologias web, folhas de estilo CSS e SVG podem ser responsáveis por vários recursos gráficos que eliminam a necessidade de usar imagens nos seus eBooks.
  • Otimize suas imagens: mesmo gráficos produzidos a partir de formatos vetoriais nos programas podem se beneficar de otimização. Há várias ferramentas disponíveis na web para reduzir o tamanho dos arquivos sem comprometer muito a qualidade, com bons resultados. Além disso, lembre-se de utilizar o formato certo para cada tipo de imagem. Ícones, gráficos e outras imagens com cores chapadas se beneficiam do formato PNG. Fotografias e imagens com degradês e uma dose de ruído ficam menores no formato JPEG.
  • Use media queries para disponibilizar versões em alta resolução das suas imagens apenas para o leitor de eBooks da Apple: felizmente, o iBooks reconhece essa propriedade do CSS3 que permite formatar e apresentar conteúdo de acordo com a plataforma de leitura. Assim, podemos garantir uma melhor performance do arquivo, limitando a quantidade de recursos e código de acordo com a plataforma. (Atualização – 23/08/12: Para saber mais, veja um artigo bem completo sobre  o assunto no Smashing Magazine.)

O nome do jogo

Após anos de uma divisão bem clara entre impresso e digital no quesito resolução de conteúdo bitmap, a tendência rumo a conteúdo HD no mercado editorial digital chegou para ficar. A julgar pelas reações à nova tela pela web, a demanda popular por conteúdo editorial em HD deve começar em breve. Alta qualidade passa a ser o nome do jogo, e os produtores devem, naturalmente, se adaptar a essa tendência.