O prezentare despre designul Web responsiv + tehnologiile aferente. Pentru alte resurse de interes, a se vizita http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html A presentation regarding responsive Web design and various existing technologies. For additional resources of interest, visit http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

1. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Dr. Sabin Buraga
Facultatea de Informatică, Universitatea „A. I. Cuza” – Iași, România
www.purl.org/net/busaco
invitație la un festin

2. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
aperitiv

3. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
am dori (să învățăm) să „preparăm” produse digitale
aplicații – desktop, Web, mobile, omniprezente,… –
oferind o funcționalitate specifică și/sau conținut de interes

4. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
ingrediente umane
proiectanți
(designers)
dezvoltatori
(technologists)
strategiști
(management)
Alan Cooper et al., About Face (4th Edition), 2014

5. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
evoluția proceselor de dezvoltare
a produselor digitale (software)
Alan Cooper et al., 2014

6. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Care este interacțiunea cu produse digitale?

7. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco

8. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
interacțiunea dintre utilizator(i) și software
este facilitată de o interfață cu utilizatorul
(user interface)

9. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
așteptările utilizatorilor în ceea ce privește interfața
Peter Morville

10. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
utilizabilitate
se referă la maniera „adecvată” de exploatare
de către utilizatori a funcționalității unui sistem interactiv

11. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
learnability
cât de ușor se învață utilizarea sistemului?
efficiency
care-i modul optim de utilizare a interfeței?
memorability
cât de ușor e să ne reamintim interacțiunea cu aplicația?
errors
cum pot fi prevenite/corectate erorile utilizatorului?
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?

12. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
http://noisydecentgraphics.typepad.com/design/images/2008/03/11/yourproduct.jpg

13. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
experiența utilizatorului
(UX – User Experience)
definește percepția unui produs/serviciu (digital)
din punctul de vedere al persoanei/persoanelor
care-l utilizează și aparenta plăcere/satisfacție conferită

14. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
http://garrettdimon.com/pages/improving_interface_design

15. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
felul întâi

16. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Proiectarea interacțiunii cu utilizatorul
(interaction design)

17. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
interacțiunea e deseori influențată de context:
scopurile și atitudinea utilizatorului (e.g., starea emoțională),
timpul disponibil, localizarea, mediul (social/cultural),…
http://optimizely.slides.com/tobyurff/deliver-ux-that-converts-on-web-mobile-and-apps

18. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco

19. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
“Design, v.: What you regret not doing later on.”
/usr/games/fortune
“I’ve been amazed at how often those outside
the discipline of design assume that what designers
do is decoration. Good design is problem solving.”
Jeff Veen

20. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Tradițional, interacțiunea cu utilizatorul
recurge la elemente de interfață
suprafețe de redare
pagini, zone interactive,…
elemente de interacțiune
câmpuri de intrare (input fields), legături hipermedia,
controale specifice (e.g., bară de defilare, buton) etc.

21. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Cum percepe utilizatorul interfața?
design vizual

22. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Elemente importante ale designului vizual
(Dan Safer, 2006)
layout
grid
visual flow
typography
color, shape, texture

23. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco

24. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
layout
unde și cum sunt plasate conținutul
și mijloacele de interacțiune
http://alistapart.com/topic/layout-grids

25. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
layout pentru desktop vs. layout pentru dispozitiv mobil
(Ronan Cremin & Luca Passani, 2012)

26. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
layout fix
lățime prestabilită
versus
layout „lichid ”
lățime variabilă

27. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
layout
e facilitat și de template-uri (machete de prezentare)
specificarea aranjamentului și stilului vizual
via HTML + CSS + conținuturi grafice
exemplificare: WordPress Themes – http://wordpress.org/themes/

28. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
utilizând specificații de prezentare a conținutului (Web template),
datele persistente (e.g., preluate dintr-o bază de date)
sunt folosite de un procesor – template engine –
pentru a genera documente HTML ori alte formate

29. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
la nivel de server
Haml (Ruby), Mustache (C++, JS, PHP, Python, Scala,…),
Smarty (PHP), Velocity (Java) etc.

30. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
la nivel de client
disponibile pentru JavaScript:
Dust.js, Ejs, HandleBars, Mustache, Nunjucks,…

31. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
grid
oferă o structură coerentă a informațiilor prezentate
www.thegridsystem.org

32. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
aranjamentul spațial poate fi stabilit via grid – uzual, în tipografie
aici, utilizarea secțiunii de aur: alistapart.com/article/content-out-layout

33. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
visual flow
vizează metodele de înțelegere de către utilizator
a datelor prezentate și/sau de interacțiune cu acestea
context:
arhitectura informațiilor (Information Architecture)

34. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco

35. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
visual flow
asigurarea echilibrului orizontal/vertical
simetrie versus asimetrie

36. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
visual flow
gruparea diverselor elemente de interfațăunitate

37. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
visual flow
poate fi realizat și prin intermediul contrastului,
recurgând la diverse variabile vizuale
asigurarea focalizării atenției

38. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
chromatique
culoarea considerată cod vizual,
indicând categoria (tipul) de informații redate utilizatorului

39. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
„roata” culorilor pentru Web
culori caldeculori reci
armonie cromatică
redarea plăcută a elementelor de interesestetică vizuală

40. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
instrumente pentru „prepararea” de palete cromatice
Color Scheme Designer – colorschemedesigner.com
colr – www.colr.org
Colrd – colrd.com
Color Explorer – colorexplorer.com

41. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
typography
prezentarea conținutului textual via corpuri de literă
(fonturi) conform unor anumite reguli de prezentare

42. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
typography
NU înseamnă alegerea unui font „gustos”

43. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
în contextul Web-ului, a se studia http://webtypography.net/

44. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
navigabilitate
găsirea „drumului” care conduce utilizatorul
către satisfacerea scopului
minimizarea distanțeiergonomia interfeței

45. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
navigabilitate
„ingrediente” principale:
meniuri, legături conexe, divizarea conținutului,
harta sitului (site map), căutare internă (site search)

46. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
navigabilitate
navigare multicriterială (faceted navigation/search)
navigare socială
navigare bazată pe termeni de conținut – tag-uri
navigare cartografică
…

47. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco

48. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
navigabilitate
semantici diferite ale legăturilor hipermedia:
navigare
download
procesare
asociere de meta-date – exemplu: tagging

49. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
felul al doilea

50. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
multitudinea dimensiunilor „meselor” cu care
interacționăm pentru a savura diverse „festinuri” Web

51. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
responsive Web design
utilizarea unei suite de tehnologii Web ce permite
adaptarea designului la contextul de redare
(e.g., orientare a ecranului, rezoluție, densitate de pixeli,…)
Ethan Marcotte, 2010
www.alistapart.com/articles/responsive-web-design/
diverse „delicatese” oferite și de https://responsivedesign.is/

52. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
media queries
flexible image (+media, +font)
flexible/fluid grid
Jacob Surber, “The Page Is Dead”, SXSWi 2012
www.slideshare.net/jacobsurber/page-death

53. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
rezoluții de ecran diverserecurgerea la valori diferite
pentru anumite proprietăți CSS via reguli @media
Media Queries (recomandare a Consorțiului Web, 2012)
www.w3.org/TR/css3-mediaqueries/

54. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
<link rel="stylesheet" media="only screen and (color)"
href="stiluri-pentru-ecrane-color.css" />
@media screen and (max-width: 768px) and (orientation: portrait) {
/* stiluri pentru tablete*/
}
/* redarea pe 2 coloane pentru rezoluții mari */
@media (min-width: 1140px) and (min-resolution: 300dpi) {
.content { column-count: 2; column-gap: 1em; font-size: 1.5em; }
}
@media screen and (device-aspect-ratio: 16/9),
screen and (device-aspect-ratio: 16/10) { /* ecran lat */ }
pentru alte detalii, a se studia
http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries

55. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco

56. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
iPhone 5
(320 px)
iPhone 6
(667 px)
Android
(240 px)
iPad 2
(1024 px)
„degustarea” designului Web cu instrumentul Responsinator
http://www.responsinator.com/

57. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
multimedia responsive
imagini flexibile + alte resurse grafice – e.g., video
<picture>
<source media="(min-width: 40em)"
srcset="mare.jpg 1x, mare-hd.jpg 2x"/>
<source srcset="mic.jpg 1x, mic-hd.jpg 2x" />
<img src="implicit.jpg" alt="..." />
</picture>
<img src="mic.jpg" alt="Un cârnat apetisant"
srcset="mare.jpg 1024w, mediu.jpg 640w, mic.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw" />
informații de interes la https://responsiveimages.org/

58. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
diverse studii de caz sunt servite de http://mediaqueri.es/

59. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
multimedia responsive
client – recurgerea la biblioteci JavaScript precum
HiSRC – https://github.com/teleject/hisrc
Foresight.js – www.cdnconnect.com/docs/foresightjs
soluții de optimizare la nivel de server – exemple:
http://adaptive-images.com/
http://www.resrc.it/
https://developers.google.com/speed/pagespeed/module

60. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
fonturi Web responsive
fonturile externe nu trebuie încărcate în contextul dispozitivelor
având rezoluții reduse ale ecranului
soluții:
încărcarea asincronă a fonturilor (Web font loading)
considerarea graficii vectoriale – SVG (Scalable Vector Graphics)
detalii la http://webtypography.net/talks/rdo13/

61. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
layout-urile flexibile utilizează lățimi relative
pentru coloane în vederea organizării conținutului

62. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
responsive Web design
alte strategii:
adoptarea unităților de măsură relative
pentru valorile unor proprietăți CSS (% em rem)

63. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
alte strategii:
linearizarea conținutului
în contextul redării pe dispozitive mobile
layout shifter column drop
http://www.lukew.com/ff/entry.asp?1514

64. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
responsive Web design
alte strategii:
stabilirea zonei de redare (viewport)
la dimensiunea reală a ecranului dispozitivului
<meta name="viewport" content="width=device-width, initial-scale=1" />

65. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
desert

66. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
responsive Web design patterns
șablon de proiectare = „rețetă” ce poate fi pusă în aplicare
într-un context pentru rezolvarea unei probleme date
o „carte de bucate” cu rețete vizând proiectarea interacțiunii:
http://profs.info.uaic.ro/~evalica/patterns/

67. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
http://bradfrost.github.com/this-is-responsive/patterns.html
șabloane de proiectare pentru aranjament
spațial, navigare, conținut grafic, formulare,…

68. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
situație:
conținut tabelar responsiv (responsive table)
posibile soluții:
http://exisweb.net/responsive-table-plugins-and-patterns

69. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
situație:
conținut responsiv trimis prin poșta electronică (responsive e-mail)
șabloane de proiectare:
http://responsiveemailpatterns.com/

70. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
…de „savurat” și niște instrumente Web specifice:
Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Semantic UI – semantic-ui.com
Skeleton – www.getskeleton.com
UIKit – getuikit.com
Web Starter Kit – developers.google.com/web/starter-kit/

71. Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
conținut grafic bazat pe scene din serialul „Hannibal” – www.nbc.com/hannibal/
poftă bună la experimente!