Interfete Web

Proiect IE last shot

2009-01-13T11:05:00.001-08:00

Maine va fi prezentarea proiectului la IE. Practic se va evalua acest blog si site-ul http://interfeteweb.pluto.ro/ realizat de echipa noastra. A fost o experienta interesanta si utila. Per total cred ca am reusit sa realizam o treaba destul de buna, desi suntem putin dezamagiti de pozitia in google. Totusi trebuie sa mentionez ca spre deosebire de alte echipe nu am recurs la tertipuri ieftine pentru a atrage trafic. Tot continutul este legat de materia interfete evoluate, avem temele realizate de noi la aceasta materie si indicatii pentru realizarea temelor, care ajuta pe oricine studiaza aceasta materie. Nu imi place sa ma refer la altii dar nu pot sa nu constat cum niste colegi se lauda cu "performantele" lor deosebite dar au pe blog articole despre Mircea Badea si afise electorale ... nici nu vreau sa ma gandesc ce urmeaza ... cred ca presupunem cu toti. Vreau doar sa inchei cu acest subiect prin a mentiona faptul ca un astfel de comportament mi se pare neacademic si nu ar trebui urmat. O sa inchei acest ultim post al meu pe acest blog prin a mentiona inca o data ca acest proiect a fost foarte util si desi nu am am un blog dupa aceasta experienta ma gandesc serios sa imi fac unul.

Tema 3

2009-01-13T10:11:00.000-08:00

Dupa cum probabil ati aflat tema 3 a aparut de ceva vreme si in acest timp a fost rezolvata si notata. Mai departe voi descrie modalitatea mea de rezolvare, care mi s-a parut una dintre cele mai simple abordari (si care foloseste si AJAX pentru obtinerea bonusului de 10% :) ). Voi incepe prin a rezuma enuntul temei: se cere scrierea unui script (JavaScript) care sa permita cautarea si evidentierea potrivirilor pe un site (pentru bonus se cerea si folosirea AJAX).
Pentru usurinta implementarii si evitarea altor probleme site-ul pe care se facea cautarea se presupene a fi pe acelasi server cu scriptul. Dupa cum am spus am ales sa folosesc AJAX pentru o comportare interactiva a scriptului de cautare (si in varianta cu un iframe, fara a folosi AJAX se poate obtine aceeasi interactivitate). Pagina principala de pe care se face cautarea este una foarte simpla ce contine doua textboxuri si un buton. In primul textbox se introduce pagina in care se face cautarea. La pierderea focusului de catre aceste prin intermediul AJAX se incarca pagina ceruta in div-ul de la sfarsitul html-ului. In al doilea textbox se dau cuvintele de cautat iar dupa apasasrea butonului de search scriptul intra din nou in actiune cautand aparitiile cuvintelor. Pagina este data in continuare (se pot observa id-urile date fiecarei zone necesare pentru script):

<html>
<head>
 <title>Search</title>
 <script src="search.js">
 </script>
</head>

<body>
 <form id="searchFrom">
  <span>Adresa la care se cauta: </span>

   <input type="text" id="location" onblur="lostFocus()"/>
  <br/>
  <br/>
  <span>Cuvinte cautate: </span>
  <input type="text" id="keywords" onblur="lostFocus()"/>
  <br/>
  <br/>
  <input type="button" value="Search" id="submitButton" onclick="searchPressed()"/>

  </form>
 <br/>
 <br/>
 <div id="contentDiv">
 </div>
</body>
</html>

Partea care initializeaza obiectul XMLHttpRequest este urmatoarea (este prezentata partea de Firefox pentru a nu complica lucrurile):

// Se creaza obiectul pentru firefox
httpRequest = new XMLHttpRequest();

// Se seteaza functia apelata la modificari ale starii obiectului httpRequest
httpRequest.onreadystatechange = function()
{
var contentDiv = document.getElementById("contentDiv");

// Daca s-a primit raspunsul la cerere atunci acesta se afiseaza
// in div
if(httpRequest.readyState == 4)
{
contentDiv.innerHTML = httpRequest.responseText;
}
}

// Se construieste si se trimite cererea
httpRequest.open("GET", location, true);
httpRequest.send(null);

Se observa setarea unei functii anonime pentru proprietetea onreadystatechanged. Aceasta este apelata automat ori de cate ori exista o schimbare in starea (readyState) cererii Http trimise cu ajutorul JavaScript. Ne intereseaza starea 4 adica aceea care apare in momentul sosirii raspunsului (in cazul nostru a continutului paginii in care se face cautarea). Dupa cum se vede mai sus se seteaza continutul html al div-ului cu id-ul contentDiv la valoarea campului responseText al obiectului XMLHttpRequest in care se va afla exact pagina ceruta. In ultimile doua linii dupa crearea si configurarea obiectului XMLHttpRequest se trimite un request catre server in care se pune adresa paginii cerute (location).
La apasarea butonului de Search se executa functia searchPressed(). Aceasta se ocupa cu identificarea potrivirilor si colorarea acestora. Erau mai multe variante aici printre care folosirea expresiilor regulate sau cautarea manuala (varianta mai din topor). Binenteles am ales ultima varianta folosind functii precum: indexOf, lastIndexOf, substr, charAt. Nu voi mai descrie cum s-a facut cautarea in text pentru ca nu are rost (presupun ca toata lumea poate cauta text folosind metodele de mai sus). Singurul lucru de mentionat aici este ca trebuie avuta grija sa se sara peste textul interior tagurilor si continutul blocurilor dpeciale de genul script. In rest functia identifica fiecare cuvant in parte din text si face o copie a paginii in care se cauta adaugandu-se taguri pentru modificarea culorii zonelor care s-au potrivit la cautare (prin folosirea unui tag de genul span cu un stil specificat sau font).
Pentru mai multe informatii pot ajuta chiar sursele tuturor participantilor la acest proiect ce se afla aici.

AJAX

2009-01-02T02:11:00.000-08:00

AJAX (Asynchronous JavaScript and XML) reprezinta un grup de tehnici de dezvoltare a aplicatiilor web. Este folosit pentru a crea aplicatii web interactive sau cum se obisnuieste sa se spuna, RIA (Rich Internet Applications). AJAX a fost popularizat de catre Google prin intermediul Google Sugest.
AJAX se foloseste in principal pentru a spori interactivitatea paginilor web. Prin cresterea interactivitatii, acestea se apropie ca functionalitate si prezentare de cele "offline" (existente pe desktopuri).
Daca avem pe o pagina web un control care ne prezinta o informatie dinamica (un progress bar de exemplu, pentru o operatie care se desfasoara pe serverul web) aceasta trebuie actualizata cat mai des posibil, in scopul oferirii interactivitatii dorite. Daca se foloseste un limbaj server-side, fara a folosi tehnici AJAX, atunci la diverse momente ar trebui reincarcata intreaga pagina web de pe server, provocand intarzieri sesizabile, scazand drastic interactivitatea oferita de aplicatia web, toate acestea numai pentru un singur control (chiar daca restul paginii ramane nemodificat).
AJAX insa ne ofera posibilitatea de a modifica numai anumite regiuni ale paginii web (in acest caz numai controlul). Acest lucru implica binenteles comunicarea cu serverul web, dar aceasta se realizeaza numai pentru a descarca informatiile referitoare la control care se modifica, datele transmise fiind mult mai mici decat cele necesare pentru o intraga pagina web.
In continuare voi prezenta pe scurt modul in care AJAX reuseste sa actualizeze numai anumite zone ale unei pagini web.
Dupa cum am mai spus AJAX in sine se bazeaza pe mai multe tehnologii web, dar in special pe JavaScript. Dupa cum s-a vazut in postul trecut JavaScript este un limbaj de scripting, client-side. Prin intermediul acestuia putem sa avem acces la orice element al unei pagini web. Cum AJAX poate actualiza anumite elemente ale unei pagini astfel accesul la acestea se face cu JavaScript. Deci este rezolvata problema accesului la reginuile unei pagini. Mai departe trebuie rezolvata problema informatiei care duce la actualizarea acestora. Acesta se realizeaza printr-un request special realizat catre serverul web. Un astfel de request se poate realiza prin intermediul unui obiect JavaScript: XMLHttpRequest. Acest obiect permite comunicarea dintre JavaScript si serverul web fara a fi necesara incarcarea intregii pagini web. Prin intermediul lui se poate face o cerere pentru o parte a paginii web in mod asincron. Astfel regiunea poate fi actualizata numai in momentul in care vine un response de la server, iar pagina web nu va ramane blocata in asteptarea raspunsului. In momentul in care vine raspunsul se stie ce obiect urmeaza a fi actualizat din pagina, acesta fiind accesat prin JavaScript si modificat in concordanta cu raspunsul primit de la server. Unui obiect de tipul XMLHttpRequest i se poate atasa o metoda
care va fi executata ori de cate ori se modifica ceva in starea obiectului:

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Se executa cand vine raspunsul de la server
document.myForm.time.value=xmlHttp.responseText;

}
}

In exemplul de mai sus se considera xmlHttp de tipul XMLHttpRequest. La proprietatea onreadystatechanged se ataseaza o functie. Aceasta va fi executata de fiecare data cand se modifica starea obiectului (acesta are 5 stari in total. Pentru mai multe detalii: http://www.w3schools.com/ajax/ajax_xmlhttprequest.asp). Starea 4 reprezinta sosirea unui raspuns. Acesta poate avea orice forma: text, xml, html... si este interpretat in interiorul functiei de mai sus. Acolo poate fi modificata pagina web in zona necesara. In exemplul de mai sus valoarea unui camp text este actualizata cu raspunsul venit de la server. Cererea catre serverul web se poate face in felul urmator:

xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

Se observa ca se efectueaza o cerere catre pagina time.asp in acest caz. Serverul web va obtine raspunsul generat de scriptul asp si il va trimite catre client. Se observa ca in functie de ce vrem sa actualizam in pagina putem sa avem scripturi separate care sa intoarca exact ce ne trebuie.
In concluzie AJAX reprezinta un set de tehnologii (JavaScript, XML, HTML, ...) ce permite dezvoltarea aplicatiilor Web 2.0, oferind o interactivitate ridicata web-ului.

JavaScript

2008-12-24T04:15:00.000-08:00

JavaScript este, dupa cum reiese si din numele sau, un limbaj de scripting. A aparut in 1995 fiind creatia lui Brendan Eich, care in aceea vreme lucra la Netscape (pe atunci cel mai popular browser). Denumirea de Java din numele limbajului nu are nici o treaba cu produsul celor de la Sun. Aceasta a fost adaugata din ratiuni strict legate de marketing.
Pana la aparitia JavaScript codul paginilor web dinamice era rulat numai pe server clientul urmand sa primeasca inapoi o pagina HTML modificata coresounzator. Acest lucru implica faptul ca un client facea o cerere catre un server, acesta prelucra cererea (executa orice cod dinamic), forma un raspuns continand pagina HTML generata anterior si o trimitea la client. Astfel o operatie simpla de validare a unui camp text (de exemplu verificarea ca acesta sa contina ceva) necesita un drum la server si inapoi. Daca pagina primita era destul de mare combinat cu niste conexiuni slabe la Internet, se pierdea timp si interactivitatea paginii web devenea din ce in ce mai scazuta.
Aparitia limbajului JavaScript a permis posibilitatea crearii paginilor dinamice al caror continut se modifica prin rularea de cod pe masina clientului. Codul era evident scris in JavaScript si trebuia ca browserul folosit sa cunoasca acest limbaj. Acum pentru verificarea unui camp text din pagina codul putea fi rulat de browser pe client fara a mai necesita o cerere catre server. Astfel a aparut termenul de client-side scripting (script rulat pe masina clientului) diferit de server-side scripting (script rulat pe server). Singura problema era ca browserul folosit sa cunoasca acest limbaj. Aceasta s-a rezolvat de la sine datorita cresterii masive in popularitate a JavaScript-ului, fiecare nou producator de browsere integrand-ul in produsul sau. Desigur nu se poate face orice cu JavaScript multe operatii necesitand executarea codului pe server. De aceea in prezent sunt folosite pagini web ce contin scripturi client-side si server-side.
Sintaxa JavaScript este destul de simpla. Variabilele nu au tipuri, din acest punct de vedere acesta nefiind un limbaj foarte type-safe, constructiile fiind uneori destul de rudimentare. Este case-sensitive. Daca se intalneste de exemplu o functie necunoscuta executa este oprita in acel punct Blocurile sunt delimitate de binecunoscutele acolade din alte limbaje ({}). JavaScript suporta si niste tipuri primitive de clase si de asemenea un obiect central in acest limbaj este document. Cu ajutorul acestuia se pot obtine referiri la toate obiectele existente in pagina web (de la controale la div-uri). Daca de exemplu se seteaza proprietatea id pentru un control la valoarea "control", se poate obtine o referinta la acesta astfel:
var ctrl = document.getElementById("control");
In functie de controlul obtinut se pot accesa si alte proprietati. De exemplu pentru un control de tipul text, continutul acestuia poate fi extras prin intermediul proprietatii value.
var content = ctrl.value;
Pentru un div continutul poate fi extras prin innerHTML in loc de value.
O alta utilizare pentru JavaScript este posibilitatea tratarii evenimentelor. Astfel se poate asocia unui buton un eveniment reprezentat de o functie JavaScript. Cand acel buton este apasat va fi executata functia. Asocierile dintre evenimente si functiile JavaScript se fac in HTML in momentul definirii componentelor. De exemplu in cazul unui buton:
<input type="button" onclick="functieJavaScript()">
Exista binenteles mai multe evenimente posibile pentru fiecare control existent.
JavaScript a fost readus in prim plan printre limbajele de client-side scripting atentie (nu ca pana acum nu ar fi fost) de aparitia tehnologiei AJAX ce permite incarcarea selectiva a elementelor unei pagini web prin intermediul JavaScript. Despre aceasta intr-un alt post.

A aparut enuntul temei 3

2008-12-02T21:40:00.000-08:00

Pentru cei interesati a aparut enuntul temei 3 la http://interfeteweb.pluto.ro/tema3.html. Detalii despre rezolvare vor aprea in curand.

Aventura mea cu CTTE

2008-12-02T21:38:00.000-08:00

Pentru cei care au trait sub o piatra pana acum si inca nu stiu :D, CTTE sau The Concurrent Task Tree Environment o aplicatie pentru modelarea interfetelor grafice si poate fi gasita la http://giove.cnuce.cnr.it/ctte.html. Despre descrierea temei a scris mai jos colegul meu Florian motiv pentru care ma voi referi in acest post mai mult la "aventura mea" (a se citi probleme intampinate) cu CTTE in incercarea de a realiza tema 2 la interfete evoluate. In primul rand trebuie mentionat un lucru foarte important aplicatia este free deci nu trebuie sa fim surprinsi daca gasim diverse buguri. In primul rand in momententul deschiderii aplicatiei va ramane deschis si un "command prompt", pe care va recomand cu caldura sa il inspectati destul de des deoarece s-ar putea sa va treziti cu o groaza de exceptii aruncate acolo moment in care salvati si restartati aplicatia. In primu rand in momentul in care deschizi aplicatia poti observa un norisor care reprezinta un task complex (ideea de norisori nu prea e pe gustul meu deoarece imi creaza impresia de aplicatie neprofesionista dar trecem peste asta). Ce m-a surprins inca de la inceput a fost faptul ca daca dai click pe diverse butoane nu iti nu intampla absolut nimic (un mesaj de eroare mi se parea absolut natural). Am lasat deoparte aceste mici neajunsuri care nu ma mira la o aplicatie free si am inceput sa creez graful de task-uri. La un moment dat m-am trezit inundat de exceptii in command prompt motiv pentru care am salvat rapid si am restartat aplicatia (de fapt a fost nevoie sa incerc sa salvez in vreo 3 fisiere diferite pentru ca nu salva bine...). Desi a mai crapat de cateva ori am avut rabdare si cu putina perseverenta am reusit sa definitivez tema (bineinteles ca mi-a mai crapat de cel putin 5 ori...). Dupa realizarea temei pot spune ca ideea ei nu a fost rea. Am invatat sa modelam o interfata lucru care pare destul de natural la o materie care se numeste "interfete evoluate". Legat de erorile aparute pot spune ca in 5 ani de facultate am avut ocazia sa lucrez cu tot felul de aplicatii care crapau din te miri ce (chiar acum cateva zile in cadrul laboratorului de LPD mi-a crapat linuxul in timp ce incercam sa instalez netbeans ..., sau cazul xilinx ise care desi costa destul crapa des) parca totusi ctte a intrecut orice limita. In concluzie in opinia mea ideea temei a fost buna dar aplicatia folosita mi s-a parut cam slaba.
P.S.: E 1 jumate noaptea, cred ca o sa am cosmaruri cu CTTE .......

Liviu Matei

The Concurrent Task Tree Environment (CTTE) - probleme

2008-12-02T10:14:00.000-08:00

Tema 2 la IE (http://interfeteweb.pluto.ro/tema2.html) se referă la proiectarea interfeţei utilizatorului uman cu siteul blogger.com utilizând CTTE. CTTE (The Concurrent Task Tree Environment) este o unealtă care permite editarea şi simularea modelelor orientate pe sarcini, făcând astfel posibilă descrierea interfeţei cu utilizatorul înainte ca aplicaţia propriu-zisă să fie gata.
Interfaţa cu utilizatorul are o structură sub formă de arbore. Elementele arborelui sunt sarcinile, care sunt legate între ele prin diverse relaţii.
CTTE se găseşte la adresa http://giove.cnuce.cnr.it/ctte.html. Pentru a putea folosi ultima versiune, este nevoie de Java 1.5, iar calea către fişierul java.exe trebuie adaugată în PATH. Pentru rulare se foloseşte ctte.bat.
Nu voi descrie aici modul de folosire, deoarece acesta se găseşte pe site-ul produsului, ci voi semnala problemele întâlnite şi voi da anumite sfaturi pentru a lucra ma uşor cu acest program.
Uneori funcţia de salvare nu funcţionează corespunzător, astfel că la deschidera unui fişier salvat anterior ultimele noduri adăugate lipsesc. Pentru a evita astfel de surprize Putem încerca să salvăm cât mai des. La adăugarea unor noi noduri în arbore nodurile anterior adăugate iau nişte poziţii contorsionate. Acest neajuns se poate corecta într-o anumită măsură apăsând butonul "Justify Tree" sau manual dacă suntem mai pretenţioşi. Pentru a muta/copia un subarbore trebuie să selectăm "Cut/Move SubTree". Dacă selectăm "Cut/Copy Selection", la lipire toate nodurile din subarborele respectiv va fi transformate în fraţi. Dacă vrem să mutăm o sarcină trebuie să facem acest lucru foarte încet, altfel o vom pierde pe drum. Uneori când vrem să simulăm un model, programul va da nişte erori, în condiţiile în care verificarea modelului nu dă nicio eroare. Soluţia este închiderea CTTE şi repornirea lui. O alta problema e cand arborele nu mai arata a arbore :) si nodurile incep sa dispara unul dupa altul.
Cu siguranţă ideea acestui program este foarte bună şi cu puţină răbdare putem trece peste aceste probleme de implementare, care sperăm că vor fi corectate la versiunile următoare.

Stan Alexandru

Ce este Web 2.0 ?

2008-12-02T09:29:00.000-08:00

Un posibil raspuns la intrebarea "Ce este Web 2.0 ?":

Tema 2

2008-12-02T07:13:00.000-08:00

Tema 2, dupa cum putei afla pe http://interfeteweb.pluto.ro/tema2.html, se refera la descrierea interactiunilor dintre un utilizator si interfata siteului www.blogger.com din punctele de vedere al utilizatorului (cititorul de blog) si al administratorului unui blog.
Pentru fiecare din acestia s-au descris niste scenarii pentru urmatoarele activitati:
- utilizator : vizualizare post,adaugare comentariu, vizualizare lista de posturi, vizualizare categorii
- administrator : adaugare post, adaugare link in blogroll, editare link

Voi lua pe rand fiecare scenariu enumerand pasii necesari pentru completarea acestuia. Intr-un post ulterior se va prezenta semnificatia CTTE si “mediul de lucru” in care a fost rezolvata tema subliniind unele din “facilitatile” acestuia.

Utilizator

Toate actiunile utilizatorilor au loc in pagina de start a unui blog.
- vizualizare lista post : pentru aceasta actiune am presupus (pentru ca enuntul nu este foarte clar in a preciza mai exact ce inseamna sa vizualizezi posturile) ca utilizatorul vrea sa vada posturile dintr-o anumita luna a unui an. Pasii sunt urmatorii: userul selecteaza un an din arhiva de bloguri -> se afiseaza lunile din anul respectiv care au posturi -> userul selecteaza o luna din lista -> sunt afisate posturile.
- vizualizare categorii : aici am presupus ca se folosesc tagurile din posturi. Pasul : userul da clik pe un tag ce reprezinta o categorie -> se afiseaza posturile din acea categorie.
- vizualizare post : userul poate incepe fie prin pasii precedenti fie direct din pagina de start a blogului. Pasul : userul da clik pe un post -> se afiseaza postul.
- adaugare comentariu : se pleaca de la un post deja afisat. Pasii : se da click pe trimtere comentariu -> se introduce comentariul -> se introduce codul de verificare -> se stabileste identitatea intre doua tipuri (BloggerID -> se introduc user si parola; OpenID -> alegere tip id -> alegere nume)

Administrator

Toate actiunile au loc din pagina de administrare in urma logarii administratorului.
- adaugare post : se alege postare noua -> editare postare -> introducere titlu -> publicare
- adaugare link in blogroll : se alege optiunea aspect din pagina de administrare -> alegere editare blogroll -> alege adauga -> introducere URL -> click pe adauga -> click pe salvare
- editare link : aici am presupus ca se editeaza un link din blogroll. Pasii : se alege optiunea aspect din pagina de administrare -> alegere editare blogroll -> alege redenumire -> modificare nume -> click pe salvare redenumire -> click pe salvare.

CONCURS

2008-11-25T06:12:00.000-08:00

Pe http://interfeteweb.pluto.ro s-a publicat un concurs ale carui reguli le gasiti aici.

Tema 1 - Take 4

2008-11-13T04:30:00.000-08:00

Pentru a realiza prima temă la IE, am ales reţeaua youtube şi limbajul de programare Java. Am folosit API-ul pus la dispoziţie de Google.
Pornind de la un id de utilizator am fomat doi arbori având ca rădăcină acel utilizator: arborele de prieteni şi arborele de comentatori. Pentru a obţine prietenii unui utilizator se trimite o cerere HTTP la http://gdata.youtube.com/feeds/api/users/utilizator/contacts, de unde se primeşte un fişier XML, pe care l-am parsat.
Pentru a obţine comentatorii unui utilizator, se obţin mai întâi fişierele video ale lui printr-o cerere la http://gdata.youtube.com/feeds/api/users/utilizator/uploads, apoi pentru fiecare fişier video se obţin comentariile printr-o cerere la http://gdata.youtube.com/feeds/api/videos/video/comments. Din fişierul XML primit am extras comentatorii.
Reţeaua youtube formează un graf şi pentru a evita ciclurile am făcut câte un vector în care reţin prietenii şi comentatorii. Înainte de a adăuga un prieten sau comentator verific dacă este deja în vector.

Alexandru Stan

Tema 1 - Take 3

2008-11-13T04:22:00.000-08:00

Prima temă la Interfete Evoluate a constat în analiza unei comunităţi web, mai precis în extragerea de informaţii privind relaţiile sociale din cadrul unei astfel de comunităţi. Pentru enunţul complet al temei vizitaţi http://interfeteweb.pluto.ro. Primul pas a fost să caut o reţea socială care să-mi pună la dispoziţie un API eficient şi uşor de utilizat, evitând astfel parsarea paginilor HTML. După ce am luat în considerare mai multe reţele sociale m-am oprit asupra comunităţii Twitter care pune la dispoziţie programatorilor un API ce aderă la principiile de design REST (Representational State Transfer).

Pentru temă am avut nevoie de metoda care furnizează informaţii despre prietenii unui utilizator Twitter, informaţii ce se pot obţine cu usurinţă printr-o cerere HTTP de tip GET catre un URL de forma http://twitter.com/statuses/friends/{user}.{format}. În acest url {user} va fi inlocuit cu ID-ul sau numele utilizatorului pentru care se doreşte lista de prieteni, iar {format} cu xml sau json, în funcţie de ce format de date se doreşte să aibă răspunsul. Spre deosebire de metodele similare puse la dispoziţie de API-urile altor reţele sociale, aici nu este nevoie nici de autentificare şi nici de obţinerea unui API-key.

Răspunsul conţine lista cu prietenii utilizatorului dat precum şi câteva informaţii despre fiecare. În cazul în care se alege formatul XML un răspuns are următoarea structură:

<users type="array">
<user>
<id>id_utilizator</id>
<name>nume</name>
<screen_name>nume_utilizator</screen_name>
<location/>
<description/>
<profile_image_url>
http://static.twitter.com/images/default_profile_normal.png
</profile_image_url>
<url/>
<protected>false</protected>
<followers_count>3</followers_count>
<status>
<created_at>Mon May 12 13:17:11 +0000 2008</created_at>
<id>id_user</id>
<text>Testing twitter in web purposes..</text>
<source>web</source>
<truncated>false</truncated>
<in_reply_to_status_id/>
<in_reply_to_user_id/>
<favorited>false</favorited>
</status>
</user>
.
.
.
</users>

Informaţia de interes ce trebuie extrasă din răspunsul XML este numele de utilizator specificat în interiorul elementului screen_name. Obţinându-se numele utilizatorilor din listă se pot forma URL-urile pentru profil şi pentru alte cereri care să întoarcă prietenii acestor utilizatori. URL-ul profilului are următorul format: http://twitter.com/{nume_utilizator}.
După ce am stabilit ce am de făcut, am trecut la implementare. Am ales limbajul python pentru că este simplu, puternic şi elegant şi împreună cu minidom, un parser de XML cu funcţionalitate de bază, se pretează perfect la cerinţele temei. Cum reţeaua socială analizată are structura unui graf, parcurgerea se face recursiv, pornind de la nodul corespunzător utilizatorului specificat. Pentru a nu se repeta utilizatorii la care se ajunge pe mai multe căi, s-a menţinut în memorie o mulţime cu utilizatorii vizitaţi. Ar fi de preferat ca gradul relaţiilor afişate în fişierul cu rezultate să fie cat mai mic (să se ajugă la un prieten pe o cale mai scurtă), iar din acest motiv s-ar preta o parcurgere în lăţime a grafului (BFS).

Liviu Frateanu

Tema 1 - Take 2

2008-11-04T11:52:00.000-08:00

Pentru această temă am ales reţeaua socială hi5 (http://www.hi5.com) şi limbajul C#. Pornind de la un profil existent pe hi5 a trebuit să realizez o ierarhie a prietenilor cu rădăcina în profilul respectiv (pentru mai multe detalii vizitaţi pagina http://interfeteweb.pluto.ro unde se află şi enunţul temei). De la început am avut de optat între două variante: să parsez în HTML sau să folosesc un API existent pentru hi5. Evident, am ales varianta a doua. O problemă cu acest API este că se află încă în stadiu BETA şi astfel documentaţia este destul de săracă şi de multe ori incompletă (API-ul folosit se găseşte la adresa http://api.hi5.com).
La adresa de mai sus se găsesc şi descrieri WSDL pentru nişte servicii web ce ar putea fi folosite pentru a extrage informaţii din hi5. Totuşi, am ales să folosesc modelul REST deoarece oferă o metodă foarte simplă de a afla prietenii unui utilizator hi5 cunoscând numai id-ul acestuia. Metoda folosită este descrisă destul de sumar aici. Astfel, dacă luăm un id pentru un utilizator şi extragem răspunsul de la cererea făcută la adresa: http://api.hi5.com/rest/profile/foaf/[id] (evident [id] se inlocuieşte cu un id valid) obţinem un XML. FOAF reprezintă Friend Of A Friend. Răspunsul la o cerere ca cea de mai sus este un XML ce respectă protocolul FOAF. (http://www.foaf-project.org/). Un exemplu de răspuns XML este următorul:

<rdf:RDF>
<foaf:Person rdf:nodeId="me">
<foaf:nick>xxxxx</foaf:nick>
<foaf:givenName>xxxxxx</foaf:givenName>
<foaf:surName>XXXX</foaf:surName>
<foaf:mboxSha1Sum>a71850698cf0d7cfac95742de871c58817d45341</foaf:mboxSha1Sum>
<foaf:img rdf:resource="http://photos2.hi5.com/......"/>
<foaf:weblog rdf:resource="http://www.hi5.com/profile/displayJournal.do?userid=[id]"/>
<foaf:gender>female</foaf:gender>
<lang:masters>ro</lang:masters>
<foaf:homePage rdf:resource="http://www.hi5.com/friend/profile/displayProfile.do?userid=[id]"/>
<foaf:knows>
<foaf:Person>
<foaf:nick>XXXXX</foaf:nick>
<rdfs:seeAlso rdf:resource="http://api.hi5.com/rest/profile/foaf/[idnick1]"/>
</foaf:Person>
</foaf:knows>
<foaf:knows>
<foaf:Person>
<foaf:nick></foaf:nick>
<rdfs:seeAlso rdf:resource="http://api.hi5.com/rest/profile/foaf/[idnick2]"/>
</foaf:Person>
</foaf:knows>

Se poate observa din XML-ul de mai sus că se pot extrage informaţii despre utilizatorul pentru care s-a efectuat cererea (nick, nume, prenume, poză, pagina profilului, etc.). Printre informaţiile importante se regăsesc şi prietenii acestui utilizator (nickul lor şi adresa pentru FOAF-ul lor). Din FOAF-ul prietenului putem să extragem usor id-ul acestuia. Dacă avem nevoie de pagina cu profilul unui utilizator se observă că poate fi obţinută ştiind id-ul acestuia: http://www.hi5.com/friend/profile/displayProfile.do?userid=[id].
Având REST-ul şi FOAF-ul la îndemână putem să construim o ierarhie plecând de la id-ul unui utilizator. Ierarhia care ne interesează în mod sepecial are forma unui arbore, în rădăcină aflându-se userul de la care se porneşte. Însă ierarhia unei reţele sociale de genul hi5 este în mod normal un graf ale cărui legături se pot afla prin intermediul cererii REST descrise mai sus. Pentru a obţine un arbore o parcurgere DFS sau BFS ar fi necesară. Eu am folosit o parcurgere DFS oprindu-mă la nivelul maxim până la care se face căutarea (nivel dat într-un fişier de configurare). Pentru astfel de parcurgeri, în general trebuie ţinută evidenţa nodurilor prin care s-a trecut pentru evitarea ciclurilor. Pentru simplitate am folosit o listă în care am introdus id-urile pentru nodurile prin care am trecut, însă pentru o adâncime mare a arborelui este foarte posibil să apară mulţi utilizatori hi5 cu mii de prieteni care la rândul lor au mii de prieteni şi pot exista probleme legate de utilizarea memoriei.

Florian Popa

Tema 1 - Take 1

2008-11-04T06:08:00.000-08:00

Tema mea la IE ... Am ales să fac tema în Java deoarece este unul dintre limbajele mele preferate şi în plus mai lucrasem cu fişiere XML în Java şi astfel mi-a fost mai uşor să realizez tema. Comunitatea pe care am ales-o este Flickr, deoarece dispune de un API destul de bun. Prima problemă pe care am întâmpinat-o a fost prezenţa unui parametru obligatoriu în invocarea oricarui serviciu din API, api_key, pentru care părea că trebuie făcuta o cerere de obţinere. Am încercat un workaround prin introducerea unui api_key preluat din url-ul folosit pentru invocarea serviciului din browser. Din păcate s-a dovedit că această cheie este valabilă doar o zi, motiv pentru care m-am văzut nevoit să fac o cerere de api_key la http://www.flickr.com/services/api/misc.api_keys.html . Această cheie vine imediat (în cazul în care alegeţi non comercial use) şi funcţionează perfect. Din acest motiv în versiunea de program ce va fi introdusă pe site NU se va afla un api_key iar cei care vor dori să ruleze aplicaţia vor fi nevoiţi să obţină un api_key pe care să îl introducă în membrul api_key. Tot din acest motiv nu am furnizat un fişier executabil pentru aplicaţie. Astfel, după ce se introduce api_key se va putea compila uşor aplicaţia folosind comanda "javac MainClass.java" şi apoi rula cu comanda "java MainClass" (tema va veni şi cu un script ant pentru cei ce vor dori să apeleze la această metodă de build&run).

O altă problemă apărută constă în apariţia legăturilor circulare. Cel mai simplu astfel de exemplu este (X are prieten pe Y, dar şi Y îl are prieten pe X). Practic, în acest caz se va afişa în lista de prieteni ai lui X pe nivel 2 şi X. Sau se poate ajunge ca o persoană să fie prieten al unei alte persoane pe mai multe niveluri. Practic legăturile între persoane formează un graf, iar în cazul nostru ar trebui să avem un arbore pe care să îl parcurgem în adâncime până la un anumit nivel.
O soluţie este salvarea tuturor persoanelor afişate până la un anumit moment într-o listă, iar în momentul în care se ajunge la o nouă persoană să se verifice dacă aceasta apare deja în listă. Această soluţie nu este fezabilă deoarece pentru un număr foarte mare de persoane (în general în comunităţile gen hi5, flickr fiecare user are multe contacte şi începând de la un anumit nivel de parcurgere numărul profilelor devine enorm) este posibil să se depăşească capacitatea totală a listei.

În rest aplicaţia foloseşte metodele "getPublicList" şi "getInfo" din API-ul Flickr pentru a obţine lista de prieteni ai unui utilizator şi respectiv url-ul către profilul unui utilizator. Aceste metode întorc un XML care poate fi parsat relativ uşor.

Liviu Matei

Tema 1 - Take 0

2008-11-04T06:07:00.000-08:00

S-a publicat (şi realizat :P) tema 1 la IE. După cum am promis vom publica rezolvările tuturor membrilor echipei (după ce va expira deadline-ul, bineînţeles :P) pe site-ul http://interfeteweb.pluto.ro la pagina Teme. Tot acolo se găseşte şi cerinţa acestei teme. Totuşi, până atunci ne-am gâdit că ar fi bine ca fiecare să vorbească despre modul în care a rezolvat tema, ce probleme a întâmpinat (dacă a întâmpinat :)) şi eventual anumite hint-uri. În cazul acestei teme vom vorbi în primul rând de API-ul folosit şi de modul în care a fost utilizat.

Despre blog, IE, echipă şi altele ... (o mare varză)

2008-11-02T03:18:00.000-08:00

În primul rând bine aţi venit pe blogul Interfete Web. Acesta este un blog mai special deoarece a fost creat ca parte dintr-un proiect la materia Interfete Evoluate din programa Facultăţii de Automatică şi Calculatoare din UPB. La acest proiect participă o echipă de 4 studenţi la A&C: Alex, Liviu, Liviu şi Florian (ALLF - noi :) ).
Proiectul va fi format din 2 părţi: un site prin intermediul căruia vor fi oferite teme realizate de noi la materia Interfete Evoluate (site-ul se află la adresa http://interfeteweb.pluto.ro/ aşa că vizitaţi-l cât mai des). O altă componentă importantă a proiectului este acest blog prin intermediul căruia vom publica diverse articole legate de web şi nu numai :D (aşa că fiţi cu ochii pe blog fiindcă nici nu ştiţi ce pierdeţi :P). Printre articolele legate de web vor fi şi cele care vor descrie rezolvarea temelor propuse la materia IE, în variantele celor patru autori.