Upload
manakmichal
View
2.489
Download
6
Embed Size (px)
DESCRIPTION
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ě.
Citation preview
Jak vytvořit mobilní 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á aplikace
Návrh
Vývoj
Správa
Distribuce 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
• Menší zobrazovací plocha
• Spíše pomalejší internet
• Ovládání dotykem, joystikem nebo keypadem
• Slabší výdrž baterie
• Využití ve více různých situacích
• Více funkcí a technologií
Desktop
• Velká zobrazovací plocha
• Rychlý internet
• Ovládání myší a klávesnicí
• Pevné napájení
• Fixní používání
• Omezené funkční možnosti
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
• 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č
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čka
Seznam
Položka seznamu
Název bloku - nadpis Časové
označení - podnadpis
Název poznámky - podnadpis
Text 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>
<a href="menu">Menu</a>
<h1>Poznámky</h1>
<a href="pridat">Přidat</a>
</header>
Značka
Atribut
Příklad HTML
<div data-type="person" data-
number=„123">
<strong>Michal</strong>
<p>Navrhuji digitální
produkty</p>
</div>
Příklad HTML
<div data-type="person" data-
number=„123">
<strong>Michal</strong>
<p>Navrhuji digitální
produkty</p>
</div>
Hodnota Vlastnost
• 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 {
text-align: center;
background: linear-gradient(to
bottom, rgba(143,189,219,1)
0%,rgba(49,117,162,1) 100%);
}
Element – tzv. selektor
Atribut (vlastnost)
Hodnota
Příklad CSS
#telo ul.list a:last-child {
...
}
Příklad CSS
#telo ul.list a:last-child {
...
} ID selektor
Class selektor
Pseudo 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 =
document.getElementById("telo");
if(myEl){
myEl.text = „Existuje“;
} else {
alert(„Element neexistuje“);
}
</script>
Volání funkce
Definice proměnné
Práce s vlastnostmi objektu
Příklad JavaScript
<script>
var myEl =
document.getElementById("telo");
myEl.onclick = function(event){
event.preventDefault();
alert(„Klik");
}
</script>
Příklad JavaScript
<script>
var myEl =
document.getElementById("telo");
myEl.onclick = function(event){
event.preventDefault();
alert(„Klik");
}
</script>
Nastavení chování (události) pro kliknutí
Definice funkce – co se bude dít po
kliknutí
Notifikační lišta
Prostředí aplikace
Notifikační lišta
Rozhraní prohlížeče
Rozhraní prohlížeče
Prostředí aplikace
Dynamické přizpůsobení JavaScriptem
...
<body onload="hideBar();">
<script>
function hideBar(){
setTimeout(function(){
window.scrollTo(0,1)}, 100);
}
}
</script>
...
Dotykové ovládání
Animace
Dynamické načítání dat
Práce se soubory
Offline fungování Geolokace Gyroskop
DYNAMICKÉ NAČÍTÁNÍ
Nakládám …
Běžné načítání
Webový server
Prohlížeč Prohlížeč
HTTP požadavek
Tlačítko
Web
HTTP odpověď ve formě nové stránky
Dynamické načítání
Webový server
Prohlížeč
HTTP požadavek
Tlačítko
HTTP odpověď
Mobilní internet je datově-omezený louda!
Scott Jehl
author of Designing with Progressive enhancement
The average web page is now over 1MB. Nearly 200K
of that is JS. 675K images
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 se nemusí 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>
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 na asynchronní komunikaci na
zadané adrese
Pokud server data zpracoval a nenastala
chyba, vypíšeme si odpověď serveru.
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ň
Dotkl jsem se displeje
Stále se dotýkám
Dotýkám se a posouvám
prst
Dal jsem prst z
displeje
Touch events
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>
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> Vypsání souřadnic
doteku
Zjistíme každý nový dotek v okně prohlížeče
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!
Funguje připojení?
Uložit do lokální paměti
Uložit na server
Uložit do lokální paměti
Ano Ne
Uložení nových dat
Funguje připojení?
Načtení z lokální paměti
Ano Ne
Spuštění aplikace – data nebyla uložena na server
Byla data uložena na
server?
Uložení na server
Ano Ne
Offline úložiště
Dočasná
• sessionStorage
Persistentní
• 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
Funguje připojení?
Načtení souborů
Načtení dat
Načtení potřebných souborů a dat z paměti
zařízení
Ano Ne
Spuštění aplikace
Zprovoznění Offline Application
<!DOCTYPE html>
<html manifest="/cache.manifest">
...
</html>
Zprovoznění Offline Application
<!DOCTYPE html>
<html manifest="/cache.manifest">
...
</html> Řeknu prohlížeči, kde je uložen
seznam dat pro načtení do offline paměti
Zprovoznění Offline Application
CACHE MANIFEST
CACHE:
js/styles.css
css/scripts.js
ANIMACE
Rachel Hinman
Senior research scientist with the Interaction and Experience Research Group at Intel
Animations are a design material you can use to help
guide users through the mobile experiences you create.
Animace
• Přechody mezi obrazovkami
• Interakce s rozhraním
„Aha“ moment
Animace
Jednoduché animace
• CSS3
• JavaScript
Slož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>
<head>...</head>
<body>
<div id="mic">Míč</div>
</body>
</html>
Objekt, který budeme animovat
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';
setTimeout(doMove, 20);
}
doMove();
</script>
Získání elementu pro animace
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';
setTimeout(doMove, 20);
}
doMove();
</script>
Každých 20 ms zavoláme tuto funkci (něco jako rekurze)
NĚCO NAVÍC
Vaše poloha
Geolokace Orientace zařízení
y
x
z
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>
Příklad
<script>
var gps = navigator.geolocation;
gps.getCurrentPosition(
function(position){
alert(„Lat: „ + position.coords.latitude + „, Lng:“ + position.coords.longitude);
}
);
</script> Vypsání souřadnic
pozice
Požadavek na aktuální polohu
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
<script>
var gps = navigator.geolocation;
gps.watchPosition(
function(pos){
var rychlost = pos.coords.speed;
var směr = pos.coords.heading;
}
);
</script>
Požadavek na sledování mé polohy
Získat údaje o směru
Získat údaje o rychlosti
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 a jaké 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ňák Interaction designer & UX specialista
http://www.manakmichal.cz
Twitter: https://twitter.com/manakmichal
LinkedIn: http://www.linkedin.com/in/manakmichal
DOPORUČENÁ LITERATURA
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
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/
Doporučená literatura
Online
• AJAX (asynchronní komunikace) – https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest
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