I Aspecte generale privind proiectarea aplica!

iilor web
World Wide Web are o influen!" semnificativ" asupra vie!ii noastre, fiecare sector de
activitate fiind influen!at de acesta. Motivul acestei omniprezen!e const" n special n
natura web-ului, caracterizat" prin disponibilitatea global" #i permanent" dar #i prin
accesul omogen la informa!iile distribuite la nivel global sub forma paginilor web
1
.
De#i ini!ial web-ul a fost ini$ial proiectat ca un mediu pur informa!ional, n prezent
el evolueaz" ntr-un mediu al aplica!iilor. Aplica!iile web de ast"zi sunt sisteme software
complexe care ofer" servicii interactive #i personalizabile accesibile prin intermediul
diferitelor dispozitive dar %i posibilitatea realiz"rii tranzac!iilor ntre utilizatori. Aplica!iile
web difer" de aplica!iile software tradi!ionale ndeosebi prin modul n care web-ul este
utilizat: tehnologiile !i standardele sale sunt utilizate ca o platform" de dezvoltare !i ca platform"
utilizator n acela!i timp.
O aplica#ie web este un sistem software bazat pe tehnologiile !i standardele consor#iului
World Wide Web (W3C) care ofer" resurse web specifice (con#inut !i servicii), prin intermediul
unei interfe#e utilizator numit" browser web. Aceast" defini!ie include n mod explicit
tehnologiile #i interac!iunea cu utilizatorul. De aici deducem c" tehnologii precum
serviciile web nu sunt aplica!ii web, dar pot fi o parte a acestora, iar site-urile web lipsite
de componente software (cum sunt paginile HTML statice) nu sunt considerate aplica!ii
web.
Proiectarea aplica!iilor web, ca disciplin" #tiin!ific", este influen!at" de dezvoltarea
aplica!iilor web. Tendin$a actual" n domeniul dezvolt"rii aplica!iilor web se manifest"
printr-o abordare ad-hoc #i o lips" a metodelor de dezvoltare, aspect care are un impact
negativ asupra calit"!ii. Din acest motiv, este necesar" construirea unui ciclu de via#" a
aplica#iilor web, prezentarea conceptelor, tehnicilor, metodelor #i utilitarelor folosite pentru
dezvoltarea sistematic" a aplica!iilor web.
Web-ul, aplica!iile web #i comunitatea web n ansamblu au evoluat de la apari!ia
Internet-ului la Web 2.0 #i la web-ul semantic, din acest motiv fiind esen!ial" adoptarea
principiilor proiect"rii web. Similar cu proiectarea aplica!iilor software tradi$ionale,
proiectarea web implic" utilizarea unei abord"ri sistematice pentru realizarea
specifica!iilor, implement"rii, oper"rii #i ntre!inerii aplica!iilor web. Din punct de vedere al
istoricului dezvolt"rii #i complexit"!ii distingem anumite tipuri de aplica!ii web: orientate
pe documente, interactive, tranzac!ionale, omniprezente, ale web-ului semantic %i de tip
cloud computing.
Tendin!ele actuale privind dezvoltarea aplica!iilor web #i cre#terea complexit"!ii #i
importan!ei acestora pentru diverse segmente ale societ"!ii #i n particular pentru
func!ionarea eficient" a unor procese de afaceri (de exemplu n comer!ul electronic), au
sporit gradul de interes privind acest tip de dezvoltare #i calitatea pe termen lung a
aplica!iilor web, acestea avnd o pondere considerabil" n software-ul dezvoltat n prezent.
Proiectarea reprezint" n general o aplica!ie practic" a #tiin!ei (n comer! sau
industrie) folosit" n scopul dezvolt"rii aplica!iilor ntr-un mod mai bun, mai rapid, mai
ieftin #i mai sigur. Ingineria software este definit" ca o aplica!ie a #tiin!ei #i matematicii prin
care capacit"!ile unui sistem de calcul pot fi utilizate de oameni prin intermediul
programelor, procedurilor #i documenta!iei asociate. Proiectarea aplica#iilor web reprezint"
aplicarea unor abord"ri sistematice !i cuantificabile (concepte, metode, tehnici, utilitare) n analiza
cerin#elor, proiectarea, implementarea, testarea, exploatarea !i ntre#inerea aplica#iilor web de
calitate superioar"; este un mod sistematic de a gestiona complexitatea !i diversitatea aplica$iilor
web.
1
Berners-Lee, T., WWW: Past, Present, and Future, IEEE Computer, 29 (10), 1996, pp. 6977
Principiile de baz" ale proiect"rii aplica!iilor web sunt similare cu cele din ingineria
software-ului tradi$ional %i implic":
- obiective #i cerin!e clar definite;
- dezvoltarea sistematic", n faze, a aplica!iilor web;
- planificarea foarte atent" a acestor faze;
- auditul continuu al ntregului proces de dezvoltare.
1.1 Categorii de aplica!ii web

Evolu!ia web-ului a determinat unificarea diferitelor discipline (ex. mass-media #i
tehnologia informa!iei #i comunic"rii), facilitnd crearea, ntre!inerea #i utilizarea
diferitelor tipuri de informa!ii de oriunde, n orice moment #i folosind o varietate de
dispozitive, cum ar fi calculatoarele desktop #i notebook-urile, PC-urile de buzunar,
Personal Digital Assistants (PDA-uri) #i telefoanele mobile. Evolu!ia web-ului poate fi
abordat" pe mai multe dimensiuni, din perspective diferite:
- cre#terea num"rului de site-uri #i pagini web;
- num"rul de utilizatori web;
- num"rul de vizite web;
- func!ionalitatea #i interactivitatea pe care aplica!iile web le ofer";
- tehnologiile folosite pentru crearea aplica!iilor web;
- impactul web-ului asupra mediului social #i al afacerilor
2
.
Aplica!iile web au grade variate de complexitate. Acestea pot fi pur informa!ionale,
aplica!ii de comer! electronic complexe care func!ioneaz" 24 de ore pe zi/7 zile pe
s"pt"mn"/365 zile pe an (24/7/365) (Web 1.0) sau aplica!ii specifice Web 2.0 care implic"
generarea con!inutului de c"tre utilizatori (un web "read-write"). Web 3.0 este reprezentat
de web-ul semantic (sensul datelor), personalizarea (ex. iGoogle), c"utarea inteligent" #i de
reclame care apar n func!ie de comportamentul utilizatorului
3
.
O aplica$ie web este un sistem complex #i const" dintr-un num"r mare de
componente eterogene, cu un nivel sporit de interac!iune ntre componente. Dup" cum se
poate observa n figura urm"toare exist" o multitudine de factori care contribuie la
complexitatea sistemelor web (vezi Figura 1.1).
2
Murugesan, S., Web Application Development: Challenges and the Role of Web Engineering, n Rossi, G., Pastor, O., Web
Engineering Modelling and Implementing Web Applications, Springer 2008, p. 10
3
Web 3.0 Concepts Explained in Plain English (Presentations), disponibil la
http://www.labnol.org/internet/web-3-concepts-explained/8908/, mai 2009

Interfa!"
Arhitectura
Distribuire pe
diverse dispozitive,
web mobil
Performan!",
scalabilitate, nr. de
utilizatori
Diversitatea
con!inutului
Securitate
Backend Interactivitate
Utilizatori diver#i
Proiectare/cod
Sistem web
Figura 1.1 Complexitatea unui sistem web
4
Aplica$iile web devin tot mai complexe pe m"sur" ce se ocup" nu numai cu
problemele tehnologice, dar, de asemenea, cu probleme organizatorice care nu sunt sub
controlul echipei de proiect. Dezvoltatorii trebuie s" n$eleag" gradul de complexitate a
unui proiect web %i modul n care acesta afecteaz" rezultatul proiectului. Complexitatea ar
putea fi rezolvate printr-o abordare holistic", inginereasc". Dezvoltatorii web doresc de
regul" s" simplifice sistemul, prin ndeplinirea cerin$elor prev"zute %i nu s" accentueze
complexitatea acestuia.
n func!ie de istoricul dezvolt"rii #i gradul de complexitate au fost identificate
diferite categorii de aplica!ii web (vezi Figura 1.2).
4
Murugesan, S., Web Application Development: Challenges and the Role of Web Engineering, n Rossi, G., Pastor, O., Web
Engineering Modelling and Implementing Web Applications, Springer 2008, p. 18

Figura 1.2: Categorii de aplica!ii web
5
Se remarc" o corela!ie ntre cronologia dezvolt"rii #i complexitate. n aceast" ordine
de idei, aplica!iile bazate pe fluxuri sunt bazate pe tranzac!ii, nivelul superior de
dezvoltare necesitnd o dezvoltare anterioar" a unei categorii mai pu!in complexe. Exist"
#i excep!ii de la aceast" regul" pentru anumite categorii (de exemplu aplica!iile orientate pe
portaluri), care sunt recente din punct de vedere istoric dar au un grad sc"zut de
complexitate. Aplica!iile web ale organiza!iilor care au fost pe web nc" de la nceputuri au
avut deseori un istoric al dezvolt"rii similar cu cel descris n Figura 1.2. Dezvoltarea unei
aplica!ii web poate fi nceput" n oricare din aceste categorii #i ulterior continuat" c"tre un
nivel sporit de complexitate. Noile categorii sunt n general mult mai complexe, dar
aceasta nu nseamn" c" ele pot nlocui n totalitate vechea genera!ie.
Site-urile web axate pe documente sunt precursoare ale aplica!iilor web, accentul
punndu-se pe proiectarea vizual". Paginile web sunt stocate pe un server web ca
documente HTML statice #i sunt trimise clientului web ca r"spuns la o cerere. Aceste
pagini web sunt de obicei actualizate manual folosind utilitare specifice, activitate
cunoscut" sub numele de authoring, care include realizarea leg"turilor din site-urile web #i
5
prelucrare dup! Kappel, G., Pr"ll, B., An Introduction to Web Engineering, n Kappel, G., Pr"ll, B., Web Engineering The
Discipline of Systematic Development of Web Applications, John Wiley and Sons, 2006, p. 5
includerea elementelor grafice. Pentru site-urile web care impun schimb"ri frecvente sau
pentru cele cu un num"r mare de pagini aceast" actualizare cre#te semnificativ costurile #i
adesea are drept consecin!" prezentarea unor informa!ii dep"#ite. n plus exist" pericolul
apari!iei inconsisten!elor atunci cnd un anumit con!inut este prezentat frecvent,
redundant pe mai multe pagini web pentru a u#ura accesul. Principalele beneficii sunt
simplitatea #i stabilitatea unui astfel de site web dar #i timpul scurt de r"spuns, paginile
fiind deja stocate pe serverul web. Din aceasta categorie de site-uri fac parte paginile
principale statice #i paginile simple pentru micile afaceri, care ofer" informa$ii despre
produsele #i serviciile oferite.
Odat" cu apari!ia standardului Common Gateway Interface (http://tools.ietf.org/
html/draft-robinson-www-interface-00) #i formularelor HTML, s-au dezvoltat #i
aplica!iile web interactive, oferind o prim" form" de interactivitate prin intermediul
formularelor, butoanelor radio #i meniurilor de selec!ie. Paginile web #i leg"turile c"tre alte
pagini sunt generate n mod dinamic n func!ie de datele introduse de utilizator. Exemple
de astfel de categorii sunt prezent"rile virtuale, site-urile de #tiri sau de planificare a
c"l"toriilor.
Aplica!iile web tranzac!ionale ofer" mai mult" interactivitate, utilizatorul avnd
posibilitatea de a interac!iona cu aplica!ia n modul citire dar #i de a realiza actualiz"ri ale
con!inutului. Premisa necesar" pentru un astfel de sistem implic" existen!a unor sisteme de
baze de date care permit manevrarea eficient" a unui con!inut n continu" cre#tere n
cadrul aplica!iilor web #i ofer" posibilitatea unor interog"ri structurate. Posibilitatea de a
crea pagini web din con!inutul stocat n bazele de date a permis dezvoltatorilor web s"
ofere informa!ii personalizate pentru vizitatori. Din aceast" categorie de aplica$ii fac parte
b"ncile online, magazinele online #i sistemele de rezervare online pentru hoteluri.
Aplica!iile web bazate pe fluxuri permit manevrarea fluxurilor de lucru n
interiorul sau ntre diferite companii, autorit"!i publice #i utilizatori priva!i. Pentru aceste
aplica!ii este esen!ial" disponibilitatea unor servicii web adecvate pentru asigurarea
interoperabilit"!ii
6
. Aplica!iile care fac parte din aceast" categorie sunt solu!iile B2B
(Business-to-Business) din comer!ul electronic, aplica!iile e-government din domeniul
administra!iei publice sau suportul web pentru fluxurile de date ale pacien!ilor n sectorul
s"n"t"!ii.
Aplica!iile web orientate pe portaluri ofer" un singur punct de acces la surse de
informa!ie #i servicii separate eterogene. Realizatorii de browsere (Mozilla, Apple,
Microsoft), motoarele de c"utare (Yahoo, MSN), serviciile online (AOL) #i alte companii au
sesizat cererea existent" pentru astfel de aplica!ii #i au oferit hub-uri centrale (cunoscutele
portaluri din prezent) ca punct de acces la web. Pe lng" aceste portaluri generale, exist"
diverse portaluri specializate cum ar fi portalurile pentru afaceri (ex. eafacere.ro),
portalurile pentru comer! (ex. price.ro) #i portalurile pentru comunit"!i (ex. portal.edu.ro).
Portalurile pentru afaceri ofer" angaja!ilor #i/sau partenerilor afacerii un acces focalizat la
diferite surse de informa!ie #i servicii prin intranet sau extranet. Portalurile pentru comer!
func!ioneaz" pe pia!a B2C (Business to Consumer) oferind bunuri de consum direct c"tre
public #i n B2B (Business to Business), prin vnzarea de produse proprii unor companii
din alte sectoare de activitate. Portalurile pentru comunit"!i se adreseaz" unor grupuri !int"
specifice #i ncearc" s" creeze o loialitate a clien!ilor prin intermediul interac!iunilor cu
utilizatorii.
Genera!ia Web 2.0, cunoscut" #i sub numele de web-ul n$elept, web-ul centrat pe
indivizi !i web-ul read/write, ofer" interfe!e utilizator inteligente #i facilit"!i pentru utilizatori
pentru a genera #i edita con!inutul prezentat pe web. Prin ncorporarea de tehnologii web
6
Weerawarana, S., Curbera, F., Leymann, F., Storey, T., Ferguson, D. F., Web Services Platform Architecture, Prentice Hall, 2005
precum AJAX, Ruby, blog-uri, wiki-uri, bookmarking social #i tagging, web-ul a devenit
mult mai dinamic #i mai interactiv, astfel utilizatorii putnd alege nu numai con!inutul de
pe un site dar #i contribui, de asemenea, la aceasta. Tehnologia feed-urilor web permite
utilizatorilor s" fie la curent cu con!inutul actualizat al unui site, f"r" a fi nevoi$i s"-l
viziteze. O alt" caracteristic" a noului web este r"spndirea site-urilor web cu API-uri
(interfe!e de programare a aplica!iilor) care faciliteaz" colectarea de date de la un serviciu
#i crearea de noi aplica$ii online de c"tre dezvoltatorii web
7
.
Aplica!iile web colaborative sunt folosite ndeosebi n scopul cooper"rii n
opera!iile nestructurate (groupware), unde exist" o nevoie ridicat" de comunicare ntre
utilizatori. Aplica!iile web colaborative suport" distribuirea informa!iei #i spa!iile de lucru
(ex. Wikipedia, WikiWiki) pentru a genera, edita #i administra informa!iile distribuite.
Acestea sunt utilizate #i pentru a p"stra log-urile web (blog-urile) sau ca platforme de e-
learning (ex. Moodle).
Aplica!iile RIA (Rich Internet Applications) sunt aplica!ii bazate pe web care
ruleaz" ntr-un browser web #i nu necesit" instalarea unui anumit software, dar au
caracteristicile #i func!ionalit"!ile aplica$iilor desktop tradi!ionale. RIA reprezint" evolu$ia
browser-ului de la o interfa!" static" a r"spunsului (la o cerere), la una dinamic", asincron".
L"$imea mare de band", cerin$ele consumatorilor #i noile tehnologii (inclusiv Web 2.0), au
contribuit semnificativ la proliferarea RIA. RIA ofer" beneficii importante pentru
utilizatori, ndeosebi n ceea ce prive#te interactivitatea #i u%urin$a n utilizare a aplica$iilor
web. Dintre exemplele cele mai populare pentru framework-urile RIA enumer"m: Adobe
Flex #i AJAX, Google Earth, Google Mail #i Google Finance. Tehnologii precum XHTML,
formularele #i scripturile CGI sunt nlocuite de alte abord"ri precum AJAX #i serviciile
web. De#i web-ul a fost ini!ial caracterizat prin anonimitate, el a avut o orientare c"tre
web-ul social, n care utilizatorii #i prezint" identitatea unei comunit"!i cu interese
similare. Din aceast" categorie de aplica!ii web fac parte log-urile web sau sistemele de
filtrare colaborative precum MySpace %i Friendster, care ofer" posibilitatea de a g"si att
obiecte de interes similare ct #i persoane cu interese asem"n"toare. Oamenii devin att
consumatori ct #i creatori de informa!ie prin intermediul blog-urilor sau site-urilor de
tipul Flickr, MySpace, YouTube; linia de demarca!ie ntre un consumator #i editorul de
con!inut devine din ce n ce mai estompat" n epoca Web 2.0
8
.
Evolu$ia sistemelor de calcul mobile, a comunica!iilor f"r" fir #i adoptarea pe scar"
larg" la nivel mondial a dispozitivelor mobile (ex. PDA-urile, Pocket PC-urile %i
smartphone-urile), a permis unui num"r tot mai mare de utilizatori s" acceseze web-ul
folosind aceste dispozitive portabile. Aplica$iile web mobile ofer" unele caracteristici
suplimentare fa!" de aplica!iile web desktop tradi!ionale, cum ar fi serviciile de localizare #i
personalizarea.
Aplica!iile web omniprezente ofer" servicii personalizate oricnd, oriunde #i
pentru orice dispozitiv, facilitnd astfel accesul independent de loca$ie. Un exemplu poate
fi afi#area promo$iilor zilei pe dispozitivele mobile ale tuturor cump"r"torilor care intr"
ntr-un supermarket. Pentru acest tip de sistem este important s" lu"m n calcul limit"rile
dispozitivelor mobile (l"!imea de band", dimensiunea ecranului %i memoria) #i contextul n
care aplica!ia web este utilizat" n mod curent.
Web-ul semantic are drept obiectiv prezentarea informa!iei pe web nu doar pentru
oameni ci #i ntr-o form" care poate fi interpretat" de sistemele de calcul. Aceasta
faciliteaz" managementul cuno#tin!elor pe web, conectarea #i reutilizarea cuno#tin!elor
7
Murugesan, S., Web Application Development: Challenges and the Role of Web Engineering, n Rossi, G., Pastor, O., Web
Engineering Modelling and Implementing Web Applications, Springer 2008, p. 11
8
Web 3.0 Concepts Explained in Plain English (Presentations), disponibil la
http://www.labnol.org/internet/web-3-concepts-explained/8908/, mai 2009
(mediatizarea con!inutului) dar #i localizarea cuno#tin!elor noi relevante (de exemplu cu
ajutorul sistemelor de recomandare care sunt o subclas" a sistemelor de filtrare a
informa$iei care caut" s" prezic" preferin$a pe care un utilizator o are pentru un bun
material sau element social).
Web-ul semantic este o extensie a web-ului actual, n care informa!ia are un n!eles
bine definit #i permite o colaborare mai bun" ntre calculatoare #i oameni
9
. Obiectivul
acestuia este de a crea un mediu universal pentru schimbul informa$iei, prin crearea unor
documente cu un n$eles (semantic") procesabil de calculator pe web. Ad"ugarea unei
semantici schimb" radical natura web-ului, dintr-un loc n care informa!ia este doar afi#at"
ntr-unul n care este interpretat", schimbat" #i prelucrat". Asocierea n$elesului cu
con!inutul sau stabilirea unui strat de date interpretabil de sistemele de calcul, permite un
grad mai mare de automatizare, aplica!ii mai inteligente #i faciliteaz" interoperabilitatea
serviciilor. Scopul final al web-ului semantic este de a sprijini schimbul global de
informa!ii ntr-o manier" scalabil", adaptabil" #i extensibil", astfel nct informa!iile de pe
web s" poat" fi utilizate pentru o mai bun" automatizare, integrare #i reutilizare n diverse
aplica$ii. Cele trei componente cheie care constituie web-ul semantic #i contribuie la
realizarea obiectivelor sale sunt etichetele semantice, ontologia #i agen$ii software
inteligen$i
10
.
Internetul obiectelor presupune ca tot ceea ce se consum" s" fie identificat %i
monitorizat electronic oricnd %i oriunde. Obiectele uzuale %i dispozitivele vor fi etichetate
%i conectate la baze de date %i re$ele mari de calculatoare prin folosirea a dou" tehnologii:
NFC (Near Field Communication) %i RFID (Radio-Frequency Identification).
Tehnologia NFC poate fi nglobat" n diverse dispozitive, de la telefoane mobile cu
care se pot efectua pl"ti sau transfera informa$ii pn" la camere foto digitale ce %i transfer"
fotografiile TV-ului printr-o simpl" ap"sare de buton.
NFC aduce o nou" schimbare metodelor de plat" de pe telefonul mobil, n acestea
fiind ncorporate c"r$ile de credit sau tichetele pentru transportul n comun. Ca orice nou"
tehnologie, NFC are nevoie de o infrastructur", procesul de adaptare fiind lent n
compara$ie cu altele integrate n dispozitivele mobile (ex. camera foto).
Exemplul cel mai elocvent al modului n care Internetul lucrurilor ar putea func$iona
ar fi un obiect de uz casnic precum frigiderul personal care ar putea $ine eviden$a cantit"$ii
dintr-un produs care se afl" n interiorul lui %i ar produce automat o list" de produse pe
care s" o utiliz"m cnd mergem la cump"r"turi sau ar trimite un email la magazinul
alimentar n care se men$ioneaz" c" ave$i nevoie de un anumit produs care va fi furnizat de
c"tre ace%tia. Pentru ca acest lucru s" fie posibil, fiecare obiect din frigider ar trebui s"
con$in" o etichet" (tag), iar frigiderul s" aib" un sistem de senzori care pot detecta
cantitatea de alimente din fiecare recipient, urmnd s" comunice informa$iile unui sistem
de calcul. Etichetele (tag-urile) sunt deja utilizate sub form" de RFID (dispozitive de
identificare prin frecven$" radio) pe majoritatea produselor din supermagazinele cu
renume (ex. Wal-Mart) %i con$in n interior un sistem de radio-frecven$". Acestea genereaz"
un semnal radio, care este apoi preluat de c"tre un transceiver %i, ulterior, informa$iile
despre produs sunt recep$ionate %i afi%ate. Etichetele (tag-urile) RFID sunt utilizate de cele
mai recente pa%apoarte electronice.
n prezent, cipurile RFID sunt aproximativ de m"rimea unei insecte, dar cercet"torii
lucreaz" la miniaturizarea lor cu ajutorul tehnologiilor nano-writing sau al nanofirelor. Se
presupune ca n viitor, vom avea posibilitatea de a plasa o etichet" invizibil" RFID pe
9
Berners-Lee, T., Hendler, J., Lassila, O., The Semantic Web, Scientific American, May, 2001, pp. 34-43
10
Shadbolt, N., The Semantic Web revisited, n IEEE Intelligent Systems, May-June, 2006, pp. 96-101
fiecare obiect. De asemenea, s-ar putea ad"uga nanosenzori n interiorul etichetelor (tag-
urilor), astfel nct acestea s" poat" stoca %i colecta informa$iile din mediul nconjur"tor.
n diverse aplica$ii software se solicit" identificarea automat" a persoanelor sau
produselor pe baza unor coduri ata%ate. Cele mai utilizate sisteme de codificare %i
recunoa%tere automat" sunt cele pe baz" de coduri de bare %i respectiv cele de tip RFID.
Codurile de bare sunt marcaje pe suport de hrtie u%or de identificat pe cale optic". Mult
mai versatile sunt etichetele (tag-urile sau transponderele) de tip RFID care pot fi
identificate %i uneori chiar modificate prin unde radio. RFID poate fi utilizat pentru
eviden!a automat" a mi%c"rii produselor sau pentru identificarea persoanelor autorizate s"
acceseze un anumit perimetru. n prezent exist" diverse implement"ri de sisteme de
autentificare a persoanelor bazate pe tag-uri RFID care permit stocarea datelor relevante
ale persoanei (date demografice sau informa$ii medicale).
Compatibilitatea dintre NFC %i RFID este asigurat" de leg"tura cu standardele
precedente. Din punct de vedere hardware NFC include un element de securitate pentru a
cre%te siguran$a aplica$iilor software, mai ales a celor pentru pl"$i. De exemplu un card de
credit poate fi integrat ntr-un telefon mobil %i folosit de c"tre cititoarele de c"r$i de credit
ce folosesc tehnologia NFC. Tehnologia NFC este cea mai bun" implementare pentru
conceptul cunoscut sub numele de "physical browsing".
La nivel microeconomic, dac" tot ceea ce consum"m va fi monitorizat cu ajutorul
tag-urilor (etichetelor) miniaturizate, produc"torii ar putea afla mai repede nevoile
clien$ilor lor. Astfel, traseul fiec"rui produs, de la produc$ie la raft, ar putea fi stocat
crescnd astfel managementul calit"$ii de-a lungul ntregului lan$ de aprovizionare. Cu
toate acestea, o astfel de tehnologie ridic" numeroase ntreb"ri privind protec$ia datelor %i a
vie$ii private, n special n ce prive%te senzorii %i etichetele inteligente care pot urm"ri
activitatea utilizatorului.
1.2 Caracteristicile aplica!iilor web

O bun" n!elegere a caracteristicilor #i cerin!elor specifice aplica$iilor web este
esen!ial" pentru proiectarea %i implementarea sistemelor informa$ionale pe web.
Principalele caracteristici ale aplica$iilor web sunt
11
:
majoritatea aplica!iilor web sunt evolutive prin natura lor, necesitnd modific"ri
frecvente ale con! inutului, func! ionalit" $ ii, structurii, navig"rii, prezent"rii sau
implement"rii. Ele evolueaz" n special n ceea ce prive#te cerin!ele #i func!ionalitatea, n
special dup" ce sistemul este dat n folosin!". n cele mai multe aplica!ii web, frecven!a #i
gradul de schimbare sunt mult mai ridicate dect n aplica!iile software tradi!ionale; n
majoritatea aplica$iilor web nu este posibil s" se specifice pe deplin cerin!ele n ntregul lor
de la nceput;
aplica!iile web sunt menite s" fie utilizate de c"tre o comunitate vast", divers" #i
deseori aflat" la distan!", care au cerin!e, a#tept"ri #i competen!e diferite. Prin urmare,
interfa!a cu utilizatorul #i facilit"$ile privind u#urin$a n folosire trebuie s" satisfac" nevoile
unei comunit"$i diverse de utilizatori anonimi;
aplica$iile web permit prezentarea unui con!inut variat (imagini, audio #i/sau
video), el putnd fi integrat folosind anumite proceduri. Prin urmare, includerea textului
#i a graficii va implica crearea #i managementul con!inutului, prezentarea acestora ntr-o
manier" ct mai atractiv", precum #i posibilitatea unei gestion"ri ulterioare a con!inutului;
sistemele bazate pe web, solicit", n general, o atrac$ie estetic" ridicat" ("look and
feel") #i o navigare u#oar";
11
Murugesan, S., Web Application Development: Challenges And The Role Of Web Engineering, Rossi, G., Pastor, O., Scwabe, D.,
Olsian, L., Web Engineering: Modelling and Implementing Web Applications, Springer, 2008, p.14
aplica!iile web, n special cele destinate unui public global, trebuie s" adere la
sentimente sociale #i culturale diferite dar #i la standardele na!ionale (limbi multiple #i
sisteme de unit"!i) diferite;
nevoile de securitate #i intimitate ale sistemelor bazate pe web sunt, n general,
mult mai exigente dect cele din software-ul tradi!ional;
aplica$iile web trebuie s" func$ioneze corect pe o varietate de dispozitive #i
formate de afi#are, s" suporte diverse echipamente hardware, sisteme software, precum #i
re!ele cu viteze de acces diferite;
termenele de dezvoltare ale aplica!iilor web sunt mai scurte, acest lucru
influen!nd n mod semnificativ proiectarea, metodologia de dezvoltare #i procesele de
dezvoltare adoptate pentru realizarea lor;
proliferarea noilor tehnologii #i standarde web cumulat" cu presiunea competi$iei
de a le folosi aduce propriile sale avantaje dar #i provoc"ri suplimentare pentru
dezvoltarea #i ntre!inerea aplica!iilor web;
natura evolutiv" a aplica$iilor web necesit" un proces de dezvoltare incremental.
Aplica!iile web difer" de aplica!iile tradi!ionale (non-web), prin anumite
caracteristici: unele lipsesc complet n aplica!iile tradi!ionale (ex. navigarea non-liniar" -
realizat" prin intermediul hyperlink-urilor
12
), iar altele au o importan!" deosebit" n cadrul
aplica!iilor web (ex. frecven!a actualiz"rilor).
Dac" #i n ce m"sur" este prezent" o anumit" caracteristic" depinde par!ial de tipul
de aplica!ie web: dezvoltarea aplica!iilor web tranzac!ionale (cum ar fi sistemele de comer!
electronic) necesit" o focalizare mai atent" asupra actualiz"rii #i consisten!ei con!inutului
comparativ cu sistemele informa!ionale pure (de exemplu expozi!iile virtuale).
12
Web Design Principles. Site Navigation, disponibil la http://www.iraqtimeline.com/maxdesign/basicdesign/principles/prinnav.html,
aprilie 2011
II Proiectarea cerin!elor pentru aplica!iile web
Proiectarea cerin!elor implic" activit"!i care sunt esen!iale pentru succesul proiect"rii
web. Cerin!e incomplete, ambigue sau incorecte pot conduce la dificult"!i majore n
dezvoltare sau chiar la anularea proiectelor.
De#i cerin!ele joac" un rol cheie n dezvoltarea aplica!iilor web, ele sunt deseori
descrise n mod neadecvat, consecin!ele tipice fiind acceptarea sc"zut" din partea
utilizatorilor sau arhitecturi software neadecvate.
Obiectivele individuale #i a#tept"rile p"r!ilor interesate reprezint" punctul de
pornire al procesului de stabilire a cerin!elor. P"r!ile interesate sunt oameni sau organiza!ii
care au o influen!" direct" sau indirect" asupra cerin!elor n dezvoltarea sistemului
13
.
P"r!ile interesate importante sunt clien!ii, utilizatorii #i dezvoltatorii; cele tipice pentru
aplica!iile web includ autorii de con!inut, exper!ii n anumite domenii, profesioni#tii n
marketing sau n u#urin!a n folosire. Obiectivele #i a#tept"rile p"r!ilor interesate sunt
extrem de diverse, dup" cum se poate observa #i n urm"toarele exemple tipice de cerin!e :
- aplica!ia web trebuie s" fie disponibil" online pn" la 1 septembrie 2013
(constrngere din partea clientului);
- aplica!ia web trebuie s" suporte minim 2500 utilizatori concuren!i (obiectiv de
calitate al clientului);
- limbajul PHP trebuie folosit ca platform" de dezvoltare (perspectiva tehnologic" a
dezvoltatorilor);
- toate datele clien#ilor trebuie trimise securizat (obiectiv de calitate al utilizatorului);
- interfa!a utilizator trebuie s" suporte layout-uri pentru diferite grupuri de clien#i
(obiectiv de calitate al clientului);
- orice utilizator trebuie s" poat" g"si produsul dorit n mai pu!in de trei minute
(obiectiv al clientului privind u#urin!a n folosire);
- utilizatorul trebuie s" aib" posibilitatea s" selecteze o iconi!" care s" afi!eze articolele
incluse n co!ul de cump"r"turi n orice moment (obiectiv al utilizatorului privind
capacitatea).
Identificarea #i implicarea p"r!ilor interesate reprezint" obiectivele principale ale
managementului proiectului. O mare provocare o constituie n!elegerea #i aplanarea
frecventelor conflicte privind obiectivele, a#tept"rile #i ordinea de zi. De exemplu, pot
exista conflicte ntre setul dorit de func!ionalit"!i #i bugetul disponibil; ntre setul de
func!ionalit"!i, programul proiectului #i calitatea dorit"; sau ntre tehnologia de dezvoltare
dorit" #i aptitudinile #i experien!ele dezvoltatorilor. n!elegerea #i rezolvarea din timp a
acestor contradic!ii #i conflicte este esen!ial" #i are o contribu!ie important" la
managementul riscului. Au fost propuse diferite tehnici de negociere pentru a sus!ine acest
obiectiv, dezvoltarea unei viziuni comune ntre p"r!ile interesate fiind o condi!ie pentru
succes. Obiectivele p"r!ilor interesate sunt deseori reprezentate informal, oferind suportul
pentru cerin!ele derivate mai detaliate.
Cerin!ele sunt clasificate deseori n cerin!e func!ionale, cerin!e non-func!ionale #i
constrngeri
14
.
Cerin#ele func#ionale definesc capacit"!ile #i serviciile unui sistem, iar cerin#ele non-
func#ionale descriu nivelele de calitate dorite ("Ct este de securizat?", "Ct este de u#or de
folosit?").
13
Kotonya, G., Sommerville, I., Requirements Engineering: Processes and Techniques, John Wiley & Sons, 1998
14
Robertson, S., Robertson, J., Mastering the Requirements Process, Addison-Wesley, 1999
Constrngerile sunt condi!ii non-negociabile care afecteaz" un proiect. Exemple de
constrngeri sunt nivelul de calificare al echipei de dezvoltare, bugetul disponibil, data
livr"rii sau infrastructura de calculatoare existent" n zona de dezvoltare.
Toate cerin!ele #i constrngerile dintre contractor #i client sunt sintetizate ntr-un
document.
Abord"rile uzitate n proiectarea cerin!elor pun accentul pe identificarea #i
implicarea p"r!ilor interesate, negocierea #i descoperirea cerin!elor pe baz" de scenarii,
analizarea contextului organiza!ional #i social anterior model"rii detaliate #i definirea clar"
a constrngerilor care afecteaz" dezvoltarea
15
.
Aspectele calitative sunt decisive pentru succesul aplica!iilor web. Exemple:
performan!a unei aplica!ii web, securitatea n sistemele de e-commerce, disponibilitatea,
u#urin!a n folosire. n ciuda importan!ei aspectelor calitative, dezvoltatorii trebuie s" se
confrunte cu faptul c" specificarea exact" a cerin!elor de calitate este dificil" naintea
construirii sistemului. De exemplu timpul de r"spuns al unei aplica!ii web depinde de
mul!i factori, care nu pot fi controla!i de echipa de dezvoltare.
Calitatea interfe#ei utilizator este un alt aspect hot"rtor pentru succesul aplica!iilor
web. Cnd realizeaz" aplica!ii web dezvoltatorii trebuie s" fie con#tien!i de urm"torul
fenomen: utilizatorii nu vor fi capabili s" n!eleag" #i s" aprecieze o aplica!ie web uitndu-
se la modele #i specifica!ii abstracte; ei trebuie s" experimenteze. De aceea, este foarte
important s" se completeze definirea #i descrierea cerin!elor prin ad"ugarea unor
prototipuri pentru scenariile importante ale aplica!iei
16
.
Calitatea con#inutului. Majoritatea metodelor tradi!ionale de proiectare a cerin!elor
neglijeaz" con!inutul web, de#i este un aspect extrem de important al aplica!iilor web. Pe
lng" problemele legate de tehnologia software, dezvoltatorii trebuie s" aib" n vedere
con!inutul #i n special crearea #i ntre!inerea acestuia. n contextul proiect"rii cerin!elor
este esen!ial" specificarea nivelului dorit de calitate a con!inutului. Cele mai importante
caracteristici de calitate includ acurate!ea, obiectivitatea, credibilitatea, relevan!a,
actualitatea, caracterul complet sau claritatea. Sistemele de management al con!inutului
(CMS) au devenit importante #i permit reprezentarea concis" #i consistent" a con!inutului
prin separarea con!inutului de layout #i oferirea utilitarelor de editare a con!inutului.
Datele fixe de livrare. Multe proiecte web au o dat" fix" de livrare, toate activit"!ile #i
deciziile trebuind s" fie finalizate pn" la un termen limit". Negocierea #i stabilirea unei
ordini de prioritate a cerin!elor sunt esen!iale n aceste condi!ii.
2.1 Metode specifice de proiectare a cerin!elor aplica!iilor web
n prezent sunt disponibile numeroase metode, ghiduri, nota!ii, cataloage #i utilitare
pentru toate activit"!ile de proiectare a cerin!elor. Totu#i, dezvoltatorii trebuie s" evite o
abordare unitar", metodele de proiectare a cerin!elor trebuind adaptate permanent
specificului proiect"rii web #i situa!iilor care apar n anumite proiecte. Dezvoltatorii
trebuie s" clarifice urm"toarele aspecte pe parcursul procesului de proiectare a cerin$elor:
- Ce tipuri de cerin!e sunt importante pentru aplica!ia web?
- Cum vor fi descrise #i documentate cerin!ele pentru aplica!ia web? Care sunt
gradele utile ale detalierii #i formalismului?
- Trebuie avut" n vedere folosirea utilitarelor? Care dintre acestea sunt potrivite
pentru nevoile specifice ale proiectului?
15
Boehm, B. W., Requirements that Handle IKIWISI, COTS, and Rapid Change, IEEE Computer, 33 (7), July, 2000, pp. 99102
16
Constantine, L., Lockwood, L., Software for Use: A Practical Guide to Models and Methods for Usage-Centered Design, ACM
Press, 2001
2.1 Tipuri de cerin!e
Organiza!iile de standardizare #i cele comerciale au dezvoltat un num"r mare de
taxonomii pentru definirea #i clasificarea diferitelor tipuri de cerin!e (de exemplu Volere
17

sau IEEE 830-1998
18
). Majoritatea taxonomiilor fac distinc!ie ntre cerin!ele func!ionale #i
cele non-func!ionale. Cerin!ele func!ionale descriu capacit"!ile #i serviciile unui sistem (ex.
"Utilizatorul poate selecta o iconi!" pentru a vizualiza articolele din co#ul de cump"r"turi
n orice moment"). Cerin!ele non-func!ionale descriu propriet"!ile capacit"!ilor #i nivelul
dorit al serviciilor (ex. "Aplica!ia web va suporta cel pu!in 2500 de utilizatori concuren!i.").
Alte cerin!e non-func!ionale se refer" la constrngerile proiectului #i interfe!ele sistemului.
n continuare vom discuta pe scurt tipurile de cerin!e relevante pentru proiectele de
dezvoltare web:
Cerin!e func!ionale. Cerin!ele func!ionale specific" capacit"!ile #i serviciile pe care
un sistem ar trebui s" le ofere (de exemplu transferul de bani ntr-o aplica!ie de online
banking). Cerin!ele func!ionale sunt frecvent descrise utiliznd scenariile de utilizare de
caz (diagrame UML Use Case) #i specifica!iile de formatare
19
(vezi Figura 3.9 - diagrama
Use Case specifica aplicatiei discutate la laborator).
Figura 3.9: Diagrama de caz de utilizare pentru magazinul online
Toate aplica!iile web au cel pu!in un utilizator uman, de cele mai multe ori anonim.
n exemplul abordat, al unui magazin online (e-shop), se pot identifica doi actori:
utilizatorii magazinului online #i cump"r"torii care comand" articole. Figura de mai sus
reprezint" o diagram" tip caz de utilizare, care va servi drept punct de p ornire pentru
modelarea ulterioar". Cerin!ele naviga!ionale care suplimenteaz" cerin!ele func!ionale sunt
17
Robertson, S., Robertson, J., Mastering the Requirements Process, Addison-Wesley, 1999
18
IEEE Recommended Practice for. Software Requirements, http://www.cse.msu.edu/~chengb/RE-491/Papers/IEEE-SRS-
practice.pdf, august 2011
19
Cockburn, A., Writing Effective Use Cases, Addison-Wesley, 2001
eviden!iate prin stereotipul <<navigation>> n diagrama tip caz de utilizare. UWE face
distinc!ie ntre cele dou" tipuri de cazuri de utilizare:
- cazurile de utilizare <<navigation>> care reprezint" activit"!i naviga!ionale ale
utilizatorului (cum ar fi selectarea unui articol #i vizualizarea co#ului de cump"r"turi) #i
- cazurile de utilizare UML standard care surprind logica afacerii a aplica!iei web.
Cerin!e privind con!inutul. Cerin!ele privind con!inutul specific" con!inutul care ar
trebui prezentat de aplica!ia web. Con!inutul poate fi descris, de exemplu, sub forma unui
glosar.
Cerin!e privind calitatea. Cerin!ele privind calitatea descriu nivelul de calitate al
serviciilor #i capacit"!ilor #i specific" propriet"!i importante ale sistemului precum ar fi
securitatea, performan!a sau u#urin!a n folosire
20
. Standardul interna!ional ISO/IEC
9126
21
define#te un model independent de tehnologie pentru calitatea softului, care
cuprinde 6 caracteristici de calitate, fiecare avnd propriile tr"s"turi:
func!ionalitatea descrie prezen!a func!iilor care ndeplinesc propriet"!ile definite.
Tr"s"turile sunt concordan!a, precizia, interoperabilitatea, complian!a #i securitatea;
siguran!a descrie capacitatea unui produs software de a-#i men!ine nivelul de
performan!" n anumite condi!ii pe o perioad" definit" de timp. Tr"s"turile sunt
maturitatea, toleran!a la erori #i capacitatea de recuperare;
u#urin!a n folosire descrie efortul necesar pentru a utiliza un produs software #i
evaluarea sa individual" de c"tre un grup de utilizatori definit sau presupus. Tr"s"turile
sunt u#urin!a n n!elegere, nv"!are #i operare;
eficien!a - descrie raportul ntre nivelul de performan!" al unui produs software #i
resursele pe care acesta le utilizeaz" n anumite condi!ii. Tr"s"turile sunt comportamentul
n timp %i comportamentul resurselor;
ntre!inerea descrie efortul necesar pentru a implementa modific"ri prestabilite
ntr-un produs software. Tr"s"turile sunt posibilitatea de analiz", schimbare, stabilitate #i
testare;
portabilitatea descrie capacitatea unui produs software de a fi mutat dintr-un
mediu n altul. Tr"s"turile capacitatea de adaptare, instalare, potrivire #i nlocuire.
Cerin!ele mediului sistemului. Aceste cerin!e descriu modul n care o aplica!ie web
este inclus" n mediul !int" #i interac!ioneaz" cu componentele externe, incluznd de
exemplu componentele comerciale autonome sau un hardware special. De exemplu, dac"
o aplica!ie web se presupune c" va fi disponibil" global, atunci n cerin!ele de mediu
trebuie s" se specifice detaliile.
Cerin!ele interfe!ei utilizator. Deoarece se presupune c" utilizatorii web folosesc
aplica!ia web f"r" a fi instrui$i n prealabil, ghidarea intuitiv" #i auto-explicativ" a
utilizatorilor este esen!ial" pentru acceptarea aplica!iei. Cerin!ele privitoare la interfa!a
utilizator definesc modul n care o aplica!ie web interac!ioneaz" cu diferite tipuri de clase
de utilizatori. Principalele aspecte sunt hipertextul (structura de navigare) #i prezentarea
(interfa!a utilizator). Detaliile de navigare #i prezentare sunt definite n mod normal n
procesul de modelare, dar deciziile ini!iale privind proiectarea interfe!ei utilizator trebuie
luate pe parcursul extragerii cerin!elor . Prototipurile sunt cele mai potrivite n aceast"
20
Chung, L., Nixon, B. A., Yu, E., Mylopoulos, J., Non-Functional Requirements in Software Engineering, Kluwer Academic
Publishers, 2000
21
ISO/IEC 9126-1:2001(E), http://webstore.iec.ch/p-preview/info_isoiec9126-1{ed1.0}en.pdf, august 2011
situa!ie. Constantine #i Lockwood sugereaz" c" utilizatorii trebuie s" coopereze n
proiectarea scenariilor pentru anumite sarcini
22
.
Cerin!e posibile pe parcursul dezvolt"rii. Produsele software n general #i
aplica!iile web n particular sunt subiectul unei evolu!ii #i mbun"t"!iri continue. Din acest
motiv dezvoltatorii web trebuie s" anticipeze cerin!ele care ar putea apare dup" folosirea
planificat" pe termen scurt a aplica!iei. De exemplu, o cerin!" de calitate care solicit"
suplimentarea cu 5000 de utilizatori concuren!i n doi ani trebuie avut" n vedere, prin
definirea unei arhitecturi scalabile a sistemului.
Constrngerile proiectului. Constrngerile proiectului nu sunt negociabile pentru
p"r!ile interesate ale proiectului #i includ de obicei bugetul #i planul, limit"rile tehnice,
standardele, tehnologia de dezvoltare folosit", regulile de desf"#urare, aspectele de
ntre!inere, constrngerile opera!ionale #i aspectele legale sau culturale care afecteaz"
proiectul.
Cazurile de utilizare UML sunt utile pentru a descrie cerin!ele func!ionale. Un caz
de utilizare descrie o func!ie a sistemului din perspectiva actorilor acestuia #i conduce la
un rezultat perceptibil de c"tre actori. Un actor este o entitate extern" sistemului care
interac!ioneaz" cu sistemul. O diagram" de utilizare de caz prezint" rela!iile dintre cazurile
de utilizare #i actori. Diagramele de utilizare de caz sunt utile pentru a ilustra
dependen!ele strnse dintre cazurile de utilizare #i actori. Atributele descriu num"rul #i
numele cazului de utilizare, actorii implica!i, condi!iile anterioare #i posterioare, evolu!ia,
excep!iile #i erorile, varia!iile, sursa, ra!ionamentul sau interdependen!ele cu alte diagrame
UML.
22
Constantine, L., Lockwood, L., Software for Use: A Practical Guide to Models and Methods for Usage-Centered Design, ACM
Press, 2001
III Implementarea aplica#iilor web folosind o abordare pragmatica
n prima parte vom aborda procesul de proiectare al aplica$iilor web pentru
programatorii care au pu!ine no!iuni de design. Pe lng" culorile #i machetele atractive,
site-urile web au nevoie de o programare realizat" la un nivel profesionist, pentru a fi
corect proiectate.
Un design web implic" mai mult dect crearea de pagini web atractive. Concepte de
baz" precum teoria culorilor, tipografie, layout-ul #i gradul de utilizare sunt toate esen!iale
pentru un bun design. Aceste lucruri conlucreaz", a.. site-ul s" devin" un succes pentru
utilizatori. Putem alege toate culorile n mod corect #i s" folosim gradient-uri omogene,
dar dac" nu utiliz"m un font lizibil, site-ul nostru nu este bine proiectat. Putem realiza o
crea$ie deosebit" n Photoshop sau GIMP, dar nu vom fi niciodat" n m"sur" s" facem s"
arate mai bine ntr-un browser, dac" nu #tim s" lucr"m cu HTML #i CSS. Dac" utiliz"m un
markup defectuos, programele JavaScript nu vor func!iona a#a cum ne-am a#tepta. Dac" nu
optimiz"m con!inutul, motoarele de c"utare vor ignora site-ul nostru. Dac" nu lu"m
accesibilitatea #i gradul de u%urin$" n utilizare n serios, utilizatorii vor evita site-ul.
Un alt aspect cheie pentru un design web bun este creativitatea. Vom construi un
site pentru a ilustra procesul de proiectare, dar important este s" experimenta$i %i s" nu
lua$i totul n serios, exact a#a cum este expus. Alege!i culori #i fonturi proprii, folosind
aplica$ia prezentat" n continuare ca un ghid pentru a ob!ine designul dumneavoastr". Pe
m"sur" ce pune!i n aplicare propriul design, ve!i afla mult mai multe despre teoria design-
ului web.
Majoritatea programatorilor web primesc de regul" un fi#ier Photoshop (extensia
acestuia este .psd) de la un grafician. O parte a job-ului unui dezvoltator este de a
ncorpora acest design ntr-o aplica!ie web, #i s" #tie s" manipuleze psd-urile ca parte a
procesului de proiectare. Machetele Photoshop sunt folosite din dou" motive:
- ele sunt instrumente bune pentru a descrie multe p"r!i ale procesului de proiectare
#i
- este mai u#or s" implement"m conceptele CSS atunci cnd lucr"m cu culorile din
machete.
DrummersCenter, este aplica$ia web pe care o vom construi #i reprezint" un magazin
online unde utilizatorii pot consulta produse din gama instrumentelor muzicale de
percu$ie (tobe). Scopul final este de a crea un sistem de management al con$inutului (CMS)
pentru aceste tipuri de instrumente muzicale, oferind posibilitatea managerilor de
con$inut de a administra categoriile de produse %i produsele individuale prin intermediul
unei interfe$e de administrare web.
n primul rnd, trebuie s" ncerc"m s" n!elegem ce vor poten$ialii no%tri clien!i de la
aplica$ia web pe care o vom proiecta. Feedback-ul primit de la ace%tia este un punct bun de
plecare, dar de multe ori exist" o list" de cerin!e. Colectarea cerin!elor este la fel de de
important" pentru proiectare, ct #i pentru dezvoltare. Este nevoie s" utiliz"m experien!a
noastr" ca dezvoltatori pentru a ob!ine r"spunsurile de care avem nevoie pentru a rezolva
problemele clien!ilor no#tri.
n al doilea rnd, trebuie s" ne asigur"m c" am n!eles scopul real al aplica$iei web #i
c" avem un sim! pentru publicul !int". Diversele categorii de public vor avea a#tept"ri
diferite #i vor interac!iona diferit cu site-ul. Deci, vom afla care este audien!a !int" a
clientului nostru, #i apoi vom cerceta concuren!a pentru a afla punctele sale forte #i
punctele sale slabe. Aceast" cercetare ne va ajuta sa ntreb"m clien!ii no#tri: "V-a!i gndit la
asta? "
n cele din urm", dac" am ob!inut mpreun" cu clientul o list" de cerin!e, vom ncepe
s" schi!"m (folosind un instrument de scris) toate aceste informa!ii. ntreb"rile uzuale sunt:
"de ce?" este nevoie de o astfel de aplica$ie %i cum? vom extrage informa!iile de care
avem nevoie de la clien!i.
6.1 Colectarea cerin!elor
Dac" ar fi s" reproiect"m o aplica!ie web/tradi$ional" existent", trebuie s" #tim exact
ceea ce trebuie s" fac" aplica!ia respectiv". n acest sens, vom intervieva p"r!ile interesate #i
utilizatorii. Este recomandat s" intr"m #i n codul surs" al sistemului actual pentru al
studia. Vom investiga, de asemenea, ceea ce a realizat concuren!a. Este nevoie s" urm"m
acela#i proces pe care le l utiliz"m atunci cnd reproiect"m un site web. Dintre exemplele
tipice de cerin!e enumer"m:
"Putem ob!ine o serie de butoane aspectuoase, care s" confere un aspect de
str"lucitore aplica$iei web?"
"Am dori ca logo-ul nostru s" reflecte ceva, a#a cum se ntmpl" pe alte aplica$ii
web din genera$ia Web 2.0"
"Dorim s" fie folosite anumite culori care s" atrag" oamenii. Nu vrem ca site-ul s"
fie p"r"sit de utilizatori"
"Vreau s" v"d c" formele arat" frumos. Totul s" se asemene cu o aplica!ie web."
"Nu sunt foarte sigur de ceea ce caut, dar vreau s" fie distinctiv de celelalte
aplica$ii web similare"
"Avem nevoie de imagini ale produselor din categoria instrumentelor de percu$ie
care s"-i determine pe vizitatori s" le cumpere".
"mi place foarte mult ceea ce renumitul magazin online Amazon a f"cut putem
face asta? Cu excep!ia faptului c" pierdem navigarea cu tab-uri, putem folosi mai multe
culori? Este posibil acest lucru, nu? "
Cunoa!terea scopului
Pe m"sur" ce proiect"m acest site, ne vom p"stra concentrarea pe deservirea
publicului !int". O abordare util" este de a ob!ine de la clien!i o list" de cteva site-uri web
pe care ar dori s" le foloseasc" ca referin!". Nu le vom folosi ca un model, dar s" avem
cuno#tin!" despre ele ne poate ajuta depist"m ce elemente plac clien!ilor no#tri. De obicei,
clien!ii se vor uita la ceea ce realizeaz" concuren!a direct", n timp ce altele vor ncerca s"
proiecteze site-ul lor pe baza unor site-uri dintr-un domeniu independent.
Este necesar ca atunci cnd proiect"m site-urile web s" avem delimitat n mod clar
publicul !int" #i obiectivele acestuia. Vom avea nevoie, probabil, s" renun!"m la multe
lucruri, dar rezultatul final va fi un site mai bun.
6.2 Realizarea unui plan de implementare
Dup" ce am colectat cerin$ele #i am n!eles foarte clar ce dore#te site-ul s"
construiasc" este necesar s" concepem un plan de implementare. Logic, pa%ii necesari
pentru realizarea cerintelor sunt:
1. schi!area unor design-uri de baz" #i ob!inerea din partea clientului a aprob"rii
(pentru unul din ele);
2. selectarea culorilor;
3. selectarea fonturilor;
4. construirea logo-ului n Adobe Illustrator;
5. implementarea design-ul de baz" (machetei) n Adobe Photoshop;6. realizarea de
imagini pentru banner, butoane #i alte elemente;
7. programarea n HTML #i CSS pornind de la macheta Photoshop;
8. testarea site-ului ob$inut pentru compatibilitate #i accesibilitate;
Creionul #i hrtia sunt importante pentru procesul creativ #i putem folosi n acest
stadiu aceste instrumente mai eficient comparativ cu folosirea unui calculator. Un client
non-tehnic ar putea renun$a dac" apel"m la sistemul de calcul mobil #i ncepem s" tast"m #i
s" concepem pe loc un design; creionul #i hrtia reprezint" un instrument excelent de
comunicare interpersonal". Vom schi!a ideile de fa$" cu clientul #i apoi i vom oferi creionul
pentru a vedea p"rerile acestuia privitoare la site. Scopul acestui lucru este de a facilita
comunicarea cu echipa #i cu clien!ii no#tri. Design-ul ob$inut n aceast" faz" s-ar putea s"
nu semene deloc cu produsul final, dar este un lucru normal.
6.2.1 Schi!area ideilor
Creionul #i hrtia sunt instrumente excelente pentru a nota fluxul ideilor. Pentru a
schi!a un design, trebuie s" cunoa#tem ce ar trebui s" con!in" layout-ul site-ului %i
ntreb"rile fire%ti sunt:
- Ce leg"turi trebuie s" fie prezente n pagina de start?
- Ce elemente ar trebui s" con!in" pagina de start?
Din discu!iile cu clientul a rezultat c" layout-ul site-ului va con!ine urm"toarele
elemente:
numele site-ului
un cmp de c"utare
un formular de autentificare pentru managementul con$inutului
un paragraf introductiv scurt despre ceea ce face site-ul
o list" cu produsele ad"ugate cele mai recent
o list" de categorii de produse.
Suplimentar, fa!" de aceste elemente, pagina de start con!ine, de asemenea, leg"turi
pentru diferite pagini de informare, dintre care men$ion"m:
termeni si condi!ii
nregistra!i-v" (text)
politica de confiden!ialitate
informa!ii de contact
Conven#ii privind layout-ul
Majoritatea site-urilor web tind s" aib" multe lucruri n comun:
- o regiune antet care afi#eaz" numele site-ului sau logo-ul;
- regiunea cu con!inutul principal mp"r!it n coloane, #i cel pu!in una dintre aceste
coloane este folosit" ca o bara lateral", care ar putea s" con!in" elemente de navigare sau
informa!ii suplimentare;
- o bar" de navigare, fie n partea de sus a paginii sau pe partea stng".
- o regiune de subsol care con!ine informa!ii privind drepturile de autor #i, poate,
unele leg"turi suplimentare.
Aceast" similitudine ntre site-uri se explic" prin faptul c" design-erii
#i dezvoltatorii imit" ceea ce lucreaz". Nu este o coinciden!" faptul c" multe site-uri de #tiri
arat" la fel; majoritatea ziarelor urmeaz" acela#i layout.
Pentru a proiecta un site web func!ional, trebuie s" ne asigur"m c" utilizatorii pot
g"si ceea ce doresc imediat, f"r" s" fie nevoi!i s" "sape" prea adnc; aceasta se realizeaz"
prin u#urin$a navig"rii.
nainte de a ncepe s" schi!"m design-ul, vom consulta Internet-ul pentru a c"uta
idei. Vom c"uta site-urile care se afl" pe acela%i segment de pia!" ca site-ul pep care l vom
realiza. Cteva exemple din domenii care nu au leg"tur" pentru a vedea dac" concuren!ei
noastre i lipse#te ceva, ce ar putea folosi in avantajul nostru.
Construirea celor trei schi#e
Vom realiza minim trei schi ! e folosind Balsamiq Mockups (http://
www.balsamiq.com/products/mockups) pentru clien!ii no%tri, pentru fiecare proiect %i
care vor fi reprezenta:
- un design simplu, conservator;
- un design complex;
- un design de mijloc, ceva mai conservator, dar care s" denote fler.
Prima schi!" reprezentat" n figura 6.1 are un design minimalist %i nu prezint"
func!ionalit"$i, exceptnd butonul de nregistrare %i caseta de autentificare. Este o versiune
grosier" a site-ului care cel mai probabil se va baza pe culoare, gradient-uri, precum #i
efecte de umbrire care s" atrag" aten!ia asupra diferitelor sec!iuni. Un avantaj pentru al
acestui design este faptul c" dac" avem mai mult text n con!inut putem ajuta motoarele de
c"utare s" ne plaseze ntr-un top.

