Criar widgets HTML5 para o iBooks Author
Saiba como criar widgets HTML5 que você pode usar nos livros que cria no 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:
No Finder, crie uma pasta.
Adicione os arquivos à nova pasta.
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.
Adicione o widget ao iBooks Author.
Dicas para a criação de widgets
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.
Info.plist
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. |
Altura | 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.Width1024Optional |
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 | 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>
Restrições e limitações principais
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 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. |
Requisitos de áudio e vídeo
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.
Localização
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.
Corrigir elementos cortados
Os elementos, tais como um
#vídeo {largura: 960; altura: 540; }
Desenvolver para iOS e macOS
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.
Evitar flash quando os leitores abrirem o widget HTML
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>
Defina seu widget para carregar a biblioteca Apple JavaScript na
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
widget.notifyContentIsReady()
Publicar em um serviço externo da Web
Você poderá publicar widgets HTML em serviços externos da Web somente se eles usarem os títulos do CORS (Cross-Origin Resource Sharing).
