+ All Categories
Home > Design > CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Date post: 12-Apr-2017
Category:
Upload: sabin-buraga
View: 401 times
Download: 3 times
Share this document with a friend
152
Dr. Sabin Buragawww.purl.org/net/busaco Dezvoltarea aplicațiilor Web la nivel de client de la design vizual la design Web responsiv
Transcript
Page 1: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Dezvoltarea aplicațiilor Webla nivel de client

〄de la design vizual

la design Web responsiv

Page 2: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

“Computers are to design as microwaves are to cooking.”

Milton Glaser

Page 3: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Există o „rețetă” de proiectare judicioasăa interfețelor Web?

Page 4: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 5: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aspecte importante:

funcția – designul (proiectarea) bun(ă) oferă suportpentru desfășurarea activităților utilizatorului

forma (înfățișarea) – designul (proiectarea) bun(ă)trebuie să impulsioneze utilizatorul să folosească

obiectul/aplicația/serviciul cu plăcere

Page 6: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aspecte importante:

funcția – designul (proiectarea) bun(ă) oferă suportpentru desfășurarea activităților utilizatorului

forma (înfățișarea) – designul (proiectarea) bun(ă)trebuie să impulsioneze utilizatorul să folosească

obiectul/aplicația/serviciul cu plăcere

Page 7: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Tradițional, interacțiunea cu utilizatorulva recurge la elemente de interfață

suprafețe de redarepagini, zone interactive,…

elemente de interacțiunecâmpuri de intrare, legături hipermedia,

controale specifice (e.g., bară de defilare, buton) etc.

Page 8: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Cum percepe utilizatorul interfața?

pe baza simțurilor

(human senses)

A.-

H. P

oo

l (2

01

5):

htt

ps:

//co

mm

on

s.w

ikim

edia

.org

/wik

i/File

:Fiv

e_se

nse

s.jp

g

Page 9: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

layout

grid

visual flow

typography

color, shape, texture

conform Dan Saffer (2006)

Page 10: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

bazat pe modele vizuale

ce anume vom comunica utilizatorului?

Page 11: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

reprezentările vizuale trebuie să fie ușor percepute și recunoscute

recognition (recunoaștere)versus

recall (reamintire)

Page 12: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

pictograme & simbolurimetafore vizuale

Page 13: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

pictograme & simbolurimetafore vizuale

Page 14: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

pictograme & simbolurimetafore vizuale

Page 15: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Metaforele sunt utilizate pentru a reda și/sau a crea asociații mentale

Page 16: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

discuție

metafore și/sau idiomuri?

Page 17: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

un design bun implică alegerea echilibratăa relațiilor dintre elementele care creează conținutul

Page 18: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

un design bun implică alegerea echilibratăa relațiilor dintre elementele care creează conținutul

ierarhie vizuală cât mai clară

S. Krug, Don’t Make Me Think! (2nd Edition), New Riders, 2006

Page 19: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

layout

unde și cum sunt plasate conținutul și mijloacele de interacțiune

http://alistapart.com/topic/layout-grids

Page 20: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

layout-ul generic al unei pagini Web

Page 21: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Fiecare pagină Web include un container (container block) care va cuprinde

conținutul propriu-zis

<div class="content">…</div>

Page 22: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

layout fixlățime prestabilită

versus

layout lichidlățime variabilă

Page 23: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Layout-ul e facilitat de template-uri(machete de prezentare)

specificarea aranjamentului și stilului vizualvia HTML + CSS + conținuturi grafice

exemplificare: WordPress templateshttp://wordpress.org/themes/

Page 24: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Recurgerea la sisteme de aplicare a machetelorde 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

Page 25: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Recurgerea la sisteme de aplicare a machetelorde prezentare – Web template systems

oferite implicit de unele servere de aplicații oriframework-uri Web sau disponibile ca extensii

Page 26: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Recurgerea la sisteme de aplicare a machetelorde prezentare – Web template systems

la nivel de server

Haml (Ruby), JADE (Node.js), Mustache (C++, JS, PHP, Python, Scala,…),

Smarty (PHP), Velocity (Java) etc.

Page 27: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Recurgerea la sisteme de aplicare a machetelorde prezentare – Web template systems

la nivel de client

disponibile pentru JavaScript: Dust.js, Ejs, HandleBars, Mustache, Nunjucks,…

Page 28: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

grid

oferă o structură coerentă a informațiilor prezentate

www.thegridsystem.org

Page 29: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Strategii vizând caroiajul(grid-ul)

secțiunea de aur3 coloanesimplitateabalansulunitatea

Page 30: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

aranjamentul spațial poate fi stabilit via grid – uzual, în tipografieaici, utilizarea secțiunii de aur: alistapart.com/article/content-out-layout

Page 31: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

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)

Page 32: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

discuție

Page 33: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

visual flow

un aspect important este cel referitor la asigurarea echilibrului vizual

Page 34: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

visual flow

un aspect important este cel referitor la asigurarea echilibrului vizual

simetrie orizontală, bilaterală sau radialăsimetrie versus asimetrie

Page 35: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

discuție

Page 36: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aspect de interes:

alinierea conținutului în cadrul unui formular/tabel

Page 37: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 38: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 39: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 40: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 41: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

visual flow

unitatea

modul în care elemente diferite interacționeazăîn cadrul aceluiași document (aceleași pagini Web)

Page 42: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

visual flow

unitatea

uzual, se realizează prin grupare:spațială, cromatică, via elemente (grafice) de separare

(e.g., linii orizontale, aliniere diferită etc.)

Page 43: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Grupare – principiul Gelstalt

ochiul creează un întreg (gelstalt)din fragmentele existente

Page 44: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html

diverse exemple: http://tinyurl.com/y6ao7k

Page 45: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

visual flow

poate fi realizat și prin intermediul contrastuluiasigurarea focalizării atenției

Page 46: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Percepția elementelor de interfațăpe baza variabilelor vizuale

Page 47: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

cromatica

culoarea considerată cod vizual,indicând categoria (tipul) de informații

redate utilizatorului

Page 48: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

cromatica

un set de culori poate avea semantici diferite,în funcție de situațiile survenite și de audiență

poate stabili ambientul

Page 49: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Design vizual

cromatica

utilizarea a maxim 4 culori afişate simultan

Page 50: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

„Roata” culorilor pentru Web

culori calde

culori reci

Page 51: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Armonie cromatică

redarea plăcută a elementelor de interes(în acest context: culorile)

estetică vizuală

www.interaction-design.org/encyclopedia/visual_aesthetics.html

Page 52: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

armonie complementară

Page 53: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

armonie bazată pe 3 culori (triadă)

Page 54: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

armonie analogă accentuată

Page 55: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Observație:contextul în care apare o culoare este foarte important

anumite culori au conotații multiple

verde ≡ victorie (Grecia antică) verde ≡ fertilitate (Evul mediu)

Page 56: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busacoChina fericire

naștereputere

paradis nori

paradis nori

moarte puritate

Franțaaristo-crație

tempo-rar

crimi-nalitate

liberpace

neutra-litate

Indiaviață

creati-vitate

succesprospe-

ritatefertil

moarte puritate

Japoniafurie

pericolgrațienobil

viitor tinerețe

răutate moarte

USApericol,

stoplașitate atenție

sigu-ranță

mascu-linitate

puritate

atenție la utilizarea internaționalăwebdesignerwall.com/general/cultural-considerations-for-global-websites

Page 57: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Instrumente pentru generarea de palete cromatice(exemplificări)

Color Scheme Designer – colorschemedesigner.com

colr – www.colr.org

Colrd – colrd.com

Color Explorer – colorexplorer.com

alte detalii în S. Buraga, Any Colour You Like (2013)http://www.slideshare.net/busaco/any-colour-you-like

Page 58: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

http://colorhunt.co/

Page 59: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Greșeli frecvente:poziții arbitrare ale elementelor componente

dimensiuni arbitrare ale elementelormărimi și reprezentări arbitrare ale imaginilor

prezentări inconsistentelimbaje vizuale inconsistente

Page 60: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Care sunt aspectele de interesprivind redarea conținutului textual?

Page 61: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Typography

prezentarea conținutului textual via corpuri de literă(fonturi) conform unor anumite reguli de prezentare

typos (impresie) + grapheia (scriere)

Page 62: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Typography

componentă vitală a procesului de comunicare

nu înseamnă “picking a cool font”

resurse de interes: http://ilovetypography.com/

Page 63: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

în contextul Web-ului, a se studia http://webtypography.net/

Page 64: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Typography

corpul de literă – typeface, font

mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere

Page 65: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Typography

corpul de literă – typeface, font

mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere

Font: Caracter Semn

Page 66: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Corpul de literă

dimensiunemăsurată în puncte tipografice ori picas

scala: 6 8 9 10 11 12 14 16 18 21 24 36 48 60 72

proprietate CSS: font-size

Page 67: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Corpul de literă

proporțiaindică variația de lățime a setului de glyphs

proporționat vs. monospațiat (monospace)

Page 68: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Corpul de literă

familia de fontclasifică fonturile pe baza unor caracteristici

(e.g., modul de redare a glyph-urilor)

proprietate CSS: font-family

Page 69: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Corpul de literă

familia de fontinclude fontul de bază + variants (italic, bold, bold italic)

Page 70: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

serif

sans-serif

cursive

fantasy

monospace

Page 71: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Corpul de literă

fonturi „sigure” pentru Webdisponibile pe orice sistem

Page 72: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Corpul de literă

utilizarea/încărcarea de la distanțăa unor (colecții de) fonturi

proprietatea @font-face definită de CSS – nivelul 3

CSS Fonts Module Level 3 (W3C Candidate Recommendation, 2013) – www.w3.org/TR/css3-fonts/

Page 73: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Corpul de literă

WOFF (Web Open Font Format)include formatele TrueType, OpenType, Open Font Format

recomandare W3C (2012)

www.w3.org/TR/WOFF/

Page 74: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Adobe Edge Web Fonts – https://edgewebfonts.adobe.com/

Page 75: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Google Web fonts – www.google.com/fonts/

Page 76: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

„Culoarea” tipograficăindică densitatea texturii conținutului unei pagini

“It refers only to the darkness or blacknessof the letterform in mass.”

Robert Bringhurst, The Elements of Typographic Style

a se vizita și http://typographica.org/

Page 77: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Măsuradefinește lungimea unei linii de text

element-cheie al ușurinței parcurgerii conținutului

Page 78: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Măsura

valori recomandate: 45—75 caractere (30—50 em)

poate fi dificil de stabilit pentru layout-uri lichide

Page 79: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

discuție

Page 80: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Leading (sau line-spacing)spațiul vertical dintre 2 linii de text

uzual, titlurile (headings) nu necesită leading

Page 81: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Leading (sau line-spacing)spațiul vertical dintre 2 linii de text

fonturile masive vor avea nevoie de leading mai mare

fonturile sans-serif necesitămai mult leading decât cele serif

lățimea mai mare a liniei conduce la creșterea leading-ului

Page 82: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php

Page 83: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

htt

p:/

/ww

w.b

on

kers

wo

rld

.net

/bes

t-so

cial

-net

wo

rk-e

ver/

(în loc de) pauză

Page 84: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Cum organizăm informațiile?

Page 85: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:

liste de obiectesecvențe de acțiuni

liste de categorii (subiecte) de interesliste de instrumente/componente software

Page 86: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:

liste de obiecte

mesaje primite, fotografii partajate,recomandări de produse similare, obiective de interes,…

desemnate de substantive

Page 87: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:

(secvențe de) acțiuni

exemple tipice:browse, buy, register, sell, subscribe etc.

desemnate de verbe

Page 88: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:

liste de categorii (subiecte) de interes

exemplificări: știință, tehnologie, divertisment etc.

Page 89: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:

liste de instrumente/componente

e.g., calendar, editor de texte, manager de resurse,…

Page 90: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Necesitatea organizării informațiilor prezentate

în funcție de:natura și domeniul aplicației

cunoștințele de bază ale utilizatorilor-țintăcontextul interacțiunii

Page 91: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Prezentare liniară

uzual, se recurge la diverse criterii de sortare:alfabeticspațial

temporalconform semnificației

Page 92: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

http://www.html5rocks.com/webappfieldguide/

Page 93: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Prezentare bidimensională

se consideră 2 criterii/dimensiuni de interes

exemplu:locație geografică + dată calendaristică

Page 94: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Prezentare bidimensională

uzual, se adoptă o vizualizare bazată pe grilă (grid)

Page 95: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 96: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Prezentare ierarhică

structuri arborescente cu 1 sau mai multe niveluri

folosită pentru a ilustra anumite relații între obiecte:copil-părinte, grupare, sub-sumare,…

exemplu tipic: meniuri

Page 97: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 98: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Prezentare bazată pe context

spațialtemporal

conform profilului utilizatorului

exemplificări:hărți, chart-uri, timelines, informații recomandate,…

Page 99: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Maria Popova, A Visual Timeline of the Future Based on Famous Fiction (2012)

https://www.brainpickings.org/2012/11/21/giorgia-lupi-future-timeline/

Page 100: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Prezentări mixte (complexe)

pot utiliza combinații ale precedentelor

Page 101: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

discuție

Page 102: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Care sunt mijloacele de explorare?

Page 103: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Localizarea obiectelor din „proximitate”

signposts

titlul documentului Websigle

metode de redare a selecției…

Page 104: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Găsirea „drumului” care conduce utilizatorulcătre satisfacerea scopului

wayfinding

good signageenvironmental clues

maps

Page 105: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Navigabilitatea

găsirea „drumului” care conduce utilizatorulcătre satisfacerea scopului

minimizarea distanțeiergonomia interfeței

Page 106: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

deși numărul optim de pași (click-uri/tap-uri) este 3, utilizatorul realizează 9 acțiuni, fiind „pierdut în spațiu”

T. Tullis, B. Albert, Measuring the User Experience(2nd Edition), Morgan Kaufmann, 2013

Page 107: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Navigabilitatea

soluții tradiționale:meniuri

legături conexedivizarea conținutului

harta situluicăutare internă

Page 108: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Navigabilitatea

meniuri

orizontale – informații, apoi acțiuniverticale: plate, expandabile, bi-nivel

combinate

Page 109: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

navigabilitate via harta sitului (site map)

Page 110: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

left column navigation

Page 111: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

right column navigation

Page 112: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

three column navigation

Page 113: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

three columns with content first

Page 114: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

three column content

Page 115: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

layout pentru desktop vs. layout pentru dispozitiv mobil(Ronan Cremin & Luca Passani, 2012)

Page 116: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

navigabilitatea în contextul tabletelor(Ronan Cremin & Luca Passani, 2012)

Page 117: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

navigare multicriterială (faceted navigation/search)

Page 118: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

navigare socială +navigare bazată pe termeni de conținut (tag-uri)

http://www.hashtags.org/ http://tagdef.com/

Page 119: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

navigare cartografică + 3D

Page 120: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Navigabilitatea

semantici diferite ale legăturilor:navigare

preluare de date (download)procesare – e.g., recalcularea coșului de cumpărături

asociere de meta-date – exemplu: tagging

Page 121: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Regulă de bună practică:

existența unor elemente navigaționale– plasate consistent –

pentru conducerea utilizatoruluispre secțiunile importante ale sitului/aplicației Web

Page 122: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Regulă de bună practică:

secțiunile unei aplicații pot fi divizate în mini-aplicații/mini-situri independente,

accesabile din fereastra/pagina principală

context: aplicații destinate dispozitivelor mobile

Page 123: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Regulă de bună practică:

breadcrumbsindicarea drumului de la pagina principală

până la documentul curent

uzual, în cadrul unei ierarhii (taxonomii)

Page 124: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Page 125: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Ce înseamnă responsive Web design?

Page 126: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

realitate: multitudinea dimensiunilor + caracteristicilor ecranelor dispozitivelor oferind acces la Web

Page 127: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

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, rezoluție, densitate de pixeli,…)

Ethan Marcotte, 2010www.alistapart.com/articles/responsive-web-design/

detalii la https://responsivedesign.is/

Page 128: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

media queries

flexible image (+media, +font)

flexible/fluid grid

Jacob Surber, The Page Is Dead, SXSWi 2012www.slideshare.net/jacobsurber/page-death

Page 129: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

rezoluții de ecran diverserecurgerea la valori diferite pentru anumite proprietăți CSS via reguli @media

Media Queries (recomandare W3C, 2012)http://www.w3.org/TR/css3-mediaqueries/

Page 130: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

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

Page 131: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

a se studia codul-sursă al foii de stiluriprofs.info.uaic.ro/~busaco/teach/courses/cliw/web.css

Page 132: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

iPhone 5(320 px)

iPhone 6(667 px)

Android(240 px)

iPad 2(1024 px)

testarea designului Web cu instrumentul Responsinatorhttp://www.responsinator.com/

Page 133: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

responsive multimedia

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 pinguin"

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/

Page 134: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

exemplificări concrete:http://mediaqueri.es/

Page 135: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

responsive multimedia

soluții la nivel de client

recurgerea la biblioteci JavaScript:HiSRC – https://github.com/teleject/hisrc

Foresight.js – www.cdnconnect.com/docs/foresightjs

Page 136: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

responsive multimedia

soluții de optimizare la nivel de server

exemple:http://adaptive-images.com/

http://www.resrc.it/

https://developers.google.com/speed/pagespeed/module

Page 137: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

responsive fonts

fonturile externe nu ar trebui încărcate în contextuldispozitivelor având rezoluții reduse ale ecranului

detalii la http://webtypography.net/talks/rdo13/

Page 138: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

responsive fonts

fonturile externe nu ar trebui încărcate în contextuldispozitivelor având rezoluții reduse ale ecranului

soluții:încărcarea asincronă a fonturilor (Web font loading)

considerarea graficii vectoriale – SVG (Scalable Vector Graphics)

Page 139: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

layout-urile flexibile utilizează lățimi relative pentru coloane în vederea organizării conținutului

Page 140: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

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)

https://developer.mozilla.org/Web/CSS/length

Page 141: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

a se experimenta instrumentul CSS Rulerhttp://katydecorah.com/css-ruler/

Page 142: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Responsive Web design

alte strategii:

linearizarea conținutuluiîn contextul redării pe dispozitive mobile

Page 143: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

layout shifter

column drop

Luke Wroblewski, Multi-Device Layout Patterns (2012)http://www.lukew.com/ff/entry.asp?1514

Page 144: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Responsive Web design

alte strategii:

ascunderea (eliminarea) datelor care nu sunt esențiale

@media all and (min-width: 321px) and

(max-width: 480px) and (monochrome) {

.continut-neesential { display: none; }

}

Page 145: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

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" />

Page 146: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

gracefuldegradation

progressiveenhancement

responsiveWeb design

mobile first

responsive Web design în contextul designului WebAaron Gustafson – http://www.slideshare.net/AaronGustafson

Page 147: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

http://bradfrost.github.com/this-is-responsive/patterns.html

responsive Web patterns: șabloane de proiectare pentru layout, navigare, conținut grafic, formulare,…

Page 148: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Responsive Web design

situație:conținut tabelar responsiv

(responsive table)

posibile soluții:http://exisweb.net/responsive-table-plugins-and-patterns

Page 149: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Responsive Web design

situație:conținut responsiv trimis prin poșta electronică

(responsive e-mail)

șabloane de proiectare:http://responsiveemailpatterns.com/

Page 150: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Instrumente Web specifice – exemplificări:

Bootstrap – getbootstrap.com

Foundation – foundation.zurb.com

Fluid Grids – fluidgrids.com

Semantic UI – semantic-ui.com

Skeleton – www.getskeleton.com

UI Kit – getuikit.com

Web Starter Kit – developers.google.com/web/starter-kit/

Page 151: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Navigatorul Web oferă suport dezvoltatorilor în ceea ce privește designul responsiv?

Dacă da, în ce mod?

Cum am putea realiza un design responsivîn contextul interacțiunilor naturale

(e.g., prin voce, bazate pe gesturi, tactile,…)?

întrebări (pentru acasă)

Page 152: CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

episodul viitor: vizualizarea datelor


Recommended