Jak vytvořit mobilní webovou aplikaci
Upcoming SlideShare
Loading in...5
×
 

Jak vytvořit mobilní webovou aplikaci

on

  • 2,523 views

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í?

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

Statistics

Views

Total Views
2,523
Views on SlideShare
2,457
Embed Views
66

Actions

Likes
2
Downloads
8
Comments
0

4 Embeds 66

https://twitter.com 30
http://mladypodnikatel.cz 23
http://www.marketingcenter.cz 12
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jak vytvořit mobilní webovou aplikaci Jak vytvořit mobilní webovou aplikaci Presentation Transcript

  • 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řízení• Možnost pracovat zcela offline
  • 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í
  • Š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řízení• Potřebuje online připojení
  • Který typ zvolit?
  • Který typ aplikace zvolit? Nativní aplikace Hybridní aplikace Webová aplikaceNávrhVývojSprávaDistribuce k lidem
  • Š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řízeních• Umí dost věcí, které umí i nativní aplikace
  • … 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 soubory• Offline fungování• Animace• Něco na víc
  • 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í
  • 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
  • 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
  • Technologie• HTML - struktura , vlastnosti a význam obsahu• CSS3 - styl a forma obsahu• JavaScript – dynamika a pokročilé fungování
  • NÁVRH A ROZLOŽENÍ APLIKACE
  • HlavičkaSeznam Položka seznamu
  • Název bloku Časové - nadpis označení - Název podnadpis poznámky - podnadpisText poznámky
  • 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> Atribut</header>
  • 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>Navrhuji digitální produkty</p> </div>
  • • 50px výška• 100% šířka• Modrý gradient • 14px • Arial • Černá • Tučně• 1,3 řádkování
  • 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,162,1) 100%);}
  • 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}
  • 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 technologií prohlížeče
  • Příklad JavaScript<script>var myEl = document.getElementById("telo");if(myEl){ myEl.text = „Existuje“;} else { alert(„Element neexistuje“);}</script>
  • 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>
  • Příklad JavaScript<script>var myEl = document.getElementById("telo");myEl.onclick = function(event){ event.preventDefault(); alert(„Klik");}</script>
  • 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>
  • Notifikační lišta Prostředí aplikace
  • Notifikační lišta Rozhraní prohlížečeProstředíaplikace Rozhraní prohlížeče
  • Dynamické přizpůsobení JavaScriptem...<body onload="hideBar();"><script> function hideBar(){ setTimeout(function(){ window.scrollTo(0,1)}, 100); } }</script>...
  • Dynamické načítání dat Práce se soubory Animace Gyroskop Geolokace Offline fungováníDotykové ovládání
  • DYNAMICKÉ NAČÍTÁNÍ Nakládám …
  • Běžné načítání Web Tlačítko Prohlížeč Prohlížeč HTTP požadavek HTTP odpověď ve formě nové stránky Webový server
  • Dynamické načítání Tlačítko Prohlížeč HTTP HTTP požadavek odpověď Webový server
  • 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
  • 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
  • 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 == 200){ alert(xhr.response); }</script>
  • 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>
  • 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 prst displeje
  • 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)
  • 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>
  • 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
  • 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ání na pozadí• Možnost vidět průběh nahrávání
  • 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 upravit obrázek už v klientovi
  • 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řipojení? Uložit do lokální pamětiUložit do lokální paměti Uložit na server
  • 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
  • Offline úložištěDočasná Persistentní• sessionStorage • localStorage • IndexedDB (nepodporováno na Android)
  • Příklad<script> var item = new Array(...); window.localStorage.setItem(name, item); window.localStorage.getItem(name) window.localStorage.removeItem(na me);</script>
  • 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
  • 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
  • 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 uložen</html> seznam dat pro načtení do offline paměti
  • 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 experiences you create.Rachel HinmanSenior research scientist with the Interaction and Experience Research Group at Intel
  • 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="mic">Míč</div></body></html>
  • 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>
  • 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
  • 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>
  • 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>
  • 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 pohybu• Přesnost zaměření
  • Příklad<script>var gps = navigator.geolocation;gps.getCurrentPosition( function(position){ alert(„Lat: „ + position.coords.latitude + „, Lng:“ + position.coords.longitude); });</script>
  • 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
  • Příklad<script>var gps = navigator.geolocation;gps.watchPosition( function(pos){ var rychlost = pos.coords.speed; var směr = pos.coords.heading; });</script>
  • 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>
  • 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“ Portrét Landscape
  • Příklad<script>window.addEventListener( deviceorientation, function(eventData){ var tiltLR = eventData.gamma; var tiltFB = eventData.beta; var dir = eventData.alpha;});</script>
  • 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ěkterým funkcím zařízení• Mobilní webové aplikace mohou v budoucnu nahradit ty nativní!tip: Firefox OS postavený na HTML5
  • 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í!
  • Máte nějaké dotazy?
  • Michal MaňákInteraction designer & UX specialistahttp://www.manakmichal.czTwitter: https://twitter.com/manakmichalLinkedIn: http://www.linkedin.com/in/manakmichal
  • DOPORUČENÁ LITERATURA
  • 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
  • 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/
  • 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-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