Criar widgets HTML5 para o iBooks Author

Saiba como criar widgets HTML5 que você pode usar nos livros que cria no iBooks Author.

O iBooks Author é compatível com widgets HTML5, cuja extensão de nome de arquivo é .wdgt. Para criar um widget HTML5, use um editor de texto ou app de criação de conteúdo para criar estes três arquivos:

  • Principal arquivo HTML: este arquivo é a parte principal do widget. Ele pode ter qualquer nome de sua preferência, mas a extensão precisa ser .html. Você pode colocar o CSS e o JavaScript dentro do arquivo HTML principal. Ou você pode adicionar arquivos .css e .js ao pacote do widget e carregá-los no arquivo HTML principal. Você poderá usar qualquer técnica que quiser para desenvolver uma página da Web. Use HTML para definir a estrutura do widget, o CSS para criar o estilo visual e o JavaScript para torná-lo interativo. 
  • Arquivo Default.png: a maneira mais fácil de criar esse arquivo é fazendo uma captura de tela do arquivo HTML principal em um navegador ou app de criação de conteúdo da Web. Essa é a imagem que será exibida na página e na qual os usuários tocarão para abrir o widget. Em um navegador ou app de criação de conteúdo da Web, faça uma captura de tela do arquivo HTML principal. Dê o nome "Default.png" e lembre-se de usar o "D" maiúsculo. Quando o widget estiver ativo, ele será do tamanho do arquivo Default.png. É possível alterar o tamanho no arquivo Info.plist.
  • Arquivo Info.plist: nesse arquivo, o iBooks Author e o Apple Books encontram as informações de que precisam para executar o widget. O nome do arquivo precisa ser "Info.plist".

Após criar os arquivos necessários, crie os arquivos opcionais desejados, como CSS ou JavaScript. Depois, adicione-os a um pacote de widget:

  1. No Finder, crie uma pasta.
  2. Adicione os arquivos à nova pasta.
  3. Renomeie a pasta e adicione uma extensão .wdgt ao nome da pasta para criar o pacote de widget. O ícone da pasta muda para um ícone de widget.
  4. Adicione o widget ao iBooks Author.

Dicas para a criação de widgets

Antes de criar seu pacote de widget, verifique se não há nomes de arquivo com caracteres de controle no pacote. Se houver, não será possível publicar o livro na Book Store do Apple Books.

Se você configurar a reprodução automática do widget, ele não conseguirá acessar a Internet. 

Não use ícones de pasta personalizados e evite estes nomes de pasta em seu widget:

  • Resources/
  • Support Files/Resources/
  • Contents/Resources/

Para otimizar o widget para tela Retina:

  • Nos arquivos HTML, CSS e JavaScript, use o protocolo padrão para sites com elementos gráficos de Retina (2x). 
  • Inclua um arquivo Default@2x.png ao widget. Defina nesse arquivo o dobro da resolução do arquivo Default.png. Não é possível ver esse arquivo no iBooks Author, mas você consegue vê-lo no Apple Books em uma tela Retina.

Saiba mais sobre como otimizar os livros criados com o iBooks Author.

Info.plist

O arquivo Info.plist do widget básico contém algumas chaves necessárias e algumas opcionais. A tabela abaixo indica as chaves, as respectivas definições e alguns valores de exemplo de um widget chamado "Hello World". 

Chave Valor de exemplo Obrigatório Definição
CFBundleDevelopmentRegion Inglês Opcional Uma sequência que especifica a região nativa do pacote. Geralmente corresponde ao idioma nativo da pessoa que criou o pacote. 
CFBundleDisplayName Hello World Obrigatório Uma sequência que contém o nome real do widget. Será exibido no iBooks Author e no Apple Books.
CFBundleIdentifier com.apple.widget.HelloWorld Obrigatório Uma sequência que identifica exclusivamente o widget, em formato de domínio inverso.
CFBundleName Hello World Opcional Uma sequência que contém o nome do widget. Ele deve corresponder ao nome do pacote de widget no Finder, menos a extensão do arquivo .wdgt.
CFBundleShortVersionString 1.0 Opcional Uma sequência que fornece o número de versão abreviado do widget. Frequentemente, é igual a CFBundleVersion.
CFBundleVersion 1.0 Opcional Uma sequência que fornece o número de versão do widget.
Height 768 Opcional Um número que fornece a altura, em pixels, do widget. Se não for especificada, a altura do Default.png será usada.
MainHTML HelloWorld.html Obrigatório Uma sequência que fornece o nome do arquivo HTML que implementa o widget.
Width 1.024 Opcional Um número que fornece a largura, em pixels, do widget. Se não for especificada, a largura do Default.png será usada.
IBNotifiesOnReady <true/> Opcional Quando definido como true, o widget informa ao Apple Books quando alternar da exibição do Default.png para a exibição do widget HTML em execução. 

 

