CUPRINS

INTRODUCERE ..................................................................................................... 3

CAPITOLUL I. LIMBAJE DE PROGRAMARE UTILIZATE........................ 5

CAPITOLUL II. SARCINI ȘI ACTIVITĂȚI ...................................................... 7

CONCLUZIE ......................................................................................................... 24

BIBLIOGRAFIE ................................................................................................... 25

ANEXE ................................................................................................................... 26

2
 INTRODUCERE
Un stagiu de practică sunt pregătiri la locul de munca pentru cariere de practică
profesioniste pentru studenți sau absolvenți de studii universitare (numiți stagiari).
Scopul declarat a unui stagiu de practica este:
 oferirea studenților oportunitatea de a se familiariza cu specificul și cultura unei organizații
multinaționale;
 cunoașterea fluxului de activități din cadrul unei unități sprijinind direct angajații
îndeplinirea activităților zilnice.
În general, în cadrul unui stagiu de practică, se face un schimb de experiența între stagiar
și angajator. Stagiarii oferă forță de muncă ieftină sau gratuită pentru a căpăta experiență într-un
departament anume. Angajatorii pot de-asemenea să analizeze stagiarii pentru a determina dacă
aceștia se pot potrivi pe o cariera specifică, pentru a crea o rețea de contacte. Anumiți stagiari de-
asemenea găsesc locuri de muncă permanente la firma la care au avut un stagiu de pregătire. Din
acest lucru și angajatorii au de câștigat, deoarece stagiarii au nevoie de puțină sau nici o pregătire
și pot începe imediat lucrul.
Prezentul document prezintă raportul stagiul de practică în cadrul întreprinderii „GND
Tehnologii”. În obligațiunile mele intră nemijlocit crearea mai multor design-uri pentru pagini web
prin html și css, crearea de funcții, obiecte, metode Java script.
Descrierea companiei.
Nume complet: Societatea cu Răspundere Limitată "GND TEHNOLOGII";
Data înregistrării: 3 septembrie 2010;
Genuri de activități:
- realizarea de programe și consultanță în domeniul dat;
- prelucrarea datelor;
- activități legate de băncile de date;
- activități legate de tehnica de calcul;
- consultații în domeniul sistemelor de calcul.
Scopurile practicii ce precede probele de absolvire:
- Testarea abilităților dobândite în timpul anilor universitari;
- Însușirea unor noi tehnologii de dezvoltare a aplicațiilor Web;
- Aplicarea cunoștințelor în cadrul mediului de programare a companiei;
- Dobândirea unor noi abilități;
- Tendința spre creștere personală și profesională.

3
Cerințele companiei:
- Însușirea mediilor de dezvoltare HTML, CSS, JavaScript;
- Dezvoltarea abilităților de lucru cu protocolul git și serviciul Github;
- Aplicarea abilităților de proiectare a unui web site;
- Însușirea avansată a limbajului JavaScript;
- Crearea plugin-urilor JavaScript și studierea bibliotecii jQuery;
- Învățarea front-end framework-ului AngularJS;
- Crearea modulelor unui web site utilizând AngularJS;
- Crearea aplicațiilor web utilizând cele însușite.

4
 CAPITOLUL I. LIMBAJE DE PROGRAMARE UTILIZATE

GitHub. GitHub este un serviciu de găzduire web pentru proiecte de dezvoltare a

software-ului care utilizează sistemul de control al versiunilor Git. GitHub oferă planuri tarifare
pentru depozite private, și conturi gratuite pentru proiecte open source. Site-ul a fost lansat în 2008
de către Tom Preston-Werner, Chris Wanstrath, și PJ Hyett.Html.[27]
Html. HTML este o formă de marcare orientată către prezentarea documentelor text pe o
singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai
bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care
conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare.
Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului
că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi
sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul
documentului, informații structurale despre cum este împărțit documentul în diferite segmente,
paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte
documente pentru a forma astfel hiperlink-uri (sau web-ul). HTML este un format text proiectat
pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și
modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp.
Editoarele grafice (de tip WYSIWYG) cum ar fi Adobe GoLive sau Microsoft FrontPage permit
ca paginile web sa fie tratate asemănător cu documentele Word, dar cu observația că aceste
programe generează un cod HTML care este de multe ori de proastă calitate.[23]
Css. CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe
sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și
pentru formatarea elementelor XHTML, XML și SVGL.[22]
Sass. Sass (Sintactic Style Awesome Sheets) este o extensie a CSS. Sass permite să utilizați
lucruri cum ar fi variabile, reguli imbricate, importurile inline și multe altele. Acesta ajută la
menținerea lucrurile organizate și vă permite să creați foi de stil mai rapid. Singura cerință pentru
utilizarea Sass este că trebuie să fie instalat Ruby.[28]
Javascript. JavaScript (JS) este un limbaj de programare orientat obiect bazat pe
conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile
web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este bine-cunoscut
pentru folosirea sa în construirea siturilor web, dar este folosit și pentru accesul la obiecte
încastrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de
la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în

5
final JavaScript. În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java
nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar
are mai multe în comun cu limbajul Self decât cu Java.[24]
JQuerie. 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". Biblioteca a fost lansată in 2006 de către John Resig.[25]
AngularJS. Angularjs este un framework open source web care este menținut de Google
și un colectiv de dezvoltatori individuali și companii care îmbunătățesc posibilitățile de dezvoltare
a Application Page unic (SPA). Scopul este de a simplifica atât dezvoltarea și testarea unor astfel
de aplicații prin furnizarea unui, împreună cu componente care sunt frecvent utilizate în aplicații
Rich Internet. Cadrul funcționează prin prima lectură a paginii HTML, care include atribute
HTML specifice suplimentare. Valorile acestor variabile JavaScript pot fi setate în cadrul codului,
sau preluate de la obiectele de date JSON statice sau dinamice.[26]

6
 CAPITOLUL II. SARCINI ȘI ACTIVITĂȚI

Sarcina 1. Crearea mediului de lucru și conectarea la canalul de comunicare al companiei.

Sarcina dată a fost pusă pentru a crea condițiile necesare de lucru și testarea abilităților
inițiale. Primul pas a fost instalarea editorului Atom – pentru crearea și editarea codului, Ruby –
aplicație pentru lucrul cu Sass, instalarea protocolului git – pentru facilitarea lucrului în echipă
asupra proiectelor. Conectarea la mediul de comunicare a companiei a fost realizat prin crearea
unor profiluri în poșta companiei, și serviciile Bitbucket și GitHub.

Sursă: Elaborat de autor

Figura 2.1. Source Tree
Sarcina 2. Crearea repozitoriului pe GitHub și Bitbucket.
Ca scop a fost crearea abilităților de lucru în echipă asupra unui proiect centralizat,
utilizând protocolul git. Realizarea cerinței a început cu studierii noțiunilor de “repozitoriu” și
“control al versiunilor”, urmate de însușirea comenzilor de lucru cu protocolul git și
familiarizarea cu serviciile GitHub și Bitbucket. Au fost create repozitorii pe ambele servicii și
testate posibilitățile de interacționare oferite de acestea.

Sursă: Elaborat de autor

Figura 2.2. Bitbucket

7
Sarcina 3. Proiectarea structurii și definirea aparenței unei pagini web.
A fost cerută îndeplinirea sarcinii date pentru a ne testa abilitățile de proiectare și nivelul
de cunoaștere a limbajelor HTML și CSS. Pentru efectuarea sarcinii a fost utilizat editorul Atom;
Chrome dev-tools pentru testarea și îmbunătățirea paginilor. După elaborarea unei componente
codul se va stoca pe repozitoriu, după care conducătorul va evalua codul.

1.
Sursă: Elaborat de autor
Figura 2.3. Pagină web - 1
Cod sursă exemplul 1 (css) width: 325px;

body{ height: 100px;

margin: 0; position: top left;

padding: 0; float: left;

font-family: 'Lucida Grande', }*/

"Lucida Sans Unicode", .heading-shadow{

"Verdana","Times New Roman"; width: 763px;

font-size: 13px; height: 100px;

} margin: 0 auto;

/*.border{ border-left: 1px solid #b0b1ab;

width: 763px; border-right: 1px solid #b0b1ab;

margin: 0px auto; box-shadow: -2px -13px 43px -1px

border: 1px solid black; rgba(0,0,0,1);

box-shadow: -1px 0px 30px 0px }

rgba(50,50,50,1); .footer-shadow{

float: left; width: 763px;

} height: 100px;

.div-topleft{ margin: 0 auto;

background-color: #323232; border-left: 1px solid #b0b1ab;

margin: 0px; border-right: 1px solid #b0b1ab;

8
 box-shadow: -2px 13px 43px 0px margin:0px;
rgba(0,0,0,1); display: block;
} }
#content-shadow{ #heading ul li{
width: 763px; float: left;
font-size:13px;
margin: 0 auto; height: 100px;
box-shadow: 2px 0px 17px 0px width: 76px;
rgba(0,0,0,1); border-left: 1px solid #b0b1ab;
} margin: 0px;
#header{ display: block;
width:100% auto; }
height: 100px; #heading ul li a{
border-bottom: 1px solid #323232; color: white;
background-color: #323232; width: 70px;
margin: 0px; text-align: center;
} text-decoration: none;
#heading{ margin: 0px;
width: 763px; position: absolute;
margin: 0px auto; padding-top: 70px;
height: 100px; padding-bottom: 11px;
padding-right: 8px;
} }
#heading ul li a:last-child{
#heading span{ border-right: none;
color: #b3cf60; }
} #heading ul li a:hover {
#heading h1{ background:#fff;
font-size: 40px; color:#111;
color:white; width: 70px;
height: 100px; text-decoration: none;
width: 230px; text-align: center;
margin: 0px; }
float: left; #heading ul li a.activ {
padding-left: 20px; background:#fff;
padding-top: 20px; color:#111;
} text-decoration: none;
#heading ul{ padding-top: 70px;
float: right; padding-bottom: 11px;
height: 100px; padding-right: 8px;
width: 463px; }
list-style: none; }

9
#content{ float:right;
width:100% auto; line-height:17px;
margin: 0px; margin:0px 0px 0px 510px;
} padding:0 30 0 0px;
#content-in{ position:absolute;
width: 763px; width:230px;
border-left: 1px solid #b0b1ab; }
border-right: 1px solid #b0b1ab; #content-textbar h3 {
margin: 0px auto; background:#fff;
height: 550px; color:#000000;
} font-size:15px;
#content-in-content h1{ font-weight:400;
border-bottom: 1px solid #b0b1ab; padding:5px 0;
color: #7d7f75; text-align:right;
font-size: 15px; }
text-align: left; #content-textbar ul {
padding: 0px; list-style:none;
} width: auto;
#content-in-content{
background:#fff; }
font-size: 10px; #content-textbar ul li {
color: #a0a390 list-style:none;
line-height:17px; text-align: right;
margin:0 10 0 0px; line-height: 20px;
padding:0px 200px 10px 10px; }
width:500px; #content-textbar ul li a {
float: left; border-bottom:1px solid
} #e9e9e9;
#content-in-content a{ color: #b3cf60;
color: #b3cf60; font-size: 10px;
font-size: 10px; padding-left: 0px;
padding:3px; text-align:right;
text-decoration: none; width:200px;
} text-decoration: none;
#content-in-content a:hover{ display: block;
color: #5c6467; }
font-size: 10px; #content-textbar ul li a:hover {
padding:3px; background:#dddcdc;
text-decoration: none; color:#000000;
} text-decoration: none;
#content-textbar{ /*padding: 0 30 0 0px;*/
border-left: 1px solid #b0b1ab; /*width: 230px;*/

10
} }
#footer{ #footer-in a{
width:100% auto; color: #b3cf60;
border: 1px solid #323232; font-size: 8px;
background-color: #323232; padding:3px;
margin: 0px; line-height: 10px;
height: 100px; text-decoration: none;
} }
#footer-in { #footer-in a:hover{
height:80px; color: #5c6467;
margin:0 auto; padding:3px;
width:763px; text-decoration: none;
padding-top: 10px; }
padding-bottom: 10px; #shadow{
} width: 763px;
#footer-in p { height: 100%;
color:#fff; background: transparent top
line-height:80px; center;
text-align:center; box-shadow: 1px 1px 1px 1px grey;
vertical-align: middle; }
margin: 0px;

2.
Sursă: Elaborat de autor
Figura 2.4. Pagină web - 2
Cod sursă exemplul 2 (css)
body { line-height: 24px;
padding: 0; background: #fff
margin: 0; url(images/top.jpg) repeat-x top;
font: 13px Arial, sans-serif; color: #454545;

11
 } border-bottom: 1px solid #DCDCDC;
/***********************header***** }
*****************/ #wrap-in{
#header{ background: #FF0000;
margin: 0px auto; width: 800px;
width: 800px; margin: 0px auto;
height: 110px; }
padding-top: 10px; #list-menu{
} float:left;
#header h1{ }
font: bold 1.8em Arial,Sans- #list-menu ul{
Serif; list-style-image: url(images/lm-
letter-spacing: 1px; li.gif);
padding: 18px 0px 4px 0px; width: 157px;
margin: 0px; }
color: #FFF; #list-menu ul li{
display: block; border-bottom: 1px solid #c3c6cf;
} }
#header h2{ #list-menu ul a{
font: 1.0em Arial, Sans-Serif; text-decoration: none;
letter-spacing: 0; background: url(images/lm-li.gif)
margin: 0px; no-repeat left;
color: #868686; color: #DA3B3B;
padding: 0px; font-size: 11px;
display: block;; }
} #slogan{
#icon{ float: right;
float: right; background: red
margin: 0px; url(images/mainimg.jpg) no-repeat;
padding-top: 25px; height: 199px;
} width: 589px;
#header #icon img{ }
padding-right: 4px; #slogan h1{
} text-align: right;
/********************Wrap********** color: white;
*********/ padding-right: 28px;
#wrap{ padding-top: 33px;
height: 220px; font: bold 1.2em Arial, Sans-Serif;
background: #f6f6f6; letter-spacing: 1px;
width: 100%; margin: 0px;
margin: 0px auto; }
margin-bottom: 15px; #slogan h2{

12
 text-align: right; background: url(images/h-art.gif)
color: white; no-repeat left;
padding-right: 28px; padding-left: 20px;
padding-top: 20px; margin: 0px;
padding-left: 20px; }
font: .93em Arial,Sans-Serif; #content-left p{
letter-spacing: 0px; font: 12px Arial, Sans-Serif;
margin: 0px; color: #454545;
} /*background: url(images/img.jpg)
/********************Content******* no-repeat left top;*/
************/ margin: 0px;
padding: 0 15 0 15px;
#content-in{ margin-left: 10px;
font: 12px Arial, Sans-Serif; margin-top: 10px;
color:#454545; margin-bottom: 10px;
margin: 0px auto; text-align: justify;
width: 700px; line-height: 1.5em;
background: }
url(images/download.jpg) no-repeat #content-left p img{
left; margin: 0px;
padding-left: 95px; padding: 0 10 0 5px;
margin-bottom: 15px; float: left;
line-height: 1.5em; margin-right: 5px;
} }
#content-in a{ #content-left p a{
color: #DA3B3B; color: #DA3B3B;
text-decoration: none; text-decoration: none;
} }
#content-in a:hover{ #content-left p a:hover{
color: #DA3B3B; color: #DA3B3B;
text-decoration: underline; text-decoration: underline;
} }
#main{ #content-left blockquote{
width: 800px; font: 11px Arial, Sans-Serif;
margin: 0px auto; padding-left: 10px;
} border-left: 2px solid #DA4040;
#content-left{ line-height: 1.5em;
background: white }
url(images/back.jpg) repeat-x; #coment{
width: 550px; font-size: 12px;
} border-top: 1px dotted #ccc;
#content-left h3{ width: 550px;

13
 text-align: right; width: 130px;
margin-top: 10px; margin-top: 37px;
margin-bottom: 15px; padding-top: 5px;
} margin-right: 10px;
#coment a{ }
color: #DA3B3B; #list ul{
text-decoration: none; list-style-position: inside;
} padding-left: 20px;
#coment a:hover{ margin: 0px;
color: #DA3B3B; }
text-decoration: underline; #list ul li{
} list-style-type: square;
#content-left-second{ }
background: white #list ul ul li{
url(images/back.jpg) repeat-x; list-style: none;
width: 550px; list-style-type: lower-alpha;
} list-style-position: inside;
#content-left-second h3{ }
background: url(images/h-art.gif) #content-right{
no-repeat left; width: 245px;
padding-left: 20px; margin: 0px;
margin: 0px; float: right;
} background: #f2f2f2;
#content-left-second p{ border: 1px solid #f2f2f2;
font: 12px Arial, Sans-Serif; }
color: #454545; #content-right ul{
margin: 0px; list-style-image: url(images/cat-
padding: 0 10 0 15px; li.gif);
margin-left: 10px; margin: 0px;
margin-top: 10px; }
margin-bottom: 10px; #content-right ul a{
text-align: justify; text-decoration: none;
line-height: 1.5em; font: 10px Arial,Sans-Serif
margin-right: 155px; background: url(images/cat-
} li.gif) no-repeat left;
#list{ color: #DA3B3B;
margin: 0px; line-height: 1.5em;
font: 12px Arial; }
float:right; #content-right h3{
border: 1px solid #e3e3e3; padding-left: 10px;
background: #f2f2f2; margin: 0px;
line-height: 1.5em; }

14
#content-right p{ margin: 0px;
font: 12px Arial, Sans-Serif; line-height: 1.5em;
line-height: 1.5em; }
padding-left: 15px; #footer pre{
padding-right: 10px; font: 12px Arial;
margin-top: 0px; float: right;
} text-align: right;
#content-right p a{ }
color: #DA3B3B; #footer pre a{
text-decoration: none; color: #DA3B3B;
} text-decoration: none;
/********************Footer******** margin: 0px;
***********/ }
#footer{ #footer a{
font: 12px Arial; color: #DA3B3B;
width: 800px; text-decoration: none;
margin: 0px auto; margin: 0px;
border-top: 1px solid #c3c6cf; }
padding:0px;

15
3.
Sursă: Elaborat de autor
Figura 2.5. Pagină web - 3
Cod sursă pentru exemplu 3 (css) în Anexa 1.
În anexa 2 sunt reprezentate steluțele care s-au utilizat în exemplul 3. La crearea lor am
utilizat z-index, altfel în cazul în care mouse-ul se află deasupra uneia toate stele până la ea se
colorează în galben.

16
4.
Sursă: Elaborat de autor
Figura 2.6. Pagină web - 4

5.
Sursă: Elaborat de autor
Figura 2.7. Pagină web - 5
17
Sarcina 4. Proiectarea algoritmilor și crearea funcțiilor utilizând JavaScript.
Scopul cerinței a fost dezvoltarea abilităților analitice și familiarizarea cu funcțiile
JavaScript. S-a cerut elaborarea a trei funcții, folosind instrucțiunile JavaScript :
1. găsirea secvenței din cadrul unui șir de caractere

Sursă: Elaborat de autor

Figura 2.8. Proiectarea algoritmilor – 1 funcție
2. găsirea consecutivității de numere dintr-un șir numeric ce are suma maximă din
cadrul acestui șir:

Sursă: Elaborat de autor

Figura 2.9. Proiectarea algoritmilor – 2 funcție
3. găsirea elementului minim/maxim pentru orice tablou multidimensional.

Sursă: Elaborat de autor

Figura 2.10. Proiectarea algoritmilor – 3 funcție
Sarcina 5. “Conway’s game of life.”
Crearea unui joc utilizând JavaScript, implementarea claselor în JavaScript și aplicarea
principiului de moștenire. Prin crearea acestui joc s-au testat abilitățile de lucru cu Javascript.
Game of Life este un joc celebru inventat de matematicianul John Hoton Conway în 1970.
Acesta este un joc fără jucători, fiind bazat pe un tablou bidimensional cu celule aflate în 2 stări:
“vie” sau “moartă”. Celulele interacționează între ele în dependența de careva condiții, iar

18
tabloul se modifică în urma unei iterații numită generație. Realizarea cerinței cuprinde
implementarea claselor în JavaScript și aplicarea principiului de moștenire.

Sursă: Elaborat de autor

Figura 2.11. Starea tabloului la diferite iterații
Sarcina 6. Jocul “Bila în spațiu”
În sarcina dată trebuie să se creeze o bilă și sa se proiecteze mișcarea acesteia după o
anumită traiectorie într-un spațiu limitat, utilizând principiile programării orientate pe obiect ale
JavaScript. După crearea și testarea unei singure bile, se vor mai adăuga câteva.

Sursă: Elaborat de autor

Figura 2.12. “Bila în spațiu”
Sarcina 7. Crearea unui modul de căutare într-un web-site.
Se va crea un modul de căutare în cadrul unei biblioteci online, utilizând limbajul
JavaScript, biblioteca jQuery, și crearea unui plugin JavaScript. Căutarea se poate face după
titlul cărții, autor sau cuvinte ce se conțin în descriere.
În urma realizării sarcinii au fost dezvoltate abilități de lucru cu evenimentele și obiectele
modelului DOM.

19
Sursă: Elaborat de autor
Figura 2.13. “Book store”
Sarcina 8. Manipularea aparenței unei pagini web prin intermediul AngularJS.
Se va crea o pagină web care va oferi două modele de vizualizare a produselor unui
magazin de bijuterii, utilizând framework-ul AngularJS. Pentru aceasta sau creat două butoane la
apăsarea cărora se va schimba modul de afișare în pagină a produselor.

Sursă: Elaborat de autor

Figura 2.14. Modelul de vizualizare grilă

20
 Sursă: Elaborat de autor
Figura 2.15. Modelul de vizualizare listă
Sarcina 9. Manipularea aparenței unei pagini web prin intermediul AngularJS, utilizând
filtre.
Pentru pagina web creată anterior, se vor afișa doar produsele din magazinul de bijuterii
care îndeplinesc criteriile utilizatorilor, utilizând filtrele create în framework-ul AngularJS.

Sursă: Elaborat de autor

Figura 2.16. Posibilitatea de filtrare după preț, categorie și culoare
21
 Sursă: Elaborat de autor
Figura 2.17. Rezultatul în urma aplicării filtrului

Sursă: Elaborat de autor

Figura 2.18. Rezultatul în urma aplicării filtrului
Sarcina 10. Navigarea pe pagini web prin implementarea routing-ului din AngularJS.
Pentru pagina cu produse creată mai sus, se va crea încă o pagină ce va conține detaliile
despre un produsul selectat. Această pagină trebuie să fie încărcată fără a fi rulată întreaga
aplicație. Pentru aceasta sa implementat modulul ngRoute – care ajută aplicația să devină
SPA(Single Page Application).

22
Sursă: Elaborat de autor
Figura 2.19. Pagina curentă

Sursă: Elaborat de autor

Figura 2.20. Selectarea unui singur produs

23
 CONCLUZIE

Practica de producție este etapa de tranziție dintre etapa de formare și cea de integrare într-
un mediu de producție din lumea reală. În cadrul acestei etape are loc testarea abilităților acumulate
în etapa de formare și adaptarea treptată la cerințele de pe piață.
Activitățile din cadrul companiei „Getik Tehnology” au contribuit la înțelegerea
procesului de muncă în cadrul unei companii, dezvoltarea abilităților de lucru în echipă,
deschiderea dorinței de a cunoaște tot mai mult și mai mult, de a crește profesional, și a putea tinde
mereu spre mai mult. Aici s-au format abilități analitice și practice, au fost dobândite noi cunoștințe
și întărite cele curente, au fost asimilate și înțelese noi tehnici de programare.
Această perioadă de practică a oferit posibilitatea de a mai adăuga o treapta la scara
profesională, a deschis noi dorințe, a luminat unele locuri întunecate, și a făcut să fie înțeles ceea
ce ne place, ce am dori sa facem pe viitor, spre ce am vrea să tindem, unde vrem sa ajungem. La
fel, această etapă a făcut să înțelegem că nu este ușor să obții ceva, decât doar prin muncă și dorință.

24
 BIBLIOGRAFIE

1. https://atom.io/
2. https://en.wikipedia.org/wiki/Git
3. http://gitref.org/
4. https://www.tutorialspoint.com/git/
5. https://confluence.atlassian.com/bitbucketserver/basic-git-commands-776639767.html
6. https://www.howtogeek.com/180167/htg-explains-what-is-github-and-what-do-geeks-use-it-for/
7. https://www.w3schools.com/css/default.asp
8. https://www.w3schools.com/js/default.asp
9. https://www.codecademy.com/learn/javascript
10. http://www.tutorialspoint.com/javascript/javascript_tutorial.pdf
11. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
12. http://doc.qt.io/qt-5/qtqml-javascript-functionlist.html
13. https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
14. https://jquery.com/
15. https://www.w3schools.com/jquery/
16. http://jqueryui.com/demos/
17. https://en.wikipedia.org/wiki/AngularJS
18. https://docs.angularjs.org/tutorial/step_03
19. https://www.w3schools.com/angular/default.asp
20. https://atom.io/packages/angularjs
21. https://www.tutorialspoint.com/angularjs/angularjs_tutorial.pdf
22. https://ro.wikipedia.org/wiki/Cascading_Style_Sheets
23. https://ro.wikipedia.org/wiki/HyperText_Markup_Language
24. https://ro.wikipedia.org/wiki/JavaScript
25. https://ro.wikipedia.org/wiki/JQuery
26. https://nl.wikipedia.org/wiki/AngularJS
27. https://nl.wikipedia.org/wiki/GitHub
28. http://sass-lang.com/guide

25
ANEXE

26
 anexa 1
Cod sursă exemplul 3

body{ }
padding: 0; /*about products*/
margin: 0; .product{
background-color: #f7f7f7; float: left;
} width: 270px;
#content{ height: 430px;
margin: 0px auto; background:
width: 1240px; url(images/productbk.jpg) repeat;
height: 1950px; border: 1px solid #c6c6c6;
} border-radius: 10px;
#left-content{ margin: 0px;
float: left; margin-top: 30px;
width: 300px; margin-right: 30px;
} }
#rigt-content{ .cart-button{
float: right; float: left;
width:910px; background-color: #a6d700;
margin-bottom: 20px; font: 16px Arial;
} color: white;
/*hedear for new products*/ font-weight: bold;
#content-product{ line-height: 2.7em;
float: right; width: 232px;
width:910px; height: 46px;
border: 1px solid #c6c6c6;
} border-radius: 7px;
#hedear-content-product{ align-items: center;
width: 875px; margin-left: 20px;
height: 53px; margin-top: 15px;
border: 1px solid #c6c6c6; }
border-radius: 10px; .cart-button:hover{
background: background-color: #6d6dc2;
url(images/headerbk.jpg) repeat; }
margin-top: 30px; .cart-image{
} float: left;
.header-font{ padding-left: 40px;
font: 24px Arial; padding-top: 5px;
color: #333333; padding-right: 20px;
padding-top: 10px; }
padding-left: 15px; .price{
27
 continuare anexa 1

color: #6561de; border: 1px solid #cfcfcf;

font: 20px Arial; border-radius:100px;
padding-left: 20px; width: 25px;
} height: 25px;
.product-name{ margin-top: 160px;
height: 50px; margin-left: 20px;
font: 16px Arial; }
color: #333333; .right-arrow{
padding-left: 20px; float: left;
padding-top: 40px; background: url(images/arrow-
} right.png) no-repeat 7px 3px;
.product a{ background-color: #f6f6f6;
color: #333333; text-align: center;
text-decoration: none; border: 1px solid #cfcfcf;
} border-radius:100px;
.product a:hover{ width: 25px;
color: #64b604; height: 25px;
text-decoration: none; margin-top: 160px;
} margin-left: 40px;
.product-image{ }
padding-left: 15px; .right-arrow:hover{
} background: url(images/arrow-
/*about slideshow*/ right-hover.png) no-repeat 7px 3px;
.slideshow{ background-color: #f6f6f6;
float: right; }
background: .left_arrow:hover{
url(images/slidebk.jpg) repeat-x; background: url(images/arrow-
width: 870px; left-hover.png) no-repeat 5px 3px;
height: 349px; background-color: #f6f6f6;
border: 1px solid #c6c6c6; }
border-radius: 10px; .slide_show-img{
margin-right: 37px; float: left;
margin-bottom: 24px; background:
} url(images/slideshow.jpg) no-
.left_arrow{ repeat;
float: left; width: 380px;
background: url(images/arrow- height: 350px;
left.png) no-repeat 5px 3px; }
background-color: #f6f6f6; .description{
text-align: center; float: left;

28
 continuare anexa 1
}
.slide-title{ float: right;
font: 40px 'Sans-Serif',Arial; background: url(images/bk-
color: #3a3a3a; sale.jpg) repeat-x;
font-weight: bold; width: 268px;
padding-top: 65px; height: 355px;
padding-left: 30px; border: 1px solid #c6c6c6;
} border-radius: 10px;
.subtitle{ margin-bottom: 10px;
font: 40px 'Sans-Serif',Arial; }
color: #3a3a3a; .sale a{
padding-top: 0px; color: #333333;
padding-left: 30px; text-decoration: none;
} }
.caracteristic{ .sale a:hover{
width: 320px; color: #64b604;
font: 17px 'Sans-Serif',Arial; text-decoration: none;
color: #777777; }
padding-top: 10px; .sale-image{
padding-left: 30px; padding-left: 35px;
} padding-top: 20px;
.shopnow{ }
font: 16px 'Sans-Serif',Arial; .sale_product_name{
color: white; font: 16px "Sans-Serif", Arial;
font-weight: bold; color: #333333;
background-color: #7171c0; padding-left: 20px;
border: 1px solid #5050a3; padding-top: 50px;
margin-top: 20px; }
margin-left: 30px; .sale-price{
height: 50px; float: left;
width: 140px; font: 20px "Sans-Serif", Arial;
border-radius: 7px; color: #fe4343;
border: 0; margin: 0px;
-webkit-appearance: none; padding: 0px;
} padding-left: 20px;
.shopnow:hover{ padding-top: 10px;
background: none; }
background-color: #a9dc00; .sale-noprice{
} float: left;
/*left-menu*/ font: 16px "Sans-Serif", Arial;
.sale{ color: #777786;

29
 continuare anexa 1
text-decoration: line-through; #left-content ul{
margin: 0px; background: linear-gradient(to
padding: 0px; bottom, #fff 0%, #e9e9e9 100%);
padding-top: 14px; border-radius: 10px;
padding-left: 7px; font: 16px "Sans-Serif",Arial;
} color: #4c4c4c;
.advertisment{ font-weight: bold;
background-color: #fe4343; list-style: none;
border: 1px solid #fe4343; padding: 0px;
border-bottom-right-radius: 3px; margin: 0px;
border-bottom-left-radius: 3px; }
width: 57px; .category ul a{
height: 45px; font: 15px "Sans-Serif",Arial;
margin-left: 20px; color: #4c4c4c;
font:17px "Sans-Serif", Arial; font-weight: bold;
color: white; text-decoration: none;
line-height: 3em; }
text-align: center; #left-content ul a li{
} border-bottom: 1px solid #c6c6c6;
.title{ padding-left: 20px;
font: 24px Arial; padding-top: 11px;
color: white; padding-bottom:11px;
padding-left: 20px; margin: 0px;
line-height: 2em; }
float: right; #left-content li:last-child{
background: border-bottom: 0;
url(images/footerbk.jpg) repeat-x; }
border: 1px solid #c6c6c6; #left-content ul a:hover{
border-radius: 10px; text-decoration: none;
width: 248px; font:16px "Sans-Serif", Arial;
height: 53px; color: #64aa28;}
margin-bottom: 10px; .reclaim{
} float: right;
.category{ background:
float: right; url(images/reclaim.jpg) no-repeat;
border: 1px solid #c6c6c6; border: 1px solid #c6c6c6;
border-radius: 10px; border-radius: 10px;
width: 268px; width: 268px;
height: 234px; height: 268px;
margin-bottom: 30px; margin-bottom: 30px;
} }

30
 continuare anexa 1
.reclaim-title{ height: 55px;
font: 37px Arial; margin-top: 40px;
color: #fe4343; }
text-align: center; .search{
line-height: 2em; float: right;
} width: 300px;
.reclaim-contain{ height: 65px;
font: 13px Arial; margin-top: 40px;
color: #6965ec; padding-right: 15px;
text-align: center; }
padding-left: 20px; .search-element{
padding-right: 20px; float: left;
} width:300px;
#left-content ul{ height: 50px;
background: linear-gradient(to }
bottom, #fff 0%, #e9e9e9 100%); .welcome{
border-radius: 10px; float: right;
list-style: none; font: 12px Arial;
padding: 0px; color: #886ede;
margin: 0px; padding-bottom: 7px;
} }
#left-content ul li{ .search-input{
border-bottom: 1px solid #c6c6c6; float: right;
padding-left: 20px; width: 170px;
padding-top: 11px; height: 40px;
padding-bottom:9px; margin: 0px;
margin: 0px; border-bottom-left-radius: 5px;
} border-top-left-radius: 5px;
/* header */ vertical-align: middle;
#header{ padding-left: 15px;
width: 1170px; border: 1px solid #c6c6c6;
height: 210px; -webkit-appearance: none;
margin: 0px auto; }
margin-bottom: 20px; .search-button{
/* border: 1px solid #c6c6c6;*/ float: right;
} width: 85px;
.logo{ height: 44px;
float: left; border: 1px solid #1f1e1e;
background: url(images/logo.jpg) background:
no-repeat; url(images/footerbk.jpg) repeat-x;
width: 300px; border-bottom-right-radius: 5px;

31
 continuare anexa 1
border-top-right-radius: 5px; font: 23px Arial;
font: 16px Arial; color: white;
color: white; font-weight: bold;
} }
.search-button:hover{ .menu{
background: none; clear: both;
background-color: #7171c0; background:
border: 1px solid #7171c0; url(images/menubk.jpg) repeat-x;
} background-position: bottom;
.cart-arrow{ width: 1170px;
background: url(images/cart- height: 65px;
arrow.png) no-repeat; border: 1px solid #c6c6c6;
float: right; border-radius: 10px;
width: 30px; }
height: 30px; .home{
margin-top: 20px; float: left;
} background:url(images/home.png)
.cart{ no-repeat;
float: right; background-color: #363636;
background: url(images/cart2.png) background-position: center;
no-repeat 10px 15px;; border-bottom-left-radius: 5px;
background-color: #ffc900; border-top-left-radius: 5px;
width: 270px; width: 66px;
height: 65px; height: 65px;
border: 1px solid orange; }
border-radius: 10px; .home:hover{
margin-top: 40px; background:url(images/home-
margin-bottom: 20px; hover.png) no-repeat;
} background-color: #363636;
.items{ background-position: center;
float: left; }
padding-top: 25px; .menu ul{
padding-left: 60px; font: 15px 'Sana-Serif', Arial;
font: 15px Arial; color: #777777;
color: #3a3a3a; list-style: none;
font-weight: bold; margin: 0px;
} }
.topay{ .menu ul a{
float: left; font: 15px 'Sana-Serif', Arial;
padding-top: 20px; color: #777777;
padding-left: 7px; text-decoration: none;

32
 continuare anexa 1
float: left; float: left;
margin: 0px; background-color: #ff8402;
padding-top: 25px; border: 1px solid #e67003;
padding-right: 20px; border-bottom-left-radius:10px;
padding-bottom: 20px; border-top-left-radius:10px;
padding-left: 20px; width: 215px;
} height: 167px;
.menu ul a:hover{ }
color:black; .desktop-text{
} float: left;
.menu ul li{ background-color: #ffc200;
float: left; border: 1px solid #e4ae01;
height: 65px; border-bottom-left-radius:10px;
border-right: 1px solid #c6c6c6; border-top-left-radius:10px;
margin: 0px; width: 215px;
} height: 167px;
}
/* about technologies */ .monitors-text{
#technology{ float: left;
float: right; background-color: #a1d100;
width: 910px; border: 1px solid #90ba01;
} border-bottom-left-radius:10px;
.technologies{ border-top-left-radius:10px;
float: left; width: 215px;
border: 1px solid #c6c6c6; height: 167px;
border-radius: 10px; }
margin: 0px; .system-text{
margin-top: 10px; float: left;
margin-right: 10px; background-color: #01c2c2;
width: 430px; border: 1px solid #01b1b1;
height: 169px; border-bottom-left-radius:10px;
} border-top-left-radius:10px;
.read-more-arrow{ width: 215px;
background: url(images/arrow- height: 167px;
technologies.png) no-repeat; }
width: 30px; .tablets-text{
height: 30px; float: left;
margin-left: 25px; background-color: #6e6ec1;
margin-top: 10px; border: 1px solid #5c5cb5;
} border-bottom-left-radius:10px;
.keyboard-text{ border-top-left-radius:10px;

33
 continuare anexa 1
width: 215px; margin-top: 30px;
height: 167px; }
} .header-footer{
.mice-text{ background:
float: left; url(images/footerbk.jpg) repeat-x;
background-color: #fa3f3f; border-top-left-radius: 7px;
border: 1px solid #fb3333; border-top-right-radius: 7px;
border-bottom-left-radius:10px; height: 50px;
border-top-left-radius:10px; width: 1175px;
width: 215px; }
height: 167px; .font-header-footer{
} background: url(images/truck.png)
#technology img{ no-repeat 25px 15px;
float: right; font:15px "Sans Serif", Arial;
border-bottom-right-radius:10px; color: #ffffff;
border-top-right-radius:10px; line-height: 1.6em;
position: absolute; padding: 17px 20px 14px 58px;
} }
#technology h2{ .font2-header-footer{
font: 23px Arial; margin: 0px;
color: white; font:15px "Sans Serif", Arial;
font-weight: bold; color: #999;
padding-left: 25px; line-height: 1.6em;
padding-top: 20px; padding: 17px 20px 14px 0px;
margin: 0px; }
} .content-footer{
.technology-text{ height: 292px;
font: 13px Arial; background:
color: white; url(images/bg_footer.jpg) repeat ;
padding-left: 25px; border-bottom-left-radius: 7px;
padding-right: 25px; border-bottom-right-radius: 7px;
margin-top: 7px; }
} .footer-menu{
/* about footer */ border-right: 1px solid #1f1e1e;
#footer{ float: left;
clear: both; width: 234px;
width: 1175px; height: 292px;
height: 342px; }
margin: 0px auto; #footer .footer-menu:last-child{
border: 1px solid #1f1e1e; border-right: 0;
border-radius: 10px; }

34
 continuare anexa 1
.footer-menu h4{ .rights{
font:15px "Roboto", "sans-serif", float: left;
Arial; font:12px "Sans-Serif";
font-weight: bold; color: #999;
color: #ffffff; padding-top: 15px
line-height: 2em; }
margin: 0px; .text{
padding-top: 30px; float: left;
padding-left: 20px; margin-left: 20px;
} height: 39px;
.footer-menu ul{ width: 125px;
margin: 0px; border-bottom-left-radius: 5px;
list-style: none; border-top-left-radius: 5px;
text-decoration: none; vertical-align: middle;
font:13px "Sans-Serif", Arial; padding-left: 15px;
color: #999; border: 0;
line-height: 22px; -webkit-appearance: none;
padding-left: 20px; }
padding-top: 15px; .button{
} float: left;
.footer-menu ul a{ font: 14px Arial;
text-decoration: none; color:white;
font:13px "Sans-Serif", Arial; margin:0;
color: #999; height: 42px;
line-height: 22px; width: 55px;
padding-top: 15px; border: 1px solid #1f1e1e;
} background:
.footer-menu ul a:hover{ url(images/footerbk.jpg) repeat-x;
text-decoration: none; border-bottom-right-radius: 5px;
font:13px "Sans-Serif", Arial; border-top-right-radius: 5px;
color: #64aa28; }
line-height: 22px; .footer-menu .button:hover{
padding-top: 15px; background: none;
} background-color: #ee9d00;
.footer-menu ul a.follow:hover{ }
text-decoration: none; .footer-menu img{
font:13px "Sans-Serif", Arial; padding-left: 20px;
color: white; padding-top: 20px;
line-height: 22px; }
padding-top: 15px; .footer-fb{
}

35
 continuare anexa 1
background: padding-left: 25px;
url(images/facebook.png) no-repeat; }
padding-left: 25px; .footer-rss{
} background: url(images/rss.png)
.footer-tw{ no-repeat;
background: padding-left: 25px;
url(images/twitter.png) no-repeat; }

36
 anexa 2

37