Tehnologii Folosite In Realizarea Aplicatiei H.t.m.l

În zilele noastre piața electronică a evoluat atât de mult încât majoritatea cumpărăturilor se fac online pe internet deoarece este mult mai accesibil, simplu și comod, oferind utilizatorilor mai multe facilități, cum ar fi informații despre anumite produse noi, promoții, reduceri, asigurarea transportului.Ei pot să cumpere sau să facă alte tranzacții din aproape orice locație și la orice oră. Cumpărătorii beneficiază de o livrare rapidă iar dacă există o posibilă nemulțumire aceștia pot returna produsele cumpărate.

Comerțul electronic este benefic pentru societate permițând mai multor persoane să lucreze de acasă, creeaza un „simț comun” al comunității comerciale prin chaturi, forumuri care solicită implicarea cumpărătorilor precum și pentru companii.

Unul dintre elementele care pot atrage și convinge consumatorii să cumpere un produs este modul de prezentare și designul.Acesta trebuie să fie clar și concis și desigur să și arate bine.

Din aceste motive am considerat o idee bună de a realiza o aplicație care să prezinte o serie de ceasuri de lux având posibilitatea de a cumpăra/comanda un produs și care să cuprindă cât mai multe tehnologii moderne.Aceste tehnologii ne oferă un mediu de dezvoltare larg precum și multe facilități în proiectarea aplicațiilor.

Unele avantaje ale tehnologiilor pe care le-am folosit precum Twitter Bootstrap este că reprezintă o colecție de unelte ce conține template-uri HTML și CSS pentru formulare, butoane,tipografie,navigare dar și alte componente legate de interfața.Acest lucru a fost foarte util în aplicație reducând mult timpul de proiectare.

Cu MongoDB am stocat cantități destul de mari de imagini și text, această bază de date fiind denormalizată pentru a îmbunătăți performanțele.Desigur,aici avem și dezavantaje deoarece fiind o tehnologie nouă,comparativ cu bazele de date relaționare sunt mai puțini dezvoltatori softwareNoSQL iar majoritatea sistemelor NoSQL sunt încă la primele variante sau încă în plină dezvoltare.

Cu ajutorul serviciului de hosting AppFog in the cloud ,unde capacitatea de stocare este sporită putem implementa aplicații foarte simplu,să stergem,să adăugăm și să gestionăm servicii. Și aici avem unele dezavantaje deoarece în Cloud este necesară o legătură la Internet rapidă și stabilă iar securitatea datelor poate prezenta probleme și poate produce neîncrederea utilizatorilor.

Funcționalitatea jQuery poate fi extinsă după nevoi,astfel în aplicație am folosit mai multe efecte,de exemplu pentru prezentarea brand-urilor din bara de meniu,când selectăm una,avem efectul de scroll,precum și cel de spy, care atunci când navigăm pe pagina indică marca ceasului și care aparține tot de Bootstrap.

Pentru a fi o singură versiune de site care să funcționeze bine pe orice dispozitiv am folosit Responsive web design care vine în ajutorul celor care trebuie să creeze mai multe versiuni ale site-urilor însă acest concept poate ridica și dificultăți deoarece introduce un nivel de complexitate a layout-urilor.

Spre deosebire de alte aplicații din domeniu aplicația mea este diferită prin conținut și funcționalitate identică indiferent de dispozitivul clientului, fie acesta laptop, tabletă sau smartphone datorită designului responsive.

Disponibilitatea este permanentă datorită găzduirii in the cloud iar aplicația este distribuită pe mai multe servere. O altă deosebire ar fi viteza sporită chiar și în cazul multor utilizatori concurenți, datorită asincronității limbajului de programare node.js și a bazei de date MongoDB.

Capitol II .Tehnologii folosite în realizarea aplicației

II.1 HTML

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură 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. [1]

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. [2]

HTML este prescurtarea de la Hyper Text Mark-up Language și este codul care stă la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri și au extensia .html sau .htm. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta /> browserul interpretează aceste etichete afișând rezultatul pe ecran. [3]

Unele etichete permit utilizarea de atribute care pot avea anumite valori:[4]

<eticheta atribut="valoare"> … </eticheta>

Componenta unui document HTML este: [5]

versiunea HTML a documentului

zona head cu etichetele <head></head>

zona body cu etichetele <body></body> sau <frameset></frameset>

Versiunea HTML poate fi: [6]

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5:

<!DOCTYPE HTML>

Și în HTML poate fi introdus un comentariu, care bineînțeles nu va fi afișat de browser:

<!—Acesta este un comentariu –>

În implementarea aplicației am folosit HTML pentru interfața utilizator,mai exact versiunea HTML5 care chiar dacă nu a fost standardizată încă,este suportat de majoritatea broswer-elor.Această nouă versiune aduce elemente suplimentare pentru a îmbunătăți limbajul și asigură suportul pentru cele mai recente elemente multimedia.El însumează nu numai HTML4, dar și XHTML1 și DOM2HTML (îndeosebi JavaScript).

II.1.2 HTML5

La realizarea acestui nou standard au cooperat W3C (World Wide Web Consortium) și WHATWG (Web Hypertext Application Technology Working Group).WHATWG s-a ocupat de forumularele și aplicațiile web iar W3C de XHTML 2.0. În anul 2006 cele 2 grupuri s-au decis să colaboreze și să realizeze împreună noul standard HTML.

În crearea acestui standard s-au stabilit reguli noi și anume noile caracteristici trebuie sǎ se bazeze pe HTML,CSS,DOM și JavaScript,să se reducǎ nevoia unor pluginuri externe(exemplu Flash),manipularea mai ușoarǎ a erorilor,utilizarea marcajelor pentru a înlocui scriptingul. [7]

În HTML5 avem o singura declarație de tip <!DOCTYPE>.

<!DOCTYPE html>

Mai jos este exemplificat un document HTML5 simplu, cu minimul de tag-uri necesare.

<!DOCTYPE html>

<html>

<head>

<title>Titlul documentului</title>

</head>

<body>

Continutul documentului…

</body>

</html>

II.1.2 Suport în browsere

HTML5 nu este momentan standardul oficial HTML iar browserele nu au suport total pentru acesta. Totuși, cei care realizează cele mai cunoscute browsere (Firefox, Chrome, Opera, Safari, Internet Explorer) continuă să adauge carcateristici menite să suporte noul standard.

Deoarece internetul s-a schimbat mult de la apariția standardului HTML 4.01 (în 1999) multe din elementele acestuia nu sunt folosite la realizarea unor pagini web sau nu sunt folosite pentru ce au fost ele gandite. [8]

II.1.3 Elemente Semantice/Structurale noi

Elemente noi de marcaj introduse în HTML5:[9]

<article> – pentru conținut extern (stiri, blog, forum).

<aside> – pentru conținut deoparte față de conținutul în care este plasat. Conținutul "aside" trebuie să fie legat de conținutul înconjurător.

<command> – buton, buton radio, casetă (checkbox).

<details> – pentru a descrie detaliile unui document sau unei părți dintr-un document.

<summary> – legendă sau sumar (în interiorul elementului "details").

<figure> – specifică conținutul independent, ca ilustrațiile, diagramele, fotografiile, listări de cod.

<figcaption> – legenda unei figuri.

<footer> – pentru sfârșitul unui document sau secțiune unde se poate include numele autorului, data documentului, informații de contact sau de copyright.

<header> – pentru introducerea într-un document sau secțiune. Poate include navigare.

<meter> – pentru măsuri (doar dacă se cunosc valorile minimă și maximă).

<nav> – secțiune de navigare.

<progress> – starea unei lucrări în progres.

<rp> – ca să arate browserelor care nu suportă elementul ruby.

<section> – secțiune în document (cepitol, header, footer).

<time> – pentru definire timp, dată sau amandouă.

În aplicația mea regăsim multe din aceste tag-uri precum <header>,<nav>,<section>,<footer> , interfața grafică fiind implementată cu HTML5.

II.1.4 Elemente media noi

Aceste elemente elimină utilizarea unor pluginuri externe cum ar fi Flash.[9]

<audio> – pentru conținut audio.

<video> – pentru conținut video.

<source> – pentru elemente media definite în elemente audio sau video.

<embed> – pentru conținut încroporat (cum ar fi un plug-in).

<track> – definește textul pieselor pentru <video> și <audio>.

II.1.5 HTML5 Video

Acest concept definește o modalitate standard de a încorpora un clip video într-o pagină web folosind un element denumit <video>.Suportul pentru elementul <video> înca evolueazǎ,ceea ce reprezintǎ o modalitate politicoasǎ de a spune ca nu funcționează peste tot la fel.

Pâna la aparitia HTML5 nu exista un standard pentru redarea fișierelor video într-o paginǎ web,fișierele fiind publicate cu ajutorul unui plugin(exemplu flash).

În acest moment sunt suportate 3 formate video:

Ogg – fișiere Ogg cu codec video Theora și codec audio Vorbis.

MP4 – fișiere MPEG4 cu codec video H.264 și codec audio AAC.

WebM – fișiere WebM cu codec video VP8 și codec audio Vorbis.

HTML5 vǎ ofera 2 posibilitǎți de a include clipurile video în pagina web,amândouǎ presupun existența elementului <video>.

Una din caracteristicile speciale ale tag-ului video este acela că suportă mai multe surse ce face legatura către fișiere video în formate diferite iar browserul va reda primul format recunoscut.[10]

II.1.6 HTML5 Audio

La fel ca și elementul <video>,redarea fișierelor audio nu erau posibile într-o pagină web fără existența unor plugin-uri exterioare(cum ar fi flash).HTML5 specifică un mod standard de a include fișierele audio cu ajutorul acestui element <audio> care poate reda fișiere de sunet sau stream audio.

Pentru a reda un fișier audio în HTML5 tot ce trebuie să scrieți este:

<audio src="song.ogg" controls="controls">

</audio>

Atributul control adaugă butoanele de control "play" (redare), "pause" (pauza) și "volume" (volum).[10]

II.1.7 HTML5 Drag and Drop

Drag and drop este o propietate frecventă ce ne permite să mutăm prin tragere un obiect, dintr-o locație în alta.Drag and drop face parte din standardul HTML5 iar orice element poate fi tras dintr-un loc în altul.[11]

II.1.8 HTML5 Canvas (Pânza)

Tag-ul <canvas> este destul de simplu, definește lungimea, înălțimea și un ID unic.Se folosesc o serie de instrucțiuni JavaScript pentru a desena obiecte în canvas și este unul dintre cele mai interesante elemente noi.[12]

Este important de înțeles diferența dintre elementul canvas și contextul acestuia. Elementul reprezintă nodul DOM din fișierul HTML, în timp ce contextul este un obiect ce oferă metode și proprietăți pentru randarea graficelor în interiorul elementului canvas. Contextul poate fi 2d sau webgl(3d). Fiecare element canvas are doar un context, ce poate fi accesat folosind metoda getContext().

Secvența de cod urmatoare demonstrează modul de utilizare al elementului canvas:

<body>

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

// draw here

</script>

</body>

Instrucțiunile JavaScript permit dezvoltatorilor de pagini web să deseneze diferite forme, linii, să aplice culori, transparență și gradient, să adauge text și imagini în Canvas,chiar să creeze animație.

II.1.9 HTML5 Inline SVG

SVG(Scalable Vector Graphics) este folosit pentru a defini elemente grafice bazate pe vectori pentru web care sunt în format XML.Aceste elemente grafice SVG nu își pierd din calitate dacă facem zoom pe ele sau dacă le redimensionăm și orice element sau orice atribut poate fi animat în fișiere SVG. [13]

Avantajele utilizări SVG în locul altor formate (ca JPEG sau GIF) sunt:

Imaginile SVG pot fi create și editate cu orice editor text.

Imaginile SVG pot fi căutate, indexate, scriptate și comprimate.

Imaginile SVG pot fi scalate.

Imaginile SVG pot fi printate cu o calitate înalta la orice rezoluție.

Imaginile SVG pot fi mărite (zoom) fără ca imaginea să îți piardă din calitate.

II.1.10 HTML Geolocalizare (Geolocation)

API-ul Geolocalizare oferit de HTML5 ne dă posibilitatea de a afla poziția geografică a unui vizitator.Această opțiune poate fi folosită doar dacă vizitatorul acceptă localizarea poziției sale (datorită confidențialității utilizatorilor).[14]

API-ul Geolocation este mai precis în cazul dispozitivelor prevăzute cu GPS (ca iPhone).

II.1.11 HTML5 Stocare Web (Web Storage)

Cu HTML5, paginile web pot stoca date local, în browserul utilizatorului iar pentru acesta HTML5 oferă 2 obiecte noi pentru stocarea de date la client:

localStorage – stocarea datelor fără limită de timp.

sessionStorage – stocarea datelor pentru o sesiune.

Pâna acum acest lucru era posibil prin cookies dar în cazul unei cantități mari de date, datorită faptului că acestea sunt transmise la fiecare cerere către server, se micșorează mult viteza de accesare a unui site.

În HTML5 datele nu mai sunt trecute la fiecare cerere către server ci sunt folosite doar atunci când e necesar acest lucru. Astfel se poate stoca o mare cantitate de date fără a afecta performanțele serverului.

Pentru a stoca și accesa datele se folosește JavaScript iar obiectul localStorage stochează datele fără limita de timp, ele fiind disponibile oricând.[15]

Modalitatea de accesare a unui obiect localstorage se realizează astfel :

<script type="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

În aplicație am folosit localstorage pentru a stoca imaginile ceasurilor.

II.2 CSS

