Web Technologies

Hey there! From February till June I'm teaching Web development laboratories at the local Computer Science faculty. Topics include:

  • Web fundamentals, aka: how it all works
  • HTML & CSS
  • Server side development with PHP
  • Building and consuming Web Services via PHP
  • Ajax & JavaScript basics

For week'to'week exercises we're using DevDrive.io, an app designed and built by myself to make the entire teaching experience a little better. If you find it useful, feel free to use it :)


  1. LeHS (Learn HTML & CSS) / M

    Sa se creeze un sistem Web ce ajuta diverse categorii de persoane (de la incepatori la experti) sa invete, exerseze si aprofundeze cunostinte referitoare la HTML si CSS.

    Dupa autentificarea cu un cont disponibil pe o retea sociala la alegere (minimal, GitHub), aplicatia va pune la dispozitia utilizatorilor, printr-o interfata atractiva, nivele cu diverse provocari (eventual, insotite de explicatii ce constau din anumite sarcini (e.g., scriere de cod-sursa, raspunsuri la teste) pentru a trece mai departe.

    Aplicatia va salva progresul fiecarui utilizator, acesta putand, ulterior, sa continue de unde a ramas. In plus, se vor oferi statistici referitoare la clasamentele globale pentru fiecare utilizator in parte si vizand nivelurile de dificultate. De asemenea, solutia va expune si un API REST/GraphQL prin care alte aplicatii vor putea prelua in format JSON sau XML atat provocarile, cat si raspunsurile corecte.

    Se vor avea in vedere aspecte precum internationalizarea si accesibilitatea.

    Inspiratie: Flexbox Froggy & CSS Grid Garden

  2. UnWe (Unemployment Web Visualizer) / M

    RecurgĆ¢nd la un API REST/GraphQL propriu, să se realizeze un instrument Web de vizualizare și de comparare multi-criteriala (pe județe, nivel de educație, grupe de vĆ¢rstă, mediu, perioadă de timp etc.) a datelor publice referitoare la șomajul din RomĆ¢nia pe ultimele N luni (minim 12).

    Statisticile, plus vizualizările generate ā€“ minim 3 maniere, plus cele cartografice pe baza unor servicii Web de profil ā€“ vor putea fi exportate in formatele CSV, SVG si PDF.

    Resurse suplimentare despre vizualizarea datelor:https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week4.

  3. ReSC (Realtime Support Chat) / M

    Sa se ofere un solutie Web prin care administratorii unei aplicatii pot sa comunice in timp real ā€“ 1 la 1 sau 1 la N ā€“ cu utilizatorii. Mai exact, acestia vor incarca intr-un sit Web un script extern JS ce va adauga in pagina un chat.

    Pentru a raspunde conversatiilor in timp real, acestia vor avea la dispozitie o alta aplicatie, plus un API REST/GraphQL pe care-l pot integra in propriile sisteme de tip CRM (Content Management System). Tot aici, in vederea personalizarii, ei pot configura diverse proprietati ale chat-ului, cum ar fi: tema de culori, pozitia in pagina, maniera de afisare a fiecarui avatar, gruparea sau nu a conversatiilor in functie de perioada de timp sau de subiect.

    Unele cuvinte ale mesajelor vor putea fi convertite automat in emoji (e.g., in loc de ā€œfloareā€, se va plasa šŸŒ¼). Bonus: traducerea automata via un API public specializat a textelor vehiculate intre utilizatori. Inspiratie: Drift.

  4. SkiVI (Skill Virtual Instructor) / M

    Sa se conceapa o aplicatie Web modulara cu rol de instructor virtual care sa ofere seturi de activitati si resurse de instruire vizand invatarea/aprofundarea unor deprinderi precum dansul pe sarma, limbi moarte (e.g., latina, aramaica), stiluri de auto-aparare, cantat la un instrument muzical (clavecin, Teremin, tuba), supravietuire (in jungla, in camin, vehicol cosmic, cartier poluat,...), proceduri de resuscitare, confectionare de origami si altele.

    Fiecare deprindere va fi implementata de un microserviciu Web independent ce va fi actualizat automat sau la cerere. Ca studii de caz vor fi dezvoltate minim 3 astfel de microservicii.

    Functionalitatile de baza ale sistemului (gestiunea instructajelor, utilizatorii interesati de invatarea unor deprinderi etc.) vor fi oferite via un API adoptand paradigma REST sau GraphQL.

  5. SiA (Similar Audio Retrieval) / M

    Sa se implementeze o aplicatie Web capabila ā€“ pe baza unui API REST sau GraphQL propriu ā€“ sa detecteze similaritatea dintre continuturi sonore disponibile via API-uri audio specializate. Pentru calculul similaritatii, se vor considera (meta-)date precum titlul, descrierea, lungimea, autorul, termenii de continut (tag-urile), comentariile utilizatorilor si altele.

    Aplicatia va oferi suport pentru cautare multi-criteriala si va sugera melodii de interes in functie de preferinte si starea de spirit (mood), localizarea geografica, moment de timp, factori demografici, anturaj.

    Aceste recomandari vor fi sugerate si prin intermediul unui flux de stiri RSS si plasate pe o retea sociala pe baza hashtag-ului #saudio.

  6. WoG (Workout Generator) / B

    Sa se creeze o aplicatie Web ce le ofera utilizatorilor diverse tipuri de antrenamente sportive personalizate in functie de greutate, inaltime, varsta, gen si altele.

    Utilizatorii autentificati vor putea sa specifice preferinte pentru antrenamentul dorit: grupe de muschi, durata, locatie (aer liber, acasa) etc, iar aplicatia va genera o rutina cu instructiuni detaliate, plus exemple foto/video.

    Aplicatia va oferi statistici relevante pentru fiecare utilizator in parte, care vor fi disponibile si ca flux de date RSS. Mai mult, un clasament al celor mai activi utilizatori va fi disponibil public, inclusiv in formatele JSON si PDF.

  7. PresTo (Presentation Reviewing Tool) / B

    Se doreste crearea unei aplicatii Web care permite specificarea progresului si exprimarea opiniilor/adnotarilor referitoare la prelegerile urmarite ā€“ fizic sau virtual ā€“ de o persoana persoana sau grup de persoane (e.g., o clasa de elevi, o comunitate de practica).

    Sistemul va realiza managementul prezentarilor parcurse, inclusiv organizarea lor pe diverse criterii: categorie, autor, an, nivel (pentru incepatori, intermediari, experti), legaturi cu alte prelegeri sau resurse suplimentare inrudite etc.

    Se vor oferi statistici diverse ce pot fi exportate in formate deschise, textuale si grafice (minimal, CSV si SVG). Diversele anunturi (o persoana a plasat o prelegere interesanta, a fost actualizata o prezentare, modificarea clasamentului celor mai apreciate prelegeri dintr-o anumita arie etc.) vor fi expuse ca flux de stiri RSS.

  8. StoS (Stock Simulator) / B

    Sa se creeze o aplicatie Web de simulare a investitiilor la bursa. Utilizatorii autentificati isi pot crea unul sau mai multe conturi virtuale de tip demo, fiecare pornind de la aceeasi suma de bani, exprimata in minim 2 monede.

    Utilizatorii pot testa diverse strategii de investitie vizualizand rezultatele in timp real. Se va genera, de asemenea, un clasament al celor mai de succes utilizatori, disponibil si ca flux de date RSS.

  9. DeMo (Detention Monitoring Tool) / B

    Sa se dezvolte o aplicatie Web pentru gestiunea vizitelor de care beneficiaza persoanele condamnate la executarea unei pedepse intr-un penitenciar sau intr-o casa de corectie.

    Fiecarei vizite i se vor atasa informatii privind individul ori indivizii care efectueaza vizita -- minimal, se vor considera: identitatea, fotografia, relatia cu condamnatul (ruda, tutore legal, avocat, prieten), natura vizitei.

    De asemenea, vor fi consemnate: data realizarii intrevederii, natura si durata acesteia (e.g., consultare privind recursul procesului, vizita amicala), posibile obiecte/date furnizate condamnatului sau oferite de condamnat vizitatorului/vizitatorilor, rezumatul discutiilor efectuate (daca nu e incalcata confidentialitatea), starea de sanatate si de spirit a detinutului, martorul/martorii la intalnire etc.

    Instrumentul implementat va genera statistici -- documente HTML, CSV si JSON -- vizand vizitele realizate per individ, perioada de timp, in functie de categoria pedepsei savarsite sau alte criterii.

  10. CleA (Cleaning Web App) / B

    Sa se creeze o aplicatie Web cu rol de a facilita activitatile asociate serviciilor de spalatorie publica a unor articole (imbracaminte, covoare, accesorii vestimentare), inclusiv transportul (de) la domiciliu, planificarea (eventual, recurenta), gestiunea resurselor aferente (detergenti, echipamente) si managementul clientilor.

    Se vor realiza rapoarte HTML, CSV si PDF privind comenzile, consumurile, afluxul de utilizatori pentru diverse perioade de timp, zona (e.g., cartier) sau in functie de activitatea prestata.

...