Vytváření HTML5 widgetů pro iBooks Author

Přečtěte si, jak vytvářet HTML5 widgety použitelné v knížkách, které vytvoříte v iBooks Authoru.

iBooks Author podporuje HTML5 widgety, které mají koncovku souboru .wdgt. Při tvorbě HTML5 widgetu použijte textový editor nebo aplikaci pro tvorbu obsahu k vytvoření následujících tří souborů:

  • Hlavní HTML soubor: Tento soubor je hlavní součástí widgetu. Může mít jakýkoli název, ale jeho přípona musí být .html. CSS a JavaScript můžete vložit do hlavního souboru HTML. Anebo můžete soubory .css a .js přidat do balíčku widgetu a načíst je z hlavního souboru HTML. Můžete použít kteroukoli techniku, která se dá použít při navrhování webových stránek. Jazyk HTML použijte k definici struktury widgetu, CSS k vytvoření vizuálního stylu a JavaScript k zajištění interaktivity. 
  • Soubor Default.png: Nejjednodušší způsob, jak soubor Default.png vytvořit, je pořízení snímku obrazovky hlavního HTML souboru v aplikaci pro vytváření webového obsahu nebo ve webovém prohlížeči. Tohle je obrázek, který uživatelé na stránce uvidí a na který klepnou, když chtějí widget otevřít. Ve webovém prohlížeči nebo v aplikaci pro vytváření webového obsahu vytvořte snímek obrazovky s hlavním souborem HTML. Pojmenujte ho „Default.png“ a dávejte pozor, aby název začínal velkým D. když je widget aktivní, má velikost souboru Default.png. Jeho velikost můžete změnit v souboru Info.plist.
  • Soubor 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“.

Až tyto potřebné soubory vytvoříte, můžete vytvářet volitelné soubory podle libosti – třeba soubory CSS a JavaScriptu. Potom je všechny přidejte do balíčku widgetu:

  1. Ve Finderu vytvořte složku.
  2. Do téhle nové složky soubory přesuňte.
  3. Přejmenujte složku a přidejte k jejímu názvu koncovku .wdgt, aby vznikl balíček widgetu. Ikona složky se změní na ikonu widgetu.
  4. Přidejte widget do iBooks Authoru.

Tipy pro vytváření widgetů

Ještě než balíček widgetu vytvoříte, zkontrolujte, že žádný ze souborů v balíčku nemá v názvu řídicí znak. Pokud v nich řídicí znaky budou, nebudete knihu moct publikovat v iBooks Storu.

Když widget nastavíte na automatické spuštění, nebude mít přístup k internetu. 

Nepoužívejte pro složky vlastní ikony a vyhněte se ve widgetu následujícím názvům složek:

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

Optimalizace widgetu pro displej Retina:

  • V HTML, CSS a JavaScript souborech používejte standardní postupy pro vytváření webových stránek s grafikou pro Retina displej (dvojnásobné zvětšení). 
  • Přidejte do widgetu soubor Default@2x.png. Nastavte mu dvakrát větší rozlišení, než má soubor Default.png. Tento soubor v iBooks Authoru neuvidíte, ale zobrazí se v iBooks na Retina displeji.

Přečtěte si další informace o optimalizaci knih vytvořených v iBooks Authoru.

Soubor Info.plist

Základní soubor Info.plist obsahuje několik povinných a několik nepovinných klíčů. Následující tabulka uvádí tyto klíče, jejich definice a několik vzorových hodnot pro widget nazvaný „Hello World“. 

Klíč Ukázková hodnota Povinné Definice
CFBundleDevelopmentRegion Angličtina Volitelné Řetězec určující nativní oblast balíku. Obvykle odpovídá rodnému jazyku osoby, která balík vytvořila. 
CFBundleDisplayName Hello World Povinné Řetězec obsahující samotný název widgetu. Ten se zobrazí v iBooks Authoru a iBooks.
CFBundleIdentifier com.apple.widget.HelloWorld Povinné Jedinečný řetězec sloužící k identifikaci widgetu, zadaný v reverzním formátu DNS.
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 jde o stejnou hodnotu jako 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, použije se výška souboru Default.png.
MainHTML HelloWorld.html Povinné Řetězec obsahující název HTML souboru, kterým je widget implementován.
Width 1024 Volitelné Číslo udávající šířku widgetu v pixelech. Pokud není zadáno, použije se šíř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>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>

Omezení klíče

Tyto klíče nepoužívejte; funkce nejsou kompatibilní:

Klíč Popis
AllowFileAccessOutsideOfWidget Widgety v knihách vytvořených pomocí iBooks Authoru nemůžou 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í iBooks Authoru nejsou dostupné některé internetové plug-iny, například Flash. Filmy a zvuk můžete připojovat pomocí HTML5 prvků <video> a <audio>.
Filmy a zvuk uvnitř HTML widgetů nejsou chráněny pomocí DRM.
AllowJava Widgety v knihách vytvořených pomocí iBooks Authoru nemůžou obsahovat Javu.
AllowSystem Widgety v knihách vytvořených pomocí iBooks Authoru nemají přístup k systémovým příkazům.
Plug-in Widgety v knihách vytvořených pomocí iBooks Authoru nemůžou obsahovat komponentu plug-inu Cocoa.

iBooks Author ignoruje tyto klíče: 

Klíč Popis
CloseBoxInsetX Widgety v iBooks Authoru a iBooks nezobrazují dekoraci tlačítka pro zavření.
CloseBoxInsetY  

 

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

Požadavky zvuku a videa

Soubory médií s příponami .m4v nebo .m4p nelze použít. Místo nich použijte některý z těchto formátů s příponou .mp4:

  • Video H.264: až 720p, 60 snímků za sekundu, High Profile úrovně 4.2 se zvukem AAC-LC až 160 kb/s, 48 kHz, stereo. Videa, která se otevírají v iMovie 10 s možností rozlišení HD 720p, používají tato nastavení.
  • Video MPEG-4: až 2,5 Mb/s, 640 x 480 pixelů, 30 snímků za sekundu, Simple Profile se zvukem AAC-LC až 160 kb/s na kanál, 48 kHz, stereo.

Pro zvuk použijte formát AAC (8 až 320 kb/s, 48 kHz, stereo) s příponou souboru .m4a.

Video a zvuk v HTML widgetech nejsou chráněné pomocí DRM.

Pokud se soubor se zvukem nebo videem ve widgetu v iBooks Authoru nepřehrává, zkuste ho přehrát na iPhonu, iPadu nebo Macu. Tam uvidíte, jak se bude soubor přehrávat v dokončené knize.

Lokalizace

iBooks Author nepodporuje lokalizaci řetězců a zdrojů. Zahrňte textové řetězce v cílovém jazyce, které čtenář uvidí vložené.

Oprava oříznutých prvků

Prvek, jako je třeba <video>, může z jedné strany vypadat oříznutý. K tomu může dojít, pokud jeho rozměr překračuje dostupné místo. Vyhledejte v CSS kódu atribut „width:auto“ v selektoru #video a upravte ho tak, aby odpovídal skutečným rozměrům. Například můžete mít widget s videem o rozměru 960 x 540. Najděte v CSS odpovídající selektor a nastavte šířku a výšku na správné hodnoty:

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

Vývoj pro iOS a macOS

iOS a macOS používají rozdílné typy vstupů. Při vytváření HTML widgetů pro iBooks Author můžete začlenit dotykový vstup i vstup myší.

Jak zabránit zobrazení blesku, když čtenář HTML widget otevírá

Když je HTML widget hodně složitý, čtenářům se může zobrazit blesk, když ho v iBooks otevírají. Abyste tomu zabránili, aktualizujte svůj widget a oznamte iBooks, kdy se má přepnout ze souboru Default.png do HTML widgetu:

1. Přidejte ve widgetu do souboru Info.plist položku „IBNotifiesOnReady“ a nastavte ji na hodnotu true. Podle toho iBooks zjistí, že widget oznámí, až se bude mít do HTML widgetu přepnout.

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






2. Nastavte widget tak, aby načítal javascriptovou knihovnu Apple uvedenou v HTML souboru v části <head>:

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

iOS a macOS už soubor AppleWidget.js mají, takže ho do balíčku nemusíte vkládat.

3. Nastavte widget tak, aby oznámil iBooks, kdy je HTML inicializované. V kódu JavaScriptu, který je v souboru HTML v části <head>, volejte:

widget.notifyContentIsReady()

Uložení do externí webové služby

HTML widgety můžete ukládat do externích webových služeb, pouze pokud mají správné  hlavičky Cross-Origin Resource Sharing (CORS).

Datum zveřejnění: