Tvorba elektronické učebnice programování s

Transkript

UNICORN COLLEGE
Katedra informačních technologií
BAKALÁŘSKÁ PRÁCE
Tvorba elektronické učebnice programování s interaktivními prvky
Autor BP: Patrik Vlnas
Vedoucí BP: Mgr. Peter Buchlák
2015 Praha
Zadání
Čestné prohlášení
Prohlašuji, že jsem svou bakalářskou práci na téma Tvorba elektronické́ učebnice programování s interaktivními prvky vypracoval samostatně pod vedením vedoucího bakalářské práce a s použitím výhradně odborné literatury a dalších informačních zdrojů,
které jsou v práci citovány a jsou také uvedeny v seznamu literatury a použitých zdrojů.
Jako autor této bakalářské práce dále prohlašuji, že v souvislosti s jejím vytvořením jsem neporušil autorská práva třetích osob a jsem si plně vědom následků porušení ustanovení § 11 a následujících autorského zákona č. 121/2000 Sb.
V Praze dne ……………..……..
….………………………………..
Patrik Vlnas
Poděkování
Děkuji vedoucímu bakalářské práce Mgr. Petru Buchlákovi za účinnou odbornou pomoc, věcný přístup a velmi cenné rady pro zpracování té bakalářské práce.
Tvorba elektronické učebnice programování s
interaktivními prvky
The electronic book implementation with interactive
elements
5
Abstrakt
Bakalářská práce pojednává o elektronických učebnicích, které jsou v posledních několika letech na velkém vzestupu. Zabývá se jak historickým kontextem elektronických
učebnic, druhy dokumentových formátů, do kterých lze učebnice ukládat a výrobci
platforem pro publikaci učebnic pro mobilní zařízení, tak i samotným vývojem ukázky
elektronické učebnice.
Cílem této práce je porovnat možnosti vývoje elektronické učebnice a vybrat z nich
nejvhodnější pro zpracování zadaného projektu.
Vybraná technologie je v práci blíže popsána a následně je pomocí ní vytvořena ukázka
elektronické knihy včetně interaktivních prvků, která je přílohou této bakalářské práce.
Klíčová slova: Elektronické učebnice, e-book, iBooks, iBook Author, HTML5, CSS,
JavaScript, Widget
Abstract
Bachelor thesis discusses electronic textbooks that are on the increase the last few
years. The main focus is on context of electronic textbooks, document format types
which can be used with textbooks and lastly on producers of textbook platforms for
publishing on mobile devices.
The main goal is to compare possibilities of the electronic books development and to
choose the best suitable technology from the market for purposes of assigned project
development.
The chosen technology is described in more detail and subsequently an example of the
textbook with interactive elements for assigned project is developed. This example is
also attached to this bachelor thesis.
Keywords: Electronic textbooks, e-book, iBooks, iBook Author, HTML5, CSS, JavaScript,
Widget
6
Obsah
1
Úvod
1.1
2
10
Použité pojmy
14
Elektronické knihy a učebnice
15
2.1 Historie
3
4
15
Zadání projektu na tvorbu elektronické učebnice programování
Obecně
19
Technologie pro tvorbu učebnice
20
Důležité prvky učebnice
20
Publikace učebnice
20
Technologie pro tvorbu elektronických učebnic
Dokumentové formáty pro e-booky
21
21
a)
TXT
21
b)
RTF
22
c)
DOC
22
d)
MOBI
23
e)
PDF
24
f)
EPUB
24
g)
AZW
25
h)
IBA
26
Druhy platforem
26
a)
Amazon Kindle
28
b)
Apple iBooks
30
c)
Google Play Books
33
d)
Jiné technologie
36
Vlastní srovnání platforem pro elektronické učebnice
5
19
Vybraná technologie
38
42
Apple iBooks
42
a)
Ovládací prvky
42
b)
Obchod iTunes
44
7
iBooks Author
45
a)
Prostředí
45
b)
Nový projekt
45
c)
Přidávání a formátování textu
46
d)
Přidávání a formátování obrázků
46
e)
Práce s objekty
46
f)
Přidávání tvarů, tabulek a grafů
47
g)
Interaktivní prvky
47
h)
Publikace knihy
47
Widget
6
48
a)
Specifikace
49
b)
Formátování
49
c)
Vlastnosti
50
d)
Předpřipravené widgety
50
e)
Widgety třetích stran
53
Projekt tvorby učebnice
56
HTML5
56
a)
Historie
56
b)
Princip jazyka
57
c)
HTML5
58
CSS
59
a)
Historie
59
b)
Princip jazyka
59
c)
CSS3
61
JavaScript
61
a)
Historie
61
b)
Princip jazyka
62
Podklady
64
Analýza a návrh
64
Implementace
66
a)
Text, obrázky, widgety
67
b)
Vlastní HTML widget
70
8
Nasazení učebnice
89
Shrnutí projektu tvorby učebnice
91
7
Závěr
92
8
Seznam použitých zdrojů
93
9
Seznam obrázků
100
10 Seznam tabulek
101
11 Seznam grafů
102
12 Seznam příloh
103
Příloha A
104
Příloha 1: Knihy v iTunes
104
Příloha 2: Vytvoření nového projektu
105
Příloha 3: Výběr widgetu
106
Příloha 4: Nastavení widgetu
107
Příloha 5: Widget Keynote prezentace
108
Příloha 6: Widget interaktivní obrázek
109
Příloha 7: Widget 3D modelu molekul
110
Příloha 8: Widget Galerie
111
Příloha 9: Widget Posuvný boční panel
112
Příloha 10: Widget Vyskakovací překryv (Popover)
113
Příloha 11: Widget Media
114
Příloha 12: Widget Test (Chapter review)
115
Příloha 13: HTML5 widget
116
Příloha 14: Nastavený widget Test
117
Příloha 15: Výběr zařízení pro deployment
118
Příloha 16: Převod složky do WDGT
119
Příloha 17: Vytvořený vlastní widget ve formátu WDGT
120
Příloha 18: Náhled widgetu Codewalker
121
Příloha B: Obsah přiloženého CD
122
9
1 Úvod
Elektronický formát učebnic přišel do rukou uživatelů spolu s elektronickými zařízeními
schopnými zobrazovat digitální text na obrazovkách mobilních zařízeních, jako jsou:
čtečky, chytré mobilní telefony, tablety, přenosné počítače a jiné. To byl také následek
předchozího technologického vývoje osobních počítačů, zvyšování výkonu procesorů,
zvětšování kapacity disků pro ukládání digitálního obsahu, nárůstu přenosové kapacity
sítí a zlevňování těchto technologií pro koncové uživatele, který svět zaznamenal od
roku 2000. Za posledních 20 let se tak digitální obsah zvětšil mnohonásobně jak oproti
analogovému tak i sám oproti sobě. (1)
Obrázek 1: Světový vývoj kapacity analogově či digitálně uloženého obsahu od roku 1986 do roku 2007.
Zdroj: http://entropyeconomics.com/wp-content/uploads/2011/10/EE-EduComm-Orlando-06.15.11v1.1.pdf převzato z http://ijoc.org/index.php/ijoc/article/download/1562/742
10
Formátů pro digitalizaci textu je více druhů: TXT, PDF, DOC a podobné. Vývoj oblasti
přenosných zařízení v posledních letech naznačil, že lze uživateli nabídnout daleko
větší a bohatší interaktivnost v oblasti výukových materiálů a vzdělávacích textů. Bylo
vyvinuto mnoho software pro přenesení výuky do elektronického prostředí, například
audio učebnice, výukové aplikace, multimediální prezentace, interaktivní tabule či
různé podpůrné aplikace pro výzkum. Současně s tím přišla i řada výrobců software i
hardware s vlastním řešením elektronických učebnic, které nenabízí ke čtení pouze
text, ale i obrázky, tabulky, grafy, testy, videa, online syndikace1, apod.
Mobilní tablety (např. Apple iPad, Samsung Galaxy Tab nebo Kindle Fire)2 se masivně
rozšiřují mezi široké spektrum veřejnosti a proto nabídnutí možnosti použít výukový
software na této platformě je dle mého názoru logickým krokem výrobce i přirozenou
touhou spotřebitele. I když je trh v roce 2014 bohatý na výrobce a platformy zařízení
pro elektronické učebnice, při bližším průzkumu je nutné identifikovat rozdíly a hranice
technologií, jež je v konkurenčním boji rozlišují.
Graf 1: Celosvětové dodávky tabletů od 2. kvartálu 2010 do 1. kvartálu 2014 (v mil.)
Celosvětové dodávky tabletů od 2. kvartálu 2010 do
1. kvartálu 2014 (v mil.)
90
80
70
60
50
40
30
20
10
0
-10
76,9
60
48,6 45,1 47,6
29,9
3,3
10,1 7,9
4,5
15,04 18,6
28,3
50,4
34,8
20,3
Q2 Q3 Q4 Q1 Q2 Q3 Q4 Q1 Q2 Q3 Q4 Q1 Q2 Q3 Q4 Q1
2010 2010 2010 2011 2011 2011 2011 2012 2012 2012 2012 2013 2013 2013 2013 2014
Zdroj: http://www.valuewalk.com/2014/05/iphone-6-apple-inc-sales/
Trend elektronizace výuky a využívání multimediálních prvků při studiu si uvědomují i
stěžejní vzdělávací instituce jako jsou školy, knihovny, univerzity apod. Soukromá vy-
1
Online syndikace - opětovné dodávání aktuálních informací, které obsahuje internet (weby,
portály, blogy, atd.). (78)
2
Modely jsou zde seřazeny dle podílu na trhu v jakýchkoliv generačních verzích dohromady.
11
soká škola Unicorn College se právě s tímto vědomím rozhodla již od doby svého založení v roce 2007 podporovat výuku webovým informačním systémem, online výukovými materiály, projektory, později i iPady a Apple TV. Zároveň byl formou mimoškolního projektu zadán části studentů a spolupracovníků na Unicorn College projekt na
tvorbu elektronické učebnice programování. Tato učebnice měla být součástí výuky
předmětu PES – Základy objektově orientovaného programování, který je povinný pro
všechny studenty oboru IT a ICT v 1. ročníku. Zadáním bylo nejen převést aktuálně dostupné materiály přístupné z informačního systému školy do formátu elektronické
učebnice. Bylo požadováno použít v učebnici co nejvíce multimediálních a interaktivních prvků, nabídnout učebnici bezplatně ke stažení na jednom z veřejných elektronických obchodů knih a učebnic (Amazon, iTunes, Play Books apod.) pro všechny (i mimoškolní) uživatele a využít potenciálu mobilních zařízení – ať už na škole používaných
Apple iPad či osobních tabletech, laptopech a chytrých telefonů studentů, vyučujících
aj.
Tato práce se proto bude zabývat právě mapováním trhu technologií použitelných pro
elektronické učebnice. Bude provedeno srovnání těchto nejvýznamnějších subjektů na
trhu pro publikaci elektronických knih a jejich konkrétními specifikacemi. Budou porovnány pro potřeby zadaného projektu na tvorbu elektronické učebnice programování na Unicorn College. Následně bude vybrána platforma pro praktickou ukázku
tvorby několika stránek takové učebnice ve vybrané technologii. V ukázka bude modelově představovat prvky elektronické učebnice pro daný projekt a její tvorba bude zdokumentována v dalších částech této práce.
Vlastní zkušenosti při vývoji elektronické učebnice ukázaly, že pokud existují kvalitní
podklady a vývojář nové učebnice má průměrné znalosti práce s klasickým textovým
editorem (typu: Microsoft Office, LibreOffice aj.), má tedy základní znalosti sazby a formátování textu, může vlastnoručně vytvořit elektronickou učebnici včetně interaktivních prvků s minimálními časovými i finančními náklady.
Vzhledem k tomu, že je toto téma zatím velmi nové a celosvětový vývoj v tomto odvětví
velmi krátký, nebylo zatím vydáno mnoho literatury a odborných článků. Proto ve
své práci pracuji s různými druhy zdrojů. Nejdůležitějšími prameny jsou oficiálně tištěné a online dokumentace software či webových služeb. Dále učebnice a publikace
zabývající se digitalizací textů, učebnic a teorií výuky z elektronických učebnic. Nakonec
mé zdroje tvoří také odborné a populárně naučné články z elektronických zdrojů, přednášky, prezentace, výstupy výzkumů a prohlášení výrobců k dané problematice.
12
Vzhledem k nedostatku vydaných odborných prací, teoretických informací, ucelenějších srovnáních nebo průvodců tvorbou elektronických učebnic má tato práce za cíl,
kromě konkrétního řešení pro specifický projekt, tyto nedostatky napravit a doplnit o
informace nabyté vlastním zkoumáním a tvorbou učebnice pro praktický projekt. Snahou bude uvádět nezkreslené, znovupoužitelné a univerzální informace, které mohou
být vhodným materiálem a průvodcem pro proces vývoje interaktivní elektronické
učebnice.
13
1.1 Použité pojmy
Android – mobilní operační systém od společnosti Google.
Apple OS X – operační systém pro počítače Macintosho od společnosti Apple.
CSS – jazyk pro popis a zobrazení elementů dokumentů psaných v HTML.
Čtečka – hardwarové zařízení nebo software umožňující číst elektronické knihy.
Digitalizace – digitalizace původně analogového obsahu do digitálních formátů uložená
na digitálních nosičích.
Elektronická učebnice – učebnice v elektronickém formátu přizpůsobená pro čtení a
ovládání na elektronických čtečkách či jiných zařízeních umožňující číst elektronické
učebnice.
E-book – zkratka pro označení „elektronická kniha“.
Elektronická kniha – kniha v elektronickém formátu přizpůsobená pro čtení na elektronických čtečkách či jiných zařízeních umožňujících číst elektronické knihy apod.
Google Play – online obchod digitálního obsahu od společnosti Google.
HTML5 – verze specifikace značkovacího jazyka HyperText Markup Language pro
tvorbu WWW stránek, která dovoluje kromě jiného vkládání multimediálního obsahu
přímo do prohlížeče nebo tvorbu aplikací bez připojení k internetu.
IBA – formát pro ukládání a distribuci projektů iBooks Author.
iBooks Author - aplikaci na tvorbu elektronických knih a učebnic iBooks.
iBooks – e-book aplikace od společnosti Apple pro čtení elektronických knih a učebnic.
iOS – mobilní operační systém od společnosti Apple.
iPad – multimediální počítač typu tablet od společnosti Apple.
JavaScript – interpretovaný programovací jazyk, nejčastěji používaný pro WWW.
Tapnutí – gesto či pohyb, který je způsoben dotykem prstu či jiné části horní končetiny
o dotykovou obrazovku počítače, tabletu, mobilního telefonu či jiného dotykové zařízení.
Tablet – typ přenosného počítače s integrovanou dotykovou obrazovkou
Widget - ovládací grafický prvek, který slouží pro interakci mezi programem a uživatelem. V Apple iBooks HTML5 aplikace, která poskytuje daný interaktivní obsah.
Windows Phone – mobilní operační systém od společnosti Microsoft.
Windows Store - online obchod digitálního obsahu od společnosti Microsoft.
14
Teoretická část
2 Elektronické knihy a učebnice
Elektronické učebnice spolu s formátem elektronických knih zaznamenávají v poslední
době velký vývoj, velkou oblibu v používání, růst tržeb na trhu knih a vzdělání, změnu
lidí a institucí v přístupu k moderním technologiím a docela dost možná začátek revoluce ve vzdělávání. Doba digitalizace tištěných médií a nástup nových mobilních platforem a zařízení zcela jasně pomohla tomuto segmentu vzniknout. Segment dál roste
a spolu s digitální hudbou, digitálními videi a filmy se stává čím dál tím zajímavějším
nejen pro uživatele, ale i pro velké firmy a výrobce digitálních technologií, kteří mají
zájem tento segment ovládnout či do něj alespoň zasáhnout a získat v něm podíl.
Graf 2: Odhadovaný tržní podíl publikací a zábavního trhu pro rok 2013 (2)
Prodej
$50
$151
$63
$107
$133
Knihy (různé typy publikací)
Filmy a zábava
Časopisy
Hry
Ostatní
Zdroj: http://www.wischenbart.com/upload/1234000000358_04042014_final.pdf, (2013)
2.1 Historie
Jakkoliv se může zdát vývoj posledních let v odvětví elektronických knih závratný, pojmy jako digitalizace, elektronická učebnice nebo e-book nejsou zdaleka jen ze století
21., ale objevují se již počátkem 30. let 20. století. Ve svém manifestu The Readies
americký spisovatel Bob Brown popisuje zařízení, které by čtenáři umožňovalo číst mi-
15
niaturizovaný text zobrazující se za sklem, připomínajícím lupu, rychlostí kontrolovanou čtenářem, upravitelnou velikostí písma, bez potřeby papíru a kácení stromů. Sám
si již v roce 1930, spolu s rozvojem rozhlasu, nástupem kinofilmu a bezdrátových vysílaček, uvědomuje potřebu číst rychleji a efektivněji s čím dál tím více se zrychlující se
dobou. Uvádí představu: „A simple reading machine which I can carry or move around,
attach to any old electric light plug and read hundred-thousand-word novels in 10 minutes if I want to, and I want to.“ (3)
Zajímavý je také další málo známý fakt, že se ve frankistickém Španělsku v roce 1949
podařilo zdejší učitelce Ángele Ruiz Robles sestrojit pravděpodobně první elektronickou učebnici na světě, nazvanou „Mechanical Encyclopedia“ (4). Podstatou byla kovová schránka připomínající tvar knihy, která šla rozevřít, a uvnitř se ukrýval mechanismus stlačeným vzduchem poháněných válečků, na kterých byl navinut text. Čtenář měl
možnost regulovat rychlost posunování textu, zastavit text, část textu přiblížit mechanicky ovládanou lupou. Roblesová po uveřejnění svého patentu sama uvedla, že její
hlavní motivací bylo lépe zpřístupnit čtení psaného textu a omezit množství a tíhu knih,
které musí její žáci do školy nosit. (4)
Obrázek 2: Angela Ruiz Robles se svou publikací „Mechanical Encyclopedia".
Zdroj: http://en.wikipedia.org/wiki/e%C3%81ngela_Ruiz_Robles
Dnes se za otce termínu elektronická kniha pokládá americký profesor na Brown University Andries van Dam. Ve spolupráci s Stanford Research Institute vedl projekt na
elektronizaci statického textu. Podařilo se mu pomocí mainframe počítačů IBM vytvořit dynamickou strukturu a objektové formátování textu, který mohl být dynamicky
16
formátován pro specifický typ uživatele, velikost zobrazovače, obsahoval automatizovaně strukturovaná data do tabulek, rejstříků, indexů, křížových odkazů, grafických
prvků a jiné. Právě tomuto typu média v roce 1985 přiřknul název „electronic book“.
(5)
Všem historickým pokusům o vytvoření elektronické knihy, stejně jako dnes nakonec
pomohl nástup a rozvoj nových technologií v oblasti osobních počítačů. Na začátku 90.
let 20. století to byl nástup formátu PDF společnosti Adobe a nakonec i dalších elektronických dokumentových formátů, které blíže popíši v další části práce. Byl to však
právě formát PDF, který vnesl nový způsob uvažování o dokumentech, které se od této
doby spolu s nástroji Adobe daly tisknout v požadovaném formátu, kvalitě a sazbě,
dále text digitalizovat, upravovat a s nástupem osobních počítačů a internetu i posílat
a sdílet. (6)
Díky mnoha projektům velkých firem a institucí začalo nabývat slovo „digitalizace“ počátkem 21. století reálného obsahu. Za zmínku jistě stojí velký projekt „Google Books
Library Project“ (7). Sdružuje instituce jako Harvard, Michigan, Stanford nebo Oxford
New York Public Library za účelem digitalizace jejich knihoven. Podobně velký projekt
je také z dílny Evropské komise v rámci programu Kultura 2007 – 2013 „eBooks on
Demand - A European Library Network“, který si klade za cíl digitalizovat všechny knihy
vydané v letech 1500-1900 z fondů zúčastněných knihoven. (8)
V historii elektronických formátů je důležité zmínit také Open eBook z roku 1990 postavený na technologii kódovacího jazyka XHTML spolu s CSS pro zobrazování textu a
XML pro strukturování textu. Do projektu přispěla řada velkých firem, včetně Googlu,
nicméně do dnešních dob se zachovala spíše už jen jeho náhrada, formát EPUB. (8)
Dle Graf 3: Globální podíl na trhu e-booků v 10 vybraných zemích světa dle prodejce
(USA, Velká Británie, Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a Francie) uvedeného později ve srovnání platforem na straně 26 vyplývá, že v současné době zaujímají největší podíl na trhu Kindle od společnosti Amazon uveřejněný
v roce 2007, iBooks od společnosti Apple v roce 2010 a nakonec Play Books od Google
v roce 2012. K tomu je nutné dodat, že jsou zde uvedeny obchodní názvy společností,
služeb, názvů platforem či čteček elektronických knih, nikoliv dokumentových formátů,
které využívají např. PDF, EPUB, TXT apod. Výrobci těchto platforem ve svých zařízeních a software podporují různé dokumentové formáty a mohou tak využívat vlastností
otevřených licencí (např. EPUB rozšiřuje formáty XHTML a CSS, Play Books pak rozšiřují
17
možnosti standardu EPUB apod.). Mohou pak poskytovat integrované technologie k jejich publikování a čtení. Často tak lze spíše mluvit o aplikacích nebo službách, než o
nových standardizovaných formátech. (9)
18
3 Zadání projektu na tvorbu elektronické učebnice
programování
Účelem zadaného projektu bylo vytvořit interaktivní elektronickou učebnici předmětu
„Úvod do objektově orientovaného programování“ na vysoké škole Unicorn College.
Mezi základními zadanými požadavky bylo:

Výběr vhodné technologie pro tvorbu a publikaci elektronické učebnice.

Návrh struktury dané učebnice využitím existujících elektronických materiálů.

Použití interaktivních prvků ve vhodných částech učebnice.

Publikace a distribuce knihy jak lokálně v rámci školy tak i veřejně přes některý
z nejpoužívanějších internetových obchodů s digitálním obsahem.
Obecně
Vysoká škola informačních technologií a managementu Unicorn College v Praze se rozhodla vytvořit učebnici programování pro jeden z předmětů vyučovaných ve škole. Již
dříve byla v rámci mimoškolního projektu týmem učitelů a studentů publikována kniha
Mikroekonomie na platformě Apple iBooks v obchodě iTunes. Škola by ráda zužitkovala své zkušenosti z tohoto projektu a přenesla je do nového se zaměřením na jiný
předmět. Zadavatelé projektu by rádi učebnici používali jako doplňkový studijní materiál k výuce a k aktuálně dostupným elektronickým materiálům pro studenty v rámci
informačního systému školy. Učebnice by měla být veřejně dostupná na jednom
z nejpoužívanějších elektronických obchodů s digitálním obsahem pro mobilní zařízení,
aby sloužila i jako osvětový výukový materiál pro veřejnost, zdarma či za poplatek.
Struktura a obsah učebnice by měly být přehledné, vhodné i pro začátečníky a interaktivní, aby případně složité pasáže mohly být názorně vysvětleny na příkladech nebo
zábavnou formou. To by mělo vést i k zatraktivnění výuky programování a přilákání
většího počtu zájemců k programování či studiu na vysoké škole s tímto zaměřením.
Vytvořená učebnice by měla být dostupná minimálně na tabletech Apple iPad, které
studentům škola zapůjčuje na dobu studia s možností následného odkupu. Podpora
více zařízení či operačních systémů bude benefitem dané technologie.
19
Technologie pro tvorbu učebnice
Technologie pro tvorbu učebnice není omezená žádnými specifickými kritérii. Tvorba
učebnice by ale měla být proveditelná v rámci školy a jejího aktuálního vybavení hardware: desktopy a notebooky s Windows 7 a novější, MacBooky s iOS 10.7 a novější,
projektory v učebnách, Apple TV, servery s operačními systémy Linux nebo Windows
Server 2008 a vyšší. K dispozici jsou standardní kancelářské aplikace a licence k vybraným programům Microsoft v rámci programu DreamSpark Premium. Další potřebné
licence pro software je možné pro tento projekt zakoupit. Pro používání učebnice musí
být možné používat minimálně Apple iPad.
Důležité prvky učebnice
Základními prvky učebnice budou text, hypertextové odkazy, obrázky, videa a ukázky
zdrojového kódu daného programovacího jazyka, které jsou již nyní součástí výuky na
Unicorn College a jsou dostupné online přes informační systém školy. V rámci zkvalitnění a zatraktivnění obsahu je možné přidat libovolné prvky dostupné v dané platformě pro tvorbu a čtení elektronické učebnice.
Základní prvky obsahu elektronické učebnice programování:

Obsah – seznam kapitol, glosář, poznámky, záložky

Text – formátování, kapitoly, číslování stránek, křížové odkazy, hypertextové
odkazy

Média – obrázky, audio a video (např. pro využití existujících podcastů)

Interaktivní prvky – kvíz či selftest (např. pro shrnutí každé kapitoly), animace
zdrojového kódu – názorná vizuální simulace spuštění jednoduchého kódu
(např. pro vysvětlení průběhu cyklů)
Publikace učebnice
Škola by ráda učebnici publikovala pro širokou veřejnost, která má zájem o programování nebo základy technického vzdělání. V rámci této učebnice by ráda prezentovala
své nejlepší postupy a poznatky z výuky objektově orientovaného programování, a to
za využití nejnovějších technologií z odvětví elektronických učebnic. Ráda by proto k
publikaci využila jeden z nejpoužívanějších obchodů s digitálním obsahem, jež dominuje trhu. Knihu by mělo být možné distribuovat i lokálně pomocí USB flash disků či
pomocí existujícího informačního systému.
20
4 Technologie pro tvorbu elektronických učebnic
Tato kapitola pojednává o technologiích a nástrojích, které lze pro tvorbu a publikaci
elektronických učebnic použít. Hlavním cílem této kapitoly je nabídnout ucelený pohled na technologie používané v oblasti elektronických knih a učebnic. V první části
budou blíže popsány některé dokumentové formáty, které lze pro elektronické knihy
používat. Dále pak budou porovnány technologické platformy 3 největších výrobců a
prodejců e-booků na globálním trhu elektronického obsahu. Na základě tohoto srovnání bude vybrána technologie daného výrobce pro implementaci zadaného projektu
tvorby elektronické učebnice programování a následně v další části této práce popsána
tvorba v této vybrané technologii.
Dokumentové formáty pro e-booky
Podkapitola blíže pojednává o vlastnostech dokumentových formátů používaných ve
spojitosti s elektronickými učebnicemi. Různí výrobci využívají klasické dokumentové
formáty pro ukládání a prezentování textu (TXT, DOC, RTF apod.) a mnoho dokumentových formátů bylo nově vyvinuto právě pro potřeby elektronických knih a učebnic
spolu s rozšířenými funkcemi a různými způsoby formátování textu apod. Tato podkapitola popisuje některé z nejpoužívanějších formátů dle jeji podpory na nejprodávanějších zařízení a aplikací pro čtení elektronických knih. Data o nejpoužívanějších dokumentových formátech pro e-book byla zohledněna na základě Graf 3: Globální podíl na
trhu e-booků v 10 vybraných zemích světa dle prodejce (USA, Velká Británie, Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a Francie) na straně 27 a
velké
tabulky
srovnání
e-book
formátů
dostupné
na:
http://en.wikipe-
dia.org/wiki/Comparison_of_e-book_formats s ohledem na penetraci zařízení, které je
podporují.
a) TXT
Klasický typ souboru, ve kterém jednotlivé byte, dvojice byte či jejich posloupnosti mají
význam znaků dle znakové sady ASCII. Jeden byte odpovídá právě jednomu tisknutelnému znaku v této tabulce. Hlavním problémem tohoto formátu je různé kódování a
zobrazování speciálních znaků. Nejčastěji se používá kódování Unicode, konkrétně
21
UTF-8. Jeho nástup lze datovat spolu s nástupem prvních počítačů a výpočetních stanic. (10)
I když je tento formát jednoduchý, základní, bez větších funkcí a výhod, jeho univerzálnost a spolehlivost jej předurčila k neustálému používání nejen na poli osobních počítačů, serverů, databází, ale i jako výchozí a základní formát pro řadu čteček, aplikací
pro elektronické knihy, učebnice apod.
b) RTF
Proprietární, platformě nezávislý formát souboru pro uložení textu, vyvinutý firmou
Microsoft, který oproti formátu TXT umožňuje formátovat text. Tento formát vznikl
v roce 1987 a pomocí něj lze vyměňovat textové dokumenty mezi různými textovými
procesory. Zachování formátování a vzhledu dokumentu je závislé na implementované
verzi formátu RTF a podpory jednotlivých vlastností formátu v jednotlivých aplikacích.
Problematické může být zobrazení grafických objektů, grafů, obrázků, vložených fontů
apod. Naopak výhodou je, že jej lze v jednoduché textové podobě bez formátování
zobrazit i v běžném textovém editoru. (11)
Díky čím dál větší integraci a spolupráci formátů kancelářské sady Microsoft Office
(např. DOC) s více aplikacemi a platformami, není již RTF tolik používaným a univerzálním formátem pro zobrazování stylovaného textu. (12) Některá starší zařízení pro čtení
knih jej ještě stále implementují, ale není v tomto směru žádný další vývoj. (13)
c) DOC
DOC je výchozím formátem pro ukládání dokumentu v kancelářském balíku Microsoft
Office, především v programu Microsoft Word. Původně byl v 80. letech 20. století využíván Microsoftem jako přípona proprietárního formátu pro ukládání dokumentů
v aplikaci WordPerfect. Později v 90. letech spolu s první verzí Microsoft Word byl DOC
použit jako výchozí přípona ukládání dokumentů z této aplikace. (14)
DOC soubory obsahují přímo v sobě kromě binárního zakódování textu také informace
o formátování textu. Hlavním problémem je však částečná zpětná nekompatibilita se
staršími verzemi Wordu (např. verze nižší než Word 97 s verzemi Word 97 – 2003,
Word 2007 přišel s novým formátem DOCX, který je částečně také zpětně nekompatibilní se staršími verzemi Word do tohoto roku) a uzavřenost tohoto formátu. Od roku
22
2013 je specifikace formátu DOCX (dříve DOC) částečně otevřená, ale nikoliv pro komerční použití. To znamená velmi nesnadnou implementaci a použití tohoto formátu
do jiného prostředí než je Microsoft Office a její program Word. (15)
Formát DOCX a jeho předchozí verze DOC je jedním z nejvíce používaných uzavřených
formátů pro ukládání dokumentů, zejména v korporátní sféře, na světě. (16) I když
existují konkurenční otevřené verze formátů pro ukládání dokumentů, snažící se DOC
napodobit či nahradit (např.: ODT nebo OOXML), DOC má díky rozšířenosti kancelářského balíčku Microsoft Office ve firmách a poslední dobou i v domácnostech (např.
díky licenci kancelářského balíčku Office 365) náskok. (17) I proto je viditelná snaha
výrobců mobilních zařízení a elektronických čteček tento formát co nejlepším způsobem integrovat do svých zařízení a nabídnout jej uživatelům alespoň pro čtení. (9)
d) MOBI
MOBI je formát vytvořený firmou Mobipocket SA, která byla založena v roce 2000. Tato
firma vytvořila řadu ambiciózních projektů, mezi něž patří například softwarová elektronická čtečka “Mobipocket Reader“, kterou firma integrovala do řady operačních
systémů, PDA a mobilních telefonů. Uživatelé tak měli například možnost již v roce
2000 číst elektronické knihy a dokumenty ve formátu MOBI na tehdejších PDA zařízeních jako Psion nebo později Palm. Tento software byl implementován i do prvních
chytrých telefonů Nokia a HTC, které disponovaly první verzí mobilního operačního
systému Symbian, Windows Mobile a BlueBerry ještě dávno předtím, než přišli s aplikacemi podobného typu velcí hráči dnešního trhu Apple či Google. (18)
Samotná aplikace měla řadu pokročilých funkcí, jako otáčení textu, automatické posouvání textu, řazení dle kategorií. Čtenář si mohl libovolné stránky textu ukládat do
záložek, vytvářet vlastní odkazy, zvýrazňovat text, psát komentáře nebo kreslit do
textu. Bylo tedy možné využívat řadu funkcí, které jsou srovnatelné s dnešními aplikacemi pro elektronické knihy. Navíc se tato zařízení ovládala většinou již dotykově stylusem, takže lze hovořit o téměř přímém předchůdci dnešních elektronických čteček a
tabletů. Nevýhodou formátu je jeho uzavřenost a ochrana firmou Mobipocket SA, kterou v roce 2005 koupila společnost Amazon. Tím i samostatný vývoj tohoto formátu
končí a dále už je spojován s produkty Kindle této firmy a to v podobě formátu AZW,
který mnoho vlastností formátu MOBI využívá. (18)
23
e) PDF
Firma Adobe představila formát PDF v roce 1993 a ten si spolu s formátem DOC získal
mnoho příznivců a de facto jej lze brát jako standard elektronické publikační činnosti.
(16) Jako dokumentový formát je dokonce na internetu nejrozšířenější. (19) Předností
oproti jiným formátům je jeho standardizované neměnné zobrazení. Právě tato funkce
je u PDF zásadní, protože je možné uložit, publikovat a tisknout dokument nezávisle na
změně softwaru a hardwaru. Takový soubor může dále kromě formátovaného textu
obsahovat obrázky, kapitoly, křížové odkazy, hypertextové odkazy a jiné. Díky standardizaci a otevřenosti formátu je možné jej vytvořit a přečíst za pomoci libovolných softwarových nástrojů. (20)
PDF využívá pro zobrazování jednotlivých prvků dokumentu jazyk PostScript, přidává
přímo do dokumentu použité fonty a využívá komprese, což se hodí zejména pro ukládání grafických prvků či komprese kvality pro publikaci na webu. (6)
Výchozím programem pro ukládání a zobrazování PDF je Adobe Acrobat, který je od
společnosti Adobe k dispozici zdarma. Dále placená verze Pro umožňuje pokročilejší
tvorbu a úpravy PDF (vkládání objektů, slučování a rozdělování dokumentů, převod
dokumentů na text či obrázek apod. Dále s PDF pracují i programy jiných výrobců jako
např. PDF-XChange, Foxit PDF, Evince a jiné. (20)
Právě profesionální placené programy jako Adobe Acrobat Pro nebo Adobe InDesign
umožňují tvořit tzv. interaktivní PDF (dále také Interactive PDF), který umožňuje využití
interního skriptovacího jazyka pro vkládání vektorové grafiky, videa, zvuku, souborů
SWF nebo formulářů. Tímto způsobem se klasický dokumentový formát PDF může obohatit o interaktivní prvky (v současné době se hojně využívá například v oblasti online
marketingu). (21)
Díky své popularitě a přenositelnosti je PDF formát podporován a integrován na poli
výpočetní techniky napříč různými druhy software a hardware bez nutnosti doinstalovávat další podpůrný software (např. Reader ve Windows 8 a vyšší, Preview na Mac OS
X 10.3 a vyšší, Chrome PDF Viewer apod.). (20)
f) EPUB
EPUB nahradil v roce 2007 do té doby používaný formát OPF a využívá řadu jeho specifikací. Je to otevřený formát pro e-booky, který je ve skutečnosti přejmenovaný archiv ZIP se specifickou adresářovou a souborovou strukturou. Řídí se standardy organizace International Digital Publishing Forum (IDPF). Obsah dokumentu EPUB je
24
popsán pomocí XML, HTML5 a CSS tagů. Jeho velkou výhodou je právě využití těchto
značkovacích jazyků, které jsou v současné době nejuniverzálnější a nejpoužívanější
technologií dnešního internetu. (22)
Dokument je strukturován jazykem XML a samotný text je pak zapsán s pomocí HTML
značek, které formátuje do libovolného stylu jazyk CSS (což obdobně odpovídá stavbě
běžné webové stránky). Nevýhodou je pak nutnost kompilace tohoto systému souborů
do formátu EPUB, jelikož každá čtečka nebo zobrazovač jej musí zase zpětně dekompilovat pro jeho zobrazení. (23)
g) AZW
AZW neboli Kindle Format 8 byl představen při příležitosti uvedení nové čtečky Kindle
Fire společností Amazon na trh v roce 2011. Základem tohoto formátu je specifikace
formátu MOBI, jehož licenci dříve Amazon od firmy Mobipocket SA odkoupil. (24) Používán je jak pro chráněný tak i nechráněný obsah technologií DRM. Chráněny jsou
především elektronické knihy, které Amazon prodává ve svém elektronickém obchodě
s digitálním obsahem Amazon.com. Nechráněný obsah mohou uživatelé do formátu
AZW převádět přes online nástroje pod účtem Amazon např. pro přenos do zařízení
Amazon Kindle. Stále je ale možné používat i soubory s příponou .mobi, která je v nechráněné podobně zpětně kompatibilní a lze ji např. na zařízení Amazon Kindle používat. (25)
Formát AZW (konkrétně verze AZW3) podporuje podmnožinu funkcí HTML5 a CSS3,
které podporují některé tagy z těchto jazyků. (26) Díky tomu je také podporována vektorová grafika (SVG), některé pokročilé funkce formátování, vkládání obrázků, audia
nebo videa. Podporována je ale jen část tagů těchto jazyků. Konkrétně o nich referuje
oficiální dokumentace k publikování knih v obchodě Amazon. (27)
Pro tvorbu formátu AZW existují kromě online nástrojů pro převod také pluginy a programy. Kindle Plugin for Adobe InDesign zjednodušuje vývojářům převod knih vytvořených v Adobe InDesign do formátů AZW nebo MOBI, v nichž je ukládá. Amazon také
nabízí software KindleGen pro převod některých dokumentových formátů (HTML,
XML, EPUB) do formátu MOBI pro desktopové počítače. Tento software funguje na
bázi příkazového řádku, který vybraný vstup převede na výstup ve formátu MOBI. (25)
25
h) IBA
Formát IBA je nativní formát projektů vytvořených v programu iBooks Author od firmy
Apple. Platforma je uzavřená do prostředí operačního systému Apple OS X a iOS. Principem je vytvoření dokumentu ve formátu IBA, který obsahuje text, obrázky, video,
grafiku a jiné interaktivní prvky nazývané widgety, které jsou zobrazitelné ke čtení pomocí aplikace iBooks. (28)
Formát využívá podobně jako EPUB výhod strukturování dokumentu pomocí jazyka
XML a jazyka CSS pro formátování textu. Celý systém souborů včetně mediálních a interaktivních prvků je pomocí programu iBooks Author kompilován do formátu IBA.
Výhodou tohoto formátu je množství funkcí a bohatého obsahu, který do něj lze, pomocí výše uvedených nástrojů od firmy Apple, uložit. Všechny nástroje jsou navíc
zdarma a volně přístupné k používání. Nevýhodou je uzavřenost prostředí Apple, které
umožňuje tento formát používat pouze pomocí těchto nástrojů a není volně přenositelný na jiná zařízení či spustitelný a upravitelný na jiném typu software než desktopový operační systém Mac OS X a mobilní operační systém iOS. (29)
Druhy platforem3
Pro následující popis a porovnání platforem pro publikaci elektronických knih a učebnic
byly vybrány 3 největší výrobci a poskytovatelé obsahu elektronických učebnic na trhu
podle jejich podílu na trhu dle studie Cambridge Information Group a její společnosti
R.R. Bowker LLC, zabývající se bibliografickou a publikační činnosti, v roce 2012.
3
Platforma – obecně se v IT používá platforma pro pracovní prostředí software či hardware,
např. architekturu hardware, operační systém, platformu programovacího jazyka apod. V této
souvislosti se používá slovo platforma pro sadu hardware a software nástrojů pro tvorbu, publikaci či prodej elektronických knih od daného výrobce, tvořící jeden ekosystém či službu.
26
Graf 3: Globální podíl na trhu e-booků v 10 vybraných zemích světa dle prodejce (USA, Velká Británie,
Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a Francie) (30)
Souhrný podíl na trhu v 10 zemích světa
Kobo
4,06%
Nook
0,89%
Amazon
18,91%
iTunes
22,97%
Amazon
Google
iBooks
iTunes
Google
23,60%
Kobo
Nook
iBooks
29,57%
Zdroj: http://www.myauthorservices.com/business-of-writing/retailer-market-share, (2012)
Samostatně je k dispozici statistika pouze trhu v USA. Podíl jednotlivých výrobců je rozdělen v jiném poměru, a proto je nutné tuto statistiku do celkového porovnání tržních
podílů také zahrnout.
Graf 4: Podíl na trhu e-book pouze v USA dle prodejce. (30)
Podíl na trhu v USA
Google
6%
Nook
8%
Kobo
2%
Amazon
57%
Amazon
iBooks
11%
iTunes
iBooks
Nook
Google
iTunes
16%
Kobo
Zdroj: http://www.myauthorservices.com/business-of-writing/retailer-market-share, (2012)
27
Dále budou popsány možnosti publikace elektronické učebnice u firem Amazon, Apple
(iTunes, iBooks) a Google. Souhrnně je tato podkapitola nazvána Druhy platforem, protože budou popsána prostředí, nástroje a služby jednotlivých výrobců pro tvorbu a publikaci elektronických učebnic. Poslední bod každé podkapitoly dané platformy (Použití
pro projekt tvorby učebnice programování) souhrnně popisuje vlastní subjektivní zkušenost s těmito produkty a zohledňuje jejich klady a zápory pro použití pro zadaný projekt tvorby učebnice programování. Výsledkem tohoto srovnání bude výběr nejvhodnější technologie pro zpracování projektu na základě zadaných kritérií uvedených v
předchozí kapitole 3.
a) Amazon Kindle
Firma Amazon od roku 2007 nabízí řadu zařízení a služeb pod souhrnným názvem Kindle. Tento krok pro firmu znamenal spíše evoluci. Dosavadní globální elektronický obchod zaměřený především na knihy a učebnice firma rozšířila o elektronické čtečky a
software pro čtení elektronických knih. Amazon využil potenciálu již dříve vyráběných
elektronických čteček knih s inkoustovými displeji jiných výrobců, potenciálu mobilních
zařízení a vývoje na poli elektronických dokumentových formátů. (31) Tyto stavební
kameny spolu s již zavedeným internetový obchodem e-booků, učebnic a elektronických magazínů dokázal Amazon spojit do jednotného prodejního modelu produktu nazvaného Kindle. (24)
To vše je pro uživatele dostupné pod jedním uživatelským účtem, se kterým zákazník
nakupuje elektronické knihy, přenáší si je do elektronické čtečky a může tak nahradit
klasický model knihkupectví – čtenář. Amazon ve svém internetovém knihkupectví nabízí přes 30 milionů tištěných knižních titulů v tištěné i elektronické podobě. (32) Ceny
elektronických verzí knih jsou v obchodním modelu Amazonu nabízeny často o 70 až
90 procent levněji než klasické tištěné. Čtečky elektronických knih prodává již od 2000
Kč. (33)
Technická specifikace
Od roku 2007 Amazon uvedl již řadu modelů čtečky Kindle. Každým rokem je v nabídce
novější verze předešlého modelu – často vylepšená nebo obohacená o nové funkce.
Hlavními parametry čteček Kindle jsou: velikost přibližně formátu A5, inkoustový dis-
28
plej4, napájení na dobíjecí baterie, USB port, ovládání tlačítky nebo přes dotykový displej. Řada novějších modelů má již integrované technologie WI-FI či 3G. Nákupy a přenášení obsahu na zařízení tak lze provést i bezdrátově. (31)
Kindle používá velkou řadu textových formátů. Především používá svůj nativní formát
AZW, vyvinutý z formátu MOBI, dále pak standardní PDF, TXT a MOBI. Dále je možné
číst DOC, RTF, HTML, obrázky JPG, PNG, BMP nebo zvuk MP3. Díky tomu, že Amazon
poskytuje software pro převod obsahu do podporovaných dokumentových formátu,
lze do zařízení přenést i vlastní obsah. Knihy, které uživatel nakoupí v obchodě Amazon, jsou většinou k dispozici ve formátu AZW. (34)
Součástí ekosystému Kindle je i multiplatformní5 aplikace Kindle jak pro mobilní operační systémy Android, iOS, Windows Phone, tak i pro počítačové operační systémy
Windows a Mac. Tato aplikace softwarově poskytuje možnost číst knihy zakoupené
v obchodě Amazon na jakémkoliv zařízení podporující výše zmíněné operační systémy
či vlastní převedené knihy v podporovaných dokumentových formátech. (24)
Použití pro projekt tvorby učebnice programování
Amazon nabízí ve svém obchodě elektronické učebnice ke stažení do zařízení Kindle
nebo do softwarové aplikace Kindle. Vše se provádí pod jedním uživatelským účtem,
ke kterému jsou následně přiřazeny nakoupené knihy či vlastní dokumenty převedené
do formátu podporovaného zařízením Kindle. Po přihlášení uživatele ke svému účtu na
zařízení, ze kterého hodlá ke svému obsahu na Amazonu přistupovat, lze daný materiál
přenést do fyzické paměti zařízení a nezávisle na připojení používat. Většinu učebnic
lze v obchodě Amazon najít v oddělení Textbooks. Po otevření knihy či učebnice se
obsah zobrazí jako standardní dokument s formátovaným textem a obrázky či ilustracemi. Uživatel může dle preferencí měnit velikost, typ a barvu písma, vyhledávat
v textu, vytvářet vlastní poznámky a záložky. Pokročilejší interaktivní funkce Kindle nenabízí. (24)
Knihy distribuované přes obchod Amazon lze i později upravovat přes účet v Author
Central. Takový proces probíhá formou žádosti, která se zašle přímo vydavatelství
Amazon, to požadavek vyhodnotí a obsah dle oprávněnosti takové žádosti případně
upraví. (35)
4
Inkoustový displej – používá se též pojem „elektronický papír“, „e-papír“ nebo „e-ink“. (85)
Multiplatformní software – software, který ůže běžet na více počítačových platformách (např.
podpora více operačních systémů). (93)
5
29
Z hlediska četby klasických knih nebo tištených učebnic převedených do elektronického formátu je Kindle velmi užitečné zařízení a přináší uživateli dobrou dostupnost
knih ke čtení, řadu zajímavých funkcí a velmi praktickou čtečku, která je svou mobilitou
a nižší pořizovací cenou na trhu velmi konkurenceschopná. Pro tvorbu elektronických
učebnic však ekosystém Kindle nepřináší žádný specifický benefit. Lze je vytvářet jako
standardní elektronické dokumenty v podporovaných formátech a funkcích poskytovaných daným formátem (PDF, MOBI, AZW apod.).
b) Apple iBooks
iBooks je aplikací společnosti Apple Inc. vydanou ve spojitosti s představením tabletu
Apple iPad 27. ledna 2010 a půl roku později vydaná také pro zařízení Apple iPhone a
iPod, tedy ostatní zařízení používající mobilní operační systém Apple iOS 4.3 a pozdější.
Na podzim roku 2013 byla uveřejněna také pro operační systém OS X 10.9 Mavericks
a vyšší používaný na počítačích Apple Mac a MacBook. V současné době se jedná o
aplikaci využitelnou napříč celým ekosystémem produktů Apple, která je ve stejné podobě integrována do více zařízení v rámci jedné platformy Apple. (28) Podobnou vlastnost však mají i aplikace Kindle od Amazonu a částečně i Play Books od Google.
Hlavním zdrojem knih a učebnic ke stažení je obchod iTunes (resp. iBooks Store6), který
se mimo jiné využívá ke stahování hudby a aplikací do zařízení Apple. Knihy jsou dostupné pro všechna zařízení, která mají nainstalovanou aplikaci iBooks (dostupná v obchodě App Store) a lze je mít centralizovaně synchronizované napříč všemi zařízeními
(díky online úložišti iCloud), která uživatel vlastní (např. synchronizace záložek a synchronizace sbírek). (36)
Původně v době vydání první verze aplikace iBooks bylo možné zobrazovat primárně
dokumenty uložené ve formátu EPUB. V tomto formátu je k dispozici řada knih v obchodě iTunes. Dále je možné otevřít v iBooks dokumenty ve formátu PDF. 19. ledna
2012 však Apple uvolnil důležitou aktualizaci, která přinesla novou verze iBooks 2 a
spolu k ní vývojářskou aplikaci iBooks Author pro tvorbu elektronických interaktivních
učebnic a nový dokumentový formát IBA pro ukládání knih a učebnic vytvořených
v iBooks Author. Tato aplikace je volně ke stažení a je určena pro operační systémy OS
X 10.7.4 a vyšší. (28)
6
iBooks Store – je vyhrazená část obchodu iTunes zaměřená jen na knihy a učebnice. Lze do něj
přistupovat přes iTunes nebo přímo z aplikace iBooks. (39)
30
Mobilní zařízení Apple sdílejí často stejnou hardwarovou výbavu nebo se případně liší
dle modelového roku či verze daného zařízení. Mobilní telefony iPhone tak disponují
barevnými dotykovými displeji od 4 do 5,5 palců s podporou více dotyků, velmi výkonnými procesory a grafickými čipy, bohatou konektivitou zahrnující Wi-Fi, 3G či LTE mobilní internet, Bluetooth, řadou sensorů, fotoaparátem a jiným vybavením běžném v
současných mobilních zařízeních. Tablety iPad, které byly firmou Apple vyvinuty hlavně
pro účely čtení a sledování digitálního obsahu, disponují 7 až 10 palcovými barevnými
vícedotykovými displeji. Všechna zařízení firmy Apple běží na mobilním operačním systému iOS (v době psaní této práce iOS 7). (37)
V současné době je aktuální pro mobilní operační systém iOS verze iBooks 3.2. Tato
verze kromě jiného podporuje 18 mezinárodních jazyků. Uživatel může upravovat podsvícení displeje uvnitř aplikace, vybírat text (pokud to autor učebnice povoluje ve spojitosti s autorskými právy), vyhledávat text v učebnici, listovat kapitolami, používat rejstřík a samozřejmostí jsou i křížové odkazy. Dále díky nástroji iBooks Author lze vytvářet vícedotykové učebnice, přidávat do učebnice řadu grafických a interaktivních prvků
jako různé grafické šablony, zvětšovatelné obrázky, 3D obrázky, galerie, grafy, prezentace, zvuky, videa nebo testy. Celý takto vytvořený projekt učebnice včetně textu, sazby, kapitol, číslování stránek, interaktivních a jiných prvků se ukládá jako dokument
ve formátu IBA a dále se může publikovat jako kniha přes obchod iTunes Store (zdarma
či zpoplatněná). Možné je dokument publikovat i lokálně přenosem souboru do zařízení přes USB. Dále lze knihu také exportovat do PDF či prostého textu, ale již bez interaktivních a vícedotykových funkcí, které umožňuje uložit pouze formát IBA. Tento
formát zatím podporuje pouze nativní aplikace iBooks pro zařízení Apple iPad, iPhone,
iPod, Mac, MacBook. (36)
iBooks Author je jediným nástrojem svého typu na trhu, který nabízí ucelenou řadu
funkcí a nástrojů vhodných pro tvorbu elektronické knihy či učebnice v jedné aplikaci
najednou. V tomto programu lze proces tvorby učebnice projít od návrhu struktury
přes sazbu textu a vložení multimediálních či interaktivních prvků až po export a publikaci knihy. (38) Kromě tvoření vlastního obsahu lze do iBooks Author importovat soubory InDesign, dokumenty EPUB, PDF a dokumenty z Pages nebo Word. Podporované
obrázkové soubory jsou: JPG, JPEG, PNG, GIF, zvukové a videosoubory: M4V, M4A, matematické rovnice a výrazy ve formátu: formátu LaTeX nebo MathML. (39)
31
Učebnice Apple iBooks a aplikace na tvorbu učebnic iBooks Author jsou vhodně technicky i obchodně koncipované pro tvorbu vzdělávacích materiálů. “We can’t wait to
see how teachers in even more countries will create their new lesson plans with interactive textbooks, apps and rich digital content." (40), řekl v oficiálním tiskovém vyjádření Eddy Cue, víceprezident společnosti Apple oddělení Internetového softwaru a služeb, při příležitosti tiskového prohlášení o rozšíření těchto aplikací na nové světové
trhy v roce 2014. Tento trend potvrzuje i velmi častá aktualizace těchto aplikací (celkem 25 od 2.3.2010 do 14.11.2014) a tisková prohlášení firmy ohledně podpory a používání tabletů iPad pro vzdělávací účely, nabídka vzdělávacích služeb a programů iTunes U, Volume Purchase Program for Education, Apple Education Program, The Special
Education a jiné. (41)
Aplikace iBooks byla navržena hlavně pro prohlížení a čtení elektronický knih a učebnic
na zařízeních Apple, jehož telefony a tablety disponují vlastním operačním se systém
iOS, velkou dotykovou obrazovkou a komplexní provázaností aplikací s uživatelským
účtem Apple ID v obchodě iTunes. Bez tohoto účtu se uživatel neobejde. Později byla
vydána aplikace iBooks Author, díky níž může autor vytvořit učebnici podobně jako
dokument ve WYSIWYG editoru, Microsoft Word nebo Pages. V nabídce je mnoho
předpřipravených funkcí a interaktivních prvků, které běžné statické učebnice (ať už
papírové či elektronické) nenabízejí. (42) Mezi zkoumanými výrobci neexistuje ani jiný
vlastní komplexní nástroj pro tvorbu knih nebo učebnic. (43)
Učebnice lze v obchodě iTunes najít v záložce „Textbooks“, samostatně jsou odděleny
také interaktivní učebnice vytvořené v aplikaci iBooks Author v záložce „iBooks“. Po
stažení do zařízení se kniha zobrazí v knihovně stažených knih aplikace iBooks „Moje
knihy“. Knihy lze libovolně řadit do tzv. sbírek dle rozdělení uživatele. Při čtení klasické
knihy ve formátu PDF nebo EPUB může uživatel procházet jednotlivé stránky, listovat
seznamem kapitol, vytvářet si vlastní záložky, vyhledávat v textu, ovládat podsvícení
obrazovky přímo z aplikace a vytisknout či poslat stránku knihy emailem. Lze využívat
většinu prvků, které formáty PDF a EPUB standardně nabízejí (obrázky, křížové odkazy,
hypertextové odkazy, formátování apod.). V případě knih vytvořených v iBooks Author
je často uživatel obohacen o animované či interaktivní prvky. Tyto typy knih uživateli
navíc nabízí možnost měnit velikost fontu, vytvářet si vlastní poznámky a sdružovat je
do tzv. studijních karet, nahlížet do glosáře (pokud jej autor knihy vytvořil) a používat
interaktivní prvky (widgety – pokud je autor vytvořil). (39)
32
Obsah knih Apple iBooks se může kdykoliv po publikování knihy do obchodu iTunes
upravit. Nová verze knihy se může upravit přímo v iBooks Author, uložit a odeslat znovu
k publikaci. Uživatelé se o existenci nové verze dozví přímo ve své knihovně aplikace
iBooks a mohou si ji ihned stáhnout do zařízení. (39)
Apple iBooks nabízí pro projekt tvorby učebnice programování velkou řadu nástrojů a
funkcí, se kterými lze pracovat a zařadit je do procesu tvorby učebnice. Značně výhodně se jeví komplexní vývojový nástroj iBooks Author, ve kterém lze vytvářet různé
přednastavené i vlastní interaktivní prvky, které by učebnici obohatily. Proces také vypadá značně zjednodušeně díky tomu, že tento nástroj je zdarma a je k němu k dispozici kompletní oficiální dokumentace i řada příruček a návodů, jak v procesu tvorby
postupovat. Nevýhodou může být použití těchto technologií pouze se zařízeními Apple
a možné komplikace či složitější proces publikace knihy do obchodu iTunes, než tomu
je u obchodu Amazon nebo Google (dle dostupných zdrojů od autorů či vydavatelů).
c) Google Play Books
Google Play Books je služba a zároveň mobilní aplikace společnosti Google. První verze
aplikace pro Google Android byla dostupná začátkem roku 2012. V současné době je
nejaktuálnější verze této aplikace pro Android 3.2.61 a dostupná je i pro operační systém Apple iOS 5 a vyšší, ve verzi 1.6.6. Důležitou součástí je internetový obchod digitálního obsahu Google Play, který dále kromě mobilních aplikací, hudby, her, online
novin a magazínů, nabízí knihy Play Books k zakoupení či zdarma ke stažení. Po stažení
se zobrazí v daném zařízení platformy Android či iOS přímo v elektronické knihovně
mobilní aplikace Google Play Books (v České republice od července 2013 pod názvem
Knihy Google Play). Knihy je možné nakupovat a číst i bez mobilní aplikace, a to přes
webové rozhraní. Je k tomu potřeba pouze uživatelský účet v obchodě Google Play a
webový prohlížeč s aktivovanou podporou skriptů JavaScript. Díky tomu jsou Google
Play Books víceméně nezávislé na operačním systému či zařízení ze kterého uživatel ke
službě přistupuje, pokud tyto předchozí podmínky splňuje. (44)
Tvorba ani publikace knih neprobíhá v žádné nativní aplikaci od firmy Google. Autor již
vytvořenou knihu (v jiných aplikací třetích stran) pouze nahraje pomocí služby Google
Books Partner Program. (45)
33
Firma Google je v současné době výrobce software a nevyrábí vlastní mobilní zařízení
– telefony, tablety či čtečky. Pod značkou Google vydává pouze zařízení jiných výrobců
na základě smluvních podmínek s daným výrobcem. Hlavním produktem firmy Google
v tomto odvětví je mobilní operační systém Android. Tento systém využívá řada výrobců mobilních telefonů, tabletů, počítačů, ale i čteček (např. Kindle využívá operační
systém Android) a jiná multimediální zařízení. Díky distribuci tohoto operačního systému do různých zařízení a k němu připojenému obchodu s aplikacemi a digitálním
obsahem Google Play Store tak Google publikuje digitální obsah koncovým uživatelům.
(46)
Google Play Books podporuje primárně formát EPUB a PDF. V tomto formátu vytvořené knihy lze číst různými způsoby. Výchozí možností je webové rozhraní knih na Google Play nebo mobilní aplikace pro operační systémy Android a iOS. Dále je možné
knihy číst na zařízeních podporující Adobe Content Server 4, pomocí něhož lze distribuovat knihy s obsahem chráněným DRM7. Seznam těchto zařízení je dostupný na oficiálních stránkách výrobce této technologie Adobe (přes 200 různých zařízení, čteček,
Android, iOS či desktopových aplikací napříč různými výrobci). (47) Dostupná je také
HTML 5 aplikace do prohlížeče Chrome. Nakoupené knihy je možné pod jedním uživatelským účtem přenášet i na jiná zařízení a dle nastavení ochrany DRM do zařízení stahovat. (48)
Obchod digitálního obsahu Google Play je úzce spjat s knihami Play Books, ať už v podobě mobilní aplikace nebo webové čtečky. Dle informace z roku 2013 nabízí přes 5
milionů knižních titulů v elektronické formě a dostupný je pro 57 zemí světa. (49) Do
mobilní aplikace je možné nahrávat i vlastní obsah ve formátu PDF nebo EPUB. K nahrávání tohoto obsahu slouží Google Uploader a možné je nahrát zdarma maximálně
1000 knih pro jeden uživatelský účet. (50)
Z hlediska tvorby elektronických knih a učebnic zastávají služby Google Play spíše
funkci prostředníka nikoliv však přímého nástroje pro tvorbu knih či učebnic. (9) Pro
tvorbu interaktivních prvků do učebnic zatím nejsou dostupné žádné přímo doporučené nástroje od firmy Google, které by bylo možné v Google Play Books využít. Univerzálně lze použít řadu webových aplikací Google Apps (např. Google Docs, Slides
7
DRM – Digital rights management je technická metoda pro ovládání či omezování obsahu digitálních médií. (88)
34
nebo Sites) pro vytváření dokumentů a prezentací. Lze také využít vlastností a standardů dokumentových formátů, které Play Books podporují (PDF a EPUB), a nástrojů
třetích stran pro jejich tvorbu (Microsoft Word, Pages, Adobe InDesgin apod.). (51)
Elektronické knihy lze číst v aplikaci Play Books na různých zařízeních s operačním systémem Android nebo iOS. K dispozici je také webové rozhraní Play Books, ve kterém
lze knihy číst přímo ve webovém prohlížeči s podporou JavaScript.
Mobilní aplikace Play Books nabízí velmi přehledné a intuitivní prostředí. Díky nejrůznějším aktualizacím je obohacena o řadu 3D efektů a animací, jež uživateli přibližují
pocit čtení klasické knihy a zlepšují orientaci v obsahu (listování stránek, náhledy stránek, přiblížení textu, horizontální posuvník). V knize je možné vytvářet vlastní záložky
a poznámky k obsahu. Text je možné tapnutím a podržením označovat, přidávat k vybrané části poznámky nebo překládat do zvoleného jazyka (díky integraci Google
Translator). Pro vzhled obsahu knihy lze nastavovat 3 různé barevné režimy, měnit úroveň podsvícení displeje, vybrat z několika typů patkových a bezpatkových písem, měnit
zarovnání, měnit velikost písma nebo řádkování. V neposlední řadě je možné předčítat
text nahlas za pomoci hlasového modulu TTS. (51)
Dle dostupné dokumentace pro Books Partner Program lze kdykoliv nahrát novou verzi
knihy pomocí účtu Partner Center v podporovaných formátech do velikosti 2 GB. Také
je možné nastavit okruh uživatelů, kteří kontrolují a hodnotí kvalitu obsahu knihy a
upozorní na případné chyby (tzv. Quality reviewers). (44)
Google také pro své vývojáře definoval platformu Google Play for Education, která se
právě vývojem knih, učebnic a aplikací specializovaných pro vzdělávání zabývá. V jádru
jde však zatím pouze o kategorizované aplikace (nikoliv knihy) pro vzdělávání pod záložkou „Google for Education“ v obchodě Google Play, určené převážně pro nižší
stupně vzdělávání (předškolní děti, základní školy). V současné době Google interaktivní učebnice či nástroje pro jejich tvorbu v Play Books nenabízí. (52)
Platforma Google Play je velmi zajímavá z hlediska publikace a používání elektronických knih. I když neexistují přímé nástroje pro tvorbu knihy pro Google Play, existují
různé nástroje třetích stran pro tvorbu knih a učebnic v podporovaných formátech
EPUB a PDF. Takto vytvořenou knihu lze volně do aplikace Google Play Books nahrát a
číst nebo publikovat do obchodu Google Play. Samotná mobilní aplikace nabízí řadu
užitečných funkcí a je velmi konkurenceschopná k aplikaci Apple iBooks nebo Amazon
Kindle.
35
d) Jiné technologie
Existují také jiné technologie pro tvorbu elektronických učebnic, které se neřadí do klasických přístupů pro jejich tvorbu. Výše uvedení výrobci nabízí na trhu nástroje pro
tvorbu, publikaci a čtení elektronických knih a učebnic. Nabídku tak tvoří většinou komplexní řešení, které zahrnuje jak hardware, tak software potřebný pro zajištění výše
zmíněných funkcí. (9)
Z této definované skupiny lze vyčlenit otevřený dokumentový formát PDF, který sice
nabízí množství funkcí pro tvorbu elektronických textů, knih i učebnic, nicméně se však
jedná spíše o specifikaci a standard než o službu. Software, který daný formát používá,
musí tento standard dodržovat, stejně jako software, který jej čte – a to nezávisle na
používaném hardware.
Dalším vyčleněným typem technologie pro tvorbu elektronických učebnic jsou výukové
aplikace. Jedná o software vytvořený za účelem vzdělávání a výuky.
Oba typy těchto technologií vyčleňuje z předchozího výčtu jejich otevřenost, nezávislost a individuální možnost použití pro tvorbu elektronických knih a učebnic. Nelze je
řadit do výše popsaných technologií, protože svou univerzálností zasahují i do jiných
oborů na poli elektronických dokumentů a software, než jen tvorba a publikace vzdělávacích materiálů. Tvorba elektronických učebnic je jen výsek využití, pro který je lze
použít. Globální statistiky a srovnání využití těchto technologií v odvětví vzdělávání
nelze v současné době dohledat. Proto se zde jejich význam dokazuje spíše subjektivně
na základě osobní zkušenosti. Následný popis a zařazení do srovnání s ostatními technologiemi však má vést k větší objektivitě, pohledu z více úhlů na možnosti tvorby elektronických učebnic a zkvalitnění výběru správné technologie pro zpracování zadaného
projektu učebnice programování.
Interactive PDF
PDF neboli Portable Document Format byl vydán firmou Adobe Systems v roce 1993.
Tento původně proprietární formát byl určen k softwarové a hardwarové nezávislosti.
Hlavní myšlenkou bylo veškeré zobrazené prvky (text, font, grafika, formátování atd.)
zabalit do jednoho souboru a opět otevřít v nezměněné podobě nezávisle na zařízení
či v programu podporujícím daný formát. Více o těchto vlastnostech pojednává podkapitola PDF v kapitole Dokumentové formáty pro e-book. (20)
Již ve verzi 1.2 v roce 1996 bylo i díky výše uvedeným vlastnostem možné do PDF uložit
a zobrazit interaktivní prvky jako např. radio button, checkbox či interaktivní formulář.
36
Tyto formuláře následně i díky aktualizacím na verzi 1.4 a 1.5 (Adobe XML Forms Architecture) umožňovaly data exportovat, importovat, šifrovat a elektronicky podepisovat. (53)
Aktualizace na verzi 1.6 v roce 2004 byla velmi důležitá pro interaktivní prvky v PDF.
Přinesla především podporu 3D grafiky a animací ve formátu SWF. Dále je možné vkládat vektorovou grafiku, video, zvuk či sazbu v systému LaTeX. Díky aplikaci Adobe InDesign lze do PDF vkládat i přechody při listování stránek, vytvářet interaktivní tlačítka
či pracovat s vrstvami.
E-Book as an application
Elektronickou učebnici nebo knihu lze vyvinout i samostatně jako aplikaci, která bude
závislá na software a hardware na kterém bude možné ji spustit. Jedná se pak o aplikaci
a nikoliv o knihu jako přenositelné médium. Taková aplikací musí obsahovat textový a
grafický obsah, vlastní prostředí pro čtení obsahu a případně další uživatelské funkce.
Základními stavebními kameny jsou technologie pro tvorbu takové učebnice a technologie pro její používání. Vývojář musí zvolit programovací jazyk a prostředí, ve kterém
bude danou aplikaci vytvářet v návaznosti na operační systém, pro který bude aplikaci
vytvářet. Nutné je také zvolit způsob distribuce takového software. (54)
Jedním z předchůdci těchto knih lze například jmenovat CD-ROM výukový software
(Jak věci pracují, Lidské tělo v ČR od BPS Multimedia). Ze současného software lze jmenovat například mobilní aplikace pro čtení Bible, pohádek (Winnie the Pooh, Elmo loves you, Strašidelné historky), slovníky a encyklopedie (Oxford Dictionary of English,
Anglicko Český Slovník, Velký slovník cizích slov, Atlas hub) a jiné (Classics, Easy Recipes, Studentská kuchařka). Toto je výčet vybraných aplikací dostupných pro Android či
iOS. V oboru elektronického vydavatelství se jich vydává daleko více.
Stěžejní vliv na popularitu těchto aplikací má kvalita a dostupnost obsahu (často se
jedná o komerční aplikace), aktuálnost obsahu (změny v textu se většinou distribuují
pomocí dodatkových updatů celé aplikace) a použitelnosti uživatelského prostředí. Nevýhodou tohoto těchto aplikací je, že každá část této aplikace se musí individuálně vytvořit a to je velmi časově náročné a nákladné. Další nevýhodou je svázanost dané aplikace s vybraným operačním systém či zařízením (řešením může být např. webová aplikace). Naopak výhodou může být vlastní zpracování a použití interaktivních prvků dle
použitého obsahu. (55) V případě potřeby zveřejnit novější verzi obsahu či přidání nového textu je potřeba vytvořit nový buid celé aplikace a vydat novou verzi aplikace pro
daný distribuční kanál, což může být časově náročné.
37
Vlastní srovnání platforem pro elektronické učebnice
V současné době jsou firmy Amazon, Apple a Google velcí světoví výrobci a konkurenti
na poli hardware i software pro mobilní zařízení. Aktuálně se platformy, obchody, software a zařízení těchto výrobců liší v různých aspektech – ať už jde o pořizovací cenu,
nabídku obchodů, nástrojů pro tvorbu a publikaci, hardwarová zařízení apod.
Amazon pro prodej elektronických knih využívá svůj dlouho fungující internetový obchod s tištenými knihami. Přímo v obchodě se tak zákazník může často rozhodnout,
jaký typ knihy zakoupí. Kromě tištěných knih, jsou v závislosti na vydavateli k dispozici
také audio knihy nebo elektronické knihy Kindle. Elektronické verze knih jsou zde nabízeny často o 30-50% levněji než papírové verze. Zároveň je možné zakoupit přímo i
zařízení pro čtení knihy – čtečku Amazon Kindle (verzí existuje více). Jejich pořizovací
cena se pohybuje mezi $100 - $200 (v nabídce jsou také tablety Fire s barevným vícedotykovým displejem za cenu $200 - $400). Dále Amazon nabízí možnost přenášet do
čteček Kindle či zařízení s předinstalovanou aplikací Kindle vlastní knihy v podporovaných formátech.
Apple prodej a distribuci elektronických knih a učebnic založil na základě uvedení nové
kategorie zařízení do svého portfolia – a to tabletu iPad, který nabízí barevný LCD displej s vysokým rozlišením, konektivitu přes WiFi, 3G nebo bluetooth, vysoký výpočetní
výkon, mnoho funkcí, ale také vyšší pořizovací cenu mezi $249 - $950 dle modelu a
výbavy. iPad se jako komplexní zařízení může hodit na výuku lépe než klasická elektronická čtečka, protože v sobě integruje více funkcí a možností jak výuku a vzdělávání
obohatit. Díky širokému výběru speciálních podpůrných a partnerským programů pro
vzdělávání, firma Apple nabízí zařízení iPad a vzdělávací aplikace studentům a školám
se zvýhodněnými podmínkami.
Google svůj obchod a aplikaci Play Books uvedl teprve v roce 2012 a na trhu není ještě
tak dlouho, jako její hlavní konkurenti. Tuto časovou ztrátu se však snaží dohnat velmi
častými aktualizacemi a integrací obsahu do jednoho obchodu (dříve Google knihy prodával samostatně přes Google eBookstore). Dále může těžit z velké rozšířenosti operačního systému Android (Android 84,4%, iOS 11,7%, Windows Phone 2,9%) (56), díky
kterému může zvyšovat i svůj podíl na trhu elektronických knih a učebnic. Zařízení
s operačním systémem Android často prodávají s pořizovací cenou pohybující se mezi
$100 - $800. Pokud v budoucnu tento výrobce nabídne komplexní vývojářský nástroj
38
pro interaktivní elektronické učebnice, nabídne podobné funkce, které aktuálně nabízí
iBooks Author a bude třeba dostupný i formou webové aplikace (tak, jak je tomu i u
většiny ostatních služeb firmy Google), bude jistě o dost blíže konkurenci. A co víc,
bude to i přidanou hodnotou pro vývojáře a čtenáře tohoto elektronického obsahu,
kteří si budou moci vybírat z většího množství technologií pro tvorbu.
Tabulka 1: Porovnání 3 výrobců s globálně největším podílem na trhu a jejich platforem pro elektronické
knihy a učebnice.
Amazon
Apple
Google
Název platformy:
Kindle
iBooks
Play Books
Na trhu od:
2007
2010
2012
Operační systémy:
Android, iOS,
OS X, iOS
Android, iOS
iPad, iPhone,
telefony a tab-
iPod, Mac,
lety Android
Linux, OS X, Windows Mobile,
Windows
Primární zařízení:
čtečky Kindle
MacBook
Výchozí formát:
AZW
IBA, EPUB
EPUB
Další podporované for-
EPUB, PDF, TXT
PDF
PDF
Obchod:
Amazon
iTunes
Play Store
Primární vývojářská
není
iBooks Author
není
Vývojářská aplikace tře-
Microsoft Word,
Microsoft Word,
Microsoft Word,
tích stran:
Pages, Adobe In-
Pages, Adobe In-
Pages, Adobe In-
Design
Design
Design
Webové rozhraní
iBooks Author,
Webové rozhraní
máty:
aplikace:
Publikace knih:
iTunes Producer
Interaktivní prvky:
nejsou
widgety
nejsou
Zdroj: Vlastní zpracování
Na základě vlastního srovnání a porovnání technologií na trhu s ohledem na zadání
projektu tvorby interaktivní učebnice programování pro vysokou školu byla vybrána
39
technologie od firmy Apple – iBooks a iBooks Author. Mezi hlavními výhodami je možnost vkládání předpřipravených interaktivních prvků nebo individuálně vytvořených
přímo do elektronické učebnice díky aplikaci iBooks Author. Nejsou nutné žádné speciální licence pro tento produkt a vývoj proto může být levný. Po stažení aplikace z App
Store je možné začít ihned učebnici psát a vytvářet multimediální prvky bez primární
nutnosti použití jiných aplikací či technologií. Další výhodou je optimalizace učebnic
pro Apple iPad, které studenti používají ke studiu. Neposledním důležitým faktorem je
možnost publikování učebnice v elektronickém obchodě iTunes, publikování učebnice
lokálně jako soubor či možnost exportovat učebnici do PDF a publikování v jiném elektronickém obchodě, který taktéž podporuje formát PDF.
V případě, že potřebuje zadavatel nebo vývojář vytvořit a publikovat učebnici pouze se
statickým textem a obrázky, lze vybrat jakoukoliv platformu z výše zmiňovaných a dle
konkrétních specifikací a formátů učebnici úspěšně publikovat. Pokud je ale potřeba
vytvořit komplexnější učebnici, bohatší obsah, interaktivní prvky vestavěné přímo do
učebnice (např. zvětšovatelné mapy pro učebnici zeměpisu, 3D model zkoumaného
objektu pro učebnici fyziky, video ze života zvířat pro učebnici biologie, interaktivní
animaci průběhu interpretace kódu pro učebnici programování apod.) je vhodnou volbou Apple, jeho platforma iBooks a vývojový nástroj iBooks Author.
iBooks Author nabízí nejen přehledné uživatelské prostředí podobající se textovému či
grafickému editoru ale obsahuje řadu integrovaných a předpřipravených funkcí (grafické šablony, styly, tabulky, grafy, číslování stránek, kapitoly apod.). I díky možnosti
vkládat přednastavené či vlastní interaktivní prvky (widgety) je iBooks Author v konkurenčním prostředí zkoumaných výrobců svou účelností a použitelností pro tvorbu elektronických učebnic jediný. Žádný jiný zkoumaný výrobce elektronických čteček či zařízení pro čtení elektronických knih a učebnic takto ucelený editor pro tvorbu elektronických učebnic zatím nenabízí. (57)
Další nástroje, které firma Apple na pole vzdělání přináší, je například aplikace iTunes
U, která nabízí oproti klasickému obchodu digitálního obsahu iTunes obsah výhradně
pro vzdělávání a výuku na mobilních zařízeních iPhone, iPad, iPod či počítačích Mac a
MacBook. V této aplikaci je možné si zvolit ucelený kurz vzdělání (například: „Open
Yale courses – Financial Theory“), který uživateli do zařízení stáhne kompletní materiály potřebné pro absolvování kurzu a porozumění dané látky – přednášky v podobě
videí a namluveného textu, učebnice a psané materiály v podobě knih v aplikaci iBooks,
40
webové zdroje či testy, kterými si uživatel nově nabyté znalosti ihned ověří. V této aplikaci nabízí kurzy např. Stanford University, Harvard University, The University of Oxford, MIT, University of Cambridge nebo Yale University. (58)
Apple také nabízí speciální Apple Education Program pro vzdělávací instituce a univerzity, které dostávají slevy pro své studenty a zaměstnance na nakupování a stahování
digitálního vzdělávacího obsahu z obchodu iTunes nebo iTunes U. Dále také nabízí Device Enrollment Program pro správu všech zařízeních (např. iPad), jejich nastavení a
instalaci v jedné správcovské aplikaci najednou. Jedná se o speciální účet vedený u
společnosti Apple, pod kterým administrátor či správce IT zařízení dané instituce za
pomoci Mobile Device Management (MDM) serveru (serveru či serverové aplikace,
která všechna zařízení kontroluje a registruje) přihlásí všechna zařízení pod jeden společný účet a spravuje jejich obsah, bezpečnostní politiku či typu nákupů z iTunes na
jednom místě. (59)
41
5 Vybraná technologie
Jak již bylo výše zmíněno, na základě uvedených skutečností a předpokladů v předchozích kapitolách, byla pro zamýšlený projekt tvorby elektronické učebnice programování na Unicorn College pro tvorbu hlavní kostry učebnice a všech důležitých prvků
vybrána technologie Apple iBooks s vývojovým prostředím iBooks Author. Pro tvorbu
individuálních interaktivních prvků budou použity výrobcem podporované technologie
HTML, CSS a JavaScript.
Apple iBooks
iBooks, jak již bylo uvedeno ve srovnání elektronických platforem učebnice výše, je
aplikace firmy Apple Inc., která byla uvedena 27. ledna 2010 pro zařízení Apple iPhone,
iPod a iPad, od roku 2013 dostupná také na všechna desktopová zařízení s operačním
systémem OS X 10.9 (Mavericks) a vyšší. Aplikace slouží pro ukládání, zobrazování a
čtení knih a učebnic v elektronických formátech EPUB, PDF a IBA. Díky vývojářské aplikaci iBooks Author pro operační systémy OS X 10.7.4 (Mavericks) a vyšší lze knihy a
učebnice pro iBooks vytvořit a uložit do formátu IBA včetně všech přídavných funkcí
jako obsah, glosář, kapitoly, křížové odkazy, média nebo interaktivní prvky. V iBooks
Author je možné kromě IBA také přímo ukládat do PDF či TXT, ale již bez interaktivních
prvků. Knihy se odtud přímo distribuují do obchodu iTunes, který slouží jako knihkupectví pro všechny knihy vytvořené na této platformě. Do iTunes je možné také nahrávat a publikovat EPUB dokumenty mimo vývojový nástroj iBooks Author. (36)
V současné době ke konci druhého pololetí roku 2014 je aktuální verze iBooks 3.2, kterou budu dále také podrobněji popisovat a rozebírat na ukázkách.
a) Ovládací prvky
V následujících podkapitolách budu primárně popisovat prostředí knih či učebnic iBooks vytvořených v iBooks Author a formátu IBA. Formáty EPUB a PDF zobrazuje iBooks
podobně jako čtečka statického textu. Dokáže vytvořený text strukturovat na základě
vytvořených kapitol, měnit velikost písma, barvu, typ zobrazení (vertikální, horizontální
posouvání), ale nikoliv používat a zobrazovat další funkce, které nabízí při zobrazení
knihy vytvořené v iBooks Author (např. interaktivní prvky).
42
Po otevření knihy jsou hlavními ovládacími prvky tlačítka na horní navigační liště. Odtud se vstupuje do knihovny, obsahu, glosáře, ovládá se podsvícení displeje, vyhledává
se nebo se vytváří nové záložky.
Obrázek 3: Rozložení jednotlivých ovládacích prvků projektu učebnice vytvořené v iBooks Author.
1. Tlačítko knihovna – používá se k vrácení se zpět z otevřené knihy do Knihovny
na seznam stažených knih v zařízení. Odtud je také možný přístup ke stažení
nových knih z obchodu iTunes.
2. Tlačítko seznam – po tapnutí na toto tlačítko se následně zobrazí menu se
dvěma položkami: Obsah a Glosář. Obsah zobrazí grafický náhled jednotlivých
kapitol a jejich obsahu, Glosář zobrazí seznam vybraných termínů a jejich vysvětlivek.
3. Tlačítko poznámky – zobrazí seznam uživatelem vytvořených Poznámek (tapnutím na slovo, podržením a přetažením prstu pro zvýraznění textu) seřazených popořadě dle jednotlivých kapitol. Dále je možné z Poznámek přejít na
43
Studijní karty, které slouží k nácviku a memorování si již vytvořených Poznámek.
4. Nadpis kapitoly – nadpis je v horním panelu dostupný na každé stránce pro
snadnější identifikaci a orientaci v knize.
5. Tlačítko podsvícení – slouží k úpravě podsvícení displeje při čtení.
6. Tlačítko vyhledávání – zobrazí vyhledávací panel, pomocí něhož lze vyhledávat
slova i jednotlivá čísla stránek v obsahu knihy. Vyhledávač výsledky logicky řadí
dle typu obsahu (např. vyhledávání v textu, médiích apod.). K dispozici je také
našeptávač možných slovních výrazů a spojení. Možné je přejít dolními tlačítky
panelu na vyhledávání na internetu či na Wikipedii.
7. Tlačítko záložka – umožní přidat novou uživatelskou záložku v knize.
8. Tabulka – tabulka s obsahem, jejíž styl a formát je možné v iBooks Author
různě nastavovat (záhlaví, zápatí, ohraničení, podmíněné formátování, pravidla, funkce apod.).
9. Glosářový termín – označený text tučným písmem, který po tapnutí prsty na
daný výraz zobrazí popisek vztahující se k danému heslu. Seznam těchto hesel
a popisků je možné zobrazit v samostatné záložce Tlačítko seznam – Glosář.
10. Panel widget – panel interaktivního widgetu umístěný uvnitř textu knihy.
V tomto případě se jedná o interaktivní obrázek s interaktivní mapou popiskou,
která reaguje na uživatelovo tapnutí na text. Widget se může pinch-to-zoom
gestem8 zvětšit na celou obrazovku. Některé widgety jsou přednastavené autorem k automatickému spuštění či maximalizaci na celou obrazovku ihned po
uživatelské interakci.
b) Obchod iTunes
Pro přístup a stahování knih z obchodu iTunes je třeba účet u Apple ID. Nakupovat či
bezplatně stahovat knihy ke stažení zdarma lze přímo ze zařízení po vstupu do iTunes
obchodu z aplikace iBooks nebo ze stolního počítače a desktopové aplikace iTunes. Zde
lze procházet přehledně roztříděné knihy dle různých kritérií, žebříčků či žánrů. Důležitou kategorií knih jsou Textbooks, kde jsou k dispozici knihy a učebnice vytvořené
8
Pinch-to-zoom – pohyb dvou prstů k sobě nebo od sebe za účelem zmenšení nebo zvětšení
daného objektu na dotykové obrazovce. (62)
44
v aplikace iBook Author pro tvorbu učebnic a vzdělávacích materiálů. Po stažení vybrané knihy do zařízení se zobrazí v knihovně iBooks (
Příloha 1: Knihy v iTunes). (37)
iBooks Author
iBooks Author je desktopový software pro tvorbu elektronických učebnic pro Apple
iBooks. Byl uveřejněn 19. ledna 2012 a v době psaní této práce je ve verzi 2.2. Tento
software je proprietární a je bezplatně ke stažení z Mac App Storu pro operační systémy OS X 10.7.4. a vyšší. (39)
V následujícím textu budou detailněji popsány důležité prvky iBooks Author pro tvorbu
elektronických učebnic k lepšímu pochopení práce v tomto prostředí. Jako hlavní zdroj
informací bude sloužit oficiální dokumentace Apple Inc. (29), publikace iBooks Author:
Publishing Your First Ebook (42) a vlastní zkušenosti s iBooks Author.
a) Prostředí
Prostředí iBooks Author je velmi intuitivní. Apple Inc. Vytvořil aplikaci pro tvorbu učebnic pro běžné uživatele, kteří dokáží vytvářet textové dokumenty, pracovat s prohlížečem či upravovat a ukládat obrázky. S těmito základními schopnostmi lze učebnici
v iBooks Author vytvořit, neboť se program tváří a chová jako běžný editor typu Microsoft Word, Pages, či WYSIWIG editory.
b) Nový projekt
Nový projekt v iBooks Author se vytváří hned na úvodní obrazovce po spuštění aplikace. Na výběr je několik předpřipravených šablon na šířku a na výšku (Příloha 2: Vytvoření nového projektu). Šablony je možné případně vytvářet a upravovat individuálně. V iBooks Author lze otevřít boční panel Uspořádání (Layouts), nastavit potřebné
grafické prvky, potvrdit změny na dané stránce a celou šablonu uložit do formátu .ibatemplate v nabídce Soubor – Uložit jako předlohu. Poté je možné nový projekt začít
vytvářet i z této šablony, která se automaticky přidá do galerie dostupných šablon. Na
webu existují bezplatné i placené galerie šablon, které lze do iBooks taktéž stáhnout a
použít.
Důležitá nastavení pro celou aplikaci iBooks Author se nachází v horním menu iBooks
Author - Předvolby.
45
Nakonec je k dispozici panel Inspector (ikona napravo v horním menu), který slouží
jako sdružený panel pro různá globální nastavení učebnice nebo nastavení jednotlivých
prvků dokumentu, pokud je předtím uživatel v iBooks Author vybral myší.
c) Přidávání a formátování textu
iBooks Auhtor podporuje tři různé typy obsahu stránek: Kapitola, Oddíl, Stránky. Záleží
individuálně na zvolené šabloně, jak jsou dále tyto typy obsahu definovány a nastaveny
(různé způsoby rozložení textových prvků, sloupců, podkladů atd.). Důležité je používat
tyto prvky pro správné členění knihy do kapitol, odstavců a podstránek.
Formátování textu probíhá podobně jako v kancelářské aplikaci Pages nebo Microsoft
Word. Horní panel iBooks Author nabízí řadu nástrojů jak text formátovat, případně je
možné pro komplexnější úpravy použít okno Inspector.
d) Přidávání a formátování obrázků
iBooks Author podporuje řadu bitmapových formátů: JPEG, PNG a GIF. Pro správný
formát obrázku je třeba brát v úvahu, pro jaké zařízení se kniha primárně tvoří. Vzhledem k rozšířenosti Retina displejů s vysokým rozlišením a možnosti číst iBooks knihy i
na Mac je vhodné na toto brát zřetel, protože nižší rozlišení obrázku může být na takových displejích nečitelné.
Obrázky se do projektu v iBooks Author přidávají primárně metodou Drag&Drop ze
souborového systému (pro účely procházení souboru v počítači Mac je vhodné použít
Finder) přímo do obsahu projektu. Pak je možné kurzorem a posuvníky správně umístit
a nastavit velikost obrázku vůči textu.
iBooks Author nabízí řadu nástrojů pro úpravu obrázku, úpravu barev, přidávání masek
nebo vodící lišty pro správné umístění obrázku k okrajům nebo textu při zachování
správného odsazení.
e) Práce s objekty
V iBooks Author je řada funkcí pro práci s objekty jako jsou například obrázky. Lze jim
přidávat titulky, různá pozadí, výplně, rámečky a stíny. Obrázky se mohou ukotvovat
k jiným objektům nebo přizpůsobovat obtékání textu kolem obrázku. Pro tyto účely se
využívá hlavně okno Inspector a v něm záložka Obtékání a Grafika.
46
f) Přidávání tvarů, tabulek a grafů
Kromě obrázků, fotografií a nákresů lze v iBooks Author vytvářet různé tvary, tabulky
s daty nebo grafy. Pro tvary je v horním panelu samostatná ikona Tvary kde lze vybrat
z několika druhů vektorových tvarů nebo lze vytvořit a vložit vlastní. Nastavení těchto
objektů lze po vložení do textu provádět v okně Inspector, v záložce Grafika. Pro tvorbu
tabulek s daty je rovněž v horním panelu ikona Tabulka. S tabulkou se pracuje podobně
jako s jinými objekty v panelu Inspector. Pro práci s formátem tabulky je k dispozici
hlavní menu programu nahoře obrazovky a cesta Formát - Tabulka. Lze tak pracovat
s jednotlivými sloupci, řádkami, buňkami apod. Grafy mají také v horním panelu vlastní
ikonu a po jejím rozkliknutí je možné vybrat z několika druhů grafů. Po vložení grafu
do obsahu projektu se zobrazí okno pro vkládání dat.
g) Interaktivní prvky
Interaktivní prvky jsou hlavním těžištěm a výhodou vývojové aplikace iBooks Author
pro iBooks. Nabízí mnoho druhů a způsobů jak obsah knihy propojit s multimediálními
prvky, rozpohybovat nebo zatraktivnit informace jinak psané statickým textem. Hlavními interaktivními prvky jsou widgety, kterým je věnovaná celá další podkapitola a
kde budou všechny jejich funkce a druhy popsány (Příloha 3: Výběr widgetu).
Další zajímavou funkcí jsou hypertextové odkazy. Jakýkoliv text v obsahu knihy lze
označit kurzorem a v Inspectoru v záložce odkazy jej nastavit na přechod do jiné části
knihy nebo externí webové stránky.
h) Publikace knihy
Publikace knihy je stěžejní část tvorby elektronické knihy nebo učebnice v iBooks Author. Výhodou je, že veškeré způsoby publikace jsou integrovány přímo do iBooks Author. V případě publikování knihy do PDF nebo iBooks lokálně – tedy do iTunes, stačí
zkontrolovat, zda má kniha vytvořený obal a zkontrolovat její náhled pomocí ikony Náhled na některém z testovacích zařízení (viz následující kapitola a podkapitola Deployment). Dobré je také v případě učebnice vytvořit glosář pomocí panelu glosářových
nástrojů v Zobrazení - Zobrazit panel glosářových nástrojů. Mohou se do něj přidat
termíny a názvy z učebnice, které je nutné vysvětlit pro čtenáře. Knihu lze exportovat
pomocí nabídky Soubor - Exportovat do formátů iBooks, PDF nebo text, podle formátu,
do kterého je třeba knihu exportovat a uložit.
47
V případě publikování knihy do iTunes je proces o něco složitější. Jeho hlavním bodem
je získání unikátního ISBN pro danou knihu. Pak je možné pomocí nabídky Soubor Publikovat zahájit proces publikace knihy. Celým procesem vývojáře provede přehledný průvodce. Jednou z důležitých částí je pak instalace aplikace iTunes Producer,
která pošle samotný zdrojový soubor s elektronickou knihou do iTunes, kde musí projít
schvalovacím procesem a následně je uveřejněna v dané kategorii Bookstore v iTunes.
(60)
Widget
Interaktivní a mediální prvky jsou v prostředí iBooks nazývány widgety. Jedná se o speciální panely, které uživateli nabízí různé formy prezentace daného obsahu a interakce
s obsahem. Jedná se především o Keynote prezentace, video/audio soubory, testy, obrázky, 3D obrázky nebo další upravený obsah obohacený o interakce a pohyby s daným
obsahem. (61)
Widgety lze v textu rozpoznat jako rámečky ohraničeného textu či mediálního obsahu
s rozdílným pozadím, než má obsah knihy, které lze tapnutím prstu na obrazovku či
rozšířením prstů od sebe (gesto Pinch-to-Zoom (62)) aktivovat a rozšířit přes celou obrazovku (Příloha 2).
Existují widgety předpřipravené přímo ve vývojovém nástroji iBooks Author, widgety
vytvořené třetí stranou – individuálními vývojáři, open-source, online databanky widgetů a vlastní HTML widgety, které je možné si individuálně vytvořit.
Pro widget v prostředí iBooks se používá přípona souboru WDGT. Ta se taktéž používá
v operačních systémech Mac OS X od verze 10.4 pro aplikaci Dashboard. Použití je
v obou případech podobné. Soubor ve formátu WDGT se po spuštění chová jako samostatná miniaplikace v okně. Vytvořená může být pomocí podporovaných programovacích jazyků HTML5, CSS, JavaScript a mediálními formáty podporovanými napříč celou aplikací (obrázky, audio, video). Předpřipravených widgety není nutné samostatně
vytvářet a převádět do formátu WDGT. Stačí je pouze v prostředí iBooks Author vložit
kliknutím na tlačítko Widget přímo do textu vytvářené knihy. V případě tvorby vlastních widgetů – ať už nástroji třetích stran nebo samotným vývojářem, je třeba znát
bližší specifikaci a standardizaci formátu WDGT (Příloha 4: Nastavení widgetu).
48
a) Specifikace
WDGT soubor je vytvořen ZIP kompresí9 struktury několika souborů, které mají svá
specifika a náležitosti.
Hlavní HTML soubor: Hlavní soubor widgetu, který může uvnitř obsahovat CSS a
Javacript kód nebo soubory s tímto kódem mohou mít vlastní strukturu složek a jednotlivě na sebe odkazovat (např. jako struktura internetové prezentace). Nutné je však
definovat primární soubor HTML (tzv. indexový soubor), který se bude inicializovat po
spuštění widgetu. Odkazuje na něj konfigurační soubor Info.plist. HTML soubor musí
být uložen s příponou „.html“.
Default.png: Náhledový obrázek widgetu, který se zobrazuje v těle obsahu, kam je widget vložen. Plní funkci ikony widgetu a obrázek by měl zobrazovat náhled widgetu po
spuštění pro lepší ilustraci jeho funkčnosti ještě před jeho aktivací. Název musí být
přesně: „Default.png“.
Info.plist: Konfigurační soubor widgetu, který udává důležité informace a nastavení
pro spuštění widgetu. Přesné nastavení popisuje oficiální dokumentace iBooks Author
(63) . Obsah konfiguračního souboru je také k nahlédnutí v Příloze B v rámci tvorby
vlastního widgetu.
Pro widgety s video zdroji je doporučeno používat H.264 video v kontejneru MPEG-4 a
příponou souboru ".mp4". Pro widgety s audio zdroji je doporučeno použít AAC audio
v kontejneru MPEG-4 s příponou souboru ".m4a". Nutné je však tuto informaci vždy
ověřit v poslední vydané verzi dokumentace iBooks Author.
b) Formátování
Pro vytvoření souboru widgetu ve formátu WDGT je třeba složku s celou strukturou
zdrojových souborů, povinných souborů „Default.png“ a konfiguračním souborem
„Info.plist“ v hlavním adresáři složky převést do archivu typu WDGT. V operačním systému OS X 10.4 a vyšší se takový soubor vytvoří manuálním přejmenováním složky do
následující podoby: „nazev_widgetu.wdgt“.
9
ZIP komprese – souborový formát pro vytvoření komprese 1 a více souborů za účelem zredukování velikosti uložených dat.
49
c) Vlastnosti
Hlavní výhodou widgetů je jejich univerzálnost. Jsou to miniaplikace vytvořené pomocí
rozšířeného HTML5, CSS a případně JavaScript, což je v současné době velmi populární
soubor technologií webových stránek a webových aplikací. Kromě toho, že se widgety
používají v aplikaci Dashboard na operačních systémech Mac OS X 10.4 a vyšší, tak jsou
i v určité podobě součástí mobilního operačního systému iOS 8 (64). Pro použití v iBooks Author nebo v Dashboard je stačí zformátovat do souboru s příponou WDGT. Dále
je možné je zobrazit v jakémkoliv programu nebo prohlížeči podporujícím HTML5 a
JavaScript bez nutnosti jakéhokoli formátování (Internet Explorer, Google Chrome,
Mozilla Firefox, Safari apod.) na jakémkoliv operačním systému – lze tedy zaručit platformní nezávislost.
d) Předpřipravené widgety
iBooks Author sám o sobě nabízí pod tlačítkem hlavního ovládacího panelu Widget několik předpřipravených a optimalizovaných widgetů přímo pro použití v projektu
tvorby učebnice pro zařízení Apple. Jejich tvorba a deployment je velmi jednoduchý.
Stačí v iBooks Author vybrat myší tlačítko Widget v horním menu, vybrat typ widgetu
a dalším klikem myši jej vložit ho do obsahu učebnice, později případně nastavit potřebná nastavení k danému widgetu (zdroj obrázků, zdroj videa, otázky a odpovědi
apod.). Není tak nutné vyvíjet vlastní HTML5 widget a nutně znát specifikace jazyka
HTML, CSS a případně JavaScript. Vývoj a publikace takového widgetu zabere čas
v řádu minut.
50
Obrázek 4: Vložení předpřipraveného widgetu v iBooks Author do projektu elektronické učebnice
Níže jsou uvedeny typy předpřipravených widgetů, které je možno v iBooks Author
použít a ukázky jejich zobrazení v iBooks (viz odkazy do přílohy).
Keynote prezentace
Po aktivování widgetu Keynote prezentace je čtenáři umožněno spuštění či procházení
prezentace vytvořené v aplikaci Keynote10 přímo v textu knihy či učebnice. Prezentace
je možné spustit na celou obrazovku zařízení, na konci ji opakovaně pustit znovu nebo
okno s prezentací opět zavřít (Příloha 5: Widget Keynote prezentace).
Interaktivní obrázky
Interaktivní obrázky dovolují uživateli rozšířit si obrázek na celou obrazovku zařízení a
přiblížit si jednotlivé popisky, které části obrázku popisují. Po tapnutí prstem na popisek se obrázek ještě více přiblíží a zvýší se měřítko tak, aby si uživatel mohl lépe prohlédnout daný detail obrázku, ke kterému popisek míří (Příloha 6: Widget interaktivní
obrázek).
3D obrázky
Uživatel může v případě 3D obrázků obrázek nejen zvětšit na celou plochu zařízení, ale
také s obrázkem pracovat pomocí dotyku. Hodí se tak nejlépe na modely a objekty,
10
Keynote – prezentační software společnosti Apple Inc. prodávaná jako součást kancelářské
balíku iWork. (82)
51
které je možné otáčet kolem své osy vertikálně či horizontálně a nabídnout tak čtenáři
lepší a ucelenější pohled na daný objekt (Příloha 7: Widget 3D modelu molekul).
Galerie obrázků
Galerie obrázků umožňuje čtenáři zobrazit více obrázků najednou z dané tematiky. Po
tapnutí na náhledový obrázek widgetu galerie se obrázek rozšíří na celou obrazovku a
uživatel může tahem prstu zleva-doprava či naopak (swipe) přecházet na další obrázek
či zpět (Příloha 8: Widget Galerie).
Boční panel s posuvníkem (Scrolling Sidebars)
Boční panel s posuvníkem zobrazuje čtenáři po stranách hlavního obsahu dodatečné
informace, kterými lze vertikálně posouvat, aniž by uživatel opustil danou stránku. Nejčastěji je možné se s takovým typem obsahu setkat ve spojitosti s časovou posloupností, harmonogramem, historickými daty, seznamem, odrážkami apod. (Příloha 9:
Widget Posuvný boční panel).
Vyskakovací překryv (Pop-Over)
Pop-Over panel se aplikuje na obrázky v textu. Po tapnutí na obrazovku zobrazí uživateli okno s dodatečnými informacemi a samostatně strukturovaném textu, který lze
v případě větší délky vertikálně posouvat (Příloha 10: Widget Vyskakovací překryv (Popover)).
Média
Widget typu média nabízí uživateli k přehrání jakýkoliv typ videa či zvuku přímo v prostředí knihy iBooks bez použití jakýchkoliv externích přehrávačů či jiných nástrojů.
V případě, že je tedy třeba jakoukoliv problematiku vysvětlit více názorně, interaktivně
či přinést celou video nebo audio přednášku místo statického textu, widget média tuto
funkci právě poskytuje (Příloha 11: Widget Media).
Test (Chapter review)
Tento widget nabízí uživateli možnost na konci každé kapitoly či probrané látky otestovat, zda si dané vědomosti a nové informace zapamatoval. Test může mít několik
podob – jedna odpověď správně, více odpovědí správně, přiřazování popisků k obrázku
nebo kombinací všech tří dohromady. Výsledek testu je čtenáři ihned po potvrzení odpovědi zobrazen a následně, dle úspěchu nebo neúspěchu, může pokračovat na další
otázku nebo předchozí odpověď opravit (Příloha 12: Widget Test (Chapter review)).
HTML Widget
HTML widget umožňuje hlavně vývojářům nabídnout v knize daleko širší a bohatší obsah v podobě interaktivních prvků vytvořených za pomocí HTML5, případně CSS a
52
JavaScript. Čtenář si takové skutečnosti nemusí všímat, pro něj tento widgetu přináší
další typ obsahu mimo „běžné“ typy, které byly zmíněné výše. Mohou se tak do knihy
iBooks vložit a integrovat například různé webové služby (prohlížeč webu, online mapy,
online testy) nebo různé grafické modely či interaktivní animace (Příloha 13: HTML5
widget). Tvorba vlastního HTML5 widgetu bude prakticky provedena v Kapitole 6.
e) Widgety třetích stran11
iBooks Author umožňuje přímé vložení widgetu (Drag & Drop12) do projektu, pokud
existuje jeho zdrojový soubor ve formátu WDGT. Pokud tak vývojáři pro účely dané
vytvářené učebnice nestačí předpřipravené widgety přímo v iBooks Author, může
WDGT widgety získat i z jiných zdrojů. Pokud nechce jít cestou vytváření vlastního individuálního widgetu (viz Kapitola 6), může na internetu najít řadu vývojářských serverů, komunitních fór a galerií, kde různí vývojáři nabízí widgety své vlastní tvorby ke
sdílení, stažení, inspiraci nebo koupi. Zmíním zde ta subjektivně nejzajímavější, otestované servery, které nabízí další inovativní typy widgetů přímo ve formátu WDGT ke
stažení.
Bookry.com
Bookry je bezplatná doplňková služba pro iBooks Author, která umožňuje vývojářům
elektronických učebnic vytvářet individuální widgety z předpřipravených vzorů online
na webu http://bookry.com.
Pro možnost stahování widgetů z galerie je potřeba vytvořit vlastní uživatelský účet na
serveru. Rozdíl mezi bezplatným a placeným účtem je vždy nutná přítomnost loga Bookry.com ve widgetu a omezení několika drobných nastavení oproti placené verzi. Jinak jsou všechny widgety v galerii plně funkční a k dispozici ke stažení.
V galerii se aktuálně nachází 43 předpřipravených widgetů (údaj z června 2014). Po
vybrání widgetu ke stažení je možné upravit jeho nastavení např. zdroj dat, formát, typ
inicializace, grafické prvky apod.). Následně je možné soubor WDGT s wisgetem stáhnout do lokálního úložiště a vložit do projektu v iBooks Author. Pro příklad uvádím
subjektivně nejzajímavější druhy widgetů:
11
Widgety třetích stran – widgety či jiné aplikace a komponenty vytvořené jiným tvůrce než je
jejich původní tvůrce, umožňující znovupoužití pod bezplatnou či placenou licencí.
12
Drag & Drop – pohyb myší v grafickém systému operačního systému. Průběh: kliknutí, držení
a přesunutí objektu, následné puštění kurzoru nad daným objektem. Může se chovat rozdílně
v rozdílných operačních systémech či programech (83).
53

Browser – widget poskytující webový prohlížeč přímo do obsahu elektronické
učebnice

Scientific Calculator – vědecká kalkulačka pro jakékoliv matematické výpočty

Code Viewer – widget, který čitelně zobrazí jakýkoliv kód např. pro účely učebnice programování

Google Maps – vkládá online mapy Google maps přímo dowidgetu elektronické učebnice

PDF Document Viewer – umožňuje přečíst elektronický dokument uložený
v PDF

Open App – jednoduchý widget, pomocí něhož lze odkázat na jinou aplikaci
v používaném zařízení a vyvolat její otevření

YouTube – vkládá online YouTube video do obsahu elektronické učebnice
BookWidgets
BookWidgets.com je dalším místem, kde může vývojář hledat widget třetích stran pro
vlastní použití. Oproti Bookry nabízí BookWidgets generování WDGT widgetů z desktopové aplikace (k dispozici pro Windows i Mac) a ne z webové aplikace. To může z být
z důvodu výkonu aplikace a komfortu pro vývojáře výhoda. Nevýhodou může být bezplatné používání widgetů pouze pro zkušební účely a nutnost platby v případě produkce widgetů pro komerční použití.
Pro stažení dané desktopové aplikace je nutné zadat vlastní jméno a email. Oproti konkurenční galerii widgetů Bookry nabízí BooksWidgets ve stejné době 28 typů a svojí
funkčností nejsou vzdálené od widgetů z Bookry. Vybral jsem některé zajímavé z nich:

YouTube Player - vkládá online YouTube video do obsahu elektronické učebnice.

Wikipedia Browser – prohlížeč obsahu encyklopedie Wikipedia. Oproti klasickému webovému prohlížeči omezuje přístup pouze na webový obsah Wikipedie.

Whiteboard – interaktivní formuláře, pomocí nichž lze pokládat čtenářům
různé typy otázek a ty vyhodnocovat.

Flash Cards – učební kartičky, které nabízí podobně jako ty papírové nejdříve
na jedné straně ukázat objekt k zapamatování a na druhé straně jeho název či
význam. Po přepnutí na testovací mód se widget čtenáře ptá na význam nebo
54
název daného objektu na kartičce a uživatel musí správně odpovědět jinak je
upozorněn na nesprávnou odpověď.
Rozdíl při získávání widgetů z aplikace BookWidgets je pouze v tom, že se generují
přímo z aplikace a ukládají přímo do lokálního úložiště. Opět je možné nastavit různé
parametry widgetu a po vygenerování WDGT soubor vložit do projektu iBooks Author.
55
6 Projekt tvorby učebnice
Na základě výše uvedených teoretických a praktických znalostí technologií iBooks, iBooks Author a HTML5, CSS, JavaScript pro tvorbu vlastního widgetu lze vytvořit učebnici
dle zadaného projektu v Kapitole 3 na straně 19. Pro demonstrativní účely použitelnosti těchto technologií pro daný projekt a jeho proveditelnosti bude vytvořena ukázka
učebnice. Obsahovat bude části materiálů z předmětu PES Základy objektově orientovaného programování, formátované texty, obrázky, tabulky, videa a widgety. Pro specifický požadavek ukázky animace průběhu interpretovaného kódu Ruby bude vytvořen HTML5 widget. Dané zdrojové soubory budou taktéž obsahem přílohy této práce.
HTML5
V následující kapitolách o HTML5, CSS a JavaScript budou, pospány principy těchto jazyků pro jejich pochopení a použití pro tvorbu HTML5 widgetu pro zadaný projekt. Pro
generování zdrojového kódu v těchto jazycích lze použít i různé editory či vývojářské
aplikacepro začínající programátory (např. Apple iAD Producer, Hype nebo Adobe Dreamweaver. V těchto ukázkách a později při tvorbě vlastního widgetu bude však použit
pouze jednoduchý editor Sublime Text, který nabízí integraci s řadou pluginů a knihoven usnadňující tvorbu HTML5 aplikací a nabízí větší možnost individualizace vlastní
tvorby než výše zmíněné nástroje, které pomáhají generovat kód různými šablony,
předpřipravenými prvky apod. (65)
a) Historie
HTML je zkratkou pro HyperText Markup Language, což je značkovací jazyk pro hypertext. Hypetext je způsob strukturování textu obsahující odkazy a další informace o tom,
jak bude text publikován. HTML je hlavním z jazyků pro vytváření WWW stránek publikovaných pomocí sítě internet. (66)
Za vývojem tohoto jazyka stojí Tim Berners-Lee a Robert Caillau, kteří pracovali na propojení informačních systémů ve výzkumném centru CERN v roce 1989. Výsledkem byl
v roce jazyk HTML, protokol http a první webový prohlížeč nazvaný WorldWideWeb.
Vývoj HTML je úzce spjat s vývojem webových prohlížečů, které zpětně ovlivňují definici tohoto jazyka. (67)
56
Standardizace jazyka je vypracovávaná komunitou W3C13, jejíž členové vyvíjejí webové
standardy pro World Wide Web. Právě toto konsorcium vydalo 28. října 2014 kompletní specifikaci k HTML5. Vývojářům byla velká část specifikace známá již dříve. To
dokládá například oznámení tehdejšího CEO Apple Inc. Steva Jobse z roku 2010, který
informoval, že technologie Flash již nebude nadále potřebná pro konzumaci webového
obsahu, ale technologie jako HTML5 zvítězí. Toto prohlášení se v roce 2011 potvrdilo
oficiálním ukončením vývoje technologie Flash společností Adobe a orientaci nebo vývojové nástroje pro HTML5. (68)
Webové prohlížeče podporovaly různé HTML5 prvky dle jejich aktuálně vydané aktualizace díky intenzivní spolupráci jejich vývojářů s W3C již od vzniku první specifikace
tohoto jazyka. Například Internet Explorer od Microsoft přišel s částečnou podporou
některých prvků HTML5 s verzí IE9 v roce 2011, Google Chrome podporu přinesl hned
po roce jeho prvního vydání v roce 2009 ve verzi Chrome 3. V dnešní době HTML5
podporuje většina prohlížečů s nejnovější nainstalovanou aktualizací a to včetně mobilních verzí prohlížečů. (67)
Tabulka 2: Podpora HTML5 audia a videa populárními prohlížeči a mobilními OS.
Uživatelský klient
Verze
Internet Explorer
Google Chrome
Firefox
Opera
Opera Mini
Safari
iOS
Android OS
9+
3+
3.5+
10.5+
11+
3.1+
3.0+
2.0+
Zdroj: POWERS, Shelley. HTML5 Media. (69)
b) Princip jazyka
Základem zápisu jazyka HTML5 jsou „značky“ (dále také jako „tagy“) uzavřené
mezi hranatými závorkami: „<tag>“ a jejich vlastností (atributů). Mezi tyto značky se
uzavírá část textu dokumentu a tím se určuje význam obsaženého textu. Dokument se
většinou rozděluje na hlavičku, kde jsou definovány základní vlastnosti celého doku-
13
World Wide Web Consortium (W3C) – mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro WWW. Jeho cílem je rozvíjet potenciál WWW vývojem
protokolů a směrnic pro dlouhodobý růst Webu. (90)
57
mentu a odkazy na připojené skripty nebo grafické doplňky a tělo stránky, kde je definován zbytek dokumentu. Takový dokument se ukládá do souboru s příponou „.html“.
Takto uložený dokument zobrazený v prohlížeči podporujícím specifikaci HTML je přečten a přeložen do zobrazení pro uživatele. (68)
Tagy existují tzv. párové a nepárové. Nepárové značky nemají uzavírací část tagu a nejsou tak časté jako párové. Např. <img> pro definování obrázku v dokumentu nebo <br>
pro odřádkování textu. Mezi párové tagy patří např. <head>text</head> pro definování části dokumentu jako hlavička nebo <h1>text</h1> pro definování nadpisu 1.
úrovně. (66)
c) HTML5
Specifikace HTML5 definuje nové HTML tagy, perzistentní úložiště formou asociativního pole, relační databáze s podporou transakcí a podporu offline aplikací. Například
dle specifikace HTML 4.01 bylo nutné začátek dokumentu deklarovat takto:
Zdrojový kód 1: Definice dle specifikace HTML 4.01.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Zdroj: http://www.w3.org/TR/html401/
V HTML5 specifikaci se může stejná část kódu deklarovat pouze takto:
Zdrojový kód 2: Definice dle HTML5.
<!DOCTYPE html>
Zdroj: http://www.w3.org/TR/html5/
Dále je možné pomocí HTML5 vytvořit aplikací, která funguje v prohlížeči i bez internetového připojení díky datům, která se automaticky uloží do lokálního úložiště. Kromě
relačních databází se jako perzistentní úložiště může používat i asociativní pole, tzv.
„localStorage“. (67)
V HTML5 se používá také nová struktura dokumentu. K dřívějším značkám <head> a
<body> přibyly značky: <section>, <article>, <main>, <aside>, <header>, <footer>,
<nav> a <figure>. Dále je přidáno několik nových funkcí, např.: <progress> pro zobrazení stavu dokončení dané úlohy nebo <time> k označení času. Jedna z nejzásadnějších
změn je podpora tagů pro multimediální obsah. Dříve byl tento obsah podporován
v prohlížečích pouze různými pluginy nebo technologií Flash. Nyní je možné použít tyto
značky pro definování zdroje daného média přímo v dokumentu: <video>, <audio>,
58
<source>, <track> nebo <embed>. Z dalších zajímavých tagů je dobré zmínit <canvas>
pro interpretaci vektorové grafiky nebo nové atributy formulářových prvků, např.: tel,
url, email, date, number či atributy autocomplete, required nebo multiple , které upravují zobrazení a chování formuláře ve webovém prohlížeči. (66)
CSS
a) Historie
CSS je zkratka pro Cascading Style Sheets neboli kaskádové styly, které popisují způsob
zobrazení elementů HTML nebo XML. Tento jazyk půl původně navržen organizací W3C
a jeho prvotním autorem je Håkon Wium Lie. V současné době je ve vydána kompletní
specifikace k verzi CSS2.1 a existuje již specifikace k CSS3, která čeká na schválení od
W3C k oficiálně doporučenému používání. (70)
Hlavním posláním jazyka CSS je oddělit vzhled dokumentu od jeho struktury a obsahu.
Původní vývoj HTML směřoval k integraci grafických prvků do HTML dokumentu a obsahoval řadu elementů definující jeho vzhled. Tento vývoj však nebyl žádoucí jak z hlediska zpracování dokumentu, tak z hlediska vyhledávání informací v něm. Výhodou je
kromě jiného možnost definování jednoho CSS dokumentu pro více HTML dokumentů
sdílející formátování elementů z tohoto dokumentu, což přináší lepší kontrolu a flexibilitu při vývoji HTML dokumentů. Tímto způsobem lze také prezentovat stejný obsah
v různých zobrazeních – např. pro webový prohlížeč, pro tisk, pro mobilní zařízení
apod. (70)
b) Princip jazyka
CSS elementy definující určitý vzhled či formátování lze přiřadit jak celému HTML dokumentu či určitým blokům nebo daným HTML tagům. Tyto definice se v CSS specifikaci řadí dle určitého schématu priorit dle toho, které pravidlo má větší váhu v případě,
že takových pravidel pro daný element je definováno více. Na takto definovaný CSS
dokument odkazuje ze své hlavičky HTML dokument, který vyžaduje k formátování
právě tento styl. Zápis takového odkazu vypadá např. takto:
Zdrojový kód 3: Hlavička HTML dokumentu s definovaným odkazem na CSS soubor.
<head>
<link rel='stylesheet' href='styly.css' type='text/css'>
</head>
59
CSS dokument uložený s příponou „.css“ se skládá ze seznamu pravidel, která jsou od
sebe oddělena středníky „;“. Každé jednotlivé pravidlo se skládá z jednoho nebo více
selektorů a deklarace.
Selektor definuje element či blok HTML kódu, na který bude dané pravidlo z CSS dokumentu aplikováno. Použít se může na všechny elementy určitého typu, elementy dle
typu atributu (např. id nebo třída) a na elementy v závislosti na jejich umístění v hierarchii celého dokumentu.
Deklarační část se skládá z uzavřených složených závorek „{ }“ a seznamu deklarací.
Jednotlivé deklarace jsou složeny z vlastnosti a definovaných hodnot pro tyto vlastnosti. Od sebe jsou deklarace odděleny středníky „;“.
Ukázka použití CSS stylů pro HTML dokument může vypadat například takto:
Zdrojový kód 4: Ukázka části HTML dokumentu s odkazem na CSS soubor se stylem definující vzhled
obsahu elementu <h1>.
<html>
<head>
<link rel='stylesheet' href='style.css' type='text/css'>
</head>
<body>
<h1>Header Number One</h1>
</body>
</html>
Zdrojový kód 5: Ukázka části CSS dokumentu s definicí stylu pro nadpis h1.
h1 {
font-family: 'Helvetica Neue';
font-size: 22px;
font-variant: small-caps;
font-weight: 400;
}
Po otevření HTML dokumentu v prohlížeči jsou všechny elementy a vlastnosti HTML a
CSS jazyka předvedeny ze zdrojového kódu do formátované podoby. (71)
60
Obrázek 5: Výstup definovaných HTML a CSS dokumentů v prohlížeči.
c) CSS3
Třetí verze kaskádových stylů CSS, jejíž vývoj byl zahájen roku 2005, teprve čeká na
oficiální vydání a uveřejnění kompletní specifikace konsorciem W3C. Většina webových prohlížečů tuto verzi již v současné době podporuje. (70)
Mezi nejdůležitější vlastnosti CSS3 je možnost zaoblení rohů u HTML prvků. Díky tomu
odpadá potřeba řešit zaoblení pomocí obrázků. Místo toho lze použít element „borderradius“ a k němu řadu hodnot definující vlastnosti zaoblení daného prvku. Další důležité tagy jsou „box-shadow“ pro definici stínu u blokového prvku nebo „text-shadow“
pro nastavení stínu textu. Díky tagům „transform“, „rotate“ a „scale“ lze vybrané prvky
transformovat a pohybovat s nimi po osách x a y, otáčet je či zmenšovat a zvětšovat.
Jedna z dalších zajímavých vlastností CSS3 je možnost daným prvkům v HTML dokumentu nastavovat hodnotu průhlednosti. (72)
V souhrnu CSS3 definice kaskádových stylů posunuje tento jazyk směrem kupředu k vytváření složitějších grafických prvků v HTML dokumentech, nahrazování obrázků elementy definovanými pouze CSS styly a zpřístupnění obsahu WWW většímu množství
zařízení díky flexibilním vlastnostem tohoto jazyka pro zobrazení v prohlížeči mobilních
zařízení. (72)
JavaScript
a) Historie
JavaScript je multiplatformní skriptovací jazyk, který běží přímo ve webovém prohlížeči
na klientské straně. Je objektově orientovaný a jeho syntaxe patří do rodiny jazyků
C/C++/Java. Jeho původním autorem je Brendan Eich a standardizován byl asociací
61
ECMA v roce 1997. Společností Sun Microsystems byl už v roce 1995 ohlášen jako doplněk k jazykům HTML a Java. Později jej pod názvem JScript začal podporovat i Microsoft pro platformu .NET. (73)
JavaScript lze kromě klientské strany spouštět i na straně serveru. Existuje řada opensource implementací serverového JavaScriptu, např. Rhinola, Node.js nebo Apache.
Společné použití HTML jako značkovacího jazyka, CSS jako kaskádových stylů a
JavaScript jako skriptovacího jazyka na klientské straně se někdy souhrnně nazývá
DHTML nebo dynamické HTML. Kromě jiného se JavaScript používá pro mnohé rozšíření aplikací, např.: Adobe Acrobat (od verze 3.02 se využívá například pro interaktivní
formuláře). (73)
b) Princip jazyka
Vypsání řetězce v HTML dokumentu
Pro zavolání jazyka JavaScript například z HTML dokumentu se používá párový tag
<script> a uzavření </script>. Samotný skript se pak umístí mezi tyto dva tagy. Nutnou
podmínkou pro spuštění takového bloku kódu je povolení JavaScript ve webovém prohlížeči (ve všech prohlížečích je většinou standardně povoleno). V případě, že v prohlížeči je JavaScript z nějakého důvodu zakázán (preference uživatele, bezpečnostní politika apod.), lze použít párové tagy <noscript> a </noscript> pro vypsání alternativního
obsahu bez použití JavaScript. (72)
Zdrojový kód 6: Ukázka vypsání "Hello World" pomocí JavaScript.
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<noscript>
Your browser doesn't support or has disabled JavaScript
</noscript>
</body>
</html>
Zdroj: NIXON, Robin. Learning PHP, MySQL, JavaScript, CSS & HTML5, Third Edition.
62
Volání externího JavaScript souboru
Podobně jako v případě CSS stylů je možné JavaScript ukládat do externích souborů
s příponou „.js“ a ty vzdáleně volat z daného HTML dokumentu. K tomu slouží následující jednoduchá syntaxe HTML. (72)
Zdrojový kód 7: Zavolání externího JavaScript souboru z HTML dokumentu.
<script type="text/javascript" src="script.js"></script>
Použití
Jak již bylo výše uvedeno, JavaScript se používá hlavně jako dynamický prvek k HTML
dokumentu, který na straně klienta volá a načítá data se serveru nebo je pak naopak
na sever odesílá bez nutnosti znovunačtení webových stránek v prohlížeči (asynchronní zpracování webových stránek pomocí AJAX14). (73)
Dále umožňuje animaci a transformaci různých prvků webových stránek. V tomto nahrazuje například dřívější roli Flash. Díky různým outsource knihovnám a pluginům je
v JavaScript implementována již řada hotových řešení jako např.: animované posuvníky, interaktivní multimediální galerie, přehrávače multimédií, implementace Drag &
Drop15 apod. (72)
JavaScript se také používá pro validaci webových formulářů, vytváření interaktivních
AJAX formulářů, pro vytváření analytických a statistických nástrojů pro internetový
marketing nebo vytváření samotných webových aplikací, widgetů nebo her. (73)
14
Asynchronous JavaScript and XML (AJAX) – sada metod a technologií pro vývoj interaktivních
webových aplikací, která umožňuje přenášet data mezi prohlížečem a server na pozadí. (72)
15
Drag & Drop – gesto pro přesunutí objektu (souboru či složky) z jednoho místa na druhé.
Takto lze přenášet např. objekty z lokálního úložiště na sever apod. (72)
63
Podklady
První část tvorby elektronické učebnice spočívá ve správném výběru a kvalitě podkladů
připravených k publikaci. Důležitá je jejich správné uchopení a interpretace s ohledem
na vybranou publikační technologii a druh čtenáře. Pro tento projekt učebnice programování budou použity přednáškové materiály dostupné z informačního portálu Unicorn College ke studijním účelům. Pro vytvoření studijní ukázky učebnice budou konkrétně použity přednášky: 1. Kick Start a 2. Práce s kolekcemi. Jako doplňkový materiál
k tématu bude sloužit internetová encyklopedie Wikipedia a oficiální dokumentace
programovacího jazyka Ruby dostupná z http://ruby-lang.org.
Obrázek 6: Struktura obsahu ukázkové části učebnice programování.
Analýza a návrh
Pro vytvoření elektronické knihy je třeba vyřešit otázky technické, grafické a typografické. Technické otázky byly vyřešeny již v předchozích částech. Dále je nutné navrhnout grafický přebal knihy, který s bude zobrazovat v knihovně iBooks a případně později v obchodě iTunes. Výše uvedený obsah je potřeba rozdělit na oddíly a bloky textu,
které budou odpovídat zvolené šabloně a sazbě textu. Nutné je také zvolit jednotný
formát a stylování nadpisů, odrážek tabulek, jednoduchého textu apod. Dále je potřeba navrhnout rozvržení grafických a interaktivních prvků pro jejich vhodné a snadno
64
ovladatelné vložení do textu. Pro specifický obsah učebnice programování je třeba také
navrhnout jednotný styl ukázek zdrojového kódu a výstupu ukázkových aplikací.
Pro účely tvorby ukázkové učebnice programování byly zvoleny následující parametry:
Šablona knihy: Moderní základní (pouze na výšku)
Název kapitoly: Helvetica, tučné, 42pt, #000000
Název oddílu: Helvetica, tučné, 32pt, #000000
Nadpis úrovně 1: Helvetica, tučné, 24pt, # 444444
Nadpis úrovně 2: Helvetica, tučné, 20pt, # 444444
Citát zavěšený: Helvetica Neue, tučné, 18pt, #000000
Základní text: Helvetica Neue, Regular, 17pt, #000000
Název přílohy: Helvetica, tučné, 15pt, #000000
Titulek: Helvetica, regular, 15pt, #000000
Zdrojový kód: Consolas, tučné, 14pt, barva dle zdrojového editoru
65
Obrázek 7: Návrh obrazovky (vlevo) a návrh učebnice z iBooks Author.
Implementace
Pokud má autor (nebo zadavatel projektu) ujasněné základní parametry projektu a
zpracovanou jednoduchou analýzu a návrh elektronické knihy může přistoupit k fázi
implementace. Tato fáze vyžaduje přípravu vývojového prostředí a jeho nastavení.
iBooks Author lze bezplatně stáhnout z App Storu do operačního systému OS X a vývojář (či autor) může začít v tvorbě. Aplikace iBooks tamtéž, od verze iOS8 je dokonce
integrována přímo do systému mobilních zařízení. Díky funkci Náhled (Preview) v iBooks Author lze první výsledky tvorby otestovat přímo v daném zařízením s aplikací iBooks připojeném přes USB k počítači či desktopové aplikaci iBooks. To přináší výborné a
rychlé výsledky testování pro dané zařízení. Rozpracovaná kniha se uloží do fyzické paměti zařízení a je tak i v implementační fázi k dispozici v zařízení bez nutnosti připojovat
ho k USB. Tato vlastnost je vhodná i k inkrementačnímu vývoji např. s více členy týmu
(např. za použití cloudových služeb, sdílenému úložišti apod.).
66
a) Text, obrázky, widgety
Text
Sazba textu v iBooks Author probíhá velmi jednoduše. Aplikace se chová podobně jako
textový procesor Microsoft Word nebo Pages. Přednastavené šablony mají bohatě
přednastavené styly pro různé typy písem. Možné je i nové styly vytvářet pomocí panelu Písma. Důležité je dodržovat stanovené konvence stylů na všechny typy obsahu a
odlišovat sémanticky různé druhy obsahů. Text je možné do iBooks Author vkládat
Copy a Paste, pokud již dané textové podklady existují.
Podobně jednoduše jako v jiných textových procesorech lze v iBooks Author jednoduše
vytvářet tvary, tabulky a grafy.
Obrázek 8: Ukázka formátování textu ve výřezu ukázky učebnice programování.
Obrázky
Obrázky lze opět vkládat velmi jednoduše několika intuitivními způsoby. Za prvé lze
obrázek jednoduše z místa úložiště přesunout metodou Drag & Drop. Taktéž lze obrázek vložit metodou Copy a Paste. Další možností je využití nabídky Vložit – Vybrat..
Podobně lze přidat i obrázky z knihovny iPhoto pod záložkou Média.
Za pomoci nástroje Inspektor (vedle záložky Média) lze objektu nastavovat různé vlastnosti od obtékání textu až po odkazy a formátování.
67
Obrázek 9: Ukázka vloženého obrázku s obtékáním textu, widgetu Vyskakovací překryv a panelu Inspektor v otevřeném projektu tvorby učebnice programování iBooks Author.
Widgety
Jak již bylo výše u popisu iBooks Author uvedeno, existují různé druhy widgetů. Předpřipravené widgety přímo v iBooks Author se vkládají přímo z panelu Widgety do obsahu projektu. Widgety vytvořené a uložené do formátu WDGT se přesunou metodou
Drag & Drop z místa úložiště do projektu. Nastavení takového vlastního widgetu je
nutné provést ve zdrojových soubor ještě před vložením do projektu (Bookry.com
nebo BookWidgets widgety nabízí uživatelské rozhraní pro nastavení chování widgetu
a poté je teprve vygenerován daný WDGT soubor s vygenerovaným individuálním uživatelským nastavením).
68
Obrázek 10: Ukázka vložení a nastavení widgetu v panelu Inspektor v iBooks Author.
Pro účely implementace budu vkládat do vzorového projektu v iBooks Author widget
Test.
1. Nejprve je nutné vytvořit nebo otevřít již existující iBooks projekt v iBooks Author (Příloha 2: Vytvoření nového projektu v iBooks Author nebo otevření již
rozpracovaného projektu).
2. V horním menu vybrat ikonu s popiskem Widget a kliknout na položku Test
(Příloha 3: Výběr widgetu pro vložení do projektu elektronické učebnice).
3. Vloží se obsah widgetu do projektu a na straně obrazovky se zobrazí panel
s nastavením widgetu Inspector (Příloha 4: Nastavení widgetu Test pomocí
bočního panelu Inspector..
4. V záložce Interakce lze nastavit otázky a k nim nabízené možnosti odpovědí.
Zároveň je pod boxem Otázky možné tlačítkem „+“ nastavit formát odpovědí
(Vícenásobná volba, Přetáhněte štítek na cíl, Přetáhněte miniaturu na cíl).
5. V záložce Uspořádání je možné nastavit popisky a náhled widgetu přímo
v textu.
6. Dále je možné nastavovat velikost a pozici objektu widget v textu (Příloha 14:
69
b) Vlastní HTML widget
Vzhledem k tomu, že tvorba interaktivních prvků probíhá odděleně od ostatního obsahu knihy a často i v jiných aplikacích, je vhodné je vytvořit hned na začátku a pak
teprve je vložit na dané místo knihy. Vytvoření vlastního widgetu pro elektronickou
učebnici v iBooks dodává vývojáři nejvíce svobody a individuality. Není svázán žádným
uživatelským rozhraním, kromě iBooks samotného, funkčnost si může navrhnout sám
a HTML5, CSS a JavaScript technologie mu dávají dostatečné zázemí pro vývoj. Pokud
by požadoval širší technologické prostředky, práci s většími daty, komunikace se serverem, databází, HTML5 a JavaScript může použít pro volání skriptovacích jazyků na
serveru a danou funkčnost přeneseně zabezpečit tímto způsobem (například PHP nebo
Ruby on Rails webová aplikace, MySQL databáze, komunikace s webovým API pro zajištění funkce určité business logiky). Toto však není rozsahem této práci a patří spíše
do témat řešící webové aplikací a služby, se kterými je možné widget v iBooks napojit.
Cílem této práce je ukázat vývoj a práci s widgety, které značně rozšiřují dimenze použití elektronických učebnic díky platformě iBooks a dík čemuž je vhodné při tvorbě elektronické učebnice tyto funkčnosti zohlednit a případně právě kvůli těmto benefitům na
této platformě stavět. Proto budu nyní demonstrovat názorný postup vývojáře v iBooks pro tvorbu vlastního HTML widgetu.
Popis zadání
Cílem této části je vytvořit interaktivní widget pro učebnici programování iBooks. Jeho
účelem je obohacení typicky statických ukázek zdrojového kódu jazyka Ruby v učebnici
programování o animaci. Tato krátká animace čtenáři názorně a interaktivní formou
ukáže, jak při interpretaci daného kódu postupuje např. konzole daného programovacího jazyka.
Animace by měla postupovat sekvenčně po řádcích dle logiky dané ukázky kódu Ruby.
Řádky kódu by měly být očíslovány a obarveny podobně jako je zvykem v editorech
programovacích jazyků. Mělo by být možné uživatelem zobrazit a skrýt popisky či vysvětlivky k danému kódu.
70
Zdrojový kód 8: Ukázka kódu cyklu v jazyce Ruby pro účely vytvoření widgetu.
// Get output from cycle, where the word "Gambit" is printed letter
by letter until the end.
superhero = "Gambit"
superhero.length.times do |x|
print x
print " " if x < superhero.length -1
end
Vzhled widgetu by měl připomínat logicky rozvržení editorů kódu nebo některých IDE.
Hlavní část by měl zaujímat panel s ukázkou daného kódu Ruby, který text učebnice
aktuálně probírá. Pod tímto panelem se bude zobrazovat aktuální výstup daného kódu
(podle toho, který řádek animace zrovna prochází). Vedle tohoto panelu se budou zobrazovat názvy proměnných daného kódu a jejich aktuální hodnoty. Celou animaci bude
možné spustit od začátku až do konce bez přerušení tlačítkem Play all. Animaci bude
možné i „krokovat“ po sekvencích kódu pomocí tlačítek Step forward nebo Step backward.
Návrh
Bude vytvořena HTML5 miniaplikace „Codewalker“, která bude pomocí HTML tagů vykonávat danou naprogramovanou funkčnost (dle použitého tagu) pomocí JavaScript a
budou použity CSS styly pro všechny grafických prvků. Aplikace se bude vizuálně chovat
podobně jako tzv.debugger16. Ukázkový Ruby kód bude zapsán jako text do hlavního
HTML souboru a bude zformátován jako běžný obsah webové stránky. Dále vznikne
hlavní JavaScript soubor, který bude sloužit jako jádro všech hlavních funkcí aplikace a
bude implementovat všechny pomocné JavaScript externí knihovny. Bude vytvořena
sada vlastních HTML tagů (vlastní tagovací jazyk), které bude v hlavním HTML souboru
označovat části, kde spouštět dané funkce JavaScript skriptu. Díky tomu bude toto prostředí přenositelné a bude možné „otagovat“ různé ukázky Ruby kódu z učebnice.
Widget Codewalker bude fungovat podobně jako animovaná prezentace nebo přehrávač videa. Čtenář před sebou uvidí staticky zapsaný zdrojový kód tak, jako by byl zapsán
v textu učebnice. Pod ním budou tři hlavní ovládací tlačítka – Step Backward, Play All,
Step Forward, pomocí nichž bude možné sekvenci animace kódu spustit celou od začátku až do konce nebo se v ní bude moci pohybovat po jednotlivých krocích vpřed a
16
Debugger – softwarový nástroj pro pro hledání chyb při vývoji a ladění software.
71
vzad. Pod těmito tlačítky budou dva textové rámečky – jeden bude pro zobrazení aktuálního výstupu kódu po průběhu cyklem (tak, jako je zvykem v editorech a vývojovém
software pod názvem Output nalézt) a druhý pro zobrazení aktuálních hodnot proměnných (známé jako např. Navigator nebo Outline).
Podmínky pohybu po řádcích bude zajišťovat hlavní JavaScript soubor. Základní podmínky jsou:
-
Při prvním spuštění widgetu nelze jít o krok zpět (Step Backward), ale pouze
kupředu (Play All, Ste Forward).
-
Obarvení řádku značí interpretování daného řádku. Pokud význam kódu daného řádku mění hodnoty proměnných či výstupu, je třeba je v danou chvíli
zobrazit v příslušných panelech
-
Pokud se celá animace prochází po krocích, ke třeba v každém kroku zobrazit
danou správnou hodnotu proměnných a výstupu v příslušných panelech
-
Kdykoliv je možné aktivovat nebo skrýt popisky kódu tapnutím na daný popsaného kódu.
Návrh procesu spuštění animace widgetu představuje následující obrázek.
Obrázek 11: Návrh průběhu aktivit po spuštění vlastního widgetu Codewalker (Activity Flow diagram).
72
Návrh uživatelského rozhraní představuje následující obrázek.
Obrázek 12: Návrh uživatelského rozhraní po spuštění vlastního widgetu Codewalker.
Implementace
Pro realizaci jsem se rozhodl použít primárně doporučené technologie firmou Apple
Inc.: HTML5, CSS a JavaScript, které vyhovují pro implementaci výše uvedených funkčností a jsou při správném požití dobře rozšiřitelné do budoucnosti (v případě nutnosti
rozšířit widget o další funkce – např. komunikaci s webovým serverem, databází atd.).
Bylo by pravděpodobně možné použít i některé starší verze syntaxe HTML či nějaký
generátor webové aplikace (např. WYSIWYG editor). V rámci této práce ale nebylo testováno nasazení takto implementovaného widgetu pro iBooks a v rámci vlastních zkušeností taková implementace HTML nikdy není časově ani kvalitativně efektivní. Další
výhodou těchto technologií je jejich rozšířenost, bezplatné používání, široké portfolio
vývojových aplikací, knihoven, pluginů a jiných podpůrných prostředků. V rámci této
práce nastíním kostru a části zdrojových souborů pro tvorbu vlastního widgetu spolu
s postupem jejich převodu do WDGT formátu a vložení do projektu iBooks Author, jak
bylo uvedeno již v předchozích kapitolách u jiných druhů widgetů. Není v rozsahu této
práce popis všech domén, tříd a částí kódu, předpokládá se v případě aplikace metody
implementace vlastního widgetu již pokročilejší znalost vývojáře zmíněných technologií (praxe se pro vývoj widgetu v ničem neliší od vývoje běžné webové aplikace s těmito
73
technologiemi). Můj popis tedy slouží spíše pro demonstraci a důkaz aplikovatelnosti
této metody pro vytvoření widgetu pro interaktivní elektronické učebnice.

Struktura
HTML soubory – hlavním souborem, který se volá při spuštění widgetu (kromě konfiguračního soubor Info.plist) je index.html. V tomto souboru je definovány odkazy na
ostatní soubory, je zde umístěn obsah widgetu (kódu cyklusu v Ruby) a označkován
tak, aby se v dané části obsahu volaly dané třídy CSS či funkce nebo pluginy JavaScript.
CSS soubory – hlavní soubor main.css definuje vzhled jednotlivých tříd a atributů HTML
kódu, kterou jsou definovány v index.html a tvoří tak grafickou šablonu widgetu.
JavaScript soubory – tvoří hlavní kostru funkcí programu, které obstarávají fungování
widgetu dle zadání a návrhu. Main.js je hlavním souborem aplikace, plugins.js se stará
o spolupráci s doprovodnými pluginy
Info.plist – konfigurační soubor Info.plist definuje základní nastavení widgetu. Konfigurace těchto souborů je popsána v oficiální dokumentaci. (63) Soubor Info.plist pro
widget Codwalker vypadá takto:
Zdrojový kód 9: Konfigurační soubor Info.plist
<?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>AllowNetworkAccess</key>
<true/>
<key>CFBundleDevelopmentRegion</key>
<string>English</string>
<key>CFBundleDisplayName</key>
<string>Codewalker</string>
<key>CFBundleIdentifier</key>
<string>com.apple.widget.Codewalker</string>
<key>CFBundleName</key>
<string>Animation</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>Height</key>
<integer>800</integer>
<key>MainHTML</key>
<string>index.html</string>
<key>Width</key>
<integer>768</integer>
</dict>
</plist>
74
Default.png – náhledový obrázek widgetu. Zobrazí se v obsahu učebnice po přidání
widgetu do projektu iBooks Author. Uživatel jej pak v iBooks uvidí v textu učebnice a
díky náhledu odliší daný widget od ostatního obsahu. Pro widget Codewalker byl použit
snímek obrazovky spuštěného widgetu.
Obrázek 13: Náhledová obrázek widgetu Codewalker Default.png.
Bez těchto souborů nelze widget po převodu do formátu WDGT spustit. Konfigurace
těchto souborů je popsána v oficiální dokumentaci. (63)
Naopak zdrojové soubory lze ze soboru formátu WDGT získat zpět přejmenováním
souboru z „nazev_widgetu.wdgt“ na soubor bez přípony: „nazev_widgetu“. Po odstranění přípony se archiv převede automaticky zpět na složku. Taktéž je možné do souboru nahlížet v operačním systému OS X 10.4 a vyšší sekundárním poklepáním myši na
soubor a zvolením volby „Zobrazit obsah balíčku“ bez nutnost opětovné konverze z formátu WDGT.
Následující obrázek znázorňuje sktrukturu složek a souborů widgetu Codewalker.
75
Obrázek 14: Struktura složek a souborů widgetu před převodem do WDGT formátu pro iBooks.

Použité knihovny
Pro danou funkčnost widgetu definovanou v zadání jsem implementoval řadu pluginů
s již předpřipravenými funkcemi. Zde uvádím jejich soupis a krátký popis:

Font Awesome (verze: 3.2.1) – toolkit, který díky vektorovým ikonám a CSS
přidává škálovatelné grafické ikony do vzhledu bez nutnosti použití bitmapových
obrázků.
Font
Awesome
je
k
dispozici
na
http://forta-
wesome.github.io/Font-Awesome a je plně open source pro jakýkoliv druh použití.

Google Code Prettify (verze: 1.0.0) – tento JavaScript a CSS modul automaticky
zvýrazňuje a obarvuje různé vybrané části kódu tak, jak jsou vývojáři zvyklí
z některých programovacích editorů. Existují zde široké možnosti nastavení
vzhledů, modul podporuje řadu jazyků z rodiny C, Bash, XML apod. Dostupný
je na http://code.google.com/p/google-code-prettify a podléhá licenci Apache
2.0, která požaduje zachování autorství a zřeknutí se odpovědnosti) tzv.
disclaimer), jinak je použití svobodné.

jQuery (verze: 2.0.3) – JavaScriptová knihovna, která pomáhá s interakcí HTML
a JavaScript, odděluje a zjednodušuje definici chování programu od jeho
76
vzhledu. jQuery je k dispozici ke stažení na http://jquery.org. Podléhá licenci
MIT, která neomezuje použití této knihovny na žádný typ projektu.

Modernizr (verze: 2.6.2) – JavaScript knihovna, která pomáhá převádět různé
JavaScript prvky do HTML5 a CSS3 pro různé druhy prohlížečů. Modernizr je
k dispozici na http://modernizr.com a podléhá taktéž MIT licenci.

SASS Bostrap (verze: 3.0.0) – SASS verze Boostrap frameworku, který usnadňuje kódování CSS prvků pro vzhled šablony. Repozitář tohoto frameworku se
nachází na http://github.com/twbs/bootstrap a vznikl z Boostrap frameworku
dostupného na http://getbootstrap.com pod licencí MIT.

Underscore (verze: 1.5.1) – tato knihovna dodává JavaScriptu různé užitečné
funkce pro usnadnění a zrychlení práce. Dostupná je na http://underscorejs.org pod licencí MIT.
Konkrétní obsah, nastavení a užití pluginů je k nahlédnutí v Příloze B této práce.

Zdrojový kód
V rámci následujícího textu popíši kódovou část widgetu. Vzhledem k tomu že není
cílem této práce prokázat metody používání jazyka HTML, CSS nebo JavaScript, ale metody tvorby interaktivních widgetů a jejich výhody, budu popisovat pouze hlavní část
aplikace soubor index.html, která je libovolně upravovatelná dle typu obsahu, který je
v ní třeba prezentovat (v případě widgetu Codewalker je to zdrojový kód programovacího jazyka). Tento soubor je jakýmsi „středobodem“, kde se uplatňují všechny funkce
JavaScriptu a využívají CSS třídy k formátování výstupu. Ostatní soubory zajišťují funkčnost, která je právě v tomto soubor implementovaná. Všechny zdrojové kódy HTML,
CSS a JavaScript jsou obsaženy v kapitole 0 Příloha B k nahlédnutí a vyzkoušení.
index.html
HTML soubor index.html pro zobrazování obsahu widgetu, propojení funkcí
v JavaScriptu a grafické sabloně CSS je v hlavním domovském adresáři souborové struktury widgetu. Jeho struktura je podobná klasickému webovému dokumentu – hlavička,
tělo dokumentu a konec.
V hlavičce je definován soubor CSS pro vzhled.
Zdrojový kód 10: Začátek těla programu v HTML dokumentu.
16
<div class="row wrapper">
77
Následně je definován začátek několika CSS tříd, zejména třídy prettyprint pro obarvování Ruby kódu a linenums pro styl čísel řádků.
Zdrojový kód 11: Definování začátku CSS tříd
20
<pre class="prettyprint linenums interface window">
Po předchozím řádku je již definováno tělo samotné sekvence značkami <sequence>
na 23. řádku souboru index.html:
Zdrojový kód 12: Tělo zdrojového kódu Ruby a tagů pro definici chování animace kódů ovládaného
JavasScriptem.

<sequence data-id="1" repeat="1">
<variable data-name="x" data-repeat="1">0</variable>// Get output
from cycle, where the word "Gambit" is printed letter by letter until
the end.

superhero <popover data-content="Tento prvek je proměnná">= "Gambit"</popover></sequence>
<variable data-name="x" data-repeat="5">0</variable>
<sequence data-id="2" repeat="6">

superhero.<popover data-content="Length spoočítá délku proměnné a times ji tolikrát zopakuje">length.times</popover> do |x|
<console data-repeat="1" data-content=""></console>
<console data-repeat="2" data-content="0"></console>
<console data-repeat="3" data-content="0 1"></console>
<console data-repeat="4" data-content="0 1 2"></console>
<console data-repeat="5" data-content="0 1 2 3"></console>
<console data-repeat="6" data-content="0 1 2 3 4"></console>

print x
<console data-repeat="1" data-content="0 "></console>
<console data-repeat="6" data-content="0 1 2 3 4 5"></console>

<popover data-content="Vytiskne mezeru, pokud je hodnota x menší než
délka slova Gambit (6 - 1 = 5).">print " " if x < superhero.length
-1</popover>
<console data-repeat="1" data-content="0 "></console>
78
<console data-repeat="6" data-content="0 1 2 3 4 5"></console> <!-konec 5.řádek -->
</sequence>
Pomocí komentářů <! -- --> jsou od sebe oddělené jednotlivé bloky kódu podle toho,
který řádek vysvětlovaného Ruby kódu popisují.
Značka <sequence> uzavírá blok kód, který má být sekvencí, tzn. má se vícekrát opakovat jako cyklus. Každou takovou sekvenci je nutné označit id a počtem opakování
repeat. Pokud se sekvence nemá opakovat, repeat musí mít hodnotu 1.
Pro každý řádek kódu je nutné definovat značku a atribut variable, který nastavuje hodnotu aktuální proměnné v dolním okně aplikace (podobně jako Outline v Eclipse nebo
Aptana). Data-name je názvem proměnné (například „x“), data-repeat označuje pro
kolikáté opakování dané sekvence mají tyto atributy platit (například „x = 4“ pro 1.
opakování, „x = 5“ pro 2. opakování) a nakonec mezi samotnými značkami <variable>
je hodnota předepisované proměnné.
Značky popover mezi sebe uzavírají řetězec, který má být popsán popiskem ve vyskakovacím okně (například: „length – metoda pro zjištění délky řetězce“). Popisek se definuje atributem data-content.
Poslední důležitou značkou pro kódování výstupu je <console>. Mezi tuto značku se
uzavírá hodnota výstupu v dolním okně (ekvivalent okna Output z Netbeans nebo Console z Eclipse). Atribut data-repeat musí obsahovat číslo, které udává po kolikátém
opakování sekvence se má zobrazit následující hodnota okna. Data-content udává samotnou zobrazovanou hodnotu.
Jakékoliv řetězce uzavřené i neuzavřené mezi značky aplikace vypíše jako text.
Další části kódu popisují zobrazení ovládacích prvků, velikosti dolních oken Output a
Outline a na konci souboru jsou definovány odkazy na produkční JavaScriptové soubory.
Dodatek
Výhodou tohoto značkování je, že daná funkcionalita způsobená počátečním a ukončovacím tagem lze přenášet i na jiné části kódu. Lze tedy v animaci otagovat jiný typ
kódu, řetězce či cyklu a animaci provést taktéž s danou množinou funkcí. V případě
nutnosti provádět jiné typy pohybu jako např.: přeskakování či označování řádků v animaci, složité podmínky a cykly, které by kombinace použití těchto tagů nepodporovaly,
bylo by nutné doprogramovat a použít případně další JavaScript funkce či knihovny.
79
main.js
V této části zmíním některé důležité prvky JavaScript kódu. Důležité části proměnných
a nastavení funkcí widgetu Codewalker lze upravit v tomto bloku kódu:
Zdrojový kód 13: Elementy a vlastnosti elementů funcí Codewalker. Zde lze nastavit např. rychlost animace v milisekundách.
var Codewalker = function( elem, options ){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data( 'options' );
};
Codewalker.prototype = {
defaults: {
total: 0,
curr: 0,
currRepeat: 1,
showprocessed: false,
addLines: true,
while playing sequence
sequenceTimeout: 400,
//
//
//
//
Total number of lines to process
Current line of caret
Current repeat of sequence
Perform action after last step
// Mark multiple lines of sequence
// Timeout to wait before marking next
line in sequence
Ve výše uvedené části kódu (ve zdrojovém souboru dalších 20 řádek s nastavením selektorů pro ovládací prvky widgetu) se určují základní proměnné pro inicializaci funkcí
JavaScript.
Například funkce pro uvedení widgetu do výchozí pozice při prvním spuštění vypadá
takto:
Zdrojový kód 14: Funkce setWalkers pro nastavení ovládacích funkcí widgetu.
setWalkers: function() {
var self = this;
this.disableBack();
this.$prev.add(this.$next).add(this.$play).add(this.$playAll).click(function(event) {
event.preventDefault();
var $clicked = $(this);
if ( $clicked.hasClass( self.config.prevClass ) )
self.prevMove();
else if ( $clicked.hasClass( self.config.nextClass ) )
self.nextMove();
else if ( $clicked.hasClass( self.config.playClass ) )
self.playMove();
else if ( $clicked.hasClass( self.config.playAllClass ) )
self.playAllMove();
});
},
80
Důležité je ve výše uvedené části zpřístupnění všech tlačítek uživatelského rozhraní
kromě tlačítka Step Backward:
Zdrojový kód 15: Funkce disableBack pro zakázní tlačítka Step Backward.
disableBack: function() {
this.$prev.attr('disabled', true);
},
Ověření pro tuto funkci (například v případě již jednoho spuštění celé animace widgetu
až do konce, je třeba uvést animaci do výchozího stavu jako na začátku a zakázat tlačítko Step Backward) vypadá takto:
Zdrojový kód 16: Podmínka, která ověřuje, v jakém stavu se animace nachází a podle toho povoluje
tlačítko Step Backward.
if ( ( this.curr == 0 || this.curr == 1 ) && this.currRepeat ==
1 ) {
this.disableBack();
} else {
this.enableBack();
}
Podobně jsou implementovány i ostatní funkce pro pohyb animace ve widgetu. Důležitá je pak samotná funkce „processStep: function(step, forceNext, forceAll)“, která zajišťuje samotný proces pohybu v animaci dle stanovených podmínek
zadání tohoto widgetu.
main.scss
Uživatelské rozhraní bylo vytvořeno podle návrhu uvedeného v podkapitole Návrh. Celou šablonu tvoří vykreslené prvky pomocí CSS a vektorové ikony pro ovládací prvky
Step Backward, Play All a Step Forward (knihovna Font Awesome a SASS Bostrap). Díky
tomu, že nejsou implementovány žádné bitmapové grafické prvky, lze uživatelské prostředí přizpůsobovat různým velikostem obrazovek a je z tohoto hlediska tzv. responsivní.
81
Obrázek 15: Náhled uživatelského prostředí pro widget Codewalker.
Šedý panel obsahující většinu ovládacích a funkčních prvků je definován třídou „.well“.
Zdrojový kód 17: CSS třída .well
.well {
height: 100%;
@include radius(0);
@include shadow(none);
border: 0;
background-color: #F2F2F2;
position: relative;
padding-top: $unit;
Vzhledem k tomu, že k tomuto projektu bylo použito Sass17 (SASS Bostrap), je možné
pro lepší efektivitu a znovupoužití kódu definovat pro některé hodnoty proměnné. Ve
výše uvedené ukázce je například hodnota horní odřádkování „padding-top“ definovaná v proměnné „$unit“, která je v souboru samostatně uložena.
17
Syntactically Awesome Style Sheets (Sass) – stylovací jazyk pro vytváření složitějších skriptů,
které jsou následně interpretovány klasickým CSS jazykem. (92)
82
Zdrojový kód 18: Proměnná $unit s hodnotu 20px.
$unit: 20px;
Jednotlivé panely základního panelu „.well“, který velikost řídí dle výšky zobrazovače
(nebo prohlížeče), jsou definovány flexibilně podle procent. To oproti pevnému definování velikosti (např. na obrazové body) přináší možnost automatického přizpůsobení
panelů dle aktuální velikosti nadřazené prvku (v tomto případě základní šedý panel
„.well“).
Zdrojový kód 19: Proporcionálně definované panely základního panelu.
.interface {padding:0;clear:both;}
.window {height:60%;overflow-y:auto;}
.toolbar {height:15%;}
.statusbar {height:25%;}
.statusbar > div {height:100%;}
.console {
clear: both;
display: block;
}
.console, .variables {
height: 100%;
overflow-y: scroll;
}

Převod souborů HTML, CSS, Javascript do WDGT
Jak již bylo uvedeno v předchozích kapitolách, widget se do učebnice iBooks vkládá ve
formátu WDGT metodou Drag & Drop do otevřeného projektu v iBooks Author (pokud
není widget již součástí iBooks Author). Pokud vývojář vyrobil aplikaci za pomocí technologií HTML, CSS a JavaScript a je možné úspěšně otestovat a spustit funkčnost dané
aplikace v jakémkoliv jiném produkčním prostředí (webový server, operační systém
apod.) pak by měla být zaručena funkčnost i v iBooks, který tyto technologie podporuje.
Nejdříve je nutné ověřit, zda vytvořený souborový systém widgetu (Obrázek 14: Struktura složek a souborů widgetu před převodem do WDGT formátu pro iBooks. na straně
76) obsahuje konfigurační soubor (viz Specifikace v Kapitole 5.3). Pokud ne, pak je
nutné jej s náhledem do oficiální dokumentace k iBooks Auhtor (63) vytvořit, jinak se
widget v iBooks nespustí. Dále je nutné, aby byl k dispozici náhledový obrázek Default.png (viz Specifikace v kapitole 5.3). Jakmile jsou tato kritéria splněna a všechny
83
zdrojové soubor jsou umístěny v jedné složce, lze přistoupit ke změně formátu widgetu.
1. V prostředí operačního systému OS X je třeba přejmenovat složku se soubory
podle této konvence: „nazev_widgetu.wdgt“ (Příloha 16: Převod složky ).
2. Po odsouhlasení vyskakovacího okna upozorňujícího na změnu formátu je vytvořen widget ve formátu WDGT (viz podkapitola Formátování v kapitole: 5.3)
(Příloha 17: Vytvořený vlastní widget ve formátu WDGT).
3. Widget lze implementovat do nového iBooks projektu nebo otevřením již existujícího. Poté už stačí do jakéhokoliv místa obsahu dané vytvářené učebnice
přesunout soubor WDGT metodou Drag & Drop (Příloha 18: Náhled widgetu
Codewalker).
Naopak zdrojové soubory lze ze soboru formátu WDGT získat zpět přejmenováním
souboru z „nazev_widgetu.wdgt“ na soubor bez přípony: „nazev_widgetu“. Po odstranění přípony se archiv převede automaticky zpět na složku. Taktéž je možné do souboru nahlížet v operačním systému OS X 10.4 a vyšší sekundárním poklepáním myši na
soubor a zvolením volby „Zobrazit obsah balíčku“ bez nutnost opětovné konverze z
formátu WDGT.
Nasazení widgetu
Výhodou HTML5 aplikací je jejich vcelku snadná přenositelnost (stačí udržovat správnou strukturu adresářů) a široké portfolio podporovaných programů, ve kterých je
možné je spustit – především většinu současných webových prohlížečů. Testování nasazení HTML5 widgetu může probíhat několika způsoby.
1. Spuštením index.html souboru ve webovém prohlížeči
Typ zařízení:
Apple Macbook 15.4“
Rozlišení obrazovky:
2880 x 1800
Procesor:
2.2GHz Intel Core i7
Paměť:
16 GB 1600 MHz DDR3
Operační systém:
Windows 8.1
Prohlížeč
Mozilla Firefox 31
84
V operačním systému OS X 10.4 a vyšší je třeba vyvolat sekundárním kliknutím
kontextovou nabídku. Zde vybrat „Zobrazit obsah balíčku“ (jak již bylo výše
uvedeno, WDGT používá k uložení ZIP kompresi, není tedy problém v OS X jej
otevřít) a v následně vyvolaném okně aplikace Finder otevřít soubor „index.html“. Widget Codewalker se otevře ve výchozím prohlížeči systému a je
možné vyzkoušet jeho funkčnost.
Obrázek 16: Test nasazení widgetu v prohlížeči Firefox.
2. Spuštěním WDGT souboru v OS X 10.4 a vyšší v aplikaci Dashboard
Typ zařízení:
Apple Macbook 15.4“
Rozlišení obrazovky:
2880 x 1800
Procesor:
2.2GHz Intel Core i7
Paměť:
16 GB 1600 MHz DDR3
Operační systém:
OS X 10.9
Dashboard
1.8
Dvojitým poklepáním na soubor WDGT v OS X 10.4 a vyšší spustit widget. Zobrazí se dialogové okno, zda uživatel chce nainstalovat widget. V aplikaci Dashboard poté pomocí tlačítka přidat zvolit widget Codewalker a vyzkoušet jeho
funkčnost.
85
Obrázek 17: Test nasazení widgetu v aplikaci Dashboard.
3. Vložením WDGT do projektu v iBooks Author a funkcí Náhled
Testovací sestava:
Typ zařízení:
Apple iPad Mini (A1455)
Rozlišení obrazovky
1024 x 768
Procesor:
A5 processor
Paměť:
512 MB RAM
Operační systém
iOS 7.0.6
iBooks
3.2
Do otevřeného projektu učebnice v iBooks Author vložit soubor WDGT metodou Drag & Drop. Zvolit v horním panelu tlačítko Náhled a vybrat zařízení, do
kterého se má koncept projektu přenést (desktopová verze aplikace iBooks
nebo připojení mobilního zařízení přes USB a mobilní verze iBooks). Otevře se
aplikace iBooks s daným projektem učebnice. Na místě, kam byl vložen widget
Codewalker je možné vyzkoušet jeho funkčnost.
86
Obrázek 18: Test nasazení widgetu v aplikaci iBooks.
87
Podpora
Pro poslední verzi widgetu Codewalker byly použity výše uvedené knihovny a frameworky (Použité knihovny na straně 76) v uvedených verzích. Plná funkčnost je vyzkoušena na následujících operačních systémech a aplikacích.
Tabulka 3: Otestované operační systémy a aplikace pro podporu widgetu Codewalker.
Operační systém
Aplikace
OS X 10.9
Chrome 39.0.2138.3, Firefox 31, Opera
18, Safari 7.1, Dashboard 1.8, iBooks 1.0
Windows 8.1
Chrome 39.0.2138.3, Firefox 31, Opera
18, IE 11
iOS 6
iBooks 3.0
iOS 7
iBooks 3.1, 3.2
Novější verze těchto operačních systémů a prohlížečů nebyly testovány a tudíž není
garantována plná funkčnost. Funkčnost v multiplatformních prohlížečích (Chrome,
Firefox, Opera) i ve vyšších verzích by však neměla být ovlivněna (vydavatelé těchto
prohlížečů většinou kladou velký důraz na podporu širokého spektra technologií i na
např. zpětnou kompatibilitu HTML verzí, JavaScript knihoven apod.).
Shrnutí tvorby vlastního widgetu
V této podkapitole bylo ověřeno, že vlastní objekt typu widget lze díky technologiím
HTML, CSS, JavaScript a vývojářského programu iBooks Author vytvořit. Pro vytvořený
projekt v iBooks Author lze takovýto widget implementovat a následně i nasadit na
různá testovací zařízení. Samotný proces vývoje závisí na náročnosti zadání a schopnostech vývojáře. Vyvinout vlastní widget může trvat od 1 hodiny po několik dnů. Vyvinout složitější HTML5 aplikace může trvat i několik měsíců v závislosti na zadání. Samotný převod do formátu WDGT a jeho nasazení na testovací sestavu trvá cca 5 minut.
Výsledkem této metody je přidaná hodnota v podobě individuálního widgetu, přizpůsobeného na míru potřebám projektu. V případě, že zadavatel či vývojář má požadavek
na vytvoření interaktivní funkce do elektronické učebnice pro daný kontext výuky, je
tato metoda vhodná. Oproti předpřipraveným widgetům lze vytvořit vlastní funkčnost
a individualizovat widget na základě požadavků. Navíc widget v HTML5 je možné použít
i v jiných aplikacích, které podporují HTML5, CSS a případně JavaScript (např. webový
88
server, lokálně či jiné systémy a aplikace). Větší dopad takovýchto miniaplikací může
být při jejich komplexnějším použití v kombinaci s ostatními interaktivními prvky a
texty začleněnými do komplexnějšího prostředí e-learningu a výukových nástrojů.
Nasazení učebnice
Projekt tvorby učebnice lze průběžně testovat pomocí funkce Náhled. Pak je možné
učebnici uložit do nativního formátu IBA nebo exportovat do formátu PDF či TXT. V případě kompletně vytvořené učebnice lze knihu publikovat do obchodu iTunes. Dále je
možné distribuci provést lokálně pomocí uložení souboru a jeho přenesení do fyzického úložiště zařízení (např. pomocí synchronizace s aplikací iTunes v počítači).
Pro účely testování vlastního projektu tvorby ukázkové části učebnice programování
použiji funkci Náhled v iBooks Author a odkáži na výsledné obrázky v příloze z aplikace
iBooks v zařízení iPad. Ostatní soubory učebnice, projektu a zdrojových kódů budou
k dispozici v Příloze B.
Pro zjištění zda je učebnice, styly, formátování, widgety apod. správně implementovány a fungují tak, jak vývojář předpokládá, je třeba provést test očekávané funkčnosti.
Testem bude nasazení učebnice pro zobrazení v zařízení iPad.
Testovací sestava pro nasazení:
Typ zařízení:
Apple iPad Mini (A1455)
Rozlišení obrazovky
1024 x 768
Procesor:
A5 processor
Paměť:
512 MB RAM
Operační systém
iOS 7.0.6
iBooks
3.2
1. Otevření uloženého projektu pro tvorbu učebnice programování v iBooks Author ve formátu IBA.
2. Po zvolení tlačítka „Náhled“ se zobrazí vyskakovací okno a v něm je třeba zvolit
zařízení pro náhled – v tomto případě „iPad“ (Příloha 15: Výběr zařízení pro
3. Na testovaném zařízení je nutné otevřít aplikaci iBooks. Následně se objeví
okno s načítáním průběhu „Načítání náhledu“ a po jeho dokončení se otevře
kniha v aplikaci iBooks s danou testovanou verzí projektu.
89
4. Následně je možné vyzkoušet všechny implementované funkce tak, jako by
byla elektronická učebnice v produkční verzi.
Obrázek 19: Test nasazení ukázky učebnice programování v aplikaci iBooks na iPad.
90
Shrnutí projektu tvorby učebnice
V této kapitole bylo ověřeno, že lze vytvářet do elektronických učebnic různé interaktivních prvky, včetně vlastních a jednoduše vytvářet ostatní obsah učebnice s technologiemi iBooks, iBooks Author, HTML5, CSS, JavasScript. Proces tvorby může trvat v závislosti na přípravě a složitosti projektu několik hodin nebo i několik měsíců. Samotná
implementace v iBooks Author je velmi intuitivní a rychlá. Testování pomocí náhledu
učebnice na daném zařízení probíhá v závislosti na velikosti souboru projektu také
velmi rychle v řádu sekund až minut.
Zpracování a ukázkové výstupy projektu lze dále použít pro kompletní dokončení projektu tvorby učebnice. Na základě navržené struktury, šablony, stylu a vytvořených grafických prvků apod. lze zpracovat další přednáškové materiály do obsahu elektronické
učebnice. Následně lze učebnici publikovat v obchodě iTunes (tuto část blíže pojednává
např. dokumentace k iBooks Author dostupná zde: http://support.apple.com nebo publikace: Langer, Maria. iBooks Author: Publishing Your First Ebook. Wickenburg : Flying
M Productions, 2012). Dále je možné soubor s učebnicí distribuovat lokálně nebo přes
informační systém studentům školy.
91
7 Závěr
Předmětem této bakalářské práce bylo prozkoumat aktuální stav trhu a technologií
elektronických učebnic a navrhnout platformu pro tvorbu interaktivní elektronické
učebnice.
V teoretické části byly popsány historické a současné souvislosti mezi různými technologiemi a přístupy k tvorbě elektronických knih a učebnic. Dále byly popsány různé specifikace dokumentových formátů, do kterých lze obsah elektronických učebnic ukládat.
Vzhledem k tomu, že vývojář se v dnešní době pohybuje v často velmi progresivním a
nestálém prostředí, musí proto při rozhodování jakou technologii zvolit zvážit různé
aspekty a skutečnosti. Proto se první část této práce zabývá různými platformami pro
tvorbu elektronických učebnic dle jejich populárnosti.
Srovnání jednotlivých nejpoužívanějších platforem pro tvorbu, čtení a stahování knih
ukazuje, že je toto odvětví ještě velmi mladé a lze očekávat velké změny a vylepšení
směrem k přinesení bohatšího a interaktivnějšího obsahu pro uživatele. S ohledem na
zadané požadavky projektu je nejvhodnější Apple iBooks, který nabízí nejen aplikaci a
zařízení pro čtení učebnic, ale i pro tvorbu komplexních interaktivních elektronických
učebnic.
Hlavním těžištěm interaktivnosti elektronických učebnic Apple iBooks je objekt nazývaný widget. Pomocí něj lze koncovým uživatelům přinést bohatší a zajímavější obsah
než je tomu v obyčejné elektronické učebnici tvořené převážně statickým textem.
Proto byla vytvořena ukázková část učebnice s aplikovanými teoretickými poznatky.
Byly vytvořeny 3 ukázkové kapitoly učebnice a aplikovány různé typy objektů a funkcí,
které iBooks Author pro tvorbu nabízí. Dále byl na základě zadání stejného projektu
vytvořen vlastní HTML widget Codewalker pro animaci bloku kódu. Celý ukázkový projekt učebnice i s widgety byl úspěšně nasazen a otestován na dané testovací sestavě.
Příslušné zdrojové soubory projektu jsou přílohou této práce.
Touto prací bylo taktéž zjištěno, že byla vybrána vhodná technologie pro tvorbu zadaného projektu, protože bylo možné dosáhnout daných cílů zadání. Poznatky z této
ukázkové tvorby se nyní mohou použít pro reálný projekt, který bude mít za cíl kompletní dokončení učebnice a její publikování.
V rámci této bakalářské práce bylo dosaženo všech cílů a požadavků, které byly stanoveny. Její výsledky mohou přinést užitečné informace a zkušenosti dalším vývojářům
na tomto dosud nedostatečně probádaném poli.
92
8 Seznam použitých zdrojů
1. HILBERT, Martin a LOPEZ, Priscila. How to Measure the World’s Technological Capacity
to Communicate, Store, and Compute Information. International Journal of
Communication. 2012, Sv. 6, stránky 956–979.
2. WISCHENBART, Rüdiger. The Global eBook Report. [Online] 2014.
http://www.wischenbart.com/upload/1234000000358_04042014_final.pdf.
3. SAPER, Craig. The Readies, by Bob Brown. OpenStax-CNX. [Online] 21. Říjen 2009.
[Citace: 19. Květen 2014.] http://cnx.org/content/m31518/1.2/.
4. Ángela Ruiz Robles. en.wikipedia.org. [Online] [Citace: 19. Květen 2014.]
http://en.wikipedia.org/wiki/%C3%81ngela_Ruiz_Robles.
5. Nicole Yankelovich, Norman Meyrowitz, and Andries van Dam. Reading and Writing
the Electronic Book. IEEE Computer. 18, Říjen 1985, 10, stránky 15-30.
6. About Adobe PDF. Adobe.com. [Online] Adobe Systems Incorporated. [Citace: 19.
Květen 2014.] http://www.adobe.com/products/acrobat/adobepdf.html.
7. Library Project. Google Books. [Online] Google, Inc. [Citace: 19. Květen 2014.]
http://books.google.com/googlebooks/library/.
8. Günter Mühlberger, Silvia Gstrein. eBooks on Demand (EOD): a European digitization
service. IFLA Journal. 35, 2009, 1, stránky 35-43.
9. Wikipedia contributors. E-book. [Online] Wikipedia, The Free Encyclopedia., 8.
prosinec 2014. [Citace: 8. prosinec 2014.]
http://en.wikipedia.org/w/index.php?title=E-book&oldid=637210578.
10. Text encoding. en.wikipedia.org. [Online] [Citace: 20. Květen 2014.]
http://en.wikipedia.org/wiki/Text_encoding.
11. BURKE, Sean M. RTF Pocket Guide. místo neznámé : O'Reilly, 2010. ISBN: 0-59600475-3.
12. Microsoft Support. WD: Rich Text Format (RTF) Specification 1.7. [Online] Microsoft
Corporation, 16. listopad 2006. [Citace: 4. prosinec 2014.]
http://support.microsoft.com/kb/86999/.
13. Wikipedia contributors. Rich text format. en.wikipedia.org. [Online] 28. listopad 2014.
[Citace: 29. listopad 2014.]
http://en.wikipedia.org/w/index.php?title=Rich_Text_Format&oldid=610879721.
14. Doc (computing). en.wikipedia.org. [Online] 27. září 2014. [Citace: 20. listopad 2014.]
http://en.wikipedia.org/w/index.php?title=Doc_(computing)&oldid=627243644.
93
15. BUCKI, Lisa A. Microsoft Word 2013 Bible. Indianapolis : John Wiley & Sons, 2013.
stránky 69-75. ISBN: 978-1-118-48812-6.
16. Wikipedia contributors. Document file format. [Online] Wikipedia, The Free
Encyclopedia., 13. listopad 2014. [Citace: 15. listopad 2014.]
http://en.wikipedia.org/w/index.php?title=Document_file_format&oldid=633632411
.
17. AAMODT, David. Common Office File Formats and Extensions Explained. TopTen
Reviews. [Online] Purch, 2014. [Citace: 21. listopad 2014.] http://office-softwarereview.toptenreviews.com/home-office/common-office-file-formats-and-extensionsexplained.html.
18. MOBI contributors. Wiki - MobileRead.com. MobileRead.com. [Online] MobileRead,
6. prosinec 2014. [Citace: 6. prosinec 2014.]
http://wiki.mobileread.com/w/index.php?title=MOBI&oldid=39293.
19. JOHNSON, Duff. The 8 most popular document formats on the web. Duf Johnson:
Strategy & Communications. [Online] 17. únor 2014. [Citace: 5. prosinec 2014.]
http://duff-johnson.com/2014/02/17/the-8-most-popular-document-formats-onthe-web.
20. WHITINGTON, John. PDF Explained. Sebastopol : O’Reilly Media, Inc., 2012. stránky 112. ISBN: 978-1-449-32791-0.
21. KUO, Peter. Create Interactive PDFs Using Adobe® InDesign CS5 & CS5.5. místo
neznámé : Amazon Digital Services, Inc., 2011. ISBN: 978-1463520496.
22. Wikipedia contributors. EPUB. [Online] Wikipedia, The Free Encyclopedia., 18.
listopad 2014. [Citace: 19. listopad 2014.]
http://en.wikipedia.org/w/index.php?title=EPUB&oldid=631627300.
23. EPUB. International Digital Publishing Forum. [Online] International Digital Publishing
Forum (IDPF). [Citace: 20. Květen 2014.] http://idpf.org/epub.
24. Wikipedia contributors. Amazon Kindle. [Online] Wikipedia, The Free Encyclopedia.,
22. listopad 2014. [Citace: 25. listopad 2014.]
http://en.wikipedia.org/wiki/Amazon_Kindle.
25. Mobileread contributors. AZW. [Online] MobileRead, 31. březen 2014. [Citace: 10.
říjen 2014.] http://wiki.mobileread.com/w/index.php?title=AZW&oldid=37396.
26. Kindle Format 8. Amazon.com. [Online] Amazon.com, Inc. [Citace: 10. říjen 2014.]
http://www.amazon.com/gp/feature.html?docId=1000729511.
94
27. Amazon.com, Inc. Amazon Kindle Publishing Guidelines. [Online] 2014.3,
Amazon.com, Inc., 2014. [Citace: 5. prosinec 2014.]
http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf.
28. Wikipedia contributors. iBooks. [Online] 14. listopad 2014. [Citace: listopad. 26 2014.]
http://en.wikipedia.org/w/index.php?title=IBooks&oldid=633831885.
29. iBooks Author. Mac Apps Support. [Online] [Citace: 20. Květen 2014.]
http://www.apple.com/support/mac-apps/ibooksauthor/.
30. GALLAGHER, Kelly. Global eBook Monitor. Bowkere Research. [online]. 20. březen
2012. stránky slide 23-25.
31. Kindle History. My Digital Defense. [Online] 2011. [Citace: 25. listopad 2014.]
http://www.mydigitaldefense.com/tag/kindle-history.
32. Amazon.com. Amazon.com. [Online] Amazon.com, Inc., 30. listopad 2014. [Citace: 30.
listopad 2014.] Vlastní fazetové vyhledávání v oddělení knih.
http://www.amazon.com.
33. Harper, Sandy. EBook Publishing & Marketing Guide. Fremont : Elite Publishing, 2012.
ISBN: 978-1468107357.
34. Comparison fo e-book formats. en.wikipedia.org. [Online] [Citace: 21. Květen 2014.]
http://en.wikipedia.org/wiki/Comparison_of_e-book_formats.
35. WOODS, Alan. How To Write A Book & Sell It On Amazon: Write A Book Today & Earn
Income For A Lifetime. místo neznámé : Amazon Digital Services, Inc., 2014. ASIN:
B00OOZ2WBW.
36. iBooks. Apple.com. [Online] 2014. [Citace: 4. září 2014.]
http://www.apple.com/ibooks/.
37. BIERSDORFER, J. D. iPad: The Missing Manual, Fifth Edition. Sebastopol : O’Reilly
Media, Inc., 2013. ISBN: 978-1-449-32556-5.
38. An overview of textbooks as open educational resources. RAILEAN, Elena. Moldova :
IJCSRA, 2013, Sv. 3. ISSN: 2012-9572.
39. Service & Support. Official Apple Support. [Online] Apple, Inc. [Citace: 11. listopad
2014.] http://www.support.apple.com.
40. Apple Expands Worldwide Access to Educational Content. Apple Press Info. [Online]
21. Leden 2014. [Citace: 25. Květen 2014.]
http://www.apple.com/pr/library/2014/01/21Apple-Expands-Worldwide-Access-toEducational-Content.html.
41. Apple and Education. Apple.com. [Online] Apple Inc., 2014. [Citace: 27. květen 2014.]
https://www.apple.com/education/.
95
42. Langer, Maria. iBooks Author: Publishing Your First Ebook. Wickenburg : Flying M
Productions, 2012. ISBN: 978-1-886637-07-8.
43. McKesson, Nellie a Witwer, Adam. Publishing with iBooks Author. Sebastopol :
O’Reilly Media, Inc., 2012. ISBN: 978-1-449-32978-5.
44. Books. Google Play Help. [Online] Google Inc., 2014. [Citace: 30. listopad 2014.]
https://support.google.com/googleplay.
45. Google Partner Program. Google Play. [Online] Google Inc., 2014. [Citace: 30. listopad
2014.] http://play.google.com/books/publish.
46. Wikipedia contributors. Android (operating system). [Online] Wikipedia, The Free
Encyclopedia., 7. prosinec 2014. [Citace: 7. prosinec 2014.]
http://en.wikipedia.org/w/index.php?title=Android_(operating_system)&oldid=6370
39222.
47. Digital Editions Supported Devices. Adobe Digital Publishing. [Online] Adobe Inc.
[Citace: 2. prosinec 2014.] http://blogs.adobe.com/digitalpublishing/supporteddevices.
48. Google eBooks Help. Chnaging Hands Bookstore. [Online] [Citace: prosinec. 4 2014.]
http://www.changinghands.com/page/google-ebooks-help.
49. Celebrating Google Play’s first birthday. Google: Official Blog. [Online] Google Inc., 6.
březen 2013. [Citace: 20. listopad 2014.]
http://googleblog.blogspot.cz/2013/03/celebrating-google-plays-first-birthday.html.
50. Wikipedia contributors. Google Play. [Online] Wikipedia, The Free Encyclopedia., 3.
http://en.wikipedia.org/w/index.php?title=Google_Play&oldid=636505822.
51. LOTON, Tony. The Self-Publishing Guru: How to Take Your Book (and E-Book) from
Manuscript to Market with Amazon's CreateSpace, Kindle, Kobo, Nook and Google
Play. místo neznámé : LOTONtech, 2014. ISBN: 978-0-9559893-7-7.
52. Google Play for Education. Android Developers. [Online] Google, Inc. [Citace: 20.
Květen 2014.] http://developer.android.com/distribute/googleplay/edu/about.html.
53. Adobe XML Forms Architecture (XFA). Developer Resources. [Online] Adobe Systems,
2009. [Citace: 30. říjen 2014.]
http://partners.adobe.com/public/developer/xml/index_arch.html.
54. DOSTÁL, Jiří. Instructional software and computer games - tools of modern
education. Journal of Technology and Information Education. 1, 2009, Sv. 1, 1.
96
55. Wikipedia contributors. Electronic publishing. [Online] Wikipedia, The Free
http://en.wikipedia.org/w/index.php?title=Electronic_publishing&oldid=639412522.
56. Smartphone OS Market Share, Q3 2014. IDC. [Online] IDC Corporate USA, 2014.
[Citace: 10. listopad 2014.] http://www.idc.com/prodserv/smartphone-os-marketshare.jsp.
57. STARK, Chelsea. Mashable. How iBooks Author Stacks Up to the Competition
[CHART]. [Online] Mashable, Inc., 23. Leden 2012. [Citace: 5. Listopad 2013.]
http://mashable.com/2012/01/23/ibooks-author-self-publishing-comparison.
58. iTunes U. Apple Support. [Online] Apple Inc., 2014. [Citace: 2. červen 2014.]
https://www.apple.com/support/itunes-u/.
59. Alvarez, Edgar. Apple brings iBooks and iTunes U educational tools to more than 50
new countries. Engadget.com. [Online] 21. Leden 2014. [Citace: 25. Květen 2014.]
http://www.engadget.com/2014/01/21/apple-ibooks-textbooks-itunes-u-coursemanager/.
60. Apple iTunes - Working with iTunes. Apple.com. [Online] Apple Inc. [Citace: 5.
červenec 2014.] https://www.apple.com/itunes/working-itunes/sellcontent/books/book-faq.html.
61. Gillispie, Mathew D. From Notepad to iPad. New York : Routledge, 2014. ISBN: 978-0415-73533-9.
62. Multi-touch. en.wikipedia.org. [Online] [Citace: 26. květen 2014.]
http://en.wikipedia.org/wiki/Pinch_to_zoom#Multi-touch_gestures.
63. iBooks Author: About HTML widget creation. Official Apple Support. [Online] Apple
Inc. [Citace: 2014. červenec 20.] http://support.apple.com/kb/ht5068.
64. RITCHIE, Rene. Widgets in iOS 8: Explained. iMore. [Online] Mobile Nations, 30.
červen 2014. [Citace: 2014. červenec 10.] http://www.imore.com/widgets-ios-8explained.
65. SKINNER, Jon. SublimeText. [Online] [Citace: 22. červen 2013.]
http://www.sublimetext.com.
66. PILGRIM, Mark. HTML5: Up and Running. Sebastopol : O’Reilly Media, Inc., 2010.
ISBN: 978-0-596-80602-6.
67. Wikipedia contributors. HTML5. [Online] Wikipedia, The Free Encyclopedia., 19.
http://en.wikipedia.org/w/index.php?title=HTML5&oldid=638773046.
97
68. HTML5. [Online] W3C, 28. říjen 2014. [Citace: 29. listopad 2014.]
http://www.w3.org/TR/html/.
69. POWERS, Shelley. HTML5 Media. Sebastopol : O’Reilly Media, Inc., 2011. ISBN: 978-1449-30445-4.
70. Wikipedia contributors. Cascading Style Sheets. [Online] Wikipedia, The Free
http://en.wikipedia.org/w/index.php?title=Cascading_Style_Sheets&oldid=63906285
6.
71. OLSSON, Mikael. CSS Quick Syntax Reference. New York : Apress Media, LLC, 2014.
ISBN: 978-1-4302-6491-0.
72. NIXON, Robin. Learning PHP, MySQL, JavaScript, CSS & HTML5, Third Edition.
Sebastopol : O’Reilly Media, Inc., 2014. ISBN: 978-1-491-94946-7.
73. Wikipedia contributors. JavaScript. [Online] Wikipedia, The Free Encyclopedia., 29.
http://en.wikipedia.org/w/index.php?title=JavaScript&oldid=640096498.
74. E-learning. en.wikipedia.org. [Online] [Citace: Květen. 26 2014.]
http://en.wikipedia.org/wiki/E-learning#Computers.2C_tablets_and_mobile_devices.
75. iOS 8 Preview. Apple.com. [Online] Apple, Inc. [Citace: 3. červen 2014.]
https://www.apple.com/ios/ios8/.
76. United States Patent 7844915. US Patent & Trademark Office, Patent Full Text and
Image Database. [Online] United States Patent and Trademark Office, 30. Listopad
2010. [Citace: 25. Květen 2014.] http://patft.uspto.gov/netacgi/nphParser?Sect1=PTO1&Sect2=HITOFF&d=PALL&p=1&u=%2Fnetahtml%2FPTO%2Fsrchn
um.htm&r=1&f=G&l=50&s1=7,844,915.PN.&OS=PN/7,844,915&RS=PN/7,844,915.
77. Čtečka elektornických knih. cs.wikipedia.org. [Online] [Citace: 20. Květen 2014.]
http://cs.wikipedia.org/wiki/%C4%8Cte%C4%8Dka_elektronick%C3%BDch_knih.
78. Online syndikace. Wikipedia, otevřená encyklopedie. [Online] Wikipedia Foundation,
4. duben 2013. [Citace: 7. květen 2014.]
http://cs.wikipedia.org/wiki/Online_syndikace.
79. BAIG C., Edward a Bob LEVITUS. iPad For Dummies. River St. Hoboken : John Wiley &
Sons, 2012. ISBN-13: 9781118723067.
80. Postup vytvoření obsahu. Podpora Office. [Online] Microsoft Corporation. [Citace: 28.
červen 2014.] http://office.microsoft.com/cs-cz/word-help.
81. BREŇOVÁ, Lubomíra, HÁJEK, Petr, ČADIL. Jan. Mikroekonomie. Praha : Unicorn
College s.r.o., 2013.
98
82. Keynote. Mac Apps Support. [Online] Apple Inc. [Citace: 10. červen 2014.]
https://www.apple.com/support/mac-apps/keynote/.
83. Drag and Drop. Wikipedie. [Online] 12. červen 2014. [Citace: 21. červen 2014.]
http://en.wikipedia.org/wiki/Drag_and_drop.
84. Schiller, Phil. Apple Keynote. Výstup prezentace. [online]. New York’s Guggenheim
Museum : autor neznámý, 2012.
85. GENUTH, Iddo. The Future of Electronic Paper. TheFutureofThings. [Online] 15. říjen
2007. [Citace: 5. listopad 2014.] http://thefutureofthings.com/3081-the-future-ofelectronic-paper/.
86. LEGER, Bernd. iPhone 5c Narrowing 5s’ Lead and What to Expect From Apple’s 10/22
iPad Launch. Localytics Blog. [Online] Localytics, 21. říjen 2013. [Citace: 14. červen
2014.] http://www.localytics.com/blog/2013/iphone-5c-catching-up-apple-ipadlaunch/.
87. Kindle Education. Amazon.com. [Online] 2014. [Citace: 21. Květen 2014.]
http://www.amazon.com/gp/feature.html?docId=1000412651.
88. ROSENBLATT, Bill, TRIPPE, Bill a MOONEY, Stephen. Digital Rights Management:
Business and Technology. New York : M&T Press, 2001. Sv. 1. edice. ISBN: 9780764548895.
89. Wikipedia contributors. Learning Management System. [Online] Wikipedia, The Free
Encyclopedia., 26. listopad 2014. [Citace: 26. listopad 2014.]
http://en.wikipedia.org/w/index.php?title=Learning_management_system&oldid=63
5478628.
90. W3C Wiki contributors. W3C History. HTML WG Wiki. [Online] W3C, 16. červen 2014.
[Citace: 3. prosinec 2014.]
http://www.w3.org/html/wg/wiki/index.php?title=History&oldid=14114.
91. WEYL, Estelle. Mobile HTML5. Sebastopol : O’Reilly Media, Inc., 2013. ISBN: 978-1449-31141-4.
92. CATLIN, Hampton, WEIZENBAUM, Natalie a EPPSTEIN, Chris and contributors.
Documentation. Sass: Syntactically Awesome Style Sheets. [Online] Sass. [Citace: 25.
červen 2013.] http://sass-lang.com/.
93. Wikipedia contributors. Cross-platform. [Online] Wikipedia, The Free Encyclopedia.,
17. červenec 2014. [Citace: 3. srpen 2014.]
http://en.wikipedia.org/w/index.php?title=Cross-platform&oldid=626986968.
94. Amazon´s Kindle Direct Publishing. Publish on Amazon Kindle with Kindle Direct
Publishing. místo neznámé : Amazon Digital Services, Inc., 2011. ASIN: B004LX069M.
99
9 Seznam obrázků
Obrázek 1: Světový vývoj kapacity analogově či digitálně uloženého obsahu od roku
1986 do roku 2007. ...................................................................................................... 10
Obrázek 2: Angela Ruiz Robles se svou publikací „Mechanical Encyclopedia". ........... 16
Obrázek 3: Rozložení jednotlivých ovládacích prvků projektu učebnice vytvořené
v iBooks Author. ........................................................................................................... 43
Obrázek 4: Vložení předpřipraveného widgetu v iBooks Author do projektu
elektronické učebnice .................................................................................................. 51
Obrázek 5: Výstup definovaných HTML a CSS dokumentů v prohlížeči....................... 61
Obrázek 6: Struktura obsahu ukázkové části učebnice programování. ....................... 64
Obrázek 7: Návrh obrazovky (vlevo) a návrh učebnice z iBooks Author. .................... 66
Obrázek 8: Ukázka formátování textu ve výřezu ukázky učebnice programování. ..... 67
Obrázek 9: Ukázka vloženého obrázku s obtékáním textu, widgetu Vyskakovací překryv
a panelu Inspektor v otevřeném projektu tvorby učebnice programování iBooks
Author. ......................................................................................................................... 68
Obrázek 10: Ukázka vložení a nastavení widgetu v panelu Inspektor v iBooks Author.
...................................................................................................................................... 69
Obrázek 11: Návrh průběhu aktivit po spuštění vlastního widgetu Codewalker (Activity
Flow diagram). ............................................................................................................. 72
Obrázek 12: Návrh uživatelského rozhraní po spuštění vlastního widgetu Codewalker.
...................................................................................................................................... 73
Obrázek 13: Náhledová obrázek widgetu Codewalker Default.png. ........................... 75
Obrázek 14: Struktura složek a souborů widgetu před převodem do WDGT formátu pro
iBooks. .......................................................................................................................... 76
Obrázek 15: Náhled uživatelského prostředí pro widget Codewalker. ....................... 82
Obrázek 16: Test nasazení widgetu v prohlížeči Firefox. ............................................. 85
Obrázek 17: Test nasazení widgetu v aplikaci Dashboard. .......................................... 86
Obrázek 18: Test nasazení widgetu v aplikaci iBooks. ................................................. 87
Obrázek 19: Test nasazení ukázky učebnice programování v aplikaci iBooks na iPad. 90
100
10 Seznam tabulek
Tabulka 1: Porovnání 3 výrobců s globálně největším podílem na trhu a jejich platforem
pro elektronické knihy a učebnice. .............................................................................. 39
Tabulka 2: Podpora HTML5 audia a videa populárními prohlížeči a mobilními OS. .... 57
Tabulka 3: Otestované operační systémy a aplikace pro podporu widgetu Codewalker.
...................................................................................................................................... 88
101
11 Seznam grafů
Graf 1: Celosvětové dodávky tabletů od 2. kvartálu 2010 do 1. kvartálu 2014 (v mil.)
...................................................................................................................................... 11
Graf 2: Odhadovaný tržní podíl publikací a zábavního trhu pro rok 2013 (2).............. 15
Graf 3: Globální podíl na trhu e-booků v 10 vybraných zemích světa dle prodejce (USA,
Velká Británie, Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a
Francie) (29) ................................................................................................................. 27
Graf 4: Podíl na trhu e-book pouze v USA dle prodejce. (29) ...................................... 27
102
12 Seznam příloh
Příloha A
Příloha 1: Sekce knih v obchodě iTunes po přístupu z aplikace iBooks. .................... 104
Příloha 2: Vytvoření nového projektu v iBooks Author nebo otevření již
rozpracovaného projektu. .......................................................................................... 105
Příloha 3: Výběr widgetu pro vložení do projektu elektronické učebnice v iBooks
Author. ....................................................................................................................... 106
Příloha 4: Nastavení widgetu Test pomocí bočního panelu Inspector. ..................... 107
Příloha 5: Zobrazení Keynote prezentace na celou obrazovku zařízení z widgetu
umístěného přímo v textu učebnice. ......................................................................... 108
Příloha 6: Ukázka interaktivního obrázku s popisky při rozšíření na celou obrazovku
zařízení. ...................................................................................................................... 109
Příloha 7: Widget vložený zarovnaný doprava od statického textu, díky kterému lze
dotyky prstů po obrazovce otáčet 3D model molekul kolem vertikální nebo horizontální
osy. ............................................................................................................................. 110
Příloha 8: Přechod z jedno obrázku (vlevo) na další obrázek (vpravo) pomocí tahu
prstem ve widgetu Galerie obrázků. .......................................................................... 111
Příloha 9: Pravý postranní panel lze dotykem a tažením prstu dolů či nahoru posouvat,
aniž by čtenář opustil aktuální stránku. ..................................................................... 112
Příloha 10: Widget Vyskakovací překryv (Popover) s popiskem. ............................... 113
Příloha 11: Widget Media s názornou ukázkou video přednášky. ............................. 114
Příloha 12: Odpovědi na otázky ve widgetu Test (Chapter review) mohou mít i grafickou
podobu přiřazování daných obrázků k daným místům na obrázku či mapě. ............ 115
Příloha 13: Obsah widgetu vytvořeného individuálně v HTML zobrazující interaktivní
model hmyzu, který po tapnutí na danou část modelu označí správný popisek a obrázek
výše. ........................................................................................................................... 116
Příloha 14: Ukázka nastaveného widgetu test se 4 otázkami a 1 správnou odpovědí.
.................................................................................................................................... 117
Příloha 15: Výběr zařízení pro nasazení pomocí funkce Náhled. ............................... 118
Příloha 16: Převod složky se zdrojovými soubory do formátu WDGT. ...................... 119
Příloha 17: Vytvořený vlastní widget ve formátu WDGT. .......................................... 120
Příloha 18: Náhled widgetu Codewalker v mobilní aplikaci iBooks na iPad. ............. 121
Příloha B: Obsah přiloženého CD: Přiložené CD
103
Příloha A
Příloha 1: Knihy v iTunes
Příloha 1: Sekce knih v obchodě iTunes po přístupu z aplikace iBooks.
104
Příloha 2: Vytvoření nového projektu
Příloha 2: Vytvoření nového projektu v iBooks Author nebo otevření již rozpracovaného projektu.
105
Příloha 3: Výběr widgetu
Příloha 3: Výběr widgetu pro vložení do projektu elektronické učebnice v iBooks Author.
106
Příloha 4: Nastavení widgetu
Příloha 4: Nastavení widgetu Test pomocí bočního panelu Inspector.
107
Příloha 5: Widget Keynote prezentace
Příloha 5: Zobrazení Keynote prezentace na celou obrazovku zařízení z widgetu umístěného přímo v
textu učebnice.
Zdroj: (36)
108
Příloha 6: Widget interaktivní obrázek
Příloha 6: Ukázka interaktivního obrázku s popisky při rozšíření na celou obrazovku zařízení.
Zdroj: (36)
109
Příloha 7: Widget 3D modelu molekul
Příloha 7: Widget vložený zarovnaný doprava od statického textu, díky kterému lze dotyky prstů po
obrazovce otáčet 3D model molekul kolem vertikální nebo horizontální osy.
Zdroj: (36)
110
Příloha 8: Widget Galerie
Příloha 8: Přechod z jedno obrázku (vlevo) na další obrázek (vpravo) pomocí tahu prstem ve widgetu
Galerie obrázků.
Zdroj: (36)
111
Příloha 9: Widget Posuvný boční panel
Příloha 9: Pravý postranní panel lze dotykem a tažením prstu dolů či nahoru posouvat, aniž by čtenář
opustil aktuální stránku.
Zdroj: (36)
112
Příloha 10: Widget Vyskakovací překryv (Popover)
Příloha 10: Widget Vyskakovací překryv (Popover) s popiskem.
Zdroj: (36)
113
Příloha 11: Widget Media
Příloha 11: Widget Media s názornou ukázkou video přednášky.
Zdroj: (36)
114
Příloha 12: Widget Test (Chapter review)
Příloha 12: Odpovědi na otázky ve widgetu Test (Chapter review) mohou mít i grafickou podobu přiřazování daných obrázků k daným místům na obrázku či mapě.
Zdroj: (36)
115
Příloha 13: HTML5 widget
Příloha 13: Obsah widgetu vytvořeného individuálně v HTML zobrazující interaktivní model hmyzu,
který po tapnutí na danou část modelu označí správný popisek a obrázek výše.
Zdroj: (36)
116
Příloha 14: Nastavený widget Test
Příloha 14: Ukázka nastaveného widgetu test se 4 otázkami a 1 správnou odpovědí.
117
Příloha 15: Výběr zařízení pro deployment
Příloha 15: Výběr zařízení pro nasazení pomocí funkce Náhled.
118
Příloha 16: Převod složky do WDGT
Příloha 16: Převod složky se zdrojovými soubory do formátu WDGT.
119
Příloha 17: Vytvořený vlastní widget ve formátu WDGT
Příloha 17: Vytvořený vlastní widget ve formátu WDGT.
120
Příloha 18: Náhled widgetu Codewalker
Příloha 18: Náhled widgetu Codewalker v mobilní aplikaci iBooks na iPad.
121
Příloha B: Obsah přiloženého CD
Obsah CD je organizován do následujících složek:

Bakalářská práce – Obsahuje samotnou bakalářskou práci

Učebnice iBooks – obsahuje soubor s ukázkou učebnice pro projekt tvorby
učebnice programování s aplikovanými prvky z iBooks Author ve formátu IBA.

Widget Codewalker – obsahuje vytvořený HTML5 widget ve formátu WDGT.
122

Tvorba elektronické učebnice programování s

Transkript

Podobné dokumenty

2.8. ()

Úvod do překladu krásné literatury

Tematické okruhy ke státní jazykové zkoušce základní z

XI XII IV VI II I IX VII V X VIII III