O Info.plist completo de um widget é semelhante a: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleDevelopmentRegion</key>
	<string>English</string>
	<key>CFBundleDisplayName</key>
	<string>Hello World</string>
	<key>CFBundleIdentifier</key>
	<string>com.apple.widget.HelloWorld</string>
	<key>CFBundleName</key>
	<string>Hello World</string>
	<key>CFBundleShortVersionString</key>
	<string>1.0</string>
	<key>CFBundleVersion</key>
	<string>1.0</string>
	<key>Height</key>
	<integer>768</integer>
	<key>MainHTML</key>
	<string>HelloWorld.html</string>
	<key>Width</key>
	<integer>1024</integer>
	<key>IBNotifiesOnReady</key>
	<true/>
</dict>
</plist>

Restrições e limitações principais

Não use estas chaves, pois os recursos não são compatíveis:

Chave Descrição
AllowFileAccessOutsideOfWidget Os widgets em livros criados no iBooks Author não conseguem acessar arquivos no sistema de arquivos geral.
AllowFullAccess Abreviatura de uma lista de outras chaves de acesso, algumas das quais não são compatíveis.
AllowInternetPlugins Plug-ins da Internet, como Flash, não estão disponíveis em livros criados no iBooks Author. Você pode incluir filmes e áudio usando os elementos HTML5 de <vídeo> e <áudio>.
Os filmes e o áudio dentro de widgets HTML não serão protegidos por DRM.
AllowJava Widgets em livros criados com o iBooks Author não podem incluir conteúdo Java.
AllowSystem Widgets nos livros criados com o iBooks Author não podem acessar comandos do sistema.
Plug-in Widgets em livros criados com o iBooks Author não podem incluir componentes de plug-in Cocoa.

O iBooks Author ignora as seguintes chaves: 

Chave Descrição
CloseBoxInsetX Widgets no iBooks Author e no Apple Books não exibem uma decoração de fechamento.
CloseBoxInsetY  

 

Fonts Widgets do iBooks Author não podem usar fontes empacotadas.

Requisitos de áudio e vídeo

Não é possível usar mídia com extensões de arquivo .m4v ou .m4p. Use um destes formatos com uma extensão de arquivo .mp4:

  • Vídeo H.264: até 720p, 60 quadros por segundo, High Profile nível 4.2 com áudio AAC-LC de até 160 kbps, 48 kHz, som estéreo. Vídeos que abrem no iMovie 10 com a opção HD 720p usam esses ajustes.
  • Vídeo MPEG-4: até 2,5 Mbps, 640 x 480 pixels, 30 quadros por segundo, Simple Profile com áudio AAC-LC de até 160 kbps por canal, 48 kHz, som estéreo.

Para áudio, use AAC (8 a 320 Kbps, 48 kHz estéreo) com uma extensão de arquivo .m4a.

As mídias de áudio e vídeo em pacotes de widget HTML não são protegidas por DRM.

Se um arquivo de filme ou áudio não reproduzir em seu widget no iBooks Author, visualize-o no iPhone, iPad ou Mac. Assim, você verá como o arquivo será reproduzido no livro finalizado.

Localização

O iBooks Author não oferece suporte a strings e ativos localizados. Inclua strings de texto no idioma de destino que o leitor possa ver em linha.

Corrigir elementos cortados

Os elementos, tais como um <vídeo>, podem aparecer cortados em um dos lados. Isso poderá acontecer se as dimensões forem maiores do que o espaço disponível. Encontre o CSS quanto a "width:auto" no seletor #video e o altere para refletir as dimensões reais. Por exemplo, o widget pode conter um vídeo cujas dimensões são 960 x 540. Verifique o CSS quanto ao seletor relevante e defina a altura e a largura para os valores corretos:

#video   {
	width: 960;
	height: 540;
}

Desenvolver para iOS e macOS

O iOS e o macOS usam tipos de entrada diferentes. Você pode acomodar entradas por toque e mouse ao criar widgets HTML para o iBooks Author.

Evitar flash quando os leitores abrirem o widget HTML

Se o widget HTML for muito complicado, os leitores verão um flash quando o abrirem no Apple Books. Para evitar que isso aconteça, atualize o widget para comunicar ao Apple Books quando mudar do arquivo Default.png para o widget HTML:

1. Adicione um item "IBNotifiesOnReady" definido como true ao arquivo Info.plist do widget. Isso informa ao Apple Books que o widget avisará quando mudar para o widget HTML.

<key>IBNotifiesOnReady</key>
 <true/>

2. Defina o widget para carregar a biblioteca JavaScript da Apple na parte <head> do arquivo HTML:

<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>

O iOS e o macOS já têm o AppleWidget.js, então não é necessário incluí-lo no pacote do widget.

3. Configure o widget para que notifique ao Apple Books quando o HTML for inicializado. No JavaScript que está na parte <head> do arquivo HTML, invoque:

widget.notifyContentIsReady()

Publicar em um serviço externo da Web

Você poderá publicar widgets HTML em serviços externos da Web somente se eles usarem os títulos do CORS (Cross-Origin Resource Sharing).

Data da publicação: