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:
Skapa en mapp i Finder.
Lägg till filerna i din nya mapp.
Byt namn på mappen och lägg till ett WDGT-filtillägg till mappnamnet för att skapa widgetpaketet. Mappsymbolen ändras till en widgetsymbol.
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. |
Längd | 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.Bredd1 024 Valfritt |
Bredd | 1 024 | Valfritt | Ett nummer som anger bredden, i pixlar, på widgeten. Om det inte specificeras används bredden på Default.png. |
IBNotifiesOnReady | 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 som använder HTML5 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
#video { bredd: 960; höjd: 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>
2. Ställ in widgeten att läsa in Apple JavaScript-biblioteket i
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. I JavaScript som är i
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).
