Creare widget HTML5 per iBooks Author

Scopri come creare widget HTML5 da utilizzare nei libri creati in iBooks Author.

iBooks Author supporta i widget HTML5, che hanno estensione .wdgt. Per creare un widget HTML5, usa un editor di testo o un'app per la creazione di contenuti in modo da creare i seguenti tre file:

• File HTML principale: è il file che rappresenta la parte principale del widget. Può avere qualsiasi nome, ma la sua estensione deve essere .html. Puoi inserire CSS e JavaScript nel file HTML principale o aggiungere file .css e .js al bundle del widget, quindi caricarli dal file HTML principale. Puoi usare qualsiasi tecnica che useresti durante la progettazione di una pagina web. Usa l'HTML per definire la struttura del widget, il CSS per fornire lo stile grafico e JavaScript per rendere il widget interattivo.

• File Default.png: il modo più semplice per creare un file Default.png è di acquisire un'istantanea del file HTML principale in un'applicazione per la creazione di contenuti web o in un browser web. Si tratta dell'immagine che verrà visualizzata nella pagina e che gli utenti toccheranno per aprire il widget. In un browser web o in un'app per la creazione di contenuto web, fai un'istantanea del file HTML principale. Chiama il file “Default.png” e assicurati di utilizzare la “D” maiuscola. Quando il widget sarà attivo, sarà della dimensione del file Default.png. Potrai modificarne la dimensione nel file Info.plist.

• File Info.plist: questo file fornisce ad iBooks Author e Apple Books le informazioni necessarie per eseguire il widget. Il nome del file deve essere “Info.plist”.

Dopo aver creato i tre file richiesti, crea eventuali file opzionali, come CSS o JavaScript e aggiungili al bundle del widget:

1. Crea una cartella nel Finder.

2. Aggiungi i file alla nuova cartella.

3. Rinomina la cartella e aggiungi l'estensione .wdgt al nome della cartella per creare il bundle del widget. L'icona della cartella si trasforma in un'icona di widget.

4. Aggiungi il widget ad iBooks Author.

Suggerimenti per la creazione di widget

Prima di creare un bundle del widget, verifica che nessuno dei file contenuti nel bundle presenti un carattere di controllo nel nome. In caso contrario, non puoi pubblicare il libro in Book Store in Apple Books.

Se imposti il widget in modo che venga eseguito automaticamente, non potrà accedere a internet.

Non utilizzare icone di cartella personalizzate ed evita di utilizzare nel widget i seguenti nomi di cartella:

• Risorse/

• File di supporto/Risorse/

• Contenuto/Risorse/

Per ottimizzare il widget per un display Retina:

• Nei file HTML, CSS e JavaScript, usa il protocollo standard per i siti web con grafica Retina (2x).

• Includi un file Default@2x.png nel widget. Il file deve essere di dimensione doppia rispetto alla risoluzione del file Default.png. Questo file non può essere visualizzato in iBooks Author, ma verrà visualizzato in Apple Books su un display Retina.

Scopri di più su come ottimizzare i libri creati con iBooks Author.

File Info.plist

Il file Info.plist di base di un widget contiene chiavi obbligatorie e chiavi facoltative, elencate di seguito assieme alle loro definizioni e ad alcuni valori esemplificativi per un widget chiamato “Hello World”.

Ecco come appare il file Info.plist completo di un widget:

Limitazioni relative alle chiavi

Non utilizzare le chiavi riportate di seguito, perché si riferiscono a funzioni non compatibili:

iBooks Author ignora le seguenti chiavi:

Requisiti audio e video

Non puoi usare contenuti multimediali con estensione .m4v o .m4p. Usa uno di questi formati con estensione .mp4:

• Video H.264: fino a 720p, 60 fotogrammi al secondo, High Profile livello 4.2 con audio AAC-LC fino a 160 Kbps, 48 kHz, audio stereo. I video che si aprono in iMovie 10 con l'opzione HD 720p utilizzano queste impostazioni.

• Video MPEG-4: fino a 2,5 Mbps, 640x480 pixel, 30 fotogrammi al secondo, Simple Profile con audio AAC-LC fino a 160 Kbps per canale, 48 kHz, audio stereo.

Per i contenuti audio, usa AAC (da 8 a 320 Kbps, 48 kHz stereo) con estensione .m4a.

I contenuti multimediali video o audio presenti nei bundle dei widget HTML non sono protetti da DRM.

Se non riesci a riprodurre un file video o audio nel widget in iBooks Author, prova a visualizzarne l'anteprima sull'iPhone, sull'iPad o sul Mac. Dovresti visualizzare il file così come verrà riprodotto nel libro completo.

Localizzazione

iBooks Author non supporta stringhe e risorse localizzate. Includi le stringhe di testo nella lingua di destinazione visibile al lettore in linea.

Se visualizzi elementi tagliati

Un elemento, come ad esempio

Sviluppare per iOS e macOS

iOS e macOS utilizzano tipi di input diversi. Durante la creazione dei widget HTML per iBooks Author, puoi regolare sia l'input tramite tocco che quello tramite mouse.

• Scopri come sviluppare gli eventi tocco in iOS.

• Scopri come sviluppare gli eventi mouse in macOS.

Evitare un lampeggiamento quando i lettori aprono il widget HTML

Se il tuo widget HTML è molto complicato, i lettori potrebbero notare un lampeggiamento all'apertura del widget in Apple Books. Per evitarlo, aggiorna il widget in modo che comunichi ad Apple Books quando passare dal file Default.png al widget HTML:

1. Aggiungi un elemento “IBNotifiesOnReady” impostato su true nel file Info.plist del widget. Questo indica ad Apple Books che il widget comunicherà quando passare al widget HTML.

2. Imposta il tuo widget in modo che carichi la libreria JavaScript di Apple nella

iOS e macOS includono già AppleWidget.js, non dovrai quindi includerlo nel bundle del widget.

3. Imposta il widget in modo che comunichi ad Apple Books l'inizializzazione dell'HTML. Nel codice JavaScript che si trova nella

Pubblicare su un servizio web esterno

Puoi pubblicare widget HTML in servizi web esterni solo se tali servizi utilizzano le intestazioni CORS (Cross-Origin Resource Sharing) appropriate.