Cascading Style Sheets (CSS) a apărut ca o soluție propusă de W3C (World Wide Web Consortium – comunitate online fondată de inventatorul web-ului) pentru rezolvarea unei probleme. Modificarea tuturor paginilor era un proces de durată și destul de costisitor. Pentru a rezolva această problemă, W3C a propus crearea unor fișiere externe care să conțină proprietățile atașate tag-urilor HTML – fișierele CSS. [16]

CSS-ul este gândit să aibă o sintaxă relativ simplă. O "instrucțiune" CSS este alcătuită din 2 elemente: un selector și lista de declarații cuprinsă între acolade. Declarațiile, la rândul lor, sunt alcătuite din 2 elemente: o proprietate și o valoare asociată proprietății. Declarațiile se separă prin punct și virgulă.

În cazul ultimei declarații folosirea punctului și virgulei la sfârșit nu este absolut necesară dar este recomandată pentru a evita problemele generate de editarea ulterioară a documentului. [17]

Introducerea unor secvențe de CSS în pagina HTML este recomandat să fie făcută în blocul HEAD. Pentru folosirea unui fișier CSS extern se folosește:

<link href="calea/catre/fisier.css" rel="stylesheet" type="text/css">

Este recomandat să se folosească două versiuni ale codului, una cu comentarii pentru dezvoltare, gen /* comentariu */, și una lipsită de comentarii și compresată cât mai mult pentru producție. Fișierele mai mari se incarcă mai greu și toți ne dorim un internet mai rapid. [18]

II.2.1 CSS3

CSS3 s-a lansat pentru a aduce designul la urmatorul nivel. Cu o mulțime de caracteristici și instrumente noi, CSS 3 ne dă speranța că nu va mai trebui să apelăm la CSS hacks și tehnici Javascript pentru a stiliza un element.

CSS 3 este în continuă dezvoltare și promite o varietate mare de module noi pentru designul paginilor noastre. Multe dintre aceste module nu au fost încă finalizate. Este foarte dificil de a estima o dată când browserele vor adopta noile caracteristici de CSS3.

Un lucru important de știut înainte de a începe utilizarea acestor proprietăți este faptul că nu sunt suportate în toate browserele web și, de cele mai multe ori, vom fi nevoiți să apelăm la prefixarea acestora în funcție de suportul în diferite browsere.[19]

Prefixele pe care le vom întâlni mai departe sunt:

webkit- Specific browserelor Webkit (Google Chrome, Safari și, în curând, Opera);

moz- Specific browserului Mozilla Firefox;

ms- Specific browserului Internet Explorer;

Câteva tehnici noi CSS 3[20]

Există mai multe funcții și caracteristici noi și interesante introduse de CSS3 printre care: text-shadow, RGBA And Opacity, multiple backgrounds, border-radius, border-image, box-sizing, font-face.

Attribute:

Text-shadow effect

CSS3 elimină necesitatea de a folosi Photoshop și imagini în website, atunci când avem nevoie de un simplu efect de umbră pentru un text.

Border-radius: rounded corners

Border-radius adaugă colțuri curbate la elementele HTML, fărî a fi nevoiți să folosim imagini de fundal. În prezent, este probabil proprietatea CSS3 cea mai utilizată.

Atributul @font-face

Este cea mai anticipată caracteristică CSS3, fiind în proiect înca de pe vremea CSS2. Pentru a utiliza această propietate, fiecare font trebuie declarat folosind atributul @font-face. [20]

Pentru aplicație CSS a fost implementat pentru partea de stilizare a interfeței utilizator.Am folosit versiunea CSS3 pentru că pune la dispoziție mai multe proprietăți ce oferă efecte vizuale mai plăcute, și este suportat de toate browserele moderne.

Se folosesc două fișiere CSS, unul pentru browser-ele desktop și altul pentru browser-ele dispozitivelor mobile.

Cel optimizat pentru mobile rezultă într-un design mai trunchiat: se încarcă mai repede, se vede mai bine de ecrane mici și folosește mai puțin trafic de bandă.

II.2.2LESS

LESS este un limbaj foaie de stil dinamic proiectat de către Alexis Sellier.LESS este open-source și prima versiune a fost scrisă în Ruby,însa în versiunile ulterioare Ruby a fost înlocuit de JavaScript.Sintaxa indentat LESS este un metalimbaj imbricat și LESS este un cod valid ca și CSS cu aceeași semantică.

LESS oferă următoarele mecanisme: variabile , imbricare , mixins , operatori și funcții,principala diferență dintre alte precompilatoare CSS este că permite compilarea în timp-real prin LESS.js de către broswer.[21]

Variabilele:

Variabilele vă permit să specificați valorile utilizate pe scară largă într-un singur loc, și apoi sa le re-utilizați în întreaga foaie de stil, efectuarea schimbărilor globale fiind la fel de ușoră ca schimbarea unei linii de cod.[22]

Imbricare:

În LESS puteți pur și simplu imbrica selectoare în interiorul altor selectoare. Acest lucru face moștenirea clară și foi de stil mai scurte.[23]

Mixins

Mixins permite să încorporați toate proprietățile unei clase într-o altă clasă prin simplul fapt că includem numele clasei ca una dintre proprietățile sale.[24]

Mai jos este prezentat un exemplu de utilizare LESS:

// LESS

.rounded-corners (@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

-ms-border-radius: @radius;

-o-border-radius: @radius;

border-radius: @radius;

}

#header {

.rounded-corners;

}

#footer {

.rounded-corners(10px);

}

/* Compiled CSS */

#header {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

#footer {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

}

Funcții și operatori

Operatorii permit adăugarea,scăderea,împarțirea și înmulțirea proprietăților valorilor și culorilor care pot fi folosite pentru a crea relații complexe între proprietăți.Funcțiile one-to-one în JavaScript permit manipularea valorilor.[25]

// LESS

@the-border: 1px;

@base-color: #111;

@red: #842210;

#header {

color: (@base-color * 3);

border-left: @the-border;

border-right: (@the-border * 2);

}

#footer {

color: (@base-color + #003300);

border-color: desaturate(@red, 10%);

}

/* Compiled CSS */

#header {

color: #333;

border-left: 1px;

border-right: 2px;

}

#footer {

color: #114411;

border-color: #7d2717;

}

LESS poate fi utilizat în site-uri în mai multe moduri iar o opțiune este de a include less.js

II.3. JavaScript

JavaScript 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 siteurilor web, dar este folosit și pentru accesul la obiecte încastrate (embedded objects) în alte aplicații. [26]

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.În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. [27]

Microsoft a implementat limbajul JavaScript sub numele de JScript, cu o serie de modificări și extensii față de implementarea Netscape. Pe platforma Windows, JScript este unul din limbajele executabile de către Windows Script și, deci, poate fi folosit pentru scriptarea aplicațiilor ce suportă Windows Script, de exemplu Internet Explorer, sau chiar sistemul de operare Windows.

Asociația ECMA a standardizat limbajul JavaScript/JScript sub numele ECMAScript (standardul ECMA-262).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. [28]

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate. [29]

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii.

Pentru aplicație am folosit JavaScript care a fost implementată pentru a oferi dinamică interfeței utilizator.

II.3.1 jQuery

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și îmbunătăți procese precum traversarea arborelui DOM în HTML, managementul inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive JavaScript".[30]

jQuery se poate folosi pentru a rezolva următoarele probleme specifice programării web:

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle, un proiect născut din jQuery;

parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli);

înregistrarea și modificarea evenimentelor din browser;

manipularea elementelor CSS;

efecte și animații;

cereri tip AJAX;

extensii;

utilităti – versiunea browser-ului, funcția each .

Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery. Arhitectura sa permite programatorilor să dezvolte subaplicații bazate pe biblioteca principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. [31]

În aplicație, jQuery este folosit pentru a oferi compatibilitate AJAX între diferite browsere și la manupularea anumitor elemente în funcție de interacțiunea utilizator.Totodata ,este o dependență pentru Bootstrap.

II.4 Bootstrap

Bootstrap este un framework pentru design HTML/CSS și Javascript,dezvoltat de Twitter prin încapsularea unor funcționalități din jQuery. De asemenea, este un framework care are ca principală sarcină oferirea elementelor necesare pentru realizarea unui produs finisat într-un timp scurt. Ca proiect open-source, inițiat de echipa de dezvoltare de la Twitter, a prins foarte repede în comunitatea online, având un trend exponențial pe mai multe direcții. [32]

Printre aceste resurse pot fi menționate:

Template-uri de Twitter Bootstrap (licențe libere sau comerciale);

Fonturi noi;

Elemente și componente UI;

Alte elemente estetice utile (săgeți, librării pentru grafice, generatoare template-uri).

Twitter Bootstrap mai oferă încă o facilitate, care nu este deloc ușor de trecut cu vederea: plaja de compatibilitate cu marile web browsere este foarte bună, incluzând și Internet Explorer 7. Iar la nivelul dispozitivelor mobile, acestea sunt suportate prin implementarea unui CSS responsive.Acest lucru înseamnă design grafic de pagini web care se ajustează dinamic, luând în considerare caracteristicile dispozitivului folosit (PC, tabletă, telefon mobil).

La baza dezvoltării continue a framework-ului Twitter Bootstrap este pre-procesorul LESS, ales datorită vitezei de compilare a codului (de 6 ori mai rapid ca SASS), și a eleganței și utilizării JavaScript-ului. Ca rezultat, oferă unui dezvoltator posibilitatea ajustării design-ului prin definirea/setarea unui set de variabile/parametri și recompilarea surselor LESS rezultând un nou set de fișiere de stil (CSS).

LESS, nu este singur pre-procesor de CSS disponibil, existând în momentul de față mai multe pre-procesoare printre care s-au remarcat printre dezvoltatorii de front-end: LESS, SASS și SCSS. Folosirea acestora aduce o valoare adăugată oricărui framework de front-end. [32]

Browser-ul web fiind capabil să interpreteze doar fișiere de stiluri CSS, codul scris pentru aceste pre-pocesoare este compilat generând un set de stiluri CSS interpretabile de broswere.

Aceste pre-procesoare au apărut ca o necesitate în urma limitărilor pe care le implică folosirea stilurilor CSS (lipsa variabilelor, și a facilității de refolosire a stilurilor în mai multe selecții CSS).

Pentru a folosi Bootstrap într-o pagina HTML trebuie sa download-am Bootstrap CSS și să includem link-ul în documentul HTML.Dezvoltatorul poate compila de asemenea,fișierul CSS de descărcat LESS cu un compilator special.În cazul în care dezvoltatorul dorește să utilizeze componente JavaScript, acestea trebuie să fie menționate împreună cu biblioteca jQuery în documentul HTML.[33]

Următorul exemplu ilustrează modul în care aceasta funcționează.

<!DOCTYPE html>

<html>

<head>

<title>Example of Twitter Bootstrap</title>

<!– Include the bootstrap stylesheets –>

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

</head>

<body>

….

</body>

</html>

Bootstrap a fost implementat pe partea de front-end, fiind componenta de bază a interfeței de utilizare. Datorită lui am putut implementa griduri fluide pentru responsivitate, și totodată ne-a pus la dispoziție multiple componente cu aspect plăcut, cum ar fi bara de navigare, dar oferă și funcționalități dinamice, ca efectele de animatie, cum ar fi și în cazul ferestrei modale implementate.

II.5 NODE.JS

Node.js este un sistem software server-side proiectat pentru scrierea aplicațiilor de Internet scalabile,în special servere web.Pe partea de server programele sunt scrise în JavaScript,folosind evenimente (event-driven) și operații de intrare/ieșire asincrone pentru a minimiza overhead-ul și a maximiza scalalbilitatea. [34]

Node.js este o platformă construită pe Chrome-ul JavaScript de execuție pentru o ușoară construire de aplicații rapide și aplicații de rețea scalabile.Node.js folosește event-driven,modelul non-blocking I/O care îl face mai ușor și eficient,perfect pentru aplicații data-intesive în timp real care rulează pe dispozitive distribuite.[35]

Permite dezvoltarea de aplicatii web la nivel de server în limbajul JavaScript,recurge la V8-procesor(interpretor) JavaScript creat de Google și disponibil liber.

Oferă suport pentru cele mai importante protocoale Web si Internet:

HTTP(HyperText Transfer Protocol);

DNS(Domain Name System);

TLS(Transport Lyer Security);

Funcționalități de nivel scăzut(socket-uri TCP).

Operațiile de intrare/iesire sunt asincrone,fiecare cerere(operație) adresată aplicației noastreex: acces la disc,la rețea,la alt proces poate avea atașată o funcție de tratare a unui eveniment specific evented I/O.

O aplicație node.js rulează într-un singur proces,codul JavaScript nu este executat paralel,dar tratează în mod asincron diverse evenimente I/O,deosebire esențială față de serverele de aplicații Web tradiționale ce recurg la server multi-process.[35]

Node.js a fost implementat pe parte de back-end, oferind o funcționalitate completă: el ocupă atât rolul unui webserver prin care deservește clienții, cât și rolurile nivelului logic care procesează datele și realizează conținutul paginii deservite de către partea de webserver. Toate acestea într-o maniera asincronă, oferă o viteză extrem de sporită.

II.5.1 Express

Express este un framework web pentru Node.js dar în unele situații nu este necesar.Daca lucrăm cu date care se prezintă dintr-un browser web Express este o alegere bună.Dacăconstruim cu o linie de comandăun script cu Node.js sau un mic serviciu web Express nu ar fi cel mai util.[36]

Express oferă caracteristici,cum ar fi rutare,templating/view rendering(prin Consolidate.js),suport CSS dinamic(prin intermediul LESS),middleware(prin Connect), gestionare a unei sesiuni,logging,setările aplicației și o linie de comanda de interfață (CLI) (Command Line Interface) [37]

În aplicație amfolosit implementarea frameworkului Express deoarece ajută foarte mult la rutarea corectă a requesturilor primite de la clienți.

II.5.2 Jade

Jade este un motor de templating de înaltă performanță, puternic influențat de Haml,implementat cu JavaScript pentru Node.js

Jade este destinat în primul rând pentru partea de server templating în node.js, cu toate acestea, poate fi folosit în multe alte medii.Este destinat pentru a produce documente XML (HTML,RSS etc) deci nu îl folosim penru a crea text simplu/markdown/CSS sau alte documente.[38]

Limbajul Jade a fost implementat în aplicatia mea la crearea template-urile paginilor afișate utilizatorului.

II.6 MongoDB

MongoDB este o bază de date NoSQL open-source orientată pe documente. Acestă bază de date beneficiază de suport din partea companiei 10gen. MongoDB face parte din familia sistemelor de baze de date NoSQL. Diferența principală constă în faptul că stocarea datelor nu se face folosind tabele precum într-o bază de date relațională, MongoDB stochează datele sub formă de documente JSON cu scheme dinamice.

Dezvoltarea MongoDB a fost începută de 10gen în 2007, când compania dezvoltă un produs platform as a service similar cu Windows Azure sau Google App Engine[1]. În 2009 MongoDB a fost transformat într-un produs open-source.Este disponibilă pentru sistemele de operare Windows,Linux,OS X si Solaris.[39]

MongoDB este o bază de date open-source NoSQL scrisă în C++. Aceasta poate conține mai multe baze de date, colecții și indecși. În unele cazuri (baze de date și colecții ) aceste obiecte pot fi create implicit. [40].

În MongoDB nu există câmpuri predefinite spre deosebire de bazele de date relaționale, unde există coloanele care sunt definite în momentul în care tabelele sunt create. Nu există schemă pentru câmpurile dintr-un document, acestea precum și tipurile lor pot varia.

Astfel nu există operația de „alter table” pentru adăugare de coloane. În practică este obișnuit ca o colecție să aibă o structură omogenă, deși nu este o cerință, colecțiile putând avea structuri diferite. Această flexibilitate presupune ușurință în migrarea și modificarea imaginii de ansamblu asupra datelor.

Cele mai importante caracteristici a MongoDB sunt:

Stocarea datelor sub formă de documente: Baza de date MongoDB stochează obiecte (documente). Aceste documente reduc nevoia de join;

Auto-Sharding: Shardingul sau partiționarea datelor pe orizontală se face automat. Citirile și scrierile sunt distribuite pe partiții. Lipsa joinurilor face ca interogările distribuite să fie rapide;

Limbajul de interogare: Limbajul de interogare este îmbunatatit și păstreaza principii SQL si C++;

Modificări rapide:MongoDB suportă operații de actualizare atomice căt și pe cele tradiționale. Operatiile de mai jos demonstrează flexibilitatea limbajului NoSQL;

$inc – { $inc : { camp : valoare } } – incrementează câmpul “camp” cu numărul dat ca valoare

$push -{ $push : { camp : valoare } } – se adaugă valoarea dată câmpului specificat

$addToSet -{ $addToSet : { camp : valoare } } – adaugarea valorii într-un vector

$pop -{ $pop : { camp : 1 } } –șterge ultimul element dintr-un vector

Map Reduce: MongoDB folosește map/reduce pentru agregare și procesare batch;

GridFS: Poate stoca fișiere de dimensiuni mari fără a complica stiva de date;

Suport: Există o cantitate mare de informații online – tutoriale , carți forumuri ce servesc pentru a asimila rapid lucrul cu MongoDB.

MongoDB a fost implementat la nivelul de date a aplicației, unde datele sunt stocate și preluate, apoi trimite la nivelul logic pentru procesare.

II.6.1 Mongoose

Mongoose este un obiect MongoDB,un instrument de modelare conceput pentru a lucra într-un mediu asincron.Acesta oferă obiecte MongoDB elegante de modelare pentru Node.js și rezolvă problemele comune pentruaplicații în lumea reală .[41]

Exemplu de conectare la MongoDB cu Mongoose:

var mongoose = require('mongoose'),

db = mongoose.createConnection('localhost', 'euro2015');

db.on('error',console.error.bind(console,'connection error:'));

Mongoose a fost implementat să facă legatura între nivelul logic și cel de date, adică între node.js si MongoDB.

II.7 Cloud

Cloud este un concept modern în domeniul computerelor și informaticii, reprezentând un ansamblu distribuit de servicii de calcul, aplicații, acces la informații și stocare de date, fără ca utilizatorul să aibă nevoie să cunoască amplasarea și configurația fizică a sistemelor care furnizează aceste servicii. Pentru cloud computing încă nu există un nume românesc încetățenit.

Expresia cloud computing derivă dintr-o reprezentare grafică simbolică a Internetului des întâlnită în formă de nor („the cloud”), folosită atunci când detaliile tehnice ale Internetului pot fi ignorate. [42]

Voi prezenta o scurtă clasificare :

După livrare:

Software as a service – Software ca serviciu

Platform as a service – Platformă ca serviciu

Infrastructure as a service – Infrastructură ca serviciu

După implementare:

Cloud public

Cloud privat

Cloud hibrid

Cloud pentru o comunitate (community cloud)

Conexiunea permanentă a utilizatorului la Internet a devenit foarte răspândită, astfel încât acum aproape toate resursele disponibile se pot plasa în Internet și partaja, uneori chiar între utilizatori complet independenți unii de alții: software (programele) și datele/informațiile sunt aduse din Internet pe calculatorul utilizatorului la cerere (on demand), ca și cum ar fi vorba de servicii publice banale precum apa sau energia electrică.

Executarea aplicațiilor de computer online în Internet, și nu pe stația de lucru (workstation) proprie, reprezintă o nouă schimbare de paradigmă, urmașă a celei din anii 1980, când s-a trecut de la mainframes la conceptul client-server. [43].

Cloud computing folosește noi metode de oferire și consumare a serviciilor IT în Internet, servicii care de obicei pot fi dimensionate dinamic și care includ resurse virtualizate. Este de fapt doar o posibilitate secundară, urmare a ușurinței cu care se pot acum accesa toate serverele și centrele de calcul interconectate prin intermediul Internetului.

Furnizorii tipici de cloud computing pun la dispoziție, de exemplu, aplicații comerciale standard; utilizatorul are acces la acestea doar prin intermediul unui browser local, deoarece atât aplicația cât și datele proprii ale utilizatorului sunt găzduite în cloud, pe serverul furnizorului de servicii. [43].

Avantaje aduse de Cloud:

Sincronizarea datelor utilizatorului care folosește mai multe dispozitive legate la cloud (de ex. un smartphone, o tabletă, un notebook, dar și un PC) este simplificată;

Documentele online din cloud se pot prelucra cu ajutorul unor aplicații web;

Viteză de calcul și capacitate de stocare sporite, dar fără investiții în propria configurație. [44]

Dezavantajele aduse de Cloud:

E necesară o legătură la Internet rapidă și stabilă;

Securitatea necesară a datelor din cloud poate prezenta probleme și poate produce neîncrederea utilizatorilor;

Situația legală este de obicei complexă, deoarece utilizatorul nu află nici măcar în ce țară sau în ce țări (!) se află serverele care îi găzduiesc datele sale.[44]

Aplicația a fost proiectată să fie perfect integrabilă în infrastructura cloud.

II.7.1 AppFog

AppFog este un service online PaaS pentru Java, Node, .Net, Ruby, PHP, MySQL, Mongo, PostgreSQL, si altele. AppFog oferă o platformă de încredere, scalabilă și rapidă pentru implementarea de aplicații în cloud.[45]

Platform as a service (PaaS) este o categorie de servicii de cloud computing , care oferă o platformă de calcul și o soluție de stivă ca un serviciu. Împreună cu software-ul ca serviciu (SaaS) și infrastructură ca serviciu (IaaS), este un model de serviciu de cloud computing. În acest model, consumatorul creează software-ul folosind instrumente și / sau bibliotecile de la furnizor. Consumatorul controlează, de asemenea, implementarea software-ului și setările de configurare. Furnizorul oferă retele, servere, stocare, precum și alte servicii.

PaaS ofera, de asemenea, facilități pentru proiectare, dezvoltare de aplicații, testare și implementare, precum și servicii, cum ar fi colaborarea în echipă, integrare de servicii web, și de triaj , integrarea bazei de date, securitate, scalabilitate, stocare, persistența și multe altele.[46]

AppFog face implementarea cloud,scalarea și rulearea aplicațiilor la fel de simplu ca instalarea unei aplicatii iPhone.

AppFog oferă serviciile potrivite necesității aplicației, așadar a fost aleasă ca platformă de implementare.

II.8 Responsive web design

Responsive web design(de multe ori prescurtat RWD) este o abordare de webdesign prin care un site este programat să se adapteze tehnologiei utilizatorului pentru a permite o vizualizare optimă – ușor de citit și de navigat cu cât mai puține schimbări – pentru mai multe tipuri de dispozitive(de la calculatoare desktop până la telefoane mobile,tablete).

Conceptul de Responsive Design a fost introdus pentru prima oară de către Ethan Marcotte în 2010.[47]

Această abordare vine în ajutorul celor care s-au văzut nevoiți să facă o mulțime de versiuni ale site-ului, pentru ca acesta să poată fi accesat de pe iPad, Blackberry, Kindle, netbook, iPhone și așa mai departe. [48]

Este nevoie de trei ingrediente principale pentru a avea un site responsive:

Griduri fluide

Sistemul flexibil de griduri se bazează pe calculul proporțiilor și se asigură că toate elementele din layout sunt redimensionate unul față de celălalt. Nu se mai măsoară dimensiunile în pixeli, ci în unități relative și procente.

Imagini flexibile

Acestea își pot modifica lățimea și înălțimea în funcție de rezoluția și de dimensiunea gridului. Pentru a oferi informația repede și frumos, imaginile pot fi salvate pe server în seturi de 3-4 dimensiuni, din care va fi încărcată mai apoi imaginea potrivită, în funcție de dimensiunea ecranului pe care este afișat site-ul.

Media Queries

Acestea reprezintă o metodă eficientă de a încărca diferite stiluri CSS pentru diferite rezoluții, pentru a oferi vizitatorului o experiență cât mai bună.

Avantaje aduse de Web Responsive Design:[48]

O singură versiune de site care funcționează bine pe orice dispozitiv.

Posibilitatea de sharing a aceluiași URL între diverse dispozitive.

Layout-ul se adaptează la browser, eliminând astfel scroll-ul orizontal.

Dezavantaje aduse de Web Responsive Design:[48]

Timp prelungit pentru dezvoltare, respectiv costuri mai mari.

Dificultăți datorate faptului că acest concept introduce un nou nivel de complexitate a layout-urilor.

Responsive web design a fost implementat în aplicație pentru a redesena site-ul în funcție de dispozitivul și rezoluția pe care se vizualizează acesta.

Capitol III.Proiectarea și implementarea aplicației

III.1 Proiectarea aplicației

Aplicația a fost proiectată pe arhitectura modelulul pe trei nivele.În forma cea mai obișnuită, cele trei nivele sunt denumite astfel: de prezentare, de aplicație (logică) și de date – în ordinea corespunzatoare. Browser-ul web se află pe primul nivel (de prezentare). Pe nivelul de mijloc se află un motor ce folosește o tehnologie de conținut web dinamic (ca PHP, ASP, JSP, Python, Ruby on Rails), iar baza de date se află pe ultimul nivel. Browser-ul web inițiază procesul printr-o solicitare către serviciile din nivelul următor, care la urmă interoghează baza de date apoi generează interfața de utilizator.

Figura 3.1: Arhitectura pe trei nivele

Figura 3.1 prezintă structura arhitecturii pe trei nivele. La nivelul de prezentare se află:

Bootstrap

jQuery

Smooth-Scroll.js

Sharrre.js

Holder.js

La nivelul logic se află:

node.js

Express

Jade

Mongoose

La nivelul de date se află:

MongoDB

III.1.1. Bootstrap

Este folosit pe partea de front-end la implementarea grid-ului responsive.

Fișierele incluse sunt:

bootstrap.css: stilizarea paginii

boostrap-responsive.css: aplicarea responsivității

bootstrap.js: efectele dinamice

3.1.2. jQuery

jQuery (reprezentat printr-un singur fișier: jquery.js) a fost inclus ca o dependența de bază a tuturor fișierelor JavaScript incluse în proiect. Principalele avantaje pe care le oferă se referă la intercompatibilitatea browserelor și a multor funcții optimizate incluse în API. Cea mai populară functie este cea de selecție care ia forma $(“.selector”).

Folosind jQuery am implementat funcționalitatea adăugării și ștergerii din coș, care se află în fișierul ceasuri.js.

III.1.3. Smooth-Scroll

Smooth-Scroll este un plugin de jQuery care oferă animații de scrolling cu efect smooth. El este inclus în proiect prin fișierul jquery.smooth-scroll.js.

III.1.4. Sharrre

Sharrre este un plugin de jQuery care generează automat codul butoanelor de împărtășire pe rețele sociale, cum ar fi Facebook si Twitter. Codul este inclus în fișierul jquery.sharrre.js.

III.1.5. Holder.js

Holder.js este folosit în cazul în care un articol nu are încă o poza încărcată. Acesta generează dinamic un placeholder pe partea de client, în loc să se folosească o imagine statică încărcată de la webserver.

III.1.6. node.js

Node.js ocupă rolul principal pe partea logică. El are datoria de a procesa datele și în deservirea paginii generate. Toată logica este implementată in fișierul “app.js”, pe lângă includerea modulelor necesare.

III.1.7. Express

Express este un framework pentru node.js care ajută mult la rutarea corectă a requesturilor/cererilor din partea clienților. El este inclus sub forma unui modul in app.js, iar rutele se află în folderul “routes”.

3.1.8. Jade

Jade este templating engine-ului implicit folosit de Express. El generează HTML folosind templateurile din folderul “views” în funcție de datele furnizate. Astfel s-a făcut implementarea în stil MVC (Model-View-Controller).

Figura 3.2: Model-View-Controller

Figura 3.2 prezintă modul de implementare MVC(Mode-Vew-Controller).

3.1.9. Mongoose

Mongoose este modulul de node.js care face legatura între acesta și baza de date MongoDB din nivelul de date.

3.1.10. MongoDB

MongoDB se ocupă de nivelul de date. El stochează și furnizează datele necesare. Deoarece este un limbaj de tip NoSQL, nu are o structură predefinită, totuși încercăm să îndeplinim structura urmatorului model:

Ceasuri

{

marca: String, unique

modele:

[

nume: String, unique

deFemei: Boolean

mechanism_reglare: String

lista:

[

lista: String

pret: Number

]

]

}

III.2 Implementarea aplicației

Structura aplicției este semnificativ redusă prin utilizarea unei singure pagini principale a cărei porțiuni se reîncarcă în funcție de opțiunile utilizatorului, reducând astfel numărul de reîncarcări a paginii, traficul dintre server și pagină, timpul de așteptare a utilizatorului este nesemnificativ datorită acestor tehnologii avansate.

Schema grafică a implementării aplicației este următoarea:

III.2.1 Structura aplicației

Figura 3.4: Pagina principală

Figura 3.4 prezintă pagina principală a aplicației în care avem acces la întreaga galerie de ceasuri pe care le putem vizualiza din bara de navigare.Putem să ne alegem din start categoria dorită,femei/bărbați iar astfel se va face o filtrare după gen.

Sub imaginea fiecărui ceas avem denumirea acestuia iar dacă dorim să aflăm mai multe detalii, dăm click pe numele ceasului.

III.2.2. Bara de navigare a aplicației

Figura 3.5: Meniul aplicației

Figura 3.5 reprezintă meniul aplicației și detaliile cu privire la împărtirea categoriilor de ceasuri.

Bara de navigare este alcatuită din urmatoarele:

Opțiuni de filtrare:

Toate: afișează toate ceasurile;

Femei: afișează doar ceasurile genului feminin;

Barbați: afișează doar ceasurile genului masculin;

Butonul de vizualizare a coșului de cumparaturi.

Bara de navigare are o poziție explicit statică, așadar rămâne lipită pe partea de sus a paginii și în cazul în care utilizatorul face scroll în jos. Astfel permite acces rapid și comod la opțiunile de filtrare respectiv la vizualizarea coșului de cumpărături.

III.2.3. Coșul de cumpărături

Figura 3.6: Coșul cumpărăturilor

Figura 3.6 prezintă structura coșului de cumpărături în care se însumează valoarea tutror produselor comandate.

În partea dreaptă a barei de navigare există un buton intitulat „Cos”. Prin apăsarea acestui buton, va apărea o listă sub forma de dropdown. Lista conține articolele adăugate în coș, și valoarea totală a acestora.

Putem de asemenea să stergem anumite produse din coș,prin apăsarea butonului “x” de lângă denumirea aferenta în cazul în care utilizatorul a greșit ceasul sau se răzgândește să îl cumpere.

III.2.4. Header-ul

Figura 3.7: Header-ul aplicației

Figura 3.7 reprezintă header-ul aplicației care a fost conceput să fie cât mai minimalistic, el afișează doar numele site-ului, motto-ul acestuia si un logo simplu si elegant. El a fost stilizat în culorile predominante ale site-ului.

III.2.5. Bara de categorii de ceasuri

Figura 3.8: Bara categoriilor de ceasuri

Figura 3.8 prezintă bara categoriilor de ceasuri care a fost proiectată pentru a prezenta numele tuturor mărcilor de ceasuri existente în aplicație.

Bara de categorii afișeaza lista categoriilor disponibile. Ea deține cele mai interesante funcționalităti pe partea de interfață de utilizare.

În primul rând, poziționarea și forma acesteia. Inițial, ea se află sub header. După ce se face scroll și ar urma să iasă din zona de vizibilitate, acesta se lipește de bara de navigare și își ține o poziție statică. Totodata, mai are și o a treia formă în cazul rezoluțiilor mici, datorită responsivității.

În al doilea rând, ea spioneaza poziția scrollului și face highlight automat la categoria la care se uită utilizatorul.

Nu în ultimul rând, oferă un efect de smooth-scrolling când utilizatorul alege una dintre categoriile ei.

III.2.6. Detalii despre produse

Figura 3.9: Detaliile ceasurilor

Figura 3.9 pezintă modul de prezentare al detaliilor unui anumit ceas precum și posibilitatea de a cumpăra produsul ales prin butonul “Adauga la cos”.

Când utilizatorul alege un produs de pe site, se face un overlay semi-transparent gri asupra conținutului și apare o fereastră modală cu detaliile aferente produsul ales:

Modelul

Imagine exemplificativa

Descrierea

Mecanism de reglare

Lista

Pretul

Produsul se adaugă în coș apăsând butonul „Adauga la cos”.

III.2.7. Footer și Social Sharing

Figura 3.10: Footer-ul aplicației

Figura 3.10 prezintă structura footer-ului aplicației . Scopul footer-ului a fost de a afișa drepturile de autor în dreapta, iar în stânga butoanele pentru social sharing pe Facebook si Twitter, respectiv contorul împărtășirii folosind aceste platforme de socializare. Trăind într-o lume a rețelelor de socializare am cosiderat un plus pentru aplicație adăugarea acestor plug-in-uri.

III.2.8. Varianta responsivă mobile

Site-ul a fost conceput să aibă un design responsive. Adică să fie un singur design care asigură toate funcționalitățile pe diferitele platforme și rezoluții: laptop, tabletă, smartphone. Astfel, site-ul se redesenează singur în 4 feluri diferite:

Varianta normală: site-ul lucrează fără constrângeri legate de mărimi.

Varianta cu imagini micșorate: pentru a putea îndeplini restul constrângerilor.

Varianta cu bara de navigare ascunsă: când pe orizontală nu mai încap toate componentele barei de navigare. Acestea se înlocuiesc cu un buton, care în momentul apăsării expandează o listă cu componentele care nu au mai avut loc să fie afișate pe orizontală, așadar au fost reordonate pe verticală.

Varianta mobilă: în acest caz imaginile nu mai pot fi micșorate încât să încapă articolele pe orizontală și se repoziționează unul sub altul.

Aceste 4 tipuri de transformări se aplică progresiv una după alta. Necesitatea transformărilor pentru a îndeplini constrângerile se detectează și pe parcursul navigării, nu doar la încarcarea paginii. Deci și în cazul în care se face redimensionare la fereastra de navigare.

Concluzii

Aplicația implementată utilizează tehnologii moderne precum Twitter Bootstrap
+jQuery, CSS3, HTML5, utilizarea template-ing-ului engine-ului implicit folosit de Express, Jade, care generează HTML. Ea este responsivă, deci poate fi accesată atât de pe un calculator cât și de pe o tabletă sau smartphone. Acestă caracteristică este foarte interesantă oferind utilizatorilor o experiența cât mai placută, fie că ne referim la citirea unui site sau navigarea cu ajutorul butoanelor sau meniurilor.

Aplicația pe care am realizat-o este un site destinat prezentării și cumpărării unor ceasuri pentru a fi ridicate ulterior de către clienți. Utilizatorii au astfel toate informațiile necesare în legatură cu ceasul dorit, fiind mult mai comod decât deplasându-se până la magazin. De asemenea utilizatorii sunt informați și în legătură cu prețul actual al ceasurilor. În aplicație sunt prezentate cele mai luxoase ceasuri iar în acest sens se așteaptă standarde înalte în prezentarea lor, aplicația putând fi accesată permanent, cu un efort minim.

Am folosit un design atractiv, cât mai simplu, dar și modern, putând fi ușor de înțeles și de accesat de către toți utilizatorii. Desigur se pot aduce viitoare îmbunătățiri cu privire la gestionarea mai multor produse, realizarea unor promoții, iar la cumpărarea mai mulor produse să se facă un discount.

La ora actuală Internetul este folosit ca sursă de informare de peste 5 milioane de români, astfel prin împărtășirea părerilor pe unele rețele de socializare precum Facebook sau Twitter cresc avantajele aceastei aplicații prin atragerea de posibili clienți sau simplu vizitatori .

Bibliografie

[1] http://ro.wikipedia.org/wiki/HTML#Introducere consultat la 3.05.2015

[2] http://en.wikipedia.org/wiki/HTML#WYSIWYG_editors consultat la 5.05.2015

[3] http://en.wikipedia.org/wiki/HTML#Elements consultat la 5.05.2015

[4]http://en.wikipedia.org/wiki/HTML#Attributes consultat la 5.05.2015

[5]http://en.wikipedia.org/wiki/HTML#Markup consultat la 6.05.2015

[6]http://en.wikipedia.org/wiki/HTML#Version_history_of_the_standard consultat la 6.05.2015

[7] http://ro.wikipedia.org/wiki/HTML5#Markup consultat la 6.05.2015

[8] http://www.codebox.ro/forum/Thread-curs-html5-partea-i consultat la 8.05.2015

[9]http://www.codebox.ro/forum/Thread-curs-html5-partea-a-ii-a consultat la 8.05.2015

[10] http://www.codebox.ro/forum/Thread-curs-html5-partea-a-iv-a consultat la 9.05.2015

[10]Chip Kompakt – HTML5 – Ghidul incepatorului (Mark PILGRIM) consultat la 11.05.2015

[11] http://www.codebox.ro/forum/Thread-curs-html5-partea-a-v-a consultat la 12.05.2015

[12] http://www.codebox.ro/forum/Thread-curs-html5-partea-a-vi-a consultat la 12.05.2015

[13]http://www.codebox.ro/forum/Thread-curs-html5-partea-a-vii-a consultat la 12.05.2015

[14]http://www.codebox.ro/forum/Thread-curs-html5-partea-a-ix-a consultat la 12.05.2015

[15]http://www.codebox.ro/forum/Thread-curs-html5-partea-a-x-a consultat la 12.05.2015

[16]http://www.spidersolutions.ro/blog/Introducere-in-Cascading-Style-Sheets/27 consultat la 14.05.2015

[17]http://en.wikipedia.org/wiki/Css#Syntax consultat la 14.05.2015

[18]http://en.wikipedia.org/wiki/Minification_(programming) consultat la 14.05.2015

[19] http://ctrl-d.ro/development/resurse-development/introducere-in-css3-proprietati / consultat la 16.05.2015

[20]http://www.design19.ro/blog/web-design/css3-tehnici-noi/ consultat la 16.05.2015

[21] http://en.wikipedia.org/wiki/LESS_(stylesheet_language) consultat la 19.05.2015

[22] http://en.wikipedia.org/wiki/LESS_(stylesheet_language)#Variables consultat la 19.05.2015

[23] http://en.wikipedia.org/wiki/LESS_(stylesheet_language)#Nesting consultat la 19.05.2015

[24] http://en.wikipedia.org/wiki/LESS_(stylesheet_language)#Mixins consultat la 19.05.2015

[25] http://en.wikipedia.org/wiki/LESS_(stylesheet_language)#Functions_and_operations consultat la 19.05.2015

[26]http://ro.wikipedia.org/wiki/Javascript consultat la 23.05.2015

[27]http://ro.wikipedia.org/wiki/Javascript#Java.2C_JavaScript_.C8.99i_JScript consultat la 23.05.2015

[28]http://en.wikipedia.org/wiki/Javascript#Versions consultat la 23.05.2015

[29] http://ro.wikipedia.org/wiki/Javascript#Utilizare consultat la 23.05.2015

[30] http://ro.wikipedia.org/wiki/Jquery consultat la 27.05.2015

[31] http://ro.wikipedia.org/wiki/Jquery#Extensii consultat la 27.05.2015

[32] http://www.todaysoftmag.com/article/ro/9/Twitter_Bootstrap_in_Aplicatii_Web_258 consultat la 30.05.2015

[33] http://en.wikipedia.org/wiki/Twitter_Bootstrap#Use consultat la 30.05.2015

[34] http://en.wikipedia.org/wiki/Nodejs consultat la 2.06.2015

[35]http://www.slideshare.net/busaco/nodejs-aspecte-esentiale consultat la 2.06.2015

[36] http://www.informit.com/articles/article.aspx?p=1858263&seqNum=7 consultat la 5.06.2015

[37] http://quickleft.com/blog/getting-started-with-express-in-node consultat la 6.06.2015

[38] https://github.com/visionmedia/jade#readme consultat la 9.06.2015

[39] http://ro.wikipedia.org/wiki/MongoDB consultat la 15.06.2015

[40] http://ro.wikipedia.org/wiki/MongoDB#Caracteristici_principale consultat la 15.06.2015

[41] http://theholmesoffice.com/mongoose-and-node-js-tutorial/ consultat la 15.06.2015

[42] http://ro.wikipedia.org/wiki/Cloud_computing consultat la 25.06.2015

[43] http://ro.wikipedia.org/wiki/Cloud_computing#Caracteristici consultat la 25.06.2015

[44] http://ro.wikipedia.org/wiki/Cloud_computing#Avantaje_.C8.99i_dezavantaje consultat la 25.06.2015

[45] https://www.appfog.com/about/ consultat la 28.06.2015

[46] http://en.wikipedia.org/wiki/Platform_as_a_service consultat la 28.06.2015

[47] http://marianbest.com/blog/what-means-responsive-design/?lang=ro

consultat la 30.06.2015

[48] http://ctrl-d.ro/design/resurse-design/o-scurta-introducere-in-responsive-web-design/ consultat la 30.06.2015