Criar widgets HTML5 para o iBooks Author

Saiba como criar widgets HTML5 que pode utilizar nos livros criados no iBooks Author.

O iBooks Author suporta widgets HTML5, que têm a extensão de nome de ficheiro .wdgt. Para criar um widget HTML5, utilize um editor de texto ou uma app de criação de conteúdo para criar estes três ficheiros:

  • Ficheiro HTML principal: este ficheiro é a parte principal do widget. Pode ter o nome que desejar, mas a sua extensão deve ser .html. Pode colocar CSS e JavaScript dentro do ficheiro HTML principal. Em alternativa, pode adicionar ficheiros .css e .js ao pacote de widgets e carregá-los a partir do ficheiro HTML principal. Pode utilizar qualquer técnica que utilizaria para criar uma página web. Utilize HTML para definir a estrutura do widget, CSS para fornecer o estilo visual e JavaScript para torná-lo interativo. 
  • Ficheiro Default.png: a forma mais simples de criar um Default.png é criar uma captura de ecrã do ficheiro HTML principal numa app de criação de conteúdo web ou num navegador. Esta é a imagem que aparece na página e onde os leitores podem tocar para abrir o widget. Num navegador ou numa app de criação de conteúdo web, efetue uma captura de ecrã do ficheiro HTML principal. Atribua-lhe o nome “Default.png” e certifique-se de que utiliza a letra maiúscula "D". Quando o widget fica ativo, fica do tamanho do ficheiro Default.png. Pode alterar o respetivo tamanho no ficheiro Info.plist.
  • Ficheiro Info.plist: este ficheiro disponibiliza ao iBooks Author e ao Apple Books as informações necessárias para executar o seu widget. O nome do ficheiro tem de ser "Info.plist".

Depois de criar estes ficheiros necessários, crie quaisquer ficheiros opcionais que pretenda, como os ficheiros CSS ou JavaScript. Em seguida, adicione-os a todos a um pacote de widgets:

  1. No Finder, crie uma pasta.
  2. Adicione os ficheiros à sua nova pasta.
  3. Altere o nome da pasta e adicione uma extensão .wdgt ao nome da pasta para criar o pacote de widgets. O ícone da pasta é alterado para um ícone de widget.
  4. Adicione o seu widget ao iBooks Author.

Sugestões para criar widgets

Antes de criar o pacote de widgets, certifique-se de que nenhum ficheiro no pacote tem um caráter de controlo no respetivo nome de ficheiro. Se um deles tiver, não pode publicar o livro na Livraria do Apple Books.

Se definir o widget para reprodução automática, não pode aceder à Internet. 

Não utilize ícones de pasta personalizados e evite estes nomes de pasta no widget:

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

Para otimizar o seu widget num ecrã Retina:

  • Nos ficheiros HTML, CSS e JavaScript, utilize o protocolo padrão para sites com gráficos Retina (2x). 
  • O widget deve incluir um ficheiro Default@2x.png. Crie o ficheiro com uma resolução duas vezes superior ao ficheiro Default.png. Não consegue ver este ficheiro no iBooks Author, mas consegue vê-lo no Apple Books num ecrã Retina.

Saiba mais sobre como otimizar livros que cria com o iBooks Author.

O Info.plist

Um ficheiro Info.plist básico do widget contém algumas chaves necessárias e outras chaves opcionais. Esta tabela lista estas chaves, as respetivas definições e alguns valores de exemplo para um widget denominado “Hello World”. 

Chave Valor de exemplo Obrigatório Definição
CFBundleDevelopmentRegion Inglês Opcional Uma cadeia que especifica a região nativa para o pacote. Geralmente corresponde à língua nativa da pessoa que criou o pacote. 
CFBundleDisplayName Hello World Obrigatório Uma cadeia que contém o nome real do widget. Este será apresentado no iBooks Author e no Apple Books.
CFBundleIdentifier com.apple.widget.HelloWorld Obrigatório Uma cadeia que identifica de forma única o widget, em formato de domínio inverso.
CFBundleName Hello World Opcional Uma cadeia que contém o nome do seu widget. Deve ser igual ao nome do pacote de widgets no Finder, menos a extensão .wdgt.
CFBundleShortVersionString 1.0 Opcional Uma cadeia que dá o número da versão do widget abreviada. É geralmente igual ao do CFBundleVersion.
CFBundleVersion 1.0 Opcional Uma cadeia que dá o número da versão do widget.
Height 768 Opcional Um número que dá a altura do widget em píxeis. Se não for indicado, é usada a altura do ficheiro Default.png.
MainHTML HelloWorld.html Obrigatório Uma cadeia que dá o nome do ficheiro HTML que executa o widget.
Width 1024 Opcional Um número que dá a largura do widget em píxeis. Se não for indicado, é utilizada a largura do ficheiro Default.png.
IBNotifiesOnReady <true/> Opcional Quando definido como “true”, o widget informa o Apple Books sobre quando alterar a apresentação de Default.png para o widget de HTML em execução. 

 

O Info.plist completo para um widget terá este aspeto: 

<?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 de chaves

Não utilize estas chaves; as funcionalidades não são compatíveis:

Chave Descrição
AllowFileAccessOutsideOfWidget Os widgets em livros criados no iBooks Author não conseguem aceder a ficheiros no sistema de ficheiros 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 o Flash, não estão disponíveis em livros criados no iBooks Author. Pode incluir filmes e áudio através dos elementos <video> e <audio> do HTML5.
Os filmes e áudio incluídos em widgets de HTML não estarão protegidos por DRM.
AllowJava Os widgets em livros criados com o iBooks Author não podem incluir conteúdos Java.
AllowSystem Os widgets em livros criados com o iBooks Author não podem aceder a comandos do sistema.
Plugin Os widgets em livros criados com o iBooks Author não podem incluir um componente do plug-in Cocoa.

O iBooks Author ignora as seguintes chaves: 

Chave Descrição
CloseBoxInsetX Os widgets no iBooks Author e no Apple Books não apresentam uma formatação correta.
CloseBoxInsetY  

 

Tipos de letra Os widgets do iBooks Author não conseguem utilizar tipos de letra agrupados.

Requisitos de vídeo e áudio

Não é possível utilizar ficheiros multimédia com as extensões .m4v ou .m4p. Para ficheiros com a extensão .mp4 utilize um dos seguintes formatos:

  • Vídeo H.264: até 720p, 60 fotogramas por segundo. Perfil superior de nível 4.2 com áudio AAC-LC de até 160 kbps, 48 kHz, áudio estéreo. Os vídeos que abrem no iMovie 10 com a opção HD 720p utilizam estas definições.
  • Vídeo MPEG-4: até 2,5 Mbps, 640 x 480 píxeis, 30 fotogramas por segundo. Perfil simples com áudio AAC-LC de até 160 kbps por canal, 48 kHz, áudio estéreo.

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

O vídeo e o áudio multimédia em pacotes de widgets de HTML não estão protegidos por DRM.

Se um ficheiro de filme ou áudio não reproduzir no widget no iBooks Author, pré-visualize-o no iPhone, iPad ou Mac. Desta forma, verá como o ficheiro será reproduzido no livro concluído.

Localização

O iBooks Author não suporta cadeias de texto e recursos localizados. Inclua cadeias de texto no idioma de destino que o leitor consiga ver de forma integrada.

Corrigir elementos cortados

Um elemento, como o <vídeo>, poderá aparecer cortado num lado. Esta situação acontece se as respetivas dimensões forem superiores ao espaço disponível. Procure no CSS "width:auto" no seletor #video e altere-o de modo a refletir as dimensões reais. Por exemplo, o seu widget poderá conter um vídeo cujas dimensões sejam 960 x 540. Procure o seletor relevante no CSS e defina a largura e a altura para os valores corretos:

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

Programar para iOS e macOS

O iOS e o macOS utilizam diferentes tipos de entrada. Pode acomodar ambas as entradas por toque e por rato quando cria os widgets HTML para o iBooks Author.

Evitar um flash quando os leitores abrirem o widget HTML

Se o widget HTML for muito complexo, os leitores poderão ver um flash quando o abrirem no Apple Books. Para evitar este cenário, atualize o widget para indicar ao Apple Books quando deve mudar do ficheiro Default.png para o widget HTML:

1. Adicione um elemento "IBNotifiesOnReady" que esteja definido como verdadeiro no ficheiro Info.plist do widget. Desta forma, o Apple Books sabe que o widget indicará quando deve mudar para o widget HTML.

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

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

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

O iOS e o macOS já têm o AppleWidget.js, pelo que não precisa de o incluir no seu pacote de widgets.

3. Defina o widget para notificar o Apple Books quando o HTML for inicializado. No JavaScript presente na parte <head> do ficheiro HTML, introduza:

widget.notifyContentIsReady()

Publicar num serviço web externo

Só pode publicar widgets HTML em serviços web externos se utilizarem os cabeçalhos CORS (Cross-Origin Resource Sharing) corretos.

Data de publicação: