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

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:

O iBooks Author ignora as seguintes chaves: 

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