UNIVERSITATEA DE STAT DIN MOLDOVA

FACULTATEA MATEMATICA SI INFORMATICA

DEPARTAMENTUL INFORMATICA

BUTNARU OLEG

Lucru individual
la disciplina Limbaje de Marcare

STUDIU DE CAZ
Proiectarea unui site de prezentare a ntreprinderii
INTER-BAY

Conductor tiinific: Pleca Natalia, lector universitar

Chiinu 2015

Cuprins

1.

Analiza ntreprinderii................................................................................................. 3

2.

Scopul realizrii site-ului........................................................................................... 3

3.

Coninutul site-ului.................................................................................................... 3

4.

Proiectarea site-ului.................................................................................................. 5

5.

Coduri HTML i CSS................................................................................................... 7

5.1. Tag-uri HTML.......................................................................................................... 7
5.2. Stiluri CSS............................................................................................................ 10

6.

Testarea site-ului..................................................................................................... 11

7.

Concluzii.................................................................................................................. 12

Bibliografie..................................................................................................................... 13
Anexa 1.......................................................................................................................... 14
Anexa 2.......................................................................................................................... 15

1. Analiza ntreprinderii
ntreprinderea INTER-BAY nu exista n realitate, este creat imaginar cu scopul realizrii
unu-i site de prezentare a unei magazin. Descrierea care urmeaz nu are o baz material.
INTER-BAY este unul din cel mai mare magazin de dispozitive mobile din Moldova.
Peste 100 000 de vizitatori acceseaz zilnic site-ul pentru a vizualiza gama de produse necesare.
Anunurile sunt publicate de administraia magazinului, de aceea pe site-ul INTERBAY.MD poi gsi
absolut orice produs nou de pe piaa: telefoane, tablete calculatoare si accesorii pentru fiecare din ele.
Obiectivul INTERBAY.MD este de a prezenta cele mai noi tehnologii aflate in vnzare la magazinul
nostru.
Magazinul INTER-BAY a fost lansat in anul 2015 de ctre compania ButnaruInvest. De-a
lungul existentei sale, site-ul a suferit diverse schimbri, dar a rmas neschimbat faptul ca datorita
simplitii site-ului INTERBAY.MD orice doritor poate cumpra mrfurile necesare. De asemenea,
cu uurina pot fi urmrite anunurile si categoriile de mrfuri, ce trezesc interesul, precum si
schimbrile de pre si sortiment, prin simpla abonare la ele. Despre schimbrile si inova iile
funcionale permanente se poate afla pe blogul site-ului INTERBAY.MD. In ianuarie 2015 pe site-ul
INTERBAY.MD erau nregistrai 960 000 de utilizatori unici.

2. Scopul realizrii site-ului

Reeaua de magazine INTER-BAY i efectueaz activitatea n 3 orae importante din
Moldova: Chiinu, Blti si Cahul. Scopul acestui site este de a informa i promova produsele pe
care magazinul le are n stoc. Astfel potenialii clieni pot face cunotin i alege n prealabil
produsele de care au nevoie, pn a merge la centrele teritoriale.

3. Coninutul site-ului
Site-ul va conine o descriere succint a produselor aflate n vnzare n centrele comerciale,
precum i informaii, date de contact despre ntreprinderea dat. Astfel site-ul va fi proiectat sub
urmtoarea structur, pagina de start img. 1, paginile de prezentare produse img. 2.

Imagine 1

Imagine 2

Site-ul are o structur simpl, accesibila tuturor spectrului de clieni, inclusiv i celor care nu
posed practic n manipularea unui site internet. Site-ul este uor de navigat, pagina care este
accesat de utilizator fiind evideniat n:
-

Titlul paginii (exemplu img.3);

Imagine 3

Bara de navigare (exemplu img.4), care este prezent n toate paginile, i prin intermediul
creia se poate naviga la oricare alt pagin (excepie nouti care ne duce la o pagina
externa) .

Imagine 4

Aceasta i d utilizatorului certitudinea c se afl n continuare n domeniul site-ului

interbay.md.
Site-ul nu are o imagine de fundal ce l face mai lizibil i deci mai plcut la ochi i mai u or
de navigat.
Pagina de start are ca coninut un slideshow (img.4) care defileaz att n mod autonom ct si
la interaciunea clientului. Aici sunt prezentate cele mai noi i mai performante produse. Totodat
aici se pot include promoiile pe care le are magazinul.

Imagine 5

n partea dreapt a slideshow-lui se poate vedea doua mici casete (img. 6) n care este
prezentata prognoza meteo i cursul valutar actualizate zilnic, fiind preluate de pe site-uri
specializate. Aceste informaii faciliteaz alegerea clientului, astfel el poate alege ziua n care poate
merge la unul din centrele comerciale in funcie de starea vremii, i costul dispozitivului dorit, n lei
deoarece preturile sunt prezentate n valut din cauza instabilitii valutei naionale.

Imagine 6

La sfritul fiecrei pagini a site-ului sunt prezente doua slogane (img. 7) ale magazinului INTERBAY Cea mai buna calitate la cel mai bun pre! i Cumpra azi, mine poate fi prea trziu!.
5

Acestea fac parte din marketingul magazinului i sunt utilizate pentru a influena cumprtorul de a
cumpra pentru a fi in trend cu moda i totodat de a alege anume magazinul nostru.

Imagine 7

Sunt utilizate patru culori i nuane ale acestora: alb, negru, verde i albastru n diferite
nuane. Exist o combinaie de culori reci si calde care combin att simplitatea ct i un pic de
dinamism n accesarea site-ului. Culorile dominante nu sunt obositoare pentru utilizatorii site-ului,
astfel interfaa site-ului arata n modul urmtor:

Imagine 7

4. Proiectarea site-ului
Site-ul pune la dispoziia vizitatorului o anumit cantitate de informaie partajat n diferite
compartimente. Distribuind informaia oferit n mai multe categorii, informaia este mai accesibila
pentru utilizator. n aa mod utilizatorul poate merge direct la genul de produse pe care i le dore te
sau la alt gen de informaii pe care le ofer site-ul.
Site-ul conine 5 seciuni de baz (fig.1):
6

INTER-BAY reprezint pagina de pornire, reprezentat prin logo-ul magazinului;

Produse sunt prezentate produsele comercializate de magazin, aceast seciune se divizeaz

n alte 3 seciuni, care reprezint gruparea produselor pe categorii (img.8) :

Telefoane;
Tablete;
Notebook-uri;
Despre noi conine informaii despre magazin i se divizeaz n doua subcategorii:
Info INTER-BAY informaii generale despre magazinul INTER-BAY;
Contacte date de contact ale punctelor de vnzare, precum i locul amplasrii lor;
Nouti reprezint o surs externa care duce la seciunea de tiri din domeniul IT al

portalului de tiri www.unimedia.info.

Chestionar un formular destinat clienilor cu scopul de a mbunt i produsele i serviciile

oferite de INTER-BAY.
Prin intermediul paginilor, utilizatorul are acces la pri directe i dorite de informaie.

Imagine 8

Datoriat barei de navigare cu 2 niveluri (img.8) care este prezent n fiecare pagin (excepie
n momentul accesrii seciunii nouti) , utilizatorul poate accesa orice pagina indiferent unde se afla
n interiorul site-ului, aceasta permitndu-i s nu se blocheze atunci cnd navigheaz.
n ultima pagin a site-ului - Chestionar, vizitatorului i este propus de a-i lsa aprecierile
sale despre produsele i serviciile oferite de ntreprindere (img.8), prin intermediul unui formular.
Aceste aprecieri sunt necesare pentru o conoatere mai aprofundat a clienilor ntreprinderii i a
necesitilor acestora, precum i cunoaterea punctelor slabe a ntreprinderii, ceea ce-i va permite
perfecionarea n viitor a activitilor sale.

Imagine 2

Paginile site-ului sunt stilizate cu ajutorul unei pagini CSS (Cascading Style Sheets) (fig.1),
ce-i ofer site-ului un anumit stil.

Figura 1

5. Coduri HTML i CSS

5.1. Tag-uri HTML
Site-ul este proiectat prin intermediul limbajului de descriere a paginilor web HTML. Fiind
un limbaj de marcare, limbajul HTML utilizeaz o mulime de tag-uri de marcare i text simplu
pentru descrierea paginilor web.
n proiectarea site-ului s-au utilizat tag-urile de baza ce se conin ntr-un fiier html:
8

<html> - tag-ul cu care se ncepe orice document HTML. Prin folosirea acestui tag i spunem
browser-ului c este vorba de un fiier HTML pentru a-l putea afia. Tag-ul este folosit mpreun cu
tag-ul su de ncheere </html>, care este tag-ul de incheere a oricrui document HTML.
<head> i </head> - ntre aceste tag-uri sunt introduse alte tag-uri utilizate pentru titlul
paginii i adresa foii de stiluri externe, care permite redarea elementelor HTML ntr-un anumit mod.
<title> i </title> - sunt utilizate n interiorul tag-urilor <head> pentru a da titlul paginii
descrise. In fiecare pagina a site-ului acesta este diferit, pentru a facilita navigarea utilizatorului n
cadrul site-ului, de exmplu: <title> Tentors | Acasa </title> sau <title> Tentors | Servicii </title> .
<body> i </body> - interiorul acestor tag-uri reprezint coninutul paginii web, adic tot ce
este scris ntre aceste tag-uri este afiat, de browser, pe ecranul monitorului.
Alte tag-uri HTML utilizate n descrierea paginilor web a site-ului, prezente ntre tagurile
<body> i </body>, sunt urmtoarele:
<p> i </p> - sunt utilizate pentru a defini un paragraf, la utilizarea acestor tag-uri browserul amplaseaz cte un rnd liber nainte i dup fiecare paragraf, aceasta proprietate permite aranjarea
ntr-un mod mai clar a informaiilor n pagin.
<br /> - acest tag este utilizat pentru a trece din rnd nou n interiorul paragrafelor.
<img /> -este utilizat pentru a nsera imaginile n paginile web. Acest tag este utilizat cu
urmtoarele atribute: src pentru a indica locaia imaginii, imaginile plasate ntr-un alt director de
ct fiierul surs, prin intermediul acestui atribut este specificat calea de acces la imaginea dorit, de
exemplu: <img src="produse/servicii/Untitled.png" alt="fortan"> , atributul alt este folosit
pentru a afia un text n locul imaginii, n cazul n care browser-ul nu poate afia imaginea, n cazul
dat textul "fortan" specific c n imagine este ilustrat produsul fortan produs de ntreprindere. Alte
atribute folosite n interiorul acestui tag sunt height i width, utilizate pentru a stabili nlimea
i lungimea dorit a imaginii, de exemplu:

<img src="amenajari_interioare_case.jpg"

width="600px" height="340px">.
<a> i </a> - aceast pereche de tag-uri este utilizat pentru a face legtura ntre paginile
site-ului i a permite utilizatorului de a naviga n cadrul site-ului. Aceste tag-uri, numite anchor
(ancor) sunt folosite mpreun cu atributul href, care creeaz legturi hipertext, adic legturi
spre alte pagini, de exemplu: <a href="produse.html">Produse</a>.
<ul> i </ul> - tag-uri utilizate n crearea listelor neordonate, elementele listei fiind
introduse prin intermediul tagurilor <li> i </li>. n proiectarea acestui site, listele sunt utilizate
pentru a crea bara orizontal de navigare cu doua niveluri (img.7):
<ul>
<li><a
<li><a
<li><a
<ul>
<li><a

href="acasa.html"> <span id="span1">Acasa</span> </a></li>

href="tentors.html">Tentors</a></li>
href="produse.html">Produse</a>
href="produse1.html">Materiale de constructie</a></li>
9

<li><a
<li><a
<li><a
<li><a
</ul>
</li>
<li><a
<li><a

href="produse2.html">Materiale de finisare</a></li>
href="produse3.html">Scule de mina si imbracaminte</a></li>
href="produse4.html">Articole de asamblare si fixare</a></li>
href="produse5.html">Inventar pentru gradinarit</a></li>
href="servicii.html">Servicii</a></li>
href="contacte.html">Contacte</a></li>

</ul>

<form> i </form> - tag-uri utilizate n crearea formularului pentru obinerea informaiilor

de la vizitatori despre produsele i serviciile oferite de ntreprindere. Atributul action din interiorul
tag-ului, este folosit pentru a trimite datele introduse de vizitator prin email la adresa respectiv
tentors.prilita@gmail.com, iar atributul method precizeaz metoda de trimitere a datelor, n
formularul dat este utilizat metoda post ce permite transmiterea unei cantiti mari de date.
Elementul principal al tagu-ului <form> este <input> folosit pentru a introduce elementele
formularului, cum ar fi cmpurile de introducere a datelor despre persoana ce scrie un comentariu i
butoanele de tergere i expediere a informaiilor primite. Atributele utilizate mpreun cu acest tag
sunt type pentru indicarea tipului elementului, cum ar fi text n cazul introducerii numelui sau
prenumelui; reset pentru formarea butonului de tergere; submit pentru formarea butonului
de expediere; un alt atribut utilizat este name pentru a indica numele elementului i value
pentru a indica denumirea butoanelor utilizate.
Cmpurile n care vor fi introduse comentariile cerute, sunt incluse cu ajutorul etichetei
<textarea> care are urmtoarele atribute: name pentru ataarea unui nume cmpului de editare;
cols specific numrul de caractere afiate ntr-o linie; rows- specific numrul de linii afiate
simultan; wrap determin comportamentul cmpului de editare fa de sfritul de linie, acest
atribut are valoarea off ntreruperea cuvintelor se produce la marginea dreapt a editorului,
caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul.
Cmpurile formularului sunt incluse n celulele unui tabel, pentru a obine o aliniere dorit:
<table>
<form action="mailto:tentors.prilita@gmail.com" method="post">
<tr><th> Numele:<td><input type="text" name="nume">
<tr><th>Preumele: <td><input type="text" name="prenumele">
<tr><th>Telefonul: <td><input type="text" name="telefonul">
<tr><th>Comentarii:
<td>
<textarea name="comentarii" cols="30" rows="5" wrap="on">
Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre
</textarea>
<tr valign="top">
<td>
<input
type="reset"
value="Sterge"><td><input
type="submit"
value="Expedieaza">
</form>
</table>
10

<hr /> - tag singular (nu are un tag de ncheere), este utilizat pentru crearea unei linii
orizontale, este utilizat n paginile site-ului pentru a arta sfritul paginilor i pentru a diviza
informaiile n pagin, crend un aspect mai plcut.

5.2. Stiluri CSS

CSS (Cascading Style Sheets) foi de stil n cascad, reprezint grupuri de proprieti care
definesc modul de afiare a elementelor, de a aduga elemente de stil pentru un document web.
n proiectarea acestui site, este nserat o foaie de stil extern(fig.1), deoarece paginile siteului au acelai stil. Paginile site-ului fac legtura cu foaia de stil extern utiliznd marcatorul
<style> n seciunea <head> </head> n modul urmtor:
<head>
<title> Tentors | Acasa </title>
<style type="text/css">
@import url(style.css);
</style>
</head>

unde atributul type specific tipul documentului legat, iar elementul @import
url(style.css) specific adresa (URL) de unde se introduce fiierul foaie de stil.

Prin intermediul foii de stil, paginile site-ului au fost divizate n seciuni de blocuri (img.1)
prin intermediul tag-urilor <div> difereniindu-se prin clase i id:
Id-ul: denumire este specificat pentru prima parte a paginii, n care se afl denumirea
ntreprinderii i sunt specificate proprietile acesteia: culoarea, alinierea textului, mrimea fontului,
tipul i varianta fontului.
Clasa: barameniu este specificat pentru partea a doua a paginii, unde se afla bara de
meniu, aceast clas are o singur proprietate, de aliniere a textului la mijlocul paginii.
Clasa: home este specificat pentru coninutul paginii, pentru informaiile afiate n
interiorul paginii. n proprietile acestei clase sunt specificate marginile din jurul acestui element,
alinierea textului, limea blocului, culoarea, bordura.
Bara de navigare (img.7) a site-ului la fel a fost creat prin intermediul marcatorilor de stil,
transformnd bara de meniu ntr-un sistem de navigare uor de folosit. Astfel listele cu care s-a creat
bara de navigare au fost introduse n tagurile <nav> i </nav>. Prin intermediul proprietii liststyle: none; au fos nlturai marcatorii listelor; proprietatea display: inline-table; a permis
afiarea orizontal a meniului, iar proprietatea display: block; afieaz linckurile ca blocuri,
ntreaga zon poate fi acionat cu mouse-ul, iar proprietatea background i ofer o anumit
culoare de fundal a linckului, n funcie de nivelul n care se afl. Sunt specificate i alte proprieti,
cum ar fi culoarea, poziie, varianta i mrimea fontului, bordura n funcie de ramurile tag-ului
<nav>, adic n funcie de nivelurile barei de navigarea.
Tag-ul <p> este formatat prin intermediul id-ului p ce permite fixarea nlimii minime a
paragrafului i a mai multor clase:
11

Clasa slogan formatrile din aceasta clas sunt specificate pentru paragraful n care este
scris sloganul ntreprinderii (img.5), adic culoarea alb a textului, alinierea la mijloc, mrimea
fontului de 40px, familia fonturilor "Bradley Hand ITC" i "Times New Roman" dac browser-ul
nu cunoate primul tip de font, l folosete pe al doilea, varianta fontului - small-caps i grosimea
fontului bold.
Clasa text utilizata n paragrafele n care sunt expuse informaii despre ntreprindere, este
caracterizat de anumite proprieti, cum ar fi proprietatea padding care definete spaiul dintre
chenar i coninut, proprieti de aliniere a textului i a fontului acestuia.
Un alt marcator de stil folosit este <span> care permite modificarea separat a unei poriuni
dintr-un context, ca i alti marcatori utilizai, tag-ul <span> are atributele id i class specificate
n foaia de stil:
Id span1 are proprietile de formatare a textului, adugind textului umbr textshadow:2px -1px red;, acesta este folosit n evidenierea denumirii paginii n bara de navigare n
care se afl utilizatorul (img.3).
Id span2 conine proprieti de formatare a textului, i are funia de a evidenia
denumirea paragrafelor din pagina tentors.html.
Id size este utilizat pentru formatarea denumirilor de produse.
Tag-ul <img /> este formatat prin intermediul claselor:
Clasa left permite plasarea imaginii n partea stng a paragrafului.
Clasa top este utilizat pentru plasarea imaginii n interiorul paragrafului n partea de sus.
Formarea galeriei de imagini a produselor comercializate de ntreprindere este realizat prin
intermediul listelor, care conin anumite formatri, cum ar fi: list-style-type:none eliminarea
marcatorilor; display: inline; - pentru poziionarea orizontal; padding definirea distanei
ntre elementele listei, font-variant i font-weight pentru a defini fontul i mrimea
denumirilor produselor comercializate.
Tag-ul <hr /> este stilizat prin intermediul proprietilor de afiare la mijloc a elementului,
lungime, lime i introducerea gradientului, ce permite crearea unui espect plcut a acestei linii.
Toate codurile HTML i CSS utilizate n proiectarea site-ului sunt ataate la Anex.

6. Testarea site-ului
n urma testrii site-ului pe diferite browsere si pe diferite rezoluii ale ecranului s-a constatat
c site-ul este compatibil cu:

Google Chrome
12

Mozilla Firefox

Opera

Internet Explorer, cu excepia tag-ului <hr />, pe care nu-l poziioneaz la mijlocul paginii,
i a tag-ului <nav>, browser-ul exclude nivelul doi al barei de navigare (img.7).
Rezoluia ecranului se refer la claritatea textului i a imaginilor pe ecran. La ecranele cu o
rezoluie mai mare, elementele site-ului apar mai bine conturate avnd dimensiuni mai reduse,
deoarece spaiul disponibil pe ecran este mai mare. Dac site-ul este vizitat la un ecran cu o rezolu ie
mai sczut, numrul elementelor de pe ecran va fi mai mic, ns elementele afiate la ecran vor fi
mai mari i mai uor de vzut, atunci cnd rezoluia ecranului este foarte sczut, imaginiile pot avea
margini zimate.

7. Concluzii
Astzi, cel mai eficient i mai facil mijloc de cptare a informaiilor este internetul, de aceea
un bun mod de promovare a ntreprinderii, este de a promova aceast interprindere pe internet prin
intermediul unui site.
La proiectarea unui site, trebuie s se in cont de potenialii vizitatori ai site-ului.
Identificarea i nelegerea nevoilor utilizatorilor duce la definirea scopului i stabilirea obiectivelor
principale ale site-ului, de aceea, site-ul trebuie s conin informaii actuale, clare i necesare
utilizatorului.
n proiectarea unui site, trebuie s se in cont de cerinele beneficiarului acestuia, dar trebuie
proiectat n aa mod ca s poat fi acceptat de o gama larg de utilizatori cu aptitudini diferite.
Atunci cnd scrim codurile ce stau n spatele interfeei site-ului, trebuie s lum n considerare
compatibilitatea acestora cu diferite browsere, de aceea trebuie s ncercm s excludem tag-urile
care au fost create doar pentru un anumit browser. Astfel o interfa bine organizat, este atunci cnd
site-ul lucreaz aa cum se ateapt utilizatorii si.

Bibliografie

13

Anexa 1.
Codurile HTML

14

Anexa 2.
Codurile CSS

15