Predavanje iz Dinamičkih web aplikacija, 11. predavanje Video: https://www.youtube.com/watch?v=0othfQg9AP8&list=PLYqeapOP_CtS0kbdbo_GXFgnS81JGAd8L&index=12 Tema: Izrada web aplikacija za mobilne uređaje Datum snimanja: 19.5.2016

1. Web aplikacije za mobilne ure ajeđ
Stipe Predanić

2. Stranice za mobilne ure ajeđ
● Zašto razvijati stranice za mobilne ure aje?đ
● Zašto razvijati web aplikacije za mobilne ure aje?đ
● prosinac 2012 - 64.2 milijuna korisnika u SAD-u i 48.4
milijuna korisnika u EU5 je pristupilo socijalnim mrežama
ili blogovima putem “pametnog” telefona barem jednom
(od toga polovica više puta). (izvor comScore)
● ožujak 2013 - u Hrvatskoj je 1.22 milijuna korisnika
Interneta od ega 20% kroz mobile mreže (ponajvišeč
koriste i smartphone)ć
● kolovoz 2013 – 17% svjetskog mrežnog prometa dolazi s
mobilnih ure ajađ
● previše korisnika da ih propustimo

3. Prednosti i nedostaci
● Prednost je samo jedna:
● maksimalna mobilnost
● Nedostaci:
● spor pristup Internetu s estim variranjima brzineč
● ure aji ograni enih mogu nosti prikaza,đ č ć
procesorske snage i memorije
● rascjepkanost platformi

4. Zaobi ite nedostatkeđ
● problem s brzinom
● cache na ure ajuđ
● korištenje AJAX-a kako bi se podaci prenosili u pozadini
● problem sa veli inom ekranač
● prilagodite izgled i/ili CSS
● prilagodite sadržaj
● problem sa procesorskom snagom i memorijom
● ne optere ujte stranice sa nepotrebnim JavaScriptć
framework-cima (npr. na mobitelu sigurno ne treba jQuery
Datatable)

5. Preporuke: dizajn
● Preporuke za dizajn:
● zbog malog ekrana razli itih dimenzija (svakič
telefon/tablet ima svoju rezoluciju) ne koristiti odnose
(duljine, širine itd) u pikselima, ve u postocimać
– primjer .menu{ width:300px; } postaje .menu{width:90%}
● ne koristiti puno slika, samo najnužnije, a ikone
izvla iti iz CSS spriteovač
● ne koristiti evente koji se na touch screenu ne mogu
upotrebiti – bilo JavaScript (onMouseOver,
onMouseOut itd), bilo CSS (hover)

6. Preporuke: dizajn
● Preporuke za dizajn:
● smanjiti broj potrebnih unosa sa virtualne tipkovnice
i pripremite gumbe za unos
– primjer: predefinirana tipkovnica sa brojevima na
studomatu
● smanjiti koli inu gužve podataka na ekranuč
odjednom
– prelomiti podatke u više ekrana
– pojednostaviti podatke koji se prezentiraju

7. Preporuke: arhitektura
● Preporuke za arhitekturu:
● server – debeli klijent koji obavlja što više posla
– koristiti JavaScript dostupnu bazu podataka
● WebKit (iPhone, Android) podržava WebSQL
– provjera i filtriranje podataka prije slanja na server
– slanje podataka AJAX-om
– preporuke:
● izraditi jednu stranicu koja ima skrivene DIV-ove koji se pojavljuju
po potrebi koriste i JavaScript. Kad korisnik u ita stranicu, ne eć č ć
morati sa Interneta vu i nove stranice, što daje bolji osje ajć ć
fluidnosti aplikacije.
● koristiti sustave s Virtualnim DOM-om

8. Preporuke: arhitektura
Prva stranica
Druga stranica
Treća stranica
Stranice skrivene
CSS-om
(display:none,
pomaknute van
vidljivog područja,
z-index:-1 )

9. Korisni alati
● Detekcija mobilnog ure aja:đ
● detekcija browsera po user agentu:
– WURFL – sada pod AGPL licencom
● zamjena OpenDDR, pa sada Apache DeviceMap
– analiza user agenta - npr regularnim izrazom (
http://detectmobilebrowsers.com/ ) bilo na server strani
(PHP), bilo na klijent strani (JavaScript)
● provjeriti JavaScriptom da li klijentski browser
podržava element
navigator.appVersion.indexOf("Mobile");
● provjeriti JavaScriptom veli inu ekrana u pikselimač
(problem: iPad 3 i 4 :D)

10. Korisni alati
● HTML5 daje par zgodnih mogu nosti:ć
● WebSQL
– baza podataka na mobitelu, upravljiva JavaScriptom
– spremanje i itanje podataka bez potrebe za zahtjevom premač
serveru
● a ako i ide zahtjev prema serveru povu e se sve što možda treba ič
pospremi u bazu
– podržano na iPhoneu i Android baziranim telefonima
● najavljuju povla enje u korist IndexDB ali još ništa od togač
● local storage
– za spremanje jednostavnih podataka koji moraju ostati i nakon
gašenja browsera (npr korisni ko ime, lozinka, postavke)č
– u nuždi može se koristiti i kao zamjena za WebSQL

11. Korisni alati
● HTML5
● Offline aplication
– definiranje koje datoteke treba cacheirati na klijentskom
ure aju, i nikada ne mijenjatiđ
– mogu e je i definirati koje datoteke zamjenjuju drugeć
datoteke ako se stvarno radi o offline na inu radač
● dodatno korisno:
– Geolocation
– SSE (Server side events)

12. Korisni alati
● JavaScript framework-ci koji su predvi eni za rad nađ
mobilnim ure ajimađ
● nije problem u veli ini i overheadu frameworka ve želja zač ć
podrškom za touch mogu nostimać
● predefinirani grafi ki elementi (CSS koji konzistentnoč izgleda
na svim platformama)
● podrška za touch (scroll, zoom itd)
● Sencha Touch
● jQuery Mobile
● postoje prototype alati za bržu izradu stranica (Codiqa, Tiggzi)

13. Native vs web
● korištenjem svih mogu nosti koje HTML5 pružać
možemo stvoriti pristojnu višeplatformsku
aplikaciju za mobilne ure ajeđ
● imamo spremanje podataka (WebSQL, local storage),
“nevidljivu” komunikaciju sa serverom (AJAX)
● ali je i dalje nemogu e koristiti neke resurse telefona:ć
kamera, vibracija, prava memorija (memorijska kartica)
– ovisno o browseru!
● PhoneGap / Apache Cordova !

14. PhoneGap
● development framework koji
● se pokre e kao nativna aplikacija na mobilnomć
ure ajuđ
● ali za UI koristi webbrowser – HTML5/JavaScript
● daje JavaScriptu mogu nost upravljanja s resursimać
telefona (npr kamera)
● višeplatformski
– jedan HTML5/JavaScript kod za stranicu odgovara za
više mobilnih ure ajađ
– potrebno prilagoditi nativnu aplikaciju pojedinom telefonu

15. Više informacija
● Više informacija
● jQuery mobile ( http://jquerymobile.com/ )
● Codiqa ( http://www.codiqa.com/ )
● PhoneGap ( http://phonegap.com/ )
● Knjige Jonathana Starka
– Building iPhone Apps with HTML, CSS, and JavaScript
– Building Android Apps with HTML, CSS, and JavaScript