Opprette HTML5-widgeter for iBooks Author

Les om hvordan du oppretter HTML5-widgeter som du kan bruke i bøker du lager i iBooks Author.

iBooks Author støtter HTML5-widgeter, som har filendelsen .wdgt. Når du skal opprette en HTML5-widget, bruker du en tekstbehandlings- eller innholdsapp for å lage disse tre filene:

  • HTML-hovedfil: Denne filen utgjør hoveddelen av widgeten. Den kan ha et hvilket som helst navn, men filendelsen må være .html. Du kan bruke CSS og JavaScript inne i HTML-hovedfilen. Eller du kan legge til .css- og .js-filer i widgetpakken og laste dem inn fra HTML-hovedfilen. Du kan bruke alle teknikker som kan brukes til å designe en nettside. Bruk HTML til å definere strukturen i widgeten, CSS til å sørge for den visuelle stilen og JavaScript til å gjøre den interaktiv. 
  • Default.png-fil: Den enkleste måten å opprette en Default.png-fil er å ta et skjermbilde av HTML-hovedfilen i en webinnholdsapp eller nettleser. Dette er bildet som lesere skal se på siden og trykke på for å åpne widgeten. Ta et skjermbilde av HTML-hovedfilen i en nettleser eller en webinnholdsapp. Gi det navnet «Default.png» og pass på å bruke en stor «D». Når widgeten er aktiv, er det størrelsen på Default.png-filen. Du kan endre størrelsen i Info.plist-filen.
  • Info.plist-fil: Denne filen gir iBooks Author og Apple Books informasjonen de trenger for å kjøre widgeten. Filnavnet må være «Info.plist».

Etter at du har opprettet disse påkrevde filene, kan du opprette andre ønskelige filer, som CSS- eller JavaScript-filer. Deretter legger du alle sammen i en widgetpakke:

  1. Opprett en mappe i Finder.
  2. Legg til filene i den nye mappen.
  3. Gi mappen et nytt navn og legg til filendelsen .wdgt til mappenavnet for å opprette widgetpakken. Mappesymbolet endres til et widgetsymbol.
  4. Legg til widgeten i iBooks Author.

Tips om oppretting av widgeter

Før du oppretter widgetpakken, må du kontrollere at ingen av filene i pakken har et styretegn i filnavnet. Hvis det er en fil som har dette, kan du ikke publisere boken til Book Store i Apple Books.

Hvis du angir at filen skal spilles av automatisk, får den ikke tilgang til Internett. 

Ikke bruk tilpassede mappesymboler, og unngå følgende mappenavn i widgeten:

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

Slik optimaliserer du widgeten for en Retina-skjerm:

  • I HTML-, CSS- og JavaScript-filer bruker du standardprotokollen for nettsteder med Retina (2x)-grafikk. 
  • Inkluder en Default@2x.png-fil i widgeten. Gi filen dobbelt så stor oppløsning som Default.png-filen. Du kan ikke se denne filen i iBooks Author, men du kan se den i Apple Books på en Retina-skjerm.

Finn ut mer om hvordan du optimaliserer bøker som er laget med iBooks Author.

Info.plist

En grunnleggende Info.plist-fil inneholder noen påkrevde nøkler og noen valgfrie nøkler. Denne tabellen inneholder disse nøklene, definisjonene deres og noen eksempelverdier for en widget som heter «Hello World». 

Nøkkel Eksempelverdi Påkrevd Definisjon
CFBundleDevelopmentRegion Engelsk Valgfri En streng som spesifiserer hjemområdet for pakken. Dette tilsvarer vanligvis morsmålet til personen som opprettet pakken. 
CFBundleDisplayName Hello World Påkrevd En streng som inneholder det faktiske navnet på widgeten. Det vises i iBooks Author og Apple Books.
CFBundleIdentifier com.apple.widget.HelloWorld Påkrevd En streng som identifiserer widgeten på en unik måte, i omvendt domeneformat.
CFBundleName Hello World Valgfri En streng som inneholder navnet på widgeten. Det må samsvare med navnet på widgetpakken i Finder, minus filendelsen .wdgt.
CFBundleShortVersionString 1.0 Valgfri En streng som inneholder et forkortet versjonsnummer for widgeten. Det er ofte identisk med CFBundleVersion.
CFBundleVersion 1.0 Valgfri En streng som inneholder versjonsnummeret for widgeten.
Height 768 Valgfri Et nummer som angir høyden på widgeten i piksler. Høyden av Default.png brukes hvis dette ikke angis.
MainHTML HelloWorld.html Påkrevd En streng som angir navnet på HTML-filen som implementerer widgeten.
Width 1024 Valgfri Et nummer som angir bredden på widgeten i piksler. Bredden av Default.png brukes hvis dette ikke angis.
IBNotifiesOnReady <true/> Valgfri Når det er angitt til «true», forteller widgeten Apple Books når den skal skifte fra å vise Default.png til å vise HTML-widgeten som kjøres. 

 

En fullstendig Info.plist for en widget ser slik ut: 

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

Nøkkelrestriksjoner og begrensninger

Ikke bruk følgende nøkler – funksjonene er ikke kompatible:

Nøkkel Beskrivelse
AllowFileAccessOutsideOfWidget Widgeter i bøker laget med iBooks Author får ikke tilgang til filer i det generelle filsystemet.
AllowFullAccess Kort betegnelse for en liste over andre tilgangsnøkler, som ikke alle er kompatible.
AllowInternetPlugins Internett-programtillegg, som for eksempel Flash, er ikke tilgjengelig i bøker som er opprettet med iBooks Author. Du kan inkludere filmer og lyd ved bruk av HTML5-elementene for <video> og <audio>.
Filmer og lyd inne i HTML-widgeter vil ikke være DRM-beskyttet.
AllowJava Widgeter i bøker laget med iBooks Author kan ikke inkludere Java-innhold.
AllowSystem Widgeter i bøker laget med iBooks Author kan ikke bruke systemkommandoer.
Plugin Widgeter i bøker laget med iBooks Author kan ikke inkludere en Cocoa-tilleggsmodul.

iBooks Author ignorerer disse nøklene: 

Nøkkel Beskrivelse
CloseBoxInsetX Widgeter i iBooks Author og Apple Books viser ingen avslutningsdekorasjon.
CloseBoxInsetY  

 

Fonts iBooks Author-widgeter kan ikke bruke fonter som følger med.

Video- og lydkrav

Du kan ikke bruke medier med filendelsene .m4v eller .m4p. Bruk et av disse formatene med filendelsen .mp4:

  • H.264-video: Opptil 720p, 60 bilder per sekund. High Profile nivå 4.2 med AAC-LC-lyd opptil 160 kbps, 48 kHz, stereolyd. Videoer som åpnes i iMovie 10 med alternativet HD 720p bruker disse innstillingene.
  • MPEG-4-video: Opptil 2,5 Mbps, 640 x 480 piksler, 30 bilder per sekund. Simple Profile med AAC-LC-lyd opptil 160 kbps per kanal, 48 kHz, stereolyd.

Når det gjelder lyd, bruk AAC (8 til 320 kbps, 48 kHz stereo) med filendelsen .m4a.

Video- og lydmedier i HTML-widgetpakker er ikke DRM-beskyttet.

Hvis en film- eller lydfil ikke kan spilles av i widgeten i iBooks Author, prøver du å forhåndsvise den på iPhone, iPad eller Mac. Dette viser hvordan filen spilles av i den ferdige boken.

Lokalisering

iBooks Author støtter ikke lokaliserte strenger og ressurser. Inkluder tekststrenger i målspråket som leseren kan se integrert.

Fikse avkuttede elementer

Et element, som for eksempel en <video>, kan vises avkuttet på den ene siden. Dette kan skje hvis størrelsene på den er større enn den tilgjengelige plassen. Finn «width:auto» i CSS-filen i #video-velgeren og endre den for å gjenspeile den faktiske størrelsen. Widgeten kan for eksempel inneholde en video med målene 960 x 540. Sjekk CSS for den relevante velgeren og angi høyde og bredde til de riktige verdiene:

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

Utvikle for iOS og macOS

iOS og macOS bruker forskjellige inndatatyper. Du kan ta høyde for både berørings- og musebevegelser når du oppretter HTML-widgeter for iBooks Author.

Unngå lysglimt når lesere åpner HTML-widgeten

Hvis HTML-widgeten er veldig komplisert, kan leserne se et lysglimt når de åpner den i Apple Books. Hvis du vil unngå dette, må du oppdatere widgeten slik at den forteller Apple Books når den skal skifte fra å vise Default.png-filen til å vise HTML-widgeten:

1. Legg til en «IBNotifiesOnReady»-linje som er satt til «true» i widgetens Info.plist-fil. Dette gjør at Apple Books vet at widgeten vil fortelle programmet når den skal skifte til å vise HTML-widgeten.

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

2. Angi at widgeten skal laste Apple JavaScript-biblioteket i <head>-delen av HTML-filen:

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

iOS og macOS har allerede AppleWidget.js, så du trenger ikke å inkludere det i widgetpakken.

3. Angi at widgeten skal la Apple Books få vite når HTML er initialisert. I JavaScript som er i <head>-delen av HTML-filen, legger du inn følgende kall:

widget.notifyContentIsReady()

Legge inn innlegg i en ekstern webtjeneste

Du kan bare komme med innlegg fra HTML-widgeter til eksterne webtjenester hvis de bruker riktige Cross-Origin Resource Sharing (CORS)-hoder.

Publiseringsdato: