Cerințe generale

Fiecare proiect va fi predat sub forma unei arhive zip cu denumirea de forma
CodTema_NrGrupa_NUME_Prenume.zip și următoarea structură:

- media: director care conține elementele media utilizate în cadrul proiectului (imagini, sunete, video, fișiere
de date);
- CodTema_NrGrupa_NUME_Prenume.html: fișier care conține codul HTML aferent proiectului;
- CodTema_NrGrupa_NUME_Prenume.css: fișier care conține codul CSS aferent proiectului;
- CodTema_NrGrupa_NUME_Prenume.js: fișier care conține codul JavaScript aferent proiectului.

Observații pentru fișierele CodTema_NrGrupa_NUME_Prenume.html/css/js:

• trebuie să conțină doar cod sursă formatat și comentat;

• sunt singurele care intră în evaluarea proiectului;
• sunt puntate doar în măsura în care studentul dovedește la evaluare cunoașterea elementelor utilizate;
• nu este permis cod JavaScript preluat din nici o altă sursă (colegi, internet, etc.), cu excepția exemplelor de la
curs / seminar publicate pe platforma [Link]; orice fragment de cod preluat din alte surse se
consideră tentativă de fraudă; se verifică automat;
• este permisă preluarea de fișiere media, cod CSS, fișiere de date din orice sursă;
• pentru implementarea cerințelor nu sunt permise alte biblioteci JavaScript (este permisă utilizarea Bootstrap
– doar partea de CSS).

Surse de documentare acceptate: Mozilla Developer Network ([Link] și The Modern

JavaScript Tutorial ([Link]

Modalitate de transmitere: încărcare pe platforma [Link]

Barem de corectare
1p Oficiu

3p Realizarea unei interfețe cu utilizatorul pentru tema primită folosind limbajele HTML și CSS

1p Atașarea de funcții de tratare pentru evenimentele controalelor utilizate

5p Implementare cerințe specifice temei alocate

Teme

1. Program de desenare raster folosind elementul canvas

Descriere: Permite utilizatorului să deseneze folosind un element de tip canvas și să exporte rezultatul final în format
raster și / sau vectorial.

Exemplu: Microsoft Paint

1p - desenare cu un instrument (elipsă)

1p - desenarea se face utilizând mouse-ul cu preview
1.5p - instrumente multiple (+ dreptunghi, linie)
1p - posibilitate de selectare culoare și grosime linie pentru instrument(e)
0.5p - export imagine curentă într-un format raster (fișier PNG / JPEG / …)
1p - export imagine curentă în format vectorial (fișier SVG)
1p - selectare culoare background
2p - afișare lista de figuri existentă în desen și posibilitatea de a șterge o figură oarecare
2p - modificarea proprietăților pentru o figură selectată din listă (coordonate, dimensiune)
 2. Player video

Descriere: Permite utilizatorului să vizioneze o colecție de minim 4 filme (stocate static în cadrul aplicației în folderul
media).

0.5p posibilitate navigare prin playlist; trecere automată la filmul următor

1p adăugarea de noi filme prin drag and drop sau prin intermediul unui control de tip input
1p modificare ordine filme în playlist; ștergere filme din playlist
1p aplicare de efecte video selectabile de către utilizator cu ajutorul unui element de tip canvas (notă: efectele vor fi
diferite de cele implementate pe parcursul seminarelor; efectele nu vor fi implementate cu ajutorul CSS)
2p desenare video și controale semitransparente (previous, play / pause, next, progress bar și volum) pe același
element canvas (suprapuse peste fluxul video) și determinarea operației pe baza poziției cursorului în cadrul canvas-
ului
2p implementare funcționalitate de preview cadru (atunci când cursorul este deasupra progress bar-ului)
1p afișare subtitrări (stocate sub formă de fișiere JSON în cadrul aplicației)
0.5p stocare setări (ex: nivel volum, poziție curentă în cadrul playlist-ului) cu ajutorul Web Storage API

Notă: O colecție de fișiere video gratuite este disponibilă la adresa [Link]

3. Vizualizare date

Descriere: Construirea unei aplicații pentru vizualizarea unui set de date. Setul de date care cuprinde informații
despre indicatorii PIB pe cap de locuitor, Speranță de Viață și Populație pentru țările Uniunii Europene în perioada
2000-2018 se va descărca de la adresa [Link] (și va fi salvat în folder-ul media).

2p - preluare automată la pornirea aplicației a datelor curente despre PIB pe cap de locuitor/ Speranta Viata /
Populatie pentru țările UE pentru ultimii 15 ani disponibili și procesare pentru aducerea la forma din fișierul furnizat.
Documentația este disponibilă la adresa: [Link]
services/getting-started/rest-request; seturile de date folosite sunt: demo_mlexpec?precision=1&sex=T&age=Y1,
demo_pjan?precision=1&sex=T&age=TOTAL și sdg_08_10?na_item=B1GQ&precision=1&unit=CLV10_EUR_HAB; lista
de țări este: BE, BG, CZ, DK, DE, EE, IE, EL, ES, FR, HR, IT, CY, LV, LT, LU, HU, MT, NL, AT, PL, PT, RO, SI, SK, FI, SE

1p - afișare grafică evoluție pentru un indicator (PIB/SV/Pop) și o țară selectată de către utilizator - se va folosi un
element de tip SVG (grafică vectorială); tipul de grafic (linie, histogramă, …) este la alegere

1p - pentru graficul de la punctul anterior să se afișeze un tooltip care să afișeze anul și valorile pentru PIB/SV/Pop
pentru perioada corespunzătoare poziției mouse-ului

1p - afișare bubble chart pentru un an selectat de utilizator folosind un element de tip canvas (grafică raster)

1p - animație bubble chart (afișare bubble chart succesiv pentru toți anii)

2p - afișare sub formă de tabel a datelor disponibile pentru un an selectat de către utilizator (tarile pe linii și cei trei
indicatori pe coloană); fiecare celulă va primi o culoare (de la roșu la verde) în funcție de distanța față de media
uniunii
 4. Editor fotografii

Descriere: Permite utilizatorului să încarce și să editeze fotografii (imagini raster în format JPEG, PNG, ...).

1p - încărcare imagine prin drag and drop sau control input de tip file și salvare rezultat final
1p - implementare selecție (inițial toată imaginea, modificare cu mouse down - mouse up, similar cu mecanismul de
selecție din Microsoft Paint)
1p - crop interactiv (utilizatorul trebuie să poată selecta zona din imagine cu ajutorul mouseului)
1.5p - aplicare efect ales de către utilizator pe o zonă selectată din imagine
1p - scalare imagine cu păstrarea proporțiilor (utilizatorul va furniza noua lățime sau noua lungime)
1p - adăugare text (utilizatorul furnizează textul, dimensiunea, culoarea, poziția)
1p - afișare continuu (și în timpul modificării selecției) histogramă de culoare pentru selecția curentă
1.5p - mutare selecție (folosind mouse-ul și tasta Shift)
0.5p - ștergere selecție -> pixelii din selecție vor deveni albi

5. Joc Asteroids

Descriere: Realizarea unui joc similar cu Asteroids ([Link] utilizând

controlul de tip <canvas> sau controlul de tip <svg>.
Exemplu: [Link]

1p - implementare asteroizi (reprezentați sub formă de cerc): fiecare asteroid va avea asociată o valoare generată
aleator în intervalul 1-4, indicând numărul de rachete necesar pentru distrugerea acestuia. Numărul de rachete
necesare va fi afișat în permanență în cadrul desenului utilizat pentru asteroid. Culoarea și dimensiunea asteroidului
se vor modifica în funcție de acest număr. Asteroizii se vor deplasa pe traiectorii liniare cu o viteză determinată
aleator.
1p - implementare navă spațială desenată sub formă de triunghi; nava va putea fi controlată cu ajutorul
următoarelor comenzi din tastatură: săgeți (deplasare navă sus / jos / stânga / dreapta cu o viteză constantă), z –
rotire spre stânga, c – rotire spre dreapta, x – lansare rachetă în direcția în care este orientată nava; nava se poate
deplasa în toate cele patru direcții indiferent de orientarea curentă.
1p - implementare rachete: se va reprezenta racheta pe parcursul deplasării de la nava spațială la asteroid. Se va
asigura detecția coliziunii cu asteroidul și modificarea numărului de rachete necesar pentru distrugerea acestuia.
Sunt permise maxim 3 rachete lansate simultan.
0.5p - coliziune între asteroizi: coliziunea dintre doi asteroizi va determina modificarea traiectoriei acestora
1p - coliziune între nava spațială și asteroizi: va determina reducerea numărului de “vieți” și repornirea jocului, până
când numărul de vieți devine 0.
1p - regenerare număr vieți: la distrugerea fiecărui asteroid jucătorul va obține un număr de puncte. La atingerea
unui număr predefinit de puncte, se va actualiza numărul de ”vieți”.
1p - posibilitate control joc utilizând touchscreen
1p - stocarea celor mai bune 5 scoruri obținute și a numelui jucătorilor cu ajutorul Web Storage API (sau a unui alt
API similar)
 6. Editor SVG

Descriere: Construirea unui editor pentru grafică vectorială folosind elementul SVG.

1p - suport pentru adăugare elemente geometrice de bază (linie, elipsă, dreptunghi)

0.5p - suport pentru selectarea culorii și grosimii liniei pentru adăugare
2p - suport pentru selecție și ștergere / modificare elemente existente (proprietăți: culoare și grosime linie, culoare
fundal)
1p - suport pentru anularea ultimelor n operații (undo)
1.5p - suport pentru mutare elemente utilizând mouse-ul
2p - suport pentru desenare căi cu editarea ulterioară a punctelor
1p - funcționalitate de export în format raster (*.png sau *.jpeg)
0.5p - posibilitate salvare desen în format SVG
1p - salvarea automată a desenului curent și reîncărcare la pornire cu ajutorul Web Storage API (sau a unui alt API
similar)