UNIVERSITATEA DE STAT DIN MOLDOVA

UNIVERSITATEA DE STAT DIN MOLDOVAFACULTATEA MATEMATICA SI INFORMATICA

DEPARTAMENTUL INFORMATICA

BUTNARU OLEGLucru individual

la disciplina Limbaje de Marcare

STUDIU DE CAZ

Proiectarea unui site de prezentare a ntreprinderii

INTER-BAY

Conductor tiinific: Pleca Natalia, lector universitarChiinu 2015Cuprins31.Analiza ntreprinderii

32.Scopul realizrii site-ului

33.Coninutul site-ului

54.Proiectarea site-ului

75.Coduri HTML i CSS

75.1. Tag-uri HTML

105.2. Stiluri CSS

116.Testarea site-ului

127.Concluzii

13Bibliografie

14Anexa 1.

15Anexa 2.

1. Analiza ntreprinderiintreprinderea 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. Peste100 000de 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 inovaiile 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-uluiReeaua 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-uluiSite-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 1Imagine 2Site-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 uor 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 INTER-BAY Cea mai buna calitate la cel mai bun pre! i Cumpra azi, mine poate fi prea trziu!. 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 74. 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 dorete sau la alt gen de informaii pe care le ofer site-ul. Site-ul conine 5 seciuni de baz (fig.1): 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 mbunti 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 8

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

Figura 15. Coduri HTML i CSS5.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: - 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 , care este tag-ul de incheere a oricrui document HTML. i - 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. i - sunt utilizate n interiorul tag-urilor 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: Tentors | Acasa sau Tentors | Servicii .

i - 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 i , sunt urmtoarele: i - sunt utilizate pentru a defini un paragraf, la utilizarea acestor tag-uri browser-ul amplaseaz cte un rnd liber nainte i dup fiecare paragraf, aceasta proprietate permite aranjarea ntr-un mod mai clar a informaiilor n pagin.
- acest tag este utilizat pentru a trece din rnd nou n interiorul paragrafelor.

-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: , 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: . i - 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: Produse.

i

- tag-uri utilizate n crearea listelor neordonate, elementele listei fiind introduse prin intermediul tagurilor i . n proiectarea acestui site, listele sunt utilizate pentru a crea bara orizontal de navigare cu doua niveluri (img.7):

Acasa

Tentors

Produse

• Materiale de constructie
• Materiale de finisare
• Scule de mina si imbracaminte
• Articole de asamblare si fixare
• Inventar pentru gradinarit

Servicii

Contacte

i - 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 este 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 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:

Numele:

Preumele:

Telefonul:

Comentarii:

Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre

- 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 site-ului au acelai stil. Paginile site-ului fac legtura cu foaia de stil extern utiliznd marcatorul n seciunea n modul urmtor:

Tentors | Acasa

@import url(style.css);

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 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 i . Prin intermediul proprietii list-style: 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 , adic n funcie de nivelurile barei de navigarea.Tag-ul este formatat prin intermediul id-ului p ce permite fixarea nlimii minime a paragrafului i a mai multor clase:

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 care permite modificarea separat a unei poriuni dintr-un context, ca i alti marcatori utilizai, tag-ul are atributele id i class specificate n foaia de stil:Id span1 are proprietile de formatare a textului, adugind textului umbr text-shadow: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 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 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 Mozilla Firefox

Opera

Internet Explorer, cu excepia tag-ului , pe care nu-l poziioneaz la mijlocul paginii, i a tag-ului , 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 rezoluie 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.BibliografieAnexa 1.Codurile HTML

Anexa 2.

Codurile CSS

16