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

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

Restrições e limitações de chaves

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

O iBooks Author ignora as seguintes chaves:

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

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.

• Saiba como programar eventos de toque no iOS.

• Saiba como programar eventos de rato no macOS.

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" definido como true no ficheiro Info.plist do widget. Desta forma, o Apple Books sabe que o widget indicará quando deve mudar para o widget HTML.

2. Defina o widget para carregar a biblioteca JavaScript da Apple na parte

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

3. Defina o widget para notificar o Apple Books quando o HTML for inicializado. No JavaScript presente na parte

Publicar num serviço web externo

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