Dezvoltarea aplicaţiilor Web
la nivel de client

proiecte propuse

Fiecare proiect poate fi ales de un număr de maxim 5 echipe, o echipă putând fi compusă din 2—3 studenţi ce aparţin grupelor având acelaşi titular de laborator.

  1. AtteR (Attendance Web Tracker)

    Să se creeze o aplicaţie care permite realizarea prezenţei on-line la activităţile asociate unei program academic – de exemplu, orele de curs/laborator/seminar pentru fiecare disciplină sau participările la probele unui concurs. Instrumentul va oferi suport atât pentru participanţi (i.e. studenţi), cât şi pentru persoanele care doresc situaţia prezenţei (e.g., responsabil de laborator, organizator de eveniment). Suplimentar, persoanelor prezente li se pot acorda punctaje şi/sau li se pot asocia termeni de conţinut (tag-uri) ori notiţe. De recurs la o metodă eficientă de prevenire a efectuării prezenţelor false. Se vor genera, via tehnici de vizualizare a datelor, rapoarte intermediare sau finale privind prezenţele şi punctajele acumulate de un individ/grup, inclusiv statistici, comparaţii, filtrări multi-criteriale etc. Datele vor putea fi importate dintr-o sursă externă de stocare pe Web şi exportate ca documente JSON şi HTML5 + schemele de microdate aferente. Inspiraţie: Involvio sau MyAttendanceTracker.

  2. CoCa (Cool Calendar)

    Să se realizeze o componentă interactivă (i.e. un widget) disponibilă în navigatorul Web ce va putea fi inclusă în orice document HTML cu scopul de a reda un calendar dorit, conform preferinţelor utilizatorului – e.g., ajustarea unor parametri privind interfaţa (cromatică, corp de literă, dimensiuni etc) sau vizând sursa datelor referitoare la calendar. Minimal, se va implementa preluarea datelor din calendarul propriu pus la dispoziţie de Google Calendar cu afişarea listei de evenimente disponibile în perioada afişată de calendar, inclusiv detaliile fiecărui eveniment, plus posibilele notificări. Datele redate în pagină vor putea fi exportate la cerere în formatele specificate de iCalendar: text normal (.ics), JSON (jCal), XML (xCal), plus HTML5 înglobând construcţii schema.org. Proiectul va include o pagină de prezentare atractivă a instrumentului creat pentru a tenta posibilii utilizatori să-l folosească.

  3. DanSo (Dance Lessons on the Web)

    Se doreşte implementarea unui instrument Web interactiv capabil să ofere diverse lecţii de dans, inclusiv tutoriale, filme demonstrative şi resurse de interes conexe: situri Web de profil, cluburi de dans, evenimente etc. Mişcările de bază vor putea fi exemplificate şi via dispozitive Arduino sau cu ajutorul unui alt dispozitiv (e.g., un gadget oferind suport pentru realitatea îmbogăţită – a se consulta iniţiativa WebVR şi experimentele privitoare la WebXR, plus Awesome AR). Noi stiluri de dans vor putea fi incluse pe baza unor extensii (module). Bonus: partajarea progresului utilizatorului pe diverse reţele sociale cu posibilitatea recomandării altor utilizatori pasionaţi de dans.

  4. DaSEr (DB Schema Representation Editor)

    Să se dezvolte un instrument Web care permite, la nivel de client, construirea interactivă a schemei unei baze de date relaţionale, inclusiv generând comenzile SQL aferente – pe baza unei abordări modulare (i.e. extensii proprii), se vor lua în consideraţie multiple sisteme de gestiune a bazelor de date relaţionale. Reciproc, preluând local sau de la distanţă o listă de comenzi SQL pentru crearea unei bazei de date, se va genera reprezentarea grafică a schemei acesteia, inclusiv legăturile dintre tabele, chei primare/străine, constrângeri de unicitate etc. Reprezentarea grafică a schemei va putea fi exportată în formatul SVG. Bonus: oferirea de suport pentru editarea colaborativă în timp real. Ca inspiraţie, se pot considera DB Fiddle şi SQL Fiddle.

  5. DaVe (Data Vaults on Web)

    Se doreşte îmbunătăţirea securităţii datelor transferate şi stocate în mediul on-line. Astfel, proprietarul unui sit Web intenţionează ca toate datele completate de utilizatori prin intermediul formularelor din situl său să fie stocate într-o manieră securizată. Recurgând la Web Cryptography API, se va implementa un instrument Web care va permite crearea unui cont (proprietar de sit) şi o pereche de chei RSA. Proprietarului i se va oferi un cod JavaScript pe care îl va putea insera în pagina ce conţine un formular Web de securizat. La trimiterea datelor (i.e. evenimentul submit), se va genera o cheie AES şi un vector de iniţializare, datele fiind criptate cu această cheie, iar cheia AES va fi criptată cu cheia publică RSA. Toate datele vor fi salvate/gestionate via un API extern de stocare. Proprietarul unui sit Web va avea la dispoziţie o interfaţă prin care va putea consulta datele pe baza cheii private RSA. Bonus: proprietarul unui sit va putea adăuga un nivel suplimentar de autentificare prin recunoaştere facială (de exemplu, folosind Amazon Rekognition) sau recurgând la Web Authentication API.

  6. E4K (Eye for Kitties)

    Să se realizeze o aplicaţie Web de monitorizare a pisicilor digitale – Cryptokitties – şi a ecosistemului aferent. Aplicaţia va gestiona şi afişa evoluţia traiului pisicilor şi a proprietarilor acestora. Se doreşte, de asemenea, redarea clasamentului celor mai "importanţi" crescători de pisici, al celor mai "noi pisici" şi arborele lor genealogic, împreună cu "valoarea" familiei – a se consulta situaţia disponibilă. Suplimentar, se vor genera rapoarte cuprinzând vizualizări de interes – reprezentate via SVG şi PNG – ale "vieţii" unui grup de (familii de) pisici, în funcţie de anumite filtre specificate de utilizator.

  7. EPoM (Electric Power Web Manager)

    Să se realizeze o aplicaţie Web de tip mash-up menită a gestiona în timp-real, direct în browser, fluxurile de activităţi dintr-un lanţ de furnizori de energie, baterii şi acumulatori speciali pentru drone, biciclete şi autoturisme electrice. Minimal, se vor oferi: posibilitatea de a monitoriza de la distanţă stocul de baterii, de a rezolva plata energiei livrate, de a notifica anumiţi clienţi fideli asupra schimbărilor survenite – de exemplu, modificări de preţ, indisponibilitatea unui tip de baterie/acumulator pentru o anumită marcă, oferte privind accesorii speciale etc. Noutăţle vizând ofertele vor fi redate via notificări în navigatorul Web. Localizarea acestor staţii de furnizare de energie electrică va putea fi semnalată pe hartă via OpenStreetMap. De asemenea, se vor oferi rapoarte şi vizualizări atractive privitoare la stocurile de baterii/acumulatori, inclusiv situaţia vânzărilor per sortiment, perioada de timp sau în funcţie de un anumit client.

  8. eRouS (Network Routing Simulator)

    Se doreşte dezvoltarea unei aplicaţii Web pentru simularea animată în navigatorul Web a dirijării pachetelor de date în reţele de calculatoare, folosind diverse abordări vizând cardinalitatea nodurilor selectate (unicast, broadcast, multicast, anycast, geocast), intra- vs inter-reţele, rute statice vs dinamice, strategii exacte vs recurgând la euristici, dirijări bazate pe anumite politici (restricţii ca lărgimea de bandă minim acceptată, priorităţi precum transmitere echilibrată de date recurgând exclusiv la o mulţime de noduri N, specificarea unor posibile noduri de încredere, filtrarea pachetelor – e.g., doar pachetele încapsulând date IPv6, UDP, DNS sau HTTPS) şi altele. Datele despre topologiile reţelelor, caracteristicile pachetelor de date, protocoalele de interes, alţi parametri de configurare vor putea fi încărcate dintr-un fişier JSON (preluat local sau la distanţă via URL). Condiţiile vizând starea legăturilor dintre nodurile reţelei şi specificul pachetelor de date vor fi generate aleatoriu şi preluate asincron de la distanţă. Starea curentă a unei simulări va putea fi salvată local, la nivel de client, şi ulterior încărcată pentru a continua procesul de simulare. Reprezentarea grafică 2D a soluţiilor de dirijare oferite va fi exportată ca document SVG.

  9. FeRT (Easy Feedback in Real-Time)

    Să se conceapă un instrument Web care permite publicului (i.e. studenţilor prezenţi) să ofere în timp real feedback anonim vorbitorului (e.g., profesorului) pe parcursul desfăşurării unei prelegeri (de exemplu, predarea unui curs sau susţinerea unei prezentări în cadrul unui eveniment de profil). Minimal, sistemul va permite feedback simplu cu două opţiuni – "Am înţeles"/"Nu am înţeles" – pentru ca oratorul să poată relua anumite porţiuni ale prelegerii, în situaţia în care un procent P (ajustabil) din audienţă a furnizat feedback de tip "Nu am înţeles". Aplicaţia va oferi suport pentru plasarea de întrebări vorbitorului, cu sau fără autentificarea autorului întrebării. Întrebările puse trebuie să fie votate de încă M membri prezenţi pentru a fi afişate oratorului. De asemenea, prezentatorul va putea adresa publicului o întrebare cu răspuns de tip grilă pentru a se asigura că o anumită explicaţie a fost înţeleasă. Instrumentul dezvoltat trebuie să fie suficient de modular pentru a include viitoare maniere de feedback. De asemenea, se va oferi suport pentru configurarea acestuia. Inspiraţie: ParticiPoll sau Plickers.

  10. GoRe (Best Goods Web Recommender)

    Folosind coduri QR sau o abordare similară, să se realizeze o aplicaţie Web multi-platformă capabilă a recomanda cele mai "potrivite" produse – considerând bunurile dorite, preţul, diverse restricţii precum substanţe potenţial periculoase datorită alergiilor sau regimului alimentar –, luând în calcul factori precum: articolele dezirabile, în funcţie de informaţii de interes precum diverse caracteristici specificate (gramaj, producător, mod de împachetare,...), cel mai bun preţ, disponibilitate geografică, factori de risc etc. Aplicaţia va putea, de asemenea, recomanda produse pe baza grafului social al utilizatorului (e.g., în funcţie de posibilii "prieteni" disponibili într-o reţea socială online). Statisticile utile vor fi oferite sub forma de vizualizări de interes redate în formatele PNG şi SVG. Datele reale vor fi preluate de la Open Food Facts.

  11. HaTeR (Happy Tree Friends Editor)

    Să se conceapă un mini-framework MV* pentru dezvoltarea de aplicaţii Web destinate generării de animaţii vectoriale la nivel de client. Ca studiu de caz, acesta va fi utilizat pentru editarea interactivă de filme nostime de genul Happy Tree Friends. Aplicaţia Web va oferi o manieră interactivă de gestionare a filmelor realizate, inclusiv a listei de personaje participante şi a scenariilor aferente. Bonus: implementarea unui sistem de dirijare a mesajelor la nivel de client pentru a putea crea aplicaţii de tip SPA – Single Page Application.

  12. HeGe (Headgear Web Assistant)

    Un magazin (online) de accesorii de îmbrăcăminte pentru acoperit creştetul capului (bonete, căciuli, fesuri, pălării, şepci, turbane,...) intenţionează să atragă mai mulţi clienţi oferind o aplicaţie Web responsivă menită a oferi asistenţă utilizatorilor în ceea ce priveşte probarea virtuală a acestor accesorii fără a necesita prezenţa fizică. Interacţiunea Web se va baza pe realitatea îmbogăţită (AR – Augmented Reality). Suplimentar, se va pune la dispoziţie un asistent Web oferind sugestii referitoare la (tipuri de) articole vestimentare în funcţie de sezon, moda curentă ori preferinţe specifice (e.g., Tuxy adoră să poarte joben de mătase doar când nu are plete), eventual pe baza cercului de "prieteni" dintr-o reţea socială. A se parcurge şi List of headgear, plus Awesome AR.

  13. JigR (Jigsaw Web Manager)

    Să se conceapă o aplicaţie Web – eventual, disponibilă ca extensie de navigator Web – care să permită rezolvarea de puzzle-uri propuse de program sau definite de utilizatori. Fiecare jucător va putea selecta – local ori de la distanţă via un URL – o imagine (în formatele PNG şi JPEG) care va fi decupată la momentul rulării în fragmente cât mai complicate folosind reguli bazate, de pildă, pe gramatici generative (divizările rectangulare sunt interzise). Piesele vor fi amestecate, mutările/rotirile putând fi efectuate via operaţii drag & drop. Odată ce un fragment e mutat în poziţia (aproape) corectă şi în unghiul (aproape) corect, aplicaţia va oferi suport pentru plasarea exactă (snap) în zona potrivită. Starea curentă a fiecărui puzzle va putea fi salvată local, cu posibilitatea restaurării ulterioare. Bonus: abordare colaborativă în timp real a rezolvării de puzzle-uri.

  14. KAnR (Key-frame Animator)

    Să se dezvolte un instrument Web care permite crearea unor obiecte grafice complexe bazate pe curbele Bézier şi definirea unor animaţii utilizând aceste obiecte. Maniera de implementarea a redării animaţiilor va fi una modulară, facil de extins. Se va oferi suport pentru operaţii ca: scalare, translaţie, modificarea formei (morfing), animarea pe o anumită traiectorie, plus efecte de alterare a velocităţii (easing) – de exemplu, o animaţie poate începe cu o viteză, finalizându-se cu altă viteză. Animaţiile vor putea fi construite pe strate (layers) diferite, putându-se controla gradul de transparenţă a fiecărui obiect de pe oricare strat disponibil. Aplicaţia va exporta animaţiile create ca o colecţie (arhivă) de documente HTML, CSS, eventual JS. Inspiraţie: CSS Animate.

  15. L-Fractr

    Să se implementeze un editor şi generator vizual de fractali de tip Lindenmayer (L-systems), oferind reprezentări alternative de tip raster (imagini în format PNG) şi vectorial (documente SVG) ce pot fi prelucrate pe client. De asemenea, instrumentul Web va pune la dispoziţie o listă predefinită de fractali de tip Lindenmayer, utilizatorul având posibilitatea gestionării şi salvării/încărcării local şi de la distanţă a acestora. Bonus: oferirea de vizualizări 3D via WebGL.

  16. MeToo (Meet-up Web Tool)

    Să se dezvolte o aplicaţie de tip PWA (Progressive Web App) menită a încuraja interacţiunea dintre persoanele care studiază/lucrează în localuri comune disponibile într-un areal geografic: biblioteci, cafenele sau spaţii de co-working. Fiecare utilizator, autentificat via un cont disponibil pe o reţea socială, odată ajuns într-un astfel de spaţiu va anunţa public ce activitate efectuează – astfel de mesaje vor putea fi parametrizate (de exemplu, "implementez <software> folosind pentru front-end <bibliotecă> şi ca back-end <platforma> pentru <limbajul de programare>" sau "studiez <concept|tehnologie>"). De asemenea, fiecare persoană participantă va oferi lista abilităţilor în funcţie de o anumită sarcină de efectuat – e.g., "pentru <programare> ştiu ca <expert|novice> <limbaj|paradigmă|framework>, iar pentru <design> am lucrat cu <software>". Toţi utilizatorii interesaţi de aceste tehnologii/abilităţi vor primi automat o notificare aferentă, sistemul oferind suport pentru realizarea de conversaţii (a)sincrone, invitaţii de întâlnire "la o cafea", partajare de calendare comune etc. De asemenea, utilizatorii vor putea vizualiza într-o manieră atractivă care sunt cele mai populare locuri din oraş şi ce tipuri de persoane le frecventează (de exemplu, la BCU vin mulţi dezvoltatori JavaScript pasionaţi de numismatică). Inspiraţie: Progressive Web Apps Rocks.

  17. MIOrc (MIDI Orchestra)

    Să se implementeze o aplicaţie Web care permite formarea unei orchestre on-line. "Cântăreţii" vor putea să-şi aleagă un instrument preferat dintr-o colecţie de minim N instrumente MIDI disponibile (e.g. N=3). Sistemul oferit va putea permite crearea unor "concerte" în care formaţiile vor fi compuse din interpreţi selectaţi de utilizator ori aleşi aleatoriu. Fiecărui instrument i se vor putea ajusta atribute precum sursa melodiei MIDI, volumul, numărul de secvenţe muzicale redate etc. Inspiraţie: OnlineSequencer, Guitar Recorder, Online Virtual MIDI Keyboard.

  18. PaMaF (Pac-Man @ FII)

    Să se creeze un joc electronic interactiv de tip Pac-Man care are corpul C al UAIC drept hartă reală a labirintului – încărcată dintr-un fişier JSON local sau disponibilă la distanţă via un URL – unde oponenţii pot fi personaje create de calculator şi/sau alte persoane participante în cadrul jocului. Utilizatorul uman va fi reprezentat pe baza imaginii profilului din cadrul unui sit social: Facebook, GitHub, Instagram, Last.fm etc. Pentru fiecare rundă, sistemul va genera aleatoriu un labirint, în funcţie de nivelul jocului sau anul de studii al personajului. Vor fi oferite pilule energetice care vor contribui la mărirea scorului (de exemplu, bonus-uri fictive la anumite materii) şi care vor putea fi "consumate" de fiecare jucător. În cadrul labirintului, vor putea apărea "fantome" maligne care vor fi înfăţişate prin imagini (avatars) ale profesorilor şi/sau "prietenilor" din reţeaua socială la care e arondat jucătorul. Dacă o fantomă a atins jucătorul, atunci aplicaţia va genera în mod automat un mesaj de notificare la nivelul navigatorului Web.

  19. PiW (P2P in the Web Browser)

    Să se dezvolte un framework permiţând realizarea unei reţele ad-hoc peer-to-peer (P2P) la nivel de navigator Web pentru a realiza în timp-real interschimb de date (e.g., URL-uri, mesaje scurte, fragmente de cod-sursă, imagini preluate de la camera video). Alte tipuri de conţinuturi sau funcţionalităţi suplimentare vor putea fi incluse pe baza unor extensii (module).

  20. SeAl (Seasonal Allergy Web Notifier)

    Să se realizeze o aplicaţie Web – eventual, o extensie de navigator – capabilă să notifice direct în browser o persoană şi grupul de "prieteni" ai acesteia din cadrul unei reţele sociale asupra apariţiei unei alergii sezoniere: la polen, la expunere directă la soare sau la praf, în conjuncţie cu anumite fructe ori compuşi alimentari etc. – a se consulta WebMD Allergies Health Center. Procesul de notificare – în cadrul navigatorului Web – va considera o anumită prioritate şi/sau frecvenţă. Pe baza unor date externe, încărcate dinamic, la cerere, se vor pune la dispoziţie sfaturi referitoare la preîntâmpinarea unei/unor alergii, plus tratamentul şi/sau medicaţia. Se vor oferi, de asemenea, vizualizări 2D/3D atractive – pe baza SVG şi WebGL – ale datelor raportate şi statisticilor generate.

  21. SocS (Social Web Statistics)

    Să se conceapă un instrument (mash-up) Web modular (extensibil) care realizează diverse statistici interactive privitoare la tipurile şi dimensiunea medie a resurselor – text, imagini/fotografii JPEG sau PNG, animaţii GIF, video,... –, inclusiv utilizarea mai multor limbi în cadrul conţinuturilor redactate şi a conversaţiilor realizate pe mai multe platforme sociale. Minimal, se vor lua în consideraţie: (micro)blog-uri (Medium, Twitter sau Tumblr), reţele sociale (Facebook), sisteme de partajare de resurse (Pocket), situri de ştiri din domeniul informaticii (Hacker News, Reddit). Se vor pune la dispoziţie maniere multiple de vizualizare a datelor procesate ce vor fi exportate în formatele PNG şi SVG.

  22. Tama (Tamagotchi Front-end Framework)

    Să se creeze un mini-framework MV* pentru dezvoltarea de aplicaţii Web animate vectoriale la nivel de client. Ca studiu de caz efectiv, acesta va fi utilizat pentru a implementa un simulator al jocului Tamagotchi. Minimal, fiecare utilizator autentificat va gestiona unul sau mai multe personaje pe care le va îngriji (hrăni, educa, amuza). Aplicaţia Web va oferi un mod interactiv de a crea şi configura aceste personaje, plus partajarea acestora în utilizatori. Bonus: implementarea unui sistem de dirijare a mesajelor la nivel de client pentru a putea construi aplicaţii de tip SPA – Single Page Application.

  23. WAcA (Web Accessibility Assistant)

    Să se implementeze – eventual, ca extensie de navigator Web – un instrument care permite utilizatorilor având diverse probleme speciale (cele vizuale si/sau motorii, cu precădere) să acceseze într-o manieră convenabilă un sit/document Web ce nu oferă în mod implicit conţinut accesibil şi pentru aceste categorii de persoane. În funcţie de unele informaţii furnizate în prealabil de utilizator (e.g., posibile probleme cognitive), sistemul va pune la dispoziţie o interfaţă care să se muleze pe nevoile acestuia, astfel încât să se poată interacţiona judicios cu situl/documentul dorit – eventual, printr-o interacţiune audio (i.e. recurgând la un cititor al conţinutului) sau una bazată pe gesturi. Se vor respecta standardele şi reglementările actuale privind accesibilitatea Web: Web Accessibility @ W3C şi WebAIM.

  24. WAgI (We're Against Ignorance)

    Să se imagineze un joc educativ de tip shooter ce va putea fi jucat direct în cadrul navigatorului Web. Entităţile care vor fi "anihilate" (fiecare "ţintă" valorând un anumit număr de puncte sau declanşând un eveniment specific de genul "notifică atunci când apar răspunsuri pertinente") vor putea fi întrebări "dificile" plasate pe situri de profil precum StackExchange (Stack Overflow). Scorul acumulat în urma cumulării voturilor pozitive acordate de alte persoane va putea fi salvat local şi partajat pe o reţea socială. Bonus: starea curentă a jocului va fi reprezentată grafic recurgând la diverse maniere de vizualizare a datelor. Bonus: redarea stării jocului în format vectorial cu SVG şi/sau 3D (recurgând la WebGL). Bonus 2: folosirea realităţii îmbogăţite (augmented reality) pe baza specificaţiei WebVR.

  25. WeD (Web Design Assistant)

    Să se dezvolte unui instrument Web – e.g., extensie de navigator Web – capabil să asiste utilizatorul în respectarea unor reguli de design Web (de exemplu, consistenţa spaţială, cromatica, modelul navigării, proporţia dintre diverse tipuri de conţinut textual, grafic, multimedia etc.), având la bază diverse biblioteci de şabloane de proiectare (design patterns) a interacţiunii. Aplicaţia va verifica dacă anumite şabloane apar şi sunt respectate pe parcursul unui sit Web, oferind sugestii de ameliorare a interfeţelor eronate. Se vor sugera colecţii predefinite de machete (template-uri) de prezentare – precum layout-uri, soluţii cromatice, stiluri de afişare, sisteme de prezentare a conţinutului – şi de interacţiune (de exemplu, modalităţi de navigare, formulare de autentificare, maniere de căutare internă etc.) pentru diverse categorii de situri Web (personale, academice, comerciale, comunitare şi altele) ce pot fi accesate pe mai multe platforme. De consultat şi The Front-End Checklist, Usability Guidelines şi UX Checklists.