Criar widgets HTML5 para iBooks Author

Saiba como criar widgets HTML5 que possa 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 pretenda 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 seu 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 seu ficheiro HTML principal. Atribua-lhe o nome “Default.png” e certifique-se de que utiliza a letra maiúscula "D". Quando o seu 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 iBooks 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ácter de controlo no respetivo nome de ficheiro. Se algum tiver, não pode publicar o livro na iBooks Store.

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

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

  • Recursos/
  • 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 pacote de widgets 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 iBooks 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 Necessária 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 Necessária Uma cadeia que contém o nome do widget. Este será apresentado no iBooks Author e no iBooks.
CFBundleIdentifier com.apple.widget.HelloWorld Necessária Uma cadeia que identifica 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 reduzido. É 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 seu widget, em píxeis. Se não for indicado, é usada a altura do ficheiro Default.png.
MainHTML HelloWorld.html Necessária Uma cadeia que dá o nome do ficheiro HTML que executa o seu widget.
Width 1024 Opcional Um número que dá a largura do seu 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 iBooks sobre quando alterar a apresentação do 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 no iBooks Author não podem incluir conteúdos Java.
AllowSystem Os widgets em livros criados no iBooks Author não podem aceder a comandos do sistema.
Plugin Os widgets em livros criados no 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 iBooks não apresentam uma formatação correta.
CloseBoxInsetY  

 

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

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, 48kHz, á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 seu widget no iBooks Author, pré-visualize-o no iPhone, iPad ou Mac. Desta forma, verá como o ficheiro será reproduzido no seu livro já concluído.

Localização

O iBooks Author não suporta cadeias de texto e recursos localizados. Inclua as cadeias de texto incorporadas no idioma de chegada para que sejam vistas pelo leitor.

Corrigir elementos cortados

Um elemento, como o <video>, 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 são 960 x 540. Procure no CSS o seletor relevante e defina a largura e 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 seus widgets HTML para o iBooks Author.

Evitar uma luz intermitente quando os leitores abrem o widget HTML

Se o seu widget HTML ficar muito complicado, os leitores poderão ver uma luz intermitente quando o abrem no iBooks. Para evitar este cenário, atualize o widget para indicar ao iBooks 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 iBooks 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 macOS já têm o AppleWidget.js, pelo que não precisa de o incluir no seu pacote de widgets.

3. Defina o seu widget para notificar o iBooks 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: