MANAGEMENTUL FRON -END -ULUI UNEI APLICAȚ II WEB [612087]

UNIVERSITATEA DE STAT DIN MOLDOVA

FACULTATEA MATEMATICĂ ȘI INFORMATICĂ

DEPARTAMENTUL INFORMATICĂ

CELAC DAN

MANAGEMENTUL FRON -END -ULUI UNEI APLICAȚ II WEB

444.1 INFORM ATICĂ

Teză de licență

Sef Catedră : ______________ Arnaut Vsevolod , dr., conf. univ.

Conducător științific: ______________ Natalia Pleșca , lect. univ.

Autor : ______________ Celac Dan

CHIȘINĂU -2016

2
CUPRINS
Lista abrevierilor ………………………….. ………………………….. ………………………….. ……………………… 3
Adnotare ………………………….. ………………………….. ………………………….. ………………………….. ……… 4
Introducere ………………………….. ………………………….. ………………………….. ………………………….. ….. 6
I Aplicații web ………………………….. ………………………….. ………………………….. ………………………….. 8
1.1 Pagini statice și pagini dinamice ………………………….. ………………………….. ……………………… 8
1.1.1 Pagini statice ………………………….. ………………………….. ………………………….. ………………. 9
1.1.2 Pagini dinamice, aplicații Web ………………………….. ………………………….. ………………….. 9
1.1.3 Diferențe dintre paginile statice și cele dinamice ………………………….. ……………………. 12
1.2 Tehnologii utilizate pentru dezvoltarea aplicațiilor Web ………………………….. ……………….. 14
1.3 Modelul client -server în apli cațiile web ………………………….. ………………………….. ………….. 15
II Managementul front -end-ului și a back -end-ului aplicațiilor web ………………………….. 17
2.1. Front -end-ul aplicațiilor Web ………………………….. ………………………….. ……………………….. 17
2.1.1 Managementul front -end-ului ………………………….. ………………………….. ………………….. 18
2.1.2 Responsive design ………………………….. ………………………….. ………………………….. …….. 18
2.1.3. Cross -platform ………………………….. ………………………….. ………………………….. …………. 21
2.2 Back -end-ul aplicațiilor Web ………………………….. ………………………….. ………………………… 22
2.3 Caracteristica ma nagementului front -end-ului aplicațiilor Web ………………………….. ……… 22
III Dezvoltarea aplicației de tip „magazin on -line” ………………………….. ………………………….. . 26
3.1 Formularea problemei ………………………….. ………………………….. ………………………….. ……… 26
3.2 Modelarea soluției aplicației ………………………….. ………………………….. ………………………….. 27
3.3 Managementul fr ont-end-ului aplicației ………………………….. ………………………….. ………….. 36
3.3.1 Planificarea front -end-ului aplicației ………………………….. ………………………….. ………… 38
3.3.2 Organizarea front -end-ului aplicației ………………………….. ………………………….. ……….. 39
3.3.3 Coo rdonarea front -end-ului aplicației ………………………….. ………………………….. ………. 39
3.3.4 Controlul front -end-ului aplicației ………………………….. ………………………….. ……………. 40
3.4 Descrierea aplicației dezvoltate ………………………….. ………………………….. ……………………… 40
Concluzii și recomandări ………………………….. ………………………….. ………………………….. ………… 47
Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. … 49

3
LISTA ABREV IERILOR

SEO – Search engine optimization ;
RWD – Responsive web design ;
HTTP – Hypertext Transfer Protocol ;
HTML – HyperText Markup Langu age;
CSS – Cascading Style Sheets;
ASP – Active Server Pages;
XML – Extensible Markup Language;
SWT – Standard Widget Toolkit ;
URL – Uniform Resource Locator ;
PHP – Personal Home Pages;
CGI – Computer -generated imagery;
JS – JavaScript;
RSS – Rich Site Summary;
SQL – Structured Query Language;
PC – Personal C omputer ;
IT – Information technology .

4
ADNOTARE
la teza de licență „ Managementul fron-end-ului unei aplicații web ” a studentului
Celac Dan, grupa I -31, specialitatea Informatică

Cuvinte -cheie: front -end, back -end, interfață.
Teza conține : introducere, 3 capitole, concluzii generale și recomandări, bibliografie alcătuită din
14 surse, 49 de pagini text de bază.
Primul capitol , “Aplicații web ” reprezintă un studiu al diferitor tipuri de aplicații web
actuale în domeniul cercetat. Sunt cercetate tipurile de pagini web și rolul de bază ale acestora.
Al doilea capitol , “Managementul front -end-ului și a back -end-ului aplicațiilor web ”
descrie su ccint ce reprezintă front -end-ul și back -end-ul unei aplicații web. Sunt descris e
principalele funcții ale back -end-ului și rolul lui în implementarea aplicațiilor web.
Al treilea capitol , “Dezvoltarea aplicației de tip “ magazin on -line”” descrie tehnologia
care va fi utilizată la realiza tă aplicației din cadrul tezei , soluția și realizarea aplicației . Sunt
descrise toate avant ajele pe care le posedă apli cația.
Pentru dezvoltarea aplicației tezei a fost aleasă tehnologia PHP, dat fiid faptul că acesta are
o extindere largă și este utilizat ă de un număr tot mai mare de programatori.
Scopul cercetării constă în elaborarea unui magazin on -line pentru promovarea E-
commerce online , în care să se implementeze procese de activitate specifice „managementului
front -end-ului” unei aplicații web .
Obiectivele cercetării:
 Cercetarea domeni ului managementului front -end-ului pentru aplicațiil e web;
 Aplicarea cunoștințelor acumulate pentru m anagementul front -end-ului la dezvoltarea unei
aplicații web;
 Dezvoltarea intefeței aplicației , astfel încî t să fie dispo nibilă în mai multe limbi;
 Elaborarea concluziilor și recomandărilor referitor la problema cercetată.
Valoarea teoretică a cercetării: constă în cunoașterea noilor tehnologii de dezvoltare a
aplicațiilor web și a instrumentelor folosite pentru realizarea unui management eficient a front –
end-ului.
Valoarea apl icativă a cercetării: dezvoltarea unei aplicații web ce va conține partea front –
end, cît și partea back -end.
Teza de licență cuprinde 49 de pagini în format A4, și 21 de figuri.

5
ADNOTATION
of the graduation paper “The management of the front -end web development”
by Cela c Dan, I -31 group, Informatics

Key words: front -end, back -end, interface.
The present Graduation Paper includes the following: introduction, 3 chapters, general
conclusions a nd recommendations, bibliography from 14 sources and 49 text pages. The first
chapter entitled “Web applications” is a study of different types of up -to date web applications in
the field that has been searched. The types and the role of the web pages have been searched.
The second chapter entitled “The management of the front -end and of the back -end web
development” contains brief information about front -end and back -end of a web development. The
primary functions of the back -end and their role in the impl ementation of the web devel opment
are mentioned. The third chapter entitled “The development of the application of the “online store”
contains information about the technology that will be used when the application is done in the
present graduation paper, the solution and the implementation.
It was chosed the PHP technology for implementation of this thesis because of its large
usage and increase of its usage by the programmers.
The goal of the research is to design an online store in order to pro mote the E -commerce
online in which activities for “the management of the front -end” will be implemented in the present
web application. The goals of the research:
 To research the management of the front -end of the web development
 To use the acquired know ledge of the management of the front -end in an web development
 To develop the interface of the application in order to be available in more languages
 To write the conclusions and the recommendations concerning the present research
The theoretical value of the research includes the technologies of the web development
and the instruments that are used in order to do a valuable management of the front -end.
The practical value of the research includes the development of a web development that
will contain the front -end part and the back -end part.
The present graduation paper contains 49 pages A4 and 21 inserts.

6
INTRODUCERE

Actualitatea temei
Dacă pînă acum internetul era disponibil doar pentru persoanele de elită, acum el s -a extins
pe o arie destul de largă și se consideră a fi sursa principală de informație. Este o eră a tehnologiilor
avansate, a împlinirii celor mai interesante idei gîndite de mintea omenească.
Ultimul deceniu al secolului trecut a adus multe schimbări în diferite domenii. Una din
modificările substanțiale, deosebit de utile, poate fi considerată generealizarea utilizării
calculatoarelor personale și accesibilitatea tot mai largă publicului. Pătrunderea instrumente lor de
hardware și de software în domeniul lucrărilor de birotică, de proiectare, în școli și institute n -a
putut să nu reflecte și apariția a tot mai multor sitiuri web. Site-urile web sunt foarte eficiente
deoarece reprezintă un mijloc perfect pentru a promova o companie , deoarece sit e-ul oferă
utilizatorul informațiile necesare fară a veni la punctul de destinaț ie. Majoritatea întreprinderilor
de azi și -au creat site -urile sale web pentru a atrage mai mulți clienți astfel mărindu -și eficiența
și realizarea obiectivelor sale.
Un site e laborat pentru o anumită companie conform exigențelor moderne, este o sursă
excelentă pentru a vinde produse sau a informa oamenii . Marketingul ocupă un loc deosebit de
populat pe internet. Importanța I nternetului și a altor platforme interactive multi -media în
promovarea dezvoltării și funcționării rezonabile a unei întreprinderi este foarte mare. Pe măsura
pătrunderii în Era Informațională, organizațiile trebuie să conștientizeze necesitatea utilizării
Internetului și noilor tehnologii inte ractive, atractivitatea lor crescîndă față de clienți, și să învețe
să profite de pe urma utilizării acestor noi canale, privilegiul cărora constă în eficiența distribuției
globale . Deaceea a fost luată decizia să se elaboreze un magazin online , numit de mulți și magazin
virtual , pentru a promova comerțul electronic. Comerțul electronic este foarte răspîndit în zilele
noastre și poate aduce un profit bun. În cadrul aplicației se va pune accent pe partea fron -end, unde
utilizatorul va avea o inter față plăcută c e-i va permite o navigare ușoară . Un front -end plăcut poate
face ca un potențial client să revină din nou la site -ul în cauză. Se vor utiliza un set de tehnologii
moderne p entru a asigura cerințele de responsive web design și croos platform , astfel încît să fie
posibilă accesarea de pe orce dispozitiv îndiferent de rezoluție sau platformă. Odată cu evoluția
tehnologiei și anume răspîndirea telefoanelor moderne aceste utilități fiind foarte bune astfel fiind
posibilitatea măririi venitului. În aplicație s-a ținut cont, la fel , și de managementul conținutului ,
unde fiecare element în pagină este plasat corespunzător și anume sigla sitiului, meniul ș.a.
elemente. Managementul conținutului și a design -ului front -end-ului fiind foarte important în orce
aplicație web.

7
Teza de licență conț ine trei capitole. Primul capitol – “Aplicații web” – reprezintă o
descriere a diferitor tipuri de pagini web și descrierea tehnologiilor utili zate pentru crearea lor.
În capitolul al doilea – “Managementul front -end-ului și a back -end-ului aplicațiilor web ”
– este descris rolul front -end-ului în cadrul unei aplicații , cît și a back -end-ului, fiind explicate
necesitățile utilizării tehnologiei cross -platform cît și responsive web desi gn.
Capitolul al treilea este dedicat descrierii proiectării și elaborării aplicației electroni ce.
Aplicația reprezintă un magazin virtual care permite vizualizarea de către client a catalogului de
produse, efectuarea comenzil or și primirea plăților on -line.

8
I APLICAȚII WEB

Dezvoltarea paginilor statice cît și dinamice în procesul de învățămînt se dovedește a fi o
necesitate pentru o înțelegere mai clară a acestor două tipuri de pagini diferite. Odată cu extinerea
internetului dezvoltarea aplicații lor web statice , cît și dinam ice, s -a extins exponential în cadrul
companiilor de prestigiu.
1.1 Pagini statice și pagini dinamice
Paginile Web dinamice sunt folosite atunci cî nd se dorește modificarea dinamică, a
conținutului paginilor Web. Paginile Web realizate în HTML au dezavantajul că sunt statice,
conținutul lor neputî nd fi modificat odată ce au fost încărcate pe un server , decît aducî ndu-le înapoi
pentru a fi editate. Ac est lu cru este o problemă serioasă avî nd în vedere că operația este foarte
consumatoare de timp. În plus, lucrul cu baze de date nu este posibil în cazul paginilor statice.
Spre exemplu avînd un site Web format doar din pagini HTML care afișează notele și mediile
studenților pe serii și pe grupe și se dorește să se mai adauge detele a încă un st udent , va fi necesar
să se modifice atît pagina grupei cî t și pagina seriei precum și pe cele de medii. Acest fapt este
neplăcut și îngreunează foarte mult munca. So luția care se adoptă în astfel de situații este plasarea
informațiilor într -o bază de date și accesarea lor ori de cî te ori se cere acest lucru de cineva. Mai
exact , în loc să se creeze 3 -4 pagini Web în HTML care să fie modific ate ori de cî te ori apare o
schimbare, se va crea o bază de date și cî teva sc ripturi pe partea de server care vor construi dinamic,
paginile HTML care vor fi afișate. Schimbările se vor face doar la nivelul bazei de date ceea ce e
mult mai simplu. Paginile Web se clasifică în funcție de natura conținutului în pagini statice și
pagini dinamice .
Principalele caracteristici ale paginilor Web statice sunt:
 conțin doar elemente HTML;
 codul sursă vizualizat în navigator este identic cu cel al fișierului stocat pe disc;
 nu oferă interactivitate.
Paginile Web dinamice se caracterizează pr in următoarele:
 conținutul lor este creat dinamic și poate fi diferi t la accesări diferite; spre exemplu la
același URL , conținutul paginii poate varia în funcție de anumiți parametri cu m ar fi locația
geografică a utilizatorului, ora, paginile vizitate anterior, profilul utilizatorului;
 oferă interactivitate;
 posibilități de interacțiune.

9
În funcție de locul în care este evidențiat caracterul dinamic al paginilor există pagini dinamice
pe parte de client și pagini dinamice pe partea de server. [1. Pag.1]
1.1.1 Pagini statice
Paginile web statice sunt acele pagini în care conținutul rămîne neschimbat . Atunci cî nd se
dorește să se ocupe de distribuția tehnică a documente lor, nu sunt foarte multe modificări ale
documentului original. Acest tip de site este de obicei folosit pentru a informatiza vizitatorii despre
subiecte d iverse cum ar fi locuri pentru vizite s.a. Este de fapt, un mediu pentru informaț ii care
este relativ neschimbat . [4. pag. 24 ]
Un site web static este un site web format d intr-o colecție de fișiere al căror conținut trebuie
modificat fizic pentru a reda un conținut diferit de cel inițial. Asta înseamnă că dacă un client are
un site web static și la un moment dat iși schi mbă un num ăr de telefon și vrea să -l afișeze în site
pe cel nou va trebui să apeleze la c ei care i -au realizat site -ul să facă modificarea și să încarce apoi
pagina modificată înapoi pe server î n locul celei vechi. La fel ar trebui să se procedeze și î n cazul
în care se dorește de adaugat texte noi sau pagini noi. [5]

1.1.2 Pagini dinamice, aplicații Web

Pagini le web cu conț inut dynamic – sunt paginile care “trăiesc”, reacț ionează la mișcările
vizitatorului . Sunt paginile î n care conținutul se schimbă , fară să se încarce o nouă pagină . Pentru
acesta este nevoie de limbaje le de programare precum : Java, Javas cript, Ajax, XML, ActionScript
și eventual extensii ale acestora: jQuery, MooTools, etc.
Pagini le web create dinamic arată la fel ca celelalte ca design. Diferenț a cons tă în modul
în care sunt create:
La o pagină statică, vizitatorul cere , comanda ajunge la server, server -ul returnează pagina.
La o pagină diamică , comanda ajunge la se rver, server -ul extrage informația n ecesară din
baza de date, o introduce într -o pagină statică ce folosește drept șablon, apoi pagina este livrată
vizitatorului. Acest gen de programare foloseș te limbaje precum asp, p erl, python, ruby, cel mai
răspî ndit fiind php, mai complicat, î nsa prezin tă o serie de avantaje . Cu o singură pagină statică și
o bază de date pot fi create sute de pagini diferite , poate fi creată o interfat ă de administrare cu
ajutorul că reia utlizatorul introduce informații î n baza de date, eliminî ndu-se astfel necesitatea
unui programator . Design -ul site -ului poate fi schimbat mult mai ușor, pentru că implică doar
modificarea paginii statice ș ablon . [2].
Pagini dinamice pe partea clie nt

10
Există mai multe tehnologii care permit realizarea de pagini dinamice pe partea de clien t.
Dintre acestea se enumeră:
 scripturi pe partea client (client side scripts);
 DHTML (Dynamic HTML) ;
 Applet -uri Java ;
 Controale ActiveX ;
 Elemente multimedia ;
Scripturile pe partea client (client side scripts) sunt secvențe de program incluse în pagina
HTML care se execută de către navigator. Secvențele de program sunt incluse prin marcatorul
<SCRIPT> sau în proprietățile anumitor componente HTML ca răspuns la diferite evenimente.
Limbajele utilizate pentru a realiza scripturi pe partea de client sunt JavaScript, Jscript și VBScript.
Secvențele de program scrise folosind aceste scripturi nu oferă acces la resursele sistemului local
(fișiere, rețea). Scripturile pe partea de client sunt util izate pentru asigurarea interactivității
(meniuri), pentru validarea formularelor, pentru a crea diferite efecte, pentru efectuarea de calcule,
diverse elemente de animație etc.
 DHTML (Dynamic HTML) este o tehnologie dezvoltată de Microsoft care combină HTML,
foi de stiluri ( CSS) și script -uri pentru a realiza pagini Web dinamice sau interactive.
Permite utilizatorilor să interacționeze cu pagina fără a retrimite o cerere la serverul Web
 Applet -uri Java reprezintă aplicații de dimensiune redusă, scrise în limbajul Java. Codul
binar al aplicație i este descărcat pe mașina client de pe server și executat local, în mașina
virtuală Java (JVM). Aproape toate calculatoarele permit execuția applet -urilor, însă pentru
funcționarea acestora este necesară instalarea unei mașini virtuale Java. În cadrul paginii
HTML applet -urile sunt incluse prin in termediul marcatorilor <APPLET> sau <OBJECT>.
Din applet -urile Java nu este permis accesul la sistemul local de fișiere și la rețea, astfel
riscul ca aceste aplicații să con țină cod malițios sunt reduse.
 Controalele ActiveX sunt componente binare incluse în paginile Web pentru a oferi
interactivitate. Sunt asemănătoare applet -urilor, însă spre deosebire de acestea rulează pe
platforma Windows și au fost dezvoltate în special pentru Internet Explorer. Controalele
ActiveX sunt incluse în cadrul paginii Web print intermediul marcatorului <OBJECT>.
Spre deosebire de sc ripturile pe partea de client nu au restric ții în ceea ce privește accesul
la disc, ceea ce face ca anumite comp onente de acest tip să fie susceptibile de cod răuvoitor,
asemănător virușilor, viermilor sau cailor troieni. De aceea, în cazul în care o pagină

11
conține controale ActiveX, navigatorul printr -o fereastră de dialog cere confirmarea
utilizatorului pentru ins talarea și rularea acestora.
 Elemente multimedia sunt dezvoltate în general folosind produsul Macromedia Flash.
Acestea se prezintă sub forma de fișiere SWF multimedia și sunt incluse în pagina Web
prin intermediul marcatorului <OBJECT>. Pentru a putea ru la pe partea de client aceste
fișiere este necesară instalarea unui plug-in denumit Macromedia Shockwave Player.
Fișierele multimedia Flash se realizează sub forma unor filme, care sunt proiectate cadru
cu cadru. Acestea oferă diverse efecte multimedia (an imație, sunet) și permit
interactivitatea cu utilizatorul. Sunt utilizate pentru meniuri, jocuri, filme de animație etc.
Pagini din amice generate pe partea server:
Interpretorul de scripturi tip server -side are rolul de a executa scripturi la cererea serverului
de Web, de cele mai multe ori de a prelua rezultatul unor interogări la nivelul bazelor de date și de
a trimite spre serverul Web rezul tatul execuției scripturilor sub forma de conținut HTML pentru a
putea fi afișat de către navigator. În momentul în care serverului Web i se solicită rularea unui
script, acesta identifică în funcție de extensia fișierului care din compilatoare trebuie să ruleze
scriptul respectiv. (vezi fig. 1)

Figura 1 Generarea pagin ilor dinamice pe server
Fiecărui interpetor de scripturi i se asociază unui limbaj de server -side scripting. Limbajele
populare ale momentului sunt: PHP (Personal Home Pages), ASP (Active Server Pages),
ASP.NET și JSP (Java Server Pages). La acestea se mai adaugă și o serie de alte tehnologii de
interes mai restrî ns. Caracteristicile generale ale paginilor Web dinamice generate pe partea de
server, indiferent de limbajul de scripting folosit sunt:
 într-o pagină de scr ipt (ASP, JSP, PHP) pot fi îmbinate limbajul HTML și secvențe de cod ;
 secvențele de cod sunt executate pe partea de server, înainte de a trimite pagina la client ;
 există astfel posibilitatea de a particulariza paginile în mod dinamic ;
 oferă posibilitate a de intera cțiune cu baze de date diferite;

12
 au acces la toate resursele serverului Web (fișiere, rețea).
În mod uzual prin intermediul scripturilor sun t prelucrare informațiile din cî mpurile
formularelor (<FORM>) din cadrul paginilor Web. [1, pag. 2-3]

1.1.3 Diferențe dintre paginile statice ș i cele dinamice
Paginile web și site -urile la rî ndul lor pot fi clasificate î n două mari categorii de bază pagini
static e și pagini dinamic e. Pentru a putea înțelege diferențele dintre pagini le web statice și cele
dinamice, trebui e de avut cun ștințe în domeniul Web design . Conținuturile pot fi î nserat e în pagina
web, folosind mai multe tehnologii , fie pe partea de client sau pe partea de server. O pagină Web
statică este una în care c onținutul paginii este con stant de fiecare dată cî nd este încărcat sau accesat.
Conținutul unei pagini web statice nu se schimbă indiferent cine, cînd și unde este accesat ă. În
mod tipic o pagină statică nu are nevoie de server. Accesarea unei pagini Web statice va avea ca
rezultat numai afișarea resurselor statice, cum ar fi sursele HTML pagina , imagini, CSS și fișiere
JS. Nu există nici o altă cerere pe partea de server cum ar fi interogări de baze de date sau cod de
executare pe server. Un exemplu de pagini web statice este un fișier HTML. Același fișier HTML,
împreună cu resursele statice aferente este livrat de fiecare dată cînd pagina este accesat ă. Este
ușor de confundat paginile web statice și pagini cu conținut static. P aginile web statice vor avea
întotdeauna un conținut static.
O pagină web dinamică poate avea conținut diferit de fiecare dată cî nd este încărcat ă.
Conținutul paginii este generat de fiecare dată cî nd clientul face o cerere. Aceste două tipuri de
pagini sunt puse împr eună, folosind un set de tehnologii diferite , cum ar fi JSP, ASP, PHP, Java
etc. De fiecare dată cî nd un client face o cerere pe o pagină Web, serverul analizează cererea și
generează conținutul specific cererii ex ecutî nd un cod pe partea de server și / sa u baza de date sau
alte interogări pe paartea de back -end. Această execuție de cod pe partea de server face ca saitul
sa fie dinamic. Este posibil de a utiliza o pagin ă dinamică care servește ca drept conținut ceva
static. Este probabil, dar nu este foar te eficientă din punct de vedere a resurselor, însă este posibil
să se cree ze o pagină Web statică folosind tehnologii web dinamice.
Cele mai multe site -uri web moderne de azi sunt pur dinamice. Iată cî teva exemple Gmail,
forumuri de mesaje ș i blog -uri (de ex. WordPress). Odată cu apariția noilor tehnologii client web,
cum ar fi AJAX și JavaScript, linia dintre pagini le web static e și dinamice a devenit un pic mai
neclară. Script -urile client side permit paginilor web statice să fie mult mai dinamic e în afi șarea
conținutului său. A ceste tehnologii client -side permit executarea de cod pe partea de client, după
ce conținutul a fost în cea mai mare parte descărcat, spre deosebire d e modelul tradițional server –

13
side.Pe măsură ce aceste tehnologii nu necesită nici un calcul pe partea de server, prin urmare, ar
trebui să considerăm că sunt pagini statice pentru toate scopurile practice. De asemenea, este
posibil ca aceste resurse ( de exemplu, pagini. JS) pot fi descărcate o dată în memoria cache în mod
eficient pe b rowserele client. Atî t pagini le web statice , cît și paginile dinamice beneficiază de
tehnologii client side. Există mai multe avantaje în utilizarea paginilor web statice, spre deosebire
de pagini le web dinamice (și, probabil, vice -versa). Paginile web statice sunt cel e mai bune pentru
a servi ca conținut. Aceasta face ca utilizarea lor să fie mai bună în cache. C onținutul poate fi în
memoria ca che pentru un timp foarte lung, fiindcă nu este de na tură să se schimbe sau să expire
ceva. Acest lucru poate fi un factor important în SEO. Fiindcă nu există nici o prelucrare pe partea
de server sau orice back -end de stocare a datelor , este practic imposibil de spart sau pentru a obține
careva date, pentru orce orice acț iuni intenționate. Singura parte vulnerabilă este s erverul de web
dar nu siteul . Traficul este cea mai mare parte de la server către client și nu există nici o interacțiune
cu serverul după aceea.
Paginile statice sunt mai ușor de creat , deoarece există mai puține părți în mișcare. Este, de
asemenea, mai rapid în producție, deoarece există mai puțin e test e care urmează să fie efectuate
în comparație cu pagini le dinamice. Așa cum este m ai ușor și mai rapid pentru a fi dezvolta t, de
asemenea, este și mai ieftin. Costurile de de zvoltare pot fi considera bil de ieftine. De asemenea,
este mai ieftin la găzduire decî t site -urile web dinamice. Nu este nevoie de nici un mediu de partea
de server sau a unu i cadru pentru a executa cod, doar un simplu HTTP server web este suficient
pentru g azdă însa nu putem spun e același lucru și despre paginile dinamice . Pentru crearea unui
site dinamic costurile minime sunt de aproximativ de 450 de euro în dependență de cerințele
impuse de client, în acest cost intră și găz duirea pe un termen de 12 luni. Conținutul paginilor web
dinamice sunt generat e în mod dinamic la cerere. Acest lucru face ca ele să fie mai ușor și mai
rapid pentru a actuali za conținutul de pe paginile web. Utilizatorii tind sa spună ca paginile web
sunt cu conținut în continuă schimbare. Paginile dinami ce susțin interacțiunea cu utilizatorul, cum
ar fi suport pentru comen tarii (este posibil să posede și unele co mentarii de suport pe partea de
client), suport pentru formular e web, etc. Este posibil să fie adaptat conținut ul specific pentru
utilizator c are vizualizează pagina. Poate susține c onectări ale utilizator ilor sau alte tehnici de
identificare a utilizatorilor, care permit să afișeze conținut unic și specific pentru fiecare client
diferit. Este posibil să fie afișa t conținut dinamic pe baza datelo r introduse de utilizator. Fiecare
site este o combinație din mai multe pagini web. Așa cum est e fiecare pagină web individuală care
poate fi statică sau dinamică . Un site web poate fi o combinație a acelor pagini web statice și
dinamice. În cazul în care site-ul conține numai pagini statice, atunci site -ul este un site web static.
Dacă, pe de altă parte, în cazul în care toate sau cele mai mul te dintre pagini sunt dinamice în

14
natura, atunci se poate de clasificat site-ul ca un site web dinamic. Totuși care site este considerat
mai bun … Totul depinde foarte mult de cerințel e și funcțiile pe care le dorește clientul pe sit e. In
mod ideal, site -ul va fi o combinație a celor două pagini statice și dinamice. Este av antajos să se
creeze pagini static e, cu excepția cazului în care se dorește funcționalitatea dinamică. Folosind
tehnologii dinamice pentru a crea un conținut static nu est e, probabil, cel mai bun (chiar dacă se
utilizează un cache). P agini le web, cum ar fi Despre noi sau Descrieri de produse / s ervicii (dacă
nu este e -commerce) sunt exemple concrete de pagini statice. Însă paginile web care trebuie să fie
actualizate în mod constant, în special cele bazate pe date introduse de utilizator sau starea altor
sisteme de bază vor trebui să fie dinamice [6.]
1.2 Tehnologii utilizate pentru dezvoltarea aplicațiilor Web
Înainte de a incepe crearea unei aplicații web ar trebui de cunoscut tehnologiile care
urmeaza a fi folosite.
HTML (Hypertext Markup Language) – este un limbaj de marcare folosit pentru a e ncoda
pagini Web. Suplinește browser -ului informații despre așezarea și prezentarea componentelor.
HTML este limbajul Web -ului, și fiecare dezvoltator ar trebui să aibe cunosți nte de baza asupra
lui.
CSS (Cascading Style Sheets) – stiluri în cascadă. Stilurile definesc cum elementele HTML
vor fi afișate. Stilurile externe permit schimbarea aparenței și așezarii fiecarei pagină din site -ul
tău, prin simplă ed itare a unui singur document.
XML -Unealta pentru a descrie datele XML, n u este un înlocuitor pentru HTML. XML
descrie date, în timp ce HTML afișează date. XML rulează pe mai multe platforme de soft și are
o unealtă independentă de hardware pentru a transmite date.
JavaScript – Scripting pe partea de client se referă la program area comportamentului unui
browser.
 JavaScript permite des ignerilor HTML o unealtă de bază la programare ;
 JavaSc ript poate face textul dinamic î ntr-o pagină Web ;
 JavaScript poate reacționa la evenimente ;
 JavaScript poate modifica elemente HTML ;
 JavaScript poate fi folosit pentru a valida date.
ASP sau PHP – Scripting pe partea de server este despre programarea unui serviciu pe Internet
în urma căruia se poate livra mai mult conținut dinamic. Cu scripting pe partea de server se pot:
 Edita dinamic, schimba sau adăuga noi elemente ;

15
 Răspunde la cereri ale utilizatorului ;
 Accesarea unei baze de date și întoarcerea rezultatului ;
 Accesa fișiere și î ntoarcerea unui rezultat în browser ;
 Transformarea XML în date HTML și î ntoarcerea rezultatului ;
 Personaliza o pagină web pentr u a o face mai folositoare fiecă rui utilizator în parte ;
 A oferi securitate la accesul paginilor web ;
 Diferenția output -ul în fu ncție de browser ;
 Limita pe cî t posibil transmiterea de date în retea .
SQL – este limbajul standard pentru accesarea și manipularea bazelor de date. SQL este folosit
pentru a accesa și manipula date în MySQL, SQL Server, MS Access, Oracle, Sybase, DB2, și alte
sisteme , baze de date. Cunoștințele SQL sunt importante pentru oricin e vrea să stochez e sau să
obțină date dintr -o bază de date. [3. pag 7]
1.3 Modelul client -server în aplicațiile web

Aplicațiile web client -server, sunt acele aplicații care se văd atunci cînd un client deschide
browser -ul și accesează un oarecare site . Logica aplicaților web este constituită între client și
server, păstrarea datelor pe server constituind un avantaj, iar schimbul de inf ormații este realizat
în rețea. Un avantaj al acestei abordări este faptul că clienții nu depind de un anumit sistem de
operare, de aceia aplicațiile web sunt cross -platform. A plicatii le web au devenit foarte populare la
sfarsitul anilor 1990 – începutul anilor 2000.
Există avantaj e pentru construirea unei aplicații w eb și acestea fiind caracte ristici standarde
ale browserelor astfel încît funcțiile care urmează să fie efectuate sunt independent e de sistemul
de operare al clien tului. În loc de a scrie pentru versiuni diferite de sisteme de operare Microsoft
Windows, Mac OS X, GNU / Linux și pentru alte sisteme de operare, aplicația este creată o s ingură
dată pentru o platformă și pe ea se lucrează . O singură diferență în realizare cu HTML, CSS, DOM
și alte specificații ale browser -ul pot cauza probleme în dezvoltarea de aplicaț ii web. În plus,
dorința utilizatorului de a personaliza multe dintre setările browser -ului (cum ar fi dimensiunea
fontului, culoarea ) poate împiedica fun cționarea corectă a aplicației.
Aplicatiile web sunt format e din partea client și partea server, realizî nd ast fel tehnologia
"client -server". Partea de client implementează o interfață de utilizator generează solicitări către
server și pr ocesează răspunsurile de la el. Partea de server primește o cerere din partea unui client,
efectuează calculele, apoi cree ază o pagi nă web și trimite client ului printr -o rețea , folosind
protocolul HTTP. [13]

16
II MANAGEMENTUL FRONT -END -ULUI ȘI A BACK -END -ULUI APLICAȚIILOR
WEB
Fiecare aplicație de succes cre ată unei companii sau unei firme este necesar să conțină atît
partea front -end (partea viz ibilă utilizatorului ), cît și partea back -end (partea de administrare).
Adesea datorită back -end-ului creat cu un design corespunzător și intuitiv poate economisi o
mulțime de bani prin simplu fapt că se exclude necesitate a unui programator, care necesită un
salariu destul de mare.
2.1. Front -end-ul aplicațiilor Web
Front-end-ul, este acea parte a site -ului sau a aplicației web, care se vede și cu care
interacționează fiecare utilizator. Front -end-ul are două părți: design -ul (partea creativă) și
dezvoltarea interfeței (partea de cod sau implementare HTML , CSS, JS). În trecut, partea Frond –
end era privită unitar, însă în ultimii ani a apărut necesitatea tot mai mare de a face diferențierea
între partea de design grafi c (ce se vede efectiv) și partea de implementare (cum funcționează ce
se vede, cu ajutorul HTML , CSS, JavaScript ). Așa a apărut de fapt și diferențierea de roluri între
designer și front -end developer. Atunci cînd se decide de a începe un proi ect online, este bine de
înțeles aceste roluri diferite, pentru a nu avea niște așteptări nerealiste de la designer sau pentru a
nu subestima rolul front -end developerului. Există, persoane care au cunoștințe în ambele domenii,
însă, de obicei, se întâlnes c mai rar, deoarece fiecare se specializează în domeniul care îi place .
Astfel tot ce se vede cînd se utilizează internetul este o combinație de HTML, CSS și JavaScript,
toate fiind controlate de browser -ul folosit. Acest ea includ elemente precum font -uri, meniuri,
butoane, tranziții, formulare de contact, etc. În zadar arată bine, dacă nu sunt implementate
corespunzător, sau degeaba funcționează bine, dacă nu arată bine. Deci, pentru a putea gestiona
introduce și gestiona informațiile vizibile în elementele de interfață, este nevoie de o consolă de
administrare. Aceasta poate fi creată de programator sau poate fi open -source, adaptată fiecărui
proiect , cu ajutorul programelor WordPress, Joomla, Magento, Dru pal, etc. Acesta este Back –
End-ul. [7.]
Frontend -ul aplicației web mai este numită și interfață grafică pentru utilizator. Interfața
web este constituită dintr -un set de instrumente cu care utilizatorul interacționează cu site -ul, sau
orice altă aplicație prin intermediul unui browser. I nterfețe le web sunt utilizate pe scară largă odată
cu creșterea popularității a World Wide Web , în l oc de răspîndirea browsere lor web. Una dintre
principalele cerințe pentru interfețe le w eb este că trebu i să conțină același aspect și a ceeași
funcționalitate atunci cînd sunt accesate în diferite browsere. Metoda clasică și cea mai populară
de a crea o int erfață web este de a folosi HTML, CSS și JavaScript . Cu toate ac estea, diferite

17
implementari de HTML, CSS, DOM și alte specificații în browsere cauzează proble me în
dezvoltarea aplicațiilor w eb și accesarea ulterioară a acestora. Î n plus, capacitatea utili zatorului de
a personaliza multe dintre setările browser -ului (cum ar fi dimensiunea fontului, culoarea, scripting
off) poate împiedica f uncționarea corectă a interfețelor . O altă metodă pentru crearea interfețelor
web (mai puțin univers ală) este de a util iza Adobe Flash, Silverlight sa u Java -applet -uri pentru
dezvoltarea interfeței în întregime sau a unei parți din interfață pentru utilizator . Deoarece cele mai
multe browsere acceptă aceste tehnologii (de obicei, prin intermediul plug -in-uri), aplicaț iile
bazate pe J ava pot rula cu ușurință. Din moment ce acestea oferă programatorului controlul asupra
interfeței, pot apărea multe neconcordanțe cu configurațiile browsere lor. În prezent, se cî știgă
popularitate în dezvoltărea interfeței aplicației web cu Aja x. Atunci cînd se utilizează interfețe
Ajax, la executare a lor nefiind compilat tot codul, dar numai datele necesare de la server, făcî ndu-
l mai interactiv și mai productiv. [14]
2.1.1 Managementul front -end-ului

Un site web este una dintre cele mai simple modalități de distribuire a informațiilor atît
pentru organizații cît și pentru persoane fizice. Tehnologiile dezvoltate pentru World Wide Web
pot să ia prin surprindere atît organizațiile mici cît și pe cele mar i, acestea văzînd Internetul și web –
ul ca și mecanisme cheie pentru găsirea clienților, pentru distribuirea informațiilor printre aceștia,
printre furnizori și distribuitori. În același timp, organizațiile își dau seama că aceleași tehnologii
utilizate în interiorul rețelelor locale sau de mai mare întindere (intraneturi, de exemplu) oferă
mecanisme scalabile, flexibile și ușor de utilizat atît pentru partajarea informațiilor cît și pentru
dezvoltarea și instalarea de unelte pentru bunul mers al organizație i. Nu cu mult timp în urmă,
instalarea și managementul conținutului unui intranet era o „artă neagră”, cunoscută și utilizată
numai de webmaster -i.
Managementul front -endului presupune planificarea soluției pentru front -end, design -ul
interfeței -utilizator, design -ul comodității interacțiunii cu utilizatorul, realizarea soluției propuse
și urmărirea procesului de realizare, testarea produsului obținut, îmbunățățirea (dacă este
necesară).
2.1.2 Responsive design

După cum sugerează și numele, Responsive Web Design se referă la generarea
răspun sului, la cererea utilizatorului indiferent de dispozitiv sau platformă. În esență, este un
design care poate fi aclimatizat la orice rezoluție a ecranului. Responsive Web De sign, începe să

18
meargă dincolo de aceaste descrieri, însă este recunoscut în mod tradițion al de trei concepte
principale:
1. Grile fluid e – Un aranjament sau organizarea conținutului lipsit de o lățime fixă, ca re
este compus din intersecții vertical e și linii orizontale. Această grilă este utilizată pentru a structura
conținut ul într-un mod previzibil și coerent prin ajustare a dimensiunii și a poziționării a
elementelor conținute în pagină.
2. Imagini flexibile – Orice conținut vizual sau media, care s e ajustează pentru a se potrivi
dimensiunea ecranului unui utilizator. De obicei, acest ea sunt imagini plasate într -un grila flexibil
care are regula CSS max -width aplicat la 100%. În termeni simpli, acest lucru împiedică imag inile
de a fi mai mar i decî t grilele în care sunt plasate permițî nd în același t imp, de asemenea, imaginilor
să fie redimensiona te, fără a sacrifica din raportul lor de aspect. Pentru a evita timpul
de încărcare, proiectanții pot comprima rezoluțiile imaginilor " cînd sunt afișate pe dispozitive mai
mici. O altă metodă este de a stabili lățime a ca procent din lăț imea paginii în ansamblu. Acest a
asigură o diferență consist entă între dimensiunea imaginii și dimensiunea paginii, ceea ce
înseamnă că, indiferent de modul în care lățimea paginii este manipulată , imaginea va apărea
întotde auna dimensionată ca un procent din această lățime a imaginii din site -ul dat .
3. Interogări media – Un modul CSS3 care controlează modul î n care stilurile din ca dru
se aplică atributul ui media. Sunt apli cate diferite stiluri în conformitate cu o serie de calități
specifice ale dispozitivului, cum ar fi ecran lățime, înălțime, orientare, etc. Aceste pietre de temelie
formează baza a ceea ce noi înțelegem ca Responsive Web Design. Exi stă, totuși, alte idei asociate
care au devenit mai mult sau mai puț in sinonim e cu RWD. Va fi interesant pentr u cei cointeresați
de web design cum va evalua RWD . Recent, chiar s -a vorbit de extinderea RWD -ului pentru a
include capacități de dispozitiv unic (cum ar fi comenzi specifice pe un ecran tactil). Diversitatea
dispozitive lor folosite pentru a naviga pe site-uri este doar în creștere , și a devenit o așteptare
pentru utilizatorii care accesează des destinațiile lor preferate pe web. Design -ul trebuie să
răspundă fiecă rui dispozitiv folosit de utilizator . [11, p.9 -10]
Tehnica Responsive Web Design a apărut pentru că acest lucru să nu mai afecteze modul
în care o pagină este accesată de diferite dispozitive . Cu alte cuvinte, Responsive Web Design
reprezintă tehnica ce s ugerează că design -ul web trebuie să răspundă comportamentului și
mediului utilizatorului în funcț ie d e rezoluția ecranului, platformă și orientare. Această
metodologie a fost prima oară discutată de către Ethan Marcotte în mai 2010 î n
articolul Responsive Web Design unde spune că Responsive Web Design nu este doar o simplă
metodă nouă de a rea liza website -uri, ci mai degrabă un nou tip de gînd ire.
Tehnica Responsive Web Design ajută vizitatorii , prin o ferirea unui website adaptabil în

19
funcție de rezoluț ia dispozitivului folosit pentru vizualizarea acestuia. Aceast lucru se obț ine prin
folosirea de media query -uri de CSS3, imag ini flexibile, grid-uri fluide ș i multe altele. Creative
Web Desig n oferă o asemenea platformă complexă și flexibilă, foarte ușor de folosit ș i de
administrat . În ziua de azi, Respons ive Web Design nu mai reprezintă o tehnică nouă în teste, ci o
tehnică în tendințe, poat e chiar cea mai folosită din începutul anului 2013 deoarece tot mai mulț i
propietari de website -uri vor să ofere o experiență cît mai placută utilizatorilor precum tot mai
mulți utilizatori folosesc internetul mobil, tot mai multe tel efoane, tablete și dis pozitive mobile își
fac loc în viața de zi cu zi. Pentru a ușura această tehnică de Responsive Web Design, au apărut
tot mai multe framework -uri. Prin tre cele mai cunoscute se numară Bootstrap, Foundation și
Skeleton. Din fericire, dezvoltarea unui w eb des ign responsive nu necesită multe cunoștințe și cu
siguranță este o tehnică mai productivă și mai puțin stresantă decît de învățat cum de făcut design
și coding p entru fiecare dispozitiv mobil î n parte. Se poate de spus că am intrat într -o era nouă î n
domeniul web design . Avînd la dispoziție o sumedenie de unelte și opțiuni pentru a crea website –
uri și nenumă rate elemente de luat î n considerare. Cu siguranță fiecare dorește să realizeze website –
uri ce vor fi funționale și î n viitor, iar asta se p oate face folosind exact această tehnică responsive
web design. Bineînteles î nsa că tehnica Responsive Web Design nu este singur a ce va revoluț iona
domeniul web. Această tehnică este mai mult un con cept care cî nd este realizat ă corect, poate
îmbunatați foarte mult experienț a programatorului , dar nu putînd rezolva orice dorință a oricărui
utilizator, platformă sau dispozitiv. În permane nță se va lucra cu dispozitive, rezoluții și tehnologii
noi pentr u a îmbu nătați experiența programatorilor în anii ce vor urma. Pe langă faptul că ne fereș te
de multe frustră ri, tehnica Responsive Web Desi gn este de asemenea foarte utilă ș i pentru
vizitatorii unui website. Practic, prin Responsive Web Design se realizează soluț ii personalizate
pentru o varietate de utilizatori folosind o varietate d e dispozitive mobile ce prezintă o varietate
de rezoluții, browsere și specificaț ii. Cu alte cuvinte, tehnica Responsi ve Web Design încearcă să
producă o experiență pl acută și personalizată pentru fiecare utilizator î n parte. [10.]

20
2.1.3. Cross -platform

În ultimii ani, dizainerii și -au schimbat stilul de proiectare a paginilor web. Multe dintre
aceste aplicații au fost reconstruite pentru a oferi rezultate cross -platform, pentru desktop, tablete
și dispozitive mobile. Timp de mulți ani, tot ce era nevoie era un site pentru desktop, dar pe măsură
ce tehnologia a e voluat au început să -și facă apariția telefoanele inteligente împreună cu tabletele.
Întreprinderile au început să profite de aceste noi t ehnologii, pentru că acestea reprezentau o nouă
oportunitate de marketing, care continuă să crească. Inițial, unele companii au început să răspundă
numai pentru dispozitivele mobi le. O astfel de companie este GoMobi care a creat o platformă
mobilă și web design care o poate utiliza pentru peste 6.000 de telefoane inteligente. [9]
Acum , în secolul 21 , telefoane le mobile înloc uiesc utilizarea de laptop -uri și des ktop-uri
pe scară ma re. Companiile de sisteme de operare oferă mai multe resurs e pentru crearea de aplicații
pe cerințele utilizatorilor. Dar din cauza utilizării diferitelor sisteme de operare, devine o problemă
pentru dezvoltator pentru a dezvolta aplicația pentru fiecare s istem de operare în mod individual.
Există diverse mobil e cu sisteme de operare diferit cum ar fi Android, i OS, BlackBerry, Windows,
etc. Fiecare sistem de operare are aplicațiile sa le proprii de specializare c are diferă de la un sistem
de operare la altul . Astfel încî t clientul trebuie să utilizeze mai mult de un sistem de operare mobil
pentru a și îndeplini cerințele . Această problemă a fost rezolvată prin intermediului cross platform
folosind PhoneGap. Acesta ajutînd dezvoltatorii să pună în aplicare apli cația care ar sprijini mai
mult de un sistem de op erare. Utilizează diferite limbaje , cum ar fi HTML5, Java Script, CSS3,
etc Ac centul principal este de a avea codul sursă unic pentru t oate sistemele de operare. HTML5,
a 5-a versiune de HTML, este cea mai recentă tehnologie web cu caracteristici multimedia bogate
și caracteristici de interoperabilitate pentru smartphone -uri și tablete . Aplicațiile web dezvoltate
cu HTML5 pot fi accesat e pe browse rele mobile și rulează pe diferite platforme mob ile. HTML5
oferă asistență offline prin intermediul datelor loc ale și punerea în cache , fără a fi n evoie de
conexiune la internet .[8,p.1095 -1096]
Dezvoltarea de aplicații pentru mediul mobil și anume cu CSS2 deja nu mai este utilizat .
Cu toate acestea, o problemă majoră nu a dispărut: avînd un deficit de spațiu de ecran mereu. O
dimensiune nu se potrivește cu toate dispozitivele. Este evident faptul că fereastra de browser -ul
mobil este mai mică decît un browser PC. Pentru unele site -uri ar putea fi o abordare vali dă "
mărimele se potrivesc în toate cazurile", dar în majoritatea cazurilor fișiere le HTML -CSS sunt
necompatibile cu browser ul. Pe ecran mare, se utilizează aspectul multi coloană, iar pe telefonul
mobil o singură coloană. În funcție de mărimea dispozitiv ului poate fi ne cesar schimbarea
aspectului paginii: de exemplu, pe un PC este mai ușor de citit un pachet de trei coloane, însă

21
ecranul dispozitivelor mobil e fiind mai mic pune aceste trei coloane, î n una . Web design mobil ar
trebui să fie cît mai simplu posibil. [12, p. 28]
2.2 Back -end-ul aplicațiilor Web
Back -End-ul de obicei constă în trei părți: un server, o aplicație pentru interfață și o bază
de date. Rolul principal al acestuia este cel de m anagement de conținut. Adică cum sunt introduse
paginile, textele și alte elemente în site. Back -end-ul se ocupa de administrate a infor mațiilor într-
un magazin online. Prin urmare prin Back -End se înțelege , “interfața pentru administratori”.
Persoanele care lucrează la partea de Back -End sunt numiți programator i, sau back -end developer.
Cunoștințele necesare pentru elaborarea back -end-ului sunt diferite de cele ale unui programator
ce se ocupă de front -end developer, fiind mult mai adî ncite în zona de programare. Tehnologiile
de Back -End de obicei constau în limb aje precum PHP, Ruby , Python , etc. Pentru a le face și mai
ușor de folosit, sunt îmbunătă țite cu framework -uri precum Ruby on Rails, Cake PHP sau Code
Igniter, care ajută la o dezvoltarea mult mai rapidă și mai eficientă. Mulți probabil au auzit de
WordPress. Acesta fiind un foarte bun exemplu de Front -End și de Back -End care lucrează
împreună , deoarece WordPress este un framework open -source constru it pe PHP, pe care trebuie
de instalat pe un server local sau un server online împreună cu o bază de date. Pe lîngă acest aspect,
pe partea grafică, designerii au creeat și personalizeat aspectul (cu o temă dezvoltă de la 0, fie cu
o temă deja existentă) și front -end developerii personalizează funcționalitățile f olosind HTML,
CSS și Javascript .[7]
2.3 Caracteristica managementului front -end-ului a plicațiilor Web
Deținerea unui site este un avantaj pentru orice organizație, indiferent de sectorul său
industrial sau de activitatea pe care o desfășoară. Site -ul joacă un rol puternic al imaginii
companiei . Acesta transmițind în multe limbi diferite ace lași mesaj ca re se dorește de ajuns la
utilizator . Totuși, multe site -uri din internet sunt, î n prezent, reconstruite, prin faptul că vizitatorii
accesează cu dificultate informațiile necesare. Navigarea nu este întotdeauna intuitivă, iar
vizitatorii pot întîmpina difi cultăți atunci cî nd doresc să acceseze ceva . Și anume aici vine în ajutor
managementul fron -end-ului care are rolul de aranjare a elementelor în pagină astfel încît
utilizatorul să poată naviga intuitiv chiar și să îi stirnească dorința de a vizualiza și alte pagini.
Culorile nu trebu să fie aprinse deoarece după o utilizare mai lungă a paginii w eb poate apărea
oboseala , un exemplu de culoare potrivit ar fi culoarea de fundal al facebook -ului, care nu este
deloc obositoare. Deasemenea imaginile joacă un rol destul de import în orce web site, deoarece
un site pur informativ nu este recomandat și viceversa de aceia imaginile sunt neces are, și aici

22
putem spun e ca imaginile obligatoriu să fie calitative în caz contrar vizitatorul poate creade că nu
este un site de încredere . După standartele Europei meniul nu trebu să conțină mai mult de 20%
din pagină .
Orice site web este navigat fie de sus în jos, fie (foarte rar) de la stî nga la dreapta, adică pe
verticală sau pe orizontală. În acest sens, trebuie stabilite principalele linii verticale și orizontale
în layout. Aceste linii nu vor fi întotdeauna vizibile în designul final, ci sunt linii orientative, de
lucru, sau implicite, perceptibile la nivel vizual la o privire mai atentă. Acestea trebuie definite în
mare parte de doi factori: număr de coloane și de secțiuni. Secțiunile esențiale într -un design de
interfață a unui site sunt antetul, bara de navigare, partea de conținut – articol, bară la terală și
subsolul ( vezi fig. 2 ).

Figura 2 Secțiunile principale într -un layout de site
În antet trebuie să apară titlul siteului (numele instituției, corporației sau a persoanei fizice),
sigla și opțional un moto, o mini -bară cu facilități precum căutare în site, schimbarea limbii și date
de contact succinte. Bara de meniuri într -un site poate fi compusă din mai multe componente și
funcționalități, în funcție de cî t de bogat este în conținut site -ul. O bară de meniuri este constituită
din elemente vizuale și/sau de tip text care permit utilizatorilor să navigheze între diferitele pagini
ale site -ului în vederea satisfacerii nevoii de informare prin conținutul pus la di spoziție. Ca o primă
etapă, se definesc meniurile principale, și în cazul unui site extins, ierarhia conținutului, a
paginilor. Designerul stabilește cum vor fi orientate în interfață: pe verticală sau pe oriz ontală.
Meniurile aflate mai adî nc în ierarhie (adică submeniuri de multiple nivele) pot fi afișate implicit
sau în urma unui anumit tip de interacțiune cu site -ul care determină apariția acestora. De obicei,

23
în designul de interfețe pentru site -uri cu o cantitate medie de conținut, apare o bară de men iuri
orizontală și o coloană pentru cele de nivelul doi și trei. O altă variantă pentru a avea meniuri cu
multiple nivele este folosirea meniuri lor în cascadă care apar doar cî nd mouse -ul se află deasupra
unui buton. În secțiunea dedicată conținutului, se poate stabili cum apar titlurile, subtitluril e,
tabelele, coloanelele în articol etc. Opțional se poate folosi în design și o bară laterală pentru a
oferi utilizatorilor funcționalități în plus sau doar pentru a afișa mai multe legături sau informații
cu privire la conținut. În partea de subsol a site -ului de obicei apar elemente precum mențiuni de
drepturi de autor, sigle, date de contact, legături la pagini mai puțin importante și alte facilități.
Pentru un design profesional, alinierea elementelor în int erfață este foarte importantă. Nu este
admis să fie elementele decalate, pe verticală sau pe orizontală. Este imperativ ca designerul să
dea atenție deosebită interfețelor, pentru ca elementele să fie bine poziționate și aliniate. După cum
s-a reliefat în ilustrațiile de mai sus, textele din diferitele secțiuni trebuie să fie aliniate pe verticală,
la nivel de pixel: antet, bara laterală și subsol. Iar pe orizontală, în secțiunea de conținut, textele
din coloane, inclusiv în bara laterală, trebuie să fie po ziționate la același nivel. Ca o regulă, aceste
distanțe, adică spațieri, trebuie respectate și în restul designului. Se poate observa că spațiile sunt
egale în stângă și dreapta coloanelor, la fel și în plan orizontal. Trebuie subliniat faptul că și cel
mai mic element de design trebuie să fie aliniat corespunzăt or: un buton, un text în subsol etc.
Spațierea corespunzătoare a elementelor în design și a textelor față de marginile elementelor din
interfață în care se găsesc este iarăși un aspect important, d eoarece, în final, gradul de frumusețe
perceput și nivelul de satisfacție a utilizatorii site -ului vor fi în mod direct influențate. O interfață
ticsită și înghesuită cu mult text mic, cu multe chenare mici și eventual dispuse incorect, fără
aliniere cores punzăto are, va fi în mod cert neplăcut pentru utilizatori și va determina o in satisfacție
oricărui utilizator . O interfață profesională trebuie să ofere o stare de „libertate”, „aer” vizitatorilor
săi. Asta este posibil doar dacă designerul utilizează spaț ii destul de largi între elementele din
design și cu texte mari car e să fie poziționate astfel încî t să existe spații, recomandabil egale, între
marginile chenarelor . Designerii au la dispoziția lor mai multe moduri de a alinia în mod corect
elementele înt r-un design și de a -și facilita acest proces. Există site -uri online care ajută la
generarea de grilaje, fie pentru implementarea designului în CSS/HTML, fie pentru programe
precum Photoshop – utilizate pentru realizarea de astfel de interfețe. Un astfel d e site, probabil unul
din cele mai cunoscute de acest fel este „960 Grid Syst em” realizat de Nathan Smith . În Photoshop
și alte programe de design, utilizatorii au la dispoziție tot felul de facilități care ușurează
considerabil alinierea elementelor: lin ii de ghidaj, rigl e și op țiuni de facilitarea procesului de
repoziționare a fiecărui obiect prin mutarea asistată, care magnetizează elementul în mișcare față
de restul elementelor sau a liniilor de ghidare. Un alt aspect care trebuie luat în considerare î n

24
procesul de realizare a unei interfețe de site este proporția între elemente din design și secțiuni. În
acest sens, designerul trebuie să stabilească o ierarhie vizuală bazată pe importanța elementelor
exprimată prin dimensiunea lor. Nu este recomandat c a titlurile în site să fie foarte mici, iar corp ul
textului să fie mai mare decît acestea sau decî t meniurile principale. Meniurile de nivelul do i au o
dimensiune mai mică decî t meniurile principale. De obicei, antetul siteului și bara de meniuri
principal e trebuie să aibă dimensiuni mai mari, iar titlurile din conț inut să fie iarăși mai mari decî t
textul propriu -zis. Antetul este considerabil mai înalt ca subsolul site -ului, însă aceasta nu este o
regulă clară. În subsol este de preferat ca textele să fie mai mici decî t în conținut și sa nu fie prea
intens ca design. Site -urile să se poată accesa pe ecrane de diferite rezoluții (1024 x 768, 1600 x
1200, 1920 x 1080) sau pe dispozitive cum ar fi telefoane mobile, televizoare sau altele. Este de
dorit ca prim ele lucruri pe care le vede utilizatorul pe ecran să fie și cele mai importante. Astfel
navigî nd pe Internet fiecare utiliator dorînd să vadă un antet și conținut în loc de subsol un mare.
Astfel, apărînd și cîteva caracteristici și proprietăți vizuale pe care elementele din design le pot
avea și pe care designerul le utilizează pentru a impune la nivel vizual o ierarhie a acestora în
funcție de importanța lor: poziționarea, dimensiunea și culoarea. Stabilirea importanței
elementelor funcționale și decorat ive din design poate facilita considerabil procesul creativ. Un
design pr ofesional trebuie să răspundă cî t mai bine întrebării: „ce vr ea utilizatorul să vadă mai
întîi?”. În partea superioară a site -urilor trebuie afișate funcționalitățile imediat necesare
utilizatorilor: schimbare de limbă, contact, bara de meniuri pentru navigare și titlul siteului. Antetul
nu trebuie să ocupe tot ecranul, deoarece utilizatorii vor să aibă o privire asupra conținutului
imediat după ce se schimbă pagina. În subsolul site -ului trebuie puse elementele funcționale
neimportante și informații mai puțin relevante. Trebuie luat în calcul ce utilizatori vor naviga pe
site, ce rezoluții vor folosi pentru a alege conștiincios poziția și dimensiunea elementelor din
design. Un alt mod de a argu menta importanța elementelor în design este prin folosirea abilă a
nuanțelor și a culorilor. Pentru a reduce importanța unui element trebuie folosite cul ori mai puțin
stridente . De exemplu, un cî mp de text pentru căutare aflat în ante t poate fi es tompat, astfel încî t
să nu fie pronunțat și să apară privitorului doar la o privire mai atentă asupra site -ului. Un designer
are un grad ridicat de libertate în a alege ce elemente apar în diferitele secțiuni ale designului și
cum sunt afișate. Însă apar constrî ngeri și limitări datorită mai multor factori exogeni, precum:
accesibilitate, comportamentul utilizatorilor pe Internet, scopul site -ului, cerințele și pret ențiile
clientului etc. Toți acești factori, în fapt, îngrădesc con siderabil libertatea designerului, mai ales
dacă sunt luați în calcul în mod s trict. [13, pag. 14 -16]

25
III DEZVOLTAREA APLICAȚIEI DE TIP „ MAGAZIN ON -LINE ”

Aplicația a fost elaborată în cîteva etape: mai întii a fost gî ndită interfața -utilizator și au
fost analizate tehnologiile care vor permite realizarea aplicației web cu această interfață.
Apoi a fost instalat framework -ul „prestashop ” pe serverul local cît și pe serverul public
(hostinger.ro).
După instalarea fram ework -ului a fost importată tema “zBlueStore” .
Următoarea etapă a constat din dezvoltarea aplicației , a front -end-ului cît și a back -end-
ului, cu ajutorului framework -ului instalat. Pentru o viteză mai bună toate încercarile au fost făcute
mai înt îi pe s erverul local la care timpul de răspuns este mult mai rapid și fară întreruperi , dar și
pentru o eventuală sigurnță în caz de erori.
În final a fost testată interfața dacă satisface cerința de cross -platform, dacă se adaptează
pentru diferite dispozitive de ieșire a utilizatorului și dacă se combină reușit fonturile și culo rile
utilizate.
3.1 Formularea problemei
Este necesar să se dezvolte o aplicație web care să conțină partea front -end și partea back –
end. Scopul principal este ca aplicția să fie func țională și să aiba o securitate sporită, putînd rezista
mediului agresiv și a hacherilor cu intenții răufăcătoare. Toate procesele și acțiunile efectuate de
către administrator sau orcare client (vizitator) vor fi stocate într -o bază de date care va fi
accesibilă doar pentru adm inistrator, autentificarea fiind cu login și parolă pentru o securitate mai
bună.
Principalele sarcini propuse spre realizare :
 Aplicația trebuie să aibă obligatoriu o legătura la baza de date;
 Autentificarea pe partea back -end să fie bine securizată, cu un grad mare de siguranță;
 Autentificarea pe partea de front -end să fie obligatorie ;
 Autenti ficarea pe partea de front -end email ul să fie oligatoriu ;
 Posibilitatea vizualizării site-ului în mai multe limbi internaționale (rusă, ro mână,
engleză) ;
 Crearea unei interfețe prietenoase, intuitive , ușoară de utilizat , pentru administrarea
conținutului Web;
 Posibilitatea unui Update rapid – adică preluarea modificărilor și noile pagini create, în
timp real;
 Adaptabilitatea restructurării și redesign -ului interfeței paginilor;

26
 Securitate spor ită prin acces controlat (drepturi diferențiate de utilizatori, acces pe bază
de roluri / profil);
 Gradului de repetabilitate a informațiilo r în cadrul site -ului fiind cît mai redus .
Site-ul web , obligatoriu va conține două secțiuni:
– front -end (partea viz ibilă a aplicației);
– back -end (utilizarea unui framework pentru managementul conținutului care va incl ude o
interfață prietenoasă, permițînd utilizarea intuitivă , astfel încî t pentru actualiza rea site -ului ș i a
tuturo r modulelor portalului nefiind necesară o pregătire tehnică de specialitate a persoanelor care
vor fi desemnate pentru a realiza modificări de conținut). Portalul fiind ușor administrabil și să
permită acces diferențiat în interfaț a de administrare, pentru publicarea conținutului. Accesul
diferențiat în zona de administrare se referă la drepturi diferite de publicare a conținutului, funcție
de rolul asignat persoanei respective în cadrul proiectului. De asemenea, la orice moment fiind
posibilă verifica rea, cine și la ce data a postat /șters un anumit articol în site. Pentru partea de back –
end, accesul fiind pe bază de username și parolă, iar aplicația va oferi posibilitatea de publicare a
informației doar în funcție de drepturile de acces ale utilizatorilor, definite de administrator.
Administratorul putînd realiza managementul utilizatorilor (creare/ștergere/alocare drepturi)
direct din interfața de administra re.
3.2 Modelarea soluției aplicației
Aplicația oferă posibilitatea utilizatorilor de a vedea produsele puse l a dispoziție într -un
mod plăcut prin intermediul modulelor instalate . De asemenea, secțiunea Noutăți , Cele mai
cumpărate , Cele mai căutate (vezi fig.3)

Figura 3 Meniu adițional
din site permite filtra rea produselor dupa gradul lor de vizualizare în baza statisticilor în tabloul
de bo ard a partei de back -end, deasemenea produsele noi care au fost adaugate recent , se pot găsi
usor în secțiunea Nout ăți. Alte facilități ce posedă aplicția fiind abonare la Buletinul Informativ
(vezi fig. 3.1 ).

27

Figura 3.1 Abonare la buletinul informativ
unde utilizatorul introducînd emailul, va primi cele mai noi date despre produsele noi sau reduceri.
Prin intermedi ul feed -urilor RSS (vezi fig. 3.2 ),

Figura 3.2 Alte informații adiționale și RSS
utilizatorul poate obține în timp real și în mod gratuit informații de pe website -urile Internet,
folosind un soft pentru vizualizare de pe website -urile care oferă aceste servicii (ex my.yahoo.com,
reader.goog le.com etc., iar acum Cheapclothes). Pentru administratorul website -ului, avantajul
constă în faptul că poate utiliza feed -urile RSS pentru a îmbogăți conținutul său cu informați i aduse
continuu la zi. În sectiunea Contactați -ne (vezi fig. 3.3 )

Figura 3.3 Secțiunea contactați -ne

28
dorindu -se a fi un spațiu pus la dispo zitia utilizatorilor, care să dea acestora posibilitatea de
exprimare prin serviciul de blog pus la dispozitie, în cazul aparițiilor unei probleme întimpinate
la efectuarea comenzii sau chiar în condițiile în care comanda nu a fost ajunsă la destinație etc.
Website -ul respectă atît brandul Cheapclothes (vezi fig. 3.4 ),

Figura 3.4 Logo site -ului
cît și strategia de marketing a acestuia și corespunde standardelor în vigoare la nivel internațional.
Secțiunea de fro nt-end este destinată clienților care este dezvoltată la nivel corespunzător și ușor
de gasit produsul pentru fiecare . Meniul este amplasat în partea de sus avînd rubricile Produse ,
Femei , Barbați , Copii , Reduceri , Lichidare de stoc , (vezi fig. 3.5)

Figura 3.5 Meniu principal
unde în rubrica Produse se conține toate elementele meniului (vezi fig. 3.6 ),

Figura 3.6 Subcategoriile conținute în rubrica produse

29
eventual pentru fiecare categorie se gasește produsele respective. Elementele de grafică se
respectă cu strictețe . Fonturile sunt alese corespunzător pentru text fiind plăcut la vedere, în
concordanță cu culorile l ogo-ului. Sistemul de navigare fiind intuitiv, axat pe conceptul "user –
friendly", accesibil oricui indiferent de experiența în materie de navigare pe web. Produse utile,
împărțit e pe secțiuni de interes, bine structurate: Produse , Femei , Bărbați , Copii , Reduceri ,
Lichidare de stoc . Back -end administrarea produselor din front -end se realizează prin intermediul
back -end-ului și poate fi efectuată foarte ușor prin intermediu l interfeței web (vezi fig. 3.7, 3.8 ),

Figura 3.7 Logarea pentru p artea de back -end

30

Figura 3.8 Interfața back -end
astfel asigurî ndu-se posibilitatea de actualizare continuă (în timp real) a conținutului. Sistemul
CMS implementat are marele avantaj de a facilita actualizarea și menținerea website -ului,
asigurî nd astfel calitatea și acuratețea conținutului, fără prea multă investiție de timp, umană și
materială. Astfel, partea de back -end a website -ului oferă o infrastructură adecvată pentru
manevrarea conținutului unui website modern de dimensiuni mari care pune la disp oziția autorilor
nespecializați pe IT o modalitate rap idă de a adăuga conținut (vezi fig. 3.9 ).

31

Figura 3.9 Adăugarea unui produs nou
Utilizarea template -urilor specifice CMS -urilor permite schimbarea foarte rapidă a
conținutului, separat de design. Componentele acestei interfețe sunt organizate în secțiuni
principale, în marea majoritate corespunzătoare rubricilor din front -end: Produse , Femei ,
Bărbați , Copii , Reduceri , Lichidare de stoc etc. Administrarea rubricilor din front -end se
realizează prin intermediul back -end-ului și poate fi efectuată foarte ușor prin intermediu l interfeței
web, astfel asigurî ndu-se posibilitatea de actualizare continuă (în timp real) a conținutului.
Sistemul CMS implementat pentru Cheapclothes are marele avantaj de a facilita actualizarea și
menținerea website -ului, asigurî nd astfel calitatea și acuratețea conținutului, fără prea multă
investiție de timp, umană și materială. Fiecare d intre categorii este la rîndul ei împărțită în
subcategorii . Să luăm ca exemplu Categoria Bărbați. Aceasta la rîndul ei conține 9 subcategorii
(vezi fig. 3.10 ).

32

Figura 3.10 Subcategoriile din categoria Bărbați
Modificare a acestei categorii se realizează foarte simplu prin intermediul back -end-ului (vezi fig.
3.11),

33

Figura 3.11 Editarea unei categorii
se selectează din meniul stîng rubrica catalog apoi categorii, văzind astfel toate categoriile se apasă
modificare pe categoria dorită și se face modificarea acolo unde este necesară schimbarea,
asemănător se procedează și pentru adaugarea unei categorii sau stergerea. Uploadare poze (vezi
fig. 3.12 )

34

Figura 3.12 Adaugare poze a unui produs
este u nul dintre avantajele pe care siste mul CMS îl aduce în cazul Cheapclothes unde oferă
posibilitatea adăugării rapide de informații dintr -o bază de date deja existentă, fără a fi necesară
rescrierea acesteia. Ut ilitatea acestei funcții este eviden tă, mai ales în cazul produselor care trebuie
actualizate în mod frecvent, cum a r fi de exemplu subcategoria Reduceri sau Lichidare de Stoc .
Aici, informația poate fi importată direct dintr -un fișier Excel. Simplitatea ș i structurarea adecvată
a interfeței face ca accesul la partea de back -end a website -ului să poată fi acordată pe niveluri, în
funcție de atribuțiile utilizatorului respectiv, pentru a evita astfel eventualele erori care ar putea
apărea în redactarea conți nutului de către o persoană neautorizată. Administratorul website -ului
determină responsabilitățile și limitele de acces ale fiecărui utilizator din secțiunea
"Administrare, Permisiuni " (vezi fig. 3.13 ).

35

Figura 3.13 Back -end administrare permisiuni
De exemplu, un utilizator se ocupă de modificare produse, categorii, comenzi, facturi,
altcineva se ocupa de depozit, comenzi de aprovizionare etc.
3.3 Managementul front -end-ului aplicaț iei
Interfaț a aplicaț ii web este orientată pe utilizator sau vizitator al site-ului care este sprijinit ă
de căutarea de informații și totodată se facili tează orice tip de interacț iune cu site -ul (vezi fig.
3.14).

Figura 3.14 Pagina principală

36
Mai clar spus , interfaț a de site nu se află în calea vizitatorului sau să distragă atenția pr intr-
un design prea încărcat. Sunt reduși la minim numărul de pași necesari pentru a ajunge la
infor mații. Utilizatorul poate să efectueze operaț iunile care se află pe site . Interfaț a este „centrată”
pe utilizator, concepută anume pentru utili zator. Structura site -ului și funcționalităț ile sunt gîndite
astfel încî t utilizatorul să nu fie confuz cî nd ajunge pe site, din cauza numărul prea bogat de pagini
sau de funcț ionalitățile mai mult sau mai puțin utile . În acest sens, conț inutul este cî t se poate la
obiect, succint și clar. Structura site-ului este este cî t mai simplă , iar func ționalităț ile oferite au un
nivel de relevanță cît se poate de înalt.
Înainte de a începe realizarea siteului au fost studiați concurenții , consumatorii , potențiali
utilizatori ai site -ului, nevoile și competenț ele acestora. Au fost stabilite ce funcționalități sunt
necesare ( căutare , blog, RSS, etc), ce funcț ionalități ar dori potențialii utilizatori ai site -ului, ce
tip de inte rfețe îi atr ag, care sunt gus turile lor, modul în care aceștia navighează pe web, obiceiurile
lor etc. În acest mod au fost stabili te care sunt funcționalităț ile relevante, ce culori să fie folosite
(mai stridente, mai pale), ce tip de design (mai minimali st, mai încărcat, etc), layout -ul și chiar
structura site -ului. Interfaț a sitiului nu sa rezum at doar l a decorarea acesteia, ci și la ilustrarea
conținutul din fiecare pagină , fiind unică, particulară . Un alt aspect care a fost luat în calcul a fost
nivelul de utilizabilitate și de accesibilitate . Interfața site-ului fiind ajustată încît să maximizeze
aceste atribute. Cî teva sugestii în acest sens sunt: culorile care nu fac dificilă lectura textelor,
fonturile alese ș i dimensiunile asigură o v izibilita te crescută . Toate acest ea sunt probleme foarte
des întî lnite pe web. Profilul site -ului oferă funcționalităț i de accesibilitate: definirea ordinii pentru
apăsarea tastei Tab, comenzi din tastatură, control asupra dimensiunii textului sau stiluri CSS
anume pentru deficiențe de vedere. Un alt fel de a fa ce mai accesibil siteul este studierea modul în
care utilizatorii navi ghează pe Internet, de a studia cu ce sunt ei obișnuiți. În acest sens, s -a observat
că funcționalități precum căutare, breadcrumb, login, schimbarea limbii, trebuie să apară în par tea
superioară a site -ului pentru a facilita găsirea lor și navigarea pe site. Astfel, poziț ionarea
elementelor în layout este un aspect foarte impor tant, deoarece permite vizitato rilor site -ului să
găsească ce au nevoie mai uș or. S ite-ul este bine realizat la nivel tehnic (se paraț ie clară între
conținutul HTML și prezentarea CSS) ș i accesibilitatea motorului de că utare. Au fost utilizate
adecvat semnele de punctuație și a caracterelor specifice fiecărei limbi, a d iacriticilor și a
accentelor, este o dovadă de o deosebită atenție acordată conținutului. Sunt evitate cu orice preț
stilarea abuzivă a textelor în site. Toate paragrafele și articolele își mențin aceeași stilare, pentru
un design consecvent. Adesea astfel de erori sunt comise de începători în tehnoredactarea de site –
uri web. În mod obișnuit, structura site -ului este simplă și nu impune dificultăți în procesul de
navigare.

37
3.3.1 Planificarea front -end-ului aplicaț iei

Planificarea este un aspect crucial în procesul de creare a unui site web, deoarece este etapa
în care se iau decizii care vor influența designul, implementarea și, mai tîrziu, promovarea website –
ului. World Wide Web fiind un mediu deschis și dinamic, planificarea fiind un proces continuu în
care intervin schimbări determinate de înnoirea permanentă a informațiilor și de apariția altora noi.
Un site de calitate, care oferă informații valoroase în mod atractiv și permite o comunicare
eficientă a acestora nu se naște în mod întâmplător. Fără a avea o privire de ansamblu asupra
aspectelor stabilite în faza de planificare, șansele de a realiza un websit e de bună calitate sunt
minime. Deci în continuare va fi realizată planificarea viitoarei aplicații web “ Cheapclothes ”.

Scopul realizării aplic ației web :
Odată cu extinderea internetului au apărut tot mai multe sitiuri web, care sporesc atît
vinzările cît și prestigiul companiilor. Se dorește să se realizeze o aplicație web Magazin Online
numit de mulți și magazin virtual , pentru c ompania Cheapclothes , pentru marirea vînzărilor cît și
popularitatea companiei.
Stabilirea audienței – acest site este dedicat pentru toate persoanele care doresc să își
innoiască garderoba la un preț accesibil pentru fiecare. În acest site puteți gasi atît accesorii de
calitate cît și haine de brand. Puteți vizualiza și comanda produsul dorit indiferent unde vă aflați,
la serviciu, acasă, fiind necesar doar o conexiune la internet.
Accesibilitate – aplicația poate fi acce sată de pe orce calculator și telefon indiferent de
rezoluția ecranului, sistemul de operare instalat și browser -ul folosit.
Conținut – aplicația avînd un aspect placut și intuitiv la utilizare , conțind în partea de sus
un meniu orizontal cu următoare cîmpuri: Produse , Femei , Bărbați , Copii, Reduceri , Lichidare
de sto c. În fiecare din cîmpuri fiind introduse alte subcategorii de exemplu la Femei se va introduce
pantaloni, rochii, accesorii, pantofi ș.a. Î n fiecare subcategorie vor fi introduce produse s pecifice
categoriei și subcategoriei. Spre partea de stînga va fi un meniu adițional categoriei, unde se va
afișa produsele vizualizate recent și informații despre alegerea datelor despre un anumit produs
pentru o căutare mai rapidă.
Stabilirea specificatiilor site -ului – în site se va introduce un motor de căutare în partea de
sus a paginii, de asemenea se va pune la dispoziție vizualizarea sitiului în mai multe limbi precum
ar fi limba română, engleză, rusă. Utilizatorul se va putea înregistra și autentifica, astfel fiind
posibilă abonarea la buletinul informativ.

38
3.3.2 Organizarea front -end-ului aplicaț iei

Exista diferite modele de org anizare a informatiei în site și cum ar pagina web cu meniul
în partea dreapta sau în partea stîngă, la fel și logoul amplasat la dreapta sus sau la stînga. Logoul
site-ului în aplicație va fi așeza t în partea stangă , deasupra meniului și va fi cuprins în header. Tot
în header, va fi afiș at un numă r de telefon și un cîmp contactați -ne. Făcîndu -se asta datorită faptului
că site-ul va fi vizitat ș i de noile dispozitive m obile, fiind foarte important de pus la dispoziț ia
vizitatorilor datele de contact î ntr-un mod mai ușor, fară a fi nevoie de mărire, aceasta reprezentî nd
și un mod de a arăt a ca poate avea încredere în aplicație . Lîngă meniu, sub header fiind zona de
conținut în care este introdus conținutul site -ului. Acest conț inut fiind aranjat în o coloană, fiind
posibilă afișarea mai multo r produse, dînd astfel un aspect mai bogat . Sub zona de conținut va fi
footerul, unde va fi introdus un link că tre termenii de copyright, data la care a apă rut siteul și alte
elemente care sunt mai puțin importante etc. A fost ales acest tip de layout, ș i anu me acela de
„zona de interes„. Î n mod constient sau nu, utilizatorii de calculato are, navigatorii web, au tendința
de a privi undeva în stînga sus î n browser, de aceia acolo vor fi transmise ideile ce le mai
importante. T entați a de a privi sus în stînga se datorează faptului că meniuril e browse relor ș i
programelor sunt situate anume acolo. D e aceea, logoul site -ului va fi amplasat în stî nga sus, iar
sub el fiind meniul, care acesta la rîndul lui va invita vizitatorii să înceapă „călă toria” prin sit e,
care va fi reușită dacă aceasta se va termin a cu o comandă .

3.3.3 Coordonarea front -end-ului aplicaț iei

Coordonarea aspectelor tehnice au fost efectuate în strînsă concordanță cu cerințele
propuse spre realizare. Proiectarea ș i dezvoltarea interfeț ei utilizator a aplicaț iei web aferă un
mediu plăcut de navigare și fiecare element din front -end se află în strînsă concordanță cu partea
de administrare . De asemenea nucleului funcțional al aplicaț iei a fost elaborat în limbajele noi de
programare (HTML5, Jquery ș.a.) ce oferă repons ive design și cross platform . Luarea deciziilor
legate de arhitectură au fost luate la nivelul celor mai înnalte standarte. Astfel fiind implementate
funcț ionalități solicitate î n hub -ul clientului cum ar fi (cautare ș.a.). De asemenea posibilitatea
legăturii directe cu administratorul, oferă avantajul că întrebările ăpărute din partea clienților pot
fi soluționate mult mai rapid astfel căpătînd mai mulți clienți . Luarea deciziilor importante fiind
soluționate conform asteptă rilor.

39
3.3.4 Controlul front -end-ului aplicaț iei

Arhitectura sistemului informati c este proiectată astfel încît să protejeze datele de accesul
neautorizat sau de răufăcători . Arhitectura este înzestrată cu algoritmi de criptare, autentificarea
utilizatorilor fiind la nivel de email și la nivel de aplica ție de asemenea fiind și controlul accesului,
toate acestea generează o securitate sporită a aplica ției.
Procesul de Sign -in autentifică utilizatorii pr in intermediul emailului și al parolei. Emailul
utilizatorul ui și parola sunt memorate în baz a de date. Administrarea acestor porțiuni din baza de
date sînt controlate utilizî nd drepturile de acces. Fiecare utilizator are definite o serie de dr epturi
de acces pentru o anumită sesiune. Această informa ție fiind o parte importantă a profilului
utilizatorului , datele sunt extras e din baza de date cînd un utilizator efectuează procesul de login
și care este disponibil din interfața front-end a aplica ției. Baza de date con ține cîmpuri ce re ține
ora înregistrării și ora modificării unor careva date . Comunica ția utilizată între componentele
back -end și front -end nu este encriptată, constituind o comunicare de informa ții și date în interiorul
sistemului.
3.4 Descrierea aplicației dezvoltate
Aplicația va cuprinde urmatoarele elemente de bază, o interfață prietenoasă partea front –
end (partea vizibilă de către vizitatori), partea back -end (partea de administrare) car e va avea o
securitatete sporită , aplicația putînd fi accesată de pe orce dispoziti v mobil, tabletă, desktop, adică
conținerea de cross platform și design adaptib il indiferent de dispozitiv și rezoluție. Design -ul
permițînd vizitatorului găsirea ușoară a inform ațiilor pe care le caută, în același timp st îrnind și
interesul pentru alte informații din conținutul site -ului. Conținutul fiind administrabil și stocat , în
baza de date.
Realizarea aplicației a avut următoarele obiective de bază :
 Aplicația fiind cu o legătura la baza de date (interogări query asupra bazei de date , realizate
de administrator – parolă administrator );
 Înregistrarea pe partea de front-end (sisteme de parole criptate );
 Autentificarea pe partea de front -end (email oligatoriu);
 Autentificarea pe pa rtea de back -end (parolă criptată) ;
 Vizualizarea site -ului în mai multe limbi;
 Interfață prietenoasă, intuitivă, ușor de utilizat pentru administrarea conținutului Web;
 Update rapid – preluînd modificările și noile pagini create, în timp real;

40
 Consistență Website – asigurînd consiste nța site -ului Web , conținutul fiind introdus
automat în layout -ul paginii;
 Flexibilitate Website – adaptarea foarte ușor ă restructurării și redesign -ului interfeței
paginilor;
 Securitate sporită a site -ului web prin acces controlat (drepturi diferențiate utilizatori,
accesul pe baza de roluri );
 Reducerea gradului de repetabilitate a informațiilo r în cadrul site -ului;
 Optimizarea indexării în cadrul motoarelor de căutare prin posibilitatea definirii unor
elemente de metadat ă web (keywords -uri).
Site-ul web avînd două secțiuni , interfața cu utilizatorul front -end, secțiunea de
administrare back -end (pentru ușurința dezvoltarii parții de back -end a fost folosit un framework
unde managementul c onținutului include o interfață prietenoasă, permițînd utilizarea intuitivă,
astfel încî t pentru actualizarea site -ului ș i a tuturo r modulelor portalului nefiind necesară o
pregătire tehnică de specialitate a persoanelor care vor fi desemnate pentru a realiza modificări de
conținut). Portalul este administrabil și permite acces diferențiat în interfața de administrare, pentru
publicarea conținutului. Accesul diferențiat în zona de administrare se referă la drepturi diferite de
publicare a conținutului, în funcție de rolul asignat persoan ei respective în cadrul proiectului. De
asemenea, la orice moment se va putea verifica cine și la ce data a postat/șters un anumit articol
în/din site. Pentru p artea de back -end, accesul făcînduse pe bază de user name și parolă, iar aplicația
oferă posibili tatea de publicare a informației doar în funcție de drepturile de acces ale utilizatorilor,
definite de administrator. Administratorul va putea realiza managementul utilizatorilor
(creare/ștergere/alocare drepturi) direct din interfața de administrare.
– baza fiind compatibilă cu standardele limbajului SQL;
– administratorul avînd posibilitatea de a administra conținutul informației, de a realiz a
copii de siguranță ;
– scalabil orizontal și vertical;
– backup informație și arhivare pe alt mediu fizic;
– indifere nt de cantitatea datelor, acestea corespund c ondiții lor de încărcare minimală și
fără erori.
– limbaj de programare este open -source, portabil atî t pe sisteme de operare Windows, cî t
și Unix (Linux), codul sursă este pus la dispoziția prop rietarului site -ului cu toate drepturile de
proprietate intelectuală incluse și licențele aferente, nelimitate în timp;
– codul sursă nu conține librării „3rd party” ale căror licențe au cost separa t;

41
– Abilitatea de comunicare directă cu tehnologia de baze de date aleasă pentru
implementare.
Aplicația se supune următoarelor cerințe :
 Compatibilit ate – aplicația poate opera cu alte produs e similare create după aceleași
considerente;
 Extensibilitate – permite adăugarea facilă de noi capabilități fără modificări m ajore în
arhitectura aplicației;
 Toleranța la eroare – aplicația este solidă și își poate reveni din erori;
 Modularitate – aplicația are o structură modular ă, bazată pe compo nente independente;
 Siguranță prin stabilitate – aplicația execută anumite funcții în anumite condiții pentru o
perioadă specifică de timp;
 Reutilizare – are o arhitectură modulară, în care fiecare componentă își îndeplineasce exact
sarcinile pentru care a fost creată;
 Robustețe – aplicația rămîne stabilă operează la parametrii ceruți în condiții de stres,
tolereză input imprevizibil sau invalid;
 Securitate – aplicația rezistînd influentelor externe ostile;
 Uzabilitate – interfața cu ut ilizatorul (UI) est e intuitivă, ușor de folosit, plac ută din punct
de vedere estetic;
 Content Syndication (RSS) – integrarea abonamentului RSS pentru transmiterea știrilor.
 Program avertizare noutăți sau evenimente pr in e-mail.
Sa folosi t o paletă standartă de culori pentru tex t și fundaluri. Fonturile sunt folosi te din
aceleași familii de font -uri pentru a asigura lizibi litatea textului. Rezoluția ecranului este
independent ă de rezoluție, rezoluția optimă recomandată pentru pagină fiind de 1024×768.
Imagin ile au fost optimiza te pentru vizua lizare. Pentru fiecare vizualizare a produslui este inclus
un buton “ Printare ”, buton “ Trimite unui prieten ”, buton “ like” pentru Facebook. (vezi fig.
3.15)

42

Figura 3.15 Vizualizare produs
Pagina de Contact este integrată cu harta google cu localizarea sediului. Administratorul va
putea filtra documentele încărcate în website, după anumite criterii.
Detalii legate de uzabilitate :
 Sigla site -ului este amplasată în loc vizibil pe fiecare pagină a site -ului;
 Partea de navigație în site nu ocupă mai mult de 20% din pagină;
 Harta site -ului este în două formate: una pentru vizitatori, într -o formă accesibilă, și una
pentru principale le motoare de căutare (Google, Yahoo ) incluse într-un fișier de tip XML
(sitemap. xml);
 ID diferit pentru p aginile de română engleză și rusă ;
 ID diferit pentru fiecare pagi nă care reflectă conținutul paginii în cauză;
 Opțiune de mărire/micșorare a fonturilor;
 Administratorul avînd posibilitatea de monitorizare a frecvenței de vizualizare și utilizare
(accesare) de către utilizatori a paginilor și posibilitatea identificării traiectoriei click -urilor
în vederea analizării ergonomiei interfeței de internet.
Detalii legate de perform anța aplicației și optimizare :
 Timpul mediu de încărcare a unei pagini este de : 2-3 secunde, în funcție de tipul de
conexiune de care dispune utilizatorul;
 Număr me diu de utilizatori concurenți: 1 .000 pentru internet;
 Număr minim de cereri/minut: 5 00 pentr u internet;

43
 Capacitatea de a răspunde într -un timp rezo nabil unui număr de cel puțin 10 .000 de
vizitatori unici pe lună pentru pagina de Internet, cu timpul mediu de încărcare a unei pagini
per utilizator definit mai sus;
 Capacitatea de a suporta cel puțin 3 utilizatori interni cu diverse roluri de administrare;
 Capacitatea de a suporta perioade lungi de trafic intens, definite ca perioade de 3 -6 ore pe
zi, în care aplicația va trebui să răspundă conform parametrilor de încărcare definiți mai
sus pentru un număr între 1.000 -3.000 de cereri pe minut;
 Indexarea cuvintelor cheie, titlului paginii, conținutului, titlurilor link -urilor pentru o mai
bună performanță;
 Page Caching – permite printr -un sistem de ca che să rețină pagina astfel încî t, dacă mai
există o cerere pentru aceeași pagină, o poate afișa mai repede.
Aplicația permite afișarea informațiilor din portal, în funcție de popularitatea și frecvența de
căutare a termenilor cheie prin motorul de căutare. (vezi fig. 3.16 )

Figura 3.16 Cuvinte cautate în motorul de căutare

Detalii privind securitate a alicației web:
 Facilitatea ca administratorul să vadă diferite informații despre utilizatorii logați – Session
Management;
 E-mail verification .

44
Detalii despre structură și funcțion alități:
Site-ul dezvoltat este destinat tuturor cat egoriilor de public. Aplicația este organizată în
mod arborescent, pe categorii și s ubcategorii. Site -ul are conținut în limbi diferite română, rusă,
engleză .(vezi fig. 3.17 )

Figura 3.17 Selectarea limbii
Aplicația posedă următoarele elemente fixe pe fiecare pagina: meniu secundar de navigare ,
(vezi fig. 3.18 )

Figura 3.18 Meniu secundar pe partea stîngă
secțiune de news, secțiune motor de căutare. Majoritatea paginilor sunt pagini statice, de tip text,
care trebuie să fie administrate, modificate și actualizate, la nivelul conținutului, în mod facil și

45
direct (online) de către administrator . De asemenea aplicația conține și pagini dinamice care vor
returna conținut în urma u nor interogări ale vizitatorilor. Site-ul conține un motor de căutare după
cuvinte cheie introduse de utilizator, căutarea efectuî ndu-se în conținut, legislație, comunicate,
evenimente, documente încărcate etc. În cazul căutarii multiple (două sau mai mult e cuvinte)
rezultatul este mai restrans în sensul că va fi afiș at doar conținutul care include întreg grupul de
cuvinte cău tat. Rezultatele căutării sunt afișate în funcție de categoria din care fac e parte.

46
CONCLUZII ȘI RECOMANDĂRI
Viteza cu care evoluează tehnologia Internet -ului este impresionantă. Dacă acum se
apreciază că există cîteva milioane de oameni care folosesc serviciile Internet în fiecare moment,
numărul lor va crește exponențial în anii următori. Afacerile electronice reprezintă o no uă revoluție
în domeniul business -ului pe plan mondial, numărul tranzacțiilor efectuate pe baza afacerilor în
Internet crescînd semnificativ anual.
În urma cercetărilor sa hotărit efectuarea unui magazin electronic, care mai tîrziu putînd fi
vîndut unei vi itoare companii care se ocupă cu vînzările în cauză.
Observînd tendințele de dezvoltare a domeniului dat, putem menționa că în viitorul
apropiat relațiile de schimb în internet vor deveni o componentă indispensabilă de desfășurare a
afacerilor pentru oric e unitate economică, pentru orice cumpărător.
Un magazin electronic este un spațiu virtual, care există on -line și care nu are existență
fizică, așa cum are o casă, magazinul de unde ne facem cumpărăturile sau orice altceva. Starea
aceasta de a fi “on -line” are o mulțim e de avantaje, între care sunt:
1. Costuri, în general foarte reduse de întreținere;
2. Nu plătești impozit pentru că ai un magazin electronic ;
3. Magazinul electronic este disponibil audienței 24 de ore pe zi, 7 zile pe săptămînă, ceea
ce nu poate fi posibil pentru nici o instituție din lumea asta, indi ferent cum s -ar numi aceasta.
Obiectivele care au fost propuse spre realizare au fost î ndeplinite : responsive web design ,
cross platform, interfață placută în navigare, înr egistrare, autentificare, căutare, vizualizare în mai
multe limbi ș.a. Aplicația putînd fi înbunătățită cu un modul de plată prin intermediul căruia
utilizatorul putînd plăti produsul online prin intermediul cardului care îl deține (victoriabank,
moldindco nbank) . Fron -end-ul aplicației este axat anume pe client, astfel în timpul navigării dînd
acea senzația de “libertate”. Fiecare componentă din site este amplasată corespunzător, și anume
meniu l nu ocupă mai mult d e 20% din conținut, sigla sitiul a fost amp lasată în partea stîngă
deoarece utilizitarii inconștient sau nu au tendința de a se uita în partea stingă a paginii . Partea
back -end este bine securizată, parola pentru logare fiind cripatată astfel fiind imposibilă orce
acțiune răufăcătoare din partea ha ckerilor. Back -end-ului este placut în navigare fiind dotat cu orce
acțiune de schimbare care este necesară pentru fron -end, și anume, adăugare produs, adăugare
categorie, backup la baze de date, schimbarea de permisiuni pentru mai multe persoane etc. Partea
de back -end nu necesită înbunătățiri fiind dotată cu toate cele necesare atît pe partea de design cît
și pe partea tehnică . Aplicația corespunde tutoror standardelor cum ar fi: timpul de încarcare în
mai puțin de 3 secunde, număr minim de cereri/minut 500, poate suporta 3 utilizatori cu diferite

47
roluri de administrare ș.a. Toate acceste caracteristici sunt foarte importante , îndeosebi timpul de
încarcare a paginii, acest avantaj poate face ca un potențial vizitator să revi nă la site -ul elaborat .

48
BIBLIOGRAFIE

1. http://sinf.ase.ro/cursuri/ie/cursul_6.pdf , data accesării : 06.04.2016 )
2. http://creare -site-pagini -web.ro/pagini/creare -pagina -web.php , data accesării: 06.04.2016
3. Menuet Mobile E -Novation Use of E -learning Tehnologies Project No. LLP –
LdV/ToI/2008/RO/010
4. Creating Web Pages with Asynchronous JavaScript and XML ISBN 0 -13-227267 -9
5. http://www.coraldesign.ro/articole.aspx?art=site_web_dinamic data accesării: 06.04.2 016
6. http://www.lostsaloon.com/technology/the -differences -between -static -and-dynamic –
webpages/, data accesării : 06.04.2016
7. http://webblog.bestwebimage.ro/2014/06/ce -inseamna -front -end-si-ce-inseamna -back –
end/, data accesării: 07.04.2016
8. International Journal of Computer Trends and Technology (IJCTT) – volume4 Issue5 –May
2013 9, http://www.htmlgoodies.com/beyond/reference/responsive -design -cross –
platform.html , data accesării: 07.04.2016
9. http://www.creativewebdesign.ro/ce -este-responsive -web-design/ , data accesării : 07.04.
10. Uxpin responsive design best practices Advice, Tutorials, Case Studies Copyright , 2015
by UXPin Inc.
11. HTML5. Разработка приложений для мобильных устройств. — СПб.: Питер, 2015.
— 480 с.: ил. — (Серия «Бестселлеры O’Reilly»). ISBN 978-5-496-01125 –
12. Principii de design , Arad , 2011
13. https://ru.wikipedia.org/wiki/ Веб-приложение data accesării: 20.04.2016
14. https://ru.wikipedia.org/wiki/ Веб-интерфейс data accesării: 20.04.2016