Upload
sabin-buraga
View
405
Download
3
Embed Size (px)
Citation preview
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
“Computers are to design as microwaves are to cooking.”
Milton Glaser
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Există o „rețetă” de proiectare judicioasăa interfețelor Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
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
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.
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
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Design vizual
bazat pe modele vizuale
ce anume vom comunica utilizatorului?
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Metaforele sunt utilizate pentru a reda și/sau a crea asociații mentale
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
discuție
metafore și/sau idiomuri?
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
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
layout-ul generic al unei pagini Web
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>
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
layout fixlățime prestabilită
versus
layout lichidlățime variabilă
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/
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
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
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.
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,…
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Strategii vizând caroiajul(grid-ul)
secțiunea de aur3 coloanesimplitateabalansulunitatea
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
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
discuție
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
discuție
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aspect de interes:
alinierea conținutului în cadrul unui formular/tabel
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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)
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.)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Grupare – principiul Gelstalt
ochiul creează un întreg (gelstalt)din fragmentele existente
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Percepția elementelor de interfațăpe baza variabilelor vizuale
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Design vizual
cromatica
utilizarea a maxim 4 culori afişate simultan
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
„Roata” culorilor pentru Web
culori calde
culori reci
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
armonie complementară
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
armonie bazată pe 3 culori (triadă)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
armonie analogă accentuată
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)
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
http://colorhunt.co/
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Care sunt aspectele de interesprivind redarea conținutului textual?
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)
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
în contextul Web-ului, a se studia http://webtypography.net/
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
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
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
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)
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
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
serif
sans-serif
cursive
fantasy
monospace
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Corpul de literă
fonturi „sigure” pentru Webdisponibile pe orice sistem
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/
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Adobe Edge Web Fonts – https://edgewebfonts.adobe.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Google Web fonts – www.google.com/fonts/
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/
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
discuție
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php
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ă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Cum organizăm informațiile?
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
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
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
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.
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,…
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
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
…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
http://www.html5rocks.com/webappfieldguide/
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ă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Prezentare bidimensională
uzual, se adoptă o vizualizare bazată pe grilă (grid)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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,…
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Prezentări mixte (complexe)
pot utiliza combinații ale precedentelor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
discuție
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Care sunt mijloacele de explorare?
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…
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
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
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
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ă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Navigabilitatea
meniuri
orizontale – informații, apoi acțiuniverticale: plate, expandabile, bi-nivel
combinate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
navigabilitate via harta sitului (site map)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
left column navigation
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
right column navigation
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
three column navigation
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
three columns with content first
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
three column content
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
layout pentru desktop vs. layout pentru dispozitiv mobil(Ronan Cremin & Luca Passani, 2012)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
navigabilitatea în contextul tabletelor(Ronan Cremin & Luca Passani, 2012)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
navigare multicriterială (faceted navigation/search)
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
navigare cartografică + 3D
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
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
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
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce înseamnă responsive Web design?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
realitate: multitudinea dimensiunilor + caracteristicilor ecranelor dispozitivelor oferind acces la Web
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/
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
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/
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
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
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/
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
exemplificări concrete:http://mediaqueri.es/
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
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
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/
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)
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
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
a se experimenta instrumentul CSS Rulerhttp://katydecorah.com/css-ruler/
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
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
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; }
}
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" />
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
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,…
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
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/
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/
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ă)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
episodul viitor: vizualizarea datelor