Viitorul interfetelor utilizator (addendum)

Inca o idee promitatoare este aceasta:

Viitorul interfetelor utilizator

De la creearea PC-urilor interfata utilizator-computer a progresat enorm. Am pornit de la un banal prompt si am ajuns la interfetele vizuale, interfete hipermedia samd.
Dar evolutia nu s-a oprit aici.
Incercarea de a obtine un "user experience" mai bogat s-au soldat cu proiecte extrem de interesante. In continuare voi enumera cateva dintre acestea. Majoritatea se afla in stadiul de prototip dar promit ca odata ajunse la maturitate sa imbunatateasca considerabil daca nu sa revolutioneze modul in care se face schimbul de informatii om - computer.

Sistemele multi-touch:

De ce sa folosim un mouse sau un touchpad cand putem interactiona cu obiectele din spatiul virtual la fel cum o facem cu cele din realitate?
Mai multe informatii aici si aici.

Microsoft a inceput dezvoltarea propiei tehnologii multi-touch si rezultatul este Microsoft Surface. Un review al tehnologiei poate fi citit aici

Un model primitiv al interfetelor multi-touch este celebrul Apple Iphone

Interfete vizuale pentru sisteme de operare
Sistemele de operare au incercat intotdeauna sa ofere un workflow imbunatatit. S-a pornit de la command prompt. Revolutia a constat in conceptul de mouse,point&click,ferestre. In ziua de azi se pare progresul are loc la o viteza mai mica.
E adevarat interfete gen Compiz-Fusion ofera efecte vizuale interesante dar nu sunt fundamental diferite.

La fel si aceasta incercare de interfata grafica 3d de la sun:


Totusi exista si idei care sunt mai revolutionare ca aceasta.Cum ar fi sa manipulezi obiectele din spatiul virtual la fel ca pe cele de pe biroul tau??.

Audio&Video

Cand ne gandim la muzica, ne gandim la instrumente de percutie,suflat, viori si alte obiecte fizice care produc sunete. In ultima vreme muzica a inceput sa fie creeata digital dar principiul de baza a ramas acelasi: se scriu notele pe portativ si apoi sunt redate intr-un mod sau altul.
Acest proiect ofera o viziune noua si extrem de originala asupra crearii de sunet.

Mai multe informatii aici


Un alt proiect interesant este acesta



Am lasat pentru sfarsit unul din proiectele care m-a impresionat cel mai mult.
Intr-o lume in care aparatele foto devin din ce in ce mai profesionale, in care siteurile gen Flickr permit publicarea de fotografii de catre oricine si in care progresele din domeniul hardware ofera capacitati de procesare si stocare din ce in ce mai mare un proiect ca acesta mi se pare o idee geniala. Imagini imense, vizualizare real-time, navigarea intr-un mediu 3d compus din diverse poze facute din diverse unghiuri....GENIAL.

Proiectul a fost achizitionat de Microsoft si site-ul lui se gaseste aici.


Sunt curios ce parere aveti despre proiectele prezentate si care este proiectul vostru preferat?

Via smashingmagazine

Crawler pentru Blogger.com ( tema 2 IE)

Pentru tema 2 mi-am ales analiza site-ului blogger.com
Scopul temei este de a scrie un crawler care sa obtina diverse tipuri de relatii dintre utilizatori/bloguri.

Ca tehnologie folosita am ales Java si Mysql.

Prima problema pe care am intalnit-o a fost cand am incercat sa obtin un obiect DOM alcatuit prin parsarea html-ului unui blog. Html-ul nu este conform standardelor si nu am reusit sa-l parsez.
Rezolvarea problemei a fost utilizarea JTidy un parser HTML care permite corectarea greselilor de sintaxa.
Dupa apelul :
document = tidy.parseDOM(urlConnection.getInputStream(), outputStream);
vom avea in document structura paginii.
Atentie: dupa incercari repetate am descoperit ca daca in loc sa apelez metoda parseDOM care returneaza DOM-ul asociat stream-ului parsat se foloseste metoda parse care doar scrie stream-ul parsat intr-un output stream, urmata de creearea unui DOM din acel stream se pot intampina dificultati la creearea DOM-ului.

Din acest moment totul ar fi trebuit sa decurga usor prin folosirea XPath-ului pt a gasi informatiile relevante.
Search-uri pe expresii de tipul expression = "//a[@class=\"comment-link\"]";
care returneaza toate nodurile < a > oriunde s-ar afla, cu parametrul "class" = "comment-link" returneaza liste de noduri sau noduri ce pot fi prelucrate usor.
De exemplu urmatoarea bucata de cod cauta toate comments-urile si le adauga intr-o lista de comments dupa ce in prealabil a scos atributele pop-up din url.

expression = "//a[@class=\"comment-link\"]";
nodeList = (NodeList) xpath.evaluate(expression, document,
XPathConstants.NODESET);
for (int i = 0; i < nodeList.getLength(); i++) {
aux = nodeList.item(i);

String auxS = aux.getAttributes().getNamedItem("href")
.getNodeValue();
// daca linkul e de tip popup scoate parametrul popup
if (auxS.indexOf("&isPopup=true") > 0)
auxS = auxS.substring(0, auxS.indexOf("&isPopup=true"));
// adaugam comment-ul in lista de comments
if (!(aux.getChildNodes().item(0).getNodeValue().indexOf("0") >= 0))
comments.add(auxS);

}


