Platforma Web Pentru Comercializarea Instalatiilor Termice
PLATFORMA WEB PENTRU COMERCIALIZAREA INSTALAȚIILOR TERMICE
PLATFORMA WEB PENTRU COMERCIALIZAREA INSTALAȚIILOR TERMICE
PLATFORMA WEB PENTRU COMERCIALIZAREA INSTALAȚIILOR TERMICE
Cerințele temei:
Realizarea unei aplicatii web care permite adăugarea unor oferte de cazare in mod dinamic , precum și ștergerea acestora. Posibilitatea de a efectua o rezervare în cadrul aplicației , precum și vizualizarea ei de către ofertant.
Soluții alese:
Pentru implementare s-a ales relizarea site-ului cu ajutorul urmatoarelor limbaje de programare: PHP , MySQL , CSS , HTML , JavaScript , a programelor: XAMPP , Notepad++ , Ajax .
Rezultate obținute:
În urma implementării s-a realizat un site dinamic care perminte operații de înregistrare , logare , ștergere și afișare .
Testări și verificări:
Produsul finit a fost testat și verificat. Secvențele de testare sunt prezentate în proiect la Capitolul 6.
Contribuții personale:
Autorul a realizat implementarea site-ului precum si realizarea bazei de date.
Surse de documentare:
Literatură de specialitate, articole științifice, tutoriale,internet.
Data:__________ Semnătura autorului_________________
Semnătura coordonatorului____________
CUPRINS
LISTA FIGURILOR
CAP. 1 INTRODUCERE
În ultimii ani asistăm cu toții la o dezvoltare fără precedent a internetului. În România, conform International Telecomunication Union aproximativ 6.000.000 de persoane accesează această resursă, fapt ce a dus la o migrare a afacerilor spre comerțul de tip electronic.
Conform studiului realizat de Gemius Research în România anilor 2010, 47% dintre utilizatorii internetului cumpără online de câteva ori pe an, iar valoarea totală anuală a comerțului electronic autohton se ridică la aproximativ 300 milioane de dolari. Tocmai datorită acestei tendințe evidente de expansiune a vânzărilor prin intermediul internetului, tot mai multe societăți comerciale au ales să-și promoveze activitatea ”deschizându-și” magazine virtuale de prezentare și vânzare a mărfii. Mediul de afaceri s-a schimbat radical, odată cu dezvoltarea internetului. Practic acum și cele mai mici firme au o pagina web în care prezintă cel puțin datele de contact ale firmei și domeniul de activitate. Afacerile se dezvoltă și cei care iau în calcul și o prezență online pot spera să găsească noi și noi clienți și/sau parteneri de afaceri. Iată câteva avantaje ale folosirii internetului în afaceri:
Pentru a stabili o prezență: peste 1 miliard de persoane din lumea întreagă au acces la World Wide Web
Pentru a comunica: pe Internet se poate stabili contactul cu alți oameni de afaceri 24 din 24 de ore, simplu și eficient.
Pentru a oferi informații de afaceri: sediul firmei, servicii prestate, orar de lucru, cum se poate lua legătura cu un reprezentant al firmei, ce modalități de plată se acceptă etc.
Pentru a servi clienții mai repede, a le oferi repede ceea ce doresc, pentru a ușura atât plata cât și livrarea: prin intermediul unui simplu formular online clienții pot trimite cereri de căutare ale produselor, își pot exprima dorințele de a achiziționa un anumit produs, de restul operațiunilor ocupându-se firma noastră.
Pentru a publica anumite informații la momentul potrivit: în câteva secunde, prin intermediul platformei de administrare se poate realiza schimbarea prețului sau detaliilor la anumite produse.
Pentru a vinde produse clienților: deși acesta este principalul motiv pentru care siteul există, l-am specificat doar acum deoarece, pentru a reuși să vindem produse prin Internet toate cele prezentate anterior trebuie tratate, gândite și realizate.
Pentru a păstra legătura cu oamenii și a răspunde la întrebări puse frecvent: Înainte de a începe o afacere, partenerii trebuie să se cunoască, să știe cu cine vor colabora. Frecvent, apar anumite întrebări a căror răspunsuri vor apărea pe o pagină tocmai pentru a răspunde celor interesați de colaborări.
Pentru a primi un feedback de la clienți: este mult mai ușor ca neplăcerile întâlnite să fie communicate sub forma de anonimat administratorului afacerii. De multe ori, clienții părăsesc magazinele datorita prețurilor ridicate, dar nu spun asta nimănui. Pe acest site, prin intermediul unui formular, administratorul poate afla tot ceea ce vor clienții.
Trebuie menționat că start-upul afacerii prin e-commerce este mult mai avantajos decât deschiderea unui sediu fizic din mai multe motive pe care le voi prezenta în cele ce urmează. În primul rând magazinul virtual nu prezintă costurile generate de deschiderea unui magazin real și anume costuri cu salariile angajaților, cu chiria spațiului sau cu întreținerea lunară. Apoi, un site este un punct de informare pentru potențialii clienți, un ghișeu deschis non-stop unde doritorii pot cumpăra la orice oră produsele firmei, deci, putem spune fără teama de a greși că este un agent de vânzări pe care dacă-l voi instrui bine se poate dovedi foarte eficient.
O dată cu sporirea încrederii în acest tip de cumpărături, clienții au devenit mult mai comozi preferând să achiziționeze produsele dorite direct din fața calculatorului, nepărăsind confortul casei. Un alt avantaj important este faptul că produsele din magazinul virtual vor avea un preț mai mic decât în magazinele cu sediu fizic datorită inexistenței costurilor auxiliare provocate de depozitarea mărfii și remunerarea angajațiilor. Bineînțeles, toate aceste avantaje trebuie să fie puse în fața clientului, iar pentru acest fapt este absolut necesar ca site-ul să fie promovat corespunzător pentru a nu risca să rămânem în anonimat fără a fi găsiți la eventualele căutari de potențiali clienți. Pentru aceasta, după ce site-ul va căpăta o funcționalitate completă va trebui sa fie supus unui proces amplu de optimizare pentru motoarele de căutare gen Google Search.
Aceste puncte puternice enumerate mai sus reprezintă doar câteva din avantajele care m-au determinat să realizez un site de e-commerce în domeniul instalațiilor termice care să dezvolte o afacere familială deja existentă.
Organizarea și realizarea siteului a fost gândită urmărindu-se următoarele etape în ordine cronologică:
Proiectarea bazei de date MySql și realizarea legăturilor între tabele. (ex. Baza de date încălzire ce include tabele ca și producător, centrale, admin, marcaradiator, comentarii, tranzacții ș.a. Această parte am realizat-o în preponderență cu ajutorul PHP MyAdmin;
Realizarea interfeței grafice, a siteului cu care va interacționa utilizatorul și punerea la dispoziția acestuia a tuturor instrumentelor necesare de care are nevoie pentru a efectua cumpărături (pagină de detalii a produsului, accesibilitate redusă) și a știi în orice moment componența și contravaloarea produselor din coșul de cumpărături. Pentru aceasta cât și pentru partea de administrare am folosit XHTML, CSS, PHP, JavaScript, Ajax, jQuery, Scriptaculous, Photoshop, Flash;
Realizarea unei platforme de administrare absolut necesară deoarece consider că proprietarul acestor magazine virtuale trebuie să poată efectua modificări ale prețurilor, spre exemplu, fără a avea cunoștințe de programare;
Promovarea afacerii prin intermediul tehnicilor de optimizare pentru motoarele de căutare (SEO) deoarece cred că aceasta este singura metodă ”curată” de a scoate magazinul virtual din anonimat și de a-l aduce în fața persoanelor care într-adevăr caută să cumpere produsele noastre (ex. Optimizare prin Meta-Taguri, înscriere în directoarele web, Link Building).
CAP. 2 INSTRUMENTELE ȘI METODOLOGIA SOFTWARE
2.1 Prezentarea instrumentelor software utilizate:
Pentru realizarea acestui magazin virtual am folosit mai multe programe software și tehnologii cum ar fi:
Apache – Apache este un program care servește informații prin protocolul de comunicații HTTP, iar fiindcă pe baza protocolului HTTP funcționează internetul, Apache reprezinta un server de Internet. În opinia mea acesta este cel mai puternic server web open-source iar la nivel mondial este cel mai des folosit. Serverul Apache prezintă funcții de bază care permit afișarea paginilor de internet cu text și imagini. Instalarea și pornirea serverului o voi face cu ajutorul programului XAMPP;
MySQL– Deoarece siteul meu va avea foarte multe informații ce vor trebui puse la un moment dat înaintea cumpărătorului, ele trebuie structurate compact într-o bază de date. Cu ajutorul unor scripturi ce conțin interogări voi putea extrage informațiile care îl interesează pe utilizator, iar pentru a afișa detaliile a 100 de produse nu voi avea nevoie de atatea pagini independente ci le voi putea grupa într-una singură. Așadar, în acest sens voi fi ajutat de MySQL care reprezintă un pachet de programe pentru gestiunea bazelor de date. De asemenea am ales acest pachet și nu Oracle, spre exemplu, deoarece oferă stabilitate bazei de date și lucrează foarte rapid cu ea.
XAMPP – Am ales acest utilitar pentru a putea accesa mai ușor serverul Apache, MySQL, PHP și la nevoie funcția de Mail – Mercury Mail; Este ușor de instalat, configurat și utilizat.
PHP – este un limbaj de programare orientat spre programarea web dinamică. Se poate folosi în combinație cu XHTML, JavaScript, CSS, AJAX și MySQL pentru a realiza site-uri dinamice de o complexitate ridicată. La ora actuală majoritatea site-urilor dinamice sunt realizate folosind sintaxa acestui limbaj de programare web. Conform statisticilor aproximativ 20 de milioane de situri web folosesc PHP.
Instalarea corectă a MySQL și PHP se poate verifica simplu lansând un editor de texte în care voi scrie <?PHP phpinfo(); ?> pe care îl voi apela ulterior din browser. Dacă PHPul e instalat rezultatul apelării va fi o secțiune cu toate detaliile instalării. Derulând conținutul paginii voi găsi informații referitoare la MySQL fapt ce imi va dovedi că aplicațiile sunt instalate corespunzător și le putem folosi.
JavaScript – Reprezintă o modalitate de a adăuga dinamism acestor pagini de internet Codul JavaScript se execută direct în programele de navigare ale vizitatorilor. Desigur, el poate să funcționeze incorect sau deloc la anumiți vizitatori, în funcție versiunea browserului folosită pentru navigare, de setările acestuia și chiar și de performanțele calculatorului.
XHTML, CSS, Scriptaculous – Am ales aceste limbaje și colecții pentru scrierea paginilor web și aranjarea în pagină a conținutului, uniformizarea aspectului siteului și cosmetizarea întregii aplicații.
Ajax – Motivul principal ce m-a făcut să folosesc aceste tehnologii a fost necesitatea îmbunătățirii modului în care utilizatorii interacționează cu aplicația web. Cu ajutorul AJAX am încercat să cresc interactivitatea și viteza de utilizare a aplicației web prin micșorarea timpilor de răspuns la acțiunile utilizatorilor. Browserul va schimba date cu serverul fără ca utilizatorul să mai fie nevoit să trimită o cerere ce necesită reîncărcarea întregii pagini în browser.
Adobe Photoshop/Flash/Dreamweaver CS3 Proffesional – Pentru un design plăcut care să interacționeze cu utilizatorul, pentru bannere dinamice care să promoveze anumite produse sau în scop publicitar și pentru realizarea de butoane cu efecte special am fost nevoit să utilizez uneltele software puse la dispozitie de Adobe;
FileZilla – Este un client FTP pe care l-am folosit în special pentru a creea o conexiune cu serverul WEB și pentru a administra fișierele de pe server foarte rapid.
CAP. 3 PREZENTAREA PORTALULUI WEB DEZVOLTAT
3.1 Dezvoltarea cerințelor și specificațiilor siteului
Stabilirea specificațiilor pentru un site reprezintă o detaliere a obiectivelor sale precum și definirea unor cerințe sau a unor restricții. Specificațiile descriu în detaliu ce informații vor fi oferite în paginile site-ului și cum vor fi ele prezentate.
Așadar, înainte de toate trebuie menționat că siteul PentruConfort.ro este destinat celor ce doresc să-și îmbunătățească modul de a trăi prin achiziționarea diferitelor echipamente de încălzire.
Acest portal web prezintă vizitatorilor produse destinate în spate în special încălzirii termice cum ar fi centrale, calorifere, boilere, termostate, panouri solare ș.a. Fiecărui produs îi este asociată o pagină cu detaliile tehnice, într-un mod compact și cu un design atrăgător, ușor de navigat pentru utilizator. De asemenea, site-ul pune la dispoziția posibililor cumpărători opiniile necenzurate ale celor ce au achiziționat sau cunosc produsele respective din alte împrejurări.
Considerăm absolut necesară această secțiune de comentarii la adresa produselor deoarece este singura cale prin care vizitatorul se poate convinge de calitatea produsului sau îi poate evidenția eventualele defecte datorită cărora nu merită plătit prețul cerut pentru bunul respectiv. Fiecare posibil cumpărător poate efectua diferite filtrări, după numele, prețul sau puterea echipamentelor de încălzire pentru a găsi exact produsele care îl interesează. O dată găsite aceste produse, ele vor putea fi adăugate într-un coș de cumpărături care va genera un preț total ce va trebui plătit de către cumpărător, iar la final comanda poate fi trimisă magazinului pentru a putea fi prelucrată și executată.
Este evident faptul că sunt foarte puțini cei care dețin cunoștințe de programare web. Tocmai din acest motiv, consider că administratorii magazinelor virtuale vor avea nevoie de o platformă de administrare prietenoasă pentru a adăuga sau șterge produse sau pentru a modifica denumirile, caracteristicile, sau prețurile lor. În acest sens am creeat partea de administrare a siteului cu ajutorul căreia se pot realiza toate operațiunile prezentate anterior asupra produselor și a bazei de date ce conține totalitatea detaliilor tehnice.
3.2 Proiectarea portalului web
Planificarea reprezintă un aspect foarte important al procesului de creare a unui site web, deoarece este etapa în care se iau deciziile care vor influența designul, implementarea și bineînțeles, vânzările generate. Deoarece internetul este un mediu deschis și dinamic, planificarea reprezintă un proces continuu în care intervin schimbări determinate de înnoirea informațiilor solicitate. Înainte de scrierea siteului trebuie să cunoaștem publicul țintă căruia ne adresăm prin intermediul produselor noastre, care este menirea principală a siteului și bineînțeles să știm modul în care va apărea în fața clientului. În cele ce urmează am prezentat pe scurt planificarea acestor obiective:
Segmentul de piață
Aplicația dezvoltată are ca scop principal vânzarea prin intermediul internetului a instalațiilor termice, așadar se adresează în special celor ce vor să-și achiziționeze echipamente pentru a-și spori confortul propriei locuințe. Toți cei care vor să cumpere centrale termice, calorifere, panouri solare, boilere sau alte echipamente auxiliare pot găsi pe acest portal oferte mai bune decât ale concurenței. Am considerat că este necesară stabilirea precisă a publicului țintă deoarece acest lucru contribuie decisiv la definirea conținutului paginilor, la organizarea siteului precum și la realizarea aspectului său. Cu cât este mai bine definit sectorul căruia i se adresează produsele siteului, cu atât sunt mai mari șansele de a crea un site de succes.
Scopul
Înainte de a realiza portalul web trebuie găsit un răspuns puternic la întrebarea ”De ce?”. Răspunsul este unul cât se poate de simplu și anume: „Pentru realizarea de profit ca urmare a vânzării produselor siteului”. Definirea scopului pentru care se va realiza siteul reprezintă ținta ce se va urmări în procesul de construire al acestuia. Un portal web fără un scop clar și bine definit lansează un mesaj neconvingător vizitatorului și implicit posibilului client. Vizitatorul nu va fi convins de principala menire a siteului și îl va părăsi în câteva secunde de la accesarea lui. Scopul siteului poate reprezenta chiar prima informație ce le este oferită vizitatorilor, la intrarea pe pagină.
Obiectivele
După ce am stabilit audiența site-ului, care sunt informațiile privitoare la publicul țintă, precum și scopul său, pasul următor constă în combinarea tuturor acestor informații și formularea unor obiective specifice ale site-ului. Obiectivele reprezintă o detaliere a scopului general al site-ului, conținând informațiile specifice care vor conduce la îndeplinirea scopului pentru care a fost creat siteul. Așadar, prezentarea într-un mod plăcut a tuturor detaliilor privitoare la produs colaborată cu simplitatea folosirii platformei web va acapara un număr însemnat de clienți încă din primele zile ale lansării siteului de e-commerce.
Designul siteului
În faza de concepere a designului principalul obiectiv este să creem un aspect atractiv care să se potrivească cu tematica siteului și să oferim vizitatorului un sentiment de satisfacție, pe măsură ce acesta parcurge paginile. Designul unui site trebuie să echilibreze performanțele browserului, cu estetica și funcționalitatea site-ului. În etapa de design am luat deciziile de ordin practic care vor conduce la îndeplinirea obiectivelor stabilite: care va fi structura siteului, câte imagini sau elemente grafice vor fi în pagină, cât de mult text vor conține paginile, ce texte sau imagini vor fi folosite drept legături etc.
3.3 Arhitectura sistemului
Arhitectura unui sistem informatic face referire la structura sa. Deoarece spațiul web s-a dezvoltat pe tehnologia client/server, și siteul meu se bazează pe aceeași implementare care presupune existența unui server și a unui client, deci avem de a face cu o arhitectură pe două nivele. Într-o aplicație, programul care cere informații funcționează ca un program client, ca un browser, așadar, prin client și server facem referire la procese și nu la calculatoare.
Pe baza cererii emisă de către client, serverul va analiza și va emite un răspuns, pe care clientul (browserul) îl va interpreta în funcție de comenzile de formatare conținute în text (codul sursă) mai apoi afișându-l. Orice sistem client/server este alcătuit din minimum trei componente principale:
Interfața cu utilizatorul (templateul siteului, siteul propriu-zis, paginile acestuia);
Aplicația (totalitatea prelucrărilor și procesele, codul din spatele interfeței, cel care oferă întreaga funcționalitate portalului dezvoltat);
Sistemul de gestiune a bazelor de date (MySql, tabelele create acolo împreună cu relațiile și legăturile dintre ele).
Acest portal web s-a dezvoltat pe o arhitectură pe două nivele, deoarece datele se găsesc într-un alt mediu (SQL) și sunt accesate prin intermediul primului nivel. Această arhitectură se potrivește perfect aplicațiilor client/server deoarece este mult mai ușor, practice și rapid ca volumul de date solicitat de către client să fie extras dintr-un server de baze de date (SQL). Încărcarea în întregime a bazei de date, fără a fi nevoie de ea ar genera timpi de așteptare ridicați la încărcarea aplicației (siteului), deci pentru a garanta rapiditatea și eficiența unei aplicații client/server trebuie să minimizăm volumul de date extrase de pe server. Putem realiza această problemă prin filtrarea datelor conform criteriilor clientului cu ajutorul unor interogări SQL. Așadar, eficiența și utilizarea pe scară largă a acestui tip de arhitectură este datorată în mare măsură managementului excelent al tranzacțiilor care e împărțit între client (formatări, validări, prelucrări locale) și server (proceduri, răspunsuri la cereri).
Mai jos, am descris grafic etapele desfășurării procesului de cerere/răspuns client/server. Clientul trimite cererea către serverul Apache. Prin intermediul PHPului ea este prelucrată și se face legătura cu baza de date și celelalte module ale aplicației. Se returnează datele de acolo, informația se întoarce către serverul Apache, urmând a se afișa în browserul clientului.
Fig. 3.1 – Comunicare client/server (original)
3.4 Proiectarea bazei de date
În jurul unei baze de date proiectate corect se poate construi un site solid, așadar, bazele de date reprezintă coloana vertebrală a oricărui site dinamic. Putem defini o bază de date ca fiind o colecție organizată de date din care voi putea extrage mai apoi doar ceea ce ne interesează prin intermediul unor filtrări, sortări, aranjamente etc.
Baza de date a acestui magazin virtual a fost concepută cu ajutorul PhpMyAdmin și MySQL, cel mai popular sistem de management al bazelor de date relaționale. Am ales MySQL deoarece este stabil, rapid și acceptă un număr mare de înregistrări (BIGINT poate primi pana la 180 milioane de miliarde). PentruConfort.ro a fost construit în jurul bazei de date Încălzire care este compusă din mai multe tabele. Fiecare table prezintă mai multe înregistrări dispuse în câmpuri. În continuare voi prezenta aceste tabele și necesitatea utilizării lor:
Fig. 3.2 – Structura tabelelor bazei de date
admin – Este tabelul folosit pentru gestionarea conturilor care vor avea acces la secțiunea de administrare a site-ului;
comentarii – Principalul rol al acestui tabel este de a stoca toate comentariile și a le repartiza pentru fiecare produs în parte, la cererea vizitatorului site-ului. Tot odata, acest table îi va fi de ajutor administratorului în activitatea sa de moderare a eventualelor comentarii ce nu fac referire la subiect;
centrale, boiler, panou, radiator, termostat – Tabelele au fost create din necesitatea stocării tuturor informațiilor referitoare la echipamentele de încălzire ce pot fi cumpărate prin intermediul siteului. Aceste detalii fac referire la: id produs, model, putere, tiraj, debit, boiler, arzator, slogan, descriere, kit, pret etc. ;
marci, producatori – Acestea sunt tabelele din nevoia de a clasifica fiecare produs în funcție de producător și în special pentru a putea realiza legături între tabele prin intermediul câmpului id_marca;
tranzacții – Tabelul responsabil cu arhivarea tuturor tranzacțiilor. Astfel, fiecare tranzacție se înregistrează în tabel evitându-se situațiile neplăcute provocate de defecțiuni ale serverului de email, care nu poate trimite comanda.
vânzări – Pentru a ține o evidență a stocului, a numărului de bucăți vândute dintr-un anumit produs a fost nevoie de realizarea tabelului vânzări.
Înainte de a crea baza de date este necesară pornirea serverului MySQL, operașiune pe care am detaliat-o într-un capitol anterior, cel legat de metodologia software folosită. Apoi, pentru a comunica cu serverul trebuie să folosim aplicația mysql.exe pe care o putem găsi în c:\xampp\mysql\bin\. Pentru a rula, din prompul MSDOS scriem: "c:\mysql\bin\mysql.exe -p -u root" iar cand ni se cere parola apasam ENTER . deoarece nu am setat nici o parolă la instalare. Daca serverul nu este pornit vom primi mesajul de eroare "Can't connect to MySQL server on 'localhost'".
În cele ce urmează voi prezenta principalele comenzi pe care le-am folosit pentru crearea bazei de date:
CREATE DATABASE încălzire – pentru crearea bazei de date.
CREATE TABLE IF NOT EXISTS `centrale` (`id_centrala` int(10) unsigned NOT NULL AUTO_INCREMENT, `model` text, `putere` float DEFAULT NULL, `tiraj` text, `debit` text, `boiler` int(11) DEFAULT NULL, `arzator` text, `slogan` text, `detalii` text, `kit` text, `pret` int(10) unsigned DEFAULT NULL, `data` date DEFAULT NULL, `id_producator` smallint(5) unsigned DEFAULT NULL, PRIMARY KEY (`id_centrala`))
INSERT INTO `marci` (`id_marca`, `nume_marca`) VALUES (1, 'Ariston'), (2, 'Baxi'), (3, 'Buderus'), (4, 'Ferroli'), (5, 'Immergas'), (6, 'Junkers'), (7, 'Vaillant'), (8, 'Viessmann'), (9, 'Westen')
Voi continua cu enumerarea unor comenzi care m-au ajutat să remediez problemele cauzate de modificări ale caracteristicilor echipamentelor, de neatenție și construcția greșită a unor tabele în primă fază. Acestea sunt:
SHOW TABLES;
SHOW COLUMNS;
DROP TABLE vanzari;
SELECT * FROM marci;
SELECT id_marca, model FROM centrale;
ALTER TABLE centrale ADD detalii TEXT;
ALTER TABLE centrale CHANGE data data DATE;
ALTER TABLE producatori ADD nume_producator TEXT AFTER id_producator;
3.5 Proiectarea interfeței WEB
Pentru conceperea unei interfețe utilizator trebuie să se țină seama de următoarea remarcă: o interfață utilizator este bine scrisă atunci când programul se comportă exact așa cum se așteaptă utilizatorii săi.
Așadar, în conceperea siteului web m-am bazat pe această idee urmărind ceea ce își dorește utilizatorul, să-l menajez de la acțiuni suplimentare și să îl ajut pentru a-l convinge să revină din nou la cumpărături. Pentru a asigura un design orientat spre utilizator am luat în calcul posibilitățile de navigare prin site, accesul rapid și direct la informațiile ce l-ar putea interesa despre produsele aflate la vânzare, un design stabil, călduros și nu în ultimul rând păstrarea simplității și a conținutului accesibil oricărei categorii sociale.
3.6 Organizarea paginilor web
La crearea layoutului siteului am urmărit următoarele aspecte:
asigurarea un echilibru vizual pe orizontală și verticală;
am menținut structura aranjamentului pe toate paginile web ale siteului prin repetarea elementelor de design și includerea meniurilor / bannerului / secțiunii din josul paginii;
asigurarea cromaticii adecvate unui site care oferă spre vânzare echipamente de încălzire termică, în speță, a culorilor calde, galben, roșu, orange. Fig 3.3 – Templateul portalului
alegerea unui conținut grafic potrivit, relevant, interesant și atrăgător; de asemenea am urmărit minimizarea timpului de încărcare a fotografiilor din conținut, dar și calitatea ridicată a acestora.
Siteul web dezvoltat este un magazin virtual care se ocupă cu vânzarea echipamentelor de încălzire termică. Acest aspect trebuie comunicat vizitatorilor, ei trebuie să își dea seama rapid ce anume oferă siteul, care este tematica abordată și ce servicii pune la dispoziție siteul. Este foarte important ca utilizatorul să aibă acces încă de pe prima pagină în cât mai multe secțiuni ale siteului. Astfel i-am creeat posibilitatea de a se deplasa la toate categoriile de echipamente pe care vindem, să facă anumite căutări după cuvinte cheie, să realizeze filtrări și sortări, sau să acceseze coșul de cumpărături.
De asemenea, pe prima pagină clientul poate vizualiza implicit anumite tipuri de centrale termice în funcție de preț și putere. Aranjarea informațiilor în pagină a fost făcută cu ajutorul unor module în structură tabelară care își modifică automat dimensiunile în
Fig. 3.4 – Structura tabelară a siteului – partea de sus
funcție de volumul de date primit. Toate aceste informații sunt incluse în întreg portalul, a.î. utilizatorul le poate accesa în orice moment, fără a pierde timp cu căutarea lor.
Cea mai fficient fficie de interfață în cazul siteurilor web este absența orientării în cazul organizării locale a informațiilor din acel document. Imaginile clare și consistente, o privire de ansamblu asupra paginii și în cazul siteului meu o secțiune de categorii ale echipamentelor de încălzire pot da utilizatorilor încrederea că au posibilitatea de a găsi informațiile dorite într-un mod fficient.
Fig. 3.5 – Formular de sortare a produselor
Utilizatorii trebuie să aibă posibilitatea de a se întoarce cu ușurință la prima pagină a siteului, deoarece lipsa acestor legături creează confuzie utilizatorul neștiind exact unde se află și cum se poate întoarce de unde a plecat. Tocmai din acest motiv, am plasat linkuri în locuri „cheie” ale siteului, cu trimitere către prima pagină, evitând astfel acumularea unei stări de nervozitate pentru utilizator, stare ce duce de multe ori la părăsirea portalului web.
În cele ce urmează voi analiza pe rând câteva aspect foarte importante urmărite în dezvoltarea siteului, câteva module proiectate și voi explica de ce am ales să le concep în acea manieră:
Încrederea în site. Detalii legate de posesorul afacerii și datele de contact actualizate mereu.
Prin intermediul secțiunilor „Cine suntem?” și „Contact”, vizitatorul poate afla date legate de activitatea firmei dar și informații de contact ale administratorului precum adresa de email, numele, numarul de telefon. De asemenea, poate lua legătura cu webmasterul prin intermediul unui formular pentru sesizarea eventualelor erori apărute în timpul experienței de navigare. Acest aspect este foarte important pentru siteurile de comerț electronic și sporesc procentul de credibilitate în fața cumpărătorului.
Navigarea prin site.
Legat de acest aspect, am urmărit câteva strategii clasice de navigare. Am conceput meniuri care să poată fi accesate de pe fiecare pagină de către utilizator, legături conexe între paginile siteului dar am și creat o facilitate de căutare în cadrul siteului.
Căutarea în baza de date.
Pentru a găsi mai ușor produsele ce îl interesează, utilizatorul poate accesa secțiunea de căutare care îi va oferi sugestii referitoare la produsele existente în baza de date. Pentru a îmbunătăți interacțiunea pe care clientul o va avea cu siteul am integrat acest modul în designul general al siteului, imediat sub meniul lateral. Utilizatorul are posibilitatea de a modifica interogarea inițială în vederea consultării posibilelor alte rezultate returnate. De asemenea, am introdus și facilitatea filtrării și sortării datelor.
Asigurarea contextului.
Deoarece utilizatorul nu are acces la întreaga informație disponibilă pe site am grupat datele de importanță majoră în partea de sus a ecranului. Pentru a păstra consistența prezentării, restul conținutului, în speță meniurile au fost ordonate alphabetic după cum se poate vedea în imaginea alăturată. Fig. 3.6 – Meniu Alfabetic
Fig. 3.7 – Ecranul utilizatorului
Accesul rapid și direct.
„Less is more, keep it simple” este un principiu după care mă ghidez mereu. Încă de când am început să scriu cod, am încercat să-l păstrez cât mai curat pentru a ocupa cât mai puțin spațiu pe server și a răspunde cât mai repede la solicitarea clientului. Transferul rapid al documentelor web este absolute necesar deoarece nu toată lumea are bandă largă pentru download, sau, mulți navighează în timp ce folosesc alte utilitare consumatoare de viteză pentru download. Din același motiv am evitat supraîncărcarea informațională, am redimensionat imaginile din pagină păstrând tot odată claritatea lor și am urmărit să folosesc puține elemente flash (bannerul și un mic meniu).
Respectarea acestor principii m-a ajutat să construiesc în final un site care, cred eu, satisface utilizatorul oferindu-i acestuia ușurință în navigare și îndeplinirea scopurilor pentru care a accesat portalul.
3.7 Dezvoltarea portalului web
Pe scurt
Acest portal web a luat naștere ca urmare a necesității apariției în world wide web a unei afaceri, dar mai ales datorită dezvoltării uimitoare pe care a cunoscut-o în ultimii ani sfera comerțului electronic. Studiile agențiilor de marketing confirmă și ele faptul că vânzările online au cel mai mare potențial de dezvoltare din întreg sectorul economic. Mai mult de jumătate din populația globului are acces direct la Internet, deci potențialul siteurilor de comerț electronic este imens.
Deoarece principalul scop al siteului este de a vinde echipamente de încălzire, acestea trebuie să apară în fața potențialului client împreună cu toate caracteristicile și eventualele reviewuri ale foștilor clienți care pot reprezenta aprecieri sau neplăceri cauzate de achiziționarea în trecut a respectivului produs. Deci, pentru reprezentarea tuturor acestor detalii și caracteristici tehnice, în fapt pentru realizarea completă a portalului ar fi necesară scrierea a câtorva sute de pagini rezultate din multitudinea tipurilor de echipamente de încălzire pe care le vom vinde. Pentru a combate acest dezavantaj vom dezvolta un site dinamic cu ajutorul PHP și MySql, astfel încât vom scrie o singură pagină pentru fiecare categorie de echipament, iar conținutul ei se va genera automat din baza de date cu ajutorul unor interogări MySql, la cererea vizitatorului. De asemenea, după realizarea acestui portal, administratorul nu va mai fi nevoit sa scrie vreo linie de cod, deoarece întreg conținutul este stocat în baza de date, interogările sunt în codul sursă, iar simplele modificări ale produselor/caracteristicilor acestora din baza de date vor avea ca rezultat modificarea paginilor afișate în browser.
Concret acest portal web prezintă vizitatorilor produse destinate în special încălzirii termice cum ar fi centrale, calorifere, boilere, termostate, panouri solare ș.a. Fiecărui produs îi este asociată o pagină cu detaliile tehnice, într-un mod compact și cu un design atrăgător, ușor de navigat pentru utilizator. De asemenea, site-ul pune la dispoziția posibililor cumpărători opiniile necenzurate ale celor ce au achiziționat sau cunosc produsele respective din alte împrejurări. Consider necesară această secțiune de comentarii la adresa produselor deoarece este singura cale prin care vizitatorul se poate convinge de calitatea produsului sau îi poate evidenția eventualele defecte datorită cărora nu merită plătit prețul fixat de proprietarul afacerii pentru bunul respectiv. Fiecare posibil cumpărător poate efectua diferite filtrări, după numele, prețul sau puterea echipamentelor de încălzire pentru a găsi exact produsele care îl interesează. O dată găsite aceste produse, ele vor putea fi adăugate într-un coș de cumpărături care va genera un preț total ce va trebui plătit de către cumpărător, iar la final comanda poate fi trimisă magazinului pentru a putea fi prelucrată și executată.
Construcția propriu-zisă a siteului PentruConfort.ro
Pentru a avea personalitate, un site trebuie să-și păstreze structura pe fiecare pagină a sa. O aranjare diferită a elementelor în pagină va deruta complet vizitatorul, care, deranjat fiind de faptul că nu poate găsi ceea ce îl interesează va părăsi portalul. Tocmai din acest motiv, am ales să includ anumite elemente comune în fiecare pagină a siteului. Acestea sunt:
conectare.php – stringul de conectare la baza de date pentru a se putea extrage în orice moment informațiile necesare.
page_top.php – conține scripturi necesare rulării corecte a tuturor efectelor din site, stilurile CSS, bannerul care oferă identitatea siteului și meniul orizontal care se află imediat sub banner.
meniu.php pagina destinată meniului lateral cu ajutorul căreia vizitatorul poate naviga. De asemenea in cadrul meniului lateral se află caseta de căutare pentru produsele din baza de date și un sumar al coșului de cumpărături.
page_bottom.php – Partea de jos a paginii în cadrul căreia este pusă o legătură care duce la prima pagină, un counter pentru a vedea permanent numărul de vizitatori ai siteului alături de webmasterul portalului.
Siteul a fost dezvoltat pe două module principale, unul de administrare care se ocupă cu partea „din spate”, iar celălalt care conține partea cu care interacționează utilizatorul.
Pagina de conectare la baza de date, conectare.php
Acest fișier va conține cele două instrucțiuni, mysql_connect("localhost", "root", "") și mysql_select_db("incalzire") în interiorul unui script php pe care le vom folosi pe fiecare pagină a siteului pentru a ne conecta la baza de date incalzire de pe localhost, prin intermediul userului root căruia nu i-a fost atribuită nicio parolă.
Structura paginii page_top.php
Prin intermediul acestei părți se vor include în pagină câteva elemente necesare funcționalității depline a paginii. Astfel, vom avea tagurile cu care se începe orice fișier HTML, setul de caractere acceptat, titlul paginii, iar apoi stilurile pentru cosmetizare, bibliotecile de funcții, scripturile care ușurează experiența de navigare a utilizatorului, bannerul și meniul orizontal.
Pentru a putea afișa în pagină texte cu suport 100% pentru caracterele românești cu diacritice am definit standardul „charset=iso-8859-2”, care, pe lângă alfabetul românesc le suportă și pe celelalte din regiune: Maghiar, Sârb, Polonez, Ceh, Sloven, Slovac etc.
Titlul paginii este unul reprezentativ pentru site. Denumirea lui indică faptul că vizitatorul se află pe un site ce prezintă și vinde „Centrale și Instalații termice”.
În ceea ce privește foile de stiluri am optat în preponderență pentru construirea lor în cadrul documentului (embedded) dar, unde a fost nevoie le-am și importat din exterior (în special pentru definirea stilurilor efectelor returnate de scripturile jQuery). Cu ajutorul lor am redus considerabil efortul depus pentru a modifica aspectul diferitelor etichete, tipuri de font, mărime, headinguri, paragrafe, legături etc. și a aranjării documentelor din cadrul paginii. Stilurile pot fi aplicate în mod selectiv unui document sau doar unei părți din acesta.
Pentru a simplifica munca și a scrie mai puțin cod pentru a controla navigarea, manevrarea evenimentelor, animațiile din portal și interacțiunea cu Ajax am ales jQuery. „Write Less Do More” este sloganul care caracterizează cel mai bine ceea ce face jQuery [Jonathan Chaffer, 2008]. Această tehnologie este o librărie ce simplifică managementul unui document HTML și a fost dezvoltată pentru a îmbunătăți modul de lucru cu JavaScript. Așadar, am reușit să obțin următoarele efecte interesante, care vor oferi o experiență plăcută de navigare vizitatorilor:
Scriptul pentru afișarea și ascunderea comentariilor utilizatorilor este necesar deoarece există vizitatori pe care nu-i interesează opiniile celor din jur. La efectuarea unui click pe paragraful cu clasa „flip”, divul marcat cu clasa „panel” care conține comentariile utilizatorilor se va derula în jos afișând conținutul.
Fig. 3.8 – Script ascundere / afișare comentarii
Scriptul pentru modificarea culorii câmpurilor formularului în momentul tastării. La apăsarea unei taste, toate input-urile își vor schimba culoarea în alb, iar la eliberarea tastei respective fundalul va reveni la culoarea original, galben.
Fig. 3.9 – Script semnalizare apăsare tastă
Scriptul pentru simularea efectului de draggable and droppable folositor în momentul în care clientul dorește să achiziționeze un produs. El funcționează în felul următor. Produsele existente pe stoc vor fi definite ca draggable, iar secțiunea coșului de cumpărături va fi droppable, pentru a putea primi produsul cu idul draggable. Dacă zona de aterizare a primit asupra ei elemental draggable, va trimite o alertă de confirmare clientului.
Fig. 3.10 – Script draggable / droppable
Autocompleter – cu ajutorul JS am reușit să implementez sugestiile oferite prin introducerea unor caractere căsuța de căutare. Acest fapt va ajuta utilizatorul care nu cunoaște exact denumirea produselor. La tastarea primelor caractere se va face un search în baza de date, iar daca acesta găsește înregistrări de produse având acele caractere le va returna într-o listă pe care am formatat-o să se îmbine perfect în designul siteului. O dată afișate aceste rezultate, clientului îi va fi mult mai ușor să aleagă ceea ce își dorește. Fig. 3.11 – Autocompleter
Jeditable – este un plugin pentru Edit In Place oferit de către jQuery. Este nevoie de câteva linii de cod JS pentru a implementa ca la apăsarea unui click pe o suprafață XHTML predefinită aceasta să devină editabilă. Acest script va ajuta în editarea mesajelor cu caracter obscen ce pot apărea ca urmare a comentariilor utilizatorilor. De asemenea, voi implementa acest Edit In Place pentru a da posibilitatea clienților să modifice numărul produselor din coșul de cumpărături.
Accordion – acesta este un alt plugin oferit de către jQuery pe care îl voi implementa în site. Voi realiza o secțiune în cadrul paginii produsului a căror detalii vor putea fi vizibile la apăsarea unui buton. De asemenea acest lucru se poate implementa în cadrul comentariilor utilizatorilor pentru a oferi posibilitatea ascunderii lor, pentru cei ce nu doresc să le vadă.
Atât bannerul cât și meniul orizontal au fost proiectate și construite cu ajutorul Adobe Flash CS3 Professional. Am ales această modalitate de a întâmpina utilizatorul deoarece o consider ca fiind destul de agresivă și tot odată de efect. Clientul vede în decursul câtorva secunde ce produse se găsesc pe site și asta cu un minim de efort fizic, animația din banner rulând odată cu deschiderea paginii. Aceasta este o modalitate eficientă de promovare a produselor portalului și se folosește din ce în ce mai mult în site-urile de e-commerce. Pentru realizarea animației din banner m-am folosit de pozițiile imaginilor grupate în layere, în diferite stări (inițială, intermediară și finală). Cu ajutorul timeframeurile care au rulat mereu la o scară mare am reușit să coordonez aceste mișcări rezultând swf-ul pe care l-am încărcat într-un obiect de tip application/x-shockwave-flash. Meniul vertical a fost creat și el în flash. Am definit 3 secțiuni asupra cărora am creat un efect de hover modificând luminozitatea din starea inițială spre cea finală. Din Action Script am realizat legăturile către paginile siteului cu ajutorul următoarelor coduri:
on (release) {getURL("index.php");} pentru pagina principal de intrare în site, on (release) {getURL("cinesuntem.php");} pentru pagina cu detaliile despre firmă și on (release) {getURL("contact.php");} pentru pagina de contact. În cele din am inclus și acest obiect de tip application/x-shockwave-flash imediat sub bannerul principal.
Această pagină se termină cu deschiderea unui tabel care de altfel reprezintă încadrarea conținutului paginii siteului. Background-ul a fost construit cu ajutorul Adobe Photoshop CS3 și inclus în site la o lățime care să poată fi vizualizată de majoritatea clienților pe rezoluții de cel puțin 800 pixeli pe orizontală astfel <table width="800" style=" background-image:url(imagini/bg.png)">.
Pagina destinată meniului lateral, meniu.php
Această pagină conține toți producătorii echipamentelor tehnice care se vând prin intermediul siteului, astfel încât vizitatorul să aibă posibilitatea de a accesa permanent, de pe orice pagină a siteului produsele din categoria respectivă. Pe langă aceste clasificări, în meniu se află și o casetă de căutare a produselor din baza de date și un sumar al coșului de cumpărături.
Pentru a realiza selecția producătorilor echipamentelor termice trebuie să fim conectați la baza de date. Acest lucru este deja realizat deoarece includerea paginii meniu.php se va realiza după includerea în pagină a stringului de conectare la baza de date și anume conectare.php. Așadar, scriptul de selecție și ordonare alfabetică a producătorilor de centrale va arăta așa:
Interogarea SQL extrage din tabela producatori toate înregistrările ordonându-le alfabetic, crescător după câmpul nume_producator, le pune într-o variabilă care mai apoi va fi parcursă cu ajutorul mysql_fetch_array[Larry Ullman, 2007]. Astfel se atribuie o legătură fiecărei înregistrări afișate în meniul siteului. Pentru creearea celorlalte submeniuri s-a procedat în același mod.
Formularul de căutare din cadrul meniului a fost inclus într-un div căruia i s-a atribuit un id pentru a controla mai ușor sugestiile pe care le va primi utilizatorul la introducerea anumitor caractere în câmp. Lista de sugestii este și ea cosmetizată și identificată cu ajutorul id-ului results. După cum se poate vedea în figura alăturată sugestiile apar imediat sub căsuța de căutare după tastarea fiecărui caracter. Rezultatele căutării vor rezulta după accesarea butonului de submit care se află în partea de jos a div-ului proiectat pentru căutare și care va face trimitere la pagina de procesare a cererii, cautare.php. 3.12 – Sugestii
Informațiile despre produsele aflate la un anumit moment dat în coșul de cumpărături vor putea fi vizibile pe orice pagină din site deoarece acestea fac obiectul ultimei părți a meniului lateral. După cum se poate vedea în bucata de cod am folosit sesiunile pentru păstrarea variabilelor în timpul navigării pe site.
Partea de jos a oricărei pagini, page_bottom.php
Acest fișier conține tagurile de închidere a celor deschise în page_top alături de legătura ce îi este pusă utilizatorului la îndemână pentru a putea ajunge în orice moment la prima pagină a portalului. De asemenea, am adăugat un counter care să se incrementeze la fiecare vizită de pe un IP diferit la un interval de cel puțin 24 de ore. Consider că este mult mai important să știi câți vizitatori reali ai și nu o cifră neexactă provocată de logări repetate ale aceluiași utilizator.
3.13 – Structura page_bottom-ului
Trebuie menționat faptul că toate aceste coduri au fost scrise o singură dată, în fișiere separate (conectare.php, meniu.php, page_top.php, page_bottom.php) pentru a fi folosite mai apoi pe fiecare pagină a siteului. PHP ne oferă această posibilitate prin intermediul funcției include, iar variabilele, funcțiile și resursele din fișierele incluse sunt disponibile în cadrul scripturilor[ Ioan Alfred Letia, 2008].
Pagina de căutare în baza de date, cautare.php
Există utilizatori care ajung pe site fiind direct interesați de un anumit produs. Pentru aceasta m-am gândit că trebuie să le ofer facilitatea căutării după nume a produsului în baza de date SQL. În cadrul meniului lateral, unde se află această facilitate, am creat un formular de căutare a cărui date vor fi transmise prin URL, prin metoda GET. Motivul principal este faptul că utilizatorul va putea transmite direct pagina care conține rezultatele căutării sale către o terță persoană interesată, probabil, de asemenea echipamente de încălzire. De exemplu, o căutare după centralele producătorului Immerges va primi următorul link: http://localhost/local/cautare.php?cuvant=Immergas. Pagina a fost realizată oarecum simplu cu ajutorul unor interogări SQL care folosesc facilitate sortării produselor după caracterele pe care le conțin. Am folosit acel wildcard pe care ni l-a pus l-au dispoziție dezvoltatorii SQL și anume LIKE „%immer%” în cadrul interogării SELECT id_centrala, model FROM centrale WHERE model LIKE '%".$cuvant."%' unde variabila $cuvânt este preluată din formularul de căutare al utilizatorului.
Pagina principală index.php
Prima pagină a siteului trebuie să fie ordonată, să prezinte vizitatorului întreaga ofertă. Din acest motiv, înainte de a o construi a trebuit să găsesc răspuns la întrebarea: „Ce ar dori utilizatorul să găsească pe site?”. Răspunsul e unul, fiecare posibil client vine pentru a se informa și cumpăra produsele de care are nevoie în funcție de un buget ce și-l stabilește inițial și de preferințe. Astfel, am realizat ordonări ale produselor din baza de date pentru a scoate înaintea vizitatorului cele mai ieftine produse și cele mai puternice echipamente existente pe stoc. Am realizat aceste necesități cu ajutorul unor interogări SQL care sunt puse într-o variabilă locală astfel:
$sql = "SELECT id_centrala, model, putere, nume_producator, pret FROM centrale, producatori WHERE centrale.id_producator=producatori.id_producator ORDER BY putere DESC LIMIT 0,6";
Această interogare returnează înregistrări ale primelor 6 centrale, în ordine descrescătoare în funcție de puterea lor pentru a da posibilitatea folosirii acestor date ulterior și a afișării lor în cadrul paginii.
Pentru fiecare produs în parte, am creeat câte o poză reprezentativă ce va fi extrasă dintr-un director al imaginilor, în mod dinamic. Dacă produsul respectiv nu are o imagine disponibilă se va creea un div colorat gri (#cccccc), de dimensiunile imaginilor existente în baza de date pe care se va specifica faptul că pentru produsul respectiv nu există imagine.
Funcția file_exists returnează TRUE dacă fișierul specificat există și FALSE dacă nu există. Astfel, se va merge fie pe ramura if-ului fie pe cea a else-ului.
Pentru a efectua filtrări în funcție de preț/putere i-am creeat utilizatorului posibilitatea de completa anumite câmpuri a căror valoare va fi preluată prin metoda POST și transmisă altor pagini pentru prelucrare și afișare a rezultatelor. În funcție de câmpul care va fi completat, se va crea o variabilă $pretmaxim sau $puteremaxima care va intra prin metoda POST cu ajutorul unui script PHP într-o interogare SQL pentru a returna rezultatul dorit de utilizator, într-o pagină nouă.
Fig. 3.14 – Formular filtrări
Am realizat acest fapt cu ajutorul interogării următoare:
$sqlIeftine ="SELECT id_centrala, model, putere, nume_producator, detalii, pret FROM centrale, producatori WHERE centrale.id_producator=producatori.id_producator AND pret<".$pretmaxim." ORDER BY pret ASC";
Marele câștig este faptul că fiecare modificare din baza de date se vor reflecta direct în prima pagină a siteului. Fiecare producător adăugat va apărea imediat în meniul lateral încadrându-se alfabetic acolo unde îi este locul.
Pagina producator.php
Această pagină va cuprinde totalitatea produselor existente pe stoc și aparținând unui anumit producător. Scriptul creat care să ne ajute la construcția acestei pagini seamănă cu cel creat pentru a afișa în meniul lateral în ordine alfabetică numele producătorilor. În această pagină, producator.php se vor afișa toate centralele aparținând producătorului selectat, reprezentarea lor grafică, denumirea modelului, producătorul, un mic citat care să reprezinte modelul respectiv și prețul stabilit pentru acesta. Diferența față de scriptul creat anterior constă în faptul că interogarea SQL e mai complexă având de legat mai multe tabele între ele datorită necesității de a extrage date din mai multe părți. Ea arată astfel:
SELECT id_centrala, model, slogan, putere, pret, nume_producator FROM centrale, producatori WHERE centrale.id_producator=producatori.id_producator AND producatori.id_producator=".$id_producator, unde variabila $id_producator este creată pentru a putea primi și transmite de la o pagină la alta numărul de ordine de identificare a producătorului.
Cu ajutorul jQuery am creat și un mic script care acționarea unui buton cu idul „button” modifică dimensiunea containerului specificat și culoarea lui predefinite în stare inițială și apoi finală. Stilizarea containerelui a fost realizată prin stilurile CSS atașate și ele containerului div. În cele ce urmează voi prezenta scriptul creat și apoi rezultatul acestuia.
Starea finală cu dimensiunea și culorile modificate alături de efectul de expansiune primit.
Starea inițială a containerului înainte de apăsarea butonului „Expansiune”.
Fig. 3.15 – Efect script de expansiune
Pagina produsului, centrala.php
Această pagină este una dintre cele mai importante ale siteului întrucât ea va prezenta eventualului client detaliile echipamentului, îi va da posibilitatea să vadă imaginea în detaliu, să adauge produsul în coșul de cumpărături, să citească părerile celorlalți sau să adauge propria lui opinie. Se va face referire direct la alte două fișiere, comentarii.php și cos.php. Primul dintre ele va prelua comentariile trimise prin formular, le va prelucra și apoi va continua cu introducerea lor în baza de date. Cu ajutorul codului conținut în cel de-al doilea fișier vom putea adăuga, scoate sau vizualiza produsele din coșul de cumpărături.
Informațiile despre produs le-am obținut cu ajutorul următoarei interogări:
"SELECT model, nume_producator, putere, tiraj, debit, boiler, arzator, slogan, detalii, kit, pret, data FROM centrale, producatori WHERE id_centrala=".$id_centrala." AND centrale.id_producator=producatori.id_producator".
Deoarece ea nu returnează decât o înregistrare, nu vom folosi while pentru a itera printre elementele array-ului ci le vom accesa direct, aranjându-le într-un tabel, după cumse poate vedea în imaginea alăturată. Pentru cei care vor o formă compactă a paginii, fără prea multe detalii, . Fig. 3.16 – Ascundere/afișare detalii produs am creeat cu ajutorul lui jQuery un script care să le permită ascunderea unor informații prin accesarea a două butoane. Detaliile produsului sunt afișate în pagină după ce sunt preluate din baza de date ca urmare a folosirii comenzii echo asupra variabilei $row. Această variabilă preia valoarea anumitor câmpuri selectate cu ajutorul interogării prezentate mai sus [Larry Ullman, 2007].
Butonul de adăugare în coșul de cumpărături este unul de tip submit. El se află situat la capătul unui formular cu câmpuri ascunse, care au menirea de a prelua anumite valori ale variabilelor și de a le transmite unde este nevoie de ele, prin metoda POST, către pagina coșului de cumpărături, astfel:
Pentru a fi în temă cu designul siteului, butonul de trimitere a datelor către coșul de cumpărături a primit și el o textură în același stil creată în Adobe Photoshop CS3.
În ultima parte a acestei pagini am creat o secțiune pentru comentarii. Întâi, dacă utilizatorul dorește, el poate să vadă comentariile existente în acel moment pentru produsul pe pagina căruia se află prin apăsarea unui simplu click. Acest script a fost creat cu ajutorul jQuery și a fost explicat în cadrul paginii page_top.php . În cele ce urmează voi arăta rezultatul din pagină al acestui efect:
În faza inițială, comentariile sunt ascunse
Fig. 3.17 – Efect script show/hide
div-ul cu clasa „panel” împreună cu comentariile extrase din baza de date.
Ultima parte a paginii este reprezentată de formularul propriu-zis de preluare a comentariilor utilizatorilor cu privire la produsul respectiv. Înregistrările sunt transmise pentru verificare, validare și înregistrare în baza de date. Acest lucru este realizat de către scripturile scrise în pagina de prelucrare adauga_comentariu.php și sunt preluate de la pagina produsului prin metoda POST. În cele ce urmează voi prezenta acest fișier despre care tocmai am vorbit.
Pagina de prelucrare a comentariilor, adauga_comentariu.php
Această pagină a fost creată din mai multe motive. Prima sarcină pe care trebuie să o îndeplinească e aceea de a verifica și valida datele introduse de utilizator în formular. Dacă vizitatorul omite completarea unui câmp al formularului este atenționat asupra acestui fapt printr-un mesaj de eroare venit de la sistem. În caz contrar, dacă execuția scriptului trece cu succes de condiția de mai sus înseamnă că toate câmpurile au fost completate corespunzător și poate începe procesul de conectare la baza de date pentru a se introduce informațiile în baza de date. Pentru a spori securitatea datelor introduse, se va apela funcția strip_tags care are puterea de a curăța eventualele taguri din formularul completat de utilizator care ar putea face rău paginii web. În final, creăm o legătură automată pentru a-l redirecționa pe utilizator către pagina produsului la care a adăugat comentariul.
Pagina coșului de cumpărături, cos.php
Pentru a păstra în memorie o serie de informații deși utilizatorul părăsește la un moment dat pagina respectivă (cos.php), vom folosi sesiunile. Cu ajutorul acestora, clientul poate adăuga un produs în coșul de cumpărături urmând ca mai apoi să navigheze pe site pentru a-și continua cumpărăturile sau doar să vizioneze celelalte echipamente de încălzire. Toate informațiile recepționate o dată vor fi păstrate în memorie urmând ca mai apoi să poată fi accesate când este nevoie de ele. Sesiunile expiră după trei ore sau după ce toate instanțele browserului sunt închise. Înainte de a începe orice sesiune trebuie apelată funcția predefinită session_start() care are rolul de a reinițializa o sesiune sau de a începe una nouă. În sesiune, datele pot fi salvate într-o variabilă de tip array numită $_SESSION[]. Diferența dintre sesiuni și cookie-uri este mediul lor de stocare. Dacă în primul caz, sesiunile sunt stocate la server, cookieurile ramân pe partea de client.
Pentru a veni în întâmpinarea utilizatorilor care greșesc numărul de bucăți adăugate în coșul de cumpărături am creat cu ajutorul jQuery un script (Edit in place) care permite înlocuirea valorii câmpului [Karl Swedberg, 2008].
Efectuarea plății, casa.php
Ultima pagină pe care utilizatorul trebuie să o viziteze înainte de a trimite comanda sa este cea cu detaliile referitoare la identitatea persoanei și adresa unde dorește să i se livreze. În acest scop, am creat un formular care se verifică, validează și apoi trimite înregistrările în baza de date pentru o evidență mai precisă a comenzii. Așadar, fișierul responsabil de aceste operații este prelucrare.php, despre care voi vorbi în cele ce urmează.
O dată ajunse informațiile aici, se vor verifica pentru a nu fi necompletate. Apoi, se conectează la baza de date unde se va adăuga o înregistrare în tabelul tranzacțiilor. Cu ajutorul funcției PHP mail() am configurat serverul pentru a trimite un email de notificare cu detaliile comenzii. Datorită necesității de a include în email mai multe informații din mai multe locuri a fost nevoie să folosesc operatorul .= cu ajutorul căruia se concatenează stringurile.
În cele din urmă se distruge sesiunea creată anterior (session_destroy()) și se afișează un mesaj de mulțumire celui care din acel moment se poate numi client al siteului PentruConfort.ro.
Administrarea siteului www.PentruConfort.ro
Administrarea oricărui site poate fi făcută de către proprietar sau poate fi externalizată către webdesignerul care a scris paginile. La prima vedere, se poate spune că soluția cea mai simplă ar fi cea a externalizării, deoarece, orice modificare în cadrul siteului va fi efectuată de profesioniști, în speță chiar de către cel care a scris codul. La o analiză amănunțită a acestei soluții vom descoperi câteva dezavantaje care nu pot fi neglijate. În primul rând, este vorba de costurile aferente acestor solicitări de modificări, deoarece orice serviciu se plătește. Așadar, deținătorul siteului va fi taxat pentru lucruri pe care ar putea să le facă chiar el, dacă ar dispune de cunoștințele necesare. Un al doilea dezavantaj este legat de durata în timp a implementării. Când intervine o modificare de preț, vânzătorul și-ar dori să poată prezenta clienților instant noua ofertă, iar în cazul precedent, forwardarea problemei către webdesigner în vederea rezolvării ei ar putea duce la pierderea unor vânzări.
Tocmai din acest motiv am decis că este necesară crearea unui tip de CMS (Content Management System) pentru www.PentruConfort.ro. Concret, acest CMS va fi format dintr-o interfață simplă și ușor de utilizat pentru manipularea diferitelor aspecte din cadrul paginilor siteului, sau a înregistrărilor din baza de date. În cadrul secțiunii de administrare se va intra pe baza unei parole și a unui cont și vor exista mai multe pagini, câte una aferentă fiecărei acțiuni ce dorim să o realizăm în cadrul siteului.
Modulul de acces – Autentificare
Pentru ca modificările pe site să poată fi realizate doar de persoanele autorizate, în acest caz administratorul siteului, am decis să îi atribui o combinație de nume și parolă. Pentru această verificare e nevoie de trei fișiere. Primul va fi cel care va verifica dacă utilizatorul este înregistrat, dacă logarea a fost efectuată cu success. Acesta va fi inclus în toate paginile pentru a evita situația în care un răuvoitor va încerca să acceseze secțiunea de administrare direct introducând calea către respectiva pagină în URL. Așadar, acest fișier va verifica la fiecare accesare dacă utilizatorul este înregistrat și are acces la pagina respectivă.
Al doilea de care avem nevoie va fi responsabil cu afișarea formularului de login pe care va trebui să-l completeze administratorul, pentru a se autentifica. Parola ce va fi trimisă în vederea verificării în baza de date este criptată md5. La introducerea ei în baza de date am utilizat acest tip de criptare deoarece consider ca e foarte important să fim protejați și în cazul nefericit în care cineva reușește să pătrundă în baza de date. Criptarea md5 este ireversibilă, așadar nu se va putea descifra în sens invers. Iată cum apare parola în baza de date:
INSERT INTO admin VALUES („administrator”, md5(„parolamea”));
Fig. 3.18 – Imaginea parolei criptate
Ultimul fișier necesar va confrunta informațiile transmise de către administrator și cele existente în baza de date, iar dacă ele sunt identice, se va permite accesul în secțiunea de administrare. Întâi se va include fișierul de conectare la baza de date pt a se putea confrunta datele. Apoi, câmpurile vor fi verificate pentru a nu se trimite către server cereri cu spații goale, așadar, este necesară completarea ambelor câmpuri.
În cazul în care se va executa cu succes, adică intrările preluate din formular să fie identice cu întregistrările din baza de date, următoarea interogare va extrage un rând ce conține numele și parola. Acest rezultat ar trebui să fie de ajuns pentru a permite accesul, dar, pentru o siguranță mai mare am mai adăugat o condiție, aceea că rezultatul returnat să aparțină unei singure înregistrări în caz contrar oprindu-se execuția scriptului.
Pentru a păstra în memorie informațiile despre autentificare (nume, parola), am folosit variabilele de sesiune. Ele sunt absolute necesare pentru a putea împiedica accesul neautorizat la anumite pagini prin accesarea directă a URL-ului. Pentru a avea acces la datele stocate trebuie să pornim sesiunea creată anterior. Apoi dacă $_SESSION['key_admin'] din pagina de logare nu coincide cu SESSION_id() se va returna un mesaj de eroare pentru a specifica acest fapt. Am creat o funcție de autorizare pentru a o putea apela ori de câte ori voi avea nevoie de ea în proiect, reușind astfel să rezolv problemele referitoare la inițializarea sesiunii, conexiunea cu baza de date și să verificarea autentificării.
Administratorul are acces deplin pentru a efectua orice modificare de conținut a produselor prezentate pe site. El poate adăuga produse, le poate modifica sau șterge, poate vizualiza și edita/șterge/cenzura opiniile adăugate de către vizitatori și clienți sau, poate urmări statutul comenzilor, dacă ele au fost sau nu onorate.
Voi prezenta aceste secțiuni în ordinea creării lor.
În pagina de adăugare de produse am creat câteva formulare, care după ce sunt completate trebuie să treacă și de faza de verificare pentru ca înregistrările să fie introduse în baza de date. Spre exemplu, pentru a adăuga o centrală am creat două formulare. În primul se va putea introduce un nou nume de producător, deoarece în orice moment firma poate încheia noi contracte de colaborare cu diferiți furnizori. Al doilea formular va prelua efectiv întreaga înregistrare. În cadrul lui am utilizat o listă derulantă (drop down list) pentru a ușura munca administratorului și a evita introducerea greșită a numelui producătorului. Celelalte câmpuri sunt identificate in mod diferit cu ajutorul atributului name=” ”, iar la sfârșit, trimiterea cererii se face cu un buton de submit.
Aceste două formulare vor fi verificate înainte de introducerea inputurilor în baza de date. În cazul primului vom avea de verificat două condiții: să nu fie gol numele producătorului și să nu se încerce adăugarea aceluiași producător. Dacă unul dintre cele două evenimente are loc, se va opri execuția scriptului și se va înștiința administratorul printr-un mesaj de eroare. În caz contrar, o interogare SQL adaugă noua denumire a producătorului trimițând și un mesaj de confirmare.
Pentru al doilea formular se verifică dacă datele introduse sunt de tipul corect (preț, putere – numeric, denumirea – string, data – date etc.) și dacă numele modelului de centrală există în baza de date pentru a evita adăugarea de duplicate. Dacă se trece de aceste validări, adăugarea a avut succes, iar produsele vor putea fi vizualizate în cadrul paginii web.
Uneori, vânzările anumitor produse se pot accelera și apare situația de a nu le mai avea pe stoc. Alteori, pot apărea greșeli la adăugarea produselor în baza de date și implicit pe site. Datorită acestor motive a fost nevoie de o pagină de modificare sau ștergere a elementelor din cadrul siteului. Așadar, accesul la informațiile despre centrale se va face cu ajutorul unor formulare. Dacă se dorește schimbarea/ștergerea numelui unui producător, acesta va trebui selectat dintr-un drop down list accesând apoi unul din cele două butoane. Pentru a păstra logica din baza de date am creat o verificare înainte de a se șterge producătorul, astfel încât, dacă există în baza de date centrale ale producătorului respectiv, acesta nu poate fi șters. În cazul acționării butonului de modificare, denumirea implicit selectată va apărea într-un textbox în vederea editării ei.
În cazul în care este necesară modificarea caracteristicilor unui anumit tip de centrală, se va completa numele acesteia, într-un textbox după care butonul de submit va face legătura cu formularul prezentat în imaginea alăturată în care se vor încărca toate informațiile din baza de date aparținând produsului respectiv. Administratorul va avea o sarcină simplă, aceea de a modifica ceea ce îl interesează. Dacă se greșește tipul de dată introdus, modificările nu se vor realiza în baza de date iar administratorul va fi înștiințat și îndrumat pentru a știi unde a greșit. Aceste verificări și validări au fost realizate cu ajutorul instrucțiunilor condiționale if / else și sunt absolut necesare pentru menținerea bazei de date la un nivel optim de normalizare [Larry Ullman, 2007].
Deoarece uneori libertatea de exprimare este înțeleasă greșit a fost nevoie de crearea în panoul de administrare a unei secțiuni care să permită modificarea opiniilor vizitatorilor, sau chiar ștergerea lor. Acest lucru ar fi putut fi realizat chiar în paginile produselor, dar timpul pierdut cu răsfoirea întregului site ar fi fost mult prea mare. Așadar, am creat o secțiune specială unde se afișează comentariile noi adăugate de la ultima verificare a situației. Această situație a ultimei verificări a comentariilor moderate se realizează prin incrementarea cu 1 și adăugarea în tabelul admin de fiecare dată când se intervine asupra unui comentariu. Deoarece id-urile se crează în ordine crescătoare, noile comentarii vor fi cele care vor avea id-ul mai mare decât cel setat în tabelul admin.
Cu ajutorul interogărilor SQL am extras comentariile și apoi le-am afișat. Fiecare comentariu poate fi șters sau modificat. În cazul ștergerii prin apăsarea butonului de submit cu name=’șterge’ metoda POST va realiza următorul statement $sql = "DELETE FROM comentarii WHERE id_comentariu=" .$_POST['id_comentariu']; În celălalt caz, dacă se dorește cenzurarea unor cuvinte folosite într-un mesaj se poate acționa butonul de submit cu name=’modifică’ ce va duce la formularul de modificare unde se încarcă informațiile găsite în baza de date. Administratorul poate opera modificările într-un textbox ulterior acestea înregistrându-se în baza de date cu ajutorul următorului statement: $sql = "UPDATE comentarii SET nume_utilizator = '".$_POST['nume_utilizator']."', adresa_email = '".$_POST['adresa_email']."', comentariu = '".$_POST['comentariu']."' WHERE id_comentariu=" .$_POST['id_comentariu'];
În final, am mai creat un buton de setare a mesajelor deja moderate pentru ca ele să nu mai apară la următoarea verificare. Acționarea lui confirm faptul că am terminat cu moderarea comentariilor din pagina precedentă.
Deși preluarea comenzilor este asigurată prin intermediul funcției mail() puse la dispoziție de PHP, uneori pot apărea probleme de-a lungul acestui proces. Spre exemplu, serverul de email poate fi picat în momentul în care clientul trimite comanda. În acest caz, ea ar rămâne undeva nerezolvată. Pentru aceasta, am creat în modulul de administrare o pagină în care să se înregistreze totalitatea comenzilor clienților. În acest sens, am adăugat un nou câmp în tabelul de tranzacții. Rolul acestuia este de a diferenția comenzile onorate cărora le vom atribui valoarea 1, de cele neonorate care vor primi 0.
"SELECT id_tranzactie, DATE_FORMAT(data_tranzactie, '%d-%m-%Y') AS data_tranzactie, nume_cumparator, adresa_cumparator FROM tranzactii WHERE comanda_onorata=0";
Fig. 3.20 – Apariția comenzii în panoul de administrare
După cum se vede, în această pagină sunt stocate toate comenzile clienților. Acestea conțin numele, adresa beneficiarului, comanda, totalul plății și cele două butoane pe care le va folosi administratorul pentru a avea o evidență clară. La acționarea butonului „Comanda Onorata”, valoarea de adevăr din baza de date a respectivei comenzi se va modifica în 1, inițial ea fiind setată 0.
Cu această parte se încheie și modulul de administrare. Siteul www.PentruConfort.ro este complet operațional, securizat, ușor de navigat și mai ales de administrat.
Următoarea etapă abordată a fost cea de optimizare pentru motoarele de căutare despre care voi vorbi în cele ce urmează.
CAP. 4 TESTAREA SISTEMULUI
După etapele de planificare, design și implementare urmează etapa de testare a site-ului. În această etapă se realizează:
Corectarea paginilor din punct de vedere ortografic și gramatical
Testarea legăturilor din cadrul site-ului
Testarea legăturilor externe
Depanarea greșelilor care țin de sintaxa codului HTML/PHP
Etapa de testare este deosebit de importantă pentru impresia generală lăsată de site-ul PentruConfort.ro. Un site cu ortografie neglijentă, cu greșeli de exprimare, cu legături nefuncționale poate îndepărta vizitatorii, oricât de valoroase ar fi informațiile prezentate în interiorul său.[ Glenford J. Myers,2004]
4.1 Corectarea
Acesta este unul din cele mai neglijate aspecte al publicisticii Web. Foarte frecvent se întâlnesc pagini Web cu multiple greșeli de ortografie, gramatică, formatare, chiar și în cazul site-urilor importante. Paginile cu greșeli de ortografie, exprimări neglijente, reflectă cel puțin o insuficientă experiență în acest domeniu și, de ce nu, chiar lipsă de respect pentru vizitator.
Atenția și dăruirea în munca pe care am depus-o la crearea site-ului definește calitatea acestuia. Este mult mai simplu să se petreacă câteva ore corectând textul, pentru a evita ca ulterior să trebuiască corectarea problemei zile întregi pentru a recâștiga credibilitatea pierdută prin vizionarea siteului defect.
Câteva metode care pot ajuta corectarea eficientă a paginilor Web:
Pentru a descoperi erorile plictisitoare, făcute din grabă sau din oboseală am utilizat corectoare automate pentru ortografie și gramatică
Erorile mai subtile au fost descoperite după recitirea paginii încărcate în browser.
Am verificat imaginile, figurile și hărțile din pagină. M-am asigurat că ele au legătură cu textul de referință, am verificat textul explicativ care însoțește imaginea.
Eventualele erori ce persista după toate aceste verificări au fost corectate ulterior și vor fi recorectate pe măsură ce vor fi descoperite.
4.2 Testarea paginilor
Odată terminată verificarea corectitudinii textului din pagini din punct de vedere gramatical și logic, urmează etapa de testare a paginilor. În această fază m-am concentrat pe testarea corectitudinii etichetelor HTML, a link-urilor, a imaginilor și a celorlalte elemente incluse în pagini.
4.3 Testarea linkurilor din pagină
Cea mai simplă cale de testare a link-urilor este de a încărca pagina în browser și de a da click pe fiecare link. Am verificat funcționarea tuturor ancorelor din pagini care trebuie să acceseze secțiunea din pagină corespunzătoare identificatorului ancorei.
După aceasta, am trecut la modificarea modului de funcționare a legăturilor către alte documente, atât în cadrul site-ului cât și în afara sa, respectiv validitatea lor și dacă paginile accesate sunt cele potrivite. S-a verificat amănunțit și corectat sintaxa link-urilor și anume: corectitudinea protocolului specificat, extensia fișierului
De ce este necesară testarea uzabilității magazinelor virtuale românești?
Ce înseamnă uzabilitatea? Venind din termenul în limba engleza „usability”, putem defini acest concept ca fiind eficienșa și ușurinta folosirii unei pagini de web, sau a unei interfețe electronice (fie ea un site de comerț electronic) de către un utilizator în scopul satisfacerii nevoilor acestuia din urmă (uneori scopul în care e accesata o pagină web diferă de scopul pentru care a fost creată aceasta) .
Cu alte cuvinte, atunci când intrăm pe un site de comerț electronic, și după ce am identificat în mod corect scopul acelui site, care corespunde cu scopul meu ca utilizator, acela de a cumpara un produs sau serviciu, faptul ca voi greși în folosirea lui, greșeli care vor duce practic la o abandonare a respectivului site, nu este vina mea. Acest lucru nu înseamnă că nu sunt suficient de tehnic, sau suficient de versat în folosirea magazinelor online, ci este vina acelui magazin online ca nu și-a pregătit site-ul pentru o folosire cât mai simplă, de către orice tip de oameni, mai mult sau mai puțin literați.
Uzabilitatea este o cerinta obligatorie pentru un site de comerț electronic. Un magazin online care nu își îndeplinește menirea de a vinde produse din cauza unei proaste uzabilități nu se poate numi magazin online, sau site de comerț electronic. Se dezice de scopul pentru care a fost creat, acela de a vinde! Pur și simplu dă greș, iar uneori afacerea poate da și faliment!
Este nevoie de testarea uzabilității magazinelor online românești, deoarece deseori se observă probleme mari la capitolul funcționalitate. Chiar daca siteul e funcțional 100%, proprietarul, dezvoltatorul interfeței grafice, a softului niciodată nu va putea face teste intensive și nu se va putea pune în pielea celui mai obișnuit utilizator. De aceea este nevoie de teste, pentru e surprinde ceea ce nu poate fi descoperit în faza de dezvoltare a site-ului, a magazinului virtual.
4.4 Concluziile testării
În urma testării putem afla foarte multe lucruri, unele pe care nici nu le-am fi dorit poate sa le descoperim, si anume:
– de ce abandonau userii coșul de cumpărături (era un bug în cod care nu ne lăsa să introducem al doilea produs);
– de ce durează atât de mult până se adaugă un produs în coș (butoanele de adăugare nu erau poziționate correct în pagină, erau greu de găsit);
– de ce e bine să avem și filtre pentru diferite căutări (unii clienți nu au timp să răsfoiască toate paginile siteului pentru a găsi produsul dorit);
– de ce sunt userii derutați de proasta traducere a butoanelor în site, din engleza în română, sau de ce e bine să traducem complet site-ul dacă vindem în România
– de ce timpii mari de încărcare afectează voința utilizatorului de a continua cumparaturile pe site (în acest scop am redus timpii prin micșorarea dimensiunilor elementelor încărcate în pagină);
CAP.5 SEO – OPTIMIZAREA PENTRU MOTOARELE DE CĂUTARE
Acronimul SEO vine de la "search engine optimization" și reprezintă serviciul de optimizare al unui site web pentru a atinge poziții cât mai înalte în motoarele de căutare. Principalul avantaj al optimizarii este creșterea traficului. Foarte important de precizat este că optimizarea aduce numai trafic de calitate direct interesat de produsul sau serviciul oferit de site-ul optimizat. Pe termen lung optimizarea SEO reprezintă cea mai accesibilă și eficientă cale de promovare pentru un web site. Există două metode generale de optimizare pe care le voi prezenta acum succinct revenind mai târziu asupra lor.
Optimizare on-site – reprezintă optimizarea internă a site-ului și anume titlurile paginilor, structura URL-ului, heading-uri folosite, meta tag-uri, bold, italic. etc.
Optimizare off-site – reprezintă creșterea popularității site-ului prin acumulare de link-uri, înscriere în directoare web, linkbuilding etc.
Un site bine structurat va da bine atât în fața utilizatorilor cât și pentru motoarele de căutare. În prezent, înainte de achiziția bunurilor căutăm să ne informăm despre ofertele existente pe piață și prețurile practicate. Aceste căutări se realizează astăzi în marea lor majoritate (96%) prin motorul de căutare Google. Este lesne de înțeles că, pentru a vinde centralele trebuie întâi să avem potențiali clienți. Acești clienți pot apărea în urma unor recomandări, dar, fiind la început de drum în onlineul românesc a trebuit să practic SEO intensiv pentru a câștiga o poziție cât mai avansată în rezultatele motoarelor de căutare. Miza este enormă deoarece majoritatea vizitatorilor nu au răbdare să viziteze decât primele linkuri afișate.
Sunt două tipuri mari de optimizare: on-site și off-site.
5.1 Optimizarea on-site
În ceea ce privește optimizarea on-site trebuie să se construiască un sistem după regulile sugerate de Google:
accesibil; paginile site-ului trebuie să poată fi găsite de Google. Informația de pe pagini trebuie să fie în format text (textul înglobat în imagini sau în anumite insert-uri Flash nu este vizibil pentru Google);
structurat; ierarhia paginilor dintr-un site și link-urile dintre ele influențează poziția pe Google;
focalizat; în viziunea Google, pentru a oferi informație relevantă site-ul trebuie să fie o colecție de pagini focalizate pe teme înguste, circumscrise temei site-ului, în acest caz, vânzarea echipamentelor de încălzire.
Parcurgerea ușoară a siteului: Roboții dezvoltați de Google vor putea parcurge siteul în vederea scanării lui prin intermediul linkurilor interne. O regulă de aur este aceea că arborescența siteului trebuie să fie astfel gândită pentru a permite accesarea informației din maxim 3 clickuri. În cazul acestui portal, fiecare pagină din site conține acel meniu lateral care include linkuri către principalele categorii ale siteului și obligatoriu, în subsolul paginii un link de întoarecere către homepage. Am ales să nu le creez în javascript și să renunț la câteva efecte interesante ce le-aș fi obținut cu ajutorul Flash tocmai pentru a da posibilitate crawlerilor de a parcurge siteul prin linkurile interne sau direct din meniul de navigare. [David Viney,2010]
Fig. 5.1 – Structura siteului
Gestionarea conținutului paginilor.
În general creatorii siteurilor nu pun accent pe conținutul text al siteurilor pe care le fac. Acest lucru e datorită faptului că se dorește atragerea clientului în special printr-un design strălucitor, un design care să uimească imediat după ce se intră pe site. Deși e și acesta un aspect foarte important al oricărei politici de marketing, nu e de ajuns pentru a convinge vizitatorul să cumpere. El are nevoie de confirmări, de cât mai multe detalii despre produsele respective. Din punct de vedere al optimizării, această greșeală a neadăugării de conținut face ca siteul aproape să nu existe în bazele de date ale motoarelor de căutare.
Google a precizat că siteurile trebuie să fie originale, iar pentru a fi scoase cât mai în față la căutări, ele nu trebuie să aibă conținut copiat din altă parte, trebuie să fie calitative, relevante ca și conținut.
Astfel, am urmărit să creez conținut nou pentru fiecare produs, urmărind în același timp să păstrez specificațiile tehnice care să confere conținut relevant.
În final, doar siteurile care respectă standardele Google vor avea prilejul de a culege beneficiile unei optimizări corect făcute, astfel: apariție în prima pagină la diferite căutări, trafic mare, credibilitate în fața vizitatorilor, un număr mai mare de posibili clienți, recompense în vânzări.
PentruConfort.ro a reușit introducerea de conținut valoros, insistând asupra unor termeni pentru care se dorește afișarea rezultatelor pe prima pagină. Cuvintele reprezentative pentru produse au fost marcate cu bold sau italic, acesta oferind o importanță mai mare în vizorul Google.[ Jeff Jarvis, 2010]
5.2 Optimizarea Google off-site
Optimizarea Google off-site se referă la relația pe care o are siteul meu cu mediul www, în mod special la obținerea de link-uri de pe alte site-uri (preferabil cu aceeași temă) către site-ul care se dorește a fi optimizat, adică PentruConfort.ro. Trebuie făcută controlat pentru a simula dezvoltarea naturală a structurilor de link-uri. Pentru optimizarea off-site am ales 2 metode: înscrierea în directoarele web și schimbul de linkuri (link-building).
5.3 Înscrierea în directoarele web.
În mare, un director Web e un site ce adună link-uri trimise de webmasteri în categorii structurate după diferite criterii și le catalogează în consecință.
Cele mai importante motoare de căutare dețin propriul director Web, pentru a folosi baza proprie de date, astfel încât rezultatele la căutări să fie unice și cu relevanță.
Astfel, Google deține Google Directory și ODP, directoare Web ce au o relevanță specială pentru căutarile din Google.
ODP sau DMOZ e un director Web ce se bazează pe editarea umană în care editorii selectează, după anumite criterii prestablite, site-uri Web ce pot fi înscrise în acest director. Editarea umană implică verificarea și evaluarea site-ului trimis spre înscriere – adăugare și catalogarea prin trimiterea în secțiuni specifice ale directorului, ce au relevanță pentru site-ul trimis.
Deoarece clienții noștri sunt în marea lor majoritate din România, m-am concentrat pe obținerea de rezultate la căutări doar pentru google.ro, nu și .com, deci am înscris siteul în cât mai multe directoare web românești. Este foarte important ca în procesul de optimizare off-site prin intermediul directoarelor web să se înscrie site-ul în categoriile din director cele mai apropiate cu tematica site-ului care se optimizează. Astfel se va respecta cerința (opțională) Google ca link-urile ce “bat” către acest site să vină pe cât posibil de pe site-uri cu tematică asemănătoare. [Jeff Jarvis, 2010]
Câteva directoare web în care am înscris siteul pentru promovare sunt:
http://www.addursite.ro
http://www.catalog-web.net/
http://director.isgreat.org/
http://www.extralinks.ro/
http://www.shopdirector.ro/
http://utile.us/
http://www.promovarea.ro/
http://www.elocvent.ro/
http://www.dirpedia.ro/
http://www.domz.fnhost.org/
Creșterea polularității linkului
Popularitatea unui link este dată de numărul și de calitatea linkurilor care duc la site. Linkurile sunt o forță determinantă pentru motoarele de căutare. Un link de susținere de calitate nu va ajuta doar în rankul acordat de motoarele de căutare, ci este de ajutor, pentru că va aduce trafic targetat.
De ce am ales să facem schimb de linkuri și cu cine trebuie făcut acest schimb?
Motivul principal pentru care se face schimbul de linkuri este acela de a urca poziții în căutările Google. Este important ca schimbul de linkuri să se facă cu site-urile asemănătoare domeniului de activitate pe care siteul PentruConfort.ro îl tratează. Ele trebuie să fie asemănătoare ca subiect, să aibă cuvinte cheie relevante site-ului sau paginii către care facem legătura.
Practic, fost creată o adresă de e-mail de pe care au fost trimise mesaje către diferite site-uri cu profil asemănător cu cel al magazinului www.PentruConfort.ro. Mesajele au fost personalizate pentru fiecare site în parte pentru a nu da impresia webmasterilor că trimitem un “mass-email”, că îi respectăm și le apreciem site-ul. În mesajul trimis unui webmaster s-a spus de fiecare dată o părere bună despre site-ul acestuia sau ceva ce ne-a impresionat plăcut la site-ul lui pentru a-l face să înțeleagă ca i-am vizitat și studiat site-ul și că nu-l tratăm cu indiferență dorind doar să profităm de pe urma acestuia prin obținerea link-ului către site-ul nostru ci dorim să îi devenim „prieten” și partener de încredere, să dezvoltăm o colaborare de lungă durată, o colaborare din care să aibă de câștigat ambele părți. Acest pas necesită o iscusință de negociator, mult timp și răbdare însă prin el se pot obține link-uri pe site-uri pe care alții nu pot ajunge (cum ar fi în cazul directoarelor web sau site-urilor de articole) și deci este practic singura metodă prin care optimizatorii pot crea avantaje în optimizarea off-site față de concurență.
CAP. 6 CONCLUZII
Datorită creșterii semnificative a interesului companiilor pentru dezvoltarea de strategii de comunicare bazate pe web, cât și a interesului general al publicului, simpla creare a unui website nu mai este suficientă. Acesta trebuie să fie profesionist și să se ridice la nivelul ultimelor standarde.
Pentru a avea siguranța unui site de calitate, clar, simplu și bine structurat, trebuie să se acorde o importanță deosebită etapelor prezentate mai sus. O dată cu creșterea complexității unui site, structura acestuia trebuie să asigure o ierarhie clară a paginilor și o navigare ușoară pentru utilizator. Un website bine structurat va grupa paginile astfel încât să permită vizitatorilor să acceseze imediat conținutul de care au nevoie și să navigheze ușor prin submeniurile paginilor care le oferă informații de ajutor.
Prin intermediul siteului PentruConfort.ro am reușit să-mi câștig prezența în www de unde milioane de internauți din România vor deveni posibili clienți.
Am reușit implementarea sistemului de prezentare și vânzare a echipamentelor de încălzire termică cu costuri minime de dezvoltare.
Mi-am asigurat prezența la dispoziția clienților 24 de ore pe zi.
Vizitatorii și posibilii colaboratori au posibilitatea de a afla date despre firmă în orice moment. Astfel, neascunzând nimic, firma a devenit credibilă în ochii partenerilor și a clienților.
Prin asigurarea prezenței produselor pe internet, am reușit scăderea prețurilor lor deoarece costurile de întreținere a spațiului comercial fizic și cele generate de plata angajaților au dispărut.
Prin intermediul bazei de date MySQL și a comenzilor SQL am reușit gestionarea tuturor caracteristicilor produselor, iar PHP m-a ajutat la extragerea lor pentru a fi vizibile de către toți utilizatorii.
Siteul este ușor de parcurs, oricine poate intui pașii pe care trebuie să-i facă pentru achiziționarea produselor. Totodată, conținutul siteului este interactiv iar culorile folosite sunt plăcute ochiului uman.
Am creeat o parte de administrare pentru a veni în ajutorul tatălui meu, care nu are cunoștințe de programare și baze de date. Întreg procesul de adăugare, modificare, ștergere și prelucrare a comenzilor poate fi realizat dintr-un singur loc.
Am realizat testarea siteului pe mai multe browsere și sisteme de operare, obținând o funcționalitate completă.
Un site care nu beneficiază de un SEO adecvat nu va ajunge la clienții potențiali. Astfel, deși SEO nu este ușor de făcut, merită tot efortul deoarece aduce public relevant și interesat pe site. Toate elementele site-ului, fie că sunt imagini sau texte, trebuie să se completeze reciproc. Puțină cercetare și atenție la construirea site-ului și la codul sursă m-a ajutat să evit greșelile des întâlnite și ma va apropia considerabil de successful oferit de creșterea vânzărilor.
Pe viitor intenționez realizarea câtorva implementări:
Un sistem de plată a produselor, securizat, prin intermediul cardului bancar.
Implementarea unui sistem de marketing prin email care să aducă posibili viitori clienți.
Mărirea securității sistemului împotriva atacurilor din exterior care vor apărea o dată cu creșterea numărului clienților și a bazei de date.
Promovarea continuă (SEO) a siteului pentru creșterea rankului Google și apariția noilor clienți.
BIBLIOGRAFIE
Jeff Jarvis – „Ce-ar face Google?” Editura Publica, 2010;
David Viney – „Cum Sa Ajungi In Top Pe Google”, Editura METEOR PRESS, 2010;
Mihaela Muntean, Mirela-Catrinel Voicu – „Revista Informatică Economică”, nr.3(27)/2003;
Yan Claeyssen – „Marketingul Prin E-Mail”, Editura: POLIROM, 2009;
Larry Ullman – „PHP and MySQL for dynamic Web Sites”, Editura: TEORA, 2007;
Andy Harris – „PHP/MySQL Programming”, Editura Premier Press, 2008;
PHP și MySQL pe înțelesul tuturor – „Revista Chip Special, 2003;
Ioan Alfred Letia, Liviu A. Negrescu – „Programare Functionala Vol. 1”, Editura: ALBASTRA, 2008;
Steven Holzner – „Initiere In Php 5”, Editura TEORA, 2009.
Harold Kerzner – „Project Management: A Systems Approach to Planning”, 2003.
Jonathan Chaffer, Karl Swedberg – „Learning jQuery”, PACKT Publishing, 2008
Glenford J. Myers – „The art of software testing”, Kindle, 2004
BIBLIOGRAFIE
Jeff Jarvis – „Ce-ar face Google?” Editura Publica, 2010;
David Viney – „Cum Sa Ajungi In Top Pe Google”, Editura METEOR PRESS, 2010;
Mihaela Muntean, Mirela-Catrinel Voicu – „Revista Informatică Economică”, nr.3(27)/2003;
Yan Claeyssen – „Marketingul Prin E-Mail”, Editura: POLIROM, 2009;
Larry Ullman – „PHP and MySQL for dynamic Web Sites”, Editura: TEORA, 2007;
Andy Harris – „PHP/MySQL Programming”, Editura Premier Press, 2008;
PHP și MySQL pe înțelesul tuturor – „Revista Chip Special, 2003;
Ioan Alfred Letia, Liviu A. Negrescu – „Programare Functionala Vol. 1”, Editura: ALBASTRA, 2008;
Steven Holzner – „Initiere In Php 5”, Editura TEORA, 2009.
Harold Kerzner – „Project Management: A Systems Approach to Planning”, 2003.
Jonathan Chaffer, Karl Swedberg – „Learning jQuery”, PACKT Publishing, 2008
Glenford J. Myers – „The art of software testing”, Kindle, 2004
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: Platforma Web Pentru Comercializarea Instalatiilor Termice (ID: 144403)
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.