Vy voj webovy ch aplikacı pro provoz na mobilnı c h telefonech

Transkript

1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Katedra informačních technologií Studijní program: Aplikovaná informatika Obor: Informatika TÉMA BAKALÁŘSKÉ PRÁCE Vy voj webovy ch aplikacı pro provoz na mobilnı c h telefonech Student: Michael Žabka Vedoucí bakalářské práce: Ing. Jan Mittner Oponent bakalářské práce: doc. Ing. Alena Buchalcevová, Ph.D. Rok: 2012

2 Prohlášení Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a že jsem uvedl všechny použité prameny a literaturu, ze které jsem čerpal. V Praze dne Jméno a příjmení studenta

3 Poděkování Rád bych poděkoval vedoucímu práce Ing. Janu Mittnerovi, který mi poskytnul cenné informace a komentáře spojené s tématem práce. Dále bych rád poděkoval Františkovi Tomanovi za diskuse a konzultace ohledně tématu a ohledně bakalářské práce. Za gramatickou korekturu bych rád poděkoval své matce Elišce Žabkové a své přítelkyni Kateřině Švecové.

4 Abstrakt Tato bakalářská práce si klade za cíl popsat technologie využívané při vývoji mobilních webových aplikací, vysvětlit rozdíly mezi vývojem desktopových aplikací a aplikací mobilních a uvést příklad mobilní aplikace. Kromě webových aplikací jsou v práci zmíněny i nativní aplikace. Dále se práce věnuje mobilním platformám a zařízením a popisuje rozdíly mezi nimi. Pro vývoj webových aplikací jsou popsány nejvyužívanější frameworky jako jsou jquery Mobile, Sencha Touch apod. Zároveň se práce zabývá i vývojovými prostředími a emulátory, podporujícími tvorbu mobilních webových aplikací. K danému tématu existuje jenom velice strohá literatura a ještě méně zdrojů je v českém jazyce, proto jsem se rozhodl tuto práci zpracovat. Cíl je dosahován postupným vpravováním do tématu, popisováním současné situace na trhu a předpokládaného rozvoje tohoto odvětví. Následně jsou zpracovány a vysvětleny nejvyužívanější technologie a principy jejich používání a to především pomocí programovacího jazyka JavaScript. Ke konci práce je vytvořena ukázková aplikace, která ukazuje možnosti tvorby webových, ale i nativních aplikací. Klíčová slova Mobilní aplikace, webové aplikace, nativní aplikace, jquery Mobile, Sencha Touch, Android, iphone, PhoneGap, vývojová prostředí, vývoj aplikací, mobilní platformy.

5 Abstract This bachelor work aims to describe the technologies used for developing mobile web applications, explain the differences between developing desktop application and mobile application, and give an example of mobile application. In addition to web application are in the work also mentioned the native application. Further the work analyzes mobile platforms and devices, and describes the differences between it. For web application development are described the most frequently used frameworks such as jquery Mobile, Sencha Touch, etc. Work also describes the development environments and emulators that support the creation of mobile web application. For a given topic, there is a very austere literature and even fewer resources in the Czech language, so I decided to prepare this topic. The goal is achieved by gradually injected in to the topic, describing the current market situation and probable development of the sector. Subsequently are processed and explained most used technologies and principles of their use, especially using the programing language JavaScript. At the end of the work is created a sample application that demonstrates the possibilities of the web and also native applications. Keywords Mobile applications, web applications, native applications, jquery Mobile, Sencha Touch, Android, iphone, PhoneGap, development environments, application development, mobile platforms.

6 Obsah 1 2 Úvod Význam Cíl práce Způsob dosažení cíle Předpoklady a omezení Struktura práce Výstupy práce Rešerše zdrojových prací...3 Možnosti mobilních zařízení Moderní tvorba webových aplikací HTML CSS Hlavička mobilní webové aplikace...10 Možnosti JavaScriptu Událost otočení displeje Úložiště prohlížeče Cache aplikace Databáze SQL GPS Geolokace Plátno neboli grafika Události dotykového displeje vs. Myši Mapy...25 Operační systém Android Úvod do OS Možnosti JavaScriptu v Android Frameworky Webové prohlížeče...29

7 Operační systém ios Úvod do ios Webové prohlížeče Frameworky...33 Další operační systémy Symbian OS Windows Phone BlackBerry, WebOS (PalmOS), Bada...34 Web z pohledu dalších zařízení Webové aplikace na osobních počítačích Tablety jako zlatá střední cesta...35 Přizpůsobení webových aplikací ve Frameworcích Moderní mobilní zobrazení Framework jquery Mobile Android Market Stručně o možnostech frameworku Psaní aplikace v jquery Mobile...41 Framework jqtouch Úvod k Frameworku Psaní aplikace v jqtouch...48 Framework Sencha Touch Úvod do Sencha Touch Psaní JavaScript kódu v Sencha Touch...57 Shrnutí frameworků...62 Nativní aplikace Možnosti tvorby nativních aplikací Android aplikace iphone aplikace Ostatní aplikace...65

8 PhoneGap Instalace a konfigurace Dodatečné možnosti...66 Vývojová prostředí a simulátory Simulátory a Emulátory PhoneGap Appcelerator Titanium...69 Praktická ukázka aplikace Nativní aplikace pro Android Zhodnocení aplikací...75 Závěr Dosažené cíle a výsledky Budoucí zpracování Terminologický slovník Citovaná literatura Seznam obrázků a tabulek Seznam obrázků Seznam tabulek Seznam příkladů Přílohy...89

9 1 Úvod 1.1 Význam Tato bakalářská práce je zpracovávána jako pomůcka pro webové vývojáře a programátory. Dosud nebyla zpracována žádná literatura, která by postihovala zvolený problém a zároveň byla psána v českém jazyce. Jak už to alespoň v posledních několika desetiletích bylo, Česká republika nepatrně zaostává v technologickém i estetickém vývoji co se internetu a mobilního průmyslu týče. Tato situace může mít spousty příčin. Jednou z nich může být nízký zájem českých zákazníků o inovace. Dále je určitě brzdou, a to především v konkrétním případě mobilního vývoje, nedostatečná nabídka internetových připojení v rámci bezdrátových sítí. Příčinou, ale i následkem, může být nedostatečná dokumentace a podpora technologií v českém jazyce nebo nízká motivace programátorů webových aplikací ze strany firem. Ačkoli příčiny mohou být jakékoli (a to není předmětem této práce), je zřejmé, že je třeba tento směr podporovat a pomoci jej rozvinout i v České republice. 1.2 Cíl práce Hlavním cílem práce je popsat možnosti tvorby webových a nativních aplikací pro mobilní zařízení, a to především pro mobilní telefony. (V rámci popisování těchto možností je třeba vytvořit mobilní aplikaci jako příklad.) Abych tohoto hlavního cíle dosáhl, rozdělil jsem jej na několik dílčích cílů: charakterizovat mobilní vývoj a popsat možné technologie, využívané na mobilních zařízeních, jako je HTML5, CSS3, JavaScript apod., popsat zařízení, pro které je možné tvořit webové a nativní aplikace, napsat jejich přednosti a zápory a porovnat je, popsat některé webové frameworky, využívané pro mobilní vývoj a vysvětlit jejich používání na jednoduchých příkladech, popsat možnosti tvorby nativních aplikací pro různá zařízení resp. operační systémy, představit některá vývojová prostředí, ulehčující vývoj mobilních aplikací, vytvořit webovou aplikaci pro mobilní zařízení, ve které jsou využity některé možnosti mobilních zařízení a dále tuto aplikaci převést do nativní Android aplikace. Cíle postupně dosahuji hlubším popsáním aktuální situace ve webovém vývoji pro mobilní zařízení a možnostmi tvorby aplikací. Pro vývojáře by práce měla poskytnout informace o aktuálních trendech v oblasti tvorby webových aplikací napříč celým trhem. Situace v tomto odvětví se velice rychle mění a rozrůstají se možnosti. Proto popisuji jak současný stav, tak zachycuji možný budoucí rozvoj. 1

10 Větší část této práce je věnována programátorům webových aplikací. Součástí cíle je rozšíření jejich dosavadních schopností tvořit webové stránky. V poslední době je stále více vidět přesun veškeré internetové aktivity z osobních počítačů na mobilní zařízení. Aby tyto změny bylo možné provádět i ze strany nabídky, je třeba měnit i použitelnost aplikací. To se snaží zjednodušit webové frameworky, o jejichž znalost by se měli programátoři také obohatit. Kromě webových aplikací se stále častěji vyskytují i tzv. nativní aplikace. To jsou ty, které běží kompletně na přístroji, na rozdíl od aplikací webových. Ty přinášejí samozřejmě výhody, ale i nevýhody, které se pokusím osvětlit. Práce by měla ukázat, že i tyto dvě varianty mohou jít ruku v ruce. Nejen uživatelé potřebují příjemné zacházení se svým zařízením. I programátor by měl mít možnost rychle a efektivně tvořit své aplikace a k tomu mu dopomáhají vývojová prostředí. Z těch se pokusím vyzvednout ty nejzajímavější a krátce je popsat. Teorie je pro všechny práce jistě důležitá, každý ale potřebuje nějaké ty praktické ukázky, aby si danou problematiku osvojil. Proto se pokusím i ty předvést a vysvětlit na nich základní principy webového vývoje a vývoje nativních aplikací pro mobilní zařízení. Hlavními hráči na trhu jsou v současné době Apple a Google, kteří zabírají nepřebernou většinu trhu, proto se celá práce zaměřuje hlavně na ně a na jejich mobilní zařízení. 1.3 Způsob dosažení cíle Abych dosáhl cíle, zaměřuji se na obsahovou strukturu. Každý bod obsahu je předem promyšlen. Každá kapitola práce má mít jasně daný výstup, přičemž kapitoly jsou mezi sebou částečně závislé. Praktická část práce je webová a nativní aplikace, která využívá poznatky z teoretické části. Programování ovšem bude probíhat průběžně s tvorbou teoretické části, aby čtenář lépe pochopil vývoj. Práce je psána tak, aby ji čtenář lépe pochopil, tedy spíše v přátelském duchu, jak už tomu v tomto oboru často bývá. Na druhou stranu přistupuji k tématu odborně a nenechávám čtenáře na pochybách. 1.4 Předpoklady a omezení Tato práce je určena spíše znalým v oblasti programování a především vývoje webových stránek a aplikací. Práce obsahuje i pasáže, které jsou zajímavé a pochopitelné i pro neznalé, ale pro pochopení většiny tezí je třeba se v oblasti webu pohybovat. V práci jsou často zmiňována sousloví webová aplikace a webová stránka. Webová aplikace je spíše brána jako 2

11 kompletní soustava stránek, které vytvářejí celou aplikaci společně s logikou a databázovou vrstvou. U webové stránky mám na mysli spíše jednoduché zobrazení jedné stránky [Wikipedia, 2012z]. 1.5 Struktura práce Práce je zpracována postupně od základní osvěty problému přes podrobné popsání technologií až po uvedení některých příkladů webových stránek a nativních aplikací pro mobilní zařízení. Pro zpracování bylo využito mnoha zdrojů. Na zpracovávané téma je velice omezená dokumentace v českém jazyce, proto bylo třeba získávat informace především z anglicky psaných knih. Hlavním zdrojem z technické stránky pro mě byla kniha HTML5 Mobile Websites od Matthewa Davida. Obsahuje jak osvětu do mobilního webu, tak popis některých nejvyužívanějších frameworků. Dále jsou zde uvedeny možnosti nativních aplikací, tvořených jako webové aplikace. Mezi další zdroje patří např. knihy o tvorbě webových aplikací pro dané platformy (ios, Android). Veškeré tyto zdroje jsou doplněny o další internetové zdroje. Pro tvorbu mobilních webů je třeba znát nové standardy jako HTML5, CSS3 apod., kterým je na internetu věnována řada stránek. Příklady jsou zpracovány postupně a jednotlivé kroky jsou vysvětleny. Je využíváno popsaných frameworků jako jqtouch, jquery mobile, Sencha Touch aj. Dále pak technologie jako HTML5, CSS3, JavaScript apod. V závěru je zhodnocena samotná práce, možný budoucí vývoj technologií pro mobilní web a v návaznosti i možné budoucí práce ( future works ). 1.6 Výstupy práce Výstupem práce je velmi užitečná dokumentace některých možností webového vývoje, který se týká mobilních přenosných zařízení a telefonů. Tato dokumentace je oproti většině dostupných v češtině. Kromě dokumentace práce slouží i jako návod, jak začít webové aplikace efektivně vyvíjet a které vlastnosti využívat. Výstupem práce je i příkladová aplikace, která ukazuje jednu z možností, jak se k vývoji postavit. Z této aplikace je možné vypozorovat používání některých funkcí v praxi. 1.7 Rešerše zdrojových prací Pro práci jsem využíval řadu zdrojů, především zahraničních. Prvním hlavním zdrojem je kniha [Matthew, 2011]. Autor popisuje problematiku spojenou s HTML5, CSS3 a možnými frameworky, používanými při tvorbě mobilních webových aplikací. Kniha postupně vysvětluje zmíněné obory od laického pohledu až po odborný a detailní výklad. Kniha mi v práci sloužila jako průprava do daného tématu. 3

12 Dalším velice užitečným zdrojem je kniha [Oehlman, et al., 2012]. Tato kniha je napsána velice odborně. Pomocí této knihy jsem se dozvěděl spoustu nových zajímavých věcí, které jsem do své práce zahrnul. Členění kapitol je přehledné a jazyk srozumitelný. V knize je uvedeno také spousty příkladů, které pomohou porozumět tématu. Hlavní pointou knihy je ukázat možnosti vývoje na mobilních zařízeních Android a naučit programátora možnosti využívat. Kniha [Harwani, 2010] je jakousi učebnicí pro autorovy studenty. Začátek knihy se zabývá tvorbou aplikací pro mobilní zařízení. Dále je ovšem téma zaměřeno na tvorbu webu obecně a především na serverové straně pomocí jazyka PHP apod. Kniha je dle mého názoru pojata v širokém kontextu, což není příliš ku prospěchu. Další knihou je [Picchi, 2011]. Tato kniha je velice podrobnou studií o vývoji aplikací pro iphone a obecně pro ios. Kniha je velice rozsáhlá a zaměřuje se na problém vývoje především ze strany návrhu a postupu vývoje. Kniha je obohacena o zkušenosti několika zkušených autorů. Osobně si myslím, že je kniha velice přínosná, ovšem zaměřena na lehce jiné téma, které není cílem mé práce. Kromě uvedených knih jsem využíval i některé další české a zahraniční tituly. Vše je doplněno o internetové zdroje, které byly pomůckou při pochopení technologií. Nedílnou součástí zdrojů jsou i blogy a fóra, které tímto nepřímo cituji. 4

13 2 Možnosti mobilních zařízení Pro vývoj webových aplikací pro mobilní telefony a obecně pro přenosná zařízení, je třeba si aplikace rozdělit do skupin. Základní dělení je podle jejich možností rozšiřovat o aplikace. Do první skupiny se řadí klasické telefony, které mají svůj vnitřní software, zabudovaný v paměti už z výrobní linky. Tyto mobilní telefony nemají možnost rozšiřovat se a většinou nemají ani internetový prohlížeč, ale pouze tzv. WAP prohlížeč. Aplikace resp. stránky pro tento prohlížeč jsou psané v jazyce, vycházejícím z XML a podobné HTML, ovšem postrádá spousty jeho předností. Jedná se o jazyk WML. V současné době tento jazyk a toto využívání internetu v mobilech téměř vymizelo. Další skupina se označuje jako feature phones neboli telefony s funkcemi. Oproti předchozí skupině je možné je již rozšiřovat o další aplikace. Firmware také není pevně vázán na paměť a lze jej upgradovat. Zde ovšem volnost feature phones končí. Jejich firmware se nedá považovat za operační systém, protože nesplňuje všechny jeho náležitosti. Pro tuto skupinu již jsou internetové prohlížeče, které dokáží dobře zobrazit webové stránky, většinou v mobilním zobrazení, a některé i v zobrazení pro PC. Tyto prohlížeče jsou většinou psané v jazyce Java, minimalizované pro mobilní telefony. Ačkoli už se s těmito zařízeními dá lépe pracovat s webovými stránkami, nedokážou to, co následující skupina. Konečně třetí skupina, které se budu věnovat téměř celý zbytek práce, jsou tzv. smartphones neboli chytré telefony. Tato zařízení v sobě mají operační systémy, kterých je v současné době velká řada. Mezi ty, o kterých má smysl uvažovat, jsou tyto: ios (iphone, ipod Touch, ipad), Symbian S60, Symbian Platform, BlackBerry OS 5 a 6, Android, WebOS, Bada, MeeGo, Windows Mobile, Maemo, Windows Phone. Hlavní odlišností smartphonů od předchozích skupin je možnost aplikací přistupovat k datům a především periferiím telefonu, jako je fotoaparát, GPS, polohovací senzor, dotykový displej, přisvětlovací dioda, TV tuner, bluetooth, Wifi a spousty dalších. Největší nárůst využívání těchto periferií začal s příchodem iphone od firmy Apple. Následně pak pokračovaly telefony s operačním systémem Android od firmy Google a některé další. [Wikipedia, 2012d] Pro iphone byly vyvíjeny nativní aplikace od nejabsurdnějších her typu vypij pivo z iphone až po praktické aplikace jako realtime překladač. Ačkoli to není pravidlem, tak se chytré telefony většinou vyznačují svým velkým dotykovým displejem. Rozlišení displejů stále roste, ale aby zůstal telefon telefonem do kapsy, jeho rozměry zůstávají stejné, přičemž se zvyšuje DPI. Při vývoji je pak důležité brát v potaz i tento poznatek, aby se nestalo, že např. některý text bude velice malý až k nepřečtení. 5

14 Jak bylo již napsáno, uvedené aplikace byly psány jako nativní aplikace. Ve světě a později i v České republice postupně vzrostl význam internetu v mobilu a to přispělo k možnostem tvoření těchto aplikací, a to např. pomocí webového rozhraní [Almaer, 2011]. Nejnovější chytré telefony, resp. jejich prohlížeče, dokáží pracovat s pamětí telefonu a periferiemi téměř na stejné úrovni jako nativní aplikace. Jejich hlavní výhodou je, že není třeba tyto aplikace instalovat na zařízení. Většina logiky běží na webovém serveru a na přístroji běží relativně nenáročný JavaScript, který se stará o přívětivé uživatelské rozhraní a získávání dat z přístroje. Aplikace díky JavaScriptu bývá i tlustým klientem. Na straně přístroje není využíván pouze JavaScript, který se stará o programovou část, ale také jiné technologie a standardy jako HTML5 a CSS3. Pro moderní mobilní webové aplikace je využíváno kombinace právě těchto 3 standardů. HTML5 je značkovací jazyk, který se stará o strukturovaný výpis dat. Je následník HTML 4.01, který je doposud nejvyužívanějším značkovacím jazykem pro webové aplikace na osobních počítačích. Je ovšem doplněn o spousty možností, které nejen ulehčují práci programátorům, ale také rozšiřují možnosti webových aplikací. CSS3, jako další verze kaskádových stylů, se aplikuje na HTML5 tagy a zajišťuje, aby aplikace byla uživatelsky přívětivá, přehledná a poutající. Oproti předchozím verzím je doplněna o možnosti, které také zjednodušují práci programátorům, ale především zrychlují výpočetní cyklus při překreslování aplikací, což je u stále relativně pomalých mobilních zařízení velká úleva [Irish, 2011]. 2.1 Moderní tvorba webových aplikací HTML 5 Aby bylo možné začít tvořit moderní aplikace, je třeba přistupovat k tvorbě moderní cestou. Zcela nový jazyk HTML5, schválený světovým standardizačním konsorciem W3C, je jedním z významných kroků ke sjednocení několika starších standardů. Základ tohoto značkovacího jazyka je postaven na HTML Dále je doplněn o zvyklosti z xhtml. Ovšem to není zdaleka vše. Jazyk se snaží postihnout i takové funkcionality, na kterých je dnešní internet prakticky založen, jako třeba přehrávání videa. Jazyk obsahuje, oproti předešlým verzím, několik zásadních vylepšení, které následně více přiblížím. Identifikace pro prohlížeč, že se jedná o HTML5, je zajištěna novým krátkým zápisem DOCTYPE: <!DOCTYPE html> Html se již od jeho vzniku snaží strukturovat jednotlivé bloky obsahu celé stránky. Postupem času se ovšem obsah stránek dost měnil a začal se z rámu, tabulek apod. přemísťovat do blokových tagů DIV. Při pohledu na moderní stránku, psanou v HTML 4 či 6

15 xhtml, je vidět obrovské množství těchto vnořených DIV tagů. HTML 5 se na tento problém snažilo myslet a strukturovalo bloky do těchto blokových elementů: HEADER SECTION ARTICLE ASIDE FOOTER NAV Toto strukturování jde ruku v ruce s XML DocBook a jeho označováním částí textu podle toho jaký text obsahují, nikoli jak by měl text vypadat. Toto rozvrstvení elementů pomáhá jak přehlednosti kódu, tak vyhledávacím strojům určit, co je důležité. Než popisovat jednotlivé elementy, bude lepší je představit ilustračně na obrázku nejprve pro běžný osobní počítač a následně pro případné mobilní zařízení. Obrázek 1 - Koncept rozvržení HTML5 tagů na obrazovce (desktop) - Zdroj: autor Na obrázku ( Obrázek 1 ) je téměř univerzální layout pro zobrazení webové aplikace na monitoru osobního počítače. V HTML 4 by červené rámečky představovaly s velkou 7

16 pravděpodobností element DIV. V HTML 5 tomu je ovšem jinak. Každý logický prvek stránky nese své vlastní jméno tagu. Tato změna se zdá být malicherná, ale pokud má být HTML 5 používané správně, je třeba se této konvence držet. Jak později ukáži, u většiny frameworků je toto třídění nutností pro správné zobrazení aplikace. Obrázek 2 - Koncept rozvržení HTML tagů na obrazovce (mobilní zobrazení) - Zdroj: [WordPress, 2012] Na obrázku ( Obrázek 2 ) jsou vyobrazeny možné layouty pro mobilní webovou aplikaci. Jak je vidět, logicky jsou prvky pojmenovány stejně, jako v předchozím případě, liší se pouze rozmístění na displeji. Pokud je tedy stránka aplikace správně strukturována, je možné přecházet mezi mobilním a desktopovým zobrazením pouhou změnou kaskádových stylů. Toto je základem frameworků pro mobilní zobrazení. Ty sice nepracují pouze s CSS styly, ale i JavaScriptem, nicméně na stejném principu. Mezi další rozšíření, které přišlo s HTML 5, patří možnost vkládání videa. Podobně jako se vkládá obrázek IMG, je možné nyní vložit VIDEO s odkazem ve vnitřním elementu SOURCE. Je možné zadat i více zdrojů pro video v různých formátech. Formáty jsou vůbec jediným problémem videí na webu. Videa totiž mohou být zakódována různými kodeky. Některé mají volnou licenci pro šíření a používání a jiné nikoliv. Z tohoto důvodu podporují prohlížeče různé kodeky. Především komerční prohlížeče záměrně nepodporují otevřené kodeky a naopak otevřené prohlížeče nemají možnosti podporovat kodeky placené. Je zde tak problém, který ještě není s HTML 5 vyřešen, a tak je třeba počkat, jak se s tím prohlížeče 8

17 poperou. Předchozí informace vycházejí z přednášek Ing. Jiřího Koska o vývoji webových aplikací. Dalšími možnostmi HTML 5 je např. vkládání audio souborů pomocí elementu AUDIO nebo vytváření jednoduché grafiky pomocí elementu CANVAS. Tím možnosti HTML 5 nekončí. Je možné získávat také geolokaci přes GPS modul. Velice podařené změny se povedly i pro formuláře, kdy je možné už pomocí HTML validovat většinu vstupů a vytvářet zajímavé grafické formuláře. HTML 5 je velice silný značkovací jazyk pro moderní webové aplikace. Jeho popis není předmětem této práce, přičemž podrobný popis je k nalezení např. ve zdrojích [Valoušek, 2011], [Stehlík, 2011], [Matthew, 2011]. Tento standard pomáhá stránkám, aby byly psány precizněji a přehledněji. Dále rozšiřuje o praktické možnosti a pro mobilní web se zdá být velice užitečný. Nastává tu ovšem jedno velké ALE. Windows Phone 7 jako nejnovější pilotní operační systém Microsoftu pro mobilní telefony ve své první verzi nepodporuje nový standard HTML 5. Kvůli tomu je třeba některé vlastnosti nového jazyka vynechávat kvůli zpětné kompatibilitě CSS3 Nová verze kaskádových stylů CSS 3 je obohacena o spousty praktických možností oproti CSS 2. Pomocí starších kaskádových stylů se daly upravovat elementy pouze jednoduchými filtry. Pro složitější grafické efekty bylo třeba použít grafické editory a vytvořit obrázky, které se následně vkládaly do stránek. S CSS 3 se spousta těchto efektů dá provést přímo na stránce, což zrychluje stažení stránky za cenu vyšší výpočetní náročnosti pro prohlížeč. Jelikož je těchto změn velká spousta, pokusím se přiblížit jen ty nejdůležitější. První užitečnou změnou je rozšíření selektorů o možnost vybírat i podle názvu atributů. Syntaxe pak vypadá např. takto E[att$= val ], E[att*= val ] nebo E[att^= val ]. Další novinka v selektorech jsou nové pseudotřídy. Mezi ně patří root, empty, target, enabled, disabled, checked. Velice silná funkce CSS 3 je možnost změnit font na jakýkoli vlastní, zadaný pomocí url. Na následujícím příkladu (Příklad 1) je vidět možný zápis ze zdroje [Stehlík, 2011]. Příklad 1 - Použití uživatelských fontů v { font-family: 'devonshire'; src: url(../fonts/devonshire-regular-webfont.eot); src: url(../fonts/devonshire-regular-webfont.svg); 9

18 src: url(../fonts/devonshire-regular-webfont.svgz); src: url(../fonts/devonshire-regular-webfont.ttf); src: url(../fonts/devonshire-regular-webfont.woff); } nav a, nav a:visited { font-family: devonshire; } Dalšími možnostmi jsou: částečná průhlednost zvolených barev, zaoblené rohy rámečků radiem, 3D efekty, přechody barev, vícenásobné pozadí, ale i dynamické prvky jako transformace a posun elementů. Je vidět, že oproti předchozí verzi zaznamenaly styly veliký nárůst funkčností. Jediná nevýhoda může být, že je občas možné se setkat s prohlížeči, které CSS 3 ještě plně nepodporují. Popsání možností CSS není předmětem této práce, proto pro podrobnější popis doporučuji např. zdroje [Valoušek, 2011], [Stehlík, 2011], [Matthew, 2011]. Hlavním důvodem používání CSS 3 v mobilních webových aplikacích je, že již není třeba složitější grafické efekty provádět javascriptem. Ten je totiž velice nešetrný na výpočetní složitost. U mobilních telefonů, kde je pořád relativně pomalý procesor, je třeba s ním šetřit. Zároveň některé složitější operace se mohou projevovat zpomaleným vykreslováním, jako třeba držení fixní polohy patičky při scrolování. Zabudováním do CSS 3 se zobrazování stává plynulejším Hlavička mobilní webové aplikace Oproti běžným stránkám pro desktopové počítače se v mobilních zařízeních lehce mění hlavička HTML dokumentu. Načítání JavaScriptu probíhá identickým způsobem. Změna nastává u vkládání stylu, kdy je třeba zmínit, že daný styl se zobrazí jen v mobilním zařízení. V atributu media se nadále uvádí screen pro zobrazení na obrazovce. K tomuto zobrazení je možné dodat informaci o šířce zařízení pomocí vlastnosti device-width, min-devicewidth a max-device-width. K tomu je třeba přidat styl, který se zobrazí na všech zařízeních. Řádky pro přidání stylu by pak mohly vypadat jako v příkladu (Příklad 2). Příklad 2 - Doplnění hlavičky HTML mobilní webové aplikace <link rel= stylesheet type= text/css media= only screen and (max-devicewidth: 320px) href= small-style.css /> <link rel= stylesheet type= text/css media= only screen and (min-devicewidth: 321px) href= large-style.css /> 10

19 <link rel= stylesheet type= text/css media= screen href= all-style.css /> Aby mobilní telefon poznal, že stránka je určena pro mobilní zobrazení a ne pro běžnou desktopovou stránku, je o tom třeba sdělit prohlížeči v meta tagu. Název meta tagu je viewport a hodnota pro mobilní zobrazení, resp. pro nastavení pevné šířky rovné šířce displeje, je width=device-width. Šířku je možné nastavit na jakékoli číslo v pixelech, pro správné zobrazení je ale doporučeno používat uvedenou klauzuli. Kromě šířky je možné definovat i výšku pomocí height (výška displeje je pod klíčovým slovem device-height). Dále je možné přidat úroveň přiblížení při načtení a i maximální a minimální možnou přibližovací úroveň v násobcích. Tím je možné uživateli používání zoomu na stránce zakázat, přičemž pro tuto možnost je zde speciální příznak. Klíčová slova jsou maximum-scale, minimum-scale, initial-scale a user-scalable. Meta tag by tedy pro mobilní zařízení mohl vypadat následovně (Příklad 3). Příklad 3 - Metatag pro určení mobilní aplikace <meta name= viewport content= width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 /> Pro Android OS je zde možnost ještě speciálního nastavení target-densitydpi, které je možné předat parametry high-dpi, medium-dpi, low-dpi či hodnotu od 70 do 400, vyjadřující hustotu pixelů pro dané zařízení. 2.2 Možnosti JavaScriptu V následujících subkapitolách ukáži různé možnosti, které poskytuje JavaScript v nových zařízeních a prohlížečích podporujících HTML5. Tyto funkcionality byly přidány s příchodem HTML5, ovšem většina z nich je třeba obsluhovat programovacím jazykem a k tomu je nejlepší a jediná možnost právě JavaScript. Většina možností, které budu popisovat, jsou plně funkční na každém zařízení podporujícím HTML5, včetně osobních počítačů. Nicméně využitelnost je zásadní na mobilních zařízeních, které tyto možnosti umějí lépe využívat a vznikají v nich tak aplikace, o kterých je možno si na počítačích nechat jenom zdát Událost otočení displeje Jako první ukáži, jak pomocí JavaScriptu zjistit polohu natočení přístroje neboli orientation. Při změně orientace displeje je v kvalitních aplikacích třeba zajistit některé změny, aby mohl uživatel dále bez problému aplikaci ovládat. Pro odchycení změny orientace displeje má JavaScript událost s názvem onorientationchange na objektu window. Některé verze Android ovšem tuto možnost nepodporují, proto je třeba pokusit se ošetřit otáčení displeje jinak. Alternativní možnost je událost onresize, která zjišťuje změnu velikosti 11

