Magazin Online de Scule

Informatica

Magazin Online de Scule

Byadmin ianuarie 1, 2024

LUCRARE DE LICENȚĂ

MAGAZIN ONLINE DE SCULE

Cuprins

1. Introducerea în tehnologii web

1.1. World wide web

WORLD WIDE WEB (sau mai simplu WEB sau WWW) este un context arhitectural pentru accesul la documente răspândite pe mii de mașini din Internet, între care există legături.În 5 ani a evoluat de la o aplicație pentru transmiterea de date utile pentru fizica energiilor înalte la o aplicație despre care milioane de oameni cred că este Internetul. Popularitatea sa enormă se datorează faptului că are o interfață grafică plină de culoare, ușor de utilizat de către utilizatori și în același timp oferă o cantitate imensă de informație despre orice subiect posibil.

WEB-ul a apărut din necesitatea de a permite cercetătorilor răspândiți în lume să colaboreze utilizând colecții de rapoarte, planuri, desene, fotografii și alte tipuri de documente aflate într-o continuă modificare. Propunerea inițială pentru crearea unei colecții de documente având legături între ele (WEB) a fost facută de fizicianul Tim Berners-Lee, fizician la CERN, în martie 1989. Primul prototip (bazat pe text) era operațional 18 luni mai târziu. În decembrie 1991 s-a facut o demonstrație publică la conferința Hypertext '91, în San Antonio, Texas. Acțiunea a continuat în anul următor, fiind încununată cu realizarea primei interfețe grafice, Mosaic, în februarie 1993.

Mosaic a fost atât de popular încât un an mai târziu autorul său Mark Andreessen a părăsit NCSA unde Mosaic-ul a fost dezvoltat, pentru a forma o noua companie, Netscape Communication Corp. care se ocupa de dezvoltarea de software pe WEB.

În 1994 CERN și MIT au semnat o întelegere de a forma consortiul WORLD WIDE WEB, organizație care are ca obiectiv dezvoltarea WEB-ului, standardizarea protocoalelor și încurajarea interoperabilității între site-uri. De atunci, sute de universități și companii au intrat în consortiu. MIT coordonează partea americană a consortiului, în timp ce centrul de cercetări INRIA coordonează partea europeană. Desi există foarte multe cărți despre WEB, cel mai bun loc pentru găsirea unor informații la zi despre el este (în mod natural) chiar WEB-ul. Pagina consortiului are adresa htttp://www.w3.org. Cititorii interesați vor găsi acolo legături la pagini care acoperă toate documentele și activitățile consortiului.

Din punct de vedere al utilizatorului, WEB-ul se prezintă ca o colectie imensă de documente răspândite în toată lumea, numite pagini. Fiecare pagină poate să conțină legături (indicatori) la alte pagini, aflate oriunde în lume. Utilizatorii pot să aleagă o legătură (de exemplu prin execuția unui click) care îi va duce la pagina indicată de legatură. Acest proces se poate repeta la nesfârșit, fiind posibil să se traverseze în acest mod sute de pagini legate între ele. Despre paginile care indică spre alte pagini se spune că utilizează hypetext.

Paginile Web sunt vizualizate pe calculatorul client cu ajutorul unui program special numit browser. La început, Web-ul consta numai din pagini de text, fără nici o imagine. Odată cu apariția primului browser Web grafic în anul 1993, Web-ul a început să se impună cu adevărat. Nu cu mult timp în urmă, browserul Navigator al firmei Netscape era cel mai popular program de navigare, însa browser-ul Internet Explorer de la Microsoft ocupă în momentul de față mai mult de jumatate din piață.

Programul de navigare aduce pagina cerută, interpretează textul și comenzile de formatare conținute în text și afișează pagina, formatată corespunzător, pe ecran. Majoritatea paginilor de WEB încep cu titlu, contin informații și se termină cu adresa de poștă electronică a celui care menține pagina. Șirurile de caractere care reprezintă legături la alte pagini se numesc hyperlegături, sunt afișate în mod diferit, fiind subliniate și/sau colorate cu o culoare specială. Pentru a selecta o legatură, utilizatorul va plasa cursorul pe zona respectivă (utilizând mouse-ul sau săgețile de pe tastatură) și comandă selecția (cu ajutorul mouse-ul sau apăsând tasta ENTER). Deși există programe de navigare fără interfață grafică, ca de exemplu lynx, ele nu sunt atât de utilizate ca programele de navigare grafice.

Tehnologia folosită de Worl Wide Web este cea client–server, care presupune urmatoarele etape:

Un calculator (clientul) formuleaza o cerere

Cererea clientului este expediată unui server

Serverul analizează această cerere, o execută, formulează raspunsul și îl expediază clientului

Clientul receptionează răspunsul la cererea solicitată

Modelul de comunicare între serverul WEB și clientul care accesează informația este următorul (să zicem că acesează http://www.w3.org/hypertext/ WWW/TheProject.html):

Programul de navigare determina URL (pe baza selecției)

Programul de navigare întreabă DNS care este adresa IP pentru mașina care se numește www.w3.org.

DNS răspunde cu 18.23.0.23

Programul de navigare realizează conexiunea TCP cu portul 80 al 18.23.0.23

Trimite o comandă GET /hypertext/WWW/TheProject.html

Serverul www.w3.org transmite fișierul "TheProject.html"

Conexiunea TCP este eliberată

Programul de navigare afișează formatat textul din "TheProject.html"

Programul de navigare aduce și afisează toate imaginile din "TheProject.html"

1.2. Solicitarea informațiilor via URL

Nici o conexiune HTTP între client și server nu este menținută permanent. Imediat după ce a foste efectuată cererea conexiunea este întreruptă. Va fi restabilită pentru trimiterea răspunsului, după care va fi întreruptă din nou. Acest proces se repetă pentru fiecare cerere fiind referită ca interacțiune după modelul cerere-răspuns. O cerere de informații a browserului ia forma unui URL fiind referită și ca adresa sau locația paginii.

Un URL are forma de http://www.microsoft.com/msoffice/freestuf/msword.

Porțiunea http:// indică faptul că cererea browserului se realizează prin protocolul http. www.microsoft.com este numele domeniului serverului interogat.

URL-urile pot referi nu doar pagini web ci și orice alt serviciu disponibil pe internet, inclusiv Gopher,FTP, Telnet și Usenet. De asemenea se pot referi la un fișier din propriul calculator.

Porțiunea ce desemnează numele domeniului poate include un număr de port, ca în exemplul următor http://www.siteweb.net:80/cale/paginaweb.htm.

Aceasta specifică serverului să acceseze site-ul pe un port anume. Portul 80 este portul implicit definit în specificațiile http, întrucât este asignat implicit în cazul în care nu este specificat. Numele paginilor web au în mod uzual extensia .html sau .htm indicând prin aceasta că pagina conține cod HTML. Multe pagini însă în special home-page, nu necesită specificarea unei căi URL fiind sub forma http://www.siteweb.net.

Aceste adrese accesează o pagină care este stocată în directorul rădăcină de aceea nu este necesară specificarea căii. Majoritatea serverelor stabilesc în mod implicit o prima pagină, cu un nume rezervat, cum ar fi default.html sau index.html. Dacă nu este specificat numele paginii, serverul va returna automat această pagina .

URL-urile pot indica și alte tipuri de documente decât paginile HTML de exemplu http://www.siteweb.net/logo.gif va afișa o imagine GIF.

1.3. Servere web și HTTP

Programul navigatorul client apelează serverul printr-o cerere alcătuită din mai multe părți: protocolul, adresa, calea și numele fișierului. Din porțiunea destinată protocolului, navigatorul determină modalitatea în care va interacționa cu serverul ce în adresează și cum va afișa datele ce vor fi primite de la server. Apoi, va apela adresa conținută în URL și va aștepta răspunsul de la server.

După ce serverul primește cererea va verifica URL pentru a determina protocolul conexiunii. Determina de asemenea calea și numele fișierului cerut le găsește pe harddisk și trimite datele la programul client folosind protocolul curent.

Apoi este rândul navigatorului să acționeze, el colectând informațiile de la server, interpretându-le și afișându-le într-o manieră adecvată.

La prima părere s-ar părea că serverul are mai puține operații de realizat decât programul navigator în cazul unei simple tranzacții, cum ar fi vizualizarea unei pagini web, acest fapt este probabil perfect adevărat si cu toate aceasta prin sarcina serverului este mai complicată decât pare la prima vedere.

De exemplu, dacă apare o eroare, cum ar fi o cerere pentru o pagină care nu există serverul trebuie să trimită la client mesajul de eroare adecvat. Dacă o cerere necesită rularea unui program CGI, serverul trebuie să îl încarce și să ruleze acel program. Acest proces, în mod uzual, presupune crearea unei pagini HTML on the fly care conține rezultatele programului, și apoi trimitere acestora la navigator.

De asemenea, fiecare fișier transmis de server trebuie să fie identificat după tip și trebuie să-i fie atașat un antet MIME corespunzător astfel încât navigatorul să știe ce operații trebuie să realizeze cu datele primite. În mod uzual, o pagină web conține un amestec de text formatat, imagini cât și sunete sau chiar clipuri video fiecare din acestea trebuie să fie identificate corespunzător, în caz contrar navigatorul neștiind cum să interpreteze datele primite.

Serverele web includ de asemenea facilități cum ar fi cele pentru criptarea datelor și autentificarea clienților, operații care necesită o parte importantă din timpul de lucru al serverului.

1.3. HTTP

HyperText Transfer Protocol a fost proiectat să fie rapid, simplu și cu un oarecare caracter de securitate iar conexiunea dintre un program client și unul server este temporară și trebuie să fie restabilită pentru fiecare transfer de date.

Specificațiile HTTP încorporează un întreg set de metode care sunt folosite pentru a executa sarcini asociate servirii unui site web. Caracterul deschis al specificațiilor HTTP face posibilă adăugarea de noi funcții fără a afecta funcționalitatea web-ului. După cum am menționat anterior, mesajele sunt transmise într-un format similar Internet Mail și MIME gateway-urile permit navigatoarelor să solicite executarea de aplicații CGI pe calculatorul server, iar comunicația este posibilă cu alte protocoale internet, cum ar fi NNTP, SMTP, FTP.

1.4. HTML

1.4.1. Despre HTML

Un predecesor major al web este Gopher. Acesta a definit o modalitate de afișare a informațiilor sub formă de text ASCII. Acesta permitea o oarecare formatare a textului cu ajutorul caracterelor tab spațiu și sfârșit de linie. Probabil daca această modalitate de prezentare a informațiilor s-ar fi menținut, web-ul nu ar fi atins cota de popularitate de care se bucură astăzi si aspectul unui document nu era unul tocmai plăcut aici intervenind limbajele de marcare cum ar fi HTML.

Limbajele de marcare permit formatarea informațiilor dintr-un document într-o manieră atrăgătoare, fără compromisuri privind ușurința în utilizare cu ajutorul unui limbaj de marcare pot fi create documente care să combine text și structuri complexe.

Deoarece marcajele conțin caractere standard crearea unui document într-un limbaj de marcare este o sarcină relativ ușoară fără a necesita vreun software special. Pentru crearea unui document HTML este suficient un editor standard de text.

HTML este cel mai frecvent folosit limbaj de marcare iar popularitatea sa denotă din ușurința în folosire și din caracterul său prietenos față de utilizator. Cu ajutorul HTML pot fi create documente web ușor și rapid, totodată putând fi făcute disponibile unei largi audiențe.

Când Tim Berners-Lee a pus bazele web-ului a făcut-o creând a interfață comună și ușor de folosit care permitea oricui publicarea unui document. Pentru realizarea acestui lucru, el și ceilalți cercetători de la European Laboratory for Particle Physics au pus bazele HTML folosind un subset al Standard Generalized Markup Language.

Pentru specificațiile originale HTML au fost adoptate doar elementele esențiale ale SGML. Aceasta a redus drastic complexitatea specificațiilor originale HTML cât și supraîncărcarea rețelei la transferul documentelor hypertext. Un alt avantaj al folosirii SGML ca bază pentru HTML a fost acela că definițiile de tip de document SGML furnizează o modalitate ușoară de extindere a HTML-ului standard. Este evidentă intenția proiectanților HTML de a crea un limbaj pentru dezvoltarea documentelor web care inițial să fie simplu de folosit.

Specificațiile HTML au parcurs un drum lung. Au fost definite specificațiile HTML 2.0 în toamna anului 1995 si a urmat HTML 3.0 si apoi HTML 3.2 care a devenit un produs W3C (World Wide Web Consortium), HTML 4.0 în 1997. Fiecare nouă specificație era pe deplin compatibilă cu versiunile anterioare incluzând îmbunătățiri față de varianta standard a HTML. Ca o completare a acestor specificații au fost create extensii ale HTML. Cu toate că aceste extensii nu sunt standardizate, multe dintre ele au fost îmbrățișate de creatorii de documente web.

1.4.2. Structura tag-urilor HTML

Formatarea unui document HTML depinde de coduri de marcare, denumite marcaje. Marcaje definesc structura documentului și sunt alcătuite din numele unui element cuprins între caracterele < și >, <H1>, de exemplu, indică începutul unui antet de nivelul 1, deoarece HTML nu este case sensitive <h1> și <H1> indică același lucru.

Majoritatea marcajelor sunt folosite pereche. Un marcaj numit de început indică browserului începutul unui document. Un alt marcaj de sfârșit, indică browserului finalul elementului. Singura diferență între marcaje de început și cel de sfârșit este acela că cel de sfârșit conține caracterul / înainte de numele elementului. De exemplu marcajul antetului de nivel 1 este indicat de <H1>, iar sfârșitul său este de </H1>.

1.4.3. Structura documentului HTML

Fiecare document HTML trebuie să înceapă cu marcajul de marcare <HTML> și să se termine cu marcajul </HTML>. Marcajul de început <HTML> indică browser că documentul este un document HTML marcând începutul documentului. Marcajul de sfârșit </HTML> marchează sfârșitul documentului și este ultimul element dintr-un document HTML.

Fiecare document HTML trebuie, de asemenea, să aibă, un antet și un corp. Antetul urmează imediat macajul <HTML>, fiind folosit pentru a specifica aspecte cheie ale documentului, cum ar fi de exemplu titlul. Începutul antetului este specificat de marcajul de început <HEAD>, sfârșitul său fiind marcat prin </HEAD>.

Antetului îi urmează principala secțiune a documentului, numită corpul documentului. Corpul documentului conține textul și obiectele ce vor fi afișate de către browser. Corpul este delimitat de marcajele de început și sfârșit, respectiv <BODY> și </BODY>.

Deși majoritatea browserelor pot lucra cu documente HTML cărora le lipsesc secțiunile HEAD și BODY.

Folosind cele trei tag-uri de marcare amintite, structura unui document HTML se prezintă astfel:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

1.5. CSS

1.5.1. Despre CSS

Cascading Style Sheets (CSS) este un limbaj folosit pentru a descrie aspectul și formatarea unui document scris într-un limbaj de marcare. În timp ce cele mai multe ori folosit pentru a schimba stilul de pagini web si interfete scrise în HTML și XHTML, limba poate fi aplicat la orice tip de document XML, inclusiv XML simplu, SVG și XUL. Împreună cu HTML și JavaScript, CSS este o tehnologie fundamental folosit de cele mai multe site-uri web pentru a crea pagini web vizual, interfete de utilizator pentru aplicații web, și interfețe de utilizator pentru multe aplicații mobile.

CSS este destinat în primul rând pentru a permite separarea conținutului documentului de prezentare de documente, inclusiv elemente cum ar fi aspectul, culorile, și fonturile. Această separare poate îmbunătăți accesibilitatea conținutului, oferă mai multă flexibilitate și control în specificarea caracteristicilor de prezentare, permite mai multe pagini HTML pentru a partaja formatare prin specificarea CSS relevant într-un .css fișier separat, și să reducă complexitatea și repetiția în conținutul structural, cum ar fi tabele semantică nesemnificative care au fost folosite pe scară largă pentru pagini format înainte de redare consistent CSS a fost disponibil în toate browserele importante. CSS face posibilă separarea instrucțiuni de prezentare de conținutul HTML într-un fișier sau stil secțiune separată a fișierului HTML.

Pentru fiecare element HTML potrivite, se oferă o listă de instrucțiuni de formatare. De exemplu, o regulă CSS s-ar putea preciza că "toate titluri 1 ar trebui să fie bold," lăsând semantic markup HTML care afirmă "acest text este un titlu de nivel 1" fără formatare cod, cum ar fi <bold> marcaj de indicare a modului în care aceste texte ar trebui fi afișată. Această separare de formatare și conținut face posibilă prezentarea aceeași pagină marcare in stiluri diferite pentru diferite metode de redare, cum ar fi pe ecran, în print, prin voce (când a citit de un browser sau ecran cititor pe bază de vorbire) și bazarea de pe Braille, dispozitive tactile. Acesta poate fi de asemenea utilizat pentru a afișa pagina web diferit în funcție de dimensiunea ecranului sau dispozitivul pe care este vizualizat. În timp ce autorul unei pagini web link-uri de obicei, într-un fișier CSS în fișierul markup, cititorii pot specifica o foaie de stil diferit, cum ar fi un fișier CSS stocat pe computerul lor, pentru a trece peste cel autorul a specificat. În cazul în care autorul sau cititorul nu a leaga documentul la o foaie de stil, stilul implicit al browser-ul va fi aplicat.

Un alt avantaj al CSS este că modificările estetice aduse proiectului grafic unui document (sau sute de documente) pot fi aplicate rapid și ușor, prin editarea câteva rânduri într-un singur fișier, mai degrabă decât printr-un proces laborios (și, prin urmare, costisitoare) de crawling peste fiecare linie de document de linie, schimbarea marcare. CSS descrie un sistem de prioritate pentru a determina ce stil se aplică reguli împotriva unui anumit element. In acest așa numita cascadă, priorități sau ponderi sunt calculate și atribuite regulilor, astfel încât rezultatele sunt previzibile.

Specificațiile CSS sunt întreținute de către World Wide Web Consortium (W3C). Internet de tip media (tip MIME) text/css este înregistrat pentru utilizarea cu CSS de RFC 2318 (martie 1998). W3C operează un serviciu gratuit de validare CSS pentru documentele CSS.

1.5.2. Utilizarea CSS-ului

Înainte de CSS aproape toate atributele de prezentare de documente HTML au fost cuprinse în marcajul HTML toate culorile font, stiluri de fundal, elemente de, frontiere și dimensiuni a trebuit să fie descrise în mod explicit, de multe ori în mod repetat în HTML. CSS permite autorilor să mute o mare parte din aceste informații într-un alt dosar.

De exemplu, titlurile elemente H1, sub rubrici H2, sub sub rubrici H3, etc., sunt definite cu ajutorul structura HTML. În presa scrisă și pe ecran, alegerea font , dimensiune, culoare și accentul pentru aceste elemente este de prezentare.

Înainte de CSS, autorii documentelor care au dorit să atribuie astfel de caracteristici tipografice să zicem toate rubricile H2 a trebuit să repete HTML de prezentare pentru fiecare apariție a acestui tip poziție. Acest lucru a făcut documente mai complexe mai mari și mai predispusă la erori și dificil să se mențină. CSS permite separarea de prezentare de la structura. CSS poate defini culoarea, font, alinierea textului, dimensiunea, frontiere, spațierea, aspectul și multe alte caracteristici tipografice și poate face acest lucru in mod independent de pe ecran și vedere tipărite. CSS definește de asemenea stiluri non vizuale cum ar fi viteza și accentul cu care textul este citit de către cititorii de text fonetice. W3C a depreciat acum utilizarea tuturor markup HTML de prezentare.

1.5.3. Selectori CSS

Un CSS este foarte ușor de scris și de citit de cunoscătorii de limba engleză. Programatorul definește blocuri de reguli de prezentare și stilare delimitate de acolade {}. Într-un bloc de reguli se definesc declarații CSS delimitate cu semnul ; (punct și virgulă). Proprietățile CSS sunt cuvinte în engleză ce trebuie urmate de o valoare: proprietate: valoare;. O declarație CSS este perechea formată dintr-o proprietate și o valoare. Fiecare bloc de reguli începe cu un selector sau mai multe selectoare separate de virgulă: selector1, selector2, selector3 {proprietate: valoare;}. Exemple de proprietăți și valori: font-size: 10px; position: absolute; margin: 15px, etc. În CSS fiecare element din limbajul de marcaj este considerat o cutie, un box model.

Orice tag din HTML este afișat în modelul de cutie. Modelul de cutie în CSS este constituit din margine, bordură, umplutură și conținutul propriu-zis. Aceste proprietăți de stilare a cutiei în CSS sunt pentru ajustarea spațiului între elementele din limbajul de marcaj. Marginea reprezintă spațiul exterior față de element și nu are culoare, este transparent. Bordura poate fi stilată în mai multe moduri: linie continuă, punctată, în culori, etc. Umplutura este un spațiu între bordură și conținutul propriu-zis care preia culoarea sau fundalul stabilit pentru element, nu poate avea o culoare specific setată. Când mai multe elemente se află unul lângă altul, marginile lor se contopesc. În implementarea unei interfețe aceste proprietăți sunt indispensabile pentru layout și nu se poate obține o interfață avansată fără manipularea acestora.

Selectoarele sunt expresii care determină asupra căror elemente (atribute sau taguri) din limbajul de marcaj (de ex. HTML) sunt aplicate proprietățile de stilare CSS. Selectoarele sunt clasificate în funcție de tipul de elemente: universal, element, clasă, id și atribut. Un selector de elemente aplică regulile de stilare pe toate elementele de un anumit fel ce se găsesc în document, de exemplu tag-urile sau succedate de blocul de reguli {proprietăți: valori;}. Selectorul de tip atribute aplică proprietățile CSS în funcție de atributele elementelor. Acesta este de forma [atribut=”valoare”] {proprietăți: valori;}, opțional poate fi precedat de un alt element, de orice tip, pentru a preciza mai specific unde se găsește atributul și nu este imperativ să se specifice valoarea: selector [atribut] {proprietăți: valori;}. Pentru implementarea tehnică a unei interfețe întotdeauna este necesară stilarea unor anumite tag-uri sau a unor seturi de tag-uri cu proprietăți CSS comune. Fiecare tag HTML poate avea atributul id=”nume-de-identificare” sau class=” CSS Box Model Principii de design 43 elemente”. Se pot marca mai multe tag-uri de același tip sau tipuri diferite folosindu-se atributul class pentru a permite ulterior stilarea acestora în CSS utilizând selectoare de tip clasă, având forma .nume-clasă; numele clasei este precedat de un punct. Atributul id trebuie să aibă o valoare unică pentru fiecare tag marcat în acest mod.

Selectorul pentru id-uri este precedat de semnul # (diez). Cele două tipuri de selectoare sunt foarte des utilizate în implementarea de interfețe. În general, pentru a realiza o interfață de site se folosește tag-ul foarte des, cu diferite id-uri, pentru a facilita procesul de stilare și de design. Acest tag nu are nici o valoare semantică, însă este utilizat pentru a structura arborele logic al documentului astfel încât să permită implementarea tehnică a designului. Selectorul universal precedat de semnul * (asterisk).

Acesta este implicit pentru selectoarele de tipul: *.nume-clasă, *[atribut], etc. Însă, dacă semnul * este utilizat pentru înlănțuirea de elemente într-un selector, atunci elementul secundar specificat trebuie să fie absolut un descendent oarecare. Asta înseamnă că dacă există elemente secundare în relație de descendență directă față de primul element specificat din selector, acestea sunt excluse și nu vor fi stilate. Pentru a specifica relația la nivel ierarhic între elementele unui selector, există mai multe moduri de înlănțuire a acestora: descendență oarecare, descendență directă, adiacență și generală. Relația între elementele unui selector este stabilită prin caracterul folosit între acestea[ ].

Relațiile de tip descendență oarecare și descendență directă pot fi explicate utilizând două selectoare de elemente ca exemplu pentru aceste moduri de înlănțuire: p span, li > em {proprietăți: valori;}. În acest exemplu, selectoarele vor aplica stilarea pe tag-urile și aflate ierarhic în tag-ul și respectiv. Diferența între cei doi selectori este importantă: în primul caz nu contează adâncimea ierarhică a tag-ului , însă pentru al doilea selector, tag-ul trebuie să fie descendent direct ierarhic în pentru a fi găsit; dacă se află mai adânc, nu va mai avea proprietățile de stilare aplicate. Se poate înțelege cu ușurință că dacă se folosește un spațiu între elemente, nu contează adâncimea elementului secundar la nivel ierarhic, dar dacă se utilizează semnul > între ele, elementul secundar trebuie să fie descendent direct.

Elementele în selector pot fi înlănțuite și cu semnul + sau ~ (tilda). Pentru a selecta un element adiacent celuilalt, la nivel ierarhic, se folosește + între acestea. Dacă se dorește stilarea a unor elemente ce succed elementul specificat, se utilizează semnul ~ (tilda). În CSS se pot folosi mai multe tipuri de elemente într-un singur selector și pot fi înlănțuite în diferite moduri. De exemplu: #antet ol > li .subliniate [lang=’fr’] {proprietăți: valori;}. În acest exemplu, proprietățile CSS sunt aplicate doar pe elementele din HTML ce au atributele class=”subliniate” și lang=”fr”. Însă, construcția selectorului impune mai multe criterii pentru a fi stilate. Prima condiție: elementele trebuie să se afle într-un element cu id=”antet”. Mai mult, indiferent cât de adânc în ierarhie, față de #antet, trebuie să se găsească o listă ordonată, în care elementul este obligatoriu descendent direct. Asta înseamnă că dacă lista ordonată este de mai multe nivele și se găsesc mai adânc în ierarhie alte elemente din clasa „subliniate” și au atributul lang=”fr”, nu vor fi stilate.

1.6. PHP și MySQL

PHP – MySQL constituie una dintre cele mai bune soluții pentru site-urile web ce folosesc baze de date. Un raport neoficial arată că în perioada iunie 1998 – martie 1999 numărul calculatoarelor gazdă ce foloseau PHP a crescut de la 7500 la 410000.

MySQL este un server de baze de date, mic, compact, ideal pentru aplicațiile mici – și nu numai. Ca o completare a suportului standard SQL, MySQL este compatibil cu un număr mare de platforme, deținând abilități multifir pentru server UNIX, rezultând astfel performanțe ridicate. MySQL poate rula și pe sisteme non-Unix, pe sistemele de tip Windows NT rulând ca un serviciu, în timp ce pe cele Windows 9x rulează ca un proces normal.

PHP este un limbaj de script pe partea de server. Asemeni scripturilor ASP, scripturile PHP sunt procesate de către un server web. După ce serverul interpretează codul PHP, returnează rezultatul către browser sub formă de cod HTML.

Ca o completare a caracterului liber (deși MySQL are totuși unele restricții privind licența), combinația PHP – MySQL este de asemenea independentă de, ceea ce înseamnă că aplicații dezvoltate pentru sisteme Windows vor rula la fel de bine pe sisteme Unix. De asemenea, PHP poate fi rulat ca un proces CGI extern, ca un interpretor independent de scripturi sau ca un modul al serverului web Apache.

PHP suportă, de asemenea, un număr mare de tipuri de baze de date, inclusiv Informix, Oracle, Sybase, Solid, și PostgreSQL – cât și ODBC.

PHP suportă o mulțime de facilități, în concordanță cu dezvoltarea tehnologică a internet-ului. Acestea includ mecanisme de autentificare, XML, crearea dinamică de imagini, suportul pentru partajarea memoriei, crearea dinamică de documente PDF fiind doar câteva dintre acestea. Trebuie menționat de asemenea că la PHP pot fi ușor adăugate module suplimentare, oricine putând realiza și adăuga propriile sale soluții.

1.6.1. Despre PHP

PHP este o unealtă care permite crearea de pagini web în mod dinamic. Paginile web care conțin cod PHP sunt tratate exact ca o pagină HTML obișnuită putând fi create și editate asemeni acesteia.

PHP este un limbaj de script care funcționează alături de un server Web.

<html>

<head>

<title>Exemplu</title>

</head>

<body>

<?php

echo("Exemplu de script PHP");

?>

</body>

</html>

Este de notat diferența față de alte limbaje script CGI scrise în limbaje precum Perl sau C: în loc de a scrie un program cu o multitudine de linii de comanda afișate în final într-o pagină HTML, se scrie o pagină HTML cu codul inclus pentru a realiza o acțiune precisă (în cazul nostru se va afișa un text). Codul PHP este inclus între tag-urile speciale de început și de sfârșit care permit utilizatorului să treacă din modul HTML în modul PHP.

Față de alte limbaje script, precum Javascript, la PHP codul se execută pe server. Dacă pe serverul Web se află un script similar celui anterior, clientul nu va primi decât rezultatul execuției scriptului, fără a avea nici o posibilitate de acces la codul care a produs rezultatul. Poate fi configurat serverul de Web să prelucreze (analizeze) toate fișierele HTML ca fișiere PHP. Astfel nu există nici un mijloc de a distinge paginile care sunt produse dinamic de paginile statice. Limbajul PHP are de asemenea suport pentru diverse servicii server utilizând protocoale precum IMAP, SNMP, NNTP, POP3 și HTTP.

1.7. PHP Hypertext Preprocessor

PHP (PHP: Hypertext Prepocessor), cunoscut în versiunile mai vechi și sub numele de PHP/FI (Personal Homepage/Form Interpreter), a fost gândit inițial a fi o simplă aplicație CGI pentru interpretarea formularelor definite prin HTML și procesate de un program scris într-un limbaj Perl, script shell, executat pe server. În cazul interfeței CGI era necesară permisiunea de a rula programe pe server, ceea ce ducea la lacune în securitate și în plus la disocierea de documentul HTML a programului care procesa datele.

PHP reprezintă un pachet puternic care oferă un limbaj de programare accesibil din cadrul fișierelor HTML, limbaj asemănător cu Perl sau C, plus suport pentru manipularea bazelor de date într-un dialect SQL (dBase, Informix, MySQL, mSQL, Oracle, PostgreSQL, Solid, Sybase, ODBC etc.) și acces la sisteme hipermedia precum Hyperwave. De asemeni, PHP suportă încărcarea fișierelor de pe calculatorul client: upload și oferă suport pentru cookies (mecanism de stocare a datelor în navigatorul client pentru identificarea utilizatorilor, propus de Netscape).

Istoria PHP-ului începe la sfârșitul anului 1994 când Rasmus Lerdorf dezvoltă prima versiune, ca proiect personal. PHP-ul este făcut public la începutul anului 1995 sub denumirea de Personal Home Page Tools, fiind considerat un analizor simplist care interpreta câteva macrouri ce puteau fi incluse în cadrul documentelor HTML, permițând contorizarea accesului la paginile Web sau accesarea unei cărți de oaspeți. Analizorul a fost rescris la mijlocul aceluiași an și denumit PHP/FI 2.0, unde FI era o alta aplicație scrisă de Rasmus Lerdorf, un interpretor de formulare HTML. A fost adăugat și suportul pentru bazele de date mSQL și astfel PHP/FI a început să aibă succes, fiind disponibil gratuit pe Web.

Programatorii Zeev Suraski și Andi Gutmans rescriu analizorul PHP și noua aplicație formează nucleul versiunii PHP 3.0 care include o parte din vechile surse PHP/FI 2.0. Relativ recent, la începutul anului 2000, a fost făcută publică versiunea PHP 4.0, utilizând puternicul motor de scriptare Zend și oferind suport nu numai pentru serverul Apache ci și pentru alte servere Web. De asemeni, PHP 4.0 oferă posibilitatea accesării documentelor XML via DOM. Se estimează că numărul site-urilor care folosesc în prezent PHP este de peste un milion. Deja, pe Web, exista o multitudine de aplicații și utilitare concepute în PHP, care se regăsesc grupate și în așa-numitul PEAR (PHP Extension and Add-on Repository).

1.8 MySQL My Structured Query Language

MySQL este cel mai popular suport de baze de date SQL Open Source, fiind conceput și dezvoltat de MySQL AB o companie ce furnizează servicii pentru bazele de date MySQL.

MySQL este un sistem de gestionare a bazelor de date. O bază de date este o colecție structurată de date. Deoarece calculatoarele nu au probleme în privința volumului mare de date, sistemul de gestiune joacă un rol central în prelucrarea lor, atât ca parte a altor aplicații, cât și ca aplicație de sine stătătoare. MySQL este un sistem relațional de gestionare a bazelor de date. Pentru a accesa, adăuga sau prelucra datele stocate într-o bază de date este necesar un sistem de gestiune a bazelor de date cum este MySQL Server.

O bază de date relațională nu stochează informațiile într-o singură tabelă ci în mai multe tabele separate. Tabelele sunt legate între ele prin relații definite, făcând posibilă astfel combinarea datelor din mai multe tabele la cerere. Aceasta duce la o flexibilitate și o viteză sporită. MySQL este Open Source cea ce înseamnă că oricine are posibilitatea de a folosi MySQL sau de a-l modifica.

1.8.1. Serverul de baze de date MySQL

Serverul MySQL a fost inițial creat pentru lucrul cu baze de date mari fiind mult mai rapid decât soluțiile existente. Și-a demonstrat calitățile în practică fiind folosit cu succes ani la rând în medii cu cerințe deosebite. Conectivitatea, viteza și securitatea fac din MySQL Server cea mai potrivită soluție pentru accesarea bazelor de date pe Internet. Dezvoltarea constantă a MySQL a făcut ca azi acesta să poată oferi un set de funcții bogat și util.

1.8.2. Tipuri de tabele MySQL

Începând cu MySQL versiunea 3.23.6 se poate alege între trei formate de tabele de bază (ISAM, HEAP și MyISAM). Versiunile mai noi suportă și alte tipuri de tabele ca InnoDB sau BDB.

La crearea unei tabele trebuie specificat tipul acesteia. MySQL va crea întotdeauna un fișier cu extensia frm pentru a păstra structura tabelei.

Dacă nu se specifică tipul tabelei, va fi creată o tabelă de tipul MyISAM. De asemenea, același tip de tabelă va fi creat în cazul în care tipul specificat nu a aparținut sistemului MySQL. Aceasta reprezintă un avantaj în cazul în care se copiază tabele de la o versiune de MySQL la alta, diferită. O tabelă poate fi convertită cu ajutorul instrucțiunii ALTER TABLE. MySQL suportă două categorii de tabele tabele securizate InnoDB și BDB și nesecurizate MERGE, HEAP, ISAM, și MyISAM.

1.9. Elemente de bază ale unui document web

Următoarele elemente ar trebui să apară în fiecare document web

Numele companiei

Un link spre o pagină cu informații despre companie sau adresa de e-mail a companiei

Titlul paginii

Adresa de e-amil a autorului sau a persoanei de contact

Conținutul paginii

Un link către prima pagină

Data creării sau a ultimei modificări (în cazul materialelor pentru care timpul este un factor important)

Drepturile de autor

Sigla companiei

Numele companiei ar trebui să apară în cadrul fiecărei pagini, pentru ca fiecare utilizator, indiferent de modul în care a intrat în sistem să știe cine este proprietarul paginii.

Furnizarea unui link către pagina cu informații despre companie sau adresa de e-mail a companiei este un element foarte important pentru că trebuie ținut cont de faptul că este vorba de o comunicare în ambele sensuri. Dacă vizitatorii nu se pot adresa cuiva pentru comenzi pentru obținerea de informații suplimentare, atunci sistemul nu servește obiectivele propuse, el nerealizând altceva decât informarea vizitatorilor despre existența companiei.

Titlul paginii trebuie să existe la două nivele. În primul rând, titlul paginii trebuie inclus în marcajul HTML <TITLE> astfel încât browser să îl afișeze în afara paginii, de obicei în bara de titlu. În al doilea rând, titlul paginii trebuie să apară, într-un mod clar, în interiorul corpului paginii, în primul ecran vizibil, fără derulare, pe un monitor cu rezoluția de 640×480 pixeli.

Autorul sau persoana de contact adesea denumit webmaster trebuie să-și prezinte adresa de e-mail inclusiv un link către aceasta, dacă este posibil în fiecare pagină aceasta permițând utilizatorilor să raporteze problemele întâmpinate. De multe ori aceasta poate constitui un lucru neplăcut, deoarece există o mulțime de persoane care dispun de timp liber. Pe site-urile cu trafic ridicat este de preferat ca adresa de e-mail a webmaster să fie făcută publică după ce există certitudinea că toate problemele sistemului au fost rezolvate.

Un link către prima pagină oferă un sprijin persoanelor nefamiliarizate cu alte unelte de navigare, permițând un acces rapid la prima pagină. Este de asemenea util în cazul în care un utilizator a intrat în sistem în altă parte decât prima pagină.

Comunicatele de presă, articole tehnice, în general materialele pentru care factorul timp reprezintă un element important pot să includă data creării sau a ultimei modificări. Dacă nu prezintă un caracter secret, poate fi inclusă în codul sursă, sub formă de comentariu, data creării și eventual revizia și alte informații în partea de jos a fiecărei pagini.

Legea dreptului de autor nu prevede ca necesară existența în cadrul paginii a unor informații privind autorul pentru dovedirea proprietății, însă este util ca aceste informații să existe.

Din motive obiective apare necesitatea includerii în cadrul paginii de link-uri către alte pagini dar în ce cantitate și în ce mod depinde de aplicație și de stil de exemplu un link nu trebuie să apară undeva la mijlocul unui paragraf, deoarece există posibilitatea ca acesta să nu mai fie citit ca alternativă poate fi adăugat un link spre o pagină care să ofere mai multe informații la sfârșitul paragrafului.

2. Principii de web design

La aranjarea paginilor trebuie avut în vedere faptul că utilizatorii începători pot fi ușor dezorientați de documente cu lungime mare care să necesite derulare. Aceștia par incapabil să găsească link-urile atunci când acestea dispar de pe ecran în cazul derulării unei pagini. Deși există modalități de orientare a acestor utilizatori este necesar ca lungimea unei pagini să se limiteze la două ecrane. În cazul în care există necesitatea folosirii unor documente cu lungime mai mare trebuie asigurate link-uri pentru navigare la începutul și sfârșitul paginii chiar la mijlocul ei în cazul documentelor foarte lungi.

Un sistem pe bază de cadre poate elimina această problemă permițând păstrarea pe ecran a link-urilor pentru navigare simultan cu derularea conținutului paginii.

Un alt dezavantaj al paginilor web lungi este acela că utilizatorul trebuie să se bazeze pe bara de derulare verticală. În multe interfețe grafice cursorul acesteia are o dimensiune fixă, în acest caz utilizatorul neavând nici un indiciu cu privire la lungimea documentului. În documentele foarte lungi, o mișcare cât de ușoară a cursorului barei de derulare verticale poate schimba complet conținutul ecranului.

Ca în cazul oricărei reguli există și excepții de exemplu este utilă păstrarea informațiilor într-un singur document atunci când se anticipează dorința utilizatorilor de a copia sau imprima acel document.

La proiectarea unor pagini trebuie furnizate link-uri în interiorul paginii. Cea mai bună modalitatea de aranjare a unui astfel de document este aranjarea sa asemenea unei cărți. Poate fi realizat chiar un cuprins la începutul sau sfârșitul documentului astfel încât utilizatorul să ajungă la secțiunea ce prezintă interes fără a parcurge tot documentul.

La final, în mod obișnuit, o interfață de site este o serie de imagini efectuate într-un program de grafică, de design, cum ar fi Corel Draw, Adobe Photoshop, etc. Pentru a avea un site propriu-zis, aceste imagini urmează să fie tăiate (tranșate) în bucă- țele, în diferite fișiere, în funcție de design, de elementele din interfață și în funcție de tehnologia folosită pentru a implementa interfața. Implementarea unei interfețe constă în programarea HTML și CSS. Toate proprietățile definite textelor în programul de design trebuie corelate cu proprietăți CSS pentru a obține un maximum de fidelitate cu designul inițial și trebuie evitată cu orice preț rasterizarea, transformarea, textelor din design în imagini, pentru a obține același aspect vizual, deoarece gradul de accesibilitate scade drastic.

2.1. BlueVoda Website Builder

Primele site-uri au fost create la începutul anilor 1990. Aceste site-uri au fost scrise manual in HTML.

De-a lungul timpului, a fost creat software pentru a ajuta pagini web proiectare și 1998 Dreamweaver a fost stabilită ca lider in industria. Cu toate acestea unii au criticat calitatea codului produs de astfel de programe ca fiind exagerate și bazează pe tabele. Industria sa mutat spre standardele W3C, Dreamweaver și alții au fost criticate pentru a nu fi conforme. Conformitatea sa îmbunătățit în timp, dar mulți profesioniști încă preferă să scrie markup optimizat de mână.

Instrumente open source au fost de obicei dezvoltate cu standardele, și a făcut mai puține excepții pentru atunci dominante abaterile Internet Explorer de la standardele. W3C a început Amaya in 1996 pentru a prezenta tehnologiile Web într-un client de web complet echipat. Acest lucru a fost de a oferi un cadru care integrate o mulțime de tehnologii W3C într-un singur mediu, consistent. Amaya a început ca un editor HTML si CSS și sprijină acum XML, XHTML, MathML și SVG.

Geocities a fost unul dintre primii constructori mai moderne site-ul care nu au nevoie de orice aptitudini tehnice. Cinci ani de la lansarea sa în 1994 Yahoo! a cumpărat pentru $ 3.6b. După ce a devenit depășit tehnic a fost închis pentru totdeauna în aprilie 2009. De atunci, piața do-it-yourself unelte de constructii site-ul a evoluat cu companii precum Weebly, Wix.com și Webs.com. Împreună, aceste trei societăți găzdui mai mult de 100 de milioane de site-uri web.

2.2. BlueVoda Website Builder online vs. offline

Constructori site-ul on-line de obicei au nevoie de clienții să semneze cu compania de găzduire web. Unele companii oferă exemple de site-uri deplin funcționale realizate cu constructor site-ul lor. Gama de servicii variază undeva între crearea de pagini web de bază cu caracter personal sau de conținut de rețea socială pentru a face complet site de afaceri de comerț, fie șablon pe baza de platformele mai flexibile, de design complet gratuit.

Principalul avantaj al unui site web constructor online, este faptul că este rapid și ușor de utilizat și de multe ori nu are nevoie de experiența anterioară. De multe ori, un site poate fi construit și să fie difuzat direct pe internet rapid. Deși există multe site-uri generale constructori puteți găsit cu ușurință un constructor site online. Site-uri sunt, în general, create utilizând fie HTML sau Adobe Flash. HTML este un format standard acceptat de toate browserele. Flash are o popularitate tot mai mare, în special din moment ce a depăsit unele limitări, cum ar fi să nu fie văzute de crawlerele web, cum ar fi Google si Yahoo și astfel a fi indexate. Instrumente HTML sunt împărțite în cele care permit editarea codului sursă și cele care au doar un mod de WYSIWYG.

Constructori web deconectat pentru a satisface profesionale de web designeri care au nevoie pentru a crea pagini pentru mai mult de un client sau web gazdă. Constructori moderni web offline sunt de obicei atât de WYSIWYG și permite editarea directă a codului sursă și foi de stil în cascadă (CSS). Acestea necesită în general cel puțin o înțelegere de bază a HTML si CSS. Cu toate acestea deși ele sunt mai flexibile decât constructori on-line, acestea sunt adesea scumpe. Cu toate acestea unele open source site constructori pot fi descărcate gratuit.

Dreamweaver, ca și alte editoare HTML editează fișiere local apoi le încarcă pe serverul de web de la distanță cu ajutorul FTP, SFTP, WebDAV sau. Dreamweaver CS4 care suportă acum Subversion (SVN) sistemul de control al versiunii.

2.3. Adobe Dreamweaver

Adobe Dreamweaver este un instrument de proprietate de dezvoltarea web-ului făcut de Adobe Systems. Dreamweaver a fost creat de Macromedia în 1997, și a fost menținută de către acestea până Macromedia a fost achiziționată de Adobe Systems în 2005.

Adobe Dreamweaver este disponibil pentru OS X și Windows .

Ca urmare a achiziționării Adobe a produse Macromedia suite, emisiile de Dreamweaver ulterioare 8.0 au fost mai conforme cu standardele W3C. Versiunile recente au îmbunătățit suport pentru tehnologii web cum ar fi CSS, JavaScript și diverse limbaje de scripting server-side și cadrele , inclusiv ASP (ASP JavaScript, ASP VBScript, ASP.NET C #, ASP.NET VB), ColdFusion , scriptlet și PHP.

2.3.1. Caracteristicile Dreamweaver-ului

Adobe Dreamweaver este o aplicație web design in dezvoltare, care oferă un editor vizual WYSIWYG (colocvial denumite de vedere Design) și un editor de cod cu caracteristici standard, cum ar fi evidențierea sintaxei, codul de finalizare și codul colaps, precum și mai multe caracteristici sofisticate cum ar fi în timp real verificarea sintaxă și codul introspecție pentru a genera cod indicii pentru a ajuta utilizatorul în scrierea de cod. De vedere design faciliteaza layout design rapidă și de generare a codului, deoarece permite utilizatorilor să creeze și să manipuleze structura elemente HTML. Dreamweaver are un browser integrat pentru previzualizarea paginilor web dezvoltate în propriul panou de previzualizare a programului, în plus față de a permite conținut pentru a fi deschis în browserele web instalate la nivel local. Acesta oferă transfer și de sincronizare caracteristici, capacitatea de a găsi și înlocui linii de text sau cod de termeni de căutare sau expresii regulate din întreaga site-ul, și o caracteristică templating care permite update singur sursă de cod și aspect pe site-urile întregi comun fără Server- side include sau scripting.

Dreamweaver, ca și alte editoare HTML, editează fișiere local apoi le încarcă pe serverul de web de la distanță cu ajutorul FTP, SFTP, WebDAV sau Dreamweaver CS4 care suportă acum Subversion (SVN) sistemul de control al versiunii.

3. Descrierea părții practice

3.1. Detali tehnice

Website-ul WK-Prax este construit cu ajutorul limbajelor HTML. HTML este un limbaj simplu, de marcaj, care se folosește de etichete sau tags. Proiectarea site-ului a fost făcută in BlueVoda Website Builder, iar legaturile între pagini au fost create în Adobe Dreamweaver CS5.

Programele utilizate pentru a realiza proiectul sunt urmatoarele:

BlueVoda Website Builder

Adobe Dreamweaver CS5

Adobe Photoshop CS5

BlueVoda Website Builder nu este un limbaj în sine, ci un mecanism care permite formatarea documentului HTML. Acesta nu exclude HTML-ul din pagina web, el doar vine pe langă acesta pentru a confera anumite proprietați, pentru a face totul mai atractiv si mai bine organizat.

BlueVoda Website Builder este un instrument prin care putem crea pagini de internet la nivel profesional, chiar și cu mai puține cunoștințe în limbajul HTML. Acesta folosește tehnica drag and drop. Interfața la prima vedere poate fi copleșitoare pentru incepători, însă dupa ce utilizatorul se familiarizează cu acesta totul devine foarte practiv și logic.

O partea din design am creat-o cu ajutorul programului Adobe Photoshop CS5, incontestabil cel mai profesional program din categoria editoarelor de imagini. Dispune de nenumarate unelte de manipulare a imaginilor care usureaza lucrul, nenumarate

font-uri, gradient-uri si brush-uri, care ajuta enorm orice designer.

STRUCTURĂ

Website-ul WK-Prax este alcătuit din 29 de pagini html. Site-ul are o structură și desing tipică unui magazin online de unelte.

În toate paginile veți regăsi în partea superioară un logo si reclama banner-uri.

A) logo B) reclamă

Tot în partea de sus sub logo si reclama se afla meniul principal, construit din butoane care ne vor duce pe urmatoarele pagini:

Fiecare din aceste butoane au un efect de animație: fade, care intervine la simpla atingere (fără click) a mouse-ului la fiecare buton in parte, individual, urmând ca acesta să își schimbe forma și culoarea în felul urmator :

Cod sursă:

</ul>

În partea stângă de sus, sub flash banner-ul cu logo-ul magazinului, este prezent celălalt meniu cu diferitele categorii de unelte. Unele din aceste categorii au și subcategorii, care au un efect de ascundere ,cădere, iluminare și schimbare a culorii scrisului si a chenarului la apropierea mouse-ului de acestea.

Cod sursă:

<ul>

<li class="SlideMenu1_Folder"><div><a href="#">SCULE ELECRICE</a></div><span><!– empty –></span>

<ul>

<li><a href="http://">Accesorii elecrice</a></li>

</ul>

</li>

<li class="SlideMenu1_Folder"><div><a href="#">APARATE SUDURA</a></div><span><!– empty –></span>

<ul>

</ul>

</li>

<li class="SlideMenu1_Folder"><div><a href="#">GENERATOARE </a></div><span><!– empty –></span>

<ul>

</ul>

</li>

<li class="SlideMenu1_Folder"><div><a href="#">UNELTE DE MANA</a></div><span><!– empty –></span>

<ul>

<li><a href="http://">Ciocane, dalti si rangi</a></li>

</ul>

</li>

<li class="SlideMenu1_Folder"><div><a href="#">ECHIPAMENTE DE GRADINA</a></div><span><!– empty –></span>

<ul>

</ul>

</li>

<li class="SlideMenu1_Folder"><div><a href="#">TRUSE DE SCULE </a></div><span><!– empty –></span>

<ul>

</ul>

</li>

</ul>

Sub acest meniu am inserat 5 slide-shouri diferite cu reclamele partenerilor firmei, acestea având diferite efecte de animatie si dimensiuni diferite. Acestea au fost inserate pe o platforma special amenajata si editată pentru a avea un aspect unic și atrăgător.

Cod sursă:

</div>

În partea inferioară – stânga, am inserat un mini-meniu, care este defapt repetarea meniului principal, pentru o utilizare mai ușoară, lejeră si practică a paginii. Meniul are proprietați diferite la anumite pagini cu fundal diferit. Acesta conține și o miniatură a imaginii acasă, pentru a putea fi observat cu ușurință.

Cod sursă:

<a href="http://">Acasa</a> <a href="http://">Promotii</a> <a href="http://">Detalii plata</a> <a href="http://">Livrari</a> <a href="http://">Contact</a></font>

Prima pagină – index pe langă elementele amintite mai sus, are un chenar inserat cu un fundal de gradient de culori deschise. După ce am alcătuit chenarul :

Am inserat pe acesta un tablel cu 3 rânduri, pe care l-am modificat la dimensiunile dorite. În acest tabel am inserat mai multe imagini pe care le-am poziționat. Cele trei imagini mari din pagina au rol de buton și accesarea acestora v-a duce la o pagină cu detalii suplimentare a obiectului respectiv.

În paginile: Detalii plată, Livrări, Contact din meniul

Principal, am introdus detaliile cu privire la plată, comenzi online, date de contact, sediul, modalități de livrare și Paginile Detalii plată

și Livrări, conțin și imagini :

Cod sursă:

Aceste 3 pagini au ceva specific, anume: în rubrica reclamei pentru sponsor au fost introduse slide-uri specifice fiecărei din aceste pagini. Unul dintre ele se axează pe diversitatea modelelor, altul pe locația sponsorului și reședința principală, altul pe noile modele si mecanizme specifice sponsorului. Pe celălalte pagini se va repeta această prezentare in formă de slide show, însă cu elemente diferite si repetabile pe fiecare dintre pagini, cu excepția acestor 3 pagini web și paginii Acasă (index).

Cod sursă:

</div>

Pagina Promoții este una specifică. Are un tabel format din 3 randuri si 3 coloane, în interiorul cărora am inserat titlul produsului, care este de tip link către o pagina cu detalii suplimentare specifică. Sub titlul se afla imaginea micșorată a produsului care este de tip buton care ne poate duce pe aceeași pagină ca și titlul.

Cod sursă:

Sub imagine se află prețul produsului, iar sub preț in partea dreaptă butonul pentru achiziționarea produsului, iar în partea inferioară – dreapta a celulei se află o imagine care specifică apariția produsului în stoc. La unele produse am inserat o imagine miniatură deasupra prețului, dacă acesta se afla în promoție; iar dacă acesta este un produs cu preț redus, am introdus o imagine similară, însă sub preț și specifică subcategoriei din care face parte.

Cod sursă:

Deasupra acestui tabel am inserat o imagine de tip bară, care specifică categoria produselor, aceea de promoție.

Cod sursă:

În partea reclamelor pe toate paginile am introdus textul:

Parteneri si Sponsor astfel:

Cod sursă:

<font style="font-size:16px" color="#FFFFFF" face="Segoe UI Semibold">PARTENERI:</font>

Sub primul text am introdus o bară de culoare albă, respectiv deasupra celui de al doilea text deasemeni o bară albă astfel:

Cod sursă:

Paginile cu Produse sunt: cele 3 pagini provenite din prima pagină(produs_index1/2/3), si 9 pagini din categoria Promoții(1/2/3/4/5/6/7/8/9produs_promoție).

Fiecare din aceste pagini au o structură similară:

În partea de sus am inserat un tabel cu 2 coloane. Coloana a 2-a este desparțită de o bară neargră, nu de un rând al tabelului.

Cod sursă:

<tr>

 </td>

</u>  Masina de insurubat PSR 14.4 V<u><br>

</u></b><br>

                          <br>

  <i>                          Cod produs: 9463<br>

<br>

  – </i>Producator :   <b>BOSCH<br>

  </b>- Pret : </font><font style="font-size:16px;background-color:#FF0000" color="#000000" face="Arial"><b>  </b></font><font style="font-size:16px;background-color:#FF0000" color="#FFFFE0" face="Arial"><b>458 RON </b></font><font style="font-size:16px" color="#000000" face="Arial">  <br>

  – Taxa verde <br>

  – Stoc : <br>

<b><br>

</b>  Garantie   2 ani<br>

<br>

</font><font style="font-size:13px" color="#000000" face="Arial">    Email :<i> [anonimizat]</i> <br>

<br>

    <u>Cumpara online</u>:  </font></td>

</tr>

</table>

În prima coloană am introdus o imagine mărită a produsului și deasupra acesteia o imagine a firmei-producator specifică produsului respectiv.

În coloana a doua am introdus numele produsului, sub bară codul produsului, producatorul, taxa, prețul, garanția, stocul, iar in partea inferioară imaginea cu Asistența gratuită, și butonul Cumpară, pentru a face comanda produsul respectiv.

Sub tabel am introdus un chenar cu toate datele produsului, descrierea și caracteristicile acestuia, si eventual la unule produse poze suplimentare într-un chenar distinct.

Paginile si subpaginile din meniul lateral(CATEGORII): Scule elecrice, Accesorii electrice(subpagină), Aparate sudură, Generatoare, Unelte de mână, Ciocane, dălți și răngi(subpagină), Echipamente grădină, Truse scule, Chei (subpagină) au deasemeni o structură identică:

Pe un chenar gradientat de culori deschise am inserat un tabel similar celui din pagina Promoții: 3 rânduri, 3 coloane. În total 9 celule, iar în fiecare din acestea au fost introduse elementele:

Numele produsului

Descrierea succintă a produsului

Poza produsului

Prețul

Stocul – poza

Butonul de comanda – Cumpară

Fiecare din aceste pagini și subpagini au deasupra tabelului o poză tip iconiță în zona mediană.

Pagina Cumpără,este defapt pagina pe care ne duce butonul Cumpără. Această pagină este una mai diferită. Avem un fundal pe chenar de culoare gri și alb mai închisă tip gradient

În partea de sus a acestuia se află un formular, care trebuie complectat pentru a putea fi posibilă comanda produsului dorit.

Sub acest formular am introdus un alt formular de votare a site-ului pentru a primi parerile vizitatorilor paginii web: magazinul de unelte WK-Prax

Cod sursă:

<form method="post" action="http://poll.pollcode.com/k8rqzg"><table border="0" width="306" bgcolor="EEEEEE" cellspacing="2" cellpadding="0"><tr><td colspan="2"><font face="Comic Sans MS" size="3" color="000000"><b>Ce parere aveti de serviciile noastre?</b></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="1" id="k8rqzganswer1"></td><td><font face="Comic Sans MS" size="3" color="000000"><label for="k8rqzganswer1">Excelente</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="2" id="k8rqzganswer2"></td><td><font face="Comic Sans MS" size="3" color="000000"><label for="k8rqzganswer2">Bune</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="3" id="k8rqzganswer3"></td><td><font face="Comic Sans MS" size="3" color="000000"><label for="k8rqzganswer3">Satisfacatoare</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="4" id="k8rqzganswer4"></td><td><font face="Comic Sans MS" size="3" color="000000"><label for="k8rqzganswer4">De proasta calitate</label></font></td></tr><tr><td colspan=2><center><input type="submit" value=" Vote "></center></td></tr><tr><td colspan=2 align=right><font face="Comic Sans MS" size="1" color="000000"></td></tr></table></form>

Trei butoane pentru redirecționare pe paginile cu produse noi, în promoție si la reducere.

7 poze cu beneficiile magazinului și diversitatea acestuia

Mini-meniul principal in josul paginii

Pagina Email pentru a trimite prin intermediul

formuralului din pagina cu comenzi comanda produsului pe emailul firmei.

Pagina Eroare pentru alertarea cumparatorului după ce

comanda lui nu a putut fi dusă la bun sfârșit.

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Magazin Online de Scule (ID: 149989)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Magazin Online de Scule

Copyright Notice

Ascunderea Unor Mesaje In Fisiere Bitmap Folosind Tehnici Steganografice

Backtracking

Modernizarea Activitatii de Receptie la Hotelul Marshall

Programarea Informatica In Java

Structura Sistemelor DE Calcul

Galeria Virtuala de Arta

Copyright Notice

Similar Posts