Successfully reported this slideshow.
Your SlideShare is downloading. ×

Jak vytvořit mobilní webovou aplikaci

Upcoming SlideShare
TNPW2-2012-03
TNPW2-2012-03
Loading in …3
×

Check these out next

1 of 127 Ad
1 of 127 Ad

Jak vytvořit mobilní webovou aplikaci

Download to read offline

Jaké webové technologie lze využít k vytvoření mobilní webové aplikace? Které funkce samotného zařízení lze v aplikaci využívat? Jaký je rozdíl mezi webovou aplikací a nativní?

O tom pojednává tato prezentace, která byla součástí přednášky v předmětu Web design na České zemědělské univerzitě.

Jaké webové technologie lze využít k vytvoření mobilní webové aplikace? Které funkce samotného zařízení lze v aplikaci využívat? Jaký je rozdíl mezi webovou aplikací a nativní?

O tom pojednává tato prezentace, která byla součástí přednášky v předmětu Web design na České zemědělské univerzitě.

Advertisement
Advertisement

More Related Content

Advertisement

Jak vytvořit mobilní webovou aplikaci

  1. 1. Jak vytvořit mobilní webovou aplikaci Michal Maňák Interaction designer & UX specialista
  2. 2. O čem bude dnešní přednáška • Proč mobilní webová aplikace • Návrh, ovládání a fungování • Dotazy a diskuze
  3. 3. PROČ WEBOVÁ MOBILNÍ APLIKACE … místo jiných způsobů, které jsou k dispozici.
  4. 4. Typy mobilních aplikací? • Webová • Hybridní • Nativní
  5. 5. Nativní aplikace • Vytváří se přímo pro specifickou platformu • Je rychlá a spolehlivá • Přístup ke všem funkcím zařízení • Možnost pracovat zcela offline
  6. 6. Hybridní aplikace • Vytváří se pomocí HTML/CSS/JS • Převede se pomocí emulátoru, např. phoneGap • Větší / menší omezení v přístupu k funkcím zařízení • Potřebuje online připojení
  7. 7. Špatný návrh = nespokojení lidé
  8. 8. Webová aplikace • Vytváří se pomocí HTML/CSS/JS • Funguje ve webovém prohlížeči • Stále velká omezení přístupu k funkcím zařízení • Potřebuje online připojení
  9. 9. Který typ zvolit?
  10. 10. Který typ aplikace zvolit? Nativní aplikace Hybridní aplikace Webová aplikace Návrh Vývoj Správa Distribuce k lidem
  11. 11. Špatným výběrem si lze snadno srazit vaz …
  12. 12. Webová aplikace … • Vývoj a správa je méně nákladná • Je ideálním startovním bodem pro začátek s online na mobilních zařízeních • Umí dost věcí, které umí i nativní aplikace
  13. 13. … webová aplikace je ve výsledku „levná“ záležitost
  14. 14. NÁVRH, OVLÁDÁNÍ A FUNGOVÁNÍ … aneb jak to všechno rozpohybovat.
  15. 15. Návrh, ovládání a fungování • Návrh a rozložení aplikace • Dynamické načítání dat • Dotykové ovládání • Práce se soubory • Offline fungování • Animace • Něco na víc
  16. 16.
  17. 17. Mobilní zařízení je jiné! Mobile Desktop • Menší zobrazovací plocha • Velká zobrazovací plocha • Spíše pomalejší internet • Rychlý internet • Ovládání dotykem, • Ovládání myší a klávesnicí joystikem nebo keypadem • Pevné napájení • Slabší výdrž baterie • Fixní používání • Využití ve více různých • Omezené funkční možnosti situacích • Více funkcí a technologií
  18. 18. Funkce • Digitální kompas • GPS • Gyroskop • Akcelerometr • Mikrofon a reproduktor • Fotoaparát • Konektivita (Bluetooth, WI-FI, …) • Snímač pro odhad vzdálenosti • Snímač okolního světla • NFC
  19. 19. Funkce dostupné přes prohlížeč • Digitální kompas • GPS • Gyroskop • Akcelerometr • Mikrofon a reproduktor • Fotoaparát • Konektivita (Bluetooth, WI-FI, …) • Snímač pro odhad vzdálenosti • Snímač okolního světla • NFC
  20. 20. Technologie • HTML - struktura , vlastnosti a význam obsahu • CSS3 - styl a forma obsahu • JavaScript – dynamika a pokročilé fungování
  21. 21. NÁVRH A ROZLOŽENÍ APLIKACE
  22. 22. Hlavička Seznam Položka seznamu
  23. 23. Název bloku Časové - nadpis označení - Název podnadpis poznámky - podnadpis Text poznámky
  24. 24. HTML (Hypertext markup language) • Značkovací jazyk • Vytváří strukturu a smysl webu • Práce s daty (vlastnostmi)
  25. 25. Příklad HTML <header> <a href="menu">Menu</a> <h1>Poznámky</h1> <a href="pridat">Přidat</a> </header>
  26. 26. Příklad HTML <header> Značka <a href="menu">Menu</a> <h1>Poznámky</h1> <a href="pridat">Přidat</a> Atribut </header>
  27. 27. Příklad HTML <div data-type="person" data- number=„123"> <strong>Michal</strong> <p>Navrhuji digitální produkty</p> </div>
  28. 28. Příklad HTML <divdata-type="person" data- Vlastnost Hodnota number=„123"> <strong>Michal</strong> <p>Navrhuji digitální produkty</p> </div>
  29. 29. • 50px výška • 100% šířka • Modrý gradient • 14px • Arial • Černá • Tučně • 1,3 řádkování
  30. 30. CSS (Cascading style sheet) • Kaskádový stylovací jazyk • Vytváří styl, formát a podobu webu • Práce s elementy
  31. 31. Kaskáda #obsah {} #obsah ul {} #obsah ul li {} #obsah ul li p {} #obsah ul li p a {}
  32. 32. Příklad CSS #hlavicka { text-align: center; background: linear-gradient(to bottom, rgba(143,189,219,1) 0%,rgba(49,117,162,1) 100%); }
  33. 33. Příklad CSS #hlavicka { Element – tzv. selektor text-align: center; background: linear-gradient(to bottom, rgba(143,189,219,1) Atribut 0%,rgba(49,117,162,1) 100%); (vlastnost) Hodnota }
  34. 34. Příklad CSS #telo ul.list a:last-child { ... }
  35. 35. Příklad CSS #telo ul.list a:last-child { ... } Class Pseudo ID selektor selektor selektor
  36. 36. Po zmáčknutí se zobrazí menu
  37. 37. JavaScript • Skriptovací jazyk • Objektové programování • Vytváří dynamiku a interaktivitu aplikace v rámci klienta • Využíti technologií prohlížeče
  38. 38. Příklad JavaScript <script> var myEl = document.getElementById("telo"); if(myEl){ myEl.text = „Existuje“; } else { alert(„Element neexistuje“); } </script>
  39. 39. Příklad JavaScript <script> var myEl = Definice proměnné document.getElementById("telo"); if(myEl){ myEl.text = „Existuje“; Práce s vlastnostmi objektu } else { alert(„Element neexistuje“); Volání funkce } </script>
  40. 40. Příklad JavaScript <script> var myEl = document.getElementById("telo"); myEl.onclick = function(event){ event.preventDefault(); alert(„Klik"); } </script>
  41. 41. Příklad JavaScript Definice funkce – co Nastavení chování se bude dít po (události) pro kliknutí <script> kliknutí var myEl = document.getElementById("telo"); myEl.onclick = function(event){ event.preventDefault(); alert(„Klik"); } </script>
  42. 42. Notifikační lišta Prostředí aplikace
  43. 43. Notifikační lišta Rozhraní prohlížeče Prostředí aplikace Rozhraní prohlížeče
  44. 44. Dynamické přizpůsobení JavaScriptem ... <body onload="hideBar();"> <script> function hideBar(){ setTimeout(function(){ window.scrollTo(0,1)}, 100); } } </script> ...
  45. 45. Dynamické načítání dat Práce se soubory Animace Gyroskop Geolokace Offline fungování Dotykové ovládání
  46. 46. DYNAMICKÉ NAČÍTÁNÍ Nakládám …
  47. 47. Běžné načítání Web Tlačítko Prohlížeč Prohlížeč HTTP požadavek HTTP odpověď ve formě nové stránky Webový server
  48. 48. Dynamické načítání Tlačítko Prohlížeč HTTP HTTP požadavek odpověď Webový server
  49. 49. Mobilní internet je datově-omezený louda! The average web page is now over 1MB. Nearly 200K of that is JS. 675K images Scott Jehl author of Designing with Progressive enhancement
  50. 50. Dynamické načítání • Snižuje nároky na datové přenosy • Celkově zrychluje načítání dat • Může se vykonat více požadavků v jednom okamžiku
  51. 51. Díky AJAXu se nemusí překreslovat celé stránky!
  52. 52. Díky AJAXu se nemusí vůbec nic překreslovat!
  53. 53. Příklad <script> var xhr = new XMLHttpRequest(); xhr.open("post", adresa-stranky, true); xhr.send(); if(xhr.status == 200){ alert(xhr.response); } </script>
  54. 54. Vytvoření požadavku na Příklad asynchronní komunikaci na zadané adrese <script> var xhr = new XMLHttpRequest(); xhr.open("post", adresa-stranky, true); xhr.send(); if(xhr.status == 200){ Pokud server data zpracoval a nenastala alert(xhr.response); chyba, vypíšeme si } odpověď serveru. </script>
  55. 55. DOTYKOVÉ OVLÁDÁNÍ … nebo také ovládání pomocí gest
  56. 56. /
  57. 57. Podpora v prohlížečích • Základní gesta pro touch - 1 prst • Multi-touch gesta – 2 až 10 prstů zároveň
  58. 58. Touch events Dotkl jsem se Stále se Dotýkám se a Dal jsem displeje dotýkám posouvám prst z prst displeje
  59. 59. Touch events • Počet doteků zároveň • Pozici doteku • Změnu doteku • Zjistit a pracovat s konkrétním dotykovým bodem (pro multi-touch)
  60. 60. Příklad <script> window.addEventListener("touchstart", function(evt){ var touches = evt.changedTouches; for (var i=0; i<touches.length; i++) { alert("X:" + touches[i].pageX + ", "Y:" + touches[i].pageY); } }, false); </script>
  61. 61. Zjistíme každý nový dotek v Příklad okně prohlížeče <script> window.addEventListener("touchstart", function(evt){ var touches = evt.changedTouches; for (var i=0; i<touches.length; i++) { alert("X:" + touches[i].pageX + ", "Y:" + touches[i].pageY); } }, false); </script> Vypsání souřadnic doteku
  62. 62. PRÁCE SE SOUBORY
  63. 63. Tlačítko Webový server
  64. 64. Tlačítko Webový server
  65. 65. Práce se soubory • Zpracování souborů přímo v prohlížeči • Server zpracuje již upravená data • Využití AJAXu pro nahrávání na pozadí • Možnost vidět průběh nahrávání
  66. 66. Práce se soubory • File API (File Reader API) • Progress & Load API
  67. 67. File API • Načítání souborů přímo v klientu • Zjištění velikosti • Názvu souboru • Typu souboru • Umožňuje možnost upravit obrázek už v klientovi
  68. 68. Progress & Load API • Zobrazení stavu nahrávání – progress • Zjištění úspěšného nahrávání Nahráno 66 %
  69. 69. OFFLINE FUNGOVÁNÍ … aneb když nám nejde internet nebo není potřeba přenosu dat
  70. 70. Nativní aplikace Tohle ale nechceme, ne?
  71. 71. Offline úložiště • Šetří přenosy dat • Zrychluje odezvu aplikace • Nezávislost na připojení internetu
  72. 72. Ale opatrně! • Lokální úložiště je dočasné – při ztrátě zařízení • Dříve nebo později je nutné data na server uložit!
  73. 73. Uložení nových dat Ne Ano Funguje připojení? Uložit do lokální paměti Uložit do lokální paměti Uložit na server
  74. 74. Spuštění aplikace – data nebyla uložena na server Ne Ano Funguje připojení? Ne Ano Byla data uložena na Načtení z lokální server? paměti Uložení na server
  75. 75. Offline úložiště Dočasná Persistentní • sessionStorage • localStorage • IndexedDB (nepodporováno na Android)
  76. 76. Příklad <script> var item = new Array(...); window.localStorage.setItem(name, item); window.localStorage.getItem(name) window.localStorage.removeItem(na me); </script>
  77. 77. Offline fungování • Tzv. cache manifest • Uložení potřebných zdrojových souborů do paměti zařízení • Funguje zcela i bez připojení na internet • Potřeba úprav v nastavení serveru
  78. 78. Spuštění aplikace Ne Ano Funguje připojení? Načtení souborů Načtení potřebných souborů a dat z paměti zařízení Načtení dat
  79. 79. Zprovoznění Offline Application <!DOCTYPE html> <html manifest="/cache.manifest"> ... </html>
  80. 80. Zprovoznění Offline Application <!DOCTYPE html> <html manifest="/cache.manifest"> ... Řeknu prohlížeči, kde je uložen </html> seznam dat pro načtení do offline paměti
  81. 81. Zprovoznění Offline Application CACHE MANIFEST CACHE: js/styles.css css/scripts.js
  82. 82. ANIMACE
  83. 83. Animations are a design material you can use to help guide users through the mobile experiences you create. Rachel Hinman Senior research scientist with the Interaction and Experience Research Group at Intel
  84. 84. Animace • Přechody mezi obrazovkami • Interakce s rozhraním
  85. 85. „Aha“ moment
  86. 86. Animace Jednoduché animace • CSS3 • JavaScript Složitější animace • JavaScript
  87. 87. Příklad HTML pro animaci <!DOCTYPE html> <html> <head>...</head> <body> <div id="mic">Míč</div> </body> </html>
  88. 88. Příklad HTML pro animaci <!DOCTYPE html> <html> Objekt, který budeme animovat <head>...</head> <body> <div id="mic">Míč</div> </body> </html>
  89. 89. Příklad JS pro animaci <script> var mic = document.getElementById('mic'); function doMove() { mic.style.left = parseInt(mic.style.left)+1+'px'; setTimeout(doMove, 20); } doMove(); </script>
  90. 90. Získání elementu pro Příklad JS pro animaci animace <script> var mic = document.getElementById('mic'); function doMove() { mic.style.left = parseInt(mic.style.left)+1+'px'; setTimeout(doMove, 20); } doMove(); </script> Funkce říká: Posuň element míč o 1 bod doleva
  91. 91. Příklad JS pro animaci <script> var mic = document.getElementById('mic'); function doMove() { mic.style.left = parseInt(mic.style.left)+1+'px'; setTimeout(doMove, 20); } doMove(); </script>
  92. 92. Příklad JS pro animaci <script> var mic = document.getElementById('mic'); function doMove() { mic.style.left = parseInt(mic.style.left)+1+'px'; Každých 20 ms setTimeout(doMove, 20); zavoláme tuto funkci } (něco jako rekurze) doMove(); </script>
  93. 93. NĚCO NAVÍC
  94. 94. z Vaše x poloha y Geolokace Orientace zařízení
  95. 95. Geolokace • Aktuální GPS souřadnice – Zeměpisná šířka a výška, nadmořská výška • Sledování pozice (změna) • Rychlost a směr pohybu • Přesnost zaměření
  96. 96. Příklad <script> var gps = navigator.geolocation; gps.getCurrentPosition( function(position){ alert(„Lat: „ + position.coords.latitude + „, Lng:“ + position.coords.longitude); } ); </script>
  97. 97. Požadavek na aktuální Příklad polohu <script> var gps = navigator.geolocation; gps.getCurrentPosition( function(position){ alert(„Lat: „ + position.coords.latitude + „, Lng:“ + position.coords.longitude); } ); </script> Vypsání souřadnic pozice
  98. 98. Příklad <script> var gps = navigator.geolocation; gps.watchPosition( function(pos){ var rychlost = pos.coords.speed; var směr = pos.coords.heading; } ); </script>
  99. 99. Příklad Požadavek na sledování mé polohy <script> var gps = navigator.geolocation; gps.watchPosition( function(pos){ var rychlost = pos.coords.speed; Získat údaje o rychlosti Získat údaje osměr = pos.coords.heading; var směru } ); </script>
  100. 100. Využití • Mapy a navigace • Sociální sítě • Geolokační služby
  101. 101. Orientace zařízení • Orientace v prostoru • Sledování nasměrování zařízení v prostoru • Režim „portrét“ / „landscape“ Portrét Landscape
  102. 102. Příklad <script> window.addEventListener( 'deviceorientation', function(eventData){ var tiltLR = eventData.gamma; var tiltFB = eventData.beta; var dir = eventData.alpha; }); </script>
  103. 103. Využití • Ovládání her
  104. 104. Shrnutí • Základní technologie – HTML5, CSS3, JavaScript • Webová aplikace se může podobat nativní • Lze přistupovat k některým funkcím zařízení • Mobilní webové aplikace mohou v budoucnu nahradit ty nativní! tip: Firefox OS postavený na HTML5
  105. 105. Na zamyšlení … Lidi nezajímá, jak je digitální produkt postaven a jaké jsou nároky na jeho vytvoření. Oni se chtějí především dostat k informacím, které potřebují!
  106. 106. Máte nějaké dotazy?
  107. 107. Michal Maňák Interaction designer & UX specialista http://www.manakmichal.cz Twitter: https://twitter.com/manakmichal LinkedIn: http://www.linkedin.com/in/manakmichal
  108. 108. DOPORUČENÁ LITERATURA
  109. 109. Doporučená literatura Online • Quirksmode - http://www.quirksmode.org/ • LukeW – http://www.lukew.com • Dive into HTML5 - http://diveintohtml5.info/ • Native vs. Web App - http://mobithinking.com/native-or-web-app • Touch events - https://developer.mozilla.org/en- US/docs/DOM/Touch_events
  110. 110. Doporučená literatura Online • Firefox OS - http://www.mozilla.org/en- US/firefoxos/ • Device Orientation API - http://www.html5rocks.com/en/tutorials/device/ orientation/ • Offline Applications – http://html5doctor.com/go-offline-with-application- cache/ – http://www.html5rocks.com/en/tutorials/appcache/b eginner/
  111. 111. Doporučená literatura Online • AJAX (asynchronní komunikace) – https://developer.mozilla.org/en- US/docs/DOM/XMLHttpRequest
  112. 112. Doporučená literatura Knihy • Designing mobile interfaces - http://www.amazon.com/Designing-Mobile-Interfaces- Steven-Hoober/dp/1449394639 • Mobile design and development - http://www.amazon.com/Mobile-Design- Development-Practical-techniques/dp/0596155441/ • The Mobile Frontier - http://rosenfeldmedia.com/books/mobile-design/ • Designing gestural interfaces - http://www.amazon.com/Designing-Gestural- Interfaces-Touchscreens-Interactive/dp/0596518390

×