Vytváření HTML5 widgetů pro iBooks Author

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ím obsahem 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 obrázku Default.png. Jeho velikost můžete změnit v souboru Info.plist.
• Soubor Info.plist: Tento soubor poskytuje iBooks Authoru a Apple Books 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.

Ještě než balíček widgetu vytvoříte, zkontrolujte, že žádný ze souborů v balíčku nemá v názvu řídicí znak. Pokud ano, nemůžete knihu publikovat v Knihkupectví Apple Books.

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é rozliš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 Apple Books na Retina displejích.

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

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“. 

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

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

iBooks Author ignoruje tyto klíče: 

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.

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

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;
}

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ší.

• Přečtěte si informace o vývoji dotykových událostí v iOS.
• Přečtěte si informace o vývoji dotykových událostí v macOS.

Když je HTML widget hodně složitý, čtenářům se může zobrazit blesk, když ho v Apple Books otevírají. Abyste tomu zabránili, aktualizujte svůj widget, aby Apple Books oznámil, kdy je možné přepnout ze souboru Default.png na HTML widget:

1. Přidejte ve widgetu do souboru Info.plist položku „IBNotifiesOnReady“ a nastavte ji na hodnotu true. Podle toho Apple Books zjistí, že se od widgetu dozví, kdy bude možné přepnout na HTML widget.

<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 Apple Books, kdy je inicializace HTML hotová. V kódu JavaScriptu, který je v souboru HTML v části <head>, volejte:

widget.notifyContentIsReady()

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).