Skapa HTML5-widgetar för iBooks Author

Läs om hur du skapar HTML5-widgetar att använda i böcker som du skapar i iBooks Author.

iBooks Author har stöd för HTML5-widgetar med filtillägget WDGT. Skapa en HTML5-widget genom att använda en textredigerare eller en app för att skapa webbinnehåll för att skapa dessa tre filer:

  • Huvudsaklig HTML-fil: Den här filen är den huvudsakliga delen av widgeten. Du kan döpa den till vad som helst, men den måste ha filtillägget HTML. Du kan inkludera CSS och JavaScript inuti den huvudsakliga HTML-filen. Du kan också lägga till CSS- och JS-filer i widgetpaketet och ladda dem från den huvudsakliga HTML-filen. Du kan använda vilken teknik som helst som du använder när du skapar en webbplats. Använd HTML för att definiera strukturen i widgeten, CSS för att skapa den visuella stilen och JavaScript för att göra den interaktiv. 
  • Default.png: Det enklaste sättet att skapa en Default.png är att ta en skärmbild av din huvudsakliga HTML-fil i en app för att skapa webbinnehåll eller i webbläsaren. Det här är bilden som användare ser på sidan och trycker på för att öppna widgeten. Ta en skärmbild av din huvudsakliga HTML-fil i webbläsaren eller i en app för att skapa webbinnehåll. Ge den namnet Default.png och se till att använda versalt ”D”. När widgeten är aktiv har den samma storlek som Default.png-filen. Du kan ändra dess storlek i Info.plist-filen.
  • Info.plist: Den här filen ger iBooks Author och Apple Books den information de behöver för att köra din widget. Filnamnet måste vara ”Info.plist”.

När du har skapat dessa obligatoriska filer kan du skapa övriga filer, till exempel CSS- eller JavaScript-filer. Lägg sedan till alla i widgetpaketet:

  1. Skapa en mapp i Finder.
  2. Lägg till filerna i din nya mapp.
  3. Byt namn på mappen och lägg till ett WDGT-filtillägg till mappnamnet för att skapa widgetpaketet. Mappsymbolen ändras till en widgetsymbol.
  4. Lägg till din widget till iBooks Author.

Tips för att skapa widgetar

Innan du skapar ditt widgetpaket ska du se till att det inte finns några filer i paketet som har kontrolltecken i deras filnamn. Du kan inte publicera din bok i Book Store i Apple Books om det finns en sådan fil.

Widgeten kan inte få åtkomst till internet om du har ställt in att den ska spelas upp automatiskt. 

Använd inte anpassade mappsymboler och undvik följande mappnamn i din widget:

  • Resurser/
  • Support Files/Resources/
  • Contents/Resources/

Så här optimerar du din widget för en Retina-skärm:

  • I HTML-, CSS- och JavaScript-filer ska du använda standardprotokollet för webbplatser med Retina (2x)-grafik. 
  • Ta med en Default@2x.png-fil i din widget. Se till att filen har dubbel upplösning jämfört med Default.png-filen. Du kan inte visa filen i iBooks Author, men den går att visa i Apple Books på en Retina-skärm.

Läs mer om hur du optimerar böcker som du skapar med iBooks Author.

Info.plist

En vanlig widgets Info.plist-fil innehåller en del obligatoriska nycklar och en del valfria nycklar. Denna tabell listar dessa nycklar, deras definitioner och några exempelvärden för en widget som heter Hello World. 

Nyckel Exempelvärde Obligatorisk Definition
CFBundleDevelopmentRegion Engelska 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 det faktiska namnet på widgeten. Det visas i iBooks Author och Apple Books.
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. Det ä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 Apple Books 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>

Nyckelbegränsningar

Använd inte dessa nycklar – funktionerna är inte kompatibla:

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 Insticksprogram för internet, som Flash, är inte tillgängliga i böcker som skapats med iBooks Author. Du kan ta med filmer och ljud med HTML5-elementen <video> och <audio>.
Filmer och ljud i HTML-widgetar DRM-skyddas inte.
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.
Insticksprogram Insticksprogramskomponenten Cocoa kan inte inkluderas i widgetar i böcker som skapats med iBooks Author.

Dessa nycklar ignoreras av iBooks Author: 

Nyckel Beskrivning
CloseBoxInsetX Widgetar i iBooks Author och Apple Books visar inte en intilliggande dekoration.
CloseBoxInsetY  

 

Typsnitt iBooks Author-widgetar kan inte använda typsnittspaket.

Video- och ljudkrav

Du kan inte använda medier som har filnamnstilläggen M4V eller M4P. Använd ett av dessa format med filnamnstillägget MP4:

  • H.264-video: Upp till 720p, 60 bildrutor per sekund. High Profile 4.2 med AAC-LC-ljud upp till 160 kBbit/s, 48 kHz, stereoljud. Videor som öppnas i iMovie 10 med alternativet HD 720p använder dessa inställningar.
  • MPEG-4-video: Upp till 2,5 MBit/s, 640 x 480 bildpunkter, 30 bildrutor per sekund. Simple Profile med AAC-LC-ljud upp till 160 kBit/s per kanal, 48 kHz, stereoljud.

Använd AAC (8 till 320 kBit/s 48 kHz stereo) för ljud, med filnamnstillägget M4A.

Video och ljud i HTML-widgetpaket är inte DRM-skyddade.

Om du inte kan spela upp en film- eller ljudfil i din widget i iBooks Author kan du förhandsvisa den på din iPhone, iPad eller Mac. Det här visar hur filen spelas upp i din färdigställda bok.

Lokalisering

iBooks Author har inte stöd för lokaliserade strängar och objekt. Inkludera textsträngar i målspråket som läsaren kan se inuti.

Korrigera beskurna element

Ett element, till exempel en <video>, kanske visas beskuren på en sida. Det kan inträffa om dess dimensioner är större än den tillgängliga platsen. Hitta CSS för width:auto i #video-väljaren och ändra den så att de faktiska måtten motsvaras. Din widget kan till exempel innehålla en video med dimensionerna 960 × 540. Kontrollera CSS för den relevanta väljaren och ställ in bredden och höjden till korrekta värden:

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

Utveckla för iOS och macOS

iOS och macOS använder olika inmatningstyper. Du kan tillgodose både pek- och musinmatning när du skapar dina HTML-widgetar för iBooks Author.

Undvika ett ljussken när läsaren öppnar HTML-widgeten

Om din HTML-widget är mycket komplicerad kan ett ljussken visas när läsarna öppnar den i Apple Books. För att undvika detta uppdaterar du din widget så att den talar om för Apple Books när den ska växla från Default.png-filen till HTML-widgeten:

1. Lägg till ett IBNotifiesOnReady-objekt som har värdet sant i widgetens Info.plist-fil. Det gör så att Apple Books vet att widgeten kommer att meddela när den ska växla till HTML-widgeten.

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

2. Ställ in widgeten på att ladda Apple JavaScript-biblioteket i <head>-delen av HTML-filen:

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

iOS och macOS har redan AppleWidget.js, så du behöver inte inkludera den i ditt widgetpaket.

3. Ställ in din widget att meddela Apple Books när HTML är startad. Anropa följande i JavaScript som finns i <head>-delen av HTML-filen:

widget.notifyContentIsReady()

Publicera till en extern webbtjänst

Du kan endast publicera HTML-widgetar till externa webbtjänster om de använder korrekta CORS-rubriker (Cross-Origin Resource Sharing).

Publiceringsdatum: