Criar widgets HTML5 para o 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.

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 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>

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.

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.

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.

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;
}

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.

• Saiba mais sobre como desenvolver eventos de toque no iOS.
• Saiba como desenvolver eventos de mouse no macOS.

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()

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