DEZVOLTAREA UNEI APLICATII WEB PENTRU O FIRMA DIN DOMENIUL TURISMULUI [303070]

UNIVERSITATEA ”TITU MAIORESCU” DIN BUCUREȘTI

FACULTATEA DE INFORMATICĂ

DEZVOLTAREA UNEI APLICATII WEB PENTRU O FIRMA DIN DOMENIUL TURISMULUI

COORDONATOR ȘTIINȚIFIC:

Conf. univ. dr. Apostolescu Tudor Cătălin

ABSOLVENT: [anonimizat], [anonimizat](AngularJs), HTML si MySQL.

Aplicatia prezentata in aceasta lucrare este destinata unei firme din domeniul turismului si contine si o sectiune de administrare. Scopul aplicatiei este prezentarea ofertelor de cazare a unui hotel(pensiune), cu posibilitatea de a rezerva camere. [anonimizat].

Proiectarea unui astfel de site web are cateva aspecte pe care se concentreaza. Primul se refera la oferirea informatiilor importante: site-[anonimizat], tariful etc. Urmatorul aspect este posibilitatea de a [anonimizat] o anumita camera si o anumita perioada.[anonimizat], [anonimizat].

[anonimizat]-ului, pentru aceasta fiind implementat un mecanism de logare.

1. Internetul și importanța crearii paginilor web

1.1 Internetul

1.1.1 Istoria Internetului

Internetul s-a nascut la mijlocul anilor 60 in forma ARPAnet (Advanced Research Projects Agency Net) – o [anonimizat], un departament de cercetare din cadrul Pentagonului. ARPA a fost pus in functiune ca reactie la succesul sovietic al lansarii satelitului Sputnik in spatiu in 1957. [anonimizat]. [anonimizat].

De aici a [anonimizat]. In consecinta:

– doar un minimum de informatii era cerut de la computerele client in retea;

– [anonimizat], se gasea o alta cale catre adresa cautata.

[anonimizat]. [anonimizat]/IP (Transmission Control Protocol / Internet protocol), care este si acum baza Internetului. TCP/[anonimizat]'s, [anonimizat], Windows, MacOS etc. sa se inteleaga unele cu altele. [anonimizat] o platforma-independenta.

Internet-ul “civil” a inceput ca o [anonimizat]. [anonimizat]. [anonimizat] a unei retele.

La sfarsitul anilor 60 si inceputul anilor 70, cand Internetul numara in jur de 50 de computere, s-au dezvoltat primele dintre servicii, folosite inca si azi pentru transferul informatiei:

– File Transfer Protocol pentru trimiterea si regasirea fisierelor ;

– Telnet pentru accesarea si folosirea bazelor de date, a bibliotecilor si a cataloagelor din toata lumea;

– E-Mail pentru trimiterea mesajelor personale.

Internetul era in mod categoric in ascendenta. Cu noi grupuri de utilizatori care se alaturau, in urmatoarea decada, Internetul a crescut la o retea de 200 de computere. Partea militara era organizata intr-o retea separata, Milnet.

In acelasi timp, au aparut alte retele, mai ales in sectorul academic. Importanta printre acestea era (si este) USENET sau Users' Network, care a inceput in 1979, cand cateva UNIX-computere au fost conectate impreuna.

USENET. In sute de grupuri de discutii despre orice subiect imaginabil, oamenii faceau schimb de noutati si imagini, in ciuda distantelor si a hotarelor. Alte retele s-au dezvoltat de-a lungul USENETului. Toate formau baza unui spatiu de comunicatie radical democratic. De exemplu, inaintea unei noi discutii pe care grupul o incepea, comunitatii Netului i se cerea un vot de accept. Grupurile de discutii joaca inca un rol mare pe Internet. Exista mii si zeci de mii in intreg Internetul. Alta mostenire a USENET este 'Netiquette', sau regulile de comportament pe Internet.

Zece ani dupa ce USENET isi incepuse dezvoltarea, Internetul a crescut la 80.000 de computere. A inceput sa fie un factor de luat in considerare in politica. Si curand, expresia 'Information SuperHighway' (autostrada informatiei) a devenit uzuala. In aceasta metafora, Internetul era vazut ca o importanta infrastructura pentru transportul unor bunuri vitale – informatiile.

1.http://en.wikipedia.org/wiki/Internet

2.https://en.wikipedia.org/wiki/Usenet

In anii 80 si inceputul anilor 90, cand Internetul era folosit doar de un numar mic de cercetatori, arata mult diferit fata de prezent. Principalele aplicatii erau atunci posta electronica si grupurile de discutii (Newsgroups) plus diverse rutine de cautare si mecanisme de transfer al fisierelor. Aceasta era o lume UNIX, in care toate comunicatiile existau doar ca text sau numere, si liniile de comanda trebuiau memorate si tiparite.

Cand posta electronica, dar mai ales programele de cautare si de transfer al fisierelor au trebuit sa faca fata unor cerinte mai complexe, s-au dezvoltat noi navigatoare. Software-ul pentru fiecare trebuia sa fie obtinut si configurat separat. Folosirea fiecaruia trebuia sa fie invatata.

1.1.2 Ce este internetul ?

Internet-ul este o retea vasta de calculatoare care leaga milioane de retele mai mici din lumea intreaga. O retea este constituita in general dintr-un grup de calculatoare si de echipamente de calcul conectate pentru a oferi informatii si a gestiona resurse. Calculatoarele (PC-urile) dintr-un birou sunt, de obicei, interconectate pentru a putea utiliza aceleasi fisiere si aceiasi imprimanta. Toate calculatoarele legate in reteaua Internet pot schimba informatii intre ele. Este la fel de usor de comunicat cu un calculator dintr-un alt continent ca si cu unul din aceeasi camera. Putem spune ca o retea este un ansamblu de echipamente de tehnica de calcul (hardware), de produse-program (software) si infrastructura de comunicatie necesara, dedicate interconectarii calculatoarelor in vederea partajarii resurselor si serviciilor.

Servere-le si clientii: In Internet exista doua categorii importante de calculatoare: cele care inmagazineaza, sorteaza si distribuie informatiile se numesc gazde sau servere, iar cele care solicita accesul la aceste informatii si le utilizeaza se numesc clienti.

Liniile telefonice: Retelele de calcul care compun Internet-ul sunt legate prin sisteme telefonice private si publice. Ele pot trimite si primi informatii prin linii telefonice. Aceste linii variaza de la cabluri din fire de cupru pana la cabluri din fibra optica prin care se pot transmite mai multe date si cu viteza mai mare (de cca. 1000 de ori mai repede decat prin liniile telefonice din cupru). Unele retele pot fi legate si prin unde radio. Retelele din tari si continente diferite sunt deseori legate prin cabluri subacvatice sau prin sateliti.

Legaturile: Unele calculatoare – in special cele folosite de institutiile mari: universitati, departamente guvernamentale, mari companii etc. au o legatura la Internet „dedicata”, aceasta inseamna ca ele sunt legate la Internet tot timpul. De obicei, persoanele care folosesc calculatoare acasa sau la birou nu au legaturi „dedicate”. Ele pot sa solicite accesul la Internet folosind telefonul local si o procedura speciala (programe specifice pentru calculator). In felul acesta calculatorul de acasa sau de la birou intra in legatura, la cerere, cu un calculator deja „legat” in Internet (on-line).

1. https://ro.wikipedia.org/wiki/Client-server

Prin urmare Internet-ul este:

– o cale de comunicare foarte rapida si atractiva intre oamenii acestei lumi;

– modalitatea prin care oamenii aflati oriunde pe Glob pot comunica si schimba informatii cu multa usurinta;

– este o retea de retele. O retea este un grup de calculatoare care au fost conectate astfel incat sa poata comunica intre ele (sa faca schimb de informatii) Ele isi pot transmite mesaje unul altuia si pot folosi in comun informatiile sub forma de fisiere.

Figura 1: Distributia pe zone geografice a utilizatorilor de Internet la sfarsitul lunii noiembrie 2008.

Sursa:http://www.rasfoiesc.com/business/economie/comert/Piata-actuala-a-Internetului19.php

Dupa cum puteti vedea in graficul de mai jos, din 2008 si pana in 2015 numarul de utilizatori de internet s-a dublat la nivel global, apropiindu-se de jumatate din totalul populatiei planetei.

Se poate observa destul de clar si ca vorbim despre o crestere destul de liniara de la un an la altul, anul 2009 avand cea mai mare crestere dintre toti acesti 7 ani in care s-au inregistrat raportarile, insa numarul de utilizatori continua sa creasca in mod constant.

1. https://www.idevice.ro/2016/06/02/3-miliarde-utilizatori-internet/

Figura 2: Creșterea utilizatorilor de Internet la nivel global.

Sursa:https://www.idevice.ro/2016/06/02/3-miliarde-utilizatori-internet/

Retelele pot fi de mai multe tipuri:

LAN (Local Area Network)  –  acest tip de retea are dimensiuni relativ restranse, de pana la cateva sute de metri, ceea ce inseamna ca timpul de transmisie in cazul cel mai defavorabil este limitat si cunoscut dinainte. Cunoscand aceasta limita, este posibil sa se implementeze anumite tehnici simple care altfel nu ar fi fost posibile. Totodata, se simplifica administrarea retelei.

MAN (Metrropolitan Area Network)  –  retea extinsa la nivelul unui oras. Aceste retele folosesc cel mai des tehhologia fara fir (wireless) sau fibra optica pentru a crea conexiuni.

WAN  (Wide Area Network)  –  retea nationala. Se foloseste pentru interconectarea mai multor LAN-uri si a altor tipuri de retele, astfel incat sa se faciliteze comunicarea intre persoane si computere situate la mari departari unele fata de altele.

Toate  calculatoarele dintr-o retea trebuie sa comunice intre ele pe baza unui set de reguli fixe (limbaj), denumit protocol Protocolul folosit s-a standardizat  si se numeste TCP/IP (Transmission Control Protocol / Internet Protocol).

1. https://ro.wikipedia.org/wiki/Retea_de_calculatoare

1.1.3 Conectarea la Internet

Exista patru moduri principale de conectare la INTERNET:

-legatura permanenta (permanent connection);

-legatura directa prin modem (dial-in direct connection);

-legatura prin modem si terminal (dial-up terminal connection);

-legatura prin posta electronica.

Servicii disponibile in INTERNET

Comunicarea si schimbul de informatii in INTERNET se realizeaza prin “servicii”, ce permit exploatarea si cautarea de informatii aflate in aceasta uriasa retea. Pentru oricare dintre servicii exista un calculator care solicita informatii – un client al serviciului respectiv – de la un alt calculator care furnizeaza informatiile, numit server. Fiecare calculator legat in retea, poate fi atat client cat si server.

Cel  mai  utilizat  serviciu  in INTERNET este World  Wide Web (WWW).

Acesta este un sistem cu hipertext  care va ajuta sa va deplasati pe cale electronica in jurul lumii, cautand informatii. Web va permite sa “urmariti” legaturile. Pentru a folosi serviciul WWW,  aveti nevoie de un browser Web (rasfoitor prin INTERNET) un program care afiseaza documente Web.  (Mozila Firefox, Internet Explorer, etc).

Informatii necesare pentru conectare la INTERNET(preluate de la furnizorul de servicii):

-tipul de legatura asigurata prin SLIP (Serial Line Internet Protocol) sau PPP(Point-to-Point Protocol);

-denumirea utilizatorului;

-o parola;

-numarul de telefon pentru accesul pe plan local al furnizorului;

-adresa IP(Internet Protocol) pentru Domain Name Server (pe scurt DNS este metoda folosita de INTERNET pentru a crea denumiri unice pentru fiecare server de retea);

-tehnica de autentificare (denumirea pentru conectarea si parola inscrise intr-o fereastra, sau alte metode.

Toate paginile Web sunt identificate printr-o adresa unica, denumita Universal Resource Locator (URL – sistem universal pentru localizarea resurselor).

1.http://www.scritub.com/stiinta/informatica/CONECTAREA-LA-INTERNET23491.php

2.https://en.wikipedia.org/wiki/Domain_Name_System

3.https://searchnetworking.techtarget.com/definition/domain-name-system

1.2 Site-uri web

1.2.1 Notiunea de site web

Website-ul este o definit (S.M.H. Collin) ca fiind o colecție de pagini web, legate între ele și care pot fi accesate cu ajutorul unui program de navigare (browser).

Aceste pagini web sunt stocate pe servere web, fiind accesibile de utilizatori prin internet.

Primul server Web (Figura 3) și primele pagini Web au fost instalate pe 12 Decembrie 1991 la Standord Linear Accelerator Center (SLAC), unde acestea faceau legǎtura cu biblioteca centrului. Dar cel dintâi server web a fost realizat aproape cu un an înainte, la Centrul European pentru Cercetări Nucleare (CERN), la Geneva, în Elvetia, și s-a numit la început nxoc01.cern.ch, iar mai apoi info.cern.ch.

Notiunea de site web provine din limba engleza (web site) si desemneaza o grupa de pagini  multimedia (continand texte, imagini fixe, animatii s.a.), accesibile in Internet, de catre oricine, de obicei pe o tema anume, si care sunt conectate intre ele prin asa-numite hiperlinkuri. Diversele site-uri web pot fi create de catre o organizatie, o persoana particulara, institutii publice etc.

De obicei un site web este administrat (creat, intretinut si actualizat) de catre un asa-numit webmaster, dar exista si alte posibilitati:

– site-ul web se actualizeaza automat si permanent pe baza unei baze de date;

– paginile sale se creeaza in mod dinamic si automat in functie de actiunea utilizatorului in cadrul unei aplicatii web;

– World Wide Web, pe scurt WWW sau 'Web-ul,' este un univers de informatie disponibil prin protocol HTTP.

– site-ul web se creeaza si e administrat chiar de catre utilizatorii sai.

1.2.2 Tipuri de site-uri Web

Paginile HTML (Hypertext Markup Language) constituie in anumite conditii, cel mai ieftin mijloc de a publica informatii in Internet. Home page, sau pagina initiala reprezinta un document HTML care serveste ca punct de intrare initial intr-un  site web.

Pagina initiala trebuie sa contina informatii cu caracter general si introductiv precum si hiperlegaturi la resursele corelate. O pagina proiectata corespunzator contine butoane de navigare interne, care ajuta utilizatorul sa se deplaseze printre numeroasele documente la care are acces.

Practic, exista patru tipuri de site-uri Web:

a)  Site-uri cu pagini statice

b) Site-uri cu pagini dinamice

c) Site-uri dezvoltate pe baze de date

d) Magazine virtuale

a) Un site de prezentare static este alcatuit dintr-un numar de fisiere de tip HTML, care reprezinta paginile site-ului. Aceste pagini au un continut fix.

Daca este necesara modificarea continutului, aceasta va fi facuta in codul sursa si sunt necesare cunostinte de programare. Dupa schimbarea continutului urmeaza urcarea paginii modificate pe server. Nu este un procedeu prea la indemana pentru ca necesita mult timp.

Spre exemplu, daca doresti schimbarea meniului (ex.: Despre noi → Povestea noastra) va trebui sa se modifice codul HTML al fiecarei pagini in parte pentru ca meniul apare in toate paginile. Apoi va fi necesara reurcarea paginilor pe server.

Avantaje:

– este mai usor si rapid de realizat;

– cost initial mai mic;

– potrivit pentru companii mai mici;

Dezavantaje:

– schimbarile sunt greu de facut si solicita timp;

– necesita cunostinte web pentru modificarea continutului;

– continutul poate deveni stagnant;

b) Un site de prezentare dinamic este realizat cu ajutorul unui limbaj de programare cum ar fi PHP, ASP, JSP s.a.

Principalul si cel mai mare avantaj al unui astfel de site de prezentare este modificarea facila a continutului prin intermediul unui CMS (content management system). Astfel, continutul (pagini, postari, continut media) este stocat intr-o baza de date, iar apoi este preluat si afisat in site.

Realizarea acestui tip de site de prezentare este mult mai complicata, insa avantajele sunt foarte mari. Unu sau mai multi utilizatori pot edita, adauga, sterge continutul site-ului, sau chiar adauga pagini noi, intr-un mod usor si elegant. Aceste modificari se fac din panoul de administrare, fara a fi nevoie de cunostinte IT.

Avantaje:

– mult mai multe functionalitati;

– continutul este usor de schimbat si gestionat de oricine fara a avea cunostinte IT;

– poti adauga optiuni pentru interactiunea cu utilizatorii: blog, sectiune de comentarii, input de cautare in site, formular de abonare;

– reducerea costurilor de intretinere;

Dezavantaje:

– timp mai mare de realizare;

– cost de realizare mai ridicat;

Figura 3: Site static vs. site dinamic.

Sursa:http://owlgenius.ro/site-static-vs-site-dinamic/

c) Site-uri dezvoltate pe baze de date – aceste site-uri impun metode si tehnici speciale pentru realizare, necesitand actualizari frecvente ale elementelor componente. Aceste site-uri se administreaza extrem de greu, ele se bazeaza pe o baza de date (de exemplu: MySQL, Oracle), care poate fi actualizata in mod regulat prin intermediul unui program prioritar.

d) Un magazin virtual, magazin online sau magazin electronic (e-shop), este un website de comerț electronic destinat vânzării de produse și servicii. În cele mai multe dintre cazuri, magazinul online reprezintă o platformă pe care sunt adăugate produse. Aceste produse pot fi accesate și cumpărate cu ajutorul cărții de credit. Pe magazinele online complexe utilizatorii pot selecta modalitatea de plată: card de credit, transfer bancar, ramburs și modalitatea de transport: poștă, curier, avion etc.

Magazinul virtual are ca scop prezentarea și vinderea unor produse. Există posibilitatea realizării unor magazine virtuale pe platforme e-commerce software liber ca de exemplu: Open Cart, Magento, Woocommerce, Presta Shop.

Magazinele online avansate au CRM-uri, sisteme de management al clienților. Astfel, magazinele online identifică clienții noi, sau clienții fideli. Majoritatea magazinelor online oferă discounturi clienților fideli, discounturi care se pot face direct, printr-o reducere de preț sau printr-un cupon procentual(de exemplu 10% reducere) sau numeric(de exemplu -40 lei).

De cele mai multe ori cea mai mare provocare pentru un magazin online este câștigarea încrederii clienților.

Cu siguranță nu există caracteristici universale sau opțiuni de design care să garanteze succesul unui magazin online, însă există numeroase elemenete esențiale de care trebuie ținut cont la crearea unui magazin online.

Caracteristici:

1. Scopul principal – vânzarea produselor Pentru a scoate în evidență scopul principal al magazinul online, este necesar ca butonul „cumpără” să fie cât mai vizibil pentru vizitatorii siteului. Butonul „cumpără” este ceea ce face diferența dintre un magazin online sau simpla prezență online a unui brand.

2. Valorifică avantajele produselor tale Scopul unui vânzător online este acela de a convinge clinetul că are nevoie de produsele sale. Structurarea produselor sub „oferte speciale” sau „colecție nouă” au deseori impact asupra cumpărătorilor sporind rata de vânzare a produselor.

3. Câștigă încrederea clienților Deseori cumpărătorii online sunt mai atenți la produsele cumpărate și la modul în care aleg să își cheltuie banii. Înainte de a lua decizia de a cumpăra un produs vizitatorii doresc să afle cât mai multe detalii despre produsul dorit, despre procesul de achiziție, modatlitățile de plată, serviciul de livrare și garanțiile oferite, aceștia fiind factori decisivi în câștigarea încrederii clienților tăi. Realizează descrieri cât mai detaliate și adaugă poze aferente produselor.

1.https://ro.wikipedia.org/wiki/Magazin_virtual

4. Postează-ți „cartea de vizită” – logo Un logo remarcabil poate fi considerat cartea de vizită a magazinelor online. Când vine vorba de cumpărături online un logo cunoscut este un simbol liniștitor și un element de încredere pentru clienții magazinului tău online.

5. Oferă reduceri, transport gratuit și premii de fidelitate Oamenii sunt atrași, în marea majoritate de reduceri, însă unii sunt interesați de transportul gratuit al produselor, sau de oferirea premiilor de fidelitate. O mulțime de oameni, în perioadele de reduceri, cumpără cu ușurință orice produs care este la preț redus.

6. Ultimele noutăți Postează mereu ultimele noutăți, perioada de reduceri, sau evenimentele viitoare care dorești să le aduci în atenția clienților, pe pagina de start a magazinului online, facilitând astfel accesul la informație.În plus, în acest mod clienții fideli vor putea urmări produsele noi, fără a fi necesară navigarea prin stocul complet al magazinului tău online.

7. Implementează coșul de cumpărături, panou autentificare și casetă căutare Coșul de cumpărături este o caracteristică esențială pentru toate magazinele online, reprezentată printr-o icoană simbolică. Unele magazine online oferă posibilitatea autentificării pentru clienții deja existenți, unde aceștia pot verifica istoricul comenzilor, sau pot beneficia de oferte speciale sau reduceri la anumite produse. Implementarea în magazinul online a casetei de căutare constituie un avantaj, facilitând accesul la produsele specific căutate.

8. Afișează metodele de plată acceptate Magazinele online folosesc frecvent ca principale metode de plată: cardurile de credit, de debit, în numerar – ramburs, PayPal. Unele magazine online nu acceptă carduri de credit internaționale sau pot exista limitări tehnice de la o metodă de plată, motiv pentru care este important a se cunoaște metodele de plată acceptate; acestea sunt reprezentate sub formă de icoane și sunt afișate pe pagina de start a magazinului online.

9. Link către site-urile de socializare Se apreciază că site-urile de socializare sunt cele mai bune surse pentru a obține informații și constituie oportunități excelente pentru promovarea produselor magazinelor online. De asemenea, cu ajutorul site-urilor de socializare magazinele online pot aduce în atenția clienților ultimele noutăți.

10. Utilizează indicatori de credibilitate Indicatorii de credibilitate sunt reprezentați prin imagini mici sau logo-uri care conferă vizitatorilor o garanție în ceea ce privește securitatea tranzacților efectuate la nivelul magazinului tău online. Prezența acestor indicatori constituie un avantaj, clienții fiind asigurați de protecția datelor cu caracter personal.

11. Număr de contact vizibil și suport tehnic prin chat Numărul de telefon trebuie să fie vizibil pe fiecare pagină în parte a magazinului online, cumpărătorul având astfel posibilitatea contactării directe a vânzătorului. Apreciat de către cumpărători este și suportul tehnic oferit sub formă de chat, unde aceștia pot cere informații privitoare la produse și pot lua legătura cu echipa tehnică pe durată desfășurării programului de lucru a magazinului online.

1.https://ro.wikipedia.org/wiki/Magazin_virtual

1.3 Definirea și analiza web design-ului

1.3.1 Definirea conceptului de web design

Prin conceptul de web design se înțelege realizarea de site-uri web, de la momentul zero, cel al cenceperii structurii și a elementelor de bazǎ din punct de vedere al interfeței grafice, pânǎ la finalizarea lor prin încǎrcarea acestora pe un server web, unde vor fi accesibile prin intermediul unui browser prin internet.

În mijlocul anilor ’90, trend-ul discuțiilor între partenerii de afaceri era bazat pe existența unui site web de referințǎ al companiei. Un site web bine conceput era un nou mediu media ce era considerat atât de companii cât și de utilizatorii internetului ca fiind o unealtǎ inovatoare și “bine de avut”. Derulând evenimentele, cu 10 ani mai tarziu, putem spune cǎ “bine de avut” a devenit o necesitate și întrebǎri pe tema “prezența web” au evoluat în întrebǎri pe tema “scopul web”.Așadar, în zilele noastre, nu se mai pune problema existenței unui site, ci modul în care site-ul reprezintǎ business-ul și dacǎ folosești mediul web la potențial maxim.

Pentru o companie, site-ul web este considerat ca fiind o carte de vizitǎ a firmei, astfel, acesta trebuie sǎ reprezinte stilul business-ului într-o manierǎ cât mai profesionalǎ.

Din cauza tuturor aplicațiilor de tip ‘do-it-yourself’ disponibile atât gratuit, cât si contra cost pe internet, ce au interfețe de utilizare atât de simple si ‘user-friendly’, permit oricǎrui individ ce au cunoștințe foarte reduse în acest domeniu sǎ se autointituleze web designer. Dar site-urile web sunt mult mai mult decât înșiruirea unor informații pe o paginǎ. Sunt o mulțime de planificǎri și strategii ce trebuie aplicate înainte de a putea reprezenta cu succes o companie într-un mediu virtual.

Reprezentarea business-ului pe internet necesitǎ o strategie bine definitǎ pentru a avea succes. Un site de sucess nu reflectǎ doar imaginea companiei, ci și obiectivele sale. Prin acceptarea unui site realizat de un amator, imaginea si reputația firmei se va devalorifica. Astfel, un site poate face mai mult rǎu decât bine dacǎ nu este realizat într-un mod profesionist. Un website profesionist este o îmbinare perfectǎ între design (modul în care aratǎ) si funcționalitate (ceea ce face). Site-ul trebuie sǎ fie plǎcut din punct de vedere estetic, câteodatǎ chiar interactiv, pentru a capta atenția utilizatorului, dar trebuie sa fie informativ și funcțional în vederea oferirii calitǎții pentru a asigura o reîntoarcere a utilizatorului pe viitor.

Oamenii rareori merg cǎtre un site doar pentru cǎ le place design-ul, iar daca o fac, este foarte probabil ca acel user sǎ nu se mai întoarcǎ deoarece tehnicile de design ce nu este funcțional se demodeazǎ foarte repede. Așadar, cea mai provocatoare parte în conceperea unui website nu este cea de scriere și dezvoltare a lui, ci este cea de planificare și conceptualizare. Înainte de a începe orice proces de design sau development, e nevoie de a identifica scopul website-ului. Practic, ce mesaj dorește clientul sǎ transmitǎ și sub ce formǎ vrea sǎ facǎ acest lucru.

Pentru asta va fi nevoie de o întelegere solidǎ a domeniului de activitate a clientului pentru a facilita dezvoltarea site-ului pe stilul si necesitǎțile acestuia. Spre exemplu, pentru o companie de design grafic, website-ul nu ar trebui sǎ se asemene cu cel al unei instituții deoarece mesajul transmis în ambele situații este diferit unul fațǎ de celalalt. Pentru compania de design, conceptul trebuie orientat cǎtre un design creativ și inovativ, pe când în situația unei instituții, acest concept trebuie orientat cǎtre un design ce conferǎ încredere și securitate.

Procesul de dezvoltare al unui site web este influențat de mai mulți factori, precum:

– Identitatea brand-ului business-ului
Orice companie expune o imagine sau o identitate a brand-ului. Aceste brand-uri sunt concepute dupǎ investiții extraordinar de mari. Ele pot fi reprezentate prin:

logo-uri – arcele aurii de la McDonald’s, ‘Swoosh’-ul firmei Nike, marul mușcat de la Apple, etc.

mascote – iepurașul de la Duracell, clown-ul Ronald McDonald, etc.

slogane si fraze celebre – “Just do it” (Nike), “Priceless” (Mastercard), “Connecting people” (Nokia), etc.

Brand-urile sunt folosite pentru a promova afacerea în diferite medii multimedia, de la reclame în televiziune și radio la cǎrți de vizitǎ, scrisori, broșuri, postere și bineînteles website-uri.

Website-urile se diferențiazǎ de alte metode de promovare prin faptul cǎ ele necesitǎ un dezvoltator web (web developer). Acesta va trebui sǎ cunoascǎ nu numai modul în care audiența interpreteazǎ conținutul vizual, precum o broșurǎ, dar și modul în care audiența interacționeazǎ cu acest conținut multimedia. Lansarea blog-urilor, precum și a altor tehnologii Web 2.0 ce au fost lansate în ultimii ani au oferit unui business tot mai multe metode creative si interactive pentru a promova identitatea business-ului.

Cu toate cǎ website-urile oferǎ nenumǎrate posibilitǎți, business-ul ar trebui sǎ aibe deja un brand stabilit. În cazul în care firma se confruntǎ cu o crizǎ de identitate, e de preferat sǎ se evite proiecte de web design sau de redesign deoarece astfel de situații pot cauza confuzii.

– Tipul industriei

Site-ul trebuie sǎ aibǎ în vedere industria din care face parte pentru a realiza un profil al site-ului cât mai concludent pentru utilizator. De exemplu, pentru firme de avocaturǎ, ite-ul trebuie sǎ fie realizat într-un mod clasic și sobru, pentru industriile ecologice poate fi utilizatǎ culoarea verde iar stilul utilizat trebuie sǎ insufle dorința de conservare pe termen lung a mediului,

iar pentru o industrie de comerț electronic cu jucǎrii pentru copii se poate folosi o temǎ foarte coloratǎ cu desene și animații, atractivǎ pentru cei mici.

– Scopul website-ului și utilizatorii țintǎ

Conform grupului Startup Nation (2007), site-ul web este un instrument spealizat în aducerea de noi clienți pentru business-ul respectiv sau în cazul în care site-ul este un magazin virtual, vânzarea de produse cǎtre clienți și procesarea plǎților.

Așadar, principalul scop al unui web developer este de a cunoaște clienții companiei atât de bine încât sǎ ai rǎspunsul la orice întrebare clientul companiei poate adresa și crearea unei interfețe cât mai ușor de folosit pentru a facilita și în același timp eficientiza orice fel de interacțiune sau tranzacție.

Pentru a determina cât mai exact publicul țintǎ, trebuie sǎ se rǎspundǎ la un set de întrebǎri precum:

Ce vârstǎ au clienții care sunt interesați de acest site? Sunt bǎrbați, femei sau copii?

La ce se pot aștepta clienții de la un astfel de site / o astfel de companie?

Cât de inteligenți sunt utilizatorii de pe site? Au vreun anumit talent sau calitate specialǎ?

Unde locuiesc utilizatorii site-ului?

Sunt ultizatori experimentați ai internetului sau sunt la început? În oricare situație, care sunt grijile și temerile lor când vine vorba despre desfǎșurarea unui business pe pagina de internet sau pe internet în general? Având raspunsul la aceste întrebǎri (sau la oricare altele legate de acest subiect), se poate contura site-ul care va fi dedicat pentru un anumit public țintǎ, va îndeplini așteptǎrile utilizatorilor și se va adapta dupǎ zona în care majoritatea utilizatorilor locuiesc și dupǎ gradul lor de cunoștințe.

– Așteptǎrile online

Așteptǎrile online fac referire la percepția utilizatorilor asupra a ceea ce doresc sǎ gǎseascǎ atunci când acceseazǎ site-ul. Astfel, înainte de realizarea site-ului, trebuie sǎ se realizeze o cercetare pentru a identifica principalele aspecte pe care utilizatorii doresc sǎ le regǎseascǎ. Site-ul va reuni într-un mod echitabil doleanțele utilizatorilor și viziunea de business pe care dorește sǎ o prezinte firma care îl deține.

– Obiective pe termen lung a business-ului

Privind obiectivele pe termen lung, ne referim la faptul cǎ firma cǎreia îi aparține site-ul dorește sǎ creeze o imagine de calitate a companiei pe termen lung. Astfel se realizeazǎ un brand-awareness prin intermediul cǎreia se atrag mai mulți clienți pentru companie.

1.3.2. Analiza web design-ului

Alegerea unui domeniu

Alegerea unui nume de domeniu este similar cu alegerea unui nume de companie, de aceea necesita un amplu proces de gandire si de consideratie. Numele domeniului este numele pe care un vizitator il scrie in bara de adrese a browserului atunci cand acceseaza un site, insa privit dintr-o lumina mai ampla este defapt identitatea pe Web si trebuie sa va asigurati ca numele ales se potriveste cel mai bine nu numai cu tipul afacerii dvs, ci este de asemenea usor de gasit si de promovat.

Inainte de a va cumpara un nume de domeniu care vi se potriveste si va place, luati in considerare urmatoarele sfaturi pentru a va asigura ca ati facut alegerea potrivita.

1. Denumiri generice vs domenii cu nume de brand

Ani la rand, specialistii SEO sustineau ideea de a cumpara domenii care contineau cuvinte cheie specifice afacerii (numele produsului/serviciului), care ajutau in ocuparea de pozitii ridicate pe Google, Yahoo si alte motoare de cautare. Astfel ca, majoritatea oamenilor alegeau ca numele domeniului sa fie unul generic ca parfumuri.ro, de exemplu, daca vindeau parfumuri. Avand in vedere ultimele actualizari Google, sugeram alegerea domeniului ca nume de brand (poate fi chiar si numele firmei), deoarece in momentul in care oamenii cauta un cuvant cheie foarte general, cum ar fi flori, te pot gasi si pe tine daca ai noroc sa fii primul cu flori.ro dar pot gasi in special concurenta ta. Cu un site bine optimizat si promovat, nu exista nevoia de a include cuvinte cheie, pentru ca cu un nume de brand unic, te vor gasi doar pe tine.

2. Usor de scris

Gasirea unui nume de domeniu, care este usor de scris este critica pentru succesul online. Daca utilizati argouri (u in loc de you), cuvinte cu mai multe intelesuri, sau cuvinte imprumutate din alte limbi se poate crea confuzie in randul utilizatorilor si va fi dificil gasirea site-ul dumneavoastra.

3. Cat mai scurt

Daca numele dvs. de domeniu este lung si complex, riscati ca utilizatorii sa il scrie incorect. Ideal e ca numele ales sa fie scurt si simplu.

4. Memorabil

Exista milioane de nume de domenii inregistrate, prin urmare detinerea unui nume de domeniu atragator, usor de retinut si memorabil este un aspect esential. Dupa alegerea unui nume, testati daca are succes in randul prietenilor dumneavoastra.

5. Alegerea extensiei

Daca te vei adresa utilizatorilor romani este de preferat numedomeniu.ro, dar la fel de bine se poate opta si pentru celelalte variante (.eu; .com; .net; .us; .org etc). Din punct de vedere financiar domeniu .ro se plateste o singura data avand o valabilitate pe viata, iar celelalte se platesc anual. In cazul in care la crearea magazinului online se doreste targetarea la nivel international trebuie utilizata o extensie potrivita, cum ar fi .com sau .NET („network”=retea). Recomandam o extensie specifica zonei in care iti desfasori activitatea atunci cand site-ul prezinta serviciile sau produsele unei afaceri locale (.eu – Europa, .us– SUA, .ro – Romania) – de exemplu in cazul unui salon de infrumusetare. Pentru o organizatie e bine sa alegi .org, fiind o extensie web utilizata de grupuri non-profit sau asociatii profesionale guvernamentale.

Layout-ul

Layout-ul determina scheletul unui site – structura si spatiul in care elementele de design trebuie sa isi indeplineasca rolul. Crearea unui layout nu este usoara, designerul fiind nevoit sa ia in considerare inconsistentele dintre browsere si argumentele pro si contra unui tip de layout anume.

Alegerea unui anume tip de layout este deseori influentata de aptitudinile designerului si de perspectiva acestuia asupra layout-urilor, fie ca sunt "pixel-perfect" sau adaptabile.

Layout-urile pot fi impartite in 4 mari categorii, denumite in functie de abilitatea sau inabilitatea de a-si adapta dimensiunile in concordanta cu fereastra browser-ului utilizatorului.

1. Layout cu latime fixa

Figura 4: Layout cu latime fixa.

Dupa cum reiese si din nume, layout-ul cu latime fixa este un layout static a carei latime este setata in pixeli la o valoare absoluta. Designer-ul detine mai mult control asupra pozitionarii elementelor de design in zonele de continut si navigare si poate lucra mult mai precis.

Acest tip de layout este o alegere populara fiindca latimea fixa asigura pastrarea proportiei dintre elementele de design indiferent de rezolutia monitorului utilizatorului. Astfel, site-ul va arata la fel la rezolutii variate, iar timpul necesar dezvoltarii site-ului va fi redus datorita scaderii cerintelor de testare in diferite conditii.

Unul dintre cele mai mari avantaje ale acestui tip de layout este pozitionarea "pixel-perfect" a blocurilor de continut, aceasta devenind previzibila odata ce designerul este constient de latimea layout-ului sau.

Dezavantajul major al acestui tip de layout este ca nu profita de intreaga fereastra a browserului. Printre utilizatorii de monitoare wide exista intr-adevar tendinta de a redimensiona ferestrele browserelor astfel incat sa poata vedea si alte aplicatii ce sunt folosite in paralel (de exemplu clienti de chat). Totusi, exista riscul de a fi in situatia in care layout-ul poate crea spatiu lateral in exces, devenind suparator pentru echilibrul site-ului.

Desigur, alegerea acestui tip de layout atrage dupa sine intrebarea: 
"Care este latimea potrivita pentru layout-ul site-ului meu?"

Cel mai bun raspuns la aceasta intrebare sta in profilul utilizatorilor site-ului respectiv. Statisticile sunt o metoda de a afla, evaluand preferintele de browsing ale utilizatorilor. Din statistici se poate afla cu usurinta care sunt rezolutiile cele mai intalnite. O regula nescrisa arata ca mentinerea unei latimi intre 800 si 1000 de pixeli va conduce la o experienta buna a utilizatorului.

Daca se doreste ca utilizatorul sa aiba mai mult control asupra layout-ului, probabil designerul va opta pentru un layout adaptabil.

2. Layout variabil (fluid)

Figura 5: Layout variabil (fuild).

Acest tip de layout isi adapteaza latimea in functie de marimea ferestrei browserului. In acest tip de layout, majoritatea elementelor sunt definite in valori procentuale,

plecand de la proprietatile curente ale ferestrei browserului. Layout-ul variabil poate folosi foarte mult din fereastra browserului, distribuind astfel spatiul gol intr-un mod echilibrat.

Astfel, daca dimensiunea ferestrei se modifica, acelasi lucru se va intampla si cu layout-ul. Acesta determina si un dezavantaj major in cazul rezolutiilor mari, unde liniile de text pot deveni lungi si greu de citit, iar utilizatorul poate ajunge sa vada doar cateva linii scrise in zona de continut si elemente de navigare ce pot parea disproportionate.

Totusi, fata de layout-ul cu latime fixa, cel variabil ii permite utilizatorului sa controleze cum arata site-ul pe care il vede si reduce derularea paginilor. Nu uitati ca uneori o asemenea alegere este riscanta deoarece elimina previzibilitatea pozitionarii elementelor din mainile designerului, iar realizarea unui asemenea layout necesita cunostinte solide despre structura designului.

3. Layout elastic

Pentru a limita dezavantajul major al layout-ului variabil mentionat mai devreme, designerul limiteaza latimea maxima a acestuia din proprietatile CSS. Un layout elastic prezinta o abordare diferita care are acelasi scop; practic designerul ajusteaza latimea layout-ului bazandu-se pe dimensiunea fontului utilizatorului, nu pe a ferestrei browserului.

Daca un pixel nu este scalabil, un em este o unitate de masura a marimii fontului. Marimea fontului variaza, iar em-ul este acea unitate relativa care se adapteaza preferintelor utilizatorilor in privinta textului. Prin folosirea acestei unitati atat pentru blocurile de layout, cat si pentru text, layout-ul se va redimensiona consistent, dand impresia unui efect realist de zoom. Pe masura ce utilizatorul mareste fontul, layout-ul se "intinde" automat, imitand un obiect elastic.

Layout-ul elastic se comporta similar cu layout-ul cu latime fixa (deoarece nu depinde de marimea ferestrei browserului) si astfel mosteneste avantajele si dezavantajele acestuia. Totusi, pot aparea cateva probleme pentru designer cand lucreaza la un asemenea layout. Prima este calculul corect al valorilor in em, care poate da batai de cap. A doua este impactul asupra continutului multimedia. De exemplu, imaginile se vor redimensiona, depinzand de preferintele utilizatorului. Aceasta problema se poate repara prin diverse metode, insa va duce la cresterea complexitatii realizarii layout-ului.

Acest tip de layout este potrivit designerului care doreste un compromis intre latimea fixa si variabila. Alegand layout-ul elastic, designerul profita de avantajele fiecaruia, dar trebuie sa fie constient ca este mai dificil de implementat si necesita mai multe ore de testare pentru a gasi combinatia perfecta pentru majoritatea utilizatorilor.

4. Layout hibrid

De multe ori, designerul incearca sa gaseasca solutia care sa impace toate cele trei tipuri de layout descrise mai sus, pastrand avantajele fiecaruia si dorind reducerea la minim a dezavantajelor.

Un exemplu popular este setarea in unitati em a zonei de continut si a pixelilor pentru un bloc lateral (sidebar), dar exista posibilitati multiple de a combina procente, pixeli si unitati em pentru a obtine efectul dorit. Desigur, e de la sine inteles ca designerul trebuie sa inteleaga pe deplin structura layout-ului si interdependenta acestor combinatii, insa rezultatul poate fi o recompensa binemeritata.

Un layout bine ales tine cont de scopul site-ului, de aptitudinile designerului si de constrangerile de timp si cost. Abordarea latimii fixe deserveste mai bine site-urilor cu multiple elemente grafice, necesita un timp mai scurt de realizare si este mai intuitiva, dar necesita un cost mai mare de mentenanta decat abordarea prin layout variabil. Totusi, aceasta din urma necesita mai multe resurse de timp si bani.

Anatomia paginilor web

În ciuda faptului cǎ se poate aranja conținutul în paginǎ in milioane de feluri, doar anumite aranjamente au cu adevǎrat sens. Cu toate cǎ site-ul e la rândul sǎu împarțit în mai multe zone, majoritatea site-urilor folosesc aceleași componente, așa cum se poate observa în Figura 6:

Figura 6: Componentele folosite în majoritatea site-urilor web.

1. Antetul (Headerul)

Antetul de obicei este partea de sus a unei pagini si este partea dintr-o pagina care contine: numele site-ului, logo-ul, meniul principal al site-ului si alte elemente precum iconitele sociale si eventual un formular de cautare.

Poarta denumirea de antet pentru ca, de-a lungul timpului, pe hartia de scris dar si alte documente importante partea de sus a paginii continea informatiile de identificare ale persoanei sau companiei.  Antetul unui site poate fi si vertical, mai ales la unele site-uri sau teme mai noi.

Temele de WordPress au un fisier separat pentru antet, denumit header.php. Aici se poate adauga codul de urmarire de la G.Analitycs, sau se pot adauga bannere care trebuie sa apara sus pe pagina, pe fiecare pagina.

2. Logo-ul

Logo-ul poate fi grafic, poate fi de tip text sau poate fi si text si grafica.

Atentie: este o diferenta intre logo si „Header Image”. De obicei logo-ul este un simbol, o marca a unui brand/blog/produs, si desi el poate aparea intr-o imagine de header, cele doua nu trebuiesc confundate. Logo-ul este ceea ce poti translata ulterior pe carti de vizita, in avataruri de social media, in semnatura de e-mail, etc.

3. Meniul

Meniul, la fel ca antetul poate fi orizontal sau vertical.

Acesta poate fi static (adica atunci cand se da scroll in jos dispare din ecran), poate fi mobil (in sensul ca atunci cand se da scroll el ramane mereu in partea de sus a ecranului). El este gandit sa ofere o experienta de navigare cat mai placuta unui utilizator de site: ii pune la dispozitie cele mai relevante pagini (Despre, Contact), scoate in fata cele mai populare categorii de articole, sau alte utilitati de pe site (newsletter, blogroll etc.).

Unele site-uri au optiunea de a seta meniuri secundare (fie deasupra/dedesubtul celui principal, fie in footer/subsol).

Un alt termen important aici ar fi ideea de „bara de sus”. Avand in vedere ca designul astazi este atat inventiv cat si bogat in idei, „bara de sus” a unui site poate fi alcatuita din: date de contact, un meniu secundar, iconite sociale (social icons), un anunt de abonare la newsletter, samd. Meniul e meniu, si e atat de omni-prezent incat merita sa il cunosti pe nume.

4. Elemente secundare meniu (drop-down menu)

Atunci cand, precum in exemplul dat de mine mai sus, un meniu are si sub-pagini care sunt ordonate in meniu in functie de o alta pagina,

ca sub-elemente, acest ansamblu se numeste „drop-down menu”. Pentru ca atunci cand cineva trece cu mouse-ul peste elementul de care apartin cele secundare, ele se afiseaza in jos, pornind de la primul element.
Daca o pagina este astfel adaugata ca sub-pagina in meniu, ea apartine nivelului doi de navigare.

Pot exista si pagini pe nivelul 3 sau 4, dar de la nivelul 3 in colo lucrurile devin din ce in ce mai complicate, si riscul de a frustra un utilizator (mai ales in navigarea pe mobil) e real. Si merita evitat.

5. Continutul paginii

Continutul paginii reprezinta totalul elementelor dintr-o pagina care nu tin de Antet, Bara laterala sau de Subsol.Deși aspectul și conținutul paginii Home poate varia foarte mult de la un site la altul, existã câteva elemente comune prezente în orice paginã de start:

– Identificarea firmei sau companiei cãreia îi aparține site-ul (dacã este cazul);

– Descrierea scopului site-ului;

– Descrierea structurii site-ului;

– Furnizarea informatiilor de contact;

Pagina Home are și funcția de Cuprins al site-ului oferind indicații vizitatorilor asupra subiectelor abordate. Stabilirea relațiilor între secțiunile de nivel unu ale site-ului și cele subordonate lor. Aceasta se realizeazã prin intermediul barelor de navigare, butoanelor, hãrților de imagini sau listelor de legãturi.

6. Slider (carusel)

Sliderul (sau caruselul, desi exista sustinatori pentru ambele denumiri), a devenit o parte omniprezenta din viata site-urilor in ultimii ani. E atat de ubicuu incat unii utilizatori il pot chiar ignora cu desavarsire. Desigur, facut cum trebuie, el va prezenta vizitatorilor acele informatii vizuale necesare pentru o prima impresie favorabila.

Cateva greseli des intalnite:

a. Folosirea unui numar de slide-uri prea mare;

b. Folosirea unor imagini prost alese: prea mici, sau prea mari. Prea urate, sau disonante cu restul paginii.

c. Adaugarea unui slider atunci cand o singura imagine ar fi mai de impact, si mai utila. In acest caz sliderul ar fi inlocuit cu un header image.

7. Paginatie

Paginatia este acea zona care poate contine fie butoane de inainte/inapoi, fie paginile anterioare/urmatoare, numerotate. Uneori in loc de paginatie, unele site-uri folosesc endless-scroll, insa acesta poate pune probleme de SEO, de navigatie sau pur si simplu poate deveni enervant pentru utilizatori pentru ca tinde sa continue sa incarce continut la infinit.

8. Subsolul (Footerul)

Subsolul este ultima parte a fiecarei pagini. El poate sa contina cateva informatii sumare: un meniu prescurtat/secundar, date de contact si linkuri sociale. De asemenea poate contine o zona de widgeturi, unde se pot adauga componente precum: casute de abonare, facebook like box, sau linkuri utile.

Culorile folosite

1. Psihologia culorilor

Principalul pilon al comunicării vizuale este culoarea. Aceasta are o putere mare de comunicare, mai ales la nivel senzorial și subconștient. Prin culoare se pot sugera trăiri, se pot induce stări și se pot crea senzații. De altfel, culoarea este folosită ca principal mijoc de comunicare încă din vremuri antice, prin urmare, este esențial să știm teoria culorii.

Figura 6: Sfera culorii.

In acest domeniu, alegerea corecta a culorilor pentru un website este o operatie esentiala. Multi designeri de pagini, cand vine vorba de realizarea unui layout web, se gandesc doar la imbinarea armonioasa a culorilor, fara a se mai gandi la psihologia culorilor pentru vizitatori.

a. Rosu este cea mai intensa culoare, deseori asociata cu dragostea si romantismul, insa poate fi si foarte stridenta. Este folosita in general ca „accente”, in cantitati mici, insa daca doresti sa realizezi un website cu un aspect indraznet, rosul poate fi varianta potrivita pentru tine. Astfel, cu ajutorul acestei culori vei putea transmite un mesaj puternic vizitatorului, pe care cu siguranta il va receptiona corespunzator. Rosul il gasim de cele mai multe ori in combinatie cu alb, sau mai rar cu galben.

b. Portocaliul este o culoare foarte des folosita in designul web, aceasta adresandu-se in general tineretului. Putem spune ca portocaliul inspira creativitate, distractie, prospetime, sanatate si poate fi folosit cu succes pentru site-urile cu teme sportive.

c. Galben este o culoare stralucitoare, este folosit mai rar, cu precadere la site-urile destinate copiilor. Inspira bucurie, amuzament, caldura, confort.

d. Verdele inspira viata, armonie, sanatate si optimism. Poate fi folosit in realizarea site-urilor cu tematica culinara, proiecte scolare, magazine online. Utilizatorii se vor simti confortabil si relaxati cand vor accesa un website cu tematica unde predomina culoarea verde. Poate fi folosit de asemenea si in website-uri ce promoveaza produsele BIO.

e. Albastru poate fi folosit in web design pentru site-urile corporate in mod special. Culoarea albastru inspira profesionalism si seriozitate, promovand un sentiment de siguranta in mintea vizitatorului.

f. Violet. Aceasta culoare este des intalnita la website-uri cu produse cosmetice, aceasta simbolizand lux, eleganta, fantezie, gusturi fine. In general este folosit in combinatie cu negru sau nuante inchise.

g. Gri poate fi asociat cu inteligenta, simplitate, seriozitate. Este des folosit in web design, in special la site-urile corporate, insa un design complet gri poate fi monoton, de aceea apare in combinatie cu alte culori.

h. Alb si Negru au fost intotdeauna cele mai bune optiuni cand s-a dorit un layout simplu, fara prea multe elemente. Negru exprima mister si rafinament, in timp ce alb exprima puritate si curatenie. Folosite in combinatie intr-un website, acestea vor avea impactul potrivit asupra vizitatorului.

2. Valoarea culorilor:

Mǎsura folosita de luminozitate aplicatǎ unei culori este recunoscutǎ ca fiind valoarea unei culori. Aplicarea unei luminozitate corespunzǎtoare în folosirea culorii poate face o mare diferențǎ într-o paginǎ.

Aici putem discuta despre saturația (intensitatea) culorilor folosite. Saturația definește intensitatea unei culori. Culori ce pot fi mai luminoase sau mai întunecate.

3. Teoria culorilor

Pentru a putea înțelege ce culori trebuie alese într-un website, trebuie folosit conceput de sintezǎ aditivǎ.

Sinteza aditivă a unei culori constă în obținerea luminii de o anumită culoare prin combinarea unor surse de lumină de diferite culori fixate, numite culori primare. Culorile primare sunt Roșu (Red), Verde (Green) și Albastru (Blue), într-un cuvânt – RGB. Așadar, orice culoare prezentǎ pe site va fi o combinație între aceste 3 culori. Modelul RGB este ilustrat în Figura 7.

Figura 6: Modelul RGB.

Tipografia

Modelul unui design de success este cel care oferǎ o comunicare cât mai bunǎ cu utilizatorii. Fie cǎ este vorba despre un site de comerț electronic, un site de prezentare pentru o companie sau un site de tip rețea de socializare, tipografia folositǎ este o componentǎ extrem de importantǎ.

In primul rand, folosirea elementelor Heading tags <h1>, <h2>, etc. pentru a atribui importanta unor elemente de pe site-ul tau. Motoarele de cautare interpreteaza astfel prioritatea continutului pe pagina si pot structura mai bine continutul tau. Poti corela importanta acestor H tag-uri cu continutul site-ului prin folosirea unor tehnici de styling precum: marime, grosime, culoare, pozitie si tipul contrastului. In cele mai multe cazuri se folosesc toate elementele impreuna.

Marimea este cea mai utilizata metoda de a stabili ierarhia. Tine cont de faptul ca marimea fontului trebuie sa corespunda cu designul siteului tau si ca textul trebuie sa fie lizibil de pe diferite browsere si alte dispozitive. Alege o marime potrivita a fontului si foloseste-te intr-un mod inteligent de css breakpoints pentru a face textul cat mai usor de citit pe orice dispozitiv.

Grosimea ajuta la evidentierea unor elemente ce dorim sa le evidentiem cititorului – ma refer desigur la Bold.

Culoarea este tehnica prin care ochii vizitatorilor stabilesc ce e principal si ce e secundar, spre exemplu culorile calde ies in evidenta pe cand culorile reci sunt mai retrase.Este necesara alegarea unor culori care au sens, in ceea ce priveste identitatea brandului/siteului.

Pozitia stabileste o ierarhie prin modul in care sunt pozitionate sectiunile de informatii in relatie unele cu altele. Aici intra in joc si white space-ul, care ne poate ajuta sa scoatem in evidenta anumite fragmente de text.

Fontul trebuie asigurata lizibilitatea sa pentru ca va afecta viteza de citire a vizitatorului si intelegerea textului. Tipul fontului ofera si el starea (vibe-ul / moodul)site-ului: de la jucaus la professional.Fontul ales trebuie să fie ton cu tema siteului sau a blogului. Comic Sans ar fi absurd pe un blog ce abordeaza teme serioase.
Nu este indicat folosirea prea multor fonturi pe site. Poti folosi un al doilea font pentru titluri, subtitluri sau citate, insa este de preferat sa folosesti doar un font pentru a mentine o continuitate a designului daca nu esti sigur ce fonturi merg bine impreuna.
Moderatia si minimalismul sunt calitati importante in estetica tipografiei.

1.3.3. Limbaje de programare folosite în web design

Cu cât mai mult este întrebuințat internetul, cu atât apar mai multe site-uri noi, pagini web, portaluri internaționale ș.a.m.d. Pentru elaborarea site-urilor sau a paginilor web sunt folosite mai multe tehnologii și limbaje de programare precum: HTML, CSS, SGML, JS, XML, PHP etc.

HTML (Hypertext Markup Language) – HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemănător cu documetele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi, PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează pagini HTML.

HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe liste de e-mail le blochează intenționat.

CSS (Cascading Style Sheets) – Permite o afișare mai clară, mai flexibilă a informațiilor stocate în cadrul unui document. Acest limbaj este un standard pentru formatarea elementelor unui document de tip HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe (ce au extensia .css) sau în cadrul documentului, prin intermediul elementului <style> și/sau atributul style. Acest limbaj folosește selectori pentru a identifica pe ce atribut se aplicǎ un anumit format. Un selector poate fi aplicat pentru orice atribut dintr-o paginǎ sau pentru un singur atribut prin folosirea unui „id” sau o „clasǎ”.

https://en.wikipedia.org/wiki/HTML

SGML (Standard Generalized Markup Language) – Standard internațional pentru definirea unor metode de reprezentare a textelor în format electronic, independent de dispozitiv și de sistemul de calcul. În seria de articole referitoare la acest standard vom încerca sa prezentăm istoricul și caracterizarea generala ale SGML-ului, plus structurile, declarațiile, proiectele și aplicațiile bazate pe SGML.

JS (Javascript) – JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul JavaScript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru accesul la obiecte încastrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Până la începutul lui 2005, ultima versiune existentă a fost JavaScript 1.5, care corespunde cu Ediția a 3-a a ECMA-262, ECMAScript, cu alte cuvinte, o ediție standardizată de JavaScript. Versiunile de Mozilla începând cu 1.8 Beta 1 au avut suport pentru E4X, care este o extensie a limbajului care are de a face cu XML, definit în standardul ECMA-357. Versiunea curentă de Mozilla, 1.8.1 (pe care sunt construite Firefox și Thunderbird versiunile 2.0) suportă JavaScript versiunea 1.7.

1.3.4. Trend-uri în web design

Prioritate pe optimizarea site-ului pentru dispozitive mobile

Potrivit statisticilor, in anul 2016, 43,6 din traficul online din intreaga lume a fost generat de telefoanele mobile, fata de 35,1% in 2015. Cresterea este evidenta. Importanta designului optimizat pentru mobil este un trend in crestere constanta, lucru absolut normal in conditiile in care traficul pe mobil creste spectaculos.

Paginile de tip AMP (Accelerated Mobile Pages) devin tot mai importante. AMP este un proiect tip open-source, lansat in anul 2015 si are ca drept scop redarea paginilor unui site mult mai rapid. Poti recunoaste o pagina AMP datorita iconului cu un fulger inainte de descriere (in Google, in lista cu rezultatele relevate in urma unei cautari).

Cresterea numarului de site-uri create pe platforma WordPress

WordPress este cea mai folosita platforma cand discutam despre crearea unui site. Sunt prea multe avantaje pe care le ofera WordPress ca sa nu-si merite locul I in ierarhia solutiilor de tip CMS (Content Management System).

Fonturi mai mari si mai bolduite pe fundaluri simple

Pentru completarea stilurilor moderne de design vei avea nevoie de un font care sa evidentieze mai bine mesajul pe care vrei sa il transmiti.Printr-un font indraznet, mare si ingrosat poti face ca mesajul tau sa fie mai bine retinut si poti creste rata de conversie.Utilizarea fonturilor pe fundaluri simple si nu pe imagini va fi benefica si pentru vizitatorii care acceseaza site-ul de pe mobil. Este cunoscut faptul ca imaginile incetinesc viteza site-ului pe dispozitivele mobile.

Cresterea numarului de elemente de marketing in site

Pe plan mondial oamenii inteleg ca un site este mijloc prin care poti obtine succesul si isi dau seama ce instrument important au la indemana.

Ca elemente de marketing în site pot enumera: pop-up inteligent pe anumite pagini, pop-up care apare atunci cand vizitatorul paraseste site-ul, formular de abonare la newsletter cu legatura automata la un serviciu de e-mail marketing, sistem de abonare automata la articole..etc.
Vom asista in 2018 la o crestere a numarului acestor elemente in site-uri.

Animatii mai avansate la derularea paginilor

Animatiile se declanseaza in momentul in care un vizitator deruleaza pagina. Daca acum cativa ani era foate important ca pagina sa fie cat mai scurta, astfel incat vizitatorul sa nu deruleze prea mult, acum este ok sa avem o pagina lunga. Aceste animatii nu sunt noi dar modul in care sunt folosite este nou. Cele mai bune animatii sunt minimaliste si pot scoate in evidenta anumite blocuri de text, butoane sau formulare, astfel incat sa creasca rata de conversie.

Animatiile pot transmite o experienta mai interactiva celor care iti viziteaza site-ul daca sunt folosite in mod inteligent.

Designul responsive

Un website este responsive daca are capacitatea sa-si adapteze layout-urile (designul) paginilor in functie de mediul de vizionare (mai precis de rezolutia ecranului – desktop, laptop, tableta, telefon), fara a suferi degradari majore, pentru a le oferi utilizatorilor o experienta excelenta de navigare.

Ce presupune crearea unui design responsive:

a. Gridurile fluide au luat inevitabil locul celor fixe datorita multitudinii de rezolutii existente in prezent. Acestea se bazeaza pe calculul proportiilor si isi pot modifica latimea si inaltimea in functie de rezolutie. Dimensiunile nu se mai masoara in pixeli, ci in procente si unitati relative.

b. Imaginile flexibile isi pot modifica dimensiunile in functie de rezolutia dispozitivului si dimensiunea gridului. Este indicat sa fie salvate pe server mai multe dimensiuni pentru fiecare poza, iar mai apoi sa fie incarcata dimensiunea potrivita rezolutiei.

c. Interogarile media (media queries) reprezinta un procedeu eficient de a incarca diferite proprietati CSS in functie de rezolutie. Site-ul recunoaste automat tipul dispozitivului si rezolutia acestuia incarcand proprietatile CSS corespunzatoare.

Mai mult material video in site

Un video, daca este bine gandit si realizat, poate tine conectat un vizitator mai mult timp in site. Google vede acest lucru si va pune site-ul tau intr-o lumina mai favorabila. Un ulterior proiect SEO (optimizarea site-ului pentru motoarele de cautare) va fi mai usor de implementat, site-ul avand deja o bila alba din partea Google.

In plus, video-marketing-ul continua sa fie pe un trend ascendent, de acum insa, video-urile nu vor mai fi prezentate doar pe YouTube sau Vimeo, le vom insera si in site.

1.3.5. Optimizarea site-ului în motoarele de cǎutare

Este un proces de perfecționare (favorizare) a vizibilității site-urilor web sau paginilor web în cadrul ordonării rezultatelor căutării în lista făcută de motorul de căutare. SEO este o subcategorie a marketing-ului online SEM, practică apărută în anul 1990,

odată cu apariția primelor site-uri pe Internet, și care reprezintă totalitatea tehnicilor prin care un site web este adus la o formă în care este propulsat mai sus în lista de rezultate date de un motor de căutare pentru diverse cuvinte-cheie, astfel mărindu-se traficul calitativ al site-ului și experiența oferită utilizatorilor. Această „industrie” relativ nouă implică un set de operații efectuate de echipa de promovare în sensul creșterii pozițiilor unui site web în lista de rezultate ale căutărilor, pentru anumite cuvinte sau expresii cheie, interesante și relevante din punctul de vedere al afacerii respective.

Optimizarea corectă a unui site conduce la o mai bună prezență în motoarele de căutare la căutări relevante efectuate de utilizatori, legate de informațiile, serviciile sau produsele prezentate pe site. Acest lucru conduce la mai mulți vizitatori, mai multe persoane interesate și mai multe vânzări. Însă asta nu este tot ceea ce face SEO, impactul lui fiind unul mult mai vast și mai benefic.

SEO ajută:

motoarele de căutare să își facă mai bine treaba;

oamenii să găsească informațiile, imaginile, produsele de care au nevoie;

firmele mici să concureze cu marile companii;

o adevărată industrie de specialiști și traineri să aiba locuri de muncă;

la reducerea cheltuielilor cu promovarea online;

Un motor de căutare este un program apelabil căutător, care accesează Internetul în mod automat și frecvent și care stochează titlul, cuvinte cheie și, parțial, chiar conținutul paginilor web într-o bază de date. În momentul în care un utilizator apelează la un motor de căutare pentru a găsi o informație, o anumită frază sau un cuvânt, motorul de căutare se va uita în această bază de date și, în funcție de anumite criterii de prioritate, va crea și afișa o listă de rezultate.

Orice motor de căutare are trei elemente majore:

robotul de căutare:(robot, spider, sau web crawler) este un program care vizitează paginile web, le citește și apoi urmărește legăturile către alte pagini.

index sau catalog: unde sunt trecute informațiile despre fiecare pagină web pe care le găsește robotul (titlul și adresa paginii, cuvinte cheie, porțiuni de text din paginile vizitate, legături către alte pagini etc.)

pentru aceasta, robotul utilizează un fișier text (robots.txt) aflat în rădăcina site-ului care poate permite sau restricționa roboții motoarelor de căutare să acceseze paginile site-ului.

software-ul de căutare: care permite căutarea printre multitudinea de pagini înregistrate în index precum și afișarea rezultatului sub forma unei liste de legături, în ordinea relevanței.

2. Proiectarea generalǎ a site-ului

2.1. Scopul și necesitatea site-ului

Din ce în ce mai multe în ultimul timp, aplicațiile online de management hotelier dedicate pensiunilor și hotelurilor mici, au rolul de a-l ajuta pe patron/administrator să îmbunătățească modul în care decurg activitățile în unitatea sa, în principiu prin economisirea de resurse (timp și bani). Majoritatea aplicațiilor sunt axate pe diminuarea considerabilă a timpului investit în realizarea activităților de zi cu zi (crearea, editarea, ștergerea rezervărilor, emiterea de facturi, vânzarea de produse și servicii adiționale, modificarea tarifelor, analiza rapoartelor etc).

Site-ul unui hotel conferǎ urmǎtoarele avantaje:

Datorită faptului că sunt online, nu e nevoie de achiziționarea de hardware performant, servere de backup, echipamente speciale de rețelistică sau licențe separate pentru fiecare calculator.Tot ce trebuie să facă administratorul pensiunii este să creeze un cont care poate fi accesat pe baza unui nume de utilizator și a unei parole de pe orice calculator conectat la internet (ca și conturile de email).

Un alt mare avantaj este accesibilitatea. Cum spuneam și mai sus, oriunde te-ai afla, poți să

rămâi conectat cu activitățile din unitate, cu condiția să ai un calculator/laptop/tabletă și acces la internet.

Printre alte avantaje aș mai enumera: sistemul unificat de funcționalități (majoritatea aplicațiilor acoperă aspectele importante: rezervări, clienți, facturi, servicii, rapoarte, menaj) nefiind astfel nevoie să se utilizeze aplicații diferite; rezervările centralizate (toate rezervările, cele directe, prin telefon sau prin site-ul pensiunii sunt adunate și administrate din același loc); responsabilitatea tehnică ce nu cade în grija clientului, ci a dezvoltatorului.

Am dorit sǎ realizez un site dupǎ propria viziune și percepție, un hotel/pesiune trebuie sǎ conținǎ obligatoriu 2 parti 😮 parte de tip informațional și una de tip administrativ. Acest site a trebuit sǎ punǎ la dispoziție informație atât pentru actualii, cât și pentru potențialii clienti. Astfel, doresc sǎ aduc o schimbare prin faptul cǎ pastrez doar informațiile esențiale, punând accent pe aspect printr-un design inovativ. Contribuția proprie și inovația pe care le aduc în acesta aplicatie constǎ în special în reorganizarea informației într-un mod mai atractiv și interactiv pentru clienti. Totodatǎ am dorit sǎ aliniez site-ul hotelului/pensiunii cu trend-urile actuale în materie de web design, luând drept model alte site-uri de acelasi profil.

2.2. Planificarea structurii aplicatiei

Construirea unui site este asemenea contruirii unei case. Dacǎ acest proces începe cu o schițǎ, fiecare etapǎ va fi clar delimitatǎ și trecerea la pasul urmǎtor va fi mult mai ușoarǎ.

În elaborarea design-ului conform figurii 7, organizând tot conținutul de pe site-ul actual într-un meniu cu 2 componente principale, fiecare având pagini separate.

Figura 7: Organizarea Aplicatiei

Sursǎ: Creație proprie

În pagina clientului aș vrea sa plasez doar un meniu principal care sǎ fie împǎrțit în 4 elemente: Pagina de Home, Pagina prezentare camere disponibile, Pagina Rezervari și Contact.

Pagina de home – Pagina ce o sa contina o imagine de efect pe intregul ecran cu un buton care va trimite clientul catre un mic formular de rezervarea unei camere.

Pagina rezervari – Pagina ce sa o sa contina o descriere la alegerea administratorului aplicatiei si un formular detaliat pentru rezervarea unei sau mai multor camere.

Pagina prezentare camere disponibile – Pagina ce o sa contina o descriere la alegerea administratorului aplicatiei si prezentarea in detaliu fiecarei camere.

Pagina Activitati – Pagina ce o sa contina o prezentare a atractiilor turistice din zona hotelului/pensiunii sau prezentarea activitatilor organizate in incinta sa.

Pagina Contact – Pagina ce o sa contina detalii despre locatie , o harta interactiva Google Maps si un formular pentru a trimite un mesaj administratorului aplicatiei.

In pagina administratorului as vrea sa plasez 3 pagini : Pagina inregistrare, Pagina logare si Pagina pentru administrarea aplicatiei.

Pagina de inregistrare – Pagina ce o sa contina un formular pentru crearea conturilor de acces.

Pagina de logare – Pagina ce o sa contina un formular de logare in pagina administratorului.Aceasta operatie se va face dupa ce a fost completat formularul din pagina de inregistrare.

Pagina administratorului – Pagina ce este organizata in 3 tab-uri: calendarul in care este afisat toate detaliile legate de rezervariile clientilor, contact in care se afla o lista a tuturor mesajelor scrise de clienti din pagina de contact(pagina clientului) si ultimul tab pune la dispozita administratorului configurarea paginii de prezentarea a camerelor disponibile(pagina client).

3. Prezentarea site-ului propriu-zis

3.1. Elementele componente

În acest subcapitol doresc sǎ prezint elementele componente ale site-ului, împreunǎ cu modul în care acestea au fost realizate. Elementele componentele pe care vreau sa le prezint sunt: bara de navigatie(navigation bar), tipografia si culorile. De asemenea sunt prezentate și pǎrțile componente de tip header și footer.

3.1.1.Componente principale

1. Prima și cea mai importantǎ parte a fost design-ul navigation bar-ului. Din punct de vedere a design-ului, am decis sǎ folosesc un meniu, în formǎ dreptunghiularǎ, culoare din fundal fiind transparenta , urmând schema prezentatǎ în capitolul anterior plus inca un element de “drop-down button” in care utilizatorul isi poate alege limba dorita(engleza/romana). Culoare fundalului din bara de navigatie devine negra in momentul in care utilizatorul navigheaza in josul paginii(800px);

Figura 7: Design-ul navigation bar-ului(fundal transparent)

Sursǎ: Creație proprie

Figura 8: Design-ul navigation bar-ului(fundal negru)

Sursǎ: Creație proprie

Pentru a da originalitate site-ului, am unit bara de navigatie cu imaginea de fundal pentru a simplifica design-ul și a da o notǎ interactivǎ site-ului per total, proces ce va fi detaliat în capitolul urmǎtor. Meniul cuprinde 4 secțiuni: Acasa, Camere, Rezervare, Contact si un buton drop-down dupǎ cum se poate observa în figura 8.

Aceste design al meniului a fost realizat în conformitate cu principiile descrise în capitolul 1.3.2. Analiza web design-ului, mai exact:

– Menținerea echilibrului printr-o echilibrare simetricǎ (formalǎ) – fiecare din cele 4 componente fiind intr-o simetrie exactǎ;

– Layout elastic conform figurilor 9 si 10(ca exemplu este data pagina de contact), figura 9 va prezenta aplicatia ruland pe un display de 1639px cu 838px iar figura 10 va prezenta aplicatia ruland pe un smartphone, dimensiunile fiind 411px 823px;

Figura 9: Aplicatia rulata in parameterii 1639px cu 838px.

Sursǎ: Creație proprie

Figura 10: Aplicatia rulata in parameterii 411px 823px.

Sursǎ: Creație proprie

– Culoarea neagrǎ – Deoarece este integratǎ în meniu, aceastǎ culoare simbolizeazǎ putere și eleganțǎ.

– Culoarea albǎ – Deoarece este culoarea ce reprezintǎ curǎțenia, perfecțiunea și puritatea, aceasta a fost aleasǎ pentru culoarea textului.

– Contrastul – Este aplicat la titlu deoarece în numele titlurilor este vizibil un contrast între culoarea ablǎ a textului și culoarea neagrǎ a benzii folosite pe fundalul textului.

2. Imaginea de fundal este aleasǎ astfel încât sǎ scoatǎ în evidențǎ locatia. In mediul online, folosirea imaginilor este o necesitate si mai ales daca dorim sa promovam un serviciu sau produs.

Crearea unui web site, prezentarea unui serviciu sau prezentarea unui produs in mediul online, este mult mai avantajat daca detine una sau mai multe imagini. Peste 90% din informatiile procesate de creerul uman sunt sub forma de imagini, de aici vine si zicala „o poza face cat o mie de cuvinte”!

In poza de fundal aleasa de mine din figura 11 veti vedea un model de imagine care se incadreaza in detaliile de mai sus.

Figura 11: Imagine fundal.

Sursa:https://wallup.net/wp-content/uploads/2015/01/timelapse-hdr-city.jpg

3.Tipografia trebuie sǎ susținǎ stilul site-ului, sǎ fie formalǎ dar în același timp atractivǎ pentru clienti.

Fontul ales este ‘Allerta’ datorita faptului ca este un font creat de Google si este in tema cu intreaga aplicatie, aceasta avand la baza componente Angular Material, prezentate in capitolul urmator.Fontul ‘Allerta’ a fost lansat ca un proiect open source, astfel încât acele țări, comunități și / sau organizații fără un sistem de semnalizare propriu-zis să aibă o modalitate de a proiecta și implementa rapid unul.

Allerta a fost proiectat pentru a fi ușor și rapid citit de la distanță. Fiecare literă exploatează cele mai unice aspecte ale scrisorii individuale, astfel încât fiecare caracter să poată fi distins cu ușurință de oricare alta.

4.Culori – Culorile predominante din cadrul site-ului sunt albastru, alb, gri și negru.

Culoarea albǎ este folositǎ deoarece reprezintǎ, din punct de vedere psihologic, curǎțenie, liniște și sobrietate. Aceastǎ culoare este folositǎ la culoarea fontului atât din meniu, cât și din conținutul paginilor.

Culoarea neagrǎ este folositǎ deoarece simbolizeazǎ autoritatea și puterea. Negru este folosit în meniul principal și drept culoarea de fundal a conținutului paginilor.

Culoarea albastrǎ este folositǎ deoarece este culoarea înțelepciunii și a succesului. Aceasta este prezentǎ în mare parte în culoarea de butoane.

Culoarea gri este o culoare ce se creeazǎ amestecând alb cu negru. Aceastǎ culoare este asociatǎ cu sprijin financiar și putere. Aceastǎ culoare se regǎsește în partea inferioarǎ a imaginii de fundal și drept culoare de fundal a conținutului paginilor.

3.1.2. Componentele de header și footer

1. Header

Header-ul (cunoscut și sub numele de antetul paginii) are de obicei o formǎ rectangularǎ și este poziționat în partea superioarǎ a site-ului. Scopul principal al header-ului este de a promova brand-ul companiei și a o face recunoscutǎ imediat de cǎtre public. Astfel, utilizatorii care vor accesa site-ul vor știi imediat cǎ au ajuns pe pagina doritǎ, cu toate cǎ poate încǎ nu sunt familiarizați cu site-ul.

Header-ul pentru site-ul creat a fost conceput astfel încât sǎ conținǎ logo-ul hotelului/pensiunii care este atasat navigation bar-ului prezentat in subcapitolul 3.1.1 Componente principale.

2. Footer

Footer-ul (cunoscut și sub numele de subsolul paginii), este localizat în partea de jos a paginii și conține, de obicei, informații suplimentare.

Adesea este tratat ca fiind o secțiune separatǎ de pagina web și de header, conținutul paginii și meniu. Acesta conține de obicei informații despre drepturile de autor, autorul site-ului și adresa companiei. Footer-ul este considerat ca fiind mult mai puțin important fațǎ de header, dar, ca orice componentǎ, are rolul sǎu.

Footer-ul pentru site-ul creat a fost conceput astfel încât sǎ conținǎ atât informații generale cu privire la drepturile de autor, cât și link-uri cǎtre cele mai utilizate rețele de socializare ale momentului: Facebook, Twitter, Google Plus, Pinterest si Youtube. Logo-urile au fost preluate cu ajutorul librariei Font Awesome. În figura 12 am ilustrat conceput creat pentru footer-ul site-ului.

Figura 12: Imagine fundal.

Sursa:creatie proprie

4.Funcționarea site-ului

4.1. Crearea și implementarea elementelor

Site-ul a fost realizat cu ajutorul librariilor : AngularJs , Angular Material versiunea 1.6 si Bootstrap versiunea 4.0.

Fișierul sursǎ este index.html, iar foaia de stil css index.css, fișierele javascript cum ar fi app.js (reprezinta fisierul in care are loc initializarea aplicatiei), route.js (reprezinta fisierul in care sunt definite rutele aplicatiei), translate.js (reprezinta fisierul cu libraria framework-ului Angular

de traducere) material.js (reprezinta fisierul cu libraria Angular Materiel) si index.controller.js (reprezinta fisierul in care este definit controlul asupra aplicatiei) sunt localizate in folderul main.

4.1.1. Layout-ul

Site-ul a fost conceput, bineînteles, începând cu tag-ul ‘head’. Aici este prezent si tag-ul ‘title’ ce desemneazǎ titlul paginii, dupǎ închiderea tag-ului ‘title’ se realizeazǎ legǎtura cu scripturile folosite, astfel:

– in interiorul tag-ului ‘head’ sunt situate link-urile fisierelor si libratiilor cu extensii .css;

– la inchiderea tag -ului ‘body’ sunt situate link-urile fisierelor si librariilor cu extensii .js;

În tag-ul de ‘body’ am definit fontul folosit: Allerta, culoarea generalǎ: alb, dimensiunea fontului: 16 pixeli, astfel:

plus clasa ‘.container-fluid’ care asigură un container cu lățime întreagă, care acoperă întreaga lățime a ferestrei de vizualizare aceasta aceasta fiind aplicata pe tag-ul ‘body’. Aceasta clasa face parte din libraria Bootstrap mentionata la inceputul capitolului.

4.1.2. Header-ul

Tot in tag-ul ‘body’ sunt definite cele 3 elemente principale si anume :

Navigation bar-ul – este prima componenta si este vizibila in toate paginile aplicatiei.Am construit-o prin tag-ul ‘nav’ care contine un ‘div’ impartit in 3 coloane.

Clasele ‘row’, ‘col-md-3’, ‘col-xs-3’, ‘col-md-6’, ‘col-xs-6’ apartin librariei Bootstrap si sunt definite astfel:

– ‘row’: creaza un nou rand;

– ‘col-md-3’: in interiorul randului aceasta clasa defineste un element ce va ocupa partea din stanga a ecranului si este compatibila cu ecrane de marime medie;

– ‘col-xs-3’ : in interiorul randului aceasta clasa defineste un element ce va ocupa partea din stanga a ecranului si este compatibila cu ecrane de marime mica(smartphone);

– ‘col-md-6’ : in interiorul randului aceasta clasa defineste un element ce va ocupa partea centrala a ecranului si este compatibila cu ecrane de marime medie;

– ‘col-xs-6’ : in interiorul randului aceasta clasa defineste un element ce va ocupa partea centrala a ecranului si este compatibila cu ecrane de marime mica;

Conform codului de mai sus componenta noastra contine 3 div-uri si va arata in pagina astfel:

Deasemenea tag-ului nav i-am atribuit pozitia fixa astfel va ramane intotdeauna intr-o singura pozitie (sus – 0px, stanga – 0px, dreapta – 0px), culoarea de fundal transparenta (aceasta devenind neagra dupa un scroll al utilizatorului de 800px), fontul bold, culoarea textului alba, marimea fontului 18px, inaltime minima de 70px și un z-index cu valoarea de 20 ceea ce înseamnǎ cǎ va avea prioritatea asupra oricǎrui alt element:

4.1.3 Single Page Aplication

Cel deal doilea element principal din tag-ul ‘body’ in reprezinta acest div: