HTML5-kisalkalmazások létrehozása az iBooks Author alkalmazáshoz

A cikk ismerteti a HTML5-kisalkalmazások létrehozásának menetét azokhoz a könyvekhez, amelyeket az iBooks Authorban hoz létre.

Az iBooks Author támogatja a .wdgt kiterjesztésű HTML5-kisalkalmazásokat. Egy HTML5-kisalkalmazás elkészítéséhez szövegszerkesztő vagy tartalmak létrehozására alkalmas alkalmazással hozza létre a következő három fájlt:

  • Fő HTML-fájl: Ez a fájl a widget fő része. Bármilyen nevet adhat neki, de mindenképpen .html kiterjesztésűnek kell lennie. A fő HTML-fájlba tehet CSS-t és JavaScriptet is. Vagy hozzáadhat .css és .js kiterjesztésű fájlokat is a widgetcsomaghoz, és betöltheti őket a fő HTML-fájlból. Ehhez bármilyen, a weboldalak létrehozásához használt eljárást segítségül hívhat. A HTML-lel határozza meg a felépítést, a CSS a vizuális stílust biztosítja, a JavaScript pedig interaktívvá teszi. 
  • Default.png fájl: A Default.png fájlt a legegyszerűbben úgy hozhatja létre, hogy képernyőképet készít a fő HTML-fájlról egy webtartalom-készítő alkalmazásban vagy böngészőben. Az olvasók ezt a képet fogják látni az oldalon, és erre koppintva nyithatják meg a kisalkalmazást. Készítsen képernyőképet a fő HTML-fájlról egy webtartalom-készítő alkalmazásban vagy egy böngészőben. Adja neki a „Default.png” nevet, amihez mindenképpen nagy „D” betűt használjon. Amikor a kisalkalmazás aktív, a Default.png fájl méretét veszi fel. A méretet az Info.plist fájlban tudja módosítani.
  • Info.plist fájl: Ez a fájl tartalmazza azokat az információkat, amelyekre az iBooks Author és az Apple Books alkalmazásnak szüksége van a kisalkalmazás futtatásához. A fájl neve az „Info.plist” legyen.

Miután létrehozta a szükséges fájlokat, hozzon létre bármilyen egyéb fájlt, például CSS- vagy JavaScript-fájlokat. Majd ezeket adja hozzá a widgetcsomaghoz:

  1. A Finderben hozzon létre egy mappát.
  2. Adja hozzá a fájlokat az új mappához.
  3. A widgetcsomag létrehozásához nevezze át a mappát, és kiterjesztésnek a .wdgt végződést használja. A mappa ikonja ekkor átvált a widget ikonjára.
  4. Adja hozzá a widgetet az iBooks Author alkalmazáshoz.

Tippek a widgetek létrehozásához

A widgetcsomag létrehozása előtt győződjön meg arról, hogy a csomag egyetlen fájlneve se tartalmaz vezérlőkaraktereket. Ha bármelyik tartalmaz ilyet, a könyv nem tehető közzé az Apple Books Book Store áruházában.

Ha a kisalkalmazást automatikus indításra állítja, nem fog tudni csatlakozni az internethez. 

Ne használjon egyedi mappaikonokat, és ne használja a következő mappaneveket a kisalkalmazásban:

  • Segédanyagok/
  • Support Files/Resources/
  • Contents/Resources/

A kisalkalmazás optimalizálása a Retina kijelzőhöz:

  • A HTML-, CSS- és JavaScript-fájlokban kövesse a Retina (2x) grafikájú webhelyek létrehozására vonatkozó szabványos protokollt. 
  • Szerepeltessen egy Default@2x.png fájlt a widgetben. Ennek a fájlnak a Default.png fájlhoz képest kétszer akkora legyen a felbontása. Ez a fájl az iBooks Author alkalmazásban nem, de Retina kijelzőn az Apple Books alkalmazásban megjelenik.

Ismerje meg, hogyan tudja az iBooks Author segítségével létrehozott könyveket optimalizálni.

Az Info.plist fájl

Az egyszerű widgetek Info.plist fájlja kötelező kulcsokat és néhány opcionális kulcsot tartalmaz. Ezeket a kulcsokat az alábbi táblázatban ismertetjük a definíciójukkal és néhány, egy „Helló világ” elnevezésű widgetre vonatkozó példaértékkel együtt. 

Kulcs Példaérték Kötelező Definíció
CFBundleDevelopmentRegion Angol Nem kötelező A csomag natív régióját megadó karakterlánc. Általában megegyezik a csomag szerzőjének anyanyelvével. 
CFBundleDisplayName Helló világ Kötelező A widget tényleges nevét tartalmazó karakterlánc. Ez fog megjelenni az iBooks Author és az Apple Books alkalmazásban.
CFBundleIdentifier hu.apple.widget.HelloVilag Kötelező A widgetet egyedileg azonosító karakterlánc fordított tartománynév-formátumban.
CFBundleName Helló világ Nem kötelező A widget nevét tartalmazó karakterlánc. A .wdgt fájlkiterjesztéstől eltekintve meg kell egyeznie a widgetcsomag Finderben látható nevével.
CFBundleShortVersionString 1.0 Nem kötelező A widget rövidített verziószámát megadó karakterlánc. Gyakran ugyanaz, mint a CFBundleVersion.
CFBundleVersion 1.0 Nem kötelező A widget verziószámát megadó karakterlánc.
Height 768 Nem kötelező A widget magasságát képpontokban megadó szám. Ha nincs megadva, a rendszer a Default.png fájl magasságát használja.
MainHTML HelloVilag.html Kötelező A widgetet megvalósító HTML-fájl nevét megadó karakterlánc.
Width 1024 Nem kötelező A widget szélességét képpontokban megadó szám. Ha nincs megadva, a rendszer a Default.png fájl szélességét használja.
IBNotifiesOnReady <true/> Nem kötelező Ha az értéke true (igaz), akkor a widget szabályozza, hogy az Apple Books mikor váltson át a Default.png megjelenítéséről a futó HTML-widget megjelenítésére. 

 

A widgetek teljes Info.plist fájlja a következőképpen néz ki: 

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

A kulcsokra vonatkozó korlátozások

Ne használja ezeket a kulcsokat; ezek a funkciók nem kompatibilisek:

Kulcs Leírás
AllowFileAccessOutsideOfWidget Az iBooks Author alkalmazással létrehozott könyvekben található widgetek nem férnek hozzá az általános fájlrendszerben lévő fájlokhoz.
AllowFullAccess További olyan hozzáférési kulcsok összefoglaló megnevezése, amelyek egy része nem kompatibilis.
AllowInternetPlugins Az internetes bővítmények, például a Flash, nem érhetők el az iBooks Author alkalmazással létrehozott könyvekben. A HTML5 <video> és <audio> elem segítségével foglalhat bele videókat és hanganyagot.
A HTML-widgetekben található videók és hangtartalmak nem rendelkeznek digitális másolásvédelemmel (DRM).
AllowJava Az iBooks Author segítségével létrehozott könyvekben található widgetek nem rendelkezhetnek Java-tartalommal.
AllowSystem Az iBooks Author segítségével létrehozott könyvekben található widgetek nem férhetnek hozzá a rendszerparancsokhoz.
Plugin Az iBooks Author segítségével létrehozott könyvekben található widgetek nem rendelkezhetnek Cocoa-bővítményösszetevővel.

Az iBooks Author figyelmen kívül hagyja az alábbi kulcsokat: 

Kulcs Leírás
CloseBoxInsetX Az iBooks Author és az Apple Books widgetjei nem jelenítenek meg bezárási díszítést.
CloseBoxInsetY  

 

Betűtípusok Az iBooks Author widgetjei nem használnak csomagba foglalt betűtípusokat.

Videóra és hangra vonatkozó követelmények

A .m4v és .m4p kiterjesztésű médiafájlok nem használhatók. Az alábbi formátumokat használja az .mp4 kiterjesztésű fájlokhoz:

  • H.264 szabványú videó: 4.2-es szintű High profil (legfeljebb 720p felbontás, 60 képkocka/másodperc) és AAC-LC szabványú hangsáv (legfeljebb 160 kb/s, 48 kHz, sztereó). Azok a videók, amelyeket az iMovie 10 lejátszik HD 720p opcióval, ezeket a beállításokat használják.
  • MPEG-4 szabványú videó: Simple profil (legfeljebb 2,5 Mb/s, 640 × 480 képpont, 30 képkocka/másodperc) és AAC-LC szabványú hangsáv (csatornánként legfeljebb 160 kb/s, 48 kHz, sztereó).

A hanglejátszáshoz használjon AAC (8–320 kb/s, 48 kHz sztereó) kódolású, .m4a kiterjesztésű hangfájlt.

A HTML-widgetcsomagokban található video- és hanganyagok nem rendelkeznek digitális másolásvédelemmel (DRM).

Ha egy video- vagy hangfájl nem indul el a kisalkalmazásban az iBooks Authorban, nézze meg az előnézetet iPhone, iPad készüléken vagy Macen. Így megtudhatja, hogy az alkalmazás hogyan fogja lejátszani a fájlt a kész könyvben.

Honosítás

A honosított karakterláncokat és erőforrásokat nem támogatja az iBooks Author. A célnyelven íródott szöveges karakterláncokat használjon, amelyeket az olvasó beágyazva tekinthet meg.

Nem látható elemek kijavítása

Előfordulhat, hogy egy elem, például egy <videó> egyik oldala nem látszik. Ez esetben valószínűleg a látható területnél nagyobb méretű területet tölt ki. Keresse meg a „width:auto” CSS-paramétert a #video választóban, és módosítsa a tényleges méret szerint. Például a kisalkalmazás tartalmazhat egy 960 x 540 méretű videót. Ellenőrizze az adott rész CSS-ét, és állítsa be megfelelően a szélességet és a magasságot:

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

Fejlesztés iOS és macOS esetén

Az iOS és a macOS nem ugyanolyan beviteli típusokat alkalmaz. Ügyeljen rá, hogy az iBooks Author alkalmazáshoz létrehozott HTML-kisalkalmazások érintéssel és egérrel is vezérelhetők legyenek.

Kerülje el a villogást, amit az olvasók akkor tapasztalhatnak, amikor megnyitják a HTML-kisalkalmazást

Ha a HTML-kisalkalmazás túl bonyolult, előfordulhat, hogy az olvasók villogást tapasztalnak, amikor megnyitják az Apple Books alkalmazásban. Ennek elkerülése érdekében frissítse a kisalkalmazást – így az jelezni tudja majd az Apple Books felé, hogy mikor kell a Default.png fájlról a HTML-kisalkalmazásra váltani:

1. Vegye fel a „true” (igaz) értékre állított „IBNotifiesOnReady” elemet a widget info.plist fájljába. Ezzel jelezheti az Apple Books számára, hogy a HTML-kisalkalmazás fogja tájékoztatni arról, hogy mikor kell átváltani a HTML-kisalkalmazásra.

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

2. Állítsa be a HTML-fájl <head>-szakaszában az Apple JavaScript-függvénytár betöltését:

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

Az iOS és a macOS már rendelkezik az AppleWidget.js-sel, így azt nem kell felvennie a widgetcsomagba.

3. Állítsa be a widgetet úgy, hogy tájékoztassa az Apple Books alkalmazást arról, ha megtörtént a HTML inicializálása. A HTML-fájl <head> szakaszában befoglalt JavaScriptben hívja meg a következőt:

widget.notifyContentIsReady()

Adatok küldése külső webszolgáltatásnak

A HTML-widgetek csak akkor tudnak adatokat küldeni külső webszolgáltatásoknak, ha a webszolgáltatások alkalmazták a megfelelő CORS- (Cross-Origin Resource Sharing) fejléceket.

Közzététel dátuma: