Embed Size (px)
DESCRIPTION
Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Citation preview
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
design Web
de la design vizual la design Web responsiv
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Există o “rețetă” de proiectare judicioasăa interfețelor Web?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
“Attractive things work better.” (Donald Norman)
CSS Zen Garden – www.csszengarden.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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, controale specifice etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aranjament spațial (layout)
Asigurarea fluxului (rhythm, focus & color)
Organizarea informației (information architecture)
Asigurarea navigabilității
Modularitatea & flexibilitatea
Consistența
conform Dan Saffer (2006)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Design vizual
bazat pe modele vizuale
ce anume vom comunica utilizatorului?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Design vizual
reprezentările vizuale trebuie să fie ușor percepute & recunoscute
recognition vs. recall
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Design vizual
reprezentările vizuale trebuie să fie ușor percepute & recunoscute
recognition vs. recall
metafore & idiomuri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
concurs: metafore și/sau idiomuri
⋆ ⋆ ⋆ premii!?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Design vizual
un design bun implică alegerea echilibratăa relațiilor dintre elementele care creează conținutul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
layout-ul generic al unei pagini Web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
layout fixlățime prestabilită
versus
layout lichidlățime variabilă
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Instrumente Web specifice (exemplificări):
Bootstrap – getbootstrap.comFoundation – foundation.zurb.com
Fluid Grids – fluidgrids.comFrameless – framelessgrid.com
Skeleton – www.getskeleton.comThe Semantic Grid System – semantic.gs
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Layout-ul e facilitat de template-uri (șabloane vizuale)
specificarea aranjamentului & stilului vizualvia HTML + CSS + conținuturi grafice
exemplificare: WordPress templateshttp://wordpress.org/themes/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Recurgerea la sisteme de aplicare a șabloanelorde prezentare – Web template systems/engines
oferite implicit de unele servere de aplicații oriframework-uri Web sau disponibile ca extensii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Layout-ul poate fi stabilit via grid
des folosit în tipografie
www.thegridsystem.org
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Reguli privind layout-ulsecțiunea de aurcele 3 coloanesimplitateabalansulunitatea
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
a se studia și articolele oferite de A List Apartwww.alistapart.com/topics/design/layout/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Greșeli comune: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
ww
w.p
url
.org
/ne
t/b
usa
co
Balansulasigurarea echilibrului vizual pe orizontală/verticală
simetrie orizontală, bilaterală sau radială
simetrie versus asimetrie
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Unitateamodul în care elemente diferite interacționează
în cadrul aceluiași document (aceleași pagini Web)
uzual, se realizează prin grupare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Criterii de grupare
spațială
cromatică
via elemente (grafice) de separaree.g., linii orizontale, aliniere diferită etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Grupare – principiul Gelstalt
ochiul creează un întreg (gelstalt)din fragmentele existente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Fluxul (flow) vizual
poate fi realizat și prin intermediul contrastuluiasigurarea focalizării atenției
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Information Architecture
h5ai – a beautified Apache index based on HTML5
http://larsjung.de/h5ai/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri de contrast pe baza variabilelor vizuale
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cromatica
culoarea considerată cod vizual,indicând categoria (tipul) de informații
redate utilizatorului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
Cromatica
utilizarea a maxim 4 culori afişate simultan
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cromatica
utilizarea a maxim 4 culori afișate simultan
evitarea supraîncărcării cognitive
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“Roata” culorilor pentru Web
culori calde
culori reci
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
armonie complementară
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
armonie bazată pe 3 culori (triadă)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
armonie analogă accentuată
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cromatica
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
ww
w.p
url
.org
/ne
t/b
usa
coChina fericirenaș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
ww
w.p
url
.org
/ne
t/b
usa
co
Instrumente pentru generarea de palete cromatice(exemplificări)
Color Scheme Designer – colorschemedesigner.comcolr – www.colr.org
Colrd – colrd.comColor 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
ww
w.p
url
.org
/ne
t/b
usa
co
Care sunt aspectele de interesprivind redarea conținutului textual?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Typography
componentă vitală a procesului de comunicare
nu înseamnă “picking a cool font”
typos (impresie) + grapheia (scriere)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
în contextul Web-ului, a se studia http://webtypography.net/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
Corpul de literă
familia de fontinclude fontul de bază + variants (italic, bold, bold italic)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
serif
sans-serif
cursive
fantasy
monospace
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Corpul de literă
fonturi “sigure” pentru Webdisponibile pe orice sistem
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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, oct. 2013) – www.w3.org/TR/css3-fonts/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Corpul de literă
WOFF (Web Open Font Format)include formatele TrueType, OpenType, Open Font Format
recomandare W3C (decembrie 2012)
www.w3.org/TR/WOFF/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Adobe Edge Web Fontshttp://html.adobe.com/edge/webfonts/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Google Web fonts – www.google.com/fonts/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“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
ww
w.p
url
.org
/ne
t/b
usa
co
Măsuradefinește lungimea unei linii de text
element-cheie al ușurinței parcurgerii conținutului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Leading (sau line-spacing)spațiul vertical dintre 2 linii de text
uzual, titlurile (headings) nu necesită leading
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum organizăm informațiile?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:
liste de obiecte
mesaje primite în inbox (e-mail-uri)recomandări de produse similare
…
desemnate de substantive
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:
(secvențe de) acțiuni
e.g., browse, buy, register, sell, subscribe,…
desemnate de verbe
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:
liste de categorii (subiecte) de interes
exemple: știință, tehnologie, divertisment etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
Necesitatea organizării informațiilor prezentate
în funcție de:natura & domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintăcontextul interacțiunii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prezentare liniară
uzual, se recurge la diverse criterii de sortare:alfabeticspațial
temporalconform semnificației
…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prezentare bidimensională
se consideră 2 criterii/dimensiuni de interes
exemplu:locație geografică + dată calendaristică
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prezentare bidimensională
uzual, se adoptă o vizualizare bazată pe grilă (grid)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
Prezentare bazata pe context
spațialtemporal
conform profilului utilizatorului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prezentare bazata pe context
spațialtemporal
conform profilului utilizatorului
exemplificări:hărți, chart-uri, timelines, informații recomandate,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prezentari mixte (complexe)
pot utiliza combinații ale precedentelor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspect de interes:
alinierea conținutului în cadrul unui formular/tabel
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Care sunt mijloacele de explorare?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Localizarea obiectelor din “proximitate”
signposts
titlul documentului Websigle
metode de redare a selecției…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Găsirea “drumului” care conduce utilizatorulcătre satisfacerea scopului
wayfinding
good signageenvironmental clues
maps
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspect de interes
minimizarea distanțeiergonomia interfeței
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
deși numărul optim de pași (click-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
ww
w.p
url
.org
/ne
t/b
usa
co
Navigabilitatea
meniuri
orizontale – informații, apoi acțiuniverticale: plate, expandabile, bi-nivel
combinate
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Navigabilitatea
alte soluții
legături conexe – e.g., navigare contextualădivizarea (paginarea) conținutului
cele mai recente pagini vizitate
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
navigabilitate via harta sitului (site map)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
căutare internă (site search engine)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
left column navigation
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
right column navigation
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
three column navigation
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
three columns with content first
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
three column content
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
layout pentru desktop vs. layout pentru dispozitiv mobil(Ronan Cremin & Luca Passani, 2012)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
navigabilitatea în contextul tabletelor(Ronan Cremin & Luca Passani, 2012)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Navigabilitatea
navigare socială+
navigare bazată pe termeni de conținut (tag-uri)
http://www.hashtags.org/
http://tagdef.com/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.360cities.net
navigare cartografică + 3D
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Navigabilitatea
semantici diferite ale legăturilor:navigaredownloadprocesare
asociere de meta-date – exemplu: tagging
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce înseamnă responsive Web design?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Responsive Web design(Ethan Marcotte, 2010)
utilizarea unei suite de tehnologii Web ce permite adaptarea designului la contextul de redare
(e.g., orientare, rezoluție, densitate de pixeli,…)
www.alistapart.com/articles/responsive-web-design/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
<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
ww
w.p
url
.org
/ne
t/b
usa
co
imagini & alte resurse grafice – e.g., video
adaptarea mărimii și/sau folosirea fonturilor & graficii vectoriale (SVG – Scalable Vector Graphics)
studii de caz: http://mediaqueri.es/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
responsive images
client – recurgerea la biblioteci JavaScript precumHiSRC – 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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
responsive Web fonts
fonturile externe nu trebuie încărcate în contextul dispozitivelor având rezoluții reduse ale ecranului
încărcarea asincronă (Web font loading) a fonturilor
http://webtypography.net/talks/rdo13/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
layout-urile flexibile utilizează lățimi relative pentru coloane în vederea organizării conținutului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Responsive Web design
alte strategii:
adoptarea unităților de măsură relative pentru valorile unor proprietăți CSS (% em rem)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Responsive Web design
alte strategii:
linearizarea conținutuluiîn contextul redării pe dispozitive mobile
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
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
ww
w.p
url
.org
/ne
t/b
usa
co
episodul viitor: surpriză ♚
![Managementul Siturilor Contaminate[1]](https://img.dokumen.tips/doc/110x75/55cf8caa5503462b138eadd6/managementul-siturilor-contaminate1.jpg)
