Kódování acyklických grafů pro aplikaci genetických algoritmů
Jak vytvořit mobilní webovou aplikaci
-
Upload
manakmichal -
Category
Technology
-
view
2.489 -
download
6
description
Transcript of Jak vytvořit mobilní webovou aplikaci
![Page 1: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/1.jpg)
Jak vytvořit mobilní webovou aplikaci
Michal Maňák Interaction designer & UX specialista
![Page 2: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/2.jpg)
O čem bude dnešní přednáška
• Proč mobilní webová aplikace
• Návrh, ovládání a fungování
• Dotazy a diskuze
![Page 3: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/3.jpg)
PROČ WEBOVÁ MOBILNÍ APLIKACE … místo jiných způsobů, které jsou k dispozici.
![Page 4: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/4.jpg)
Typy mobilních aplikací?
• Webová
• Hybridní
• Nativní
![Page 5: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/5.jpg)
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
![Page 6: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/6.jpg)
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í
![Page 7: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/7.jpg)
![Page 8: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/8.jpg)
Špatný návrh = nespokojení lidé
![Page 9: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/9.jpg)
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í
![Page 10: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/10.jpg)
Který typ zvolit?
![Page 11: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/11.jpg)
Který typ aplikace zvolit?
Nativní aplikace Hybridní aplikace Webová aplikace
Návrh
Vývoj
Správa
Distribuce k lidem
![Page 12: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/12.jpg)
Špatným výběrem si lze snadno srazit vaz …
![Page 13: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/13.jpg)
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
![Page 14: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/14.jpg)
… webová aplikace je ve výsledku „levná“ záležitost
![Page 15: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/15.jpg)
NÁVRH, OVLÁDÁNÍ A FUNGOVÁNÍ … aneb jak to všechno rozpohybovat.
![Page 16: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/16.jpg)
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
![Page 17: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/17.jpg)
≠
![Page 18: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/18.jpg)
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
![Page 19: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/19.jpg)
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
![Page 20: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/20.jpg)
• 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č
![Page 21: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/21.jpg)
![Page 22: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/22.jpg)
![Page 23: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/23.jpg)
![Page 24: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/24.jpg)
![Page 25: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/25.jpg)
Technologie
• HTML - struktura , vlastnosti a význam obsahu
• CSS3 - styl a forma obsahu
• JavaScript – dynamika a pokročilé fungování
![Page 26: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/26.jpg)
NÁVRH A ROZLOŽENÍ APLIKACE
![Page 27: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/27.jpg)
![Page 28: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/28.jpg)
Hlavička
Seznam
Položka seznamu
![Page 29: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/29.jpg)
Název bloku - nadpis Časové
označení - podnadpis
Název poznámky - podnadpis
Text poznámky
![Page 30: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/30.jpg)
HTML (Hypertext markup language)
• Značkovací jazyk
• Vytváří strukturu a smysl webu
• Práce s daty (vlastnostmi)
![Page 31: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/31.jpg)
Příklad HTML
<header>
<a href="menu">Menu</a>
<h1>Poznámky</h1>
<a href="pridat">Přidat</a>
</header>
![Page 32: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/32.jpg)
Příklad HTML
<header>
<a href="menu">Menu</a>
<h1>Poznámky</h1>
<a href="pridat">Přidat</a>
</header>
Značka
Atribut
![Page 33: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/33.jpg)
Příklad HTML
<div data-type="person" data-
number=„123">
<strong>Michal</strong>
<p>Navrhuji digitální
produkty</p>
</div>
![Page 34: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/34.jpg)
Příklad HTML
<div data-type="person" data-
number=„123">
<strong>Michal</strong>
<p>Navrhuji digitální
produkty</p>
</div>
Hodnota Vlastnost
![Page 35: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/35.jpg)
![Page 36: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/36.jpg)
• 50px výška • 100% šířka • Modrý
gradient
• 14px • Arial • Černá • Tučně
• 1,3 řádkování
![Page 37: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/37.jpg)
CSS (Cascading style sheet)
• Kaskádový stylovací jazyk
• Vytváří styl, formát a podobu webu
• Práce s elementy
![Page 38: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/38.jpg)
Kaskáda
#obsah {}
#obsah ul {}
#obsah ul li {}
#obsah ul li p {}
#obsah ul li p a {}
![Page 39: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/39.jpg)
Příklad CSS
#hlavicka {
text-align: center;
background: linear-gradient(to
bottom, rgba(143,189,219,1)
0%,rgba(49,117,162,1) 100%);
}
![Page 40: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/40.jpg)
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
![Page 41: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/41.jpg)
Příklad CSS
#telo ul.list a:last-child {
...
}
![Page 42: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/42.jpg)
Příklad CSS
#telo ul.list a:last-child {
...
} ID selektor
Class selektor
Pseudo selektor
![Page 43: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/43.jpg)
![Page 44: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/44.jpg)
Po zmáčknutí se zobrazí menu
![Page 45: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/45.jpg)
JavaScript
• Skriptovací jazyk
• Objektové programování
• Vytváří dynamiku a interaktivitu aplikace v rámci klienta
• Využíti technologií prohlížeče
![Page 46: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/46.jpg)
Příklad JavaScript
<script>
var myEl =
document.getElementById("telo");
if(myEl){
myEl.text = „Existuje“;
} else {
alert(„Element neexistuje“);
}
</script>
![Page 47: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/47.jpg)
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
![Page 48: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/48.jpg)
Příklad JavaScript
<script>
var myEl =
document.getElementById("telo");
myEl.onclick = function(event){
event.preventDefault();
alert(„Klik");
}
</script>
![Page 49: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/49.jpg)
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í
![Page 50: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/50.jpg)
Notifikační lišta
Prostředí aplikace
![Page 51: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/51.jpg)
Notifikační lišta
Rozhraní prohlížeče
Rozhraní prohlížeče
Prostředí aplikace
![Page 52: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/52.jpg)
Dynamické přizpůsobení JavaScriptem
...
<body onload="hideBar();">
<script>
function hideBar(){
setTimeout(function(){
window.scrollTo(0,1)}, 100);
}
}
</script>
...
![Page 53: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/53.jpg)
Dotykové ovládání
Animace
Dynamické načítání dat
Práce se soubory
Offline fungování Geolokace Gyroskop
![Page 54: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/54.jpg)
DYNAMICKÉ NAČÍTÁNÍ
Nakládám …
![Page 55: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/55.jpg)
Běžné načítání
Webový server
Prohlížeč Prohlížeč
HTTP požadavek
Tlačítko
Web
HTTP odpověď ve formě nové stránky
![Page 56: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/56.jpg)
Dynamické načítání
Webový server
Prohlížeč
HTTP požadavek
Tlačítko
HTTP odpověď
![Page 57: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/57.jpg)
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
![Page 58: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/58.jpg)
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
![Page 59: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/59.jpg)
Díky AJAXu se nemusí překreslovat celé
stránky!
![Page 60: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/60.jpg)
Díky AJAXu se nemusí vůbec nic
překreslovat!
![Page 61: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/61.jpg)
Příklad
<script>
var xhr = new XMLHttpRequest();
xhr.open("post", adresa-stranky,
true);
xhr.send();
if(xhr.status == 200){
alert(xhr.response);
}
</script>
![Page 62: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/62.jpg)
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.
![Page 63: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/63.jpg)
DOTYKOVÉ OVLÁDÁNÍ … nebo také ovládání pomocí gest
![Page 64: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/64.jpg)
![Page 65: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/65.jpg)
/
![Page 66: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/66.jpg)
Podpora v prohlížečích
• Základní gesta pro touch - 1 prst
• Multi-touch gesta – 2 až 10 prstů zároveň
![Page 67: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/67.jpg)
![Page 68: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/68.jpg)
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
![Page 69: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/69.jpg)
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)
![Page 70: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/70.jpg)
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>
![Page 71: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/71.jpg)
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
![Page 72: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/72.jpg)
PRÁCE SE SOUBORY
![Page 73: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/73.jpg)
Tlačítko
Webový server
![Page 74: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/74.jpg)
Tlačítko
Webový server
![Page 75: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/75.jpg)
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í
![Page 76: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/76.jpg)
![Page 77: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/77.jpg)
Práce se soubory
• File API (File Reader API)
• Progress & Load API
![Page 78: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/78.jpg)
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
![Page 79: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/79.jpg)
Progress & Load API
• Zobrazení stavu nahrávání – progress
• Zjištění úspěšného nahrávání
Nahráno 66 %
![Page 80: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/80.jpg)
OFFLINE FUNGOVÁNÍ … aneb když nám nejde internet nebo není potřeba přenosu dat
![Page 81: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/81.jpg)
![Page 82: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/82.jpg)
![Page 83: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/83.jpg)
Nativní aplikace
Tohle ale nechceme, ne?
![Page 84: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/84.jpg)
Offline úložiště
• Šetří přenosy dat
• Zrychluje odezvu aplikace
• Nezávislost na připojení internetu
![Page 85: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/85.jpg)
![Page 86: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/86.jpg)
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!
![Page 87: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/87.jpg)
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
![Page 88: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/88.jpg)
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
![Page 89: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/89.jpg)
Offline úložiště
Dočasná
• sessionStorage
Persistentní
• localStorage
• IndexedDB (nepodporováno na Android)
![Page 90: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/90.jpg)
Příklad
<script>
var item = new Array(...);
window.localStorage.setItem(name,
item);
window.localStorage.getItem(name)
window.localStorage.removeItem(na
me);
</script>
![Page 91: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/91.jpg)
![Page 92: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/92.jpg)
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
![Page 93: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/93.jpg)
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
![Page 94: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/94.jpg)
Zprovoznění Offline Application
<!DOCTYPE html>
<html manifest="/cache.manifest">
...
</html>
![Page 95: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/95.jpg)
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
![Page 96: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/96.jpg)
Zprovoznění Offline Application
CACHE MANIFEST
CACHE:
js/styles.css
css/scripts.js
![Page 97: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/97.jpg)
ANIMACE
![Page 98: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/98.jpg)
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.
![Page 99: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/99.jpg)
Animace
• Přechody mezi obrazovkami
• Interakce s rozhraním
![Page 100: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/100.jpg)
„Aha“ moment
![Page 101: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/101.jpg)
Animace
Jednoduché animace
• CSS3
• JavaScript
Složitější animace
• JavaScript
![Page 102: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/102.jpg)
Příklad HTML pro animaci
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="mic">Míč</div>
</body>
</html>
![Page 103: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/103.jpg)
Příklad HTML pro animaci
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="mic">Míč</div>
</body>
</html>
Objekt, který budeme animovat
![Page 104: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/104.jpg)
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>
![Page 105: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/105.jpg)
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
![Page 106: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/106.jpg)
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>
![Page 107: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/107.jpg)
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)
![Page 108: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/108.jpg)
NĚCO NAVÍC
![Page 109: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/109.jpg)
Vaše poloha
Geolokace Orientace zařízení
y
x
z
![Page 110: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/110.jpg)
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í
![Page 111: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/111.jpg)
Příklad
<script>
var gps = navigator.geolocation;
gps.getCurrentPosition(
function(position){
alert(„Lat: „ + position.coords.latitude + „, Lng:“ + position.coords.longitude);
}
);
</script>
![Page 112: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/112.jpg)
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
![Page 113: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/113.jpg)
Příklad
<script>
var gps = navigator.geolocation;
gps.watchPosition(
function(pos){
var rychlost = pos.coords.speed;
var směr = pos.coords.heading;
}
);
</script>
![Page 114: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/114.jpg)
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
![Page 115: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/115.jpg)
Využití
• Mapy a navigace
• Sociální sítě
• Geolokační služby
![Page 116: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/116.jpg)
Orientace zařízení
• Orientace v prostoru
• Sledování nasměrování zařízení v prostoru
• Režim „portrét“ / „landscape“
Portrét Landscape
![Page 117: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/117.jpg)
Příklad
<script>
window.addEventListener(
'deviceorientation',
function(eventData){
var tiltLR = eventData.gamma;
var tiltFB = eventData.beta;
var dir = eventData.alpha;
});
</script>
![Page 118: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/118.jpg)
Využití
• Ovládání her
![Page 119: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/119.jpg)
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
![Page 120: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/120.jpg)
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í!
![Page 121: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/121.jpg)
Máte nějaké dotazy?
![Page 122: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/122.jpg)
Michal Maňák Interaction designer & UX specialista
http://www.manakmichal.cz
Twitter: https://twitter.com/manakmichal
LinkedIn: http://www.linkedin.com/in/manakmichal
![Page 123: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/123.jpg)
DOPORUČENÁ LITERATURA
![Page 124: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/124.jpg)
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
![Page 125: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/125.jpg)
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/
![Page 126: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/126.jpg)
Doporučená literatura
Online
• AJAX (asynchronní komunikace) – https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest
![Page 127: Jak vytvořit mobilní webovou aplikaci](https://reader034.fdocuments.net/reader034/viewer/2022042614/55703179d8b42a611e8b4812/html5/thumbnails/127.jpg)
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