Tema 3 - Gadget-uri in Javascript si Ajax
Se cere sa se implementeze o componenta Javascript la alegere dintre cele ce vor fi prezentate mai jos. Dupa ce sunt prezentate la laborator si dupa ce trece termenul de predare al temei, scripturile vor fi integrate pe site-ul proiectului. Ca si la tema precedenta 2 studenti care lucreaza la acelasi proiect nu vor putea sa-si aleaga aceeasi tema. Fiecare tema are 2 variante - varianta mai simpla presupune numai utilizarea javascript si o tema facuta perfect poate obtine maxim 7p din 10. Varianta mai complexa presupune si utilizarea unui limbaj server-side (java, asp, php, etc.) + ajax si poate aduce 14 (tot din 10) .
Temele sunt urmatoarele:
- implementarea unui calendar folosind YUI
- varianta simpla - numai javascript: In calendar trebuie sa apara cu o culoare diferita datele cand au fost adaugate posturi pe blogul proiectului si la click pe una din zilele astfel subliniate sa se deschida pagina cu postul respectiv. maparea intre posturi linkuri si date se face static folosind un fisier de configurare.
- acelasi comportament dar maparea intre posturi, linkuri si date se face dinamic folosind o baza de date si Ajax pentru incarcarea url-ului numai la click
- Implementare
- contor (pe langa cel de la trafic sau de la google analytics)
- varianta simpla ce foloseste numai javascript: la accesul pe site este afisat tipul browserului utilizatorului si de cate ori a mai accesat site-ul (se folosesc cookies si obiectul navigator w3schools tutorial )
- varianta complexa: se foloseste ajax pentru a pastra vizitele intr-o baza de date si se actualizeaza live pe site (o data la 30 de secunde) numarul de pagini vizitate si de vizitatori unici
- topul articolelor
- varianta simpla - javascript:intr-o pagina a site-ului este prezentata lista cu titlurile articolelor publicate pana in acel moment. utilizatorul poate sa ordoneze articolele respective dupa preferinta si la sfarsit apasand pe butonul "save" sa reafiseze intr-un tabel linkurile in ordinea data de utilizator
- varianta complexa:la sfarsitul ordonarii utilizatorul sa-si salveze alegerea si folosind AJAX sa i se afiseze lista articolelor in ordinea preferintelor globale ale utilizatorilor (se va folosi un sistem de scor - de exemplu primul primeste 10p, al doilea 8, al treilea 6, etc.) si scorul fiecaruia
- Implementare
- autocomplete (exemplu: Google Suggest)
- varianta simpla - javascript:intr-un input de tip text se tiparesc caractere. Pe masura ce se tiparesc se cauta articolele dupa titlu intr-o lista initializata static si se ofera utilizatorului o lista cu articolele al caror titlu incepe cu caracterele tastate. dupa selectarea articolului se afiseaza linkul catre articolul respectiv.
- varianta complexa:acelasi comportament dar cautarea se face intr-o baza de date folosind Ajax.
- implementarea unui select cu numele participantilor la proiect
- varianta simpla - javascript:la selectarea unuia dintre participanti se afiseaza un tabel cu linkuri catre toate temele sale (dintr-o lista initializata static)
- varianta complexa:acelasi comportament dar cautarea se face intr-o baza de date folosind Ajax.
