Interacțiunea cu dispozitive

mobile
 Practici bune
• Transferul rapid al
datelor
• Utilizatorul controlează
datele sale
• Principiile de bază a
webului – securitatea

• Flexibilitatea
• Caracteristicile
specifice dispozitivelor
mobile
• Timpul pornirii sporit

Mobile Web Application Best Practices https://www.w3.org/TR/mwabp/

 Economie in
procesul transferului
datelor

Utilizatorii prefera
datele să se încarce
în cel mult 3 secunde
 Economie in
procesul transferului
datelor
Compressia datelor
poate fi organizată
de pe partea serverului
și pe partea clientului
în header-ul datelor
transmise
cu protocol HTTP 1.1

Accept-Encoding: gzip,deflate
 Compressia datelor

Ca regulă, imagini, audio

și video fișiere puțin
îsi schimba volumul în
urma compresiei.
Optimizarea fișierelor
date este necesară în
prealabil.
 Cache resources

Modul de stocare a unelor date în browserul

local al utilizatorului este indicată în
HEADER transferării datelor

Cache-Control:public; max-age=31536000
Expires: Mon, 20 Jan 2017 21:31:12 GMT

1 year is 31536000 seconds

 Minimize external
resources

Dacă în pagina web sunt

utilizate multiple CSS
și/sau JavaScript-uri se
recomandă de unit
acestea într-un singur
fișier.
Un fișier CSS
Un fișier JavaScript
 Minimize application
and data size

Optimizarea codului
paginii, stilurilor și a
scripturilor

Minimizarea volumului JavaScript-ului

http://compressorrater.thruhere.net/
 Optimize network
requests

Multiple interogari mici se

procesează mai greu decît
una mai mare,
astfel este de dorit de unit
acestea mici în una mai
mare.
 Evitați consumul
excesiv de cookies

Cookies pot fi interzise în

contextul interacțiunii cu
dispozitivul mobil.
Astfel, pe cînd utilizarea lor este
foarte comodă nu se recomandă
de a se baza pe acestea.
 Flexibilitate
Principalele metode de
interactiune:
• bazate pe focus -
focusul browser-ului
trece de la un element
la altul
• bazate pe pointer -
navigarea bazata pe
taste ce poate acoperi
orice parte a ecranului
• bazata pe touch 
 Interacțiunea
bazată pe focus
Determinarea focusului
curent se poate realiza
prin evidențierea
elementului pe care este
focusul (subliniere,
colorare background).
Zona de focus va fi
schimbata automat de la
un element ce poate fi
selectat la altul (de la
link la link) fără a afecta
uzabilitatea  
Interacțiunea bazată
pe pointer
Elementele ce pot fi selectate
trebuie sa fie pozitionate in
aceiași zona deoarece
mutarea pointerului poate fi
mai dificilă/ inceată. De
asemenea, aceste elemente
trebuie sa aibă marimea
potrivita pentru a putea fi
selectate ușor. De
asemenea, la rollover
trebuie evidențiat clar faptul
ca pointerul se află în zona
activă a acelui control.
Interacțiunea bazată
pe touch
Elementele ce pot fi selectate
pot fi dispuse pe o zona mai
mare sau mai mica - user-ul
le poate selecta direct, dar
trebuie si in acest caz sa
aiba o dimensiune destul de
mare pentru a putea fi usor
selectate.
Niciun element nu detine
focusul pana nu este
selectat si nu poate oferi
informatii suplimentare
utilizatorului(fara rollover).
 Ensure text flow

Vizualizarea textului
Este important că
textul să ocupe tot
ecranul însă să nu
apară bara de
derulare orizontală.
Se utilizează măsurile
de font relative, nu
absolute

px vs pt vs em vs %
 Server side detection
vs client side
detection
Server side detection
Cîmpuri HTTP header:
- Accept definește ce conținut
dispozitivul poate accepta.
- User-Agent definește softul pe
partea clientului.

Client side detection

Ca regulă, se organizează cu ajutorul
unui JavaScript ce detectează
proprietățile dispozitivului/softului
și adaptează pagina în
corespundere cu acetsea
 Clasificarea
dispozitivelor

Exemplu: Clasificarea
dispozitivelor bazată pe
abilitatea de a suporta API:
• Class 1: Numai HTML, nu
suportă scripting, nici
XMLHttpRequest.
• Class 2: Suportă AJAX și
JavaScript.
• Class 3: Dispozitive
avansate cu acces la API,
personal information
management (PIM), și
cache.
Principiile generale
a web-ului

• Datele, modificate pe
un dispozitiv trebuie
trimise pe server cu
scopul să fie
accesibile de orice alt
dispozitiv
 Nu uităm de
securitate

• Datele obținute trebuie

verificate și procesate
cu atenție preferabil cu
instrumentele ce includ
controlul lor.
• De exemplu, în loc de
utilizarea JS funcției
eval() pentru procesarea
JSON de utilizat JSON
parser ce nu va procesa
datele invalide
URI pentru fiecare
fragment a paginii

• Folosim link-uri la
fragmentele
concrete ale paginii
dar nu la pagina
întreagă
 Caracteristicile
specifice ale
dispozitivelor mobile
• Make Telephone Numbers
"Click-to-Call“
Daca în pagina web apare un
număr de telefon, un click pe
acesta porneste apelul telefonic
<a href= "tel:[PHONE-NUMBER]" >
[PHONE-NUMBER] </a>

Pentru SMS
<a href="sms:[PHONE-NUMBER]?
body=[MESSAGE]"> [PHONE-
NUMBER]</a>
 Caracteristicile
specifice ale
dispozitivelor mobile
• Make Telephone Numbers
"Click-to-Call“
Daca în pagina web apare un
număr de telefon, un click pe
acesta porneste apelul telefonic
<a href= "tel:[PHONE-NUMBER]" >
[PHONE-NUMBER] </a>

Pentru SMS
<a href="sms:[PHONE-NUMBER]?
body=[MESSAGE]"> [PHONE-
NUMBER]</a>
 Meta Viewport
Element 
Utilizăm META pentru
adaptarea marimii paginii la
marimea ecranului
<meta name="viewport"
content="width=device-
width, initial-scale=1.0"/> 
Utilizatorul trebuie să
aibă libertatea de a
manipula datele sale

• Aplicația trebuie să ceară

acordul utilizatorului
pentru a utiliza datele
sale și să nu repete
interogare aceasta de
mai multe ori dacă
acesta a refuzat.
Utilizatorul trebuie să
aibă libertatea de a
manipula datele sale

• Aplicația poate să ceară

acordul utilizatorului
pentru a memoriza
loginul și parola sa
pentru logarea automată
data viitoare.
• Utilizatorul trebuie să
aibă posibilitatea de a
de-loga (log-off)
Utilizatorul trebuie să
aibă libertatea de a
manipula datele sale

• Aplicația poate să
propună utilizatorului de
a selecta metoda de
prezentare a datelor. În
unele cazuri selectarea
automată a metodei de
prezentare nu reușește
să aleagă opțiunea
potrivită
 Optimizarea
timpului
răspunsului
• Unirea imaginilor în
una pentru transfer
minimizează timpul
transferului lor
• Includerea
imaginilor in CSS
background la fel
este benefică pentru
transferul lor.
• Dacă imaginea este
importantă, nu doar
decorativă, păstrați-
o ca <img> cu alt
 Optimizarea
timpului
răspunsului

• DOM al fiecărei
pagini web
trebuie să fie de
mărime moderată
• Asta poate fi
obținută prin
paginația potrivită
 Optimizarea
timpului
răspunsului
• JavaScript
aranjați la capatul
paginii fiindcă
browserul
procesează
scriptul mai greu.
Astfel, pagina
deja va fi vizibilă
pînă JavaScriptul
va fi interpretat.
 Optimizarea
timpului
răspunsului

• Keep the User

Informed of Activity: 
• Utilizați bara de progres
pentru informarea
utilizatorului despre
progresul în procesul
accesării unui API.
Altfel utilizatorul va
presupune că aplicația
este blocată.
 Optimizarea
timpului
răspunsului

• Avoid Page
Reloads: 
• Reîncarcați numai
unele părți ai paginii
prin JavaScript sau
AJAX. Astfel
utilizatoul va vedea
pagina permanent.
 Optimizarea
timpului
răspunsului
Preload Probable
Next Views: 
Utilizați metodele de
preîncarcare a
datelor care
utilizatorul cel mai
probabil va dorea să
vadă.
 Optimize for
application
start-up time: 
• Use Offline Technology: 

• Tehnologii Offline (AppCache)

permit aplicației să se
pornească fără să se adreseze
la server.

• Tehnologia HTML5

<html manifest=
"demo_html.appcache">
 Optimize for
application
start-up time: 
• Consider
Partitioning Large
Scripts: 
Dacă JavaScript este
mare iar utilizarea
liu nu este
permanentă, acesta
trebuie stocat în
fișier aparte, astfel
el va fi încarcat
dupa pagina
principală.
 Optimize for
application
start-up time: 
• Use Local
Storage:  Dacă este
cazul, stocați un
pagina aplicației în
cache, astfel încât
aceasta să poată fi
afișată imediat la
pornire, în timpul
conectării cu server.
 Optimize for
application
start-up time: 
• Minimize Number of
Local Storage
Queries:  Numărul
interogărilor locale de
stocare necesare pentru
a genera vizualizarea
inițială reprezintă o
contribuție semnificativă
la latența inițială.
Încercați să minimizați
numărul de interogări
necesare la prima
vizualizare afișată.