Your SlideShare is downloading. ×
  • Like
TNPW2-2014-07
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

TNPW2-2014-07

  • 334 views
Published

Mobile application, web technology

Mobile application, web technology

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
334
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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