Mobile application, web technology

1. TNPW2 2013/2014
Mgr. Lukáš Vacek
lukas.vacek@uhk.cz
Mobilní aplikace

2. Now that it's 2014, the question isn't „should I build a mobile site?“
It's „how do I build a good mobile site?“ – Kristina Kledzik
2

3. Agenda
• Mobilní zařízení?
• Komunikační standardy
• Výrobci, mobilní platformy
• Typy mobilních aplikací
• Návrh a vývoj mobilní aplikace
• Mobilní business
• Internet, doporučená literatura
3

4. Mobilní zařízení?

5. Fakta 5
• Mobilita je jedním z aktuálních trendů! (Gartner)
• Přístup ke službám 24/7, odkudkoliv – tzv. Internet v kapse
• Post-PC éra… prodá se více mobilních zařízení, než stolních počítačů
• Významnou roli na straně serveru hraje cloud computing
• Objem dat přenášených přes mobilní zařízení exponenciálně roste!
• Mění se role telco operátorů:
• Hlasové služby ustupují, budou doplňkem ICT služeb (v USA už jsou)
• Dojde ke spojování telco operátorů (je jich prostě moc )
• Existuje riziko, že firmy nabízející obsah nabídnou vlastní konektivitu pro
mobilní Internet (satelity)

6. Mobilní zařízení? 6
• Malý počítač
• Přenosné zařízení, umožňuje být neustále v pohybu
• Interaktivní
• Snadno ovladatelné
• Multifunkční
• Moderní informační médium, které uživateli nahrazuje noviny, knihy, TV,
rádio, walkman, počítač…
• S čím dál lepším HW se mobilní zařízení postupně staly nejpoužívanějším
osobním počítačem, jaký kdy byl vytvořen
• Podle ITU (únor 2013) – 6,8 mld. uživatelů mobilních zařízení, 96 % populace

7. Smartphone? 7
• Hloupý mobilní telefon +
• Připojení k Internetu
• Operační systém a webový prohlížeč
• Umožňuje instalaci aplikací
• Multitasking, uživatelská práva
• Odpovídající HW – (1-n core) CPU, RAM, úložiště dat
Zdroj: Alza.cz
• Není podmínkou – dotykové ovládání, kamera + fotoaparát, GPS, wifi, NFC,
paměťové karty
• Jsou čím dál levnější = získávají stále větší podíl na trhu
• Zřejmě největším problémem (všech mobilních zařízení) je výdrž baterie!

8. Historie smartphone 8
• Pojem smartphone je často spojován s Apple iPhone. Ale…
• Koncepty chytrých mobilních telefonů vznikaly už dříve, takhle si jej
představoval Nathan Myhrvold (1991, Microsoft)… a Star Trek známe všichni 

9. Apple iPhone prototyp (1983) 9
Zdroj: http://www.technology-digital.com/smart_phones/apple-actually-created-the-iphone-in-1983

10. První smartphone – IBM Simon 10
• Dotyková obrazovka!
• Kalendář, kalkulačka
• Adresáře
• Mail, Textové zprávy
• Fax
• QWERTY klávesnice
• Žádná fyzická tlačítka
• Představen 1992 (COMDEX)
• Jen v USA (1993, BellSouth)
• Cena $899
Zdroj: cloudcentrics.com

11. Tablet? 11
• Je větší než mobilní telefon 
• Přenosný počítač ve tvaru desky s dotykovou obrazovkou
• Nemusí umět telefonovat, podporuje připojení k Internetu (Wi-Fi, 3G)
• Operační systém a webový prohlížeč
• Umožňuje instalaci aplikací, multitasking
• Odpovídající HW – (1-n core) CPU, RAM, úložiště dat
• Zajímavá historie…
• 1968 – Dynabook concept – navrhl Alan Kay
• 2001 – Microsoft TabletPC – neujal se
• 2010 – všechno změnil Apple iPad
• Zajímavá budoucnost 
Zdroj: Alza.cz

12. Čtečka elektronických knih? 12
• Speciální druh tabletu se specifickým využitím (čtecí zařízení pro e-booky)
• Jiná technologie než běžné tablety – většinou elektronický papír (electronic ink)
• Lepší čitelnost
• Větší výdrž na jedno nabití
• HW klávesy, dotyková obrazovka (podle verze)
• Konektivita přes Wi-Fi, 3G
• Amazon Kindle (různé verze) – přímý nákup multimediálního obsahu (knihy…)
• Pozor! Amazon Kindle Fire je tablet! (IPS displej, modifikovaný Android)
• Další výrobci: Barnes & Noble Nook, Sony Reader…
• Dnešní čtečky dobře plní svůj účel, ale bude to (do budoucna) stačit?

13. Komunikační standardy

14. Komunikační standardy 14
• Moderní mobilní telefon musí umět komunikovat  (hlas, data)
• Je k dispozici celá řada standardů, které telco operátoři aktuálně v různé míře
ve své síti podporují (liší se i podle regionů), např.
• GPRS (2. generace)
• EDGE (někdy jako 2.5 nebo 2.75 generace) – v ČR je na většině BTS
• 3G (UMTS, HSPDA, HSUPA , CDMA) – 3G v ČR máme, pokrytí není moc dobré
• LTE (3. generace, LTE Advance 4. generace) – v ČR postupně začíná
• Mobilní zařízení podporují ještě další datové komunikační standardy, např.
• Bluetooth
• Wi-Fi
• NFC – bezdrátová komunikace na krátkou vzdálenost

15. Výrobci, mobilní platformy

16. Mobilní platformy (market share) 16
• Výrobce není vždy to samé, co mobilní platforma 
• Smartphone OS Market Share, Q3 2014 – zdroj: IDC
Period Android iOS
Windows
Phone
BlackBerry
OS
Others
Q3 2014 84.4% 11.7% 2.9% 0.5% 0.6%
Q3 2013 81.2% 12.8% 3.6% 1.7% 0.6%
Q3 2012 74.9% 14.4% 2.0% 4.1% 4.5%
Q3 2011 57.4% 13.8% 1.2% 9.6% 18.0%

17. Mobilní platformy – Android 17
• Google Android (aktuální verze 5.0, Lollipop)
• Otevřený systém, velmi svobodný
• Několik stovek zařízení od různých výrobců s různou konfigurací (výkon HW, DPI
rozlišení displeje, ovládání touch/klávesy apod.)
• Výrobci HW „vylepšují“ Android o grafické nadstavby (Sense, TouchWiz…)
• Jazyk Java (Dalvik – upravené prostředí pro mobily), soud s Oracle
• Libovolné IDE (např. Eclipse) s SDK, včetně simulátoru
• Volně šiřitelné aplikace nebo Google Play (800k+)
• Úložiště Google Drive
• Rychlý vývoj platformy
• Google umí vzdáleně zlikvidovat závadnou aplikaci na mobilním zařízení

18. Mobilní platformy – iOS 18
• Apple iOS je uzavřený systém (SW a HW pod jednou značkou),
• Aktuální verze 7.1
• High-end zařízení (iPhone, iPad), vyšší cena, je to symbol 
• Malý počet modelů
• Lepší přehlednost pro zákazníky
• Jednodušší kompatibilita (vývojáři)
• Jazyk ObjectiveC, vývojové prostředí Xcode (Mac only), iOS Simulator
• Distribuce přes Apple Store (800k+) – podléhá schválení
• Úložiště iCloud
• Silná značka, výborný marketing
• Inovace, např. hlasové ovládání Siri
• Fanoušci jsou ochotní platit 

19. Mobilní platformy – Windows Phone 19
• Windows Phone (aktuální verze 8.1) >> připravuje se verze 10
• Uzavřený systém
• Nekompatibilní s předchůdcem Windows Mobile!
• XNA framework pro hry nebo běžné mobilní aplikace v Silverlight (C#, VB.NET)
• Vývojové nástroje jsou k dispozici zdarma! SDK + VS Express
• Dlaždicové GUI – uživatelské rozhraní Metro (* nesmí se mu tak říkat )
• Dobrá integrace populárních sociálních sítí
• Hlasové ovládání TellMe
• Cloud úložiště SkyDrive
• Integrace s kancelářským SW (Office365, Exchange, Sharepoint, Skype…)
• Windows Phone Store (145k+)
• Přednáška WUG o vývoji pro Windows Phone, nebo MSDN
• https://dev.windowsphone.com/

20. Mobilní platformy – Blackberry 20
• BlackBerry 10 (jádro QNX)
• Uzavřený systém, nově možnost používat Android aplikace
• Zaměření na firemní klientelu, etalon pro „mobilní kancelář“
• Bezpečné protokoly, government protestuje
• Zařízení s charakteristickou HW klávesnicí (existují i dotykové varianty)
• Výborná práce s mailem = mobilní kancelář
• Java ME (+ RIM API), možné použít Adobe AIR
• BlackBerryWorld (120k+)
• Blackberry Enterprise Server ve firemní síti (vazba na mail server)
• BlackBerry Playbook používá BlackBerry Tablet OS (jádro QNX)

21. Mobilní platformy – další mobilní platformy 21
• Symbian (Nokia, historický leader trhu)
• Kdysi neprodávanější OS pro smartphony (cca 85 % trhu!)
• Aktuálně Symbian Belle, hlavně mobily nižší třídy fy Nokia
• Jazyk C++, QT, Java ME
• Volná distribuce aplikací nebo Nokia (Ovi) Suit
• Ostatní platformy s malým podílem na trhu (aspoň zatím)
• Jolla – ex Nokia zaměstnanci
• Nokia Asha – low-end segment, slušné prodeje
• WebOS
• Bada (Samsung)
• Firefox OS
• UbuntuTouch (Canonical)

22. Typy mobilních aplikací

23. Tři základní typy mobilních aplikací 23
• Nativní aplikace (pro konkrétní OS)
• Webové aplikace (univerzální)
• Hybridní aplikace (něco mezi)

24. Nativní mobilní aplikace 24
• Přístup k systémovým funkcím zařízení (kontakty, sms, hlasové funkce)
• Přístup k senzorům (mikrofon, kamera…), kompas, gyroskop, proximity senzor
(vzdálenost k předmětům)
• GPS (location based service)
• Práce s lokální databází
• Komunikace client/server s aplikací nebo datovým úložištěm
• HW akcelerace – aplikace umí využít výkon zařízení
• Často využívají App store jako distribuční kanál

25. Mobilní webové aplikace 25
• Jsou multiplatformní = je to trend!
• Využívají webový prohlížeč + osvědčené technologie
• Díky HTML5, CSS3 a JavaScriptu to je lépe použitelné než v minulosti
• Adaptivní (responsive) web design hraje významnou roli!
• Flexibilita s ohledem na zařízení (zobrazení, způsob ovládání)
• Snížení objemu přenášených dat
• Snížení počtu requestů
• Progressive enhancement vs graceful degradation
• Trend: Mobile first, progressive enhancement a responsive web design
• Výhledově by mohly nahradit nativní mobilní aplikace
• Univerzálnost použití pro téměř libovolné zařízení
• Nižší náklady na vývoj
• Mobile Site Audit Checklist
• RWD by neměl být jedinou mobilní strategií

26. Hybridní mobilní aplikace 26
• Je to „něco mezi“ nativní mobilní a webovou aplikací
• Tzv. lehký klient umí víc, než běžný webový prohlížeč
• jádro je webové
• tzv. native wraper má přístup k systémovým funkcím (úložiště, kontakty,
senzory…)
• Aplikace lze šířit přes nějaký AppStore

27. Návrh a vývoj mobilní aplikace

28. Návrh a vývoj mobilní aplikace 28
• Nápad, zadání
• Návrh UI v prototypu
• Identifikujte klíčové scénáře
• Najděte nejjednodušší cestu
• Klidně použijte papír 
• Nechte si to zákazníkem/zadavatelem potvrdit!
• Design aplikace
• Aplikační logika
• API, backend (včetně úložiště dat)
• Dbejte na co nejnižší objem přenášených dat! Hlídejte si spotřebu paměti, RAM je omezená!
• Grafický design aplikace je klíčová věc, obal prodává!
• Implementace
• K programování je potřeba vývojový nástroj (někdy s rozšířením) a SDK!
• Testování (nepodcenit!)
• Hodí se SW emulátory běhového prostředí (nemusíte mít „opravdový“ přístroj)
• Nemáte vždy přístup ke všem funkcím mobilu (např. GPS, tel. hovory) – Google to umí
(včetně např. identifikace lokace nebo pohybu zařízení, latence sítě, simulace volání, sms…)
• Distribuce

29. Mobilní frameworky 29
• Kromě vlastního vývoje je velmi důležité rychlé vytvoření prototypu aplikace!
• Při návrhu není podstatný ani tak vzhled (barvičky!), ale způsob ovládání
• Frameworky pro mobilní web:
• jQuery Mobile
• Kendo UI
• Sencha Touch
• PhoneGap
• Appcelerator Titanium
• Multiple phone web-based application Framework (wiki)
• Telerik Launches New Development Platform For Web, Hybrid And Native Apps

30. Mobilní business

31. Mobilní business (M-commerce) 31
• Obrovský trh mobilních aplikací (odhad cca $40 mld. v roce 2015)
• Má kam růst (Indie, Čína…)
• Čím dál lepší a cenově dostupnější mobilní zařízení
• Nové technologie…
• QR kódy
• Dvojrozměrný kód zapsaný do čtverce (od 21 do 177 bodů)
• Umí opravit chyby (7-30 %)
• Umožňuje uložení až 3 KB – URL adresy, iCalendar, vCard…
• NFC (Near Field Communication)
• Bezdrátová komunikace na krátkou vzdálenost (standard cca do 20 cm)
• Výměna dat mezi dvěma zařízeními
• Mikroplatby
• Čtení/zápis dat

32. Mobilní business (M-commerce) 32
• Mail, mobilní kancelář… prostě PDA (Personal Digital Assistant)
• Webový klient má zhruba stejný podíl na trhu, mobilní získává na úkor desktopového
• Mobilní platby = exponenciálně růst v nejbližší době
• Celkem odhad 2015 cca $670 mld., z toho NFC cca $74 mld.
• Velcí hráči (PayPal, VISA, MC, AmEx, Square…) + poskytovatelé obsahu (Facebook…)
• Sociální sítě
• Mobilní hry, často ve spojení se sociálními sítěmi (Zynga…)
• Platba za obsah
• Noviny, časopisy – např. New York Times
• Multimedia (hudba, filmy, TV pořady) – Apple iTunes, Netflix
• Prodej zboží a služeb (Amazon, eBay…)
• Přes mobilní aplikaci eBay si někdo koupil tryskové letadlo za $4.9M 
• Internetové obchody hlásí o 420 % více přístupů z mobilů a tabletů než v roce 2010
(zdroj H1.cz)
• Mobilní banking, akcie, booking, check-in, mapy…

33. Internetové odkazy, literatura

34. Odkazy na internetu 34
• http://www.justit.cz/wordpress/2012/06/21/infografika-e-mail-se-presouva-na-mobilni-telefony/
• http://webovky.vse.cz/images/slides/2012LS/prednaska-vse-responsive.pdf
• http://smartphone-guide.com/a-short-history-of-the-smartphone.html
• http://multimedia.vse.cz/media/Viewer/?peid=08c9cd64cf744cc3bf38ab6386a017ac1d
• http://www.manakmichal.cz/blog/jquery/prototypovani-mobilnich-aplikaci-s-jquery-mobile/
• http://liesdamnedliesstatistics.com/2012/06/want-to-make-your-qr-code-work-stick-it-in-a-magazine.
html
• http://www.zdrojak.cz/zpravicky/sablony-pro-mobilni-navrhovani-zdarma/
• http://www.justit.cz/wordpress/2012/08/04/infografika-responsivni-webdesign/
• http://www.vogella.com/articles/Android/article.html - Android Development Tutorial
• http://www.zdrojak.cz/serialy/vyvijime-pro-android/ - Seriál Vyvíjíme pro Android
• http://www.slideshare.net/machal/webov-frontend-ve-slubch-mobilnho-vvoje
• http://en.wikipedia.org/wiki/Multiple_phone_web-based_application_framework
• http://moz.com/blog/mobile-site-audit-checklist
• Responsive, adaptive, mobile or native? What's the best option?
• There is no such thing as UX strategy
• Mobilní platby

35. Doporučená literatura 35
• Kadlec, Tim – Respozivní design – profesionálně, Zoner Press 2014
• Castledine, Earle; Eftos, Myles; Wheeler, Max – Vytváříme mobilní web a aplikace pro chytré
telefony a tablety, Computer Press 2013
• Zkuste Amazon.com… je toho tam spousta!

36. Závěr, dotazy