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

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.

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>

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.

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.

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

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 como desenvolver eventos de toque no iOS.
• Saiba como desenvolver eventos de mouse no macOS.

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

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