Insa cu aceasta ocazie am observat ca nu toate paginile blogger sunt formate pe baza aceluiasi template html. Se pare ca exista o diferenta intre vechile pagini blogger 1.0 si noile blogger 2.0.
De exemplu link-urile din textul din entry-uri este gasit cu string-ul XPATH:
expression = "//div[@class=\"post-body entry-content\"]/a";

in timp ce in alta versiune este gasit cu:
expression = "//div[@class=\"post-body\"]/p/a";

Un alt lucru pe care l-am observat este ca daca pentru majoritatea paginilor structura dupa corectarea paginii cu JTIDY este aceeasi doar ca au fost inchise toate tag-urile, corectate toate greselile de semantica si sintaxa samd, pagina de profile ale utilizatorilor sufera o transformare radicala dupa "curatarea" cu JTIDY.

De aceea trebuie sa fim atenti cand folosim JTIDY si sa analizam structura paginii obtinute si nu a paginii initiale.

O alta problema este ca datorita structurii customizabile a template-urilor blogger nu putem fi siguri ca toate informatiile pe care le cautam se gasesc intotdeauna pe fiecare pagina.De exemplu am gasit in cursul parsarii bloguri care nu aveau pe ele profilul userilor lucru ce mi-a creeat probleme, sau profile care nu erau publice.

O analiza atenta va reusi totusi sa extraga extrem de multe informatii din paginile blogger.

Codul pentru tema mea se va gasi dupa expirarea termenului limita de trimitere a temelor aici.

Ca un ultim sfat: acest proiect ar fi fost mult mai usor de realizat in python.

Tema 2 Interfete Evoluate

Enuntul temei:

Pe internet exista un mare numar de comunitati online. Prin comunitate pe internet intelegem o multime de oameni ce efectueaza o activitate impreuna (scriu mesaje pe un forum, joaca un joc multiplayer, etc.). Pe baza acestor activitati se formeaza retele sociale – grafuri de mari dimensiuni ale relatiilor online dintre membrii comunitatii. Pentru a extrage un astfel de graf dintr-o aplicatie online metoda uzuala este de a scrie un program care analizeaza paginile web ale site-ului comunitatii si extrage datele referitoare la colaborarile dintre persoane. Acest program trebuie sa-l faceti voi ca tema

Aplicatia se bazeaza pe urmatoarele proprietati ale acestor site-uri:

• Paginile site-ului sunt generate dinamic => toate vor avea aceeasi structura.
• Cea mai mare parte a linkurilor din aceste pagini duc tot in pagini ale site-ului.

Din aceste proprietati rezulta ca este suficient sa se scrie un script/clasa/functie care sa analizeze o pagina HTML si sa se aplice aceasta functie pe toate linkurile din interiorul site-ului.

Exemple de comunitati online ce pot fi analizate:

• Bloguri gazduite pe acelasi server (blogspot.com, wordpress.com, etc)
• Forumuri (forumuri bazate pe phpbb, vBulletin, etc)
• Jocuri online (hattrick.org, online.bridgebase.com/myhands, etc., sah sau pool de pe yahoo games)

Aplicatia poate fi realizata intr-un limbaj la alegere.

Membrii echipei au ales:
Alecsandrescu Razvan - blogger.com
Morosan Catalin - kernelnewbies.org
Tanase Claudia - Hi5.com
Vasile Mugurel - 360.yahoo.com

Temele rezolvate vor fi disponibile in curand pe site, la sectiunea proiecte.

Siretlicuri antice pentru o mai buna pozitionare in motoarele de cautare

Un siretlic de baza ce asigura o mai buna indexare il reprezinta META TAGURILE. Modul in care aceste cuvinte-cheie sunt create si folosite poate de multe ori constitui diferenta intre a fi gasit vreodata pe net sau unde apare in cadrul cautarii site-ul tau. Meta tagurile sunt etichete html ce descriu vizitatorilor continutul paginii web in momentul cautarii.
Dupa inregistrarea URL-ului in motoarele de cautare, programele "spider" vor indexa pagina care se gaseste la URL-ul dat.

Meta tagurile trebuiesc scrise imediat dupa tagul
<meta name=name value content=content value>
<meta http-equiv="content-Type" content="text/html">
specifica faptul ca pagina va avea un header numit content-Type care are valoarea text/html pentru ca browserul sa cunoasca tipul continutului pe care trebuie sa-l afiseze.

Tagul <meta> cu atributul content adauga atributele NAME sau HTTP-EQUIV care definesc informatiile generale pe care voi le creati sau schimbati in document, iar atributul content defineste valoarea acestor informatii generale.

Alte exemple de taguri:
<meta name="keywords" content="cuvinte cheie introduse in momentul cautarii">
<meta name="description" content="descrierea siteului">
<meta name="robots" content="index,follow"> - indexeaza toata pagina si urmareste linkurile din pagina
<meta name="robots" content="index,nofollow"> - indexeaza toata pagina dar nu urmareste linkurile
<meta name="robots" content="nofollow"> - nu indexeaza nimic
<meta name="title" content="titlu pagina">
<meta name="author" content="autor pagina">
<meta name="owner" content="proprietar pagina">
<meta name="subject" content="subiect pagina">
<meta name="rating" content="rating pagina">
<meta name="description" content="descriere pagina">
<meta name="abstract" content="descriere pagina">
<meta name="keywords" content="cuvinte cheie pagina">
<meta name="revisit-after" content="n days"> - reindexarea paginii in n zile
<meta name="language" content="limba pagina">
<meta name="copyright" content="drepturi de autor">
<meta name="robots" content="all">

Bine ati venit!

Bine ati venit pe blogul de interfete evoluate. Site-ul principal este aici: Interfete Evoluate