20 prohlížeče. V mobilních zařízeních se resize zpravidla rovná změně orientace displeje. Zápis v kódu je pak možno realizovat takto (Příklad 4). Příklad 4 - Událost změny orientace obrazovky var candetect = onorientationchange in window; $(window).bind(candetect? orientationchange : resize, function (ev) { // kód pro ošetření změny orientace displeje }); V předchozím kódu se objevil klíčový znak $. Pro zrychlení a zjednodušení zápisu se v drtivé většině případů využívá framework jquery, který tento znak používá jako svou hlavní funkci. Tento framework ulehčuje práci především se samotným dokumentem. V následující kapitole představím některé další frameworky, které jsou na jquery závislé. Podrobnější informace o jquery jsou k dispozici na stránkách K samotnému kódu vysvětlím, jak to vlastně funguje. Na instanci window přichytím novou událost. Tato událost je závislá na tom, zda aktuální zařízení podporuje událost onorientationchange. resize. Pokud ano, tak přichytí tu, v opačném případě přichytí alternativní Uvnitř vytvořené funkce je možno obsloužit otočení. Významné proměnné mohou být tyto: window.innerheight, window.innerwidth, window.orientation, ev.type. Pomocí nich je možné zjistit například, zda je obrazovka landscape či portrait následujícím způsobem (Příklad 5). Příklad 5 - Zjištění polohy zařízení (Portrait, Landscape) var aspectratio = 1; if (window.innerheight!== 0) { aspectration = window.innerwidth / window.innerheight; } var orientation = aspectratio <= 1? portrait : landscape ; Vlastnost window.orientation oproti předchozímu kódu vrací natočení ve stupních (0, 90, 90, 180), ovšem nefunguje pro událost resize. Pokud bych chtěl pomocí jquery vyvolat uměle událost otočení displeje, zavolám funkci trigger. $(window).trigger( reorient, [orientation, rotationtext]); Ačkoli se zmiňuji o událostech jako o nových funkcích JavaScriptu, JavaScript k nim pouze přistupuje. Tyto vlastnosti byly přidány do standardu HTML5 a to i se všemi dalšími možnostmi, které budu popisovat v následujících subkapitolách. 12

21 2.2.2 Úložiště prohlížeče Nyní osvětlím možnosti práce s pamětí zařízení. Již v základním JavaScriptu na osobních počítačích byla možnost ukládat data do prohlížeče, a to pomocí cookies. Ty jsou ovšem razantně limitovány pamětí a způsobem použití. Proto se stále používají pouze pro jednoduchá nastavení či označování jedinečnosti uživatelů. Pro mobilní zařízení přibyly hned dvě nová úložiště dat. První se nazývá localstorage a druhé sessionstorage. V přístupu k datům se tato dvě úložiště nijak neliší. Jediný rozdíl, jak už název naznačuje, je v době pamatování si dat. Úložiště sessionstorage ukládá pouze pro dané sezení, tady po zavření okna prohlížeče se data vymažou. Zato localstorage dokáže ponechat data na disku a používat je i při dalších příchodech na stránku. Velikou výhodou těchto úložišť je možnost uložit i složitější struktury než jen řetězec. Například mohu uložit celý JSON1 objekt či pole a následně jej znovu načíst a používat jako objekt. K oběma úložištím lze přistupovat pouze ze stránek, které jej vytvořily, což zabraňuje zneužití dat třetí stranou. Obě úložiště implementují stejné rozhraní Storage, na kterém se dají zavolat metody getitem, setitem, removeitem a clear. Následující příklad (Příklad 6) ukazuje použití metod. Příklad 6 - Zápis metod úložiště localstorage.setitem( nazevpolozky, Hodnota položky ); localstorage.getitem( nazevpolozky ); localstorage.removeitem( nazevpolozky ); localstorage.clear(); Aby bylo možné ukládat celé objekty, je třeba je před uložením serializovat a po načtení deserializovat. K tomuto účelu u JSON poslouží jquery funkce $.parsejson a funkce $.tojson. Následující kód (Příklad 7) ošetří ukládání JSON objektů v localstorage do objektu localstore. Příklad 7 - Ukládání JSON do úložiště var localstore = new function () { this.getitem = function (itemname) { var itemvalue = localstorage.getitem(itemname); try { itemvalue = $.parsejson(itemvalue); 1 JSON (JavaScript Object Notation) je jednoduchý objekt obsahující stromovou strukturu jednoduchých prvků s řetězcovým klíčem 13

22 } catch (e) {} return itemvalue; } this.setitem = function (itemname, itemvalue) { try { itemvalue = $.tojson(itemvalue); } catch (e) {} localstorage.setitem(itemname, itemvalue); } this.removeitem = function (itemname) { return localstorage.removeitem(itemname); } } Knihovna jquery bohužel obsahuje pouze metodu pro zpracování JSON řetězce parsejson, nikoli tvůrce JSON řetězce tojson. Proto je třeba stáhnout a vložit rozšíření jquery.json.js 2. Využití těchto úložišť může být v mobilních aplikacích velice užitečné. Jelikož se velká část logiky přenáší na klientovu stranu, je třeba mít stálý přístup k nejpoužívanějším datům. Ovšem není možné se stále ptát serveru, který je jednak zbytečně zatěžován, ale především je zvyšována doba načítání jednotlivých stránek. Nehledě na pomalá připojení v mobilních zařízeních uživatelé vyžadují rychlou odezvu na jejich akce a to mimo jiné zajistí i tato úložiště Cache aplikace Další funkce, kterou nové HTML5 nabízí je tzv. applicationcache. Umožňuje práci s aplikací i v případě, že je zařízení offline, tedy nemá dostupné připojení k internetu. Řada aplikací je totiž možné ovládat i bez dat z internetu. Je ovšem třeba mít načtené potřebné soubory, které offline provoz obslouží. HTML5 je možné sdělit informace o těchto souborech konfiguračním souborem Cache Manifest. Tento soubor se nejčastěji připojuje k HTML dokumentu pomocí atributu manifest v tagu <html/> (Příklad 8). Příklad 8 - Připojení Cache Manifest souboru k HTML <!DOCTYPE html> <html lang="cs" manifest="/offline.appcache"> 2 Knihovna je k nalezení na stránce 14

23 // váš html dokument </html> Tento soubor má příponu.appcache, či.manifest a MIME-type: text/cachemanifest. Soubor začíná klíčovým slovem CACHE MANIFEST a následně je rozdělen do 3 bloků kódu (Příklad 9). Příklad 9 - Soubor Cache Manifest CACHE MANIFEST # poznámky a komentáře CACHE: /css/offline.css /js/offline.js /img/logo-offline.png FALLBACK: / /offline.html NETWORK: * První blok CACHE: prohlížeči říká, jaké soubory si má stáhnout do cache pro pozdější využití. Tyto soubory pak bude mít prohlížeč k dispozici i po přechodu do offline režimu. Další blok FALLBACK: prohlížeči říká, jak se má standardně zachovat, pokud se uživatel pokusí načíst danou stránku v offline režimu. V ukázkovém případě domovskou stránku a všechny jeho podstránky přesměruje na /offline.html soubor, který si zároveň již uložil do offline cache. V jednoduché aplikaci by stránka mohla obsahovat informaci o tom, že byl uživatel odpojen od internetu. Poslední blok NETWORK: dává prohlížeči informaci o tom, jaké soubory si má vždy žádat server a nebude je nikdy cachovat. V kódu je možno použít i zástupný znak *, který nahrazuje veškeré soubory na serveru. Komentáře se jako v jiných konfiguračních souborech vytvářejí mřížkou (#) na začátku řádku. Toto nastavení je velice silným nástrojem, ovšem pro složitější aplikace je nedostačující. Proto je samozřejmě tato funkčnost zařazena i do JavaScriptu. Objekt, který komunikaci s cache zajišťuje, je vlastností window: window.applicationcache. Na tomto objektu je možné zavolat funkce update, která načte, resp. aktualizuje soubory cache. Tato metoda se 15

24 volá při prvním načtení cache anebo při změně manifest souboru. Pro znovunačtení jednotlivých souborů do cache je třeba zavolat funkci swapcache, která není závislá na změně manifest souboru. Po zavolání jedné z těchto funkcí si prohlížeč začne stahovat požadovaná data. Pro pozdější použití je třeba vědět, zda se soubory již načetly, a to nějakou dobu trvá. Aby se script nezastavil uprostřed kódu, je třeba k odchytávání stavu přistupovat asynchronně. Objekt applicationcache obsahuje vlastnost status, která říká, v jaké fázi se načítání nachází. Pro odchytávání změny stavu je možné na objekt přichytit události checking, noupdate, downloading, progress, cached, updateready, obsolate, error. Názvy těchto událostí odpovídají možným stavům applicationcache.status, k jehož konstantám je možné přistupovat applicationcache.updateready). window -> online offline stejnojmenně s velkými písmeny (např.: Další událost, která se dá využívat s cache je událost a vlastnost navigator.online. V následujícím seznamu stručně vysvětlím jednotlivé události [Oehlman, et al., 2012]. checking kontroluje manifest soubor noupdate nejsou k dispozici žádné aktualizace cache downloading progress cached updateready obsolate error window.online stahuje soubor do cache soubor byl stažen do cache všechny soubory byly staženy do cache jsou k dispozici nové aktualizace pro soubory nebyl nalezen manifest soubor nastala chyba při cachování stav připojení se změnil na online Nyní, pokud jsou známy možnosti applicationcache, tak je možné společně s úložišti vytvořit aplikaci, kterou lze ovládat i offline nebo je aplikaci dokonce možné z internetu pouze načíst a poté už internet není třeba využívat. Tím je vidět, jakým způsobem se webové aplikace přibližují nativním aplikacím. V závěrečné kapitole předvedu využití cache na příkladu Databáze SQL Zatím jsem vysvětlil, jak přistupovat k webovému úložišti dvojího typu a taky jak ukládat do prohlížeče celé soubory. HTML5 má ovšem ještě další možnost práce s daty přímo v prohlížeči, a to je WEB SQL Database. K této databázi se přistupuje jazykem SQL3 stejně jako k většině jiných relačních databází. Tato databáze má velice podobný význam jako 3 SQL je dotazovací jazyk, který se používá pro dotazování do relačních databází. Podrobnější informace lze nalézt např. ve zdroji [W3School, 2012]. 16

25 localstorage. Stejně jako ona se zachovávají data při zavření prohlížeče a lze k ní přistupovat pouze ze stejné domény. Výhodou oproti localstorage je možnost přistupovat k datům relačně. Ačkoli přístup k datům objektově přes localstorage může být někdy výhodou, relační přístup má své výhody zejména v rychlosti přístupu k dotazovaným datům. Většina webových databází je pak také relačních a je proto pohodlnější mít stejný přístup i v prohlížečích. Každou databázi je možné také označit příslušnou verzí, což umožňuje v průběhu běhu aplikace měnit strukturu databáze, a to bez ztráty dat a plně pod kontrolou. Nejprve je třeba se k databázi připojit pomocí funkce opendatabase. Jako první parametr je zadán název databáze resp. její identifikátor. Jako další parametr je zadána zmiňovaná verze. Verze může být řetězec jako například 1.0. Třetí parametr je popis databáze a poslední čtvrtý parametr je vyhrazení místa pro databázi v bajtech. Samotná funkce vrací instanci daného připojení, na kterou lze provádět další operace. Připojení databáze by mohlo vypadat následovně (Příklad 10). Příklad 10 - Otevření Web SQL Databáze var db = opendatabase( moje_databaze, 1.0, Moje zkušební databáze, 100*1024); Velikost vyhrazená pro databázi je 100*1024 B, tedy 100KB. Po zavolání této funkce je v prohlížeči k dispozici databáze, na kterou se již mohou zadávat dotazy. Na rozdíl od běžných přístupů je u této databáze povinné provádět tzv. transakce. Pro každý blok dotazů, nebo i jeden dotaz, je třeba vytvořit transakci a v rámci ní se teprve dotazovat. K vytvoření transakce poslouží metoda transaction resp. readtransaction. Jak už název napovídá, metoda readtransaction otevírá transakci, ve které je povoleno pouze čtení z databáze, nikoli zápis. Metoda má jediný parametr, a to funkci, která bude v rámci transakce provedena. Této funkci je jako parametr předána instance aktuální transakce, na kterou už lze konečně volat dotazy. Pro zavolání SQL dotazu se využívá metoda executesql. Té zadávám jako první parametr samotný SQL dotaz jako řetězec. Pokud je třeba vložení proměnných, jsou vkládány do SQL řetězce zástupným znakem?. Jako druhý parametr metody je zadáno pole hodnot, které se zamění za zástupné znaky v daném pořadí a to escapované4, aby se zabránilo SQL injection5. Třetí parametr poslouží jako callback funkce, která se zavolá po provedení dotazu a jako parametry jí vrátí instanci transakce a výsledek dotazu. Následující příklad (Příklad 11) ukazuje jednoduché volání dotazu. Příklad 11 - Dotaz na Web SQL Databázi 4 Escapování řetězce je zaměnění funkčních znaků ze jejich nefunkční náhrady. SQL injection může nastat, pokud se do SQL dotazu dostane taková hodnota, která by mohla změnit význam dotazu a nechtěně ovlivnit databázi. 5 17

26 db.transaction(function (transaction) { transaction.executesql( SELECT * FROM table WHERE id =?, [1], function (transaction, result) { alert(result.rows.item(0)); }); }); Poslední možností databáze je možnost měnit její verzi pomocí metody changeversion. Této metodě je zadána stará verze, nová verze a jako třetí parametr zadána funkce, která bude zavolána jako transakce a obsahuje změny (SQL dotazy) pro danou verzi. Příklad změny verze databáze je na následujících řádcích (Příklad 12). Příklad 12 - Změna verze Web SQL Databáze db.changeversion( 1.0, 1.1, function (transaction) { transaction.executesql( ALTER TABLE item ADD novy_sloupec TEXT; ); }); Databáze je funkcionalita, která se pro mobilní zařízení dá využít stejně jako úložiště, záleží pouze na situaci, kdy bude lepší použít jednu variantu a kdy druhou. Jelikož se jedná o relační databázi, je možné vytvořit si synchronizační metodu, která snadněji synchronizuje databázi s databází serveru a jednodušeji se tyto databáze udržují v konzistenci. Samozřejmě na konci práce využiji tuto databázi na příkladu GPS Geolokace Jako další možností, ke které lze přistupovat pomocí JavaScriptu, je GPS Geolokace. Je to další z rozšíření, které bylo přidáno do HTML5 standardu. Moderní rozsáhlejší aplikace se nyní jen těžko obejdou bez GPS souřadnic, a proto je tato funkcionalita velkým přínosem. Přístup k datům se provádí velice jednoduše, a to pomocí objektu navigator.geolocation. Na tomto objektu se dá zavolat metoda getcurrentposition, které je jako první parametr předán callback funkce, zavolané po zjištění geolokace. Callback funkci je předán parametr s objektem Position, obsahujícím vlastnosti coords (objekt Coordinates) a timestamp (objekt DOMTimestamp) s časem zjištění pozice. První instance obsahuje následující vlastnosti. zeměpisná délka ve stupních longitude latitude zeměpisná šířka ve stupních altitude nadmořská výška v metrech accuracy přesnost zeměpisné polohy v metrech 18

27 altitudeacurracy heading speed přesnost nadmořské výšky v metrech směr pohybu ve stupních od severu rychlost pohybu v metrech za sekundu Jako druhý parametr je předán callback pro nezdaření zjištění geolokace. Ten je volán s parametrem, který obsahuje informace (PositionError.PERMISSION_DENIED, PositionError.TIMEOUT) dané chyby. Vlastnosti jsou code PositionError.POSITION_UNAVAILABLE, a message se zprávou o chybě. Posledním parametrem je nastavení pro zjištění geolokace. Popis možných nastavení: jak často se má zjišťovat pozice frequency enablehighaccuracy zda musí být pozice maximálně přesná pro vrácení dané pozice jak dlouho se může zjišťovat pozice timeout maximumage jak dlouho se má ukládat pozice do cache (v budoucnu plně nahradí vlastnost frequency, která je nyní deprecated) Další funkcí, kterou lze na objektu geolocation zavolat, je watchposition. Ta se chová stejně jako předchozí funkce, ovšem callback funkce je spouštěna pravidelně ve stanoveném intervalu. Pro ukončení činnosti tohoto časovače se volá funkce clearwatch. Následující příklad (Příklad 13) ukazuje možné použití Geolokace. Příklad 13 - Získání GPS informací navigator.geolocation.getcurrentposition(function (position) { alert(position.coords.longitude+, +position.coords.latitude); }, function (error) { alert(error.name); }, { frequency: 5000, enablehighaccuracy: true, timeout: 3000, maximumage: 15*60*1000 }); Určování polohy je další utilitou, která dělá z webových aplikací silný nástroj pro uživatele. Přístup k GPS modulu je ve většině zařízení nyní k dispozici. Některé prohlížeče dokonce 19

28 nemusí GPS modul využívat. Například Google chrome na desktopovém počítači dokáže zjistit polohu s velmi solidní přesností pomocí polohy registrované IP a dalších technologií Plátno neboli grafika Další funkčností, kterou lze v HTML5 využít, je plátno. Umožňuje vytvořit 2D plátno a kreslit na něj jednoduché obrazce a obrázky. Z nich lze pomocí JavaScript logiky vytvořit pěkné animace. Tato utilita dokáže nahradit dosavadní Adobe Flash6 aplikace [Irish, 2011]. Přístup k plátnu a samotné kreslení je možné také pomocí JavaScriptu. Problém ovšem je, že podpora ještě není tak velká, jako u ostatních funkcionalit. Pro využívání grafiky, je nejprve potřeba vytvořit plátno. Pro něj vznikl v HTML5 speciální tag CANVAS. K tomuto elementu je třeba přidat id, aby bylo možné k němu jednoduše přistupovat a jako obsah může být zadán text zobrazený v případě, že plátno není v prohlížeči podporováno. V JavaScriptu je možno na tomto plátně zavolat metodu, která inicializuje plátno a vrátí kontext plátna. Metoda se nazývá getcontext. Jako parametr je zadáno klíčové slovo, znázorňující, v jakém kontextu se bude kreslit. Standardně se jedná o 2D plátno (Příklad 14). Příklad 14 - Vytvoření Canvas plátna var canvas = $( canvas#moje_platno ); var context = canvas.getcontext( 2d ); Na tomto kontextu je již možné volat řadu metod, které kreslí na plátno různé objekty. Pro přehlednost uvádím tabulku ( Tabulka 1 ) metod a vlastností s jejich funkčnostmi. Tabulka 1 - Metody kontextu pro 2D grafiku - Zdroj: [Hassman, 2009] Název metody Parametry Popis fillrect x, y, width, height Nakreslí obdélník vyplněný nastavenou barvou fillstyle. strokerect x, y, width, height Nakreslí nevyplněný obdélník s okrajem širokým linewidth a barvou strokestyle. clearrect x, y, width, height Vymaže z plátna vše v zadaném obdélníku. moveto x, y Přesune kurzor grafiky na zadanou souřadnici. 6 Adobe Flash je platforma, umožňující jednoduše vytvářet grafické a animované aplikace. 20

29 lineto x, y Z aktuální souřadnice grafiky nakreslí čáru do souřadnic zadaných v parametrech. beginpath Začne cestu, ve které je možné kreslit libovolné útvary a vybarvovat je. closepath Ukončí cestu. fill Vybarví vnitřek útvaru v rámci cesty. stroke Vybarví okraj útvaru v rámci cesty. drawimage Název vlastnosti fillstyle img_elem, dx, dy[, dw, dh] img_elem, sx, sy, sw, sh, dx, dy, dw, dh Vykreslí zadaný obrázek. Formát Popis Barva ve stylu CSS Nastaví barvu pro vyplňování strokestyle Barva ve stylu CSS Nastaví barvu pro obrys linewidth Šířka čáry v pixelech Nastaví šířku čáry Kreslené obdélníky se rovnou zobrazují po zavolání metody. U čáry je třeba po načrtnutí zavolat metodu fill či stroke, aby se čára vyplnila barvou. Pro využití cest je třeba cestu začít metodou beginpath. Poté je možné kreslit libovolně čáry lineto a přesouvat kurzorem moveto. Takto je možné nakreslit libovolný obrazec. Po nakreslení je pomocí metod fill a stroke možné vybarvit obrazec a nakonec cestu zavřít. Vyplňuje se pouze v rámci jedné cesty, tedy neberou se v potaz ostatní již nakreslené objekty. Při kreslení se objekty vykreslí vždy přes sebe podle pořadí, v jakém jsou kresleny. Jednoduchý příklad využití metod kreslení je v následujícím bloku (Příklad 15). Příklad 15 - Vykreslení na plátno Canvas context.beginpath(); context.linewidth = 8; context.fillstyle = #6EE677 ; context.strokestyle = #E66E88 ; context.moveto(10, 10); context.lineto(100, 10); context.lineto(55, 100); 21

30 context.lineto(10, 10); context.stroke(); context.fill(); context.closepath(); context.fillstyle = #DDDD22 ; context.fillrect(35, 20, 40, 30); Předchozí příklad vykreslí následující obrázek ( Obrázek 3 ). Obrázek 3 - Nakreslený pomocí plátna HTML5 a JavaScriptu - Zdroj: Autor Poslední nevysvětlená metoda dokáže vykreslovat obrázek na plátno. Tento obrázek může být buď obrázek z elementu IMG a dokonce to může být i jiné plátno, které vykreslilo nějaký obrázek. Metoda je přetížena třemi možnými vstupy. První nejednoduší obsahuje pouze element obrázku a poté souřadnice vykreslení. Druhá varianta může být rozšířena o velikost nakresleného obrázku. Poslední varianta má navíc 2 souřadnice, obsahující informaci, kde se má obrázek oříznout. Následující příklad (Příklad 16) ukazuje nejlehčí variantu vykreslení obrázku na plátno. Vykreslí logo Google. Příklad 16 - Vykreslení obrázku na plátno Canvas var img = new Image(); img.addeventlistener( load, function () { var i = 2.1; context2.clearrect(0, 0, 800, 600); context2.drawimage(img, 20, 20); }, false); img.src = ; Kromě těchto metod lze využít další, jako třeba translate, která se stará o přesunutí obsahu plátna na zadanou pozici, či rotate, který otáčí obsahem plátna o uvedený stupeň. 22

31 Kreslení umožňuje vytvářet nejen hezké animace, ale i renderovat jednoduché hry a jinou grafiku. Je to další krůček, který webové aplikace přibližuje nativním aplikacím Události dotykového displeje vs. Myši Jedna z klíčových možností, která se týká především mobilních zařízení, je odchytávání událostí dotykové obrazovky. Tato vlastnost je velice podobná stávajícím událostem myši. Standardně lze odchytávat stisknutí tlačítka myši mousedown, puštění tlačítka myši mouseup, pohyb myši mousemove, najetí myši na prvek mouseover, odjetí myši z prvku mouseout, kliknutí myši mouseclick a případně dvoj kliknutí myši dblclick. Zmíněné události jsou na desktopovém počítači velice využívané. Stejnou měrou jsou využívané události dotykového displeje na mobilních zařízeních. S ohledem na trend dotykových telefonů jsou tyto události nedílnou součástí každé mobilní aplikace, a proto jsou ve většině prohlížečů plně podporovány. Zásadním rozdílem ovládání dotykovou obrazovkou a myší je samotné kliknutí. Dotyk prstu popřípadě stylusu automaticky vyvolává nějakou akci. Oproti tomu najetí myši na prvek akci nevyvolává. Kliknutí myši tedy odpovídá dotyku displeje. Posunutí myši, tedy mousemove, neodpovídá posunutí prstu touchmove. Tato událost by spíše odpovídala události mousedrag (pohyb se stisknutým tlačítkem), která v základním JavaScriptu neexistuje. Jak už jsem naznačil, události displeje začínají klíčovým slovem touch. V následující tabulce ( Tabulka 2 ) je uveden seznam události displeje a jejich ekvivalentu k události myši. 23

32 Tabulka 2 - Události dotykové obrazovky s ekvivalenty k myši Zdroj: Autor Událost Popis Ekvivalent myši touchstart Přiložení prstu na displej mousedown touchend Ukončení pohybu prstu mousemove touchmove Pohnutí prstu po displeji mouseup Každá z těchto událostí v JavaScriptu spouští callback funkci, které je předán objekt události. Ten obsahuje několik speciálních vlastností, uvedených v následujícím seznamu (Zdroj: Autor). seznam všech prstů přiložených na displej touches targettouches changestouches seznam všech DOM elementů pod prsty na displeji seznam všech prstů, které vyvolaly aktuální událost Každý prvek v seznamu je objekt, který obsahuje následující informace. číslo unikátní pro daný prst v rámci všech prstů na displeji identifier target clientx, clienty pagex, pagey screenx, screeny radius, coordinates, rotationangle element DOM, který je cílen daným prstem souřadnice prstu vůči prohlížeči včetně odscrolování souřadnice prstu vůči stránce s odscrolováním souřadnice prstu absolutně vůči displeji bez odscrolování popis elipsy popisující rozmístění prstů Seznam je u každé události uveden kvůli multi-touch obrazovkám, které už bývají běžnou součástí telefonů. Jelikož si jsou události myši a obrazovky podobné, je možné jednoduchým skriptem namapovat oba na stejný script a vytvořit stránky funkční s oběma událostmi. Následující script ukazuje příklad použití událostí displeje (Příklad 17). Zároveň ošetřuje události i pro události myši na desktopovém počítači. Příklad 17 - Použití událostí displeje var touchstart = function (evt) { var obj = typeof evt.touches!= 'undefined'?evt.touches[0] :evt; $( event ).html( Start: + obj.pagex + x + obj.pagey); evt.preventdefault(); candraw = true; } $(document.body).bind('touchstart', touchstart).bind('mousedown', touchstart); 24

33 var touchmove = function (evt) { if (!candraw) return; var obj = typeof evt.touches!= 'undefined'?evt.touches[0] :evt; $( event ).html( Move: + obj.pagex + x + obj.pagey); } $(document.body).bind('touchmove', touchmove).bind('mousemove', touchmove); var touchend = function (evt) { var obj = typeof evt.touches!= 'undefined'?evt.touches[0] :evt; $( event ).html( End: + obj.pagex + x + obj.pagey); candraw = false; } $(document.body).bind('touchend', touchend).bind('mouseup', touchend); Dotyková obrazovka, jak již bylo popsáno, je standardem každého chytrého telefonu a uživatelé si na ni stále více zvykají. Proto je třeba tyto události zařadit do aplikací, a to i do webových. Vývojáři prohlížečů a operačních systémů stále přinášejí nové věci v oblasti obrazovky, takže jsou i nové vlastnosti JavaScriptu. O rozdílech v různých systémech ještě bude popsáno v následující subkapitole Mapy Již byla zmíněna možnost získávat data GPS modulu, ovšem HTML5 jde s geolokací ještě dál. Ačkoli se nejedná přímo o funkcionalitu HTML5, je na ní postavená. Jedná se o mapování, neboli zobrazení map a práce s nimi. Dosud existují dvě API7, která jsou použitelná, a je možné s nimi psát zajímavé aplikace. První API je od firmy Google a druhá alternativní možnost je Tile5. Obě služby jsou možné připojit přes vzdálené API. První Google mapy se připojují přes adresu která vrátí JavaScript, na kterém už je možné vytvářet mapy a pracovat s nimi. Jako parametr je předán sensor. Pokud je ten nastaven na true, tak je automaticky zjišťována lokace uživatele a zadána do map. Funkcí, které API poskytuje, je celá řada. Nebudu je zde vysvětlovat, ale doporučuji se podívat na zdroj [Google, 2012]. Tyto mapy budou lehce popsány a vysvětleny v závěrečných příkladech. 7 API (Aplication Programing Interface) označuje v informatice rozhraní pro programování aplikací. [Wikipedia, 2012f] 25

34 Další firma, která poskytuje mapy pro HTML5, je zmíněný Tile5. Připojení k aplikaci probíhá podobným způsobem, a to připojením vzdáleného JavaScriptu. Dále je ovšem využíváno CANVAS elementu, na který je navázána mapa a vykreslena HTML5 technologiemi. Po vytvoření objektu je možné volat spousty funkcí, jejichž API je možné shlédnout ve zdroji [Tile5, 2012]. 2.3 Operační systém Android Úvod do OS V předchozích podkapitolách jsem popsal, jak je možné webové aplikace pro mobily vytvářet, resp. jakými jazyky psát kód. Nyní se pokusím vpravit do základních vlastností konkrétního operačního systému, a tím je Android OS. Tento operační systém je vyvíjen již od roku 2003, přičemž ho v roce 2005 odkoupila společnost Google [Wikipedia, 2012c]. V návaznosti na marketingový zásah společnosti Apple a rozšíření jeho pilotního produktu iphone se Android vyvinul do velice úspěšného prostředí pro mobilní telefony a zařízení. Tento systém je postaven na Linuxovém jádru, tedy OpenSource8, a to je v řadě případů jeho předností. Nativní aplikace pro tento systém jsou vyvíjeny v programovacím jazyce Java9, který je pro programátory velice pohodlný a jednoduchý. Z tohoto důvodu se vytváří velká spousta aplikací10, které z mobilního telefonu dokáží udělat velice užitečný a lákavý stroj. Tyto aplikace využívají právě přístup k periferiím telefonu. Jak už bylo popsáno, jedná se např. o fotoaparát, akcelerometr11, mikrofon, GPS a spousty dalších. Nativní aplikace jsou základem každého chytrého telefonu a v řadě případů je nelze jednoduše nahradit. Nevýhodou však může být nutnost instalace těchto aplikací, vysoká hardwarová náročnost či komplikovanější způsob programování aplikací [Šrajer, 2011]. Některé nevýhody a další řadu výhod se snaží přinést právě webový vývoj aplikací. Novější verze operačního systému Android obsahují již v základu kvalitní webový prohlížeč, který je schopen podporovat HTML5, CSS3 a JavaScript resp. ECMAScript12. Tato trojice je velice silným nástrojem pro tvorbu aplikací. Oproti již zmíněnému jazyku Java jsou technologie uzpůsobeny pro snadné vytváření uživatelského rozhraní a zároveň dokáží 8 OpenSource se rozumí aplikace či kód, ke kterému je volný přístup a lze jej upravovat podle vlastní potřeby a dále využívat pro programování dalších aplikací 9 Ve skutečnosti se jedná pouze o stejný programovací jazyk, nikoli o stejnou platformu, která by pro mobilní zařízení byla příliš náročná. Kompilátor tedy na rozdíl od standardní Javy tvoří přímo strojový kód pro OS. 10 V současné době se na oficiálním obchodu Android market ( pohybuje přes aplikací, do kterých nejsou započítané aplikace z neoficiálních obchodů [Wikipedia, 2012c]. 11 Akcelerometr je snímač, který pozná pohyb telefonu a to i pozici jeho natočení. 12 ECMAScript je standard, který vyčleňuje takové součásti JavaScriptu, které jsou stejně funkční pro většinu webových prohlížečů. Pojmy jsou v praxi často zaměňovány. 26

35 pracovat s nejvyužívanějšími komponenty při mobilním vývoji. Strukturování tagů HTML5 tedy nejen zpřehledňuje kód pro programátory a ulehčuje tvorbu uživatelského rozhraní, ale přispívá i lepšímu indexování stránek, např. pro vyhledávací stroje. CSS3 dokáže velice snadno přetvořit stránky do estetického zobrazení. JavaScript se poté postará o interaktivitu stránek a většinou i o samotnou logiku aplikace. Předtím, než začnu vytvářet webovou stránku, je třeba si uvědomit možnosti připojení mobilního telefonu. Situace s bezdrátovým připojením je velice různá jak v různých zemích, tak i v různých regionech země. V České republice není tato situace příliš dobrá, ale téměř všude je možné se k internetu připojit. Základní a nejčetnější technologie je GPRS. Přes GPRS se s českými operátory připojuje s rychlostí přibližně 30Kbps13, tedy asi 4KB/s. Pokud je mobil připojen takto, je třeba zásadně omezit množství přenesených kilobajtů, popřípadě se snažit části stránek nechat ukládat v prohlížeči. Další o něco rychlejší možnost je EDGE. Ta by měla poskytovat rychlost připojení až 200Kb/s 14(25KB/s). Další možností je připojení 3G. U této možnosti stejně jako u Wifi či HotSpot si již není třeba lámat hlavu s přenosovou rychlostí. Problém je, že v současné době je pokrytí 3G kolem 20%, a to především ve větších městech. Informace byly pořízeny ve zdrojích [T-mobile] a [newslog, 2004] Možnosti JavaScriptu v Android Konečně přejdu ke konkrétnější věci, a to jsou nové objekty a funkce JavaScriptu, přidané do Androidu pro práci s mobilním telefonem. Pro podrobnější informace o JavaScriptu doporučuji webové stránky [W3Schools, 2011]. Kromě veškeré funkčnosti, který JavaScript nabízí, je v Androidu rozšířen o možnost pracovat s periferiemi z následující tabulce ( Tabulka 3 ) Test GPRS z praxe je k nalezení ve zdroji [newslog, 2004]. Oficiální seznam rychlostí připojení od T-mobile je k nalezení ve zdroji [T-mobile]. 27

36 2012] Tabulka 3 - Podpora periferií ve verzích Android a přístup k periferiím prohlížečů - Zdroj: [Oehlman, et al., Funkčnost Podpora OS Android Přístup prohlížeče Detekce připojení 1.5 Přemostění GPS Geo-lokace 1.5 Ano Hardware senzory 1.5 Přemostění Dotyková obrazovka 1.5 Částečně a události Lokální paměť a databáze 1.5 Ano Zprávy a oznámení 2.2 Ne Fotoaparát 1.5 Přemostění Je vidět, že sice není podpora z prohlížeče úplná, ale velice uspokojivá. Téměř všechny funkce lze alespoň částečně využívat. U řádků, kde je uvedeno přemostění, se dá využívat funkcionalita přes speciální rozhraní, nikoli přímo prohlížeč. Toto rozhraní se nazývá např. PhoneGap a bude o něm ještě napsáno v pozdější kapitole. Ačkoli to není standard a ve spoustě prohlížečů Android dosud není funkčnost k dispozici, dá se předpokládat, že se tam postupem času dostane. Jedná se např. o přístup k datům akcelerometru. Ten je prozatím přístupný i jako následující možnosti pro PhoneGap. Volání probíhá přes instanci navigator.accelerometr. Dalšími přístupy jsou např. fotoaparát přes instanci navigator.camera, přístup ke zvuku a vibracím přes objekt navigator.notification Frameworky Jelikož je Android otevřená Linux platforma, je nejrozšířenějším systémem a má také ze strany komunity silnou podporu [Wikipedia, 2012d]. To je samozřejmě vidět i na frameworcích, které jsou pro Android navrženy. Na druhou stranu komunita velice ráda dodržuje standardy a konvence. Proto většina frameworků a knihoven, vyvíjených pro Android, je plně využitelných i v ostatních operačních systémech. To samozřejmě není nic špatného, naopak spíše ku prospěchu vývoje, ale Android tak ztrácí výhodu oproti komerčním operačním systémům, které kromě otevřených součástí mají i vlastní, penězi vyvíjené knihovny a frameworky. Webové prohlížeče Android si nejvíce rozumí s frameworkem jquery mobile, který je určen pro všechny platformy. Ten dokáže vytvořit jednoduše webové aplikace s podobným layoutem, jako mají nativní aplikace pro iphone. Obecně je snaha o vzhled směřována 28

37 k iphone aplikacím téměř u všech frameworků. Podrobněji o frameworcích bude popsáno v následující kapitole Webové prohlížeče Z hlediska vývoje je jistě důležité vědět, kde se vytvořené webové aplikace mohou zobrazovat, a proto v této kapitole představím webové prohlížeče, které je možné využívat právě na Android zařízení. Prohlížečů je velká řada, ale jen některé splňují standardy HTML5 a naštěstí ty jsou také těmi nejvyužívanějšími. Veškeré statistiky je možné shlédnout v následujícím zdroji [W3Schools, 2012]. Článek, ze kterého jsem vycházel při porovnávání prohlížečů, naleznete v tomto zdroji [Kilián, 2011] Opera První prohlížeč, který je špičkou i u desktopových počítačů, si našel velmi slušné místo v mobilních zařízeních včetně Android systémů. Jeho velkou výhodou je možnost nahrát téměř na každý OS. Již od začátku vývoje je totiž distribuována hned ve dvou verzích. První je Opera Mini, která byla dlouhou dobu v popředí před svým bratrem Operou Mobile. Důvodem byla možnost nainstalovat na jakékoli zařízení s podporou J2ME15, kterou jednu dobu mělo téměř každé mobilní zařízení. Musím ovšem zmínit zásadní nevýhodu, a to, že stránka je renderována na vzdálených serverech Opery a na mobilu je pouze zobrazen výstup. To se hodí pro pomalejší méně výkonné zařízení, nikoli pro účel tvorby moderních webových aplikací. Již zmíněný prohlížeč Opera Mobile v současné době úspěšně dohnal Java-verzi Opery a dokonce předehnal. V současné době je k dispozici na všechny verze Android a je velice silným nástrojem pro prohlížení webu. Z hlediska uživatelů má spousty předností, jako funkce Opera Turbo, zrychlující načítání stránek, nebo Opera Link, umožňující synchronizaci s uživatelovou desktopovou verzí prohlížeče. Z hlediska podpory HTML5 a nových vlastností webu není na špatné cestě, ovšem občas řeší některé situace nestandardně. To je ovšem cena za již zmiňované funkce jako Opera Turbo apod Výchozí browser Android Výchozí prohlížeč zabudovaný v Androidu v novějších verzích dokáže zpracovávat veškeré možnosti HTML5 a nebrání programátorovi vytvořit plnohodnotnou webovou aplikaci. Menší nevýhoda může být ze strany uživatelů, kteří s tímto prohlížečem přicházejí o některé funkce, které jiné prohlížeče poskytují. Stále ho ovšem využívá většina uživatelů Androidu, i když mu Opera často šlape na paty. I tak je dobré se na něj zaměřovat při vývoji. 15 J2ME je speciálně upravená verze Javy, přizpůsobená pro mobilní telefony. 29

38 Boat Browser Mini Tento prohlížeč je velice jednoduchý, ale zato velice rychlý i na horších konfiguracích. Proto si našel svoje umístění v Androidu. Jeho uživatelské rozhraní je velice minimalistické a jednoduché, nicméně přehledné a zvládne veškeré životně důležité funkce, které webový prohlížeč potřebuje. Kromě HTML5 dokáže zobrazit i Flash animace či pohybovat se v aplikaci offline po přesunutí do paměti telefonu Dolphin Browser HD Tento prohlížeč se vyznačuje tím, že je dostupný pouze na mobilním zařízení. To je jistým způsobem jeho výhoda, protože se vývoj nezatěžuje desktopovým rozhraním. Tento prohlížeč má řadu předností a funkcionalit. V nové verzi se dokáže i příjemně přizpůsobit tabletům. Je možné si dle libosti upravovat vzhled rozhraní, otevírat a ukládat karty a spousty dalšího. Je možné si ukládat cache na stránky, nebo ji naopak smazat. Flash animace je možné jednotlivě zapínat na stránce, což zrychlí načítání stránky, nebo je zapnout všechny najednou. A asi největší výhodou je možnost doplňovat prohlížeč o pluginy, které se hodí jen tomu, kdo je potřebuje. Tento prohlížeč nemá dominantní postavení v telefonech, ale jistě má svou budoucnost Chrome mobile beta Za zmínku stojí určitě i zcela nový prohlížeč pro Android zařízení a tím je Chrome. Za posledních pár let byl desktopový Google Chrome nejlépe si vedoucím webovým prohlížečem. Z toho důvodu je dobré předpokládat, že i mobilní verze bude novou jedničkou mezi prohlížeči. Zatím se jedná pouze o Beta verzi prohlížeče, běžící pouze na Android verze 4.0. Článek o novém prohlížeči je k nalezení ve zdroji [Mullany, 2012] Miran Browser Poslední prohlížeč, který představím, je Miran Browser. Ten je sice méně známý, nicméně se uplatňuje svou rychlostí jak z hlediska načítání stránek a hardwarové náročnosti, tak i uživatelským rozhraním, které usnadňuje celkovou navigaci Android Market Každý operační systém má i svou podporu ze strany programátorů resp. firem, které poskytují aplikace do daného prostředí. Na tomto místě se z převážné většiny prodávají nativní aplikace, ovšem nejen ty. K dispozici jsou i nativní aplikace zdarma a některé aplikace jsou v uvozovkách pouhé webové aplikace. Uživatel si stáhne jen odkaz na jistou stránku, která po otevření odebere navigační lištu a schová navigační prvky prohlížeče. Dále se pak tváří jako plně nativní aplikace a uživatel nemusí o tom, že se jedná o aplikaci webovou, ani 30

39 tušit. Aplikace jsou pro Android poskytovány na Android Market resp. na oficiálním obchodu Google Play16. Z mobilního telefonu je možnost stahovat a instalovat aplikace, určené pro daný typ telefonu. Aplikace jsou řazeny a nabízeny uživateli podle jejich hodnocení, počtu stáhnutí, oblíbenosti a dalších parametrů. Závislost je i na datu vložení aplikace, přičemž aplikace je prvních pár dní nabízena uživateli více, aby měla šanci se na trhu uchytit. Tento mechanismus je třeba vzít na vědomí při prodeji aplikace a je třeba správně sestavit marketingový plán již od začátku, protože posléze už je složité aplikaci vyzdvihnout. Jedná se sice spíše o vývoj nativních aplikací, ovšem ten má k webovému vývoji blízko a je možné, že se tyto dvě odvětví brzy propojí. 2.4 Operační systém ios Úvod do ios Jak už první písmeno vypovídá, jedná se operační systém vyvíjený společností Apple. Tento systém byl nejprve určen pro mobilní telefony iphone, nicméně postupem času se rozmohl i do dalších zařízení, jako je ipod, ipad či dokonce Apple TV. ios je podobně jako Android systém postavený na UNIX17 jádru. Jeho podstata je ovšem dost jiná. Apple již od prvních verzí ios šel cestou jednoduchosti. K veškerému ovládání postačuje jedno hlavní tlačítko a dotyková obrazovka. Odlišnost od ostatních OS je většinou patrná na první pohled. Veškeré přechody při uživatelských akcích jsou animovány stejně jako na desktopové verzi systému OS X18. Systémy ovšem nejsou stejné. Na OS X je možné dělat spoustu věcí a jde využívat nespočet funkcí, přičemž je využitelnost dohnaná do detailu. U ios je snaha spíše o jednoduchost a snadné ovládání. V mobilních telefonech, kde je třeba rychlého zacházení, se tato metoda osvědčila a také proto se iphone stal nejprodávanějším mobilním telefonem na trhu [Wikipedia, 2012l]. S příchodem iphone přišel i jeden trend, a to samotný vzhled iphone aplikací. Jedná se o horní navigační lištu, většinou s tlačítkem zpět či odkazem na menu a dále jsou veškeré odkazy zaoblené v boxech a s příslušným gradientem. Výchozí barvy většinou bývají modrá s šedým pozadím. Na obrázku ( Obrázek 4 ) je vidět typický layout iphone aplikace. 16 Google Play je internetový obchod s aplikacemi pro Android, k nalezení je na webové adrese 17 UNIX je označení pro OS postavené na architektuře vycházející z operačního systém UNIX. 18 OS X je operační systém od firmy Apple určený pro desktopové počítače imac, či laptopy MacBook. 31

40 Obrázek 4 - Typický layout ios aplikace v iphone Zdroj: [Doll, 2011] Tento trend v tzv. Look&Field začal u nativních aplikací iphone a dále se přesunul na ostatní platformy jako je Android, Symbian apod. V poslední době se ovšem stává hlavním stavebním kamenem pro webové aplikace. Veškeré frameworky, postavené pro mobilní webové aplikace, jej v základním nastavení využívají. Důvodem je, že uživatelé si na tento vzhled zvykli, a nemusí nic dlouze hledat a zvykat si na nové prostředí, což uživatelé dělají neradi [Wikipedia, 2012l]. Ačkoli v prvních verzích ios nedokázal plnohodnotně multitasking, tedy běh více aplikací najednou, nyní se s tímto problémem dokáže hravě vypořádat. Co se týče periferií, je iphone na velice dobré úrovni a i ios si s nimi dokáže dobře rozumět. Především se jedná o dotykový displej, který je předností každého iphone. Jeho multi-touch systém byl již ze začátku předním vodítkem samotného telefonu na trhu. S pomocí více prstů na obrazovce je možné precizně ovládat celý telefon. Z hlediska vývoje nativních aplikací je zde lehký problém. Není to opravdový problém, spíše nevýhoda oproti Androidu. Aplikace se totiž vyvíjejí v ne příliš přívětivém Objective-C, který je oproti Javě o něco náročnějším jazykem. Po dlouhou dobu nebylo možné vyvíjet aplikace jinak, než v aplikaci xcode, která běžela pouze na Mac OS X. To značně limitovalo možnosti vývojářů, resp. jim znepříjemňovalo život. Nyní je možné programovat aplikace i v jiných programech jako např. Adobe Flash. Aplikace jsou prodávány v elektronickém obchodu Apple s názvem itunes. 32

41 2.4.2 Webové prohlížeče JavaScript v iphone je podporován téměř stejně jako v ostatních operačních systémech. Samozřejmě záleží na prohlížeči, ve kterém je stránka zobrazena. Standardní integrovaný prohlížeč je Safari a je zřejmě nejlepší volbou pro iphone. Dokáže pracovat s HTML5, CSS3 a JavaScriptem a využívá veškeré standardy. Existuje pár odlišností v implementaci JavaScriptu, které rozšiřují práci např. s událostmi dotykového displeje, ovšem nejsou nikterak závratné a často jej podporují i ostatní OS [Posterous, 2008]. Prohlížeč Safari obsahuje standardní funkce, jako je více karet, záložky, historii a spousty dotykových akcí, například slide pro vpřed a zpět či multi-touch pro zoom. Další možností prohlížeče na ios je Opera Mini. Ta má stejnou funkcionalitu jako již popsaný z kapitoly o Android prohlížečích Frameworky Frameworků, které jsou k dispozici přímo pro ios resp. Safari, je celá spousta. Vyjmenuji některé z nich a v následující kapitole budou některé popsány podrobněji. Jako první zmíním framework s názvem jqtouch. Tento framework byl vytvářen přímo pro iphone, nicméně v současné době je možné jej stejně dobře využít i pro Android. Další možností pro tvorbu nativních aplikací pomocí webové technologie je Sencha Touch, který je v nynější době k dispozici ve verzi 2. Ten využívá webový framework Ext JS a některé další, které vyvíjí společnost Sencha Inc. Jako další frameworky na podobné bázi je možné využít např. Jo nebo webový framework jquery Mobile. 2.5 Další operační systémy Symbian OS Na trhu se pohybují i jiné operační systémy, které nemají špatné postavení. Před příchodem Android a ios byl ve vedoucím postavení operační systém Symbian, dodávaný především v zařízeních Nokia. Tento systém poslední dobou jde do ústraní, ale stále ho spousta chytrých telefonů využívá. Tento OS je lehce odlišný od předešlých zmíněných. Především se jedná o strukturu složek, která se spíše blíží systému Windows než ostatním Unixovým řešením. Jelikož systém tu byl ještě mnohem dříve, než mobily vůbec snily o dotykových displejích, má i v nových verzích pro dotykové displeje občas špatné návyky a není dostatečně uživatelsky příjemný. Možná to zapříčinilo úpadek Symbian. Symbian byl vytvořen i v nové distribuci zvané MeeGo, který měl být lépe přizpůsobivý novým chytrým telefonům, nicméně ani ten se moc neuchytil. Zlomem v jeho vývoji bylo určitě zrušení smlouvy s velikánem mezi výrobci mobilních telefonů, a to Nokií [Šrajer, 2011], [Oehlman, et al., 2012]. 33

42 Na systémech Symbian je možné dokupovat a stahovat aplikace jako v jiných OS a komunita není zrovna špatná. Samotná Nokia pro tento účel vytvořila vlastní obchod s aplikacemi s názvem OVI Store. Aplikacím ovšem chybí mrštnost a jednoduchost. Většina aplikací je velice robustních a mají složité uživatelské rozhraní, které se běžným uživatelům nelíbí jako u nových OS. Hardwarové požadavky OS i aplikací také nejsou nízké včetně jeho výkonu, takže zařízení se Symbian nevydrží dlouho bez potřeby dobít. V Symbianu je defaultně integrován webový prohlížeč, který není plnohodnotným prohlížečem pro HTML5 aplikace. Naštěstí je možné do něj doinstalovat jiný, jako např. Opera Mobile či Mini a využívat plně jeho funkce jako na jiných OS. Programování aplikací se provádí ve standardním C++ a je možné vytvářet nativní aplikace přes platformu PhoneGap Windows Phone 7 Další platformou, která vnikla na trh teprve nedávno, se jmenuje Windows Phone 7 a je kompletně přepracovaným nástupcem Windows Mobile. Společnost Nokia chystá stále více do svých telefonů nahrávat právě tento systém namísto předchozí éry Symbian. Tím se možná Windows Phone dostane také na zajímavá místa v žebříčku trhu. Další telefony, které jsou standardně dodávány s Windows Phone jsou zařízení firmy HTC. Ačkoli Windows Phone dlouho ve svém integrovaném prohlížeči nepodporoval HTML5, tuto ztrátu s novým prohlížečem IE9 napravil a není již problém tvořit kvalitní webové aplikace i pro tento OS. Nativní aplikace se pro tento OS prodávají a poskytují na Windows Phone Market Place, který je podobný ostatním obchodům s aplikacemi BlackBerry, WebOS (PalmOS), Bada Jako poslední OS, které stojí za zmínku, jsou: BlackBerry, který je ve světě business velkým hráčem, nicméně pro běžné uživatele bývá zbytečně složitý. WebOS, neboli dříve PalmOS je OS využívaný pouze pro mobilní zařízení a je postaven na jádru Linux. Tento systém vyvíjí společnost HP a má také své příznivce, i když v poslední době jich ubývá. Poslední systém Bada je vyvíjen stejně jako Android společností Google a v mnoha telefonech je v současné době zabudován a to především v telefonech společnosti Samsung. Bohužel má některá hardwarová omezení, která tento systém brzdí, např. oproti Androidu. 2.6 Web z pohledu dalších zařízení Webové aplikace na osobních počítačích U osobních počítačů, nebo jak v průběhu práce zmiňuji desktopových počítačů, je třeba přistupovat k tvorbě webových aplikací jiným způsobem, než u mobilních zařízení. Na počítačích je možné dát na obrazovku mnohem více informací najednou. U mobilních telefonů například není nutné vždy zobrazovat komplexní menu. Jednak se na displej celé 34

43 nevejde a hlavně jej uživatel ani nepotřebuje. Více informací se také načítá déle a u mobilních zařízení, kde bývá připojení často omezené, je třeba i na toto hledět. Zatímco u desktopů je načítána celá stránka se všemi informacemi a po přechodu na jinou stránku se znovu načtou všechny informace, u mobilů je dobré načíst na hlavní stránce jen navigaci, kam by se mohl uživatel vydat. Načtení takové stránky je velice svižné a přehledné na malých displejích. Pokud se uživatel rozhodne přejít do nějaké sekce, je třeba, aby měl rychlou možnost vrátit se zpět a přejít na stránku jinou. Zde by nemělo vznikat zdržení, proto je třeba zanechat menu v paměti. Tento způsob zobrazování se dociluje přes funkce XHR resp. AJAX. Při kliknutí uživatele na odkaz se načte pouze část stránky a tyto informace se uloží do stávajícího obsahu. Tento obsah nemusí být zprvu viditelný. JavaScript se po načtení postará o zobrazení načtené informace. Pokud uživatel klikne na tlačítko zpět, měl by se dostat na předchozí stránku, která již načtená je a stačí, aby JavaScript pouze přehodil zobrazení na předchozí stránku. Tímto způsobem je zajištěna rychlost webových aplikací a zároveň přehlednost. Na osobních počítačích je podobný způsob načítání stránek pomocí AJAX také možný, ovšem zaprvé uživatelé nejsou zvyklí na takovéto přechody mezi stránkami a zadruhé spousta desktopových prohlížečů ještě bohužel plně nepodporuje funkce AJAX, či XHR. Například internetový prohlížeč společnosti Microsoft Internet Explorer začal podporovat HTML5 až od verze 9. Většina uživatelů ovšem stále využívá starší prohlížeče a těch není malá část. JavaScript a nové funkce HTML5 a CSS3 je tedy dobré na počítačích využívat pouze jako doplňující funkce, ale mít stránky přístupné bez podpory těchto technologií. Pokud je vytvářena aplikace pro mobilní zařízení, je třeba, pokud je to možné, ji mít přístupnou i z počítače. Je nepravděpodobné, že by web z desktopových počítačů úplně vymizel. Každý se na fakturu z e-shopu raději ještě koukne na počítači a poté si ji třeba vytiskne. Proto by mobilní aplikace měly především sloužit jako rozšíření pro ty počítačové. Není vyloučené podporovat v mobilech plně všechnu funkcionalitu, naopak je to vítané, ale s ohledem na to, aby mobilní web zůstal jednoduchý na ovládání Tablety jako zlatá střední cesta V poslední době se uchytil trend právě v tabletech jako mobilních zařízeních. Jako první měl na trhu tablet Apple s názvem ipad, který obsahuje stejný operační systém jako jeho zmenšená verze iphone. Ze začátku byly brány tablety jako zbytečnost. Podle většiny uživatelů se jednalo o zvětšení dosavadních mobilních telefonů, ovšem velký displej začal mít mezi uživateli oblíbení. Ačkoli je velikost displeje většinou jedinou změnou oproti telefonům, je třeba k tvorbě aplikací přistupovat zase jiným způsobem. Zobrazení webových, ale i nativních aplikací navržených pro mobil, je na tabletech většinou značně nepraktické. 35

44 Spousty místa je nevyužito a uživatel vidí méně informací než by vidět mohl. Z toho vyplývá, že návrh aplikací je třeba vytvářet pro tablety znovu, oproti tomu technologie na tabletech se od mobilních telefonů neodlišují [Picchi, 2011]. Při tvorbě mobilních aplikací je třeba myslet právě i na tablety. Není totiž vyloučené, že za nedlouho dosáhne počet přístupů k aplikacím přes tablet podobné hodnoty jako počet přístupů z mobilních telefonů. Problém nastává například u výběru frameworku, ve kterém bude aplikace vyvíjena. Některé frameworky totiž dokáží excelentně vytvořit aplikaci pro mobil, nikoli však pro tablet, což může být problém pro budoucí rozšiřování pro tablety. Jednou z novinek, která s tablety přišla, je postranní lišta neboli sidebar. Další novinka je tzv. Pop-over, které na desktopu odpovídá vyskakovacímu oknu. Pokud mají být stránky moderní a uživatelsky přívětivé, je třeba tyto prvky do aplikace zakomponovat. 36

45 3 Přizpůsobení webových aplikací ve Frameworcích 3.1 Moderní mobilní zobrazení V této kapitole bude popsána práce s frameworky, ale ještě předtím je třeba zmínit, v jakém stylu frameworky podporují vývoj. Při vývoji pro mobilní zařízení platí několik zásad, které by při psaní aplikací bylo zbytečně složité stále dodržovat a prodlužovat tak kód. Jedná se zejména o vzhled, neboli Look&Field, který byl převzat z nativních aplikací pro iphone. Pro něj jsou typické ovládací prvky, které v krátkosti zmíním. Horní část displeje u mobilních aplikací bývá věnována navigaci. Zobrazena je jako pruh, ve kterém jsou přítomny nejdůležitější možnosti, jako např. O aplikaci, Přidat, Najít, Domů, Menu a především pak tlačítko Zpět. Pro tuto lištu je typické, že zůstává na obrazovce i při procházení dokumentem, resp. scrolováním. Ve výjimečných případech se tato lišta může nacházet i u dolního okraje displeje. Zafixování pevně na obrazovce je možné dvěma způsoby. První způsob je pomocí JavaScriptu, který odchytává událost scrolování a v závislosti na aktuální pozici scrolu dopočítá odsazení lišty. Tento způsob byl využíván dříve, především na PC. S tímto řešením přichází problém neustálého dopočítávání pozice, což zdržuje procesor a většinou je tak přechod neplynulý. Proto přišla s CSS možnost zafixovat prvek na displeji pomocí position: fixed. Tlačítka je doporučeno v liště používat maximálně dvě, jedno přichycené vlevo a druhé vpravo. Uprostřed je zobrazen krátký popisek aktuální stránky. Patička je podobného rázu, také je ji možné zafixovat, ovšem pouze pokud je třeba a jsou na ní důležité informace. Styl může zůstat stejný jako u horní lišty a může být i změněn. Pro barvu pozadí je dobré zvolit například přechod, umožňující vlastnost CSS3, a to gradient. Dále je možné do patičky přidat tlačítko např. pro odkaz na další stránku dokumentu či obecnou věc pro stránku, např. jméno autora, copyright apod. Samotný obsah může být několika typů, přičemž je možné jej kombinovat. Jako první je možné vložit seznam, který slouží např. jako navigace. V rámci jednoho seznamu jsou prvky řazeny vertikálně a jsou opticky spojeny. Začátek a konec seznamu je nejčastěji zaoblen vlastností border-radius. Co se barev týče, pozadí bývá defaultně šedé a ovládací prvky modré, přičemž je toto samozřejmě možné změnit. Samotný textový obsah včetně nadpisů bývá zobrazen standardně. Hlavní rozdíl oproti desktopu je znát u formulářů. Aby měl uživatel pohodlnější možnost vyplňování, je upraveno zobrazení jednotlivých tzv. tagů input. Pro standardní input 37

46 s textovým vstupem je využito možnosti placeholder. Ta, v případě, že je obsah inputu nezadán, zobrazí náhradní text v zašedlé barvě, který uživateli říká, co do pole vyplnit. Pro uživatele je tento způsob intuitivní a šetří místo na obrazovce. Stejným způsobem se může chovat i textové pole textarea. Další viditelnou změnou je zaškrtávací políčko checkbox. To je možné vykreslit standardním způsobem nebo jako vypínač. Ten má standardně dvě polohy možné změnit tahem po displeji a vybrat mezi On a Off. Prvek radio neukazuje standardní kroužky s možností vybrat jedno, nýbrž seznam možností se zvýrazněným vybraným prvkem dané možnosti. Text je zobrazen v samotném seznamu. Poslední změnou je pole select. To po kliku na prvek zobrazí výběr z možností na celém displeji. Následující obrázek ( Obrázek 6 ) ukazuje některé možné prvky na displeji mobilního zařízení. Obrázek 5 Standardní zobrazení obsahových prvků pro mobilní zařízení - Zdroj: Autor Obrázek 6 - Standardní zobrazení formuláře pro mobilní zařízení Zdroj: Autor Krom těchto základních prvků je možné přidávat další libovolné prvky, jako např. obrázky, animace, mapy atd. Každý framework přistupuje k tvorbě a k zobrazení lehce odlišně, proto aplikace napsané v různých frameworcích budou různě náročné na tvorbu a budou i nepatrně jinak vypadat na displeji. 38

47 V následujících podkapitolách popíši nejznámější a nejpoužívanější frameworky od různých firem či organizací. Některé z nich jsou zcela volně ke stažení a některé jsou podmíněny licenčními podmínky, např. pro užívání k nekomerčním účelům. 3.2 Framework jquery Mobile Stručně o možnostech frameworku Framework jquery Mobile je jeden z nejznámějších díky frameworku jquery, který je pomůckou při psaní JavaScriptových aplikací. Framework jquery je určen pro veškeré platformy a prohlížeče a odstraňuje tak nejednotnost ve standardech JavaScriptu napříč prohlížeči. Ve stejném duchu je vytvořen i jquery Mobile, tedy je určen pro veškeré standardní prohlížeče a mobilní zařízení. V následující tabulce ( Tabulka 4 ) je zobrazeno, v jakých prohlížečích a na jakých OS je jquery Mobile podporován. 39

48 Tabulka 4 - Podpora jquery Mobile v mobilních prohlížečích - Zdroj: [Wikipedia, 2012p] Platform ios Symbian S60 Symbian UIQ Symbian Platform Version Nativ e 4 5 v3.1.3, v3.2 A A A A A A v4.0 v3.1, v3.2 v5.0 v3.0, v3.1 v3.2 C A A C C B C B C C A C A 1.1 * C C C C B B A C A v6.0 v1.5, v1.6 v2.1 A A A A A A v2.2 A A v6.1 C C C v6.5.1 C C C v7.0 A A bada 1 A Maemo 5 B A* 0, 9 4 C C C C Net front C C 1.1* 1 C C MeeGo 1 0 Fennec Ozone A v4.5 v4.6, BlackBerry OS v4.7 v5.0 webos 8, 8,6 9, Opera Mini B A Windows Mobile 0,9 Opera Mobile v2.2.1 v.3.0 Android Phone Gap A C A * B C C * B A A C A A C A A* C A B A * C B* A* U zelených políček s písmenkem A je podpora maximální. U nativních prohlížečů je podpora téměř úplná. Jediný problém je u Windows Mobile resp. její verze 6.5 a nižších a starších zařízení BlackBerry. Zde je problém právě s nepodporováním standardu HMTL5. Pokud ovšem nad těmito OS zavřu oči, tak se jedná o zdařilý multiplatformní framework. Co je hlavním plusem jquery Mobile, je jeho zápis při vývoji stránky. Ačkoli je celý framework napsaný v JavaScriptu stejně jako jeho výchozí framework jquery, při psaní aplikací je často vidět JavaScript kód jen minimálně. Veškerý zápis pro vytvoření layoutu je 40

49 zakomponován do atributů a elementů HTML5, které tento speciální zápis podporují. Jedná se především atributy data-, které přišly jako nová možnost s HTML5. jquery Mobile pak jen tyto elementy označené data atributy přikreslí do mobilního zobrazení, popisovaném v předchozí podkapitole Psaní aplikace v jquery Mobile Psaní aplikací v jquery Mobile je opravdu velice jednoduché a rychlé. Během téměř pár minut je možné napsat AJAXovou aplikaci, která vypadá jako nativní mobilní aplikace. To značně zjednodušuje práci programátorovi, co se formalit týká. Není nutné psát složité styly a JavaScriptové přechody, ale pouze HTML kód a jquery Mobile zařídí zbytek. Přejdu tedy k první jednoduché aplikaci a následně vysvětlím (Příklad 18). Příklad 18 Jednoduchá aplikace v jquery Mobile <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1, minimum-scale=1" /> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>testovací aplikace</h1> </div> <div data-role="content"> Hello world </div> <div data-role="footer"> <a data-role="button" href="#home">domů</a> <a data-role="button" href="#about-us">o nás</a> 41

50 <a data-role="button" href="#about" datarel="dialog">o aplikaci</a> <a data-role="button" href=" </div> </div> <div data-role="page" id="about-us"> <div data-role="header"> <h1>o nás</h1> </div> <div data-role="content"> Stránka o nás </div> <div data-role="footer"> <a data-role="button" href="#home">domů</a> <a data-role="button" href="#about-us">o nás</a> <a data-role="button" href="#about" datarel="dialog">o aplikaci</a> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>o aplikaci</h1> </div> <div data-role="content"> Informace o aplikaci: verze </div> </div> </body> </html> Začátek dokumentu je standardní pro HTML5. Následují metatagy, kde jako druhý uvádím informaci o šířce stránky v závislosti na displeji a zakazuji přibližování. Tento řádek není v této aplikaci důležitý, nicméně je dobré ho vkládat pro pozdější použití. V těle 42

51 dokumentu je první DIV element, který obsahuje klíčový atribut data-role s obsahem page. Ten o tomto elementu říká jquery Mobile, že se jedná o stránku. První element označený jako data-role= page je zobrazen v prohlížeči. Ostatní jsou ze začátku schované. Obsahem tohoto elementu je daná stránka a vše co se na ní má zobrazit. Layout je rozdělený do tří základních částí pomocí rolí, a to hlavička header, obsah content a patička footer, stejně jako jsem zmínil v úvodní subkapitole. V hlavičce je vidět nadpis, který popisuje právě zobrazovanou stránku. Dále je hlavička prázdná. V obsahu je nějaký text pro danou stránku a v patičce je menu neboli navigace mezi stránkami. Navigace je vytvořena výčtem odkazů, jejichž role je button. Na stránce jsou pak zobrazena, jako tlačítka, kdy po kliknutí je přesměrováno na uvedenou stránku. Přesměrování neprobíhá standardní způsobem. Pokud se jedná o odkaz na stejnou doménu, je stránka z daného umístění načtena pomocí AJAX a zobrazena na stránce. Zde je vidět, jak jednoduše je možné tvořit AJAX stránky pouze pomocí standardních odkazů. V uvedeném příkladu je druhý způsob načítání odkazů a stránek, a to pomocí hashmarku (mřížky), za kterou uvedu id požadované stránky. Pokud je v prohlížeči na tento odkaz kliknuto, je na stránce nalezen element s odpovídajícím id a zobrazen jako aktuální stránka. Poslední nová věc je atribut data-rel v odkazu, který s hodnotou dialog namísto načtení do celé stránky otevře pouze dialogové okno s danou stránkou. Všechny ostatní bloky stránky, role page jsou ve stejném duchu. Obrazovky z uvedené stránky budou vypadat jako na obrázku ( Obrázek 7 ). 43

52 Obrázek 7 - Stránka z příkladu pro jednoduchou jquery Mobile aplikaci - Zdroj: Autor K těmto novým možnostem, které framework nabízí, je samozřejmě možné přidávat i původní možnosti HMTL5, připojovat vlastní CSS3 styly i vlastní JavaScript soubory. Přechody mezi stránkami jsou standardně nastaveny na tzv. fade, neboli zmizení a zobrazení. Je ovšem možné nastavit na kterýkoli jiný a na výběr je hned z deseti možností v následujícím seznamu. fade pop flip turn slidefade slide slideup slidedown none Nastavení přechodu se inicializuje atributem data-transition v daném odkazu. Tyto změny nemusí být pouze pro daný jeden prvek, ale je možné je nastavit i globálně, ovšem to 44

53 už je třeba psát i JavaScript kód. Objekt, který zprostředkovává komunikaci s jquery Mobile je v $.mobile. Na následujícím příkladu (Příklad 19) jsou zobrazeny další možnosti frameworku. Nyní už neuvádím hlavičku, ale pouze obsah těla dokumentu. Příklad 19 - Složitější aplikace v jquery Mobile <div data-role="page" id="home"> <div data-role="header"> <h1>testovací aplikace</h1> </div> <div data-role="content"> <div> <ul data-role="listview"> <li><a href="#prvni">první</a></li> <li><a href="#druhy">druhý</a></li> <li><a href="#treti">třetí</a></li> <li><a href="#ctvrty">čtvrtý</a></li> </ul> </div> <div data-role="collapsible"> <h2>první</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non anim id est laborum. proident, sunt in culpa qui officia deserunt mollit </p> </div> <div data-role="controlgroup" data-mini="true" datatype="horizontal"> 45

54 <a href="#" data-role="button">yes</a> <a href="#" data-role="button">no</a> <a href="#" data-role="button">maybe</a> </div> </div> <div data-role="footer" data-position="fixed"> <ul data-role="navbar"> <a data-role="button" data-icon="gear" href="index.html" data-theme="c">domů</a> <a data-role="button" data-icon="delete" href="index.html#about-us" data-transition="flip">o nás</a> <a data-role="button" data-icon="check" href="index.html#about" data-rel="dialog">o aplikaci</a> </ul> </div> </div> V příkladu přibyla nová role listview. V rámci ní je uvedený seznam zobrazován jako vertikálně položené řádky. Do nich je v příkladu dosazen odkaz. Zajímavou rolí je také collapsible. Jelikož na displeji bývá dost málo místa, je dobré některé části stránky skrývat a zobrazit je až po akci uživatele. V rámci collapsible je zobrazena pouze hlavička a zbytek se zobrazí až po kliknutí na hlavičku. Tlačítka je možné shromažďovat do skupin, které pak mají společné ohraničení pomocí role controlgroup. Tu lze nastavit na horizontální, či vertikální při zobrazování. Zajímavou vlastností, kterou lze jednoduše ve frameworku dosáhnout, je zafixování části stránky pevně na displeji. K tomuto slouží atribut dataposition= fixed, který na příkladu fixuje patičku s menu aplikace. Zobrazení prvků na displeji telefonu je vidět na následujícím obrázku ( Obrázek 8 ). Poslední možností, která je z příkladu patrná, je přidání ikony k tlačítku. To se provádí pomocí atributu data-icon s názvem dané ikony. Tento název je možné vybrat ze seznamu, nebo v pokročilých funkcích i stáhnout vlastní ikony a ty jako dodatečné. 46

55 Obrázek 8 - Stránka z příkladu pro jquery Mobile aplikaci Zdroj: Autor Framework jquery Mobile stejně jako samotné jquery je velice silným nástrojem, který velmi zjednoduší práci při psaní webových aplikací pro mobilní zařízení. Ve své verzi Final si zabral významný kus internetu mezi mobilními stránkami. Jeho velkou výhodou je právě zápis přímo do HTML kódu. Je to tedy rozšíření jak pro jquery, tak pro HTML5 a neusměrňuje styl psaní aplikací a tím pádem ani neomezuje programátora. Na oficiálních stránkách jquery Mobile je k dispozici builder pro aplikaci. Jednoduše se natahají požadované prvky do okna builderu a poté je možné kód stáhnout. Poslouží určitě dobře k zjištění možností a k osvětě samotného frameworku. jquery Mobile obsahuje řadu dalších možností a speciálních funkcí, které jsou velice dobře popsány na oficiálních stránkách jquery Mobile, tedy ve zdroji [jquerymobile, 2012]. 47

56 3.3 Framework jqtouch Úvod k Frameworku Framework jqtouch vznikl původně pro telefony iphone. Postupem času se ovšem zaměřil na veškeré operační systémy. Stejně jako jquery Mobile je i jqtouch postaven ne frameworku jquery a je třeba jej mít načtený společně s jqtouch. Knihovna jquery je velice robustní a obsahuje i některé nepotřebné věci, proto se jqtouch často načítá pouze s jeho osekanou verzi s názvem Zepto. Styl, ve kterém je jqtouch vytvořen, je velice podobný jquery Mobile. Je to jakési rozšíření značkovacího jazyka HTML o nové funkce. Zásadním rozdílem je, že jqtouch nevyužívá nové atributy data- přidané v HTML5, ale již dlouho známé atributy pro označení třídy class. Tento způsob sebou nese jak výhody, tak některé nevýhody. Elementy označované třídou jsou dobře zobrazeny i na starších verzích prohlížeče a ten ani nemusí podporovat HTML5. Pokud je v prohlížeči vypnutý JavaScript, je i tak stránka nějakým základním stylováním zobrazena. Zápis je často kratší, takže nenabývá zbytečné množství textu, který se stává nepřehledným. Nevýhodou je ovšem možnost kolize CSS stylů, protože názvy tříd se nijak od normálních neodlišují. Za cenu úspory místa je používání tříd k těmto účelům méně intuitivní a chybí zde odlišování logických chování. Aplikace v jquery Mobile je zato s vypnutým JavaScriptem absolutně nepoužitelná. Framework jqtouch oproti jquery Mobile používá vlastní zápis JavaScriptu o poznání více. Pro samotnou inicializaci je třeba napsat jeden řádek kódu, kterému je možné předat rozšiřující nastavení Psaní aplikace v jqtouch V následujících příkladech vytvořím obdobnou jednoduchou aplikaci jako s frameworkem jquery Mobile, ale s použitím jqtouch. Na tomto příkladu (Příklad 20) budou patrné rozdíly jak v samotném kódu a jeho náročnosti, tak ve výsledném vzhledu stránky. První jednoduchá stránka se sice zkrátila o pár řádků, ale přibyly některé další věci, bez kterých bych k výsledku nedospěl. Příklad 20 - Jednoduchá aplikace v jqtouch <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1, minimum-scale=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> 48

57 <meta name="apple-mobile-web-status-bar-style" content="blacktranslucent" /> <style type="text/css" "./jqtouch/themes/css/jqtouch.css"; </style> <style type="text/css" media="screen"> #jqt.leftbutton { position: relative; } </style> <script src="./jqtouch/src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script> <script src="./jqtouch/src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var jqt = new $.jqtouch({ icon : './img/logo.png', addglosstoicon : false, startupscreen : './jqtouch/demos/ext_autotitles/jqt_startup.png', statusbar : 'black' }); </script> </head> <body> <div class="current" id="home"> <div class="toolbar"> <h1>testovací aplikace</h1> </div> <div class="info"> Hello world </div> <div class="toolbar"> 49

58 theme="c">domů</a> <a class="button leftbutton" href="#home" data<a class="button leftbutton" href="#about-us">o nás</a> <a class="button leftbutton" href="#about" datarel="dialog">o aplikaci</a> <a class="button leftbutton" href=" rel="external">seznam.cz</a> </div> </div> <div class="page" id="about-us"> <div class="toolbar"> <h1>o nás</h1> </div> <div class="info" id="about-us-content"> Stránka o nás </div> <div class="toolbar"> theme="c">domů</a> <a class="button leftbutton" href="#home" data<a class="button leftbutton" href="#about-us">o nás</a> <a class="button leftbutton slideup" href="#about" data-rel="dialog">o aplikaci</a> <a class="button leftbutton" href="#seznam">seznam</a> </div> </div> <div class="page" id="about"> <div class="toolbar"> <a href="#" class="back close">x</a> <h1>o aplikaci</h1> </div> <div class="info"> Informace o aplikaci: verze </div> </div> 50

59 </body> </html> Úvodní hlavička je stejná. K tomu byly přidány ještě 2 metatagy, které dávají informaci pro iphone jak zobrazit aplikaci, resp. jaký zobrazit posuvník. Dále je naimportován styl a JavaScript jqtouch. Namísto standardního jquery je načtena zkrácená verze Zepto. Po té následuje JavaScript blok s inicializací jqtouch. V této inicializaci je přidána ikona, která se zobrazuje např. v aplikacích telefonu, či v záložkách. startupscreen je obrazovka zobrazovaná před načtením stránky a posledním parametrem je barva stavového řádku. V těle stránky se změnilo pár věcí. Jak už jsem popisoval, celá aplikace je řízena pomocí tříd. Elementy DIV v první úrovni jsou brány jako jednotlivé stránky. Aktuální stránka, která se zobrazí při načtení, je označena třídou current. Id stránek jsem ponechal stejné. Součástí stránky je namísto header element s třídou toolbar, který označuje hlavičku stránky. Obsah hlavičky zůstává stejný. Obsah stránky jsem zabalil do elementu s třídou info, která pěkně nastyluje obsah. Patička je označována stejně jako hlavička, a to třídou toolbar. Do patičky jsou vloženy odkazy s třídou button, které z nich dělají tlačítka. Zde nastává první zásah do frameworku, a to přepsání pozice třídy leftbutton. Framework totiž nedovoluje vložit do toolbar více jak 2 tlačítka, jedno vlevo a druhé vpravo. Ostatní stránky byly předělány stejným způsobem. Ke stránce o aplikaci bylo pro jednoduchost přidáno tlačítko zpět třídou back s popiskem X, které je alternativou pro zavření dialogového okna. Výsledná stránka je znázorněna na následujícím obrázku ( Obrázek 9 ). 51

60 Obrázek 9 - Stránka z příkladu pro jednoduchou jqtouch aplikaci - Zdroj: Autor Ačkoli v těle stránky bylo napsáno kódu o něco méně, stránka vypadá o něco lépe, než v případě jquery Mobile aplikace. Nicméně jqtouch nedovoluje takové možnosti a je třeba si některé věci sám upravovat a dopisovat. V druhém příkladu už je o něco složitější dopracovat se k výsledku. Na některé věci je třeba vytvořit dodatečnou logiku v JavaScriptu. Do hlavičky HTML dokumentu předchozího příkladu byl přidán následující kód (Příklad 21). Příklad 21 - Složitější aplikace v jqtouch (hlavička) <style type="text/css" media="screen"> #jqt.leftbutton { position: relative; }.groupbuttonmy { margin: 5px; padding: 5px; 52

61 }.buttonmy { border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; padding: 5px; margin: 10px 0 10px 0; background-color: #222222; border-right: 1px solid #505050; color: #888888; text-decoration: none; min-width: 30px; display: block; float: left; }.leftbuttonmy { border-left: 1px solid #EEEEEE; -webkit-border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-right: 1px solid #505050; }.rightbuttonmy { border-right: 1px solid #EEEEEE; -webkit-border-bottom-right-radius: 6px; -webkit-border-top-right-radius: 6px; } </style> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { $('.collapsiblemy p').css('display', 'none'); $('.collapsiblemy *').first().click(function () { var els = $('.collapsiblemy p'); if (els.css('display') == 'none') { 53

62 els.css('display', 'block'); } else { els.css('display', 'none'); } }); }); </script> V CSS stylech je popis tlačítek, které jsou sloučeny do skupiny. Pro tlačítka jsou definovány základní styly a pro okrajová tlačítka zaoblení okrajů pomocí border-radius. Abych doplnil funkcionalitu, kterou poskytuje jquery Mobile, přidal jsem krátký jquery kód, který se stará o zobrazování a skrývání textu pod titulkem, který jquery Mobile označuje jako callapsible. Na první pohled je vidět, co všechno navíc jsem musel dodat ke standardu jqtouch frameworku, abych dosáhl požadovaného cíle. Framework sice poskytuje řadu dodatečných rozšíření, které dokáží některé nedostatky doplnit, nicméně je ztracen komfort z jednoduchého psaní kódu. Do samotného těla jsem přidal následující kód (Příklad 22). Příklad 22 - Složitější aplikace v jqtouch (tělo) <div id="seznam"> <div class="toolbar"> <h1>testovací aplikace</h1> </div> <div> <ul class="plastic scroll"> href="#prvni">první</a></li> href="#druhy">druhý</a></li> href="#treti">třetí</a></li> <li class="forward"><a <li class="forward"><a <li class="forward"><a <li class="arrow"><a href="#ctvrty">čtvrtý</a></li> </ul> <div class="collapsiblemy"> <h2>první</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 54

