UNIVERSITATEA AUREL VLAICU DIN ARAD FACULTATEA DE TIINE EXACTE DOMENIUL DE LICEN: INFORMATIC PROGRAMUL DE STUDIU: INFORMATIC FORMA

DE NVMNT: ID

LUCRARE DE LICEN

NDRUMTOR TIINIFIC Prof. univ. dr. Ioan Dziac

ABSOLVENT ucan M. Marius

ARAD 2011

UNIVERSITATEA AUREL VLAICU DIN ARAD FACULTATEA DE TIINE EXACTE DOMENIUL DE LICEN: INFORMATIC PROGRAMUL DE STUDIU: INFORMATIC FORMA DE NVMNT: ID

PRINCIPII DE DESIGN ALE INTERFEELOR PENTRU SITE-UL UNEI UNIVERSITI Aplicaie practic: www.uav.ro

NDRUMTOR TIINIFIC Prof. univ. dr. Ioan Dziac ABSOLVENT ucan M. Marius

ARAD 2011

UNIVERSITATEA AUREL VLAICU DIN ARAD APROBAT FACULTATEA DE TIINE EXACTE DOMENIUL / PROGRAMUL DE STUDIU Nr. __________ din ___________ VIZAT ndrumtor tiinific DATE PERSONALE ALE CANDIDATULUI 1. Date privind identitatea persoanei Numele: ucan Numele anterior: ____________________ Prenumele: Marius 2. Sexul: M (M / F) 3. Data i locul naterii: Ziua / luna / anul: / .. / Locul (localitate, jude): 4. Prenumele prinilor: Tata: . Mama: . 5. Domiciliul permanent: (str., nr., localitate, jude, cod potal, telefon, email): . 6. Sunt absolvent() promoia: iulie / 2011 7. Forma de nvmnt pe care am absolvit-o este: ID, fr tax (cu frecven, cu frecven redus, ID), cu tax/fr tax DECAN

8. Locul de munc (dac e cazul): _________________________________________ 9. Solicit nscrierea la examenul de licen (licen, diplom, disertaie): Sesiunea iulie, anul 2011 10. Lucrarea de licen (licen, diplom, disertaie) pe care o susin are urmtorul titlu: PRINCIPII DE DESIGN ALE INTERFEELOR PENTRU SITE-UL UNEI UNIVERSITI. Aplicaie practic: www.uav.ro 11. ndrumtor tiinific: Prof. univ. dr. Ioan Dziac

12. Menionez c susin examenul de licen (pentru prima oar, a doua oar
dup caz) pentru prima oar i declar pe propria-mi rspundere c am luat la cunotin de prevederile art. 143 din Legea 1/2011. Declar c prezenta lucrare nu este realizat prin mijloace frauduloase, fiind contient de faptul c, dac se dovedete contrariul, diploma obinut prin fraud mi poate fi anulat, conform art. 146 din Legea 1/2011.

SEMNTURA

REFERAT
PRIVIND LUCRAREA DE LICEN A ABSOLVENTULUI MARIUS UCAN DOMENIUL: INFORMATIC PROGRAMUL DE STUDIU: INFORMATIC PROMOIA 2011 1. Titlul lucrrii : Principii de design ale interfeelor pentru site-ul unei universiti. Aplicaie practic: www.uav.ro 2. Structura lucrrii : Lucrarea este foarte bine structurat, conine o introducere, trei capitole: Principii de design; Studii comparative; Site-ul www.uav.ro, concluzii, bibliografie i un index. 3. Aprecieri asupra coninutului lucrrii de licen, organizare logic, mod de abordare, complexitate, actualitate, deficiene: Aplicaia www.uav.ro reprezint un site bine realizat la nivel vizual, cu o interfa potrivit cu coninutul academic specific. Interfaa este accesibil i dinamic, facilitnd schimbrile ulterioare la nivel de coninut i funcionaliti. Autorii aplicaiei www.uav.ro sunt Marius ucan i Mihai ucan, ambii fiind efi de promoie la specializarea Informatic promoia 2011. Autorul Marius ucan s-a ocupat preponderent de partea de design. n realizarea interfeei au fost parcurse urmtoarele etape: planificare, efectuarea designului, colorarea acestuia, popularea n final, implementarea interfeei la nivel tehnic, utiliznd HTML, CSS i alte tehnologii web. Autorul Marius ucan descrie, n partea teoretic a lucrrii, demersul pentru realizarea aplicaiei practice din punct de vedere a design-ului, a graficii .i nu numai. Ca etap premergtoare proiectrii aplicaiei, autorii au studiat mai multe websiteuri ale unor universiti renumite din lume i din Romnia: Stanford University; Carnegie Mellon University, University of Oxford, MIT, Rice University, Princeton; Universitatea Politehnic din Bucureti, Universitatea Alexandru Ioan Cuza din Iai etc. Studiul a avut ca scop cunoaterea site-urilor academice: ce tipuri de layout-uri se folosesc, cum sunt organizate i structurate paginile, i informaiile etc. Analiza s-a fcut din punct de vedere vizual i tehnic, prin prisma coninutului i a structurii. n final a rezultat i o lucrare teoretic coerent din punct de vedere logic, dar i o aplicaie profesional, care a adus un spor considerabil de imagine pentru Universitatea Aurel Vlaicu, ceea ce a determinat senatul universitar s acorde autorilor cte o diplom de excelen prin hotrrea din 29 septembrie 2010. Nici lucrarea i nici aplicaia practic nu au cusururi, totui autorii, fiind nite perfecioniti, continu s-i aduc optimizri aplicaiei i n prezent.

4. Aprecieri asupra lucrrii (se va meniona: numrul titlurilor bibliografice consultate, frecvena notelor de subsol, calitatea i actualitatea surselor consultate; modul n care absolventul a prelucrat informaiile din sursele bibliografice, contribuii originale): Lucrarea este foarte bine documentat, conine 67 de titluri bibliografice, de cea mai mare actualitate, printre acestea fiind i un titlu de autor. Toat partea teoretic este abordat prin prisma analitic, sintetic i critic a autorului. Aplicaia practic este original n totalitate, excelent realizat, pagina web www.uav.ro fiind funcional i activ. Consider c www.uav.ro este la ora actual unul din cele mai profesionale websiteuri universitare din Romnia. 5. Concluzii (valoarea lucrrii elaborate de absolvent, relevana studiului ntreprins, competenele absolventului, consecvena i seriozitatea de care a dat dovad absolventul pe parcursul documentrii i elaborrii lucrrii): Lucrarea are att o valoare teoretic, ct i practic, care poate fi valorificat de proiectanii de website-uri instituionale. Absolventul dovedete nu numai reale caliti de proiectant profesionist de interfee web, ci i un deosebit talent artistic. Munca depus a fost perseverent, consecvent i eficient. 6. Redactarea lucrrii respect normele de redactare. A fost respectat metodologia n vigoare, n plus, se poate observa i un stil de exprimare deosebit de ngrijit i profesional. 7. Nu exist suspiciuni de realizare prin fraud a prezentei lucrri. Realizarea site-ului Universitii Aurel Vlaicu din Arad se bazeaz pe muli ani de studii pe cont propriu i de munc n grafic i design. Acest proiect are la baz un motor de site la care s-a nceput lucrul nc din anii de liceu i este realizat integral de Marius i Mihai ucan. Acesta este un citat din concluziile lucrrii lui Marius ucan i exprim un adevr frumos i o pild de urmat. De menionat c Mihai ucan este fratele geamn a lui Marius ucan, care s-a ocupat de partea de programare a aplicaiei. 8. Consider c lucrarea ndeplinete condiiile pentru susinere n sesiunea de Examene de licen din iulie 2011. Propun comisiei ca absolventul Marius ucan, autorul acestei lucrri i coautorul aplicaiei www.uav.ro, s fie notat cu 10 (zece) la examenul de licen.

Arad, Data 19 mai 2011

ndrumtor tiinific Prof. univ. dr. Ioan Dziac

Cuprins
Introducere ......................................................................................... 9 1 Principii de design ......................................................................... 10
1.1 Design ....................................................................................................... 11
1.1.1 1.1.2 1.1.3 1.1.4 Linie ................................................................................................................... 11 Form................................................................................................................. 12 Layout ................................................................................................................ 13 Compoziie ......................................................................................................... 17

1.2 Culori ......................................................................................................... 19

1.2.1 Optic ................................................................................................................ 19 1.2.2 Temperatura culorilor ........................................................................................ 20 1.2.3 Modele de culori................................................................................................ 21 1.2.4 Spaii de culori ................................................................................................... 24 1.2.5 Profile de culori.................................................................................................. 24 1.2.6 Corecia gamma ................................................................................................. 25 1.2.7 Conversia imaginilor color n alb-negru ............................................................. 26 1.2.8 Roata de culori ................................................................................................... 27 1.2.9 Scheme de culori ............................................................................................... 27 1.2.10 Degradeuri ......................................................................................................... 29 1.2.11 Semnificaii ........................................................................................................ 30

1.3 Elemente de tipografie ............................................................................. 31

1.3.1 Margini............................................................................................................... 31 1.3.2 Coloane .............................................................................................................. 32 1.3.3 Paragrafe ............................................................................................................ 32 1.3.4 Interlinie ............................................................................................................ 33 1.3.5 Alinierea textului ............................................................................................... 34 1.3.6 Interletr ............................................................................................................ 34 1.3.7 Crenaj................................................................................................................. 35 1.3.8 Fa tipografic .................................................................................................. 35 1.3.9 Fonturi ............................................................................................................... 37 1.3.10 Lorem ipsum ...................................................................................................... 37 1.3.11 Tehnoredactare pentru web .............................................................................. 38

1.4 Implementarea tehnic............................................................................. 39

1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 Editarea parametric a interfeelor ................................................................... 39 HTML ................................................................................................................. 40 Selectori CSS ...................................................................................................... 42 At-rules n CSS.................................................................................................... 44 Specificitatea regulilor CSS ................................................................................ 44 Limitri n implementarea interfeelor .............................................................. 45 Proprieti CSS ................................................................................................... 45 Tipuri de interfee .............................................................................................. 47

1.5 Marketing .................................................................................................. 47

2 Studii comparative ........................................................................ 50

2.1 Site-uri de universiti cu renume internaional ...................................... 51
2.1.1 Stanford University ............................................................................................ 51 2.1.2 Carnegie Mellon University ............................................................................... 54 2.1.3 University of Oxford........................................................................................... 57

2.2 Site-uri de universiti romneti ............................................................. 60

2.2.1 Universitatea Politehnic din Bucureti ............................................................. 60 2.2.2 Universitatea de Vest din Timioara .................................................................. 64 2.2.3 Universitatea Alexandru Ioan Cuza din Iai .................................................... 68

2.3 Diferene i asemnri ntre site-urile strine i romneti ..................... 71

3 Site-ul www.uav.ro ........................................................................ 74

3.1 Design ....................................................................................................... 75 3.2 Structur ................................................................................................... 79 3.3 Implementare tehnic .............................................................................. 80 3.4 Modul de administrare ............................................................................. 82

Concluzii ........................................................................................... 85 Bibliografie ....................................................................................... 86 Index ................................................................................................. 89

Introducere

Introducere
n aceast lucrare de licen voi prezenta detaliat demersul realizri unei interfee de site, despre ceea ce trebuie cunoscut i ceea ce trebuie luat n considerare cnd se face o interfa de site. Voi trece n revist principiile de design pentru interfee de web siteuri: layout, culori, tipografie i limitele impuse de tehnologiile web i modul de implementare tehnic a design-urilor. Pe parcursul lucrrii voi pune accent pe importana accesibilitii site-urilor. Voi defini caracteristicile importante la nivel vizual i tehnic pentru diferite tipuri de site-uri, clasificate dup scop. Comportamentul i ateptrile utilizatorilor care navigheaz pe Internet sunt corelate cu tipurile de site-uri. Voi vorbi despre cum trebuie s fie redactate textele pe web deoarece un web site nu se rezum doar la grafic sau design; orice vizitator pune accent pe calitatea coninutului. Calitatea unui web site se poate determina pe baza aspectelor vizuale, tehnice (programare) i coninut. Voi face un studiu comparativ pe mai multe web site-uri academice strine i romneti. Analiza se va efectua la nivel tehnic, vizual i de coninut cu scopul de a extrage concluzii n vederea realizrii proiectului de licen: site-ul Universitii Aurel Vlaicu din Arad. Dup aceea voi face o prezentare analiznd aceleai aspecte ale web site-ului academic realizat de Marius ucan i Mihai ucan. Pentru a realiza o interfa de web site sunt necesare cunotine din diferite ramuri desprinse din artele vizuale i tehnologie. Prin aprofundarea domeniilor precum tipografie, design, studiul culorilor i al formelor, realizarea unei interfee de site este considerabil facilitat i rezultatele sunt net superioare, exprimate prin satisfacia vizitatorilor site-ului i a clientului. Pentru a transmite mesajul dorit utilizatorilor pe Internet, imaginea site-ului trebuie s nglobeze elemente vizuale specifice acestuia: culorile, spaierea i proporiile dintre diferitele elemente ale designului, aezarea i alinierea acestora, principii din tipografie, lizibilitate, etc. O interfa nu este realizat ca o pictur sau un design de obiect, ci este realizat pe baza cunotinelor tehnice. Designerul este nevoit s aib n prealabil un grad de cunoatere destul de nalt al unor tehnologii precum HTML, CSS, JavaScript sau Flash. Aceste tehnologii sunt folosite ca medii de exprimare artistic pe Internet. Orice interfa de web site este la nceput o imagine static care este transformat ulterior ntr-un web site interactiv de prezentare a unui produs, companii, instituii sau orice alt entitate, fizic sau teoretic. Interactivitatea web site-urilor se bazeaz pe aceste tehnologii, iar limitele impuse la nivel de implementare trebuie luate n considerare n conceperea unei interfee de web site. Mai mult dect att, este important de luat n considerare i grupul int de utilizatori, cruia i se adreseaz site-ul, ce scop are. n acest mod se poate determina mai uor cum trebuie s arate designul, ce funcionaliti trebuie s fie implementate i ce grad de accesibilitate este necesar. Prin efectuarea de studii de marketing (studierea site-urilor competitorilor, definirea unui grup int de consumatori, etc), o interfa de web site poate fi considerabil schimbat, astfel nct s corespund necesitilor clienilor. Modul de interaciune al utilizatorilor prin diferitele dispozitive de navigat pe Internet, conteaz foarte mult n designul de interfa i n conceperea modului de navigare a site-ului. Uzuale sunt mouse-ul i tastatura pentru a naviga pe Internet, ns tehnologiile ncep s se ndrepte spre interaciunea prin senzori tactili, comenzi vocale i altele.
9

Principii de design

1 Principii de design
n general, fiecare web site trebuie s fie unic, s aib elemente distinctive la nivel de design, coninut sau chiar prin funcionalitile oferite utilizatorilor. Designerul are datoria de a realiza o interfa unic prin culorile, fonturi i layout-ul folosit. Un site bine realizat la nivel vizual are o interfa adecvat cu coninutul prezentat, cu specificul acestuia i este conceput astfel nct s transmit mesajul dorit de productor sau client. Mai mult dect att, o interfa trebuie s fie accesibil i dinamic pentru a facilita schimbrile ulterioare la nivel de coninut i funcionaliti. n realizarea unei interfee de web site se pot observa cteva etape: planificare, efectuarea designului, colorarea acestuia, popularea cu coninut i n final, implementarea interfeei la nivel tehnic, utiliznd HTML i CSS sau alte tehnologii web. Aceste etape se bazeaz pe mai multe principii de design la nivel de layout, culori, tipografie, implementare i accesibilitate. Despre acestea voi vorbi n acest capitol. n etapa de planificare trebuie stabilite funcionalitile oferite utilizatorilor (cutare, schimbare de limb, etc), tipul de web site (personal, instituional, de prezentare produs, etc), preferine vizuale, structura site-ului la lansare, ce informaii apar pe prima pagin, tehnologiile pentru implementarea site-ului, etc. Toate aceste informaii sunt foarte importante n realizarea interfeei deoarece influeneaz foarte mult i n mod direct forma final. Un site bogat, cu o structur de meniuri mare, informaii multe, nu poate fi, n principiu, foarte intens la nivel vizual, cu design bogat i animat, deoarece, n acest mod, ar fi subminat scopul site-ului, fie prin limitarea informaiilor afiate n favoarea graficii i a designului, fie prin distragerea ateniei de la coninut, reducerea importanei sale. Astfel, n aceste cazuri, o interfa trebuie s fie mai simpl, mai concis, pentru a pune n valoare coninutul i a-l expune vizitatorului ntr-un mod plcut. ns, cnd este vorba de un site de prezentare de produs, bineneles, gradul de libertate la nivel vizual este mult mai mare, iar informaiile se afl n plan secund. Cnd etapa de planificare este suficient de concludent, urmeaz realizarea propriu-zis a interfeei. Aceast etap const n definirea structurii vizuale, a layout-ului, unde se gsesc elementele funcionale din site n design, ce elemente de design decorativ sunt folosite i se stabilesc proporiile ntre acestea, etc. Dup care, elementele sunt colorate. Culorile sunt eseniale pentru a transmite un mesaj artistic utilizatorilor siteului. Adesea se folosesc diferite efecte vizuale n design pentru nfrumuseare, cum ar fi degradeuri, reflexii i umbre. Prin urmarea a ctorva principii de design, o interfa poate fi mai profesional: alinierea elementelor, spaii generoase ntre ele, contrast ntre texte i elementele vizuale, etc. Principii de marketing, eventual coroborate cu studii de marketing i de impact pe grupul de utilizatori int, sunt foarte importante n vederea realizrii unei interfee n concordan cu cerinele potenialilor clieni, chiar din etapa de planificare. Astfel, dac acestea sunt luate n considerare, definirea layout-ului i a culorilor devine mult mai facil deoarece se cunosc ateptrile vizitatorilor. Dup ce designul este complet realizat, se populeaz cu coninut textual, pentru a se exemplifica cum va arta la final site-ul: meniuri, articole, link-uri, etc. Dimensiunile textelor, fonturile utilizate i alinierea trebuie s subscrie unor cunotine de tipografie,
10

Principii de design mcar minimale. Cunoaterea ctorva lucruri de baz din domeniul tipografiei ajut la augmentarea considerabil a calitii interfeei unui web site. Lizibilitatea i accesibilitatea informaiilor sunt direct influenate de aceste aspecte. La final, n mod obinuit, o interfa de site este o serie de imagini efectuate ntr-un program de grafic, de design, cum ar fi Corel Draw, Adobe Photoshop, etc. Pentru a avea un site propriu-zis, aceste imagini urmeaz s fie tiate (tranate) n bucele, n diferite fiiere, n funcie de design, de elementele din interfa i n funcie de tehnologia folosit pentru a implementa interfaa. Implementarea unei interfee const n programarea HTML i CSS. Toate proprietile definite textelor n programul de design trebuie corelate cu proprieti CSS pentru a obine un maximum de fidelitate cu designul iniial i trebuie evitat cu orice pre rasterizarea, transformarea, textelor din design n imagini, pentru a obine acelai aspect vizual, deoarece gradul de accesibilitate scade drastic.

1.1 Design
Elementul principal al oricrei arte vizuale este punctul. Ca i n pictur, acest prim element de baz este la fel de important i n designul de interfee de site-uri web. Punctul este elementul esenial pentru a obine linii care se obin prin unirea a dou puncte. Prin trasarea unei linii dou puncFig. 1 te diferite sunt conectate i au rol de capete. Omul are tendina la nivel perceptual de a subnelege liniile, fr ca acestea s fie trasate. De exemplu n imaginea alturat, utiliznd doar trei puncte, fr nici o linie, am construit o form geometric: un triunghi. La nivel matematic, orice linie poate fi considerat fie o mulime discret de puncte cu densitate variabil, fie o funcie continu , unde a i b definesc limitele intervalului.

1.1.1 Linie
La nivel vizual, linia are un rol artistic important. Ea are potenialul de a ghida privirea ntr-o lucrare artistic, la nivel compoziional, spre subiectul imaginii sau poate contribui n transmiterea unor mesaje artistice. Liniile pot fi frnte, cu unghiuri ascuite, obtuze, continue, discontinue, curbate, etc; pot fi groase sau subiri. Liniile sunt utilizate pentru a desena contururi de elemente vizuale, forme, n design sau pentru a delimita spaiu, cum ar diferite seciuni din interfaa site-ului sau a unei pagini de revist, ziar, etc. n funcie de orientare, liniile au conotaii diferite pentru privitori. Linii orientate vertical exprim aspiraia la ceva mai mult, nlime, putere, ascensiune, verticalitate, dreptate. Liniile orientate pe orizontal sunt asociate cu repaosul, cu linite, relaxare, calm, siguran. Se poate observa cu uurin c n arta vizual tot mai mult este utilizat raportul de 16/9 al imaginilor i c este agreat de majoritatea oamenilor. Rar este utilizat un raport n care nlimea s fie mai mare dect limea, deoarece acesta exprim tensiune.
11

Principii de design Liniile n diagonal exprim micare, activitate, vibraie i tensiune. n cultura european, occidental, liniile orientate n diagonal de la stnga la dreapta, exprim cderea, ns n orient, unde se citete de la dreapta la stnga reprezint opusul: cretere. n picturi, fotografii, liniile diagonale pot exprima i reda adncimea perspectivei. Astfel de linii exprim i instabilitate, datorit ambiguitii: nici verticale, nici orizontale. [1]

Fig. 2

Linii diagonale

Fig. 3

Linii curbe

Liniile curbe, ondulate, pot aminti privitorului de forme din natur, de formele corpului omenesc. Acestea de obicei exprim tandree, linite, plcere, delicatee, uurin, etc i nu permit dihotomii, contraste, fiindc exist ntotdeauna un interval de parcurs de la un capt la altul, din aproape n aproape, fr salturi. Liniile frnte sunt antipodul n acest sens, deoarece exprim lucruri concise, precise, clare, n mod abrupt i direct. Unghiurile ascuite contribuie la o posibil percepie de duritate exprimat n lucrarea vizual.

1.1.2 Form
Pentru a realiza forme sunt necesare fie linii curbe, fie linii frnte. Dup aspect, formele pot fi geometrice sau organice. O form organic se obine cu linii curbe, iar o form geometric din linii frnte. Cele mai utilizate forme n design de interfee de site-uri sunt formele primitive studiate n geometria euclidian: dreptunghiuri, elipse i triunghiuri.

Fig. 4

Forme geometrice

Fiecare contur al unei forme poate fi definit prin cteva puncte (de coordonate x, y) i liniile care le conecteaz. O dat definit conturul, acesta poate fi umplut cu o culoare i atunci forma ocup un spaiu n plan bidimensional (spaiu pozitiv la nivel compoziional). O form umplut este un obiect n spaiul plan cu mai multe proprieti: coordonate, arie, lime i lungime, etc. Modul de recunoatere vizual al procesului de gndire a fost observat de ctre studenii i profesorii de psihologie de la coala Berlinez n anii 1920. n linii mari, percepia oricrui design sau pictur a fost definit prin teoria Gestalt - esena sau forma unei entiti complete. Potrivit acestei teorii, principiul operaional de baz al creierului uman este holistic, paralel i are tendina de a fi auto-organizatoric [2]. Prin aceast teorie a psihologiei formelor se pot identifica mai multe moduri n care creierul uman grupeaz i interpreteaz elementele ntr-un design, sau punctele dintr-un plan. Teoria spune c oamenii percep mai nti ntregul prin a distinge obiectele (spaiul pozitiv) de fond (spaiu negativ), apoi sunt contientizate elementele constituente, prile din imagine. Legile principale n gestaltilism sunt: continuitate, proximitate, completare i similaritate. [3]

12

Principii de design Continuitate. Punctele formeaz un contur, o form sau o linie. Cercul i ptratul sunt obinute printr-o serie de puncte care putea fi mai puin dens (fig. 6). Proximitate. Punctele sau elementele vizuale sunt grupate dup distana relativ ntre acestea. Elementele vizuale (cercurile i ptratele de diferite proporii) formeaz patru ptrate n imagine, ns dac privim Fig. 5 per ansamblu, distana dintre ele determin nc un Continuitate ptrat mare (fig. 5). Completare. Forma este completat cu elementele sau partea lips deoarece o form nchis este mai uor de perceput dect una deschis. n exemplul de mai sus, se pot observa un cerc i un ptrat (spaiu pozitiv). Ambele forme sunt incomplete, decupate. Dup o privire mai atent, se poate percepe nc un ptrat suprapus (spaiu negativ) care creeaz impresia de decupare, dar acesta se confund cu fundalul (fig. 7). a) b) c)

Fig. 6

Proximitate

Fig. 7

Completare

Similaritate

Fig. 8

Similaritate. Elementele vizuale sunt grupate dup form, culoare sau proporii. n figura a) de mai sus, elementele pot fi grupate n funcie de dimensiuni, iar n b) pe lng diferitele proporii, avem i diferite forme: cercuri i ptrate. n c) avem n plus culorile ca al treilea criteriu pentru a regrupa elementele. [4] Aceste principii observate prin psihologia formelor sunt aplicate n mod involuntar i constant att de privitori, ct i de designeri sau artiti n artele vizuale. n cele ce urmeaz voi reliefa cum o interfa de site este de obicei structurat la nivel vizual. Se va putea observa facil cum legile mai sus enumerate sunt exprimate.

1.1.3 Layout
n designul de interfee, ntreaga structur vizual, layout-ul, se bazeaz pe definirea de forme geometrice. Fiecare element din designul interfeelor de site-uri, poate fi exprimat i este reductibil la dreptunghiuri de diferite dimensiuni. Potrivit teoriei Gestalt, se poate spune c adeseori un design se rezum doar la dreptunghiuri colorate i umplute n diferite moduri. Contururile acestora sunt mai mult sau mai puin scoase n eviden i eventual au colurile rotunjite sau teite. Sunt mai rar folosite elipse sau forme organice i linii curbe n design-uri, deoarece implic mai mult efort n unele cazuri la nivel tehnic i nici nu se potrivesc cu fiecare tip de site.

13

Principii de design Layout-ul unui design de web site este definit de succesiunea i de poziionarea a elementelor din interfa, avnd diferite proporii ntre ele i spaii stabilite de distana dintre acestea. n vederea conceperii unui layout, un designer trebuie s stabileasc liniile principale ale interfeei. Orice web site este navigat fie de sus n jos, fie (foarte rar) de la stnga la dreapta, adic pe vertical sau pe orizontal. n acest sens, trebuie stabilite principalele linii verticale i orizontale n layout. Aceste linii nu vor fi ntotdeauna vizibile n designul final, ci sunt linii orientative, de lucru, sau implicite, perceptibile la nivel vizual la o privire mai atent. Acestea trebuie definite n mare parte de doi factori: numr de coloane i de seciuni. Seciunile eseniale ntr-un design de interfa a unui site sunt antetul, bara de navigare, partea de coninut - articol, bar lateral i subsolul (figura alturat). n antet trebuie s apar titlul siteului (numele instituiei, corporaiei sau a persoanei fizice), sigla i opional un moto, o mini-bar cu faciliti precum cutare n site, schimbarea limbii i date de contact succinte. Bara de meniuri ntr-un site poate fi compus din mai multe componente i funcionaliti, n funcie de ct de bogat este n coninut site-ul. O bar de meFig. 9 niuri este constituit din elemente viSeciunile principale ntr-un layout de site zuale i/sau de tip text care permit utilizatorilor s navigheze ntre diferitele pagini ale site-ului n vederea satisfacerii nevoii de informare prin coninutul pus la dispoziie. Ca o prim etap, se definesc meniurile principale, i n cazul unui site extins, ierarhia coninutului, a paginilor. Designerul stabilete cum vor fi orientate n interfa: pe vertical sau pe orizontal. Meniurile aflate mai adnc n ierarhie (adic submeniuri de multiple nivele) pot fi afiate implicit sau n urma unui anumit tip de interaciune cu site-ul care determin apariia acestora. De obicei, n designul de interfee pentru site-uri cu o cantitate medie de coninut, apare o bar de meniuri orizontal i o coloan pentru cele de nivelul doi i trei. O alt variant pentru a avea meniuri cu multiple nivele este folosirea meniurilor n cascad care apar doar cnd mouse-ul se afl deasupra unui buton. n seciunea dedicat coninutului, se poate stabili cum apar titlurile, subtitlurile, tabele, coloanele n articol, etc. Opional se poate folosi n design i o bar lateral pentru a oferi utilizatorilor funcionaliti n plus sau doar pentru a afia mai multe legturi sau informaii cu privire la coninut. n partea de subsol a site-ului de obicei apar elemente precum meniuni de drepturi de autor, sigle, date de contact, legturi la pagini mai puin importante i alte faciliti.
14

Principii de design n urma reliefrii i ilustrrii seciunilor principale ntr-o interfa de site, se pot observa care sunt liniile principale, pe orizontal i vertical. n primul rnd sunt liniile care delimiteaz clar care este limea site-ului, pe vertical, dac se alege o navigare pe vertical, n caz contrar, orizontale. Apoi, tot pe vertical sunt liniile care definesc coloanele coninutului i a diferitelor spaieri dintre elementele din design. Pe orizontal, se observ cum doar cteva linii delimiteaz precis antetul de coninut i n partea inferioar, subsolul de coninut. n imaginea alturat se pot observa i liniile care indic spaiile necesare pentru coninutul de tip text.

Fig. 10

Linii principale n design de site

Pentru un design profesional, alinierea elementelor n interfa este foarte important. Nu este admis s fie elementele decalate, pe vertical sau pe orizontal. Este imperativ ca designerul s dea atenie deosebit interfeelor, pentru ca elementele s fie bine poziionate i aliniate. Dup cum s-a reliefat n ilustraiile de mai sus, textele din diferitele seciuni trebuie s fie aliniate pe vertical, la nivel de pixel: antet, bara lateral i subsol. Iar pe orizontal, n seciunea de coninut, textele din coloane, inclusiv n bara lateral, trebuie s fie poziionate la acelai nivel. Ca o regul, aceste distane, adic spaieri, trebuie respectate i n restul designului. Se poate observa c spaiile sunt egale n stng i dreapta coloanelor, la fel i n plan orizontal. Trebuie subliniat faptul c i cel mai mic element de design trebuie s fie aliniat corespunztor: un buton, un text n subsol, etc. Spaierea corespunztoare a elementelor n design i a textelor fa de marginile elementelor din interfa n care se gsesc este iari un aspect important, deoarece, n final, gradul de frumusee perceput i nivelul de satisfacie a utilizatorii site-ului vor fi n mod direct influenate. O interfa ticsit i nghesuit cu mult text mic, cu multe chenare mici i eventual dispuse incorect, fr aliniere corespunztoare, va fi n mod cert neplcut pentru utilizatori i va determina o insatisfacie oricrui utilizator, va prea greoaie i apstoare. O interfa profesional trebuie s ofere o stare de libertate, aer vizitatorilor si. Asta este posibil doar dac designerul utilizeaz spaii destul de largi ntre elementele din design i cu texte mari care s fie poziionate astfel nct s existe spaii, recomandabil egale, ntre marginile chenarelor i acestea. Designerii au la dispoziia lor mai multe moduri de a alinia n mod corect elementele ntr-un design i de a-i facilita acest proces. Exist site-uri online care ajut la generarea de grilaje, fie pentru implementarea designului n CSS/HTML, fie pentru programe precum Fig. 11 Photoshop - utilizate pentru realizarea de astTrei coloane cu linii de ghidare 960GS fel de interfee. Un astfel de site, probabil unul din cele mai cunoscute de acest fel este 960 Grid System realizat de Nathan Smith [5]. n Photoshop i alte programe de design, utilizatorii au la dispoziie tot felul de faciliti care uureaz considerabil alinierea elementelor: linii de ghidaj, rigle i op15

Principii de design iuni de facilitarea procesului de repoziionare a fiecrui obiect prin mutarea asistat, care magnetizeaz elementul n micare fa de restul elementelor sau a liniilor de ghidare. Un alt aspect care trebuie luat n considerare n procesul de realizare a unei interfee de site este proporia ntre elemente din design i seciuni. n acest sens, designerul trebuie s stabileasc o ierarhie vizual bazat pe importana elementelor exprimat prin dimensiunea lor. Nu este recomandat ca titlurile n site s fie foarte mici, iar corpul textului s fie mai mare dect acestea sau dect meniurile principale. Meniurile de nivelul doi au o dimensiune mai mic dect meniurile principale. De obicei, antetul siteului i bara de meniuri principale trebuie s aib dimensiuni mai mari, iar titlurile din coninut s fie iari mai mari dect textul propriu-zis. Antetul este considerabil mai nalt ca subsolul site-ului, ns aceasta nu este o regul clar. n subsol este de preferat ca textele s fie mai mici dect n coninut i sa nu fie prea intens ca design. Site-urile sunt afiate pe ecrane de diferite rezoluii (1024 x 768, 1600 x 1200, 1920 x 1080) sau pe dispozitive cum ar fi telefoane mobile, televizoare sau altele. Este de dorit ca primele lucruri pe care le vede utilizatorul pe ecran s fie i cele mai importante. Nu am dori ca navignd pe Internet s vedem un subsol mare n loc de antet i coninutul s apar doar dup ce glism mult pagina. Astfel, putem pune n discuie cteva caracteristici i proprieti vizuale pe care elementele din design le pot avea i pe care designerul le utilizeaz pentru a impune la nivel vizual o ierarhie a acestora n funcie de importana lor: poziionarea, dimensiunea i culoarea. Stabilirea importanei elementelor funcionale i decorative din design poate facilita considerabil procesul creativ. Un design profesional trebuie s rspund ct mai bine ntrebrii: ce vrea utilizatorul s vad mai nti?. n partea superioar a site-urilor trebuie afiate funcionalitile imediat necesare utilizatorilor: schimbare de limb, contact, bara de meniuri pentru navigare i titlul siteului. Antetul nu trebuie s ocupe tot ecranul, deoarece utilizatorii vor s aib o privire asupra coninutului imediat dup ce se schimb pagina. n subsolul site-ului trebuie puse elementele funcionale neimportante i informaii mai puin relevante. Trebuie luat n calcul ce utilizatori vor naviga pe site, ce rezoluii vor folosi pentru a alege n cunotin de cauz poziia i dimensiunea elementelor din design. Un alt mod de a augmenta sau decrementa importana elementelor n design este prin folosirea abil a nuanelor i a culorilor. Pentru a reduce importana unui element trebuie folosite culori mai puin stridente, sau se poate estompa. De exemplu, un cmp de text pentru cutare aflat n antet poate fi estompat, astfel nct s nu fie pronunat i s apar privitorului doar la o privire mai atent asupra site-ului. Un designer are un grad ridicat de libertate n a alege ce elemente apar n diferitele seciuni ale designului i cum sunt afiate. ns apar constrngeri i limitri datorit mai multor factori exogeni, precum: accesibilitate, comportamentul utilizatorilor pe Internet, scopul site-ului, cerinele i preteniile clientului, tehnologii, etc. Toi aceti factori, n fapt, ngrdesc considerabil libertatea designerului, mai ales dac sunt luai n calcul n mod strict, fr ncercarea de a iei din context sau abloane, orict de puin.

16

Principii de design

1.1.4 Compoziie
n ideea de a iei din context i deoarece interfeele de site-uri reprezint un fel de art vizual, designerii profesioniti implementeaz mai mult sau mai puin tehnici din pictur i fotografie, deoarece o interfa de site poate fi considerat o imagine artistic. n acest sens, se pot aplica principii de compoziie cunoscute n aceste forme de exprimare artistic: echilibru compoziional, repetiie, simetrii, proporii, etc. Cnd se pune n discuie compoziia unei imagini, trebuie luat n considerare i cunoscut foarte bine conceptul de spaiu n plan. n principal, o imagine are o lime i lungime bine definit, un cadru precis. Acest cadru de exprimare (un ecran, o foaie sau o pnz de dimensiuni precise) reprezint spaiul de desfurare al creativitii i numai dac este analizat per ansamblu se poate vorbi despre compoziie. Mai precis, n orice punct unde se decide ca un element grafic s fie desenat are un potenial artistic, n funcie de spaiul din jurul acestuia n plan. Spaiul poate fi pozitiv, cnd este ocupat de un element vizual, sau negativ, cnd este perceput ca spaiu gol. Pentru a ilustra cele spuse, s lum ca exemple urmtoarele dou imagini:

Fig. 12

Fig. 13

Aceste imagini ilustreaz ct de important este direcia liniilor i cum poziionarea diferit n cadru a elementelor grafice (compoziia) schimb mesajul imaginilor. n figura 12 se poate observa ca personajul urc un drum i este la nceputul acestuia. Dac personajul ar fi fost situat n dreapta, ar fi fost la capt de drum, ar fi ieit din cadru, semnificnd plecarea. Direcia linii de orizont indic un urcu relativ uor, o cretere i o tensiune nu prea mare. La nivel compoziional, datorit spaiului gol foarte mare, se poate nelege c personajul este singur i pustiu. Mai mult dect att, nu este o compoziie echilibrat deoarece pe nici o ax nu se poate gsi vreo simetrie. n stnga jos, imaginea are un element bine conturat, iar n rest este gol. Acest spaiu se numete spaiu negativ, iar personajul reprezint spaiu pozitiv. Utilizarea abil n imagini artistice a spaiului negativ i pozitiv poate contribui substanial n ceea ce privete exprimarea artistic. n opoziie cu figura 12, n figura 13 direcia linii de orizont indic o cdere abrupt i o tensiune mult mai mare dect n prima ilustraie. La nivel compoziional, prin poziionarea personajului n extrema dreapt, se poate vedea ca o plecare, o ieire din cadru, din existen a acestuia. Compoziia este echilibrat, deoarece se poate observa o simetrie informal. O simetrie informal este obinut prin utilizarea de elemente vizuale care nu sunt identice: soarele i personajul. Acestea sunt dispuse relativ la aceeai distan fa de axa de simetrie care poate fi subneleas n imagine i au aceleai proporii. Un element vizual suficient de mare n plan poate fi echilibrat prin mai multe elemente mai mici care s echivaleze proporia acestuia.
17

Principii de design n exemplul de mai sus s-a folosit simetrie informal, ns exist mai multe tipuri de simetrii. Simetria formal se poate obine prin oglindirea coninutului, cnd prile aflate n simetrie sunt identice. Un alt tip de simetrie este cea radial. Simetria radial este constituit din dispunerea la distan egal a acelorai elemente vizuale fa de un punct central i ntre ele. [6]

Simetrie formal

Simetrie radial

Simetrie informal
Fig. 14

Revenind la designul de interfee de site-uri web, aceste noiuni despre compoziie au o relevan semnificativ n mai multe moduri. n ceea ce const layout-ul, putem identifica cum regulile de compoziie exprimate mai sus se aplic. n antet, titlul site-ului de obicei este contrabalansat prin elemente vizuale, imagistice ce in de domeniul de activitate al companiei, al persoanei creia site-ul aparine. O alt particularitate este c de obicei, se evit adugarea unei bare, fie vertical, fie orizontal, dac nu sunt elemente funcionale care s o populeze. De exemplu: o bar anume doar pentru funcia de cutare. n mod obinuit, aceasta este populat cu legturi, cu butoane sau alte funcionaliti distribuite n ambele pri. n subsol, de obicei apar mai multe legturi fie interne - spre diferite pagini, fire spre siteuri externe, iar n partea cealalt se afl detalii de despre drepturile de autor, sau un breadcrumb, opiuni de accesibilitate, etc. Ornamentarea designului poate fi abordat prin prisma principiilor de compoziie. Un design poate fi realizat simetric informal sau formal prin folosirea de elemente vizuale ce au relativ aceleai proporii i s fie dispuse simetric n antet, subsol i pe marginile site-ului. Aa cum s-a vorbit mai sus despre mesajul artistic care poate fi schimbat prin compoziie, orientarea liniilor, n ilustraiile date ca exemplu, se poate la fel de uor vorbi i despre un antet de site, un subsol sau alte aspecte ce in de o interfa de site. O alt tehnic mprumutat din pictur pentru a realiza design-uri de interfee care s ias din context este realizarea iluziei de adncime, de spaiu. Designerii pot crea, precum orice pictor, iluzia de adncime n mai multe moduri. ns, cele mai utilizate tehnici sunt: suprapunerea formelor, schimbarea dimensiunii, modificarea de perspectiv (perspectiv linear) i estompare cu ajutorul nuanelor i al culorilor care creeaz efectul c elementul reced n perspectiv [7]. Se mai folosesc i efecte vizuale care au un aport substanial n obinerea iluzii de adncime: degradeuri, reflexii i umbre.

18

Principii de design Urmtoarele figuri ilustreaz diferite procedee de a crea iluzia de adncime:
a) b) c) d)

Fig. 15

a) b) c) d)

suprapunere i linii care marcheaz conturul obiectelor. suprapunere i estompare - schimbarea nuanei n funcie de distan. suprapunere, estompare, reflexii i umbre. suprapunere, estompare i schimbarea dimensiunii obiectelor n funcie de distan.

1.2 Culori
n arta vizual, inclusiv n designul de interfee de site-uri, culorile au o capacitate imens n stimularea privitorilor. Culorile strnesc cele mai vii triri n oameni. Impactul lor vizual este de departe cel mai important n realizarea oricrei lucrri artistice: poz, pictur sau design. Pentru a atrage vizitatori i de a-i menine pe site ct mai mult culorilor interfeei sunt decisive n acest sens. Un designer trebuie s aib o cunoatere aprofundat a teoriei culorilor i a semnificailor acestora. Utilizarea lor n mod contient este imperativ, deoarece permit oricrui designer s transmit mesajul artistic dorit. Folosirea de culori inadecvate poate drastic schimba experiena utilizatorilor pe site: acesta poate fi repulsiv, inaccesibil i ilizibil.

1.2.1 Optic
n fizic, culorile sunt radiaii electromagnetice de diferite lungimi de und, frecvene i intensiti. De obicei, o surs de lumin radiaz fotoni pe o plaj larg de frecvene i lungimi de und. La nivel cosmic, radiaiile electromagnetice sunt msurate de la 1 km (undele radio) pn la Fig. 16 10-14 m, ns spectrul de lumin vizi- Tabel cu lungimile de und i frecvenele care corespund diferitelor culori bil este doar n intervalul 390-750 nanometrii. Lumina poate fi descompus spectral pentru a identifica cu precizie culorile spectrale, pure, numite monocromatice. Tabelul alturat ilustreaz culorile spectrale. n principal, obiectele opace au diferite culori n funcie de frecvenele i lungimile de und pe care le absorb i reflect. Astfel dac un obiect absoarbe toate lungimile de und este negru i reine cldura mai mult. Un obiect alb le reflect pe toate i nu reine cldura la fel de mult ca un obiect negru. A se ine cont c nici un obiect nu absoarbe sau reflect integral lungimile de und, altfel am cunoate obiecte absolut pur negre sau absolut pur albe i ar fi de neimaginat ct de calde sau ct de reci ar fi. Dac o surs de lumin este roie, aceasta radiaz doar n intervalul 700-630 nanometrii, orice obiect aflat n jurul aceste surse nu va avea culoarea lui real, deoarece intervalul de
19

Principii de design lungimi de und care poate fi absorbit i reflectat este limitat. Astfel, dac obiectul este alb n realitate, el va aprea rou. De aceea sursele lumin trebuie s emit fotoni pe o plaj ct mai larg de lungimi de und pentru a include tot spectrul de culori. [8] Dup cum s-a putut nelege din cele spuse mai sus, ochiul uman poate percepe lumina doar ntr-un interval de lungimi de und bine stabilit, datorit construciei sale biologice. ntr-un ochi se gsesc trei tipuri de receptori fotosensitivi (celule conice) pentru percepia culorilor: L, M i S. Fiecrui tip de receptor i corespunde un interval de lungimi de und pentru care este sensibil: lungimi lungi, medii sau scurte. n funcie de gradul de stimulare a acestor receptori, creierul uman detecteaz diferitele culori. n ntuneric culorile sunt mai puin vii deoarece receptorii funcioneaz doar la lumin. n acest caz sunt folosite celulele bastonae care regleaz timpul de expunere, adic gradul de sensibilitate la lumin pentru a putea vedea n ntuneric. [9] Pentru a face un sumar a celor spuse mai sus, culorile pe care le percepem n jur sunt determinate de mai muli factori: n funcie de intervalul de lungimi de und radiate de sursa de lumin i de intensitatea acesteia, de modul n care obiectele absorb i reflect frecvenele i n final, de modul n care ochiul uman, din poziia de privitor, este capabil de a percepe radiaiile electromagnetice din jurul su generate de lumini i obiecte.

1.2.2 Temperatura culorilor

O alt proprietate a culorilor, i implicit a luminii, este temperatura. Temperatura luminii se msoar n Kelvin. n cea de-a doua jumtate a secolului XIX, Lord Kelvin a comparat lumina zilei cu un corp negru pe care l-a nclzit treptat. Astfel, dac se folosete un obiect ideal negru care este treptat nclzit se va observa cum acesta devine succesiv rou, galben, alb i n final, albastru. Temperatura culorii este indicele de neutralitate a albului. Culorile cu o temperatur de peste 5000K sunt culori reci (alb, cyan, albastru), iar n intervalul de 2500K - 3500K sunt culori calde (rou, galben, alb). Albul este neutral. [10] Temperatura culorilor are dou roluri eseniale: artistic i tiinific. Artistic, culorile calde sunt percepute ca fiind relaxante i plcute, iar cele reci, amintesc de anotimpuri reci, situaii mai tensionate, etc. n pictur, culorile reci sunt folosite pentru efecte atmosferice deoarece creeaz senzaia c dispar n plan, iar cele calde par mai aproape. n spaii publice se folosesc lumini calde, iar n cldiri de birouri, lumini reci, pentru a stimula angajaii s lucreze mai mult. Designerii sau fotografii pot filtra imaginile pentru a le transforma n imagini mai calde sau mai reci, n funcie de mesajul artistic dorit. Al doilea rol pe care temperatura culorilor l are este n cadrul tiinific. Diferitele tipuri de surse de lumini au fost definite ca standarde. Aceste definiii iau n calcul i temperatura corelat a culorilor (CCT, Correlated Color Temperature). De exemplu, lumina lumnrii are doar 1850K, un bec incandescent are temperatura de 2600K 3000K, iar un bec bazat pe halogen 3400K. [11] C.I.E. (Commission Internationale de l'clairage) a definit mai multe standarde de iluminare pe mai multe categorii: A, B, C, D, E i F. Aceste categorii reprezint diferitele tipuri de lumini. Categoria A este pentru simularea becurilor incandescente, B
20

Principii de design pentru simularea iluminrii directe pe timpul zilei, C pentru simularea iluminrii indirecte pe parcursul zilei, E pentru surse de lumini echienergetice i F pentru diferite surse de lumini fluorescente. n categoria D (Daylight) se afl standardele de iluminare care definesc iluminarea n condiii optime, n natur, n diferite momente ale zilei i diferite locuri pe Terra. n aceast categorie standardele sunt D50 (5003K), D55 (5503K), D65 (6504K) i D75 (7504K). D50 definete iluminarea sub un cer albastru, iar D65 un cer complet nnorat. Spectrul oricrei surse de lumin, inclusiv a unui standard de iluminare, poate fi exprimat sub forma unui triplet de valori. Acest triplet de coordonate este numit punct de lumin (white point). n editarea de imagini pe calculator, aceste standarde sunt folosite n conversia ntre diferitele modele i profile de culori. [12]

1.2.3 Modele de culori

Pe parcursul istoriei au fost elaborate diferite sisteme de a defini, reprezenta i de a denumi culorile. Actualmente, cea mai comun modalitate de a reprezenta culorile n domeniile din art se bazeaz pe roata de culori, prima dat ilustrat de cercettorii din acest domeniu n secolul XVIII. Isaac Newton i Johann Wolfgang von Goethe n Teoria culorilor din 1810 au marcat progrese considerabile n nelegerea culorilor [13]. n mod obinuit, designerii, fotografii i pictorii definesc fiecare culoare prin urmtoarele caracteristici: culoare spectral, saturaie, tent, intensitate, crom, nuan, luminozitate i valoare. Exist o abunden de termeni, astfel c, ntre acetia exist relaii strnse la nivel semantic i pot uor crea confuzie. Aceast situaie este cauzat de modul n care s-a desfurat evoluia n domeniul teoriei culorilor care a introdus o gam larg de termeni cu diferene semantice minore ntre ei. [14] Pentru a obine culori exist dou moduri de sintez a acestora: substractiv (CMY) i aditiv (RGB). n principal, diferenele apar din cauza mediului de lucru i a tehnologiilor folosite. Pictorii i industria de tipografie i tiprire folosesc sinteza substractiv pentru a obine culori. Cu ct mai multe vopsele sau pigmeni sunt suprapuse, cu att mai ntunecat devine culoarea. Culorile primare a acestui tip de sintez sunt cyan, magenta i galben. Prin combinarea acestora se pot obine urmtoarele culori secundare: rou, verde i albastru. n tipografie se folosete modelul de culori CMY sau CMYK (Key, ct de neagr este culoarea). Cu alte cuvinte, CMY este un model de reprezentare i reproducere a culorilor standardizat, iar CMYK este doar o variant particular a modelului CMY folosit n programele de grafic. [15]
Fig. 17

Sintez substractiv i sintez aditiv

21

Principii de design n design, grafic digital i n industria de monitoare, ecrane, unde culorile sunt obinute prin lumin, se folosete sinteza aditiv. Potrivit acestui mod de lucru, cu ct mai multe culori sunt folosite, prin suprapunere, culoarea devine tot mai alb [16]. Culorile principale sunt: rou, verde i albastru. Prin combi-narea a dou culori primare rezult urmtoarele culori secundare: cyan, magenta i galben. n domeniul informatic se utilizeaz modelul de culori RGB (red, Fig. 18 green, blue). Fiecare canal de culoare priReprezentarea geometric a modelului de culori RGB, sub forma de cub mar are o valoare reprezentabil fie aritmetic, fie n procente, fie n intervalele 0-255 (8 bits) sau 0-65535 (16 bits). n unele medii de lucru profesionale n grafic digital i design devine tot mai comun folosirea de RGBA. Alpha este o valoare tot pe 8 sau 16 bits care indic gradul de transparen a culorii. [17] Modelele de culori CMY i RGB sunt reprezentate n spaiu sub forma unui cub, unde fiecare punct n spaiu de coordonate x, y i z reprezint o culoare r, g, b sau c, m, y. Reprezentarea geometric a modelului RGB este echivalent cu CMY. n domenii profesionale de grafic digital (design de interfee de site-uri, grafic 3D, DTP, etc) se folosete modelul de culori HSV sau HSL (Hue, Saturation i Light sau Value). Culorile sunt obinute prin sinteza aditiv. HSL/HSV este implementat n aplicaiile de procesare imagini i de design, fiindc este un mod mai intuitiv pentru percepia uman de a reprezenta modelul de culori RGB. Acest model poate fi reprezentat geometric sub forma unui cilindru, astfel culoarea spectral (hue - culoarea pur) are valori n intervalul 0 - 360. Saturaia este o valoare care definete ct de intens este o culoare, concentraia acesteia. Luminozitatea sau valoarea indic ct de deschis sau ct de nchis este culoarea. n afar de culoarea spectral, ceilali doi parametrii (S, V sau L) au valori ntre 0 i 1 sau n procente: 0% - 100%. [18] Urmtoarele dou ilustraii reliefeaz diferenele dintre HSV i HSL. Diferite seciuni sunt redate pentru a facilita nelegerea acestor modele de reprezentare n spaiu a culorilor.

Reprezentarea geometric a HSL i HSV sub forma de cilindru

Fig. 19

22

Principii de design RGB i CMY(K) sunt modele de culori care au ca scop definirea modului n care se obin culorile i cum se pot reprezenta n funcie de dispozitive i tehnologiile folosite. RGB este pentru ecrane, lumini i prelucrare digital a imaginilor. CMYK pentru printuri, pictori i pigmeni. Nici unul din modele nu este conceput anume pentru a defini modul n care ochiul uman percepe culorile. n acest sens, CIE a definit mai multe standarde pentru a reprezenta ntr-un spaiu de culori percepia vizual a luminii i a culorilor mult mai precis dect pn atunci. n general, CIE Lab este folosit doar n medii de cercetare sau n domenii adiacente. C.I.E. n 1976 a definit standardul CIE L*, a*, b* cunoscut sunt numele de CIE Lab. L* este un parametru al spaiului de culori care definete luminozitatea ntre 0 i 100, iar a* si b* sunt valori de culori aflate n opoziie. Parametrii a* i b* pot avea valori negative sau pozitive ntre -128 i +127. Aceti parametrii sunt calculai ca diferene de transformri a luminozitii. [19] Figura de mai jos prezint spectrul de culori n funcie de dimensiunile L, a* i b*. Acest tip de reprezentare vizual a CIE Lab D50 este sub forma de CIE XYZ. Culorile afiate pe ecran variaz foarte mult n funcie de valorile alese, astfel le-am notat precis.

CIE Lab

Fig. 20

CIE Lab este independent de orice tip de dispozitiv i este de obicei utilizat ca o referin teoretic pentru alte modele de culori deoarece acoper ntregul spectru de lumin vizibil. Mai pe larg, modelele de culori mai sus prezentate, RGB, CMYK, HSL i HSV nu cuprind ntregul spectru de lumin vizibil, adic toate culorile perceptibile de ochiul uman i sunt doar nite modele matematice abstracte care descriu cum pot fi reprezentate culorile ca perechi de numere. Orice model de culori este un sistem de culori arbitrar, fr context, dac nu este asociat printr-o funcie de corelare a datelor cu un sistem de culori global, neles exhaustiv. n acest sens, CIE Lab este un spaiu de culori absolut i este folosit ca referin pentru celelalte modele de culori. Funciile de corelare a modelelor de culori cu un spaiu de culoare absolut, sunt folosite n profile de culori care definesc aceast funcie i mai multe date despre culori. [20]

23

Principii de design

1.2.4 Spaii de culori

Un spaiu de culori este o implementare specific a unui model de culori. Adobe RGB (1998) i ProPhoto RGB dezvoltat de Kodak sunt spaii de culori care au o acoperire foarte mare de culori din spectrul de lumin vizibil. Adobe RGB cuprinde aproximativ 51% din culorile definite de CIE Lab, iar ProPhoto RGB ajunge la circa 90%, ceea ce este echivalent cu 12 - 14% mai multe culori dect un om poate distinge n mod natural. Deoarece acest spaiu de culori este att de larg, se recomand lucrul n modul RGB 16 bits per canal. [21] Orice designer sau artist digital trebuie s cunoasc noiuni despre modele de culori, spaii de culori, profile de culori i calibrarea culorilor. Aceste noiuni sunt foarte importante n domenii profesionale de grafic i n design deoarece stau la baza transferului de imagini pe web i ntre profesioniti. O imagine realizat pe calculatorul de acas poate s nu arate bine cnd este printat sau afiat pe alte ecrane. Cunoaterea acestor noiuni permit graficienilor i fotografilor s evite situaii neplcute n conversia culorilor din RGB n CMYK pentru print sau afiarea corect a culorilor pe multiple dispozitive i ecrane.

1.2.5 Profile de culori

Un profil de culori este un model numeric al spaiilor de culori. Sistemele de operare i aplicaiile de grafic, de procesare a imaginilor, aparatele foto, imprimantele, ecranele i scannerele folosesc diferite tipuri de profile de culori. Acestea se pot clasifica n urmtoarele moduri: dup tipurile de dispozitive sau dup utilizarea lor n software. Profilele de culori pentru dispozitive sunt dependente de acestea i ofer posibilitatea de reproducere a culorilor dorite. La nivel de software, exist profile pentru sistemul de operare care gestioneaz modul n care culorile sunt afiate i adesea depind de dispozitiv, modelul de ecran. ntr-un cadru profesional de editare a imaginilor, de fotografii i n design, se recomand utilizarea profilelor de culori care acoper un spectru ct mai larg de culori (cele menionate mai sus). n 1993, s-au pus bazele consoriului ICC (International Color Consortium) care a definit mai multe standarde deschise de profile de culori. Profilele ICC sunt utilizate n mod curent, fie n dispozitive, fie la nivel de soft. Profilele de culori descriu atributele culorilor oricrui dispozitiv sau pentru condiiile de vizualizare prin definirea modului de corelare dintre dispozitiv i spaiul de colori ales prin utilizarea unui spaiu de culori conex, de referin. Acest spaiu de culori conex este CIE Lab, dup cum s-a evideniat mai sus. Corelarea culorilor se face prin profile bazate pe tabele sau pe matrice. Profilele de culori bazate pe matrice folosesc formule matematice pentru a descrie culorile n spaiul tridimensional. n domeniul editrii video profesionale se folosesc profile de culori bazate pe tabele LUT (Look-Up Tables) care descriu spaiul tridimensional de culori prin tabele foarte mari de puncte n spaiu care sunt mostre de culori i se utilizeaz funcii de interpolare pe aceste date. [22] [23]

24

Principii de design

1.2.6 Corecia gamma

Luminoforii dintr-un ecran CRT1 nu emit o lumin proporional cu tensiunea electric dintr-un tub catodic. Pentru a fi rezolvat aceast problem, o tehnologie n acest sens ar fi prea costisitoare. Imaginile sunt afiate mai Fig. 21 ntunecat dect sunt la nivel de pixel. Diferena ntre o imagine calibrat gamma Astfel, aceast limitare la nivel fizic a i una necalibrat Imagine: The piano room [67] ecranelor CRT a determinat ca n industria de aparate fotografiat i camere video s se utilizeze o corecie gamma care s manipuleze pixelii pentru a compensa ntunecarea imaginilor cnd sunt afiate pe ecrane. Procesul prin care se aplic o corecie gamma asupra imaginilor se numete compresie gamma. Aceast funcie de corecie gamma este menit s ajusteze luminozitatea imaginilor pentru afiare. Profilele de culori Adobe RGB, sRGB folosesc o corecie gamma standard de y=1/2,2=0,454. Ecranele sunt fcute s urmeze acest standard i astfel aplic o funcie de de-compresie gamma y=2,2 care ntunec. Funcia matematic care st la baza coreciei Fig. 22 gamma, este non-liniar i poate fi aplicat pe fieCorecia gamma compenseaz ntunecarea imaginilor la afiare care canal R, G i B. [24] Fiecare designer sau artist digital trebuie s se asigure ca monitorul este bine calibrat, c afieaz corespunztor imaginile. Exist mai multe metode i imagini de tip test care trebuie s fie afiate ntr-un anumit mod pe ecran, dac acesta este corect calibrat. Prin ajustarea corect a valorilor gamma la monitor i corelarea acestora la nivel de software, utilizatorul se asigur c tonurile de gri sunt bine afiate, iar luminozitatea imaginilor este adecvat. Pe site-ul The Lagom exist o serie exhaustiv de astfel de imagini care faciliteaz procesul de calibrare a monitorului. [25] Modul de lucru ntr-un cadru profesional de editare grafic este bazat pe cel puin dou sau trei profile de culori ICC. Aplicaiile de vizualizare a imaginilor i de editare grafic implementeaz suportul pentru profile ICC, iar majoritatea formatelor de imagini utilizate n mod frecvent au suport pentru includerea de profile ICC ca metadate. Pentru nceput, exist un profil de culori pentru ecran, care trebuie s provin de la productorul ecranului i s fie ncrcat la nivel de driver n sistemul de operare utilizat. Asta asigur redarea culorilor n mod precis pe ecran. Un alt pas important este calibrarea monitorului astfel nct s fie posibil discernerea cu ochiul liber, n funcie de luminozitatea mediului n care se afl ecranul, a ct mai multor culori i nivele de gri pe ecran. Ulterior, trebuie luat n vedere ca n programul de editare grafic s se utilizeze un profil de culori ICC specific pentru lucru: sRGB, Adobe RGB din 1998 sau ProPhoto RGB. Aceste profile de culori de lucru permit graficianului s obin culori mai bogate,
CRT = Cathode Ray Tube: un tub catodic cu vid utilizat pentru ecrane i osciloscoape; n interiorul acestuia se genereaz fascicule de electroni 25
1

Principii de design mai multe - n funcie de profilul ales i s nu piard din calitatea imaginilor prin procesarea succesiv a pixelilor. Un al treilea profil de culori ICC este necesar n funcie de destinaia lucrrii. Dac lucrarea este pentru un print, trebuie folosit un profil CMYK, de exemplu Coated FOGRA27. Prin utilizarea unui profil CMYK se asigur conversia i reproducerea culorilor n mod ct se poate de fidel ntre ceea ce se vede pe ecran i rezultatul final, printat. n caz c destinaia lucrrii este web-ul, profilul de culori recomandat este sRGB. [26]

1.2.7 Conversia imaginilor color n alb-negru

Un aspect adeseori neglijat este conversia de imagini color n imagini alb-negru (grayscale). Acest tip de conversie nu este, dup cum aparenele ar indica, ceva facil. Culorile spectrale la nivel perceptiv au o luminozitate care trebuie luat n calcul n procesul de conversie. Fiecare culoare n RGB este constituit din trei valori, iar aceste valori la conversie devin o singur valoare care indic doar un ton de gri (0-255 sau 065535). Un artist digital are la dispoziia sa trei metode de conversie a unei imagini color n alb-negru. Prima metod const n aplicarea unui filtru banal pe imagine care nu ia n calcul modul de percepie a culorilor. n aceast abordare se pierde luminozitatea perceput a culorilor, a elementelor vizuale din imagine. Chiar mai mult dect att, se poate observa c o conversie de acest fel aplicat pe culorile spectrale la saturaie maxim, devin toate gri, cnd se utilizeaz ca spaiu de lucru modelul de culori RGB. Mai precis, dac folosim ca referin HSV, oricare culoare din spectru cu saturaia de 100% i valoarea la 100%, devine gri. Pentru a obine alb sau negru, saturaia trebuie s fie la 0% i respectiv valoarea 0%. Acest filtru depinde de modelul de culori folosit. Dac se folosete CIE L*a*b* conversia se efectueaz n mod corect. A doua metod const n utilizarea unui filtru de conversie care ia n calcul luminozitatea culorilor i percepia acestora. Aceast metod depinde de profilul de culori i modelul de culori folosite, deci rezultatele variaz destul de mult. n final, n programele specializate de editare grafic ofer i o a treia metod care ofer artistului libertatea de a manipula conversia n albnegru selectiv, pe canale R, G, B i chiar pe baza culorilor spectrale. Seria urmtoare de imagini ilustreaz aceste diferene care apar la conversia de imagini color n alb-negru.
Color Filtru de reducere a saturaiei Conversie alb/negru n CIE Lab

Diferii algoritmi de conversie a imaginilor color n alb-negru Imagine: Mushroom Kingdom [27]

Fig. 23

26

Principii de design De obicei, un designer de interfee de site-uri sau un artist digital (n 3D sau pictur), nu pune baza pe cunoaterea teoretic i practic a ceea ce sunt culorile n realitate. ns cei profesioniti, cu experien vast, ajung s aib cunotine despre ce sunt culorile fizic, n realitate, i cum sunt acestea definite i reprezentate matematic sau cum sunt gestionate digital culorile (modele de culori, spaii de culori, profile de culori i conversii, etc). Dup cum s-a evideniat mai sus, cunoaterea acestor aspecte ofer unui designer un grad ridicat de control asupra imaginilor sale i nltur probleme de afiare a acestora n diferite medii i contribuie la luarea de decizii bine informate.

1.2.8 Roata de culori

O alt abordare, considerabil mai comprehensibil, n discuia despre culori este din perspectiva artistic; altfel spus, din perspectiva practic i aplicat n ceea ce privete utilizarea culorilor n lucrri de design sau pictur. Aceast abordare se bazeaz pe teoria culorilor din artele vizuale tradiionale, care nu i are rdcinile n colorimetrie sau tiina vizual, despre care s-a discutat pe larg pn aici. Roata de culori este o modalitate de a reprezenta culorile pentru artiti. Aceasta a fost pentru prima data ilustrat de Isaac Newton, care a avut ideea de a reprezenta circular culorile n lucrarea Opticks (1704). n lucrarea Traite de la Peinture en Mignature atribuit lui Claude Boutet, din 1708, pentru prima dat roata de culori a fost reprezentat simetric prin culori primare, mprit n 12 culori dispuse la distane egale (figura alturat). Rou, galben i albastru erau considerate culori primare. Pe baza acesteia, n timp s-a perfecionat modul de reprezentare i n zilele noastre, culorile utilizate se bazeaz pe HSV sau HSL. [28]

Fig. 24

Roata de culori, Claude Boutet Credit: Rolf G. Kuehni 2003

1.2.9 Scheme de culori

Prin folosirea roii de culori au fost dezvoltat scheme de culori, moduri de a alege culori potrivit unor teorii ce in de psihologia i percepia uman a diferitelor combinaii de culori. n general, orice form geometric sau orice mod de a sistematiza alegerea de culori pe circumferina i pe raza cercului definit de roata de culori, reprezint o schem de culori. n cele ce urmeaz voi prezenta cele mai cunoscute. Acromatice. Nu se folosesc culori, ci doar tonuri de gri, alb i negru. Este aparent o schem de culori simpl sau chiar restrictiv, care limiteaz expresivitatea artistului, ca designer sau pictor. ns, utilizarea schemei cere abiliti deosebite n exprimarea artistic i o cunoatere aprofundat a ceea ce nseamn iluminare n pictur i a contrastelor. Pentru unii privitori, o imagine acromatic poate trezi tristee sau ideea de vechi, de trecut sau chiar melancolie.

Fig. 25

Acromatice

27

Principii de design Monocromatice. Se alege doar o spi a roii de culori, altfel spus, un punct pe circumferina cercului i se alterneaz luminozitatea culorii doar prin variaia razei. Utilizarea acestei scheme de culori poate fi monoton, deoarece se utilizeaz doar o culoare spectral, care poate fi doar mai deschis sau mai nchis. ns, este uor de utilizat i poate avea efect relaxant asupra privitorului. Aceast schem este frecvent ntlnit n design-uri. Adiacente. Se folosesc culori similare, adiacente, apropiate, una lng cealalt, reprezentnd o seciune din circumferina cercului, un arc, incluznd ntreaga raz pentru a putea varia luminozitate i saturaia culorilor. O astfel de schem de culori ofer artitilor un grad de libertate mai mare n expresia artistic. Se recomand folosirea unei culori dominante fa de celelalte adiacente i arcul de culori s fie restrns. La nivel perceptual, culorile adiacente se potrivesc ntre ele i sunt considerate confortabile. [29] Complementare. Culorile sunt alese n opoziie pe circumferina cercului i la orice distan fa de centrul acestuia. Culorile complementare sunt contrastante i creeaz o senzaie puternic de energie, de vibraie. n design, se poate utiliza aceast schem pentru a atrage atenia asupra unui element vizual. ns, dac este utilizat n exces, trdeaz un comportament imatur la nivel de designer. Pentru culoarea textului i a fundalului se recomand evitarea folosirii de culori complementare, deoarece devine aproape imposibil lectura. Triade. n cazul schemei de culori monocromatice s-a ales o singur culoare spectral, o spi a roii de culori. ns, n aceast schem de culori se aleg trei spie distribuite pe circumferina cercului fie echidistant, fie la alegerea artistului. Schema ofer o libertate destul de mare la nivel artistic. n aceast configuraie, culorile tind s fie vibrante i se recomand ca una din ele s domine, iar celelalte dou s fie folo-site pentru accentuare.

Fig. 26

Monocromatice

Fig. 27

Adiacente

Fig. 28

Complementare

Fig. 29

Triade

Mai exist i alte scheme de culori mai puin cunoscute i mai puin relevante: ptratic (patru culori echidistante), rectangular (patru culori, dou cte dou echidistante) i complementar separat (trei culori; dou echidistante i a treia n opoziie). [30] Culorile primare pot fi RGB (rou, verde i albastru), RYB (rou galben i albastru) sau CMY (cyan, magenta, galben). n arta tradiional, sec. XVIII, nainte ca evoluia tiinific n domeniul colorimetriei s defineasc precis care sunt culorile primare n funcie de sintez se folosea RYB. Pe roata de culori se pot evidenia culorile primare, secundare i teriare. Culorile secundare sunt obinute prin combinarea a dou culori primare, iar cele teriare se obin prin amestecarea celor secundare. Ilustraia de mai jos arat care sunt acestea i unde sunt situate.
28

Principii de design
Culori primare Secundare Teriare

Roata de culori

Fig. 30

Pe baza roii de culorii un designer de interfee de site poate s i aleag culorile pentru a le folosi n design, formnd o palet de culori. Exist aplicaii web care pot genera palete de culori, seturi de culori, care s fie folosite pentru diferite seciuni ale layout-ului: antet, subsol, titluri, bare de meniuri, etc. O astfel de aplicaie este Adobe Kuler [31]. Pentru un design profesional, se recomand meninerea a textelor ct mai lizibile. Ochiul uman poate avea o varietate de afeciuni, de diferite grade, de la daltonism (imposibilitatea de a distinge unele culori), fie vedere nceoat sau altele. n general, pentru coninut textual trebuie evitate fundale colorate strident, ci culori ct mai spre alb sau negru, iar textul s fie n contrast: negru sau alb.
Text lizibil Lorem ipsum dolor sit amet pour toujours. Text nelizibil Lorem ipsum dolor sit amet pour toujours.
Fig. 31

Influena culorilor asupra gradului de lizibilitate a textelor

1.2.10 Degradeuri
Elementele n design dintr-o interfa pot fi colorate doar prin culori simple sau prin degradeuri. Degradeurile pot fi de mai multe feluri: liniare, radiale, circulare, ptratice, etc. Acestea sunt definite prin cteva culori cheie (de ex. rou, galben, verde) care software-ul le interpoleaz i genereaz culorile intermediare ntre acestea. Dac se decide utilizarea de degradeuri n design, se recomand degradeuri subtile, nu intense i contrastante. De obicei, utilizarea lor chibzuit poate avea un impact realmente pozitiv asupra designului.

Tipuri de degradeuri

Fig. 32

ntr-un design de site trebuie meninut o consecven n utilizarea culorilor, precum i la nivel de layout: alinierea elementelor vizuale, spaii ntre acestea, margini, dimensiuni, etc. Acelai tip de elemente vizuale trebuie colorate la fel peste tot. De exemplu, un titlu n articol nu trebuie s apar o dat rou, iar pe alt pagin verde sau meniurile haotic colorate, legturile la fel, etc. Culorile trebuie s fie alese logic, n funcie de aspecte ce in de navigare, de layout i accesibilitate. De obicei, culorile stridente folosite excesiv creeaz repulsie. Astfel, se poate lua n calcul dimensiunea elementului vizual versus stridena culorii. Dac elementul vizual este cel mai mare n in29

Principii de design terfa, trebuie folosite imperativ culori mai pale, terse, spre exemplu antetul sau partea central a site-ului unde apare coninutul propriu-zis, articolul. ns, cu ct este mai mic elementul vizual, cum ar fi un cmp de cutare, cu att culorile atribuite pot fi mai stridente. O modalitate prin care un designer poate experimenta n interfee, se bazeaz pe percepia culorilor. ntr-o interfa de site se poate folosi iluzia optic numit contrast simultan. O culoare poate s par c i schimb culoarea n funcie de context. n figura alturat se poate observa Fig. 33 Contrast simultan cum culorile centrale din chenare par sa fie mai nchise, fie mai deschise fa de contur. Exist o multitudine de iluzii optice, ns aceasta se poate utiliza n designul de interfee n mod facil.

1.2.11 Semnificaii
Culorile au semnificaii i implicaii psihologice. Aceste semnificaii variaz n funcie de individ i de cultur. n funcie de experienele personale, de educaie, culorile pot trezi anumite stri, sentimente afective n privitori. Roul este culoare puternic, intens i este perceput ca fiind energic i pasional, iar n unele contexte exprim snge, vitalitate, violent i agresivitate. Culoarea portocalie este mai domolit, mai puin pasional, mai accesibil. Galbenul este o culoare care transmite optimism, vitalitate i amintete de soarele de pe cer. O culoare care sugereaz natur, naturalee, via este verdele. Este o culoare pozitiv, ns n anumite contexte poate sugera toxicitate i decdere (mucegai). Nuanele de verde aduc aminte de iarb, de copaci i flori. Actualmente, verdele este o culoare la mod, datorit noului val ideologic ecologist. Culoarea albastr exprim distan, rceal, spiritualitate i elegan, profesionalism. Nu este o culoare pasional. Aceasta aduce aminte de natur, de cerul albastru, senintate i linite, de ocean. Starea de visare, de fantezie sau de impulsivitate se poate exprima prin violet. Culoarea violet poate sugera nebunie, comaruri, n context negativ. Roz este o culoare modern, feminist, care este preponderent adorat de genul feminin, fiind purtat i folosit adesea fie pentru accesorii sau haine. Aceasta exprim vitalitate, joaca i visare. n diferite contexte sociale, poate avea conotaii de homosexualitate. [32] Negru exprim doliu sau moarte. Tonuri de gri sugereaz tristee sau apatie, iar albul puritate, confort, pace i linite. n funcie de context, tonurile de gri, alb i negru sunt considerate neutre i pot fi uor combinate cu alte culori.

30

Principii de design

1.3 Elemente de tipografie

Un design complet de interfa ntotdeauna include texte. Sunt folosite texte scurte pentru orientare i navigare n site: meniuri, butoane, legturi spre diferite pagini sau funcionaliti: cutare, print, ajustarea mrimii textului, etc. n partea central, de coninut, n cazul site-urilor de prezentare se prefer texte de lungime redus, concise pentru a nu plictisi vizitatorii. ns, n cazul site-urilor de informare (tiri, enciclopedii, recenzii, etc), textele pot fi lungi, articole elaborate i detaliate despre subiectul dat. n ambele cazuri, ct i pentru textele orientative din antetul sau subsolul site-ului, un designer trebuie s cunoasc un minim de teorie din domeniul tipografiei pentru a alege feele tipografice (fonturi) pentru textele din interfa mai bine, de a asigura lizibilitatea acestora i a face mai plcut lectura articolelor ntinse pe site-uri de informare.

1.3.1 Margini
O pagin web, chiar dac este interactiv, poate fi considerat la nivel vizual o pagin de revist sau chiar o pagin simpl dintr-o carte. n principal, avem antet i subsol, iar n ambele cazuri trebuie meninut o consisten vizual ntre pagini. Aceasta este meninut utiliznd aceeai interfa (design, layout i culori) pentru toate paginile din site. ntr-o carte, consistena vizual const n utilizarea consecvent a aceluiai font pentru text, aceleai mrimi pentru paragrafe, titluri, aceleai spaii ntre marginile paginii, etc. ns, aceste aspecte sunt valabile i la o pagin web. Mai precis, o bar de meniuri, indiferent de orientarea sa, trebuie s aib elementele vizuale bine aliniate, iar textele s aib o margine, un spaiu liber. Textele nu trebuie s ating muchiile oricrui element vizual din site: meniuri, antet, subsol sau coninut. Pentru a reliefa cele spuse mai sus, n imaginea alturat se observ aezarea textelor n pagin. Pentru a asigura consistena vizual, s-au folosit dimensiuni egale pentru marginile textelor (verticale i orizontale), evideniate n galben. n general, pentru a asigura consistena vizual n poziionarea i alinierea textelor nu este imperativ folosirea de margini de aceeai dimensiune pe ambele axe. Astfel, un designer are libertatea de a defini marginile verticale la o dimensiune diferit fa de cele pe orizontal. Spaiile largi i marginile groase transmit vizitatorilor o stare de lejeritate i sunt ca o gur de aer la nivel de design n interfa. Se mai poate observa n imagine i modul de utilizare a coloanelor pentru layout. n partea de coninut, articolul este mprit n dou coloane. Bara lateral pentru meniuri este a treia coloan.

Fig. 34

Un design de interfa cu grosimea marginilor pentru texte marcat prin galben

31

Principii de design

1.3.2 Coloane
ntr-o pagin, fie virtual, fie real, mprirea pe coloane a coninutului face lectura mai plcut, deoarece liniile de text nu sunt foarte lungi. Dac ntr-un ziar sau ntr-o revist n format mare articolele nu ar fi mprite pe coloane, iar liniile de text ar ncepe ntr-un capt al paginii i s-ar ncheia n cellalt capt, numrul de cititori ar scdea drastic. Cititorii devin mai puin dispui s citeasc articolele, deoarece ochiul uman obosete s menin aceeai linie pentru prea mult timp. Astfel, soluia este de a parcurge coninutul i pe vertical prin mprirea n mai multe coloane a articolelor pentru a diminua gradul de obosire. Aceste aspecte sunt valabile i pe pagini web, mai ales n cazul utilizrii de ecrane mari care permit site-urilor cu interfa fluid s devin prea largi, astfel devin mai greu i mai obositoare de citit. Trebuie menionat i faptul c dac se abuzeaz de coloane, iar liniile devin prea scurte, impactul acestora nu mai este pozitiv, ci negativ, deoarece cititorii pot fi iritai de lecturarea liniilor de text prea scurte. Pentru a obine un nivel optim de plcere pentru cititori se recomand ca o linie s aib aproximativ 70-90 de litere. Trebuie s fie luat n calcul limea coloanei i dimensiunea textului astfel nct aceast recomandare s fie obinut. O soluie n acest sens ar fi folosirea de formule care s pun n relaie aceste variabile. Folosirea coloanelor nguste transmite cititorilor un aer de superficialitate, de lectur diafan, astfel pentru articole academice, se prefer coloane mai largi. [33] La nivel de text exist o multitudine de moduri de a stila i de a influena modul n care acesta este prezentat: culori, spaii ntre litere, cuvinte, paragrafe, stiluri, fonturi i altele despre care voi vorbi pe parcurs.

1.3.3 Paragrafe
Paragrafele sunt uniti textuale (fragmente) n care se exprim o idee sau un punct dintr-o argumentaie elaborat. Acestea sunt desprite prin aliniat nou i au n compoziie mai multe propoziii sau fraze. Delimitarea vizual ntre paragrafe este important pentru a augmenta plcerea lecturii pe site (sau n cri). Exist dou moduri de a scoate n eviden un paragraf: introducerea unui spaiu ntre acestea i indentarea textului.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis id, rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu magna tincidunt metus pharetra pharetra. Cras sed libero urna. Aliquam erat volutpat. Suspendisse at odio eu lectus feugiat sagittis nec eu sem. Suspendisse cursus euismod libero, venenatis eget tristique. Vestibulum nec elit lorem, eu rutrum urna viverra. Aliquam condimentum elit quis justo dapibus laoreet. Aenean consequat dolor non nisi faucibus commodo. In viverra orci in felis sagittis ut semper massa dignissim. Pellentesque pharetra diam sit amet elit porta luctus. Sed risus justo, venenatis eget tristique nec, bibendum a mauris. Aenean vel lacus, ut consequat leo. Etiam a dapibus tellus. Vestibulum nec elit lorem, eu rutrum urna viverra. Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur elementum erat vitae neque porta et bibendum massa luctus. Morbi ligula purus, ullamcorper tristique blandit sit amet, aliquet ac dolor. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis id, rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu magna tincidunt metus pharetra pharetra. Cras sed libero urna. Aliquam erat volutpat. Suspendisse at odio eu lectus feugiat sagittis nec eu sem. Suspendisse cursus euismod libero, venenatis eget tristique. Vestibulum nec elit lorem, eu rutrum urna viverra. Aliquam condimentum elit quis justo dapibus laoreet. Aenean consequat dolor non nisi faucibus commodo. In viverra orci in felis sagittis ut massa dignissim. Pellentesque pharetra diam sit amet elit porta luctus. Sed risus justo, venenatis eget tristique nec, bibendum a mauris. Aenean vel purus lacus, ut consequat leo. Etiam a dapibus tellus. Vestibulum nec elit lorem, eu rutrum urna viverra. Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur elementum erat neque porta et bibendum massa luctus. Morbi ligula purus, ullamcorper tristique blandit sit amet, aliquet ac dolor. Nulla facilisi.

Spaierea ntre paragrafe

Fig. 35

n exemplele de mai sus se poate observa cum o privire per ansamblu poate fi influenat. Dac ne uitm pe un text n care paragrafele nu sunt delimitate n nici un mod, ni se va prea liniar, plictisitor i chiar neatrgtor, nu putem observa la o privire rapid unde ncepe un paragraf, iar n timpul lecturii orientarea n text este realmente
32

Principii de design mai dificil: nu avem un reper vizual. ns, acest lucru nu este valabil n exemplul al doilea, unde paragrafele sunt delimitate; chiar i la o privire rapid a textului, observm unde ncep paragrafele. n concluzie, spaiul ntre paragrafe are rolul important de a facilita orientarea n text a cititorului n timpul lecturii. O alt modalitate de a evidenia un paragraf este indentarea primei linii. Cuvntul indentare provine din englez, verbul to indent. A indenta nseamn a mpinge spre dreapta prima linie dintr-un paragraf printr-un spaiu introdus la nceputul acesteia. Acest spaiu este un indent i dimensiunea lui variaz n funcie de designer. Exist i un alt model de indentare, numit indentare suspendat. n acest mod, prima linie este decalat spre stnga, ieind n afar, astfel urmtoarele linii ncep mai spre dreapta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis id, rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu magna tincidunt metus pharetra pharetra. Cras sed libero urna. Aliquam erat volutpat. Suspendisse at odio eu lectus feugiat sagittis nec eu sem. Suspendisse cursus euismod libero, venenatis eget tristique. Vestibulum nec elit lorem, eu rutrum urna viverra. Aliquam condimentum elit quis justo dapibus laoreet. Aenean consequat dolor non nisi faucibus commodo. In viverra orci in felis sagittis ut massa dignissim. Pellentesque pharetra diam sit amet elit porta luctus. Sed risus justo, venenatis eget tristique nec, bibendum a mauris. Aenean vel purus lacus, ut consequat leo. Etiam a dapibus tellus. Vestibulum nec elit lorem, eu rutrum urna viverra. Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur elementum erat neque porta et bibendum massa luctus. Morbi ligula purus, ullamcorper tristique blandit sit amet, aliquet ac dolor. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis id, rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu magna tincidunt metus pharetra pharetra. Cras sed libero urna. Aliquam erat volutpat. Suspendisse at odio eu lectus feugiat sagittis nec eu sem. Suspendisse cursus euismod libero, venenatis eget tristique. Vestibulum nec elit lorem, eu rutrum urna viverra. Aliquam condimentum elit quis justo dapibus laoreet. Aenean consequat dolor non nisi faucibus commodo. In viverra orci in felis sagittis ut massa dignissim. Pellentesque pharetra diam sit amet elit porta luctus. Sed risus justo, venenatis eget tristique nec, bibendum a mauris. Aenean vel purus lacus, ut consequat leo. Etiam a dapibus tellus. Vestibulum nec elit lorem Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur elementum erat neque porta et bibendum massa luctus. Morbi ligula purus, ullamcorper tristique blandit sit amet, aliquet ac dolor. Nulla facilisi.

Tipuri de indentare pentru paragrafe

Fig. 36

Exemplele de mai sus ilustreaz indentarea normal i indentarea suspendat. Indentarea paragrafelor crete considerabil satisfacia cititorilor potrivit unor studii efectuate n acest sens, iar orientarea n pagin este mai facil. Paragrafele cu spaii ntre ele i indentate sunt norma n redactarea crilor. ns pe web, designerii au nceput s nu mai foloseasc aa des indentare pentru paragrafe. [34]

1.3.4 Interlinie
Nu este suficient s se in cont de spaiul ntre paraLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis grafe, dimensiunile marginilor a textelor sau lungimea li- id, rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu magna tincidunt metus pharetra. urna. niilor pentru a obine un maximum de plcere n lectura pharetra erat volutpat.Cras sed liberoodio eu Aliquam Suspendisse at lectus feugiat sagittis nec eu sem. Suspendisse unui articol, ntr-o revist sau pe web. Pentru a augmenta cursus euismod libero, venenatis eget tristique. Vestibulum nec elit lorem, eu rutrum urna i mai mult gradul de plcere n timpul lecturii, un de- viverra. Aliquam condimentum elit quis justo signer de interfa trebuie s aib n vedere i spaiul ntre dapibus laoreet. Aenean consequat dolor non orci in felis linii (interlinie). Liniile prea dense fac lectura neplcut i nisi faucibus commodo. In viverraPellentesque sagittis ut massa dignissim. sit amet Sed greoaie, deoarece ochiul uman gsete mai dificil meni- pharetra diamvenenatis elit porta luctus. nec, risus justo, eget tristique nerea ateniei asupra aceleiai linii n mod constant. n fi- bibendum a mauris. Aenean vel purus lacus, ut consequat leo. nal, numrul cititorilor scade considerabil. La nivel artisFig. 37 tic, linii dense transmit o stare de tensiune, de stres. n Linii dense vs. linii rsfirate schimb, linii cu spaiere adecvat sunt considerate mult mai confortabile, plcute, contribuie la oxigenarea designului. Ca o recomandare general, interlinia nu trebuie s fie mai mare dect spaiul ntre paragrafe, deoarece nu se mai poate observa spaiul dintre paragrafe. Este de preferat ca interlinia s nu fie mai mult de 70% din ct este spaiul dintre paragrafe.

33

Principii de design

1.3.5 Alinierea textului

Textul ntr-un paragraf poate fi aliniat n dreapta, stnga, centrat sau justificat. Alinierea textului pe dreapta sau stnga asigur o linie continu pe marginea dreapt, respectiv cea stng. Cnd se folosete aliniere centrat, fiecare linie este centrat pe orizontal i datorit variaiilor de lungime a acestora, nici pe stng, nici pe dreapta nu se va obine o linie continu n plan vertical, o aliniere ntre ele. Alinierea centrat nu este recomandat, doar n cazuri excepionale. Imaginea alturat ilustreaz alinierea pe stnga, dreapta i justificare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis rutrum turpis. Morbi laoreet dictum feugiat sagittis eu sem. Suspendisse cursus euismod libero, venenatis. Aliquam condimentum elit quis justo pharetra diam sit elit porta luctus. Sed risus justo, venenatis tristique nec, bibendum a mauris. Aenean vel lacus, ut consequat leo. Etiam a dapibus tellus. Vestibulum nec elit lorem, eu rutrum urna viverra. Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis in faucibus orci Curabitur elementum erat neque porta et bibendum tristique blandit sit amet, aliquet ac dolor. Nulla facilisi nae.

Fig. 38

Tipuri de aliniere a paragrafelor: stnga, dreapta i justificare

Pentru a alinia textul pe ambele pri, n stnga i dreapta, astfel nct marginile s fie scoase n eviden, se folosete alinierea justificat, unde toate liniile de text au aceeai lungime. Lungimea liniilor este determinat de margini i de limea coloanelor de text. Aplicaiile de tipografie i navigatoarele web, n mod automat, pentru fiecare linie de text variaz spaiile ntre litere i cuvinte pentru a alinia textul pe ambele pri. Se poate observa c n alinierea de tip justificare, ultima linie este exclus. n acest sens, exist justificare pe stnga sau dreapta, unde ultima linie este aliniat fie la stnga, fie la dreapta. n coloane de text prea nguste nu se recomand utilizarea alinierii justificate deoarece apar spaii ntre litere i cuvinte mult prea mari, iar lizibilitatea textului scade drastic. [35]

1.3.6 Interletr
Dup cum deja se poate nelege, i spa- Loremipsum dolorsitamet. iul dintre dou litere (interletra) ntr-un bloc Lorem ipsum dolor sit amet. de text sau o linie de text influeneaz cali- L o r e m i p s u m d o l o r s i t a m e t . tatea perceput a designului pe web sau n printuri. Spaierea ntre litere influeneaz li- Lorem ipsum dolor sit amet. zibilitatea articolelor i are conotaii artistice. Lorem ipsum dolor sit amet. Un text scris cu litere prea nghesuite, poate fi L o r e m i p s u m d o l o r s i t a m e t . considerat subiectiv i dup caz, poate fi inFig. 39 terpretat ca un mesaj tensionat. n cazul Interletra are un impact considerabil asupra lizibilitii textelor textelor cu dimensiuni mici, se recomand spaii mai mari ntre litere pentru a permite ochiului uman s disting formele literelor ct mai facil. Pentru texte mari, spaiul ntre litere poate fi redus fr ca lizibilitatea s fie afectat att de mult. Interletra nu poate fi mai mare de 70% din ct este spaiul ntre cuvinte, deoarece nu se mai poate deosebi n mod facil spaierea ntre cuvinte fa de cea ntre litere (a se vedea ilustraia alturat). Spaiul ntre cuvinte trebuie s fie considerabil mai mare dect cel ntre litere. Un text mai puin dens, cu o interletr mai generoas, face lectura mult mai plcut i ncurajeaz citirea integral a textului, deoarece nu necesit o concentrare att de mare pentru deosebirea literelor. [36]

34

Principii de design

1.3.7 Crenaj
Interletra reprezint modul prin care este ajustat densitatea literelor ntr-un bloc de text, indiferent de literele utilizate. ns, pentru fonturile proporionale a aprut necesitatea ajustrii spaiului ntre perechi de litere, deoarece ntre anumite litere spaiul nu este egal. n tipografie corectarea vizual a spaiilor inegale se numete crenaj, din fr. crnage (en. kerning). Crenarea se poate face n mod manual de creatorii de fonturi sau automatizat. Exist algoritmi n motoarele de afiare pentru texte n navigatoarele web i n aplicaiile de design care creneaz literele. n figura urmtoare se pot observa spaiile inegale ntre litere i cum arat dup crenare. [37]

Fig. 40

Crenare -90

Spaii inegale ntre litere ajustate prin crenare

Fig. 41

1.3.8 Fa tipografic
Feele tipografice sunt seturi de caractere concepute n acelai stil grafic. Un font este un set particular de caractere al unei fee tipografice. De exemplu, Arial este o fa tipografic, iar Arial Narrow Bold Italic este un font, o stilare particular a feei tipografice. [38] ntr-un font fiecare caracter este constituit din grafeme formate dintr-o glif sau mai multe glife care definesc cum arat propriu-zis literele, cifrele sau oricare alt caracter definit de font. O glif este cea mai mic unitate n tipografie, la nivel de caracter: diacritice, accente, sedile, etc. [39] Un grafem este o reprezentare vizual a unui sunet sau a unui fonem: litere, cifre, semne de punctuaie, etc. Unele fonturi definesc caractere care-i schimb forma n funcie de context (ligaturi), adesea prin contopirea a dou sau trei litere, pentru a augmenta lizibilitatea textelor. [40] n domeniul tipografiei a fost definit o anatomie comprehensiv a literelor i a caracterelor pe care nu o vom aduce n discuie pentru a nu divaga de la subiect. n figura urmtoare se reliefeaz elementele de baz din construcia literelor i liniile principale. [41]

Aspecte elementare din anatomia literelor Adobe Garamond Pro (fa tipografic romanic-umanist cu ampatamente)

Fig. 42

35

Principii de design Feele tipografice sunt clasificate dup modul n care arat (vizual) i artistic. ncepnd din secolul al XII-lea pn n al XVIII-lea, cnd tipografia era la nceputuri, se foloseau fee tipografice gotice (de exemplu Fraktur, Cursiva, Textualis, etc). ns, de atunci au aprut Fig. 43 Tipuri de fee tipografice mai multe tipuri: celtice, romanice i monospace. n cazul feelor tipografice romanice i gotice caracterele variaz n lime. Acestea sunt fee tipografice proporionale: Arial, Times New Roman, Calibri, etc. La feele tipografice monospaced limea caracterelor este fix i egal ntre ele: Courier New, Consolas, Lucida Console, etc. Feele tipografice monospaced se folosesc cel mai mult n domeniul informatic, pentru programatori. [38] La ora actual se folosesc cel mai mult fee tipografice romanice pentru interfee de site-uri, documente oficiale, reviste, cri, etc. Acestea se pot clasifica n cteva subcategorii principale: cu ampatamente (serifs), fr ampatamente (lineale, sans-serifs), script i ornamentale. Cele din categoria script imit scrisul de mn, iar feele tipografice ornamentale nu pot fi folosite dect n situaii speciale, n contexte ni pentru a decora textul.

Fig. 44

Tipuri de fee tipografice romanice

Fig. 45

Fee tipografice romanice cu ampatamente i fr ampatamente

n tipografie, ampatamentele sunt extensiile vizuale mici de la capetele literelor, a caracterelor. Feele tipografice romanice cu ampatamente pot fi clasificate dup felul ampatamentelor: stil vechi - umanist, tranziional - baroc, modern i egiptean. n printuri se folosesc preponderent fee tipografice cu ampatamente, deoarece sunt considerate mai lizibile pentru suporturi cu DPI2 mare (reviste, cri, ziare, etc). Cele mai lizibile sunt feele tipografice romanic-umaniste i romanic-baroc. [42]

Feele tipografice romanic-lineale (sau altfel numite groteti) sunt fr ampatamente la terminaiile formelor. Acestea sunt clasificate astfel: grotesc, neo-grotesc, geometric i umanist. Cele romanic-lineal geometrice sunt considerate ca fiind moderne i atrgtoare pentru designul de interfee, putnd fi folosite pentru titluri sau alte elemente din design. Deoarece DPI-ul este redus la ecrane, se recomand folosirea de fee tipografice romanic-lineale pentru texte scrise cu dimensiuni mici n design-uri de site-uri, deoarece neavnd ampatamente distingerea literelor este mai facil, astfel textele sunt

DPI = Dots Per Inch; o unitate de msur n industria tipografic care definete cte puncte sunt imprimate pe un inch (2,54cm). 36

Principii de design mai uor de citit. Dintre acestea, se consider c feele tipografice romanic-lineal umaniste au cel mai nalt grad de lizibilitate i sunt recomandate pentru articole ntinse. [43] Alternarea tipurilor de fee tipografice n design-uri de reviste sau interfee sporete considerabil atracia fa de coninut, deoarece ochiul uman rspunde pozitiv acestui tip de stimulare vizual prin variaie. n acest sens, pentru titluri cu dimensiuni mari se recomand utilizarea de fee tipografice romanice cu ampatamente, iar pentru coninut, bare de meniuri, subsol i antet pot fi folosite fee tipografice romanic-lineale.

1.3.9 Fonturi
O fa tipografic poate fi format din fonturi multiple pentru a da posibilitatea designerilor de a stila textele: greutate variabil (aldin), italic, oblic i condensat. Un font condensat are caracterele reduse n lime. Se recomand evitarea confuziei ntre stilul oblic i italic, deoarece un font oblic are caracterele nclinate, de obicei Fig. 46 spre dreapta, iar un font italic reprezint o Exemple comparative pentru italic, oblic i diferite nivele de greutate / aldin form stilizat a scrisului de mn caligrafic. Greutatea fonturilor definete ct de grase sunt literele: slab, semi-gras, gras, etc. [44] n figurile alturate am folosit o fa tipografic romanic-lineal umanist pentru a ilustra diferitele stiluri: Myriad Pro. De obicei, n coninut se utilizeaz un stil aldin, cu greutate mai mare, mai gras, pentru a emfaza aspecte cheie din mesajul scris, iar italic sau oblic pentru citate. Pentru a scrie expresii matematice sau formule chimice se utilizeaz caractere expozant sau indice sau direct n MathML [45]. n design-urile moderne de site-uri de prezentare se folosesc fonturi condensate pentru titluri. [46]

Fig. 47

Comparaii ntre diferite nivele de condensare i exemplificarea utilizrii de expozani i indici.

1.3.10 Lorem ipsum

Dup cum s-a putut deja observa pn acum, pentru ilustrarea diferitelor aspecte ce in de tipografie s-a folosit un text n latin care ncepe cu Lorem ipsum dolor sit amet. Lorem ipsum este un text lipsit de sens utilizat de tipografi i designeri de layout-uri n reviste, ziare sau interfee de site-uri pentru a exemplifica modul n care arat corpusurile de text, n absena celor definitive. Dac se folosesc soluii automatizate din unele aplicaii de design sau de birotic, textul este generat astfel nct s par la prima vedere un text obinuit. Textul Lorem ipsum se bazeaz pe seciunile 1.10.32-33 din lucrarea "De finibus bonorum et malorum" (Despre menirea binelui i a rului) de Cicero, datat n anul 45 .Hr. Lorem ipsum a nceput s fie folosit de ctre tipografi cu aproximaie din anul 1500. Mai jos este un paragraf mostr pentru acest tip de text: [47]

37

Principii de design
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. Exemplu de text Lorem Ipsum
Fig. 48

Orice site, orict de bine ar fi realizat la nivel vizual (design, layout, culori i din punct de vedere tipografic), poate lsa de dorit dac nu are coninut adecvat, coerent i bine redactat. n acest sens, am decis c este util o prezentare a unor principii de redactare a coninutului care vin s sprijine un design bine realizat la toate nivelele, inclusiv tipografic.

1.3.11 Tehnoredactare pentru web

Coninutul n site trebuie s fie la obiect, adic s prezinte informaiile relevante n mod succint i pe nelesul tuturor. Articolele trebuie s fie structurate logic i scrise fr erori gramaticale i de ortografie. Utilizarea adecvat a semnelor de punctuaie i a caracterelor specifice fiecrei limbi, a diacriticilor i a accentelor, este o dovad de o deosebit atenie acordat coninutului. n cazul unui site de prezentare a unei instituii, persoane sau a unui produs, se recomand ca ideile i conceptele expuse pe site s nu fie contradictorii cu subiectul dat. Exprimri infantilizante sau pompoase n scris sunt adesea considerate inadecvate i se recomand evitarea acestora. La nivel de stilare a coninutului, trebuie luat n vedere designul site-ului i nu trebuie s se divagheze vizual de la linia artistic impus de designer. Trebuie evitat cu orice pre stilarea abuziv a textelor n site. Mai precis, nu este mai profesional sau mai bine dac se folosesc culori, fonturi diferite sau mrimi alese arbitrar pentru diferite cuvinte, linii, fraze sau chiar paragrafe, cu scopul de a emfaza anumite idei din articol. Toate paragrafele i articolele trebuie s i menin aceeai stilare, pentru a avea un design consecvent. Adesea astfel de erori sunt comise de nceptori n tehnoredactarea pentru site-uri web. Utilizarea majusculelor din senin, fie pentru propoziii sau fraze, fie pentru titluri este nerecomandat, deoarece se las impresia c prin intermediul acelui coninut cineva strig la cititor. Alte erori de stilare obinuite: sublinierea, centrarea textului, utilizarea excesiv a semnelor de exclamare sau a culorilor iptoare, etc. Astfel de erori sunt considerate puerile de cunosctori, iar n unele cazuri, n funcie de tipul de site, pot exprima disperarea celor ce au scris coninutul, ncercnd s fie persuasivi ntr-un sens sau altul. Toate aceste abuzuri de redactare i stilare sunt erori inadmisibile. Dac acestea apar ntr-un design profesional de interfa, se creeaz un contrast foarte mare care reliefeaz inadvertena dintre design i coninutul propriu-zis.

38

Principii de design

1.4 Implementarea tehnic

La nivel digital, imaginile sunt fcute fie n mod bitmap (raster, editare la nivel de pixeli), fie n mod parametric i vectorial. n editarea bitmap se manipuleaz n mod direct pixelii. Acest mod de lucru este folosit adesea n desenare digital. n editarea vectorial i parametric, fiecare element este dinamic i manipulabil n mod succesiv. Se folosesc obiecte de diferite tipuri, cu proprieti i caracteristici variate.

1.4.1 Editarea parametric a interfeelor

n design de interfee sau n DTP3 se folosete n mod uzual editarea vectorial. n acest mod de editare liniile sunt spline-uri. Un spline este o funcie polinomial definit pe poriuni, intervale. Utilizarea spline-urilor n design este realmente facil, deoarece pot fi definite linii curbe doar prin cteva puncte de control, care au ca parametrii tensiunea i Fig. 49 modul de flexiune a curbei. Pentru orice tip de Comparaie ntre tipuri de interpolare: linie, chiar frnt sau ascuit, acest mod de bzier, cubic i liniar editare permite modificri ulterioare mult mai facil i mai frecvente. Pentru spline-uri se folosesc diferite funcii de interpolare a punctelor de control definite de designer. Imaginea alturat ilustreaz cteva tipuri de interpolri. [48] n aplicaii precum Adobe Photoshop, interfeele sunt realizate combinnd editare bitmap cu editare parametric i vectorial. Obiectele, adic elementele vizuale n aplicaie, pot fi bitmap sau vectoriale. Formele pot fi definite n ambele moduri. Cnd un designer dorete s se asigure c unele elemente i vor pstra calitatea vizual i nu vor deveni pixelizate, nceoate, n urma aplicrii repetate de transformri (redimensionare, rotire), folosete forme vectoriale Fig. 50 obinute din spline-uri. Se poate aplica o gam Ordinea straturilor reflect variat de efecte dinamice (parametrice) i nonadncimea elementelor dinamice (aplicate n mod bitmap) asupra obiectelor. Dintre efectele dinamice amintim: umbr, contur, transparen, bizotare, estampare, halo, etc. Modul de lucru ntr-o astfel de aplicaie software este bazat pe conceptul de straturi. Fiecare obiect este un strat, iar ordinea lor n list corespunde cu adncimea lor (z-index, imaginea alturat ilustreaz acest mod de lucru), avnd i posibilitatea de a le grupa. Designerul are la dispoziia sa o varietate de unelte pentru a crea diferite tipuri de obiecte: forme i linii de tip bitmap sau vectorial, contururi, texte, etc. i unelte de manipulare: redimensionare, rotire, repoziionare, selecie, etc.

DTP Desktop Publishing; O metod tehnologic utilizat n publicarea de reviste, ziare, etc. 39

Principii de design n principal, un designer creeaz o imagine static a site-ului, aa cum dorete s arate. Aceast imagine static include, de obicei, mai multe amnunte despre site: design (layout, aezarea elementelor, aliniere, proporii), culori, tipografie (fonturi, texte i coninut Lorem ipsum pentru a ilustra mai bine cum arat site-ul). ntr-un design bine fcut sunt prevzute diferite funcionaliti, modul de interaciune i instane diferite ale site-ului (de ex. anumite pagini). La final, cnd interfaa este acceptat de client, se trece la implementarea tehnic a acesteia. Implementarea tehnic a unui design de interfa const, n prima faz, n tranarea imaginii n buci, n fiiere de tip imagine care conin diferite elemente din design: butoane, antet, subsol, etc. Toate obiectele parametrice, vectoriale i efectele dinamice sunt transformate n imagini bitmap, pixelizate, i sunt salvate n formate specifice pe web: JPEG sau PNG. JPEG (Joint Photographic Experts Group) este un format care comprim imaginea folosind algoritmi care degradeaz calitatea vizual a imaginilor alternd pixelii. PNG (Portable Network Graphics) este un format care nu utilizeaz acest tip de algoritmi. Compresia n formatul PNG nu este la fel de eficient, ns se pstreaz imaginile integre, nealterate. Mai mult, formatul PNG are suport pentru RGBA, transparene. Cnd o interfa este tranat, adesea elementele vizuale au fie umbre, fie sunt forme organice i este necesar utilizarea formatului PNG pentru a menine transparena. n mod obinuit, imaginile de tip poz sunt n format JPEG pe web, deoarece necesit o lime de band mai redus. Pentru elementele din designul interfeei, formatul PNG este de preferat. [49]

1.4.2 HTML
ntregul proces de tranare a interfeei trebuie s fie efectuat lundu-se n calcul modul n care va fi implementat designul n HTML i CSS. Programatorul de HTML i CSS decide ce structur va avea HTML-ul, iar n funcie de asta traneaz interfaa. Structura HTML este influenat n mod direct de layout-ul designului i de competenele programatorului. Implementarea tehnic poate fi i perceput ca o transformare a unei imagini statice ntr-o aplicaie interactiv. HTML (HyperText Markup Language) este un limbaj standard de marcaj pentru pagini web i st la baza oricrui site. n HTML programatorul definete o structur ierarhic de tag-uri (etichete) n perechi de forma: <body> </body>, <div> </div>,<h1> </h1>, <p> </p>, etc. Se poate observa c fiecare tag este deschis sub forma <exemplu> i nchis sub forma </exemplu>. Fiecare tag poate avea atribute care se definesc sub forma: <tag atribut="valoare">coninut</tag>. Teoretic se pot folosi orice tag-uri, ns n standardele web HTML 1, 2, 3 i 5 (ultima versiune) sunt definite clar ce tag-uri sunt permise, ce atribute pot avea i cum trebuie afiate i interpretate semantic de navigatoarele web. Exist o multitudine de tag-uri i atribute care ajut la definirea structurii documentelor. HTML permite rspndirea de coninut pe web cu structur semantic, deoarece fiecare tag are o valoare semantic. Actualmente se tinde spre un web semantic. ntr-o pagin HTML pot fi integrate obiecte externe, imagini, JavaScript-uri pentru interactivitate, CSS-uri pentru stilare i pot fi fcute formulare. [50]
40

Principii de design Exemplul urmtor ilustreaz structura unui HTML i cum se poate defini o structur semantic pentru articole.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. <!doctype html> <html> <head> <title>HTML este un limbaj simplu</title> <link rel="stylesheet" href="/stilare.css" type="text/css" media="all"/> </head> <body> <h1>Titlul capitolului</h1> <p>Exemplu de pagin web.</p> <p>Connut</p> <h2 lang=en>This is a subchapter</h2> <p>Acest capitol este scris <em>n englez</em>.</p> <ul> <li>O list ordonat sau neordonat</li> <li>Poate fi definit foarte uor.</li> </ul> </body> </html>

Prima linie a codului este iniializarea modului de afiare specific fiecrei versiuni de HTML - doctype. Tag-ul <html> este punctul de pornire a structurii paginii. n tag-ul <head> pot fi definite meta-date care descriu pagina sau site-ul: autorul, titlul paginii, referine la fiiere sau elemente externe (CSS-uri, JS-uri), etc. Atributele rel i href determin ce tip de referin i ce fiier extern este integrat n pagin. n acest caz, a fost inclus un fiier CSS pentru stilarea paginii. n <body> apare coninutul propriu-zis al paginii pe care navigatorul web o afieaz pe ecran: <h1> definete un titlu de nivelul nti, iar <h2> este de nivelul doi. Pentru <h2> s-a folosit atributul lang pentru a preciza n ce limb este scris. Tag-ul <p> reprezint un paragraf, iar <em> este pentru a emfaza ce s-a spus. n final, tag-urile <ol> sau <ul> sunt folosite pentru a defini liste ordonate, respectiv neordonate. Pentru a delimita elementele listei se folosete tag-ul <li> n ambele cazuri. Exemplul de HTML de mai sus este foarte uor de neles i de prezentat. La nivel de site, este necesar ca programatorul s fac o distincie foarte clar ntre coninut i prezentare. n HTML nu se definete nimic despre cum arat pagina web pe ecran. Navigatoarele au setri implicite, definite n standard, cum trebuie afiate tag-urile. ns, pentru a realiza un design, pentru a stila coninutul se folosete CSS (Cascading Style Sheets). CSS este un limbaj folosit pentru stilare i formatare a elementelor semantice dintr-un limbaj de marcaj, precum (X)HTML sau orice tip de fiier XML. Separarea coninutului de prezentare, permite programatorilor web s foloseasc acelai fiier CSS pe toate paginile dintr-un site i s ofere moduri diferite de prezentare a site-ului, a coninutului n funcie de rezoluia ecranului sau dispozitiv. Astfel, prin utilizarea corect a CSS-ului se asigur o accesibilitate mai mare a site-ului, deoarece pot fi fcute designuri specifice pentru platforme diferite. Mai mult dect att, orice utilizator pe Internet poate dezactiva stilurile CSS n funcie de necesitile sale. Programe de citit n Braille sau de sintetizare vocal pot fi folosite mult mai uor pe astfel de site-uri. Ambele stan41

Principii de design darde, CSS i HTML, au fost create i sunt meninute de W3C (World Wide Web Consortium). [51]

1.4.3 Selectori CSS

Un CSS este foarte uor de scris i de citit de cunosctorii de limba englez. Programatorul definete blocuri de reguli de prezentare i stilare delimitate de acolade {}. ntr-un bloc de reguli se definesc declaraii CSS delimitate cu semnul ; (punct i virgul). Proprietile CSS sunt cuvinte n englez ce trebuie urmate de o valoare: proprietate: valoare;. O declaraie CSS este perechea format dintr-o proprietate i o valoare. Fiecare bloc de reguli ncepe cu un selector sau mai multe selectoare separate de virgul: selector1, selector2, selector3 {proprietate: valoare;}. Exemple de proprieti i valori: font-size: 10px; position: absolute; margin: 15px, etc. [52] n CSS fiecare element din limbajul de marcaj este considerat o cutie, un box model. Orice tag din HTML este afiat n modelul de cutie. Modelul de cutie n CSS este constituit din margine, bordur, umplutur (padding) i coninutul propriu-zis. Aceste proprieti de stilare a cutiei n CSS sunt pentru ajustarea spaiului ntre elementele din limbajul de marcaj. Marginea reprezint spaiul exterior fa de element i nu are culoare, este transparent. Bordura poate fi stilat n mai multe moduri: linie continu, punctat, n cuFig. 51 CSS Box Model lori, etc. Umplutura este un spaiu ntre bordur i coninutul propriu-zis care preia culoarea sau fundalul stabilit pentru element, nu poate avea o culoare specific setat. Cnd mai multe elemente se afl unul lng altul, marginile lor se contopesc. n implementarea unei interfee aceste proprieti sunt indispensabile pentru layout i nu se poate obine o interfa avansat fr manipularea acestora. [53] Selectoarele sunt expresii care determin asupra cror elemente (atribute sau taguri) din limbajul de marcaj (de ex. HTML) sunt aplicate proprietile de stilare CSS. Selectoarele sunt clasificate n funcie de tipul de elemente: universal, element, clas, id i atribut. Un selector de elemente aplic regulile de stilare pe toate elementele de un anumit fel ce se gsesc n document, de exemplu tag-urile <p> sau <h3> succedate de blocul de reguli {proprieti: valori;}. Selectorul de tip atribute aplic proprietile CSS n funcie de atributele elementelor. Acesta este de forma [atribut=valoare] {proprieti: valori;}, opional poate fi precedat de un alt element, de orice tip, pentru a preciza mai specific unde se gsete atributul i nu este imperativ s se specifice valoarea: selector [atribut] {proprieti: valori;}. [54] Pentru implementarea tehnic a unei interfee ntotdeauna este necesar stilarea unor anumite tag-uri sau a unor seturi de tag-uri cu proprieti CSS comune. Fiecare tag HTML poate avea atributul id=nume-de-identificare sau class=o-categorie-de42

Principii de design elemente. Se pot marca mai multe tag-uri de acelai tip sau tipuri diferite folosindu-se atributul class pentru a permite ulterior stilarea acestora n CSS utiliznd selectoare de tip clas, avnd forma .nume-clas; numele clasei este precedat de un punct. Atributul id trebuie s aib o valoare unic pentru fiecare tag marcat n acest mod. Selectorul pentru id-uri este precedat de semnul # (diez). Cele dou tipuri de selectoare sunt foarte des utilizate n implementarea de interfee. n general, pentru a realiza o interfa de site se folosete tag-ul <div> foarte des, cu diferite id-uri, pentru a facilita procesul de stilare i de design. Acest tag nu are nici o valoare semantic, ns este utilizat pentru a structura arborele logic al documentului astfel nct s permit implementarea tehnic a designului. Selectorul universal precedat de semnul * (asterisk). Acesta este implicit pentru selectoarele de tipul: *.nume-clas, *[atribut], etc. ns, dac semnul * este utilizat pentru nlnuirea de elemente ntr-un selector, atunci elementul secundar specificat trebuie s fie absolut un descendent oarecare. Asta nseamn c dac exist elemente secundare n relaie de descenden direct fa de primul element specificat din selector, acestea sunt excluse i nu vor fi stilate. Pentru a specifica relaia la nivel ierarhic ntre elementele unui selector, exist mai multe moduri de nlnuire a acestora: descenden oarecare, descenden direct, adiacen i general. Relaia ntre elementele unui selector este stabilit prin caracterul folosit ntre acestea. [55] Relaiile de tip descenden oarecare i descenden direct pot fi explicate utiliznd dou selectoare de elemente ca exemplu pentru aceste moduri de nlnuire: p span, li > em {proprieti: valori;}. n acest exemplu, selectoarele vor aplica stilarea pe tag-urile <span> i <em> aflate ierarhic n tag-ul <p> i respectiv <li>. Diferena ntre cei doi selectori este important: n primul caz nu conteaz adncimea ierarhic a tag-ului <span>, ns pentru al doilea selector, tag-ul <em> trebuie s fie descendent direct ierarhic n <li> pentru a fi gsit; dac se afl mai adnc, nu va mai avea proprietile de stilare aplicate. Se poate nelege cu uurin c dac se folosete un spaiu ntre elemente, nu conteaz adncimea elementului secundar la nivel ierarhic, dar dac se utilizeaz semnul > ntre ele, elementul secundar trebuie s fie descendent direct. Elementele n selector pot fi nlnuite i cu semnul + sau ~ (tilda). Pentru a selecta un element adiacent celuilalt, la nivel ierarhic, se folosete + ntre acestea. Dac se dorete stilarea a unor elemente ce succed elementul specificat, se utilizeaz semnul ~ (tilda). n CSS se pot folosi mai multe tipuri de elemente ntr-un singur selector i pot fi nlnuite n diferite moduri. De exemplu: #antet ol > li .subliniate [lang=fr] {proprieti: valori;}. n acest exemplu, proprietile CSS sunt aplicate doar pe elementele din HTML ce au atributele class=subliniate i lang=fr. ns, construcia selectorului impune mai multe criterii pentru a fi stilate. Prima condiie: elementele trebuie s se afle ntr-un element cu id=antet. Mai mult, indiferent ct de adnc n ierarhie, fa de #antet, trebuie s se gseasc o list ordonat, <ol>, n care elementul <li> este obligatoriu descendent direct. Asta nseamn c dac lista ordonat este de mai multe nivele i se gsesc mai adnc n ierarhie alte elemente din clasa subliniate i au atributul lang=fr, nu vor fi stilate.
43

Principii de design

1.4.4 At-rules n CSS

At-rules n CSS sunt instruciuni i directive din antetul unui fiier CSS care permit programatorului s importe fonturi (@font-face) sau alte CSS-uri (@import), s specifice ce CSS trebuie utilizat n funcie de dispozitivul de afiare (@media), etc. Un designer de interfa de site poate folosi orice font sau fa tipografic dorete. n domeniul informatic au fost dezvoltate formate de fiiere specifice pentru fonturi sau fee tipografice. Feele tipografice sunt instalate n sistemul de operare, iar navigatorul le folosete pentru a afia textele de pe site-urile web, n funcie de fonturile utilizate n design. ns, designerul poate alege s includ n site fonturi care nu au o rspndire larg. De obicei, la nivel de sistem de operare, pe Windows, fonturile sunt n format .TTF (TrueType Font). Au fost dezvoltate formate deschise de fonturi i fee tipografice care pot fi incluse de designeri pe web, iar unii tipografi pun la dispoziie fonturi cu licene ce permit redistribuirea lor. OpenType Font Format (.OTF) este predecesorul formatului .TTF i include suportul pentru multe caracteristici noi specifice tipografiei. [56] Funcionalitatea standardizat n CSS 3 (@font-face rule) ce permite includerea de fonturi n site-uri este implementat de toate navigatoarele moderne.

1.4.5 Specificitatea regulilor CSS

O alt particularitate a CSS este specificitatea regulilor de stilare. De multe ori, cnd o interfa de site este complex, sunt situaii n care unele reguli de stilare CSS nu se aplic pe elementele din HTML, chiar dac, aparent ar trebui. n standardul CSS a fost definit o ierarhie a specificitii pentru tipurile de selectoare, elemente i modurile de nlnuire. n general, dac pe un element din HTML se aplic dou selectoare, proprietile CSS din selectorul cu specificitate mai mare prevaleaz. n caz c ambele selectoare au acelai nivel de specificitate, atunci prevaleaz cel ce apare ulterior n fiierul CSS. Selectoarele pentru elemente cu id, au o specificitate mai mare dect selectoarele pentru atribute sau clase. Selectorul universal are specificitatea zero, minim. [57] n CSS unele proprieti sunt motenite de elementele descendente ierarhic. A priori, nu toate elementele motenesc de la prini orice proprietate CSS. n standard sunt definite regulile de motenire. De exemplu: #antet {color: red; background: wheat}. Proprietatea color va fi motenit de toate elementele de marcaj descendente, ns background nu. n unele cazuri, se poate specifica anume dac se dorete motenirea unei anumite proprieti. n acest caz, dac dorim un anumit tag descendent s moteneasc valoarea pentru background, se utilizeaz background: inherit. n standardul W3C pentru CSS sunt definite reguli pentru calcularea specificitii unui selector, relativ simplu. Specificitatea este un numr format prin alturarea a trei variabile: a, b i c. Se numr selectoarele de tip ID - variabila a. Pentru b, trebuie numrate selectoarele de clase, de pseudo-clase i atribute. Iar pentru variabila c, numrul total de selectoare de elemente i pseudo-elemente. [58]

44

Principii de design

1.4.6 Limitri n implementarea interfeelor

CSS este un limbaj mai mult pentru stilare, nu att de mult pentru design de layout-uri. De aceea devine mult mai complicat un design de interfa fluid. Poziionarea elementelor pe vertical este considerabil mai grea, dect pe orizontal. Lipsa suportului pentru expresii matematice la nivelul declaraiilor CSS este adesea evident, de exemplu: #ptrat {width: 50% - 10px}. Expresiile matematice ar permite realizarea de coloane ntr-un mod mai facil i layout-uri mai dinamice. Grupul de lucru de la W3C lucreaz deja la implementarea suportului pentru expresii matematice. Dup cum s-a putut observa, n CSS, la ora actual, nu exist nici un mod de a avea selectoare pentru elemente aflate n relaie de ascenden. Mai precis, nu exist posibilitatea de a aplica proprieti CSS pe printele unui element, la nivel ierarhic, n funcie de anumite criterii. [52] De altfel, un designer de interfa obinuit cu aplicaii ca Adobe Photoshop, este adeseori constrns la un numr redus de efecte vizuale. n CSS nu exist posibilitatea de a aplica n mod dinamic diferite tipuri de efecte pentru nceoarea elementelor din HTML, reflexii calculate n timp real, bizotare sau estampare. n Photoshop fiecare strat / obiect poate fi suprapus folosind diferite moduri de supraimpunere / fuziune. n CSS nu pot fi folosite moduri de supraimpunere a elementelor vizuale. Aadar, un designer trebuie s evite astfel de efecte n design, dac nu pot fi transformate n imagini de tip bitmap. n SVG i Canvas, standarde web noi definite de W3C care ncep s fie implementate tot mai bine de navigatoarele moderne. Acest fapt permite utilizarea unui set mai larg de efecte care pot fi obinute cu Adobe Photoshop.

1.4.7 Proprieti CSS

Anumite proprieti din aplicaia de design folosit pentru realizarea interfeei pot fi reproduse la nivel tehnic, n site, cu ajutorul CSS: umbre i halouri (box-shadow, textshadow), coluri rotunjite (box-radius), transparene (opacity sau culori RGBA), degradeuri (linear-gradient), etc. Proprietile menionate sunt nou introduse n CSS 3 i sunt n curs de implementare n navigatoarele moderne. La nivel tipografic, CSS ofer proprietile necesare de a obine aceeai stilare a textelor ca n aplicaiile de design, cu un nivel de acuratee remarcabil: line-height, letter-spacing, text-indent, font-size, fontfamily, etc. n CSS culorile pot fi definite n RGB i HEX sub forma: #ff00aa (fiecare pereche de caractere reprezint r, g, respectiv b). n CSS 3 se pot utiliza formatele HSL, RGBA i HSLA (A pentru alpha transparen) pentru culori. Proprietatea display din CSS ofer controlul asupra modului n care fiecare element este afiat n pagin. Display are urmtoarele valori posibile care ajut n acest sens: auto (implicit), none, hidden, inline, block i multe alte mai rar utilizate. Toatele elementele sunt afiate implicit, dar dac se dorete ascunderea unuia se utilizeaz display: none sau display: hidden. n primul caz, afiarea layout-ul nu va fi afectat de prezena elementului n arborele logic al documentului, ns n al doilea caz, elementul va continua s afecteze modul de afiare a layout-ului i va fi luat n calcul pentru formatarea acestuia, ns nu va fi afiat pe ecran. Unele elemente din limbajul de marcaj sunt afiate ca un bloc care foreaz un rnd nou naintea i dup element i ocup
45

Principii de design ntreaga lime a elementului printe: <p>, <div>, <ol>, etc. Alte elemente sunt afiate inline, n linie. Acestea nu foreaz rnd nou i nici nu ocup toat limea: <span>, <em>, <a>, etc. CSS permite schimbarea modului de afiare, astfel putem avea <p> sau <div> afiat n linie, ori <span>, <em> afiate ca blocuri. Un programator, utiliznd aceste moduri de afiare, poate obine alinierea fie pe vertical, fie pe orizontal a unor elemente din interfa, de exemplu: o bar de meniuri. [59] n CSS elementele vizuale pot fi reaezate pe orizontal folosind proprietatea float cu valorile: left, right sau center. Elementul cu aceast proprietate aplicat este mutat din poziia lui iniial pe orizontal n stnga, centru sau n dreapta coninutului, iar modul de afiare este de tip bloc, nu n linie. Limea coninutului este dat de primul element printe cu modul de afiare bloc (display: block). Toatele elemente de marcaj afiate n linie (cu display: inline) aflate la acelai nivel n structura documentului sau mai adnci fa de elementul pe care se aplic declaraia CSS float, se muleaz dup acesta, excepie fcnd elemente care la nivel de cod se afl naintea acestuia. Un element cu float poate fi redimensionat utiliznd proprietile width i height, ce permit valori procentuale sau n pixeli. Proprietatea float este utilizat pentru poziionarea pozelor n pagin, astfel nct textele s se muleze dup poze. n cazul layout-urilor, se folosete pentru poziionarea ntr-o extrem sau alta a unor elemente, cum ar fi sigla siteului n stnga, iar bara de meniuri n dreapta, ambele la acelai nivel pe vertical. [60] ntr-o interfa avansat apare adeseori nevoia de a repoziiona elementele vizuale n funcie de alte elemente i de a controla modul n care acestea afecteaz layout-ul. Proprietatea position din CSS ofer programatorului mai multe moduri de a repoziiona elementele: static, fixed, relative, absolute. A priori, toate elementele din limbajul de marcaj sunt afiate folosind position: static. Pentru a deplasa un element n spaiul disponibil al ferestrei navigatorului, se folosete position: fixed. n acest mod, chiar dac este derulat pagina, elementul rmne poziionat fix n cadrul ferestrei, deoarece fereastra propriu-zis este blocul care-l conine. Astfel, elementul nu mai influeneaz restul layout-ului, nu mai ocup spaiu. Repoziionarea se face folosind proprietile CSS cu valori n pixeli: top, right, bottom, left. Cnd se utilizeaz position: relative, elementul are ca pivot poziia sa iniial n layout, adic repoziionarea este relativ. Spaiul ocupat iniial n layout rmne, astfel, doar unde este afiat poate fi definit. n acest caz, proprietile CSS top, right, bottom, left pot avea i valori negative n pixeli. Un element din limbajul de marcaj poate fi ancorat ntr-o parte sau alta fa de un element printe n ierarhia arborelui logic al documentului HTML utiliznd declaraia CSS position: absolute. n acest caz, position: absolute folosete ca pivot pentru elementul stilat, primul element printe care are declaraia position: relative aplicat. Elementul poziionat cu declaraia position: absolute este eliminat din structura vizual a layout-ului, adic nu ocup nici un spaiu i toate celelalte elemente nu sunt influenate de acesta. Modul de afiare al acestui element este display: block. [61]

46

Principii de design

1.4.8 Tipuri de interfee

Un design de interfa poate fi pe stnga, dreapta sau centrat. Navigarea poate fi pe vertical (cel mai des) sau pe orizontal (foarte rar). O interfa fluid are o lime variabil, procentual, i este mult mai dificil de implementat dect una cu lime fix. Designerul din procesul de creaie, ntr-o aplicaie precum Photoshop, trebuie s aib n considerare cum dorete s fie interfaa implementat n final. Dac dorete s aib o interfa fluid, atunci elementele vizuale i structura vizual trebuie gndite astfel nct s permit implementarea propriu-zis. n principal, trebuie avut n vedere cum vor fi transformate n bitmap i tranate imaginile, astfel nct s arate la fel. Un alt aspect care trebuie prevzut este modul n care se lete interfaa, ce elemente trebuie s se redimensioneze, ce imagini trebuie fie repetitive sau s permit lirea interfeei i cum se poate face s-i menin proporiile cnd se lete mult. Aceste amnunte trebuie luate n calcul pentru a avea un design care se adapteaz la diferitele dimensiuni posibile a ferestrei navigatorului web. HTML i CSS sunt tehnologii web standard, client side, care ruleaz pe calculatorul utilizatorului de Internet. ns, funcionaliti mai mult sau mai puin avansate sunt implementate folosind tehnologii server side, care ruleaz pe calculatorul de la distana de tip server: PHP, ASP, mySQL, etc. Aceste tehnologii permit implementarea celor mai cunoscute funcionaliti pe site-uri: schimbarea limbii, cutare, hart site, conturi, etc. La nivel de interfaa se folosete JavaScript pentru a implementa funcionaliti ce in de modul de interaciune cu site-ul: meniuri n cascad, sugestii pentru termenii de cutare, ncrcare a unor seciuni din site n mod dinamic, etc. O alt tehnologie frecvent utilizat este Adobe Flash pentru interfee interactive i n special pentru integrarea de video-uri pe web.

1.5 Marketing
Interfaa unui site sau a unei aplicaii web trebuie s fie un mijloc prin care utilizatorul sau vizitatorul site-ului este sprijinit n cutarea de informaii i totodat s faciliteze orice tip de interaciune cu site-ul dat. Mai precis, o interfa de site nu trebuie s se afle n calea vizitatorului sau s distrag atenia printr-un design prea exuberant i ncrcat. Trebuie s fie redui la minim numrul de pai necesari pentru a ajunge la informaii. Utilizatorul trebuie s poat s efectueze operaiunile pentru care se afl pe site ct mai eficient. Interfaa trebuie centrat pe utilizator, conceput anume pentru utilizator. Structura site-ului i funcionalitile trebuie gndite astfel nct utilizatorul s nu fie confuz cnd ajunge pe site, din cauza numrul prea bogat de pagini sau de funcionaliti mai mult sau mai puin utile. n acest sens, coninutul trebuie s fie ct se poate la obiect, succint i clar. Structura site-ului este de preferat s fie ct mai simpl, iar funcionalitile oferite trebuie s aib un nivel de relevan ct se poate de nalt. [62] Cnd se ncepe realizarea unui site trebuie studiat competiia, consumatorii - potenialii utilizatori ai site-ului, nevoile i competenele acestora. Trebuie stabilite ce funcionaliti sunt necesare (cutare, blog, fluxuri de Atom sau RSS, etc), ce funcionaliti ar dori potenialii utilizatori ai site-ului, ce tip de interfee i atrag, care sunt gusturile lor, modul n care acetia navigheaz pe web, obiceiurile lor n acest sens, etc. n
47

Principii de design acest mod se pot stabili care sunt funcionalitile relevante, ce culori trebuie folosite (mai stridente, mai pale), ce tip de design (mai minimalist, mai ncrcat, etc), layout-ul i chiar structura site-ului. O interfa de site nu se rezum doar la decorarea acesteia, ci trebuie ilustrat coninutul din fiecare pagin i per total, trebuie s fie unic, particular. Un alt aspect ce trebuie luat n calcul este nivelul de utilizabilitate i de accesibilitate. Trebuie ajustat interfaa site-ului nct s maximizeze aceste atribute. Cteva sugestii n acest sens: culorile nu trebuie s fac dificil lectura textelor, fonturile alese i dimensiunile trebuie s asigure o lizibilitate crescut, iar implementarea tehnic s permit utilizarea de soft pentru Braille, sintetizare vocal, etc. Toate acestea sunt probleme foarte des ntlnite pe web. n funcie de profilul site-ului trebuie s ofere funcionaliti n plus de accesibilitate: definirea ordinii pentru apsarea tastei Tab, comenzi din tastatur, control asupra dimensiunii textului sau stiluri CSS anume pentru deficiene de vedere. Un alt fel de a face mai accesibil un site este de studia modul n care utilizatorii navigheaz pe Internet, de a studia cu ce sunt ei obinuii. n acest sens, s-a observat c funcionaliti precum cutare, breadcrumb, login, schimbarea limbii, trebuie s apar n partea superioar a site-ului pentru a facilita gsirea lor i navigarea pe site. Astfel, poziionarea elementelor n layout este un aspect foarte important, deoarece permite vizitatorilor site-ului s gseasc ce au nevoie mai uor. Un site bine realizat la nivel tehnic (separaie clar ntre coninutul HTML i prezentarea CSS) i accesibil este mult mai uor de indexat de motoarele de cutare. n timp, site-urile pe web au evoluat n direcii diferite, n funcie de profil. Astfel, se pot observa norme informale pentru principalele categorii de site-uri: personale, de prezentare produs, portaluri i instituionale sau academice, etc. Se poate nelege cu uurin c un site de prezentare a unui produs sau un site oficial al unei instituii nu este abordat din perspectiva unui site personal. Acest fenomen determin apariia unor ateptri i comportamente la nivelul celor ce navigheaz pe Internet, care n funcie de tipul de site, la nivel de subcontient, acioneaz pe baza experienelor precedente, ajungndu-se la posibilitatea de a observa chiar modele mintale ce in de modul de interaciune a utilizatorului cu site-urile. n cele ce urmeaz voi prezenta cteva caracteristici a acestor tipuri de site-uri. [63] Un site personal este realizat dup gusturile persoanei respective. De obicei, la nivel de coninut, limbajul este informal i sunt prezentate lucruri ce in de activitile acelei persoane, n plan personal sau profesional. n funcie de vrsta i domeniul de activitate, site-ul va avea anumite caracteristici i un anumit design: de la ticsit, ntunecat sau chiar repulsiv (alert, colorat n mod obositor) pn la interfee degajate, plcute sau profesionale. De obicei, nu exist un public int, eventual cercul de prieteni. Un site personal de designer, trebuie s pun n valoare lucrrile i abilitile sale tehnice. n acest sens, este de preferat un site profesional sobru sau mai ndrzne la nivel tehnic i design. n principal, pentru site-uri personale se pot aborda idei ndrznee, de la cum arat pn la cum se navigheaz, interacioneaz cu site-ul. Un site personal de programator este de obicei mult mai sobru i minimalist. n mod obinuit, structura unor astfel de site-uri este simpl i nu impune dificulti n procesul de navigare. Site-urile personale care nu prezint o activitate specific, ci se limiteaz doar la aspecte absolut personale, sunt mai colorate, mai puin bine realizat la toate nivelele i de obicei se bazeaz pe a-

48

Principii de design bloane gata (template-uri) fcute, iar la nivel tehnic se utilizeaz CSS i HTML n principal. Un site de prezentare de a unui produs (alimentar, electrocasnic, automobil sau film, etc) este de obicei realizat pentru un grup mai restrns de consumatori. Avnd un public int bine definit, acesta este studiat din perspectiva optimizrii campaniei publicitare. Sunt luate n considerare gusturile, obiceiurile i ceea ce ar putea fi mai persuasiv pentru membrii publicului cruia site-ul se adreseaz. n spatele unu astfel de site se afl de obicei o munc de cercetare elaborat asupra campaniei de vnzare i publicitate, care dicteaz cum arat site-ul i ce funcionaliti sunt necesare pentru a pune n valoare produsul ct mai bine. Pentru a oferi o interactivitate sporit vizitatorilor pe site, se utilizeaz Adobe Flash, ns acesta reduce drastic accesibilitatea site-urilor de acest fel. Se folosesc fonturi mici, sunete i animaii care au menirea de a atrage clieni. De obicei, astfel de site-uri sunt tematice i sunt foarte intense la nivel grafic, dar menin un profesionalism deosebit prin execuia tehnic la nivel vizual. Un site de prezentare avansat are un grad foarte redus de accesibilitate. Site-urile portal sunt adesea foarte ncrcate vizual i la nivel de coninut, ticsite cu articole mici, legturi externe sau spre alte pagini i bannere de tot felul: pop-ups, pe coloane, verticale / orizontale, etc. Teoretic scopul acestora este de a ine la curent utilizatorii cu tiri dintr-o gam larg de domenii: de la tiin pn la art sau politic intern i extern. Layout-ul este structurat pe multiple coloane i chenare, iar la nivel de design rareori se poate spune c este degajat sau c se transmite ceva. Structura acestor site-uri este deseori foarte elaborat i stufoas. Un vizitator pe site-uri portal se poate pierde relativ uor i poate deveni confuz datorit multitudinilor de pagini. Site-urile oficiale care reprezint diferite instituii guvernamentale, academice sau corporaii trebuie realizate n mod profesional la toate nivelele. La nivel de design, se ia n vedere profilul instituiei i mesajul pe care aceasta dorete s-l ntipreasc n opinia public, de obicei concepte cheie precum ncredere, consecven, inovaie, etc, i se studiaz publicul int pentru a se cunoate cum se poate transmite un astfel de mesaj, idee sau concept. Se realizeaz un corporate brand, o imagine i o identitate vizual care trebuie s fie uor de recunosc de clieni: sigl, interfa de site, brouri, cataloage, campanii publicitare, spot-uri TV, etc. Toate trebuie realizate n aceeai linie de design, de concept vizual. Se prefer design-uri degajate care transmit o stare de serenitate. La nivel de structur site-ul trebuie s fie simplist sau foarte bine organizat, nct s permit o navigare ct se poate de facil. Coninutul trebuie scris folosind un limbaj formal, concis i obiectiv. Instituia sau corporaia trebuie prezentat pe nelesul vizitatorilor siteului. Oamenii navigheaz pe Internet n mod superficial, scaneaz rapid coninutul, nu citesc n detaliu; din acest motiv coninutul este de obicei realizat s faciliteze scanarea acestuia. Se folosesc liste neordonate, se pune emfaz pe cuvinte cheie, utiliznd text aldin, niciodat subliniat deoarece se creeaz confuzia cu un text de tip legtur, hyperlink. n multe cazuri, se investesc resurse n oamenii care elaboreaz coninutul pe astfel de site-uri pentru a se adresa vizitatorilor ct mai bine i ntr-un mod n care reprezint instituia. La nivel tehnic, se folosete mai mult HTML i CSS. Deseori, astfel de site-uri au un grad de accesibilitate semnificativ mai ridicat dect pe alte tipuri de siteuri. [64]

49

Studii comparative

2 Studii comparative
n cele ce urmeaz voi analiza mai multe site-uri academice, din Romnia i din strintate. Pentru realizarea lucrrii de licen am ales trei site-uri academice a unor universiti de renume internaional i trei site-uri academice romneti. Acestea sunt: Stanford University University of Oxford Stanford, California, SUA www.stanford.edu www.cmu.edu www.upb.ro www.uvt.ro www.uaic.ro Carnegie Mellon University Pittsburg, Pennsylvania, SUA Universitatea Politehnic din Bucureti Universitatea de Vest din Timioara Universitatea Alexandru Ioan Cuza din Iai

Oxford, Anglia, Marea Britanie www.ox.ac.uk

Pentru a realiza site-ul Universitii Aurel Vlaicu din Arad am analizat considerabil mai multe site-uri romneti i strine: MIT, Rice University, Princeton, etc. Studiul a avut ca scop cunoaterea amnunit a site-urilor academice: ce tipuri de layouturi se folosesc, cum sunt organizate i structurate paginile, informaiile pe astfel de siteuri. ns, pentru a exemplifica principalele observaii i a argumenta felul n care a fost realizat site-ul www.uav.ro am ales un eantion de cte trei site-uri academice. Aceste site-uri vor fi analizate din mai multe perspective. Fiecare web site va fi analizat din punct de vedere vizual, tehnic i la nivel de coninut i structur. n analiza vizual se va discuta despre: proporiile i spaierile ntre elemente i aezarea lor pe ecran, aspectul general al interfeei, tipul de layout i structura vizual, culori i fonturi utilizate. La nivel tehnic discuia va fi despre tehnologiile folosite, funcionalitile principale oferite utilizatorilor i un accent deosebit va fi pus pe accesibilitatea site-urilor la nivel vizual i tehnic. Ce tip de coninut se afl pe prima pagin din site, tipul de informaii i modul de prezentare vor fi reliefate n seciunea dedicat analizei coninutului. Se va pune accent i pe sistemul de navigare (meniurile) i structura site-ului. n final se vor face constatri asupra consecvenei site-urilor la o navigare mai aprofundat. Este meninut acelai design i acelai nivel de accesibilitate pe toate paginile sau se schimb frecvent i nu este meninut nici o caracteristic a paginilor precedente? Pe parcursul analizei fiecrui site vor fi oferite multiple capturi de ecran pentru a ilustra ceea ce se discut. n ncheierea capitolul voi prezenta diferenele i asemnrile observate ntre site-urile academice strine i romneti. Trebuie spus faptul c site-urile romneti alese s-au schimbat de la data lansrii site-ului uav.ro. Pentru aceast lucrare voi analiza site-urile actuale, ns cnd site-ul uav.ro era n stagiul de proiect, au fost analizate versiunile de atunci disponibile. De aceea voi prezenta pe scurt capturi de ecran cu versiunile precedente ale site-urilor, pe lng analiza versiunilor actuale.

50

Studii comparative

2.1 Site-uri de universiti cu renume internaional

2.1.1 Stanford University

Prima pagin pe www.stanford.edu

Fig. 52

Interfaa site-ului are o lime fix. Layout-ul este mprit n mod clar n seciunile cunoscute: antet, coninut i subsol. Coninutul este divizat n trei sau dou coloane verticale i pe seciuni orizontale care formeaz chenare. Se pot observa la o atent privire cum acestea sunt reliefate prin linii subiri i foarte transparente, subtile. n general, elementele sunt bine aliniate i exist spaieri suficient de mari ntre elemente. n antet se gsesc sigla universitii, o bar de meniuri orizontal i n dreapta antetului utilizatorii pot gsi funcionalitatea de cutare n site. Sigla universitii are o dimensiune considerabil ns nu este aliniat pe orizontal cu elementele vizuale ale funcionalitii de cutare. Lng cmpul de cutare apar i legturi spre pagini de orientare n site. Bara de meniuri este relativ bine realizat. Se gsesc un numr redus de meniuri, ceea ce ofer un confort n navigarea site-ului. O funcionalitate deosebit din antet este opiunea aezat n stnga, sub bara de meniuri, ce permite expandarea meniurilor. Meniurile de nivelul doi sunt afiate pe coloane. Se poate observa cum iconia de expandare nu este aliniat cu textul propriu-zis: Show/Hide expanded menus. Implementarea tehnic las de dorit deoarece cnd se schimb pagina, se pierde setarea. Site-ul nu nregistreaz starea ntr-un cookie, pentru a tii ulterior dac meniurile sunt expandate sau nu.

51

Studii comparative

Meniurile expandate

Fig. 53

n subsolul site-ului se afl centrate cteva legturi de relevan redus i aspecte legate de copyright, date sumare de contact i termeni i condiii. Elementele din antet i din subsol sunt tipice pe web i nu ies din context. n partea de coninut, n funcie de pagini, exist dou sau trei coloane. Fiecare chenar din coninut este delimitat cu o linie i mai groas i cu o culoare nchis. Sub titlurile paginilor apare un breadcrumb care indic poziia curent n ierarhia paginilor, n structur, pentru a facilita navigarea n site. Siteul nu reuete s fie realmente consecvent, deoarece n unele cazuri breadcrumb-ul nu apare, iar titlurile de nivelul doi nu sunt stilate la fel de fiecare dat. Uneori titlurile de Fig. 54 nivelul doi sunt stilate ca titluri de Antetul pe diferite pagini chenare, alteori ca titluri pentru coninut cu sau fr sublinierea groas. O alt observaie este c breadcrumbul nu apare de fiecare dat sub titlul pagini, uneori apare n partea superioar a coloanei centrale. Pe prima pagin se gsesc cteva tiri expandate, n coloana central, iar sub acestea alte titluri. n coloana din stnga sunt listate evenimente din cadru universitar i evenimente sportive. Data fiecrui eveniment nu este aliniat orizontal cu numele evenimentului. Utilizatorii au la dispoziie fluxuri RSS pentru a se abona la tiri sau evenimente. Pe dreapta sunt o varietate de legturi spre diferite pagini i site-uri, inclusiv pe reele sociale. n ansamblu, interfaa este degajat i simplist. Se utilizeaz culori calde. Ambiana este mbogit prin utilizarea de imagini viu colorate ca splash, tip antet, n partea superioar dedicat coninutului. Singura problem minor n modul n care au fost alese culorile este la bara de meniuri. Culorile utilizate pentru text i fundalul butoanelor nu creeaz un contrast suficient de mare, astfel lizibilitatea lor este puin redus. O alt problem ar fi c nu exist o difereniere vizual ntre legturi vizitate i nevizitate. Din perspectiva accesibilitii, este de preferat s se foloseasc culori distincte pentru legturile vizitate i cele nevizitate, pentru a facilita navigarea. Se folosete un font cu ampatamente pentru titluri (Georgia), iar pentru restul textelor un font lineal (Arial). Titlurile chenarelor i de nivelul doi sunt scrise cu majus52

Studii comparative cule i cu interletr foarte generoas. Paragrafele nu sunt indentat, dar sunt delimitate cu un spaiu suficient de mare. Peste tot, textele sunt aliniate pe stnga, excepie cele din subsol. Dup o navigare mai aprofundat se poate observa c n antet apare titlul seciunilor principale din site: Visitor information, Office of Fig. 55 graduate admissions, etc. Acest artiTitlul seciunilor principale lng sigl ficiu n designul site-ului este interesant, ns nu de apreciat, deoarece degradeaz aspectul per ansamblu. Textul este transformat ntr-o imagine bitmap, este rasterized. Asta nseamn c nu apare ca text propriu-zis n HTML. Prin urmare nivelul de accesibilitate al site-ului este puin mai sczut. Textul putea fi poziionat utiliznd HTML i CSS. Site-ul este implementat utiliznd HTML i CSS. Modul n care este realizat permite o navigare destul de facil cu aplicaii precum Lynx, care afieaz doar HTML. Coninutul HTML este bine separat de prezentare. O mic excepie apare la diaporame. Toate diaporamele apar listate n HTML sub forma: Slide1, Slide2, Slide3, etc. Pentru meniurile de nivelul doi care apar la expandare, s-au folosit tabele. n captura de ecran alturat, se observ cum meniurile apar n coloane de tip tabel n HTML. Sub acestea se afl lista lung de slide-uri. Era de preferat s nu fie folosit tabel i cu certitudine, s nu apar lista de diaporame.

Fig. 56

Standford.edu ncrcat fr imagini i stilare CSS

Stilurile CSS pentru dispozitivele mobile sunt n general acceptabile, dar nu este suficient de bine optimizat modul n care se utilizeaz spaiul redus de pe ecran. Aspectul general nu este ngrijit. Lista de slide-uri apare pe ecranul celularului. n cazul unei navigri uzuale, dac se dezactiveaz execuia de JavaScript nu mai apar diaporamele i nici opiunea de expandare meniurilor principale. ns, site-ul rmne navigabil. Coninutul este bine realizat i scris, nu exist probleme evidente la nivel de stilare. Exist multiple pagini dedicate tururilor virtuale, cu poze i filmri care prezint campusul i universitatea. Structura site-ului este destul de bun ns, foarte vast, iar modul de navigare ncearc s focalizeze utilizatorul pe diferite seciuni din site. De pe prima pagin multe opiuni din meniuri fac trimitere spre pagini care schimb n ntregime meniurile. Alte legturi duc spre site-uri complet diferite ale altor departamente, faculti sau proiecte universitare. n general, un vizitator poate deveni confuz cnd meniurile sunt schimbate la fiecare click, sau mai grav, cnd interfaa este schimbat. Adeseori, vizitatorii se pierd prin astfel de site-uri.

53

Studii comparative

2.1.2 Carnegie Mellon University

Prima pagin pe cmu.edu

Fig. 57

Interfaa site-ului este deosebit. Este foarte modern i plcut. Limea este fix, aliniat n stnga ecranului. Sunt folosite culori calde, dar este sobru. Elemente din design sunt foarte bine aliniate. Layout-ul este foarte bine structurat i toate paginile urmeaz acelai design, cu mici schimbri. Site-ul este deosebit de consecvent, aproape pe toate paginile diferitelor faculti i departamente. Interfaa este integral mprit pe trei coloane. n coloana stng se afl meniurile, iar sus se afl sigla universitii sau a unui departament, proiect, etc. Sub sigl, apare opiunea de cutare n site. Pe prima pagin, splash-ul este considerabil mai mare i peste el este suprapus un text cu un fundal semitransparent n care se prezint o realizare academic. Sub splash, n multiple chenare aezate orizontal, sunt prezentate cteva realizri n cercetarea academic. Tot specific acestei pagini, sub meniuri, n coloana stng, apare o list de tiri i evenimente ntr-o culoare prea deschis pentru fundalul alb. La o prim vedere, prima pagin poate prea srac n informaii, dar efectul produs este pozitiv: vizitatorul nu

54

Studii comparative este copleit de un noian de informaii i legturi, ci este pus n faa unei pagini plcute, cu coninut la obiect.

O pagin oarecare pe site-ul principal al universitii

Fig. 58

Celelalte dou coloane au un antet n care exist o bar cu legturi scrise n majuscule spre alte pagini, n funcie de pagina curent i o imagine splash de nlime variabil care se schimb frecvent. n coloana central coninutul apare ntr-un cadran. nafara cadranului apare ntotdeauna un breadcrumb. Titlul paginii apare ntr-un cadran suprapus pe jumtate cu imaginea splash. n acest mod se creeaz iluzia de adncime, acest efect nu apare pe toate paginile. n coloana din dreapta, apar alte chenare cu diferite legturi i informaii secundare. Titlul acestor chenare apare n partea inferioar a lor. Aceast coloan nu apare ntotdeauna. Cnd se navigheaz pe site-urile altor departamente sau proiecte, sigla CMU este redus n dimensiune. Apare o bar roie de limea site-ului ce are o nlime redus. Pe aceasta bar se gsete n partea dreapt opiunea de cutare n site. Opiunea de cutare din coloana dedicat meniurilor dispare. n locul siglei mari a CMU, apare sigla proiectului sau a departamentului.

O pagin oarecare a departamentului de sport

Fig. 59

Modul de navigare este destul de bun. Meniurile sunt expandate doar dup ce se face click. La nivele mai adnci n structur, meniurile aflate la nivelul doi sau trei sunt ascunse n mod dinamic pentru a facilita navigarea. Site-ul principal are un o pagin site map (hart site) care prezint ntr-un mod clar structura site-ului.

55

Studii comparative Subsolul site-ului este o bar gri, fr coninut. Exist un subsol al coloanelor dedicate coninutului. Acolo apar date de contact i legturi spre pagini de relevan redus. Trebuie observat c aceste date nu sunt aliniate pe vertical, n stnga, cu coninutul paginilor. Pentru textele din interfa i coninut sunt folosite doar fonturi lineale (fr ampatamente). Coninutul este scris folosind Verdana, pentru meniuri se utilizeaz Helvetica. Dimensiunea textelor este n general cam redus pentru coninut. Pe ct de bine este realizat site-ul la nivel vizual i pe ct este de consecvent, ateptrile nu sunt onorate la nivel tehnic. Implementarea designului se bazeaz pe tabele. Coloanele, coninutul, aproape totul se bazeaz pe tabele. Navigarea cu aplicaii care afieaz doar text poate fi foarte dificil. Gradul de accesibilitate este redus considerabil. n mod ideal, coninutul trebuie s fie liniar, tot ce ine de prezentare s fie realizat din CSS. Spre deosebire de interfaa site-ului Fig. 60 stanford.edu, n aceasta, se face distincia ntre CMU.edu ncrcat fr imagini i stilare CSS legturi vizitate i nevizitate. Stilurile CSS specifice dispozitivelor mobile aplicate pentru interfaa site-ului sunt foarte bine realizate. Navigarea de pe celulare sau alte dispozitive similare este plcut i din punct de vedere estetic designul este suficient de ngrijit. Stilarea coninutului este minimal i nu stric aspectul interfeei. Paragrafele sunt separate de un spaiu de 10px, fr indentare. Singurele excepii relativ minore ar fi culoarea legturilor (prea deschis) care le face s fie dificil de citit, i uneori se gsesc tabele cu borduri nestilate n articole. n general, articolele sunt bine redactate i nu exist erori evidente. Opiuni i faciliti oferite utilizatorilor: cutare, informaii de contact bine organizate, hri pentru campusuri, tur virtual comprehensiv (multiple filme narate, poze i descrieri) al cldirilor universitii i a campusului implementat n Flash, fluxuri RSS pentru abonare la tiri, articole pentru pres sau evenimente i hart site.

56

Studii comparative

2.1.3 University of Oxford

Prima pagin pe www.ox.ac.uk

Fig. 61

De pe prima pagin suntem ntmpinai cu ceva deosebit. Prima pagin este o doar o privire per ansamblu a ntregului site, un fel de hart site. Pe stnga, n antet se gsete sigla universitii Oxford ntr-un cadran cu contur alb care nu nfrumuseeaz interfaa, ci din contr. Pe dreapta sunt opiuni avansate de cutare n site i legturi spre pagini mai puin relevante. Urmtoarea seciune este un splash avansat implementat n Flash. Acest splash prezint tiri pe scurt. ns, n partea inferioar pot fi vzute mai multe butoane. Prin acestea sunt prezentate diferite personaliti din cadrul academic Oxford, evenimente i proiecte n derulare. Sub splash, exist o hart a site-ului organizat pe multiple coloane i dou rnduri. Principalele meniuri sunt afiate n majuscule, iar cele de nivelul doi sunt scrise n mod obinuit i au o dimensiune redus a fontului. n subsol s afl cteva legturi spre alte pagini: despre site, o hart a site-ului, contact, etc. ntregul layout are o lime fix i este centrat. Paleta de culori este foarte redus. S-a folosit doar un albastru nchis, culoarea dominant. Textele sunt albe i se utilizeaz doar fonturi lineale: Trebuchet MS, Arial, Verdana, etc. Pe toate paginile aceast palet de culori reci este meninut. Doar splashul i imaginile din coninut au culori variate i diversific experiena. Dup o navigare mai ndelungat se poate observa c doar prima pagin este complet albastr. Toate celelalte pagini sunt mprite n dou: antetul i menine culoarea,
57

Studii comparative iar partea inferioar este pe alb. ns, textele din aceast seciune dedicat coninutului nu ies din paleta de culori stabilit. Legturile, titlurile i alte elemente din design sunt doar n nuane de albastru.

O pagin oarecare de pe site-ul principal al universitii Oxford.

Fig. 62

n antet apare o bar orizontal cu multe meniuri. Meniurile de nivelul doi apar cnd mouse-ul este deasupra unui buton. Din punct de vedere estetic, acestea nu sunt plcute deoarece sunt prea nghesuite, la fel i bara principal. Trebuia redus numrul de meniuri principale, iar pentru sub-meniuri era necesar un font mai mare i spaiu mai mare ntre ele, vertical mai rsfirate. Imediat sub antet apare un breadcrumb. Sub acesta se afl coninutul propriu-zis al fiecrei pagini. Ca de obicei, seciunea din layout pentru coninut este divizat n trei coloane. n coloana din stnga apar meniurile de nivelul doi sau de mai multe nivele. naintea lor apare i titlul meniului principal. n centru, se afl articolul pagini cu un titlu bine stilat. n dreapta, coloana are mai multe seciuni n funcie de pagin, cu subtitluri, unde apar fie legturi spre alte pagini, fie informaii secundare. Navigarea este foarte similar cu cea de pe site-ul analizat nainte: Carnegie Mellon University. Meniurile din coloana stng au relativ acelai mod de funcionare: opiunile sunt ascunse n mod dinamic pentru a simplifica meniul. n general, layout-ul este bine fcut. Elementele din design sunt bine aliniate l datorit culorilor reci i monocromatice (doar pe albastru) este foarte sobru. Uneori coninutul de pe unele pagini, din cele trei coloane, nu este aliniat pe vertical. Gradul de consecven a designului la o navigare extins este ridicat. Interfaa se schimb doar cnd se navigheaz pe paginile din antet: staff, studeni, alumni, etc. Schimbrile efectuate la nivel de design nu sunt cele mai bune. Sigla universitii este mutat n dreapta, iar n locul ei apare titlul site-ului cu majuscule i mare: Alumni, Staff, etc. Mai mult dect att, sigla apare n moduri diferite n funcie de pagina vizitat: alumni, staff, etc; consecvena este astfel mult redus. Pe paginile din seciunea Alumni se creeaz impresia c nu ar fi loc n lime ceea ce nu este valabil.
58

Studii comparative Problemele nu se rezum doar la asta. Pe paginile dedicate absolvenilor (Alumni) meniul principal nu mai poate fi citit de nevztori sau chiar de cei cu deficiene vizuale mai mult sau mai puin minore. Culoarea textelor din meniul principal este un albastru prea nchis. Paleta de culori a fost mbogit pe paginile staff-ului cu o culoare nou: o nuan de portocaliu pentru textele din antet. Imaginea urmtoare reliefeaz probleme menionate.

Diferene ntre antetul pe paginile Alumni i Staff

Fig. 63

La fel ca pe celelalte site-uri, coninutul este bine redactat i stilat. Nu par s existe erori evidente. Paragrafele nu au indentare, dar sunt rsfirate. Ceva deosebit este opiunea de site map care ncarc un popup peste site cu harta site-ului. Structura site-ului este foarte bogat, tipic site-urilor academice, ns paginile de site map nu scot n eviden paginile de nivelul doi, trei, patru, etc, ci se rezum doar la nivelul doi sau trei la fel i pe celelalte dou site-uri strine analizate. Turul virtual pe site-ul universitii Oxford se rezum n principal la hri, informaii i poze panoramice. Pe acest site se pune mai mult accentul pe intrarea n contact cu ei pentru a pune ntrebri. Astfel, uneori apar opiuni de login i se sugereaz crearea unui cont pentru a pune ntrebri. La fel ca pe celelalte site-uri analizate pn acum, utilizatorii se pot abona la fluxuri RSS pentru tiri sau evenimente. La nivel tehnic, site-ul este implementat n HTML i CSS. Separarea dintre codul HTML i prezentarea CSS este foarte bine realizat. Site-ul este foarte accesibil din acest punct de vedere. Are o comand din tastatur pentru a sri peste meniuri i a ajunge la coninut: tasta S. Dac se dezactiveaz execuia JavaScript, site-ul rmne funcional. Interfaa nu dispune de nici un CSS special pentru dispozitive mobile.
Fig. 64

Site-ul ox.ack.uk ncrcat fr imagini i fr stiluri CSS 59

Studii comparative

2.2 Site-uri de universiti romneti

2.2.1 Universitatea Politehnic din Bucureti

Prima pagin pe upb.ro

Fig. 65

Layout-ul este de lime fix, centrat pe orizontal. n antet, pe stnga, se gsete emblema universitii i numele ei scris cu un font stilizat cu ampatamente i fr diacritice. Pe dreapta apare data curent i dou legturi: Home i Contact. Fiind un site romnesc, trebuia scris Acas n loc de Home. La fel, data este scris parial n englez. De exemplu, azi vineri 8 aprilie apare pe site: vineri apr 08th. Mai mult, apr 08th este scris pe un fundal rou, ceea ce scade lizibilitatea textului. Sub antet, avem o bar albastr cu meniurile principale scrise cu alb. Pentru fundal se utilizeaz un degrade de bun gust. Cnd mouse-ul este deasupra butoanelor apare o list bogat de meniuri n cascad de nivelul doi i trei, bine structurat la nivel vizual. Acestea sunt lipsite ns de un reper pentru aliniere. Ar putea fi aliFig. 66 Designul meniurilor niate cu textul meniului de care aparin. O problem major n funcionalitate apare n Firefox 4. Uneori meniurile nu mai dispar chiar dac mouse-ul a ieit din zona meniurilor. Asta creeaz inconveniene majore n navigarea site-ulu, mai ales datorit dimensiunii lor. De pe prima pagin suntem informai c site-ul este n etapa BETA (de testare), n stnga sus, n col. O astfel de meniune nu este o dovad de profesionalism i nici nu absolv problemele de pe site.
60

Studii comparative n subsolul site-ului, apar meniuni de copyright, cine a realizat site-ul i alte informaii de relevan redus. n general, layout-ul nu este ngrijit. La o prim impresie interfaa pare bine realizat, fiindc este degajat. Se folosesc culori relaxante, accente de rou i albastru pe alb i elementele vizuale nu sunt nghesuite. ns, la o privire atent putem observa c elementele vizuale nu sunt aliniate n nici un mod. Mai precis, textele n subsol sunt centrate pe orizontal. Sigla se afl mai la stnga dect textul primului buton din meniul principal. Pe prima pagin exist nc o bar de meniuri sub splash-ul implementat n Flash (diaporama cu poze), unde textele sunt scrise n majuscule. Textul primului buton din aceast bar nu este aliniat cu nici un alt element, pe vertical. Mai n jos, n pagin avem cteva chenare pentru: evenimente, tiri, etc. ns, textul primului chenar nu este aliniat cu nici un alt element. Coninutul acestora este centrat i nu sporete frumuseea designului. Imaginea urmtoarea reliefeaz aceste lucruri.

Linii de ghidare suprapuse pe interfaa original (stnga) i varianta corectat (dreapta)

Fig. 67

Pentru a ilustra clar problemele, am folosit linii de ghidare. Se observ cum pentru fiecare element (sigl, primul buton din bara principal, primul buton de sub splash i pentru titlul Evenimente) am trasat o linie vertical. Pentru layout sunt patru linii, iar pentru meniu, trei. n cea de-a doua instan a site-ului, dup corecturile efectuate n Photoshop, toate elementele din layout-ul general i din meniul n cascad sunt aliniate. Din nenumratele linii au mai rmas doar dou linii de ghid n propunerea oferit aici. Dup o navigare mai aprofundat putem observa c uneori nu apare subsolul siteului pe toate paginile (de ex. pe pagina Faculti) i multe pagini sunt fie goale, fie n construcie. Coninutul nu este organizat pe coloane. Meniuri de nivelul doi i trei, din stnga, reprezint singura coloan care apare n layout. Problema alinierii elementelor din design este valabil i n acest caz. Textele meniurilor din coloan nu sunt aliniate nici cu sigla, nici cu primul buton din bara principal de meniuri. Se folosete un degradeu rou, prea intens i strident, pentru categoriile de meniuri. Mai mult, uneori apar legturi spre diferite documente PDF, Word a cror iconie nu se aliniaz cu lista de leg-

61

Studii comparative turi din meniu. Coninutul este precedat n plan vertical de un breadcrumb care nu este aliniat cu primul text din bara de meniuri vertical din stnga. Peste tot se folosete doar un font lineal: Arial. Se poate spune c este o simplitate exagerat.

O pagin oarecare pe site-ul upb.ro. A se observa cum elementele din bara de meniuri nu sunt aliniate ntre ele i nici cu nceputul coninutului.

Fig. 68

La nivel de coninut, trebuie apreciat faptul c titlurile i paragrafele sunt aliniate. Paragrafele nu sunt indentate, ns sunt bine rsfirate, cu un spaiu de 12px. Un alt aspect pozitiv este modul de prezentare a site-ului. Vizitatorul nu este asaltat cu prea multe informaii i sigle ale altor instituii sau parteneri direct pe prima pagin sau pe alte pagini. Nu apar erori evidente de stilare i abuzuri n acest sens. Singurele observaii ar fi c nu sunt utilizate n mod consecvent diacritice. n general, se poate cu uurin spune c site-ul este foarte consecvent, pe toate paginile i menine acelai aspect. Lipsesc funcionaliti eseniale din site: hart site (site map), opiuni de cutare, fluxuri RSS/Atom pentru tiri sau evenimente i tur virtual. Nu exist o seciune dedicat cu poze din campusuri i cldiri sau cu hri. Pagina de contact nu are nici un formular. Exist cteva hri de calitate inferioar, pozele din coninut sunt la dimensiuni mici, foarte rar se poate face click pentru a vedea poza la rezoluia original. Uneori, chiar pozele poziionate cu proprietatea CSS float, nu sunt bine aliniate, ci sunt decalate.

62

Studii comparative La nivel tehnic, site-ul este implementat n CSS i HTML. ns, separarea este foarte slab ntre codul HTML, pentru coninut, i codul CSS, de prezentare. Pentru layout-ul general se folosete CSS n mare msur i destul de bine, ns pentru coninut sunt folosite tabele i proprieti CSS scrise inline, direct n HTML. Din aceast perspectiv, gradul de accesibilitate nu este ridicat. Nu exist opiunea de a sri peste lista de meniuri, de a sri direct Fig. 69 Upb.ro fr stilare CSS i fr imagini la coninut. Meniurile de nivelul doi i trei, n coloana din stnga, care apar pe toate paginile (exceptnd prima pagin) sunt dup seciunea dedicat coninutului, la nivel de cod HTML. Legturile vizitate i cele nevizitate nu sunt colorate distinct. Dac se dezactiveaz execuia de JavaScript, toate meniurile care ar trebui s apar doar cnd mouse-ul este deasupra unui buton din bara principal, apar de la sine, fr aciuni din partea utilizatorului. Astfel, ntreaga navigare a site-ului este blocat de aceste meniuri foarte mari care acoper coninutul. n subsolul paginilor exist o legtur spre site-ul vechi, dar nu funcioneaz, astfel nu se poate oferi aici o captur de ecran cu site-ul vechi care exista la data lansrii uav.ro i nici pe Internet Archive Wayback Machine nu exist o arhiv relevant a acestui site. Trebuie apreciat faptul c aceast interfa pare s fie foarte bine optimizat pentru navigarea cu dispozitive mobile. Sunt aplicate stiluri CSS care afieaz interfaa ntrun mod accesibil. O alt particularitate interesant de observat este forma adreselor pe site: www.upb.ro/ro/nume-pagin. Prin utilizarea /ro/ n adres se creeaz impresia c site-ul ar fi disponibil i n alte limbi, dar nu exist nici o opiune n interfa pentru a schimba limba.

63

Studii comparative

2.2.2 Universitatea de Vest din Timioara

Prima pagin pe www.uvt.ro

Fig. 70

Layout-ul are o lime fix i este centrat. Pe prima pagin antetul este relativ nalt i are o imagine splash frumoas i atractiv. naintea ei, pe dreapta se afl trei steaguri care permit schimbarea limbii: romn, englez Fig. 72 i german. Pe imagine se gsesc funcionalitile contact, Cutare i hart site hart site i cutare. Din pcate dimensiunea acestor elemente din design este foarte redus. Vizitatorul trebuie s fie foarte atent s le gseasc. Dup mult timp de privire atent, poate fi gsit i sigla universitii UVT: ea este situat n stnga, lng textul Universitatea de Vest din Timioara. Sigla este albastr, cu saturaie mare. Alegerea greit a culorii pentru sigl reprezint o eroare major n designul acestui site. Fundalul de culoare albastr, relativ nFig. 71 chis, face realmente dificil distingerea siglei fa de imaginea Sigla UVT splash. Sigla trebuia s fie alb sau portocaliu deschis. Sub imaginea splash se afl bara de meniuri orizontal compus din dou linii. Prima linie, pe nuane de galben spre portocaliu deschis se afl principalele meniuri. Pe fiecare buton se afl o sgeat alb supradimensionat, care stric aspectul acestora. Degradeul folosit pentru ntreaga bar este prea intens. Cnd mouse-ul se afl pe un buton, apar meniurile de nivelul doi pe a doua linie. Din nefericire pentru realizatorii site-ului, pe Firefox 4, nu apar deloc.

64

Studii comparative Pe prima pagin, n coninut se afl patru coloane care ncearc s prezinte vizitatorilor o privire per ansamblu asupra ntregului coninut din site. n prima coloan Despre noi sunt listate o multitudine de legturi spre pagini din site, ns nici un cuvnt despre universitate. n mod iritant, cnd mouse-ul se afl deasupra legturii Faculti, coninutul coloanei este mpins i apare lista facultilor. O astfel de funcionalitate nu uureaz navigarea, ci dimpotriv, pentru toate categoriile de utilizatori accesibilitatea site-ului este redus. n coloana Nouti se poate observa cum primele elemente listate au data aezat n stnga, iar n seciunea evenimente, dat se afl n Fig. 73 dreapta. Alegerea este neprofesional i aceast difereniere deColoana Nouti gradeaz i mai mult calitatea designului. Trebuia s fie la fel, pentru consecven. Se observ c titlurile subseciunilor evenimente i anunuri sunt ilizibile din cauza culorilor nepotrivite. Trebuie apreciat c acest site ofer utilizatorilor posibilitatea s se aboneze la fluxuri RSS pentru fiecare list: tiri, evenimente i anunuri. La modul general, pe prima pagin, textele nu sunt realmente lizibile, n special n ultimele dou coloane, din dreapta. Textele sunt relativ mici. Culoarea portocalie pentru anumite texte n combinaie cu nuana fundalului, le face ilizibile complet. n ansamblu, interfaa este destul de plcut i paleta de culori este diversificat. ns, are aceleai probleme ca site-ul upb.ro. Elementele din design nu sunt aliniate. Tendina general este de a centra titlurile. Restul paginilor din site au un layout bine fcut. Antetul este mult mai mic n nlime pe paginile generale o alegere bun. Seciunea dedicat coninutului este mprit n trei coloane: o bar vertical n stnga cu meniurile de nivelul doi, iar n centru coninutul propriu-zis. n dreapta, a treia coloan, apare identic aproape pe toate paginile, fr s fie schimbat coninutul acesteia n funcie de pagini. Titlurile de nivelul doi n articole sunt scrise cu majuscule i au o culoare nepotrivit: portocalie. Interletra este foarte mare. Din cauza culorii i interletrei exagerate, aceste titluri sunt foarte greu de citit, chiar pot fi considerate ilizibile. Primele dou coloane sunt precedate pe vertical de dou bare orizontale. Prima bar este pentru un breadcrumb aliniat pe dreapta. Era considerabil mai estetic dac era aliniat pe stnga, mpreun cu titlul din a doua bar. n cea de-a doua bar apare titlul paginii principale din site, scris n majuscule i interletr prea mare. Este de remarcat c acest titlu este aliniat cu ceea ce se afl n pagin.

65

Studii comparative

O pagin oarecare din site

Fig. 74

Pe toate paginile exist o seciune de subsol care are limea primelor dou coloane aa cum sunt definite pe paginile generale. Subsolul este bine separat vizual i apar meniuni de copyright, legturi spre diferite pagini, etc. Coninutul la prima vedere pare bine scris i redactat. Exist unele pagini unde ar putea fi mai bine stilat. La fel ca pe upb.ro, peste tot se folosete un singur font lineal: Arial. Pe site se utilizeaz suficient de consecvent diacriticele pentru texte. Pagina de site map este bine realizat i prezint exact structura site-ului, fr s lase la o parte paginile aflate adnc n ierarhie. Designul putea fi mai bine realizat, prin dispunerea legturilor pe coloane. Pagina de contact este destul de bine realizat. Utilizatorul are la dispoziia sa un formular prin care pot fi contactate departamente sau faculti. Funcionalitatea de cutare pe site este nefuncional. La o simpl cutare a termenului istoric, nu a fost returnat nici un rezultat. Dar, pagina Istoric exist pe site n meniul principal Universitate. Site-ul nu dispune de un tur virtual al universitii i nici mcar de o galerie cu poze din cldiri sau campusuri. Stilurile CSS aplicate pentru handheld i celulare nu par s fie bine optimizate pentru navigarea de pe astfel de dispozitive cu ecrane mici.

66

Studii comparative La nivel tehnic, site-ul este implementat utiliznd HTML i CSS. Realizarea lui este tipic anilor 19952000, cnd interfeele erau implementate utiliznd doar tabele, iar CSS era minimal folosit. Gradul de accesibilitate al site-ului este aproape nul. n caz c execuia de cod JavaScript este imposibil pe sistem, meniurile principale rmn funcionale, ns bara orizontal secundar nu mai apare.

Fig. 75

Site-ul uvt.ro fr CSS i fr imagini

Site-ul nou al Universitii de Vest din Timioara are cteva pagini care par s semene cu unele pagini de pe stanford.edu. Las cititorii s decid dac este aa sau nu pe baza urmtoarelor dou capturi de ecran.

Stanford.edu - pagina Admissions (stnga) vs. www.uvt.ro - pagina Admitere (dreapta)

Fig. 76

Folosind Internet Archive Wayback Machine, s-a obinut o captur de ecran a siteul uvt.ro aa cum arta cnd site-ul uav.ro a fost n faza de proiect, noiembrie 2009 decembrie 2009. [65] Captura de ecran se bazeaz pe arhiva din nti martie 2009.

Interfaa veche a uvt.ro

Fig. 77

67

Studii comparative

2.2.3 Universitatea Alexandru Ioan Cuza din Iai

Prima pagin pe uaic.ro

Fig. 78

Aceast interfa este aezat n stnga ecranului i are o lime fix. Site-ul este fcut pentru rezoluia de 800 x 600 px. Actualmente, interfeele sunt realizate pentru rezoluia de 1024x768 sau 1280x1024. n general, designul pare nghesuit i se utilizeaz margini prea mici pentru a degaja elementele vizuale. Antetul site-ului este bine realizat, la modul general. Sigla universitii i textul aferent sunt poziionate exemplar, deoarece se suprapune cu bara albastr a meniurilor principale. Alinierea textului Universitatea Alexandru Ioan Cuza cu emblema universitii este foarte bun. Site-ul ofer opiunile urmtoare: schimbarea limbii, cutare n site i o hart site. Din nefericire, chiar dac designul antetului este bine realizat n general, tot se gsesc multiple probleme. Bara dedicat meniurilor ar trebui s fie mai nalt cu 50%, astfel marginile n jurul textelor ar fi mai mari. Sigla universitii ar putea fi i ea mai mare, cu aproximativ 25%. Lista de steaguri din antet pentru schimbarea limbii pare prea mare: francez, englez, coreean, german i rus impresionant. Din nefericire, orice limb am alege, vedem c traducerile sunt pariale. Apar texte n romn i limba dorit. Mai mult dect att, uneori pare s se schimbe limba fr intervenia utilizatorului.

68

Studii comparative Legtura spre Hart site, aflat lng cmpul de cutare n antet, are ntotdeauna culoarea alb, pe Fig. 79 Poziia legturii Hart site fundal alb (n toate navigatoarele moderne). Intenia dezvoltatorilor site-ului a fost una original: s nu fie gsit aceast pagin. ns, pentru aceast lucrare, eu am gsit-o i pot relata c pagina cu harta site-ului este bine realizat, chiar dac este ascuns n design. Structura site-ului este bine prezentat. Legtura spre aceast pagin apare n albastru doar cnd mouse-ul este deasupra ei. n bara de meniuri cnd mouse-ul este deasupra unui buton, apar meniuri n cascad. Fundalul acestor meniuri este alb, dar cu semi-transparen. Datorit imaginii splash ntunecate, textele meniurilor de nivelul doi sunt ilizibile. Soluia const n utilizarea unui meniu n cascad opac. Legturile meniurilor principale rmn active cnd utilizatorul se afl pe o pagin descendent ierarhic a unuia dintre ele. Singura problem este culoarea lor. Un meniu activ are culoarea albastr, ceea ce l face ilizibil, deoarece nu exist contrast suficient cu fundalul de culoare albastru nchis. Aceeai imagine splash este folosit pe toate paginile din site ca antet. n partea inferioar a acestei imagini, apare titlul paginii curente, n majuscule, de culoare alb. Titlul este ilizibil deoarece imaginea splash este glgioas, nu este predominat ntunecat sau predominant deschis, ci este format dintrun colaj cu foarte multe poze.

Fig. 80 Meniuri n cascad semi-transparente

Fig. 81

Titlul paginilor principale

Site-ul are un subsol general, unde apare data ultimei modificri, meniuni copyright i o legtur spre o pagin despre site. Paleta de culori este potrivit unui site academic, profesional, deschis i degajat. n general, interfaa ar arta mult mai bine dac layout-ul ar fi la fel de degajat prin utilizarea de margini i spaieri generoase ntre elementele vizuale. Pe prima pagin sunt expuse prea multe date, informaii i legturi. Coninutul primei pagini este format din patru coloane. n prima coloan se afl o multitudine de sigle Fig. 82 care reprezint diferite proiecte Subsolul de pe prima pagin a site-ului uaic.ro. Se observ lista de legturi spre faculti n chenar i lista de parteneri. academice. Coloanele centrale sunt dedicate listrii tirilor i evenimentelor. Aceste liste sunt bine realizate. Vizitatorii au la dispoziia lor multiple fluxuri RSS pentru abonare: tiri, evenimente, angajri i chiar pentru licitaii publice, etc. n ultima coloan apar date de contact, legturi spre reele sociale, etc. n partea de subsol exist un chenar cu fundal albstrui care listeaz
69

Studii comparative legturi spre diferitele faculti i departamente, fr nici o introducere, ci apar direct. Dac nu sunt sigle destule n prima coloana, n subsolul paginii, dup lunga list de legturi, vizitatorii au ocazia s vad i mai multe imagini cu sigle. O multitudine de parteneri sunt listai n subsol. n mod evident, pe prima pagin relevante ar fi doar coloanele centrale, iar restul ar putea fi eliminate. Toate paginile, exceptnd prima pagin, sunt formate dintr-o coloan dedicat meniurilor de nivelul doi i trei, n stnga, i o coloan pentru articol, coninut. n general, la nivel de coninut stilarea este prea abundent: text aldin, emfaz, texte centrate, uneori sunt folosite majuscule pentru titlurile paginilor (nu ntotdeauna), culori, etc. ntre paragrafe apar uneori spaii prea mari care nu au sens. Prima linie de text din coninut nu este ntotdeauna aliniat cu prima linie din coloana stng. Imaginile poziionate n coninut sunt uneori nealiniate cu textul din jur i uneori nu au marginile egale. De exemplu, textul ajunge pn la muchia imaginii pe o parte sau alta. Unele pagini sunt mult prea lungi, iar n unele cazuri sunt scrise n limbaj administrativ i juridic, neadaptat pentru web. Toate erorile de acest fel scad considerabil profesionalismul siteului i degradeaz aspectul vizual.

O pagin oarecare pe uaic.ro. De observat sunt marginile pozei i dimensiunea ei fa de coninut.

Fig. 83

Legturile vizitate i nevizitate nu sunt colorate distinct i nici nu exist implementat noiunea de breadcrumb pentru a indica unde se afl vizitatorul n structura siteului. n subsolul site-ului ar prea s existe un breadcrumb, dar nu funcioneaz n acest mod. Site-ul nu pare s dispun nici de o pagin anume de contact, unde s fie listate date de contact, adrese i un formular de contact. n mod obinuit, ar trebui s existe o legtur n antet, subsol sau n meniul principal spre pagina de contact. Exist o pagin sumar de nivelul doi n meniul Cercetare cu cteva date de contact. Turul virtual pe www.uaic.ro const n galerii de poze i panorame 360 implementate n Java. n galeriile de poze, imaginile sunt integrate n pagin la rezoluia ori70

Studii comparative ginal. Rezoluia lor este foarte mare, 3 - 5 megapixeli, dar n pagini sunt afiate la dimensiunea de 150 px deoarece se folosete atributul height n HTML pentru tag-ul <img>. Imaginile sunt redimensionate doar pe ecran pentru a avea loc n pagin, n design. Astfel, cnd un utilizator intr pe pagin principal Galerie Foto trebuie s descarce 22 mb, fiindc pozele sunt la rezoluia lor original. La fel i n galeriile Remember Virginia Tech sau Conferina exploratoarei Uca Marinescu, aproximativ 20 de megabytes pentru fiecare. O astfel de eroare este inadmisibil. Limea de band necesar este mult prea mare, iar o pagin de web realizat n acest mod consum foarte mult memorie n navigatorul web. Se ncetinete tot navigatorul. n mod corect, fiecare poz trebuia redimensionat la rezoluia din site, 150px, i salvat JPG sau PNG. La nivel tehnic interfaa este implementat utiliznd CSS i HTML. Separarea dintre cele dou este destul de bun. Site-ul poate fi navigat cu uurin utiliznd navigatoare de tipul Lynx. Realizarea tehnic, la nivel de interfa, a acestui site depete cu mult uvt.ro. Exist multe probleme la nivel de HTML. Chiar de pe prima pagin se poate observa c nu a fost folosit atributul alt pentru a descrie imaginile integrate cu tag-ul <img>. O alt problem este legat de meniurile n cascad. Dac este dezactivat execuia de cod JavaScript, meniurile n cascad din bara principal nu mai funcioneaz. Nici la nivel de surs HTML, nu mai apar listate. n rest, site-ul rmne navigabil. Dac JS este executat, fr CSS, acestea apar n linie i nu sunt separate deloc: fr linie nou sau spaiu ntre ele.

Fig. 84

Site-ul uaic.ro ncrcat fr JS, CSS i imagini

Site-ul are un CSS ce pare s fie destul de bine optimizat pentru dispozitive mobile, deoarece este navigabil cu uurin pe acestea. Interfaa acestui site nu a fost schimbat n mod vizibil din anul 2009. Coninutul este actualizat n mod frecvent.

2.3 Diferene i asemnri ntre site-urile strine i romneti

Din analiza efectuat asupra site-urilor academice se pot extrage multe concluzii cu privire la felul n care un site academic este fcut, la nivel tehnic, vizual i ce fel coninut exist pe astfel de site-uri. n general, un site academic este implementat n HTML, JavaScript i CSS. Se folosete Flash pentru video integrat n pagini i tururi virtuale avansate. Funcionalitile obinuite sunt: pagin de contact cu formular avansat, hart site i cutare avansat. Nu se folosesc animaii i sunete pe site-uri academice. Nici un site academic din cele analizate n aceast lucrare sau pentru realizarea proiectului, nu a avut implementate faciliti

71

Studii comparative care s augmenteze accesibilitatea site-ului: comenzi din tastatur, control asupra dimensiunii textelor, etc. La nivel de design, majoritatea site-urilor au un layout cu o lime fix i sunt aliniate fie n stnga, fie central. O interfa are seciunile obinuite: antet, coninut (adesea pe coloane) i subsol. n antet, se afl o sigl pe stnga, iar n dreapta opiunile cunoscute: contact, hart site, schimbarea limbii i / sau cutare. De obicei apare o bar orizontal cu meniurile principale i eventual meniuri n cascad. Pe nici un site academic nu apar n design bannere, popup-uri sau alte forme de publicitate. n antetul seciunii de coninut exist de obicei un breadcrumb i un titlu al paginii curente. Uneori, coninutul paginilor este mprit pe coloane. Cel mai adesea, exist o coloan pentru meniurile de nivelul doi i trei. n subsol, apar date cu privire la copyright-uri, date de contact sumare, autori i legturi spre pagini de relevan sczut. Culorile utilizate pe site-urile academice nu sunt stridente, ci se caut s fie specifice, s particularizeze imaginea universitii. n general, se folosesc palete de culori degajate care s menin un grad ridicat de lizibilitate a textelor. La nivel de coninut apar pe prima pagin urmtoarele: un splash mare, o imagine promoional, care prezint evenimente recente i/sau proiecte de anvergur. Aproape ntotdeauna prima pagin este format din coloane pentru a lista evenimente, tiri, proiecte, etc. Structura site-urilor academice este ntotdeauna vast, cu un numr mare de pagini aflate ntr-o ierarhie elaborat. Astfel, interfeele sunt gndite s acomodeze multitudinea de meniuri: bar orizontal, coloan de meniuri, meniuri n cascad, etc. Se poate observa cu uurin c design-urile site-urilor romneti sunt mai puin ngrijite, detalii de profesionalism sunt adesea neglijate: alinierea elementelor, margini i spaieri consecvente, etc. Aceeai situaie este valabil i la nivel tehnic, unde apar multe erori care degradeaz funcionalitile site-ului (cutare nefuncional), zeci de megabytes de descrcat, etc. Pe site-urile academice strine analizate nu am ntlnit situaii la fel de grave. Pe site-urile academice romneti nici sigla nu este precis definit n unele cazuri. Aceasta se schimb simultan cu fiecare site nou i apare n diferite moduri (emblema sau textul aferent sunt modificate dup placul designerului) n cazul uvt.ro, upb.ro sau altele studiate nafara acestei licene. n general, site-urile strine a universitilor de prestigiu sunt considerabil mai vaste i au mult mai mult coninut. n cazul acestor site-uri apare mult mai frecvent inconsecvena ntre pagini, deoarece exist multe departamente, faculti i site-uri dedicate proiectelor academice care nu sunt fcute de aceeai designeri i programatori. Pe site-urile academice romneti, gradul de consecven este ceva mai ridicat, deoarece acestea sunt mai mici au mai puin coninut. Site-urile romneti spre deosebire de cele strine, ncearc s ofere coninutul n mai multe limbi, dar nu prea se reuete asta, probabil datorit resurselor umane limitate.

72

Studii comparative Problema cea mai mare a site-urilor academice romneti se manifest la nivel de coninut, dac punem accent pe acesta. Stilarea coninutului este adeseori neprofesional, pare nengrijit i nearanjat. Mai mult dect att, coninutul nu este scris pentru web. Documente oficiale, de uz intern, sunt copiate n coninut, puse ca pagini foarte lungi n site - un fel de raw dump. De exemplu, regulamentele oficiale interne i structura universitii, a departamentelor i a facultilor, regulile de nscriere sau de a primi burs, apar sub form juridic-administrativ. Pe site-urile academice strine, nu am ntlnit astfel de pagini. Textele ar trebui citite de specialiti n marketing, de relaii cu publicul i scrise pe nelesul vizitatorilor unui site care scaneaz i nu citesc fiecare cuvnt. Un text trebuie s fie ct mai succint. O alt problem este abundena siglelor a partenerilor i lauda cu acreditri. n mod evident, este realmente neprofesional listarea aa-numiilor parteneri pe prima pagin, indiferent de aspectele ce in de marketing. Nu am gsit pe site-uri academice strine liste de parteneri. Nu mai elaborez asupra lipsei diacriticelor pentru texte, scrierea cu MAJUSCULE sau n rou pentru a clarifica anumite lucruri, erori minore de scriere (de exemplu: lipsete spaiu ntre semnul de punctuaie i urmtoarea liter) sau cum sunt fcute traducerile n alte limbi. n general, orict de bine este realizat tehnic i vizual un site, la nivel de coninut, site-ul pierde din calitate. Pentru persoanele cu dizabiliti exist seciuni dedicate pe site-urile academice strine care informeaz potenialii studeni i profesori de gradul de accesibilizare al cldirilor i a mprejurimilor universitilor i informaii despre ce servicii sunt disponibile. Pe site-urile romneti academice, nu am gsit nici unde astfel de detalii. De obicei, exist doar informaii pentru studeni strini, internaionali. n general, exist o lips de consecven care se exprim n redactarea coninutului pe site-urile romneti, n realizarea design-urilor i chiar la nivelul tehnic. Se poate spune cu uurin c site-urile romneti academice, cu puine eforturi, ar putea fi net superioare, dac s-ar da o atenie asupra detaliilor. n ultimii ani s-a putut observa c discrepana dintre profesionalismul site-urilor academice romneti i cele strine, s-a redus considerabil. Astfel, se poate spune cu certitudine c n timp site-urile romneti vor atinge un nivel nalt de profesionalism.

73

Site-ul www.uav.ro

3 Site-ul www.uav.ro
Proiectul de licen const n realizarea site-ului oficial al universitii Aurel Vlaicu din Arad. Site-ul a fost realizat n perioada noiembrie 2009 martie 2010. Contribuia mea este la nivel de design. Programarea site-ului a fost realizat de Mihai ucan. n perioada de nceput am studiat designul site-urilor academice i modul de realizare a acestora, cum este redactat coninutul i ce fel de coninut se gsete. Am comparat multiple site-uri romneti i strine, iar pe baza concluziilor expuse n capitolul precedent, am realizat site-ul actual de pe www.uav.ro, n strns colaborare cu prof. dr. univ. Ioan Dziac, coordonatorul acestui proiect de licen. n ceea ce privete organizarea site-ului i coninutul propriu-zis, prima faza a constat n propunerea unei structuri ct mai potrivite unui site academic i am oferit consultan i ajutor la nivel tehnic pentru realizarea coninutului. Situaia site-ului uav.ro era foarte precar nainte de realizarea noului site i nu era reprezentativ pentru Universitatea Aurel Vlaicu din Arad. La toate nivele, acest site era inferior fa de unele site-uri universitare romneti: uvvg.ro, uvt.ro, uaic.ro, etc. Captura de mai jos are rolul de a prezenta situaia dat. Exista i o pagin de tip intro, complet roie. Grafica era tipic anilor 1995 - 2000, elementele vizuale nu erau aliniate, iar fonturile folosite nu se potriveau. Structura site-ului era bine realizat.

Site-ul vechi uav.ro din 2009

Fig. 85

74

Site-ul www.uav.ro

3.1 Design

Prima pagin pe www.uav.ro

Fig. 86

Noua interfa a site-ului uav.ro este modern. Toate elementele vizuale sunt aliniate cu deosebit atenie. Marginile pe vertical din stnga i dreapta sunt respectate n toate seciunile layout-ului. ntre elementele vizuale din design spaiile sunt alese astfel nct s nu fie prea largi sau prea mici, nghesuite. Fiecare element este poziionat n interfa n funcie de importana lui. Layout-ul este centrat i are o lime fix: 966px. Seciunea dedicat coninutului este delimitat n ambele pri de o umbr de intensitate redus care are menirea de a reliefa structura vizual a interfeei. Antetul este format din trei linii orizontale. Prima linie are o nlime redus. n stnga, utilizatorii au posibilitatea s schimbe limba site-ului, iar n dreapta se gsesc
75

Site-ul www.uav.ro cele mai importante legturi pentru orientare n site: hart site, contact i cutare. Urmtoarea linie a antetului este dedicat siglei Universitii Aurel Vlaicu. S-a decis utilizarea unui degrade radial cu nuane pe albastru cu un contrast foarte redus. Un degrade intens ar fi creat contrast prea mare i nu era profesional. Nu am utilizat un colaj de poze n antet pentru a evita posibilitatea distragerii ateniei de pe coninut i de crea senzaia de design degajat i relaxant, plcut. Culoarea albastr este o culoare relaxant i exprim profesionalism, seriozitate i detaare. A treia linie din antet este o bar orizontal cu meniurile principale. Spaii largi separ butoanele din meniu. La fel ca mai sus, am utilizat un degrade de intensitate redus pe nuane de galben / portocaliu. Cnd mouse-ul este deasupra unui buton, apare un meniu n cascad cu meniurile de nivelul doi. Meniurile n cascad au o umbr pentru a facilita distingerea acestora fa de fundal.

Fig. 87

Meniurile n cascad pe bara de meniuri principale

n subsol, pentru consecven, s-a folosit aceeai culoare ca n antet. Aici se gsesc meniunile de copyright i o legtur spre autorii site-ului. Prima pagin este format din mai multe coloane i seciuni. Primul element este diaporama cu imagini. Fiecare imagine este atent realizat. Pozele originale au fost procesate anume s se potriveasc cu paleta de culori utilizat i n layout-ul site-ului. Au fost corectate deformrile de perspectiv i culorile, eliminat glgia din poze, ajustat compoziia, etc. Sub diaporam, n stnga se afl o list de legturi organizat pe coloane. Aceast list are scopul de a oferi utilizatorilor o privire per ansamblu asupra principalelor pagini din site. n dreapta, se gsete o list de evenimente ordonat dup data publicrii anunului. Urmtoarea seciune de pe prima pagin este format din dou coloane principale: nouti i contact. Coloana de nouti este divizat n dou i sunt listate ultimele patru tiri publicate pe site. n coloana de contact apar informaii succinte despre cum poate fi contactat universitatea. Pentru lista de evenimente i pentru tiri s-a ales s nu fie afiat data publicrii fiecrui articol, deoarece volumul de informaii afiate ar fi prea mare pentru un vizitator obinuit i ar ncrca prea mult la nivel vizual interfaa site-ului. Sub Nouti i Contact se gsesc trei coloane: Despre UAV, Istoric i Cercetare. n aceste coloane vizitatorii pot citi un extras succint din coninutul a ctorva pagini din site care prezint universitatea.

76

Site-ul www.uav.ro Pe o pagin oarecare, interfaa siteului nu se schimb mult. n locul diaporamei apare doar o imagine de tip splash cu nlime redus. Sub acesta, se afl coninutul propriu-zis al paginilor. n general, nu exist nici o pagin organizat pe coloane, deoarece redactarea acestora este mult prea complicat. Exist doar o Fig. 88 Meniurile n cascad n coloana din stnga coloan, n stnga, pentru listarea meniurilor de nivelul doi i trei. Dac exist meniuri de nivelul trei, acestea apar n cascad cnd mouse-ul se afl deasupra meniului corespunztor, iar dac utilizatorul se afl pe o pagin de nivelul trei, n coloan sunt listate i celelalte pagini aflate la acelai nivel care corespund aceluiai printe n ierarhie.

O pagin oarecare pe uav.ro

Fig. 89

Fiecare pagin are un mini-antet n care apare un breadcrumb stilat. Fundalul este un degrade linear. Pagina curent apare ca titlu mare, iar sub acesta, apar celelalte elemente ale breadcrumbului. n dreapta acestui element vizual se afl trei iconie. Cu ajutorul acestora se poate ajusta dimensiunea textelor din site sau se poate printa pagina curent. n general, pentru aceast interfa a fost folosit o palet de culori care se bazeaz pe schema de culori complementare. Culoarea albastr mai nchis creeaz contrast, iar tonurile de galben i portocaliu deschis diversific ambiana. Prin aceste culori s-a ncercat s se realizeze o ambian degajat. Tot n aceeai linie de gndire, la nivel de layout, s-a evitat nghesuirea elementelor vizuale. Legturile vizitate i nevizitate sunt colorate distinct pentru a facilita navigarea. Textele de pe site sunt scrise utiliznd fon-

77

Site-ul www.uav.ro turi lineale: Arial pentru coninut i Trebuchet MS pentru titluri i elementele funcionale din interfa (butoane, meniuri, etc), Pagina cu harta site-ului este organizat pe multiple coloane i este generat dinamic de motorul site-ului. Utilizatorii pot explora ierarhia site-ului facil, datorit modului n care sunt listate paginile. Numai paginile de nivelul unu i doi sunt afiate. Cele de nivelul trei sunt ascunse implicit, dar pot fi afiate prin apsarea butonului +.

Pagina Hart site

Fig. 90

Pagina Contact este organizat n dou coloane: n stnga se afl un formular, iar n dreapta, datele de contact. Se poate observa i includerea unei imagini cu localizarea pe hart a sediului principal al universitii. Paginile Nouti i Evenimente sunt pagini de tip blog. Aceste pagini au trei coloane: meniurile din stnga, lista de articole n centru, iar n dreapta, o coloan n care apare arhiva de articole publicate i etichetele populare. Etichetele au o dimensiune dinamic

Fig. 91

Pagina Contact 78

Site-ul www.uav.ro n funcie de popularitate, ct de des sunt utilizate. Pe pagina Arhiv, lista de articole publicate este structurat ntr-un mod clar pentru vizitatori. Acestea apar grupate dup ani i luni. Urmtoarele dou imagini prezint n ansamblu cum arat prima pagin a unui blog i pagina cu arhiva de articole publicate.

Prima pagin Nouti

Pagina Arhiv

Fig. 92

3.2 Structur
n site-ul nou al Universitii Aurel Vlaicu din Arad ntreaga structur a fost regndit. Dup cum s-a precizat mai sus, analiza site-urilor academice strine i romneti nu s-a rezumat doar la nivel vizual i tehnic. mpreun cu Mihai am elaborat o structur a site-ului pe baza analizelor i observailor efectuate pe multiple site-uri academice. Aceast propunere pentru structura site-ului a fost discutat i perfecionat cu domnul profesor coordonator al acestui proiect. mpreuna cu dumnealui am stabilit structura actual a site-ului. n cele ce urmeaz vom vorbi despre meniurile principale din site. Universitate. Aici se afl pagini care prezint Universitatea Aurel Vlaicu din Arad. Se gsesc foarte multe informaii despre universitate: conducerea i misiunea universitii, un istoric al acesteia, cuvntul rectorului, legislaie, tiri, evenimente, documente de interes public, galerie de poze i clipuri video, etc. Faculti. n acest meniu apare lista de faculti. Fiecare facultate este prezentat n mai multe pagini. n general, exist o pagin de prezentare a facultii, a catedrei i apoi informaii pentru studeni: admitere, lista de cursuri, calendarul cursurilor i a examenelor, departamente i altele. Academic. Seciunea este populat cu informaii despre structura anului universitar, studii, admitere, posturi didactice i programele de doctorat. Studeni. Aceast parte a site-ului conine informaii de interes pentru potenialii studeni ai universitii. Se gsesc informaii despre burse, taxe, admitere, actele necesare pentru nscriere, formare profesional, servicii sociale, cmine, cazare, concursuri i multe altele. Cercetare. Proiectele de cercetare n derulare n cadrul universitii sunt prezentate n aceast seciune a site-ului. Sunt listate conferinele i proiectele precedente, iar

79

Site-ul www.uav.ro pentru cei interesai, se gsesc informaii despre legislaia n domeniul cercetrii i rapoarte de autoevaluare. Departamente. Departamentele universitii sunt prezentate la nivel de conducere, proiecte i activiti. Vizitatorii au la dispoziie pentru informare multiple documente despre fiecare departament. Reviste. Aici sunt prezentate reviste academice i tiinifice, romneti i internaionale. Resurse. n acest meniu sunt listate i prezentate biblioteci. Editura UAV este prezentat n multiple pagini. Se mai gsesc informaii despre concursurile pentru posturi didactice i platforma de e-learning HyperEdu. Personal. n seciunea aceasta, personalul didactic academic este prezentat. Organizarea paginilor este pe faculti. Site-ul uav.ro dispune de o pagin cu galerie de poze de la diferite evenimente universitare i o pagin cu clipuri video.

3.3 Implementare tehnic

La nivel server side, site-ul este integral realizat de Mihai ucan. El a realizat un CMS (Content Management System) n PHP, mySQL, XML, JSON i JavaScript. n acest CMS au fost implementate funcionaliti care permit clientului s editeze coninutul de pe site: adugare, editare, terge pagini, etc. Interfaa site-ului este implementat integral n CSS, HTML i JavaScript pentru anumite funcionaliti. Codul de prezentare este complet separat fa de codul HTML. Astfel, ntregul site este accesibil pentru navigatoare de tip Lynx i aplicaii cu sintetiz vocal sau Braille.

Prima pagin pe uav.ro ncrcat fr imagini i stiluri CSS

Fig. 93

Pentru a oferi un grad sporit de accesibilitate, ntregul site este navigabil din tastatur. Primele zece elemente din meniul principal au atribuite tastele 0 9. Tasta 0 este rezervat pentru prima pagin. Tastele Q, W, E, R, T, Y, U, I, O i P sunt atribuite dinamic meniurilor de nivelul doi de pe pagina curent. Tasta F corespunde cmpului de
80

Site-ul www.uav.ro cutare, iar S pentru a sri direct la coninut. Mai mult dect att, n antetul fiecrei pagini a site-ului se gsesc trei iconie sub imaginea splash, prin care utilizatorii au posibilitatea de a micora sau de a mri textul i de a printa pagina curent. Site-ul uav.ro dispune de CSS-uri specifice pentru print i celulare. CSS-ul pentru print elimin toate informaiile care nu conteaz pe o pagin printat, iar cel pentru celulare optimizeaz spaiul pe ecran ct se poate de bine.

Prima pagin pe uav.ro cu stilarea CSS aplicat pentru print, n stnga i cea pentru celulare, n dreapta.

Fig. 94

Meniurile n cascad sunt implementate utiliznd doar CSS. Chiar efectul de tranziie (fade in) este obinut din CSS, astfel dac se dezactiveaz execuia de cod JavaScript, modul de navigare pe site rmne nealterat. Pentru efectul de tranziie s-a folosit proprietatea transition din CSS 3. Diaporama de pe prima pagin este implementat cu JavaScript. Lista de legturi organizat pe coloane de pe prima pagin, sub diaporam, este generat n mod automat n PHP. Sunt preluate primele patru meniuri principale i primele cinci meniuri de nivelul doi. Pentru lista de faculti clientul a cerut ca acestea s fie alese aleatoriu. Noutile i evenimentele de pe prima pagin a site-ului uav.ro sunt dou pagini diferite, aflate n meniul Universitate. Aceste pagini sunt de tip blog, iar utilizatorii se pot abona la fluxurile Atom corespondente acestora. Paginile de tip blog sunt generate n mod dinamic de ctre site. n modulul de administrare, utilizatorii pot adaug, modifica sau terge articole. O pagin de galerie este dinamic i generat n mod automat la nivel server side. Utilizatorul doar ncarc pozele, avnd posibilitatea de a defini un titlu i o descriere, iar site-ul genereaz viniete (thumbnails) i paginile necesare.

81

Site-ul www.uav.ro Pagina Hart site este generat pe baza unui XML n care este meninut structura site-ului. La nivel client side, se folosete JavaScript pentru a oferi utilizatorilor opinnea de a desfura meniurile de nivelul trei cu ajutorul butonului +. Pe pagina de contact, utilizatorii au la dispoziia lor un formular unde pot alege destinaia mesajului dintr-o list definit n modulul de administrare a site-ului: departamente, faculti sau alte entiti. n partea inferioar a formularului, se afl inclus serviciul online gratuit reCAPTCHA specializat n identificarea utilizatorilor de tip bot (spam). Utilizatorul este rugat s copieze un text dintr-o imagine aleatorie pentru a confirma c este un om. [66] Adresele pe site sunt de forma: uav.ro / ro / departamente / pregatireapersonalului-didactic / conducere. Titlul paginilor este utilizat pentru generarea cilor de acces a paginilor din site. Acestea se numesc legturi permanente i faciliteaz navigarea site-ului.

3.4 Modul de administrare

Munca pentru modulul de administrare i ntregul motor al site-ului a nceput nc din anul 2005. n vara anului 2006 a fost definitivat interfaa modulului de administrare. n perioada 2006 - 2010, motorul site-ului i modulul de administrare au evoluat progresiv cu fiecare proiect nou n care a fost utilizat. Apogeul pentru acest motor de site este reprezentat de utilizarea lui pentru site-ul Universitii Aurel Vlaicu din Arad. Interfaa modulului de administrare este gndit s fie foarte uor de utilizat pentru client. Ideea principal este de a acorda fiecrui client posibilitatea s i actualizeze site-ul ntr-un mod ct mai facil. n acest sens s-a decis ca interfaa modulului de administrare s reutilizeze interfaa site-ului propriu-zis. Meniurile principale ale modulului de administrare sunt: Prima pagin. Apare cnd utilizatorul s-a autentificat. Recomandri O pagin n care sunt prezentare succint recomandri pentru redactarea de coninut pe web. Fiiere. Gestionar de fiiere. Pagini. Gestionarea coninutului n site. Utilizatori. Lista de utilizatori cu acces la modulul de administrare i permisiunile acordate.
82

Fig. 95

Modulul de administrare

Site-ul www.uav.ro Profil. Profilul utilizatorului autentificat. Log out. Ieire din modulul de administrare. Pentru gestionarul de fiiere am ales un design simplu: listare tabelar a fiierelor. Directoarele sunt colorate n mod distinct pentru a facilita navigarea. n antet exist un breadcrumb care permite salturi n ierarhia de directoare. Pot fi selectate mai multe fiiere pe care se pot executa diferite operaiuni. Sub lista de fiiere exist meniul Operaii. Operaiunile posibile sunt terge, redenumete, adaug director, cur pagin i editeaz HTML.

Gestionarul de fiiere

Fig. 96

Sub meniul Operaii exist seciunea Adaug fiiere. Aici se pot ncrca multiple fiiere simultan, folosind butonul +. n seciunea Pagini, toate paginile din site sunt listate ntr-o ierarhie structurat vizual ca un arbore. Pentru fiecare pagin, n stnga, se gsesc dou butoane: sus, jos.

83

Site-ul www.uav.ro Acestea permit reordonarea meniurilor n site. n dreapta, exist un buton cu meniu n cascad care ofer mai multe opiuni: setri, terge, etc.

Lista de pagini din site-ul uav.ro

Fig. 97

Sub lista de pagini, se afl un buton Adaug. Acesta permite adugarea de pagini de diferite tipuri: articol simplu, blog, galerie imagini, legtur extern, pagin cu fiiere de descrcat i pagini de tip ablon. n dialogul de adugare pagin, trebuie definit titlul acesteia i calea. Calea paginii este generat automat dac utilizatorul nu o definete.

Fig. 98

Dialogul Adaug pagin

Pentru a edita o pagin, trebuie s se fac click pe numele ei. Editorul de pagini este ilustrat n imaginea urmtoare:

Awebitor. Editorul vizual de pagini HTML.

Fig. 99

84

Concluzii Grafica editorului de pagini HTML este realizat integral de mine. Iconiele au fost fcute n Photoshop n 2006 pentru prima versiune a acestui CMS. Editorul are implementate funcionalitile de baz pentru a realiza cu uurin coninut pe site. Pot fi create legturi, tabele, liste ordonate sau neordonate. Pot fi integrate imagini. Textul poate fi stilat: bold, italic, subliniat, tiat, indice, expozant. Paragrafele pot fi aliniate: n stnga, dreapta i centru. Se poate modifica culoarea, dimensiunea i fontul textului. La pagina Utilizatori, administratorului poate gestiona accesul altor utilizatori n modulul de administrare al site-ului. Se pot aduga i terge utilizatori i pot fi gestionate drepturile acestora. n seciunea Profil, utilizatorul autentificat i poate schimba parola, numele i adresa de e-mail.

Concluzii
Realizarea site-ului Universitii Aurel Vlaicu din Arad se bazeaz pe muli ani de studii pe cont propriu i de munc n grafic i design. Acest proiect are la baz un motor de site la care s-a nceput lucrul nc din anii de liceu i este realizat integral de Marius i Mihai ucan. Cu ocazia realizrii site-ului uav.ro am aprofundat i mai mult studiul n domeniul de design interfee. Interfaa acestui site este cea mai profesional interfa realizat de mine pn acum, deoarece se bazeaz pe o munc bine structurat i organizat. Am nvat HTML i CSS, am studiat mai detaliat teoria formelor i a culorilor n art, principii de compoziie i tipografie. Pentru mine redactarea licenei a fost un proces de sistematizare a lucrurilor ce le-am cunoscut deja de peste ani n domeniul graficii. Din acest motiv consider c ntregul proiect, din faza iniial studiul site-urilor academice, pn la faza de documentare pentru redactarea licenei i scrierea propriu-zis, a fost o ocazie deosebit de a avansa pe plan profesional. Colaborarea cu dl. prof. dr. univ. Ioan Dziac, coordonatorul proiectul, a decurs foarte bine i a fost benefic pentru rezultatele finale obinute la nivel de site. Astfel, am avut o satisfacie i o plcere lucrnd pentru proiect i licen. Toate imaginile folosite ca ilustraii n aceast licen sunt realizate de mine, exceptnd capturile de ecran a site-urilor din capitolul Studii comparative. O provocare deosebit au fost reprezentrile geometrice n spaiu tridimensional a modelelor de culori RGB, HSV i HSL. Acestea au fost integral realizate n Photoshop utiliznd funcionalitile de 3D. Noul site UAV este mult mai accesibil i are un design modern i atractiv. Acesta dispune de o structur mult mai bine organizat i coninut redactat considerabil mai bine dect site-ul precedent. Pentru a atinge un grad i mai nalt de calitate la nivel de coninut, ar trebui s urmeze ntr-un mod mai strict i mai aplicat sugestiile expuse n capitolele Tehnoredactare pentru web, Marketing i Diferene i asemnri ntre site-urile strine i romneti care ar ajuta n mod substanial n acest sens.

85

Bibliografie
1 Jirousek Charlotte. The language of design - Introduction to the Elements of Design. 1995. http://char.txa.cornell.edu/language/element/element.htm. 2 Gestalt Psychology. 2011. http://en.wikipedia.org/wiki/Gestalt_psychology. 3 Psychologie de la forme. 2011. http://fr.wikipedia.org/wiki/Psychologie_de_la_forme. 4 Saw James T. 2D Design Notes: PART IV: PRINCIPLES - Gestalt - Similarity and Proximity. 2000. http://daphne.palomar.edu/design/simnprox.html. 5 Smith Nathan. 960 Grid System. 2011. http://960.gs/. 6 Jirousek Charlotte. The language of design - Principles of Design. 1995. http://char.txa.cornell.edu/language/principl/principl.htm. 7 Jirousek Charlotte. The language of design - Principles of Design - Two Dimensional Illusion of Three Dimensional Form. 1995. http://char.txa.cornell.edu/language/element/form/formillu.htm. 8 Colors. 2011. http://en.wikipedia.org/wiki/Colors. 9 Human eye. 2011. http://en.wikipedia.org/wiki/Human_eye. 10 Metz Daniel. Lumire et couleurs - Temprature de couleur et illuminants. 2009. http://www.profil-couleur.com/lc/015-couleur-illuminant.php. 11 Color temperature. 2011. http://en.wikipedia.org/wiki/Color_temperature. 12 Standard illuminant. 2011. http://en.wikipedia.org/wiki/Standard_illuminant. 13 Color theory. 2011. http://en.wikipedia.org/wiki/Color_theory. 14 Ford Janet Lynn. Color Basics, Introduction to Color Theory. 2009. http://www.worqx.com/color/color_basics.htm. 15 Metz Daniel. Espaces colorimtriques - Le modle CMJN ou quadrichromie. 2009. http://www.profil-couleur.com/ec/107-modele-cmj.php. 16 Ford Janet Lynn. Color Systems - Subtractive & Additive Color. 2009. http://www.worqx.com/color/color_systems.htm. 17 RGB color model. 2011. http://en.wikipedia.org/wiki/Rgb. 18 HSL and HSV. 2011. http://en.wikipedia.org/wiki/HSL_and_HSV. 19 Lab color space. 2011. http://en.wikipedia.org/wiki/CIE_Lab. 20 Color space. 2011. http://en.wikipedia.org/wiki/Color_space. 21 ProPhoto RGB Color Space. 2011. http://en.wikipedia.org/wiki/ProPhoto_RGB_color_space. 22 Richard Anderson, Krogh Peter. Color Space and Color Profiles. 2011. http://www.dpbestflow.org/color/color-space-and-color-profiles. 23 Color management. 2011. http://en.wikipedia.org/wiki/Color_management. 24 Metz Daniel. Thorie des profils couleur - Correction du gamma. 2009. http://www.profilcouleur.com/tp/216-correction-gamma.php. 25 Nienhuys Han-Kwang. LCD monitor test images. 2008. http://www.lagom.nl/lcd-test/. 26 Metz Daniel. Thorie des profils couleur - Utiliser un espace de travail. 2009. http://www.profilcouleur.com/tp/204-espace-travail.php.

27 ucan Marius. Mushroom Kingdom. 2005. http://www.robodesign.ro/marius/myprojects/images/mushroom-kingdom. 28 Briggs David. Hue - The artists' colour wheel. 2007. http://www.huevaluechroma.com/072.php. 29 Saw James T. 2D Design Notes: PART II: PAINTING AND COLOR - Color. 2000. http://daphne.palomar.edu/design/color.html. 30 Tiger Color. Basic color schemes: Color Theory Introduction. 2009. http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm#color_harmonies. 31 Adobe Systems Incorporated. Adobe Kuler. 2008. http://kuler.adobe.com/. 32 Jirousek Charlotte. The language of design - Elements of Design - Color psychology. 1995. http://char.txa.cornell.edu/language/element/color/color.htm#psycho. 33 Column (typography). 2011. http://en.wikipedia.org/wiki/Column_(typography). 34 Paragraph. 2011. http://en.wikipedia.org/wiki/Paragraph. 35 Typographic alignment. 2011. http://en.wikipedia.org/wiki/Typographic_alignment. 36 Letter spacing. 2011. http://en.wikipedia.org/wiki/Letter-spacing. 37 Kerning. 2011. http://en.wikipedia.org/wiki/Kerning. 38 Typeface. 2011. http://en.wikipedia.org/wiki/Typeface. 39 Glyphs (typography). 2011. http://en.wikipedia.org/wiki/Glyph. 40 Typographic ligature. 2011. http://en.wikipedia.org/wiki/Typographic_ligature. 41 rmannsson Sigurur. Font anatomy. 2009. http://font.is/2009/07/wallpaper-font-anatomy/. 42 Serif (typography). 2011. http://en.wikipedia.org/wiki/Serif. 43 Sans-serif. 2011. http://en.wikipedia.org/wiki/Sans-serif. 44 Font. 2011. http://en.wikipedia.org/wiki/Font. 45 W3C: MathML. 2011. http://www.w3.org/Math/. 46 Subscript and superscript. 2011. http://en.wikipedia.org/wiki/Subscript_and_superscript. 47 Lorem ipsum. 2011. http://en.wikipedia.org/wiki/Lorem_ipsum. 48 Spline (mathematics). 2011. http://en.wikipedia.org/wiki/Spline_(mathematics). 49 Portable Network Graphics. 2011. http://en.wikipedia.org/wiki/Portable_Network_Graphics. 50 HyperText Markup Language. 2011. http://en.wikipedia.org/wiki/Html. 51 W3C - World Wide Web Consortium. 2011. http://en.wikipedia.org/wiki/World_Wide_Web_Consortium. 52 Cascading Style Sheets. 2011. http://en.wikipedia.org/wiki/CSS. 53 Refsnes Data. CSS Box model. 2010. http://www.w3schools.com/css/css_boxmodel.asp. 54 Olsson Tommy, OBrien Paul. CSS Reference - Selectors. 2010. http://reference.sitepoint.com/css/selectorref. 55 Olsson Tommy, OBrien Paul. CSS Reference - Selectors - Combinators. 2010. http://reference.sitepoint.com/css/combinators. 56 OpenType. 2011. http://en.wikipedia.org/wiki/OpenType.

57 Friedman Vitaly. CSS specificity - Things you should know. 2007. http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/. 58 W3C. Selectors specificity. 2009. http://www.w3.org/TR/css3-selectors/#specificity. 59 Refsnes Data. CSS Display Property. 2010. http://www.w3schools.com/css/css_display_visibility.asp. 60 Refsnes Data. CSS Float property. 2010. http://www.w3schools.com/css/css_float.asp. 61 Refsnes Data. CSS Positioning. 2010. http://www.w3schools.com/css/css_positioning.asp. 62 User interface design. 2011. http://en.wikipedia.org/wiki/User_interface_design. 63 Nielsen Norman Group. 113 Design Guidelines for Homepage Usability. 2001. http://www.useit.com/homepageusability/guidelines.html. 64 Nielsen Norman Group. PR on Websites: Press Area Usability. 2009. http://www.useit.com/alertbox/pr.html. 65 The Internet Archive. The Wayback Machine. 2009. http://www.archive.org/web/web.php. 66 Google Inc. Stop Spam, Read Books. 2011. http://www.google.com/recaptcha. 67 ucan Marius. The piano room. 2009. http://www.robodesign.ro/marius/myprojects/images/the-piano-room.

Index
acromatic ........................................................ 27 adncime n plan ............................................ 18 aldin ................................................................ 37 aliniere ............................................................ 15 ampatament ................................................... 36 antet ............................................................... 14 C.I.E. ................................................................ 20 * * * CIE L , a , b .................................................... 23 CMYK .............................................................. 21 compoziie ...................................................... 17 crenare ........................................................... 35 CSS .................................................................. 41 culori adiacente .............................................. 28 culori complementare .................................... 28 culori teriare .................................................. 28 declaraie CSS ................................................. 42 degradeu ........................................................ 29 fa tipografic ............................................... 35 font ................................................................. 35 forme .............................................................. 12 gamma ............................................................ 25 gestalt ............................................................. 12 glif ................................................................. 35 grafem ............................................................ 35 grayscale ......................................................... 26 HEX ................................................................. 45 HSL .................................................................. 22 HSV ................................................................. 22 HTML .............................................................. 40 HTML tag ........................................................ 40 ICC................................................................... 24 indentare ........................................................ 33 interletra ......................................................... 34 interlinie ......................................................... 33 italic/oblic ....................................................... 37 JPEG................................................................. 40 kerning ............................................................ 35 layout .............................................................. 13 ligatur ............................................................ 35 lineal................................................................ 36 model de culori ............................................... 23 monocromatic ................................................. 28 monospace ...................................................... 36 OpenType ........................................................ 44 paragraf ........................................................... 32 PNG ................................................................. 40 profil de culori ................................................. 24 receptori fotosensitivi ..................................... 20 RGB ................................................................. 22 RGBA ............................................................... 22 roata de culori ................................................. 27 sans-serif ......................................................... 36 schem de culori ............................................. 27 selector CSS ..................................................... 42 serif ................................................................. 36 simetrie formal .............................................. 18 simetrie informal ........................................... 17 simetrie radial ............................................... 18 sinteza aditiv ................................................. 22 sinteza substractiv ......................................... 21 spaiere ........................................................... 15 spaiu de culori................................................ 24 spaiu negativ .................................................. 17 spaiu pozitiv ................................................... 17 specificitate CSS .............................................. 44 spectru de lumin vizibil ............................... 19 spline ............................................................... 39 triad ............................................................... 28 W3C ................................................................. 42