Jak vytvořitmobilní webovou aplikaci            Michal Maňák    Interaction designer & UX specialista
O čem bude dnešní přednáška• Proč mobilní webová aplikace• Návrh, ovládání a fungování• Dotazy a diskuze
PROČ WEBOVÁ MOBILNÍ APLIKACE… místo jiných způsobů, které jsou k dispozici.
Typy mobilních aplikací?• Webová• Hybridní• Nativní
Nativní aplikace•   Vytváří se přímo pro specifickou platformu•   Je rychlá a spolehlivá•   Přístup ke všem funkcím zaříze...
Hybridní aplikace• Vytváří se pomocí HTML/CSS/JS• Převede se pomocí emulátoru, např.  phoneGap• Větší / menší omezení v př...
Špatný návrh = nespokojení lidé
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ř...
Který typ zvolit?
Který typ aplikace zvolit?                     Nativní aplikace   Hybridní aplikace   Webová aplikaceNávrhVývojSprávaDistr...
Špatným výběrem si lze snadno srazit vaz …
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říze...
… webová aplikace je ve výsledku „levná“ záležitost
NÁVRH, OVLÁDÁNÍ A FUNGOVÁNÍ… aneb jak to všechno rozpohybovat.
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 soubo...
≠
Mobilní zařízení je jiné!        Mobile                           Desktop•   Menší zobrazovací plocha    •   Velká zobrazo...
Funkce•   Digitální kompas•   GPS•   Gyroskop•   Akcelerometr•   Mikrofon a reproduktor•   Fotoaparát•   Konektivita (Blue...
Funkce dostupné přes prohlížeč•   Digitální kompas•   GPS•   Gyroskop•   Akcelerometr•   Mikrofon a reproduktor•   Fotoapa...
Technologie• HTML - struktura , vlastnosti a význam obsahu• CSS3 - styl a forma obsahu• JavaScript – dynamika a pokročilé ...
NÁVRH A ROZLOŽENÍ APLIKACE
HlavičkaSeznam            Položka           seznamu
Název bloku  Časové                      - nadpis označení -       Název podnadpis      poznámky -                podnadpi...
HTML (Hypertext markup language)• Značkovací jazyk• Vytváří strukturu a smysl webu• Práce s daty (vlastnostmi)
Příklad HTML<header> <a href="menu">Menu</a> <h1>Poznámky</h1> <a href="pridat">Přidat</a></header>
Příklad HTML<header>   Značka <a href="menu">Menu</a> <h1>Poznámky</h1> <a href="pridat">Přidat</a>                    Atr...
Příklad HTML<div data-type="person" data- number=„123"> <strong>Michal</strong> <p>Navrhuji digitální produkty</p></div>
Příklad HTML  <divdata-type="person" data-Vlastnost                 Hodnota  number=„123">  <strong>Michal</strong>  <p>Na...
• 50px výška• 100% šířka• Modrý  gradient                  •   14px                  •   Arial                  •   Černá ...
CSS (Cascading style sheet)• Kaskádový stylovací jazyk• Vytváří styl, formát a podobu webu• Práce s elementy
Kaskáda#obsah   {}#obsah   ul   {}#obsah   ul   li {}#obsah   ul   li p {}#obsah   ul   li p a {}
Příklad CSS#hlavicka {  text-align: center;  background: linear-gradient(to  bottom, rgba(143,189,219,1)  0%,rgba(49,117,1...
Příklad CSS#hlavicka { Element – tzv. selektor  text-align: center;  background: linear-gradient(to  bottom, rgba(143,189,...
Příklad CSS#telo ul.list a:last-child {  ...}
Příklad CSS  #telo ul.list a:last-child {    ...  }         Class    PseudoID selektor              selektor   selektor
Po zmáčknutí se zobrazí menu
JavaScript• Skriptovací jazyk• Objektové programování• Vytváří dynamiku a interaktivitu aplikace  v rámci klienta• Využíti...
Příklad JavaScript<script>var myEl =  document.getElementById("telo");if(myEl){  myEl.text = „Existuje“;} else {  alert(„E...
Příklad JavaScript<script>var myEl = Definice proměnné  document.getElementById("telo");if(myEl){  myEl.text = „Existuje“;...
Příklad JavaScript<script>var myEl =  document.getElementById("telo");myEl.onclick = function(event){  event.preventDefaul...
Příklad JavaScript                          Definice funkce – co  Nastavení chování                            se bude dít...
Notifikační   lišta              Prostředí              aplikace
Notifikační   lišta               Rozhraní              prohlížečeProstředíaplikace               Rozhraní              pr...
Dynamické přizpůsobení JavaScriptem...<body onload="hideBar();"><script>  function hideBar(){       setTimeout(function(){...
Dynamické                         načítání dat                                               Práce se soubory Animace     ...
DYNAMICKÉ NAČÍTÁNÍ Nakládám …
Běžné načítání                                  Web         Tlačítko       Prohlížeč                Prohlížeč             ...
Dynamické načítání                                  Tlačítko                                 Prohlížeč                    ...
Mobilní internet je datově-omezenýlouda!                 The average web page is                now over 1MB. Nearly 200K ...
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 jed...
Díky AJAXu se nemusí  překreslovat celé       stránky!
Díky AJAXu senemusí vůbec nic  překreslovat!
Příklad<script>  var xhr = new XMLHttpRequest();  xhr.open("post", adresa-stranky,  true);  xhr.send();  if(xhr.status == ...
Vytvoření požadavku naPříklad             asynchronní komunikaci na                          zadané adrese<script>  var xh...
DOTYKOVÉ OVLÁDÁNÍ… nebo také ovládání pomocí gest
/
Podpora v prohlížečích• Základní gesta pro touch - 1 prst• Multi-touch gesta – 2 až 10 prstů zároveň
Touch eventsDotkl jsem se   Stále se   Dotýkám se a   Dal jsem  displeje      dotýkám     posouvám       prst z           ...
Touch events•   Počet doteků zároveň•   Pozici doteku•   Změnu doteku•   Zjistit a pracovat s konkrétním dotykovým    bode...
Příklad<script>window.addEventListener("touchstart",  function(evt){  var touches = evt.changedTouches;  for (var i=0; i<t...
Zjistíme každý nový dotek vPříklad                      okně prohlížeče<script>window.addEventListener("touchstart",  func...
PRÁCE SE SOUBORY
Tlačítko           Webový server
Tlačítko           Webový server
Práce se soubory•   Zpracování souborů přímo v prohlížeči•   Server zpracuje již upravená data•   Využití AJAXu pro nahráv...
Práce se soubory• File API (File Reader API)• Progress & Load API
File API•   Načítání souborů přímo v klientu•   Zjištění velikosti•   Názvu souboru•   Typu souboru•   Umožňuje možnost up...
Progress & Load API• Zobrazení stavu nahrávání – progress• Zjištění úspěšného nahrávání                    Nahráno 66 %
OFFLINE FUNGOVÁNÍ… aneb když nám nejde internet nebo není potřeba přenosu dat
Nativní aplikace                   Tohle ale nechceme, ne?
Offline úložiště• Šetří přenosy dat• Zrychluje odezvu aplikace• Nezávislost na připojení internetu
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!
Uložení nových dat            Ne                            Ano                         Funguje                        při...
Spuštění aplikace             – data nebyla uložena na server            Ne                            Ano                ...
Offline úložištěDočasná            Persistentní• sessionStorage   • localStorage                   • IndexedDB            ...
Příklad<script>  var item = new Array(...);  window.localStorage.setItem(name,  item);  window.localStorage.getItem(name) ...
Offline fungování• Tzv. cache manifest• Uložení potřebných zdrojových souborů do  paměti zařízení• Funguje zcela i bez při...
Spuštění aplikace              Ne                              Ano                              Funguje                   ...
Zprovoznění Offline Application<!DOCTYPE html><html manifest="/cache.manifest">...</html>
Zprovoznění Offline Application<!DOCTYPE html><html manifest="/cache.manifest">...              Řeknu prohlížeči, kde je u...
Zprovoznění Offline ApplicationCACHE MANIFESTCACHE:js/styles.csscss/scripts.js
ANIMACE
Animations are a design                   material you can use to help                  guide users through the mobile    ...
Animace• Přechody mezi obrazovkami• Interakce s rozhraním
„Aha“ moment
AnimaceJednoduché animace• CSS3• JavaScriptSložitější animace• JavaScript
Příklad HTML pro animaci<!DOCTYPE html><html><head>...</head><body><div id="mic">Míč</div></body></html>
Příklad HTML pro animaci<!DOCTYPE html><html>   Objekt, který budeme              animovat<head>...</head><body><div id="m...
Příklad JS pro animaci<script>var mic = document.getElementById(mic);function doMove() {    mic.style.left =    parseInt(m...
Získání elementu proPříklad JS pro animaci                 animace<script>var mic = document.getElementById(mic);function ...
Příklad JS pro animaci<script>var mic = document.getElementById(mic);function doMove() {    mic.style.left =    parseInt(m...
Příklad JS pro animaci<script>var mic = document.getElementById(mic);function doMove() {    mic.style.left =    parseInt(m...
NĚCO NAVÍC
z  Vaše                      x poloha            yGeolokace       Orientace                 zařízení
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 ...
Příklad<script>var gps = navigator.geolocation;gps.getCurrentPosition(  function(position){     alert(„Lat: „ +  position....
Požadavek na aktuálníPříklad                    polohu<script>var gps = navigator.geolocation;gps.getCurrentPosition(  fun...
Příklad<script>var gps = navigator.geolocation;gps.watchPosition(  function(pos){     var rychlost = pos.coords.speed;    ...
Příklad      Požadavek na      sledování mé polohy<script>var gps = navigator.geolocation;gps.watchPosition(  function(pos...
Využití• Mapy a navigace• Sociální sítě• Geolokační služby
Orientace zařízení• Orientace v prostoru• Sledování nasměrování zařízení v prostoru• Režim „portrét“ / „landscape“        ...
Příklad<script>window.addEventListener(  deviceorientation,  function(eventData){  var tiltLR = eventData.gamma;  var tilt...
Využití• Ovládání her
Shrnutí• Základní technologie – HTML5, CSS3,  JavaScript• Webová aplikace se může podobat nativní• Lze přistupovat k někte...
Na zamyšlení …Lidi nezajímá, jak je digitální produkt postaven ajaké jsou nároky na jeho vytvoření. Oni se chtějípředevším...
Máte nějaké dotazy?
Michal MaňákInteraction designer & UX specialistahttp://www.manakmichal.czTwitter: https://twitter.com/manakmichalLinkedIn...
DOPORUČENÁ LITERATURA
Doporučená literaturaOnline• Quirksmode - http://www.quirksmode.org/• LukeW – http://www.lukew.com• Dive into HTML5 - http...
Doporučená literaturaOnline• Firefox OS - http://www.mozilla.org/en-  US/firefoxos/• Device Orientation API -  http://www....
Doporučená literaturaOnline• AJAX (asynchronní komunikace) –  https://developer.mozilla.org/en-  US/docs/DOM/XMLHttpRequest
Doporučená literaturaKnihy• Designing mobile interfaces -  http://www.amazon.com/Designing-Mobile-Interfaces-  Steven-Hoob...
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Jak vytvořit mobilní webovou aplikaci
Upcoming SlideShare
Loading in …5
×

Jak vytvořit mobilní webovou aplikaci

3,279 views

Published on

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ě.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,279
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Jak vytvořit mobilní webovou aplikaci

  1. 1. Jak vytvořitmobilní 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á aplikaceNávrhVývojSprávaDistribuce 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čkaSeznam Položka seznamu
  23. 23. Název bloku Časové - nadpis označení - Název podnadpis poznámky - podnadpisText 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 PseudoID 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čeProstř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 imagesScott Jehlauthor 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 senemusí 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 naPří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 eventsDotkl 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 vPří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ětiUlož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 naNač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ýchsouborů 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 ApplicationCACHE MANIFESTCACHE:js/styles.csscss/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 HinmanSenior 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. AnimaceJednoduché animace• CSS3• JavaScriptSlož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 proPří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 yGeolokace 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 ajaké 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ňákInteraction designer & UX specialistahttp://www.manakmichal.czTwitter: https://twitter.com/manakmichalLinkedIn: http://www.linkedin.com/in/manakmichal
  108. 108. DOPORUČENÁ LITERATURA
  109. 109. Doporučená literaturaOnline• 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á literaturaOnline• 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á literaturaOnline• AJAX (asynchronní komunikace) – https://developer.mozilla.org/en- US/docs/DOM/XMLHttpRequest
  112. 112. Doporučená literaturaKnihy• 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

×