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