PROIECTAREA

INTERFEŢELOR
UTILIZATOR
PROIECT

TEHNOLOGIA INFORAMȚIEI ANUL 2

Indrumător de proiect: Student:

Gabor Gianina Groza Cosmin
 Motivul alegerii temei

Am ales aceasta tema deoarece mi sa parut o tema

interesanta si am vrut sa fiu cat mai original
 Tehnologii folosite
• Pentru implementarea website-ului am folosit tehnologii
precum HTML, CSS , Jquery Bootstrap .

• Cu ajutorul CSS-ului am reusit sa creez un aspect placut

fundalului cat si butoanelor.

• Folosind Jquery am reusit crearea si personalizarea unui

layout web responsive care se adapteaza oricarei
rezolutii.
 Tehnologii folosite
De ce Bootstrap?
Răspunsul e pe cât se poate de simplu. Deoarece reprezintă o
fundație solidă care oferă aproape toate necesitățile de care un
website are nevoie și e ușor de folosit.
Include o listă extinsă de componente precum navigation bar,
butoane dropdown, progress bar, alerte, grupuri de butoane și
multe altele.
Folosind Bootstrap website-urile sunt implicit responsive(pot fi
vizualizate și de pe smartphones sau tablete).
 Structura site-ului
• Un prim avantaj al aplicației este simplitatea.Prin
simplitate mă refer că este ușor de navigat datorita
tipului de structura “float” .
 Evolutia implementarii
site-ului
• Fata de prototip in care am avut ca tema horoscopul am
schimbat cu primele impresii la jocurile video noi aparute

• Am adaugat imagini,am schimbat cu totul interfata sa fie

simpla si de inteles

• Am renuntat la butoane si am adaugat doar linkuri

• In background am folosit culori mai deschise decat cele

prezentate in prima faza in prototip.
 Screenshot-uri
 Screenshot-uri
 Modalitatea prin care am
facut site-ul responsive
Cu ajutorul framework-ului Bootstrap.
 În cadrul Bootstrap aplicaţia e „Mobile first” şi apoi pentru restul device-
urilor(începând cu versiunea 3).Implementarea pe care au ales-o creatorii
Bootstrap e prin CSS cu media query-uri,exploatând la maximum
capacităţile de variabilitate pe care le implică utilizarea limbajului Less.
 Bootstrap foloseşte 4 breakpoint-uri şi un sistem de linii şi coloane(grid
system) pentru organizarea întregii aplicaţii.Cât de simplu devine o
structură de cod responsive în Bootstrap?Păi,cam atât de simplu:
 <div class = „row”>
<div class= „ col-sm-6 col-lg-3”></div>
<div class=„col-sm-6 col-lg-3”></div>
</div>
Structura prezentată împarte rândul(pentru device-uri mici) în două coloane şi în
patru pentru device-urile mai mari.
 Posibile dezvoltări viitoare
• Implementarea tab cu numele interview unde voi lua
video-uri cu jurnalisti care o luat interviu la directori
jocurilor video.

• Crearea unei sectiuni de comentari unde utilizatori.

• De asemenea,poate o noua interfata a site-ului.