![Page 1: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/1.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dezvoltarea aplicațiilor Webla nivel de client
⍝interacțiune Web – HCI, UI, UX
![Page 2: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
“It is not the answer that enlightens,but the question.”
Eugene Ionesco
![Page 3: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/3.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Care sunt mijloacele de interacțiunedintre utilizatori și o aplicație?
![Page 4: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/4.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Human
persoană care încearcă să îndeplinească un scop
![Page 5: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/5.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
fotografii preluate de la wikimedia.org
![Page 6: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/6.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Computer
rulează aplicații – software
![Page 7: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/7.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
primul joc implementat pe PDP (anii 1960)
![Page 8: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/8.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 9: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/9.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 10: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/10.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 11: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/11.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 12: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/12.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 13: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/13.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 14: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/14.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Computer
rulează aplicații – i.e. software
local – eventual, cu rol de clientversus
la distanță – e.g., solicită serviciide la server(e) ori alte entități
![Page 15: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/15.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction
„dialog” între om și calculator
![Page 16: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 17: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/17.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interacțiunea dintre utilizator(i) și softwarese realizează via o interfață (user interface)
![Page 18: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/18.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interacțiunea dintre utilizator(i) și softwarese realizează via o interfață (user interface)
API (Application Programming Interface)versus
UI (User Interface)
![Page 19: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/19.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații native
instalabile pe un calculator/dispozitiv (mobil)
rulate grație unui mediu de execuție– uzual, oferit de un sistem de operare
(e.g., Android, iOS, Linux, Windows,…) –pe un procesor real/virtual
![Page 20: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/20.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Graficon (Douglas Engelbart, 1963)
![Page 21: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații native
prezintă una/mai multe modalități de interacțiune cu utilizatorul:
linia de comandă (CLI – Command Line Interface)manipulare directă: WIMP (Window Icon Menu Pointer)naturală – e.g., gesturi, voce, mișcare, ubicuitate, 3D,…
![Page 22: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/22.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 23: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații native
pot recurge la platforme/tehnologii/limbaje proprietare și/sau libere
pot fi utilizate conform unei licențe(proprietare sau deschise)
![Page 24: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/24.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
detalii despre licențele de utilizare a software-ului/datelor la tldrlegal.com
![Page 25: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații Web
colecție interconectată de pagini Webcu conținut generat dinamic,
oferind o funcționalitate specifică
![Page 26: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/26.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații Web
prezintă o interfață cu utilizatorul exploatabilă la nivel de client (i.e. navigator Web)
recurg la standarde/formate de date deschise(HTTP, URL, HTML, CSS, JSON, SVG, XML, RDF,…)
![Page 27: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/27.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
human-computer interaction
280slides (2010)sistemul WorldWideWeb (Tim Berners-Lee, ~1990)25 de ani de Web – www.slideshare.net/busaco/25-de-ani-de-web
![Page 28: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/28.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații Web
interfața Web
browser – interacțiune limitată via controale HTMLhipertext/hipermedia
RIA (Rich Internet Applications): în prezent, HTML5interacțiune facilitată de transfer (a)sincron: Ajax et al.
audiență globală
![Page 29: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/29.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 30: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/30.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
provocare: proiectarea interacțiunii pentru dispozitive multiple
design (Web) responsiv – responsive (Web) design
![Page 31: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/31.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfața – desktop, Web,… – cu utilizatorul
parte a aplicației – desktop, Web, miniaturală,… –care permite utilizatorilor să-și exprime intențiilede operare asupra software-ului și să interpreteze
rezultatele acțiunilor efectuate de mașină
![Page 32: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/32.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
percepută nu doar ca parte vizuală a software-ului
![Page 33: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/33.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
percepută nu doar ca parte vizuală a software-ului
din punctul de vedere al utilizatorului,reprezintă întregul sistem – aplicația per se
![Page 34: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/34.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilitate (utility)
oferirea facilităților dorite de utilizator
![Page 35: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/35.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?
![Page 36: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/36.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilă (useful)
usability + utility
![Page 37: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/37.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Oricine utilizează un instrument (software)o face cu o motivație
![Page 38: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/38.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
găsirea unei entități:informație, obiect, utilizator etc.
![Page 39: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/39.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
(auto-)învățareși/sau
instruire
![Page 40: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/40.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
realizarea unui proces – e.g., tranzacție
![Page 41: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/41.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interacțiuni sociale – la nivel real și/sau virtual
![Page 42: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/42.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
crearea unui artefact:însemnare, imagine, articol, soluție de design, cod-sursă,…
![Page 43: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/43.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
divertisment propriu și/sau la nivel de grup (comunitate)
![Page 44: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/44.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
modul de percepție a produsului/serviciuluide către persoanele care-l folosescși plăcerea/satisfacția înregistrată
![Page 45: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/45.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Context
http://garrettdimon.com/pages/improving_interface_design
![Page 46: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/46.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
“Every product that is used by someone has a user experience: newspapers, ketchup bottles,
reclining armchairs, cardigan sweaters.”
James Jesse Garrett, 2003
![Page 47: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/47.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
experience = expectationuser is satisfied
![Page 48: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/48.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 49: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/49.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
experience > expectationuser is delighted
![Page 50: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/50.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 51: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/51.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
UX (User Experience)
experience < expectationuser is dissatisfied
![Page 52: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/52.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
alte exemplificări la www.webpagesthatsuck.com/
![Page 53: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/53.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Experiența utilizatorului (UX)în contextul interacțiunii cu dispozitivele mobile
studiu de caz
![Page 54: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/54.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Punerea problemei
![Page 55: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/55.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interactiune web
![Page 56: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Necesitatea organizăriiconținutului (datelor) prezentat(e) utilizatorilor
![Page 57: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Necesitatea organizăriiconținutului (datelor) prezentat(e) utilizatorilor
IA – Information Architecture
![Page 58: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/58.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 59: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/59.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 60: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/60.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
IA – Information Architecturecontext: vizualizarea datelor (data visualization)
How Music Travelshttp://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/
![Page 61: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/61.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
de la reprezentări vizuale la infografice(Alecsandru Grigoriu – Open Data Visualization, Mozilla Labs, 2010)
![Page 62: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/62.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce aspecte vizeazăproiectarea interacțiunii cu utilizatorul?
![Page 63: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/63.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
![Page 64: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/64.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
are o natură contextuală
![Page 65: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
existența a numeroase mijloace și metodologii
![Page 66: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
caracter aplicativ
![Page 67: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/67.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
nu trebuie să implice direct calculatoarele
![Page 68: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/68.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
„Interzis virajul la dreapta?”sau
„Mergi la dreapta, nu la stânga?”
www.baddesigns.com
![Page 69: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/69.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
![Page 70: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
focalizare spre utilizatori (user centered design)
![Page 71: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/71.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
uzual, există alternative de proiectare
exemplu:diverse maniere de afișare a datelor
![Page 72: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/72.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
www.veen.com/nextgen.pdf
![Page 73: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/73.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
inovare + prototipizare
![Page 74: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/74.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
exemplu: interacțiune cu dispozitive Arduino
Ștefan Negru
![Page 75: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
caracter colaborativși de mediere (e.g., a constrângerilor)
![Page 76: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/76.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interaction Designfacilitarea interacțiunilor dintre oameni
via produse & servicii (software)
crearea de soluții specifice – deseori, unice
![Page 77: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/77.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interactiune web
domenii înrudite (Dan Saffer, 2006)
![Page 78: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/78.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
(în loc de) pauză
http://www.bonkersworld.net/mobile-relationship/
![Page 79: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/79.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Cum am caracteriza interacțiunea Web?
![Page 80: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/80.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicații (Web) sisteme software complexe,în evoluție permanentă
![Page 81: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/81.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura tradițională a unei aplicații Web
a se revedea cursul „Tehnologii Web”tinyurl.com/tehnologii-web
![Page 82: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/82.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
aplicație Web = interfață + program + conținut (date)trei strate (3-tier application)
Client Server de aplicații Stocare(interface) (application) (persistence)
Internet(Web)
![Page 83: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/83.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”,Web 2.0 Expo, 2007: iamcal.com/talks/
![Page 84: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/84.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”,Web 2.0 Expo, 2007: iamcal.com/talks/
![Page 85: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfațamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
![Page 86: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfațamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
![Page 87: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/87.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfațamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
![Page 88: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/88.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicație Web = Interfață + Conținut (Date) + Program
mitul 1: cea mai importantă este interfațamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
fapt: sunt importante toate!
![Page 89: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/89.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
multitudinea mijloacelor de interacțiune cu utilizatorul
![Page 90: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/90.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
suportul oferit de hardware:procesor, video, audio, acces la rețea,…
![Page 91: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/91.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
proliferarea interacțiunilor naturale,mai ales via dispozitive mobile ori senzori
(IoT – Internet of Things)
![Page 92: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/92.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
creșterea masei de utilizatori,având așteptări tot mai mari din partea software-ului
![Page 93: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/93.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
neadaptare la cerințele de tip business
development vs. marketing vs. management
![Page 94: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/94.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
lipsa funcționalității
![Page 95: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Realitate
calitatea precară a aplicației
![Page 96: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/96.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce tipuri de aplicații Web există?
![Page 97: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/97.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Centrate pe documenteInteractiveTranzacționaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic
evoluția în timpa complexității
![Page 98: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Centrate pe documente – document centric
conținut/pagini static(e): situri de companii, personale
![Page 99: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 100: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/100.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interactive
expoziții virtualesituri de știri
sisteme oferind servicii – e.g., călătorii (e-travel)chioșcuri informative
participare la evenimente online…
![Page 101: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/101.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 102: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Tranzacționale
soluții vizând afacerile online: B2B (business-to-business), B2C (business-to-consumer),
C2C (consumer-to-consumer) etc.exemple: e-banking, comerț electronic, imobiliare,…
fluxuri de activități (workflow-uri)
…și altele
![Page 103: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/103.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 104: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/104.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Colaborative
tele-conferințe Webaplicații Web de tip wiki
servicii e-learningaplicații Web peer-to-peer
![Page 105: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/105.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 106: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/106.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Orientate spre portaluri
localizare unitară a informațiilortehnice, de afaceri, guvernamentale,…
specie: Web-ul cetățenesc
![Page 107: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/107.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 108: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/108.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
De tip ubicuu
servicii bazate pe locația utilizatorului, disponibile pe mai multe plaforme:
computer clasic, telefon mobil, ceas, tabletă, TV,…
![Page 109: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/109.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
exemplificare: Pockethttps://getpocket.com/
![Page 110: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/110.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web social
mediatizare (syndication)filtrare colaborativă pe baza tagging-ului
spații de lucru virtualedivertisment social
social (game) computing
![Page 111: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/111.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 112: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/112.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web semantic (Web of Data)
modelarea cunoștințelorpentru a fi „înțelese” de calculatoare
dateinformațiicunoștințe
![Page 113: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/113.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
![Page 114: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/114.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Situl Web al unui muzician – cerințe:
“To maintain & develop lasting relationships with fansof Tyler’s music. In addition to being visually and
emotionally appealing and appropriate to Tyler’s fan base,the site should be a reliable source for current information
on Tyler’s activities and provide consistently updatedaudio/visual stimuli that encourage repeated visits
from fans.”
discuție (pentru acasă)
![Page 115: CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz](https://reader034.vdocuments.us/reader034/viewer/2022051707/58ef03b41a28abc4238b4637/html5/thumbnails/115.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
episodul viitor: arhitectura navigatorului Web