Figura 6.1 Schi$" simpl" pentru aplica$ia web
A doua schi!" este mai consistent" din punct de vedere al graficii, cu un spa!iu mai
mare pentru o fotografie sugestiv" pe partea stng" #i formularele de autentificare #i de
nregistrare pe dreapta. Aceast" pagin" ar trebui s" fie un pic mai atractiv" dect prima
schi$", dar nu avem att de multe informa!ii pentru a spune utilizatorilor ce ar trebui s"
fac" dincolo de pagina principal".

Figura 6.2 Schi$" complex" pentru aplica$ia web
Ultima schi!" denot" un design mult mai func!ional, care ncorporeaz" elemente din
pagina de start, dar care transform" categorii ale site-ul ntr-o variant" simpl" de navigare.
Acest design p"streaz" caseta de c"utare #i restul de leg"turi, posibilitatea de autentificare
#i de nregistrare pe pagina de start, nlocuind formularele cu butoane. Este similar cu
design-ul original, dar include anumite elemente grafice #i las" spa!iu pentru a explica
utilizatorilor cine suntem #i de ce ar trebui s" utilizeze ceea ce oferim.

Figura 6.3 Schi$" func$ional" pentru aplica$ia web
Selectarea schi#ei
n urma ntlnirii avute cu p"r!ile interesate, ace#tia au selectat a treia schi!"; cu
toate acestea, ei ar dori s" o vad" ca imagine color (machet" Photoshop) ct mai curnd
posibil. P"r!ile interesate vor s" vad" o mostr" cu culoare. Pentru a face asta, avem nevoie
s" afl"m despre modul de alegere a culorilor #i font-urilor, astfel nct s" putem construi o
mostr" digital" care s" dea bine la urm"toarea ntlnire.
n design-ul web va trebui s" facem multe concesii pentru a mul$umi clientul. Vom
schimba culorile cu ceva care nu este pe placul nostru pentru c" astfel dore%te clientul. Un
lucru care frustreaz" designerii este viziunea lor creatoare distrus" de cerin!ele clientului.
n calitate de dezvoltatori, am discutat n capitolul anterior modul n care cerin!ele
direc!ioneaz" proiectele; faza de proiectare este un alt set de cerin!e pentru aplica!ia
noastr" #i trebuie s" fie rafinat", rescris" #i restructurat".
6.2.2 Alegerea culorilor

n acest moment, dispunem de schi!e #i de confirmarea c" putem realiza o mostr" a
design-ului; urm"torul pas este s" alegem unele culori #i construim o schem" de culoare.
Culorile pot influen!a pozitiv sau negativ aplica!ia noastr", n func!ie de modul n care le
utiliz"m #i de modul n care le amestec"m. Culorile evoc" emo!ii #i atrag aten!ia c"tre
detaliile importante.
Design-erii web experimenta$i au un ochi special pentru culoare. Experien!a #i
intui!ia lor ne ghideaz" de multe ori atunci cnd este vorba s" cre"m o schem" de culori
pentru un site web. Dac" cunoa#tem cum culorile sunt legate ntre ele, avem
posibilitatea s" alegem culorile care merg mpreun", la fel de u#or cum putem alege
modelul de proiectare pentru o aplica!ie web.
Concepte de baz" privind culorile
O culoare este descris" prin numele acesteia, nivelul s"u de satura!ie #i luminozitate.
Atunci cnd lucr"m cu culori, trebuie s" ne gndim la nuan!a de culoare, cantitatea de
culoare #i cum arat" culoarea al"turi de alte culori. De asemenea, trebuie s" ne gndim la
modul n care culoarea ar putea fi interpretat" de c"tre public. n continuare, vom afla cum
func!ioneaz" toate acestea mpreun".
Nuan!", satura!ie #i luminozitate
Cnd discut"m despre culoarea unui obiect, facem referire de fapt la nuan!".
Satura!ia este cantitatea de culoare din imagine. O culoare saturat" este vibrant", n timp ce
o culoare desaturat" apare sumbr" #i gri. Dac" reducem satura!ia, vom face culorile s" aib"
un aspect mai sp"l"cit. n unele de cazuri, aceasta este un lucru bun, deoarece reduce din
pregnan!a unor culori dure sau #ocante. Alterarea luminozit"!ii unei culori poate face
aspectul de ansamblu al culorilor mai nchis sau mai deschis. Schimbarea luminozit"!ii #i
satura!iei ne permite s" modific"m aspectul culorii a%a cum putem observa n figura 6.4.



Figura 6.4 Schimbarea luminozit"!ii #i satura!iei unei culori
Mixarea culorilor aditiv #i substractiv
Culorile pe care le vedem pe ecran ar putea s" nu fie acelea#i cu cele pe care le
ob!inem la imprimare. Exist" o diferen!" fundamental" ntre modul n care culoarea apare
pe hrtie sau n natur" (lumina se reflect") #i modul de afi#are a culorii pe un ecran
(culoarea este proiectat"). Pe ecran, mixajul de culoare este aditiv; la tip"rire, este
substractiv. Aceast" diferen!" este foarte vizibil" prin compararea culorilor din vopsele cu
culorile de pe ecranul unui calculator.
Putem observa metoda substractiv" n ac!iune, atunci cnd amestec"m vopselele.
Dac" se amestec" galben #i albastru, ob!inem verde. n cazul n care se amestec" albastru #i
ro#u, ob!inem purpuriu. Dac" se amestec" toate culorile, mpreun", ob!inem negru pentru
c" obiectele absorb ntregul spectru vizibil.
Ecranul calculatorului afi#eaz" culorile folosind sistemul aditiv de culoare. Culorile
primare sunt nlocuite de ro%u, verde #i albastru. Aceste culori sunt amestecate #i
proiectate, pentru a crea lumin". Atunci cnd amestec"m ro#u, verde #i albastru mpreun",
vom termina cu alb. Cnd nu se amestec" toate culorile mpreun", ob!inem negru. Acesta
este un proces aditiv de amestecare de culorii. Ochii no#tri absorb culorile care provin de
pe ecran. n acest caz, ob!inem galben amestecnd verde #i ro#u.
Cnd lucr"m cu culori pe calculator, avem posibilitatea de a alege ntre RGB,
metoda aditiv" de culoare #i CMYK, care reprezint" Cyan, Purpuriu, Galben, Key (de
obicei negru), metoda substractiv". Pentru web se utilizeaz" de obicei RGB. n cazul n care
dorim s" imprim"m, vom utiliza CMYK, modul de culoare folosite de majoritatea
sistemelor de imprimare.
Contextul culorii
Dac" privim cu aten!ie imaginile din figura 6.5 dreptunghiul albastru din stnga
pare a fi mai nchis, chiar dac" ambele dreptunghiuri sunt exact de aceea#i culoare. Acest
truc pe care ochii l joac" cu noi se nume#te contextul culorii.

Figura 6.5 Contextul culorii
Contextul unei culori poate influen!a foarte mult modul n care aceasta apare n
aplica!ia noastr". Chiar dac" din punct de vedere tehnic alegem culorile corect, s-ar putea
s" facem ajust"ri suplimentare pentru a le face s" arate bine.
Acest efect este cauzat de fluting, termenul tehnic pentru modul n care ochii no#tri
amestec" mpreun" culorile adiacente. Avem posibilitatea s" utiliz"m fluting-ul de culori n
avantajul nostru (vezi Figura 6.6) deoarece aceasta face gradient-urile posibile. Dac" nu
facem tranzi!ia suficient de treptat, vom ob!ine efectul de banding. Dac" facem tranzi!ia cu
o mul!ime de mici varia!ii, ochii le ignor" #i le amestec" pe toate mpreun".
Figura 6.6 Fluting, banding %i gradient
Efectul culorilor asupra emo$iilor
Culorile sunt asociate cu emo!iile, starea de spirit sau sentimentele. Cnd alegem
culorile pentru aplica!ia noastr" web, este important s" ne gndim la diferitele r"spunsuri
pe care acest lucru le-ar putea declan#a. Alegerea culorii influen!eaz" perspectivele
utilizatorilor no#tri; aplicarea unei scheme de culori unui site schimb" complet experien!a
utilizatorului.

Culorile calde
Culorile calde ne fac s" ne gndim la c"ldur" %i lumina soarelui. Unii consider" c" ne
sim!im mai calzi, dac" ne uit"m la aceste culori. Culorile calde includ ro#u, galben #i
portocaliu.
Ro#u este o culoare puternic", care poate nsemna dragoste, bucurie, fericire #i
romantism. Aceasta poate reprezenta, de asemenea, poft", mnie, r"zboi sau pericole. n
aplica!iile software este aproape ntotdeauna folosit" pentru a afi#a un avertisment sau un
mesaj de eroare deoarece atrage imediat ochii unui utilizator.
Galben este o culoare care face mpiedic" concentrarea utilizatorului, dar poate
evoca inteligen!" #i fericire atunci cnd este utilizat" corect. Multe aplica!ii software
utilizeaz" un fel de efect de decolorare galben pentru a ne n#tiin!a c" ac!iunea a fost
reu#it".
Portocaliul poate fi vesel ca #i galben, dar poate fi, de asemenea, arogant #i superior,
n func!ie de cantitatea de ro#u. Exper!ii sus!in c" ro#u con!inut n portocaliu poate stimula
creierul.

Culorile reci
Culorile reci au un efect de r"cire sau calmant asupra oamenilor %i sunt utilizate
pentru a diminua tonul unui site. Culorile reci includ albastru, verde, #i violet.
Albastrul poate fi calmant %i lini#titor #i r"coros %i are tendin!a de a determina
utilizatorii s" se relaxeze atunci cnd este desaturat. Cu toate acestea, cu ct nuan!ele de
albastru devin mai nchise, ele pot provoca sentimente de triste!e si depresie.
Verdele este asociat cu natura, speran!a, s"n"tatea #i capacitatea de reac!ie. Dac" este
utilizat n mod incorect, verdele poate declan#a sentimente de invidie, l"comie, vinov"!ie #i
dezordine. Anumite nuan!e de verde permit ochilor s" se odihneasc", ceea ce poate avea
efect calmant asupra utilizatorilor. Amestecul gre#it de culori poate face ca utilizatorii s" se
simt" r"u sau dezgusta!i.
Purpuriul este una dintre acele culori care nu apare n natur" foarte des. Purpuriul
este adesea asociat cu regalitatea #i misticismul, deorece a fost extrem de dificil de ob!inut
din cele mai vechi timpuri %i reprezint" un amestec de ro#u #i albastru. Purpuriul deschis
este deseori asociat cu natura, pacea, lini#tea #i spiritualitatea. Violetul nchis poate evoca
sentimente de depresie; n cantit"!i excesive pot fi dificile pentru ochi.

Culorile neutre
Culorile negru, alb, argintiu, gri, bej #i maro contribuie la reducerea decalajului
dintre culorile reci #i calde. Cnd sunt utilizate ca #i culori de fundal, acestea ajut" alte
culori s" ias" n eviden!".
Negrul poate reprezenta prestigiul #i elegan!a #i poate fi ntr-adev"r puternic dac"
este utilizat n contextul potrivit. Cu toate acestea, negrul este de asemenea asociat cu
doliu, moarte, disperare. Cnd utiliza!i culoarea neagr" ntr-un design, trebuie s" v" alege!i
publicul !int" cu aten!ie.
Albul evoc" sentimente de puritate #i perfec!iune. Este o culoare perfect" pentru un
site web curat. Prea mult alb poate fi plictisitor #i steril, dar face ca celelalte culori s" ias"
mai mult n eviden!".
Maroul poate stimula senza!ia de foame, s"n"tate #i simplitate. Pe de alt" parte, unii
oameni percep culoarea maro ca pe o culoare murdar", ceva ce cu siguran!" nu e de dorit
pentru site-ul dumneavoastr".
Bejul i face pe oameni s" se relaxeze; este o culoare conservatoare care mprumut"
de la maro si alb. Este o alegere excelent" pentru un fundal, deoarece poate fi calmant" #i
va permite altor culori s" ias" n eviden!".
Griul rareori evoc" o emo!ie, dar cnd o face, de obicei este asociat" cu sentimente
de triste!e, de doliu %i irascibilitate. Se nclin" spre partea rece a spectrului de culori. Gri
este o culoare interesant"; dac" o facem ntunecat" va mprumuta ceva din elegan!a
negrului, iar dac" o facem luminoas" va mprumuta unele din tr"s"turile albului.
Culorile !i utilizatorii
Prejudec"!ile unei persoane vor avea un anumit efect asupra modului n care
culorile alese de noi i vor afecta emo!iile. Aceste prejudec"!i se pot datora unei asocia!ii
create de o experien!" sau de memorie, dar cel mai adesea sunt culturale.
De exemplu, de#i am putea crede c" ro#u este o culoare care denot" pasiune, este o
culoare care reprezint" norocul #i s"rb"toarea n China. n unele p"r!i din India, culoarea
ro#ie poate nsemna triumf sau succes. Ro#ul poate de asemenea simboliza socialismul #i
comunismul; n Africa de Sud, este culoare de doliu. Negrul este o culoare de doliu n
lumea occidental", dar chinezii utilizeaz" negrul pentru a simboliza calitatea superioar".
Orhideea purpurie este culoarea na$ional" a Thailandei (Thai Airways), %i aceast"
culoare predomin" n portalul Thailand.com. n mod similar, verdele predomin" n
portalul Pakistani, iar 123India are nuan$a %ofranului
23
.
Dac" site-ul nostru va fi utilizat de c"tre un public interna!ional, este important s"
localiz"m culorile, la fel cum localiz"m textul.
Schemele de culoare
Unele culori nu arat" bine unele lng" altele, pe cnd altele da. Schemele de culori
sunt grupuri de culori care lucreaz" mpreun" pentru a crea un rezultat atr"g"tor din punct
de vedere vizual. n continuare vom prezenta diferitele tipuri de scheme de culoare #i
modul n care le putem aplica.
nainte de a alege o schem" de culori trebuie s" dispunem de cuno#tin!e despre
teoria culorilor %i de aceea vom arunca mai nti o privire la roata de culori, care arat"
rela!iile ntre diferite culori. n diferitele exemple de scheme de culori vom folosi roata RYB
de culori amestecate, care folose#te ro#u, galben #i albastru ca #i culori primare (vezi figura
6.7)
Figura 6.7 Roata de culori RYB
Schema monocromatic"
Schema monocromatic" este alc"tuit" din o singur" nuan!" de culoare (vezi figura
6.8). Putem crea schema prin modificarea luminozit"!ii #i satura!iei nuan!ei #i ad"ugnd
aceste varia!ii la schem". Aceast" schem" adaug" form" #i adncime unui design. Atunci
cnd este utilizat" la un site, alte elemente precum fotografiile sau iconi!ele vor ie#i n
23
Sireteanu, N.A., Impactul Globaliz!rii asupra sistemelor informa"ionale economice, Tez! de doctorat, p.247
evidenta. Aceast" schem" este extrem de simplu de creat, dar func!ioneaz" cel mai bine
pentru site-urile n care con!inutul este cel mai important element.
Figura 6.8 Schema monocromatic"
Schema analoag"
Cele dou" culori adiacente unei culori de pe roata de culori sunt denumite culori
analoage. Pentru a construi o astfel de schem" vom lua toate cele trei culori (culoarea de
baz" #i cele dou" nvecinate - vezi figura 6.9). Schema este atenuat", dar culorile adiacente
o accentueaz" un pic. Aceast" schem" de culori implic" alegerea culorilor care sunt direct
adiacente n roata de culori. O culoare domin" schema, iar culorile similare sunt utilizate
pentru impact.
Schema este la fel de u#or de creat precum cea monocromatic", dar se ob!in
rezultate mai bune, deoarece se utilizeaz" culori diferite, n loc de nuan!e diferite ale
aceleia#i culori. Culorile suplimentare ajut" la accentuarea culorii principale, atr"gnd
aten!ia utilizatorilor spre con!inutul important.
Figura 6.9 Schema analoag"
Aceast" schem" este lipsit" de un contrast real de culoare, neavnd att contrast ct
s-ar ob!ine cu o schem" complementar".

Schema complementar"
Schema de culori complementar" folose#te ca #i culori de baz" dou" culori care apar
n p"r!i opuse ale ro!ii de culoare (ex. violet galben, ro#u verde vezi figura 6.10).
Schemele de culori complementare sunt adesea dificil de echilibrat, deoarece culorile pot fi
extrem de luminoase, necesitnd diferite trucuri pentru a le atenua. Unele combina!ii, cum
ar fi portocaliu #i indigo, pot fi extrem de dificil de echilibrat.
Figura 6.10 Schema complementar"
Cnd sunt folosite n mod necorespunz"tor, aceste culori pot fi foarte #ocante #i
intense; totu#i se poate ob!ine un efect bun prin desaturarea culorilor reci #i saturarea celor
calde. Cel mai bun mod de a folosi aceast" schem" este prin folosirea culorii de baz" ca #i
culoare principal", iar culoarea sa complementar" ca o culoare de accent. Folosirea unei
culori pentru text #i a culorii complementare pentru fundal poate face textul mai greu de
citit dac" nu se fac ajust"rile de satura!ie corespunz"toare.
Schema complementar - adiacent"
Schema de culori complementar-adiacent" (figura 6.11) este mai dificil de folosit,
dar ca #i cea complementar", poate fi destul de atractiv" dac" se fac ajust"ri
corespunz"toare la satura!ie #i luminozitate. Aceast" schem" nu este folosit" foarte des,
ceea ce nseamn" c" v" poate oferi o #ans" de a face anumite caracteristici ale unui design
s" ias" n eviden!".
Figura 6.11 Schema complementar-adiacent"
Aceast" schem" implic" alegerea unei culori de pe roata de culori #i apoi alegerea
celor dou" culori adiacente complementului primei culori. Aceast" abordare permite un
contrast puternic, ad"ugnd n acela#i timp diferite varia!ii de culoare.
Gama de culori web-safe
Paleta de culori web-safe este format" din 216 culori care arat" exact la fel pe toate
sistemele de operare. Aceast" palet" de culori este extrem de limitat", constnd din #ase
nuan!e de albastru, #ase nuan!e de verde, #i #ase nuan!e de ro%u amestecate mpreun" n
diverse cantit"!i. Aceast" palet" nu mai este folosit" n prezent deoarece majoritatea
utilizatorilor folosesc monitoare care pot reda milioane de culori. Instrumentul Color
Picker din Photoshop (checkbox-ul Only Web Colors - figura 6.12) permite lucrul n acest
mod. Dac" decide!i (sau sunt for!a!i) s" utiliza!i o culoare care nu este web-safe, trebuie s"
fi!i con#tien!i de faptul c" este posibil s" nu arate la fel peste tot.
Figura 6.12 Paleta de culori web-safe
Construirea schemelor de culori
Pentru a construi schemele de culori, n practic", sunt folosite dou" metode diferite:
metoda tehnic" #i metoda natural".
Metoda tehnic"
Metoda tehnic" folose#te teoria culorilor prezentat" anterior, pentru a construi o
schem" de culori. Se alege o culoare de baz" #i apoi se combin" cu una din schemele de
culoare prezentate pentru a ob!ine culori care se armonizeaz" cu culoarea de baz". Apoi se
ajusteaz" luminozitatea, satura!ia #i contrastul pentru a crea combina!ia potrivit" de culori.
Codurile de culoare HTML sunt triple!i hexazecimali. Primul num"r reprezint"
ro#u, al doilea verde, iar al treilea albastru. De exemplu, #FF0000 va fi de culoare ro#ie,
deoarece to!i bi!ii sunt on pentru primul num"r #i off pentru celelalte dou" numere.
Fiecare grup con!ine o valoare 0 la 255, deci culoare ro#ie este FF (ro#u complet), 00 (f"r"
verde), #i 00 (f"r" albastru).
Metoda tehnic" este o metod" foarte utilizat" de cei care nu posed" nclina!ii
artistice. Metoda de utilizat %i atunci cnd nu avem fotografii pentru a extrage culori #i
avem nevoie rapid de o schem" de culori. n continuare, vom folosi o roat" de culori #i
vom dezvolta manual o schem", sau putem utiliza unele instrumente software pentru
definirea unei scheme. Instrumentele existente pe web care ne pot ajuta s" construim
scheme de culori sunt numeroase, unul dintre cele mai bune fiind ColorSchemeDesigner.
Acest instrument ofer" o interfa!" u%or de utilizat pentru a construi o schem" de culori #i
salveaz" rezultatul n formate diferite, inclusiv o palet" de culori Photoshop (fi%ier cu
extensia ACO).
Cnd se proiecteaz" o schem" de culori trebuie s" alegem roata pe care dorim s" o
utiliz"m; n figura 6.13 este reprezentat" roata de culoare RYB n partea stng" #i roata de
culoare RGB, n dreapta.

Figura 6.13 Ro$ile de culori RYB %i RGB
Dup" cum putem observa, culorile complementare din aceste ro!i sunt diferite.
Astfel, ntr-o schem" complementar" dac" folosim roata RYB cu culoare de baz" galben,
complementul ar fi violet; dac" folosim roata RGB, complementul lui galben ar fi albastru.
Majoritatea designer-ilor cred c" schemele de culori create cu roata RYB sunt mai pl"cute
ochiului (aceasta fiind roata culorilor folosite de pictori #i designerii tradi!ionali#ti) n timp
ce al!ii cred c" ar trebui s" utiliz"m roata RGB pentru a afi#a pagini web, deoarece culorile
de pe aceast" roat" sunt afi#ate cu mai mult" acurate$e pe ecranul calculatorului.
Roata de culori pe care o alegem nu conteaz" prea mult pentru web design, att
timp ct o utiliz"m consecvent n ntreg site-ul. Instrumentele pentru culori bazate pe web
utilizeaz" ro!i de culoare diferite; selectorul de culoare de la ColorSchemeDesigner
folose#te roata de culoare RGB, n timp ce Adobe Kuler folose%te roata RYB.
Cnd ne gndim la produse din categoria instrumentelor muzicale de percu$ie,
culorile care ne vin n minte n mod natural sunt nuan!e de gri (instrumentele din aceast"
categorie sunt n general metalice), verde (tobele au de obicei aceast" culoare) %i bej
(talerele au aceast" culoare). Vom ncepe prin utilizarea unei variante de gri pentru
culoarea de baz". Putem controla culoarea de baz" pentru schem" prin selectarea unui
punct de pe roata de culori de pe partea stng" a interfe!ei. Pe m"sur" ce select"m o
culoare, patratele de culoare de pe partea dreapt" se modific", oferindu-ne o idee despre
modul n care func!ioneaz" culorile n schem".
Dac" cunoa%tem deja codul hexazecimal al culorii pe care dorim s" l utiliz"m, l
putem specifica manual n ColorSchemeDesigner printr-un clic pe codul de culoare RGB
n col!ul din dreapta jos al ro!ii #i introducerea codului n caseta de dialog. Acest lucru este
util n cazul n care am selectat o culoare de baz" de la o alt" surs", cum ar fi o fotografie
sau o pagin" web, #i dorim s" construi!i rapid o schem" pornind de la ea. Vom utiliza o
culoare de baz" (codul hexazecimal - #444A4B) pentru aceast" schem", care este o nuan!"
de gri nchis. Verde #i bej sunt culori adiacente pe roata de culori, deci putem utiliza
schema de culori analoage pentru a construi o schem" folosind culori adiacente. Schimb"m
schema din Mono n Accented Analogic, care ofer" o schem" de culori compus" din
diferite nuan!e de albastru, verde %i portocaliu.
Culorile adiacente se g"sesc implicit la 30 de grade distan!" de culoarea de baz" pe
roat"; putem ajusta acest unghi prin glisarea uneia dintre culorile adiacente mai aproape
sau mai departe. Cu ct este mai mare unghiul, cu att este mai mare contrastul ntre
culori. Ar trebui adaptate satura!ia #i luminozitatea, astfel nct s" putem vedea modul n
care aceasta afecteaz" ntreaga schem". n mod implicit, selectorul de culoare selecteaz"
diferite niveluri de luminozitate #i satura!ie. Putem modifica acest lucru prin selectarea
sec!iunii Adjust Scheme. Reducerea satura!iei decoloreaz" culorile noastre iar reducerea
luminozit"!ii le face mai intunecate, orice varia!ie de satura!ie sau de luminozitate pentru o
nuan!" fiind permis" din punct de vedere tehnic ntr-o schem" (vezi figura 6.14).
Figura 6.14 Metoda tehnic" de alegere a schemei de culori
n cazul site-ul nostru, pentru a oferi un aspect curat %i pentru a face ca celelalte
culori s" ias" mai mult n eviden!" (categoriile de produse, imaginile %i produsele) vom
folosi un fundal foarte apropiat de alb (codul hexazecimal - #F5F5F5). n esen$", pentru a
ob$ine schema de culoare am ajustat unghiul la 70 de grade %i am extras din schem", n
prim" faz", culoarea care o vom folosi pentru butoanele de autentificare (codul
hexazecimal - #162D31). Ulterior am crescut satura$ia %i luminozitatea pentru a ob$ine un
contrast mai mare. Astfel, pentru zona categoriilor/produselor de percu$ie vom folosi
verde deschis din zona centru-jos a figurii (codul hexazecimal #9FCF1A) iar pentru
butoanele formularelor din site vom folosi portocaliul din partea de centru-jos (codul
hexazecimal #DB791C).
Pentru a ajusta schema de culori, vom selecta tab-ul Export al selectorului de
culoare #i vom alege una dintre op!iunile de export. Recomandat este s" select"m ACO
(Photoshop Palette), astfel nct s" putem utiliza aceste culori ca mostre, atunci cnd
construim machetele. Fiecare schem" are URL-ul asociat astfel nct s" putem reveni la
schem" mai trziu (ex. Scheme ID: 3m62wrXrrw0w0).
Dac" dorim s" utiliz"m un selector de culoare care se bazeaz" pe roata de culoare
RYB, putem opta pentru Adobe Kuler. Folosind Kuler, putem selecta o culoare de baz" #i
alege o schem" de culori, iar apoi Kuler genereaz" o palet" de cinci culori pentru site-ul
nostru. Ulterior, putem ajusta luminozitatea #i satura!ia pentru fiecare culoare din palet".
n final vom salva paleta pentru a fi re-utilizat".
Metoda natural"
Teoria culorilor nu este ntotdeuna cea mai fericit" deoarece ajungem s" folosim
culori prea sumbre sau prea tehnice. Metoda natural" de selec!ie a culorii (potrivirea) este
o alternativ" popular" n care putem dezvolta o schem" de culori prin selectarea culorilor
din diferite sec!iuni ale unor materiale de referin!", cum ar fi o fotografie. Aceast" metod"
necesit" mai mult timp #i planificare pentru a nu selecta culori nepotrivite din imaginea
surs". Avantajul metodei naturale este faptul c" lucr"m cu natura n sine. Dac" folosim o
fotografie cu instrumente de percu$ie, culorile din acea fotografie sunt deja armonizate.
Putem ajusta manual culorile selectate prin deplasarea mouse-ul n jurul fiec"rui punct de
selec!ie indicat de fiecare caset" de culoare #i culoarea din caseta de culoare se va schimba.
Adobe Kuler poate extrage culori din orice imagine pe care o nc"rc"m; ulterior, putem
optimiza aceste culori pentru a construi o schem" (vezi figura 6.15).
Figura 6.15 Metoda natural" de alegere a schemei de culori
Observ"m n figura 6.15 diferite culori pe care le putem folosi: bej spre alb pentru
fundal (codul hexazecimal #EAE3D4), portocaliu pentru butoanele formularelor (culoare
similar" celei alese prin metoda tehnic" - (codul hexazecimal #E38E37), albastru deschis
pentru a delimita anumite sec$iuni din site (codul hexazecimal #8498A9) %i gri nchis
pentru culoarea leg"turilor (nevizitate). Putem extrage culorile manual sau putem folosi o
aplica$ie software. Putem depista n imaginea de mai sus culorile selectate manual
utiliznd instrumentul Eyedropper n Adobe Illustrator. Selectarea manual" a culorilor
este destul de greoaie: trebuie mai nti s" select"m regiunea cu instrumentul Eyedropper,
iar apoi trebuie s" vedem ce culoare este selectat" uitndu-v" la codul culorii n paleta de
selec!ie a culorii. Din fericire, ColorSchemer Studio %i Adobe Kuler ne u%ureaz" aceast"
sarcin".
ColorSchemer Studio este un software comercial care are o caracteristic" numit"
PhotoSchemer care construie#te n mod automat o schem" de culori pe baza unei fotografii
pe care o furniz"m. Important este ca culorile din fotografia respectiv" sa nu fie prea dure.
Vom exersa cu schema de culori pn" g"sim o combina!ie potrivit". n acest punct,
ar trebui avem toate culorile #i codurile lor HTML de culoare pe ecran.
Alegerea schemei
Este momentul s" alegem una dintre cele dou" metode de creare a unei scheme de
culori nainte de a ncepe s" lucr"m la macheta digital". n acest caz, schema mai
luminoas" creat" prin metoda tehnic" este cea mai potrivit" #i o vom folosi n continuare,
dar vom folosi %i anumite culori ob$inute prin metoda natural".
Culorile pentru Foreground #i Background
Culorile pentru link-uri #i text trebuie alese cu aten!ie pentru a fi lizibile. Culorile
pentru foreground #i background ar trebui contrasteze (dac" alegem o culoare de fundal
luminoas", vom alege culori nchise pentru text. Cu ct este mai mare contrastul ntre
culorile din prim-plan #i fundal, cu att utilizatorii vor citi mai u#or con!inutul.

Leg"turile din site
Hyperlink-urile trebuie s" aib" o culoare diferit" de restul textului pentru a le ajuta
s" ias" n eviden!". n mod normal, trebuie alese #i culorile diferitelor tipuri de st"ri ale
leg"turii: vizitate, active #i hovered (culoarea n care se schimb" link-ul atunci cnd
utilizatorul plaseaz" indicatorul mouse-ului pe acesta).
Op!iunile pentru culorile link-urilor sunt oarecum limitate cnd utiliz"m o schem"
de culori analoag" sau monocromatic". O tehnic" eficient" de a alege culorile leg"turilor
este de a utiliza luminozitatea #i contrastul pentru a face diferen!a ntre link-urile vizitate #i
cele pe care se deplaseaz" indicatorul mouse-ului (vezi figura 6.16). De exemplu, putem
alege pentru link-urile vizitate o culoare mai #tears", ceea ce va face ca link-urile nevizitate
s" ias" n eviden!" mai bine (contrastul trebuie s" fie destul de evident pentru ca utilizatorii
s" poate face diferen!a). Vom p"stra culorile pe care vrem s" le utiliz"m pentru fiecare
sec!iune, deoarece ne vor fi necesare la realizarea machetei #i a foii de stil.
Figura 6.16 Schema de culori pentru site-ul DrummersCenter
6.2.3 Fonturi $i tipografie
Tipografia este mult mai mult dect arta de a alege fonturi; ea face con!inutul
paginii lizibil. Textul este un element central al interfe!ei utilizator a aplica!iei, deci nevoile
utilizatorilor ar trebui s" influen!eze deciziile noastre privind tipul de font, dimensiunea #i
spa!ierea. Dac" textul nostru nu poate fi citit, am e#uat n calitate de designeri, indiferent
ct de frumos arat" restul paginii.
Anatomia fontului
Din miile de fonturi existente, unele func!ioneaz" bine pentru titluri, iar altele
pentru pasaje lungi de text. Toate caracterele dintr-un font sunt a#ezate pe o linie de
referin!" baseline (vezi figura 6.17). n"l!imea literelor mici x este n mod tradi!ional
utilizat" pentru a defini o linie medie pentru font. Distan!a dintre linia medie #i linia de
referin!" este denumit" n"l!imea-x a fontului (x-height).

Figura 6.17 Anatomia fontului
Un font are o n"l!ime-x mare n cazul n care literele mici x sunt relativ mai nalte n
compara!ie cu majusculele X. Mul!i designeri cred c" fonturile cu n"l!imi-x mari sunt mai
u#or de citit deoarece unele litere sunt mai u#or de distins. Totu#i, dac" alege!i un font cu o
n"l!ime-x extrem de mare, cuvintele n sine pot deveni mai greu de citit, deoarece un astfel
de font poate sem"na cu textul scris n totalitate cu majuscule. Este mai usor de citit o
propozi!ie compus" din litere minuscule #i majuscule, dect o propozi!ie compus" integral
din litere majuscule.
Literele mici ale unui font, cum ar fi q #i p, pot avea elemente (descenders) care
coboar" sub linia de referin!", iar altele (f, d) au elemente (ascenders) care dep"#esc
n"l!imea-x a fontului. Descender-ii #i ascender-ii pot afecta lizibilitatea textului deoarece
pot interfera sau se pot suprapune cu textul de pe alte linii.
Tipuri de fonturi
Ca dezvoltatori de site-uri web ne putem concentra pe trei tipuri de fonturi: fonturi
serif, sans-serif #i de l"!ime fix" (monospaced), fiecare avnd avantaje #i dezavantaje.

Fonturi Serif
Fonturile Serif sunt u#or de identificat dup" cozile (serife) de pe litere (vezi figura
6.18). Caracterele serif pot avea linii groase la cap"t sau la baz", dar au linii mai sub!iri la
mijloc sau margini.
Figura 6.18 Fonturi Serif
Times New Roman, fontul implicit utilizat de Microsoft Internet Explorer #i
Microsoft Word, este un bun exemplu de font Serif. Acest font a fost proiectat pentru
imprimare #i este o alegere proast" pentru utilizarea pe ecranul calculatorului. Una din
principalele probleme cu fonturile serif este c" liniile sub!iri ale literelor le pot face dificil
de citit pe ecranul unui computer, mai ales dac" folosim un font de dimensiuni mai mici.
Acest dezavantaj este inversul fa!" de textul imprimat, unde un font serif este considerat
mult mai u#or de citit.
Fonturile Serif arat" foarte bine pentru titluri, logo-uri #i sunt adesea asociate cu
elegan!a #i prestigiul. Utilizatorii dislexici pot citi mai u#or con!inutul imprimat n fonturi
serif datorit" unicit"!ii caracterelor fontului.

Fonturi Sans-Serif
Fonturile f"r" serife sunt fonturi n care un linia fontului este constant" pentru
fiecare caracter. Dintre bine-cunoscutele exemple ale acestui tip de font men$ion"m Arial #i
Helvetica, precum #i Verdana (vezi figura 6.19). Fonturile f"r" serife sunt u#or de citit pe
ecran (chiar la dimensiuni foarte mici), deci sunt o alegere excelent" pentru con!inutul
principal al site-ului.
Figura 6.19 Fonturi Sans-Serif
Fonturi cu l"!ime fix" (monospaced)
Fonturile cu l"!ime fix", cum ar fi Courier, sunt fonturi n care fiecare caracter are
acela#i spa!iu, indiferent de ct de lat" este litera. De exemplu, i #i w difer" semnificativ n
l"!ime ntr-un font sans-serif, dar au aceea#i cantitate de spa!iu orizontal ntr-un font cu
l"!ime fix". Aceste tipuri de fonturi sunt potrivite atunci cnd afi#"m cod surs" sau facturi
pe baz" de text care vor fi trimise ntr-un e-mail text-only.
n figura 6.20 este afi#at" n stnga o factur" folosind Myriad Pro, un font Serif, #i n
dreapta aceea#i factur" folosind Courier New, un font cu l"!ime fix". Fontul cu l"!ime fix"
face factura mai u#or de citit, deoarece fiecare caracter (inclusiv spa!iile) are acela#i spa!iu
#i l"!ime, totul aliniindu-se corect.
Figura 6.20 Fonturi cu l"$ime fix"
Limitele fonturilor
Fonturile standard, cum ar fi Arial #i Times New Roman sunt folosite la modul
general de c"tre to$i, dar mul!i designeri prefer" s" foloseasc" fonturi unice n design-ul
web. Cea mai mare problem" cu fonturile de pe web este c" acestea nu sunt ntotdeauna
disponibile pe fiecare calculator. O mul!ime de programe, cum ar fi Adobe Illustrator,
Adobe Photoshop #i chiar Microsoft Word vin cu numeroase fonturi. Putem folosi oricare
din aceste fonturi n design-ul web, dar e posibil ca utilizatorii s" nu aib" aceste fonturi
instalate.

Fonturi Web-Safe
Fonturi web-safe nu exist". Microsoft a prezentat cinci fonturi care sunt disponibile
pe cea mai larg" gam" de computere (vezi figura 6.21). Dac" alegem unul dintre acestea
avem un control mai strict asupra modului n care prezent"m con!inutul, dar nu avem o
garan!ie c" utilizatorii vor avea fonturile.
Figura 6.21 Fonturi web-safe
Cele cinci fonturi web Microsoft nu sunt de neglijat, dar nu sunt originale #i pot fi
destul de plictisitoare. Multe site-uri web folosesc Verdana #i Arial ca fonturi "standard",
deoarece func!ioneaz" aproape peste tot. Practic, exist" o garan!ie c" fiecare sistem va avea
un font serif, un font sans-serif #i un font monospaced, iar sistemul de operare va defini
implicit care font din sistem este asociat cu acele familii. Exist" totu#i cteva strategii pe
care le putem folosi pentru a dep"#i aceste limite #i a ob!ine mai mult control.
a) nlocuirea cu imagini
Designerii deseori creaz" o imagine care con!ine textul redat n font (de exemplu
logo-ul companiilor sau titlurile sec!iunilor). Este acceptabil s" folosim imagini de fonturi
pentru titluri, dar nu trebuie s" abuz"m de aceast" tehnic" doar pentru c" dorim ca
fonturile s" arate la fel pe toate browserele. Dac" lu"m un document Photoshop #i l t"iem
%i optimiz"m pentru utilizarea pe web, vom crea o serie de probleme suplimentare. n
primul rnd, pagina va necesita un timp semnificativ mai lung pentru desc"rcare din
cauza dimensiunii imaginilor. n al doilea rnd, pagina ar putea s" nu mai fie accesibil" de
c"tre utilizatorii nev"z"tori, care se bazeaz" pe cititoare de ecran care exprim" textul de pe
ecran #i care nu sunt capabile s" citeasc" text ncorporat ntr-o imagine.
Pentru DrummersCenter, vom utiliza o tehnic" cunoscut" sub numele de metoda
cover-up, un tip de nlocuire a imaginilor n care suprapunem textul pe pagin" cu imagini
folosind CSS. Acest lucru ne permite s" ob$inem ceva cu stil, care va fi accesibil #i #i va
p"stra acela#i aspect pe diferite platforme.
b) Definirea fonturilor de rezerv" cu Font Stacks
O alt" abordare care ne permite s" control"m fonturile pe care le v"d utilizatorii este
s" definim fontul nostru special #i apoi s" definim fonturile cu care ar trebui s" fie nlocuit
n cazul n care utilizatorul nu are fontul preferat instalat. Un stil CSS tipic pentru
selectarea unui font arat" ca n figura 6.22:
Figura 6.22 Exemplu n CSS pentru selectarea unui font
Acest fragment define#te ca font Helvetica, un font sans-serif care este comun pe
Mac OS X. Problema este c" sistemele Microsoft Windows nu au acest font n mod implicit.
Cnd un browser cite%te aceast" defini!ie de stil pe un sistem Windows, va ncerca s"
ncarce fontul Helvetica, care nu exist", #i va folosi Times New Roman - fontul implicit al
browserului (un font serif). Diferen!a dintre aceste dou" fonturi este enorm", nu numai din
cauza problemei serif versus sans-serif, ci #i pentru c" dimensiunile de baz" ale fonturilor
sunt pu!in diferite. L"!imile #i n"l!imile literelor sunt u#or mai mari n Helvetica, deci
textul de pe pagin" ar putea s" nu se nf"#oare n acela#i mod. Pentru a rezolva acest
lucru, vom defini fonturi de rezerv" pe care browser-ul le poate utiliza dac" primul font nu
este g"sit. Putem defini fonturi de rezerv" multiple printr-o defini!ie de stil similar" cu cea
din figura 6.23:
Figura 6.23 Exemplu n CSS pentru selectarea unor fonturi de rezerv"

Aceast" defini!ie instruie#te browser-ul s" ncerce nti Helvetica, apoi Arial #i apoi
s" utilizeze fontul sans-serif implicit n cazul n care nu g"se#te nici Helvetica nici Arial.
Aceast" solu!ie nu este perfect", dar func!ioneaz" pentru cele mai multe cazuri. Aceste
fonturi sunt cunoscute %i sub numele de stive de fonturi.
Alegerea structurii stivei de fonturi este foarte important"; fonturile de rezerv"
trebuie s" fie similare cu fontul preferat. De exemplu, Arial #i Verdana sunt ambele fonturi
sans-serif, dar Verdana este un pic mai lat. Geneva ar fi o alegere de rezerv" mai bun".
Cnd construim o stiv" de fonturi, vom alege nti fontul dorit apoi vom g"si un
nlocuitor adecvat, similar n n"l!ime, l"!ime, n"l!ime-x, n"l!imea descender-ului #i
ascender-ului; aceasta garanteaz" faptul c" layout-ul nu este dep"%it prea mult atunci cnd
trebuie f"cut" substitu!ia. Ulterior vom specifica unul din fonturile web-safe care este
aproapiat ca l"!ime de fontul nostru preferat. n final, ad"ug"m una dintre familiile de
fonturi implicit furnizate de c"tre CSS (serif, sans-serif, monospaced, cursive, #i fantasy).
Familiile CSS se transmit browser-ului, care red" fontul, n modul urm"tor (vezi figura
6.24):
Figura 6.24 Exemplu n CSS pentru construirea unei stive de fonturi
Selectarea fonturilor
Selectarea unor fonturi eficiente pentru site-ul nostru impune n primul s" ne
gndim la con!inutul site-ului. Site-ul nostru va con!ine produse muzicale de percu$ie %i de
aceea trebuie s" ne asigur"m c" oferim un font care este u#or de citit #i nu va fi confuz
pentru viitorii cump"r"tori. Am putea folosi fonturi diferite pentru meniul de navigare,
titlurile de sec!iuni #i de pagini #i alte zone, p"strnd num"rul maxim de fonturi de pe o
pagin" la dou", f"r" a lua n calcul logo-ul site-ului. Vom folosi un font pentru con!inut #i
altul pentru titluri.
Fonturi pentru con!inut
Cei mai mul!i designeri consider" c" fonturile sans-serif sunt alegeri bune pentru
con!inut. De#i unele litere sunt mai dificil de distins n mod individual, cuvintele complete
vor fi mai bine eviden!iate pe cele mai multe monitoare. Majoritatea site-urilor web
utilizeaz" Arial, avnd ca rezerv" Helvetica. Al!i designeri folosesc Verdana - un font mai
larg, care tinde s" completeze spa!iul un pic mai bine dect Arial, dar trebuie evitat n
situa!iile n care avem nevoie de un font extrem de mic. Verdana devine greu de citit, sub
10px.

Fonturi pentru titluri

Pentru titluri trebuie s" utiliz"m ceva care s" capteze aten!ia utilizatorului. n mod
normal vom utiliza o dimensiune mai mare de font pentru titluri. Unii designeri prefer" s"
foloseasca o variant" mai ngro#at" a fontului pentru titluri, al!ii un font cu totul diferit,
care s" condimenteze un site cu mult con!inut. Atunci cnd alegem un font pentru titlu
trebuie s" ne asigur"m c" utilizatorii pot citi fontul cu u#urin!". Fonturile pentru titluri sunt
de obicei mai mari dect fonturile utilizate pentru con!inut, deci putem utiliza un font
serif. Putem exploata acest lucru pentru a ad"uga un plus de elegan$" n pagin". n aceast"
ordine de idei, vom utiliza fontul Monotype Corsiva (vezi figura 6.25), un font atr"g"tor,
non-standard, folosit doar pentru titluri. n faza de implementare vom crea imagini cu
titluri #i vom folosi tehnica de nlocuire cu imagini pentru a le afi#a n pagin".

Figura 6.25 Fontul Monotype Corsiva
Utilizarea grilei de baz"
Crearea unui corp de text fluid este foarte important" pentru furnizarea eficient" a
con!inutului unui site web. Textul ar trebui s" curg" n jurul imaginilor #i altor elemente,
coloanele ar trebui s" fie aliniate #i rndurile nu ar trebui s" se ntrerup" oriunde. Cei mai
mul!i dezvoltatori web ncep"tori las" set"rile implicite ale browser-ului s" dicteze modul
n care se aranjeaz" textul, dar putem ob!ine un aspect mai ngrijit dac" !inem seama de
anumite aspecte nainte de a ncepe.
Grila de baz" este o gril" vertical", sau mai multe linii orizontale suprapuse, care
suport" caracterele fontului ntr-o compozi!ie. Distan!a dintre liniile orizontale devine
unitatea de m"sur", #i fiecare linie din gril" devine linia de baz" pentru fonturi. Liniile
orizontale din grila de baz" fuc!ioneaz" precum liniile dintr-un caiet liniat: p"streaz" textul
strns #i uniform distan!at n pagin". Pentru a face ca textul s" se aranjeze corect n coloane
#i n jurul imaginilor, trebuie ca imaginile s" fie aliniate la liniile orizontale ale grilei.
n"l!imea fiec"rei imagini ar trebui s" fie divizibil" cu cantitatea de spa!iu dintre liniile
grilei. Cnd toate ader" la gril", textul curge automat n jurul imaginilor, coloanele de text
se aliniaz" uniform #i totul este mult mai u#or de citit.
n figura 6.26 putem observa ct de mult" elegan!" poate ad"uga grila de baz" prin
compara$ia dintre un layout care nu o utilizeaz" (partea stng") cu unul care utilizeaz"
aceast" gril" (partea dreapt").

Figura 6.26 Utilizarea unei grile pentru aranjarea textului
Leading-ul se refer" la cantitatea de spa!iu vertical dintre linii. Este adesea denumit
spa!ierea liniilor (line spacing sau line-height) n CSS. Spa!iul alb dintre linii permite
cititorului s" urm"reasc" mai u#or linia #i este ingredientul cheie pentru construirea grilei.
Valoarea pe care o alegem pentru leading este valoarea pe care o vom utiliza pentru
spa!ierea vertical". Tot ce vom ad"uga la pagin" va trebui s" fie divizibil cu acest num"r,
astfel nct totul s" se potriveasc" n gril".
Grila este bazat" pe spa!ierea liniilor textului, care este distan!a dintre liniile de baz"
(pe care st" textul). Dac" alegem o spa!iere de 18px, textul ar trebui s" se alinieze la o
gril" care are linii la fiecare 18px. Cnd definim dimensiunea fontului pentru grila de baz"
utiliz"m pixeli care este o m"sur" foarte exact".
Putem ntreprinde diferite calcule pentru a calcula fontul potrivit, spa!ierea,
marginile #i alte elemente, dar browserele vor rotunji aceste valori n mod diferit.
Fonturile relative au fost considerate o caracteristic" de accesibilitate pentru persoanele cu
deficien!e de vedere, deoarece utilizatorul putea cre#te dimensiunea fontului utiliznd
browser-ul web. Cu toate acestea, imaginile nu se redimensionau odat" cu fonturile,
cauznd probleme de lizibilitate. n prezent exist" o solu!ie oferit" de Microsoft Word #i
Adobe Acrobat care permite cititorilor s" fac" zoom in pentru a citi textul p"strnd n
acela#i timp layout-ul, indiferent de unitatea de m"sur" folosit" de autor pentru a reda
fonturile. Aceast" abordare este suportat" n prezent de majoritatea browserelor.

Alegerea fonturilor pentru DrummersCenter
Trebuie s" ncepem cu dimensiunea fontului de baz" pentru a construi grila. Pentru
acest design, vom utiliza un font de 12px pentru textul din con$inut (body), font u#or de
citit pe un monitor mediu. Trebuie un spa!iu suficient deasupra #i dedesubtul liniei pentru
a fi lizibil. Atunci cnd alegem spa!ierea, vom alege un num"r care este divizibil. Vom
utiliza un spa$iu de 18px pentru c" ne va oferi o spa$iere sificient de mare. O regul" bun"
de urmat este s" nmul!im dimensiunea fontului de baz" definit cu 1.25 sau 1.5. Dac" avem
un font de 12px #i o spa!iere de 18px, le putem transforma n 12/18 pentru dimensiunea
fontului.
Pentru DrummersCenter vom folosi o dimensiune a textului din body de 12px cu o
spa!iere de 18px. Pentru a realiza grila, toate marginile de sus #i de jos trebuie s" fie
multipli de 18px. De fiecare dat" cnd ad"ug"m spa!iu vertical, ne vom asigura c" l
ad"ug"m n multipli de 18px, astfel nct elementele din pagin" s" se alinieze la gril". Cnd
t"iem o fotografie, n"l!imea imaginii trebuie s" fie multiplu de 18.
Pentru subtitluri vom cre#te dimensiunea fontului la 18px (n"l!imea spa!iului
dintre linii) #i s" l"s"m un alt spa!iu de 18px sub fiecare subtitlu. Pentru titluri vom dubla
fontul de baz", ceea ce le face de 24px n dimensiune. Am dep"#it spa!ierea de 18px, deci
va trebui s" dubl"m spa!ierea pentru titluri (36px) pentru a ne asigura c" elementele r"mn
aliniate.
Elementele margins, borders, padding, image heights, #i alte elemente specifice CSS
trebuie ad"ugate la baseline grid, sau design-ul va fi un fiasco. Tabelul 6.1 prezint"
fonturile pe care le-am ales:
Sec$iunea Fontul Dimensiunea Spa$ierea
Titluri Monotype Corsiva 24px 36 px
Sidebar headings Monotype Corsiva 18 px 18 px
Subtitluri Arial 14 px 18 px
Body Arial 12 px 18 px
Tabel 6.1 Fonturile utilizate pentru DrummersCenter
Tipografia este o parte important" a unui design web bun. Dac" nu acord"m aten!ie
fonturilor folosite #i modului n care acestea afecteaz" lizibilitatea, va fi dificil pentru
utilizatori s" analizeze con!inutul. Definirea unui sistem gril" pe care s" se bazeze layoutul
va mbun"t"!i att lizibilitatea ct #i aspectul estetic al site-ului.
IV Proiectarea func!ional"
n cadrul proiect"rii func!ionale trebuie luate n considerare aspectele tehnologice
care au un impact major asupra aplica!iei web aflate n curs de dezvoltare.
Alegerea unor tehnologii adecvate este un factor de succes important n dezvoltarea
aplica!iilor web. n afara cuno#tin!elor privind caracteristicile tehnologiilor, implementarea
aplica!iilor web necesit" deseori #i cunoa#terea modului n care tehnologii diferite
interac!ioneaz" ntr-o arhitectur" existent". n continuare vom aborda principalele
tehnologii web existente, interac!iunea #i modul de utilizare al acestora n anumite
arhitecturi, !innd cont de recomand"rile W3C (World Wide Web Consortium).
Din momentul n care am definit cerin#ele pentru o aplica#ie web, am ales o arhitectur" !i
am dezvoltat un mod de proiectare (pe scurt am clarificat "ce"), putem demara faza de
implementare (pe scurt "cum"). n acest context, reutilizarea are un rol din ce n ce mai
important n procesul de dezvoltare. Cerin!ele rezultate pentru implementarea aplica!iilor
web ncep cu alegerea tehnologiilor adecvate. Separarea con#inutului !i a prezent"rii este o
cerin!" esen!ial" pentru o utilizare adecvat" a tehnologiilor. n plus, trebuie luate n
considerare cerin!ele pentru distribuirea #i integrarea altor sisteme, n func!ie de o
arhitectur" selectat" sau existent".
Caracteristicile implement"rii tehnologiilor pentru aplica!iile web versus sisteme
software tradi!ionale provin din utilizarea standardelor web. Aceasta afecteaz" n special
implementarea n trei moduri: cerere (client), r"spuns (server) #i reguli de comunicare ntre
cele dou" (protocol).
Datorit" evolu!iei rapide a tehnologiilor bazate pe web este imposibil" descrierea
tuturor tehnologiilor. Din acest motiv ne vom limita doar la prezentarea anumitor
tehnologii specifice. n primul rnd vom prezenta cele mai utilizate protocoale pe web,
accentul fiind pus pe cel mai important protocol pentru World Wide Web - HTTP
(Hypertext Transfer Protocol).
5.4.1 Comunicarea client/server pe web
Paradigma client/server care st! la baza aplica"iilor web formeaz! coloana vertebral! dintre un
utilizator (client sau agent utilizator) #i aplica"ia real! (server). Acest model de comunicare se bazeaz! n
principal pe o arhitectur! pe dou! straturi. Oricum, pa#ii de procesare de pe un server web pot necesita
integrarea altor sisteme (ex: baze de date, servere de aplica"ii). Arhitecturile pe N-straturi astfel formate sunt
n principal bazate tot pe modelul client/server. De exemplu, un browser web trimite o cerere #i aceast!
cerere determin! un r!spuns de la un server web, n timp ce protocoalele (n special HTTP) au un rol esen"ial.
Aceste protocoale controleaz! modul n care un client ar trebui s! fac! o cerere, ce r!spunsuri i poate returna
serverul #i cum ar trebui s! realizeze acest lucru.
SMTP (Simple Mail Transfer Protocol), combinat cu POP3 (Post Office Protocol) sau IMAP (Internet
Message Access Protocol) permite trimiterea #i recep"ionarea e-mail-urilor. n plus, SMTP este din ce n ce
mai mult utilizat ca un protocol de transport pentru schimbul de mesaje asincrone bazate pe SOAP.
RTSP (Real Time Streaming Protocol) reprezint! un standard publicat de IETF (Internet Engineering
Task Force) #i a fost proiectat pentru a suporta distribuirea de date multimedia n timp real. Spre deosebire
de HTTP, RTSP permite transmiterea resurselor c!tre client ntr-un anumit timp n locul transmiterii acestora
n ntregime (imediat!). Aceast! form! de transmitere este cunoscut! sub denumirea de streaming.
HTTP (HyperText Transfer Protocol) a devenit un protocol foarte important n ultimii ani.
Proliferarea pe scar! larg! a standardelor web #i posibilitatea de extindere a web-ului au permis HTTP-ului
s! devin! cel mai popular protocol de transport pentru con"inutul web. HTTP este un protocol bazat pe text,
care controleaz! modul n care sunt accesate resursele (ex: documentele HTML sau imaginile). HTTP este
construit pe stiva TCP/IP, unde serviciul este n mod normal disponibil pe portul 80. Resursele sunt adresate
prin utilizarea conceptului de identificator uniform de resurse (Uniform Resource Identifier - URI). URI-urile
nu sunt legate de un anumit protocol cum este HTTP; ele reprezint! un mecanism de adresare uniform, care
este utilizat de asemenea n HTTP.
Un URI aloc! identificatori unici resurselor, indiferent de tipul acestora (documente HTML, imagini).
Cel mai reprezentativ URI este URL-ul (Uniform Resource Locator) - adresa uniform! pentru localizarea
resurselor. URL-urile pot fi utilizate n conexiune cu sistemul numelor de domenii (Domain Name System -
DNS) pentru a identifica sistemele gazd! pe care se g!sesc aceste resurse. Un URI (ex. http://
www.feaa.uaic.ro/despre_feaa/index.htm), descrie de obicei trei lucruri:
- cum este accesat! o resurs! (ex. http:// dac! este utilizat HTTP);
- calculatorul destina"ie (gazd!) pe care este localizat! resursa (ex. www.feaa.uaic.ro) #i
- numele resursei (ex. despre_feaa/index.htm).
n plus, URI-rile definesc un separator al interog!rii (?), care permite HTTP-ului s! transmit!
parametrii (ex: http://www.feaa.uaic.ro/catedre/in2.php?codcat=IE). Sintaxa complet! a URI-urilor a fost
standardizat! de IETF n RFC 1630.
5.4.2 Tehnologii web client-side specifice documentului
Aplica$iile web de tip client-side script implic! acele programe web care ruleaza pe client (browser),
dup! sau n timpul nc!rcarii paginii web de c!trea acesta. Tehnologiile web client-side script sunt
acele limbaje care permit scrierea unor astfel de aplica$ii. Aceste limbaje pot fi integrate n limbajul HTML %i
suportate direct de c!tre browser (ex. JavaScript), fie necesit! un plug-in extern (ex. ActionScript - limbajul de
programare specific mediului Adobe Flash). n afar! de utilizarea de limbaje de tip script, pentru
implementarea aplicatiilor client-side se pot utiliza %i limbaje de programare (ex. Java prin Java Applet). Ne
vom concentra aten$ia pe trei limbaje foarte r!spndite, HTML, CSS %i JavaScript).
HTML - Hypertext Markup Language
HTML
24
este o aplica"ie SGML (Standard Generalized Markup Language) care descrie elementele
care pot fi utilizate pentru a marca con"inutul ntr-un document hipertext #i modul n care aceste elemente
rela"ioneaz! (ntr-un DTD - Document Type Definition). Elementele de marcare sunt nchise ntre simbolurile
< #i >. HTML define#te numeroase etichete pentru a indica semantici diferite. De exemplu, eticheta
<H1> poate fi folosit! pentru a marca un titlu de nivel 1.
Etichetele sunt folosite pentru structurarea logic! a documentului. De exemplu, elementul de
marcare <STRONG> specific! faptul c! partea din document dintre aceste perechi de etichete trebuie
interpretat! sub forma unei eviden"ieri logice, pe care browserele o afi#eaz! n mod normal cu aldine.
Datorit! posibilit!"ilor limitate ale proiect!rii grafice, au fost introduse elemente suplimentare pentru a
permite proiectan"ilor s! influen"eze n mod direct layout-ul unui document. De exemplu, elementul de
marcare <b> poate fi folosit pentru a instrui browserele s! reprezinte o parte din document cu aldine.
Simplitatea n crearea #i procesarea resurselor HTML este o proprietate foarte important! pentru caracterul
omniprezent al informa"iei pe web, aceasta fiind mpiedicat! de aspectul prezent!rii. Introducerea noilor
elemente de marcare a fost facilitat! ndeosebi de faptul c! browserele resping sau ignor! elementele de
marcare pe care nu le cunosc. Aceast! flexibilitate a fost utilizat! n mod repetat de produc!torii de browsere
web pentru a extinde op"iunile de layout #i n cele din urm! a condus la noi standarde, dar #i la reprezent!ri
"incompatibile".
CSS - Cascading Style Sheets
Problema "incompatibilit!$ii din browserele web a condus la introducerea unui mare num!r de
extensii. De exemplu, CSS
25
(Cascading Style Sheets) reprezint! un mecanism simplu pentru ad!ugarea
informa"iilor de stil (fonturi, culori etc.) n documentele web. mpreun! cu introducerea XHTML-ului, un
dialect XML, a devenit posibil! utilizarea beneficiilor XML-ului ca un limbaj "curat" pentru descrierea
documentelor HTML.
JavaScript
24
World Wide Web Consortium (W3C), W3C HTML, W3C, 2011, http://www.w3.org/html/
25
World Wide Web Consortium (W3C), Cascading Style Sheets, W3C, 2011, http://www.w3.org/Style/CSS/
Limbajul JavaScript
26
(sau ECMAScript) este un limbaj de tip script suportat de browserele web, care
poate fi integrat direct ntr-o pagin! HTML %i prezint! cteva avantaje importante, dintre care enumer!m:
nu necesit! instalarea unor aplica$ii suplimentare pentru a rula;
este simplu de nv!$at (sintaxa este asem!n!toare cu cea a limbajelor C %i Java);
permite implementarea unor aplicatii complexe ntr-o manier! simpl!;
din el se pot accesa %i controla direct toate elementele unei pagini HTML (text, imagini, formulare %i
frame-uri);
sprijin! validarea datelor din formularele HTML (pe parte client);
permite programarea bazat! pe evenimente.
Cea mai important! facilitate oferit! de JavaScript este aceea de a ad!uga dinamism %i interactivitate
n paginile Web clasice.
ActionScript
ActionScript este un limbaj asem!n!tor cu JavaScript, folosit n principal pentru dezvoltarea de
func$ionalit!$i n cadrul anima$iilor Adobe Flash prin generarea fi%ierelor cu extensia .swf care ruleaz! n
Adobe Flash Player. A fost dezvoltat ini$ial de compania Macromedia, iar acum apar$ine Adobe, care a
achizi$ionat Macromedia n 2005 %i are la baz! standardul ECMA. El a fost creat pentru desenarea %i
controlarea anima$iilor vectoriale 2D dar ulterior s-a dezvoltat pentru a realiza aplica$ii web complexe sau
chiar jocuri.
HTML (Hypertext Markup Language)
Ultima versiune a limbajului este 4.01
World Wide Web Consortium (W3C org) este institu!ia care reglementeaz" #i standardizeaz" limbajele de
marcare.
HTML este un subset al SGML din care a mai rezultat #i XML (eXtended Markup Language).
Autorul standardului World Wide Web este Tim Barners-Lee:
$
1989 face prima propunere pentru primul World Wide Web server, "httpd", #i primul client,
"WorldWideWeb" un what-you-see-is-what-you-get (WYSIWYG) hypertext browser/editor;
$
Decembrie 1990 aceste aplica!ii sunt deja disponibile n teste;
$
Iulie 1991 Internetul ncepe s" foloseasc" din ce n ce mai mult aceste aplica!ii.
Fiecare din cuvintele de mai sus marcate ntre semnele < , > poart" denumirea de tag-uri, reprezentnd
cuvinte cheie n structurarea unui document HTML.
Structura unui document HTML poate fi redat" n exemplul urm"tor:
<html>
<head>
<title>Acesta este titlul documentului</title>
</head>
<body>
<p>Acesta este un paragraf din cadrul documentului.</p>
</body>
</html>
Tag-ul <HTML> este obligatoriu pentru nceputul #i sfr#itul unui document. Celelalte tag-uri pot fi op!ionale.
<HEAD> Specific" header-ul unui document #i, pe lng" <TITLE> care specific" titlul paginii n browser, pot
ap"rea declara!ia diferitelor script-uri, informa!ii despre document etc.
Fiecare tag care se deschide se recomand" a se #i nchide, dar nu este o regul" obligatorie.
<BODY> ncadreaz" con!inutul unui document.
26
World Wide Web Consortium (W3C), JavaScript Web APIs, W3C, 2011, http://www.w3.org/standards/webdesign/script.html
Pentru structurarea unui document se pot utiliza 6 nivele de heading-uri:
<body>
<h1>Capitolul 1 - Introducere in HTML</h1>
<h2>Structura unui document</h2>
.
.
.
<h6>Acesta este ultimul nivel de titluri</h6>
<!-- De obicei insa se folosesc pina la 3 maxim 4 nivele intr-un document.
Acest comentariu nu apare in Browser!-->
<p>Acesta este un paragraf din cadrul documentului.</p><br>
Acesta este al doilea rind.
</body>
Comentariile care se trec ntr-un document #i care nu vor ap"rea n browser se marcheaz" ntre:
<!-- Acesta este un comentariu -->
Pentru afi#area centrat" a titlurilor, #i nu numai se poate folosi tagul <CENTER>...</CENTER>.
<h1><center>Capitolul 1 - Introducere in HTML</center></h1>
Declararea unui paragraf se realizeaz" cu ajutorul tagului <P>.
Pentru trecerea de la un rnd la altul se poate folosi tagul vid <BR>.
Pentru afi#area unei linii se poate folosi tagul simplu <HR> a c"rui sintax" poate fi extins":
<HR Size=valoare_numeric" Color=culoare Width = val_numerica_sau_procent >
<hr size="5" color="Blue" width="55%">
Pentru scrierea caracterelor speciale se folose#te &#cod_ASCII;
Setul de caractere recunoscute precum #i codurile ASCII pot fi descoperite n Character Map din Acesoriile
SO Windows.
Transformarea din reprezentarea hexazecimal" se poate realiza cu ajutorul acesoriului Calculator.
Culorea fundalului de pagin" se poate stabili prin folosirea atributului BGCOLOR=culoare in tagul <BODY >,
avnd urm"toarea sintax": <BODY BGCOLOR=nume_culoare sau valoare_hexazecimal">
<body bgcolor="pink">
Pentru folosirea unei imagini ca background pentru fundal se folose#te sintaxa:
<body background="imagine.bmp">
Imaginea trebuie salvat" n aceia#i loca!ie cu documentul HTML, dar n cazurile n care aceasta nu se afl" n
acela#i director trebuie declarat" calea de pe disc sau de pe web pn" la fi#ierul respectiv.
Formatarile la nivel de text se reg"sesc n tagul <FONT> care are urm"toarea sintax":
<FONT face=denumire_font size=marime_font color=valoare> Text </FONT>
<font face="Letter Gothic MT" size="4" color="#FF0000">Acesta este un text de
marimea 11 de culoare rosie, font Letter Gothic MT</font>
Alte aspecte ale fomat"rilor aspura fontului sunt cele cu privire la efectul asupra textului respectiv:
$
bold (ngro#at) <b>text</b>;
$
italic (nclinat) <i>text</i>;
$
underline (subliniat) <u>text</u>.
Inserarea unei imagini n document se realizeaz" cu ajutorul tagului <img> care are urm"toarea sintax":
<img src="imagine.jpg" alt="Aceasta este imaginea">
src reprezint" calea de acces #i numele fi#ierului care con!ine imaginea;
alt o scurt" descriere a imaginii.
Liste, Link-uri, Tabele
LISTE
Exist! mai multe tipuri uzuale de liste folosite pentru diferite enumer!ri:
$ liste neordonate
$ liste ordonate
Liste cu linii sau buline (neordonate)
Listele neordonate sunt introduse prin tagul <UL>...</UL>, iar elementele din lista cu tagul vid <LI>
(acest tag se foloseste si pentru introducerea elementelor unei liste ordonate).
Elementele unei liste neordonate sunt afisate pe randuri separate, indentate fata de restul textului
si avand in stanga un simbol grafic ce depinde de navigatorul utilizat (cerc, bulina).
Exemplul nr. 1 Lista neordonat!:
<UL>
<LI> Produs C
<LI> Produs A
<LI> Produs H
</UL>
Liste numerotate (ordonate)
Listele ordonate difer! de cele neordonate doar prin faptul ca elementele acestora sunt
numerotate.
Tagul utilizat este <OL>...</OL>.
Listele ordonate pot avea o numerotare diferita, in func"ie de op"iunea specificat! de utilizator in
atributul TYPE al tagului <OL>, dup! cum urmeaz!:
$ TYPE=1 este op"iunea implicit! (1,2,3...)
$ TYPE=a - a,b,c...
$ TYPE=A - A,B,C...
$ TYPE=i - i,ii,iii...
$ TYPE=I - I,II,III...
De asemenea, o list! poate fi numerotat! ncepnd de la o anumit! valoare prin utilizarea
atributului START=valoare_de_start, care apare tot in cadrul marcajului <OL>.

Imbricarea listelor
Atunci cnd este nevoie de imbricarea listelor (de exemplu atunci cand realizam un cuprins ori un
test grila), aceasta se realizeaz! prin inserarea intr-o lista a unei noi liste, indiferent de tipul
acesteia.
Exemplul nr. 2 Lista ordonat!, cu diferite OL type, "i imbric!ri:
<HTML>
<P> <H2 ALIGN="center"> Liste imbricate </H2>
<P>
<UL>
<LI><B>1.</B> Lista nr. 1
<OL TYPE=a>
<LI> raspuns 1
<LI> raspuns 2
<LI> raspuns 3
</OL>
<LI><B>2.</B> Lista nr. 2
<OL>
<LI> raspuns 1
<LI> raspuns 2
<LI> raspuns 3
</OL>
</UL>
<B>Aceasta este o lista numerotata cu cifre romane:</B>
<OL TYPE=I> <!-- Daca litera i este minuscula atunci se va schimba si
sistemul de numerotare-->
<LI>Primul element
<LI>Al doilea element
<LI>Al treilea element
</OL>
<B>Aceasta este o lista "numerotata" cu litere mici:</B>
<OL TYPE=a>
<LI>Primul element
<LI>Al doilea element
<LI>Al treilea element
</OL>
<B>Lista numerotata incepand de la 5:</B>
<OL START=5>
<LI>Primul element
<LI>Al doilea element
<LI>Al treilea element
</OL>
</HTML>
CREAREA LEGATURILOR SI ANCORELOR
Una dintre caracteristicile de baza ale limbajului HTML este aceea de structurare a publica"iilor
ntr-o colec"ie de documente ntre care exist! leg!turi, trecerea de la un document la altul f!cndu-
se prin intermediul acestora.
Leg!turile, n func"ie de locul in care se afla fi#ierele conectate prin leg!tura, sunt:
$ interne daca leg!tura se face c!tre o sec"iune a aceluia#i fi#ier;
$ locale (sistem) dac! fi#ierele se afla pe acela#i calculator, eventual pe calculatoare din
aceea#i re"ea local!;
$ ndep!rtate (publice) daca fi#ierele legate se afla pe calculatoare din re"ele diferite (pe
servere aflate la distanta).
Legaturile se realizeaza prin intermediul marcajului <A> </A>, cu urm!toarea sintaxa:

<A HREF="nume_fisier"> Text explicativ </A>
unde:
$
HREF este atributul ce con"ine calea c!tre fi#ierul spre care arata leg!tura (HREF este o
prescurtare de la Hypertext Reference);
$ nume_fi#ier: numele fi#ierului c!tre care se face leg!tura
$ Text explicativ: Leg!tura cu fi#ierul solicitat se face prin selectarea textului (clic pe textul
explicativ). Textul este afi#at diferit fata de restul documentului (colorat diferit si subliniat).
Un atribut op"ional al tagului </A> este TARGET care poate lua dac! apare mai multe valori, cea
mai utilizat! fiind _new, care inseamn! c!, documentul specificat prin HREF link-ul va fi deschis
ntr-o nou! fereastr! a browser-ului.
Moduri de specificare a leg!turilor
Localizarea fi#ierului "int! poate fi f!cuta prin specificarea:
$ C!i (adrese) absolute specifica ntreaga cale, de la directorul de la nivelul cel mai nalt si
pana la documentul cerut. Referin"ele absolute ncep ntotdeauna cu un slash / urmat de
succesiunea directoarelor pn! la documentul referit. De exemplu, crearea unei leg!turi
c!tre documentul pe care tocmai l citi"i se face prin:
http://www.uaic.ro/en/utils/links.html
$ C!i (adrese) relative specifica directoarele c!tre documentul "inta pornind de la
documentul n care se afla referin"a (documentul de start). Specificarea c!ii se face ca n
Unix, cu directoarele separate prin slash /, indiferent de sistemul de operare. Prin .. se va
specifica directorul aflat pe nivelul superior. Exemplu:
HREF="../imagini/buton.gif" specifica o cale relativa ce ncepe din directorul p!rinte al
directorului curent, iar
HREF="../../poze/poza1.jpg" specifica o cale relativa ce ncepe dintr-un director aflat cu
doua nivele mai sus dect directorul curent.
Este recomandata utilizarea leg!turilor relative ori de cate ori este posibil, pentru ca documentele
sa fie portabile (mutarea unui document sa nu afecteze leg!turile stabilite intre fi#ierele
componente.
Leg!turi interne
In multe cazuri este nevoie sa se creeze leg!turi intre sec"iunile aceluia#i document. Spre
exemplu, atunci cnd documentul este o carte, un tutorial sau un curs vom sim"i nevoia cre!rii unui
cuprins pentru fiecare capitol al documentului. Se va crea o leg!tura intre fiecare tema din cuprins
si sec"iunea din document care trateaz! acea tema.
Crearea leg!turilor interne se realizeaz! prin utilizarea atributului NAME al tagului <A>, care
stabile#te un cuvnt cheie ce identifica unic paragraful "inta:
<A NAME="cuvant_cheie"> Paragraf tinta </A>
Folosirea tagului cu atributul NAME poarta numele de ancora.
Atunci cnd se va face referin"a la aceast! ancor!, documentul va fi derulat in fereastra
navigatorului pana cnd textul dintre <A> </A> ajunge in partea de sus a ecranului. Ancorele nu
sunt afi#ate diferit fata de restul documentului ca in cazul leg!turilor.
Referirea la o ancora in documentul de la care pleac! leg!tura se face in acela#i fel ca in cazul
referirii unui ntreg document ad!ugndu-se simbolul # urmat de cuvntul cheie din ancora:
<A HREF="nume_fisier#cuvant_cheie"> Text explicativ </A>
Exemplul de mai sus arata ca este posibila referirea la un anumit paragraf al documentului "inta,
chiar daca acesta este local sau ndep!rtat.
n capitolul dedicat inser!rii imaginilor ve"i afla cum pute"i nlocui textul folosit la selectarea unei
leg!turi cu o imagine.
Exemplul nr. 3 Un exemplu sumar de declarare "i referire intern!
<HTML>
<b>Tehnica utilizarii legaturilor interne</b><BR>
<H2> Cuprins:</H2>
<P>
<UL>
<LI><A HREF="#unu">Primul paragraf </A>
<LI><A HREF="#doi">Al doilea paragraf </A>
<LI><A HREF="#trei">Al treilea paragraf </A>
</UL>
<P>
<HR>
<P>
<A NAME="unu"> Titlul primului paragraf</A>
<P>
Aici incepe primul paragraf.<BR>
Text <BR>
Text <BR>
<A NAME="doi"> Titlul paragrafului doi</A>
<P>
Aici incepe al doilea paragraf.<BR>
Text <BR>
Text <BR>
<A NAME="trei"> Titlul paragrafului al treilea</A>
<P>
Paragraf 3.<BR>
Text <BR>
Text <BR>
<HR>
<!-- Pentru a vedea functionalitate acestui tip de legaturi trebuie sa aveti mai
mult text in interiorul paragrafelor -->
</HTML>
EXERCITIU: Creati dou! documente care s! fac! leg!tura de la unul la cel!lalt. De asemenea
pune"i n eviden"! modul de utilizare a leg!turilor interne.
CONSTRUIREA TABELELOR
Tabelele sunt introduse prin utilizarea marcajului <TABLE> </TABLE>. Limbajul HTML ia in
considerare urm!toarele elemente pentru construirea unui tabel (unele sunt op"ionale):
$ Text explicativ care se refera la con"inutul tabelului;
$ Capul de tabel (capul de tabel va fi scos in evidenta fata de restul liniilor);
$ Datele din tabel (=valorile din celulele tabelului);
$ Celulele tabelului (alinierea con"inutului...);
In HTML, construirea unui tabel se face rnd cu rnd, specificnd celulele de pe fiecare linie.
Prima linie este considerata ca fiind capul de tabel, unde se precizeaz! ce fel de date sunt
con"inute in coloanele respective.
Linia se specifica prin tagul <TR> </TR> Celulele tabelului sunt introduse prin marcajul <TD> </
TD>, iar celulele cap de tabel prin <TH> </TH>.
Codul HTML pentru crearea unui tabel cu trei linii si doua coloane este:

<TABLE BORDER>
<TR>
<TH> Matricol</TH>
<TH> NumePrenume</TH>
</TR>
<TR>
<TD> EL000001</TD>
<TD> Popescu Ioana</TD>
</TR>
<TR>
<TD> EL009999</TD>
<TD> Ababei Petronela</TD>
</TR>
</TABLE>
Se obtine urmatorul tabel:
Matricol NumePrenume
EL000001 Popescu Ioana
EL009999 Ababei Petronela
S-a folosit atributul BORDER pentru a desena un tabel in care se vad liniile ce formeaz! celulele.
Absenta atributului determina ob"inerea unui tabel f!r! liniatur!.
Celulele tabelului, fie ca fac parte din capul de tabel sau sunt celule obi#nuite, pot con"ine orice
marcaj acceptat de HTML, inclusiv leg!turi sau alte tabele. Celulele vide nu sunt afi#ate dar, daca
dorim acest lucru, trebuie sa introducem m!car un tag <BR> pentru a face celula vizibil!.
Pentru ata"area unei explica#ii se folose#te tagul:
<CAPTATION ALIGN="aliniere"> Explica!ie </CAPTATION>
unde tipul de aliniere poate fi:
$ TOP - explica"ia este plasata deasupra tabelului (op"iune implicit!);
$ BOTTOM - explica"ia este plasata dedesubtul tabelului;
Marcajul pentru explica"ie trebuie plasat imediat dup! tagul TABLE, nainte de a se ncepe
definirea rndurilor tabelului.
EXERCITIU: Crea"i urm!torul table folosind cod HTML
Nr. crt Autor C!r"i, articole
1. Popescu Ion $ Cartea de debut
$ Cartea urm!toare
$ Articol Tare
2. Ababei Cristina 1. Articol debut
2. Alt articol
3. Altul si
4. Ultima carte
3. Ciobanu Carmen Asta e singura carte
Crea"i pagini HTML pentru fiecare autor n parte care s! con"in! informa"ii generale despre
ace#tia: Scurt! biografie, Opera, Ceva distinc"ii la diferite concursuri, ce au n lucru; eventual
introduce-ti o imagine n partea de sus a documentului drept fotografie a autorului.
n josul paginii crea"i o leg!tur! de ntoarcere la pagina anterioar!.
Pentru un aspect mai aerisit al tabelelor se poate utiliza atributul cellpadding care poate lua valori
numerice.
Pentru unirea a 2 c!su"e pe coloan! se folose#te atributul rowspan avnd drept valoare num!rul
de c!su"e pe care le va uni, iar pe linie se folose#te atributul colspan.
Exemplul nr. 4
<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Anul</th><th colspan="3">Vinzari</th></tr>
<tr align="center"><th>Ianuari</th><th>Februarie</th><th>Martie</th></tr>
<tr align="center"><td>2000</td><td>100</td><td>200</td><td>175</td></tr>
<tr align="center"><td>2001</td><td>200</td><td>150</td><td>220</td></tr>
</table>