Tvorba elektronické učebnice programování s
Transkript
Tvorba elektronické učebnice programování s
UNICORN COLLEGE Katedra informačních technologií BAKALÁŘSKÁ PRÁCE Tvorba elektronické učebnice programování s interaktivními prvky Autor BP: Patrik Vlnas Vedoucí BP: Mgr. Peter Buchlák 2015 Praha Zadání Čestné prohlášení Prohlašuji, že jsem svou bakalářskou práci na téma Tvorba elektronické́ učebnice programování s interaktivními prvky vypracoval samostatně pod vedením vedoucího bakalářské práce a s použitím výhradně odborné literatury a dalších informační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 jejím vytvořením jsem neporušil autorská práva třetích osob a jsem si plně vědom následků porušení ustanovení § 11 a následujících autorského zákona č. 121/2000 Sb. V Praze dne ……………..…….. ….……………………………….. Patrik Vlnas Poděkování Děkuji vedoucímu bakalářské práce Mgr. Petru Buchlákovi za účinnou odbornou pomoc, věcný přístup a velmi cenné rady pro zpracování té bakalářské práce. Tvorba elektronické učebnice programování s interaktivními prvky The electronic book implementation with interactive elements 5 Abstrakt Bakalářská práce pojednává o elektronických učebnicích, které jsou v poslední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 mobilní zařízení, tak i samotným vývojem ukázky elektronické učebnice. Cílem této práce je porovnat možnosti vývoje elektronické učebnice a vybrat z nich nejvhodnější pro zpracování zadaného projektu. Vybraná technologie je v práci blíže popsána a následně je pomocí ní vytvořena ukázka elektronické knihy včetně interaktivních prvků, která je přílohou této bakalářské práce. Klíč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ání projektu na tvorbu elektronické učebnice programování 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 Vlastní srovnání platforem pro elektronické učebnice 5 19 Vybraná technologie 38 42 Apple iBooks 42 a) Ovládací prvky 42 b) Obchod iTunes 44 7 iBooks Author 45 a) Prostředí 45 b) Nový projekt 45 c) Přidávání a formátování textu 46 d) Přidávání a formátování obrázků 46 e) Práce s objekty 46 f) Přidávání tvarů, tabulek a grafů 47 g) Interaktivní prvky 47 h) Publikace knihy 47 Widget 6 48 a) Specifikace 49 b) Formátování 49 c) Vlastnosti 50 d) Předpřipravené widgety 50 e) Widgety třetí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) Vlastní HTML widget 70 8 Nasazení učebnice 89 Shrnutí 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říloh 103 Příloha A 104 Příloha 1: Knihy v iTunes 104 Příloha 2: Vytvoření nového projektu 105 Příloha 3: Výběr widgetu 106 Příloha 4: Nastavení widgetu 107 Příloha 5: Widget Keynote prezentace 108 Příloha 6: Widget interaktivní obrázek 109 Příloha 7: Widget 3D modelu molekul 110 Příloha 8: Widget Galerie 111 Příloha 9: Widget Posuvný boční panel 112 Příloha 10: Widget Vyskakovací překryv (Popover) 113 Příloha 11: Widget Media 114 Příloha 12: Widget Test (Chapter review) 115 Příloha 13: HTML5 widget 116 Příloha 14: Nastavený widget Test 117 Příloha 15: Výběr zařízení pro deployment 118 Příloha 16: Převod složky do WDGT 119 Příloha 17: Vytvořený vlastní widget ve formátu WDGT 120 Příloha 18: Náhled widgetu Codewalker 121 Pří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řízeními schopnými zobrazovat digitální text na obrazovkách mobilních zařízeních, jako jsou: čtečky, chytré mobilní telefony, tablety, přenosné počítače a jiné. To byl také následek předchozího technologického vývoje osobních počítačů, zvyšování výkonu procesorů, zvětšování kapacity disků pro ukládání digitálního obsahu, nárůstu přenosové kapacity sítí a zlevňování těchto technologií pro koncové uživatele, který svět zaznamenal od roku 2000. Za posledních 20 let se tak digitální obsah zvětšil mnohonásobně jak oproti analogovému tak i sám oproti sobě. (1) Obrázek 1: Světový vývoj kapacity analogově či digitálně uložené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 více druhů: TXT, PDF, DOC a podobné. Vývoj oblasti přenosných zařízení v posledních letech naznačil, že lze uživateli nabídnout daleko větší a bohatší interaktivnost v oblasti výukových materiálů a vzdělávacích textů. Bylo vyvinuto mnoho software pro přenesení výuky do elektronického prostředí, například audio učebnice, výukové aplikace, multimediální prezentace, interaktivní tabule či různé podpůrné aplikace pro výzkum. Současně s tím přišla i řada výrobců software i hardware s vlastním řešením elektronických učebnic, které nenabízí ke čtení pouze text, ale i obrázky, tabulky, grafy, testy, videa, online syndikace1, apod. Mobilní tablety (např. Apple iPad, Samsung Galaxy Tab nebo Kindle Fire)2 se masivně rozšiřují mezi široké spektrum veřejnosti a proto nabídnutí možnosti použí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řízení pro elektronické učebnice, při bližším průzkumu je nutné identifikovat rozdíly a hranice technologií, jež je v konkurenčním boji rozlišují. Graf 1: Celosvětové dodávky tabletů od 2. kvartálu 2010 do 1. kvartá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žívání multimediálních prvků při studiu si uvědomují i stěžejní vzdělávací instituce jako jsou školy, knihovny, univerzity apod. Soukromá vy- 1 Online syndikace - opětovné dodávání aktuálních informací, které obsahuje internet (weby, portály, blogy, atd.). (78) 2 Modely jsou zde seřazeny dle podílu na trhu v jakýchkoliv generačních verzích dohromady. 11 soká škola Unicorn College se právě s tímto vědomím rozhodla již od doby svého založení v roce 2007 podporovat výuku webovým informačním systémem, online výukovými materiály, projektory, později i iPady a Apple TV. Zároveň byl formou mimoškolního projektu zadán části studentů a spolupracovníků na Unicorn College projekt na tvorbu elektronické učebnice programování. Tato učebnice měla být součástí výuky předmětu PES – Základy objektově orientovaného programování, který je povinný pro všechny studenty oboru IT a ICT v 1. ročníku. Zadáním bylo nejen převést aktuálně dostupné materiály přístupné z informačního systému školy do formátu elektronické učebnice. Bylo požadováno použít v učebnici co nejvíce multimediálních a interaktivních prvků, nabídnout učebnici bezplatně ke stažení na jednom z veřejných elektronických obchodů knih a učebnic (Amazon, iTunes, Play Books apod.) pro všechny (i mimoškolní) uživatele a využít potenciálu mobilních zařízení – ať už na škole používaných Apple iPad či osobních tabletech, laptopech a chytrých telefonů studentů, vyučujících aj. Tato práce se proto bude zabývat právě mapováním trhu technologií použitelných pro elektronické učebnice. Bude provedeno srovnání těchto nejvýznamnějších subjektů na trhu pro publikaci elektronických knih a jejich konkrétními specifikacemi. Budou porovnány pro potřeby zadaného projektu na tvorbu elektronické učebnice programování 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 její tvorba bude zdokumentována v dalších částech této práce. Vlastní zkušenosti při vývoji elektronické učebnice ukázaly, že pokud existují kvalitní 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ákladní znalosti sazby a formátování textu, může vlastnoručně vytvořit elektronickou učebnici včetně interaktivních prvků s minimálními časovými i finančními náklady. Vzhledem k tomu, že je toto téma zatím velmi nové a celosvětový vývoj v tomto odvětví velmi krátký, nebylo zatí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šími prameny jsou oficiálně tištěné a online dokumentace software či webových služeb. Dále učebnice a publikace zabývající se digitalizací textů, učebnic a teorií výuky z elektronických učebnic. Nakonec mé zdroje tvoří také odborné a populárně naučné články z elektronických zdrojů, přednášky, prezentace, výstupy výzkumů a prohlášení výrobců k dané problematice. 12 Vzhledem k nedostatku vydaných odborných prací, teoretických informací, ucelenějších srovnáních nebo průvodců tvorbou elektronických učebnic má tato práce za cíl, kromě konkrétního řešení pro specifický projekt, tyto nedostatky napravit a doplnit o informace nabyté vlastním zkoumáním a tvorbou učebnice pro praktický projekt. Snahou bude uvádět nezkreslené, znovupoužitelné a univerzální informace, které mohou být vhodným materiálem a průvodcem pro proces vývoje interaktivní elektronické učebnice. 13 1.1 Použité pojmy Android – mobilní operační systém od společnosti Google. Apple OS X – operační systém pro počítače Macintosho od společnosti Apple. CSS – jazyk pro popis a zobrazení elementů dokumentů psaných v HTML. Čtečka – hardwarové zařízení nebo software umožňující číst elektronické knihy. Digitalizace – digitalizace původně analogového obsahu do digitálních formátů uložená na digitálních nosičích. Elektronická učebnice – učebnice v elektronickém formátu přizpůsobená pro čtení a ovládání na elektronických čtečkách či jiných zařízeních umožňující číst elektronické učebnice. E-book – zkratka pro označení „elektronická kniha“. Elektronická kniha – kniha v elektronickém formátu přizpůsobená pro čtení na elektronických čtečkách či jiných zařízeních umožňujících číst elektronické knihy apod. Google Play – online obchod digitálního obsahu od společnosti Google. HTML5 – verze specifikace značkovacího jazyka HyperText Markup Language pro tvorbu WWW stránek, která dovoluje kromě jiného vkládání multimediálního obsahu přímo do prohlížeče nebo tvorbu aplikací bez připojení k internetu. IBA – formát pro ukládání 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 čtení elektronických knih a učebnic. iOS – mobilní operační systém od společnosti Apple. iPad – multimediální počítač typu tablet od společnosti Apple. JavaScript – interpretovaný programovací jazyk, nejčastěji používaný pro WWW. Tapnutí – gesto či pohyb, který je způsoben dotykem prstu či jiné části horní končetiny o dotykovou obrazovku počítače, tabletu, mobilního telefonu či jiného dotykové zařízení. Tablet – typ přenosného počítače s integrovanou dotykovou obrazovkou Widget - ovládací grafický prvek, který slouží pro interakci mezi programem a uživatelem. V Apple iBooks HTML5 aplikace, která poskytuje daný interaktivní obsah. Windows Phone – mobilní operační systém od společnosti Microsoft. Windows Store - online obchod digitálního obsahu od společnosti Microsoft. 14 Teoretická část 2 Elektronické knihy a učebnice Elektronické učebnice spolu s formátem elektronických knih zaznamenávají v poslední době velký vývoj, velkou oblibu v používání, růst tržeb na trhu knih a vzdělání, změnu lidí a institucí v přístupu k moderním technologiím a docela dost možná začátek revoluce ve vzdělávání. Doba digitalizace tištěných médií a nástup nových mobilních platforem a zařízení zcela jasně pomohla tomuto segmentu vzniknout. Segment dál roste a spolu s digitální hudbou, digitálními videi a filmy se stává čím dál tím zajímavějším nejen pro uživatele, ale i pro velké firmy a výrobce digitálních technologií, kteří mají zájem tento segment ovládnout či do něj alespoň zasáhnout a získat v něm podíl. Graf 2: Odhadovaný tržní podíl publikací a zábavního trhu pro rok 2013 (2) Prodej $50 $151 $63 $107 $133 Knihy (různé typy publikací) Filmy a zábava Časopisy Hry Ostatní Zdroj: http://www.wischenbart.com/upload/1234000000358_04042014_final.pdf, (2013) 2.1 Historie Jakkoliv se může zdát vývoj posledních let v odvětví elektronických knih závratný, pojmy jako digitalizace, elektronická učebnice nebo e-book nejsou zdaleka jen ze století 21., ale objevují se již počátkem 30. let 20. století. Ve svém manifestu The Readies americký spisovatel Bob Brown popisuje zařízení, které by čtenáři umožňovalo číst mi- 15 niaturizovaný text zobrazující se za sklem, připomínajícím lupu, rychlostí kontrolovanou čtenářem, upravitelnou velikostí písma, bez potřeby papíru a kácení stromů. Sám si již v roce 1930, spolu s rozvojem rozhlasu, nástupem kinofilmu a bezdrátových vysílaček, uvědomuje potřebu číst rychleji a efektivněji s čím dál tím více se zrychlující se dobou. Uvádí 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) Zajímavý je také další málo známý fakt, že se ve frankistickém Španělsku v roce 1949 podařilo zdejší učitelce Ángele Ruiz Robles sestrojit pravděpodobně první elektronickou učebnici na světě, nazvanou „Mechanical Encyclopedia“ (4). Podstatou byla kovová schránka připomínající tvar knihy, která šla rozevří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ání textu, zastavit text, část textu přiblížit mechanicky ovládanou lupou. Roblesová po uveřejnění svého patentu sama uvedla, že její hlavní motivací bylo lépe zpřístupnit čtení psaného textu a omezit množství a tíhu knih, které musí její žáci do školy nosit. (4) Obrá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 termí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 pomocí mainframe počítačů IBM vytvořit dynamickou strukturu a objektové formátování 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říků, indexů, kříž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ření elektronické knihy, stejně jako dnes nakonec pomohl nástup a rozvoj nových technologií v oblasti osobních počítačů. Na začátku 90. let 20. století to byl nástup formátu PDF společnosti Adobe a nakonec i dalších elektronických dokumentových formátů, které blíže popíši v další části práce. Byl to však právě formát PDF, který vnesl nový způsob uvažování 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 osobních počítačů a internetu i posílat a sdílet. (6) Díky mnoha projektům velkých firem a institucí začalo nabývat slovo „digitalizace“ počátkem 21. století reálného obsahu. Za zmínku jistě stojí 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 dílny Evropské komise v rámci programu Kultura 2007 – 2013 „eBooks on Demand - A European Library Network“, který si klade za cí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é zmínit také Open eBook z roku 1990 postavený na technologii kódovacího jazyka XHTML spolu s CSS pro zobrazování textu a XML pro strukturování textu. Do projektu přispěla řada velkých firem, včetně Googlu, nicméně do dnešních dob se zachovala spíše už jen jeho náhrada, formát EPUB. (8) Dle Graf 3: Globální podíl na trhu e-booků v 10 vybraných zemích světa dle prodejce (USA, Velká Británie, Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a Francie) uvedeného později ve srovnání platforem na straně 26 vyplývá, že v současné době zaujímají největší podí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 obchodní názvy společností, služeb, názvů platforem či čteček elektronických knih, nikoliv dokumentových formátů, které využívají např. PDF, EPUB, TXT apod. Výrobci těchto platforem ve svých zařízeních a software podporují různé dokumentové formáty a mohou tak využívat vlastností otevřených licencí (např. EPUB rozšiřuje formáty XHTML a CSS, Play Books pak rozšiřují 17 možnosti standardu EPUB apod.). Mohou pak poskytovat integrované technologie k jejich publikování a čtení. Často tak lze spíše mluvit o aplikacích nebo službách, než o nových standardizovaných formátech. (9) 18 3 Zadání projektu na tvorbu elektronické učebnice programování Účelem zadaného projektu bylo vytvořit interaktivní elektronickou učebnici předmětu „Úvod do objektově orientovaného programování“ na vysoké škole Unicorn College. Mezi základní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žitím existujících elektronických materiálů. Použití interaktivní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žívanějších internetových obchodů s digitálním obsahem. Obecně Vysoká škola informačních technologií a managementu Unicorn College v Praze se rozhodla vytvořit učebnici programování pro jeden z předmětů vyučovaných ve škole. Již dříve byla v rámci mimoškolní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ěřením na jiný předmět. Zadavatelé projektu by rádi učebnici používali jako doplňkový studijní materiál k výuce a k aktuálně dostupným elektronickým materiálům pro studenty v rámci informačního systému školy. Učebnice by měla být veřejně dostupná na jednom z nejpoužívanějších elektronických obchodů s digitálním obsahem pro mobilní zařízení, 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čníky a interaktivní, aby případně složité pasáže mohly být názorně vysvětleny na příkladech nebo zábavnou formou. To by mělo vést i k zatraktivnění výuky programování a přilákání většího počtu zájemců k programování či studiu na vysoké škole s tímto zaměření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žností následného odkupu. Podpora více zařízení či operačních systémů bude benefitem dané technologie. 19 Technologie pro tvorbu učebnice Technologie pro tvorbu učebnice není omezená žádnými specifickými kritérii. Tvorba učebnice by ale měla být proveditelná v rámci školy a jejího aktuálního vybavení hardware: desktopy a notebooky s Windows 7 a novější, MacBooky s iOS 10.7 a novější, projektory v učebnách, Apple TV, servery s operačními systémy Linux nebo Windows Server 2008 a vyšší. K dispozici jsou standardní kancelářské aplikace a licence k vybraným programům Microsoft v rámci programu DreamSpark Premium. Další potřebné licence pro software je možné pro tento projekt zakoupit. Pro používání učebnice musí být možné používat minimálně Apple iPad. Důležité prvky učebnice Základními prvky učebnice budou text, hypertextové odkazy, obrázky, videa a ukázky zdrojového kódu daného programovacího jazyka, které jsou již nyní součástí výuky na Unicorn College a jsou dostupné online přes informační systém školy. V rámci zkvalitnění a zatraktivnění obsahu je možné přidat libovolné prvky dostupné v dané platformě pro tvorbu a čtení elektronické učebnice. Základní prvky obsahu elektronické učebnice programování: Obsah – seznam kapitol, glosář, poznámky, záložky Text – formátování, kapitoly, číslování stránek, křížové odkazy, hypertextové odkazy Média – obrázky, audio a video (např. pro využití existujících podcastů) Interaktivní prvky – kvíz či selftest (např. pro shrnutí každé kapitoly), animace zdrojového kódu – názorná vizuální simulace spuštění jednoduchého kódu (např. pro vysvětlení průběhu cyklů) Publikace učebnice Škola by ráda učebnici publikovala pro širokou veřejnost, která má zájem o programování nebo základy technického vzdělání. V rámci této učebnice by ráda prezentovala své nejlepší postupy a poznatky z výuky objektově orientovaného programování, a to za využití nejnovějších technologií z odvětví elektronických učebnic. Ráda by proto k publikaci využila jeden z nejpoužívanějších obchodů s digitálním obsahem, jež dominuje trhu. Knihu by mělo být možné distribuovat i lokálně pomocí USB flash disků či pomocí existujícího informačního systému. 20 4 Technologie pro tvorbu elektronických učebnic Tato kapitola pojednává o technologiích a nástrojích, které lze pro tvorbu a publikaci elektronických učebnic použít. Hlavním cílem této kapitoly je nabídnout ucelený pohled na technologie používané v oblasti elektronických knih a učebnic. V první části budou blíže popsány některé dokumentové formáty, které lze pro elektronické knihy používat. Dále pak budou porovnány technologické platformy 3 největších výrobců a prodejců e-booků na globálním trhu elektronického obsahu. Na základě tohoto srovnání bude vybrána technologie daného výrobce pro implementaci zadaného projektu tvorby elektronické učebnice programování a následně v další části této práce popsána tvorba v této vybrané technologii. Dokumentové formáty pro e-booky Podkapitola blíže pojednává o vlastnostech dokumentových formátů používaných ve spojitosti s elektronickými učebnicemi. Různí výrobci využívají klasické dokumentové formáty pro ukládání a prezentování 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šířenými funkcemi a různými způsoby formátování textu apod. Tato podkapitola popisuje některé z nejpoužívanějších formátů dle jeji podpory na nejprodávanějších zařízení a aplikací pro čtení elektronických knih. Data o nejpoužívanějších dokumentových formátech pro e-book byla zohledněna na základě Graf 3: Globální podíl na trhu e-booků v 10 vybraných zemích světa dle prodejce (USA, Velká Británie, Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a Francie) na straně 27 a velké tabulky srovnání e-book formátů dostupné na: http://en.wikipe- dia.org/wiki/Comparison_of_e-book_formats s ohledem na penetraci zařízení, které je podporují. a) TXT Klasický typ souboru, ve kterém jednotlivé byte, dvojice byte či jejich posloupnosti mají význam znaků dle znakové sady ASCII. Jeden byte odpovídá právě jednomu tisknutelnému znaku v této tabulce. Hlavním problémem tohoto formátu je různé kódování a zobrazování speciálních znaků. Nejčastěji se používá kódování Unicode, konkrétně 21 UTF-8. Jeho nástup lze datovat spolu s nástupem prvních počítačů a výpočetních stanic. (10) I když je tento formát jednoduchý, základní, bez větších funkcí a výhod, jeho univerzálnost a spolehlivost jej předurčila k neustálému používání nejen na poli osobních počítačů, serverů, databází, ale i jako výchozí a základní formát pro řadu čteček, aplikací pro elektronické knihy, učebnice apod. b) RTF Proprietární, platformě nezávislý formát souboru pro uložení textu, vyvinutý firmou Microsoft, který oproti formátu TXT umožňuje formátovat text. Tento formát vznikl v roce 1987 a pomocí něj lze vyměňovat textové dokumenty mezi různými textovými procesory. Zachování formátování a vzhledu dokumentu je závislé na implementované verzi formátu RTF a podpory jednotlivých vlastností formátu v jednotlivých aplikacích. Problematické může být zobrazení 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ání zobrazit i v běžném textovém editoru. (11) Díky čím dál větší integraci a spolupráci formátů kancelářské sady Microsoft Office (např. DOC) s více aplikacemi a platformami, není již RTF tolik používaným a univerzálním formátem pro zobrazování stylovaného textu. (12) Některá starší zařízení pro čtení knih jej ještě stále implementují, ale není v tomto směru žádný další vývoj. (13) c) DOC DOC je výchozím formátem pro ukládání dokumentu v kancelářském balíku Microsoft Office, především v programu Microsoft Word. Původně byl v 80. letech 20. století využíván Microsoftem jako přípona proprietárního formátu pro ukládání dokumentů v aplikaci WordPerfect. Později v 90. letech spolu s první verzí Microsoft Word byl DOC použit jako výchozí přípona ukládání dokumentů z této aplikace. (14) DOC soubory obsahují přímo v sobě kromě binárního zakódování textu také informace o formátování textu. Hlavním problémem je však částečná zpětná nekompatibilita se staršími verzemi Wordu (např. verze nižší 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ě nekompatibilní se staršími verzemi Word do tohoto roku) a uzavřenost tohoto formátu. Od roku 22 2013 je specifikace formátu DOCX (dříve DOC) částečně otevřená, ale nikoliv pro komerční použití. To znamená velmi nesnadnou implementaci a použití tohoto formátu do jiného prostředí než je Microsoft Office a její program Word. (15) Formát DOCX a jeho předchozí verze DOC je jedním z nejvíce používaných uzavřených formátů pro ukládání dokumentů, zejména v korporátní sféře, na světě. (16) I když existují konkurenční otevřené verze formátů pro ukládání dokumentů, snažící se DOC napodobit či nahradit (např.: ODT nebo OOXML), DOC má díky rozšířenosti kancelářského balíčku Microsoft Office ve firmách a poslední dobou i v domácnostech (např. díky licenci kancelářského balíčku Office 365) náskok. (17) I proto je viditelná snaha výrobců mobilních zařízení a elektronických čteček tento formát co nejlepším způsobem integrovat do svých zařízení a nabídnout jej uživatelům alespoň pro čtení. (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ózních projektů, mezi něž patří například softwarová elektronická čtečka “Mobipocket Reader“, kterou firma integrovala do řady operačních systémů, PDA a mobilních telefonů. Uživatelé tak měli například možnost již v roce 2000 číst elektronické knihy a dokumenty ve formátu MOBI na tehdejších PDA zařízeních jako Psion nebo později Palm. Tento software byl implementován i do prvních chytrých telefonů Nokia a HTC, které disponovaly první verzí mobilního operačního systému Symbian, Windows Mobile a BlueBerry ještě dávno předtím, než přišli s aplikacemi podobného typu velcí hráči dnešního trhu Apple či Google. (18) Samotná aplikace měla řadu pokročilých funkcí, jako otáčení textu, automatické posouvání textu, řazení dle kategorií. Čtenář si mohl libovolné stránky textu ukládat do záložek, vytvářet vlastní odkazy, zvýrazňovat text, psát komentáře nebo kreslit do textu. Bylo tedy možné využívat řadu funkcí, které jsou srovnatelné s dnešními aplikacemi pro elektronické knihy. Navíc se tato zařízení ovládala většinou již dotykově stylusem, takže lze hovořit o téměř přímém předchůdci dnešní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. Tím i samostatný vývoj tohoto formátu končí a dále už je spojován s produkty Kindle této firmy a to v podobě formátu AZW, který mnoho vlastností formátu MOBI využívá. (18) 23 e) PDF Firma Adobe představila formát PDF v roce 1993 a ten si spolu s formátem DOC získal mnoho příznivců a de facto jej lze brát jako standard elektronické publikační činnosti. (16) Jako dokumentový formát je dokonce na internetu nejrozšířenější. (19) Předností oproti jiným formátům je jeho standardizované neměnné zobrazení. Právě tato funkce je u PDF zásadní, 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řížové odkazy, hypertextové odkazy a jiné. Díky standardizaci a otevřenosti formátu je možné jej vytvořit a přečíst za pomoci libovolných softwarových nástrojů. (20) PDF využívá pro zobrazování jednotlivých prvků dokumentu jazyk PostScript, přidává přímo do dokumentu použité fonty a využívá komprese, což se hodí zejména pro ukládání grafických prvků či komprese kvality pro publikaci na webu. (6) Výchozím programem pro ukládání a zobrazování PDF je Adobe Acrobat, který je od společnosti Adobe k dispozici zdarma. Dále placená verze Pro umožňuje pokročilejší tvorbu a úpravy PDF (vkládání objektů, slučování a rozdělování dokumentů, převod dokumentů na text či obrázek apod. Dále s PDF pracují i programy jiných výrobců jako např. PDF-XChange, Foxit PDF, Evince a jiné. (20) Právě profesionální placené programy jako Adobe Acrobat Pro nebo Adobe InDesign umožňují tvořit tzv. interaktivní PDF (dále také Interactive PDF), který umožňuje využití interního skriptovacího jazyka pro vkládání vektorové grafiky, videa, zvuku, souborů SWF nebo formulářů. Tímto způsobem se klasický dokumentový formát PDF může obohatit o interaktivní prvky (v současné době se hojně využívá například v oblasti online marketingu). (21) Díky své popularitě a přenositelnosti je PDF formát podporován a integrován na poli výpočetní techniky napříč různými druhy software a hardware bez nutnosti doinstalovávat další podpůrný software (např. Reader ve Windows 8 a vyšší, Preview na Mac OS X 10.3 a vyšší, Chrome PDF Viewer apod.). (20) f) EPUB EPUB nahradil v roce 2007 do té doby používaný formát OPF a využívá řadu jeho specifikací. 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. Řídí se standardy organizace International Digital Publishing Forum (IDPF). Obsah dokumentu EPUB je 24 popsán pomocí XML, HTML5 a CSS tagů. Jeho velkou výhodou je právě využití těchto značkovacích jazyků, které jsou v současné době nejuniverzálnější a nejpoužívanější technologií dnešního internetu. (22) Dokument je strukturován jazykem XML a samotný text je pak zapsán s pomocí HTML značek, které formátuje do libovolného stylu jazyk CSS (což obdobně odpoví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 musí zase zpětně dekompilovat pro jeho zobrazení. (23) g) AZW AZW neboli Kindle Format 8 byl představen při příležitosti uvedení nové čtečky Kindle Fire společností Amazon na trh v roce 2011. Základem tohoto formátu je specifikace formátu MOBI, jehož licenci dříve Amazon od firmy Mobipocket SA odkoupil. (24) Používán je jak pro chráněný tak i nechráněný obsah technologií DRM. Chráněny jsou především elektronické knihy, které Amazon prodává ve svém elektronickém obchodě s digitální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řízení Amazon Kindle. Stále je ale možné používat i soubory s příponou .mobi, která je v nechráněné podobně zpětně kompatibilní a lze ji např. na zařízení Amazon Kindle používat. (25) Formát AZW (konkrétně verze AZW3) podporuje podmnožinu funkcí HTML5 a CSS3, které podporují některé tagy z těchto jazyků. (26) Díky tomu je také podporována vektorová grafika (SVG), některé pokročilé funkce formátování, vkládání obrázků, audia nebo videa. Podporována je ale jen část tagů těchto jazyků. Konkrétně o nich referuje oficiální dokumentace k publikování knih v obchodě Amazon. (27) Pro tvorbu formátu AZW existují 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é nabízí software KindleGen pro převod některých dokumentových formátů (HTML, XML, EPUB) do formátu MOBI pro desktopové počítače. Tento software funguje na bázi příkazového řádku, který vybraný vstup převede na výstup ve formátu MOBI. (25) 25 h) IBA Formát IBA je nativní formát projektů vytvořených v programu iBooks Author od firmy Apple. Platforma je uzavřená do prostředí operačního systému Apple OS X a iOS. Principem je vytvoření dokumentu ve formátu IBA, který obsahuje text, obrázky, video, grafiku a jiné interaktivní prvky nazývané widgety, které jsou zobrazitelné ke čtení pomocí aplikace iBooks. (28) Formát využívá podobně jako EPUB výhod strukturování dokumentu pomocí jazyka XML a jazyka CSS pro formátování textu. Celý systém souborů včetně mediálních a interaktivních prvků je pomocí programu iBooks Author kompilován do formátu IBA. Výhodou tohoto formátu je množství funkcí a bohatého obsahu, který do něj lze, pomocí výše uvedených nástrojů od firmy Apple, uložit. Všechny nástroje jsou navíc zdarma a volně přístupné k používání. Nevýhodou je uzavřenost prostředí Apple, které umožňuje tento formát používat pouze pomocí těchto nástrojů a není volně přenositelný na jiná zařízení či spustitelný a upravitelný na jiném typu software než desktopový operační systém Mac OS X a mobilní operační systém iOS. (29) Druhy platforem3 Pro následující popis a porovnání platforem pro publikaci elektronických knih a učebnic byly vybrány 3 největší výrobci a poskytovatelé obsahu elektronických učebnic na trhu podle jejich podílu na trhu dle studie Cambridge Information Group a její společnosti R.R. Bowker LLC, zabývající se bibliografickou a publikační činnosti, v roce 2012. 3 Platforma – obecně se v IT používá platforma pro pracovní prostředí software či hardware, např. architekturu hardware, operační systém, platformu programovacího jazyka apod. V této souvislosti se používá slovo platforma pro sadu hardware a software nástrojů pro tvorbu, publikaci či prodej elektronických knih od daného výrobce, tvořící jeden ekosystém či službu. 26 Graf 3: Globální podíl na trhu e-booků v 10 vybraných zemích světa dle prodejce (USA, Velká Británie, Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a Francie) (30) Souhrný podíl na trhu v 10 zemí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. Podíl jednotlivých výrobců je rozdělen v jiném poměru, a proto je nutné tuto statistiku do celkového porovnání tržních podílů také zahrnout. Graf 4: Podíl na trhu e-book pouze v USA dle prodejce. (30) Podí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ředí, nástroje a služby jednotlivých výrobců pro tvorbu a publikaci elektronických učebnic. Poslední bod každé podkapitoly dané platformy (Použití pro projekt tvorby učebnice programování) souhrnně popisuje vlastní subjektivní zkušenost s těmito produkty a zohledňuje jejich klady a zápory pro použití pro zadaný projekt tvorby učebnice programování. Výsledkem tohoto srovnání bude výběr nejvhodnější technologie pro zpracování projektu na základě zadaných kritérií uvedených v předchozí kapitole 3. a) Amazon Kindle Firma Amazon od roku 2007 nabízí řadu zařízení a služeb pod souhrnným názvem Kindle. Tento krok pro firmu znamenal spíše evoluci. Dosavadní globální elektronický obchod zaměřený především na knihy a učebnice firma rozšířila o elektronické čtečky a software pro čtení elektronických knih. Amazon využil potenciálu již dříve vyráběných elektronických čteček knih s inkoustovými displeji jiných výrobců, potenciálu mobilních zařízení a vývoje na poli elektronických dokumentových formátů. (31) Tyto stavební kameny spolu s již zavedeným internetový obchodem e-booků, učebnic a elektronických magazínů dokázal Amazon spojit do jednotného prodejního modelu produktu nazvaného Kindle. (24) To vše je pro uživatele dostupné pod jedním uživatelským účtem, se kterým zákazník nakupuje elektronické knihy, přenáší si je do elektronické čtečky a může tak nahradit klasický model knihkupectví – čtenář. Amazon ve svém internetovém knihkupectví nabízí přes 30 milionů tištěných knižních titulů v tištěné i elektronické podobě. (32) Ceny elektronických verzí knih jsou v obchodním modelu Amazonu nabí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) Technická specifikace Od roku 2007 Amazon uvedl již řadu modelů čtečky Kindle. Každým rokem je v nabídce novější verze předešlého modelu – často vylepšená nebo obohacená o nové funkce. Hlavními parametry čteček Kindle jsou: velikost přibližně formátu A5, inkoustový dis- 28 plej4, napájení na dobíjecí baterie, USB port, ovládání tlačítky nebo přes dotykový displej. Řada novějších modelů má již integrované technologie WI-FI či 3G. Nákupy a přenášení obsahu na zařízení tak lze provést i bezdrátově. (31) Kindle používá velkou řadu textových formátů. Především používá svůj nativní formát AZW, vyvinutý z formátu MOBI, dále pak standardní PDF, TXT a MOBI. Dále je možné číst DOC, RTF, HTML, obrázky JPG, PNG, BMP nebo zvuk MP3. Díky tomu, že Amazon poskytuje software pro převod obsahu do podporovaných dokumentových formátu, lze do zařízení přenést i vlastní obsah. Knihy, které uživatel nakoupí v obchodě Amazon, jsou většinou k dispozici ve formátu AZW. (34) Součástí ekosystému Kindle je i multiplatformní5 aplikace Kindle jak pro mobilní operační systémy Android, iOS, Windows Phone, tak i pro počítačové operační systémy Windows a Mac. Tato aplikace softwarově poskytuje možnost číst knihy zakoupené v obchodě Amazon na jakémkoliv zařízení podporující výše zmíněné operační systémy či vlastní převedené knihy v podporovaných dokumentových formátech. (24) Použití pro projekt tvorby učebnice programování Amazon nabízí ve svém obchodě elektronické učebnice ke stažení do zařízení Kindle nebo do softwarové aplikace Kindle. Vše se provádí pod jedním uživatelským účtem, ke kterému jsou následně přiřazeny nakoupené knihy či vlastní dokumenty převedené do formátu podporovaného zařízením Kindle. Po přihlášení uživatele ke svému účtu na zařízení, ze kterého hodlá ke svému obsahu na Amazonu přistupovat, lze daný materiál přenést do fyzické paměti zařízení a nezávisle na připojení používat. Většinu učebnic lze v obchodě Amazon najít v oddělení Textbooks. Po otevření knihy či učebnice se obsah zobrazí jako standardní dokument s formátovaným textem a obrázky či ilustracemi. Uživatel může dle preferencí měnit velikost, typ a barvu písma, vyhledávat v textu, vytvářet vlastní poznámky a záložky. Pokročilejší interaktivní funkce Kindle nenabízí. (24) Knihy distribuované přes obchod Amazon lze i později upravovat přes účet v Author Central. Takový proces probíhá formou žádosti, která se zašle přímo vydavatelství Amazon, to požadavek vyhodnotí a obsah dle oprávněnosti takové žádosti případně upraví. (35) 4 Inkoustový displej – používá se též pojem „elektronický papír“, „e-papír“ nebo „e-ink“. (85) Multiplatformní software – software, který ůže běžet na více počítačových platformách (např. podpora více operační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řízení a přináší uživateli dobrou dostupnost knih ke čtení, řadu zajímavých funkcí a velmi praktickou čtečku, která je svou mobilitou a nižší pořizovací cenou na trhu velmi konkurenceschopná. Pro tvorbu elektronických učebnic však ekosystém Kindle nepřináší žádný specifický benefit. Lze je vytvářet jako standardní elektronické dokumenty v podporovaných formátech a funkcích poskytovaných daným formátem (PDF, MOBI, AZW apod.). b) Apple iBooks iBooks je aplikací společnosti Apple Inc. vydanou ve spojitosti s představením tabletu Apple iPad 27. ledna 2010 a půl roku později vydaná také pro zařízení Apple iPhone a iPod, tedy ostatní zařízení používající mobilní operační systém Apple iOS 4.3 a pozdější. Na podzim roku 2013 byla uveřejněna také pro operační systém OS X 10.9 Mavericks a vyšší používaný na počítačích Apple Mac a MacBook. V současné době se jedná o aplikaci využitelnou napříč celým ekosystémem produktů Apple, která je ve stejné podobě integrována do více zařízení v rámci jedné platformy Apple. (28) Podobnou vlastnost však mají i aplikace Kindle od Amazonu a částečně i Play Books od Google. Hlavním zdrojem knih a učebnic ke stažení je obchod iTunes (resp. iBooks Store6), který se mimo jiné využívá ke stahování hudby a aplikací do zařízení Apple. Knihy jsou dostupné pro všechna zařízení, která mají nainstalovanou aplikaci iBooks (dostupná v obchodě App Store) a lze je mít centralizovaně synchronizované napříč všemi zařízeními (díky online úložišti iCloud), která uživatel vlastní (např. synchronizace záložek a synchronizace sbírek). (36) Původně v době vydání první 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ří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 ní vývojářskou aplikaci iBooks Author pro tvorbu elektronických interaktivních učebnic a nový dokumentový formát IBA pro ukládání knih a učebnic vytvořených v iBooks Author. Tato aplikace je volně ke stažení a je určena pro operační systémy OS X 10.7.4 a vyšší. (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římo z aplikace iBooks. (39) 30 Technická specifikace Mobilní zařízení Apple sdílejí často stejnou hardwarovou výbavu nebo se případně liší dle modelového roku či verze daného zařízení. Mobilní telefony iPhone tak disponují barevnými dotykovými displeji od 4 do 5,5 palců s podporou více dotyků, velmi výkonnými procesory a grafickými čipy, bohatou konektivitou zahrnující Wi-Fi, 3G či LTE mobilní internet, Bluetooth, řadou sensorů, fotoaparátem a jiným vybavením běžném v současných mobilních zařízeních. Tablety iPad, které byly firmou Apple vyvinuty hlavně pro účely čtení a sledování digitálního obsahu, disponují 7 až 10 palcovými barevnými vícedotykovými displeji. Všechna zařízení firmy Apple běží na mobilním operačním systému iOS (v době psaní této práce iOS 7). (37) V současné době je aktuální pro mobilní operační systém iOS verze iBooks 3.2. Tato verze kromě jiného podporuje 18 mezinárodních jazyků. Uživatel může upravovat podsvícení displeje uvnitř aplikace, vybírat text (pokud to autor učebnice povoluje ve spojitosti s autorskými právy), vyhledávat text v učebnici, listovat kapitolami, používat rejstřík a samozřejmostí jsou i křížové odkazy. Dále díky nástroji iBooks Author lze vytvářet vícedotykové učebnice, přidávat do učebnice řadu grafických a interaktivní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, číslování stránek, interaktivní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řízení přes USB. Dále lze knihu také exportovat do PDF či prostého textu, ale již bez interaktivních a vícedotykových funkcí, které umožňuje uložit pouze formát IBA. Tento formát zatím podporuje pouze nativní aplikace iBooks pro zařízení Apple iPad, iPhone, iPod, Mac, MacBook. (36) iBooks Author je jediným nástrojem svého typu na trhu, který nabízí ucelenou řadu funkcí a nástrojů vhodných pro tvorbu elektronické knihy či učebnice v jedné aplikaci najednou. V tomto programu lze proces tvorby učebnice projít od návrhu struktury přes sazbu textu a vložení multimediálních či interaktivních prvků až po export a publikaci knihy. (38) Kromě tvoření vlastní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 Použití pro projekt tvorby učebnice programování Učebnice Apple iBooks a aplikace na tvorbu učebnic iBooks Author jsou vhodně technicky i obchodně koncipované pro tvorbu vzdělávací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álním tiskovém vyjádření Eddy Cue, víceprezident společnosti Apple oddělení Internetového softwaru a služeb, při příležitosti tiskového prohlášení o rozšíření těchto aplikací na nové světové trhy v roce 2014. Tento trend potvrzuje i velmi častá aktualizace těchto aplikací (celkem 25 od 2.3.2010 do 14.11.2014) a tisková prohlášení firmy ohledně podpory a používání tabletů iPad pro vzdělávací účely, nabídka vzdělávací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 prohlížení a čtení elektronický knih a učebnic na zařízeních Apple, jehož telefony a tablety disponují vlastním operačním se systém iOS, velkou dotykovou obrazovkou a komplexní provázaností aplikací 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, díky níž může autor vytvořit učebnici podobně jako dokument ve WYSIWYG editoru, Microsoft Word nebo Pages. V nabídce je mnoho předpřipravených funkcí a interaktivních prvků, které běžné statické učebnice (ať už papírové či elektronické) nenabízejí. (42) Mezi zkoumanými výrobci neexistuje ani jiný vlastní komplexní nástroj pro tvorbu knih nebo učebnic. (43) Učebnice lze v obchodě iTunes najít v záložce „Textbooks“, samostatně jsou odděleny také interaktivní učebnice vytvořené v aplikaci iBooks Author v záložce „iBooks“. Po stažení do zařízení se kniha zobrazí v knihovně stažených knih aplikace iBooks „Moje knihy“. Knihy lze libovolně řadit do tzv. sbírek dle rozdělení uživatele. Při čtení klasické knihy ve formátu PDF nebo EPUB může uživatel procházet jednotlivé stránky, listovat seznamem kapitol, vytvářet si vlastní záložky, vyhledávat v textu, ovládat podsvícení obrazovky přímo z aplikace a vytisknout či poslat stránku knihy emailem. Lze využívat většinu prvků, které formáty PDF a EPUB standardně nabízejí (obrázky, křížové odkazy, hypertextové odkazy, formátování apod.). V případě knih vytvořených v iBooks Author je často uživatel obohacen o animované či interaktivní prvky. Tyto typy knih uživateli navíc nabízí možnost měnit velikost fontu, vytvářet si vlastní poznámky a sdružovat je do tzv. studijních karet, nahlížet do glosáře (pokud jej autor knihy vytvořil) a používat interaktivní prvky (widgety – pokud je autor vytvořil). (39) 32 Obsah knih Apple iBooks se může kdykoliv po publikování knihy do obchodu iTunes upravit. Nová verze knihy se může upravit přímo v iBooks Author, uložit a odeslat znovu k publikaci. Uživatelé se o existenci nové verze dozví přímo ve své knihovně aplikace iBooks a mohou si ji ihned stáhnout do zařízení. (39) Apple iBooks nabízí pro projekt tvorby učebnice programování velkou řadu nástrojů a funkcí, se kterými lze pracovat a zařadit je do procesu tvorby učebnice. Značně výhodně se jeví komplexní vývojový nástroj iBooks Author, ve kterém lze vytvářet různé přednastavené i vlastní interaktivní prvky, které by učebnici obohatily. Proces také vypadá značně zjednodušeně díky tomu, že tento nástroj je zdarma a je k němu k dispozici kompletní oficiální dokumentace i řada příruček a návodů, jak v procesu tvorby postupovat. Nevýhodou může být použití těchto technologií pouze se zařízeními Apple a možné komplikace či složitější 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ň mobilní aplikace společnosti Google. První verze aplikace pro Google Android byla dostupná začátkem roku 2012. V současné době je nejaktuálnější verze této aplikace pro Android 3.2.61 a dostupná je i pro operační systém Apple iOS 5 a vyšší, ve verzi 1.6.6. Důležitou součástí je internetový obchod digitálního obsahu Google Play, který dále kromě mobilních aplikací, hudby, her, online novin a magazínů, nabízí knihy Play Books k zakoupení či zdarma ke stažení. Po stažení se zobrazí v daném zařízení platformy Android či iOS přímo v elektronické knihovně mobilní aplikace Google Play Books (v České republice od července 2013 pod názvem Knihy Google Play). Knihy je možné nakupovat a číst i bez mobilní aplikace, a to přes webové rozhraní. Je k tomu potřeba pouze uživatelský účet v obchodě Google Play a webový prohlížeč s aktivovanou podporou skriptů JavaScript. Díky tomu jsou Google Play Books víceméně nezávislé na operačním systému či zařízení ze kterého uživatel ke službě přistupuje, pokud tyto předchozí podmínky splňuje. (44) Tvorba ani publikace knih neprobíhá v žádné nativní aplikaci od firmy Google. Autor již vytvořenou knihu (v jiných aplikací třetích stran) pouze nahraje pomocí služby Google Books Partner Program. (45) 33 Technická specifikace Firma Google je v současné době výrobce software a nevyrábí vlastní mobilní zařízení – telefony, tablety či čtečky. Pod značkou Google vydává pouze zařízení jiných výrobců na základě smluvních podmínek s daným výrobcem. Hlavním produktem firmy Google v tomto odvětví je mobilní operační systém Android. Tento systém využívá řada výrobců mobilních telefonů, tabletů, počítačů, ale i čteček (např. Kindle využívá operační systém Android) a jiná multimediální zařízení. Díky distribuci tohoto operačního systému do různých zařízení a k němu připojenému obchodu s aplikacemi a digitálním obsahem Google Play Store tak Google publikuje digitální 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 číst různými způsoby. Výchozí možností je webové rozhraní knih na Google Play nebo mobilní aplikace pro operační systémy Android a iOS. Dále je možné knihy číst na zařízeních podporující Adobe Content Server 4, pomocí něhož lze distribuovat knihy s obsahem chráněným DRM7. Seznam těchto zařízení je dostupný na oficiálních stránkách výrobce této technologie Adobe (přes 200 různých zařízení, čteček, Android, iOS či desktopových aplikací napříč různými výrobci). (47) Dostupná je také HTML 5 aplikace do prohlížeče Chrome. Nakoupené knihy je možné pod jedním uživatelským účtem přenášet i na jiná zařízení a dle nastavení ochrany DRM do zařízení stahovat. (48) Obchod digitálního obsahu Google Play je úzce spjat s knihami Play Books, ať už v podobě mobilní aplikace nebo webové čtečky. Dle informace z roku 2013 nabízí přes 5 milionů knižních titulů v elektronické formě a dostupný je pro 57 zemí světa. (49) Do mobilní aplikace je možné nahrávat i vlastní obsah ve formátu PDF nebo EPUB. K nahrávání tohoto obsahu slouží 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ávají služby Google Play spíše funkci prostředníka nikoliv však přímého nástroje pro tvorbu knih či učebnic. (9) Pro tvorbu interaktivních prvků do učebnic zatím nejsou dostupné žádné přímo doporučené nástroje od firmy Google, které by bylo možné v Google Play Books využít. Univerzálně lze použít řadu webových aplikací Google Apps (např. Google Docs, Slides 7 DRM – Digital rights management je technická metoda pro ovládání či omezování obsahu digitálních médií. (88) 34 nebo Sites) pro vytváření dokumentů a prezentací. Lze také využít vlastností a standardů dokumentových formátů, které Play Books podporují (PDF a EPUB), a nástrojů třetích stran pro jejich tvorbu (Microsoft Word, Pages, Adobe InDesgin apod.). (51) Použití pro projekt tvorby učebnice programování Elektronické knihy lze číst v aplikaci Play Books na různých zařízeních s operačním systémem Android nebo iOS. K dispozici je také webové rozhraní Play Books, ve kterém lze knihy číst přímo ve webovém prohlížeči s podporou JavaScript. Mobilní aplikace Play Books nabízí velmi přehledné a intuitivní prostředí. Díky nejrůznějším aktualizacím je obohacena o řadu 3D efektů a animací, jež uživateli přibližují pocit čtení klasické knihy a zlepšují orientaci v obsahu (listování stránek, náhledy stránek, přiblížení textu, horizontální posuvník). V knize je možné vytvářet vlastní záložky a poznámky k obsahu. Text je možné tapnutím a podržením označovat, přidávat k vybrané části poznámky nebo překládat do zvoleného jazyka (díky integraci Google Translator). Pro vzhled obsahu knihy lze nastavovat 3 různé barevné režimy, měnit úroveň podsvícení displeje, vybrat z několika typů patkových a bezpatkových písem, měnit zarovnání, měnit velikost písma nebo řádkování. V neposlední řadě je možné předčítat text nahlas za pomoci hlasového modulu TTS. (51) Dle dostupné dokumentace pro Books Partner Program lze kdykoliv nahrát novou verzi knihy pomocí účtu Partner Center v podporovaných formátech do velikosti 2 GB. Také je možné nastavit okruh uživatelů, kteří kontrolují a hodnotí kvalitu obsahu knihy a upozorní na pří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 aplikací specializovaných pro vzdělávání zabývá. V jádru jde však zatím pouze o kategorizované aplikace (nikoliv knihy) pro vzdělávání pod záložkou „Google for Education“ v obchodě Google Play, určené převážně pro nižší stupně vzdělávání (předškolní děti, základní školy). V současné době Google interaktivní učebnice či nástroje pro jejich tvorbu v Play Books nenabízí. (52) Platforma Google Play je velmi zajímavá z hlediska publikace a používání elektronických knih. I když neexistují přímé nástroje pro tvorbu knihy pro Google Play, existují různé nástroje třetí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 číst nebo publikovat do obchodu Google Play. Samotná mobilní aplikace nabízí řadu užitečných funkcí a je velmi konkurenceschopná k aplikaci Apple iBooks nebo Amazon Kindle. 35 d) Jiné technologie Existují také jiné technologie pro tvorbu elektronických učebnic, které se neřadí do klasických přístupů pro jejich tvorbu. Výše uvedení výrobci nabízí na trhu nástroje pro tvorbu, publikaci a čtení elektronických knih a učebnic. Nabídku tak tvoří většinou komplexní řešení, které zahrnuje jak hardware, tak software potřebný pro zajištění výše zmíněných funkcí. (9) Z této definované skupiny lze vyčlenit otevřený dokumentový formát PDF, který sice nabízí množství funkcí pro tvorbu elektronických textů, knih i učebnic, nicméně se však jedná spíše o specifikaci a standard než o službu. Software, který daný formát používá, musí tento standard dodržovat, stejně jako software, který jej čte – a to nezávisle na používaném hardware. Další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ání a výuky. Oba typy těchto technologií vyčleňuje z předchozího výčtu jejich otevřenost, nezávislost a individuální možnost použití pro tvorbu elektronických knih a učebnic. Nelze je řadit do výše popsaných technologií, protože svou univerzálností zasahují i do jiných oborů na poli elektronických dokumentů a software, než jen tvorba a publikace vzdělávacích materiálů. Tvorba elektronických učebnic je jen výsek využití, pro který je lze použít. Globální statistiky a srovnání využití těchto technologií v odvětví vzdělávání nelze v současné době dohledat. Proto se zde jejich význam dokazuje spíše subjektivně na základě osobní zkušenosti. Následný popis a zařazení do srovnání s ostatními technologiemi však má vést k větší objektivitě, pohledu z více úhlů na možnosti tvorby elektronických učebnic a zkvalitnění výběru správné technologie pro zpracování zadaného projektu učebnice programování. Interactive PDF PDF neboli Portable Document Format byl vydán firmou Adobe Systems v roce 1993. Tento původně proprietární formát byl určen k softwarové a hardwarové nezávislosti. Hlavní myšlenkou bylo veškeré zobrazené prvky (text, font, grafika, formátování atd.) zabalit do jednoho souboru a opět otevřít v nezměněné podobě nezávisle na zařízení či v programu podporujícím daný formát. Ví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 díky výše uvedeným vlastnostem možné do PDF uložit a zobrazit interaktivní prvky jako např. radio button, checkbox či interaktivní formulář. 36 Tyto formuláře následně i díky aktualizací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 interaktivní prvky v PDF. Přinesla především podporu 3D grafiky a animací ve formátu SWF. Dále je možné vkládat vektorovou grafiku, video, zvuk či sazbu v systému LaTeX. Díky aplikaci Adobe InDesign lze do PDF vkládat i přechody při listování stránek, vytvářet interaktivní tlačí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á aplikací musí obsahovat textový a grafický obsah, vlastní prostředí pro čtení obsahu a případně další uživatelské funkce. Základními stavebními kameny jsou technologie pro tvorbu takové učebnice a technologie pro její používání. Vývojář musí zvolit programovací jazyk a prostředí, ve kterém bude danou aplikaci vytvářet v návaznosti na operační systém, pro který bude aplikaci vytvářet. Nutné je také zvolit způsob distribuce takového software. (54) Jedním z předchůdci těchto knih lze například jmenovat CD-ROM výukový software (Jak věci pracují, Lidské tělo v ČR od BPS Multimedia). Ze současného software lze jmenovat například mobilní aplikace pro čtení Bible, pohádek (Winnie the Pooh, Elmo loves you, Strašidelné historky), slovníky a encyklopedie (Oxford Dictionary of English, Anglicko Český Slovník, Velký slovník cizích slov, Atlas hub) a jiné (Classics, Easy Recipes, Studentská kuchařka). Toto je výčet vybraných aplikací dostupných pro Android či iOS. V oboru elektronického vydavatelství se jich vydává daleko více. Stěžejní vliv na popularitu těchto aplikací má kvalita a dostupnost obsahu (často se jedná o komerční aplikace), aktuálnost obsahu (změny v textu se většinou distribuují pomocí dodatkových updatů celé aplikace) a použitelnosti uživatelského prostředí. Nevýhodou tohoto těchto aplikací je, že každá část této aplikace se musí individuálně vytvořit a to je velmi časově náročné a nákladné. Další nevýhodou je svázanost dané aplikace s vybraným operačním systém či zařízením (řešením může být např. webová aplikace). Naopak výhodou může být vlastní zpracování a použití interaktivních prvků dle použitého obsahu. (55) V případě potřeby zveřejnit novější verzi obsahu či přidání nového textu je potřeba vytvořit nový buid celé aplikace a vydat novou verzi aplikace pro daný distribuční kanál, což může být časově náročné. 37 Vlastní srovnání platforem pro elektronické učebnice V současné době jsou firmy Amazon, Apple a Google velcí světoví výrobci a konkurenti na poli hardware i software pro mobilní zařízení. Aktuálně se platformy, obchody, software a zařízení těchto výrobců liší v různých aspektech – ať už jde o pořizovací cenu, nabídku obchodů, nástrojů pro tvorbu a publikaci, hardwarová zařízení apod. Amazon pro prodej elektronických knih využívá svůj dlouho fungující internetový obchod s tištenými knihami. Přímo v obchodě se tak zákazník může často rozhodnout, jaký typ knihy zakoupí. 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 nabízeny často o 30-50% levněji než papírové verze. Zároveň je možné zakoupit přímo i zařízení pro čtení knihy – čtečku Amazon Kindle (verzí existuje více). Jejich pořizovací cena se pohybuje mezi $100 - $200 (v nabídce jsou také tablety Fire s barevným vícedotykovým displejem za cenu $200 - $400). Dále Amazon nabízí možnost přenášet do čteček Kindle či zařízení s předinstalovanou aplikací Kindle vlastní knihy v podporovaných formátech. Apple prodej a distribuci elektronických knih a učebnic založil na základě uvedení nové kategorie zařízení do svého portfolia – a to tabletu iPad, který nabízí barevný LCD displej s vysokým rozlišením, konektivitu přes WiFi, 3G nebo bluetooth, vysoký výpočetní výkon, mnoho funkcí, ale také vyšší pořizovací cenu mezi $249 - $950 dle modelu a výbavy. iPad se jako komplexní zařízení může hodit na výuku lépe než klasická elektronická čtečka, protože v sobě integruje více funkcí a možností jak výuku a vzdělávání obohatit. Díky širokému výběru speciálních podpůrných a partnerským programů pro vzdělávání, firma Apple nabízí zařízení iPad a vzdělávací aplikace studentům a školám se zvýhodněnými podmínkami. Google svůj obchod a aplikaci Play Books uvedl teprve v roce 2012 a na trhu není ještě tak dlouho, jako její hlavní konkurenti. Tuto časovou ztrátu se však snaží dohnat velmi častými aktualizacemi a integrací obsahu do jednoho obchodu (dříve Google knihy prodával samostatně přes Google eBookstore). Dále může těžit z velké rozšířenosti operačního systému Android (Android 84,4%, iOS 11,7%, Windows Phone 2,9%) (56), díky kterému může zvyšovat i svůj podíl na trhu elektronických knih a učebnic. Zařízení s operačním systémem Android často prodávají s pořizovací cenou pohybující se mezi $100 - $800. Pokud v budoucnu tento výrobce nabídne komplexní vývojářský nástroj 38 pro interaktivní elektronické učebnice, nabídne podobné funkce, které aktuálně nabízí iBooks Author a bude třeba dostupný i formou webové aplikace (tak, jak je tomu i u většiny ostatních služeb firmy Google), bude jistě o dost blíže konkurenci. A co víc, bude to i přidanou hodnotou pro vývojáře a čtenáře tohoto elektronického obsahu, kteří si budou moci vybírat z většího množství technologií pro tvorbu. Tabulka 1: Porovnání 3 výrobců s globálně největším podílem na trhu a jejich platforem pro elektronické knihy a učebnice. Amazon Apple Google Název platformy: Kindle iBooks Play Books Na trhu od: 2007 2010 2012 Operační systémy: Android, iOS, OS X, iOS Android, iOS iPad, iPhone, telefony a tab- iPod, Mac, lety Android Linux, OS X, Windows Mobile, Windows Primární zařízení: čtečky Kindle MacBook Výchozí formát: AZW IBA, EPUB EPUB Další podporované for- EPUB, PDF, TXT PDF PDF Obchod: Amazon iTunes Play Store Primární vývojářská není iBooks Author není Vývojářská 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é rozhraní iBooks Author, Webové rozhraní máty: aplikace: Publikace knih: iTunes Producer Interaktivní prvky: nejsou widgety nejsou Zdroj: Vlastní zpracování Na základě vlastního srovnání a porovnání technologií na trhu s ohledem na zadání projektu tvorby interaktivní učebnice programování pro vysokou školu byla vybrána 39 technologie od firmy Apple – iBooks a iBooks Author. Mezi hlavními výhodami je možnost vkládání předpřipravených interaktivních prvků nebo individuálně vytvořených přímo do elektronické učebnice díky aplikaci iBooks Author. Nejsou nutné žádné speciální licence pro tento produkt a vývoj proto může být levný. Po stažení aplikace z App Store je možné začít ihned učebnici psát a vytvářet multimediální prvky bez primární nutnosti použití jiných aplikací či technologií. Další výhodou je optimalizace učebnic pro Apple iPad, které studenti používají ke studiu. Neposledním důležitým faktorem je možnost publikování učebnice v elektronickém obchodě iTunes, publikování učebnice lokálně jako soubor či možnost exportovat učebnici do PDF a publikování v jiném elektronickém obchodě, který taktéž podporuje formát PDF. V pří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étních specifikací a formátů učebnici úspěšně publikovat. Pokud je ale potřeba vytvořit komplexnější učebnici, bohatší obsah, interaktivní prvky vestavěné pří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 zvířat pro učebnici biologie, interaktivní animaci průběhu interpretace kódu pro učebnici programování apod.) je vhodnou volbou Apple, jeho platforma iBooks a vývojový nástroj iBooks Author. iBooks Author nabízí nejen přehledné uživatelské prostředí podobající se textovému či grafickému editoru ale obsahuje řadu integrovaných a předpřipravených funkcí (grafické šablony, styly, tabulky, grafy, číslování stránek, kapitoly apod.). I díky možnosti vkládat přednastavené či vlastní interaktivní prvky (widgety) je iBooks Author v konkurenčním prostředí zkoumaných výrobců svou účelností a použitelností pro tvorbu elektronických učebnic jediný. Žádný jiný zkoumaný výrobce elektronických čteček či zařízení pro čtení elektronických knih a učebnic takto ucelený editor pro tvorbu elektronických učebnic zatím nenabízí. (57) Další nástroje, které firma Apple na pole vzdělání přináší, je například aplikace iTunes U, která nabízí oproti klasickému obchodu digitálního obsahu iTunes obsah výhradně pro vzdělávání a výuku na mobilních zařízeních iPhone, iPad, iPod či počítačích Mac a MacBook. V této aplikaci je možné si zvolit ucelený kurz vzdělání (například: „Open Yale courses – Financial Theory“), který uživateli do zařízení stáhne kompletní materiály potřebné pro absolvování kurzu a porozumění dané látky – přednášky v podobě videí 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ěří. V této aplikaci nabízí kurzy např. Stanford University, Harvard University, The University of Oxford, MIT, University of Cambridge nebo Yale University. (58) Apple také nabízí speciální Apple Education Program pro vzdělávací instituce a univerzity, které dostávají slevy pro své studenty a zaměstnance na nakupování a stahování digitálního vzdělávacího obsahu z obchodu iTunes nebo iTunes U. Dále také nabízí Device Enrollment Program pro správu všech zařízeních (např. iPad), jejich nastavení a instalaci v jedné správcovské aplikaci najednou. Jedná se o speciální účet vedený u společnosti Apple, pod kterým administrátor či správce IT zařízení dané instituce za pomoci Mobile Device Management (MDM) serveru (serveru či serverové aplikace, která všechna zařízení kontroluje a registruje) přihlásí všechna zařízení pod jeden společný účet a spravuje jejich obsah, bezpečnostní politiku či typu nákupů z iTunes na jednom místě. (59) 41 5 Vybraná technologie Jak již bylo výše zmíněno, na základě uvedených skutečností a předpokladů v předchozích kapitolách, byla pro zamýšlený projekt tvorby elektronické učebnice programování na Unicorn College pro tvorbu hlavní kostry učebnice a všech důležitých prvků vybrána technologie Apple iBooks s vývojovým prostředím iBooks Author. Pro tvorbu individuálních interaktivních prvků budou použity výrobcem podporované technologie HTML, CSS a JavaScript. Apple iBooks iBooks, jak již bylo uvedeno ve srovnání elektronických platforem učebnice výše, je aplikace firmy Apple Inc., která byla uvedena 27. ledna 2010 pro zařízení Apple iPhone, iPod a iPad, od roku 2013 dostupná také na všechna desktopová zařízení s operačním systémem OS X 10.9 (Mavericks) a vyšší. Aplikace slouží pro ukládání, zobrazování a čtení knih a učebnic v elektronických formátech EPUB, PDF a IBA. Díky vývojářské aplikaci iBooks Author pro operační systémy OS X 10.7.4 (Mavericks) a vyšší lze knihy a učebnice pro iBooks vytvořit a uložit do formátu IBA včetně všech přídavných funkcí jako obsah, glosář, kapitoly, křížové odkazy, média nebo interaktivní prvky. V iBooks Author je možné kromě IBA také přímo ukládat do PDF či TXT, ale již bez interaktivních prvků. Knihy se odtud přímo distribuují do obchodu iTunes, který slouží jako knihkupectví 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 pololetí roku 2014 je aktuální verze iBooks 3.2, kterou budu dále také podrobněji popisovat a rozebírat na ukázkách. a) Ovládací prvky V následujících podkapitolách budu primárně popisovat prostředí 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 písma, barvu, typ zobrazení (vertikální, horizontální posouvání), ale nikoliv používat a zobrazovat další funkce, které nabízí při zobrazení knihy vytvořené v iBooks Author (např. interaktivní prvky). 42 Po otevření knihy jsou hlavními ovládacími prvky tlačítka na horní navigační liště. Odtud se vstupuje do knihovny, obsahu, glosáře, ovládá se podsvícení displeje, vyhledává se nebo se vytváří nové záložky. Obrázek 3: Rozložení jednotlivých ovládacích prvků projektu učebnice vytvořené v iBooks Author. Zdroj: Vlastní zpracování 1. Tlačítko knihovna – používá se k vrácení se zpět z otevřené knihy do Knihovny na seznam stažených knih v zařízení. Odtud je také možný přístup ke stažení nových knih z obchodu iTunes. 2. Tlačítko seznam – po tapnutí na toto tlačítko se následně zobrazí menu se dvěma položkami: Obsah a Glosář. Obsah zobrazí grafický náhled jednotlivých kapitol a jejich obsahu, Glosář zobrazí seznam vybraných termínů a jejich vysvětlivek. 3. Tlačítko poznámky – zobrazí seznam uživatelem vytvořených Poznámek (tapnutím na slovo, podržením a přetažením prstu pro zvýraznění textu) seřazených popořadě dle jednotlivých kapitol. Dále je možné z Poznámek přejít na 43 Studijní karty, které slouží k nácviku a memorování si již vytvořených Poznámek. 4. Nadpis kapitoly – nadpis je v horním panelu dostupný na každé stránce pro snadnější identifikaci a orientaci v knize. 5. Tlačítko podsvícení – slouží k úpravě podsvícení displeje při čtení. 6. Tlačítko vyhledávání – zobrazí vyhledávací panel, pomocí něhož lze vyhledávat slova i jednotlivá čísla stránek v obsahu knihy. Vyhledávač výsledky logicky řadí dle typu obsahu (např. vyhledávání v textu, médiích apod.). K dispozici je také našeptávač možných slovních výrazů a spojení. Možné je přejít dolními tlačítky panelu na vyhledávání na internetu či na Wikipedii. 7. Tlačítko záložka – umožní přidat novou uživatelskou záložku v knize. 8. Tabulka – tabulka s obsahem, jejíž styl a formát je možné v iBooks Author různě nastavovat (záhlaví, zápatí, ohraničení, podmíněné formátování, pravidla, funkce apod.). 9. Glosářový termín – označený text tučným písmem, který po tapnutí prsty na daný výraz zobrazí popisek vztahující se k danému heslu. Seznam těchto hesel a popisků je možné zobrazit v samostatné záložce Tlačítko seznam – Glosář. 10. Panel widget – panel interaktivního widgetu umístěný uvnitř textu knihy. V tomto případě se jedná o interaktivní obrázek s interaktivní mapou popiskou, která reaguje na uživatelovo tapnutí 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ění či maximalizaci na celou obrazovku ihned po uživatelské interakci. b) Obchod iTunes Pro přístup a stahování knih z obchodu iTunes je třeba účet u Apple ID. Nakupovat či bezplatně stahovat knihy ke stažení zdarma lze přímo ze zařízení po vstupu do iTunes obchodu z aplikace iBooks nebo ze stolního počítače a desktopové aplikace iTunes. Zde lze procházet přehledně roztříděné knihy dle různých kritérií, žebříčků či žánrů. Důležitou kategorií 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šení nebo zvětšení daného objektu na dotykové obrazovce. (62) 44 v aplikace iBook Author pro tvorbu učebnic a vzdělávacích materiálů. Po stažení vybrané knihy do zařízení se zobrazí v knihovně iBooks ( Pří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ě psaní této práce je ve verzi 2.2. Tento software je proprietární a je bezplatně ke stažení z Mac App Storu pro operační systémy OS X 10.7.4. a vyšší. (39) V následujícím textu budou detailněji popsány důležité prvky iBooks Author pro tvorbu elektronických učebnic k lepšímu pochopení práce v tomto prostředí. Jako hlavní zdroj informací bude sloužit oficiální dokumentace Apple Inc. (29), publikace iBooks Author: Publishing Your First Ebook (42) a vlastní zkušenosti s iBooks Author. a) Prostředí Prostředí iBooks Author je velmi intuitivní. Apple Inc. Vytvořil aplikaci pro tvorbu učebnic pro běžné uživatele, kteří dokáží vytvářet textové dokumenty, pracovat s prohlížečem či upravovat a ukládat obrázky. S těmito základními schopnostmi lze učebnici v iBooks Author vytvořit, neboť se program tváří a chová jako běžný editor typu Microsoft Word, Pages, či WYSIWIG editory. b) Nový projekt Nový projekt v iBooks Author se vytváří hned na úvodní obrazovce po spuštění aplikace. Na výběr je několik předpřipravených šablon na šířku a na výšku (Příloha 2: Vytvoření nového projektu). Šablony je možné případně vytvářet a upravovat individuálně. V iBooks Author lze otevřít boční panel Uspořádání (Layouts), nastavit potřebné grafické prvky, potvrdit změny na dané stránce a celou šablonu uložit do formátu .ibatemplate v nabídce Soubor – Uložit jako předlohu. Poté je možné nový projekt začít vytvářet i z této šablony, která se automaticky přidá do galerie dostupných šablon. Na webu existují bezplatné i placené galerie šablon, které lze do iBooks taktéž stáhnout a použít. Důležitá nastavení pro celou aplikaci iBooks Author se nachází v horním menu iBooks Author - Předvolby. 45 Nakonec je k dispozici panel Inspector (ikona napravo v horním menu), který slouží jako sdružený panel pro různá globální nastavení učebnice nebo nastavení jednotlivých prvků dokumentu, pokud je předtím uživatel v iBooks Author vybral myší. c) Přidávání a formátování textu iBooks Auhtor podporuje tři různé typy obsahu stránek: Kapitola, Oddíl, Stránky. Záleží individuálně na zvolené šabloně, jak jsou dále tyto typy obsahu definovány a nastaveny (různé způsoby rozložení textových prvků, sloupců, podkladů atd.). Důležité je používat tyto prvky pro správné členění knihy do kapitol, odstavců a podstránek. Formátování textu probíhá podobně jako v kancelářské aplikaci Pages nebo Microsoft Word. Horní panel iBooks Author nabízí řadu nástrojů jak text formátovat, případně je možné pro komplexnější úpravy použí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řízení se kniha primárně tvoří. Vzhledem k rozšířenosti Retina displejů s vysokým rozlišením a možnosti číst iBooks knihy i na Mac je vhodné na toto brát zřetel, protože nižší rozlišení obrázku může být na takových displejích nečitelné. Obrázky se do projektu v iBooks Author přidávají primárně metodou Drag&Drop ze souborového systému (pro účely procházení souboru v počítači Mac je vhodné použít Finder) přímo do obsahu projektu. Pak je možné kurzorem a posuvníky správně umístit a nastavit velikost obrázku vůči textu. iBooks Author nabízí řadu nástrojů pro úpravu obrázku, úpravu barev, přidávání masek nebo vodící lišty pro správné umístění obrázku k okrajům nebo textu při zachování správného odsazení. e) Práce s objekty V iBooks Author je řada funkcí pro práci s objekty jako jsou například obrázky. Lze jim přidávat titulky, různá pozadí, výplně, rámečky a stíny. Obrázky se mohou ukotvovat k jiným objektům nebo přizpůsobovat obtékání textu kolem obrázku. Pro tyto účely se využívá hlavně okno Inspector a v něm záložka Obtékání a Grafika. 46 f) Přidávání tvarů, tabulek a grafů Kromě obrázků, fotografií a nákresů lze v iBooks Author vytvářet různé tvary, tabulky s daty nebo grafy. Pro tvary je v horním panelu samostatná ikona Tvary kde lze vybrat z několika druhů vektorových tvarů nebo lze vytvořit a vložit vlastní. Nastavení těchto objektů lze po vložení do textu provádět v okně Inspector, v záložce Grafika. Pro tvorbu tabulek s daty je rovněž v horní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 hlavní menu programu nahoře obrazovky a cesta Formát - Tabulka. Lze tak pracovat s jednotlivými sloupci, řádkami, buňkami apod. Grafy mají také v horním panelu vlastní ikonu a po jejím rozkliknutí je možné vybrat z několika druhů grafů. Po vložení grafu do obsahu projektu se zobrazí okno pro vkládání dat. g) Interaktivní prvky Interaktivní prvky jsou hlavním těžištěm a výhodou vývojové aplikace iBooks Author pro iBooks. Nabízí mnoho druhů a způsobů jak obsah knihy propojit s multimediálními prvky, rozpohybovat nebo zatraktivnit informace jinak psané statickým textem. Hlavními interaktivními prvky jsou widgety, kterým je věnovaná celá další podkapitola a kde budou všechny jejich funkce a druhy popsány (Příloha 3: Výběr widgetu). Další zajímavou funkcí 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 externí webové stránky. h) Publikace knihy Publikace knihy je stěžejní část tvorby elektronické knihy nebo učebnice v iBooks Author. Výhodou je, že veškeré způsoby publikace jsou integrovány přímo do iBooks Author. V případě publikování knihy do PDF nebo iBooks lokálně – tedy do iTunes, stačí zkontrolovat, zda má kniha vytvořený obal a zkontrolovat její náhled pomocí ikony Náhled na některém z testovacích zařízení (viz následující kapitola a podkapitola Deployment). Dobré je také v případě učebnice vytvořit glosář pomocí panelu glosářových nástrojů v Zobrazení - Zobrazit panel glosářových nástrojů. Mohou se do něj přidat termíny a názvy z učebnice, které je nutné vysvětlit pro čtenáře. Knihu lze exportovat pomocí nabí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řípadě publikování knihy do iTunes je proces o něco složitější. Jeho hlavním bodem je získání unikátního ISBN pro danou knihu. Pak je možné pomocí nabí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 částí je pak instalace aplikace iTunes Producer, která pošle samotný zdrojový soubor s elektronickou knihou do iTunes, kde musí projít schvalovacím procesem a následně je uveřejněna v dané kategorii Bookstore v iTunes. (60) Widget Interaktivní a mediální prvky jsou v prostředí iBooks nazývány widgety. Jedná se o speciální panely, které uživateli nabízí různé formy prezentace daného obsahu a interakce s obsahem. Jedná se především o Keynote prezentace, video/audio soubory, testy, obrázky, 3D obrázky nebo další 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álního obsahu s rozdílným pozadím, než má obsah knihy, které lze tapnutím prstu na obrazovku či rozšířením prstů od sebe (gesto Pinch-to-Zoom (62)) aktivovat a rozšířit přes celou obrazovku (Příloha 2). Existují widgety předpřipravené přímo ve vývojovém nástroji iBooks Author, widgety vytvořené třetí stranou – individuálními vývojáři, open-source, online databanky widgetů a vlastní HTML widgety, které je možné si individuálně vytvořit. Pro widget v prostředí iBooks se používá přípona souboru WDGT. Ta se taktéž používá v operačních systémech Mac OS X od verze 10.4 pro aplikaci Dashboard. Použití je v obou případech podobné. Soubor ve formátu WDGT se po spuštění chová jako samostatná miniaplikace v okně. Vytvořená může být pomocí podporovaných programovacích jazyků HTML5, CSS, JavaScript a mediálními formáty podporovanými napříč celou aplikací (obrázky, audio, video). Předpřipravených widgety není nutné samostatně vytvářet a převádět do formátu WDGT. Stačí je pouze v prostředí iBooks Author vložit kliknutím na tlačítko Widget přímo do textu vytvářené knihy. V případě tvorby vlastních widgetů – ať už nástroji třetích stran nebo samotným vývojářem, je třeba znát bližší specifikaci a standardizaci formátu WDGT (Příloha 4: Nastavení widgetu). 48 a) Specifikace WDGT soubor je vytvořen ZIP kompresí9 struktury několika souborů, které mají svá specifika a náležitosti. Hlavní HTML soubor: Hlavní soubor widgetu, který může uvnitř obsahovat CSS a Javacript kód nebo soubory s tímto kódem mohou mít vlastní strukturu složek a jednotlivě na sebe odkazovat (např. jako struktura internetové prezentace). Nutné je však definovat primární soubor HTML (tzv. indexový soubor), který se bude inicializovat po spuštění widgetu. Odkazuje na něj konfigurační soubor Info.plist. HTML soubor musí být uložen s příponou „.html“. Default.png: Náhledový obrázek widgetu, který se zobrazuje v těle obsahu, kam je widget vložen. Plní funkci ikony widgetu a obrázek by měl zobrazovat náhled widgetu po spuštění pro lepší ilustraci jeho funkčnosti ještě před jeho aktivací. Název musí být přesně: „Default.png“. Info.plist: Konfigurační soubor widgetu, který udává důležité informace a nastavení pro spuštění widgetu. Přesné nastavení popisuje oficiální dokumentace iBooks Author (63) . Obsah konfiguračního souboru je také k nahlédnutí v Příloze B v rámci tvorby vlastního widgetu. Pro widgety s video zdroji je doporučeno používat H.264 video v kontejneru MPEG-4 a příponou souboru ".mp4". Pro widgety s audio zdroji je doporučeno použít AAC audio v kontejneru MPEG-4 s příponou souboru ".m4a". Nutné je však tuto informaci vždy ověřit v poslední vydané verzi dokumentace iBooks Author. b) Formátování Pro vytvoření souboru widgetu ve formátu WDGT je třeba složku s celou strukturou zdrojových souborů, povinných souborů „Default.png“ a konfiguračním souborem „Info.plist“ v hlavním adresáři složky převést do archivu typu WDGT. V operačním systému OS X 10.4 a vyšší se takový soubor vytvoří manuálním přejmenováním složky do následující podoby: „nazev_widgetu.wdgt“. 9 ZIP komprese – souborový formát pro vytvoření komprese 1 a více souborů za účelem zredukování velikosti uložených dat. 49 c) Vlastnosti Hlavní výhodou widgetů je jejich univerzálnost. Jsou to miniaplikace vytvořené pomocí rozšířeného HTML5, CSS a případně JavaScript, což je v současné době velmi populární soubor technologií webových stránek a webových aplikací. Kromě toho, že se widgety používají v aplikaci Dashboard na operačních systémech Mac OS X 10.4 a vyšší, tak jsou i v určité podobě součástí mobilního operačního systému iOS 8 (64). Pro použití v iBooks Author nebo v Dashboard je stačí zformátovat do souboru s příponou WDGT. Dále je možné je zobrazit v jakémkoliv programu nebo prohlížeči podporujícím HTML5 a JavaScript bez nutnosti jakéhokoli formátování (Internet Explorer, Google Chrome, Mozilla Firefox, Safari apod.) na jakémkoliv operačním systému – lze tedy zaručit platformní nezávislost. d) Předpřipravené widgety iBooks Author sám o sobě nabízí pod tlačítkem hlavního ovládacího panelu Widget několik předpřipravených a optimalizovaných widgetů přímo pro použití v projektu tvorby učebnice pro zařízení Apple. Jejich tvorba a deployment je velmi jednoduchý. Stačí v iBooks Author vybrat myší tlačítko Widget v horním menu, vybrat typ widgetu a dalším klikem myši jej vložit ho do obsahu učebnice, později případně nastavit potřebná nastavení k danému widgetu (zdroj obrázků, zdroj videa, otázky a odpovědi apod.). Není tak nutné vyvíjet vlastní HTML5 widget a nutně znát specifikace jazyka HTML, CSS a případně JavaScript. Vývoj a publikace takového widgetu zabere čas v řádu minut. 50 Obrázek 4: Vložení předpřipraveného widgetu v iBooks Author do projektu elektronické učebnice Zdroj: Vlastní zpracování Níže jsou uvedeny typy předpřipravených widgetů, které je možno v iBooks Author použít a ukázky jejich zobrazení v iBooks (viz odkazy do přílohy). Keynote prezentace Po aktivování widgetu Keynote prezentace je čtenáři umožněno spuštění či procházení prezentace vytvořené v aplikaci Keynote10 přímo v textu knihy či učebnice. Prezentace je možné spustit na celou obrazovku zařízení, na konci ji opakovaně pustit znovu nebo okno s prezentací opět zavřít (Příloha 5: Widget Keynote prezentace). Interaktivní obrázky Interaktivní obrázky dovolují uživateli rozšířit si obrázek na celou obrazovku zařízení a přiblížit si jednotlivé popisky, které části obrázku popisují. Po tapnutí prstem na popisek se obrázek ještě více přiblíží a zvýší se měřítko tak, aby si uživatel mohl lépe prohlédnout daný detail obrázku, ke kterému popisek míří (Příloha 6: Widget interaktivní obrázek). 3D obrázky Uživatel může v případě 3D obrázků obrázek nejen zvětšit na celou plochu zařízení, ale také s obrázkem pracovat pomocí dotyku. Hodí se tak nejlépe na modely a objekty, 10 Keynote – prezentační software společnosti Apple Inc. prodávaná jako součást kancelářské balíku iWork. (82) 51 které je možné otáčet kolem své osy vertikálně či horizontálně a nabídnout tak čtenáři lepší a ucelenější pohled na daný objekt (Příloha 7: Widget 3D modelu molekul). Galerie obrázků Galerie obrázků umožňuje čtenáři zobrazit více obrázků najednou z dané tematiky. Po tapnutí na náhledový obrázek widgetu galerie se obrázek rozšíří na celou obrazovku a uživatel může tahem prstu zleva-doprava či naopak (swipe) přecházet na další obrázek či zpět (Příloha 8: Widget Galerie). Boční panel s posuvníkem (Scrolling Sidebars) Boční panel s posuvníkem zobrazuje čtenáři po stranách hlavní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 posloupností, harmonogramem, historickými daty, seznamem, odrážkami apod. (Příloha 9: Widget Posuvný boční panel). Vyskakovací překryv (Pop-Over) Pop-Over panel se aplikuje na obrázky v textu. Po tapnutí na obrazovku zobrazí uživateli okno s dodatečnými informacemi a samostatně strukturovaném textu, který lze v případě větší délky vertikálně posouvat (Příloha 10: Widget Vyskakovací překryv (Popover)). Média Widget typu média nabízí uživateli k přehrání jakýkoliv typ videa či zvuku přímo v prostředí knihy iBooks bez použití jakýchkoliv externích přehrávačů či jiných nástrojů. V případě, že je tedy třeba jakoukoliv problematiku vysvětlit více názorně, interaktivně či přinést celou video nebo audio přednášku místo statického textu, widget média tuto funkci právě poskytuje (Příloha 11: Widget Media). Test (Chapter review) Tento widget nabízí 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 mít několik podob – jedna odpověď správně, více odpovědí správně, přiřazování popisků k obrázku nebo kombinací všech tří dohromady. Výsledek testu je čtenáři ihned po potvrzení odpovědi zobrazen a následně, dle úspěchu nebo neúspěchu, může pokračovat na další otázku nebo předchozí odpověď opravit (Příloha 12: Widget Test (Chapter review)). HTML Widget HTML widget umožňuje hlavně vývojářům nabídnout v knize daleko širší a bohatší obsah v podobě interaktivních prvků vytvořených za pomocí HTML5, případně CSS a 52 JavaScript. Čtenář si takové skutečnosti nemusí všímat, pro něj tento widgetu přináší další typ obsahu mimo „běžné“ typy, které byly zmíněné výše. Mohou se tak do knihy iBooks vložit a integrovat například různé webové služby (prohlížeč webu, online mapy, online testy) nebo různé grafické modely či interaktivní animace (Příloha 13: HTML5 widget). Tvorba vlastního HTML5 widgetu bude prakticky provedena v Kapitole 6. e) Widgety třetích stran11 iBooks Author umožňuje přímé vložení 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čí předpřipravené widgety přímo v iBooks Author, může WDGT widgety získat i z jiných zdrojů. Pokud nechce jít cestou vytváření vlastního individuálního widgetu (viz Kapitola 6), může na internetu najít řadu vývojářských serverů, komunitních fór a galerií, kde různí vývojáři nabízí widgety své vlastní tvorby ke sdílení, stažení, inspiraci nebo koupi. Zmíním zde ta subjektivně nejzajímavější, otestované servery, které nabízí další inovativní typy widgetů přímo ve formátu WDGT ke stažení. 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ální widgety z předpřipravených vzorů online na webu http://bookry.com. Pro možnost stahování widgetů z galerie je potřeba vytvořit vlastní uživatelský účet na serveru. Rozdíl mezi bezplatným a placeným účtem je vždy nutná přítomnost loga Bookry.com ve widgetu a omezení několika drobných nastavení oproti placené verzi. Jinak jsou všechny widgety v galerii plně funkční a k dispozici ke stažení. V galerii se aktuálně nachází 43 předpřipravených widgetů (údaj z června 2014). Po vybrání widgetu ke stažení je možné upravit jeho nastavení např. zdroj dat, formát, typ inicializace, grafické prvky apod.). Následně je možné soubor WDGT s wisgetem stáhnout do lokálního úložiště a vložit do projektu v iBooks Author. Pro příklad uvádím subjektivně nejzajímavější druhy widgetů: 11 Widgety třetích stran – widgety či jiné aplikace a komponenty vytvořené jiným tvůrce než je jejich původní tvůrce, umožňující znovupoužití pod bezplatnou či placenou licencí. 12 Drag & Drop – pohyb myší v grafickém systému operačního systému. Průběh: kliknutí, držení a přesunutí objektu, následné puštění kurzoru nad daným objektem. Může se chovat rozdílně v rozdílných operačních systémech či programech (83). 53 Browser – widget poskytující webový prohlížeč přímo do obsahu elektronické učebnice Scientific Calculator – vědecká kalkulačka pro jakékoliv matematické výpočty Code Viewer – widget, který čitelně zobrazí jakýkoliv kód např. pro účely učebnice programování Google Maps – vkládá online mapy Google maps přímo dowidgetu elektronické učebnice PDF Document Viewer – umožňuje přečíst elektronický dokument uložený v PDF Open App – jednoduchý widget, pomocí něhož lze odkázat na jinou aplikaci v používaném zařízení a vyvolat její otevření YouTube – vkládá online YouTube video do obsahu elektronické učebnice BookWidgets BookWidgets.com je dalším místem, kde může vývojář hledat widget třetích stran pro vlastní použití. Oproti Bookry nabízí BookWidgets generování 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žívání widgetů pouze pro zkušební účely a nutnost platby v případě produkce widgetů pro komerční použití. Pro stažení dané desktopové aplikace je nutné zadat vlastní jméno a email. Oproti konkurenční galerii widgetů Bookry nabízí BooksWidgets ve stejné době 28 typů a svojí funkčností nejsou vzdálené od widgetů z Bookry. Vybral jsem některé zajímavé z nich: YouTube Player - vkládá online YouTube video do obsahu elektronické učebnice. Wikipedia Browser – prohlížeč obsahu encyklopedie Wikipedia. Oproti klasickému webovému prohlížeči omezuje přístup pouze na webový obsah Wikipedie. Whiteboard – interaktivní formuláře, pomocí nichž lze pokládat čtenářům různé typy otázek a ty vyhodnocovat. Flash Cards – učební kartičky, které nabízí podobně jako ty papírové nejdříve na jedné straně ukázat objekt k zapamatování a na druhé straně jeho název či význam. Po přepnutí na testovací mód se widget čtenáře ptá na význam nebo 54 název daného objektu na kartičce a uživatel musí správně odpovědět jinak je upozorněn na nesprávnou odpověď. Rozdíl při získávání widgetů z aplikace BookWidgets je pouze v tom, že se generují přímo z aplikace a ukládají přímo do lokálního úložiště. Opět je možné nastavit různé parametry widgetu a po vygenerování 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 znalostí technologií iBooks, iBooks Author a HTML5, CSS, JavaScript pro tvorbu vlastního widgetu lze vytvořit učebnici dle zadaného projektu v Kapitole 3 na straně 19. Pro demonstrativní účely použitelnosti těchto technologií 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ání, 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řílohy této práce. HTML5 V následující kapitolách o HTML5, CSS a JavaScript budou, pospány principy těchto jazyků pro jejich pochopení a použití pro tvorbu HTML5 widgetu pro zadaný projekt. Pro generování zdrojového kódu v těchto jazycích lze použít i různé editory či vývojářské aplikacepro začínající programátory (např. Apple iAD Producer, Hype nebo Adobe Dreamweaver. V těchto ukázkách a později při tvorbě vlastního widgetu bude však použit pouze jednoduchý editor Sublime Text, který nabízí integraci s řadou pluginů a knihoven usnadňující tvorbu HTML5 aplikací a nabízí větší možnost individualizace vlastní tvorby než výše zmíněné nástroje, které pomáhají 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čkovací jazyk pro hypertext. Hypetext je způsob strukturování textu obsahující odkazy a další informace o tom, jak bude text publikován. HTML je hlavním z jazyků pro vytváření WWW stránek publikovaných pomocí sítě internet. (66) Za vývojem tohoto jazyka stojí Tim Berners-Lee a Robert Caillau, kteří pracovali na propojení informačních systémů ve výzkumném centru CERN v roce 1989. Výsledkem byl v roce jazyk HTML, protokol http a první webový prohlížeč nazvaný WorldWideWeb. Vývoj HTML je úzce spjat s vývojem webových prohlížečů, které zpětně ovlivňují definici tohoto jazyka. (67) 56 Standardizace jazyka je vypracovávaná komunitou W3C13, jejíž členové vyvíjejí webové standardy pro World Wide Web. Právě toto konsorcium vydalo 28. října 2014 kompletní specifikaci k HTML5. Vývojářům byla velká část specifikace známá již dříve. To dokládá například oznámení tehdejší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 zvítězí. Toto prohlášení se v roce 2011 potvrdilo oficiálním ukončením vývoje technologie Flash společností Adobe a orientaci nebo vývojové nástroje pro HTML5. (68) Webové prohlížeče podporovaly různé HTML5 prvky dle jejich aktuálně vydané aktualizace díky intenzivní spolupráci jejich vývojářů s W3C již od vzniku první specifikace tohoto jazyka. Například Internet Explorer od Microsoft přišel s částečnou podporou některých prvků HTML5 s verzí IE9 v roce 2011, Google Chrome podporu přinesl hned po roce jeho prvního vydání v roce 2009 ve verzi Chrome 3. V dnešní době HTML5 podporuje většina prohlížečů s nejnovější nainstalovanou aktualizací a to včetně mobilních verzí prohlížečů. (67) Tabulka 2: Podpora HTML5 audia a videa populá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 vlastností (atributů). Mezi tyto značky se uzavírá část textu dokumentu a tí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ákladní vlastnosti celého doku- 13 World Wide Web Consortium (W3C) – mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro WWW. Jeho cílem je rozví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říponou „.html“. Takto uložený dokument zobrazený v prohlížeči podporujícím specifikaci HTML je přečten a přeložen do zobrazení pro uživatele. (68) Tagy existují tzv. párové a nepárové. Nepárové značky nemají uzavírací část tagu a nejsou tak časté jako párové. Např. <img> pro definování obrázku v dokumentu nebo <br> pro odřádkování textu. Mezi párové tagy patří např. <head>text</head> pro definování části dokumentu jako hlavička nebo <h1>text</h1> pro definování nadpisu 1. úrovně. (66) c) HTML5 Specifikace HTML5 definuje nové HTML tagy, perzistentní úložiště formou asociativního pole, relační databáze s podporou transakcí a podporu offline aplikací. Napří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é pomocí HTML5 vytvořit aplikací, která funguje v prohlížeči i bez internetového připojení díky datům, která se automaticky uloží do lokálního úložiště. Kromě relačních databází se jako perzistentní úložiště může používat i asociativní pole, tzv. „localStorage“. (67) V HTML5 se používá také nová struktura dokumentu. K dřívější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 funkcí, např.: <progress> pro zobrazení stavu dokončení dané úlohy nebo <time> k označení času. Jedna z nejzásadnějších změn je podpora tagů pro multimediální obsah. Dříve byl tento obsah podporován v prohlížečích pouze různými pluginy nebo technologií Flash. Nyní je možné použít tyto značky pro definování zdroje daného média přímo v dokumentu: <video>, <audio>, 58 <source>, <track> nebo <embed>. Z dalších zajímavých tagů je dobré zmí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é upravují zobrazení a chování formuláře ve webovém prohlížeči. (66) CSS a) Historie CSS je zkratka pro Cascading Style Sheets neboli kaskádové styly, které popisují způsob zobrazení elementů HTML nebo XML. Tento jazyk půl původně navržen organizací W3C a jeho prvotním autorem je Håkon Wium Lie. V současné době je ve vydána kompletní specifikace k verzi CSS2.1 a existuje již specifikace k CSS3, která čeká na schválení od W3C k oficiálně doporučenému používání. (70) Hlavním posláním jazyka CSS je oddělit vzhled dokumentu od jeho struktury a obsahu. Původní vývoj HTML směřoval k integraci grafických prvků do HTML dokumentu a obsahoval řadu elementů definující jeho vzhled. Tento vývoj však nebyl žádoucí jak z hlediska zpracování dokumentu, tak z hlediska vyhledávání informací v něm. Výhodou je kromě jiného možnost definování jednoho CSS dokumentu pro více HTML dokumentů sdílející formátování elementů z tohoto dokumentu, což přináší lepší kontrolu a flexibilitu při vývoji HTML dokumentů. Tímto způsobem lze také prezentovat stejný obsah v různých zobrazeních – např. pro webový prohlížeč, pro tisk, pro mobilní zařízení apod. (70) b) Princip jazyka CSS elementy definující určitý vzhled či formátování 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 řadí dle určitého schématu priorit dle toho, které pravidlo má větší váhu v případě, že takových pravidel pro daný element je definováno více. Na takto definovaný CSS dokument odkazuje ze své hlavičky HTML dokument, který vyžaduje k formátování 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> Zdroj: Vlastní zpracování 59 CSS dokument uložený s příponou „.css“ se skládá ze seznamu pravidel, která jsou od sebe oddělena středníky „;“. Každé jednotlivé pravidlo se skládá z jednoho nebo více selektorů a deklarace. Selektor definuje element či blok HTML kódu, na který bude dané pravidlo z CSS dokumentu aplikováno. Použít se může na všechny elementy určitého typu, elementy dle typu atributu (např. id nebo třída) a na elementy v závislosti na jejich umístění v hierarchii celého dokumentu. Deklarační část se skládá z uzavřených složených závorek „{ }“ a seznamu deklarací. Jednotlivé deklarace jsou složeny z vlastnosti a definovaných hodnot pro tyto vlastnosti. Od sebe jsou deklarace odděleny středníky „;“. Ukázka použití CSS stylů pro HTML dokument může vypadat například takto: Zdrojový kód 4: Ukázka čá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> Zdroj: Vlastní zpracování Zdrojový kód 5: Ukázka části CSS dokumentu s definicí stylu pro nadpis h1. h1 { font-family: 'Helvetica Neue'; font-size: 22px; font-variant: small-caps; font-weight: 400; } Zdroj: Vlastní zpracování Po otevření HTML dokumentu v prohlíž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 Obrázek 5: Výstup definovaných HTML a CSS dokumentů v prohlížeči. Zdroj: Vlastní zpracování c) CSS3 Třetí verze kaskádových stylů CSS, jejíž vývoj byl zahájen roku 2005, teprve čeká na oficiální vydání a uveřejnění kompletní specifikace konsorciem W3C. Většina webových prohlížečů tuto verzi již v současné době podporuje. (70) Mezi nejdůležitější vlastnosti CSS3 je možnost zaoblení rohů u HTML prvků. Díky tomu odpadá potřeba řešit zaoblení pomocí obrázků. Místo toho lze použít element „borderradius“ a k němu řadu hodnot definující vlastnosti zaoblení daného prvku. Další důležité tagy jsou „box-shadow“ pro definici stínu u blokového prvku nebo „text-shadow“ pro nastavení stínu textu. Dí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ších zajímavých vlastností 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áření složitějších grafických prvků v HTML dokumentech, nahrazování obrázků elementy definovanými pouze CSS styly a zpřístupnění obsahu WWW většímu množství zařízení díky flexibilním vlastnostem tohoto jazyka pro zobrazení v prohlížeči mobilních zařízení. (72) JavaScript a) Historie JavaScript je multiplatformní skriptovací jazyk, který běží přímo ve webovém prohlížeči na klientské straně. Je objektově orientovaný a jeho syntaxe patří do rodiny jazyků C/C++/Java. Jeho původním autorem je Brendan Eich a standardizován byl asociací 61 ECMA v roce 1997. Společností 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 implementací serverového JavaScriptu, např. Rhinola, Node.js nebo Apache. Společné použití HTML jako značkovacího jazyka, CSS jako kaskádových stylů a JavaScript jako skriptovacího jazyka na klientské straně se někdy souhrnně nazývá DHTML nebo dynamické HTML. Kromě jiného se JavaScript používá pro mnohé rozšíření aplikací, např.: Adobe Acrobat (od verze 3.02 se využívá například pro interaktivní formuláře). (73) b) Princip jazyka Vypsání řetězce v HTML dokumentu Pro zavolání jazyka JavaScript například z HTML dokumentu se používá párový tag <script> a uzavření </script>. Samotný skript se pak umístí mezi tyto dva tagy. Nutnou podmínkou pro spuštění takového bloku kódu je povolení JavaScript ve webovém prohlížeči (ve všech prohlížečích je většinou standardně povoleno). V případě, že v prohlížeči je JavaScript z nějakého důvodu zakázán (preference uživatele, bezpečnostní politika apod.), lze použít párové tagy <noscript> a </noscript> pro vypsání alternativního obsahu bez použití JavaScript. (72) Zdrojový kód 6: Ukázka vypsá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 Volání externího JavaScript souboru Podobně jako v případě CSS stylů je možné JavaScript ukládat do externích souborů s příponou „.js“ a ty vzdáleně volat z daného HTML dokumentu. K tomu slouží následující jednoduchá syntaxe HTML. (72) Zdrojový kód 7: Zavolání externího JavaScript souboru z HTML dokumentu. <script type="text/javascript" src="script.js"></script> Zdroj: Vlastní zpracování Použití Jak již bylo výše uvedeno, JavaScript se používá hlavně jako dynamický prvek k HTML dokumentu, který na straně klienta volá a načítá data se serveru nebo je pak naopak na sever odesílá bez nutnosti znovunačtení webových stránek v prohlížeči (asynchronní zpracování webových stránek pomocí AJAX14). (73) Dále umožňuje animaci a transformaci různých prvků webových stránek. V tomto nahrazuje například dřívější roli Flash. Díky různým outsource knihovnám a pluginům je v JavaScript implementována již řada hotových řešení jako např.: animované posuvníky, interaktivní multimediální galerie, přehrávače multimédií, implementace Drag & Drop15 apod. (72) JavaScript se také používá pro validaci webových formulářů, vytváření interaktivních AJAX formulářů, pro vytváření analytických a statistických nástrojů pro internetový marketing nebo vytváření samotných webových aplikací, widgetů nebo her. (73) 14 Asynchronous JavaScript and XML (AJAX) – sada metod a technologií pro vývoj interaktivních webových aplikací, která umožňuje přenášet data mezi prohlížečem a server na pozadí. (72) 15 Drag & Drop – gesto pro přesunutí objektu (souboru či složky) z jednoho místa na druhé. Takto lze přenášet např. objekty z lokálního úložiště na sever apod. (72) 63 Podklady První část tvorby elektronické učebnice spočívá ve správném výběru a kvalitě podkladů připravených k publikaci. Důležitá je jejich správné uchopení a interpretace s ohledem na vybranou publikační technologii a druh čtenáře. Pro tento projekt učebnice programování budou použity přednáškové materiály dostupné z informačního portálu Unicorn College ke studijním účelům. Pro vytvoření studijní 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ální dokumentace programovacího jazyka Ruby dostupná z http://ruby-lang.org. Obrázek 6: Struktura obsahu ukázkové části učebnice programování. Zdroj: Vlastní zpracování Analýza a návrh Pro vytvoření elektronické knihy je třeba vyřešit otázky technické, grafické a typografické. Technické otázky byly vyřešeny již v předchozích částech. Dále je nutné navrhnout grafický přebal knihy, který s bude zobrazovat v knihovně iBooks a případně později v obchodě iTunes. Výše uvedený obsah je potřeba rozdělit na oddíly a bloky textu, které budou odpovídat zvolené šabloně a sazbě textu. Nutné je také zvolit jednotný formát a stylování nadpisů, odrážek tabulek, jednoduchého textu apod. Dále je potřeba navrhnout rozvržení grafických a interaktivních prvků pro jejich vhodné a snadno 64 ovladatelné vložení do textu. Pro specifický obsah učebnice programování je třeba také navrhnout jednotný styl ukázek zdrojového kódu a výstupu ukázkových aplikací. Pro účely tvorby ukázkové učebnice programování byly zvoleny následující parametry: Šablona knihy: Moderní základní (pouze na výšku) Název kapitoly: Helvetica, tučné, 42pt, #000000 Název oddílu: Helvetica, tučné, 32pt, #000000 Nadpis úrovně 1: Helvetica, tučné, 24pt, # 444444 Nadpis úrovně 2: Helvetica, tučné, 20pt, # 444444 Citát zavěšený: Helvetica Neue, tučné, 18pt, #000000 Základní text: Helvetica Neue, Regular, 17pt, #000000 Ná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 Obrázek 7: Návrh obrazovky (vlevo) a návrh učebnice z iBooks Author. Zdroj: Vlastní zpracování Implementace Pokud má autor (nebo zadavatel projektu) ujasněné základní 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řípravu vývojového prostředí a jeho nastavení. iBooks Author lze bezplatně stáhnout z App Storu do operačního systému OS X a vývojář (či autor) může začít v tvorbě. Aplikace iBooks tamtéž, od verze iOS8 je dokonce integrována přímo do systému mobilních zařízení. Díky funkci Náhled (Preview) v iBooks Author lze první výsledky tvorby otestovat přímo v daném zařízením s aplikací iBooks připojeném přes USB k počítači či desktopové aplikaci iBooks. To přináší výborné a rychlé výsledky testování pro dané zařízení. Rozpracovaná kniha se uloží do fyzické paměti zařízení a je tak i v implementační fázi k dispozici v zařízení bez nutnosti připojovat ho k USB. Tato vlastnost je vhodná i k inkrementačnímu vývoji např. s více členy týmu (např. za použití cloudových služeb, sdílenému úložišti apod.). 66 a) Text, obrázky, widgety Text Sazba textu v iBooks Author probíhá velmi jednoduše. Aplikace se chová podobně jako textový procesor Microsoft Word nebo Pages. Přednastavené šablony mají bohatě přednastavené styly pro různé typy písem. Možné je i nové styly vytvářet pomocí panelu Pí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 existují. Podobně jednoduše jako v jiných textových procesorech lze v iBooks Author jednoduše vytvářet tvary, tabulky a grafy. Obrázek 8: Ukázka formátování textu ve výřezu ukázky učebnice programování. Zdroj: Vlastní zpracování Obrázky Obrázky lze opět vkládat velmi jednoduše několika intuitivními způsoby. Za prvé lze obrázek jednoduše z místa úložiště přesunout metodou Drag & Drop. Taktéž lze obrázek vložit metodou Copy a Paste. Další možností je využití nabí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ání textu až po odkazy a formátování. 67 Obrázek 9: Ukázka vloženého obrázku s obtékáním textu, widgetu Vyskakovací překryv a panelu Inspektor v otevřeném projektu tvorby učebnice programování iBooks Author. Zdroj: Vlastní zpracování Widgety Jak již bylo výše u popisu iBooks Author uvedeno, existují různé druhy widgetů. Předpřipravené widgety přímo v iBooks Author se vkládají přímo z panelu Widgety do obsahu projektu. Widgety vytvořené a uložené do formátu WDGT se přesunou metodou Drag & Drop z místa úložiště do projektu. Nastavení takového vlastního widgetu je nutné provést ve zdrojových soubor ještě před vložením do projektu (Bookry.com nebo BookWidgets widgety nabízí uživatelské rozhraní pro nastavení chování widgetu a poté je teprve vygenerován daný WDGT soubor s vygenerovaným individuálním uživatelským nastavením). 68 Obrázek 10: Ukázka vložení a nastavení widgetu v panelu Inspektor v iBooks Author. Zdroj: Vlastní zpracování Pro účely implementace budu vkládat do vzorového projektu v iBooks Author widget Test. 1. Nejprve je nutné vytvořit nebo otevřít již existující iBooks projekt v iBooks Author (Příloha 2: Vytvoření nového projektu v iBooks Author nebo otevření již rozpracovaného projektu). 2. V horním menu vybrat ikonu s popiskem Widget a kliknout na položku Test (Příloha 3: Výběr widgetu pro vložení do projektu elektronické učebnice). 3. Vloží se obsah widgetu do projektu a na straně obrazovky se zobrazí panel s nastavením widgetu Inspector (Příloha 4: Nastavení widgetu Test pomocí bočního panelu Inspector.. 4. V záložce Interakce lze nastavit otázky a k nim nabízené možnosti odpovědí. Zároveň je pod boxem Otázky možné tlačítkem „+“ nastavit formát odpovědí (Vícenásobná volba, Přetáhněte štítek na cíl, Přetáhněte miniaturu na cíl). 5. V záložce Uspořádání je možné nastavit popisky a náhled widgetu přímo v textu. 6. Dále je možné nastavovat velikost a pozici objektu widget v textu (Příloha 14: 69 b) Vlastní HTML widget Vzhledem k tomu, že tvorba interaktivních prvků probíhá odděleně od ostatního obsahu knihy a často i v jiných aplikacích, je vhodné je vytvořit hned na začátku a pak teprve je vložit na dané místo knihy. Vytvoření vlastního widgetu pro elektronickou učebnici v iBooks dodává vývojáři nejvíce svobody a individuality. Není svázán žádným uživatelským rozhraním, kromě iBooks samotného, funkčnost si může navrhnout sám a HTML5, CSS a JavaScript technologie mu dávají dostatečné zázemí pro vývoj. Pokud by požadoval širší technologické prostředky, práci s většími daty, komunikace se serverem, databází, HTML5 a JavaScript může použít pro volání skriptovacích jazyků na serveru a danou funkčnost přeneseně zabezpečit tímto způsobem (například PHP nebo Ruby on Rails webová aplikace, MySQL databáze, komunikace s webovým API pro zajištění funkce určité business logiky). Toto však není rozsahem této práci a patří spíše do témat řešící webové aplikací a služby, se kterými je možné widget v iBooks napojit. Cílem této práce je ukázat vývoj a práci s widgety, které značně rozšiřují dimenze použití elektronických učebnic díky platformě iBooks a dík čemuž je vhodné při tvorbě elektronické učebnice tyto funkčnosti zohlednit a případně právě kvůli těmto benefitům na této platformě stavět. Proto budu nyní demonstrovat názorný postup vývojáře v iBooks pro tvorbu vlastního HTML widgetu. Popis zadání Cílem této části je vytvořit interaktivní widget pro učebnici programování iBooks. Jeho účelem je obohacení typicky statických ukázek zdrojového kódu jazyka Ruby v učebnici programování o animaci. Tato krátká animace čtenáři názorně a interaktivní formou ukáže, jak při interpretaci daného kódu postupuje např. konzole daného programovacího jazyka. Animace by měla postupovat sekvenčně po řádcích dle logiky dané ukázky kódu Ruby. Řádky kódu by měly být očíslovány a obarveny podobně jako je zvykem v editorech programovací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: Uká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 Zdroj: Vlastní zpracování Vzhled widgetu by měl připomínat logicky rozvržení editorů kódu nebo některých IDE. Hlavní část by měl zaujímat panel s ukázkou daného kódu Ruby, který text učebnice aktuálně probírá. Pod tímto panelem se bude zobrazovat aktuální výstup daného kódu (podle toho, který řádek animace zrovna prochází). Vedle tohoto panelu se budou zobrazovat názvy proměnných daného kódu a jejich aktuální hodnoty. Celou animaci bude možné spustit od začátku až do konce bez přerušení tlačítkem Play all. Animaci bude možné i „krokovat“ po sekvencích kódu pomocí tlačítek Step forward nebo Step backward. Návrh Bude vytvořena HTML5 miniaplikace „Codewalker“, která bude pomocí HTML tagů vykonávat danou naprogramovanou funkčnost (dle použitého tagu) pomocí 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 hlavního HTML souboru a bude zformátován jako běžný obsah webové stránky. Dále vznikne hlavní JavaScript soubor, který bude sloužit jako jádro všech hlavních funkcí aplikace a bude implementovat všechny pomocné JavaScript externí knihovny. Bude vytvořena sada vlastních HTML tagů (vlastní tagovací jazyk), které bude v hlavním HTML souboru označovat části, kde spouštět dané funkce JavaScript skriptu. Díky tomu bude toto prostředí 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 uvidí staticky zapsaný zdrojový kód tak, jako by byl zapsán v textu učebnice. Pod ním budou tři hlavní ovládací tlačítka – Step Backward, Play All, Step Forward, pomocí nichž bude možné sekvenci animace kódu spustit celou od začátku až do konce nebo se v ní bude moci pohybovat po jednotlivých krocích vpřed a 16 Debugger – softwarový nástroj pro pro hledání chyb při vývoji a ladění software. 71 vzad. Pod těmito tlačítky budou dva textové rámečky – jeden bude pro zobrazení aktuální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 zobrazení aktuálních hodnot proměnných (známé jako např. Navigator nebo Outline). Podmínky pohybu po řádcích bude zajišťovat hlavní JavaScript soubor. Základní podmínky jsou: - Při prvním spuštění widgetu nelze jít o krok zpět (Step Backward), ale pouze kupředu (Play All, Ste Forward). - Obarvení řádku značí interpretování daného řádku. Pokud význam kódu daného řádku mění hodnoty proměnných či výstupu, je třeba je v danou chvíli zobrazit v příslušných panelech - Pokud se celá animace prochází po krocích, ke třeba v každém kroku zobrazit danou správnou hodnotu proměnných a výstupu v příslušných panelech - Kdykoliv je možné aktivovat nebo skrýt popisky kódu tapnutím na daný popsaného kódu. Návrh procesu spuštění animace widgetu představuje následující obrázek. Obrázek 11: Návrh průběhu aktivit po spuštění vlastního widgetu Codewalker (Activity Flow diagram). Zdroj: Vlastní zpracování 72 Návrh uživatelského rozhraní představuje následující obrázek. Obrázek 12: Návrh uživatelského rozhraní po spuštění vlastního widgetu Codewalker. Zdroj: Vlastní zpracování Implementace Pro realizaci jsem se rozhodl použít primárně doporučené technologie firmou Apple Inc.: HTML5, CSS a JavaScript, které vyhovují pro implementaci výše uvedených funkčností a jsou při správném požití dobře rozšiřitelné do budoucnosti (v případě nutnosti rozšířit widget o další funkce – např. komunikaci s webovým serverem, databází atd.). Bylo by pravděpodobně možné použít i některé starší verze syntaxe HTML či nějaký generátor webové aplikace (např. WYSIWYG editor). V rámci této práce ale nebylo testováno nasazení takto implementovaného widgetu pro iBooks a v rámci vlastních zkušeností taková implementace HTML nikdy není časově ani kvalitativně efektivní. Další výhodou těchto technologií je jejich rozšířenost, bezplatné používání, široké portfolio vývojových aplikací, knihoven, pluginů a jiných podpůrných prostředků. V rámci této práce nastíním kostru a části zdrojových souborů pro tvorbu vlastního widgetu spolu s postupem jejich převodu do WDGT formátu a vložení do projektu iBooks Author, jak bylo uvedeno již v předchozích kapitolách u jiných druhů widgetů. Není v rozsahu této práce popis všech domén, tříd a částí kódu, předpokládá se v případě aplikace metody implementace vlastního widgetu již pokročilejší znalost vývojáře zmíněných technologií (praxe se pro vývoj widgetu v ničem neliší od vývoje běžné webové aplikace s těmito 73 technologiemi). Můj popis tedy slouží spíše pro demonstraci a důkaz aplikovatelnosti této metody pro vytvoření widgetu pro interaktivní elektronické učebnice. Struktura HTML soubory – hlavním souborem, který se volá při spuštění widgetu (kromě konfiguračního soubor Info.plist) je index.html. V tomto souboru je definovány odkazy na ostatní soubory, je zde umístěn obsah widgetu (kódu cyklusu v Ruby) a označkován tak, aby se v dané části obsahu volaly dané třídy CSS či funkce nebo pluginy JavaScript. CSS soubory – hlavní soubor main.css definuje vzhled jednotlivých tříd a atributů HTML kódu, kterou jsou definovány v index.html a tvoří tak grafickou šablonu widgetu. JavaScript soubory – tvoří hlavní kostru funkcí programu, které obstarávají fungování widgetu dle zadání a návrhu. Main.js je hlavním souborem aplikace, plugins.js se stará o spolupráci s doprovodnými pluginy Info.plist – konfigurační soubor Info.plist definuje základní nastavení widgetu. Konfigurace těchto souborů je popsána v oficiální 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> Zdroj: Vlastní zpracování 74 Default.png – náhledový obrázek widgetu. Zobrazí se v obsahu učebnice po přidání widgetu do projektu iBooks Author. Uživatel jej pak v iBooks uvidí v textu učebnice a díky náhledu odliší daný widget od ostatního obsahu. Pro widget Codewalker byl použit snímek obrazovky spuštěného widgetu. Obrázek 13: Náhledová obrázek widgetu Codewalker Default.png. Zdroj: Vlastní zpracování Bez těchto souborů nelze widget po převodu do formátu WDGT spustit. Konfigurace těchto souborů je popsána v oficiální dokumentaci. (63) Naopak zdrojové soubory lze ze soboru formátu WDGT získat zpět přejmenováním souboru z „nazev_widgetu.wdgt“ na soubor bez přípony: „nazev_widgetu“. Po odstranění přípony se archiv převede automaticky zpět na složku. Taktéž je možné do souboru nahlížet v operačním systému OS X 10.4 a vyšší sekundárním poklepáním myši na soubor a zvolením volby „Zobrazit obsah balíčku“ bez nutnost opětovné konverze z formátu WDGT. Následující obrázek znázorňuje sktrukturu složek a souborů widgetu Codewalker. 75 Obrázek 14: Struktura složek a souborů widgetu před převodem do WDGT formátu pro iBooks. Zdroj: Vlastní zpracování Použité knihovny Pro danou funkčnost widgetu definovanou v zadání jsem implementoval řadu pluginů s již předpřipravenými funkcemi. Zde uvádím jejich soupis a krátký popis: Font Awesome (verze: 3.2.1) – toolkit, který díky vektorovým ikonám a CSS přidává škálovatelné grafické ikony do vzhledu bez nutnosti použití 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žití. 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 zvyklí z některých programovacích editorů. Existují zde široké možnosti nastavení 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ání autorství a zřeknutí se odpovědnosti) tzv. disclaimer), jinak je použití svobodné. jQuery (verze: 2.0.3) – JavaScriptová knihovna, která pomáhá s interakcí HTML a JavaScript, odděluje a zjednodušuje definici chování programu od jeho 76 vzhledu. jQuery je k dispozici ke stažení na http://jquery.org. Podléhá licenci MIT, která neomezuje použití 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 prohlíž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ání CSS prvků pro vzhled šablony. Repozitář tohoto frameworku se nachází na http://github.com/twbs/bootstrap a vznikl z Boostrap frameworku dostupného na http://getbootstrap.com pod licencí MIT. Underscore (verze: 1.5.1) – tato knihovna dodává JavaScriptu různé užitečné funkce pro usnadnění a zrychlení práce. Dostupná je na http://underscorejs.org pod licencí MIT. Konkrétní obsah, nastavení a užití pluginů je k nahlédnutí v Příloze B této práce. Zdrojový kód V rámci následujícího textu popíši kódovou část widgetu. Vzhledem k tomu že není cílem této práce prokázat metody používání jazyka HTML, CSS nebo JavaScript, ale metody tvorby interaktivních widgetů a jejich výhody, budu popisovat pouze hlavní část aplikace soubor index.html, která je libovolně upravovatelná dle typu obsahu, který je v ní třeba prezentovat (v případě widgetu Codewalker je to zdrojový kód programovacího jazyka). Tento soubor je jakýmsi „středobodem“, kde se uplatňují všechny funkce JavaScriptu a využívají CSS třídy k formátování výstupu. Ostatní soubory zajišťují 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říloha B k nahlédnutí a vyzkoušení. index.html HTML soubor index.html pro zobrazování obsahu widgetu, propojení funkcí v JavaScriptu a grafické sabloně CSS je v hlavní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čátek těla programu v HTML dokumentu. 16 <div class="row wrapper"> Zdroj: Vlastní zpracování 77 Následně je definován začátek několika CSS tříd, zejména třídy prettyprint pro obarvování Ruby kódu a linenums pro styl čísel řádků. Zdrojový kód 11: Definování začátku CSS tříd 20 <pre class="prettyprint linenums interface window"> Zdroj: Vlastní zpracování Po předchozí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 zdrojového kódu Ruby a tagů pro definici chování animace kódů ovládaného JavasScriptem. <!-- 1.řádek --> <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. <!-- 2.řádek --> 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"> <!-- 3.řádek --> 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> <!-- 4.řádek --> print x <console data-repeat="1" data-content="0 "></console> <console data-repeat="2" data-content="0 1"></console> <console data-repeat="3" data-content="0 1 2"></console> <console data-repeat="4" data-content="0 1 2 3"></console> <console data-repeat="5" data-content="0 1 2 3 4"></console> <console data-repeat="6" data-content="0 1 2 3 4 5"></console> <variable data-name="x" data-repeat="0">0</variable> <variable data-name="x" data-repeat="1">0</variable> <variable data-name="x" data-repeat="2">1</variable> <variable data-name="x" data-repeat="3">2</variable> <variable data-name="x" data-repeat="4">3</variable> <variable data-name="x" data-repeat="5">4</variable> <variable data-name="x" data-repeat="6">5</variable> <!-- 5.řádek --> <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> <console data-repeat="2" data-content="0 1"></console> <console data-repeat="3" data-content="0 1 2"></console> <console data-repeat="4" data-content="0 1 2 3"></console> <console data-repeat="5" data-content="0 1 2 3 4"></console> 78 <console data-repeat="6" data-content="0 1 2 3 4 5"></console> <!-konec 5.řádek --> </sequence> Zdroj: Vlastní zpracování Pomocí komentářů <! -- --> jsou od sebe oddělené jednotlivé bloky kódu podle toho, který řádek vysvětlovaného Ruby kódu popisují. Značka <sequence> uzavírá blok kód, který má být sekvencí, tzn. má se vícekrát opakovat jako cyklus. Každou takovou sekvenci je nutné označit id a počtem opakování repeat. Pokud se sekvence nemá opakovat, repeat musí mít hodnotu 1. Pro každý řádek kódu je nutné definovat značku a atribut variable, který nastavuje hodnotu aktuální proměnné v dolním okně aplikace (podobně jako Outline v Eclipse nebo Aptana). Data-name je názvem proměnné (například „x“), data-repeat označuje pro kolikáté opakování dané sekvence mají tyto atributy platit (například „x = 4“ pro 1. opakování, „x = 5“ pro 2. opakování) a nakonec mezi samotnými značkami <variable> je hodnota předepisované proměnné. Značky popover mezi sebe uzavírají řetězec, který má být popsán popiskem ve vyskakovacím okně (například: „length – metoda pro zjištění délky řetězce“). Popisek se definuje atributem data-content. Poslední důležitou značkou pro kódování výstupu je <console>. Mezi tuto značku se uzavírá hodnota výstupu v dolním okně (ekvivalent okna Output z Netbeans nebo Console z Eclipse). Atribut data-repeat musí obsahovat číslo, které udává po kolikátém opakování sekvence se má zobrazit následující hodnota okna. Data-content udává samotnou zobrazovanou hodnotu. Jakékoliv řetězce uzavřené i neuzavřené mezi značky aplikace vypíše jako text. Další části kódu popisují zobrazení ovládacích prvků, velikosti dolních oken Output a Outline a na konci souboru jsou definovány odkazy na produkční JavaScriptové soubory. Dodatek Výhodou tohoto značkování je, že daná funkcionalita způsobená počátečním a ukončovací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 funkcí. V případě nutnosti provádět jiné typy pohybu jako např.: přeskakování či označování řádků v animaci, složité podmínky a cykly, které by kombinace použití těchto tagů nepodporovaly, bylo by nutné doprogramovat a použít případně další JavaScript funkce či knihovny. 79 main.js V této části zmíním některé důležité prvky JavaScript kódu. Důležité části proměnných a nastavení funkcí 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 milisekundá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 Zdroj: Vlastní zpracování Ve výše uvedené části kódu (ve zdrojovém souboru dalších 20 řádek s nastavením selektorů pro ovládací prvky widgetu) se určují základní proměnné pro inicializaci funkcí JavaScript. Například funkce pro uvedení widgetu do výchozí pozice při prvním spuštění vypadá takto: Zdrojový kód 14: Funkce setWalkers pro nastavení ovlá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 Zdroj: Vlastní zpracování Důležité je ve výše uvedené části zpřístupnění všech tlačítek uživatelského rozhraní kromě tlačítka Step Backward: Zdrojový kód 15: Funkce disableBack pro zakázní tlačítka Step Backward. disableBack: function() { this.$prev.attr('disabled', true); }, Zdroj: Vlastní zpracování Ověření pro tuto funkci (například v případě již jednoho spuštění celé animace widgetu až do konce, je třeba uvést animaci do výchozího stavu jako na začátku a zakázat tlačítko Step Backward) vypadá takto: Zdrojový kód 16: Podmínka, která ověřuje, v jakém stavu se animace nachází a podle toho povoluje tlačítko Step Backward. if ( ( this.curr == 0 || this.curr == 1 ) && this.currRepeat == 1 ) { this.disableBack(); } else { this.enableBack(); } Zdroj: Vlastní zpracování Podobně jsou implementovány i ostatní 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 podmínek zadání tohoto widgetu. main.scss Uživatelské rozhraní bylo vytvořeno podle návrhu uvedeného v podkapitole Návrh. Celou šablonu tvoří vykreslené prvky pomocí CSS a vektorové ikony pro ovládací prvky Step Backward, Play All a Step Forward (knihovna Font Awesome a SASS Bostrap). Díky tomu, že nejsou implementovány žádné bitmapové grafické prvky, lze uživatelské prostředí přizpůsobovat různým velikostem obrazovek a je z tohoto hlediska tzv. responsivní. 81 Obrázek 15: Náhled uživatelského prostředí pro widget Codewalker. Zdroj: Vlastní zpracování Šedý panel obsahující většinu ovládacích a funkčních prvků je definován tří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; Zdroj: Vlastní zpracování Vzhledem k tomu, že k tomuto projektu bylo použito Sass17 (SASS Bostrap), je možné pro lepší efektivitu a znovupoužití kódu definovat pro některé hodnoty proměnné. Ve výše uvedené ukázce je například hodnota horní odřádkování „padding-top“ definovaná v proměnné „$unit“, která je v souboru samostatně uložena. 17 Syntactically Awesome Style Sheets (Sass) – stylovací jazyk pro vytváření složitějších skriptů, které jsou následně interpretovány klasickým CSS jazykem. (92) 82 Zdrojový kód 18: Proměnná $unit s hodnotu 20px. $unit: 20px; Zdroj: Vlastní zpracování Jednotlivé panely základního panelu „.well“, který velikost řídí dle výšky zobrazovače (nebo prohlížeče), jsou definovány flexibilně podle procent. To oproti pevnému definování velikosti (např. na obrazové body) přináší možnost automatického přizpůsobení panelů dle aktuální velikosti nadřazené prvku (v tomto případě základní šedý panel „.well“). Zdrojový kód 19: Proporcionálně definované panely zá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; } Zdroj: Vlastní zpracování Převod souborů HTML, CSS, Javascript do WDGT Jak již bylo uvedeno v předchozí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 není widget již součástí iBooks Author). Pokud vývojář vyrobil aplikaci za pomocí technologií HTML, CSS a JavaScript a je možné úspěšně otestovat a spustit funkčnost dané aplikace v jakémkoliv jiném produkčním prostředí (webový server, operační systém apod.) pak by měla být zaručena funkčnost i v iBooks, který tyto technologie podporuje. Nejdří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ční soubor (viz Specifikace v Kapitole 5.3). Pokud ne, pak je nutné jej s náhledem do oficiální dokumentace k iBooks Auhtor (63) vytvořit, jinak se widget v iBooks nespustí. 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 umístěny v jedné složce, lze přistoupit ke změně formátu widgetu. 1. V prostředí operačního systému OS X je třeba přejmenovat složku se soubory podle této konvence: „nazev_widgetu.wdgt“ (Příloha 16: Převod složky ). 2. Po odsouhlasení vyskakovacího okna upozorňujícího na změnu formátu je vytvořen widget ve formátu WDGT (viz podkapitola Formátování v kapitole: 5.3) (Příloha 17: Vytvořený vlastní widget ve formátu WDGT). 3. Widget lze implementovat do nového iBooks projektu nebo otevřením již existujícího. Poté už stačí do jakéhokoliv místa obsahu dané vytvářené učebnice přesunout soubor WDGT metodou Drag & Drop (Příloha 18: Náhled widgetu Codewalker). Naopak zdrojové soubory lze ze soboru formátu WDGT získat zpět přejmenováním souboru z „nazev_widgetu.wdgt“ na soubor bez přípony: „nazev_widgetu“. Po odstranění přípony se archiv převede automaticky zpět na složku. Taktéž je možné do souboru nahlížet v operačním systému OS X 10.4 a vyšší sekundárním poklepáním myši na soubor a zvolením volby „Zobrazit obsah balíčku“ bez nutnost opětovné konverze z formátu WDGT. Nasazení widgetu Výhodou HTML5 aplikací je jejich vcelku snadná přenositelnost (stačí udržovat správnou strukturu adresářů) a široké portfolio podporovaných programů, ve kterých je možné je spustit – především většinu současných webových prohlížečů. Testování nasazení HTML5 widgetu může probíhat několika způsoby. 1. Spuštením index.html souboru ve webové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í systém: Windows 8.1 Prohlížeč Mozilla Firefox 31 84 V operačním systému OS X 10.4 a vyšší je třeba vyvolat sekundárním kliknutím kontextovou nabídku. Zde vybrat „Zobrazit obsah balíčku“ (jak již bylo výše uvedeno, WDGT používá k uložení ZIP kompresi, není tedy problém v OS X jej otevřít) a v následně vyvolaném okně aplikace Finder otevřít soubor „index.html“. Widget Codewalker se otevře ve výchozím prohlížeči systému a je možné vyzkoušet jeho funkčnost. Obrázek 16: Test nasazení widgetu v prohlížeči Firefox. Zdroj: Vlastní zpracování 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í systém: OS X 10.9 Dashboard 1.8 Dvojitým poklepáním na soubor WDGT v OS X 10.4 a vyšší spustit widget. Zobrazí se dialogové okno, zda uživatel chce nainstalovat widget. V aplikaci Dashboard poté pomocí tlačítka přidat zvolit widget Codewalker a vyzkoušet jeho funkčnost. 85 Obrázek 17: Test nasazení widgetu v aplikaci Dashboard. Zdroj: Vlastní zpracování 3. Vložením WDGT do projektu v iBooks Author a funkcí Náhled Testovací sestava: Typ zařízení: Apple iPad Mini (A1455) Rozlišení obrazovky 1024 x 768 Procesor: A5 processor Paměť: 512 MB RAM Operační systé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 horním panelu tlačítko Náhled a vybrat zařízení, do kterého se má koncept projektu přenést (desktopová verze aplikace iBooks nebo připojení mobilního zařízení přes USB a mobilní verze iBooks). Otevře se aplikace iBooks s daným projektem učebnice. Na místě, kam byl vložen widget Codewalker je možné vyzkoušet jeho funkčnost. 86 Obrázek 18: Test nasazení widgetu v aplikaci iBooks. Zdroj: Vlastní zpracování 87 Podpora Pro poslední verzi widgetu Codewalker byly použity výše uvedené knihovny a frameworky (Použité knihovny na straně 76) v uvedených verzích. Plná funkčnost je vyzkoušena na následujících operačních systémech a aplikacích. Tabulka 3: Otestované operační systémy a aplikace pro podporu widgetu Codewalker. Operační systé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 Zdroj: Vlastní zpracování Novější verze těchto operačních systémů a prohlížečů nebyly testovány a tudíž není garantována plná funkčnost. Funkčnost v multiplatformních prohlížečích (Chrome, Firefox, Opera) i ve vyšších verzích by však neměla být ovlivněna (vydavatelé těchto prohlížečů většinou kladou velký důraz na podporu širokého spektra technologií i na např. zpětnou kompatibilitu HTML verzí, JavaScript knihoven apod.). Shrnutí tvorby vlastního widgetu V této podkapitole bylo ověřeno, že vlastní objekt typu widget lze díky technologií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á testovací zařízení. Samotný proces vývoje závisí na náročnosti zadání a schopnostech vývojáře. Vyvinout vlastní widget může trvat od 1 hodiny po několik dnů. Vyvinout složitější HTML5 aplikace může trvat i několik měsíců v závislosti na zadání. Samotný převod do formátu WDGT a jeho nasazení na testovací sestavu trvá cca 5 minut. Výsledkem této metody je přidaná hodnota v podobě individuálního widgetu, přizpůsobeného na míru potřebám projektu. V případě, že zadavatel či vývojář má požadavek na vytvoření interaktivní funkce do elektronické učebnice pro daný kontext výuky, je tato metoda vhodná. Oproti předpřipraveným widgetům lze vytvořit vlastní funkčnost a individualizovat widget na základě požadavků. Navíc widget v HTML5 je možné použít i v jiných aplikacích, které podporují HTML5, CSS a případně JavaScript (např. webový 88 server, lokálně či jiné systémy a aplikace). Větší dopad takovýchto miniaplikací může být při jejich komplexnějším použití v kombinaci s ostatními interaktivními prvky a texty začleněnými do komplexnějšího prostředí e-learningu a výukových nástrojů. Nasazení učebnice Projekt tvorby učebnice lze průběžně testovat pomocí funkce Náhled. Pak je možné učebnici uložit do nativního formátu IBA nebo exportovat do formátu PDF či TXT. V případě kompletně vytvořené učebnice lze knihu publikovat do obchodu iTunes. Dále je možné distribuci provést lokálně pomocí uložení souboru a jeho přenesení do fyzického úložiště zařízení (např. pomocí synchronizace s aplikací iTunes v počítači). Pro účely testování vlastního projektu tvorby ukázkové části učebnice programování použiji funkci Náhled v iBooks Author a odkáži na výsledné obrázky v příloze z aplikace iBooks v zařízení iPad. Ostatní soubory učebnice, projektu a zdrojových kódů budou k dispozici v Příloze B. Pro zjištění zda je učebnice, styly, formátování, widgety apod. správně implementovány a fungují tak, jak vývojář předpokládá, je třeba provést test očekávané funkčnosti. Testem bude nasazení učebnice pro zobrazení v zařízení 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í systém iOS 7.0.6 iBooks 3.2 1. Otevření uloženého projektu pro tvorbu učebnice programování v iBooks Author ve formátu IBA. 2. Po zvolení tlačítka „Náhled“ se zobrazí vyskakovací okno a v něm je třeba zvolit zařízení pro náhled – v tomto případě „iPad“ (Příloha 15: Výběr zařízení pro 3. Na testovaném zařízení je nutné otevřít aplikaci iBooks. Následně se objeví okno s načítáním průběhu „Načítání náhledu“ a po jeho dokončení se otevře kniha v aplikaci iBooks s danou testovanou verzí projektu. 89 4. Následně je možné vyzkoušet všechny implementované funkce tak, jako by byla elektronická učebnice v produkční verzi. Obrázek 19: Test nasazení ukázky učebnice programování v aplikaci iBooks na iPad. Zdroj: Vlastní zpracování 90 Shrnutí projektu tvorby učebnice V této kapitole bylo ověřeno, že lze vytvářet do elektronických učebnic různé interaktivních prvky, včetně vlastních a jednoduše vytvářet ostatní obsah učebnice s technologiemi iBooks, iBooks Author, HTML5, CSS, JavasScript. Proces tvorby může trvat v závislosti na přípravě a složitosti projektu několik hodin nebo i několik měsíců. Samotná implementace v iBooks Author je velmi intuitivní a rychlá. Testování pomocí náhledu učebnice na daném zařízení probíhá v závislosti na velikosti souboru projektu také velmi rychle v řádu sekund až minut. Zpracování a ukázkové výstupy projektu lze dále použít pro kompletní dokončení projektu tvorby učebnice. Na základě navržené struktury, šablony, stylu a vytvořených grafických prvků apod. lze zpracovat další přednáškové materiály do obsahu elektronické učebnice. Následně lze učebnici publikovat v obchodě iTunes (tuto část blíž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čebnicí distribuovat lokálně nebo přes informační systém studentům školy. 91 7 Závěr Předmětem této bakalářské práce bylo prozkoumat aktuální stav trhu a technologií elektronických učebnic a navrhnout platformu pro tvorbu interaktivní elektronické učebnice. V teoretické části byly popsány historické a současné souvislosti mezi různými technologiemi a pří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šní době pohybuje v často velmi progresivním a nestálém prostředí, musí proto při rozhodování jakou technologii zvolit zvážit různé aspekty a skutečnosti. Proto se první část této práce zabývá různými platformami pro tvorbu elektronických učebnic dle jejich populárnosti. Srovnání jednotlivých nejpoužívanějších platforem pro tvorbu, čtení a stahování knih ukazuje, že je toto odvětví ještě velmi mladé a lze očekávat velké změny a vylepšení směrem k přinesení bohatšího a interaktivnějšího obsahu pro uživatele. S ohledem na zadané požadavky projektu je nejvhodnější Apple iBooks, který nabízí nejen aplikaci a zařízení pro čtení učebnic, ale i pro tvorbu komplexních interaktivních elektronických učebnic. Hlavním těžištěm interaktivnosti elektronických učebnic Apple iBooks je objekt nazývaný widget. Pomocí něj lze koncovým uživatelům přinést bohatší a zajímavější 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 funkcí, které iBooks Author pro tvorbu nabízí. Dále byl na základě zadání stejného projektu vytvořen vlastní 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é testovací sestavě. Příslušné zdrojové soubory projektu jsou přílohou této práce. Touto prací 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 cílů zadání. Poznatky z této ukázkové tvorby se nyní mohou použít pro reálný projekt, který bude mít za cíl kompletní dokončení učebnice a její publikování. V rámci této bakalářské práce bylo dosaženo všech cílů a požadavků, které byly stanoveny. Její výsledky mohou přinést užitečné informace a zkušenosti další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. Ří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, Ří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. mí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áří 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. mí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. ří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. ří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.] Vlastní fazetové vyhledávání v oddělení 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. místo neznámé : Amazon Digital Services, Inc., 2014. ASIN: B00OOZ2WBW. 36. iBooks. Apple.com. [Online] 2014. [Citace: 4. září 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. prosinec 2014. [Citace: 6. prosinec 2014.] 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. mí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. říjen 2014.] http://partners.adobe.com/public/developer/xml/index_arch.html. 54. DOSTÁL, Jiří. 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 Encyclopedia., 12. prosinec 2014. [Citace: 22. prosinec 2014.] 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. prosinec 2014. [Citace: 19. prosinec 2014.] http://en.wikipedia.org/w/index.php?title=HTML5&oldid=638773046. 97 68. HTML5. [Online] W3C, 28. ří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 Encyclopedia., 21. prosinec 2014. [Citace: 22. prosinec 2014.] 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. prosinec 2014. [Citace: 29. prosinec 2014.] 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ření obsahu. Podpora Office. [Online] Microsoft Corporation. [Citace: 28. červen 2014.] http://office.microsoft.com/cs-cz/word-help. 81. BREŇOVÁ, Lubomí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. ří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. ří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. místo neznámé : Amazon Digital Services, Inc., 2011. ASIN: B004LX069M. 99 9 Seznam obrá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 publikací „Mechanical Encyclopedia". ........... 16 Obrázek 3: Rozložení jednotlivých ovládacích prvků projektu učebnice vytvořené v iBooks Author. ........................................................................................................... 43 Obrázek 4: Vložení 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 prohlížeči....................... 61 Obrázek 6: Struktura obsahu ukázkové části učebnice programování. ....................... 64 Obrázek 7: Návrh obrazovky (vlevo) a návrh učebnice z iBooks Author. .................... 66 Obrázek 8: Ukázka formátování textu ve výřezu ukázky učebnice programování. ..... 67 Obrázek 9: Ukázka vloženého obrázku s obtékáním textu, widgetu Vyskakovací překryv a panelu Inspektor v otevřeném projektu tvorby učebnice programování iBooks Author. ......................................................................................................................... 68 Obrázek 10: Ukázka vložení a nastavení widgetu v panelu Inspektor v iBooks Author. ...................................................................................................................................... 69 Obrázek 11: Návrh průběhu aktivit po spuštění vlastního widgetu Codewalker (Activity Flow diagram). ............................................................................................................. 72 Obrázek 12: Návrh uživatelského rozhraní po spuštění vlastní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ředí pro widget Codewalker. ....................... 82 Obrázek 16: Test nasazení widgetu v prohlížeči Firefox. ............................................. 85 Obrázek 17: Test nasazení widgetu v aplikaci Dashboard. .......................................... 86 Obrázek 18: Test nasazení widgetu v aplikaci iBooks. ................................................. 87 Obrázek 19: Test nasazení ukázky učebnice programování v aplikaci iBooks na iPad. 90 100 10 Seznam tabulek Tabulka 1: Porovnání 3 výrobců s globálně největším podílem na trhu a jejich platforem pro elektronické knihy a učebnice. .............................................................................. 39 Tabulka 2: Podpora HTML5 audia a videa populárními prohlížeči a mobilními OS. .... 57 Tabulka 3: Otestované operační 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žní podíl publikací a zábavního trhu pro rok 2013 (2).............. 15 Graf 3: Globální podíl na trhu e-booků v 10 vybraných zemích světa dle prodejce (USA, Velká Británie, Jižní Korea, Japonsko, Austrálie, Brazílie, Německo, Španělsko, Indie a Francie) (29) ................................................................................................................. 27 Graf 4: Podíl na trhu e-book pouze v USA dle prodejce. (29) ...................................... 27 102 12 Seznam příloh Příloha A Příloha 1: Sekce knih v obchodě iTunes po přístupu z aplikace iBooks. .................... 104 Příloha 2: Vytvoření nového projektu v iBooks Author nebo otevření již rozpracovaného projektu. .......................................................................................... 105 Příloha 3: Výběr widgetu pro vložení do projektu elektronické učebnice v iBooks Author. ....................................................................................................................... 106 Příloha 4: Nastavení widgetu Test pomocí bočního panelu Inspector. ..................... 107 Příloha 5: Zobrazení Keynote prezentace na celou obrazovku zařízení z widgetu umístěného přímo v textu učebnice. ......................................................................... 108 Příloha 6: Ukázka interaktivního obrázku s popisky při rozšíření na celou obrazovku zařízení. ...................................................................................................................... 109 Příloha 7: Widget vložený zarovnaný doprava od statického textu, díky kterému lze dotyky prstů po obrazovce otáčet 3D model molekul kolem vertikální nebo horizontální osy. ............................................................................................................................. 110 Příloha 8: Přechod z jedno obrázku (vlevo) na další obrázek (vpravo) pomocí tahu prstem ve widgetu Galerie obrázků. .......................................................................... 111 Příloha 9: Pravý postranní panel lze dotykem a tažením prstu dolů či nahoru posouvat, aniž by čtenář opustil aktuální stránku. ..................................................................... 112 Příloha 10: Widget Vyskakovací překryv (Popover) s popiskem. ............................... 113 Příloha 11: Widget Media s názornou ukázkou video přednášky. ............................. 114 Příloha 12: Odpovědi na otázky ve widgetu Test (Chapter review) mohou mít i grafickou podobu přiřazování daných obrázků k daným místům na obrázku či mapě. ............ 115 Příloha 13: Obsah widgetu vytvořeného individuálně v HTML zobrazující interaktivní model hmyzu, který po tapnutí na danou část modelu označí správný popisek a obrázek výše. ........................................................................................................................... 116 Příloha 14: Ukázka nastaveného widgetu test se 4 otázkami a 1 správnou odpovědí. .................................................................................................................................... 117 Příloha 15: Výběr zařízení pro nasazení pomocí funkce Náhled. ............................... 118 Příloha 16: Převod složky se zdrojovými soubory do formátu WDGT. ...................... 119 Příloha 17: Vytvořený vlastní widget ve formátu WDGT. .......................................... 120 Příloha 18: Náhled widgetu Codewalker v mobilní 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. Zdroj: Vlastní zpracování 104 Příloha 2: Vytvoření nového projektu Příloha 2: Vytvoření nového projektu v iBooks Author nebo otevření již rozpracovaného projektu. Zdroj: Vlastní zpracování 105 Příloha 3: Výběr widgetu Příloha 3: Výběr widgetu pro vložení do projektu elektronické učebnice v iBooks Author. Zdroj: Vlastní zpracování 106 Příloha 4: Nastavení widgetu Příloha 4: Nastavení widgetu Test pomocí bočního panelu Inspector. Zdroj: Vlastní zpracování 107 Příloha 5: Widget Keynote prezentace Příloha 5: Zobrazení Keynote prezentace na celou obrazovku zařízení z widgetu umístěného přímo v textu učebnice. Zdroj: (36) 108 Příloha 6: Widget interaktivní obrázek Příloha 6: Ukázka interaktivního obrá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 statického textu, díky kterému lze dotyky prstů po obrazovce otáčet 3D model molekul kolem vertikální nebo horizontální osy. Zdroj: (36) 110 Příloha 8: Widget Galerie Příloha 8: Přechod z jedno obrázku (vlevo) na další obrázek (vpravo) pomocí tahu prstem ve widgetu Galerie obrá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 čtenář opustil aktuální strá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 názornou ukázkou video přednášky. Zdroj: (36) 114 Příloha 12: Widget Test (Chapter review) Příloha 12: Odpovědi na otázky ve widgetu Test (Chapter review) mohou mít i grafickou podobu přiřazování daných obrázků k daným místům na obrázku či mapě. Zdroj: (36) 115 Příloha 13: HTML5 widget Příloha 13: Obsah widgetu vytvořeného individuálně v HTML zobrazující interaktivní model hmyzu, který po tapnutí na danou část modelu označí správný popisek a obrázek výše. Zdroj: (36) 116 Příloha 14: Nastavený widget Test Příloha 14: Ukázka nastaveného widgetu test se 4 otázkami a 1 správnou odpovědí. Zdroj: Vlastní zpracování 117 Příloha 15: Výběr zařízení pro deployment Příloha 15: Výběr zařízení pro nasazení pomocí funkce Náhled. Zdroj: Vlastní zpracování 118 Příloha 16: Převod složky do WDGT Příloha 16: Převod složky se zdrojovými soubory do formátu WDGT. Zdroj: Vlastní zpracování 119 Příloha 17: Vytvořený vlastní widget ve formátu WDGT Příloha 17: Vytvořený vlastní widget ve formátu WDGT. Zdroj: Vlastní zpracování 120 Příloha 18: Náhled widgetu Codewalker Příloha 18: Náhled widgetu Codewalker v mobilní aplikaci iBooks na iPad. Zdroj: Vlastní zpracování 121 Příloha B: Obsah přiloženého CD Obsah CD je organizován do následující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ání s aplikovanými prvky z iBooks Author ve formátu IBA. Widget Codewalker – obsahuje vytvořený HTML5 widget ve formátu WDGT. 122