1. TwetPaul Craciun, Florin Parascan, Adrian Peruc si George ScutariuFacultatea de Informatica Abstract. Aplicatie web care ofera un mash-up cu resurse obtinute de pe Twitter(Tweets) si/sau Flickr(imagini) si/sau YouTube(video). Functionalitatea consta, in mare, in cautarea, pornind de la un set de termeni, a resurselor corespunzatoare de pe site-urile mentionate mai sus. Vizualizarea rezultatelor se face folosindu-se serviciile cartograce Google Maps. Cuvinte cheie: Folksonomii, Tezaure, WordNet, Twitter, Flickr, YouTube, Google Maps, Geo-location, Java EE, IceFaces.1 Tehnologii FolositeProiectul a fost realizat folosind tehnologii Java EE, tehnologia IceFaces, javascript, API-urile javapentru WordNet, Google Maps si pentru aplicatiile Twitter, Flickr, YouTube.2 Tehnologii - Detalii de Implementare2.1Java EEMediul de programare folosit pentru realizarea proiectului a fost NetBeans IDE 6.7, care estedisponibil open source. JDK folosit: jdk1.6, dezvoltat de SUN Microsystems si disponibil gratuitconform GNU GPL(la fel ca NetBeans IDE). Serverul pe care l-am folosit: Apache Tomcat 6.0.18.Modulul de Logica aplicatiei este compus din componentele de tip BackingBeans(clase java carerespecta o anumita conventie): FlickrBean, TwitterBean, WordNetBean, YouTubeBean.La apasarea primului buton de cautare( selectedItems: memoreaza ce parti de vorbire sa e considerat setulde termeni in cautarea WordNet. Este setat in momentul in care este apasat butonul Search. 3. private List nouns: memoreaza sinonimele pentru setul de termeni, considerat dreptsubstantiv( Analog pentru adjectives, adverbs, verbs);

2. 4. private boolean nounsChecked: setat true daca utilizatorul a bifat optiunea Substantive,false altfel( Analog pentru adjectivesChecked, adverbsChecked, verbsChecked); 5. private String nounsConcat: memoreaza elementele lui nouns, despartite prin spatii, intr-unobiect de tip String(Analog pentru celelalte 3); 6. private ArrayList tags: memoreaza toate sinonimele.Constructorul Clasei WordNetBean: Este lasat implicit.Metodele Clasei WordNetBean: 1. public String submit(): initializeaza datele membre, apeleaza metoda search(), returneazaString-ul "" 2. public void Search(string keyword): in functie de optiunile bifate, cauta in dictionarulWordNet sinonimele corespunzatoare si populeaza datele: nouns, adjectives, verbs, adverbs,nounsConcat, adjectivesConcat, verbsConcat, adverbsConcat, in functie de optiunile bifate,tags. 3. public String submit2(): apelata cand este apasat butonul tweets: memoreaza Tweets si este static pentrua nu se reinitializa cu dimensiunea 0 si asfel sa nu mai e asat niciun rezultat. 3. private Twitter twitter:folosit pentru autenticare si dialogul cu Twitter.Constructorul : Implicit.Metodele : 1. public String back(): folosit pentru paginarea in pagina welcomeICEfaces.jspx, a tabeluluiin care se aseaza Tweets; 2. public String forward(): folosit pentru paginarea in pagina welcomeICEfaces.jspx, a tabelu-lui in care se aseaza Tweets; 3. public void init(): initializeaza datele membre; 6. 4. public void search(String[] tags): populeaza vectorul tweets cu tweets obtinute dupaocautare Twitter, folosind ca termeni de interogare valorile text din parametrul primit demetoda( e setul de termeni initial, e sinonimele corespunzatoare ale setului de termeni, gasitein dictionarul electronic WordNet). Aceasta metoda este apelata de metoda submit2() a claseiWordNetBean.Query q = new Query(tag);//Setam numarul de tweets de pe o paginaq.setRpp(10);/*Populam vectorul tweets cu rezultatele cautariiFolosim un BackBean Tweet, pentru a memora doar datele care trebuie asate si acestea sa etrimise paginii welcomeICEfaces.jspx pentru a completat tabelul corespunzator */QueryResult qr = twitter.search(q);for (Object o : qr.getTweets()) {Tweet t = (Tweet) o;beans.Tweet tw = new beans.Tweet();tw.setText(t.getText());tw.setCreatedAt(t.getCreatedAt().toString());tw.setImage(t.getProleImageUrl());tweets.add(tw);tweets.add(tw);}2.5 FlickrFlickr este o aplicatie web cu un plan general orientat pe retele sociale folosita pentru partajareade imagini. Imaginile pot insotite de meta-date, oferindu-se informatii suplimentare, cum ar :titluri, tag-uri, locatii si altele. Un utilizator poate sa-si creeze cont, sa incarce poze pe contul sausi sa exploreze pozele de pe site in mod gratuit. Flickr ofera utilizatorilor un API public, acestia avand posibilitatea sa aseze si sa manipulezepozele diverse moduri. Pentru a folosi API-ul este necesar un cont Flickr pentru obtinerea uneichei in vederea autenticarii si comunicarii dintre aplicatia proprie si Flickr. API-ul poate folositpentru scopuri non-comerciale. Pentru folosirea API-ului Flickr am folosit libraria ickrj dispnibila open-source.Beanul FlickrBeanDatele 1. private Flickr flickr: autenticare si dialog cu Flickr; 2. private SearchParameters searchParams: parametrii folositi pentru cautarea pe Flickr; 3. private final static String KEY = "********************": cheia pt comunicarea cuFlickr; 7. 4. private final static String SVR = "www.flickr.com": adresa web a aplicatiei Flickr ; 5. rivate REST rest: pentru a specica tipul comunicarii;Metodele 1. public void flickrInit(): initializarea datelor membre, parametrii de cautare se seteaza casortarea rezultatelor sa se face in ordine descrescatoare in functie de cat de interesante sunt sisa e obtinute doar pozele care au coordonate geograce; 2. public void flickrSearch(String[] tags): cauta si obtine rezultatele cautarii setului deparametri si a sinonimelor acestuia pe Flickr(meta-date asociate obtinute: titlul, latitudine silongitudine, folosite pentru localiarea pe harta, folosind serviciile Google Maps); Apoi apeleazafunctia javascript addMark, aceasta primind ca parametri meta-datele pe care le-am enumeratmai sus plus url-ul pozei, pentru asarea acesteia, in momentul selectarii avatarului corespun-zator pe harta google.//Initializarea obiectului PhotosInterface si executarea cautarii cu tagurile date ca parametri//Libraria FlicrJ ascunde API-ul Flickr bazat pe REST.searchParams.setTags(tags);PhotosInterface photosInterface = ickr.getPhotosInterface();PhotoList photoList = photosInterface.search(searchParams, 20, 1);...//Trimiterea pozelor corespunzatoare, titlurilor si informatiile despre localizarea //geograca fun-tiei addMarkfor (int i = 0; i < photoList.size(); i++) {Photo photo = (Photo) photoList.get(i);GeoInterface g = new GeoInterface(KEY, SVR, REST);GeoData gd = g.getLocation(photo.getId());//Parsari a rezultatelor in cazul in care poza are titlu( eliminarea unor caractere //din rezultatulprimit ca titlu)if(photo.getTitle() != null && !.equals(photo.getTitle())) title = photo.getTitle().replace(, ).replace(, );String ickre = ickr;JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(), addMark( + title +, + gd.getLatitude() + , +gd.getLongitude() + , + photo.getMediumUrl() + , + ickre + ););}2.6 YouTubeYouTube este cea mai populara comunitate video online din lume, in care utilizatorii au posibil-itatea sa vizioneze si sa distribuie videoclipuri. Fiecarui videoclip ii pot corespunde comentariilealtor utilizatori, o harta care aseaza statistici referitoarea la cat de vizionat este videoclipul si la 8. prolul persoanelor care l-au vizionat(unde locuiesc, varsta etc.) si alte informatii.Am folosit API-ul YouTube in scopul comunicarii cu Youtube. Acesta permite programatorilorsa incorporeze functionalitate de pe YouTube in aplicatia proprie. Se pot realiza cautari, incarcaride videoclipuri, se pot crea liste de redare s.a.. Librariile java pentru API-ul YouTube pe care le-amfolosit pot folosite conform licentei Apache 2.0.2.7 Google MapsGoogle Maps a fost pentru prima data anuntat pe Google Blog pe 8 februarie 2005, si a fost local-izat la http://maps.google.com/. Initial suporta doar utilizatorii de Internet Explorer si Mozilla,iar suportul pentru Opera si Safari a fost adaugat la 25 februarie 2005. in prezent, sunt acceptate,Internet Explorer 7.0 +, Firefox 2.0.0.12 +, Safari 3 +, Mozilla 1.8 +, Chrome 0.2 si Opera 8.02 +.Aceasta a fost folosit in versiune beta timp de sase luni inainte de a deveni parte a Google Localpe 6 octombrie 2005.In principal, interfata de baza Google Local (si Google Maps API) este incredibil de intuitiva sisimpla. Confera posibilitatea de a selecta o harta, de a te misca, posibilitatea de marire inauntru siin afara si gasirea zonei pe care doriti sa o vizualizati.Compania Google a creat Google Maps API pentru a permite dezvoltatorilor de a integra GoogleMaps in site-urile lor cu propriile puncte de date. Acesta este un serviciu gratuit, iar in prezent nucontine anunturi, dar Google declara in termeni de utilizare ca isi rezerva dreptul de a asa anunturiin viitor. Prin utilizarea Google Maps API, este posibila incorporarea completa intr-un web-site aGoogle Maps. Programatorilor le este necesar sa solicite o cheie API, care face legatura intre site sidirectorul introdus la crearea cheii. Crearea unei harti cu interfata personalizata necesita adaugareade cod Java Script Google intr-o pagina, apoi folosind functii Javascript sa se adauge puncte de peharta.Cand API a fost prima data lansat, era lipsit de capacitatea de a cauta adrese (geocoding), nece-sitand din partea utilizatorilor adaugarea manuala de puncte in format (latitudine, longitudine).Aceasta facilitate a fost adaugata in octombrie 2006, cand punerea in aplicare a Google Gadgets, afacut Google Maps Geocoding mai simplu de utilizat, necesitand doar o singura linie de cod.Google Maps API este bazat pe JavaScript.Elementul fundamental in orice aplicatie Google Maps API este harta in sine.URL-ul http://maps.google.com/maps?le=api&v=2&key=abcdefg, directioneaza catre loca-tia sierului JavaScript care include toate simbolurile si denitiile de care este nevoie pentru autiliza Google Maps API. Pagina utilizatorului trebuie sa contina un script care sa indice catreaceasta adresa URL, folosind cheia primita la inscrierea pentru API. in exemplu cheie este asata 9. ca abcdefg. De asemenea, se transmite un parametru: sensor, care indica daca aceasta aplicatieutilizeaza un senzor pentru a determina locatia utilizatorului. Pentru ca harta sa se aseze pe o pagina web, trebuie sa se rezerve un loc pentru ea. De obicei,acest lucru se face prin crearea unui tag div si obtinerea une referinte la acest element in documentulObject Model (DOM) a browserului.

In acest exemplu, am denit un tag div numit map canvas si am stabilit marimea acesteia,folosind atributul style. Cu exceptia cazului in care se specica o dimensiune in mod explicit pen-tru harta, utilizand GMapOptions in constructor, harta utilizeaza implicit marimea containeruluipentru a-si seta dimensiunea.var map = new GMap2(document.getElementById(map canvas));Clasa JavaScript care reprezinta o harta este clasa GMap2. Obiecte din aceasta clasa denesc osingura harta pe o pagina. Se pot crea mai multe instante a acestei clase, ecare clasa reprezentando harta diferita. Pentru a crea o noua instanta a acestei clase se foloseste operatorul new dinJavaScript.map.setCenter(new GLatLng(37.4419, -122.1419), 13);map.setUIToDefault();Odata creata o harta, prin intermediul constuctorului GMap2, trebuie initializata. Acesta ini-tializare se realizeaza prin utilizarea metodei setCenter() a hartii. Metoda setCenter() necesita caargumente o instanta a clasei GLatLng, care reprezinta coordonatele unui punct de pe harta, si unnivel de zoom. Aceasta metoda trebuie sa e trimisa inainte de orice alta operatiune efectuata depe harta, inclusiv setarea oricaror alte atribute ale hartii. In timp ce pagina HTML se aseaza, este construit documentul Object Model (DOM), oriceimagini externe si script-urile sunt primite si sunt incorporate in documentul DOM. Pentru ca hartasa e plasata doar atunci cand pagina este incarcata complet, se executa functia care construiesteobiectul GMap2 atunci cand elementul a HTML-ului primeste evenimentul onload. Exista mai multe tipuri de harti disponibile in cadrul API-ului Google Maps. in mod implicit,hartile standard sunt cele rutiere. Cu toate acestea, Google Maps API suporta, de asemenea si altetipuri de harti.Tipuri de harti API-ul Google Maps foloseste urmatoarele tipuri de harti: 1. G NORMAL MAP aseaza harta rutiera standard; 2. G SATELLITE MAP aseaza imaginile capturate prin satelit din API-ul Google Earth; 3. G HYBRID MAP aseaza o combinatie dintre tipul de harta normala si cel pozat din satelit; 4. G DEFAULT MAP TYPES contine o un vector cu cele trei tipuri de harti de mai sus, utilepentru prelucrarea iterativa; 10. 5. G PHYSICAL MAP aseaza o harta bazata pe informatiile despre teren (linii de altitudine).Tipul hartii se poate schimba folosind metoda setMapType() a obiectului GMap2. Urmatorul codschimba tipul hartii in tipul din Google Earth:var map = new GMap2(document.getElementById(map canvas));map.setMapType(G SATELLITE MAP);Event Listeners (Ascultarea Evenimentelor) Evenimente in Google Maps API sunt gestionateprin utilizarea de functii in cadrul spatiului de nume GEvent. Fiecare obiect al API-ului exporta oserie de evenimente. De exemplu, un obiect GMap2 exporta evenimente precum click, dublu-click,evenimente de miscare si altele. Fiecare eveniment se intampla intr-un anumit context, care estevericat prin argumente. De exemplu, evenimentul mousemove se activeaza atunci cand utilizatorulmisca mouse-ul intr-un obiect de tip harta, si depaseste de coordonatele geograce din obiectulGlatLng.Pentru primi noticari a acestor evenimente, se utilizeaza metoda statica GEvent.addListener().Aceasta metoda are ca parametri un obiect, un eveniment pentru care sa asculte, si o functie pentrua o apela in cazul in care se produce evenimentul.Adaugarea unui Overlay (Desenarea De Figuri) Pe Harta Pentru a desena o gura peharta se foloseste un obiect de tip Overlay care este legat de harta prin coordonate de latitudinesi longitudine, deci se misca odata cu harta la miscare si zoom. Obiectele de tip Overlay reectaobiecte, cum ar puncte, linii, arii care sunt adaugate pe harta la coordonatele dorite. Tipuri de asare a obiectelor Overlay in cadrul hartilor:1. Punctele se aseaza pe harta folosind markeri, iar infatisarea lor poate modicata de catre utilizator. Markerii sun obiecte de tipul GMarker si se pot folosi de obiecte de tipul GIcon.2. Liniile pe harta se aseaza folosind obiecte de tipul GPolyline, care reprezinta o colectie de puncte;3. Ariile sunt asate pe harta cu ajutorul poligoanelor. Poligoanele sunt similare cu liniile deoarece si ele constau dintr-o colectie de puncte, cu o bucla inchisa si poate lua orice forma.4. Ferestrele de informatii sunt si ele un tip special de obiecte Overlay.Obiectele de tip Overlay pot adaugate folosind metoda GMap2.addOverlay() si pot scoasefolosind metoda GMap2.removeOverlay().Obiecte de Tip GPolyline Obiecte de tip GPolyline creaza un strat desenat prin linii pe harta. Unobiect GPolyline consta dintr-o serie de puncte si creeaza o serie de segmente de linie care leagaaceste puncte intr-o succesiune ordonata.Desenarea Liniilor Liniile sunt desenate pe harta ca o serie de segmente drepte. Se pot seta culorisi grosimi diferite si se poate alege nivelul de opacitate a liniilor. Culorile trebuie sa e date canumere hexazecimale in stilul formatului HTML, de exemplu se foloseste #0000 pentru culoarearosie. Obiectele de tip Gpolyline folosesc capacitatile de desenare vectori ale browserilor dacasunt disponibile. in Internet Explorer, hartile Google folosesc VML pentru a desena liniile, in altebrowsere se foloseste SVG daca este disponibil. 11. Geocoding (Codare Geograca) Geocoding este procesul de conversie a adreselor (ca de exem-plu Facultatea de Informatica, Universitatea Al. I. Cuza, General Berthelot, 16, IASI 700483,ROMANIA) in coordonatele geograce (cum ar 47.1473105 latitudine si 27.59843 longitudine),care se pot utiliza pentru a plasa markeri sau de pozitii pe harta. API-ul Google Maps include unserviciu de codare geograca care poate accesat direct, printr-o cerere HTTP sau prin utilizareaunui obiect GClientGeocoder.API-ul Google Maps asigura un client de codare graca a adreselor de la input-ul utilizatorului.Obiectul de tip Geocoding Serviciul de codare a adreselor din API-ul Google Maps poate accesatcu ajutorul unui obiect de tip GClientGeocoder. Metoda GClientGeocoder.getLatLng() pentrua converti o adresa (sir de caractere) intr-un obiect de tip GLatLng.3 Descrierea FunctionalitatiiPrima pagina a aplicatiei web este compusa dintr-un banner cu numele aplicatiei: Twet, 2 grupuri,unul format dintr-un textbox si un buton si celalalt dintr-un buton, un grup de 4 checkboxuri(Substantiv, Verb, Adjectiv, Adverb). Cand se navigheaza pe site initial, sunt vizibile: bannerul, textbox-ul si butonul aferent pentrucautarea de Tweets si cele 4 checkbox-uri. 12. Bannerul a fost realizat folosind-se o aplicatie web disponibila gratuit: http://www.pixlr.com/.Acesta reprezinta numele aplicatiei, iar literele care compun cuvantul incadreaza o zona din Roma-nia gasita cu Google Maps.Primul grup format dintr-un textbox si un buton este destinat cautarii de Tweets corespunza-toare setului de termeni si sinonimelor WordNet ale setului. Termenii sunt introdusi de utilizator intextbox, in functie de resursele pe care doreste sa le gaseasca. Sinonimele sunt gasite de aplicatie.Acestea reprezinta sinonimele setului de termeni luati impreuna ca expresie sau ca sintagma si nusinonimele ecarui termen luat separat. Am preferat aceasta varianta, avand in vedere acurateteacautarilor. Astfel am sacricat numarul de rezultate primite, pentru acuratete.Grupul format din 4 checkboxuri este destinat selectarii functiei morfologice pe care o are ter-menul de cautare sau sintagma formata din setul de termeni. Astfel aplicatia va sti ce sinonimetrebuie sa gaseasca in WordNet. Pot selectate mai multe checkboxuri pentru o cautare, indicandu-se astfel faptul ca se doreste ca sintagma sa e considerata ca avand oricare din functiile morfologiceselectate.In momentul in care se introduce un set de termeni de interogare in textbox si se apasa butonulSearch, pe pagina este asat un tabel, format din cel mult 4 linii, ecare pentru partea de vorbirecorespunzatoare. Astfel, pe linia Nouns, vor asate sinonimele pentru set de termeni introdusi,luat ca substantiv. Analog pentru celelalte 3 linii: Adjectives, Verbs, Adverbs, vizibile doar in cazulin care, inainte de a se apasa butonul search, au fost bifate checkbox-urile corespunzatoare. 13. Pentru termenul cat, considerat ca avand oricare dintre cele 4 functii morfologice(toate checkbox -urile sunt bifate), este asat un tabel cu doar 2 linii, deoarece, conform WordNet, cat nu poateindeplini in limba engleza decat functiile de substantiv(noun) si de verb(verb): Multumita utilizarii tehnologiilor ICEfaces si a javascript, pe pagina se face refresh doar inzonele in care este nevoie(folosind tehnici AJAX, incorporate in tehnologia ICEfaces). Stilizarea aplicatiei si designul au fost obtinute folosind stiluri css. 14. Dupa apasarea primului buton de cautare, in afara de rezultatele cautarii pe WordNet, devinevizibil pe pagina si un nou buton: Search on Twitter, Flickr, YouTube. Dupa apasarea acestuia,sub el sunt asate rezultatele cautarii. In stanga o lista de Tweets( ecare asand poza utiliza-torului, un Tweet, si cate minute au trecut de cand mesajul a fost postat), aceasta ind paginatafolosind javascript. In dreapta este asata o harta focusata pe zonele geograce unde au fost gasiterezultatele, acestea ind indicate pe harta cu logo-urile Flickr, respectiv YouTube. Daca un logo seapasa, este asata poza, respectiv este incarcat videoclipul corespunzator intr-un pop-up. 15. Dupa ce a fost selectat un logo Flickr 16. Dupa ce a fost selectat un logo YouTube(intai am facut zoom-in) 17. Prezentare Video Twet(Loading twetvideo.avi) Slow Normal Fast Play/Pause StopAcest videoclip este disponibil si pe www.youtube.com/twetmashup. 18. 4 Bibliograe1. http://profs.info.uaic.ro/~busaco/teach/courses/wade/web.html2. http://wordnet.princeton.edu/3. http://projects.csail.mit.edu/jwi/4. http://twitter.com/5. http://www.flickr.com/6. http://www.youtube.com/7. http://code.google.com/8. http://www.icefaces.org/