Creazione di 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 iBooks 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 potrai pubblicare il libro nell'iBooks Store.

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. Non puoi visualizzare questo file in iBooks Author, ma verrà visualizzato in iBooks 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". 

Chiave Valore di esempio Obbligatorio Definizione
CFBundleDevelopmentRegion English Facoltativo Stringa che specifica l'area geografica di origine del bundle. Corrisponde generalmente alla lingua madre della persona che ha creato il bundle. 
CFBundleDisplayName Hello World Obbligatorio Stringa che contiene il nome effettivo del widget, che verrà visualizzato in iBooks Author e iBooks.
CFBundleIdentifier com.apple.widget.HelloWorld Obbligatorio Stringa che identifica in modo univoco il widget, contenente il formato del dominio, scritto al contrario.
CFBundleName Hello World Facoltativo Stringa che contiene il nome del widget. Deve corrispondere al nome del bundle del widget nel Finder senza l'estensione file .wdgt.
CFBundleShortVersionString 1.0 Facoltativo Stringa che fornisce il numero abbreviato della versione del widget. Spesso corrisponde a CFBundleVersion.
CFBundleVersion 1.0 Facoltativo Stringa che fornisce il numero di versione del widget.
Height 768 Facoltativo Numero che fornisce l'altezza del widget espressa in pixel. Se non è specificato, viene utilizzata l'altezza di Default.png.
MainHTML HelloWorld.html Obbligatorio Stringa che fornisce il nome del file HTML che consente di utilizzare il widget.
Width 1.024 Facoltativo Numero che fornisce la larghezza del widget espressa in pixel. Se non è specificato, viene utilizzata la larghezza di Default.png.
IBNotifiesOnReady <true/> Facoltativo Quando la chiave è impostata su true, il widget comunica ad iBooks quando passare dalla visualizzazione di Default.png a quella del widget HTML in esecuzione. 

 

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

<?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>

Limitazioni relative alle chiavi

Non utilizzare le chiavi riportate di seguito, perché le funzioni non sono compatibili:

Chiave Descrizione
AllowFileAccessOutsideOfWidget I widget presenti nei libri creati con iBooks Author non hanno accesso ai file nel file system generale.
AllowFullAccess Include un elenco di altre chiavi di accesso, alcune delle quali non sono compatibili.
AllowInternetPlugins I plugin internet, ad esempio Flash, non sono disponibili nei libri creati con iBooks Author. Puoi includere file video e audio usando gli elementi <video> e <audio> HTML5.
I file video e audio presenti all'interno dei widget HTML non sono protetti da DRM.
AllowJava I widget presenti nei libri creati con iBooks Author non possono includere contenuti Java.
AllowSystem I widget presenti nei libri creati con iBooks Author non hanno accesso ai comandi di sistema.
Plugin I widget presenti nei libri creati con iBooks Author non possono includere componenti del plugin Cocoa.

iBooks Author ignora le seguenti chiavi: 

Chiave Descrizione
CloseBoxInsetX I widget in iBooks Author e iBooks non visualizzano un elemento decorativo di chiusura.
CloseBoxInsetY  

 

Font I widget di iBooks Author non possono utilizzare font in dotazione.

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 aperti in iMovie 10 con l'opzione HD 720p utilizzano queste impostazioni.
  • Video MPEG-4: fino a 2,5 Mbps, 640 x 480 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

È possibile che un elemento, ad esempio <video>, possa risultare tagliato su un lato. Questo può accadere se le dimensioni dell'elemento superano lo spazio disponibile. Trova il CSS per "width:auto" nel selettore #video e modificalo in modo da riflettere le dimensioni effettive. Ad esempio, se il widget contiene un video le cui dimensioni sono 960 x 540, verifica il selettore corrispondente nel CSS e imposta la larghezza e l'altezza sui valori corretti:

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

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

Come 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 iBooks. Per evitarlo, aggiorna il widget in modo che comunichi ad iBooks 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 iBooks che il widget comunicherà quando passare al widget HTML

<key>IBNotifiesOnReady</key>
 <true/>






2. Imposta il widget per il caricamento della libreria JavaScript di Apple nella sezione <head> del file HTML:

<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>

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

3. Imposta il widget in modo che comunichi ad iBooks l'inizializzazione dell'HTML. Nel JavaScript che si trova nella sezione <head> del file HTML, richiama:

widget.notifyContentIsReady()

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

Data di pubblicazione: