iBooks Author: informazioni sulla creazione di widget HTML

Puoi creare widget HTML5 per l'uso con i libri realizzati in iBooks Author.

iBooks Author supporta i widget HTML5 (con estensione .wdgt).

Per creare un widget HTML per iBooks Author, utilizza un editor di testo o un'app per la creazione di contenuti web per generare i seguenti file:

  • File HTML principale: è il file che rappresenta la parte principale del widget. Può avere qualsiasi nome, ma l'estensione deve essere ".html". Puoi inserire CSS e JavaScript nel file HTML principale o aggiungere file .css e .js al bundle del widget, quindi impostare il file HTML principale per il loro caricamento. In questi file puoi usare qualsiasi tecnica o procedura che utilizzeresti durante la progettazione di una pagina web. In generale, l'HTML viene utilizzato per definire la struttura del widget, il CSS per fornire lo stile grafico e JavaScript per supportare l'aspetto interattivo.
  • Default.png: è l'immagine che verrà visualizzata nella pagina e che gli utenti toccheranno per aprire il widget. Il nome deve essere "Default.png", con la "D" maiuscola. Il modo più semplice per creare un file Default.png è di acquisire un'istantanea del file HTML principale mentre è in esecuzione in un'applicazione per la creazione di contenuti web o in un browser web. Quando il widget è attivo, avrà le dimensioni di Default.png, a meno che non specifichi una dimensione differente in Info.plist.
  • Info.plist: questo file fornisce a iBooks Author e iBooks le informazioni necessarie per eseguire il widget. Il suo nome deve essere "Info.plist". Di seguito sono riportati dettagli ed esempi.

Una volta creati i tre file richiesti (e, all'occorrenza, alcuni file facoltativi come CSS o JavaScript), assemblali in un bundle di widget:

  1. Utilizzando il Finder, crea una cartella e aggiungi i file al suo interno.
  2. Rinomina la cartella e aggiungi l'estensione .wdgt al nome cartella. In questo modo avrai creato il bundle del widget e l'icona della cartella verrà modificata in un'icona di widget.

Il widget è ora pronto per essere aggiunto a iBooks Author.

Note

  • Se il tuo libro include widget HTML contenenti file con caratteri di controllo nei nomi dei file, non può essere pubblicato nell'iBooks Store. Prima di creare un bundle del widget, verifica che nessuno dei file contenuti nel bundle presenti tali caratteri nei nomi dei file. Non usare icone di cartella personalizzate.
  • Non includere all'interno del bundle del widget cartelle con i seguenti nomi:
    • Risorse/
    • File di supporto/Risorse/
    • Contenuti/Risorse/
  • Se stai creando contenuti per iPad o Mac con display Retina:
    • Quando compili il codice dei file HTML, CSS e JavaScript, segui il protocollo standard per la creazione di siti web con grafica Retina (2x). 
    • Il bundle del widget dovrebbe includere un file denominato Default@2x.png, di dimensione doppia rispetto alla risoluzione del file Default.png. Questo file non verrà visualizzato in iBooks Author, ma in iBooks su iPad o Mac con display Retina. 
  • Se desideri che il widget occupi lo schermo intero quando viene ingrandito, imposta Default.png su 768 x 1.024 pixel e Default@2x.png su 1.536 x 2.048 pixel. Se desideri che il widget venga visualizzato con dimensioni più piccole rispetto allo schermo intero, imposta le dimensioni di Default.png sui valori che desideri (ad esempio, 600 x 900) e quelle di Default@2x.png sul doppio di tali valori.
  • Leggi ulteriori informazioni sull'ottimizzazione dei libri creati con iBooks Author.

Info.plist

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

CFBundleDevelopmentRegion Inglese Facoltativo. Una 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. Una stringa contenente il nome effettivo del widget che verrà visualizzato in iBooks Author e in iBooks.
CFBundleIdentifier com.apple.widget.HelloWorld Obbligatorio. Una stringa che identifica in modo univoco il widget, contenente il formato del dominio, scritto al contrario.
CFBundleName Hello World Facoltativo. Una 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. Una stringa che fornisce il numero abbreviato della versione del widget. Spesso corrisponde a CFBundleVersion.
CFBundleVersion 1.0 Facoltativo. Una stringa che fornisce il numero di versione del widget.
Height 768 Facoltativo. Un numero che fornisce l'altezza del widget espressa in pixel. Se non è specificato, viene utilizzata l'altezza di Default.png.
MainHTML HelloWorld.html Obbligatorio. Una stringa che fornisce il nome del file HTML che consente di utilizzare il widget.
Width 1.024 Facoltativo. Un 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 a iBooks quando passare dalla visualizzazione di Default.png a quella del widget HTML in esecuzione. 

Il file Info.plist completo di un widget è simile a quanto riportato di seguito:

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

Restrizioni e limitazioni

Alcune funzioni non sono compatibili. Non utilizzare le seguenti chiavi:

AllowFileAccessOutsideOfWidget I widget presenti nei libri e 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. I filmati e i file audio possono essere inclusi rispettivamente attraverso gli elementi <video> e <audio> HTML5.
Nota: i filmati e l'audio nei widget HTML non verranno protetti da DRM.
AllowJava I widget presenti nei libri e 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: 

CloseBoxInsetX I widget in iBooks Author e in iBooks non consentono di visualizzare un elemento decorativo di chiusura.
CloseBoxInsetY  

 

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

Requisiti audio e video

Non puoi utilizzare file multimediali con estensioni ".m4v" o ".m4p". 

È consigliabile utilizzare video H.264 in un contenitore MPEG-4 con estensione file ".mp4".

Per l'audio, è consigliabile utilizzare file AAC in un contenitore MPEG-4 con estensione file ".m4a".

Nota: i file multimediali audio e video nei bundle di widget HTML non sono protetti da DRM.

Nota: in alcuni casi, i file audio e video nei widget HTML potrebbero non essere riproducibili in iBooks Author, ma potrebbero esserlo in iBooks. Se non riesci a riprodurre file video o audio nel widget in iBooks Author, prova a visualizzarne l'anteprima sull'iPad o con OS X Mavericks. Dovresti visualizzare il file così come verrà riprodotto nel libro completo.

Localizzazione

Le stringhe e le risorse localizzate non sono supportate in iBooks Author. Per questo motivo le stringhe di testo visibili dall'utente dovrebbero essere incorporate nella lingua di destinazione.

Elementi con clip

Se un elemento come un <video> viene visualizzato con una clip su un lato, ciò potrebbe avvenire perché il video si sta espandendo per riempire uno spazio più ampio rispetto a quello visibile. Verifica la voce "width:auto" del CSS nel selettore #video e modificala per ottenere le dimensioni effettive. Ad esempio, se il widget contiene un video le cui dimensioni sono 960 x 540, verifica il settore relativo nel CSS e imposta la larghezza e l'altezza sui valori coretti:

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

Sviluppo per iOS e OS X Mavericks

iOS e OS X usano fondamentalmente tipi di input diversi, quindi quando crei i widget HTML per iBooks Author, dovrai assicurarti di provvedere alla gestione del tocco e del mouse se desideri usare qualsiasi tipo di controllo non gestito da gesti standard.

 

Apertura del widget HTML

A seconda della complessità del widget HTML, i lettori potrebbero notare un lampeggiamento durante l'inizializzazione dell'HTML quando aprono il widget in iBooks. Per evitare questo effetto, modifica il widget in modo che comunichi a iBooks quando passare dalla visualizzazione del file Default.png a quella del widget HTML in esecuzione.

Per aggiungere questa funzione facoltativa, devi eseguire tre modifiche:

  1. Aggiungi una voce "IBNotifiesOnReady" impostata su "true" nel file info.plist del widget, in modo che iBooks sappia che il widget gli comunicherà quando passare a visualizzare il widget HTML in esecuzione:
    <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>
    Nota: AppleWidget.js è già presente nell'iPad e non è necessario includerlo nel bundle del widget.

  3. Imposta il widget affinché iBooks sappia quando l'HTML viene inizializzato e possa quindi passare dalla visualizzazione del file Default.png a quella del widget HTML in esecuzione (nel JavaScript incluso nella sezione HEAD del file HTML) richiamando quanto segue:
    widget.notifyContentIsReady()

Importante: se decidi di modificare il widget HTML per evitare il lampeggiamento, accertati di completare tutti e tre i passaggi riportati finora. Per un corretto funzionamento la procedura deve essere completata per intero.

Informazioni sulla pubblicazione per servizi web esterni

I widget HTML possono pubblicare contenuti in servizi web esterni solo se tali servizi hanno implementato gli header CORS (Cross-Origin Resource Sharing) appropriati.

Data di pubblicazione: