HTML5-widgettien luominen iBooks Authorissa

Tässä artikkelissa kerrotaan HTML5-widgettien käyttämisestä iBooks Authorissa luotavissa kirjoissa.

iBooks Author tukee HTML5-widgettejä, joiden tiedostopääte on .wdgt. Voit luoda HTML5-widgetin luomalla seuraavat kolme tiedostoa tekstieditorilla tai verkkosisällön tuotantoon käytettävällä ohjelmalla:

  • HTML-päätiedosto: Tämä tiedosto on widgetin pääosa. Nimi voi olla mikä tahansa, kunhan pääte on .html. HTML-päätiedostossa voi käyttää CSS:ää ja JavaScriptiä. Voit myös lisätä .css- ja .js-tiedostot widgettinippuun ja ladata ne HTML-päätiedostosta. Voit käyttää samoja menetelmiä ja keinoja kuin verkkosivun suunnittelussa. HTML:llä määritetään widgetin rakenne, CSS:llä luodaan visuaalinen ilme ja JavaScriptillä tuetaan vuorovaikutteisuutta. 
  • Default.png-tiedosto: Helpoin tapa luoda Default.png-tiedosto on ottaa näytönkaappaus HTML-päätiedostosta verkkosisällön tuotantoon käytettävässä ohjelmassa tai verkkoselaimessa. Tämän kuvan käyttäjät näkevät sivulla, ja widgetti avataan napauttamalla sitä. Ota näytönkaappaus HTML-päätiedostosta verkkoselaimessa tai verkkosisällön tuotantoon käytettävässä ohjelmassa. Nimen täytyy olla Default.png isolla D-kirjaimella. Kun widgetti on aktiivisena, se on Default.png-tiedoston kokoinen. Sen kokoa voi muuttaa Info.plist-tiedostossa.
  • Info.plist-tiedosto: Tämä tiedosto antaa iBooks Authorille ja iBooksille tarvittavat tiedot widgetin suorittamiseen. Nimen täytyy olla Info.plist.

Kun olet luonut nämä pakolliset tiedostot, luo mahdolliset valinnaiset tiedostot, kuten CSS- tai JavaScript-tiedostot. Lisää ne sitten widgettinippuun:

  1. Luo Finderissa kansio.
  2. Lisää tiedostot uuteen kansioon.
  3. Nimeä kansio uudelleen ja lisää siihen .wdgt-pääte. Toimenpiteellä luodaan widgettinippu. Kansiokuvake muuttuu widgettikuvakkeeksi.
  4. Lisää widgettisi iBooks Authoriin.

Vinkkejä widgettien luomiseen

Varmista ennen widgettinipun luomista, ettei siinä ole tiedostoja, joiden nimissä on ohjausmerkkejä. Jos on, kirjaa ei voi julkaista iBooks Storessa.

Jos asetat widgetin toistettavaksi automaattisesti, se ei pääse Internetiin. 

Älä käytä mukautettuja kansiokuvakkeita ja vältä widgetissä seuraavia kansioiden nimiä:

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

Widgetin optimointi Retina-näyttöä varten:

  • Noudata HTML-, CSS- ja JavaScript-tiedostoissa standardinmukaista menettelytapaa koskien verkkosivustojen Retina (2x) -grafiikkaa. 
  • Sisällytä widgettiin Default@2x.png-tiedosto. Tiedoston tarkkuuden tulee olla kaksinkertainen Default.png-tiedostoon nähden. Et voi tarkastella tiedostoa iBooks Authorissa, mutta se näkyy iBooksissa Retina-näytössä.

Lue lisätietoja iBooks Authorilla luotujen kirjojen optimoinnista.

Info.plist-tiedosto

Peruswidgetin Info.plist-tiedostossa on pakollisia ja valinnaisia avaimia. Avaimet ja niiden määritelmät on lueteltu alla olevassa taulukossa. Lisäksi mukana on esimerkkiarvot Hei maailma -nimiselle widgetille. 

Avain Esimerkkiarvo Pakollinen Määritelmä
CFBundleDevelopmentRegion Finnish Valinnainen Merkkijono, joka määrittää nipun kielen. Yleensä sama kuin nipun luoneen henkilön äidinkieli. 
CFBundleDisplayName Hei maailma Pakollinen Merkkijono, jossa on widgetin varsinainen nimi. Se näkyy iBooks Authorissa ja iBooksissa.
CFBundleIdentifier com.apple.widget.HeiMaailma Pakollinen Käänteisessä domain-muodossa oleva merkkijono, joka on widgetin yksilöllinen tunniste.
CFBundleName Hei maailma Valinnainen Merkkijono, jossa on widgetin nimi. Sen täytyy olla sama kuin widgettinipun nimi Finderissa ilman .wdgt-tiedostopäätettä.
CFBundleShortVersionString 1.0 Valinnainen Merkkijono, jossa on widgetin lyhyt versionumero. Se on usein sama kuin CFBundleVersion.
CFBundleVersion 1.0 Valinnainen Merkkijono, jossa on widgetin versionumero.
Height 768 Valinnainen Luku, joka kertoo widgetin korkeuden pikseleissä. Jos sitä ei ole määritetty, Default.png-tiedoston korkeutta käytetään.
MainHTML HeiMaailma.html Pakollinen Merkkijono, jossa on widgetin toteutuksesta vastaavan HTML-tiedoston nimi.
Width 1024 Valinnainen Luku, joka kertoo widgetin leveyden pikseleissä. Jos sitä ei ole määritetty, Default.png-tiedoston leveyttä käytetään.
IBNotifiesOnReady <true/> Valinnainen Kun arvoksi on asetettu ”true”, widgetti kertoo iBooksille, milloin sen pitää siirtyä Default.png-tiedoston näyttämisestä käynnissä olevan HTML-widgetin näyttämiseen. 

 

Widgetin Info.plist-tiedosto näyttää kokonaisuudessaan tältä: 

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

Tärkeimmät rajoitukset

Älä käytä seuraavia avaimia, sillä toiminnot eivät ole tuettuja:

Avain Kuvaus
AllowFileAccessOutsideOfWidget iBooks Authorissa luotujen kirjojen widgetit eivät voi käyttää yleisen tiedostojärjestelmän tiedostoja.
AllowFullAccess Lyhennys muiden pääsyavainten luettelosta, joista kaikki eivät ole yhteensopivia.
AllowInternetPlugins Internet-liitännäisiä, kuten Flashia, ei voi käyttää iBooks Authorissa luoduissa kirjoissa. Videokuvaa ja ääntä voidaan sisällyttää HTML5:n <video>- ja <audio>-elementtien avulla.
HTML-widgeteissä olevaa videokuvaa ja ääntä ei ole DRM-suojattu.
AllowJava iBooks Authorilla luoduissa kirjoissa olevissa widgeteissä ei voi olla Java-sisältöä.
AllowSystem iBooks Authorilla luotujen kirjojen widgetit eivät voi käyttää järjestelmäkomentoja.
Plugin iBooks Authorilla luotujen kirjojen widgeteissä ei voi olla Cocoa-liitännäiskomponenttia.

iBooks Author jättää huomioimatta seuraavat avaimet: 

Avain Kuvaus
CloseBoxInsetX iBooks Authorin ja iBooksin widgetit eivät näytä close-decoration-ominaisuutta.
CloseBoxInsetY  

 

Fonts iBooks Authorin widgetit eivät voi käyttää niputettuja fontteja.

Videokuvan ja äänen vaatimukset

.m4v- ja .m4p-mediatiedostoja ei voi käyttää. Käytä jotakin seuraavista muodoista .mp4-tiedostopäätteellä:

  • H.264-video: enintään 720p, 60 kuvaa sekunnissa. High Profile taso 4.2 AAC-LC-äänellä (enintään 160 kb/s, 48 kHz ja stereoääni). Näitä asetuksia käytetään videossa, joka jaetaan tiedostoon iMovie 10:stä käyttämällä HD 720p -valintaa.
  • MPEG-4-video: enintään 2,5 Mb/s, 640 x 480 pikseliä, 30 kuvaa sekunnissa. Simple Profile AAC-LC-äänellä (enintään 160 kb/s kanavaa kohden, 48 kHz ja stereoääni).

Käytä äänitiedostojen osalta AAC-muotoa (8–320 kb/s, 48 kHz ja stereoääni), jonka pääte on .m4a.

HTML-widgettinipuissa olevaa videokuvaa ja ääntä ei ole DRM-suojattu.

Jos widgetin video- tai äänitiedoston toistaminen ei onnistu iBooks Authorissa, kokeile esikatselua iPhonessa, iPadissa tai Macissa. Siten näet, miten tiedosto toistetaan valmiissa kirjassa.

Lokalisointi

Lokalisoituja merkkijonoja ja sisältöjä ei tueta iBooks Authorissa. Käyttäjälle näkyvät tekstimerkkijonot tulee sitoa tekstiin kohdekielellä.

Leikkautuneiden elementtien korjaaminen

<Video>-elementin kaltaisen elementin toinen puoli voi näkyä leikkautuneena. Syynä voi olla se, että elementti on käytettävissä olevaa tilaa suurempi. Etsi CSS:n #video-valitsimessa oleva ”width:auto”-kohta ja muuta se vastaamaan todellisia mittoja. Esimerkiksi jos widgetissä on video, jonka mitat ovat 960 x 540, etsi CSS:stä oikea valitsin ja aseta leveys ja korkeus oikeisiin arvoihin:

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

Kehittäminen sekä iOS:ään että macOS:ään

iOS:ssä ja macOS:ssä käytetään erilaisia syötetyyppejä. Kun luot HTML-widgettejä iBooks Authoria varten, voit ottaa sekä kosketus- että hiirikäsittelyn huomioon.

Välähdyksen välttäminen HTML-widgettiä avattaessa

Jos HTML-widgettisi on hyvin monimutkainen, widgettiä iBooksissa avattaessa saattaa näkyä välähdys. Välähdys voidaan välttää päivittämällä widgetti siten, että se kertoo iBooksille, milloin siirtyä Default.png-tiedostosta HTML-widgettiin:

1. Lisää widgetin info.plist-tiedostoon IBNotifiesOnReady-kohta, jonka arvona on ”true”. Näin iBooks tietää widgetin kertovan, milloin iBooksin tulee siirtyä HTML-widgettiin.

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






2. Aseta widgetti lataamaan Applen JavaScript-kirjasto HTML-tiedoston <head>-osiossa:

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

AppleWidget.js on jo iOS:ssä ja macOS:ssä, eikä sitä tarvitse sisällyttää widgettinippuun.

3. Aseta widgetti kertomaan iBooksille, milloin HTML-tiedosto alustetaan. Tee HTML-tiedoston <head>-osiossa olevassa JavaScriptissä seuraava kutsu:

widget.notifyContentIsReady()

Julkaiseminen ulkoisiin verkkopalveluihin

HTML-widgetit voidaan julkaista vain sellaisiin ulkoisiin verkkopalveluihin, joissa käytetään asianmukaisia Cross-Origin Resource Sharing (CORS) -otsakkeita.

Julkaisupäivämäärä: