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 Apple Booksille 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:
Luo Finderissa kansio.
Lisää tiedostot uuteen kansioon.
Nimeä kansio uudelleen ja lisää siihen .wdgt-pääte. Toimenpiteellä luodaan widgettinippu. Kansiokuvake muuttuu widgettikuvakkeeksi.
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 Apple Booksin Books 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 Apple Booksissa 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 | englanti | 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 Apple Booksissa. |
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. |
pituutesi | 768 | Valinnainen | Luku, joka kertoo widgetin korkeuden pikseleissä. Jos sitä ei ole määritetty, käytetään Default.png-tiedoston korkeutta. |
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, käytetään Default.png-tiedoston leveyttä. |
IBNotifiesOnReady | Valinnainen | Kun arvoksi on asetettu ”true”, widgetti kertoo Apple Booksille, 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. Voit sisällyttää elokuvia ja ääntä käyttämällä HTML5:tä 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 Apple Booksin widgetit eivät näytä close-decoration-ominaisuutta. |
CloseBoxInsetY | |
Fontit | 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
Elementti, kuten
#video { leveys: 960; pituus: 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ä Apple Booksissa avattaessa saattaa näkyä välähdys. Välähdys voidaan välttää päivittämällä widgetti siten, että se kertoo Apple Booksille, milloin siirtyä Default.png-tiedostosta HTML-widgettiin:
1. Lisää widgetin info.plist-tiedostoon IBNotifiesOnReady-kohta, jonka arvona on ”true”. Näin Apple Books tietää widgetin kertovan, milloin Apple Booksin tulee siirtyä HTML-widgettiin.
<key>IBNotifiesOnReady</key>
2. Määritä widget lataamaan Apple JavaScript -kirjasto HTML-tiedoston
AppleWidget.js on jo iOS:ssä ja macOS:ssä, eikä sitä tarvitse sisällyttää widgettinippuun.
3. Aseta widgetti kertomaan Apple Booksille, milloin HTML-tiedosto alustetaan. JavaScriptissa se on HTML-tiedoston
widget.notifyContentIsReady()
Postaaminen ulkoisiin verkkopalveluihin
HTML-widgetit voidaan postata vain sellaisiin ulkoisiin verkkopalveluihin, joissa käytetään asianmukaisia Cross-Origin Resource Sharing (CORS) -otsakkeita.
