Licenta Grab Andrei

UNIVERSITATEA DE VEST “VASILE GOLDIŞ”
ARAD
FACULTATEA DE ŞTIINTE ECONOMICE INFORMATICĂ ŞI INGINERIE
LUCRARE DE LICENŢĂ
www.gwindows.ro
Proiectarea, realizarea si implementarea unui site pentru
o firmă de tâmplarie PVC
Conducător ştiinţific
Lect. univ dr. ing. GABOR ANDREI MARIUS
Absolvent
GRAB ANDREI
Arad
2016
1
CUVÂNT ÎNAINTE
Această lucrare reprezintă lucrarea de licență în cadrul UNIVERSITĂȚII DE VEST

„VASILE GOLDIȘ”, FACULTATEA DE ȘTIINȚE ALE NATURII INGINERIE ȘI
INFORMATICĂ, departamentul de informatică din Arad.
Pe parcursul acestei lucrări de licență vor fi discutate aspectele teoretice cât și practice
care au dus la creerea site-ului gwindows.ro, utilizând următoarea gamă de tehnologii și
limbaje:
- HTML
- PHP
- JAVASCRIPT
- JQUERY
- CSS
Alegând această gamă de tehnologii și limbaje a ajutat în implementarea
unui site web printr-o metodă modernă, ținând pasul cu tehnologiile de ultimă generație.
Site-ul web gwindows.ro a fost creat în întregime, fără a folosi orice fel de model sau
template, toate aspectele site-ului fiind după preferințele dezvoltatorului. Scrierea codului a
fost realizată cu ajutorul editorului de text Brackets, oferind un grad ridicat de ușurință în
dezvoltarea site-ului web.
2
CUPRINS
1 INTRODUCERE................................................................................................................................5
2 PREZENTAREA SITE-ULUI............................................................................................................6
3 TEHNOLOGII WEB.........................................................................................................................11
3.1 HTML 5......................................................................................................................................11
3.2 PHP............................................................................................................................................12
3.3 JAVASCRIPT............................................................................................................................14
3.3.1 Elementele de bază..............................................................................................................14
3.3.2 Validarea formularelor.........................................................................................................15
3.4 JQUERY.....................................................................................................................................17
3.4.1 Adăugarea librăriei JQuery în pagina web...........................................................................17
3.4.2 Structura librăriei JQuery.....................................................................................................18
3.4.3 Metoda document ready.......................................................................................................19
3.4.4 Acțiunea sau evenimentul unei funcții în JQuery.................................................................19
3.4.5 Selectori JQuery..................................................................................................................20
3.4.6 Animațiile JQuery................................................................................................................21
3.4.7 Metoda fade.........................................................................................................................22
3.4.8 Metodele slide.....................................................................................................................23
3.4.9 Funcția de callback..............................................................................................................23
3.4.10 Înlănțuirea metodelor JQuery............................................................................................24
3.4.11 Manipularea conținutului HTML.......................................................................................24
3.4.12 Adăugarea conținutului HTML..........................................................................................24
3.4.13 Ștergerea conținutului HTML............................................................................................25
3.4.14 Dimensiuni JQuery............................................................................................................25
3.5 CSS.............................................................................................................................................26
3.5.1 Foaie de stil externă.............................................................................................................26
3.5.2 Foaie de stil internă..............................................................................................................28
3.5.3 Stil în linie...........................................................................................................................29
3.5.4 Stiluri CSS adaptive.............................................................................................................30
4. REALIZAREA SITE-ULUI............................................................................................................32
4.1 Utilizare scripturilor...................................................................................................................32
4.2 Implementarea designului...........................................................................................................34
5. CONCLUZII ŞI CONTRIBUŢII......................................................................................................39
BIBLIOGRAFIE..................................................................................................................................40
3
LISTA FIGURILOR
Figura 2.2 Pagina de acasă – prima secțiune...............................................................................7
Figura 2.3 Prima secțiune pe disp. mobil...................................................................................7
Figura 2.4 Pagina de acasă – a doua secțiune.............................................................................7
Figura 2.5 A doua secțiune pe disp. mobil..................................................................................7
Figura 2.6 Pagina despre noi.......................................................................................................8
Figura 2.7 Pagina despre noi – fereastra modal..........................................................................8
Figura 2.8 Galeria de imagini.....................................................................................................9
Figura 2.10 Pagina de ofertă – introducere date tâmplărie........................................................10
Figura 2.11 Pagina de contact...................................................................................................10
Figura 3.1 Formular contact PHP............................................................................................13
Figura 3.2 Dimensiunile unui element în JQuery......................................................................26
Figura 3.3 Rezultatul unui fișier css extern...............................................................................28
Figura 3.4 Rezultatul unui fișier css intern...............................................................................29
Figura 3.5 Design web adaptiv.................................................................................................31
Figura 4.1 Buton reailzat in CSS..............................................................................................35
Figura 4.2 Element grafic rotund cu umbră și background.......................................................36
Figura 4.3 Coș de gunoi animat................................................................................................38
4
1 INTRODUCERE
Această lucrare încurajează modernizarea casei oricărei persoane creând o atmosferă

cât mai plăcută, îmbunătățind aspectul clădirilor prin montarea ferestrelor și a usilor din
tâmplărie PVC cu geam termoizolator.
Printre cele mai importante lucruri deținute de catre oameni se poate număra cu
ușurință locul unde trăiește, adică locul pe care îl numești acasă. Acest lucru ne face ca
întotdeauna să dăm prioritate casei noastre pentru a putea trăi cât mai în armonie. Un factor
important al unei case îl reprezintă tâmplăria, care dă o notă de eleganță oricărei clădiri cât și
un nivel mare de siguranță și confort.
Site-ul gwindows.ro are ca scop informarea clienţilor în legătură cu oferta de
tâmplărie PVC oferită de catre firma I.F.GRAB cât și aspectele tehnologiilor folosite pentru
realizarea tâmplăriei PVC cum ar fi, grosimea si culoarea profilului PVC, sistemele de
feronerie, grosimea pachetului de sticlă etc.
Prezentând informațiile despre tehnologia geamurilor și a ușilor din tâmplarie PVC
într-o manieră cât mai simplă și la subiect, clienții pot fi puși la curent foarte ușor cu ultimele
tehnologii apărute pe piață.
Navigarea site-ului web este foarte ușoară, deoarece designul site-ului a fost coceput
pentru a fi folosit pe ecrane de rezoluții mari cât și pe dispozitive mobile cum ar fi
smartphone-ul și tableta.
5
2 PREZENTAREA SITE-ULUI
Site-ul gwindows.ro este site-ul de prezentare și ofertare a tâmplăriei PVC fabricată de

firma I.F.GRAB. Acesta a fost conceput intr-o manieră cât mai simplă, folosind un design
minimalist și atrăgător pentru a putea face navigarea site-ului cât mai ușor posibilă.
gwindows.ro a fost proiectat pentru a rula la un standard cât mai ridicat pe o gamă
largă de dispozitive, punând la dispoziție informațiile de oriunde te-ai afla, pe orice dispozitiv
folosesti.
Din primul moment al accesării site-ului, utilizatorul este salutat de pagina de
welcome. Aceasta afișează sloganul firmei, împreună cu un slider, ce conține o selecție de
poze cu tâmplărie PVC. Accesarea site-ului propriu zis se face dând click pe butonul „enter
website”.
Figura 2.1 Pagina de welcome
Pagina de acasă are formatul unui “one page site” , fiind structurată in mai multe
secțiuni, mai exact în cinci. Fiecare secțiune tratează un subiect din spectrul tâmplăriei PVC,
ilustrând principalele caracteristici ale componentelor și materialelor printr-o metodă foarte
vizuală și adoptând designul minimalist, care dă impactul de simplu și frumos.
Fiecare secțiune în pagina de acasă se poate face accesând rotița de mouse, apasând
sageata de sus sau jos de la tastatură sau accesând ancorele secțiunilor din stânga jos, iar pe
6
dispozitivele mobile cu touch se poate atinge si trage sus sau jos pe pagină. Secțiunile se
adaptează în funcție de dispozitivul folosit și se centrează vertical automat. Navigarea site-
ului se realizează accesând fiecare link din bara de navigație de sus.
Figura 2.2 Pagina de acasă – prima secțiune

Figura 2.3 Prima secțiune pe
disp. mobil
Figura 2.4 Pagina de acasă – a doua secțiune

Figura 2.5 A doua secțiune pe disp. mobil
Pagina “Despre noi” conține informații despre firma I.F.GRAB, împreună cu detalii
despre componentele și accesoriile care duc la realizarea tâmplăriei PVC. Pagina este
structurată într-un paragraf cu delaliile firmei împreună cu șase categorii principale care
semnifică fiecare componentă a tâmplăriei PVC.
Categoriile sunt structurate în ferestre de tip modal, care pot fi accesate dând click pe
butonul corespunzător componentei
7
Figura 2.6 Pagina despre noi
Figura 2.7 Pagina despre noi – fereastra modal
Pagina “Galerie” conține o galerie de imagini cu lucrări executate împreună cu alte

modele de tâmplărie PVC. Imaginile din galerie au rolul de a ajuta clientul în a alege designul
pentru tâmplăria dorită.
8
Figura 2.8 Galeria de imagini
În pagina “Ofertă”, clientul are opțiunea de a alege unul sau mai multe modele de
tâmplărie dintr-un set prestabilit de uși și geamuri. Tâmplăria se poate adăuga foarte ușor
apasând pe butonul “Adaugă tâmplărie”. Toate modelele de tâmplărie pot fi selectate dintr-o
fereastră de tip modal.
După selecție, clientul trebuie să introducă, înălțimea, lățimea și numărul de bucăți, de
asemenea să selecteze culoarea dorită prin intermediul unor butoane radio. Accesooriile dorite
se pot selecta utilizând selecturi-le alăturate. După ce s-au stabilit toate detaliile clientul își
poate calcula prețul în funcție de ce a selectat. Tâmplăria, împreună cu prețul pot fi adăugate
într-o ofertă, unde acolo se poate vedea totalul tâmplăriilor. Această ofertă este în scop
informativ, oferindu-i clientului o idee, cât ar costa tâmplăria dorită, prețul final fiind discutat
la telefon sau pe mail.
Figura 2.9 Pagina de ofertă – modal selecție tâmplărie
9
Figura 2.10 Pagina de ofertă – introducere date tâmplărie
Pagina “Contact” reprezintă pagina unde clientul poate să afle informații de contact
ale firmei I.F.GRAB. În această pagină, locația firmei este ilustrată printr-o hartă interactivă
utilizând google maps.
Clientul poate contacta reprezentantul firmei apelând la numărul de telefon afișat, sau
prin mail completând formularul alărutat.
Figura 2.11 Pagina de contact
10
3 TEHNOLOGII WEB
3.1 HTML 5
Hyper Text Markup Language sau după cum îl știm cu toții HTML reprezintă un
limbaj de marcare care este folosit pentru a creea pagini web ce pot fi afișate într-un
navigator, fiind codul care stă la baza paginilor web. Aceste pagini web au extensia “.html”
sau “.htm” și sunt formate din diferite etichete sau tag-uri.
Redarea conținutului poate varia foarte mult, de la simple proprietăți ale textului, cum
ar fi text înclinat ,îngroșat sau subliniat până la scripturi mai complexe, imagini sau formulare.
Informațiile despre titlul și autorul documenului se numesc metadate, acestea structurează
documentul în segmente diferite, titluri etc., de asemenea aceste metadate conțin informații
importante care permit documentului să fie legat de alte documente, astfel pentru a forma
web-ul sau hiperlink-uri.
Tag-urile sau etichetele care duc la formarea paginilor web sunt de obicei o pereche,
cea de deschidere fiind <tag> iar cea de închidere fiind </tag>, dar mai exista și cazuri în care
se folosește doar eticheta de forma <tag />. Aceste tag-uri sau etichete sunt interpretate de
către browser sau navigator, afișând rezlutatul pe ecran în funcție de tag-urile folosite. Un
document HTML este compus din trei părți principale, acestea fiind, versiunea HTML a
documentului, zona head cu tag-urile <head> </head> și zona body cu tag-urile
<body></body>.
HTML se împarte în mai multe versiuni, ultima iterație fiind HTML 5 oferind multe
îmbunătățiri în ceea ce privește suportul pentru multimedia și în același timp fiind un limbaj
foarte ușor de citit. Pe lângă tag-urile cunoscute din versiunile anterioare de HTML acesta
cuprinde mai multe caracteristici sintactice cum ar fi, tag-urile <video>, <audio>, <header> și
<canvas> precum și integrarea SVG (grafică vectorială proporționabilă) care înlocuiește tag-
ul <object>. Aceste tag-uri facilitează manipularea în web a conținutului multimedia fără a
mai recurge la metode de plugin sau API. Au mai fost introduse de asemenea și alte elemente
noi ca <section>, <article>, <header> și <nav> îmbunătățind conținutul și așezarea în
document.
În acest moment, aproximativ 50% din browsere suportă HTML 5 cealaltă jumătate
folosind și Flash. HTML 5 utilizează foarte intens alte thenologii asemănătoare cu JavaScript,
Canvas și Css, fiind o alternativă foarte bună a clasicelor pulgin-uri.
Exemple în folosirea noilor proprietăți ale HTML5:
11
 Încărcarea unui fișier video cu redarea automată
<video width= ”320” height= ”240” autoplay>
<source src= ”movie.mp4” type= ”video/mp4”>
<source src= ”movie.ogg” type= ”video/ogg”>
Browserul tău nu suportă HTML 5.
</video>
 Creearea unui articol izolat de restul conținutului

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developer by
Google, released in 2008</p>
</article>
 La începutul oricărui document HTML 5 se folosește elementul

<!DOCTYPE html>
 Definirea link-urilor de navigare

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
 Creearea unui element grafic cu ajutorul tag-ului canvas, împreună cu codul

JavaScript
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#d3d3d3;" > Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ct.lineTo(200,100);
ctx.stroke();
</script>
3.2 PHP
PHP: Hypertext Preprocessor sau mai pe scurt PHP, este un limbaj de programare
folosit pentru a produce pagini web cu conținut dinamic, fiind de regulă înglobat în codul
HTML facilitând creearea aplicațiilor independente. PHP este unul dintre cele mai utilizate
limbaje de programare server-side, fiind utilizat pe 1 milion de servere web conform
statisticilor.
12
PHP diferă de JavaScript prin faptul că serverul execută codul PHP și este transmis
mai departe către client prin pagina HTML, astfel clientul primește rezultatul rulării scriptului
fără a vedea codul sursă, păstrând astfel discreția dintre scriptul dezvoltatorului și client.
Fiind o combinație dintre C, Pearl și Java, PHP este un limbaj foarte simplu de utizat,
fiind folosit pentru creearea aplicațiilor de sine stătătoare. Un alt aspect important al
limbajului PHP îl reprezintă faptul că acesta poate coopera cu majoritatea bazelor de date
relaționale (MySql, Oracle). Fișierele care folosesc limbajul PHP pot avea extensiile, .php,
.php3, .ph3, .php4, .inc, .phtml acestea fiind procesate de către server și prezentate clientului
prin text sau cod HTML.
În această lucrare limbajul PHP a fost folosit pentru a creea un formular de contact,
utilizând metoda “POST”. Acest script trimite un mail la adresa contact@gwindows.ro
folosind informațiile introduse de către client în formularul de contact.
<?php
if(empty($_POST) === false){
$errors = array();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if (empty($name) === true || empty($email) === true || empty($message) ===
true){
$errors[] = 'Câmpurile nume, email și mesaj sunt obligatorii';
} else {
if(filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
$errors[] = 'Nu ați introdus o adresă de email validă!';
}
}
if(empty($errors) === true){
$headers = "De la: " . $email . "\r\n";
mail('contact@gwindows.ro', 'Formular contact - '. $name, $message,
$headers);
header ('Location: Contact.php?trimis');
exit();
}
}
?>
Figura 3.1 Formular contact PHP
13
3.3 JAVASCRIPT
JS sau JavaScript este cel mai popular limbaj de scripting, acesta fiind interpretat
direct de catre browser. Acesta dă o multitudine de funcționalități paginilor web, având un
răspuns imediat. Scriptul poate fi implementat in paginile HTML făcând posibilă verificarea
datelor introduse de utilizatori sau crearea de animații și meniuri.
Deși acest script este asemanător cu limbajul de programare Java ,prin nume, sintaxă
și librării standard, JavaScript și Java nu ai nici o legătură, acesta fiind bazat pe limbajul de
programare Self și având o sintaxă apropiată de cea a limbajului C.
Limbajul a fost dezvoltat de către Brandon Eich, sub numele de Mocha, limbajul fiind
numit oficial LiveScript atunci când a fost lansat în versiunea beta a navigatorului Nestcape
Navigator 2.0, pe urmă fiind redenumit în JavaScript când s-a lansat împreună cu Netscape
Navigator 2.0B3.
Browserele web interpretează informațiile unei pagini web sub forma unui arbore de
obiecte fiind accesate și manipulate de script-urile JavsScript. Acel arbore de obiecte se mai
numește DOM sau Document Object Model, acesta având standardul W3C, oferind
posibilitatea scrierii de scripturi portabile, care pot funcționa pe toate browserele.
3.3.1 Elementele de bază

Elementele de bază ale limbajului JavaScript sunt:
Comentarii:
- pe o singură linie ex. // Comentariu pe o linie
- pe mai multe linii ex. /* .... */
Tipuri de date:
- nedefinite ex. var test;
- nule
- string („sir de caractere”) ex. var x = “Salut, lume”;
- array(“tablou” sau “matrice”) ex. var sir = []; //o variabilă array cu numele sir
- date calendaristice ex. new Data(); // creează variabila Data care conține data și
ora
14
Funcții:
Funcțiile sunt blocuri de cod care execută o sarcină specială doar atunci când cineva o
apelează. Sintaxa unei funcții în JavaScript este de forma:
Function nume(parametru1, parametru2, parametru3) {codul care trebuie executat}
Obiecte:
Obiectele sunt variabile și pot conține mai multe valori.
Acest cod atribuie mai multe valori (Mercedes, AmgGTS, negru) variabilei numite
mașină: var mașină = {type:”Mercedes”, model:”AmgGTS”, color: “negru”};
Evenimente:
Când JavaScript este folosit în pagina HTML, acesta poate reacționa la evenimentele
alocate elementelor din interiorul acelei pagini. JavaScript execută cod când acele evenimente
sunt detectate.
<!DOCTYPE html>
<html>
<body>
<p>Dați click pe buton pentru a afișa data</p>
<button onclick= "displyDate()" >Cât este data?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id= "demo"></p>
</body>
</html>
Obiectul math:
Obiectul math ne permite folosirea funcțiilor matematice cum ar fi: min, max, random,
round, ceil, floor.
Math.round(1.7); // valoarea rotunjită este 2
Math.round(3.4); // valoarea rotunjită este 4
Math.SQRT4 // calculează radical din 4
3.3.2 Validarea formularelor
Utilizatorul poate introduce date într-o pagină prin intermediul formularelor HTML,
iar validarea acelor date se poate face cu ajutorul lui JavaScript.
15
Validarea datelor ne asigură că datele introdusele în calculator sunt curate, corecte și
folositoare. Sarcinile tipice de validare sunt:
- s-au introdus date în toate câmpurile?
- a fost introdusă o dată validă?
- a fost introdus text într-un camp numeric?
Validarea poate fi definită de mai multe metode diferite, și executată în mai multe
feluri.
Validarea Client Side este executată de către browserul web înainte de a fi trimise
datele de intrare către serverul web:
<form action="demo_form.asp" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit" >
</form>
Validarea Server Side este executată de către serverul web înainte de a fi trimisă
acestuia:
<!DOCTYPE html>
<html>
<head>
<script>
function validareForm(){
var x = document.forms[ "myForm" ][ "fname" ].value;
if (x == null || x== "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action= "demo_form.asp"
onsubmit="return validateForm()"
method= "post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit" >
</form>
</body>
</html>
16
3.4 JQUERY
JQuery este o librărie JavaScript cross-platform concepută pentru a simplifica scriptul

în HTML pe partea clientului. JQuery este cea mai populară librărie JavaScript fiind instalată
pe mai mult de jumătate din site-urile cu trafic mare ale web-ului.
Un lucru important care trebuie sa îl știm despre JQuery este faptul că acesta este doar
o librărie JavaScript, nimic mai mult. Sintaxa JQuery este proiectată pentru a putea naviga un
document mult mai ușor, a selecta element DOM, a creea animații și de a manipula
evenimente.
JQuery oferă de posibilitatea de a creea plugin-uri peste librăria JavaScript. Abordarea
modular a librăriei JQuery permite creearea unor pagini web dinamice și performate, de
asemenea ajută și la creearea aplicațiilor web.
La bazele librăriei JQuery stă de asemenea manipularea librăriei DOM(Document
Object Model). DOM-ul este o structură arborescentă, care reprezintă toate elementele unei
pagini web, astfel JQuery simplificând sintaxa pentru a găsi, selecta și manipula acele
elemente.
Avantajele folosirii librăriei JQuery sunt:
- Încurajează separarea dintre JavaScript și HTML furnizând o sintaxă simplă
pentru a adăuga un eveniment DOM-ului, folosind JavaScript, spre deosebire
de a adăuga attribute elementelor HTML pentru a apela o funcție JavaScript.
- Codurile în JavaScript ruleaza diferit de la browser la browser, iar folosind
JQuery acesta elimină acea incompatibilitate furnizând o interfață consistentă
care funcționează pe toate navigatoarele.
- JQuery este o librărie extensibilă având noi evenimente, elemente și metode
care pot fi adăugate și refolosite sub formă de plugin.
3.4.1 Adăugarea librăriei JQuery în pagina web
Librăria JQuery este un singur fișier JavaScript care conține toate evenimentele,
efectele și funcțiile AJAX obișnuite pentru DOM. Acest fișier poate fi inclus în pagina web
prin creearea unui link către serverele publice, sau către fișierul local, utilizând următoarea
sintaxă. Acest link trebuie introdus între tag-urile <head> </head>.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
17
În exemplul de ma jos, JQuery ascunde toate elementele <a> , folosind metoda .hide().
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>Demo</title>
</head>
<body>
<a href= "http://jquery.com/" >jQuery</a>
<script src= "jquery.js" ></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
$(this).hide( "slow" );
});
});
</script>
</body>
</html>
3.4.2 Structura librăriei JQuery
Sintaxa libăriei Jquery este special concepută pentru a selecta elemente HTML și de a
efectua diferite acțiuni pe acele elemente.
Sintaxa de bază este: $(selector).acțiune()
 Semnul $ definește și accesează librăria Jquery
 (selector) accesează sau găsește elementul HTML
 acțiune() aplică o acțiune elementului HTML accesat
Câteva exemple de structuri Jquery:

$(".welcome_content").hide() – ascunde elementul HTML cu numele clasei
welcome_content
$('.gsr'+gsr).remove() - șterge elementul HTML cu numele clasei “gsr”+ variabila gsr
$(".slogan").fadeIn('fast') –elementu HTML cu numele clasei “slogan” apare rapid
$(".myButton").click(function () {
$(".welcome_content").fadeOut(function () {window.location.href =
"Home.php"; });
}); - la click-ul elementului HTML cu numele clasei ”myButton”,
elemental HTML cu numele clasei “welcome_content” dispare, iar
după aceea suntem redirecționați către pagina Home.php
18
3.4.3 Metoda document ready
Metoda document ready, previne rularea oricărui cod JQuery înainte de a se încărca
pagina web în întregime.
Este o foarte bună practică de a aștepta încprcarea paginii web înainte de a lucra cu
elementele HTML din interiorul acesteia.
Acest lucru ne ajută să punem codul JQuery înainte de body, in secțiunea head, și de
asemenea previne accesarea unor elemente din pagină care nu s-au încărcat.
Toate metodele JQuery se află în interiorul funcției document.ready()
$(document).ready(function () {
'use strict'
$(function () {
var string = "Un plus de liniste in viata ta." ;
var q = jQuery.map(string.split(''), function (letter) {
return $( '<span>' + letter + '</span>');
});
var dest = $('.fadeIn');
var c = 0;
var i = setInterval(function () {
q[c].appendTo(dest).hide().fadeIn(3000);
c += 1;
if (c >= q.length) clearInterval(i);
}, 100);
$( ".slogan" ).fadeIn('fast').delay(3500).fadeOut('slow');
$( ".welcome_content" ).hide().delay(4000).fadeIn('slow');
$( ".myButton" ).click(function () {
$( ".welcome_content" ).fadeOut(function () {window.location.href =
"Home.php" ; });
});
});
});
3.4.4 Acțiunea sau evenimentul unei funcții în JQuery
Toate acțiunile vizitatorului asupra unei pagini web se numesc evenimente. Un

eveniment reprezintă momentul precis când se întâmplă ceva. Metodele care manipulează
evenimentele împreună cu elementele codului HTML fac parte din funcțiile esențiale ale
librăriei JQuery.
19
Exemple de acțiuni des întâlnite în paginile web:
- mutarea cursorului peste un element
- selectarea unui buton radio
- când dăm click pe un element
Exemplu efectuării unei acțiuni atunci când se mută cursorul peste elementul cu
numele id-ului “p1”.
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs
/jquery/1.12.2/jquery.min.js">
</script>
<script>
$("#p1").mouseenter(function(){
alert( "You entered p1!" );
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph</p>
</body>
</html>
3.4.5 Selectori JQuery
Selectorii reprezintă unul dintre cele mai importante aspecte ale librăriei JQuery,
aceștia folosind sintaxa CSS care permite autorului să identifice foarte ușor seturile de
elemente din pagină. Cu ajutorul selectorilor JQuery putem identifica elementele din pagina
HTML după, nume, id, clasă, atribut, valoare de atribut și mult mai multe. Toți selectorii
JQuery încep cu semnul dolar urmat de paranteze rotunde: $().
Selectorii JQuery pot fi de mai multe feluri:
Selectori CSS care folosesc sintaxa și semantica CSS3:
- $("div") selectează toate elementele <div>
- $(”#testButton”) selectează elementele care au numele id-ului
“testButton”
- $("button[id*=test]") selectează toate butoanele în care atributul id
conține cuvântul “test”
- $(".numeclasă") selectează toate elementele care numele clasei
“numeclasă”
Selectori poziționali:
20
- $("p:first") selectează primul element din pagină
- $("div:nth-child(5n+1)") selectează toate elementele situate după
fiecare al cincilea element <div>
- $("button.small:last") selectează ultimul buton din pagină care are
numele clasei “small”
Selectori personalizați care nu folosest sintaxa și semantica CSS:
- $("img:animated") selectează toate elementele <img> care au o
animație în curs
- $(":button:hidden") selectează toate elementele de tip buton care sunt
ascunse
- $("option:not(:selected)") selectează toate elementele de tip <option>
care nu au fost selectate
3.4.6 Animațiile JQuery
Metoda animate() este folosită pentru a creea animații presonalizate. Această metodă
are sintaxa de tipul: $(selector).animate({params},speed,callback);
Parametrul params stabilește animarea proprietății CSS. Parametrul opțional speed
stabilește durata efectului de animație, acesta putând lua valorile: “slow”, “fast” sau
milisecunde. Parametrul opțional callback execută o funcție după încheierea animației.
Exemplul de mai jos, animează un element cu proprietăți multiple
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
var div = $( "div" );
div.animate({height: '300px', opacity: '0.4'}, "slow" );
div.animate({width: '300px', opacity: '0.8'}, "slow" );
div.animate({height: '100px', opacity: '0.4'}, "slow" );
div.animate({width: '100px', opacity: '0.8'}, "slow" );
});
})
21
3.4.7 Metoda fade
Metoda fade ajută la ascunderea elementelor din pagina HTML, modificându-le

opacitatea prin metodele fadeIn(), fadeOut(), fadeToggle() și fadeTo(). Această metodă are
sintaxa de forma: $(selector).fade”In, Out, Toggle, To”(speed,callback).
Parametrul opțional “speed” specifică durația efectului dorit și poate lua valoarea
“slow”, “fast” sau milisecunde. Parametrul “callback” este de asemenea și el opțional
executând o funcție după terminarea metodei fade.
- metoda fadeIn este folosită pentru a afișa un element deja ascuns.

$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
})
- metoda fadeOut este folosită pentru a ascunde un element vizibil

$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
})
- metoda fadeToggle este folosită pentru a comuta dintre metodele fadeIn și

fadeOut. Când un element nu este vizibil se execută metoda fadeIn, iar când
un element este vizibil se execută metoda fadeOut.
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
})
- metoda fadeTo este folosită pentru a seta opacitatea elementului ître valorile 0
și 1, 0 fiind complet transparent, iar 1 fiind complet vizibil.
$("#div1").fadeTo();
$("#div2").fadeTo("slow");
$("#div3").fadeTo(3000);
})
22
3.4.8 Metodele slide
Funcțiile slide ale librăriei JQuery au rolul de a muta elementele HTML în sus sau în
jos. Aceste metode se aplică de regulă meniurilor și panourilor, dar pot fi folosite pe orice
elemente HTML. Metoda JQuery slide poate fi de trei tipuri: slideUp, slideDown și
slideToggle.
Metoda slide are următoarea sintaxă: $(selector).slide(speed, callback). Parametrul

opțional “speed” specifică durația efectului dorit și poate lua valoarea “slow”, “fast” sau
milisecunde. Parametrul “callback” este de asemenea și el opțional executând o funcție după
terminarea metodei slide.
- metoda slideUp se folosește pentru a muta elementul HTML sus față de poziția
lui inițială
$("#flip").click(function(){
$("#panel").slideUp();
});
- metoda slideDown se folosește pemtru a muta elementul HTML jos față de

poziția lui inițială
});
- metoda slideToggle se folosește pentru a comuta dintre slideDown și slideUp.

Atunci când un element este poziționat sus atunci prin metoda slideToggle
elementul respectiv se nută in jos sau invers
});
3.4.9 Funcția de callback
Afirmațiile JavaScript sunt rulate linie cu linie. În cazul efectelor, linia urmatoare de
cod poate fi rulată chiar dacă efectul nu s-a terminat acest fapt creeând erori. Pentru a preveni
acest lucru putem apela o funcție de callback. Orice funcție callback este executată după
terminarea efectului.
Un exemplu pentru utilizarea unei funcții de callback la terminarea unui fadeOut.
23
"Home.php" ; });
});
3.4.10 Înlănțuirea metodelor JQuery
Folosind tehnica de chaining(înlănțuire), aceasta ne permite folosirea comenzilor

JQuery, una după alta pe același element. Astfel navigatoarele nu trebuie să caute un element
de mai multe ori. Pentru a înlănțui mai multe acțiuni, pur și simplu se adaugă acțiunea după
acțiunea precedentă.
Exemplu folosind tehnica de chaining:
3.4.11 Manipularea conținutului HTML
O parte importantă a librăriei JQuery este manipularea elementelor din DOM.

Manipularea elementelor html se poate face apelând la metoda .html(). Această metodă
setează sau selectează conținutul unui element selectat incluzând și marcarea HTML. Forma
generală a metodei html este: $(selector).html(conținut).
$("p").html("Hello <b>world!</b>");
});
});
3.4.12 Adăugarea conținutului HTML
Utilizând librăria JQuery, adăugarea conținutului HTML se poate face foarte ușor
folosind următoarele metode:
24
- metoda append() inserează conținutul la sfârșitul elementului HTML selectat:
$(selector).append(conținut)
- metoda prepend() inserează conținutul la începutul elementului HTML
selectat: $(selector).prepend(conținut)
- metoda after() inserează conținutul după elementul HTML selectat: $
(selector).add(conținut)
- metoda before() inserează conținutul înaintea elementului HTML selectat: $
(selector).before(conținut)
3.4.13 Ștergerea conținutului HTML
Utilizând librăria JQuery, ștergerea conținurului HTML se poate face foarte ușor
utilizând urmatoarele metode:
- metoda remove()sterge elemtul HTML selectat împreună cu elementul său
“child” $("#div1").remove();
- metoda empty() sterge doar elementele “child” ale elementului HTML selectat:
$("#div1").empty();
3.4.14 Dimensiuni JQuery
Folosind JQuery putem lucra foarte ușor cu dimensiunile unui element selectat cât și
cu dimensiunile ferestrei navigatorului, utilizând metodele principale width() și height().
Varitații ale metodelor principale sunt: innerWitdh(), innerHeight(), outerWitdh(),
outerHeight(), outerWidht(true) și outerHeight(true)
- metoda width() setează sau returnează lățimea unui element selectat excluzând
padding-ul, marginea și border-ul: $
(".div1").width(“100px”);
- metoda height() setează sau returnează înălțimea unui element selectat
excluzând padding-ul, marginea și border-ul: $
(".div1").height(“500px”);
25
Figura 3.2 Dimensiunile unui element în JQuery
3.5 CSS
CSS sau Cascading Style Sheets este un limbaj de stil care definește poziția
elementelor HTML în pagină. Cu ajutorul CSS putem schimba fontul, culorile, marginile,
liniile, imagini de background și mult mai multe lucruri. Pentru aranjarea elementelor în
pagină, poate fi folosit HTML dar CSS oferă mult mai multe opțiuni, fiind mai precis și
sofisticat, fiind suportat de către toate browserele.
HTML este folosit pentru a structura conținutul iar CSS este folosit pentru a formata
conținutul strucurat. CSS reduce cu mult munca alocată proiectării designului unui site-web,
deoarece de regulă toate stilurile și proprietățile elementelor se găsesc într-un singur fișier cu
extensia .css, iar dacă vrem să aducem o modificare designului existent , stilurile se modifică
dintr-un singur loc.
Ultima versiune a limbajului de stil CSS este CSS3, care aduce atribute noi și ajută la
creearea unui design web cât mai avansat.
Sunt trei moduri de a introduce o foaie de stil într-o pagină HTML, iar acestea sunt:
- foaie de stil externă
- foaie de stil internă
- stil în linie
3.5.1 Foaie de stil externă

Foaia de stil externă este un fișier cu extensia .css, iar acesta se aplică paginilor HTML
în care este declarată. Acest lucru face ca atunci când se modifică fișierul .css, modificarea să
aibă efect asupra tuturor paginilor unui web-site.
Acest fișier se introduce in pagină utilizând tag-ul <link>, care se declară în secțiunea
head a paginii.
<link rel= "stylesheet" type= "text/css" href= "css/galerie.css" >
26
Exemplu cum arată un fișier .css introdus intr-o pagină HTML:
<html>
<head>
<meta name= "viewport" content="width=device-width, initial-scale=1.0" >
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" >
</script>
<script type= "text/javascript" src= "javascript/oferta.js"></script>
<script type= "text/javascript" src= "javascript/tamplarie.js"></script>
<script type="text/javascript" src= "javascript/jspdf.js"></script>
<link href='https://fonts.googleapis.com/css?
family=Raleway:100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel= "stylesheet" type= "text/css" href= "css/oferta.css" >
<link rel= "apple-touch-icon" sizes= "57x57" href= "sigla57x57.png" />
<link rel= "stylesheet" type= "text/css" href="css/menu.css">
</head>
<body id= "body" >
<?php include('menu.php') ?>
<div class= "content_oferta" >
<div class= "blueprint" ></div>
<div id= "titlu" >Calculator ofertă tâmplărie PVC</div>
<?php include('tamplarie.php') ?>
<div>
</body>
</html>
Exemplu cum arată un fișier .css:

#body{
background-color: white;
margin: 0;
padding: 0;
width: 100%;
}
.imgatelier{
width: 100%;
height: 430px;
background-image: url('../images/atelier.JPG');
background-size: cover;
background-repeat: no-repeat;
background-position: 20% 80%;
margin-top: 0px;
margin-bottom: 3%;
}
.contentbox {
text-align: center;
margin-top: 5%;
}
.sigla{
display: table-cell;
vertical-align: middle;
display: inline-block;
width: 100px;
}
27
Figura 3.3 Rezultatul unui fișier css extern
3.5.2 Foaie de stil internă
Foaia de stil internă se regăsește in secțiunea head a paginii HTML. Dezavantajul

folosirii unei foi de stil interne este că, modificările codului css se aplică doar paginii HTML
în care a fost introdusă.
Când se creează o foaie de stil internă, aceasta trebuie inclusă in secțtiunea de head a
paginii HTML, folosind tag-urile <style></style>
<style type= "text/css" >

h1 {color:blue;}
h2 {color:red;}
p {color:green;}
</style>
Exemplu folosirii unei foi de stil interne într-un fișier HTML:
<!doctype html>
28
<html>
<head>
<style>
body{
background-color: linen;}
#wrapper{
width: 300px;
border: 1px solid #000;
text-align: center;}
h1{
color: maroon;}
p{
color: maroon;}
</style>
</head>
<body>
<div id="wrapper">
<h1>Exemplu CSS stil intern</h1>
<p>Acesta este un paragraf.</p>
</div>
</body>
</html>
Figura 3.4 Rezultatul unui fișier css intern
3.5.3 Stil în linie
Stilul în linie este specific însăși tag-ului. Acesta folosește atributul HTML style
pentru a modela un tag specific. Nu este recomandat, deoarece modificarea CSS trebuie să fie
făcută în fiecare tag care folosește stilul în linie. Stilul în linie este potrivit pentru o proprietate
CSS care nu se folosește des în fișerul HTML.
<p style="color:blue;font-size:20px">Aceste este un paragraf!</p>
29
3.5.4 Stiluri CSS adaptive
Majoritatea site-urilor din ziua de azi adoptă un design web adaptiv, reprezentând un
standard în ceea ce privește designul paginilor web. Acesta face ca site-ul respectiv să arate
bine pe toate dispozitivele modificând proprietățile conținutului cum ar fi: redimensionarea,
ascunderea, micșorarea, mărirea și mutarea.
Pentru a putea adopta un design web adaptiv, trebuie să setăm viewport-ul incluzând
următorul element <meta>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
Elementul viewport meta dă browserului instrucțiuni cum să controleze dimensiunea
paginii.
Partea width=device-width setează lățimea paginii, după lățimea dispozitivului folosit.
Partea initial-scale=1.0 nivelul de mărire inițial atunci când pagina se încarcă pentru
prima dată în browser.
Designul web adaptiv se poate realiza utilizând media query. Acestea folosesc regula
@media pentru a include un bloc de proprietăți CSS doar atunci când se îndeplinește o
anumită condiție.
@media only screen and (max-width: 500px) {

body{
background-color: lightblue;
}
}
DESKTOP
30
TABLETĂ
TELEFON
Figura 3.5 Design web adaptiv
31
4. REALIZAREA SITE-ULUI
Pentru realizarea acestui site am ales să nu folosesc nici un fel de template, deoarece
am vrut să-mi testez cunoștințele în domeniul dezvoltării paginilor web. Încă de la-nceput ,
am decis să adopt un design minimalist bazându-mă în special pe limbajul CSS, JavaScript și
JQuery.
În dezvoltarea site-ului am folosit o multitudine de animații și funcții specifice
JavaScript-ului pentru a creea o navigare cât mai plăcută. Această lucrare este realizată
utilizând editorul de text Brackets. O alternativă mai bună decât Bracket este Adobe
Dreamweaver, care îmi permite să văd pagina în design view, dar am ales Brackets deoarece
am dorit să îmi imbunătățesc abilitățile de redactare a codului HTML, respectiv de CSS.
Site-ul a fost creeat inițial pe un server web local numit MAMP, iar la finalizare am
hotărât să încarc site-ul pe domeniul gwinodws.ro.
4.1 Utilizare scripturilor
$(document).ready(function () {
'use strict'
$(function () {
var string = "Un plus de liniste in viata ta." ;
var q = jQuery.map(string.split(''), function (letter) {
return $( '<span>' + letter + '</span>');
});
var dest = $('.fadeIn');
var c = 0;
var i = setInterval(function () {
q[c].appendTo(dest).hide().fadeIn(3000);
c += 1;
if (c >= q.length) clearInterval(i);
}, 100);
"Home.php" ; });
});
});
});
Acest cod face ca textul “Un plus de liniste in viata ta” să fie afișat literă cu literă
folosind metoda fadeIn(), și dispare utilizând metoda fadeOut(), apărând mai apoi un slider cu
32
imagini și un buton. După apăsarea butonului “ENTER WEBSITE” tot conținutul paginii
dispare prin metoda fadeOut() suntem direcționați către pagina de acasă printr-o funcție de
callback.
var modal = document.getElementById('myModal');

var modal_oferta = document.getElementById('myModal_oferta');
var btn = document.getElementById("myBtn");
var btn_oferta = document.getElementById("myBtn_oferta");
var btn_add = document.getElementById("myButton");
var span = document.getElementsByClassName("close")[0];
var span_oferta = document.getElementsByClassName("close_o")[0];
var sel1 = document. getElementsByClassName ("selectie1")[0];
btn.onclick = function() {
modal.style.display = "block";
}
În codul de mai sus se inițializează fereastra de tip modal și se stabilesc elementele de

selecție din acea fereastră. La accesarea butonului btn se modifică proprietatea de stil a
ferestrei de modal din display:none în display:block;
function doarNumere(evt) {
evt = (evt) ? evt :a window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
Cu ajutorul funcției mai sus menționate s-a interzis introducerea caracterelor în

câmpul de dimensiuni ale tâmplăriei, fiind permise doar cifre.
function delete_gr3(gr3){
$('.gr3'+gr3).remove();
}
Această funcție șterge elementul HTML cu numele clasei “gr3”+ o variabilă care
conține numărul tâmplăriei.
33
function initMap() {
var myLatLng = {lat: 46.111609, lng: 20.852257};
var mapDiv = document.getElementById('harta');
var map = new google.maps.Map(mapDiv, {
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: 16
});
var contentString = '<img src="images/sigla.png" style="width:20px; height:20px;
vertical-align: middle; display: '+
'inline-block; margin-right:5px;"><h style="font-weight:600; vertical-align:
middle; display: inline-block;">I.F.GRAB</h><br><h>Șeitin, jud.Arad</h>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
animation: google.maps.Animation.DROP,
map: map,
title: 'Gwindows'
});
infowindow.open(map, marker);
}
Funcția initMap() inițializează și afișează o hartă interactivă google maps. La inițializare

se specifică coordonatele unde se pune markerul îmreună cu aspectele designului hărții. În
variabila marker se creează un marker specificându-se poziția, animația și titlul.
$('.listare_oferta').append("<div class='oferta oub"+index_oub+"'><div

class='oferta_content'>"+" <div class='sterge_oferta'> <div
onclick='delete_oub("+index_oub+");'>"+"STERGE</div> </div> <div
class='imagine'><img src='images/deschiderigeamuri/usa_bacom.png'"+" width='60px;'
height='100px;'><br> <a>Ușă balcon</a> </div> <div id='masuri'>"+"<div
class='inaltime'>Inaltime: "+inaltime+"</div> <div class='latime'>"+"Latime:
"+latime+"</div> <div class='bucati'>Bucati: "+bucati+"</div> "+"<div
class='culoare'>Culoare: "+culoare+"</div> </div> <div id='accesorii'> "+"<div
class='sel_sita'>Sită: "+sel_sita+"</div> <div class='sel_sticla'>Sticla:"+ "
"+sel_sticla+"</div> </div> <div class='pret'>Pret: "+(pret_final * bucati)+"
"+"€</div> </div> </div> "); }
Folosind metoda append, am adăugat un element de tâmplărie împreună cu

dimensiunile, culoarea și prețul acestiua în modalul care conține oferta de tâmplărie PVC.
4.2 Implementarea designului
Am ales implementarea unui design cât mai minimalist utilizând elemente grafice cât
mai sugestive, dând o notă de eleganță site-ului. Site-ul este full responsive pentru a facilita
navigarea pe orice device și de asemenea acest lucru reprezintă un standard în crearea site-
urilor din ziua de azi.
34
.myButton {
margin-top: 8%;
background-color:transparent;
border:2px solid #000000;
display:inline-block;
cursor:pointer;
color:#000000;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size:16px;
padding:8px 30px;
text-decoration:none;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.myButton:hover {
background-color:black;
color: white;
}
Figura 4.1 Buton reailzat in CSS

În codul CSS prezentat mai sus am creeat un buton cu bordura neagră, background
transparent și de asemenea când se duce cursorul peste buton, acesta își schimbă culoarea
background-ului în negru și culoarea scrisului în alb.
.img2{
width: 100%;
height: 50%;
background-image: url('../images/culoriprofile.JPG');
background-size: cover;
background-repeat: no-repeat;
background-position: 35% 65%;
margin-top: 0px;
margin-bottom: 2%;
}
.stejar {
margin: 20px;
width: 190px;
height: 190px;
border:2px solid #fff;
background: url('../images/culori_pvc/stejar.jpg') no-repeat;
-moz-box-shadow: 0px 6px 5px #ccc;
-webkit-box-shadow: 0px 6px 5px #ccc;
box-shadow: 0px 6px 5px #ccc;
-moz-border-radius:190px;
-webkit-border-radius:190px;
border-radius:190px; }
35
Figura 4.2 Element grafic rotund cu umbră și background
Codul de mai sus setează o imagine ca și background pentru div-ul cu clasa img2, și
face ca acel div să fie lat cât pagina și înalt cât jumătate din pagină. Div-ului cu clasa stejar, i
se atribuie de asemenea o imagine ca și background, o bordură rotundă și o umbră rotundă.
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 25px;
font-weight: 500;
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
-webkit-box-shadow: 0px 0px 196px 12px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 196px 12px rgba(0,0,0,1);
box-shadow: 0px 0px 196px 12px rgba(0,0,0,1);
În codul CSS de mai sus, se stabilește designul ferestrei de tip modal. Css-ul aplicat
div-ului cu clasa modal reprezintă background-ul modalului, acesta este 100% din pagină și
are culoarea de negru semitransparent. Codul aplicat div-ului cu clasa modal-content
36
reprezintă fereastra de modal, având lățimea de 80% și înălțimea de 70%, aceasta are aplicată
și o umbră.
.trash {
cursor: pointer;
position: relative;
width: 50px;
}
.can, .lid {
background: url('../images/trashcan.png') 0 0 no-repeat;
position: absolute;
width: 50px;
height: 13px;
}
.can{
height: 43px;
width: 40.5px;
background-position: -5px -9px;
margin-top: 10px;
margin-left: 5px;
}
.lid{
-webkit-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-webkit-transition: -webkit-transform 250ms;

-o-transition: -o-transform 250ms;
-mozt-transition: -moz-transform 250ms;
}
.trash:hover .lid{
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transition: -webkit-transform 250ms;

-o-transition: -o-transform 250ms;
-mozt-transition: -moz-transform 250ms;
}
.cosgunoi{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.fa-trash-o:hover{
cursor: pointer;
}
Cu ajutorul codului CSS de mai sus am creat un coș de gunoi care atunci când duci
cursorul pe acesta, coșul de gunoi se deschide , respectiv când nu există cursorul pe div-ul
coșului de gunoi acesta rămâne închis. Acest lucru s-a putut realiza împărțind imagine coșului
de gunoi în două div-uri separate, cu proprietatea atunci când se duce cursorul peste acesta
div-ul care conține capacul coșului se rotește la 45 de grade la stânga.
37
Figura 4.3 Coș de gunoi animat
@media only screen and (max-width : 800px) {

.sigla_img{
height: 90px;
width: 90px;
}
.sigla {
width: 90px;
}
.motto{
font-size: 2.5vw;
margin-left: 2%;
}
Pentru a realiza un site web cu proprietăți adaptive, trebuie sa folosim media query in
CSS. În codul de mai sus am specificat că, atunci când lățimea dispozitivului este sub 800 de
pixeli se aplică anumite stiluri CSS stabilite.
În codul de mai jos acele stiluri CSS se aplică doar atunci când lățimea minimă a
dispozitivului este 768 de px, lățimea maxima de 1024 px, iar orientarea dispozitivului este în
portret. Aceste condiții media query sunt specifice pentru tablete.
@media only screen and (min-device-width : 768px)

and (max-device-width : 1024px)
and (orientation : portrait) {
.img1{
width: 100%;
height: 40%;
}
.sigla_img{
height: 150px;
width: 150px;
margin: 0 auto;
display: block
}
.sigla a{
font-size: 4vw;
font-weight: 100;
display: block;
margin: 0 auto;
}
.motto{
font-weight: 100;
font-size: 6vw;
margin: 0 auto; margin-top: 6%;}
38
5. CONCLUZII ŞI CONTRIBUŢII
În această lucrare de licență am pus în practică cunoștințele teoretice dobândite pentru

a putea realiza acest proiect. Din studiu realizat asupre site-urilor web am constatat că un site
trebuie să îmbine foarte bine atât elemente de design și animații cât și prezentarea
informațiilor într-o manieră cât mai plăcută din punctul de vedere al navigării site-ului. De
aceea am hotărât adoptarea unui design minimalist, cu elemente grafice sugestive.
Site-ul a fost realizat utilizând următoarea gamă de limbaje și tehnologii:
- HTML 5, cu ajutorul căruia dezvoltarea site-ului a fost relativ ușoară,
deoarece noul HTML 5 oferă caracteristici sintactice noi, care a dus la
includerea elementelor grafice fără a folosi nici un fel de API sau plugin. Noul
standard HTML 5 a ajutat de asemenea la redactarea codului, utilizând noile
tag-uri, acesta fiind recomandat oricărui dezvoltator web
- Cu ajutorul CSS-ului s-a realizat o așezare cât mai corectă în pagină a
elementelor HTML, dând site-ului un design cât mai atractiv. CSS-ul
reprezintă o parte foarte importantă în creearea oricărei pagini web deoarece
oamenii sunt atrași prima dată de partea vizuală a lucrurilor, acest fapt m-a
determinat să pun un mare accent și pe partea vizuală a site-ului.
- Folosind JavaScript și JQuery funcționalitatea site-ului a crescut substanțial
aceste limbaje oferind diferite evenimente, funcții și animații, fapt care a dus
la implementarea unor selecții complexe, animarea elementelor HTML și
posibilitatea de a manipula elementele din pagină.
Site-ul respectă toate standardele actuale cu privire la furnizarea de informații, la

adoptarea unui design adaptiv și la o prezentare cât mai concisă a produselor, atrăgând atenția
oricărui vizitator.
În viitorul apropiat, site-ul v-a fi îmbunătățit prin updatarea sistemului de ofertare a
tâplăriei PVC prin posibilitatea de a genera un document de ofertare mai amplu, precum și
prin implementarea unei baze de date care să conțină utilizatorii site-ului impreună oferta cu
oferta de tâmplărie.
39
BIBLIOGRAFIE
[1] Dezvoltarea aplicațiilor WEB – Suport de curs Gabor Andrei: Arad 2016
Facultatea de Științe Economice, Informatică și Inginerie
[2] http://www.w3schools.com/ - Consultat în data de 20.04.2016
[3] http://www.inmotionhosting.com/support/edu/website-design/using-css/linking-
your-css-to-your-website - Consultat în data de 02.05.2016
[4] http://www.javatpoint.com/javascript-form-validation - Consultat în data de
05.05.2016
[5] Mark Pilgrim – “Dive into HTML 5”
[6] Jon Duckett – “HTML and CSS: Design and build websites”
[7] https://ro.wikipedia.org/wiki/Cascading_Style_Sheets - Consultat în data de
27.03.2016
[8] https://ro.wikipedia.org/wiki/HyperText_Markup_Language - COnsultat în data de
27.03.2016
[9] Tehnologii WEB - Suport de curs Conf.dr. Antoanela Naaji: Arad 2015
[10] https://api.jquery.com – Consultat în data de 01.05.2016
40

Licenta Grab Andrei

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Licenta Grab Andrei

Titlu original:

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSITATEA DE VEST “VASILE GOLDIŞ”

Această lucrare reprezintă lucrarea de licență în cadrul UNIVERSITĂȚII DE VEST

Figura 2.2 Pagina de acasă – prima secțiune...............................................................................7

Figura 2.3 Prima secțiune pe disp. mobil...................................................................................7

Figura 2.4 Pagina de acasă – a doua secțiune.............................................................................7

Figura 2.5 A doua secțiune pe disp. mobil..................................................................................7

Figura 2.6 Pagina despre noi.......................................................................................................8

Figura 2.7 Pagina despre noi – fereastra modal..........................................................................8

Figura 2.8 Galeria de imagini.....................................................................................................9

Figura 2.10 Pagina de ofertă – introducere date tâmplărie........................................................10

Figura 2.11 Pagina de contact...................................................................................................10

Figura 3.1 Formular contact PHP............................................................................................13

Figura 3.2 Dimensiunile unui element în JQuery......................................................................26

Figura 3.3 Rezultatul unui fișier css extern...............................................................................28

Figura 3.4 Rezultatul unui fișier css intern...............................................................................29

Figura 3.5 Design web adaptiv.................................................................................................31

Figura 4.1 Buton reailzat in CSS..............................................................................................35

Figura 4.2 Element grafic rotund cu umbră și background.......................................................36

Figura 4.3 Coș de gunoi animat................................................................................................38

Această lucrare încurajează modernizarea casei oricărei persoane creând o atmosferă

Site-ul gwindows.ro este site-ul de prezentare și ofertare a tâmplăriei PVC fabricată de

Figura 2.1 Pagina de welcome

Figura 2.2 Pagina de acasă – prima secțiune

Figura 2.4 Pagina de acasă – a doua secțiune

Figura 2.7 Pagina despre noi – fereastra modal

Pagina “Galerie” conține o galerie de imagini cu lucrări executate împreună cu alte

Figura 2.9 Pagina de ofertă – modal selecție tâmplărie

Figura 2.11 Pagina de contact

 Creearea unui articol izolat de restul conținutului

 La începutul oricărui document HTML 5 se folosește elementul

 Definirea link-urilor de navigare

 Creearea unui element grafic cu ajutorul tag-ului canvas, împreună cu codul

Figura 3.1 Formular contact PHP

3.3.1 Elementele de bază

3.3.2 Validarea formularelor

JQuery este o librărie JavaScript cross-platform concepută pentru a simplifica scriptul

3.4.1 Adăugarea librăriei JQuery în pagina web

3.4.2 Structura librăriei JQuery

Câteva exemple de structuri Jquery:

var dest = $('.fadeIn');

3.4.4 Acțiunea sau evenimentul unei funcții în JQuery

Toate acțiunile vizitatorului asupra unei pagini web se numesc evenimente. Un

3.4.5 Selectori JQuery

3.4.6 Animațiile JQuery

Metoda fade ajută la ascunderea elementelor din pagina HTML, modificându-le

- metoda fadeIn este folosită pentru a afișa un element deja ascuns.

- metoda fadeOut este folosită pentru a ascunde un element vizibil

- metoda fadeToggle este folosită pentru a comuta dintre metodele fadeIn și

Metoda slide are următoarea sintaxă: $(selector).slide(speed, callback). Parametrul

- metoda slideDown se folosește pemtru a muta elementul HTML jos față de

- metoda slideToggle se folosește pentru a comuta dintre slideDown și slideUp.

3.4.9 Funcția de callback

3.4.10 Înlănțuirea metodelor JQuery

Folosind tehnica de chaining(înlănțuire), aceasta ne permite folosirea comenzilor

Exemplu folosind tehnica de chaining:

3.4.11 Manipularea conținutului HTML

O parte importantă a librăriei JQuery este manipularea elementelor din DOM.

3.4.12 Adăugarea conținutului HTML

3.4.13 Ștergerea conținutului HTML

3.4.14 Dimensiuni JQuery

3.5.1 Foaie de stil externă

Exemplu cum arată un fișier .css: