iBooks Author: O vytváření HTML widgetů

Můžete vytvářet widgety ve formátu HTML5 pro použití s knihami vytvořenými v iBooks Author.

iBooks Author podporuje widgety ve formátu HTML5 (s příponou .wdgt).

Chcete-li vytvořit HTML widget pro aplikaci iBooks Author, vytvořte v textovém editoru nebo aplikaci pro vytváření webového obsahu následující soubory: 

  • Hlavní HTML soubor: Tento soubor je hlavní součástí widgetu. Soubor může mít jakýkoli název, ale jeho přípona musí být „.html“. Do hlavního souboru lze vložit kód CSS a JavaScript, nebo je možné přidat soubory .css a .js do balíku widgetu a v hlavním HTML souboru nastavit jejich načtení. V těchto souborech smíte využívat jakékoli postupy nebo triky, které jsou použitelné při návrhu webové stránky. Obecně platí, že v HTML definujete strukturu widgetu, CSS slouží k zadání vizuálního stylu a JavaScript podporuje interaktivitu. 
  • Default.png: Na stránce se zobrazí tento obrázek a uživatelé klepnutím na něj otevřou widget. Soubor se musí jmenovat „Default.png“, s velkým písmenem „D“. Soubor Default.png se dá nejsnáze vytvořit pořízením snímku obrazovky s hlavním HTML souborem zobrazeným v aplikaci pro vytváření webového obsahu nebo ve webovém prohlížeči. Je-li widget aktivní, bude mít stejnou velikost jako obrázek Default.png – pokud nezadáte jinou velikost v souboru Info.plist.
  • Info.plist: Tento soubor poskytuje aplikacím iBooks Author a iBooks informace potřebné ke spuštění widgetu. Název souboru musí být „Info.plist“. Podrobnosti a ukázka následují dále. 

Po vytvoření třech povinných souborů (a případně i volitelných souborů, například souborů CSS nebo JavaScriptu) z nich sestavte balík widgetu:

  1. Pomocí aplikace Finder vytvořte složku a přidejte do ní soubory.
  2. Přejmenujte složku a přidejte do názvu složky příponu .wdgt. Takto vytvoříte balík widgetu a ikona složky se změní na ikonu widgetu.

Váš widget je nyní připraven k přidání do aplikace iBooks Author.

Poznámky

  • Pokud jsou do knihy vloženy HTML widgety obsahující soubory s řídicími znaky v názvech souborů, nemůže být kniha v iBooks Storu publikována. Před vytvořením balíku widgetu se ujistěte, že žádný ze souborů v balíku nepoužívá tyto znaky v názvu souboru. Nepoužívejte vlastní ikony složky.
  • Do balíku widgetu nepřidávejte složky s těmito názvy:
    • Resources/
    • Support Files/Resources/
    • Contents/Resources/
  • Pokud vytváříte obsah pro iPady nebo Macy s Retina displejem:
    • Při psaní kódu HTML, CSS a JavaScriptu dodržujte standardní pravidla pro vytváření webů s grafikou pro Retina displeje (2x). 
    • Balík widgetu by měl zahrnovat soubor Default@2x.png, jehož rozlišení by mělo být dvojnásobkem rozlišení souboru Default.png. Tento soubor nezobrazíte v aplikaci iBooks Author, ale uvidíte ho v iBooks na iPadech nebo v Macích s Retina displejem. 
  • Pokud chcete, aby widget při přiblížení pokrýval celou plochu obrazovky, vytvořte soubor Default.png s rozměry 768 x 1024 pixelů a soubor Default@2x.png s rozměry 1536 x 2048 pixelů. Pokud se má widget zobrazit jen na části obrazovky, nastavte rozměry souboru Default.png podle požadované velikosti na displeji (například 600 x 900) a rozměry souboru Default@2x.png na dvojnásobek rozměrů prvního souboru.
  • Přečtěte si další informace o optimalizaci knih vytvořených pomocí aplikace iBooks Author.

Soubor Info.plist 

Základní soubor Info.plist widgetu obsahuje několik povinných a několik nepovinných klíčů. Tyto klíče jsou uvedeny v následující tabulce spolu s jejich definicemi a několika ukázkovými hodnotami pro widget nazvaný „Hello World“. 

CFBundleDevelopmentRegion English Volitelné. Řetězec určující nativní region balíku. Obvykle odpovídá nativnímu jazyku osoby, která balík vytvořila. 
CFBundleDisplayName Hello World Povinné. Řetězec obsahující skutečný název widgetu, který bude zobrazen v aplikacích iBooks Author a iBooks.
CFBundleIdentifier com.apple.widget.AhojSvete Povinné. Jedinečný řetězcový identifikátor widgetu, zadaný v reverzním formátu domény.
CFBundleName Hello World Volitelné. Řetězec obsahující název widgetu. Musí být shodný s názvem balíku widgetu ve Finderu, ale bez přípony souboru .wdgt.
CFBundleShortVersionString 1.0 Volitelné. Řetězec udávající zkrácené číslo verze widgetu. Často je shodný s klíčem CFBundleVersion.
CFBundleVersion 1.0 Volitelné. Řetězec udávající číslo verze widgetu.
Height 768 Volitelné. Číslo udávající výšku widgetu v pixelech. Pokud není zadáno, je použita výška souboru Default.png.
MainHTML HelloWorld.html Povinné. Řetězec obsahující název souboru HTML, který tvoří implementaci widgetu.
Width 1024 Volitelné. Číslo udávající šířku widgetu v pixelech. Pokud není zadáno, je použita šířka souboru Default.png.
IBNotifiesOnReady <true/> Volitelné. Je-li tento klíč nastaven na true, widget oznámí aplikaci iBooks, kdy má přepnout ze zobrazení souboru Default.png na zobrazení spuštěného HTML widgetu. 

 Úplný soubor Info.plist widgetu vypadá třeba takto: 

<?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>Czech</string>	<key>CFBundleDisplayName</key>	<string>Hello World</string>	<key>CFBundleIdentifier</key>	<string>com.apple.widget.AhojSvete</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>

Omezení a limity

Některé funkce nejsou kompatibilní. Následující klíče raději nepoužívejte:

AllowFileAccessOutsideOfWidget Widgety v knihách vytvořených pomocí aplikace iBooks Author nemohou přistupovat k souborům v obecném souborovém systému.
AllowFullAccess Zkratka pro seznam jiných přístupových klíčů, z nichž některé nejsou kompatibilní.
AllowInternetPlugins V knihách vytvořených pomocí aplikace iBooks Author nejsou dostupné některé internetové plug-iny, například Flash. Filmy a zvuky lze vložit pomocí elementů HTML5 <video> nebo <audio>.
Poznámka: Soubory a zvuky uvnitř HTML widgetů nejsou chráněny technologií DRM.
AllowJava Widgety v knihách vytvořených pomocí aplikace iBooks Author nemohou mít vložen obsah jazyka Java.
AllowSystem Widgety v knihách vytvořených pomocí aplikace iBooks Author nemají přístup k systémovým příkazům.
Plug-in Widgety v knihách vytvořených pomocí aplikace iBooks Author nemohou obsahovat komponentu plug-inu Cocoa.

Aplikace iBooks Author ignoruje tyto klíče: 

CloseBoxInsetX Widgety v aplikacích iBooks Author a iBooks nezobrazují dekoraci tlačítka pro zavření.
CloseBoxInsetY  

 

Písma Widgety vytvořené v aplikaci iBooks Author nesmí používat přibalená písma.

Požadavky na filmy a zvuky

Není možné používat multimédia s příponou souborů „.m4v“ nebo „.m4p“. 

Doporučujeme používat video ve formátu H.264 uložené v kontejneru MPEG-4 s příponou souboru „.mp4“.

Pro zvuky je doporučeno používat formát AAC, uložený v kontejneru MPEG-4 s příponou souboru „.m4a“.

Poznámka: Video a zvuky uvnitř balíků HTML widgetů nejsou chráněny technologií DRM.

Poznámka: V některých případech nelze přehrát video a zvukové soubory uvnitř HTML widgetů v aplikaci iBooks Author, bude je ale možné přehrát v aplikaci iBooks. Pokud nedokážete přehrát film nebo zvukový soubor ve widgetu v aplikaci iBooks Author, zkuste zobrazit náhled na iPadu nebo v OS X Mavericks. Tam byste měli vidět, jak bude soubor přehrán v dokončené knize.

Lokalizace

Lokalizace řetězců a zdrojů není v aplikaci iBooks Author podporována. Všechny textové řetězce, které uvidí uživatel, je proto zapotřebí vkládat přímo v cílovém jazyce.

Oříznuté prvky

Pokud se některý prvek, například <video>, objeví oříznutý na jedné straně, může být příčinou jeho zvětšení, při kterém prvek vyplňuje větší prostor, než jaký je vidět. Vyhledejte v kódu CSS vlastnost "width:auto" v selektoru #video a upravte ji tak, aby odpovídala skutečným rozměrům. Jestliže například widget obsahuje video o rozměrech 960 x 540 pixelů, vyhledejte v kódu CSS odpovídající selektor a nastavte v něm správné hodnoty výšky a šířky:

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

Vývoj pro iOS i OS X Mavericks

iOS a OS X používají zcela odlišné typy vstupu. Pokud tedy vytváříte HTML widgety pro aplikaci iBooks Author a chcete používat jakýkoli jiný typ ovládání, než je ovládání pomocí standardních gest, musíte se ujistit, že widgety budou splňovat požadavky dotykového ovládání i ovládání myší.

 

Otevření HTML widgetu

V závislost na tom, jak moc je HTML widget složitý, mohou čtenáři po otevření widgetu v aplikaci iBooks postřehnout bliknutí při inicializaci kódu HTML. Tomuto bliknutí se můžete vyhnout úpravou widgetu tak, aby widget ohlásil aplikaci iBooks okamžik, při kterém má přepnout ze zobrazení souboru Default.png na zobrazení spuštěného widgetu HTML.

Tuto volitelnou funkčnost přidáte třemi samostatnými úpravami:

  1. Přidáte do souboru widgetu info.plist klíč „IBNotifiesOnReady“ a nastavíte ho na „true“, aby aplikace iBooks věděla, že jí tento widget oznámí, kdy má přepnout na zobrazení spuštěného HTML widgetu:
    <key>IBNotifiesOnReady</key><true/>
  2. Přidáte do části HEAD souboru HTML widgetu kód pro načtení potřebné knihovny Apple JavaScript:
    <script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
    Poznámka: Soubor AppleWidget.js je na iPadu dostupný a není ho proto nutné vkládat do balíku widgetu.

  3. Přidáte do widgetu následující volání (umístěné v kódu jazyka JavaScript uvnitř části HEAD souboru HTML), které ohlásí aplikaci iBooks dokončení inicializace HTML, aby iBooks přepnula ze zobrazení souboru Default.png na zobrazení spuštěného widgetu HTML:
    widget.notifyContentIsReady()

Důležité: Jestliže se rozhodnete upravit HTML widget tak, aby při jeho spuštění nedocházelo k bliknutí, musíte provést všechny tři uvedené úpravy. Všechny kroky je nutné plně dokončit, jinak funkce nebude pracovat správně.

Odesílání příspěvků do externích webových služeb

HTML widgety umí odesílat zprávy do externích webových služeb jen v případě, kdy tyto služby mají implementovány příslušné hlavičky CORS (Cross-Origin Resource Sharing) .

Datum zveřejnění: