iBooks Author har stöd för HTML5-widgetar (med filtillägget .wdgt).
Du skapar en HTML-widget för iBooks Author genom att använda en textredigerare eller en app för att skapa webbinnehåll för att skapa följande filer:
- Huvudsaklig HTML-fil: Den här filen är den huvudsakliga delen av widgeten. Du kan döpa den till vad som helst, men filtillägget måste vara ”.html”. Du kan inkludera CSS och JavaScript inuti den huvudsakliga HTML-filen eller lägga till .css- och .js-filer i widgetpaketet och ställa in den huvudsakliga HTML-filen på att ladda dem. I dessa filer kan du använda vilken teknik eller vilka knep som helst som du använder när du designar en webbsida. Som regel använder du HTML för att definiera strukturen för din widget, CSS för att skapa den visuella stilen och JavaScript för interaktiviteten.
- Default.png: Det här är bilden som kommer att visas på sidan och som användare kommer att trycka på för att öppna din widget. Den måste heta ”Default.png,” med versalt ”D”. Det enklaste sättet att skapa en Default.png är att ta en skärmavbild av din huvudsakliga HTML-fil då den körs i en app för att skapa webbinnehåll eller i webbläsaren. När widgeten är aktiv, är den lika stor som Default.png, såvida du inte specificerar en annan storlek i Info.plist.
- Info.plist: Den här filen ger iBooks Author och iBooks den information de behöver för att köra din widget. Den måste heta ”Info.plist.” Du ser information och ett exempel nedan.
När du har skapat de tre obligatoriska filerna (och kanske några valbara filer som CSS eller JavaScript) samlar du ihop dem i ett widgetpaket:
- Använd Finder till att skapa en mapp och lägg dessa filer i mappen.
- Byt namn på mappen och lägg till ett .wdgt-filtillägg till mappnamnet. Detta skapar widgetpaketet och mappsymbolen ändras till en widgetsymbol.
Du kan nu lägga till widgeten i iBooks Author.
Anteckningar
- Om din bok har HTML-widgetar som innehåller filer med kontrolltecken i filnamnet kan den inte publiceras i iBooks Store. Innan du skapar ett widgetpaket bör du kontrollera att ingen av filerna i paketet har sådana tecken i filnamnet. Använd inte egna mappsymboler.
- Undvik att inkludera mappar med dessa namn i ditt widgetpaket:
- Adresser/
- Support Files/Resources/
- Contents/Resources/
- Om du skapar innehåll för iPad-enheter eller Mac-datorer med Retina-bildskärm:
- När du kodar dina HTML-, CSS- och JavaScript-filer följer du standardprotokollet för att skapa webbplatser med Retina (2x)-grafik.
- Widgetpaketet bör innehålla en Default@2x.png-fil med dubbelt så hög upplösning som Default.png-filen. Du kommer inte att kunna visa den här filen i iBooks Author, men den kommer att visas i iBooks på iPad-enheter eller Mac-datorer som har Retina-bildskärm.
- Om du vill att widgeten ska visas i helskärm när den zoomas in, gör du Default.png-filen 768 x 1024 pixlar och Default@2x.png-filen 1536 x 2048 pixlar. Om du vill att widgeten ska visas mindre än helskärm ska du göra Default.png-filen så stor som du vill att widgeten ska visas som (till exempel 600 x 900) och Default@2x.png-filen dubbelt så stor som den.
- Läs mer om att optimera böcker som skapas i iBooks Author.
Info.plist
En vanlig widgets Info.plist innehåller en del obligatoriska nycklar och en del valfria nycklar. Dessa nycklar listas nedan tillsammans med deras definitioner och några exempelvärden för en widget som heter ”Hello World.”
| Nyckel | Exempelvärde | Definition |
| CFBundleDevelopmentRegion | English | Valfritt. En sträng som specificerar den ursprungliga regionen för paketet. Denna motsvarar vanligtvis modersmålet för personen som skapade paketet. |
| CFBundleDisplayName | Hello World | Obligatorisk. En sträng som innehåller widgetens faktiska namn, som visas i iBooks Author och iBooks. |
| CFBundleIdentifier | com.apple.widget.HelloWorld | Obligatorisk. En sträng som unikt identifierar widgeten, i omvänt domänformat. |
| CFBundleName | Hello World | Valfritt. En sträng som innehåller widgetens namn. Den måste matcha namnet på widgetpaketet i Finder utan filtillägget .wdgt. |
| CFBundleShortVersionString | 1.0 | Valfritt. En sträng som anger widgetens förkortade versionsnummer. Den är ofta samma som CFBundleVersion. |
| CFBundleVersion | 1.0 | Valfritt. En sträng som anger widgetens versionsnummer. |
| Höjd | 768 | Valfritt. Ett nummer som anger höjden, i pixlar, på widgeten. Om det inte specificeras, används höjden på Default.png. |
| MainHTML | HelloWorld.html | Obligatorisk. En sträng som anger namnet på HTML-filen som implementerar widgeten. |
| Bredd | 1 024 | Valfritt. Ett nummer som anger bredden, i pixlar, på widgeten. Om det inte specificeras, används bredden på Default.png. |
| IBNotifiesOnReady | <true/> | Valfritt. När det här alternativet är inställt på sant talar widgeten om för iBooks när det ska växla från att visa Default.png till att visa HTML-widgeten som körs. |
Den fullständiga Info.plist-filen för en widget ser ut så här:
<?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>
Begränsningar
Vissa funktioner är inte kompatibla. Du bör inte använda dessa nycklar:
| Nyckel | Beskrivning |
| AllowFileAccessOutsideOfWidget | Widgetar i böcker som skapats med iBooks Author kan inte komma åt filer i det allmänna filsystemet. |
| AllowFullAccess | Kortskrift för en lista över andra åtkomstnycklar, varav vissa inte är kompatibla. |
| AllowInternetPlugins | Plugin-program för internet, som Flash, är inte tillgängliga i böcker som skapats med iBooks Author. Filmer och ljud kan inkluderas via HTML5 <video>- och <ljud>-elementen. Obs! Filmer och ljud inuti HTML-widgetar är inte DRM-skyddade. |
| AllowJava | Widgetar i böcker som skapats med iBooks Author får inte innehålla Java-innehåll. |
| AllowSystem | Systemkommandon är inte tillgängliga för widgetar i böckerna som skapats med iBooks Author. |
| Plugin | Plugin-komponenten Cocoa kan inte inkluderas i widgetar i böcker som skapats med iBooks Author. |
Dessa nycklar ignoreras av iBooks Author:
| Nyckel | Beskrivning |
| CloseBoxInsetX | En intilliggande dekoration visas inte i widgetar i iBooks Author och iBooks. |
| CloseBoxInsetY |
|
| Typsnitt | Typsnittspaket kan inte användas med iBooks Author-widgetar. |
Film- och ljudkrav
Du kan inte använda media som har ”.m4v”- eller ”.m4p”-filtillägg.
Du rekommenderas använda H.264-video i en MPEG-4-behållare med filtillägget ”.mp4”.
För ljuduppspelning rekommenderas du använda AAC-ljud i en MPEG-4-behållare med filtillägget ”.m4a”.
Obs! Video- och ljudmedia i HTML-widgetpaket är inte DRM-skyddade.
Obs! I vissa fall kan det hända att film- och ljudfiler i HTML-widgetar inte spelas upp i iBooks Author men fungerar i iBooks. Om du inte kan spela upp en film- eller ljudfil i din widget i iBooks Author kan du prova med att förhandsvisa på iPad-enheten eller i OS X Mavericks. Detta bör visa hur filen spelas upp i den färdigställda boken.
Lokalisering
Lokaliserade strängar och tillgångar stöds inte i iBooks Author. Därför bör användarsynliga textsträngar ingå och vara inbäddade i målspråket.
Klippta element
Om till exempel ett <videoelement> ser ut att vara klippt på ena sidan, kan det bero på att det expanderas för att fylla ut ett utrymme som är större än det som syns. Kontrollera CSS med tanke på width:auto i #video-väljaren och ändra den så att de faktiska måtten motsvaras. Om din widget till exempel innehåller en video vars mått är 960 x 540, ska du kontrollera CSS med tanke på den relevanta väljaren och uttryckligen ställa in bredden och höjden till korrekta värden:
#video { width: 960; height: 540;}Utveckla för både iOS och OS X Mavericks
I iOS och OS X används helt olika inmatningstyper, så när du skapar HTML-widgetar för iBooks Author måste du se till att widgetarna stöder både pekskärmsinmatning och inmatning med musdon, om du inte vill använda kontroll med standardgester.
Så här öppnar du HTML-widgeten
Beroende på hur komplicerad din HTML-widget är, kan en blixt visas för läsarna under HTML-initialiseringen när de öppnar widgeten i iBooks. För att undvika denna blixt ändrar du widgeten så att iBooks-programmet meddelas när det är dags att växla från att filen Default.png visas till att HTML-widgeten som körs visas.
Det finns tre ändringar som du måste göra för att lägga till den här valbara funktionen:
- Lägg till ett ”IBNotifiesOnReady”-objekt inställt på ”sant” i widgetens info.plist-fil, så att iBooks vet att den talar om när det är dags att växla till att visa HTML-widgeten som körs:
<key>IBNotifiesOnReady</key><true/>
- Ställ in widgeten på att ladda biblioteket Apple JavaScript i HEAD-delen av HTML-filen:
<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
Obs! AppleWidget.js finns redan på iPad-enheten och du behöver inte lägga till det i widgetpaketet. - Ställ in widgeten så att iBooks meddelas när HTML initialiseras och iBooks kan växla från att visa filen Default.png till att visa HTML-widgeten som körs genom att anropa (i JavaScript som ingår i HEAD-delen av HTML-filen):
widget.notifyContentIsReady()
Viktigt! Om du väljer att ändra widgeten för att undvika blixten ser du till att utföra samtliga tre steg som nämns ovan. Du måste slutföra samtliga steg för att detta ska fungera korrekt.
Om inlägg på externa webbtjänster
Det är bara möjligt att göra inlägg på externa webbtjänster med HTML-widgetar om lämpliga CORS-rubriker (Cross-Origin Resource Sharing) har implementerats i dessa webbtjänster.