DOMENIUL DE LICENT ,A INFORMATIC A LUCRARE DE LICENT ,A DEZVOLTAREA UNEI APLICAT ,II DE E-COMMERCE PENTRU DESKTOP, TELEFOANE MOBILE S,I TABLETE… [602032]

UNIVERSITATEA DIN PITES ,TI
FACULTATEA DE MATEMATIC A – INFORMATIC A
DOMENIUL DE LICENT ,A INFORMATIC A
LUCRARE DE LICENT ,A
DEZVOLTAREA UNEI APLICAT ,II DE
E-COMMERCE PENTRU DESKTOP,
TELEFOANE MOBILE
S,I TABLETE
Coordonator s ,tiint ,ic: Absolvent: [anonimizat].univ.dr. Maria Miroiu Br^ nz a Marian Costel
{ PITES ,TI 2015 {

Cuprins
Introducere 3
1 E-commerce 5
1.1 Concepte s ,i denit ,ii . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2 Tipuri de e-commerce . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.1 B2B e-commerce . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.2 B2C e-commerce . . . . . . . . . . . . . . . . . . . . . . . 7
1.2.3 B2G e-commerce . . . . . . . . . . . . . . . . . . . . . . . 8
1.2.4 C2C e-commerce . . . . . . . . . . . . . . . . . . . . . . . 9
1.2.5 M-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.3 Comert ,ul tradit ,ional vs comert ,ul electronic . . . . . . . . . . . . . 10
1.3.1 Avantaje ale organizat ,iilor . . . . . . . . . . . . . . . . . . 11
1.3.2 Avantaje ale consumatorilor . . . . . . . . . . . . . . . . . 13
1.3.3 Avantaje ale societ at ,ii . . . . . . . . . . . . . . . . . . . . 14
1.4 Limit arile e-commerce-ului . . . . . . . . . . . . . . . . . . . . . . 14
1.4.1 Limit ari ale organizat ,iilor . . . . . . . . . . . . . . . . . . 15
1.4.2 Limit ari ale consumatorilor . . . . . . . . . . . . . . . . . 16
1.4.3 Limit ari ale societ at ,ii . . . . . . . . . . . . . . . . . . . . . 17
1.5 Modalit at ,i de plat a . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.6 Concluzii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2 Responsive web-design 20
2.1 Principii de baz a . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2 Istorie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.2.1 Browsing-ul folosind telefonul mobil . . . . . . . . . . . . . 24
2.2.2 Website-urile mobile . . . . . . . . . . . . . . . . . . . . . 25
2.2.3 Media queries . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.2.4 Flexibilitate . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.3 Gridurile
uide . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.4 Imagini
exibile . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.5 Cont ,inut dinamic . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.5.1 Strategia cont ,inutului . . . . . . . . . . . . . . . . . . . . 33
2.5.2 Gestionarea cont ,inutului . . . . . . . . . . . . . . . . . . . 34
2.5.3 Promovarea cont ,inutului . . . . . . . . . . . . . . . . . . . 35
1

CUPRINS 2
2.6 Concluzii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3 Tehnologii folosite 39
3.1 Limbajul HTML pentru site-uri responsive . . . . . . . . . . . . . 39
3.1.1 Versiuni . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.1.2 Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
3.1.3 Semantica codului . . . . . . . . . . . . . . . . . . . . . . 44
3.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.2.1 Versiuni ale CSS . . . . . . . . . . . . . . . . . . . . . . . 46
3.2.2 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.2.3 Structura interog arilor media . . . . . . . . . . . . . . . . 48
3.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.3.1 Cum funct ,ioneaz a limbajul JavaScript? . . . . . . . . . . . 51
3.3.2 Libr ariile JavaScript? . . . . . . . . . . . . . . . . . . . . . 52
3.4 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.4.1 Evenimente . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.5 Bootstrap 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.6 Descrierea aplicat ,iei . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Introducere
^In economia mondial a ^ n curs de dezvoltare, e-commerce-ul s ,i e-business-ul au
devenit o component a necesar a a strategiei de afaceri s ,i un catalizator puternic
pentru dezvoltarea economic a. Integrarea tehnologiei informat ,iei s ,i comunicat ,iilor
^ n afaceri a revolut ,ionat relat ,iile ^ n cadrul organizat ,iilor c^ at s ,i pe cele ^ ntre
organizat ,ii s ,i indivizi. ^In mod specic, utilizarea tehnologiei informat ,iei ^ n comert ,
a sporit productivitatea, a ^ ncurajat participarea clientului, a ^ mbun at at ,it gradul
de personalizare, s ,i a redus evident costurile.
^In capitolul 1 intitulat "E-commerce" vor  prezentate toate not ,iunile de baz a
despre e-commerce precum s ,i evolut ,ia acestuia. Vom prezenta pe scurt istoria
acestuia s ,i vom ^ ncerca s a denim acest fenomen. Se vor prezenta diferitele
tipuri de comert ,electronic precum s ,i in
uent ,ele pe care le aduce acest tip de
comert ,^ n viat ,a noastr a. Vom prezenta procesul prin care e-commerceul a ajuns
aceast a component a important a a lumii economice s ,i cum afecteaz a lucrul acesta
economia mondial a.
Se va comparara comert ,ul tradit ,ional cu comert ,ul electronic s ,i se vor ar ata
avantajele care le aduce acest tip nou de comert ,, dar bine^ nt ,eles s ,i dezavantajle
pe care le prezint a. Se va analiza s ,i in
uent ,a pe care o manifest a tehnologia ^ n
acest fenomen iar ^ n ^ ncheierea capitolului se va face un scurt rezumat despre
fenomenul cunoscut sub numele de E-commerce.
Odat a cu evolut ,ia internetului s ,i a tehnologiilor bazate pe Web, diferent ,ele
^ ntre v^ anz arile tradit ,ionale s ,i v^ anz arile realizate prin mediul electronic, sunt trep-
tat ^ nl aturate. O abilitate important a a unei companii sau a unei rme este aceea
de a determina noile oportunit at ,i s ,i de avea un personal preg atit pentru a folosi
acest avantaj printr-o stategie de e-commerce simpl a s ,i ecient a ^ n contextul
economic actual. Folosirea unei astfel de strategii ^ mpreun a cu toate resursele
disponibile s ,i cu un plan bine elaborat permite rmelor de dimeniuni mici s ,i me-
dii s a concureze cu companiile mari din mediul vizat.
Una din aceste resurse este evident, internetul. Ritmul alert ^ n care se dezvolt a
tehnologiile^ n momentul de fat , a s ,i conectarea a din ce^ n ce mai multor dispozitive
la internet, fenoment cunoscut sub numele de "Internetul lucrurilor" ( Internet of
Things ), ne ofer a posibilitatea f ar a precedent de a interact ,iona iar pentru a face
3

4
acest a experient , a pl acut a utilizatorului a fost inventat un nou concept, conceptul
de responsive web design (RWD).
Capitolul 2 numit "Responsive web-design" prezint a s ,i explic a conceptul de
responsive web design. Se va ^ ncepe cu principiile de baz a, denirea conceptului
s,i se va ar ata cum dezvoltarea tehnologiei ne-a condus p^ an a ^ n acest punct. Se
va prezenta evolut ,ia acestuia precum s ,i spre ce ne ^ ndrept am. Vom ar ata de ce
este un concept foarte important, vom s arii peeste detaliile tehnice (care vor
prezentate ^ n capitoul 3) s ,i vom pune accentul pe utilizator s ,i pe cont ,inut.
Designul responsiv este o tehnic a menit a s a ofere utilizatorului o experient , a
pl acut a ^ n utilizarea serviciilor, indiferent de modul de acces la aceste servicii.
Conceptul de responsive web design este o abordare care creaz a dinamic schimb ari
^ n design-ul unui website, ^ n funct ,ie de m arimea s ,i orientarea ecranului pe care
este vizualizat.
^In ultimul capitol al acestei lucr ari vor  prezentate toate tehnologiile care au
ajutat construirea fenomenul e-commerce precum s ,i tehnologiile moderne care ne
ajut a zi de zi f ar a s a ne d am seama. ^In ^ ncheierea capitolului va  prezentat a o
aplicat ,ie de e-commerce care cu ajutorul ajutorul designului responsiv va putea
 rulat a pe o varietate de dispozitive.

Capitolul 1
E-commerce
1.1 Concepte s ,i denit ,ii
Comert ,ul electronic sau e-commerce-ul se refer a la o gam a larg a de afaceri
desf as ,urate online pentru produse s ,i servicii. Deasemenea se refer a s ,i la orice
form a de tranzact ,ii de afaceri ^ n care p art ,ile interact ,ioneaz a electronic s ,i nu prin
schimburi zice sau directe.
Fenomenul e-commerce a ap art la sf^ ars ,itul anului 1990 s ,i este foarte diversi-
cat. Exist a foarte multe aplicat ,ii ale comert ,ului electronic, cum ar : internet
banking, cump ararea de servicii sau produse, cump ararea de act ,iuni, c autarea
unui loc de munc a, g azduirea unei licitat ,ii, colaborarea electronic a cu parteneri
de afaceri din toata lumea, etc.
De obicei termenul de e-commerce este asociat cu cump ararea s ,i v^ anzarea
prin Internet. Des ,i popular a, aceast a denit ,ie nu este sucient de cuprinz atoare
pentru a surprinde evolut ,iile recente ^ n acest domeniu revolut ,ionar. O denit ,ie
mai complet a este: "E-commerce reprezint a utilizarea informat ,iilor digitale pen-
tru a crea, transforma s ,i redenii relat ,ii ^ ntre organizat ,ii s ,i ^ ntre persoane zice".
Tranzact ,iile digitale includ toate tranzact ,iile intermediate de tehnologiile digitale.
^In cea mai mare parte aceasta ^ nseamn a tranzact ,ii care au loc pe web.
^In 2004 International Data Corp (IDC) a estimat valoarea comert ,ului online
la nivel global, la 14 bilioane de dolari, iar aceast a sum a este ^ n continu a cres ,tere.
Orice magazin zic ar trebui s a det ,in a s ,i un magazin online pentru a se putea
adresa unui num ar c^ at mai mare de persoane. Datorit a dezvolt arii tehnologice la
care am ajuns, un astfel de magazin se poate crea foarte us ,or, av^ and la dispozit ,ie
nenum arate opt ,iuni de unde s a alegem, acestea oferind suport pentru diferite
platforme, posibilitatea de a oferii informat ,ii ^ n mai multe limbi precum s ,i multe
alte benecii.
5

CAPITOLUL 1. E-COMMERCE 6
1.2 Tipuri de e-commerce
Exist a o mare varietate de tipuri de e-commerce s ,i diferite moduri de carac-
terizare ale acestor tipuri. Dup a natura piet ,ei distingem cinci tipuri distincte de
e-commerce, acestea sunt:
1.business-to-business (B2B);
2.business-to-consumer (B2C);
3.business-to-goverment (B2G);
4.consumer-to-consumer (C2C);
5.mobile commerce (m-commerce).
1.2.1 B2B e-commerce
Comert ,ul business-to-business este denit ca tranzact ,ii ^ ntre companii. Acest
tip de e-commerce se ocup a cu relat ,iile dintre companii. Internetul s ,i dependent ,a
unor companii de alte companii pentru servicii, consumabile s ,i utilit at ,i au con-
dus la cres ,terea popularit at ,ii comert ,ului B2B, aceasta ind componenta cea mai
dezvoltat a a comert ,ului electronic. Comert ,ul B2B creaz a dinamic interact ,iuni
^ ntre partenerii de afaceri; acest lucru reprezint a o schimbare fundamental a ^ n
modul ^ n care se vor realiza afacerile ^ n secolul 21.
^Intr-un mediu B2B plasarea comenzilor, inventarierea, logistica de transport
s,i contractele de afaceri sunt gestionate direct prin intermediul unei ret ,ele ceea
ce conduce la cres ,terea vitezei, reducerea num arului de erori s ,i mics ,orarea cos-
turilor. Rezultatul nal ind ^ mbun at at ,irea lant ,ului de cerere-apovizionare intre
partenerii de afaceri.
C^ ateva din avantajele B2B:
Comert ,ul B2B reduce costul product ,iei ^ nl atur^ and multe din activit at ,ile
costisitoare de timp;
O informare mai bun a este realizat a prin stabilirea unei conexiuni directe
cu partenerul care face aprovizionarea;
Precizia este ^ mbun at at ,it a doarece este nevoie de mai put ,ini pas ,i;
Ciclul cerere-aprovizionare este ^ mbun at at ,it doarece schimbul de informat ,ii
dintre parteneri este ^ mbun at at ,it;

CAPITOLUL 1. E-COMMERCE 7
Comunicarea ^ ntre parteneri este ^ mbun at at ,it a;
Cres ,terea gradului de comunicare rezult a ^ n cres ,terea nivelului de control.
^In jur de 80% din e-commerce este de tipul acesta iar cei mai mult ,i expert ,i pre-
zic c a acest tip de e-commerce va continua s a creasc a mai rapid dec^ at segmentul
business-to-consumer. Piat ,a business-to-business are dou a componente primare:
infrastructura ( e-frastructure ) s ,i piat ,a (e-market ).
Infrastructura este arhitectura comert ,ului business-to-business s ,i este alc atuit a
din urm atoarele:
Logistic a – transport, depozite s ,i distribut ,ie;
Furnizori de servicii – lansarea pe piat , a, hosting-ul s ,i administrare pachete-
lor software de la o unitate central a;
Externalizarea funct iilor ^ n procesul de comert ,electronic, cum ar  hosting-
ul web, securitatea  si solut ii de ^ ngrijire a clientului;
Solut ,ii software pentru operarea s ,i ^ ntret ,inerea unei licitat ,ii ^ n timp real
prin internet;
Software pentru managementul cont ,inutului unui website.
Piet ,ele online sunt denite ca site-uri web unde client ,ii s ,i v^ anz atorii interact ,ioneaz a
unii cu alt ,ii s ,i efectueaz a tranzact ,ii.
Cele mai bune exemple de comert ,business-to-business sunt IBM, Hewlett Pa-
ckard (HP), Cisco s ,i Dell. De exemplu, Cisco primes ,te 90% din comenzi prin
intermediul internetului.
Cele mai multe aplicat ,ii business-to-business sunt ^ n domeniile: gestionare,
furnizare s ,i magement.
1.2.2 B2C e-commerce
Comert ,ul business-to-consumer, sau comert ,ul ^ ntre companii s ,i consumatori,
implic a client ,ii care cump ar a informat ,ii, bunuri zice sau produse software s ,i
primesc aceste produsele de cele mai multe ori prin mediul electronic. Este cel
mai comun discutat tip de e-commerce, ^ n care companiile ^ ncearc a s a ajung a la
consumatorii individuali. Cu toate c a comert ,ul B2C este relativ mic ^ n ultimii
ani a crescut exponent ,ial s ,i este tipul cel mai probabil de e-commerce pe care
consumatorii ^ l pot ^ nt^ alnii.
Ca m arime, e-commerce-ul B2C este pe locul doi. Are la origine v^ anzarea
online de bunuri. C^ ateva exemple de astfel de magazine sunt: Amazon. com,
Beyond.com, Barnes and Nobles s ,i ToyRus.

CAPITOLUL 1. E-COMMERCE 8
Cele mai multe aplicat ,ii ale acestui tip de e-commerce sunt ^ n domeniile v^ anz a-
rilor de produse s ,i informat ,ii, s ,i^ n domeniul gestion arii veniturilor folosind servicii
de online banking.
Exist a cinci tipuri majore de activit at ,i ^ n comert ,ul B2C:
Colectarea de informat ,ii:un model B2C poate folosi una sau mai multe
din tehnologiile urm atoare pentru a colecta informat ,ii: reclame online, e-
mail, grup de discut ,ii, site-ul companiei, cataloage online, conferint ,e, etc;
Comandarea: un clinet poate comanda un produs folosind email-ul sau
un formular de comand a de pe site-ul unei companii B2C;
Plata: cardul de credit s ,i banii digitali sunt cele mai populare metode prin
care clientul poate pl ati pentru bunurile sau serviciile achizit ,ionate.
Livrarea: reprezint a responsabilitatea livr arii bunurilor comandate de la
companie p^ an a la client. ^In cazul produselor zice (c art ,i, CD-uri, etc)
livrarea se poate realiza prin curierat sau prin pos ,t a.^In cazul produselor
digitale (produse software, muzic a, documente electronice, etc) livrarea se
face prin mediul electronic folosind metode care s a asigure sigurant ,a s ,i
integritatea produsului.
Servicii s ,i suport: este mult mai ieftin ment ,inerea client ,ilor actuali dec^ at
atragerea de client ,i noi. Din acest motiv companiile business-to-consumer
trebuie s a imbun at at ,easc a ^ n mod constant serviciile oferite client ,ilor, tim-
pul de livrare s ,i suportul pe care ^ l ofer a. Cum comert ,ul B2C se realizeaz a
electronic acest lucru este mult mai important dec^ at ^ n cazul comert ,ului
tradit ,ional.
Comert ,ul business-to-consumer reduce costurile tranzact ,iilor prin informarea
clientului s ,i oferindu-i posibilitatea de a alege oferta care i se potrives ,te. Deaseme-
nea reduce costurile de ^ ntret ,inere al unui magazin, doarece costurile ment ,inerii
unui site de e-commerce este mult mai mic dec^ at cel al ment ,inerii unui magazin
zic.
^In anul 2004 comert ,ul business-to-consumer a generat venituri ^ n valoare de peste
140 miliarde de dolari.
1.2.3 B2G e-commerce
Comert ,ul business-to-goverment sau B2G este denit^ n general ca ind comert ,ul
^ ntre companii s ,i sectorul public. Se refer a la folosirea internetului pentru operat ,ii
care sunt legate de sectorul guvernamental.

CAPITOLUL 1. E-COMMERCE 9
Acest tip de e-commerce are dou a componente: prima component a, sectorul
public care ^ s ,i asum a un rol de lider pentru stabilirea necesit at ,ii unei platforme
de e-commerce; s ,i a doua component a, care presupune interesul sectorului public
de a face sistemul de achizit ,ii s ,i pl at ,i virtuale mai ecient.
M arimea sistemului de comert ,B2G este insigniant a iar acest lucru este da-
torat ^ n mare parte guvernelor deoarece aceast a parte de market electronic este
subdezvoltat a.
1.2.4 C2C e-commerce
Comert ,ul customer-to-customer este, pur s ,i simplu, comert ,ul ^ ntre persoane
zice, realizat prin intermediul internetului s ,i al tehnologiilor web. Acest tip de
e-commerce este caracterizat prin cres ,terea num arului de piet ,e electronice s ,i de
licitat ,ii online, loc unde consumatorul is ,i poate prezenta produsele sau serviciile
pe care le ofer a. Acest tip de e-commerce prezint a cel mai mare potent ,ial pentru
dezvoltare.
Comert ,ul C2C prezint a cel put ,in trei forme:
site-uri de licitat ,ii precum eBay, care permite licitarea ^ n timp real pentru
obiecte v^ andute pe web;
sisteme peer-to-peer, precum modelul Napster (un protocol pentru tran-
smiterea de s ,iere ^ ntre utilizatori);
site-uri de anunt ,uri precum Excite Classieds s ,i eWanter (piet ,e interactive
unde utilizatorii pot negocia s ,i folosi optiuni precum "Buyer Leads & Want
Ads").
Exist a put ,ine informat ,ii despre m arimea global a a comert ,ului consumer-to-
consumer, totus ,i, site-urile C2C populare precum eBay s ,i Napster indic a c a acest
procent este destul de ridicat deoarece aceste site-uri genereaz a milioane de dolari
^ n ecare zi.
1.2.5 M-commerce
M-commerce (comert ,ul mobil) se refer a la vinderea s ,i cump ararea de bunuri
s,i servicii folosind tehnologii wireless precum telefoane mobile sau tablete. ^In
momentul actual Japonia este liderul mondial ^ n domeniul m-commerce.
Cum livrearea de cont ,inut prin ret ,elele wireles devine mai rapid a, mai sigur a
s,i mai adaptabil a, unii sunt de acord c a comert ,ul mobil va dep as ,ii comert ,ul

CAPITOLUL 1. E-COMMERCE 10
electronic desf as ,urat prin ret ,elele cu r iar acesta va devenii principala metod a
pentru comert ,ul electronic. Acest lucru devine din ce ^ n ce mai adev arat deoarece
num arul de utilizatori de telefoane mobile este ^ n continu a cres ,tere iar ^ n cur^ and
va dep as ,ii num arul utilizatorilor de internet prin ret ,ele cu r.
Industriile afectate de comert ,ul mobil includ:
Domeniul nanciar , inclusiv banking-ul realizat prin ret ,elele mobile (c^ and
client ,ii is ,i folosesc dispozitivele mobile pentru a-s ,i accesa contul s ,i pentru a
pl ati facturi);
Domeniul telecomunicat ,iilor, ^ n care plata facturilor s ,i revizuirea con-
turilor vor  realizate prin intermediul dispozitivelor mobile;
Serviciile de informat ,ii, care includ furnizarea de divertisment, s ,t,iri -
nanciare, actualiz ari de trac, etc, c atre un dispozitiv mobil.
1.3 Comert ,ul tradit ,ional vs comert ,ul electronic
^In e-commerce clientul/consumatorul primes ,te mai mult a in
uent , a peste mo-
dul cum produsele s ,i serviciile sunt f acute s ,i livrate, prin urmare m arind posibi-
lit at ,ile de alegere. Folosind comert ,ul electronic procesul de cump arare este mult
mai rapid s ,i mai deschis, consumatorul av^ and mai mult control.
Acest proces face informat ,ia despre produse s ,i piat ,a curent a mult mai accesibil a
s,i transparent a, lucru care ajut a consumatorul s a ia decizia potrivit a.
^In cazul comert ,ului electronic nu exist a un magazin zic s ,i de cele mai multe
ori cumpar atorul nu se ^ nt^ alnes ,te cu v^ anz atorul. Internetul s ,i telecomunicat ,iile
joac a un rol crucial ^ n fenomenul e-commerce. Cu toate c a scopul comert ,ului
tradit ,ional s ,i scopul comert ,ului electronic este acelas ,i (v^ anzarea de produse sau
servicii cu scopul de a genera prot), realizeaz a acest lucru prin mijloace diferite.
Magazinele tradit ,ionale prezint a informat ,ii despre produse cu ajutorul reviste-
lor de specialitate sau prin as ,e publicitare. Comert ,ul electronic realizeaz a acelas ,i
lucru folosind site-uri web, cataloage online sau reclame. ^In comert ,ul tradit ,ional
comunicarea se realizeaz a de cele mai multe ori prin telefon sau prin e-mail, pe
c^ and ^ n cazul comert ,ului electronic comunicarea se face prin e-mail sau printr-un
sistem de chat.
Comert ,ul tradit ,ional
Dependent de schimbul de informat ,ii de la persoan a la persoan a.

CAPITOLUL 1. E-COMMERCE 11
Comunicarea/tranzact ,iile sunt f acute ^ n mod sincron. Este necesar a o
intervent ,ie manual a pentru ecare tranzact ,ie.
Este dicil de stabilit s ,i de ment ,inut practici standard^ n comert ,ul tradit ,ional.
Nu exist a o platform a uniform a pentru schimbul de informat ,ii deoarece
aceasta se bazeaz a pe abilitatea personalului de a comunica.
Comert ,ul electronic
Schimbul de informat ,ii este us ,urat de c aile electronice de comunicat ,ie.
Comunicarea/tranzact ,iile pot  realizate ^ n mod asincron. Sistemele elec-
tronice gestioneaz a automat transmiterea mesajelor c atre persoanele potri-
vite sau realizarea tranzact ,iilor.
O strategie uniform a poate  stabilit a s ,i ment ,inut a cu us ,urint , a^ n e-commerce.
Comert ,ul electronic ofer a o platform a unde toate informat ,iile sunt disponi-
bile la un loc (site de informare, blog, etc).
Avantajele comert ,ului electronic pot  clasicate ^ n trei mari categorii:
Avantaje ale organizat ,iilor;
Avantaje ale consumatorilor;
Avantaje ale societ at ,ii.
Put ,ine inovat ,ii din toat a istoria cuprinde at^ atea benecii pentru oranizat ,ii,
consumatori s ,i societate as ,a cum cuprinde e-commerce-ul. Aceste benecii abia
au ^ nceput s a se materizlizeze iar cres ,terea lor va  signiant a odat a cu cres ,terea
comert ,ului electronic.
1.3.1 Avantaje ale organizat ,iilor
Piat ,a internat ,ional a. Ce ^ nainte obijnuia s a e o piat , a zic a localizat a geo-
grac ^ ntr-o zon a, a devenit acum o piat , a f ar a frontiere, aceasta incluz^ and piet ,ele
nat ,ionale s ,i internat ,ionale. Aleg^ and domeniul e-commerce, organizat ,iile au acum
acces la oamenii din ^ ntreaga lume. Ca efect, toate organizat ,iile care accept a
comert ,ul electronic devin corporat ,ii virtuale multinat ,ionale.
Operat ,ii s ,i economii. Costul pentru crearea, procesarea, distribuirea, stocarea
 si reg asirea informat iilor pe suport de h^ artie a sc azut.

CAPITOLUL 1. E-COMMERCE 12
Persnalizarea ^ n mas a. Comert ,ul electronic a revolut ,ionat felul ^ n care con-
sumatorii cump ar a bunuri s ,i servicii. Acest tip de piat , a permite produselor s ,i
serviciilor s a e personalizate pentru cerint ,ele ec arui client.
Permite reducerea intervalului de timp pentru inventariera produselor, acest
lucru este realizat prin colectarea tuturor comenzilor iar apoi livrarea lor prin sis-
temul JIT (just-in-time). Acest lucru ajut a foarte mult companiile din domeniul
tehnologic, unde stocurile de componente det ,inute pot  dep as ,ite ^ n doar c^ ateva
luni.
Sc aderea costului telecomunicat ,iilor. Folosirea internetului este mult mai ieftin a
dec^ at folosirea liniilor telefonice tradit ,ionale. Este mai put ,in costisitor s a trimit ,i
un fax sau un email folosind internetul dec^ at folosind liniile telefonice.
Digitalizarea produselor s ,i proceselor, ^ n special ^ n cazul produselor audio-
video, care pot  desc arcate sau trimise prin email client ,ilor folosind internetul.
Disparit ,ia programului de contact. Companiile pot  contactate de client ,i sau
parteneri la orice or a folosind Internetul.
Reducerea erorilor, acest lucru este posibil pentru c a o mare parte din procesul
de gestiune este automatizat.
Ajut a dezvoltarea companiilor mici s,i le d a posibilitatea de a concura cu com-
paniile mai mari de pe piat , a.
Este important de notat c a cele mai de succes companii folosesc tehnici din
ambele tipuri de comert ,.^In gura de mai jos sunt prezntate c^ ateva dintre cele
mai de succes companii precum s ,i protul generat de acestea ^ n anul 2004.

CAPITOLUL 1. E-COMMERCE 13
Top 25 e-commerce websites
1.3.2 Avantaje ale consumatorilor
Acces 24/7. Permite client ,ilor s a fac a tranzact ,ii s ,i cump ar aturi 24 de ore pe zi,
365 zile pe an, din aproape orice locat ,ie. De exemplu, plata facturilor, vericarea
conturilor, cump ararea biletelor de c al atorie, obt ,inerea de informat ,ii, etc.
Mai multe obt ,iuni. Client ii nu numai c a au o ^ ntreag a gam a de produse de
unde pot alege  si personaliza, dar, de asemenea, au s ,i o select ie internat ional a de
furnizori.
Comparat ,ii de pret ,.Client ,ii pot vizita magazine din ^ ntreaga lume s ,i pot
compara pret ,ul produselor direct pe site-ul acestora sau pot folosi site-uri de
comparare precum moneyextra.com sau compari.ro.
Proces de livrare ^ mbun at at ,it.Poate varia de la livrarea imediat a pentru pro-
dusele digitale (programe soft sau cont ,inut audio-video) folosind diverse metode,
p^ an a la urm arirea progresului pachetului ce urmeaz a a  livrat prin pos ,t a sau

CAPITOLUL 1. E-COMMERCE 14
prin curierat.
Comentarii s ,i p areri. Client ,ii pot ^ mp art as ,i comentarii s ,i p areri despre pro-
duse, aceste comentarii pot  v azute s ,i accesate de utilizatorii din ^ ntreaga lume.
Reduceri substant ,iale. Deoarece companiile s ,i rmele sunt mereu ^ n competit ,ie
acestea fac oferte s ,i reduceri substant ,iale pentru atragerea consumatorului.
Deasemenea permit utilizatorilor gruparea mai multor comenzi ^ ntr-o singur a co-
mand a mai mare pentru a benecia de o ofert a s ,i mai bun a.
Informarea bun a. Exist a o abundent , a de informat ,ii despre produse sau despre
un subiect. Majoritatea rmelor s ,i companiilor ^ ncearc a s a ofere un punct central
de unde client ,ii pot avea acces la toate informat ,iile.
1.3.3 Avantaje ale societ at ,ii
Program de lucru
exibil, acest lucru ^ mbun at at ,es,te calitatea viet ,ii pentru o
mas a ^ ntreag a de oameni, permit ,^ adu-le s a lucreze de acas a. Acest lucru nu este
doar mai put ,in stresant s ,i ofer a un mediu de lucru mult mai pl acut ci s ,i ajut a
mediul ^ nconjur ator prin reducerea polu arii deoarece mai put ,ini oameni trebuie
s a c al atoreasc a ^ n mod regulat.
Conecteaz a oamenii. Permite persoanelor din t , arile ^ n curs de dezvoltare  si
persoanelor din zonele rurale accesul la produse, servicii, informat ,ii s ,i la persoane
specializate care altfel nu ar  fost posibil sau cel put ,in la fel de us ,or.
Reduce pret ,urile. Ajut a la reducerea pret ,urilor prin automatizarea procesului
de product ,ie iar astfel serviciile devin mai accesibile tuturor.
Faciliteaz a livrarea serviciilor publice. De exemplu, serviciile de s an atate dis-
ponibile prin internet (consultat ,ii online cu doctori s ,i/sau asistente), plata taxelor
prin intermediul site-urilor de specialitate, etc.
1.4 Limit arile e-commerce-ului
Cu at^ atea benecii s ,i inovat ,ii pe care le aduce e-commerce-ul trebuie s a ne
^ ntreb am dac a exist a limit ari ale acestui "trend".
Cea de-a treia lege de mis ,care a lui Sir Isaac Newton spune: "Pentru ecare
act ,iune exist a o react ,ie egal a s ,i opus a", acest lucru sugereaz a faptul c a pentru

CAPITOLUL 1. E-COMMERCE 15
toate beneciile oferite de e-commerce exist a s ,i limit ari. Aceste limit ari sunt de
dou a feluri: limit ari tehnice s,ilimit ari non-tehnice . Aceste limit ari au ^ ncetinit
cres ,terea s ,i acceptarea fenomenului de e-commerce. Unele din aceste limit ari au
contribuit la es ,ecul mai multor proiecte s ,i companii dot-com din ultimii ani.
Limit ari tehnice:
lipsa sistemelor de securitate, implementarea proast a a comert ,ului electro-
nic;
viteza de conectare mic a sau inexistent a ^ n t , arile subdezvoltate;
lipsa unor standarde universale pentru calitate s ,i securitate
dicultatea integr arii cu unele baze de date.
Limit ari non-tehnice:
costul init ,ial: costul cre arii unei aplicat ,ii e-commerce pe cont propriu
poate  destul de ridicat, pot ap area ^ nt^ arzieri s ,i gres ,eli din cauza lipsei de
experient , a;
experient ,a utilizatorului: utilizatorul poate prezenta ne^ ncredere c atre
site-urile mai put ,in cunoscute;
condent ,ialitatea datelor: este dicil de asigurat utilizatorul c a toate
datele s ,i tranzact ,iile desf asurate online sunt securizate.
Cu trecerea timpului, aceste limit ari, ^ n special cele tehnice, vor  dep as ,ite.^In
plus, planicarea adecvat a poate minimiza impactul unora dintre ele. ^In ciuda
limit arilor s ,i es ,ecurile sale, fenomenul e-commerce a f acut progrese foarte rapid.
Odat a cu ^ mbunat at ,irea s ,i evolut ,ia tehnologiei, raportul benecii-cost va cres ,te,
duc^ and la o rat a s ,i mai mare de adoptare a comert ,ului electronic.
Aceste limit ari vor  tratate ^ n continuare ^ n conformitate cu cele trei mari
p art ,ile afectate de e-commerce: organizat ,iile, consumatorii s ,i societatea.
1.4.1 Limit ari ale organizat ,iilor
Lipsa unui sistem de securitate abil s ,i a unui protocol de comunicare. Exist a
numeroase exemple de site-uri s ,i baze de date care au fost atacate de anumit ,i
indivizi s ,i au ^ nregistrat pierderi substant ,iale. Acest lucru se ^ nt^ ampl a din cauza
unui sistem slab sau inexistent de securitate sau folosirea unui soft nepotrivit.
Acest tip de problem a este prezent chiar s ,i la companii foarte mari precum
Microsoft care pentru a ment ,ine securitatea au lansat mai multe update-uri pen-
tru anumite softuri de-a lungul anilor.

CAPITOLUL 1. E-COMMERCE 16
Evolut ,ia rapid a a tehnologiei. Acest lucru pune mereu companiile ^ n dicul-
tate deoarece pentru a ment ,ine un grad ridicat de securitate s ,i pentru a evita
amenint , arile trebuie s a investeasc a ^ n sisteme performante de securitate.
Cres ,terea concurent ,ei.Cres ,terea fenomenului de e-commerce a dus la aparit ,ia
de competitori at^ at la nivel nat ,ional dar s ,i la nivel internat ,ional. Acest lucru
conduce la "r azboaie" ^ ntre companii iar acest lucru creaz a o piat , a inconsistent a
s,i de cele mai multe ori aduce pierderi organizat ,iilor.
Compatibilitatea sistemelor. Aceast a problem a apare c^ and organizat ,iile do-
tate cu echipamente mai vechi nu pot comunica cu infrastructurile web, ceea ce
conduce la rularea a dou a sisteme independente care nu pot ^ mp art ,ii informat ,ii.
Acest lucru conduce la o investit ,ie ^ n echipamente s ,i ^ ntr-o infrastructur a nou a
care s a conecteze cele dou a sisteme. ^In ambele cazuri acest lucru este costisitor
s,i ^ ntrerupe funct ,ionarea corect a a unei organizat ,ii.
1.4.2 Limit ari ale consumatorilor
Echipamente de calcul sunt necesare pentru a participa ^ n noua economie "di-
gital a", ceea ce ^ nseamn a un cost capital init ial pentru client ii.
Cuno stint e tehnice de baz a sunt necesare at^ at pentru folosirea echipamentului
de calcul c^ at s ,i pentru navigarea pe Internet.
Costul de acces la internet , ^ n funct ,ie de modalitatea s ,i locul de conectare la
internet.
Costul echipamentelor de calcul . Nu doar costul init ial al achizit ion arii de echi-
pamente, dar s ,i asigurarea c a tehnologia este actualizat a ^ n mod regulat pentru
a  compatibil a cu cerint ele diferitelor site-uri web  si aplicat ii.
Lipsa de securitate  si de condent ialitate a datelor personale. Nu exist a nici
un control real al datelor colectate pe web sau internet. Legile de protect ie a
datelor nu sunt universale  si prin urmare site-urile g azduite ^ n diferite t  ari pot
avea, sau nu, legi care protejeaz a condent ialitatea datelor personale.
Lipsa contactului zic. Contactul zic  si relat iile sunt ^ nlocuite de procesele
electronice. Client ii ind ^ n imposibilitatea de a atinge sau de a simt i m arfurile
v^ andute on-line.
Lips a de ^ ncredere fat , a de tehnologie.

CAPITOLUL 1. E-COMMERCE 17
1.4.3 Limit ari ale societ at ,ii
Sc aderea interact ,iunii umane. Pe m asur a ce oamenii devin mai obijnuit ,i cu
interact ,iunea electronic a ar putea exista o erodare a abilit at ilor personale  si so-
ciale care este ^ n defavoarea societ at ,ii.
Diviziunea social a. Exist a un potent ial pericol ^ n ceea ce prives ,te divizarea
social a ^ n dou a p art ,i: persoanele cu cunos ,tiint ,e tehnice s ,i persoanele f ar a astfel
de cunos ,tiint ,e. Persoanele f ar a astfel de cunos ,tiint ,e ar putea devenii incapabile
s a g asesc a un loc de munc a bine pl atit  si ar putea forma o subclas a social a cu
implicat ii potent ial periculoase pentru stabilitatea social a.
Resursele irosite. Odat a cu ^ nlocuirea tehnologiilor s ,i instrumentelor vechi cu
unele noi rezult a foarte multe des ,euri care negestionate pot forma repede o pro-
blem a major a.
Dicult at ,i ^ n a aplica legea , ceea ce rezult a ^ n numeroase infract ,iuni, multe din
acestea r am^ an^ and nepedepsite iar s ,i mai multe ind nedetectate.
1.5 Modalit at ,i de plat a
Un sistem electronic de plat a ( electronic payment system – EPS ) este un sis-
tem de schimb nanciar ^ ntre cump at ar atori s ,i v^ anz atori ^ n mediul virtual care
este reprezentat prin pl at ,i electronice, bani digitali (Bit coins), conturi ^ n banc a,
cardul de credit, etc. Acest sistem de plat a a revolut ,ionat procesul afacerilor prin
reducerea num arului de documente care trebuiesc completate, reducerea costuri-
lor tranzact ,iilor s ,i costul muncii. Fiind o tehnologie us ,or de ^ nteles s ,i de folosit
ajut a la reducerea timpului pentru procesarea manual a s ,i ajut a organizat ,iile s a
^ s,i extind a expunerea pe piat , a.
C^ ateva dintre cele mai populare sisteme de plat a electronic a sunt:
Card de credit
Card de debit
Smart card
Electronic Fund Transfer (EFT)
Cardul de credit
Plata folosind cardul de credit este una dintr-e cele mai comune metode de
plat a electronic a. Cardul de credit este un card mic de plastic, cu un num ar unic

CAPITOLUL 1. E-COMMERCE 18
asociat unui cont. Cont ,ine deasemenea o band a magnetic a care ajut a cititoarele
de carduri s a citeasc a aceste carduri. C^ and un client pl ates ,te pentru un produs
cu cardul de credit, suma respectiv a este retras a din contul asociat cardului.
Cardul de debit
Cardurile de debit sunt foarte asem an atoare cu cardurile de credit. Precum
cardul de credit, cardul de debit este un card mic de plastic cu un num ar unic
asociat unui cont. Este necesar a existent ,a unui cont la banc a ^ nainte de a solicita
un card de debit.
Diferent ,a major a ^ ntre card de debit si cardul de credit este c a, ^ n caz de plat a
prin card de debit, suma se deduce din cont imediat  si ar trebui s a existe fonduri
suciente pentru a realiza tranzact ,ia, pe c^ and ^ n cazul cardului de credit nu exist a
o astfel de constr^ angere.
Smart card-ul
Smart card-ul este similar cu card de credit  si cu card de debit ^ n aparent  a,
diferent ,a este c a smart card-ul are un mic microprocesor ^ ncorporat ^ n el. Acesta
are capacitatea de a stoca datele personale ale utilizatorului, inclusiv situat ,ia -
nanciar a s ,i balant ,a de care dispune.
Smart card-ul pot  accesate doar folosind un cod de client. Smart card-urile
sunt foarte sigur pentru c a acestea stocheaz a informat iile ^ n format criptat. Dou a
exemple de astfel de carduri sunt: Mondex  si Visa Cash.
Electronic Found Transfer
Electronic Found Transfer sau transferul de fonduri prin mijloace electronice
este o metod a foarte popular a de plat a electronic a care implic a transferul de bani
de la un cont bancar c atre un alt cont bancar. Conturile pot  ^ n aceea si banc a
sau ^ n b anci diferite. Transferul de fonduri se poate realiza folosind ATM (Auto-
mated Teller Machine) sau folosind calculatorul.
Clientul se logheaz a pe site-ul b ancii s ,i ^ nregistreaz a contul unei alte b anci, apoi
face o cerere pentru a transfera o anumit a sum a c atre contul ^ nregistrat. Dup a ce
s-a efectuat transferul, clientul este ^ ns ,tiint ,at de c atre banc a de succesul transfe-
rului.
Toate aceste modalit at ,i de plat a au dat nas ,tere unui nou cuv^ at potrivit pentru
aceste situat ,ii,e-banking .
Ce este e-banking ?

CAPITOLUL 1. E-COMMERCE 19
E-banking face referire la modalitatea familiar a s ,i relativ matur a de plat a a
produselor s ,i a facturilor folosind de cele mai multe ori procedee electronice (plata
prin telefon, card de credit, card de debit, transfer bancar, depunerea direct a, etc).
1.6 Concluzii
Nu exist a o denit ,ie asupra c areia toat a lumea s a e de acord atunci c^ and
discut am despre termenii e-commerce s ,i e-business. Prin urmare aces ,ti temeni
trebuiesc claricat ,i s ,i explicat contextul ^ n care sunt folosit ,i. Infuent ,ele majore
ale e-commerce-ului se g asesc ^ n domeniul afacerilor, ^ n domeniul consumatorilor
s,i ^ n domeniul social. Exist a numeroase avantje ale comert ,ului electronic, c^ ateva
din acestea sunt: cres ,terea ecient ,ei, reducerea pret ,urilor, personalizarea s ,i piat ,a
global a.
Comert ,ul electronic prezint a deasemenea s ,i numeroase limit ari care se aplic a
celor trei categorii ment ,ionate mai sus. Acestea includ: securitatea, ^ ncrederea,
costurile de acces, diviziunea social a, lipsa unui sistem de control. Comert ,ul elec-
tronic de succes ^ nseamn a ^ nt ,elegerea acestor limit ari s ,i minimizarea impactului
acestora s ,i ^ n acelas ,i timp maximiz^ ad beneciile.
Pentru a ajuta la^ nt ,elegerea comert ,ului electronic au fost introduse nenum arate
framework-uri pentru a putea  explorat din diferite perspective: persvectiva me-
diului care identic a interact ,iunea cu tehnologia, cu oamenii, s ,i cu organizat ,iile
care lucreaz a^ mpreun a pentru e-commerce; participant ,ii diferit ,i s,i tipul de tranzact ,ii
care au loc ^ ntre ei; s ,i gradul de digitalizare care analizeaz a produsele, procesele
s,i metodele de livrare din cadrul organizat ,iilor. Aceste framework-uri ajut a la
identicarea elementelor de e-commerce s ,i cum organizat ,iile ^ nt ,eleg fenomenul de
e-commerce s ,i aplicat ,iile pratice ale acestui.

Capitolul 2
Responsive web-design
Responsive web design este o tehnic a menit a s a ofere utilizatorului o experient , a
pl acut a ^ n utilizarea serviciilor, indiferent de modul de acces la aceste servicii.
Conceptul de responsive web design este o abordare care creaz a schimb ari dinamic
^ n design-ul unui website, ^ n funct ,ie de m arimea s ,i orientarea ecranului pe care
este vizualizat.
Num arul de utilizatori de telefoane mobile s ,i opt ,iunile pe care le ofer a acestea
a crescut exponent ,ial ^ n ultimii ani. Browserele de pe telefoanele mobile pot acum
s a as ,eze o pagin a web la fel de bine precum browserele de pe calculatoarele per-
sonale. Organizat ,ia Cisco prezice c a p^ an a ^ n anul 2016 vor  aproximativ 788 de
milioane de utilizatori de telefoane mobile, cifr a care dep as ,es,te cu mult num arul
utilizatorilor de calculatoare personale.
Cu c^ at petrecem mai mult timp pe web cu at^ at este mai evident c a schimba-
rea este singura constant a. Am v azut schimb ari ^ n limbajele de programare, ^ n
popularitatea browserelor, ^ n limbajele folosite pentru scrierea cont ,inutului a
at
pe web iar ^ n ultima perioad a ^ n diversicarea dispozitivelor cu care ne putem
conecta la internet.
Aceast a ultim a schimbare a condus la aparit ,ia fenomenului de responsive web
design, acesta aduce o schimbare major a ^ n web design s ,i se concentreaz a pe
experient ,a utilizatorului.
La momentul actul aproape toat a lumea din domeniul web a auzit mai mult
sau mai put ,in termenul de responsive web design (referit s ,i prin abrevierea RWD),
dar surprinz ator foarte mult a lume are o ^ nt ,elegere clar a a conceptui de respon-
sive web design.
^In acest capitol se vor prezenta principiile de baz a ale RWD precum s ,i ce
^ nseamn a pentru un site s a e responsiv. Dup a aceea se va prezenta istoria web
design-ului pentru a ^ nt ,elege de unde pornit ideea de responsive web design s ,i
cum este noua abordare diferit a fat , a de modul de lucru tradit ,ional.
20

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 21
Se va prezenta s ,i de ce folosirea designului responsiv este cea mai bun a alegere
pentru construirea unui site web care va funct ,iona ^ n modul dorit pe multitudi-
nea de dispozitive care se pot conecta la internet s ,i de asemenea cum RWD ne
va us ,ura munca pe parcursul timpului. Vor  prezentate s ,i efectele mai put ,in
vizibile cum ar  impactul care il are asupra motoarelor de c autare.
^In ansamblu responsive web design este o modalitate de a realiza site-uri web
care pot  vizualizate s ,i folosite la parametrii optimi pe orice tip de dispozitiv
s,i pe orice tip de ecran, de la ecranele telefoanelor mobile p^ an a la cele mai mari
monitoare.
2.1 Principii de baz a
Responsive web design reprezint a o serie de tehnologii care combinate ajut a
la rularea unei aplicat ,ii pe o gam a larg a de dispozitive, c^ at mai bine cu putint , a.
Aceast a "tendint , a" nu a fost observat a doar de profesionis ,tii din domeniul web,
ci s ,i de rmele de m arimi mici s ,i mijlocii care caut a deasemenea s a-s ,i prezinte
cont ,inutul web pe toate dispozitivele de pe piat , a.
Ethan Marcotte, cunoscut drept p arintele RWD, a publicat un articol pe site-
ul "A List Apart" ^ n luna mai ^ n anul 2010 intitulat "Responsive Web Design".
^In acest articol s-a prezentat important ,a gridurilor
uide, imaginilor
exibile s ,i
interog arilor media (media queries), ele ind fundat ,ia RWD.
Acest a fundat ,ie are rolul de a ajuta la atingerea scopului "scrie odat a, funct ,i-
oneaz a oriunde". ^Imbr at ,is,^ and RWD s ,i schimb arile aduse de acesta, putem
siguri c a aplicat ,ia noastr a se va adapta la dispozitivul utilizatorului s ,i ne putem
concentra pe experient ,a utilizatorului.
Deoarece aceste tehnici sunt bazate pe principii acceptate s ,i folosite de toat a
comunitatea web, au fost acceptate relativ us ,or, mult ,i dintre designeri folosind
aceste thenici f ar a s a is ,i dea seama. Acest lucru ^ nseamn a c a p^ an a s ,i cele mai
mici schimb ari ^ n procesul de livrare al aplicat ,iei pot avea implicat ,ii majore pen-
tru utilizatori, iar de cele mai multe ori aceste schimb ari ajut a la consolidarea
muncii depuse de designeri. Cres ,terea num arului de dispozitivelor mobile precum
s,i dimensiunile acestora poate reduce folosirea unei aplicat ,ii.
Cu toate c a utilizatorii au ^ nv at ,at, din necesitate, s a ating a ecranul de dou a ori
pentru a m ari cont ,inutul, acest lucru poate  evitat folosind RWD s ,i prin urmare
m arind experient ,a utilizatorului.
O schimbare simpl a creaz a o experient , a mai bun a pentru utilizatorii de dis-
pozitive cu rezolut ,ii mici sau variabile. Aceast a schimbare simpl a se refer a la
ad augarea elementului "viewport" care poate adapta un site cu condit ,ia s a fur-

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 22
niz am atributele necesare pentru dispozitive pe care dorim s a le suport am.
Figura 1 prezint a website-ul "sitepoint.com" accesat de pe un dispozitiv mo-
bil. ^In browserul din partea st^ ang a interfat ,a website-ului arat a as ,a cum sun-
tem obijnuit ,i s a arate pe calculatoarele personale. Browserul din partea dreapt a
^ ncarc a acelas ,i website dar care are ad augat elementul "viewport". Evident vom
avea nevoie de mai multe schimb ari pentru a face site-ul s a funct ,ioneze cum ne-am
dori dar putem observa
exibilitatea pe care o ofer a RWD.
Fig. 1. Aplicarea elementului viewport
Exist a anumite website-uri care pentru a sust ,ine tracul mobil au realizat
o versiune mobil a special pentru un anumit tip de display, aceast a variant a a
website-ului este diferit a de varianta pe care o v ad utilizatorii de calculatoare
personale. De obicei aceste variante mobile sunt realizate doar pentru un singur
dispozitiv, dac a vom accesa acelas ,i site de pe un dispozitiv care nu este suportat
exist a riscul ca website-ul respectiv s a nu mai funct ,ioneze corect.
Folosind un design responsiv exist a doar o singur a variant a a unui website
care poate  vizualizat a pe toate dispozitivele. Pentru a realiza acest lucru,
designul se schimb a ^ n funct ,ie de dimeniunea ecranului pentru a oferii c^ at mai
multe informat ,ii dar f ar a a ^ nc arca ecranul.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 23
Fig. 2. Un site responsive vizualizat pe telefon, tablet a s ,i desktop
2.2 Istorie
P^ an a acum c^ at ,iva ani website-urile erau proiectate s a funct ,ioneze pentru cele
mai comune dimensiuni de monitoare. ^In anul 2000, acest lucru ^ nsemna proiec-
tarea pentru un ecran cu o l at ,ime de 800px, totus ,i, pe la mijlocul anului 2000
majoritatea monitoarelor aveau o l at ,ime de 1024px. Bine^ nt ,eles pe piat , a existau
monitoare mai mari dar s ,i mai mici.
Designerii web doreau ca produsele lor s a arate la fel indiferent de m arimea
monitorului pe care era vizualizat cont ,inutul iar de obicei creau paginile web doar
pentru dimensiunile cele mai populare de monitoare, de exemplu folosind o l at ,ime
de 960px. Monitoarele mai mari as ,au corect cont ,inutul dar mai ad augau spat ,iu
alb pe margini (exemplu gura 3).
Fig. 3. Site-ul MSN cu l at ,ime x a

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 24
Cu toate c a au trecut foarte mult ,i ani de atunci, aceste design-uri sunt ^ nc a
destul de des^ nt^ alnite. Ideile de
uid design s,iliquid layout au ap arut la^ nceputul
anului 2000. Aceste tehnici exprim a l at ,imea^ n procente, fapt care permite design-
ului unei pagini s a "curg a" s ,i s a ocupe toat a zona ecranului, deci poate s a folosesc a
s,i spat ,iul oferit de ecranele mai mari. Cu toate c a acest lucru sun a bine ^ n teorie,
renunt ,^ and la controlul designului ^ nsemna c a puteai avea anumite linii care s a se
extind a mai mult dec^ at dimensiunea ecranului, acest lucru a f acut ca majoritatea
designerilor s a r am^ an a la designul x care era mult mai us ,or de folosit.
2.2.1 Browsing-ul folosind telefonul mobil
C^ and telefoanele mobile cu acces la internet au devenit disponibile (pe la mij-
locul anilor 1990), nu aveau capacitatea s a as ,eze website-uri, ^ n schimb ofereau
accesul numai la date care puteau  as ,ate sub form a de text, precum prognozele
meteo, rezultate sportive, etc. Primele browsere mobile puteau s a as ,eze numai
cod HTML de baz a s ,i de obicei alb-negru. Abia ^ n anul 2000 browserele mobile
au devinit capabile s a as ,eze pagini web. Telefoanele mai avansate care foloseau
tehnologii precum CSS2 s ,i JavaScript au fost numite smartphones .
Fig. 4. iPhone 4S
Smartphone-urile prezentate de compania Apple, cunoscute sub numele de
iPhone lansate ^ n anul 2007 au adus o schimbare major a ^ n ceea ce prives ,te
consumarea de cont ,inut web pe dispozitivele mobile. Aceste smartphone-uri dis-
puneau de toate tehnologiile necesare pentru a putea as ,a o pagin a web la fel
de bine ca un calculator personal. Cu toate c a dispozitivele touchscreen erau pe
piat , a de c^ at ,iva ani, smartphone-urile iPhone au fost printre primele dispozitive
mobile care foloseau tehnologia multi-touch, aceast a tehnologie permite dispoziti-
vului s a recunoasc a simultan mai multe puncte de contact cu ecranul – tehnologie
necesar a pentru navigarea pe internet cu care suntem obijnuit ,i ast azi, precum

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 25
pinch-to-zoom.
Toate aceste lucruri au condus la referirea smartphone-ului iPhone ca la unul
dintre cele mai inovatoare produse ale acelui an, dar exista o problem a. Paginile
web erau proiectate pentru a  consumate pe monitoare de m arimi mari, nu pe
ecranele mici ale telefoanelor s ,i prin urmare majoritatea paginilor web aveau o
dimensiune de 960px sau chiar mai mare. Dimensiunea ecranului unui iPhone era
de numai 320px. Solut ,ia adus a de Apple a fost mics ,orarea cont ,inutului automat
pentru a ^ nc apea pe ecranul telefonului (folosirea viewport-ului) iar dup a aceea
utilizatorul putea s a creasc a zoom-ul ^ n orice zon a a paginii.
Dar vizualizarea paginilor web pe buc at ,i nu rezult a intr-o experient , a pl acut a
pentru utilizator. Designerii web au realizat c a acest lucru nu este un mod pl acut
de a vizualiza paginile web s ,i c a vor trebuii s a g aseasc a un mod de a realiza
website-uri care s a e us ,or de vizualizat pe ecranul mic al unui iPhone.
2.2.2 Website-urile mobile
Deoarece designerii erau obijnuit ,i s a realizeze pagini web cu l at ,imi xe, cea
mai us ,oar a s ,i cea mai evident a solut ,ie era s a realizeze variante separate pentru
dispozitivele mobile av^ and o l at ,ime x a care s a ^ ncap a pe un ecran cu o l at ,ime
de 320px ^ n loc de m arimea comun a de 1024px (g 5).
Utilizatorii erau redirect ,ionat ,i automat c atre varianta mobil a a website-ului
dac a foloseau un telefon mobil. ^In caz contrar puteau alege website-ul mobil
f ac^ and click pe un link sau vizit^ and website-ul folosind un alt URL, de obicei fo-
losind un subdomeniu precum http://m.sitepoint.com. Aceast a practic a a condus
la numirea acestor website-uri ca la m-dot websites .
Desigur, acest lucru ^ nsemna mai mult a munc a pentru echipa care se ocupa
de proiect dar de obicei us ,urau acest proces prezent^ and o variant a minimal a a
website-ului cu numai o parte din cont ,inut (g 5).

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 26
Fig. 5. Varianta desktop s ,i varianta mobil a a website-ului " The Washington Post "
Justicarea { telefoanele mobile erau folosinte "pe fug a" sau pentru anumite
activit at ,i de baz a, lucruri probabil adev arate pentru majoritatea utilizatorilor ^ n
acel moment. Dar cum popularitatea smartphone-urilor a crescut, utilizatorii au
^ nceput s a foloseasc a aceste dispozitive pentru scarcinile pe care ^ n mod obijnuit
le realizau cu ajutorul calculatoarelor personale.
Det ,inerea unui "iPhone website" cum des erau numite, a reprezentat o solut ,ie
bun a la ^ nceput pentru perioada c^ and iPhone-ul era singurul act ,ionar major de
pe piat ,a telefoanelor inteligente. Dar acest lucru nu a durat mult. Celelalte mari
companii produc atoare de telefoane mobile au luat init ,iativa s ,i ecare dintre ele
a venit cu propriul r aspuns la iPhone.
Dar toate aceste noi smartphone-uri nu aveau aceeas ,i dimensiune. Unele din-
tre ele aveau m arimea ecranului mai mic a (240px sau mai put ,in) comparativ cu
un iPhone-ul iar altele mai mare, ^ n special cele proiectate pentru a  folosite
orizontal ^ n loc de vertical. Un site cu o l at ,ime de 320px realizat pentru iPhone
nu putea  as ,at corect pe toate aceste noi ecrane.
Prin urmare web designerii au ^ nceput s a caute o solut ,ie pentru problema:
cum putem realiza website-uri care s a funct ,ioneze perfect indiferent de m arimea
ecranului pe care este vizualizat? Nu exista o solut ,ie us ,oar a. Apoi, ^ n 2010,
compania Apple a lansat tableta iPad. Din nou, acest lucru a adus o schimbare
major a. Website-urile mobile aveau o dimensiune prea mic a s ,i nu se putea fo-
losii de m arimea ecranului mai mare oferit a de noile tablete iar ^ n acels ,i timp
website-urile realizate pentru desktop aveau o dimensiune prea mare pentru a
putea funct ,iona corect pe un iPad.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 27
Cu toate c a unii designeri au react ,ionat prin crearea unui website separat s ,i
pentru iPad (ajung^ and la un num ar de trei website-uri separate ^ n total) cei mai
mult ,i dintre ei au realizat c a nu mai era posibil a crearea unei variante noi pentru
ecare dimensiune nou ap arut a.
2.2.3 Media queries
Comunitatea dezvoltatorilor web s-a ^ ntors la conceptul de
uid layouts , fo-
losind dimensiuni bazate pe procente s ,i a ^ ncercat s a adapteze procesul pentru
dispozitivele mobile.
Folosirea procentelor ^ n loc de pixeli permite paginii web s ,i sect ,iunilor de pa-
gin a s a-s ,i ajusteze m arimea pentru a acomoda l at ,imea ecranului, rezolv^ and astfel
problema dimensiunilor diferite ale ecranelor. Dar dac a analiz am s ,i mai mult
^ ntreaga varietate de ecrane, apare o problem a. Mics ,or^ and un design de trei co-
loane la dimensiunea ecranului unui smartphone reduce dimensiunea textului s ,i
^ l face dicil de citit. Deasemenea, un design cu o coloan a care arat a bine pe un
smartphone ar  prea mare pentru monitoarele calculatoarelor personale.
Esent ,ial problema era urm atoarea: f ar a a crea website-uri individuale, cum
poate un website s a e as ,at sub forma unei coloane pe dispozitivele cu ecran
^ ngust s ,i pe mai multe coloane pe dispozitivele cu dimensiunea ecranului mai
mare? Cum pot ,i "ruga" browserul s a fac a schimb ari la design, bazat pe pro-
priet at ,ile dispozivului pe care este vizualizat website-ul?
Solut ,ia: interog arile media ( media queries ).
Regula CSS @media , ne permite s a as , am diferite stiluri bazate pe propriet at ,ile
dispozitivelor, aceasta face parte din CSS2 de mai bine de zece ani, dar atunci
suporta doar interog ari pentru tipul media, precum screen sau print. Aceasta era
folosit a de obicei pentru a crea o variant a pentru printare a unui website, dar
utilitatea ei se oprea acolo.
Odat a cu aparit ,ia CSS3 a fost schimbat a specicarea (descriere formal a s ,i deta-
liat a a cum ceva este as ,teptat s a funct ,ioneze) pentru interog arile media care per-
mitea interog ari mai precise bazate pe propriet at ,ile dispozitivelor cum ar  l at ,ime
sau ^ n alt ,ime. Interog arile media nu afecteaz a cont ,inutul HTML (cont ,inutul ac-
tual s ,i structura paginii) { afecteaz a numai stilurile care sunt aplicate paginii
folosind CSS. Browserele au ^ nceput s a ofere suport pentru interog arile media ^ n
jurul anului 2009.
Ce fac aceste interog ari media?
S a presupunem c a avem un website cu cont ,inutul separat ^ n dou a sect ,iuni. Am

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 28
putea crea un design cu o singur a coloan a care s a e as ,at corect pe telefoanele
mobile, as ,^ and cele dou a sect ,iuni pe vertical a. Pentru dispozitivele cu ecranul
mai mare am putea s a as , am cont ,inutul pe dou a coloane diferite, una l^ ang a cea-
lalt a.
Folosind interog arile media, putem ^ ntreba dispozitivul care este dimensiunea
ecranului. Apoi ^ i putem spune s a as ,eze cont ,inutul pe dou a coloane dac a ecranul
este sucient de mare.
Pentru a realiza acest lucru, ^ ncepem cu codul CSS care va as ,a cont ,inutul^ ntr-
o singur a coloan a, apoi ad aug am o interogare media care ^ ntreab a care ^ ntreab a
dispozitivul dac a m arimea acestuia este de o anumit a dimensiune.
^In interiorul interog arii ad aug am codul CSS care va as ,a cont ,inutul pe dou a
coloane ^ n loc de una singur a. Browserul va folosi aceste stiluri numai dac a in-
terogarea este adev arat a iar dac a nu, va ignora acest bloc de CSS s ,i cont ,inutul
va r am^ ane intr-o singur a coloan a. Rezult a c a putem da website-ului nostru un
design diferit ^ n funct ,ie de dimensiunea dispozitivului f ar a a mai crea variante
separate ale aceluias ,i website.
Prin folosirea interog arilor media putem schimba toate stilurile unui website,
nu doar num arul coloanelor. Interog arile media pot  folosite pentru a schimba
pozitia elementelor, pentru a schimba m arimea textului, pentru a ascunde sau a
as ,a cont ,inut sau pentru a modica orice stil de pe pagin a.
2.2.4 Flexibilitate
Interog arile media pot rearanja layout-ul unui website, dar designul responsiv
nu ar funct ,iona f ar a o baz a
exibil a.
Pentru ^ nceput, toate dimensiunile trebuiesc exprimate ^ n unit at ,i
exibile, nu
^ n unit at ,i xe precum pixelii. Acest lucru ^ nseamn a c a dimensiunile coloanelor s ,i
a celorlalte elemente vor  exprimate ^ n procente iar dimensiunea textului va
m asurat a ^ ntr-o unitate relativ a numit a " em".
^In cazul redimension arii imaginilor lucrurile stau un pic diferit, deoarece nu
dorim ^ ntotdeauna s a le schimb am dimensiunea ^ n funct ,ie de dimensiunile dispo-
zitivului, dorim ca imaginile s a e sucient de mari pentru a  us ,or de ^ nt ,eles,
c^ at timp dimensiunea ecranului ne permite acest lucru.
Niciuna din ideile prezentate mai sus nu au fost idei inovatoare doar prin ele
^ nsele. ^In anul 2010 designerului Ethan Marcotte a descoperit o modalitate de
a folosii aceste concepte ^ mpreun a pentru a realiza website-uri care s a r aspund a
diferitelor dimensiuni ale ecranelor.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 29
Marcott a inventat termenul de " responsive web design " s ,i la prezentat ^ ntr-un ar-
ticol publicat pe website-ul " A List Apart ", articolul poate  g asit la urm atoarea
adres a:
http://alistapart.com/article/responsive-web-design , s ,i tot ^ n anul 2010 a publi-
cat cartea " Responsive Web Design ", carte folosit a s ,i pentru scrierea prezentei
lucr ari.
2.3 Gridurile
uide
La ^ nceputul acestui capitol sau prezentat principiile care stau la baza desig-
nului responsiv. ^In sect ,iunea care urmeaz a se vor prezenta mai multe informat ,ii
despre acestea.
Gridurile
uide reprezint a primul pilon al designului responsiv, ind succesorul
natural al layout-ului
uid. Deasemenea, tipograa
uid a joac a un rol important
deoarece s ,i cont ,inutul trebuie s a e
uid.
Proiectarea paginilor web sub form a de grid, pe linii s ,i coloane a fost visul
designerilor ^ nc a de la aparit ,ia internetului. ^In momentul de fat , a nu exist a con-
ceptele de coloane sau griduri ^ n HTML, nici m acar ^ n HTML5. Pentru a putea
realiza acest lucru ne folosim de tooluri specice.
Framewok-urile reprezint a cea mai popular a solut ,ie care aplic a o structur a de
grid website-ului dorit, cele mai populare framework-uri la momentul actual sunt:
Bootstrap 3, HTML5 Boilerplate, HTML KickStart. Cele mai simple griduri sunt
compuse din una, dou a sau trei coloane, acestea au de obicei cont ,inut care se ex-
tinde pe un singur r^ and.
Gridurile mai complexe (pot avea 9, 12 s ,i chiar 24 de coloane) cresc num arul
de coloane pentru a controla cont ,inutul mai bine. ^In cazul gridurilor complexe,
coloanele act ,ioneaz a ca punct de reper pentru cont ,inutul unui r^ and.
De exemplu, ^ ntr-un grid cu 12 coloane un r^ and se poate extinde pe suprafat ,a
tuturor celor 12 coloane sau se poate ^ mp art ,ii ^ n mai multe sect ,iuni de diferite
dimensiuni care adunate s a nu dep as ,easc a num arul maxim de coloane admis de
gridul folosit.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 30
Fig. 6. Grid simplu vs grid complex
Ceea ce framework-urile aduc^ n domeniul responsiv web design este^ nl aturarea
^ ndoielii asupra faptului cum trebuie cont ,inutul as ,ezat ^ n pagin a. ^Inlocuies ,te
layout-ul exprimat x prin pixeli cu un layout
uid exprimat ^ n procente.
Framework-urile nu doar c a ne ofer a un grid cu care putem lucra dar de ase-
menea cres ,te productivitate prin toate avantjele pe cale le ofer a, precum: cod
HTML s ,i CSS compatibil cu versiunile anterioare, compatibilitate pentru cele
mai populare browsere, accesibilitatea s ,i
exibitatea lor.
2.4 Imagini
exibile
A doua component a major a a designului responsiv este reprezentat a de ima-
ginile
exibile (sau imagini adaptabile cum sunt numite ^ n specicat ,iile HTML5).
Aceast a component a urm ares ,te s a rezolve dou a probleme:
dicultatea ^ n a estima dimensiunea la care o imagine se va as ,a
rezolut ,ia la care se pot as ,a o imagine
Prima problem a apare atunci c^ and structura unui site este
uid a, acest lucru
^ nseamn a c a s ,i cont ,inutul trebuie s a e
uid; altfel la redimensionarea website-
ului cont ,inutul se va mis ,ca ^ ngrun^ and utilizarea acestuia la parametrii dorit ,i sau
chiar va face cont ,inutul imposibil de urm arit. Cu toate c a aceast a
uiditate este
us,or de aplicat ^ n cazul textului, c^ and vorbim despre elemente grace lucrurile
devin mai complicate. Datorit a implicat ,iilor pe care le au aceste elemente nu ne
putem ^ ncrede ^ n browser c a va putea s a ajusteze corect toate elementele grace
folosite de aplicat ,ie.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 31
A doua problem a apare atunci c^ and r aspundem la calitatea dispozitivelor mo-
derne. ^In prezent dispozitivele HiDPI (High Dots Per Inch) , produsele Apple
care folosesc Retina display s,i varianta Android, AMOLED, folosesc o densitate
a pixelilor de dou a ori mai mare dec^ at restul dispozitivelor iar odat a cu dublarea
num arului de pixeli se dubleaz a s ,i rezolut ,ia. O solut ,ie optim a pentru aceast a
problem a trebuie s a e capabil a s a detecteze aceste dispozitive s ,i s a le livreze
resursele de care au nevoie.
Este nevoie de o modalitate care s a se poat a adresa acestor dou a probleme:
dimensiunea, s ,i rezolut ,ia imaginilor pentru a ^ mbun at at ,ii experient ,a utilizatoru-
lui.
Pentru a rezolva aceste provoc ari se folosesc tehnici care variaz a de la mo-
dalit at ,i care ne permit s a integr am imaginile ^ n gridurile
uide folosite, p^ an a la
propunei pentru specicat ,iile HTML5 care s a foloseasc a diferite imagini pentru
tipuri de dispozitive diferite. Fiecare designer decide cum s a foloseasc a aceste
tehnici pentru a ajunge la un rezultat satisf ac ator.
Gridurile
uide oferite de framework-uri realizeaz a schimb ari structurale, aces-
tea neind vizibile utilizatorului; aceste schimb ari nu pot  aplicate s ,i imaginilor
deoarece o schimbare ^ n calitatea unei imagini este us ,or de observat de c atre uti-
lizator.
Mult ,i dintre produc atorii de dispozitive mobile schimb a densitatea pixelilor pen-
tru dispozitivele produse, aceast a densitate este chiar de dou a ori mai mare ^ n
cazul unora dintre produc atori.
Aplicat ,iile care nu folosesc aceste noi densit at ,i pot l asa utilizatorului o experient , a
nepl acut a, ^ n schimb, ^ n cazul ^ n care aplicat ,ia utilizeaz a numai imagini de den-
sitate ^ nalt a, s ,i utilizatorii folosesc predominant aplicat ,iile pe dispozitive mobile
mai vechi sau pe desktop-uri, aces ,tia vor desc arcarea imagini pe care dispozitivele
lor nu le pot folosi. Acest lucru duce la pierderea l at ,imei de band a at^ at pentru
det ,in atorul aplicat ,iei c^ at s ,i utilizatorii iar tot efortul depus de designeri va  ^ n
zadar.
^In gura 7 este prezentat a o imagine vizualizat a pe dou a tipuri de densit at ,i,
imaginea din partea st^ anga reprezint a desnsitatea cea mai des ^ nt^ alnit a pe web
iar imaginea din dreapt a reprezint a un dispozitiv cu o densitate de dou a ori
mai mare. Majoritatea dispozitivelor au o densitate de 96dpi, except ,ie f ac^ and
bine^ nteles cele mai noi smartphone-uri s ,i monitoarele profesionale.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 32
Fig. 7. Imagine vizualizat a pe diferite densit at ,i
2.5 Cont ,inut dinamic
Cea mai important a component a a unui website, responsive, sau nu este cont ,inu-
tul acestuia. Cont ,inutul dinamic este o component a relativ nou a a designului
responsiv s ,i este ^ nc a ^ n dezvoltare. Oric^ at de bun s ,i de frumos ar  design-ul
unui website utilizatorii se vor ^ ntoarce pentru cont ,inutul acestuia nu pentru a
admira talentul designerilor sau skillurile programatorilor web.
Utilizatorii nu sunt interesat ,i dac a un website este responsive sau nu, iar de
cele mai multe ori nu s ,tiu la ce se refer a termenul de "responsive web design". Nu
^ s,i pun ^ ntrebarea dac a folosesc dispozitivele corespunz atoare pentru a benecia
de toat a experient ,a pe care un website o poate oferii sau dac a dispozitivul folosit
are dimensiunea potrivit a pentru a putea folosii website-ul cum a fost intent ,ionat
de c atre designeri; iar de cele mai multe ori nu sunt interesat ,i de felul cum arat a
un website-ul.
Tot ce is ,i doresc utilizatorii de la un website este informat ,ia sau funct ,ionalitatea
de care au nevoie. Acesta este principalul obiectiv pe care trebuie s a se concen-
treze tot ,i dezvoltatorii web.
Pentru a avea un website responsiv cont ,inutul trebuie planicat ^ nainte de
orice altceva pentru a avea certitudinea c a cont ,inutul poate  vizualizat pe orice
tip de ecran indiferent de l at ,ime s ,i orientarea acestuia.
Sust ,in atorii fenomenului RWD sunt de acord c a este nevoie de o strategie pentru
gestionarea cont ,inutului care s a aib a utilizatorul ca punct central, dar ^ nc a nu
exist a un consens unanim ^ n ceea ce prives ,te strategia aleas a iar acest lucru este
foarte put ,in probabil s a se ^ nt^ ample.
Design-ul responsiv ^ ncearc a s a se adapteze la dependent ,a utilizatorului de

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 33
cont ,inut la fel cum ^ ncearc a s a se adapteze la toate tehnologiile folosite de acesta
pentru a consuma cont ,inutul web. Pe m asur a ce interact ,iunile dintre utilizatori
s,i aplicat ,ii devin mai put ,in vizibile, responsive web design va putea s a gestioneze
din ce ^ n ce mai multe procese care au loc ^ n spatele aplicat ,iei.
2.5.1 Strategia cont ,inutului
Aceast a stategie a ^ nceput s a primeasc a mai mult a atent ,ie ^ n ultimii ani, ^ n
special dupa aparit ,ia c art ,ii "Content Strategy for the Web " ^ n anul 2009 scris a de
c atre Kristina Halvorson. P^ an a la aparit ,ia acestei c art ,i companiile nu obijnuiau
s a planice astfel de strategii pentru cont ,inutul pus la dispozit ,ie pe website-uri.
Strategia cont ,inutului se refer a la toate elementele care intr a ^ n planicarea s ,i
gestionarea cont ,inutului. Aceasta include textul propriu zis precum s ,i alte forme
de comunicare precum elemente grace, video sau audio. S ,i nu face referire doar
la cont ,inutul website-ului dar s ,i la modul de funct ,ionare al acestuia.
Pentru a realiza acest lucru trebuie s a privim imaginea ^ n ansamblu s ,i s a
r aspundem la ^ ntreb ari precum:
Care este scopul website-ului s ,i ce ar trebuii s a realizeze?
Ce dorim de la utilizatorii care viziteaz a website-ul?
Ce reprezint a o interact ,iune cu utilizatorul de succes?
Cum ajut a website-ul afacerea s ,i scopurile acesteia ?
Cum vor  satisf acute nevoile utilizatorilor?
Dezvoltarea unei strategii pentru cont ,inut necesit a mult a munc a s ,i implicare
dar produsul nal va funct ,iona mult mai bine dac a vom acorda atent ,ie acestor
etape ^ naine de construirea website-ului dec^ at dac a am face-o dup a ce website-ul
este funct ,ional.
Strategia cont ,inutului pentru mobil ?
Deoarece toat a atent ,ia ^ n ultima perioad a s-a ^ ndreptat c atre dispozitivele
mobile, pentru a face cont ,inutul web mai accesibil s ,i-a f acut aparit ,ia s ,i termenul
de "strategia cont ,inutului mobil ". Strategia cont ,inutului este ^ n mod clar foarte
important a ceea ce ridic a ^ ntrebarea: este s ,i strategia cont ,inutului mobil impor-
tant a? Pentru a r aspunde acestei ^ ntreb ari trebuie s a ne amintim c a nu mai exist a
o distinct ,ie clar a ^ ntre dispozitivele mobile s ,i dispozitivele xe.
Dup a cum s-a prezentat p^ an a ^ n momentul de fat , a scopul RWD este de a crea

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 34
website-uri care s a funct ,ioneze pe toate dispozitivele indiferent dac a este un dis-
pozitiv mobil sau nu. Prin urmare nu avem nevoie de o strategie separat a pentru
mobil. De fapt, o strategie a cont ,inutului pentru mobil este de cele mai multe ori
acelas ,i lucru cu strategia cont ,inutului.
^In planicare strategiei cont ,inutului trebuie s a t ,inem cont c a utilizatorii vor
accesa cont ,inutul de pe o varietate de dispozitive s ,i intr-o varietate de contexte
s,i s a dezvolt am o strategie care s a nu omit a nimic.
Realizarea de cont ,inut potrivit pentru utilizatorii de dispozitive mobile dar s ,i
pentru utilizatorii de calculatoare personale aduce un set nou de provoc ari care
trebuiesc dep as ,ite pentru a oferi utilizatorilor cea mai bun a experient , a posibil a.
2.5.2 Gestionarea cont ,inutului
^Inc a de la ^ nceputul procesul de creare al unui website probabil deja exist a
foarte mult potent ,ial cont ,inut: e cont ,inutul de pe un site deja existent, e idei
despre ceea ce ar trebuii s a cont ,in a website-ul. Primul lucru care trebuie f acut
este planicat a o strategie pentru gestionarea cont ,inutului.
Foloses ,te doar ceea ce ai nevoie
De obicei cantitatea de cont ,inut necesar a pentru a ^ ndeplini un scop este mult
mai mic a dec^ at ne-am as ,tepta. Trebuie s a ne ^ ndep art am de ideea c a trebuie s a
putem tot cont ,inutul pe website, doar pentru c a cineva ar putea avea nevoie de o
anumit a informat ,ie. Chiar dac a costurile pentru stocarea online sunt foarte mici
nu trebuie s a exager am cu cantitatea de cont ,inut pentru c a acest lucru ar putea
avea un impact negativ asupra utilizatorului.
Un impact negativ adus de volumul prea mare de cont ,inut de pe website
este derutarea utilizatorului, acesta petrece mai mult timp ^ ncerc^ and s a g aseasc a
informat ,ia c autat a.
Paginile inutile de pe website nu fac dec^ at s a ^ ngr am adeasc a navigat ,ia s ,i s a
^ ncurce c aut arile. Cont ,inutul inutil pe o pagin a fort ,eaz a utilizatorul s a parcurg a
pagina s ,i mai mult. Cu c^ at exist a mai multe lucruri inutile cu at^ at este mai
greu utilizatorului s a g aseasc a informat ,ia c autat a s ,i cu at^ at mai probabil este s a
renunt ,e la c autare ^ nainte s a g asesc a informat ,ia c autat a.
Prea mult cont ,inut pe un website aduce un impact negativ s ,i asupra det ,in atoru-
lui website-ului respectiv deoarece acesta trebuie s a dedice resurse suplimentare
pentru a gestiona tot cont ,inutul, organizarea s ,i reorganizarea acestuia, ment ,inerea
acestuia actualizat s ,i vericarea constant a a link-urilor. Cu c^ at exist a mai mult
cont ,inut cu c^ at at^ at este mai probabil ca acesta s a e neactualizat sau incorect.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 35
Nu trebuie doar s a ad aug am cont ,inut s ,i s a il l as am negestionat, acesta trebuie
vericat s ,i actualizat c^ at mai des cu putint , a.
Cel mai bun moment pentru gestionarea cont ,inutului este ^ nainte de a ^ ncepe
procesul de design. Procesul de design va  mai us ,or dac a website-ul va avea
mai put ,in cont ,inut s ,i prin urmare va trebui depus a mai put ,in a munc a ^ n procesul
implementare al website-ului.
Selectarea cont ,inutului
C^ and trebuie s a determin am ce cont ,inut trebuie s a p astr am trebuie s a ne
g^ andim la interesele companiei dar s ,i la nevoile utilizatorilor.
Informat ,iile care vor  ^ mp art ,ite cu utilizatorii despre realiz arile companiei
trebuiesc formatate pentru publicul general: trebuie folosit un limbaj simplu s ,i
us,or de ^ nt ,eles s ,i trebuie evitat limbajul din mediul afacerilor.
Trebuie sa avem ^ n vedere m arimea ec arui bloc de text. Dac a pagina "About
us" cont ,ine 1000 de cuvinte, acea pagin a spune prea multe. Aceast a pagin a nu
trebuie s a prezinte toate evenimentele din companie sau s a cont ,in a numele tutu-
ror angajat ,ilor. Cei mai mult ,i utilizatori care vor vizita pagina respectiv a doresc
s a a
e foarte succint ce reprezint a compania. Dac a aceast a informat ,ie nu este
transmis a ^ n primele propozit ,ii este foarte probabil ca utilizatorii s a nu mai par-
curg a textul pentru a c auta r aspunsul.
C autat ,i s a reducet ,i cont ,inutul redundant. Chiar dac a folosit ,i un sistem CMS
(Content Management System) iar acesta ofer a posibilitate de plasa cont ,inut ^ n
locat ,ii multiple evitat ,i acest lucru. Nu doar c a ocup a spat ,iu pe website dar poate
induce utilizatorul ^ n eroare. Acest lucru poate induce ^ n eroare chiar s ,i motoarele
de c autare ceea ce duce la sc aderea tracului pe website.
2.5.3 Promovarea cont ,inutului
Dup a ce am stabilit cont ,inutul website-ului s ,i unde va  plasat trebuie dease-
menea s a lu am ^ n considerare cum va ar ata.
Cum citesc utilizatorii
Utilizatorii vor parcurge website-ul pentru a g asi informat ,ia c autat a. Trebuie s a
ne asigur am c a nu intervine nimic ^ n acest proces.
Scanarea

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 36
Utilizatorii scaneaz a tot website-ul atunci c^ and citesc o pagin a. Cont ,inutul
unui website nu este la fel de atr ag ator pentru tot ,i utilizatorii cum este pen-
tru det ,in atorul website-ului. Utilizatorii citesc pe buc at ,ele. Vor parcurge pa-
gina iar atent ,ia lor se va ^ ndrepta c atre link-uri, titluri, imagini s ,i fragmente de
text. Exist a milioane de pagini web care concureaz a pentru atent ,ia utilizatorului,
aceast a atent ,ie trebuie valoricat a deci cont ,inutul trebuie prezentat ^ ntr-un mod
c^ at mai us ,or de ^ nt ,eles s ,i c^ at mai direct.
Piramida inversat a
Una dintre cele mai bune metode pe care le putem folosii este o tehnic a din
jurnalism numit a tehnica piramidei inversate. Pe vremurile c^ and ziarele erau pu-
blicate numai pe h^ artie, nu s ,i pe website-uri, editorii s-au confruntat cu problema
planic arii unui anumit spat ,iu pe care trebuiau s a-l umple cu text s ,i imagini ^ n
ecare zi. Trebuiau s a produ a x cantitatea de cont ,inut necesar a pentru a umple
spat ,iul respectiv, nu mai mult, nu mai put ,in. Acest lucru era aproape imposibil
de planicat dinainte, deoarece evenimentele care urmau s a ajung a ^ n pres a nu
se ^ nt^ amplase ^ nc a.
Deci c^ and reporterii scriau articole pentru ziar, aveau un num ar t ,int a de cuvinte
pe care trebuiau s a-l ating a, dar deasemenea au ^ nt ,eles c a dac a ar ap area eveni-
mente mai importante, articolele lor vor  scurtate pentru a face spat ,iu pentru
articolele importante.
Pentru a face acest lucru mai us ,or, reporterii puneau cele mai importante
informat ,ii din s ,tirile lor ^ n primele paragrafe iar urm atoarele paragrafe le umpleau
cu informat ,ii mai put ,in importante.
^In felul acesta dac a editodul avea nevoie s a scurteze un articol pentru a ^ nc apea
^ ntr-un spat ,iu mai mic, oricare dintre ultimile paragrafe puteau  ^ nl aturate f ar a
a se pierde esent ,ialul.
Figura 8 prezint a modul de funct ,ionare a acestei tehnici.
Fig. 8. Tehnica piramidei inversate

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 37
Putem folosii aceeas ,i tehnic a s ,i c^ and scriem cont ,inut pentru web, deoarece
este foarte posibil ca utilizatorii s a procedeze precum editorii s ,i s a e interesat ,i
doar de primele paragrafe s ,i s a treac a cu vederea cont ,inutul de la sf^ ars ,itul arti-
colului. Asigurat ,i-v a c a informat ,iile mai importante sunt primele iar dup a aceea
continuat ,i cu informat ,iile mai put ,in importante pe care utilizatorul ar putea s a
nu le ^ nteleag a.
Gruparea ^ n sect ,iuni
Dac a pagina web cont ,ine mai mult de cinci paragrafe atunci cu sigurant , a poate
benecia de ^ mp art ,irea cont ,inutului ^ n sect ,iuni.
Pentru utilizatori beneciile folosii sect ,iunilor sunt:
Utilizatorii pot^ nt ,elege mai us ,or structura paginii s ,i is ,i pot forma o idee mai
bun a despre cont ,inutul de pe pagin a, chiar ^ nainte de a ^ ncepe s a citeasc a
Pot merge direct la subiectele de care sunt interesat ,i
Utilizatorii care folosesc thenologii ajut atoare pot naviga prin cont ,inut f ar a
s a-l citeasc a ^ n totalitate
Utilizatorii se pot orient a mai us ,or
Beneciile det ,in atorului paginii web:
Evaluarea f acut a de motoarele de c autare se va^ mbun at at ,ii prin prezentarea
cont ,inutului paginii ^ ntr-un mod structurt
Creatorii de cont ,inut vor  capabili s a produc a cont ,inut mai bun pentru
web
Titlurile sect ,iunilor trebuie s a e c^ at mai scurte cu putint , a dar ^ n acelas ,i timp
s a transmit a s ,i mesajul dorit. Titlurile alese trebuie s a descrie cont ,inutul care
urmeaz a a  prezentat.
^In timp ce scaneaz a pagina, utilizatorii sunt tentat ,i s a consume cont ,itut ^ n
buc at ,i mici. Un bloc de text dens va ^ ndep arta utilizatorul. Paragrafele trebuiesc
s a e scurte, nu mai lungi de 100 de cuvinte.
Folosit ,i bullet lists de c^ ate ori este posibil s ,i numai dac a o list a are sens. Cont ,inutul
prezentat ^ n liste este mult mai us ,or de citit s ,i de asimilat comparativ cu acelas ,i
cont ,inut structurat sub form a de paragraf.

CAPITOLUL 2. RESPONSIVE WEB-DESIGN 38
2.6 Concluzii
P^ an a s a e introdus termenul de responsive web design, website-urile aveau
dimensiuni xe, ceea ce ^ nseamn a c a design-ul unui website ar ata la fel indiferent
de dimensiunea dispozitivul care ^ l accesa. Odat a cu aparit ,ia smartphone-urilor
acest lucru nu a mai fost posibil deoarece website-urile erau as ,ate av^ and di-
mensiuni reduse fapt care determina utilizatorul s a apropie textul pentru a putea
citi.
La scurt a vreme au ap arut variantele mobile a website-urilor s ,i multe compa-
nii au realizat variante pentru mobil special. Aceste website-uri mobile cont ,ineau
doar o parte din informat ,ia prezentat a pe website-ul disponibil pentru calcula-
toarele personale.
Cu cres ,terea num arului de dispozitive mobile, designerii au realizat repede c a
este impractic a, dac a nu imposibil a, sarcina de a crea c^ ate o variant a de website
pentru ecare dispozitiv mobil. Conceptul de design responsiv a fost introdus
ca o modalitate de a crea website-uri care ar putea s a react ,ioneze la m arimea
ecranului unui dispozitiv s ,i s a as ,eze cont ,inutul website-ului ^ ntr-un mod potri-
vit pentru dimensiunea ecranului respectiv.
Design-ul responsiv este format din dou a mari componente:
exibilitatea, care
^ nseamn a c a dimensiunile trebuiesc s a e exprimate ^ n unit at ,i relative precum
procentele pentru a putea r aspunde la dimensiunea ecranelor, s ,i interog arile me-
dia, care permite folosirea CSS pentru a schimba designul unui website ^ n funct ,ie
de dimensiunea ecranului pe care era vizualizat.
Design-ul responsiv ne permite s a realiz am un design potrivit pentru orice di-
mensiune de ecran folosind doar o singur a variant a a website-ului.
P^ an a de cur^ and cont ,inutul unui website a fost mereu l asat pe locul doi ^ n
favoarea designului, dar ^ n ultimii ani strategiile bazate pe cont ,inut au c^ as ,tigat
important , a.
^Incep^ and cu o strategie bazat a pe cont ,inut ^ naintea ^ nceperii design-ului va
conduce la crearea unui website care s a ^ mplineasc a at^ at scopurile det ,in atorului
dar s ,i pe cele ale utilizatorului.
Cont ,inutul trebuie s a e concis s ,i scris folosind un limbaj simplist pentru a
 us ,or de ^ nt ,eles de c atre utilizatori. Utilizatorii citesc paginile web scan^ and
cont ,inutul iar pentru a ^ ncuraja acest lucru cont ,inutul trebuie ^ mp art ,it ^ n pa-
ragrafe cu titluri sugestive care s a descrie cont ,inutul ce va urma. Cont ,inutul
trebuie actualizat cu regularitate s ,i vericat s a nu cont ,in a gres ,eli sau informat ,ii
incorecte.

Capitolul 3
Tehnologii folosite
^In acest capitol vom ^ ncerca s a prezent am toate tehnologiile care ne-au condus
p^ an a ^ n momentul de fat , a s ,i au contribuit la lumea pe care o vedem ast azi.
C^ and discut am despre tehnologiile care alc atuiesc internetul ^ n ziua de ast azi
vorbim un num ar impresionant de limbaje de programare dar nu trebuie s a uit am
c a p arintele fondator al internetului este limbajul HTML.
3.1 Limbajul HTML pentru site-uri responsive
Multe din elementele HTML se p astreaz a atunci c^ and se trece de la o versiune
la alta, acest lucru ajut a la ment ,inere unei ordini pe web. Limbajul HTML este
un limbaj de marcare folosit pentru crearea paginilor web, a fost inventat de c atre
Tim Berners-Leeeste ^ n anul 1990. Limbajul HTML este alc atuit din elemente ,
aceste elemente sunt componentele folosite pentru a descrie cont ,inutul unei pagini
web
Paginile HTML sunt formate din etichete sau tag-uri s ,i au extensia .html sau
.htm pe care browserul le cites ,te s ,i le as ,eaz a sub o form a us ,or de ^ nteles pentru
utilizator. De obicei aceste taguri vin ^ n perechi, adic a dac a am deschis un tag
trebuie s a inchidem acel tag cu perechea sa. Ele sunt reprezentate ^ ntre semnele
mai mic s ,i mai mare iar tag-ul de ^ nchidere prezint a semnul "/" ^ n plus:
Exemplu: <p>Acesta este un paragraf. </p >. Primul simbol reprezint a tag-ul
paragraf deshis iar ultimul reprezint a tag-ul paragraf ^ nchis.
Am spus "de obicei" pentru c a sunt s ,i c^ ateva except ,ii. Orice pagin a web este
alc atuit a din trei taguri de o important , a major a, iar acestea sunt:
tagul html
tagul head
tagul body
39

CAPITOLUL 3. TEHNOLOGII FOLOSITE 40
3.1.1 Versiuni
Standardele HTML se schimb a s ,i evolueaz a odat a cu evolut ,ia tehnologiei s ,i
a internetului. Pentru a oferi suport pentru toate aceste noi tehnologi limbajul
HTML ofer a versiuni noi odat a la c^ at ,iva ani.
^In ecare versiune nou a de HTML vor  ad augate elemente noi pentru a descrie
cont ,inutul nou iar unele elemente vor avea poate ^ nteles un pic diferit. Majorita-
tea browserelor moderne vor ^ ntelege aceste noi schimb ari dar cele mai vechi nu
vor putea ^ ntelege elementele noi prezente ^ n ultima versiune de HTML.
Schimb arile pe care le aduc noile versiuni nu sunt implementate direct ci treptat
pe parcursul a mai multor ani. De exemplu lucrul pentru ultima variant a de
HTML, HTML5 a ^ nceput spre sf^ ars ,itul anului 2004 iar specicat ,iile ociale nici
^ n prezent nu sunt terminate.
Evolut ,ia acestui limbaj nu a fost spectaculoas a, de la 18 tag-uri ^ n 1990 la 97
de tag-uri ^ n prezent.
^In continuare vom lista toate variantele de HTML:
HTML 2.0 – noiembrie 1995
HTML 3.2 – ianuare 1997
HTML 4.1 – decembrie 1997
HTML 5.0 – septembrie 2012
Este important de notat c a HTML 5 nu este^ nc a un standard dar aproape toate
browserele moderne ofer a suport pentru tag-urile introduse de c atre HTML5.
HTML5 reprezint a cel mai important update din ultimii ani ^ n domeniul teh-
nologiilor web. Aduce foarte multe schimb ari ^ n ceea ce prives ,te modul de scriere
al paginilor web. Aduce ^ nc a 40 de tag-uri s ,i elemente noi ^ n limbajul HTML.
Aceste elemente variaz a de la elemente care ne denesc cont ,inutul s ,i ^ i d a mai
mult ^ nt ,eles semantic p^ an a la elemente noi pentru formulare, plus c^ ateva tag-uri
speciale precum tag-ul video sau tag-ul canvas care ne deschide o us , a ^ n spatele
c areia g asim foarte multe posibilit at ,i.
Nu am precizat nimic despre atribute s ,i am f acut lucrul acesta intent ,ionat. Acum
mult ,i ani se obijnuia ca ^ n s ,ierul .html s a se foloseasc a foarte multe atribute pen-
tru a modica modul de as ,are s ,i stilurile diferselor elemente de pe pagina web.
Acest lucre este foarte gres ,it s ,i este privit ca o pract ,ic a foarte rea. Folosi-
rea atributelor pentru a schimba cont ,inutul trebuie evitat a cu orice pret ,, sierul
html trebuie s a cont ,in a doar elemente de semantic a. Bine^ nt ,eles ^ nc a mai exist a

CAPITOLUL 3. TEHNOLOGII FOLOSITE 41
website-uri care s a foloseasc a atributele pentru formatarea vizual a. Din nefericire
aceste lucruri sunt ^ nv at ,ate ^ n s ,coli de c atre profesorii iar ^ n felul acesta se pot
in
uent ,a generat ,ii ^ ntregi.
Fisierul .html trebuie s a cont ,in a doar elemente structurale s ,i cont ,inutul care ur-
meaz a a  publicat.
C^ and cineva vorbes ,te despre un element HTML5 de cele mai multe ori se
refer a la un element care este nou ^ n HTML5 (care nu f acea parte din HTML
4). Dac a dorim s a folosim un element HTML5 nou trebuie s a ne asigur am c a
browserele vizate suport a elementele HTML5 noi, s ,i chiar daca r aspunsul este da
trebuie s a ne g^ andim s ,i la utilizatorii care au browsere mai vechi instalate s ,i care
cu sigurant , a nu suport a cele mai noi elemente introduse de ultima versiune de
HTML.
3.1.2 Viewport
Elementul meta viewport este unul din elementele care nu a fost foarte folosit
^ n trecut dar este un element cheie ^ n a realiza website-uri responsive.
Trebuie s a reamintim: "Viewport" este un atribut pentru elementul meta. Fi-
ecare tip de metadata pe care le oferim trebuie s a e ^ n elemente meta separate,
nu putem combina toate atributele intr-un singur element.
Viewport-ul este zona de ecranului unde vizualiz am cont ,inutul. Pentru un
calculator personal, dac a deschide un browser s ,i sc adem zona de meniu, toolbar-
urile, scrollbars s ,i orice alt element care face parte din fereastra browserului ^ n
sine, r am^ anem cu zona la care ne referim prin viewport (g. 9).
Important este de ret ,inut c a pe dispozitivele mobile l at ,imea viewport-ului este
aceeas ,i cu l at ,imea ecranului.

CAPITOLUL 3. TEHNOLOGII FOLOSITE 42
Fig. 9.Interiorul zonei galbene reprezint a viewport-ul
Atributul meta viewport ofer a instruct ,iuni browserului cu privire la ce m arime
s a as ,eze pagina web s ,i dac a ^ ncape ^ n viewport. Paginile web far a set arile
viewport sunt as ,ate la m arimea mcea mai mare pe calculatoarele personale, as ,a
cum suntem obijnuit ,i s a vedem paginile web.
Browserul unui dispozitiv mobil va as ,a o pagin a web f ar a opt ,iunea viewport,
identic ca pe un calculator personal dar ^ l va mics ,ora pentru a ^ nc apea pe ecra-
nul telefonului. Dac a exist a interog ari media bazate pe l at ,imea viewport-ului,
acestea nu vor funct ,iona, deoarece browserul se va comporta ca ^ n cazul ^ n care
viewport-ul este de m arimea desktopului.
Cele mai multe browsere de pe telefoanele mobile vor as ,a o pagin a web folo-
sind un viewport cu o l at ,ime de 980px. Imaginat ,i-v a c a avet ,i un monitor desktop
cu o l at ,ime de 980px, s ,i ce vet ,i vedea pe ecran va  mics ,orat pentru a ^ nc apea
pe ecranul unui telefon. Dac a pagina web este mai mare de 980px, aceasta va
mics ,orat a s ,i mai mult pentru a ^ nc apea pe ecranul telefonului.
Pentru un site responsive nu dorim ca browserul mobil s a as ,eze pagina ca
s,i cum ar ap area pe un monitor de 980px; vrem s a as ,eze pagina la m arimea
ecranului dispozitivului mobil (care bine^ nt ,eles poate  orice m arime), pentru c a
am proiectat pagina s a e as ,at a corect pe ecranul mic al dispozitivului mobil
f ar a a cres ,te zoom-ul.
Width
Atributul width spune browsrului cum s a scaleze pagina web. Pentru un web-
site responsive, valoarea: " width =device-width " spune browserului s a as ,eze pa-
gina la m arimea init ,ial a a paginii, indiferent care este aceasta. Browserul as ,eaz a

CAPITOLUL 3. TEHNOLOGII FOLOSITE 43
pagina astfel^ nc^ at l at ,imea viewportului s a aib a aceeas ,i dimensiune cu l at ,imea dis-
pozitivului (100%).
Dac a l at ,imea dispozitivului nu este specicat a ^ n atributul viewport, dispozi-
tivul va folosii propria setare pentru viewport pentru a as ,a pagina. De exemplu
l at ,imea default este de 980px.
Initial-scale
Atributu initial-scale ^ ns ,tiint ,eaz a browserul de cum s a scaleze pagina web c^ and
este ^ nc arcat a pentru prima data pe ecran (zoom factor).
Folosind valoarea initial-scale=1 ^ nseamn a c a pagina va  as ,at a la m arimea
determinat a de atributul "width", s ,i nivelul zoom-ului nu va cres ,te sau va sc adea.
Dac a folosim un num ar mai mare sau mai mic ca 1, atunci pagina va avea
nivelul de zoom crescut cu valoarea dat a. De exemplu, pentru initial-scale=2 ar
^ nsemna c a pagina web ar  m arit a de dou a ori mai mult dec^ at m arimea actual a,
s,i prin urmare am vedea doar jum atate din pagin a pe ecran.
User-scalable Valoarea initial-scale determin a doar m arimea paginii web c^ and
este inc arcat a pentru prima oar a pe ecran. Trebuie ret ,inut c a dispozitivele mobile
dau utilizatorilor abilitatea de a cres ,te s ,i de a sc adea nivelul zoom-ului.
Exist a o valoare pentru viewport pentru a opri aceast a abilitate a utilizatoru-
lui, aceasta este user-scale=no . Totus ,i pentru cele mai multe website-uri trebuie
evitat a folosirea acestei valori, utilizatorii trebuiesc l asat ,i s a fac a ce doresc. Cu
toate c a un website responsiv va  as ,at la dimensiunea corect a indiferent de di-
mensiunea ecranului, pot ap area circumstant ,e c^ and utilizatorul ar dorii m areasc a.
Daca nu includem aceast a valoare, defaultul este "yes", lucru care permite utili-
zatorilor s a creasc a nivelul zoom-ului.
Maxium-scale Putem deasemenea s a folosim atributul width pentru a seta
valoarea pentru maximum-scale pentru o pagin a. De exemplu, maximum-scale=2,
ar ^ nsemna c a utilizatorul ar putea s a m areasc a pagina doar de dou a ori mai mult
fat , a de m arimea init ,ial a.
Set^ and maximum-scale=1 am obt ,ine acelas ,i rezultat dac a am folosii user-
scalable=1.

CAPITOLUL 3. TEHNOLOGII FOLOSITE 44
3.1.3 Semantica codului
O modalitate de a ne asigura c a avem un website care funct ,ioneaz a bine s ,i are
o vitez a bun a este de a scrie cod c^ at mai simplu cu putint , a. Acest lucru lucru va
ajuta programatorii care vor lucra la proiect s a ^ nteleag a codul mai bine dar s ,i
persoanele cu mai put ,in a experient , a ^ n domeniu.
Separarea cont ,inutului de prezentare.
HTML si CSS sunt limbaje separate, care au scopuri diferite. HTML este
folosit pentru a as ,a cont ,inutul s ,i s a furnizeze informat ,ii cu privire la cont ,inut
iar CSS este folosit pentru a ^ mbun at at ,ii aspectul vizual al website-ului, cum ar
alegerea unui alt font, dimensiunea fontului s ,i a imaginilor, schimbarea culorilor
precum s ,i multe altele.
Scrierea de cod semantic corect nu ajut a doar dezvoltatorii ci s ,i persoanele
cu dizabilit at ,i. Dac a un website este corect din punct de vedere semantic aceste
persoane vor putea citi s ,i naviga foarte us ,or prin cont ,inutul website-ului. Dease-
menea, unii dintre cei mai important ,i vizitatorii ai unui website sunt motoarele
de c autare iar dac a site-ul nu este optimizat poate duce la sc aderea num arului de
vizitatori.
Folosind limbajul HTML doar pentru a structura cont ,inutul ajut a aceste mo-
toare pentru a ^ nt ,elege mai bine cont ,inutul website-ului dumneavoastr a.
Comentariile.
Comentariile sunt o parte important a din scrierea de cod HTML s ,i CSS. Co-
mentariile sunt strict pentru dezvoltatorii s ,i programatorii web, motoarele de
c autare s ,i utilizatorii nu pot vedea comentariile.
Exemplu de comentarii in HTML:
<!– this is an HTML comment –>
<!–
this
is another comment,
on multiple lines
–>
Ca ecare lucru, folosirea ^ n exces este descurajat a. Prea multe comentarii
^ ncar a excesiv pagina s ,i descurajeaz a persoanele care privesc codul surs a.
3.2 CSS
Cascading Style Sheets sau CSS este un standard pentru formatarea elemen-
telor unui document HTML. Stilurile se pot atas ,a elementelor HTML prin inter-
mediul unor s ,iere externe sau ^ n cadrul documentului, prin elementul < style > .

CAPITOLUL 3. TEHNOLOGII FOLOSITE 45
Fisierele externe se pot atas ,a de sierul HTML prin tag-ul link^ n felul urm ator:
< linkrel ="stylesheet" type="text/css" href="calea c atre s ,ierul css aici." >.
HTML5 spre deosebire de XHTML1.0 ne permite s a folosim anumite scurt aturi,
de exemplu c^ and folosim tag-ul link pentru a atas ,a s ,iere motorul browserului
s,tie deja c a s ,ierul pe care i-l vom da va  de tipul text/css iar relat ,ia va  de
stylesheet. Prin urmare tagul link r am^ ane doar la < linkhref ="calea c atre
s,ierul css aici." >
CSS este destinat^ n primul r^ and pentru a permite separarea cont ,inutului docu-
mentului de prezentarea de documente, inclusiv elemente cum ar  aspectul, culo-
rile, s ,i fonturile. Aceast a separare poate ^ mbun at at ,i accesibilitatea cont ,inutului,
ofer a mai mult a
exibilitate s ,i control ^ n specicarea caracteristicilor de prezen-
tare, permite mai multor pagini HTML s a foloseasc a acelasi s ,ier .css. CSS ne
d a posibil a separarea instruct ,iunilor de prezentare a cont ,inutului ^ ntr-un s ,ier.
Aceast a separare a format arii de cont ,inut ne d a posibilitatea s a prezent am
acels ,i cont ,inut ^ n alte situat ,ii.
Mos ,tenirea este o component a vital a a standardului CSS s ,i se bazeaz a pe
relat ,ia tat a-copil pentru a funct ,iona. Mos ,tenirea este mecanismul prin care pro-
priet at ,ile nu sunt aplicate doar primilor membri ci tuturor descendent ,ilor.
Elementle descendente pot mos ,tenii propriet ati css s ,i valori de la orice ele-
ment str amos ,care ^ i ^ ncapsuleaz a. ^In general, elementele descendente mos ,tenesc
propriet at ,ile legate de text dar propriet at ,ile legate ce modulul cutiei nu sunt
mos ,tenite.
Propriet at ,ile care pot  mos ,tenite sunt: color, font, letter-spacing, line-height,
list-style, text-align, text-indent, text-transform, visibility, white-space and word-
spacing. Properties that cannot be inherited are background, border, display,

oat and clear, height, and width, margin, min- and max-height and -width, ou-
tline, over
ow, padding, position, text-decoration, vertical-align s ,i z-index.
Mos ,tenirea ^ mpiedic a anumite propriet at ,i s a e declarate de mai multe ori
^ ntr-un document c^ and posibilitatea designer-ilor s a scrie mai put ,in cod CSS s ,i
cres ,te viteza de ^ nc arcare a paginilor web.
Cel mai important concept din CSS^ l reprezint a the box model – modelul cutiei.
Acest concept determin a cum sunt as ,ate elementele pe pagina web, reprezent^ and
ecare element sub forma unei cutii dreptunchiulare. Fiecare cutie are o ^ n alt ,ime,
o l at ,ime s ,i poate avea sau nu border, margin sau padding.
Toate elementele ^ ncep cu o valoare default dar evident aceste pot  schimbate
folosind diverse valori. Pentru a p astra designul responsiv aceste valori trebuiesc
exprimate ^ n unit at ,i relative precum unitatea em. Proprietatea box-sizing este

CAPITOLUL 3. TEHNOLOGII FOLOSITE 46
cea care ne permite s a schimb am modul ^ n care browserul as ,eaz a marginile s ,i
borders. Pozitionarea ne permite s a determin am unde un element va  as ,at pe
pagin a.
CSS poate  aplicat unei pagini printr-un s ,ier separat e prin cod scris ^ n
interiorul paginii respective totus ,i urm^ and bunele practici codul CSS trebuie s a
e scris ^ ntr-un s ,ier separat.
3.2.1 Versiuni ale CSS
Ca s ,i ^ n cazul HTML avem diferite versiuni de CSS. Prima versiune de CSS a
fost lansat a ^ n 1996 la doar c^ at ,iva ani dup a ce HTML a fost folosit pentru a crea
paginile web. Cea mai recent a versiun de CSS este CSS3.
Fiecare versiune de CSS este format a din toate propriet at ,ile care pot  stilizate
folosind CSS. Propriet at ,ile sunt calit at ,ile elementelor HTML care sunt afectate
de stiluri. Unele dintre aceste calit at ,i includ: culoare, fontul, m arimea elemente-
lor s ,i locat ,ia elementelor pe pagin a.
Ultima versiune de CSS ne-a oferit c^ ateva noi propriet at ,i printre care cea mai
important a ind interog arile media, care reprezint a componenta esent ,ial a pentru
design-ul responsiv. Cu toate c a unele din propriet at ,ile CSS3 sunt ^ nc a ^ n faza
de testare nu ^ n semamn a c a nu le putem include ^ n proiectele noastre folosind
prexe pentru a a oferii suport celor mai populare browsere.
La fel ca ^ n cazul HTML trebuie s a t ,inem cont de faptul c a nu toate browserele
au abilitatea de a as ,a toate propriet at ,ile din ultima versiune de CSS, s ,i tot ca ^ n
cazul HTML nu toate browserele vor as ,a cont ,inutul ^ n acelas ,i fel. Trebuie s a m
cons ,tient ,i de diferent ,e s ,i s a ne amintim s a test am paginile web ^ n c^ at mai multe
browsere s ,i pe diverse platforme pentru a ne asigura c a arat a s ,i funct ,ioneaz a cum
ne-am dorit.
3.2.2 Media Queries
Interog arile media sunt cele care fac designul responsiv, responsiv pentru toate
dispozitivele pe care website-urile sunt vizualizate. P^ an a ^ n momentul de fat , a
toate declarat ,iile CSS se aplicau paginii web f ar a s a t ,in a cont de dimnensiune
ecranului pe care este vizualizat a.
Interog arile media ne permite s a aplic am diferite stiluri bazate pe calitatea
dispozitivelor pe care paginile web sunt vizualizate.

CAPITOLUL 3. TEHNOLOGII FOLOSITE 47
Din cauz a c a interog arile media pot realiza lucruri foarte complicate dar foarte
elegant exist a o impresie gres ,it a c a ^ nv at ,area lor va  foarte grea. Foarte depart
de adev ar.
^In realitate interog arile media sunt foarte simple. Vom ^ ncepe cu o ^ ntrebare
pentru browser:
"Este ecranul mai mare de 40 ems ?"
Apoi vom scrie codul CSS care dorim s a se execute.
Dac a r aspunsul la ^ ntrebarea noastr a este "Da" sau "True", atunci browserul va
executa codul pe care l-am scris.
Dac a r aspunsul este nu atunci browserul va ignora codul scris s ,i va trece mai
departe. ^In principu este ca o declarat ,ie if/else.
Cu toate c a interog arile media au existat ^ nc a din varianta CSS2 nu se puteau
face interog ari bazate pe propriet at ,ile unui dispozitiv precum viewport-ul, iar ^ n
aceast a situat ,ie ne ajut a CSS3. Acesta este motivul pentru care responsive web
design nu a existat p^ an a ^ n anul 2010 { pur s ,i simplu nu era posibil.
Un exemplu de o interogare media simpl a:
body{
background-color: green;
}
@media only screen and (min-width: 40em){
body{
background-color: blue;
}
}
Prima linie de CSS seteaz a culoarea de fundal a ^ ntregului website la verde.
A doua linie de CSS spune c a dac a l at ,imea minim a a viewport-ului este de minim
40 em, atunci culoarea de fundal a website-ului s a se schimbe la albastru.
C^ ateva exemple de interog ari media utilizate frecvent:
Coloane – ^ ncepem cu o singur a coloan a pentru dispozitivele cu dimensiuni
mici ale ecranului
Natigatia – as , am o navigat ,ie ascuns a c^ and dimensiunea ecranului este
mic a, s ,i un meniu de navigat ,ie obijnuit pentru ecranele mai mari
Tipograe – schimb am dimensiunea textului^ n funct ,ie de dimensiunea viewport-
ului
Imagini – schimb am dimensiunea imaginilor ^ n funct ,ie de dizpozitivul pe
care este vizualizat website-ul

CAPITOLUL 3. TEHNOLOGII FOLOSITE 48
3.2.3 Structura interog arilor media
Cel mai comun mod de folosire al interog arilor media este includerea lor direct
^ n s ,ierul CSS al aturi de celelalte stiluri. ^In continuare vom analiza elementele
care compun o interogare media pentru a ^ nt ,elege mai bine conceptul.
Exemplu de interogare media:
@media only screen and (min-width: 40em){
body{
background-color: blue;
}
}
@media
Toate interog arile media care sunt plasate ^ n interiorul unei pagini css vor
^ ncepe cu media. Acest lucru denes ,te ce sunt. Dup a cuv^ antul cheie @media
poate urma una sau mai multe expresii care reprezint a ^ ntreb arile adresate brow-
serului care ^ n nal vor  evaluate la True sau False. C^ and cre am o interogare
media aceasta trebuie ^ ntotdeauna s a ^ nceap a cu cuv^ antul cheie @media.
@media only screen
Cu toate c a expresia este format a vizual doar dintr-un singur cuv^ ant acesta
reprezint a o expresie care se evalueaz a r aspunz^ and la ^ ntrebarea: "Este tipul
dispozitivului media screen(ecran)"?
^In exemplul prezentat mai sus putem observa c a ^ naintea cuv^ antului screen se mai
g ases ,te un cuv^ ant – only. Acesta p ac ales ,te un pic browserul. Unele browser mai
vechi ofer a suport doar pentru interog arile din varianta CSS2, nu s ,i pe cele din
CSS3. Acestea ^ nteleg interog arile media dar s ,i nu cuvintele cheie precum min-
width sau max-width, etc. De obicei c^ and browserul nu ^ nt ,elege un bloc de CSS
pur s ,i simplu ^ l ignor a. Totus ,i, cand vorbim despre interog ari media nu se mai
comport a ^ n felul acesta. Deci tot vor citi interogarea media dar nu va ^ nt ,elege
expresia min-width:40em . Pentru un browser mai vechi interogarea noastr a se va
transforma ^ n:
@media screen and (){
body{
background-color: blue;
}
}

CAPITOLUL 3. TEHNOLOGII FOLOSITE 49
Rezultatul acestei interog ari va  True iar browserul va aplica stilurile precizate
indiferent de dispozitiv.
Pentru a evita acest lucru este necesar a ad augarea cuv^ antului cheie only care
nu schimb a ^ n esent , a cu nimic interogarea, dar c^ and un browser care ^ nt ,elege
doar CSS2 va ajunge la cuv^ antul only se va opri s ,i va s ari peste acest bloc de
CSS pentru c a nu ^ nt ,elege cuv^ antul only.
Folosind tipul media screen ne vom referii la toate dispozitivele care prezint a
cont ,inutul pe ecran (desktop pc, tablet a, telefon) iar c^ and folosim cuv^ antul cheie
print ne referim doar la imprimante.
Mai sunt ^ nc a c^ ateva tipuri media precum braille, projection, speech dar sunt
mult mai put ,in folosite as ,a c a nu le vom prezenta ^ n aceast a lucrare. Dac a dorit ,i
s a a
at ,i mai multe despre acestea putet ,i vizita:
http://www.w3.org/TR/CSS2/media.html .
@media only screen and
Trebuie s a folosim cuv^ antul anddeoarece avem mai multe expresii de evaluat,
screen a fost prima expresie iar acum vom ad auga ^ nc a o expresie pentru a
evaluat a.
Ca s ,i ^ n programare, ambele expresii trebuie s a e adev arate pentru ca interoga-
rea s a returneze True s ,i s a aplice stilurile precizate. Alte cuvinte cheie folosite
pot  orsaunot, putem avea chiar expresii multiple dar acestul lucru nu este
foarte folosit doarece complic a foarte mult interogarea din punctul utilizatorului.
@media only screen and (min-width: 40em)
A doua expresie este " min-weidth: 40em ". Observat ,i c a extresia este ^ ntre pa-
ranteze, ecare expresie trebuie pus a ^ ntre paranteze singura except ,ie ind atunci
c^ and este doar o singur a expresie precum screen sauprint .
Dac a l at ,imea viewport-ului este mai mic a dec^ at 40em atunci interogarea va
returna False. Dac a este x 40em sau mai mare atunci interogarea va returna
True.
Opusul, "max-width" ^ nseamn a "o l at ,ime de maxim 40" , este acelas ,i lucru ca
s,i c^ and am spune "mai mic a sau egal a cu".
@media only screen and (min-width: 40em … )
^In cele din urm a trebuie s a includem un set de acoloade care s a ^ nconjoare tot
blocul css care urmeaz a s a il scriem.
Trebuie s a ne asigur am c a avem toate parantezele altfel browser-ul nu va ^ nt ,elege

CAPITOLUL 3. TEHNOLOGII FOLOSITE 50
codul s ,i il va omite sau chiar mai r au poate aplica stiluri gres ,ite elementelor.
^In design-ul responsiv interg arile media sunt folosite ^ n general doar pentru a
a
a dimensiunea viewport-ului. Pe calculatoarele desktop s ,i laptopurile au dimen-
siuni variabile ale viewport-ului dar nu din cauza diferitelor m arim ale ecranelor ci
pentru c a utilizatorul poate schimba dimensiunea browserului redimension^ andu-l.
Pe dispozitivele mobile m arimea viewport-ului nu se schimb a doarece browserele
mobile nu ofer a posibilitatea redimenion arii acesora.
Pot  interogate s ,i alte propriet at ,i precum orientarea, aspect-ration s ,i rezolut ,ia,
dar deoarece browserele ofer a foarte put ,in suport pentru ele dezvoltatorii nu le
folosesc prea des. Acest lucru se va schimba cu sigurant , a cu timpul.
Interog arile media sunt suportate de majoritatea browserelor moderne, except ,ie
f ac^ and Internet Explorer 8 s ,i variantele mai vechi. Pentru a putea folosi interog ari
media ^ n Internet Explorer trebuie s a folosim comentarii condit ,ionale.
Exemplu de comentariu condit ,ional:
<!–[if lt IE 9]>
<link rel="stylesheet" href="ie8-and-down.css" />
<![endif]–>

CAPITOLUL 3. TEHNOLOGII FOLOSITE 51
3.3 JavaScript
S,tim deja c a website-urile sunt construite pe "straturi", ^ ncep^ and cu HTML
reprezent^ and primul strat pentru aranjarea cont ,inutului iar apoi ad aug am stratul
CSS pentru prezentarea cont ,inutului.
Cel de-al treilea strat este reprezentat de JavaScript care reprezint a interact ,iunea
sau comportamentul paginii. Este un strat opt ,ional, putem construi website-uri
perfect funct ,ionale f ar a s a ad aug am Javascrip, at^ ata timp c^ at proiect am un web-
site de baz a unde utilizatorii pot citii s ,i interct ,iona la un nivel minimal.
Unul din locurile comune unde este folosit JavaScript este pentru validarea
formularelor, permit ,^ and paginii web s a ^ ncarge cont ,inut nou f ar a a ^ nc arca o
pagin a nou a.
JavaScript este un limbaj de programare client-side. Acest lucru ^ nseamn a
c a tot codul JavaScript trebuie s a e ^ nc arcat de c atre browser (clientul), iar
apoi browserul se ocup a de interpretarea codului. Acest lucru este ^ n contrast
cu un limbaj de programare server-side precum PHP, care face modic ari paginii
web iar dup a ce a terminat o trimite browser-ului pentru a  as ,at a utilizatorului.
3.3.1 Cum funct ,ioneaz a limbajul JavaScript?
Codul Javascript poate  inclus e pe pagina HTML (lucru care nu este reco-
mandat), e ^ ntr-un s ,ier separat salvat cu extensia .jsiar apoi se poate atas ,a
paginii HTML prin tag-ul < script > , tag care va  pus chiar^ nainte de^ nchiderea
tag-ului < =body > .
C^ and un browser ^ ncarc a pagina dorit a acesta cites ,te codul de sus ^ n jos,
^ ncep^ and de la prima linie p^ ana la ultima. De aceea link-ul c atre s ,ierul CSS
se pune ^ n <head> iar scriptul c atre javascript se pune ultimul, pentru a evita
^ nc arcarea mai greoaie a cont ,inutului.
Cel mai adesea executarea codului JavaScript este declans ,at a un eveniment .
De exemplu evenimentul onclick care se va declans ,a numai la act ,iune de click.
Un alt eveniment destul de ^ nt^ alnit este onload , acest eveniment se declans ,eaz a
c^ and fereastra se ^ ncarc a. O mare parte din JavaScript ^ ntr-o pagin a web este
preg atirea tuturor evenimentelor care vor avea loc dup a ce s-a ^ nc arcat pagina.
Trebuie s a avem grij a cand folosim JavaScript pentru c a rularea codului javascript
poate opri ^ nc arcarea paginii web deoarece browserul va rula codul javascript ^ n
momentul c^ and ^ l va ^ nt^ alnii.
Pentru a evita blocarea paginii trebuie s a ne asigur am c a pe m asur a ce brow-

CAPITOLUL 3. TEHNOLOGII FOLOSITE 52
serul cites ,te s ,ierul HTML acesta ^ ncarc a numai codul javascript necesar numai
pentru pagina respectiv a. Restul codului javascript se poate ^ nc arca dup a ce
pagina web s-a ^ nc arcat complet.
3.3.2 Libr ariile JavaScript?
O libr arie JavaScript reprezint a o colect ,ie de cod JavaScript care ne ajut a s a
scriem scripturi s ,i s a d am funct ,ionalitate website-urilor mult mai repede dec^ at
dac a am scrie codul de la ^ nceput. Practic, cont ,ine cele mai comune funct ,ii de
care ar putea avea nevoie utilizator pentru a evita repetarea codului s ,i pentru a
^ mbun at at ,irea viteza.
Exist a foarte multe libr arii JavaScript dar cea mai cunoscut a s ,i cea mai folosit a
este cu sigurant , ajQuery (http://jquery .com) . Un framework este foarte similar
cu o libr arie doar c a ne ofer a mult mai multe obt ,iuni.
Singura problem a pe care o aduce folosirea unei libr arii JavaScript este codul
nefolosit. Pentru a putea  util a tuturor cont ,ine o varietate foate mare de funct ,ii
s,i metode.
Problema apare atunci c^ and folosim foarte put ,ine metode deoarece restul
funct ,iilor ocup a spatiu s ,i pot ^ ngreuna folosire website-ului. De exemplu, ul-
tima versiune a libr ariei jQuery are o dimensiune de 287 kb. Poate c a nu pare
foarte mult dar trebuie s a t ,inem minte c a dispozitivele mobile nu au viteza pe
care o au calculatoarele personale s ,i de obicei viteza conexiunea la internet este
mult mai mic a dec^ at cea a calculatoarelor. Trebuie ment ,ionat c a pe site-ul o-
cial al jQuery avem posibilitatea de a personaliza libr aria pentru nevoie noastre
reduc^ andu-i drastic dimeniunea.
O solut ,ie pentru a reduce dimensiunea este folosirea micro-libr ariilor sau micro-
framework-urilor care au dimeniuni semnicativ mult mai mici (5kb sau mai
put ,in). Micro-libr ariile ajung la aceast a performant , a deoarece ofer a suport doar
pentru o singur a sarcin a.
Website-ul Microjs (http://microjs .com) ne ofer a o colect ,ie de peste 100 de astfel
de libr arii s ,i deasemenea ne ofer a posibilitatea de a c auta ceea ce dorim.
3.4 jQuery
Not ,iunile de baz a jQuery pot  foarte us ,or de^ nv at ,at sau provocator, ^ n funct ,ie
de experient ,a utilizatorului cu JavaScript, HTML, CSS, s ,i cu concepte de pro-
gramare, ^ n general.

CAPITOLUL 3. TEHNOLOGII FOLOSITE 53
Un lucru important de ret ,inut este c a jQuery este doar o libr arie JavaScript.
Toat a
exibilitatea s ,i puterea pe care o ofer a este oferit a de JavaScript, deci
av^ and o bun a ^ nt ,elegere a limbajului JavaScript este esent ,ial pentru a ^ nt ,elege,
pentru a tructura s ,i pentru a putea verica codul scris. Folosirea libr ariei jQuery
cu reguaritate poate duce la o ^ nt ,elegere mai bun a a limbajului JavaScript s ,i la
o ecient , a crescut a, dar toate acestea necesit a, dup a cum am precizat deja o
^ nt ,elegere a limbajului JavaScript.
Libr aria jQuery ia multe din cele mai funct ,ionalit at ,i ale limbajului JavaScript
s,i le pune ^ n metode care mai t^ arziu pot  apelat doar cu o singur a linie de cod,
deasemenea simplic a multe din lucrurile complicate din JS precum AJAX sau
manipularea DOM.
Libr aria jQuery ofer a urm atoarele facilit at ,i:
Manipulare HTML/DOM
Manipulare CSS
Animat ,ii s ,i metode
AJAX
Utiliate
Pe l^ ang a toate acestea jQuery ofer a plugin-uri pentru aproape orice sarcin a legat a
de web development.
Putem ad auga jQuery ^ n proiectul nostru prin dou a metode:
putem desc arca libr aria direct de pe site-ul ocial jQuery
putem include jQuery folosind un CDN
Exist a dou a variante de jQuery pe care le putem desc arca:
varianta minicat a s ,i comprimat a
varianta pentru dezvoltare necomprimat a
Pentru a ne putea folosii de noua bibliotec a trebuie acum doar s a ad aug am
referint ,e c atre ea:
<head>
<script src="javascript/jquery-1.11.3.min.js"></script>
</head>
Dac a folosim varianta prin CDN de la un furnizor precum Google o putem la
proiectul curent ^ ntr-un mod similar cu varianta local a:

CAPITOLUL 3. TEHNOLOGII FOLOSITE 54
<head>
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.11.3/jquery.min.js">
</script>
</head>
Avantajul de a folosi un CDN este c a foarte mult ,i utilizatori deja au desc arcat
jQuery de la Google sau Microsoft c^ and au vizitat un site care folosea jQuery,
ceea ce ^ nseamn a c a nu mai trebuie desc arcat a din nou s ,i pentru website-ul nostru
ci va  ^ nc arcat a din cache ceea ce va cres ,te viteza de ^ nc arcare a website-ului
nostru.
Sintaxa jQuery
Sintaxa jQuery este realizat a special pentru selectarea elemente-
lorHTML s ,i executarea unor act ,iuni.
Sintaxa de baz a este: $(selector).actiune();
Semnul $ denes ,te accesul la biblioteca jQuery.
Act ,iune reprezint a metoda sau funct ,ia pe care dorim s a o rul am.
Exemplu:
$(this).hide() – ascunde elementul curent
$("p").hide() – ascunde toate elementele p
$(".test").hide() – ascunde toate elementele
cu clasa .test.
$("#test").hide() – ascunde toate elementele
cu id-ul #test.
Pentru a manipula elementele HTML trebuie s a folosim selectorii.
Selectorii jQuery g asesc elementele HTML dup a id, clas a, atribut,
valoarea atributului, etc. Este bazat pe selectorii curent ,i din CSS
s,i ^ n adit ,ie are c^ at ,iva selecotori proprii.
Exemplu de selectare element dup a numele acestuia:
// la click pe un buton vor fi ascunse

CAPITOLUL 3. TEHNOLOGII FOLOSITE 55
// toate elementele p
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Exemplu de selectare element folosind id-ul unui element:
// la click pe un buton va fi ascuns elemenul
// cu id-ul test
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Exemplu de selectare element folosind clasa unui element:
// la click pe un buton va fi ascuns elemenul
// cu clasa test
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
3.4.1 Evenimente
Toate act ,iunile diferite ale utilizatorului pe un website sunt nu-
mite evenimente. Evenimentul reprezint a momentul precis de timp
c^ and se ^ nt^ ampl a ceva. De exemplu mis ,carea mouse-ului deasupra
unui element, selesctarea unui buton, etc…
Cele mai comune evenimente sunt:

CAPITOLUL 3. TEHNOLOGII FOLOSITE 56
Mouse Ev Keyboard Ev Form Ev Document/Window Ev
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Exemplu de eveniment c^ and mouse-ul intr a ^ n zona unui element
HTML:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
3.5 Bootstrap 3
Bootstrap este un framework dezvoltat de c atre Mark Otto s ,i
Jacob Thornton. Bootstrap este un front-end framework intuitiv,
puternic s ,i us ,or de folosit pentru o dezvoltare web mai rapid a s ,i mai
us ,oar a. Bootrap ne ofer a uneltele pentru construirea de website-uri,
aplicat ,ii web sau prototipuri simple.
Ofer a o varietate de varietate de pluginuri javascript, cum ar :
1.modal windows
2.drop-down menus
3.tab control
4.carousel control
Putem ad auga Bootstrap la proiectul nostru prin dou a metode:
putem desc arca framework-ul direct de pe site-ul ocial Boot-
strap
putem include Bootstrap folosind un CDN

CAPITOLUL 3. TEHNOLOGII FOLOSITE 57
Pentru a ne putea folosii de noua bibliotec a trebuie acum doar s a
ad aug am referint ,e c atre ea:
<script src="js/bootstrap.js"></script>
Dac a folosim varianta prin CDN de la un furnizor precum Google
o putem la proiectul curent ^ ntr-un mod similar cu varianta local a:
<script src="http://maxcdn.bootstrapcdn.com/
bootstrap/3.3.5/js/bootstrap.min.js">
</script>
Avantajul de a folosi un CDN este c a foarte mult ,i utilizatori deja
au desc arcat Boostrap de la Google sau Microsoft c^ and au vizitat
un site care folosea Boostrap, ceea ce ^ nseamn a c a nu mai trebuie
desc arcat a din nou s ,i pentru website-ul nostru ci va  ^ nc arcat a din
cache ceea ce va cres ,te viteza de ^ nc arcare a website-ului nostru.
Pentru a putea oferi o experient , a web mai pl acut a utilizatorului
au schimbat prioritatea dispozitivelor care consuma cont ,inut web.
^In versiunea 2.0 toata atent ,ia era concentrat a pe calculatoarele des-
ktop s ,i pe dispozitivele cu ecran mare, telefoanele mobile s ,i tabletele
ind l asate pe locul doi.
Cum din ce ^ n ce mai mult a lume navigheaz a pe internet folo-
sind un dispozitiv mobil, atent ,ia dezvoltatorilor de la Bootstrap
s-a orientat c atre aceast a parte, astfel a ap arut abordarea Mo-
bile First.Aceast a abordare se refer a la faptul ca ^ nc a de la bun
^ nceput designerul proiecteaz a site-ul pentru dispozitivele mobile,
iar apoi ^ nainteaz a c atre dispozitivele cu dimensiunea ecranului mai
mare(desktop).
Ideea din spatele framework-ului este destul de simpl a. Folosim
r^ anduri s ,i coloane pentru a crea diferite layout-uri.
Framework-ul Bootrap cont ,ine 12 coloane care ^ nsumate de d a
o l at ,ime de 1170px. Avantajul este c a putem customiza num arul

CAPITOLUL 3. TEHNOLOGII FOLOSITE 58
coloanelor, m arimea lor, spat ,ierea ^ ntre ele, precum s ,i brakepoint-
urile pentru diferite dispozitive.
Exist a patru categorii de dispozitive, ecare cu un viewport dife-
rit. Acestea sunt:
extra small devices { xs. Telefoane width < 760px
small devices { sm. Tablete width >760 px
medium devices { md. Desktop >=992px
large device {lg. Large desktop width >=1200px
Figura de mai jos ne prezint a grid-ul cu 12 coloane folosit de
Bootstrap 3.
Fig. 10.Reprezentarea grid-ul pe 12 coloane folosit de framework-ul Bootstap 3
Urm atorul exemplu arat a cum s a obt ,inet ,inem un r^ and cu trei co-
loane egale pornind de la tablete s ,i cresc^ and dimensiunea p^ an a la

CAPITOLUL 3. TEHNOLOGII FOLOSITE 59
desktop-uri de dimensiuni mari. Pe telefoanele mobile, coloanele
vor aranja automat:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Exemplul urm ator ne arat a cum putem obt ,ine dou a coloane de
dimensiuni diferite:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-4</div>
</div>
Framework-ul Bootstrap 3 ne ofer a foarte multe obt ,iuni pe care
le putem folosi pentru a peronaliza un website, pentru al face res-
ponsive s ,i pentru a cres ,te experient ,a utilizatorului.
Cea mai bun a resurs a pentru a ^ nv at ,a despre Bootstrap 3 este chiar
website-ul lor ( http://getbootstrap.com/ ), unde ofer a o documentat ,ie
foarte mare s ,i us ,or de ^ nt ,eles.

CAPITOLUL 3. TEHNOLOGII FOLOSITE 60
3.6 Descrierea aplicat ,iei
Ca aplicat ,ie am decis s a realiz am s ,i sa prezent a un website de
ecommerce.
Website-ul se poate g asii la adresa: http://licenta.comuv.com/. Website-
ul este un magazin de haine pentru b arbat ,i, femei s ,i copii.
Are patru pagini principale unde sunt prezentate produse s ,i avem
posibilitatea de a vedea cos ,ul de cump ar aturi p^ an a ^ n momentul de
fat , a.
Website-ul este responsiv s ,i va rula pe toate dispozitivele modere
indiferent de dimensiunea ecranului. Urm^ and modelul HTML5 e-
care pagin a este ^ mp art ,it a ^ n 4 mari categorii:
1.header
2.navigation
3.main-content
4.footer
Toate paginile au ^ n partea de sus log-ul companiei, bara de
c autare pentru a g asi rapid produsul sau informat ,iile dorite s ,i un
link c atre cos ,ul de cump ar aturi pentru accesul rapid la el. Zona
principal a de cont ,inut este populat a cu diversele articole vestimen-
tare.
Zonele majore de text au fost populate cu text lorem, textul lorem
reprezint a text aleator ^ n limba latin a. Lorem se poate g asii la
urm atoarea adres a: http://www.lipsum.com/
Pagina principal a sau home este prima pagin a pe care o vede
utilizatorul. Pe aceast a pagin a este un banner rotativ care prezint a
cele mai noi colect ,ii iar zona principal a de cont ,inut este populat a
cu cele mai noi produse.

CAPITOLUL 3. TEHNOLOGII FOLOSITE 61
Pagina principal a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>About Us</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="row">
<!– Logo –>
<div class="col-lg-4 col-md-3 hidden-sm hidden-xs">
<div class="well logo">
<a href="index.html">
<span>Online Shop</span>
</a>
<div>Best shop in town.</div>
</div>
</div>
<!– End Logo –>
<!– Search Form –>
<div class="col-lg-5 col-md-5 col-sm-7 col-xs-12">
<div class="well">

CAPITOLUL 3. TEHNOLOGII FOLOSITE 62
<form action="">
<div class="input-group">
<input type="text"
class="form-control input-search"
placeholder="Enter something to search"/>
<span class="input-group-btn">
<button class="btn btn-default
no-border-left"
type="submit"><i class="fa fa-search">
</i></button>
</span>
</div>
</form>
</div>
</div>
<!– End Search Form –>
<!– Shopping Cart List –>
<div class="col-lg-3 col-md-4 col-sm-5">
<div class="well">
<div class="btn-group btn-group-cart">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">
<span class="pull-left"><i class="fa
fa-shopping-cart icon-cart"></i></span>
<span class="pull-left">Shopping Cart:
2 item(s)</span>
<span class="pull-right"><i
class="fa fa-caret-down"></i></span>
</button>
<ul class="dropdown-menu cart-content" role="menu">
<li>
<a href="detail.html">
<b>Penn State College T-Shirt</b>
<span>x1 $528.96</span>

CAPITOLUL 3. TEHNOLOGII FOLOSITE 63
</a>
</li>
<li>
<a href="detail.html">
<b>Live Nation ACDC Gray T-Shirt</b>
<span>x1 $428.96</span>
</a>
</li>
<li class="divider"></li>
<li><a href="cart.html">Total: $957.92</a></li>
</ul>
</div>
</div>
</div>
<!– End Shopping Cart List –>
</div>
</div>
</header>
Pagina Register
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="white-container">
<span class="title">REGISTER</span>
<p>Introduceti toate datele cerute mai jos pentru
a va putea inregistra pe website-ul nostru.</p>
<!– Form Register –>
<form action="">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label for="first_name">First Name (*)</label>
<input type="text" class="form-control"
id="first_name"><br clear="all"/>

CAPITOLUL 3. TEHNOLOGII FOLOSITE 64
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label for="last_name">Last Name (*)
</label>
<input type="text" class="form-control"
id="last_name"><br clear="all"/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label for="email">Email (*)</label>
<input type="text" class="form-control"
id="email"><br clear="all"/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label for="username">Username (*)</label>
<input type="text" class="form-control"
id="username"><br clear="all"/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label for="password">Password (*)
</label>
<input type="password" class="form-control"
id="password"><br clear="all"/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label for="confirm_password">Confirm Password(*)
</label>
<input type="password" class="form-control"
id="confirm_password"><br clear="all"/>
</div>
<div class="clearfix"></div>

CAPITOLUL 3. TEHNOLOGII FOLOSITE 65
<div class="checkbox">
<label>
<input type="checkbox"> I agree with
<a href="#">Terms and Conditions.</a>
</label>
</div>
<button class="btn btn-danger">Register</button>
</form>
<!– End Form Register –>
</div>
</div>

Bibliograe
[1]Zorayda Ruth Andam, e-Commerce and e-Business , e-ASEAN
Task Force, 2003.
[2]Rana Tassabehji, Applying E-Commerce in Business , Sage Pu-
blications, 2003.
[3]Kenneth C. Laudon, Carol G. Traver E-commerce: The Revolu-
tion Has Just Begun , Pearson Publications, 2014.
[4]Paul Timmers Electronic Commerce: Strategies and Models for
Business-to-Business Trading , Wiley, 2011.
[5]Ethan Marcotte, RESPONSIVE WEB DESIGN , Jeffrey Zeld-
man, A Book Apart, New York, 2011.
[6]Thoriq Firdaus, Responsive Web Design by Example , Packt Pu-
blishing, 2013.
[7]Clarissa Peterson, Learning Responsive Web Design , O'REILLY,
2014.
[8]Craig Sharkie, Andrew Fisher, Jump Start Responsive Web De-
sign, SitePoint Pty. Ltd, 2013.
66