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 oferece suporte a widgets HTML5, que possuem a 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 que você desejar, mas sua 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 a 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 é tirar uma captura de tela do arquivo HTML principal em um app de criação de conteúdo da Web ou navegador da Web. Essa é a imagem que será exibida na página e na qual os usuários tocam para abrir o widget. Em um navegador da Web ou um app de criação de conteúdo da Web, tire uma captura de tela de seu arquivo HTML principal. Forneça o nome "Default.png" e não se esqueça 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 iBooks encontram as informações de que precisam para executar o widget. O nome do arquivo precisa ser "Info.plist".

Depois de criar os arquivos necessários, crie os arquivos opcionais que quiser, como o CSS ou o JavaScript. Depois, adicione-os a um pacote de widget:

  1. No Finder, crie uma pasta.
  2. Adicione os arquivos à sua nova pasta.
  3. Renomeie a pasta e adicione uma extensão .wdgt ao nome da pasta para criar o pacote do widget. O ícone da pasta muda para um ícone de widget.
  4. Adicione seu 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 iBooks Store.

Se você configurar o widget de modo que ele seja reproduzido automaticamente, ele não poderá 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 uma 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 no seu 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ê pode vê-lo no iBooks em uma tela Retina.

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

O Info.plist

O arquivo Info.plist do widget básico contém algumas das chaves necessárias e algumas chaves opcionais. Essa tabela relaciona as chaves, as respectivas definições e alguns valores de exemplo para 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. Isso 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. Isso será exibido no iBooks Author e no iBooks.
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 de seu 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.
Altura 768 Opcional Um número que fornece a altura, em pixels, de seu widget. Se não 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 seu widget.
Largura 1.024 Opcional Um número que fornece a largura, em pixels, de seu widget. Se não especificada, a largura do Default.png será usada.
IBNotifiesOnReady <true/> Opcional Quando definido como true, o widget informa ao iBooks quando alternar da exibição do Default.png para exibição do widget HTML em execução. 

 

O Info.plist completo para um widget é semelhante a isto: 

<?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 podem acessar arquivos no sistema de arquivos geral.
AllowFullAccess Abreviatura para 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 iBooks não exibem uma decoração de fechamento.
CloseBoxInsetY  

 

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

Requisitos de áudio e vídeo

Não é possível usar mídias 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, alto perfil de nível 4.2 com áudio AAC-LC de até 160 kbps, 48 kHz, áudio estéreo. Vídeos que abrem no iMovie 10 com a opção HD de 720p usam esses ajustes.
  • Vídeo MPEG-4: até 2,5 Mbps, 640 x 480 pixels, 30 quadros por segundo, perfil simples com áudio AAC-LC de até 160 kbps por canal, 48 kHz, áudio 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. Isso mostra como o arquivo será reproduzido em seu 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 #vídeo e o altere para refletir as dimensões reais. Por exemplo, seu 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 seu widget HTML for muito complicado, os leitores verão um flash quando o abrirem no iBooks. Para evitar que isso aconteça, atualize o widget de modo a comunicar ao iBooks quando mudar do arquivo Default.png para o widget HTML:

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

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






2. Defina seu 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á possuem o AppleWidget.js, então não é necessário incluí-lo no pacote do widget.

3. Configure o widget de forma que ele notifique ao iBooks 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: