Tehnici Web

Idei de proiecte (html + eventual sugestii javascript)

Urmatoarele idei sunt doar orientative, puteti sa va alegeti si altceva decat e in lista. Ideea poate fi oricat de serioasa sau traznita, important e ca site-ul sa fie in totalitate facut de voi (fara parti preluate). Daca preluati text sau imagini, trebuie sa specificati in pagina sursa.

Pentru detalii despre sugestiile de aplicatii javascript cititi urmatoarea sectiune. De exemplu, daca sugestia de javascript este "prezentare interactiva" cautati in lista de aplicatii descrierea pentru prezentarea interactiva.

In proiect nu sunteti limitati la o singura aplicatie (desi e mai usor asa), puteti face si doua aplicatii mai simple, cu cerinte mai putine, dar urmarind obiectivele eliminatorii.

  1. [cel mai recomandat, fiind si cel mai probabil tip de site la care veti lucra in caz ca va angajati in domeniu] Site despre o firma virtuala (neaparat virtuala, ca daca e reala puteti avea probleme daca apar in proiect poze si informatii fara acordul proprietatrului).

    Va imaginati ca aveti o mica firma si ii faceti un site publicitar, cu informatii despre firma, produse, pagina de comenzi, formular de contact etc. De exemplu detineti o librarie. scrieti un scurt istoric. Faceti cateva poze pentru niste carti care ar fi produsele. Creati un formular de comanda. Scrieti o pagina de recenzii sau un loc unde pot posta utilizatorii parerile lor etc.

    Aplicatii de javascript recomandate: aplicatie de sortare/filtrare/calculare, cos virtual, galerie de imagini.

  2. Site de prezentare personala. Sectiuni posibile: cv, o scurta poveste despre voi, proiecte, si ce alte lucruri considerati ca ati dori intr-un astfel de site (hobby-uri, locuri vizitate, carti citite etc).

    Aplicatii de javascript recomandate: aici aveti cea mai mare libertate, pentru ca la sectiunea proiecte puteti pune orice in javascript - nu mai trebuie sa fie strict legat de tema site-ului, fiind un exemplu de proiect personal.

  3. Despre animalutul/animalutele pe care le detineti.(de exemplu: despre catelul sau broscuta testoasa sau hamsterul vostru etc, daca n-aveti animalute, dar vreti ceva in tema, despre pisicile din cartier, despre papagalii vecinilor, se accepta si despre paianjenul din coltul camerei ori tamagotchi). Sectiuni posibile: descrierea animalutului, poze, descrierea speciei animalutului (detalii stiintifice), videoclipuri haioase cu animalutul etc

    Aplicatii de javascript recomandate: joc care sa aiba o tema legata de animalutul vostru, galerie interactiva de imagini/videoclipuri, prezentare interactiva.

  4. Site de divertisment. Exemplu: jocuri in javascript. Atentie, jocurile nu pot fi dintre cele clasice (pentru care se gaseste implementarea pe internet). Cerintele jocului vor fi stabilite de comun acord.

    Aplicatii de javascript recomandate: joc, editor.

  5. Site despre localitatea voastra (o parere personala), cartierul vostru, sau daca aveti rude la tara, despre satul respectiv. Poate fi si un site dedicat unui eveniment specific localitatii, unei traditii, unei cladiri mai deosebite (de exemplu casa bantuita din satul Fantomeni). Puteti scrie despre cele mai dragute, frumoase ori dimpotriva cele mai urate, periculoase locuri. Legendele orasului natal, locuri misterioase, ori zone cu fenomene paranormale. De ce vreti or nu vreti sa traiti acolo, de ce ati recomanda altora sa viziteze localitatea. Daca folositi texte si imagini deja existente despre obiectivele turistice, trebuie specificata sursa in site (folosind tagurile si atributele specifice). Aici, de asemenea, poate fi si un site despre scoala, sau liceul la care ati fost, despre un club din care faceti parte, ori despre parcul preferat (cu conditia ca parcul sa nu fie un loc privat si sa aveti probleme daca scrieti despre acesta).

    Aplicatii de javascript recomandate: prezentare interactiva, joc, optiuni afisare site.

  6. Site dedicat unei pareri personale (exemple: situatia facultatilor din Romania, manifest pentru ceva (exclus teme politice, religioase, xenofobe, rasiste, sau orice ar putea sa incalce normele de etica si toleranta); recenzii pentru carti, filme, jocuri, screensaver-uri, site-uri etc; parerea voastra despre existenta lui Yeti in padurile romanesti etc.)

    Aplicatii de javascript recomandate: prezentare interactiva, optiuni afisare site.

  7. Fan-site in legatura cu formatii muzicale, actori, filme, desene animate, reviste, echipe de fotbal etc.

    Aplicatii de javascript recomandate: prezentare interactiva, joc, optiuni afisare site, galerie interactiva de imagini/videoclipuri.

  8. Site informativ. De exemplu un site despre tractoare, cu istoric, branduri de tractoare, best-practices, interviuri cu posesori de tractoare etc. Puteti scrie despre calculatoare, papusi, creioane colorate, ecologie, tragedii naturale, muzica, arta, orice va trece prin minte si ar fi si util pentru altii sa citeasca.

    Aplicatii de javascript recomandate: prezentare interactiva, joc, optiuni afisare site, galerie interactiva de imagini/videoclipuri.

  9. Site despre hobby-ul vostru: citit, tricotat, colectionat timbre, alpinism, jocuri video, gatit, sportul preferat etc. Unde explicati cum anume desfasurati activitati legate de acel hobby. Alegeti aceasta tema doar daca aveti ce scrie din experienta personala despre hobby-ul respectiv. Nu se va descrie hobby-ul doar sub o forma generala.

    Aplicatii de javascript recomandate: prezentare interactiva, joc, optiuni afisare site, galerie interactiva de imagini/videoclipuri.

  10. Site educativ. De exemplu cu tutoriale, lectii online, exercitii interactive in javascript. Insa sa fie scrise din perspectiva voastra, cu explicatiile voastre, nu luate dintr-o carte, de pe un site.

    Aplicatii de javascript recomandate: prezentare interactiva, joc, lectii si exercitii interactive.

  11. Site practic. Despre ceva ce multi ar putea sa nu stie si i-ar ajuta in caz de probleme. De exemplu site despre ce facem in caz de cutremur/tsunami/invazie extraterestra/incendiu. Site despre cum sa-ti pornesti propria firma. Site despre cum sa zugravesti singur etc. E poate o tema asemanatoare cu site-ul educativ.

    Aplicatii de javascript recomandate: prezentare interactiva, joc, lectii si exercitii interactive.

  12. Site-uri hazlii (de divertisment). Exemple: pacaleli de 1 aprilie; cum sa fii un vecin enervant; retete culinare ciudate (ex: inghetata prajita); cele mai ciudate animale de companie (ex: vecinu are o lacusta numita Jumpy) ; site-ul pasionatilor de cataratul in copac, si alte aiureli.

    Aplicatii de javascript recomandate: joc, editor, optiuni de afisare a site-ului.

Idei de aplicatii pentru proiecte (javascript)

Pentru proiectele de javascript, pentru partea de cerinte minimale (eliminatorii) fie veti completa un formular in care specificati cerintele (caz in care stabilim cerintele de comun acord, o parte din ele fiind date de mine), fie primiti o cerinta aleatoare. Pentru a completa restul punctajului veti alege din cerintele/obiectivele optionale specificate in barem (sau puteti propune voi altele, insa cu confirmarea mea ca sa fim siguri ca nu se indeparteaza de subiectul materiei).

AtentieCerintele propuse pentru fiecare proiect sunt mai mult ca sa va faceti o idee despre complexitate si ce elemente ar trebui sa contina aplicatia. Cerintele proiectelor vor fi personalizate astfel incat sa nu fie doi studenti cu aceleasi cerinte. Nota: De aceea este posibil sa mai adaug idei aici, pe parcursul semestrului - asta nu inseamna ca modific vreo cerinta ci doar incerc sa dau idei diverse din care studentii sa aleaga.

  1. Galerie interactiva de imagini/videoclipuri. Se poate face inclusiv un player audio, dar trecerile de la o melodie la alta sa aiba si efecte vizuale. Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • Imaginile vor avea si o descriere si mai multe caracteristici (de exemplu titlu, cuvinte cheie care le descriu, tematica (categorie de imagini: de exemplu daca e un site pentru produse alimentare, putem avea mai multe imagini din categoria legume, paine etc), una sau mai multe proprietati numerice
    • Optiuni variate de modificare a afisajului
    • Cautarea unei anumite imagini. Afisarea unei anumite imagini dupa un identificator.
    • Parcuregerea imaginilor intr-o ordine data dar si in ordine inversa
    • Preferinte ale utilizatorului, care sa aiba caracter persistent, de exemplu: stergerea de catre utilizator a unei anumite imagini (nu mai doreste sa o vada) sau un rating pe imagini, sau adaugarea la favorite cu optiunea de a vedea doar favoritele etc.
    • Animatie pentru trecerea de la o imagine la alta.
  2. Joc. Tema jocului trebuie sa fie in contextul site-ului (exemplu: avem un site despre un liceu, putem pune un joc educational, sau un joc in care apar elemente din liceu (de exemplu in joc apare "harta" liceului si jucatorul trebuie sa se duca in diverse camere sa indeplineasca diverse taskuri). Dar in niciun caz pe site-ul despre liceu nu ar trebui sa se gaseasca un joc de carti (stil solitaire), de exemplu. Nu se permite implementarea unor jocuri clasice, deoarece se gaseste cod pe internet pentru ele.

    Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • Vor exista mai multe miscari/mutari posibile in joc realizate prin cat mai multe tipuri diferite de evenimente (de mouse si tastatura)
    • Jocul trebuie sa cuprinda elemente care au traiectorie, elemente care apar sau dispar de pe ecranul de joc (de exemplu inamici care apar la un interval de timp si sunt eliminati de jucator)
    • Salvarea progresului jucatorului, pentru a putea relua jocul, fie local, pe client, fie pe server.
    • Un ecran de optiuni pentru joc (stil formular) cu toate tipurile de input studiate.
    • Incarcarea datelor jocului de pe server. Loading screen.
  3. Lectii si exercitii interactive. Aplicatia ar ajuta utilizatorul sa invete ceva prezentat in site (de exemplu: simularea unui fenomen fizic, a unei traiectorii etc, afisand si date calculate si actualizate in timp real pe parcursul simularii)

    Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • Exercitiile vor fi de mai multe feluri; de exemplu, care asociaza concepte, trasand linii intre ele; cu drag&drop, care permit mutarea si asezarea elementelor intr-o anumita ordine, intrebari cu un raspuns care se da in diverse feluri de input etc
    • Se va verifica activitatea utilizatorului si acesta va primi un punctaj, o nota etc.
    • Salvarea progresului utilizatorului, a timpului in care a rezolvat un exercitiu etc.
    • Exercitiile sau lectiile pot cuprinde animatii sau valori calculate in timp real
  4. Prezentare interactiva. Aplicatia ar prezenta un anumit obiect: un produs, o locatie, un eveniment, o lectie. Aplicatia va arata ca un slideshow interactiv, avand butoane, inputuri, animatii.

    Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • Optiuni variate de modificare a afisajului
    • Afisarea diverselor informatii sub forma de slide-uri, cu animatie de trecere intre slide-uri (dar fara ca slide-urile sa fi imagini, ci elemente DOM continand text. Se pot folosi diverse boxuri care apar/dispar pe ecran, se misca, utilizatorul poate interactiona cu ele etc.
    • Salvarea optiunilor utilizatorului, salvarea progresului (in ce moment al prezentarii a ajuns).
    • Salvarea pe server si in cookies/local storage a diverselor actiuni ale utilizatorului pentru a afisa in mod personalizat prezentarea (de exemplu, prezentarea este despre calculatoare in general, si a inchis toate boxurile despre hardware, urmarindu-le pe cele despre software - prezentarea poate sa continuie doar pe partea de software, observand actiunea utilizatorului.
  5. Aplicatie de sortare/filtrare/calculare si/sau cos virtual Aplicatia necesita un set de date despre anumite entitati (de exemplu, pot fi intrarile dintr-un blog cu informatii precum: data postarii, titlu, cuvinte cheie, lungime postare, are/nu are imagini etc; pot fi produsele dintr-un site comercial cu informatii precum nume, pret, data de expirare, culoare, dimensiune, descriere etc.

    Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • Optiuni variate pentru filtrare: sa se afiseze doar elementele care indeplinesc anumite conditii compuse (pretul sa fie intr-un anumit interval, produsul sa fie mai nou decat o anumita data, sa aiba o anumita culoare si sa nu fie produs de o anumita firma), sau dimpotriva sa fie ascunse cele care indeplinesc acea conditie.
    • Sa calculeze diverse date, de exemplu o dimnsiune medie, o suma a preturilor, cea mai recenta data, produsul cu cel mai slab rating
    • Sa sorteze datele pe anumite criterii.
    • Salvarea pe server a anumitor optiuni pentru diversi utilizatori. In cazul unui site comercial, se pot adauga/sterge anumite produse intr-o lista de produse pe care utilizatorul doreste sa le cumpere. Cand utilizatorul finalizeaza editarea listei, aceasta se salveaza pe server, continand produsele pe care utilizatorul le-a comandat (functionalitatea de cos virtual)
  6. Editor O aplicatie care aare diverse optiuni de editare de continut (imagine sau text) si posibilitatea de a salva rezultatul. De exemplu, se poate face o felicitare virtuala, un afis, o imagine in canvas, ale carei culori sunt schimbate prin diversele optiuni, desenare (cu ajutorul mouse-ului), plasare de text/imagini/alte obiecte in pozitii absolute (in cadrul obiectului editat) etc.

    Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • Optiuni variate pentru editare (culori, dimensiuni, margini de diverse forme, pozitionari etc).
    • Salvarea progresului pe server si local.
    • Animatii editabile (putem pune textul sa apara glisand dintr-o anumita parte, sau sa apara treptat). Pentru imagini putem seta prin aplicatia editor sa isi schimbe dimensiunile, forma colturilor, anumite culori etc.
  7. Formular de comanda O aplicatie care presupune un formular mai complex, pe care utilizatorul trebuie sa il completeze. Datele din formular vor fi transmise catre server. Formularul trebuie sa contina mai multe elemente interactive decat simplele imputuri. Sa aiba un ecran special generat: de exemplu, daca e formularul pentru achizitionarea unui bilet intr-o sala de spectacol sau un restaurant cu rezervari, se vor ilustra locurile prin elemente DOM, iar utilizatorul poate sa isi aleaga locul dintre cele libere afisate (cele ocupate ar fi marcate cu o alta culoare). Un alt exemplu: formulare de comanda pentru un tort. Utilizatorul poate simula modul in care va arata tortul, alegand culoare, ornamente, text care sa fie scris pe tortsi avand o reprezentare vizuala a acestora (pot fi desene nu imaginea reala a unui tort).

    Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • validari mai complexe (mai mult decat aplicarea unei simple expresii regulate)
    • campuri care sa apara sau sa dispara in functie de completarile unor inputuri anterioare
    • Aparitia si disparitia campurilor sa se faca in mod animat
    • Progress bar pentru completarea formularului
    • formular impartit pe mai multe ecrane (nu neaparat pagini html separate, ci box-uri diferite (afisand doar boxul curent si simuland astfel paginarea)
    • Optiune de help: de exemplu buton in dreptul unor inputuri, o tasta speciala care deschide informatia pentru un anume input, aparitia helpului daca utilizatorul zaboveste mai mult de n secunde in completarea unui input.
  8. Optiuni de afisare a site-ului Aplicatia va permite utilizatorului sa personalizeze modul de afisare a paginilor site-ului.

    Aplicatia ar putea avea urmatoarele cerinte de functionare:

    • un formular cu diverse setari pentru site. Optiunile date de utilizator pot fi salvate local sau pe server
    • Se pot face setari cu privire la continut ( sa se afiseze anumite tipuri de informatii sau nu)
    • Sa se adauge anumite functionalitati in site, de exemplu toate imaginile sa aiba asociat cate un buton de marire si unul de inchidere (dispare imaginea)
    • Setari de afisare: culori de background, de text, marimea textului
    • Setari cu privire la layout (de exemplu sunt mai multe layout-uri implementate (coloane, grid, text desfasurat etc) si utilizatorul poate alege modul de afisare
    • activarea sau dezactivarea unor animatii

Idei de taskuri pentru node.js

In principiu partea de node.js se va ocupa de logare, sesiuni, salvarea datelor utilizatorului pe server,si doar va fi o completare a aplicatiei JavaScript. Functionalitatile posibile le veti gasi in barem.