63 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="groupbuttonmy"> <a href="#" class="buttonmy leftbuttonmy">yes</a> <a href="#" class="buttonmy">no</a> rightbuttonmy">maybe</a> <a href="#" class="buttonmy </div> </div> <div class="toolbar"> theme="c">domů</a> <a class="button leftbutton" href="#home" data<a class="button leftbutton flip" href="#about- us">o nás</a> <a class="button leftbutton slideup" href="#about">o aplikaci</a> <a class="button leftbutton" href="#seznam">seznam</a> </div> </div> Tento kód je velice podobný původnímu z jquery Mobile. Víceméně byly pouze zaměněny atributy data- za obyčejné třídy a lehce změněna pojmenování. Výsledné zobrazení aplikace pak vypadá jako na následujícím obrázku ( Obrázek 10 ). Některé prvky jsou graficky lépe zpracované, některé nikoli, ovšem toto je už spíše otázka návrhu a dodatečného stylování. Dokumentace k jednotlivým možnostem je k dispozici v balíku, který je ke stažení společně se samotným frameworkem, a to včetně některých rozšíření, zkušebních dem a dvou témat. 55

64 Obrázek 10 - Stránka z příkladu pro jqtouch aplikaci - Zdroj: Autor Framework jqtouch byl dříve povedeným rozšířením pro jquery a ulehčoval práci při tvorbě aplikací do mobilů. V nynější době je ovšem lehce pozadu oproti svým konkurentům, a jelikož doposud nepřišel se svojí finální verzí, nýbrž jen s beta 4, není velká naděje, že na trhu dlouho zůstane, nehledě na to, že doposud plně nepodporuje tablety. Mínus pro tento framework činí i velice strohá dokumentace ze strany výrobce, ale i ze strany komunity. Jedním ze znaků jeho zániku je také spojení se společností Sencha, která jej buď vyzdvihne, nebo připojí do svého dosavadního mobilního frameworku. Sencha totiž vyvíjí svůj vlastní framework, který budu popisovat v následující subkapitole. 3.4 Framework Sencha Touch Úvod do Sencha Touch Framework Sencha Touch je oproti dvěma předchozím frameworkům zcela jiný. Přístup k programování aplikace je pomocí JavaScriptu, nikoli pomocí značkovacího jazyka HTML5. Ačkoli jej Sencha Touch plně využívá, veškerý kód samotné aplikace je umístěn v JavaScript souborech, přičemž v souboru HTML je pouze skelet stránky a vložený script samotné 56

65 aplikace. Další zásadní rozdíl je, že Sencha Touch nepoužívá knihovnu jquery, nýbrž svou vlastní knihovnu s názvem Ext. V zásadě tato knihovna dokáže to samé jako jquery a možná ještě více. Zatímco v jquery a jquery Mobile je velice snadné napsat jednoduchou aplikaci, v Sencha Touch je to o něco těžší. Je to hlavně z důvodu jiné speciální syntaxe tohoto frameworku. Krom zápisu kódu je ovšem Sencha Touch mnohem robustnější framework, který obsahuje mnohem více funkcionalit a je možno pouze pomocí něho napsat ohromnou webovou aplikaci se vším všudy. Sencha Touch má takové množství funkcionalit a nastavení, že programátorovi téměř v ničem nebrání. Pomocí řady komponent je možné vytvořit rychle elegantní aplikaci. Jeho robustnost je ovšem také vlastním problémem. Aby bylo možné napsat tuto elegantní aplikaci, musí programátor framework dobře znát a umět s ním pracovat, což bývá často problémem. Pomocí frameworku, lze vytvářet jednoduché aplikace, které se konfigurují v JavaScriptu, resp. JSON objektech, ovšem jeho podstata je někde jinde. Se základním balíkem, který je na stránkách Sencha ke stažení, je k dispozici nejen knihovna pro tvorbu komponent pro mobilní zobrazení, ale i celý framework, který má MVC19 přístup. Předchozí vysvětlované frameworky slouží pouze jako pomocník při vypisování data na obrazovku do speciálního iphone Look&Field. Veškerou logiku je třeba zajistit na straně serveru a jedná se tedy v zásadě o tenkého klienta. U Sencha Touch je tomu naopak. Ten se stará jak o samotné vykreslování komponent, tak o logiku aplikace a ze serveru si pomocí AJAX a podobných pouze stahuje potřebná data. Sencha Touch sice funguje na většině nových zařízení a především na hlavních produktech firem, nicméně zaměření je spíše na business aplikace. Tyto aplikace je totiž třeba lépe propracovat a to tento framework nabízí v plné parádě Psaní JavaScript kódu v Sencha Touch Jak už jsem zmínil, veškerý kód se pro tento framework přesune na stranu JavaScriptu. V následujícím příkladu přetvořím jednoduchou aplikaci z předchozích subkapitol do tohoto frameworku. Nejprve ukáži, jak se zkrátil kód v HTML dokumentu prakticky pouze na skelet (Příklad 23). Příklad 23 - Skelet HTML aplikace v Sencha Touch <!DOCTYPE html> 19 MVC (Model, View, Controller) je to návrhový vzor pro tvorbu aplikací, který odděluje vrstvu dat, logiky a zobrazení. 57

66 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" /> <title>getting Started</title> <link rel="stylesheet" href="senchatouch/resources/css/senchatouch.css" type="text/css"> <script type="text/javascript" src="senchatouch/builds/sencha-touchall-compat.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html> Jak je vidět, jediné co dělám je, že načítám samotný framework Sencha Touch s jeho styly a následně soubor vlastní aplikace. Jelikož přístup k tvorbě je zásadně jiný, s příklady aplikace půjdu trochu pomaleji. Nejprve vytvořím první uvítací obrazovku s panelem v patičce a jednou ikonkou v souboru s aplikací app.js (Příklad 24). Příklad 24 - Vytvoření aplikace v Sencha Touch Ext.application({ name: 'Testovací aplikace sencha', launch: function () { Ext.create('Ext.tab.Panel', { fullscreen: true, tabbarposition: 'bottom', items: [ { title: 'Domů', iconcls: 'home', html: 'Hello world' } ] }) } 58

67 }); První řádek slouží ke startu aplikace, následně je uveden název aplikace a ve vlastnosti launch je funkce, která se spustí při startu aplikace. Uvnitř této funkce se již vytváří první komponenta a tou je tab panel. Jedná se vlastně o toolbar, který je pomocí vlastnosti tabbarposition ukotven na spodek obrazovky. Je nastaveno, že se jedná o celoobrazovkový režim a pomocí items, která je klíčovou vlastností většiny komponent, je nastavena první položka v toolbaru. Zde je uveden popisek, třída pro nastavení ikony a HTML kód zobrazovaný pod touto položkou. V dalším příkladu (Příklad 25) je již kód rozšířen o zbytek funkcionality, který stránka z předchozích příkladů nabízela. Příklad 25 - Složitější aplikace v Sencha Touch var storelist = Ext.create('Ext.data.Store', { data: [ {val:'první'}, {val:'druhý'}, {val:'třetí'}, {val:'čtvrtý'} ] }); var button = Ext.create('Ext.Button', { text: 'První', id: 'firstbutton', docked: 'bottom' }); Ext.application({ name : 'TestAppSecha', phonestartupscreen: 'resources/loading/homescreen.jpg', tabletstartupscreen: 'resources/loading/homescreen~ipad.jpg', launch : function() { Ext.create('Ext.tab.Panel', { fullscreen : true, tabbarposition : 'bottom', items : [{ title : 'Domů', 59

68 iconcls : 'home', xtype: 'container', fullscreen: true, items: [{ xtype: 'titlebar', docked: 'top', title: 'Testovací aplikace' }, { xtype: 'viewport', html : 'Hello world' }] }, { title : 'O nás', iconcls : 'user', xtype: 'container', fullscreen: true, items: [{ xtype: 'titlebar', docked: 'top', title: 'O nás' }, { xtype: 'viewport', html : 'Stránka o nás' }] }, { title : 'O aplikaci', iconcls : 'info', listeners: { painted: function () { Ext.Msg.alert('Dialog o apliakci', 'Informace o aplikaci: verze 1.0.0', function () {}); } 60

69 } }, { title : 'Seznam', iconcls : 'more', title: 'Seznam', xtype : 'list', fullscreen: true, itemtpl: '<div>{val}</div>', store: storelist, ui: 'round', pinheaders: false, onitemdisclosure: function (record, btn, index) { na '+record, function () {}); Ext.Msg.alert('Dialog seznamu', 'Kliknuto }, items: [{ xtype: 'titlebar', docked: 'top', title: 'Seznam' }, button] }] }) } }); Ext.create('Ext.Panel', { html: 'Lorem ipsum dolor sit amet.', left: 10, padding: 20 }).showby(button); Je vidět, že kód je značně delší než u předchozích frameworků a docela nepřehledný. Co se týče výsledného zobrazení, dá se říci, že je o něco elegantnější. Výsledné zobrazení je možné vidět na následujícím obrázku ( Obrázek 11 ). 61

70 Obrázek 11 - Zobrazení jednoduché Sencha Touch 2 aplikace - Zdroj: Autor Ačkoli je framework značně složitější, je možné s ním dělat divy, o kterých je možné si nechat v jquery Mobile zatím jen zdát. Sencha Touch je velice silný nástroj a ve své verzi 2, která je nyní jedním z hlavních produktů Sencha, dokáže nejen dokonalé zobrazení na mobilních telefonech, ale i na tabletech s využitím veškerých jeho nových možností jako jsou dialogy, postranní lišty apod. Sencha Touch obsahuje nespočet možností, komponentů, událostí, rozšíření atd., které jsou podrobně popsané včetně příkladů, jsou součástí balíku frameworku, který je ke stažení na oficiálních stránkách Sencha. 3.5 Shrnutí frameworků Před tím, než se začne vytvářet webová aplikace, je třeba se rozhodnout, jak se bude psát, jakými prostředky a tedy v jakém Frameworku, pokud vůbec v nějakém. Důležitý pro rozhodnutí je určitě charakter projektu. Pro malé jednoduché aplikace a webové prezentace jistě poslouží použití frameworku jqtouch stejně jako jquery Mobile. Oba jsou v zásadě jednoduché a vytvoří aplikaci s jistými standardy, které se do mobilních aplikací mezi uživateli vžily. Není poté třeba přemýšlet nad složitým layoutem aplikace, aby byla pro 62

71 uživatele přívětivá a přátelská. Využije se tak best-practices, které do frameworku tvůrce přidal. Pokud se jedná o aplikaci ve stylu ad-hoc (tedy jednorázovou aplikaci) nebo podobně malou aplikaci, je možné framework úplně vynechat. Tyto aplikace často vyžadují rychlost načtení a používání a je třeba přihlédnout i na velikost souboru frameworku, která se pohybuje v řádu kilobajtů, což může být v takovémto případě zbytečnou přítěží při stahování aplikace. Frameworky také využívají složité selektování v DOM struktuře a složitější logiku, která také může zbytečně zpomalovat zařízení. V takovém případě se v aplikaci použijí jen takové funkce, které aplikace potřebuje v rámci standardního HTML5, CSS3 a JavaScriptu. Pokud se jedná o aplikaci větší, která má obsahovat složitou funkcionalitu, je dobré se držet kvalitního zázemí, a to např. frameworku Sencha Touch. U frameworku je z jeho strany zajištěna aktualizace s novými standardy, kompatibilita s určenými zařízeními a opravování chyb frameworku. Pro stranu tvůrce aplikace pak framework zajišťuje kvalitní zázemí pro aplikaci, které může mít nadstandardní možnosti. Sencha Touch, ale i jquery Mobile podporují řadu funkcí, jako práce s Google mapy, s geolokací, s dotykovým displejem a další. Tato podpora pak zvyšuje konkurenceschopnost aplikace. Frameworky jsou často chráněny licenčními podmínkami a oficiálními licencemi, které pro tvůrce mohou činit také problém. Ačkoli je většina z nich pod licencí OpenSource, je někdy potřeba do kódu zasáhnout či ho rozšířit a aplikace pak musí být přístupná např. pod stejnou licencí, a to může být u komerčních aplikací problém. Každopádně je třeba si před tvorbou aplikace tyto informace zjistit a vyřešit. Sencha Touch např. nabízí svůj framework také pod komerční licencí, která je sice placená, ale není třeba se o tento problém dále starat. 63

72 4 Nativní aplikace 4.1 Možnosti tvorby nativních aplikací Moje práce směřuje hlavně k webovému vývoji, nicméně ten se v posledních letech velice přiblížil vývoji nativnímu, a to jak možnostmi, které nabízí, tak vzhledem a způsobem vývoje. Proto v této subkapitole zmíním, jakými způsoby se dají aplikace pro telefon dále vyvíjet a lehké porovnání s nimi oproti aplikacím webovým. Krom toho, že se aplikace stávají podobnými, vznikají i střední cesty, které propojují oba světy aplikací. Jedná se o vývoj nativních aplikací pomocí technologií, navržených pro vývoj webu, kde průkopník tohoto světa je PhoneGap. V současné době se do této sféry začíná připojovat i Microsoft na zařízeních s OS Windows Phone 7. Podrobněji o PhoneGap bude psáno v následující podkapitole Android aplikace Nativní aplikace se pro zařízení s operačním systémem Android programují v jazyce Java. Ten má s původním jazykem Java od společnosti Oracle pouze stejnou syntaxi a konvence. Ve skutečnosti aplikace běží ve virtuálním stroji Dalvik, nikoli v Java VM. Do byte kódu tohoto stroje se kompiluje kód napsaný v Javě, která je rozšířena o knihovny Androidu. Tento způsob vytvořila společnost Google pro zrychlení běhu aplikací a celkovou optimalizaci výkonu. Pro vývoj nativních aplikací pro Android hraje možnost vytvářet aplikace na kterékoli desktopové platformě pomocí Android SDK a rozšíření pro editor Eclipse, či některé další editory [Šrajer, 2011]. Na rozdíl od ostatních operačních systémů je možné Android emulovat na desktopovém operačním systému včetně všech jeho funkcí. Emulátor spustí zařízení přímo v operačním systému a je možné na něm dělat veškeré operace jako na opravdovém zařízení. K tomu je možné simulovat různé vstupy, jako je příchozí hovor, příchozí SMS, GPS pozici, ale dokonce i GPS pohyb. Pro zprovoznění vývojového prostředí pro Android aplikace je třeba nainstalovat pouze již zmíněný Android SDK, ke kterému jsou dostupné aktualizace aktuálních verzí Android. Pro spuštění emulátoru je možné nakonfigurovat různé parametry přístroje dle vlastní libosti a potřeby. Aplikace jsou po dokončení vývoje publikovány na Android Market, kam je může nahrát každý registrovaný vývojář. Tyto aplikace neprocházejí žádnou kontrolou a je možné nahrát tak kteroukoli aplikaci bez ohledu na její funkčnost. Google se svým obchodem vytvořil volný trh s aplikacemi, které posoudí trh sám a vyzdvihne pouze ty kvalitní a oblíbené. 64

73 4.1.2 iphone aplikace Aplikace pro operační systém ios jsou vyvíjeny v jazyce ObjectiveC, který je rozšířením klasického jazyka C o knihovny, podporující mobilní periferie a další možnosti. Společnost Apple dlouhou dobu neumožňovala vývoj v jiném editoru než xcode od stejné společnosti. Tento nástroj je ovšem možné spustit pouze na desktopovém Mac OS, což bylo pro vývojáře značnou přítěží. V posledních verzích SDK ovšem Apple umožnil vývoj i na jiných operačních systémech a v jiných editorech, čehož se ihned chytly editory Flash CS5.5, Appcelerator Titanium a další. Co se týče ladění aplikací, probíhá na rozdíl od Androidu v simulátoru, který nedokáže přesně zobrazit dané zařízení, ale pouze jej simulovat. To lehce znepříjemňuje ladění, ale pro běžné aplikace vystačí. Tato platforma je uzavřený software a to jej činí výjimečným a nese to své výhody i nevýhody. Aplikace jsou kontrolovány společností Apple, ale jsou pak zase kvalitnější. iphone resp. Apple je v této sféře jednoznačným průkopníkem a veškeré novinky do mobilních zařízení přinesl právě on. Ačkoli ho zdatně Android dohání, je pravděpodobné, že trh povede stále Apple se svými novinkami Ostatní aplikace Pro ostatní operační systémy se většinou vyvíjí v jazyce C++, upraveném pro mobilní zobrazení nebo v jazyce Java (J2ME) také pro mobilní zařízení a pro Windows Phone 7 se vyvíjí v.net. Nativní aplikace dobily svět a většina z nich je určena pro Android a iphone. Pokud aplikace není podporována v dalších zařízeních, není to většinou znatelný problém. Tato ostatní zařízení se systémy Symbian, Bada, WebOS apod. se ovšem stále vyskytují a je dobré podporovat i ta, pokud je to možné. S řešením přišly tzv. wrapery, neboli obálky pro webové aplikace. Webové aplikace totiž dokáží téměř to samé, co standardní nativní aplikace a pokud ne, wrapery jim pomohou, aby to dokázaly. Budoucnost vývoje pro mobilní zařízení je určitě touto technologií ovlivněna a nejlépe má zatím našlápnuto PhoneGap, který je předmětem následující kapitoly. 4.2 PhoneGap Jeden z nejúspěšnějších wraperů je právě PhoneGap. Jedná se o jakousi aplikaci, do které je vložen webový kód včetně HTML5, CSS3 a JavaScriptu a zabalen do balíčku, určeného pro jakýkoliv operační systém. Často je tento wraper rozšířen o možnost přemosťovat některé funkcionality, které webové stránky samy o sobě nezvládnou. PhoneGap dokáže přemostit některé z nich. Podrobnější informace o podpoře periferií na PhoneGap jsou uvedeny v kapitole 2.3.2, v tabulce ( Tabulka 1 ). PhoneGap nabízí ke stažení na svých stránkách SDK, pomocí kterého se tvoří projekty k aplikacím. Každý projekt má své speciální umístění složek, ve kterých se tvoří nativní 65

74 aplikace pro různá zařízení. V současné době PhoneGap ve verzi 1.6 podporuje tvorbu aplikací pro operační systémy ios, Android, Symbian, Windows Phone 7, Bada, WebOS, BlackBerry. Každý systém podporuje jiné rozpětí funkcionalit. Podrobný přehled je možné získat ve zdroji [PhoneGap, 2012b]. Jedním z problémů webových aplikací je nemožnost je zveřejňovat v Application Marketech. Běžně tyto obchody totiž dokáží zveřejňovat a prodávat pouze nativní aplikace pro danou platformu. Pokud je webová aplikace zabalena do PhoneGap, nic nebrání ji uplatnit na těchto obchodech Instalace a konfigurace Pro zprovoznění PhoneGap je na oficiálních stránkách k dispozici velice užitečný manuál, který provádí nastavením pro všechny podporované platformy. V mé práci se zabývám převážně systémem Android a ostatními pouze okrajově. Pro systém Android je tedy třeba stáhnout a nainstalovat Eclipse Classic. Vývojovým prostředím bude lehce věnována následující podkapitola. Dále je třeba stáhnout a nainstalovat Android SDK. Ten umožní emulovat zařízení Android. Poté už stačí jen nainstalovat pluginy do Eclipse. Po nainstalování je již možné vytvořit nový projekt Android. Ten vytvoří potřebnou strukturu složek pro PhoneGap. V archivu PhoneGap, který je ke stažení na oficiálních stránkách, je k dispozici příklad projektu pro každou platformu. Struktura složek je rozdílná, protože za každým OS stojí jiná technologie. U Androidu je to Dalvik, tedy pro zjednodušení Java. Ve stejném archivu je k dispozici i kompletní API pro dodatečné možnosti PhoneGap pro JavaScript. Klíčový propojovací soubor pro rozšíření o možnosti PhoneGap se jmenuje cordova-1.x.x.js, a k němu stejnojmenný soubor JAR pro Java prostředí. Konfigurace jsou pomocí XML souborů, přičemž je potřeba tuto složku překopírovat z příkladového projektu a nastavit. Drobné úpravy, a to především pro nastavení hlavní složky HTML projektu, je třeba nastavit v loadovacím Java souboru. Veškeré informace o instalování a konfiguraci jsou krok po kroku na oficiálních stránkách PhoneGap. Kompilaci do výsledné nativní aplikace je možné provádět buď přímo v Eclipse, a to jak do emulátoru, tak do reálného zařízení. Druhý způsob kompilace a spuštění je pomocí příkazové řádky a příkazů android update project p./, adb devices, emulator $android_web_apps, ant debug install. Pro správné používání v příkazové řádce je třeba stáhnout a dát do proměnného prostředí Path aplikace Apache ANT Dodatečné možnosti Po spuštění a nainstalování se v zařízení objeví ikona aplikace, kterou lze spustit. Pro samotný webový projekt je nejdůležitější JavaScript cordova, který je třeba připojit ke svým stránkám. Díky němu je možné přemosťovat periferie telefonu do JavaScriptu. Klíčovými 66

75 možnostmi, které PhoneGap nabízí ve své knihovně, je akcelerometr, fotoaparát a přístup do galerie, oznámení tónem či vibrací a některé další. Pro přístup k akcelerometru je využíváno stejného principu jako u získávání dat z GPS. V systémovém objektu navigator.accelerometer se po připojení cordova.js objeví nové možnosti a metody. Hlavní metoda je watchacceleration, které je předán callback funkce pro zpracování dat, callback funkce pro chybu a dodatečná nastavení. Metoda vrací instanci časovače, kterou je možné pomocí metody clearwatch zrušit. Callback funkci je předán objekt, obsahující 3 vlastnosti, a to souřadnice naklopení (x, y, z). V nastavení je předávána především hodnota frekvence volání callback funkce s novými daty, a to ve vlastnosti frequency. Ačkoli akcelerometr je senzor zjišťující zrychlení přístroje, je v drtivé většině využíván jako senzor naklopení telefonu v prostoru. Pomocí PhoneGap knihovny je možné nejen přistupovat k fotoaparátu a vytvářet nové fotky, ale je umožněn i přístup k již vyfoceným obrázkům v galerii. V umístění navigator.camera přibyl nový objekt, na kterém po zavolání metody getpicture telefon otevře rozhraní pro focení. Po vyfocení obrázku se zavolá první callback funkce. Při nezdaření focení se zavolá druhá callback funkce. Poslední parametr určuje nastavení, a to především kvalitu výsledného obrázku v procentech ve vlastnosti quality. První callback funkci je standardně předána proměnná s daty v binárním tvaru. Tento obrázek je možné vykreslit na stránce pomocí vložení dat do atributu SRC v tagu IMG, a to s prefixem pro dekódování dat data:image/jpeg;base64,. V nastavení metody je možné nechat si vrátit ne data, nýbrž absolutní cestu k obrázku na disku telefonu (URL, či URI) pomocí vlastnosti destinationtype (požadované konstanty jsou Camera.DestinationType.FILE_URI, Camera.DestinationType.FILE_URL). Pokud se vlastnost Defaultně je nastaveno focení pomocí fotoaparátu. sourcetype Camera.PictureSourceType.PHOTOLIBRARY, nastaví na konstantu je uživateli nabídnuto z galerie obrázků namísto fotoaparátu. Někdy je třeba uživatele aplikace upozornit o nějakém stavu. Zvlášť, když se jedná o aplikaci běžící na pozadí. K tomuto účelu zde vznikl objekt navigator.notification se dvěma metodami. První je beep, které je předán počet pípnutí. Další metoda je vibrate, které je předán čas délky vibrace v milisekundách. Jednoduchou aplikaci zabalím do PhoneGap pro Android v závěrečných příkladech. 4.3 Vývojová prostředí a simulátory Pro vývoj webových aplikací je možné použít i úplně standardní editor jako třeba notepad. Kód totiž není třeba kompilovat a o zpracování se postará sám webový prohlížeč. 67

76 Součástí vývoje je i samotný webový prohlížeč. Většinu vlastností a možností je možné testovat přímo v desktopovém prohlížeči. Prohlížeč Google chrome je ideální náhražkou pro mobilní prohlížeč Android zařízení. Stejné zastoupení dokáže i prohlížeč Safari pro desktop jako vývojové prostředí pro ios aplikace. Univerzální prohlížeč Opera má taktéž podobné zobrazení na desktopu a na jeho mobilních verzích Simulátory a Emulátory Jednoduché webové aplikace lze tedy plnohodnotně ladit na desktopu. Pro složitější aplikace mohou být standardní desktopové prohlížeče problémem při vývoji. Jedná se především o aplikace s rozšířeným dotykovým ovládáním, GPS aplikace apod. K těmto účelům existují Simulátory nebo lépe Emulátory. Pomocí simulátorů je možné nasimulovat chod aplikace jako v reálném zařízení. To ovšem ne vždy odpovídá realitě a existují zde další problémy se simulací dalších periferií apod. Simulátory se především používají pro vývoj nativních aplikací. Emulátor se navenek chová téměř identicky jako Simulátor. Rozdíl je ovšem ve stylu načtení aplikace. Pomocí emulátoru se ve virtuálním počítači (telefonu) naemuluje a spustí plnohodnotný Operační systém jako třeba Android. Ten má oproti standardním operačním systémům v telefonech pouze pár úprav, poskytujících simulace čidel a periferií. Společnost Google dohnala emulaci k dokonalosti a je možné spustit více různých emulovaných zařízení najednou a dokonce si mezi jednotlivými volat, posílat zprávy, simulovat GPS pozici i pohyb apod. Na tomto emulátoru jdou instalovat veškeré Android aplikace včetně aplikací ve wraperech jako PhoneGap. Pro webové aplikace je ovšem nejdůležitější mít nainstalovaný webový prohlížeč a aplikace spouštět v něm. Pro Android je k dispozici emulátor volně ke stažení společně s celým Android SDK. V tomto nástroji je možné stáhnout veškeré dostupné verze Android od verze 1.0 až po současnou 4.0. Před spuštěním emulátoru je třeba si vytvořit zařízení a nakonfigurovat jej. Nejdůležitější informace o zařízení jsou: rozměry displeje, verze operačního systému, podporované periferie a další. Po vytvoření emulátoru je možné jej spustit, což trvá necelou minutu až několik minut. Tato doba se výrazně neliší od doby zapnutí reálného přístroje. V emulátoru je možné využívat klávesnici a funkční tlačítka a pomocí myši simulovat dotyky prstu na displeji PhoneGap Přímo od tvůrce PhoneGap je doporučováno pro jeho projekty využívat editor Eclipse. Pro něj je k dispozici rozšíření o tvorbu projektu PhoneGap Android. S tímto rozšířením v editoru se zjednodušuje ladění aplikace a oprošťuje se od příkazové řádky. Jak už bylo 68

77 popsáno, většina webových aplikací je možné ladit ve standardním desktopovém prohlížeči. Pro složitější aplikace je třeba využít SDK Android a jeho emulátor, který lze v editoru přímo spustit pro otevřený projekt. Eclipse zvládne našeptávání a některé další možnosti, které jde rozšířit o nespočet pluginů Appcelerator Titanium Editor Appcelerator Titanium studio je velice silným nástrojem právě při tvorbě mobilních aplikací. Již v základní verzi je možné vytvářet projekty jak pro desktop, tak pro mobil. Projekt je vytvořen se základní strukturou složek, potřebnou pro správný chod aplikace. Je možné připojit k editoru různá SDK pro různá zařízení, jako je Android, iphone, BlackBerry apod. Při spouštění aplikace z editoru je nabídnuto, v jakém zařízení se má aplikace spustit. Na výběr jsou jak zmíněná SDK, tak veškeré nainstalované internetové prohlížeče. Aplikace může být kromě klasického spuštění spuštěna i v debug režimu. Editor je spojen s konzolí a je možné v něm využívat sadu kvalitních a užitečných nástrojů. Kromě mobilního webu dokáže editor vytvářet i projekty serverové jako PHP, Ruby apod. a je v něm možné psát i plně nativní aplikace. 69

78 5 Praktická ukázka aplikace Pro příklad jsem se rozhodl vytvořit aplikaci pro osobní hotovostní účetnictví. Aplikací je možné zadávat nové položky, a to Platbu, Výběr z bankomatu, Dluh, Půjčení hotovosti a Příjem. Dále je možné si prohlížet veškeré uložené informace v různých sestavách. Při přidávání položky je zadána částka, datum a čas, umístění a popřípadě poznámka a osoba, které se položka týká. Osobu je možné buď vytvořit novou zadáním jejího jména, nebo vybrat ze seznamu již uložených osob. Umístění je defaultně nastaveno na aktuální pozici GPS. Je možné pozici změnit na některou ze seznamu uložených míst nebo vybrat z mapy. Mezi sestavami je možné nalézt seznam bankomatů včetně jeho statistiky a možnosti zobrazení na mapě. Dále je k dispozici seznam míst, také zobrazitelný na mapě, a seznam osob s informacemi o dluzích. Předtím, než jsem začal programovat samotnou aplikaci, rozmyslel jsem si její funkčnost a následně nakreslil tzv. mockupy. Ty ukazují veškerou funkcionalitu, kterou aplikace bude nabízet. Jedná se o předpokládaný vzhled obrazovek aplikace. Pro tvorbu mockupů existují různé softwarové aplikace. Já sem si ovšem vystačil jen s tužkou a papírem. Návrh nakreslených mockupů je vidět na obrázku ( Obrázek 12 ). 70

79 Obrázek 12 - Návrh aplikace pomocí mockup (tužkou na papíru) Zdroj: Autor V aplikaci jsou využívány některé možnosti, které jsem v teoretické části práce popsal. Jedná se o GPS lokalizace, WEB SQL databáze, Dotykové události, jquery Mobile, Application Cache, Google Maps Mobile a pro PhoneGap je možné rozšířit ještě o některé 71

80 další jako Kontakty, SMS, volání apod. Celá stylizace aplikace je vytvořena pomocí frameworku jquery Mobile. Kompletní logika je napsána v JavaScriptu s pomocí knihovny jquery. Další knihovnou, která je připojená, jsou zmíněné Google Mapy. Na serverové straně je pouze zajištěno, aby se soubor s příponou.manifest posílal se správným MIME typem. Aplikace využívá možnosti cachování a tedy kromě map je možné k aplikaci přistupovat i bez připojení k internetu. Funkční běžící aplikaci je možné vyzkoušet na stránkách [Žabka, 2012b]. Ke stažení je pak [Žabka, na adrese 2012c]. Kompletní kód aplikace je přiložen jako příloha v poslední kapitole Přílohy. Oproti navrhovanému vzhledu se aplikace lehce změnila, nicméně k dispozici je veškerá navrhovaná funkcionalita. Na následujícím obrázku ( Obrázek 13 ) jsou vidět skutečné obrazovky hotové aplikace. 72

81 Obrázek 13 - Obrazovky hotové příkladové aplikace Zdroj: Autor 73

82 5.1 Nativní aplikace pro Android Příklad nativní aplikace bude pouhé obalení mé webové aplikace do wraperu PhoneGap. Není nutné tak nic dodatečně programovat. Veškerá funkcionalita funkční ve webovém prohlížeči by měla fungovat v nativní aplikaci a naopak. Jediné, co je tedy třeba pro vytvoření nativní aplikace, je správně nakonfigurovat prostředí SDK a samotný projekt aplikace. K vytvoření je třeba mít nainstalovaný již zmíněný Android SDK, dále pak stažený PhoneGap projekt a server Apache ANT. Poté, co je vše nainstalováno, je třeba zkopírovat příklad projektu PhoneGap, který má správnou strukturu složek a souborů. Veškeré konfigurační soubory je možné nastavovat, přičemž většina z nich je v XML formátu. Jediný konfigurační soubor by měl v příkladovém projektu chybět a to je local.properties. Tento soubor je možné vytvořit příkazem android update project p./. Do složky asset/www je třeba nakopírovat zvolenou webovou aplikaci. Spuštění emulátoru se provádí příkazem nebo je možné spustit přímo v AVD Manager. Posledním krokem je nainstalování aplikace do zvoleného zařízení příkazem ant debug install. Aplikaci je nyní možné nahrát rovnou na Android Market. Jedinou barierou je vstupní registrační poplatek vývojáře, který činí $20. Tvorba aplikací pomocí PhoneGap je velice jednoduchá a nemusí se poté starat o kompatibilitu na různých platformách. PhoneGap dobře zvládá aplikace na všech podporovaných operačních systémech s drobnými rozdílnostmi. Vytváření nativní aplikace pro různé OS je zdokumentováno na oficiálních stránkách PhoneGap. Na následujícím obrázku ( Obrázek 14 ) je vidět příkladová webová aplikace, spuštěná pomocí PhoneGap jako nativní aplikace. Hotový instalační balíček aplikace je ke stažení na adrese [Žabka, 2012a]. 74

83 Obrázek 14 - Screenshot nativní aplikace v Android zařízení - Zdroj: Autor 5.2 Zhodnocení aplikací Vytvořená webová aplikace a postup při vývoji je jednoduchým příkladem vývoje moderních mobilních aplikací. Využívá standardy uvedené v teoretické části práce, a poskytuje uživateli některé nadstandardní možnosti, které klasické desktopové webové aplikace nemají. Využívání GPS modulu je v této aplikaci velkou předností. Dále se uplatnilo i využívání WEB SQL databáze, která udržuje data přímo na přístroji, stejně jako použitá cache. Aplikace ovšem nijak nekomunikuje se serverem, který by mohl synchronizovat uživatelská data. To je ovšem už dalším krokem, který se ne úplně týká právě mobilních zařízení. Pokud se využije wraperu PhoneGap, je možno aplikaci distribuovat na internetových obchodech, což může být výhodou. Výhodou ale může být i distribuce přímo pomocí internetu a webového prohlížeče. Záleží pak už spíše na charakteru projektu. 75