iBooks Author: Sobre a criação do widget HTML

Você pode criar widgets HTML5 para usar com livros que você criou no iBooks Author.

O iBooks Author é compatível com widgets HTML5 (com a extensão .wdgt).

Para criar um widget HTML para iBooks Author, use um app de criação de conteúdo ou editor de texto para criar os seguintes arquivos: 

  • Principal arquivo HTML: este arquivo é a parte principal do widget. Ele pode ter qualquer nome que você desejar, mas sua extensão deve ser ".html". Você pode colocar CSS e JavaScript no arquivo HTML principal ou os arquivos .css e .js ao pacote de widget e define o arquivo HTML principal para carregá-los. Nesses arquivos, você pode usar qualquer técnica ou truque que usaria ao criar uma página da web. Em geral, você usa HTML para definir a estrutura de seu widget, CSS para fornecer o estilo visual e JavaScript para oferecer suporte à interatividade. 
  • Default.png: esta é a imagem que será exibida na página e na qual os usuários tocarão para abrir seu widget. Seu nome deve ser "Default.png", com "D" em letra maiúscula. A forma mais fácil para criar um Default.png é fazer uma captura de tela do arquivo HTML principal em execução em um app de criação de conteúdo ou navegador da web. Quando o seu widget estiver ativo, ele terá o tamanho do Default.png, exceto se você especificar um tamanho diferente no Info.plist.
  • Info.plist: este arquivo fornece ao iBooks Author e ao iBooks as informações necessárias para executar seu widget. Seu nome deve ser "Info.plist". Os detalhes e uma amostra são apresentados a seguir. 

Assim que você tiver criado os três arquivos necessários (e talvez alguns arquivos opcionais, como CSS ou JavaScript), monte-os em um pacote de widget:

  1. Usando o Finder, crie uma pasta e adicione os arquivos a ele.
  2. Renomeie a pasta e adicione uma extensão .wdgt ao nome da pasta. Isso criará o pacote de widget e o ícone de pasta mudará para um ícone de widget.

Seu widget agora está pronto para ser adicionado ao iBooks Author.

Notas

  • Se seu livro incluir widgets HTML que tenham caracteres de controle em nomes de arquivos, ele não poderá ser publicado na iBooks Store. Antes de criar seu pacote de widget, verifique se nenhum dos arquivos contidos no pacote usa esses caracteres no nome do arquivo. Não use ícones personalizados de pasta.
  • Evite incluir pastas com esses nomes dentro de seu pacote de widget:
    • Recursos/
    • Support Files/Resources/
    • Contents/Resources/
  • Se estiver criando conteúdos para iPads ou Macs com tela Retina:
    • Ao codificar seus arquivos HTML, CSS e JavaScript, siga o protocolo padrão para criar sites com elementos gráficos de Retina (2x). 
    • O seu pacote de widget deve incluir um arquivo Default@2x.png, que deve ser o dobro da resolução do arquivo Default.png. Você não conseguirá visualizar esse arquivo no iBooks Author, mas ele será exibido no iBooks em iPads ou Macs com uma tela Retina. 
  • Se você quiser que seu widget ocupe a tela inteira quando aumentar o zoom, crie o Default.png com 768 x 1024 pixels e o Default@2x.png 1536 x 2048 pixels. Se você quiser que seu widget seja exibido menor do que a tela inteira, crie o Default.png com as dimensões que gostaria que seu widget fosse exibido (por exemplo, 600 x 900) e crie o Default@2x.png com o dobro dessa dimensão.
  • Saiba mais sobre como otimizar livros criados com iBooks Author.

O Info.plist 

O Info.plist do widget básico contém algumas das chaves necessárias e algumas chaves opcionais. Essas chaves são relacionadas junto com suas definições e alguns valores de exemplo para um widget intitulado “Hello World”. 

CFBundleDevelopmentRegion English 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, a 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 o mesmo que 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, 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.
Width 1024 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>

Restrições e limitações

Alguns recursos não são compatíveis. Você não deverá usar as seguintes chaves:

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. Vídeos e áudio podem ser incluídos através dos elementos <video> e <audio> de HTML5, respectivamente.
Nota: vídeos e áudio em 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: 

CloseBoxInsetX Widgets no iBooks Author e iBooks não exibem uma decoração de fechamento.
CloseBoxInsetY  

 

Fontes Widgets do iBooks Author não podem usar fontes empacotadas.

Requisitos de vídeo e áudio

Não é possível usar mídias que possuam extensões de arquivo ".m4v" ou ".m4p". 

É recomendável usar vídeo H.264 em um contêiner MPEG-4 com uma extensão de arquivo ".mp4".

Para áudio, é recomendável usar áudio AAC em um contêiner MPEG-4 com uma extensão de arquivo ".m4a".

Nota: a mídia de vídeo e áudio em pacotes de widget HTML não é protegida por DRM.

Nota: em alguns casos, os arquivos de vídeos e áudio em widgets HTML podem não ser reproduzidos no iBooks Author, mas serão reproduzidos no iBooks. Se você não conseguir reproduzir um arquivo de vídeo ou áudio em seu widget no iBooks Author, tente visualizar no iPad ou com o OS X Mavericks. Isso deve mostrar como o arquivo será reproduzido em seu livro finalizado.

Localização

Ativos e sequências localizadas não são compatíveis no iBooks Author. Portanto, sequências de texto visíveis pelo usuário deverão ser incluídas embutidas no idioma-alvo.

Elementos cortados

Se um elemento como um elemento <vídeo> for cortado em um lado, isso poderá ser devido ao fato de ele estar se expandindo para preencher um espaço maior do que o que está visível. Verifique o CSS quanto a "width:auto" no seletor #vídeo e o altere para refletir as dimensões reais. Por exemplo, se seu widget tiver um vídeo cujas dimensões são 960 x 540, então verifique o CSS quanto ao seletor pertinente e defina explicitamente a largura e a altura para os valores corretos:

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

Como desenvolver para iOS e OS X Mavericks

iOS e OS X usam tipos de entrada fundamentalmente diferentes, portanto, quando você criar seus widgets HTML para iBooks Author, você precisará se certificar de adaptar tanto para manuseio por toque quanto para manuseio por mouse se desejar usar qualquer tipo de controle não manipulado por gestos padrão.

 

Abrindo o widget HTML

Dependendo da complexidade do seu widget HTML, os seus leitores podem visualizar um "clarão" durante a inicialização do HTML ao abrirem o widget no iBooks. Para evitar esse "clarão", altere seu widget de modo que ele informe o iBooks sobre quanto deve ser realizada a transição entre a exibição do arquivo Default.png e a exibição do widget HTML já em funcionamento.

Há três modificações que você deve fazer para adicionar essa funcionalidade extra:

  1. Adicione um item "IBNotifiesOnReady" configurado como "true" no arquivo info.plist do widget, para que o iBooks saiba que esse widget informará quando alternar para exibir o widget HTML em funcionamento:
    <key>IBNotifiesOnReady</key><true/>
  2. Defina seu widget para carregar a biblioteca Apple JavaScript na parte HEAD do arquivo HTML:
    <script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
    Nota: o AppleWidget.js já está presente no iPad e você não precisa incluí-lo em seu pacote de widget.

  3. Defina seu widget para permitir que o iBooks saiba quando o HTML é inicializado e o iBooks pode alterar da exibição do arquivo Default.png para a exibição do widget HTML em execução ao chamar (em JavaScript incluído na parte HEAD do arquivo HTML):
    widget.notifyContentIsReady()

Importante: se você decidir alterar o seu widget HTML visando evitar esse "clarão", certifique-se de realizar as três etapas descritas acima. Você precisa concluir todas as etapas para garantir o funcionamento correto.

Sobre a publicação para os serviços web externos

Os widgets HTML somente podem ser publicados para os serviços web externos se esses serviços web tiverem implementado os títulos do CORS (Cross-Origin Resource Sharing).

Data da publicação: