Pagina Web Pentru Comert Electronic

Informatica

Pagina Web Pentru Comert Electronic

Byadmin ianuarie 1, 2024

Pagină WEB pentru comerț electronic

CUPRINS

Capitolul I. – Introducere

Motivația

1.2 Internetul

1.2.1 Istoria Internetului

1.2.2 Date generale

1.2.3 Publicitatea pe Internet

Capitolul II. – Limbaje și tehnologii

2.1 Limbajul HTML

2.1.1 Istoric HTML

2.1.2 Caracteristici HTML

2.2 Javascriptul

2.3 Stilul CSS

2.4 Arhitectura unui site

2.3.1 Elemente generale

2.3.2 Vulnerabilități

Capitolul III. – Studiu de caz

3.1 Programe folosite

3.1.1 Program Serif WebPlus X4

3.1.2 Programul Photodex ProShow Gold

3.1.3 Programul Macromedia Fireworks

3.2 Construcția proiectului

3.2.1 Realizarea grafică

3.2.2 Codul folosit

Concluzii

Bibliografie

Capitolul I. Introducere

1.1 Motivația

Termenul de Internet este un termen relativ nou și fiecare dintre noi dorim să îi aflăm avantajele și dezavantajele. Fiecare utilizator, fie că este un copil sau un adult , caută să folosească Internetul cât mai optim posibil. Fie că este vorba de informare (citirea unui ziar, căutare unor detalii suplimentare despre un produs, căutarea unor informații pentru realizarea unui referat) sau folosirea Internetului pentru entertainment (vizualizarea unor programe TV, ascultarea unui radio online, jocuri online ) toate acestea pot fi găsite și sunt disponibile doar la un ,,click’’ distanță. Datorită unei idei care s-a născut în perioada Războiului Rece, lumea este conectată astăzi la nivel global și are acces la informație mai mult ca niciodată.

Internetul oferă o multitudine de posibilități, dar una dintre aceste posibilități devine din ce în ce mai importantă astăzi: publicitatea online. Fie că este vorba de o carte, de un produs, o firmă, toate pot fi prezentate publicului larg printr-o metoda de publicitate online. În cazul firmelor această publicitate vine și doar din realizarea unui site de Internet. Desigur există și mecanisme care asigura publicitatea separat prin bannere sau reclame bine plasate, dar simplul fapt că ai o pagină de Internet ajută foarte mult.

Căutarea pe Internet se bazează foarte mult pe motoarele de căutare. Acestea afișează mai multe rezultate din care utilizatorul poate alege. Din start se observă un câstig al faptului că un site web ajută. Dacă o firmă nu dispune de un site web, atunci nici utilizatorul nu va fi informat despre existența acesteia. O foarte bună practică în acest sens sunt paginile de prezentare a unei firme. Acestea pot oferi o imagine de amsamblu unui utilizator și îl poate determina să dorească să exploreze mai mult și să afle mai multe date despre acea firmă.

Ca și angajat in domeniul IT la firma Badclover SRL (pe post de tehnician IT) am observat că odată cu mărirea numărului de clienți a aparut și nevoia unui site web. Firma este relativ nouă fiind înființată în mai 2009 și are ca domeniul de activitarea domeniul IT. Sub emblema COMPUTER MECHANICS firma oferă asistență hardware și software clienților , asigurând mentenanță PC și periferice. Recent firma și-a angajat și un programator, iar prin realizarea unui software pentru monitorizarea imunizărilor active ale populației (SMIAP), software care poate fi găsit online la adresa http://smiap.ro , și-a consolidat o poziție pe piața arădeană și a devenit furnizor de soluții complete IT hardware și software.

Astfel s-a convenit cu directorul firmei realizarea unui site web reprezentativ pentru firmă, care să poată fi accesat de către clienții existenți ai firmei sau clienții noi care vor dori să se informeze sau să intre în contact cu firma noastră.

Deșii site-ul a fost gândit ca un site de prezentare, s-a căutat și implementarea unor metode moderne și accesibile de informare asupra unor produse sau de contact al unui departament din cadrul firmei.

Cu multă muncă si dedicare a luat naștere site-ul firmei, site considerat și proiect de diplomă datorită multitudinilor de elemente incluse în construirea acestuia.

1.2 Internetul

1.2.1 Istoria Internetului

Numele propriu Internet (scris cu majusculă) se referă la World Wide Web, rețeaua mondială unică de computere interconectate prin protocoalele de comunicare Transmission Control Protocol și Internet Protocol, numite pe scurt TCP/IP. Cuvântul "Internet" provine din împreunarea artificială și parțială a două cuvinte englezești: interconnected = interconectat și network = rețea. Totuși internetul își are originile într-un proiect inițiat de către Agenția de cercetari avansate al Ministerului Apărării SUA (în engleză DARPA). Acest proiect a primit numele de ARPAnet și a fost prima rețea care interconecta calculatoare. Proiectul ARPANET își are originile în anul 1957, în timpul razboiului rece dintre SUA și Rusia. SUA încearcă să fie pe primul loc în mai multe domenii, iar în această perioadă primește o lovitură grea din partea URSS-ului prin lansarea primului satelit artificial în spațiu, adică satelitul Sputnik.

Statele Unite ale Americii nu se lasă mai prejos și creează prima rețea operațională bazată pe schimbul de pachete (comutație de pachete), rețea care avea să devină predecesorul Internetului. Comutația de pachete stă și în ziua de azi la baza schimbului de date sau la comunicările de voce, înlocuind cu succes comutația de circuite. Astfel cu ajutorul comutației de pachete se poate folosi un singur canal de comunicație pentru comunicarea cu mai multe sisteme, datele fiind descompuse în pachete după un algoritm prestabilit, iar la sistemele destinație aceste pachete vor fi reclădite dupa un alt algoritm , în acest fel făcându-se cu succes trimiterea datelor de la un sistem sursă către un sistem destinație. Firma BBN incepe implementarea rețelei ARPANET pe la sfârșitul anilor 60. Firma susține că pentru a forma o rețea este nevoie de mini calculatoare numite IMP (Interface Message Processors), aceste calculatoare fiind mai târziu cunoscute sub numele de routere. Aceste IMP-uri erau conectate între ele prin modemuri, viteza maximă fiind undeva în jurul valorii de 50 kb/s . IMP-urile îndeplineau funcții de stocare și trimitere mai departe a pachetelor primite. Primul link permament ARPAnet link a fost stabilit pe data de 21 noiembrie 1969, fiind un link între IMP-ul de la UCLA și IMP-ul de la Institutul de Cercetări din Stanford. Pe data de 5 decembrie toate cele 4 IMP-uri sunt conectate între ele formând o rețea cu 4 noduri.

Primul mesaj trimis vreodată pe rețeaua ARPAnet a fost cuvântul “login”. Acesta a fost trimis pe data de 29 octombrie la ora 22:30 între un calculator de la UCLA și unul de la Institutul de Cercetări din Stanford. Deși litelerele “l” și “o” au ajuns fără probleme, întregul sistem se va prăbuși, iar primul cuvânt din istoria ARPAnet care a fost trimis va rămâne “lo”. În 1972, la prima conferință internațională asupra comunicațiilor informatice de la Washington, a fost demonstrată funcționarea rețelei ARPANET cu 40 de noduri în fața unui public compus din specialiști din Canada, Franta, Japonia, Norvegia, Suedia, Marea Britanie și Statele Unite.

Discuțiile dintre reprezentanții diferitelor proiecte de rețele cu comutație de pachete s-au purtat în jurul normalizării protocoalelor de comunicație. Se creează cu această ocazie INWC (InterNetworking Working Group), pentru a raspunde nevoii de protocoale comune de comunicație.

Președintele acestui grup, Vinton Cerf, propune prima arhitectură a unei rețele internaționale: un ansamblu de rețele autonome interconectate prin pasarele. Subrețelele trebuie să rămână în mare măsură independente, în mod asemănaător cu mașinile care formează ARPANET. Între 1972 și 1974 se dezvoltă primele specificații de protocoale Internet și anume Telnet, FTP, și TCP. În 1977, sunt definite formatele mesajelor electronice, iar în 1979, ARPA creează ICCB – Internet Configuration Control Board – pentru a controla evolutia rețelei. FTP (file transfer protocol) va fi folosit în cadrul ARPAnet pentru transferul de fișiere.

În 1983, ARPANET se imparte în două subrețele: ARPANET și MILNET, Milnet fiind legat la Defense Data Network, adică la rețeaua militară americană. Până în 1990, ARPANET joacă rolul de coloană vertebrală a rețelei Internet din S.U.A., după care este integrată în rețeaua NFSnet, a organismului National Science Foundation. Amsamblul devine coloana vertebrală a rețelei Internet între 1990 și 1995, data la care a fost înlocuită de câteva rețele mari interconectate (MCInet, Sprintnet, ANSnet).

Inițial când s-a construit ARPAnet ,poporul american a crezut ca a fost o rețea construită să supraviețuiască unui atac nuclear din partea URSS. Adevărul a fost însă că creatorii rețelei nu se puteau baza pe ea în cazul unui astfel de atac, chiar dacă rețeaua supraviețuia și fără câteva din nodurile ei. Scopul acestei rețele a fost și dezvoltarea unei comunicații între mai multe mașini, ARPAnet având și un aspect social nu doar militar.

În anul 1991 se va adopta în SUA Actul Comunicării și al Super Calculatoarelor ,în acest fel contribuind la dezvoltarea NII ( National Information Infrastructure) , structură care va reglementa “autostrăzile informației”. Astfel datorită unei conduceri și a unui management bun la nivelul instituției ARPA, proiectul ARPAnet se bucură de un succes internațional și va fi piatra de fundație pentru Internetul din ziua de astăzi. Datorită proiectului ARPAnet oamenii se pot bucura de schimb de informații, de poștă electronică, de facilitațile transferului de date și de accesul liber la informație.

Totuși pentru a avea acces la informație este necesară o conexiune la Internet. Aceasta se poate realiza astfel:

printr-un modem și o linie de telefon și legătură telefonică fixă, prin formarea unui anumit număr de telefon,

linie de telefon dedicată / închiriată unui singur utilizator sau unei singure firme,

legătură prin radio la un așa-numit Hotspot sau Active Point, utilizând tehnicile WLAN sau Wi-Fi,

legătură prin radio, de la un telefon mobil sau de la un calculator portabil (de ex. notebook sau netbook) la antena celulară terestră, utilizând tehnicile GSM sau UMTS.

Cablu optic sau cablu bazat pe cupru (broadband-ul)

1.2.2 Date generale

Punctul de început pentru toți pe Internet este ISP-ul (Internet Service Provider). Un ISP poate fi comercial (furnizor de Internet pe care îl vom plăti) sau o locație de unde se poate accesa Internet (liceu, universitate, cafenea). Unii utilizatori pot fi conectați în LAN , alții pot avea acces folosind tehnologie radio wireless .

Modul în care circulă informația către site-urile de Internet și înapoi către utilizator este determinat de două lucruri : routerele si protocoalele TCP/IP. Routerele (uneori numite si gateway) sunt asemănătoare cu operatorii telefonici. Acestea conecteaza rețelele între ele și au tabele de rutări pentru a determina cum circula informația din și spre Internet. Routerele au un IP pentru fiecare legatură, de exemplu un router care are o conexiune PPP si doua conexiuni ETHERNET ar trebui sa aiba 3 IP-uri diferite. Protocolul care face Internetul să mearga este protocolul TCP/IP. IP-ul este componenta care mută pachetele de date de la un nod al rețelei catre altul. TCP-ul este componenta care verifică dacă datele au ajuns unde trebuie. IP-ul este prezentat sub forma unui număr care este diferit pentru fiecare calculator. Totuși ,din motive evidente, este mai ușor de ținut minte un nume decât un număr și din acest motiv Internetul folosește DNS ( Domanin Name System) . Acesta asociază numele unor site-uri cu adresele IP ale serverelor acestora, în acest fel ușurându-se navigarea pe Internet. Dacă routerul este operatorul pe Internet ,atunci Domain Name System (DNS) este cartea de telefon.

Repartizarea utilizatorilor Internet pe tari/ continente

In luna Martie, anul 2008 in Romania erau 12,000,000 de utilizatori Internet, reprezentand 53,9% din populatie, potrivit Uniunii Internaționale de Telecomunicații. Se pcare verifică dacă datele au ajuns unde trebuie. IP-ul este prezentat sub forma unui număr care este diferit pentru fiecare calculator. Totuși ,din motive evidente, este mai ușor de ținut minte un nume decât un număr și din acest motiv Internetul folosește DNS ( Domanin Name System) . Acesta asociază numele unor site-uri cu adresele IP ale serverelor acestora, în acest fel ușurându-se navigarea pe Internet. Dacă routerul este operatorul pe Internet ,atunci Domain Name System (DNS) este cartea de telefon.

Repartizarea utilizatorilor Internet pe tari/ continente

In luna Martie, anul 2008 in Romania erau 12,000,000 de utilizatori Internet, reprezentand 53,9% din populatie, potrivit Uniunii Internaționale de Telecomunicații. Se prezice că Internetul va găzduii un număr mai mare de utilizatoru în următorii ani, pentru că aceștia pot realiza diferite activități necesare pe Internet (să se informeze, să cumpere, să discute, să citească presa, etc. ).

1.2.3 Publicitatea pe Internet

Publicitatea pe internet este un termen relativ nou , care se răspândește foarte repede în toate țările dezvoltate. În urmă cu doar 40 de ani televiziunea era considerată o invenție mondială care va schimba pentru totdeauna omenirea. Același lucru s-a întâmplat și acum 15 ani cu televiziunea prin cablu ,care a fost apreciată la fel. La începuturile lor fiecare dintre aceste medii noi a trebuit să-și dovedească valoarea pentru a-i convinge anumite firme și oameni să difuzeze un spot publicitar, iar Internetul se gasește în această situație în prezent. Din această cauză se ridică anumite întrebări în legătura cu publicitatea în acest mediu relativ nou. Aparține publicitatea pe Internet de planurile media? Aceasta este întrebarea pe care toți directorii și-o pun atunci când sunt nevoiți să se ocupe cu promovarea produselor. Raspunsul este categoric DA. Indiferent de produs, de marcă ,de categoria din care face parte, fiecare produs poate fi promovat cu succes prin intermediul publicității pe Internet.

Totuși pentru a se putea investi în publicitatea pe Internet este nevoie de dovezi concrete care să susțină această acțiune. Prima dovadă a migrației audienței a apărut în anul 1996, când într-un raport al firmei Forrester Research s-au furnizat date care vor schimba pentru totdeauna mentalitățile departamentelor de publicitate. Cercetătorii i-au intrebat pe utilizatorii de computere la ce activități au renunțat pentru a petrece mai mult timp la calculator. În timp ce 24% au recunoscut că au renunțat la o parte din timpul dedicat mâncatului și somnului, peste trei sferturi din cei chestionați au spus că își petrec mult mai puțin timp la televizor în favoarea computerului. La scurt timp după publicarea acestui raport, a fost realizat un alt studiu de către Georgia Institute of Technology’s Graphic, Visualization and Usability Center (GVU). Acest studiu a fost realizat pe Internet și îi chestiona pe utilizatori în legătură cu obiceiurile lor de telespectatori și cu impactul pe care Internetul l-ar putea avea asupra lor. În urma acestui raport s-a constatat o schimbare importanta în obiceiurile legate de media, 37% dintre cei chestionați afirmând că utilizeaza Web-ul zilnic în defavoarea televizorului. La începutul anului 1997 MSNBC a remarcat faptul ca mai puțin de un milion de familii din SUA se uitau în primul rând la televizor în comparație cu aceeași perioada din 1996, sursa folosită fiind raportul Nielsen din februarie 1997. Simultan, Nielsen și CommerceNet au realizat un studiu referitor la Internet, în urma căruia au aflat că audiența on-line a nord-americanilor s-a dublat în ultimele 18 luni. Din această cauză putem spune că este evident următorul lucru: concluziile celor două studii sunt departe de o coincidență. Aceasta migrare a audientei televiziunii către Internet este impresionantă. Nu numai că are loc o schimbare fundamentală în obiceiurile media, dar audiența Internetului este reprezentată de populatia țintă cea mai dorită de persoanele care se ocupă de marketing, fiind greu de atins: bine educată, cu venituri mari, deschisă către nou. Există desigur și o controversă în ceea ce privește puterea de convingere și comunicare a Internetului.

El reprezintă cel mai puternic mediu de răspândire a informației pe care l-a cunoscut omenirea. Puterea lui de a lua unele lucruri care inspiră sau care captează atenția oamenilor, și a le transforma în imagini recunoscute la nivel mondial, depășește chiar și puterea televiziunii. De fapt, creșterea explozivă a industriei publicității pe Internet amintește de începuturile publicității prin intermediul televiziunii. În anul 2001, Oficiul pentru Publicitate pe Internet (The Internet Advertising Bureau), o instituție care monitorizează veniturile afacerilor pe Internet, a raportat o creștere bruscă de 161% a cheltuielilor pe publicitate pe Internet, depășind cele mai optimiste previziuni din acea perioadă. S-a estimat că, numai în Statele Unite, în 2004 oamenii au cheltuit 16 miliarde de dolari, prin intermediul Internetului, pentru îngrijire medicală. În 1999, 450 milioane de dolari au fost cheltuiți pentru cumpărarea de medicamente prin intermediul Internetului. În același timp, 32 milioane de adulți pe an, folosesc servicii on-line pentru jocuri pe computer. Comerțul pe Internet crește, de asemena, foarte repede. Încep să se prezinte produse și servicii pe Internet, iar oamenii devin din ce în ce mai interesați de acest mediu virtual accesibil .

Cheltuielile pentru publicitate pe Internet, pentru primul trimestru al anului 2004, au atins un nou record: 2,3 milioane dolari. Această sumă indică o creștere cu 38,9% față de 2003. Această piață este disponibilă oricui și este cea mai mare, dar și cea mai rapidă. Trebuie totuși, să avem grijă dacă vrem să ne aventurăm în acest domeniu. Site-ul nu trebuie doar să aibă un conținut „bun”, ci trebuie să atragă oamenii. In medie, o persoană vizitează regulat doar șapte site-uri. Pentru a putea avea o afacere prosperă pe Internet, trebuie să întelegem noțiunile fundamentale.Este imposibil să măsurăm cyber-spațiul și mulți experți se impotrivesc ideei de a-l măsura, dar toată lumea este de acord cu faptul că creșterea Internetului este extraordinară. Site-urile Web apar din ce în ce mai repede. Rata de creștere a numărului site-urilor Web comerciale este estimată la 4,400 site-uri zilnic. Hyper-spațiul este, deci, un loc foarte mare și există un număr aproape nelimitat de concurenți care urmăresc să „fure” clienți.

Totuși trebuie avut grijă la modul în care se realizează publicitatea pe Internet. Sunt anumite forme ale publicității care dăunează uneori și trebuie evitate cu orice preț. Un exemplu în acest fel ar fi reclama pe forumuri. În iunie 1994, o firmă de avocatură din Pheonix a pus un anunț pe aproximativ 5.000 de forumuri de discuții, făcîndu-și reclamă la serviciile lor pentru imigranții din Statele Unite. Răspunsul a fost unul neașteptat: 20.000 de cereri pentru serviciile la care se făcuse reclamă – o rată de răspuns extraordinară pentru o reclamă ce nu avea o țintă precisă în rândul oamenilor. Totuși, ei au supărat foarte mulți utilizatori ai forumurilor de discuții, primind de la aceștia 30.000 de e-mail-uri, prin care ei își exprimau supărarea. Acest număr impresionant de e-mail-uri a blocat contul de poștă electronică al firmei de avocatură și a făcut ca firma să aibă o imagine publică negativă. Mesajul a fost clar: publicitatea prin intermediul forumurilor de discuții nu este o idee bună.

Acest lucru este valabil și azi, instrucțiunile pentru noii utilizatori ai forumurilor fiind precise în această privință, chiar dacă Internetul s-a schimbat enorm și este un mediu predominant comercial.

Deoarece Internetul a fost dezvoltat și folosit de academicieni, cercetători și studenți, era încă văzut ca un mediu pentru schimbul de informații și nu un mediu publicitar. Totuși folosirea comercială a Internetului a explodat, așa cum putem observa clar din statistici. Există mii de distribuitori de servicii de internet care oferă servicii maselor; și aceste mase cresc. Răspândirea rapidă a Internetului a dus la schimbarea vizuală a acestuia ,aceasta fiind și cea mai importantă schimbare, la apariția termenului de multimedia și la dezvoltarea unui mediu interactiv și antrenant pentru utilizatori.

Organizațiile comerciale au început să-și manifeste prezența pe Web prin așa-zisele „home pages” (pagini de bază). Aceste pagini pot fi folosite pentru a oferi informațiile de bază despre organizație; sau pot fi magazine electronice, permițându-le clienților să cumpere produse on-line; sau pot fi elemente atractive, informative și utile, atrăgând și distrând vizitatorii. Există acum sute de mii de site-uri Web pe Internet, multe fiind deținute și folosite de companii. Este interesant să ne gândim la felul în care publicitatea s-a schimbat din inacceptabil în contextul forumurilor de discuții, către acceptabil în contextul publicării pe paginile de Web: unele reclame sunt binevenite numai în anumite contexte și sunt inacceptabile în altele. Această acceptabilitate a publicității pe Web a fost unul dintre cele mai fascinante și importante contexte al dezvoltării rapide a noului mediu. Bineînțeles, există cosiderentul că utilizatorii privesc publicitatea ca ceva normal. Toate acestea sunt foarte importante, dar mai sunt și altele: deși, conținutul fix și simplu al unei pagini Web poate fi produs ieftin de către entuziaști, costă destul de mult ca niște profesioniști să construiască și să întrețină o pagină Web cu un conținut interesant, relevant, iar conținutul este cel mai important lucru al unei pagini. Avantajul World Wide Web-ul este că prezintă noi facilități interesante ,cum este interactivitatea. Acest mediu are, totuși, multe elemente interesante care pot fi folosite pentru a construi o campanie de promovare de succes. Suntem înconjurați de o cantitate imensă de publicitate – atât de multă încât, în multe cazuri devine orice, numai vizibilă nu. Publicitatea vine în multe forme: de la mesaj simplu ce proclamează avantajele sau aspectele unice ale unui produs dat, până la povești complexe ce întăresc imaginea de marcă a unui produs ce s-a impus deja pe piață. Pentru a întelege cum Web-ul poate fi folosit eficient pentru a face publicitate, trebuie să întelegm ce este publicitatea.The Chambers Twentieth Century Dictionary definește publicitatea asfel: a atrage atenția; a da publicului informații despre meritele pretinse. Publicitatea spune publicului ceva despre un produs. Cel mai important aspect al publicității este, de multe ori, uitat. Publicitatea există pentru un simplu scop: pentru a crește numărul vânzărilor produsului căruia i se face reclamă, printr-un program de marketing bine pus la punct.

Capitolul II. Limbaje și tehnologii

2.1 Limbajul HTML

2.1.1 Istoric HTML

Limbajul HTML a fost dezvoltat inițial de Tim Berners-Lee la CERN (Conseil Européen pour la Recherche Nucléaire ,adică Laboratorul European pentru Fizica Particulelor Elementare) în 1989. Limbajul a fost văzut ca o posibilitate pentru fizicienii care utilizează computere diferite să schimbe între ei informație utilizând Internetul.

HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui să-l suporte toate browserele curente, inclusiv cele care lucrează în mod text. HTML 2.0 reflectă concepția originală a HTML ca un limbaj de marcare independent de obiectele existente pentru așezarea lor în pagină, în loc de a specfica exact cum ar trebui să arate acestea. Dacă se dorește siguranța că toți vizitatorii vor vedea paginile așa cum trebuie, atunci trebuie folosite tagurile HTML 2.0.

Specificația HTML 3.0, enunțată în 1995, a incercat să dezvolte HTML 2.0 prin adăugarea unor facilități precum tabelele și un mai mare control asupra textului din jurul imaginilor. Deși unele din noutățile HTML 3.0 erau deja folosite de autorii de browsere, fiind dezvoltate în avans de către aceștia, existau și anumite lucruri care erau noi. În unele cazuri, taguri asemănătoare implementate de autorii de browsere au devenit mai răspândite decât tagurile oficiale . Specificația HTML 3.0 este însă expirată acuma, deci nu mai poate fi folosit ca un standart oficial.

În mai 1996, W3C a scos pe piață specificația HTML 3.2 , care era proiectată să reflecte și să standardizeze practicile acceptate la scara largă. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape si Microsoft și adăuga în plus extensii HTML răspândite.

În bilanțul asupra HTML, W3C recomandă ca providerii de informații să utilizeze specificația HTML 3.2. Versiunile curente ale majorității browserelor ar trebui să suporte toate, sau aproape toate tag-urile care se găsesc în standartul HTML 3.2.

Totuși cu trecerea timpul HTML 4.0 devine larg utilizat și se trece și la realizarea unor pagini web cu specificațiile HTML 4.01. Documentele HTML sunt documente în format ASCII și prin urmare pot fi create cu orice editor de texte. Au fost însă dezvoltate editoare specializate care permit editarea într-un fel de WYSIWYG (What You See Is What You Get, în română : cea ce vezi ,aia primești) deși nu se poate vorbi de WYSIWYG atâta vreme cât navigatoarele afișează același document oarecum diferit, în functie de platforma pe care rulează. Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate cu alte editoare. Un exemplu în acest sens ar fi suita de programe Macromedia Fireworks si Dreamweaver care permite realizarea site-ului grafic în programul Fireworks(program care este specializat pe editări grafice în special) și exportarea acestuia în format HTML pentru a fi editat cu programul Dreamweaver (program folosit pentru construirea de proiecte în limbaj HTML).

2.1.2 Caracteristici HTML

Aproape toate paginile de Internet au la baza lor un limbaj universal ,care poate fi interpretat de orice browser de Internet. Astfel unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup Language ), limbaj care descrie felul în care sunt distribuite și văzute paginile web pe Internet. Acest limbaj dispune de foarte multe avantaje, cum ar fi independența sa față de platforma pe care este rulat, structurarea formatării și legăturile hipertext. Primele specificații de baza ale Web-ului au fost HTML (Hypertext Markup Language), HTTP (Hypertext Transfer Protocol) si URL (Uniform Resource Locator). Erau prin urmare necesare câteva trăsături : independența de platformă, posibilități hypertext și structurarea documentelor. Independenta de platforma este definită ca posibilitatea unui document de a putea fi afișat în mod asemănător pe computere diferite ( cu font, grafică și culori diferite ). Hipertextul este definit de orice cuvânt, frază, imagine sau alt element al documentului văzut de un utilizator ( client ) ,care poate face referință la un alt document, ceea ce ușurează mult navigarea între multiple documente sau chiar în interiorul aceluiași document. Structurarea riguroasă a documentelor permite convertirea acestora dintr-un format în altul precum și interogarea unor baze de date formate din aceste documente.

Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force (IETF). W3C a enuntat cateva versiuni ale HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01.

Prin convenție, toate informațiile HTML încep cu o paranteză unghiulară deschisă (<) și se termină cu o paranteză unghiulară închisă (>).Acest control – sau marcaj HTML, cum mai este numit – comunică unui interpretor HTML (program de navigare) că documentul este scris și format în limbajul HTML standard.

Deși multe controale HTML sunt unități de sine stătătoare, unele dintre ele sunt perechi, având controale de început și sfârșit. Controlul de început se numește control de deschidere, iar cel de sfârșit se numește de închidere.

Cel mai important dintre controalele de bază este <html>, care specifică faptul că informația care urmează este scrisă în limbajul HTML. Marcajul <html> este de tip pereche, deci trebuie să fie adăugat un marcaj de închidere la sfârșitul documentului, care este la fel ca marcajul de deschidere dar are adăugată o bară înclinată: </html>.

Fișierele HTML sunt de obicei împărțite, din motive de organizare, în două secțiuni: antetul (sau headerul) care conține informația introductivă de formatare a paginii și corpul. Pentru definirea acestor secțiuni se folosesc marcajele pereche <head></head> și <body></body> .

2.2 Javascriptul

Javascript-ul este un limbaj de programare , de tip script , folosit în principal pentru definirea comportamentului unor elemente dintr-o pagină Web. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha. Cu trecerea timpului limbajului i-a fos atribuit numele de LiveScript ,ca mai apoi sa fie denumit în final JavaScript. Schimbarea numelui din LiveScript în JavaScript s-a făcut cam în același timp în care Netscape încorpora suport pentru tehnologia Java în browserul web Netscape Navigator. Acest limbaj nu este același lucru cu mult mai complexul limbaj de programare Java (are mai multe în comun cu limbajul Self) ,dar utilizatorii care care au studiat Java pot lucra fără prea multe probleme cu acest limbaj. Javascript poate specifica , în mod obișnuit în doar cateva rânduri, răspunsurile la acțiuni sau evenimente cum ar fi deschiderea unei pagini, deplasarea mouse-ului într-un anumit punct sau stergerea unui anumit cîmp dintr-un formular. Programatorii care realizează un site web pot introduce în paginile HTML script-uri pentru diverse activități ,un exemplu în acest sens fiind verificarea selectării unor butoane sau checkbox-uri, sau crearea de meniuri și efecte animate.

Scriptul este incadrat de marcajele <script>…</script> si totul este inglobat intr-un comentariu astfel incat programele de navigare care nu interpreteaza Javascript nu sunt derutate de scriptul in sine.

Multe evenimente pot fi gestionate cu JavaScript, iar cele mai uzuale vor fi descrise în următorul tabel:

Codul JavaScript poate fi declarat în interiorul unui fișier HTML sau poate fi apelat din interiorul unui fișier extern. Fișierul extern se salvează cu externsia JS, iar prin această metodă se reduce încărcarea paginii HTML în cazul în care JavaScriptul este lung și complicat.

2.3 Stilul CSS

CSS este acronimul pentru Cascading Style Sheets. CSS este un limbaj (style language) care definește "layout-ul" pentru documentele HTML. CSS acoperă culori, font-uri, margini (borders), linii, înălțime, lățime, imagini de fundal, poziții avansate și multe alte opțiuni. HTML este folosit pentru a structura conținutul, în timp ce CSS este folosit pentru a formata conținutul.

În perioada de început a web-ului, HTML era folosit numai pentru structura textului. Textul se putea marca cu taguri precum <hl> si <p> pentru a marca titlul sau un paragraf. Însă odată cu creșterea popularității web-ului designerii au început să caute diferite posibilități de a adăuga layout documentelor online. Pentru a răspunde acestor cerințe, producătorii de browsere (în acea vreme Microsoft și Netscape) au inventat noi taguri HTML precum <font> care diferă față de tagurile originale HTML prin faptul că definesc layout-ul și nu structura. Acest lucru a dus și la o situație unde tagurile originale de structura ca <table> să fie folosite necorespunzator pe pagini de layout (to layout pages). Multe taguri noi de layout precum <blink> erau recunoscute numai de unele browsere. O formulă comună ce aparea pe siteuri era "Aveti nevoie de browserul X pentru a vedea aceasta pagină". CSS a fost inventat pentru a remedia această situație, furnizându-le designerilor facilități sofisticate pentru editarea layoutului, suportate de toate browserele.

Printre aceste facilități se numără:

-controlarea layoutului documentelor dintr-o singură pagină de stiluri

-control mai exact al layout-ului

-aplicare de layout-uri diferite pentru tipuri media diferite (ecran, printare, etc)

– dimensiuni reduse ale paginilor

– economie de bandă internet

– flexibilitate

Aceste stiluri pot fi implementate în 2 feluri , fiecare dintre acestea având avantajul său: prin metoda stilurilor interne și prim metoda stilurilor externe.Mai întâi vom aborda metoda stilurilor interne. Această metoda înseamnă declararea codului CSS în interiorul fiecărei pagini HTML unde se va dori folosirea stilului respectiv, între tagurile <head> </head>. Această metodă este folosită când site-ul nu are atât de multe pagini și se dorește modificarea rapidă a stilului.

În cazul în care este mai complex și se dorește implementarea aceluiași stil pe mai multe pagini atunci se va folosii metoda stilurilor externe. Un fișier CSS extern poate fi realizat cu orice editor simplu de text (Notepad, Wordpad, etc) sau cu editoare avansate ,de exemplu Dreamweaver. Fișierul CSS nu conține sub nici o formă cod HTML, ci doar cod CSS. Fișierul trebuie salvat cu extensia .css. Inserarea acestuia în paginile HTML se face foarte ușor, prin plasarea unui link în secțiunea <head> </head> a fiecărei pagini pe care dorim să folosim stilul respectiv.

2.4 Arhitectura unui site

2.4.1 Elemente generale

Arhitectura unui site bine pus la punct este determinată de componentele care îl alcătuiesc, modul în care aceste componente relaționează și modul în care acestea sunt structurate. Această arhitectură a site-ului trebuie totuși să răspundă unor cerințe ,indiferent de modul în care este alcătuită. Cerințele la care trebuie să raspundă o arhitectură bine realizată sunt următoarele:

Disponibilitate

Performanță

Scalabilitate

Disponibilitatea se referă la la capabilitatea site-ului web de a fi accesibil și disponibil vizitatorilor. Această caracteristică este determinată de felul în care site-ul este realizat , iar lipsa disponibilității duce la pierderi de venituri sau la diminuarea imaginii firmei. În mod normal un site web de prezentare trebuie să fie disponibil 24 de ore din 24 și să fie accesibil 365 de zile pe an. Această disponibilitate este însă influențată în viața reală de următorii factori:

lucrări de mentenanță sau de îmbunătățire a site-ului

căderea Server-ului care găzduiește site-ul (din motive tehnice sau pentru lucrări de mentenanță)

contactarea unui virus informatic sau infestarea cu un program malware a site-ului

anulare domeniului care găzduiește pagina web

Disponibilitatea se măsoare în mod normal realizând o operație matematică în care se calculează raportul dintre timpul cât serviciul este disponibil și perioada în care se crede că serviciul ar fi disponibil 100%. În urma calculului se observă că în majoritatea cazurilor rezultatul furnizat este de 99,9%, un procent foarte bun pentru un site web. Un astfel de procent ar reprezenta indisponibilitatea unui site pentru un timp de aproximativ 9 ore pe perioada unui an.

În funcție de perioada când această indisponibilitate se manifestă ( pe perioada zilei, în timpul traficului maxim, noaptea) această nefuncționare poate fi clasată în indisponibilitate tolerată și indisponibilitate neacceptată. Ideal este ca această nefuncționare a site-ului să se petreacă pe timpu nopții din cauza unor lucrări de mentenanță sau îmbunătățire și nu pe timpu zilei când fluxul de clienți este ridicat.

Succesul arhitecturii depinde în aceași măsură și de performanță. Performanța se referă la faptul că site-ul este capabil să răspundă cerințelor într-un timp foarte mic. Atunci când se pune accent pe această capabilitate a site-ului trebuie luat în considerare că ea este determinată în mare măsură și de către ISP-ul (furnizorul de servicii Internet) clienților care accesează pagina web. O banda limitată a clientului înseamnă că acesta nu poate beneficia de viteza maximă oferită de server-ul gazdă al site-ului. Cum modificarea furnizorului de internet al clientului nu este o soluție ,se încearcă optimizarea proiectului în totalitate.

Astfel se pun accent pe realizarea unor elemente care pot să fie accesate rapid din cauza dimensiunii reduse a lor, dar nu se face compromis în favoarea vitezei, ci se caută constant metode de îmbunătățire a produsului din punct de vedere al accesibilității și al vitezei.

O altă cerință importantă, scalabilitatea, se referă la modul în care sistemul asigură paginile necesare în cazul în care sunt suprasolicitări (spre exemplu se realizează o promoție la un produs, sau din coincidență foarte mulți utilizatori accesează pagina dintr-o dată). Astfel se apelează la scaling-ul site-ului (creșterea acestuia). Acesta poate să sufere scaling up ,care se manifestă prin înlocuirea serverului curent cu un alt server mai bun, sau poate suferii scaling out, în acest caz adăugându-se servere lângă cel existent care să preia traficul. Scalabilitatea este influențată foarte mult de anumite componente care se găsesc la arhitectura unui site web. Serverul WEB este o combinație într-o platformă stabilă hardware și o aplicație software. Aplicația software este de obicei un program server care controlează fluxul de date intrare-ieșire care vin de la calculatoarele conectate la Internet. Platforma hardware, de obicei alcătuita din componente specializate, orientate pe lucrul în rețea ,furnizează suportul pentru preluarea comenzilor de cerere a clienților și stabilește legături cu aceștia furnizându-le datele necesare. Se pot include și servere de date care păstrează doar datele necesare pentru anumite produse sau servicii, iar prin formularea unei cereri către acesta ,datele vor fi furnizate clienților în formatul dorit (fie că este vorba de text simplu, imagini, etc. ).

Arhitectura acestor servere poate fi completată și prin adăugarea unor aplicații de securizare a datelor (firewall-uri, programe de control acces, etc). Securitatea trebuie îmbunătățită în mod constant ,datorită lansărilor săptămânale a virusurilor informatice și pentru respecta constant dreptul la confidențialitate. Pe lângă securizarea datelor trebuie luată în considerare și securizarea clădirii și suportului hardware pe care este găzduit serverul împotriva unor accesări neautorizate sau împotriva unor calamități (de exemplu când există o pană de curent ,serverul trebuie să fie alimentat de la UPS-uri sau baterii suplimentare pentru a asigura disponibilitatea). Securitatea informațiilor este un subiect de actualitate actualmente reglementat prin legi care sunt respectate în toată Uniunea Europeană. În principiu trebuie respectate următoarele aspecte pentru a se putea spune că este asigurată siguranța datelor:

– Confidențialitatea presupune păstrarea secretă a datelor și evitarea accesului neautorizat asupra acestora.

Trebuie stabilit un mod de acces la datele sensibile și asigurarea capabilității de neintercepție a acestor date.

-Accesibilitatea limitată presupune accesul la date pe grupuri de utilizatori (administratori, utilizatori generali). Acest lucru împiedică utilizatorii generali să aibă drepturi depline și să poată să distrugă sau să altereze datele

-Asigurarea autenticității presupune asigurarea datelor originale și transmiterea lor în condiții de siguranță. Datele trebuie să fie disponibile oricând și trebuie asigurată o metodă de control a autenticității acestora.

2.4.2 Vulnerabilități

Vulnerabilitățile site-urilor web pot fi clasate în mai multe categorii. Totuși toate aceste vulnerabilități au ceva în comun: incapacitarea sau modificarea unui element din accident sau prin voința cuiva. În principal această modificare sau incapacitare are loc asupra operațiunii de manipulare a datelor (în timpul culegerii, trimiterii ,stocării sau prelucrării lor).

Aceste manipulări asupra datelor pot fi clasificate în funcție de efectul lor:

Întrerup transferul de date ,preluarea lor, salvarea datelor

Interceptează datele și le folosesc neautorizat

Modifică conținutul datelor și furnizează valori false

Furnizează date false și intrerup fluxul normal de date

Desigur aceste pericole sunt inevitabile și se pot petrece oricând. Cel mai important este luarea unor măsuri potrivite pentru prevenirea sau gestionării unor astfel de situații. Vom prezenta câteva exemple comune a unor situații care pot apărea oricând. Spre exemplu în cazul unei defecțiuni asupra mediului de stocare al suportului hardware se poate lua măsura înlocuirii acestuia și plasării backup-ului de date pe suportul nou. Dacă serverul este infiltrat de către un utilizator neautorizat atunci trebuie să existe un sistem de avertisment pentru acest lucru, în acest fel administratorul site-ului luând măsurile necesare de îndepărtare a utilizatorului neautorizat și restaurea securității serverului.

Se poate realiza o clasificare a acestor vulnerabilități și clasificarea lor în funcție de factorul determinant:

probleme tehnice sau accidente (uzura componentelor, incendii, erori umane de operare ,furturi, sabotaje)

probleme induse (neutilizare corespunzătoare, atacuri , distrugeri intenționate)

Desigur atacurile intenționate asupra datelor pot fi și ele clasificate în două feluri: atacuri active și atacuri pasive. Atacurile active sunt atacurile care se petrec în timp real și se angajeză în furtul, modificarea sau stergerea datelor. Aceste atacuri sunt realizate în principal prin viruși informatici, programe malware care modifică anumiți parametrii, worm-uri informatice (fișiere care se infiltrează în sistem nedectate) ,cai troieni (software care pare cunoscut dar îndeplinește funcții de tip culegere parole si username și deschidere unei căi de acces în sistemul infectat)

Atacurile pasive supraveghează si fură date, fără a intervenii în fluxul acestora sau modificarea acestora. Aceste atacuri încalcă în principiu termenii de confidențialitate și copiază datele care circulă în rețea. Desigur aceste date pot fi utilizate ulterior pentru a se realiza furturi sau acțiuni nocive (se pot utiliza date personale pentru realizarea unor cumpărături online, licitații ,etc. )

Capitolul III. Studiu de caz

3.1 Programe folosite

3.1.1 Programul Serif WebPlus X4

Firma Serif a fost fondată în anul 1987 cu scopul de a realiza alternative mai bune și mai accesibile din punct de vedere economic pentru soft-urile de design, publishing și media. Imediat după realizarea primelor pachete soft firma este lăudată în mod repetat, datorită programelor care sunt ușor de folosit și permit oricărui utilizator să obțină rezultate remarcabile.

Odată cu trecerea timpului , firma Serif se consacrează și își crează un număr impresionant de clienți: peste 6 milioane. Odata cu acești clienți vin și premiile care atestă aprecierea pachetelor soft. Firma care este situată în Nottingham Marea Britanie, dar are și un sediu de vânzări în Statele Unite ale Americii în New Hampshire. Cu cei 200 de angajați din sediul de dezvoltare din Nottingham, firma Serif reușește să dezvolte programe pentru orice nivel de pregătire, astfel chiar și utilizatorii începători putând obține rezultate remarcabile.

Soft-ul WebPlus X4 este doar unul dintre produsele firmei Serif. Acest soft este dezvoltat special pentru crearea sau îmbunătățirea unor pagini web profesionale, și poate fi utilizat chiar și de către persoane care nu au nici o cunoștință de programare HTML. Codul HTML este construit automat de către progam, iar în cazul în care se dorește integrarea a unor porțiuni suplimentare de cod se poate realiza ușor acest lucru (opțiune valabilă pentru utilizatorii mai avansați). În acest fel se reduce timpul de realizare a unui proiect mai mare, iar utilizatorii avansați pot să modifice cu ușurință codul sursă construit. Posibilitățile de construire a site-urilor sunt infinite, putându-se realiza site-uri de comerț electronic, bloguri, site-uri de prezentare, site-uri personale, etc. . De asemenea programul WebPlus X4 a fost creat pentru a putea fi rulat și pe platforme hardware mai slabe, cerințele minime necesare ale calculatorului fiind următoarele:

-Procesor Pentium.

-Unitate CD/DVD și mouse.

-512 MB Memorie RAM.

-749 MB spațiu pe HDD (sau 855 daca este instalat pachetul Resource CD)

– monitor cu rezoluția minimă de 1024 x 600

Desigur dacă utilizatorul dispune de o imprimantă , scanner sau camera digitală compatibilă TWAIN atunci posibilitățile acestuia sunt mărite, datorită faptului că programul WebPlus poate integra în interiorul site-ului construit imaginile captate cu aceste aparate.

Programul este ușor de folosit și include meniuri intuitive menite să asiste programatorul web în realizarea proiectului. Printre aceste meniuri se numără meniul Text, Table ,Format. Cu ajutorul meniului Text se pot modifica parametrii importanți din cadrul unui paragraf cu text (font-ul ,culoarea, mărimea fontului), iar dacă se dorește introducere unui tabel se apelează meniul Table. Meniul Format este adresat manipulării pozelor și imaginilor din proiect putându-se modifica imaginea în sine sau adăugarea unor efecte impresionante către acestea.

Pagina web poate fi construită direct pe un format A4 și cu ajutorul meniurilor suplimentare îi pot fi adăugate butoane, elemente de securitate și plugin-uri interactive. Toate acestea se pot adaugă într-un șablon, care este definit de program cu numele de Master Page. Conținutul Mater Page, fie că este vorba de imagini, text sau butoane, poate fi replicat pe orice altă pagină prin asigurarea aplicării Master Page-ul pe pagină. Desigur acest șablon nu este obligatoriu pe fiecare pagină și poate fi scos prin accesarea meniul Properties al paginii și deselectarea lui din tab-ul background. De asemenea în tab-ul background se pot definii și setările de background ale imaginii. Astfel se pot folosii setările definit în Color Scheme Designer ( program din interiorul WebPlux X4 prin care se pot declara culorile generale ale paginii și ale stilulului CSS) sau se pot definii imagini pentru background-ul paginii. Orice setare a paginii poate fi definită în tab-ul properties, de la numele paginii până la marime și alte setări importante pentru asigurarea accesibilității paginii.

Pe lângă acestea există și wizard-uri intuitive menite să reducă timpul de construcție al unui site. În cazul în care se dorește realizarea unui formular se poate opta pentru opțiunea realizării acestuia de la zero sau pentru folosirea wizard-ului. Wizard-ul oferă și formulare șablon gata realizate, dar se pot realiza și formulare personalizate. Formularul poate include controluri obișnuite ca butoane Radio, Checkbox-uri, ComboBox, butoane de submit și reset, etc. .Toate opțiunile disponibile sunt prezentate utilizatorului și acesta poate face modificări în timp real și să și le verifice prin opțiunea Preview Page,

Prin această opțiune se poate previzualiza pagina curentă sau tot site-ul construit, iar prin opțiune Estimate Download Time se poate vedea timpu necesar downloadării paginii de pe net, în acest fel putându-se realiza pagini care sunt accesibilie și utilizatorului cu banda mică de Internet (în special cei care navighează pe Internet folosing Internetul mobil de la firmele de telefonii mobile).

Pe lângă acestea ,programul WebPlus X4 conține nenumarate facilități care sunt descrise în documentația sa, facilități menite să reducă drastic timpul de construcție al unui site, dar care verifică și corectitudinea construcției, realizându-se un raport performanță calitate foarte bun.

Concluzia este că soft-ul WebPlus X4 a fost realizat pentru construirea de site-uri complexe în cel mai scurt timp posibil, aceste 2 cerințe (complexitatea si rapiditatea construcției) fiind din ce în ce mai întâlnite în rețeta site-urilor de succes.

3.1.2 Programul Photodex Proshow Gold și JW Player

Filmul de introducere a fost realizat într-un program capabil să exporte format Flash. Programul folosit a fost ProShow Gold produs de către firma Photodex.

Firma Photodex a fost fondată de asemenea în anul 1987 și își are sediul în Austin Texas, America și se ocupă cu realizarea soft-urilor de creare a unor prezentări media pentru utilizatorii casnici. Deși soft-urile create au ca țintă utilizatorii începători, anumite produse Photodex sunt folosite de către F.B.I și de către Armata S.U.A datorită calității acestora . Aceste soft-uri denumite Digital Imaging Software sunt construite cu o interfață prietenoasă, ușor de folosit și pot intergra orice tip de format multimedia pentru creare unei prezentări. Deviza Photodex este: ,,Satisfacția clientului trebuie sa vină din utilizarea unor soft-uri de calitate.” Astfel este implementată o strategie de vânzare a programului prin metoda: Încearcă-l înainte să-l cumperi . Utilizatorii au ocazia să folosească programele într-o versiune demo înainte de al achiziționa ,pentru a se putea decide asupra calității acestuia. ProShow este în topul programelor multimedia și a primit numeroase aprecieri din partea unor publicații internaționale. Astfel ProShow este folosit cu succes în școli, de către designeri web la crearea unor elemente pentru paginile web, în imobiliare pentru prezentări media, de către managerii unor firme pentru construirea unui slide-show profesionist, etc.

Programul dispune de o interfață prietenoasă menită să fie cât mai accesibilă utilizatorilor începători sau să reducă timpul de construcție al proiectului pentru utilizatorii avansați. Astfel prin folosirea tehnologiei Drag and Drop (trage și dăi drumul) s-a reușit realizarea unui program de succes, ușor de folosit.

Programul este structurat pe 3 ferestre ,fiecare dintre aceasta avându-și utilitatea proprie. Prima fereastră este cea din stânga și include o fereastră gen Windows Explorer cu care utilizatorul își poate căuta folderul de imagini sau muzică. Odată ajuns în acest folder, utilizatorul își poate vizualiza pozele prin intermediul unor thumbnail-uri (imagini în miniatura a originalelor). Acesta poate selecta o imagine și prin metoda Drag and Drop poate să adauge imaginea la cea de-a doua fereastră care se găsește sub fereastra de navigare.

Aici, în cea de-a doua fereastră, se realizează proiectul propriu zis, utilizatorul putând să adauge , să steargă să modifice pozele și să realizeze tranziții între ele. Se pot selecta și timpi necesari pentru rularea unor tranziții și a imaginilor, iar prin introducerea unor tranziții se crează un efect de film slideshow-ului creat.

De asemenea se pot adăuga si coloane sonore formate din fișiere audio MP3, WAV, etc.

În timpul realizării proiectului se poate accesa cea de-a treia fereastră disponibilă , și anume fereastra de Preview. Acestă fereastră conține un player care rulează proiectul realizat, iar în acest fel utilizatorii pot face modificări în timp real și vizualizarea imediată a acestora. În acest fel se salvează timp și se reduce probabilitatea ca proiectul să trebuiască modificat ulterior.

Se poate introduce și text în cadrul proiectului, acesta fiind de obicei folosit pentru a scrie titluri în cadrul slideshow-ului.

Odată ce proiectul a fost definitivat ,acesta poate fi exportat în mai multe formate, în funcție de nevoile utilizatorului. Astfel prin selectarea butonul Create Output se va deschide un meniu care va îndruma utilizatorii începători în alegerea formatului final. Le sunt oferite formate valabile pentru rularea pe televizor a proiectului sau pentru integrarea acestuia în Internet (pe Youtube, pe site-ul propriu, etc.). Desigur sunt oferite și alte formate pentru telefoane sau PDA-uri, dar se pot realiza și programe cu extensia EXE din proiectul realizat. Aceste programe pot fi rulate pe orice tip de calculator care are un sistem de operare Microsoft Instalat, iar în acest fel se asigură accesibilitatea proiectului realizat. De asemenea utilizatorul își poate crea chiar și propriul Screen Saver dacă dorește doar prin simpla realizarea a proiectului și prin exportarea acestuia cu formatul corespunzător.

Programul ProShow Gold este foarte flexibil și poate fi folosit cu succes la realizarea unor filme de prezentare sau a unor prezentări multimedia. Faptul că poate să includă aproape orice format multimedia în realizarea unui proiect este un avantaj clar care îl departajează de alte programe din clasa lui.

Tehnologia Drag and Drop este vitală pentru asigurarea ușurinței de folosință, iar în programul ProShow Gold această tehnologie este integrată perfect, fără cusur și nu dă bătaie de cap utilizatorilor. Un alt plus al programului este faptul că utilizatorilor le sunt oferite formate predefinite de integrare a imaginilor, astfel aceștia pot să aleagă dintre mai multe stiluri gata făcute, trebuind doar să adauge imaginile proprii în cadrul acestor stiluri.

În cadrul proiectului soft-ul a fost folosit cu succes pentru a crea un film de introducere care a fost exportat în flash iar apoi intergrat în pagina de start a site-ului. Filmul este alcatuit din mai multe imagini cu format jpeg sau png, iar pentru coloana sonoră a fost folosită o melodie cu format mp3. Formatul final și exportat al videoclipului este FLV , iar pentru redarea acestuia pe toate tipurile de browser a fost nevoie de folosirea programului JW Player 4.

Acest program este produs de către firma Longtail Video și este folosit pentru redarea formatului flash în cadrul unei pagini web. JW Player poate fi downloadat gratis de pe site-ul longtailvideo.com și include un document cu metodele de implementare a acestuia în pagina web. Programul folosește un fișier javascript pentru a detecta fișierele video care sunt pe calculator sau pe serverul web și redă cu ajutorul acestuia orice videoclip cu format FLV sau SWF . De asemenea programul poate fi configurat să pornească automat odată cu încărcarea paginii sau poate fi obligat să-și ascundă controlul pentru play, pause si stop al filmului.

Cel mai important lucru este însă compatibilitatea cu orice browser de internet (Internet Explorer, Mozilla Firefox , Opera, Google Chrome) . Singura problemă întâmpinată a fost la Internet Explorer datorită faptului ca trebuie activat controlul ActiveX pentru a se putea accesa player-ul JW.

Astfel prin implementarea cu succes a videoclipului de start cu ajutorul JW Player-ului s-a reusit crearea primei pagini , pagina aceasta având rol de introducere .

3.1.3 Programul Macromedia Fireworks

Firma Macromedia a fost fondată în anul 1992 cu sediul în San Francisco ,California și a fost realizată din fuziunea companiilor Authorware Inc. (creatorii lui Authorware) și MacroMind-Paracomp (creatorii lui Macromind Director).

Soft-ul Director este primul produs de succes al Macromediei și a fost comercializat cu succes până la mijlocul anilor 1990. Soft-ul era un intrument de creat aplicații multimedia interactive și a fost folosit în general la programele și aplicațiile ce rulau pe CD-uri și aplicațiile informative. Cum piața aplicațiilor pe CD-uri a intrat în declin și Internetul a crescut în popularitate, Macromedia a creat Shockwave, un motor de vizualizare a aplicațiilor create cu Director pentru browserele de Internet.

Ulterior firma începe să dezvolte aplicații pentru dezvoltare web și grafică, cele mai cunoscute produse ale acestei firme fiind Macromedia Flash și Marcomedia Dreamweaver. Macromedia Flash era orientat pe crearea site-urilor web în noua tehnologie flash, iar Dreamweaver era orientat pe construirea site-urilor în limbajul HTML. Între timp sunt lansate și alte produse Macromedia pentru grafică cum este programul Fireworks. Suita de programe Macromedia Fireworks si Dreamweaver asigură pentru foarte mult timp proiecte de succes pentru programatorii profesioniști, dar în 3 Decembrie 2005 firma Macromedia este achizitionată de rivala ei , Adobe. Din anul 2010 Adobe are si drepturi de control a liniei de producție Macromedia și se asteaptă să se vadă încotro vor merge produsele dezvoltate de Macromedia.

Programul Fireworks este însă printre cele mai bune programe de editări grafice. Acesta lucrează cu bitmapuri (hărți de biți) și grafice vectoriale și este folosit în principal pentru crearea interfețelor grafice în cadrul unor proiecte web. Cu ajutorul programului Fireworks se pot crea și optimiza interfețe complicate, iar datorită faptului că aceste interfețe pot fi exportate sub format HTML a făcut ca Fireworks să fie inclus în suita de programe Macromedia Studio Professional.

Programul are de asemenea capabilitatea de a crea de la zero butoane sau zone interactive pentru un site web, dar cel mai important este faptul că poate modifica imagini externe ,lucrând pe straturi. Aceste straturi (layers) sunt foarte importante pentru că ușurează munca graficianului, acesta putând trece din modificare în modificare fără să fie nevoit să-și anuleze anumite etape din muncă, așa cum se întâmplă în cazul programelor vechi.

Pe lângă aceste capabilități există și posibilitatea exportului în mai multe formate cunoscute, în funcție de cerințele graficianului. Datorită unei interfețe intuitive și a unei secțiuni de ajutor exemplificatoare, programul Fireworks este de cele mai multe ori utilizat atunci când se dorește îmbunătățirea unor elemente web, sau optimizarea lor pentru a îndeplini raportul optim de calitate/ performanță.

3.2 Construcția proiectului

3.2.1 Realizarea grafică

Programul WebPlus X4 oferă capabilități extinse de creare a paginilor web. Cea mai importantă caracteristică este însă accesibilitatea meniurilor și faptul că ele pot fi organizate cum dorește utilizatorul. Fiecare meniu este menit să ușureze folosința și crearea unui site web, fiind disponibile meniuri pentru organizarea structurii site-ului, meniul pentru particularizarea paginilor sau a stilurilor acestora, meniuri pentru alegerea culorilor. Programul are situat în centru pagina de lucru ,iar în jurul acesteia se situaează meniurile importante.

În partea dreaptă se găsesc meniurile care arată structura paginii și culorile folosite în realizarea acesteia.

Aici se pot adăuga pagini noi, se poate crea șablonul care va fi folosit pentru anumite pagini, se pot alege culorile pentru text.

Astfel se poate definii o pagină master care poate fi baza pentru fiecare nouă pagină adăugată proiectului. De asemenea există mai multe ferestre care pot fi deschise pentru a putea definii stilul CSS al paginii sau structura ei generală. Cu ajutorul Color Scheme Designer se pot definii culorile pentru link-uri si font-urile din cadrul site-ului, culori care pot fi modificate chiar și până la cele mai mici detalii : saturația , luminozitatea, etc.

S-a optat împreună cu directorul firmei Computer Mechanics pentru o combinație de culori verde și gri închis potrivite pentru site-ului firmei. Aceste culori sunt folosite în principal pentru informațiile care nu sunt de bază, iar textul important este scris în alb pentru a putea fi clar și să atragă atenția vizitatorului.

Culorile alese vor pune în evidență formatul paginii, iar sigla firmei care este realizată cu culoarea galbenă va ieși în evidență și va atrage atenția clientului. De asemnea prin acest contrast se asigură că brand-ul firmei Badclover, adică Computer Mechanics, va rămâne intipărit în mințile vizitatorilor, el putând fii recunoscut ușor datorită faptului că este unic.

Desigur culorile se pot schimba foarte ușor prin intermediul Color Scheme Designer, iar modificările pot fi aplicate întregului site sau doar paginilor dorite. Pentru proiect s-a optat pentru utilizarea culorilor pe toate paginile site-ului, în acest fel creându-se o armonie generala a paginilor.

Site-ul este structurat pe 7 pagini, dintre care prima pagină este pagina de start. Pagina este construită pe baza paginii master ,dar nu folosește elementele acestei pagini ci doar are un link către pagina Home. În cadrul acestei pagini se regăsește logo-ul firmei și un scurt film de introducere.

Filmul realizat cu ajutorul programului ProShow Gold are rolul de a atrage clientul spre explorarea site-ului prin afișarea unor întrebări cu răspuns aproape retoric : „ Ai nevoie de ajutor? ’’ , „Calulatorul îți face probleme? ’’ , „ Ai nevoie de un calculator nou? ’’ .

Utilizatorul poate accesa site-ul prin apăsarea butonului click pe suprafața player-ului sau poate aștepta terminarea filmului și va fi redirecționat automat către pagina Home. S-a introdus un timp de 31 de secunde necesar până la redirecționarea către pagina Home, timp necesar pentru rularea filmului de început.

Din imaginea anterior prezentată se observă cum arată site-ul deschis cu browser-ul Mozilla Firefox pe un ecran cu rezoluția 1280 x 1024.

Culorile playerului au fost alese pentru a se armoniza cu background-ul paginii, iar filmului de introducere i-a fost inserată opțiunea de pornire automată odată cu încărcarea site-ului.

În cazul în care există o eroare pe serverul pe care a fost încărcat site-ul, în locul filmului de prezentare va apărea automat un mesaj care va avertiza utilizatorul și admin-ul site-ului că materialul video lipsește.

Aceasta lipsă a filmului poate apărea când providerii de domeniu restrictionează marimea maximă a fișierelor uploadate (filmul proiectului are o marime de 5.565 KB ) sau când server-ul providerului a picat.În acest fel se evită nemulțumirea clienților și se oferă administratorului șansa de a identifica problema apărută multe mai repede.

Chiar dacă filmul nu poate fi încărcat utilizatorul poate accesa pagina Home prin simpla așteptare de 31 de secunde sau poate să acționeze butonul click în vecinătatea textului afișat și va fi redirecționat către pagina Home.

Odată ce utilizatorul alege să viziteze site-ul firmei ajunge în pagina Home. Aceasta este prima pagină care folosește stilul predefinit al paginii Master. Pagina Master a fost structurată să conțină butoane cu link-uri către fiecare pagină pentru o accesibilitate sporită si este menită să ofere comoditate utilizatorului site-ului.

S-a convenit alegerea doar a 4 butoane, ele făcând legătura către paginile cele mai importante ale site-ului.

Butoanele sunt predefinite de către programul WebPlus X4, dar prin acționarea butonului click-dreapta și selectarea meniului Edit Navigation Bar se poate accesa meniul de formatare a acestor butoane. Se poate schimba fontul de afișare al textului , culoarea acestuia, marimea lui si alinierea sa. De asemenea se pot modifica și culorile meniului și mărimea bordurii butoanelor.

Având aceste opțiuni la îndemână, utilizatorul poate modifica și realiza butoane potrivite cu conținutul vizual al site-ului, iar la nevoie (când se face îmbunătățirea siteului spre exemplu) se pot face modificări rapid și eficient, reducând timpul necesar identificării elementelor și modificării lor manuale.

În topul paginii se regăsește o imagine reprezentativă oferită de către WebPlus X4 potrivită cu profilul firmei ,iar textul Computer Mechanics a fost adăugat și stilizat separat.

Textului i-au fost adăugate umbre și efecte de reflexie pentru a conferii un plus de stil paginii.

În cadrul imaginii din top-ul paginii a fost adăugat un link către Home, astfel realizându-se o interactivitate mai mare a paginii Master, care va fi folosită la baza paginilor din proiect. În stânga paginii au fost introduse cele 4 butoane cu link-uri către paginile importante ale site-ului. Utilizatorul poate accesa orice pagină cu ajutorul acestor butoane, astfel având senzația de libertate în cadrul site-ului. În partea de jos a paginii au fost introduse de asemenea link-urile către paginile importante ale site-ului și textul cu drepturile de autor ale deținătorului paginii (în cazul proiectului firma Computer Mechanics). Link-urile au fost reluate din nou în josul paginii pentru a păstra acea senzație de libertate în navigare, utilizatorii care au monitoare cu rezoluții mici nemaifiind nevoiți să revină sus pentru a accesa butoanele speciale din partea stângă.

Pagina Home conține toate atributele paginii Master și are adăugate pasaje de text și imagini reprezentative. Iarăși textul afișat a fost ales cu grijă pentru a avea succes în cadrul vizitatorilor acestui site. Se menționează serviciile oferite de către firma Computer Mechanics și se afișează de asemenea programul firmei și un număr de contact. Textele care descriu serviciile oferite au hyperlink-uri către ancore și pagini din cadrul site-ului ,astfel contribuind la simplitatea site-ului și la interfața prietenoasă. Fiecare text este încadrat grafic într-un chenar căruia i-a fost adăugată grafic o umbră.

De asemenea și pozele din cadrul site-ului au o umbră cu o anumită înclinație. Aceste umbre au fost adăugate special pentru a insufla un stil 3D al paginii și au fost introduse cu ajutorul programului WebPlus X4, prin alegerea pozei sau a chenarului și selectarea prin click dreapta a opțiunii Shadow. Mai departe cu ajutorul mouse-ului se poate alege intensitatea umbrei și înclinația ei.

Textul important care descrie activitatea firmei a fost scris în alb, pentru simplu fapt că aceasta va atrage atenția clientului. Textul scris a fost selectat riguros și formulat în urma unui studiu riguros realizat pe mai multe pagini de prezentare a unor firme mari din domeniul IT și de asemenea a unor pagini de dimensiune mai mică a unor firme care sunt doar la început (în aceași situație fiind și firma Computer Mechanics, care este de 1 an pe piață).

În urma acestui studiu s-a descoperit că dacă informația este cât mai aproape de mijlocul site-ului și este scrisă într-o culoare total diferită de conținutul paginii va atrage atenția vizitatorului. Textul trebuie să fie ordonat și să fie scris cu un font universal care să fie compatibil cu orice browser de internet.

Pentru textul din proiect s-a ales font-ul Verdana, datorită faptului că oferă vizibilitate marită a text-ului și pentru a ieși din monotonia font-ului Times New Roman care este suprautilizat pe majoritatea paginilor web ( cel puțin așa s-a observat în urma studiului realizat).

Conținutul textului este de asemenea foarte important și s-a pus accent pe formularea unui pasaj care să ofere siguranță utilizatorului, informându-l pe acesta că este pe pagina potrivită. Aranjarea optimă a acestui text și încadrarea corectă în pagina Home asigură un număr mai mare de clienți, iar acest lucru duce și la sporirea eficineței a site-ului.

S-a observat și că prezența unui element grafic de tip poză duce la mărirea numărului de vizitatori, aceștia fiind atrași în primul rând de designul paginii. S-a optat pentru folosirea unei imagini oferite de WebPlus X4 și anume o imagine cu o persoană îmbrăcată bussines. Imaginea a fost aleasă pentru a creea acea legătură dintre utilizator și site-ul vizitat, astfel mărind curiozitatea vizitatorului de a explora în continuare.

De asemenea în poză se poate observa și faptul că acea persoană poartă un laptop cu ea, astfel făcându-se legătura cu profilul firmei. Psihologic vorbind se poate spune că anumite elemente cunoscute pot provoca anumite sentimente unei persoane. Astfel la văzul unei persoane cu laptopul lângă ea se provoacă un sentiment de Déjà vu pentru unii din utilizatorii noștrii, iar pentru cei care nu dispun de un laptop se crează o asociere între calculatorul personal de acasă și calculatorul portabil din mâna persoanei incluse în poza de pa pagina principală. În urma acestor sentimente se va declanșa o acțiune, iar acțiunea declanșată în cazul nostru diferă de la dorința de a explora în continuare site-ul sau curiozitatea specifică oamenilor de a vedea ce este în continuar pe celălalte pagini ale site-ului.

Ambele acțiuni sunt la fel de importante pentru că duc la mărirea numărului de vizitatori, fie că este vorba de curiozitate simplă sau de necesitatea de a-și rezolva o problemă pe care o au cu calculatorul personal

După realizarea paginii Home s-a trecut la definitivarea celorlalte pagini. În urma discuțiilor cu directorul firmei Computer Mechanics s-a convenit ca site-ul sa aiba 4 pagini principale. Aceste pagini sunt : pagina Home care precede paginii Intro , pagina Produse unde vor fi prezentate produse și metodele de cumpărare, lista de produse și produsul săptămânii, pagina Service și Oferte unde vor fi prezentate serviciile oferite de firmă și pagina Contact unde vor fi oferite datele de contact. Paginile trebuie să aibă același stil (implementarea se face prin pagina Master) și trebuie să corespundă vizual cerințelor directorului. Aceste pagini trebuie să fie vizibile și pe monitoarele mai vechi, dar în același timp să ofere o navigare îmbunătățită în cazul deschiderii lor pe un monitor de generație nouă. Grafica folosită trebuie să aibă impact vizual mare dar să nu deranjeze, iar dimensiunile fișierelor grafice trebuie să fie cât mai mici posibil pentru a asigura un timp redus de încărcare al întregului site. Desigur pe lângă aceste 4 pagini principale au mai fost create încă 2 pagini , acestea putând fi vizitate prin accesarea link-urilor din pagina Produse și Service sau pagina Oferte.

Paginile sunt realizate ca o extensie și includ elemente grafice si formulare menite să îmbunătățească experiența vizitatorului site-ului, dar să și susțină accesibilitatea întregului site.

Aceste 2 pagini sunt realizate pentru a afișa lista de prețuri și pentru a afișa o reclamă la produsele comercializate de către firmă. Din nou s-a pus o importanță pe aranjarea în pagină și alegerea conținutului care va fi prezentat, evitându-se includerea unor elemente grafice care încarcă pagina dar nu ajută cu nimic la mărirea accesibilității.Fiind un site de prezentare a firmei s-a optat pentru realizarea unui site profesionist care să poată fi vizulizat pe orice browser și să aibă aceleași atribute grafice pe orice platformă pe care este rulat. Site-ul poate fi mărit în orice moment cu alte pagini sau poate fi îmbunătățit în funcție de nevoile firmei. Program WebPlusX4 are și capabilități FTP, site-ul putând fi urcat foarte ușor pe domeniul dorit ,dacă acel domeniu beneficiază de protocoale FTP. În cadrul opțiunii Publish Site, din meniul File se pot alege destinațiile site-ului construit, el putând fi salvat pe hard-disk sau direct pe serverul dorit folosind protocolul FTP (file transfer protocol).

Programul va fi folosit pentru mentenanța continuă a site-ului, iar atunci când va fi nevoie se vor introduce noi elemente grafice care să țină pasul cu tendințele viitoare. Pe lângă uneltele care ne ajută să definim grafic site-ul există și Site Checker Tool, un utilitar care va verfica dacă imaginile și alte elemente ale site-ului sunt integrate corect .

În cazul în care sunt eventuale probleme, utilitarul va avertiza programatorul și va furniza pași spre rezolvarea lor sau le va rezolva el problemele prin simpla apăsare a butonului Fix. Utilitarul este foarte important pentru că ne avertizează asupra imaginilor prea mari care se descarcă greu de pe site, sau despre pozele care nu sunt bine încadrate în proiectul nostru.

În continuare se vor prezenta restul paginilor principale ale proiectului și se vor descrie elementele integrate în acestea. Vor fi descrise elementele grafice și cele care țin de organizarea în pagină, iar codul necesar construcției acestora va fi descris ulterior.

Toate elementele au fost selecționate atent și s-a urmărit aranjarea optimă în pagină, obiectele fiind orientate către utilizator ,fiind menite să ofere accesibilitate și ușurință în navigare.

Pagina Produse:

Această pagină conține mai multe elemente dintre care le vom enumera pe cele mai importante: produsul săptămânii și link-ul către pagina secundară de produse. Produsul săptămânii a fost introdus în această pagină pentru a oferii vizitatorilor informații săptămânale despre noile produse care sunt disponibile pentru achiziționare. Astfel vizitatorilor li se oferă posibilitatea de a fi în ton cu tendințele actuale ale domeniului IT si Media, nefiind nevoiți să caute în lista furnizată pentru cele mai noi produse. Dacă se dorește totuși achizitionarea unui produs specific ,atunci utilizatorul are optiunea de a vizualiza singur produsele disponibile prin accesarea paginii secundare ,cu ajutorul butonului inclus. Odată cu solicitarea vizitatorului de a vizualiza produsele firmei se va accesa o nouă pagină , total diferită de paginile principale. Aceasta include un slide show cu mărcile comercializate de către Computer Mechanics și un buton pentru descărcarea listei de produse, listă realizată în Microsoft Excel.

În cazul în care vizitatorul nu dorește să achizitioneze nimic ,atunci are opțiunea de a revenii la pagina anterioară prin intermediul butonului din dreapta sus.

Butonul a fost modificat în programul Macromedia Fireworks, având la bază un buton existent. Dacă totuși vizitatorul a găsit un produs care este conform cerințelor dorite de acesta, atunci se poate face o comandă prin formularul de pe această pagină. Formularul a fost conceput să fie cât mai accesibil posibil , dar în același timp să includă toate informațiile necesare depunerii unei comenzi online. Formularul include field-uri pentru completarea numelui, numărului de telefon, adresei de e-mail si produselor dorite. În formular vom găsi 2 butoane , unul dintre acestea fiind pentru trimiterea comenzii ,iar celălalt pentru stergerea câmpurilor completate. Pentru a sporii securitatea (contra programelor Malware care pot trimite comenzi invalide) și pentru evitarea depunerii unor comenzi false s-a introdus și un checkbox, care atunci când va fi activat va duce implicit la activarea butonului de trimitere a comenzii. În cazul în care utilizatorul nu a completat un câmp sau nu a completat complet informația solicitată , formularul va genera automat un mesaj de eroare și va informa utilizatorul în legătură cu câmpurile care nu au fost completate corespunzător.

Se pot observa și cele 2 fragmente de cod HTML introduse în header-ul paginii, având rolul de a declara javascriptul pentru securitatea checkbox-ului și pentru un icon grafic.

Pagina Service și Oferte:

Această pagină include informații în legătura cu serviciile oferite și un formular pentru solicitare de ajutor. Formularul conține un Combo-Box care conține 3 câmpuri predefinite: Departamentul Vânzări, Departamentul Hardware și Departamentul Software. Pe lângă acest Combo-Box se găsesc și field-urile pentru completarea numelui si a adresei de e-mail și cel mai important field-ul unde trebuie trecut textul ajutorului solicitat.

Dacă utilizatorul uită sau nu completează un câmp va fi avertizat automat printr-un mesaj emis de către formularul de ajutor. Butonul Solicită ajutor nu va trimite formularul până când câmpurile nu vor fi completate corespunzător, în acest fel reducându-se posibilitatea unei cereri false sau incomplete.

În partea stângă se regăsește o lista sumară cu serviciile oferite. Utilizatorul poate accesa printr-un simplu click o altă pagină secundară unde îi vor fi prezentate serviciile complete și prețurile acestora.

Odată solicitată, pagina va afișa un mesaj de avertisment ,prin care atenționează utilizatorii că doar persoanelor care nu au contract de service li se aplică aceste tarife.

Această măsura a fost luată pentru a evita panicarea clienților deja existenți ai firmei care și-au incheiat contracte de service.

După apăsarea butonului ok se va incărca un fisier PDF care va putea fi vizualizat de către utilizatori și se va activa un buton de revenire la pagina anterioară în partea de dreapta sus. Butonul este realizat în Macromedia Fireworks și are la bază un buton realizat deja. Prin folosirea uneltei Rubber Stamp Tool s-a rezolvat problema textului existent pe buton, textul inițial fiind în engleză. RST va asocia zonele unde este scris textul cu pixeli apropriați din zone unde nu este scris nimic și în acest fel se realizează o stergere profesionistă a textului fără ca cineva să-și dea seama că a existat ceva înainte acolo. Textul necesar a fost introdus cu Text Tool și s-a folosit fontul dorit și culoarea albă pentru text, pentru a putea fi clar vizibil pentru utilizatorii site-ului.

Se realizează 2 imagini ale aceluiași buton și se salvează în directorul de imagini al proiectului dacă este nevoie.

În cazul nostru s-a trecut direct la implementarea acestor imagini în programul WebPlus X4 , iar acesta a realizat exportul acestora în directorul site-ului. În acest fel se poate crea senzația unui buton activ, imaginile fiind schimbate între ele în momentul în care pointerul mouse-ului trece deasupra lor.

După realizarea butoanelor s-a trecut la încadrarea grafică a documentului cu servicii. Documentul PDF este încadrat într-un frame și poate fi vizulizat în totalitate prin mutarea scrol-ului lateral. După parcurgerea listei clientul are posibilitatea de a revenii la pagina anterioară și își poate continua navigarea pe site-ul firmei. Pagina aceasta a fost concepută să fie cât mai simplă și să ofere doar informațiile necesare, adică denumirea serviciului oferit și prețul acestuia. În acest fel se contribuie la accesibilitatea site-ului ,iar clientul va fi mulțumit de ușurința cu care poate obține informațiile dorite. În urma consultării prețurilor utilizatorul poate accesa și ultima pagină a site-ului, adica pagina de contact.

Pagina Contact:

Această pagină propune mai multe metode de contact, având o metoda interactivă și o metodă clasică de contact. Metoda interactivă presupune completarea unui form și trimiterea acestuia la adresa de e-mail a firmei. S-a optat pentru aceast formular pentru a satisface nevoile clienților presați de timp, aceștia nefiind nevoiți să-și piardă timpul la telefon pentru aflarea unor detalii. Dacă clientul are nevoie de informații rapide ,atunci acesta poate folosii metoda clasică de contact, ceea ce presupune contactul prin telefon s-au vizitarea sediului la adresa menționată. Iarăși informația importantă a fost redactată în culoarea albă pentru a atrage atenția vizitatorului.

În interiorul acestei pagini s-a introdus și un plugin Google Maps, în acest fel ușurându-se aflarea locației firmei. S-a adăugat un tag în interiorul hărții de la Google, iar clienții pot găsi în acest fel mai ușor sediul firmei.

3.2.2 Codul folosit

Pagina Index este construită automat de către programul WebPlus X4. Totuși pe lângă codul construit de catre program s-au mai adăugat și alte pasaje de cod. Un cod suplimentar introdus a fost codul HTML care descrie un Icon ce va fi afișat în bara browser-ului de Internet.

Codul este următorul:

În cod este inclusă calea către Icon-ul situat în directorul wpimages și este descris tipul acestuia. Astfel când utilizatorul va încărca site-ul va observa că acesta dispune de un plus de design prin integrarea unui icon în bara browserului.

Stilul CSS este declarat automat in head-ul site-ului. Desigur și acest cod se poate modifica manual ,prin rescrierea valorilor din interiorul acestuia:

<!–

body {margin: 0px; padding: 0px;}

a:link {color: #5ce937;}

a:visited {color: #0e9b55;}

a:hover {color: #5ce937;}

a:active {color: #5ce937;}

–>

</style>

Se pot observa că sunt trecute culorile pentru link-uri în toate cele 4 stări ale acestora: normal, visitat, deasupra, activat.

Pentru implementarea player-ului JW trebuie introdus un cod in cadrul body-ului paginii Index. Codul poate fi modificat după dorințele programatorului și poate conține anumite opțiuni care sunt descrise în documentația de pe site-ul longvideo.com.

Codul folosit în cadrul paginii Index este urmatorul:

<div id='mediaspace'>Daca videoclipul nu este valabil atunci apare acest text</div>

var so = new SWFObject('player.swf','mpl','640','480','9');

so.addParam('allowfullscreen','true');

so.addParam('allowscriptaccess','always');

so.addParam('wmode','opaque');

so.addVariable('file','IntroFlashshow.flv');

so.addVariable('backcolor','333333');

so.addVariable('frontcolor','AAAAAA');

so.addVariable('lightcolor','00CC00');

so.addVariable('screencolor','424242');

so.addVariable('controlbar','none');

so.addVariable('autostart','true');

so.addVariable('repeat','always');

so.write('mediaspace');

</script>

</div></div>

În continuare vom explica elementele acestui cod. Pentru o implementare corectă se folosesc mai multe tag-uri <DIV>. Tag-ul div este folosit pentru a definii o sectie dintr-un document HTML. Pozitia tag-ului a fost determinată automat de către programul WebPlus X4 și este încadrată grafic cât mai aproape de centrul paginii. De asemenea se declară și un fișier javascript, care va fi apelat prin atributul src='swfobject.js' . Acest javascript este folosit pentru rularea în condiții optime a player-ului JW.

Javascript-ul este furnizat gratuit de către firma longvideo și vine impreună cu documentația programului. Se pot observa că sunt declarate mai multe tag-uri div, dintre care unul are ID-ul mediaspace. În cadrul acestuia va fi integrat playerul JW. Acestuia i-a fost scris un text descriptiv care va apărea în cazul în care există o eroare și playerul nu poate încărca videoclipul dorit.

În continuare se va apela javascript-ul care va construi playerul după dorințele noastre. Se va declara o nouă variabila SWFObject care are ca parametrii fișierul player.swf (fișier furnizat de asemenea de Longvideo) si marimea dorită a playerului (în cazul nostru 648×480 pixeli). După construirea variabilei se va trece la particularizarea player-ului:

so.addVariable('file','IntroFlashshow.flv'); – se precizează numele filmului care se rulează

so.addVariable('backcolor','333333'); – culoarea de background pentru controlbar

so.addVariable('frontcolor','AAAAAA'); – culoarea scris pentru controlbar

so.addVariable('lightcolor','00CC00'); – culoare pentru control la sunet si durata film

so.addVariable('screencolor','424242'); – culoare pentru background ecran player

so.addVariable('controlbar','none'); – se ascunde controlbar-ul

so.addVariable('autostart','true'); – filmul rulează automat la încărcarea paginii

so.addVariable('repeat','always'); – filmul se repetă la infinit

După particularizare se trece la introducerea player-ul în cadrul site-ului prin comanda: so.write('mediaspace'). În acest fel în locul div-ului cu ID-ul mediaspace va fi introdus player-ul JW cu videoclipul dorit. În cazul în care videoclipul nu este valabil ( nu a fost urcat corect pe server, a fost șters din greșeala) atunci div-ul mediaspace nu va fi înlocuit de către player, ci va afișa doar mesajul predefinit: ,, Daca videoclipul nu este valabil atunci apare acest text ’’ .

În cazul proiectului , player-ul a fost setat să porneasca automat și să aibă controlbar-ul ascuns. Culoarea ecranului este setata să fie aceași cu backgroundul paginii, iar pe suprafața playerului a fost declarat un hyperlink către pagina Home.

Pentru redirecționarea la pagina Home s-a folosit următorul cod :

Aceast comandă se scrie in header-ul paginii și are ca parametrii numarul de secunde până la schimbarea paginii (acestea se vor trece în atributul content) și adresa paginii către care se face redirecționarea (aceasta se va trece în atributul URL).

Pagina Home are un cod sursă mai lung datoriă faptului că pagina include multe elemente grafice și mult text. Și în această pagină în cadrul header-ului a fost introdus codul care determină apariția unui icon în bara browserului. Codul este același ca și cel din pagina Index:

Dacă se doreste se poate modifica icon-ul afișat cu condiția ca noul icon care va fi construit sa aiba dimensiunile 49×49 (dimensiuni determinate a fi optime).

Codul sursă pentru stilul CSS este mai mare de această dată pentru că sunt descrise și stiluri de font și culoarea acestora:

<!–

body {margin: 0px; padding: 0px;}

a:link {color: #5ce937;}

a:visited {color: #0e9b55;}

a:hover {color: #5ce937;}

a:active {color: #5ce937;}

.Normal-P

{

margin:0.0px 0.0px 0.0px 0.0px; text-align:right; font-weight:400;

}

.Normal-P0

{

margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;

}

.Normal-P1

{

margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400;

}

.Normal-C

{

font-family:"Tahoma", sans-serif; font-size:12.0px; line-height:1.17em;

color:#ffffff;

}

.Normal-C0

{

font-family:"Tahoma", sans-serif; font-size:12.0px; line-height:1.17em;

color:#b9ea37;

}

.Normal-C1

{

font-family:"Verdana", sans-serif; font-size:12.0px;

line-height:1.17em; color:#b9ea37;

}

.Normal-C2

{

font-family:"Verdana", sans-serif; font-size:12.0px;

line-height:1.17em; color:#ffffff;

}

.Normal-C3

{

font-family:"Tahoma", sans-serif; font-size:15.0px; line-height:1.20em;

color:#c1ff1e;

}

.Normal-C4

{

font-family:"Tahoma", sans-serif; font-size:13.0px; line-height:1.23em;

color:#ffffff;

}

.Normal-C5

{

font-family:"Verdana", sans-serif; font-size:14.0px;

line-height:1.21em; color:#c1ff1e;

}

–>

</style>

Se pot observa mai multe clase de fonturi, fiecare dintre ele având dimensiunile proprii și culorile determinate. Clasele pot fi modificate ușor chiar și cu programul Notepad, iar programatorul poate să le folosească după dorința acestuia la oricare text scris.

În centrul paginii s-a realizat aranjarea unui chenar care să încadreze textul important al site-ului. Acest chenar poate fi modificat s-au repoziționat prin modificarea următorului cod:

Chenarul este încadrat într-un tag div de către WebPlus X4, iar prin modificarea atributelor tag-ului se poate modifica pozitia acestui chenar. Chenarul este o imagine de format PNG, care se gaseste in folderul wpimages sunt denumirea wp421ce8d8.png . La încărcarea acestui chenar se apeleaza un script java furnizat de către firma Serif, script care fixează fișierul PNG și ajuta la compatibilitatea cu anumite browsere.

Textul important care este scris în interiorul chenarului este de asemenea declarat printr-un tag div, însoțit de un tag <span> . Span este folosit în principal pentru adăugarea unei bucăți de text la o parte a documentului (în cazul nostru text în chenarul imagine).

Vom prezenta un cod care integreaza un text important în interiorul chenarului din centrul paginii:

<p class="Normal-P0"><span class="Normal-C5">Ce ne diferentiaza de alte firme?</span></p>

</div>

Se observă tag-ul div care determină poziția textului. Tagul <p> determină un paragraf nou . Span-ul este formatat in stilul claseri Normal-C5, adică are Fontul Verdana de mărimea 14 (aceste atribute sunt scrise în stilul CSS ). Acesta este text-ul amplasat în vârful chenarului, fiind urmat de informații suplimentare care au în componență și link-uri către alte pagini sau ancore din interiorul unor pagini.

Pe lângă acestea s-a apelat și la folosirea unor texte care au în componență linkuri către ancore declarate în interiorul anumitor pagini. Vom prezenta și un cod care descrie un hyperlink către o ancoră descrisă în interiorul unei pagini (în cazul nostru ancoraservicii din cadrul paginii page3).

Un exemplu în acest sens ar fi următorul cod:

<p class="Normal-P0"><span class="Normal-C">   </span><span class="Normal-C2">Faptul ca oferim <a href="page3.html#ancoraservicii" style="color:#ffffff;">solutii complete IT</a>. Firma noastra furnizeaza solutii hardware

si software pentru cei mai pretentiosi clienti, in oferta noastra gasindu-se numeroase

produse noi. </span></p>

Se poate observa ca textul ,, solutii complete IT ’’ are ca hyperlink o ancora definită pe pagina Servicii și Oferte (adică page3.html). Acest text are de asemenea definită o altă clasă din stilul CSS și anume clasa Normal-C2. Textul este inclus într-un tag div care oferă libertate de încadrare a acestuia în interiorul chenarului.

Toată pagina Home este formată din chenare și elemente grafice bine aranjate , menite să atragă atenția vizitatorului. De asemenea pe lângă acestea se găsesc si butoanele de legături către alte pagini. Aceste butoane sunt foarte importante pentru că asigură accesibilitatea site-ului și oferă vizitatorului senzația de libertate în navigare.

Butoanele sunt definite prin următorul cod:

După definirea tag-ului div se procedează la definirea hyperlegăturii către pagina dorită. Se poate observa că atunci când mouse-ul este poziționat asupra butonului se apelează o funcție java care va schimba imaginea butonului, în acest fel realizându-se un buton activ și interactiv. Această funcție este de asemenea realizată

automat de către programul WebPlus X4 și asigură compatibilitate si robustețe a butonului. Toate cele 4 butoane sunt construit în acest fel și sunt valabile pentru toate cele 4 pagini majore ale site-ului.

Pagina Produse este prima pagină care introduce un buton care face legătura către o pagină secundară din proiect. Butonul care face legătura este un buton tip javascript construit de către program. În urma unor cercetări amănunțite s-a observat că butoanele de tip javascript sunt mai bun dacă se dorește compatibilitate.

Din acest motiv vom prezenta codul sursă al acestui buton:

try {

var navtree_nav_54 = WpNavBar.getNavTreeCustom( customnavtree1, {m_sThisPageUrl:'page2.html',

m_sNavBarTarget:'_self',

m_bIncludeChildren:true,

m_bIsCustom:true} );

if( !navtree_nav_54 ) throw WpNavBar.getErrorObj( 'Link tree could not be read' );

var nav_54 = new wp_navbar_menu("nav_54", navtree_nav_54, {'m_optAlignment':0,'m_optGap':1,'m_optFirstPopupPosition':0,'m_opTimeOut':500,'m_optShowBelow':1,'m_optShowRight':1,m_sId:'nav_54',

m_iLeft:395,

m_iTop:583,

m_sCssClass:'wp_navbar_menu4',

m_iWidth:276,

m_iHeight:43}, {'m_bSlidingDoors':true});

} catch(e){

document.write( '<div style="position:absolute;left:395;top:583;width:276;height:43">There was an error generating the navbar:<br>' + e.message + '</div>' );

}

–></script>

Codul este inclus într-o buclă de tip try-catch. În cazul în care butonul nu poate fi generat va fi generat un mesaj inclus in catch , mesajul implicit fiind: ,, There was an error in generating the navbar. ’’

În cazul în care navbar-ul poate fi generat atunci acesta va fi luat din fisierul wp_navbar_menu4 inclus în folderul wpscripts. În fișier sunt scrise automat caracteristicile butonului ales, butonul fiind predefinit și furnizat de către WebPlus X4.

În fișierul wp_navbar_menu4 se pot găsi atributele care fac referire la imaginea folosită pentru buton, textul acestuia, hyperlinkul din el, etc. . Nu vom afișa codul java din fișier pentru că este lung și dacă se dorește modificarea acestuia trebuie să avem atenție la atributele acestuia.

Butonul este superior unui simplu buton rollover datorită faptului ca are tot codul scris într-un fișier javascript , care poate fi inclus și apelat în orice loc al paginii.

Pe lângă butonul care face legătura cu pagina secundară se regăsește și textul important al paginii. Desigur și pe această pagină se regăsește text care are legătura hiperlink.

Un exemplu în acest sens este :

<p class="Normal-P0"><span class="Normal-C1"><a href="page4.html" style="color:#ffffff;text-decoration:none;">Pentru mai multe detalii tehnice si pentru pret.</a></span></p>

</div>

În primul rând se poate observa textul cu numarul de telefon care a fost redactat cu setările clasei Normal-P0. Totuși următorul text, cel care face referire la detalii și contact are ca hyperlink o pagină. Pagina spre care este făcută legătura este pagina Contact, pentru că în cadrul acestei pagini se regăsește și formularul cu întrebări. În acest fel utilizatorul are accesibilitate și poate accesa direct ceea ce dorește. Desigur acest text este scris în culoarea albă ,așa cum se poate observa in atributul de mai sus: style="color:#ffffff . Codul culorii este scris in HEX, iar #ffffff descrie faptul ca R G și B sunt trecute pe ff , adică fiecare dintre ele sunt pe alb. Se putea scrie și numele culorii în locul codului HEX (adică se scrie white în locul codului HEX) , dar în acest fel se oferă mai multe libertate atunci când se dorește schimbare culorii textului, designer-ul web putând să aleagă din multitudinea de combinații care există în spațiul RGB.

Header-ul paginii include ca de obicei codul care face referință la iconul folosit în tab-urile browserelor de Internet. Nu vom relua acest cod pentru că a fost deja descris în paginile anterioare.

Odată ce utilizatorul apasă butonul de afișare a produselor va fi redirecționat către pagina secundară. Această pagină conține un slide show prin care se afișează marcile comercializate, un buton de descărcare a listei de produse (listă realizata în Microsoft Excel) , un formular de comandă și un buton de revenire la pagina anterioară.

Vom discuta codurile fiecăror elemente și vom pune accent pe atributele importante care alcătuiesc elementele. Pagina nu include butoanele și elementele paginii master, dar include elemente care impresionează grafic.

Codul butonului ,buton implicit realizat în java, este următorul :

try {

var navtree_nav_89 = WpNavBar.getNavTreeCustom( customnavtree7, {m_sThisPageUrl:'page5.html',

m_sNavBarTarget:'_self',

m_bIncludeChildren:true,

m_bIsCustom:true} );

if( !navtree_nav_89 ) throw WpNavBar.getErrorObj( 'Link tree could not be read' );

var nav_89 = new wp_navbar_menu("nav_89", navtree_nav_89, {'m_optAlignment':0,'m_optGap':1,'m_optFirstPopupPosition':0,'m_opTimeOut':500,'m_optShowBelow':1,'m_optShowRight':1,m_sId:'nav_89',

m_iLeft:274,

m_iTop:138,

m_sCssClass:'wp_navbar_menu6',

m_iWidth:220,

m_iHeight:36}, {'m_bSlidingDoors':true});

}

catch(e){

document.write( '<div style="position:absolute;left:274;top:138;width:220;height:36">There was an error

generating the navbar:<br>' + e.message + '</div>' );

}

Observăm că butonul este construit asemănător celui din pagina de produse și este inclus într-o buclă try-cath. Desigur butonul diferă prin design de către celalalt buton și apelează un alt fișier pentru construirea lui.

Cel mai interesant element al acestei pagini este galeria flash. Aceasta este de asemenea generată automat de către programul WebPlus X4 pentru a micșora timpul necesar construcției site-ului , în acest fel contribuindu-se la designul acesteia.

Codul acestei galerii este următorul :

<!–

var hasReqestedVersion = DetectFlashVer(9, 0, 0);

if (hasReqestedVersion)

{

AC_FL_RunContent(

"src", "wpimages/slideshowpro?paramXMLPath=CCB6.xml",

"base", "wpimages",

"play", "true",

"loop", "true",

"width", "348",

"height", "261",

"salign", "C",

"scale", "ShowAll",

"id", "slidegallery_1",

"quality", "High",

"wmode", "transparent",

"allowFullScreen", "true",

"name", "slidegallery_1",

"type", "application/x-shockwave-flash",

'codebase', 'http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',

"pluginspage", "http://www.macromedia.com/go/getflashplayer"

);

}

else

{

var alternateContent = 'An old version of the Flash plugin was detected. <strong><a href="http://www.macromedia.com/go/getflash/">Please upgrade your Flash plugin.<\/a><\/strong>';

document.write(alternateContent);

}

–>

</script>

</div>

Codul este construit să afișeze un mesaj de eroare în cazul în care nu se detectează un plugin flash mai mare de versiunea 9.0 (se cere utilizatorului să-și facă upgrade) .Galeria nu va putea fi rulată pe un calculator care nu are Adobe Flash Player, dar va putea fi rulată daca acesta are versiunea mai veche instalată (adică versiunea 9). Majoritatea calculatoarelor au Flash Player v10 instalată pe calculator pentru că utilizatorii folosesc site-uri cunoscute care solicită acest lucru (Youtube, site-urile producătorilor hardware NVIDIA, ATI, ASUS, etc. ). După detectarea plugin-ului se trece la bucla care va rula galeria flash unde se poate observa că galeria este setată să pornească automat și să se repete în cazul în care ajunge la final. Deși aceste atribute sunt importante există și anumite proprietăți care necesită o atenție mai mare.

În primul rând se observă fișierul CCB6.xml care este situat în directorul wpimages și este accesat de către scriptul menționat. Acest fișier conține toți parametrii care descriu culorile galeriei, modul de afișare al pozelor, timpul de afișare, tranziții , etc.

Se pot modifica ușor anumite opțiuni ale galeriei, textul găsit în codul acesteia fiind ușor de înteles și scris în limba engleză. Un exemplu în acest sens ar fi codul pentru background-ul galeriei: albumBackgroundColor="0x1A1A1A" . Se observă faptul că textul este clar și concis, iar culoarea este scrisă din nou în HEX și poate fi modificată ușor.

Printre parametrii fișierului se găsește si o cale către un alt fișier XML, unde găsim legăturile cu pozele care vor fi afișate. Codul care descrie legătura cu fișierul XML ,adică: xmlFilePath="CCA6.xml" ne face o trimitere către fișierul cu numele CCA6 din același folder.

În acest fișier vom găsi toate imaginile care vor fi afișate:

?xml version="1.0" encoding="UTF-8"?>

<album>

</album>

</gallery>

Se poate observa că sunt incluse căile către imaginile care vor fi afișate și un text aferent care poate fi afișat în timpul rulării dacă se dorește. Atributul ,,src’’ determină calea către imagini, iar în cazul nostru imaginile sunt găsite în același director unde este și fișierul care le declară. Pe lângă calea către imagine sunt declarate și caile către thumbnail-urile imaginilor ( adică aceleași imagine, dar reduse la o dimensiune mai mică pentru a putea fi vizulizate în cazul în care galeria este setată să afișeze și icon-uri). În cazul în care sunt mai multe imagini se vor introduce linii suplimentare de cod și se vor declară ca și în exemplele de mai sus.

După studierea galeriei și butonului de descărcare vom trece la formular de comandă. Formularul este construit din mai multe Edit Box-uri, Textare, butoane de trimitere și stergere, și cel mai important, butonul checkbox care asigură siguranța acetui formular.

Vom prezenta codul formularului și vom explica caracteristicile sale principale:

<p class="Normal-P0"><label for="edit_15"><span class="Normal-C0">Numele dumneavoastra</span></label></p>

</div>

</div>

<p class="Normal-P0"><label for="edit_14"><span class="Normal-C0">Numarul de telefon</span></label></p>

</div>

</div>

<p class="Normal-P0"><label for="edit_2"><span class="Normal-C0">Adresa de e-mail</span></label></p>

</div>

</div>

<p class="Normal-P0"><label for="text_1"><span class="Normal-C0">Produsul/ produsele dorite:</span></label></p>

</div>

</div>

</div>

</div>

<p class="Normal-P0"><label for="check_2"><span class="Normal-C">Sunt de acord sa comand </span></label></p>

<p class="Normal-P0"><label for="check_2"><span class="Normal-C">produsele din lista alaturata</span></label></p>

</div>

</div>

</form>

Fiecare control sau buton este încadrat în interiorul paginii prin tab-urile div, care sunt incluse la fiecare dintre acestea. Se observă că tot acest formular este construit cu scopul de a expedia o comandă validă către adresa de e-mail a firmei, acțiune descrisă in codul formularului ( action=mailto:[anonimizat] ).

Fiecare Edit Box are un label declarat , în acest fel utilizatorul fiind informat în legătura cu datele care trebuie completate în locul respectiv. Textului îi sunt asociate clase din stilul CSS și este formatat pentru a fi clar.

Partea cea mai interesantă a acestui cod este însă scrisă în codul Checkbox-ului. Odată selectat este obligat să apele o funcție java declarată în Headerul paginii. Această funcție java asigură activarea butonului de trimitere a comenzii, iar fără selectarea checkbox-ului acest buton nu va putea fi utilizat. Funcția java declarată în header este următoarea:

function apply()

{

document.FormularTrimiteComanda.butn_1.disabled=true;

if(document.FormularTrimiteComanda.check_2.checked==true)

{

document.FormularTrimiteComanda.butn_1.disabled=false;

}

if(document.FormularTrimiteComanda.check_2.checked==false)

{

document.FormularTrimiteComanda.butn_1.enabled=false;

}

</script>

Funcția pune valoare de true la atributul disabled al butonului de trimitere a comenzii, în acest fel dezactivând butonul. Apoi trece la verificarea Checkbox-ului, adică se verifică dacă acesta este bifat sau nu.

În cazul în care checkbox-ul este bifat se va trece la activarea butonului prin trecerea valorii false la atributul disabled al butonului. Dacă Checkbox-ul nu este bifat atunci se repetă comanda de dezactivare a butonului.

Prin acest cod simplu se asigură securitatea acestui formular de comandă prin restrictionarea butonului de trimitere. Aceasta măsura este luată pentru a prevenii firma de recepția unor comenzi false rezultatea din urma unor programe malware sau din cauza unor greșeli umane. Prin prezența Checkbox-ului și a textului din dreptul acestuia se realizeaza o obligare a clientului de ași verifica opțiunile alese.

Desigur sunt incluse și alte măsuri de siguranță pe lângă acest cod , iar acestea sunt incluse în comanda de validare a formularului (adică atunci când butonul Trimite comanda este apăsat).

Măsurile sunt îndreptate contra utilizatorilor care uită să-și completeze datele personale sau nu completeaza complet adresa de e-mail sau numărul de telefon. În acest caz va fi generat un mesaj de eroare care va informa utilizatorul asupra câmpurilor care sunt incomplete sau nu sunt completate deloc.

Codul de validare al formularului este următorul:

<!–

function validate_form_2( form )

{

if( ltrim(rtrim(form.elements['NAME'].value,' '),' ')=="" ) { alert("Va rugam introduceti numele!"); form.elements['NAME'].focus(); return false; }

if( ltrim(rtrim(form.elements['SURNAME'].value,' '),' ')=="" ) { alert("Va rugam introduceti prenumele!"); form.elements['SURNAME'].focus(); return false; }

if(!ValidateEmail(form.elements['EMAIL'].value)) { alert("Va rugam introduceti e-mail-ul!"); form.elements['EMAIL'].focus(); return false; }

if( ltrim(rtrim(form.elements['COMMENT'].value,' '),' ')=="" ) { alert("Va rugam introduceti produsele dorite!"); form.elements['COMMENT'].focus(); return false; }

return true;

}

–>

</script>

Funcția validate_form_2 se adreseaza formularului nostru și generează alerte pentru câmpurile Editbox când acestea nu au nici un caracter introdus ( adica valoarea câmpului =="" ). Atunci când adresa de e-mail nu este introdusă cum trebuie (adică nu are caracterul @ sau este incompletă) formularul va genera o nouă eroare care va avertiza utilizatorul. De asemenea și când lista de achiziție este goală formularul va genera un text de avertizare.

Toate elementele paginii au fost concepute ca să ofere securitate utilizatorului, dar în același timp să fie accesibil și ușor de folosit. Se poate introduce și metoda de securizare prin CAPTCHA în cazul în care formularul va fi modificat și este nevoie de mai multă securitate. Butonul de revenire este un buton de tip rollover și a fost realizat in Macromedia Fireworks. Vom discuta despre acest buton în cadrul paginii secundare de servicii și oferte, pentru că și acea pagină are un buton asemănător.

Pagina Service și Oferte este a treia pagină construită în cadrul proiectului. Pagină include foarte multe elemente asemănătoare celorlalte pagini și include și un formular asemenător celui de comandă. Singura diferență este însă ca acest formular nu este atât de securizat ca și cel de comandă, dar include totuși un script de validare .

Scriptul de validare are numele validate_form_4 și are următorul cod:

function validate_form_4( form )

{

if( ltrim(rtrim(form.elements['combo_ajutor'].value,' '),' ')=="" ) { alert("Nu ati selectat departamentul de la care aveti nevoie de ajutor!"); form.elements['combo_ajutor'].focus(); return false; }

if( ltrim(rtrim(form.elements['NAME'].value,' '),' ')=="" ) { alert("Va rugam introduceti numele!"); form.elements['NAME'].focus(); return false; }

if(!ValidateEmail(form.elements['EMAIL'].value)) { alert("Va rugam sa introduceti e-mail-ul!"); form.elements['EMAIL'].focus(); return false; }

if( ltrim(rtrim(form.elements['COMMENT'].value,' '),' ')=="" ) { alert("Va rugam sa scrieti un text!"); form.elements['COMMENT'].focus(); return false; }

return true;

}

–>

</script>

Se observă că din nou sunt generate mesaje de eroare în cazul în care utilizatorul nu a completat un câmp din cadrul formularului. Însă ceea ce este cel mai important la acest formular este un Combo-Box cu 3 câmpuri predefinite pentru fiecare departament al firmei. S-a convenit cu directorul firmei Computer Mechanics ca formularul de ajutor să se adreseze unuia dintre cele 3 departmente ale firmei, adică departamentului vânzări, de asistență hardware sau celui de programare și asistență software. Codurile pentru câmpurile de EditBox (adică acolo unde se introduce numele și adresa de e-mail) sunt la fel ca și la formularul de pe pagina secundară de produse. Din nou este inclus și un Textarea pentru comentariile utilizatorilor, iar ca noutate vom găsi codul care descrie ComboBox-ul. Se pot introduce și mai multe departamente dacă se dorește, acestea putând fi introduse lejer prin implementarea unor linii suplimentare de cod.

Codul aferent ComboBox-ului este următorul:

<option value="Ajutor service!">Departamentul service</option>

<option value="Ajutor programare!">Departamentul soft</option>

<option value="Ajutor vanzari!">Departamentul vanzari</option>

</select>

</div>

Se observă tag-ul div care incadrează poziția ComboBox-ului și valorile predefinite acestuia scrise prin tag-ul option. Textul care va fi afișat este scris dupa atributul value ,în interiorul atributului fiind scris numele departamentului la care este adresat . De asemenea se observă o comandă care este foarte des întânlnită în codul HTML al site-ului și anume:   . Conform unor norme ISO ale HTML, vom găsi ca referință în HTML ISO-8859-1 codul de mai sus. Codul de mai descrie un spațiu non-breaking, iar interpretorul de HTML îl înlocuiește cu caracterul spațiu „ „ . Această normă ISO este impusă în majoritatea browserelor de Internet și primele 128 de caractere din aceast ISO sunt caracterele originale din setul de caractere ASCII (adică numerele de la 0 la 9, alfabetul englez cu litere mari și mici și niște caractere speciale). Se includ în acest ISO și caracterele folosite in Europa și caracterele speciale ale unor limbi europene. Cu ajutorul acestor comenzi predefinite programatorii Web pot implementa caractere speciale care nu sunt ușor de adăugat de către o tastatură normală. Lista caracterelor este foarte lungă dar poate fi accesată oricând și consultată pentru implementare unor caractere.

Pe lângă folosirea acestor caractere speciale s-a trecut si la realizarea unei liste sumare de servicii oferite. Acestea sunt încadrate în partea stângă a site-ului și sunt încadrate grafic de un chenar. Noutatea vine însă de la trasarea unui hotspot care face legătura cu pagina secundară de servicii și oferte. Acest hotspot este declarat ca un dreptunghi, iar valorile acestui triunghi sunt scrise automat de către programul WebPlus X4.

Hotspotul poate fi accesat cu un simplu click de mouse și este cea mai eficientă metodă de a crea legături către alte pagini fără ajutorul butoanelor. Prin intermediul acestui hotspot se susține acea senzație de accesibilitatea a site-ului, iar utilizatorii vor aprecia acest lucru (mai ales utilizatorii începători care sunt obișnuiți să dea click cu mouse-ul pe textul pe care îi interesează ).

Hotspotul este definit prin următorul cod:

Hotspotul este încadrat de către o imagine de lățime 172 de pixeli și înălțime 283 pixeli, imagine formată din fișierul wp5533b116.gif . Când fișierul este deschis se observă ca imaginea de dimensiune 1 x 1 este defapt un pixel blank, adică nu are nici o culoare sau absolut nimic declarat . Astfel este realizat un hotspot care poate fi mutat în pagină datorită tag-ului DIV și are scrisă legătura in atributul HREF .

În interiorul site-ulu se mai găsește un hotspot declarat de data asta prin alte metode de implementare , iar acest hotspot se găsește pe imaginea tastaturii din partea dreaptă a paginii. De această data hotspot-ul este implementat prin tag-ul MAP. Codul aferent acestui hotspot este următorul:

</map>

În interiorul tag-ului div se declară tag-ul MAP, tag care are ca atribut area shape. În area shape vom declara forma map-ului nostru, adică un dreptunghi. În cadrul coords se vor declara coordonatele celor 4 colțuri ale triunghiului, coordonat generate automat de către programul WebPlus X4. În cadrul href se va declara legătura către pagina dorită, în cazul nostru pagina fiind page7. Dacă se dorește afișarea unui text atunci când mouse-ul este deasupra suprafeței se poate declara în atributul alt un text sugestiv, dar în cazul nostru acest text a fost omis.

După încărcarea imaginii noastre se va declara faptul că aceasta are un hotspot deasupra ei, iar prin comanda usemap se realizează acest lucru. Se va preciza numele map-ului realizat (pot fi mai multe mapuri chiar și deasupra unei singure imagini). Odată accesat acest hotspot va face trecerea către pagina secundară de servicii și oferte.

Pagina secundară de produse include doare 2 elemente importante: documentul PDF cu prețurile serviciilor oferite și butonul rollover de revenire la pagina anterioară.

Pagina realizată în pdf va fi afișată într-un iFrame. Codul acestui iFrame este următorul:

Tag-ul iFrame este suportat de majoritatea browserelor de Internet și asigură o compatibilitate mărită față de alte metode de implementare. Se declară calea către documentul ales pentru a fi reprezentat iar documentul va fi deschis cu ajutorul plugin-urilor disponibile pe calculator. Din această cauză este nevoie ca pe calculatorul pe care se va accesa site-ul să fie instalat Adobe Reader sau un plugin pentru browser-ul de Internet care este capabil să citească documente cu formatul PDF.

Al doilea element important al paginii este butonul de revenire editat în Macromedia Fireworks (program studiat la facultate). Butonul este realizat din 2 imagini diferite și este un buton rollover. Asta înseamnă ca printr-un script java se face apelul unei alte imagini atunci când mouse-ul ajunge pe suprafața butonului, creându-se un efect de buton activ. Codul pentru acest buton este următorul:

Este declarată în href calea către pagina dorită, iar în atributul onMouseOut și onMouseOver sunt declarate acțiunile care se vor lua când mouse-ul trece peste zona butonului. Aceste acțiuni sunt declarate într-un javascript din header-ul paginii , iar în cazul nostru acțiunea este următoarea:

PPImgInit('roll_2','wpimages/wpb6afe35a.png','wpimages/wp535e0429.png','','',0,0);

Se pot observa că sunt apelate anumite imagini din folderul wpimages, iar prin acest apel se realizează acest buton activ. Codul javascriptului este iarăși construit de către WebPlus X4 și apelează un fișier de tip js din folderul wpscripts.

Pagina contact conține un text informativ în care clientul este informat de modalitățile de contact și textul propriu zis unde este trecut numărul de telefon, adresa de e-mail a firmei și strada unde clientul poate vizita sediul firmei. Pe lângă toate acestea există și un plugin integrat de la Google Maps, plugin menit să ușureze căutarea celor care doresc să viziteze sediul firmei. Desigur pentru clienții care doresc să ne contacteze direct există metoda formularului. Aici nu s-a pus accent pe securitatea acestui formular, dar ,ca și la celălalte formular din site-ul întreg ,există o funcție de validare a formularului care avertizează clientul în cazul în care nu a completat anumite câmpuri.

În continuare vom discuta codul sursă al formularului:

<p class="Normal-P0"><label for="butn_1"><span class="Normal-C0">Comentariul dumneavoastra:</span></label></p>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="Normal-P0"><span class="Normal-C0">Adresa dumneavoastra de e-mail:</span></p>

</div>

</div>

</form>

Se observă că fiecare control al acestui formular are un label care informează utilizatorul asupra datelor care trebuie introduse. Acțiunea formularului este scrisă în atributul action, iar comanda care trebuie să o execute este mailto:[anonimizat] .Comanda mailto accesează clientul de e-mail al utilizatorului și introduce ca destinatar adresa de e-mail a firmei. Nu s-a realizat o implementare in PHP a acestui formular pentru că serverul pe care sa urcat site-ul nu dispune de opțiunea PHP.

Fiecare control poate fi scris cu un text inițial , iar textul poate fi declarat in atributul value al fiecărui control. Totuși s-a optat pentru necompletarea Editbox-urilor cu un text inițial pentru că aceste controluri au deja un label , iar labelul informează automat utilizatorul asupra datelor care trebuie completate în acel control. Această opțiune este folosită pentru cazul în care controlul nu are label sau un text descriptiv.

Butoanele sunt și ele alese pentru a indeplinii necesitățile clientului și al formularului, adică implementarea unui buton de trimitere al formularului (buton care este necesar) și un buton opțional de stergere al acestuia pentru cazurile în care clientul dorește să-și reformuleze întrebarea sau cerința.

Prin apăsarea butonului de trimitere se apelează script-ul de verificare a datelor, iar odată ce totul este în regulă se apelează deschiderea clientului de e-mail (Microsoft Outlook sau Mozilla Thunderbird în principal) și se procedează la completarea automată a datelor scrise în formular, utilizatorul fiind nevoit doar să dea clik pe butonul de trimitere.

Butonul de stergere va trimite comanda de reset formularului, iar acesta va sterge toate datele completate până atunci în formular. Acest buton poate fi și el particularizat prin modificarea textului încadrat în acesta, dar și prin modificarea funcției pe care el o îndeplinește, el putând fi transformat în buton de submit oricând.

În cazul acestui formular s-a solicitat doar furnizarea adresei de e-mail a clientului, numărul de telefon nefiind necesar. S-a introdus acest formular pentru a putea veni în ajutorul clienților noi care au o problemă și preferă o metodă nouă si comodă de contact.

Un alt cod important care îl vom discuta este codul care furnizează harta de la Google Maps. Acesta este de asemenea generat automat de către program WebPlus X4, dar poate fi integrat ușor și prin downloadul de pe internet și includerea acestuia pe pagina dorită. Codul generat de către programul WebPlus X4 nu este lung și contribuie la reducerea numărului de linii cod dintr-o pagină

Codul necesar pentru introducerea Google Maps este următorul:

Plugin-ul Google Maps este aranjat în pagină prin intermediul tag-ului div care îl încadrează undeva aproape de finalul paginii. Harta de la Google este încadrată într-un iFrame de înălțime 255 pixeli și lățime de 319 pixeli. Sursa acestui iFrame este declarată în atributul src și anume adresa: 'http://www.serifwebresources.com/maps/GoogleMapObject.html?w=319&h=255&lat=46.1805435501194880&lng=21.3174676895141600&z=15&t=1&nc=FULL&mc=BAR&sw=1&mq=1&mn1=Computer Mechanics&mlt1=46.1798155503600610&mlg1=21.3166522979736330&mt1= .

În cazul în care se va incerca deschiderea acestei adrese în browser-ul de Internet fără încadrarea în iFrame se va observa ca aceasta nu va afișa nimic.

Harții îi este indicat locul firmei printr-un atribut inclus, iar harta este salvată pe serverul firmei producătoare a programului WebPlus X4, adică pe siteul Serif. În cazul în care accesul la internet nu este disponibil atunci nu va fi afișată nici o hartă, dar utilizatorului îi sunt furnizate celălalte metode de contact, acesta putând lua contact prin telefon.

Această ultimă pagină a site-ului este realizată în stilul primei pagini, incluzând doar informațiile necesare (datele de contact, metodele de contact) ,fiind orientată pe accesibilitate și ușurință în folosire. În urma studiului realizat pe alte site-uri web s-a constatat că pagina de contact trebuie să fie cât mai simplă, directă și/sau să ofere o metodă interactivă de contact prin intermediul unui formular, cerințe îndeplinite în pagina noastră de contact.

Concluzii

Site-ul realizat a fost ținut într-o fază de teste timp de 2 săptămâni cât a fost pus disponibil online pe un domeniu gratis (domeniul Go.ro ). Această perioadă de teste a fost aleasă pentru a putea documenta impactul site-ului de prezentare asupra clienților noștrii. Feedback-urile nu au încetat să apară încă din primele zile, fie că au fost prin formulare ,e-mail sau telefon. În urma acestor 2 săptămâni s-au adunat feedback-urile (impresiile) primite și s-au studiat. S-a observat că foarte multe dintre aceste impresii au fost pozitive și doar o mică parte dintre ele criticau conținutul site-ului. În urma feedback-urilor pozitive primite s-a determinat că site-ul nu necesită modificări majore, lucrându-se doar la partea grafică a acestuia (mici modificări și finisaje). Aceste feedback-uri sunt foarte importante un exemplu consecvent în acest sens fiind feedback-ul din sistemele cu buclă inchisă. Acest feedback va duce întotdeauna la reglarea sistemului în jurul valorii dorite, iar fără acest feedback sistemul ar putea furniza valori total nedorite la ieșire.

Proiectul este bine alcătuit încă de la început datorită faptului că folosește formatul HTML 4.01 și este realizat și verificat în totalitate cu program WebPlus X4. Aceste verificări s-au efectuat prin previzualizarea constantă a modificărilor făcute și prin verificarea proiectului întreg cu Site Checker Tool, utilitar valabil în WebPlus X4. Micile modificări necesare s-au realizat și prin intermediul editorului de texte Notepad , dar întotdeauna când s-au făcut modificări acestea au fost verificate imediat în 3 browsere de Internet : Internet Explorer, Mozilla Firefox și Opera. Deși la utilizarea Internet Explorer-ului s-au întâlnit anumite incompatibilități s-a procedat la eliminarea totala a acestora (faptul că nu mergea filmul de început a dus la implementare player-ului JW) . Totuși trebuie știut că atunci când site-ul este accesat de un client cu Internet Explorer acesta trebuie să aibă controlurile ActiveX activate, altfel va avea probleme în afișarea corectă a site-ului.

Însă în urma consultării cu directorul firmei la care lucrez și cu clienții noștrii am observat ca majoritatea oamenilor tind către utilizarea browserelor de Internet gratuite ,cum sunt Firefox și Opera, iar browserul produs de Microsoft pierde din ce în ce mai mult teren. Din acest motiv s-a trecut la urcarea site-ului pe un domeniu gratuit pentru a se observa cum acesta lucrează.

Deși lucrul a înaintat destul de greu și cateodată cu multe probleme din cauza incompatibilității cu anumite browsere de Internet, rezultatul final a fost încoronat de succes ,acest lucru fiind confirmat și de către directorul firmei unde lucrez. Necesitatea site-ului web a fost confirmată, iar cu un pic de noroc acest site poate fi în curând ales site-ul oficial al firmei. Singurul lucru care oprește definitivarea acestui site ca și site oficial este creșterea continuă a firmei, iar pe viitor se figurează și realizarea unei pagini de prezentare a soft-urilor realizate de către divizia de programare.

Însă satisfacția unui proiect bine realizat domină ambiția de dezvoltare al acestui proiect.

Consider că la baza succesului unui proiect nu stă neaparat un om. Echipa în majoritatea cazurilor decide rezultatul final. Fiecare persoană este supusă greșelilor, dar puterea de a trece peste greșelile făcute definește un ambițios de un învins. Prin echipă nu trebuie să se înteleagă doar asocierea a două persoane pentru realizarea unui scop. Uneori utilizarea unui ,, ajutor ,, informatic care automatizează anumite procese este mult mai benefică decât consultarea cu încă 2 colegi de echipă. Realizarea acestui site fără ajutorul programului WebPlus X4 ar fi putut avea cu totul alte rezultate, iar pe piața IT-ului un proiect pe jumătate făcut este ca un proiect nerealizat. Grație construirii automate a codului HTML și furnizării unor elemente gata de integrat s-a putut pune accent pe accesibilitate, performanță și mai ales designul site-ului ,design care devine din ce în ce mai important în ziua de azi.

Desigur și timpul contează ,iar în domeniul IT timpul este foarte important ,câteodată vital. Diferența dintre o firmă foarte bună și o firmă bună este timpul în care aceasta soluționează anumite probleme sau furnizeză soluții competente. Într-un final orice lucru este reparabil sau înlocuibil ,dar timpul cel mai scurt în care acesta este înlocuit s-au reparat determină succesul unei firme.

Același lucru se poate aplica și în cadrul publicității pe net. Această publicitate trebuie să existe la început dar să nu fie prea multă să duca la situații incompatibile pentru firmă. De acea un site de Internet nu trebuie realizat pe loc și afișat imediat pentru că poate duce la pierderea clienților dacă este realizat necorespunzător.

Trebuie urmați anumiți pași și trebuie să existe un sistem care să asigure feedback-ul clienților, feedback care este foarte important pentru realizarea unui lucru de succes.

Astfel prin studiul extensiv asupra mai multor site-uri de Internet și prin construirea inteligentă și asistată s-a putut realiza un site competent , care vine la momentul potrivit , exact la un an de la înființarea firmei. Sigur ,se poate pune și întrebarea logică dacă site-ul firmei noastre este mai bun sau mai deosebit decât site-ul altor firme. Această întrebare poate să își primească răspunsul în unele cazuri, dar sunt și situații în care unele site-uri nu pot fi comparate (din punct de vedere al designului, utilității lor, etc.).

Însă un lucru este sigur și se poate afirma cu siguranță: site-ul este DIFERT de site-urile altor firme, iar această difernță va contribuii cu trecerea timpului la succesul sau la eșecul proiectului realizat. Totuși se mai poate afirma de asemenea ca primele date arată că site-ul se îndreaptă către un succes sigur, și doar puține lucruri îl pot împiedica să nu urmeze acest traseu.

Proiectul are în componența sa toate elementele unui site de succes și aici mă refer la un design modern, la o accesibilitate și interactivitate sporită și mai ales structurare perfectă ,care îi asigură funcționalitatea.

“Succesul sau esecul e adesea determinat pe planseta de proiect.” Robert J. Mckain

Bibliografie

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: Pagina Web Pentru Comert Electronic (ID: 150091)

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.

Pagina Web Pentru Comert Electronic

Copyright Notice

Magazin Virtual Pentru Achizitie de Echipamente Diablos Computer S.r.l

Utilizarea Sistemelor Expert In Aplicatii

Extinderea Interoperabilitatii Aplicatiilor Software

Proiectarea Si Realizarea Unei Solutii Pentru Evidenta Cartilor Dintr O Biblioteca

Aplicatie Pentru Sistemul de Finantare a Spitalelor pe Grupe de Diagnostice

Sistem de Gestiune a Bazelor de Date

Copyright Notice

Similar Posts