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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TNPW2-2014-07

406

Published on

Mobile application, web technology

Mobile application, web technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
406
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
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

×