Ce parere aveti despre cursul de Interfete Evoluate de anul acesta ?(tematica curs, laboratoare)

joi, 13 decembrie 2007

Nou - am revenit in forta in Google

Pe 11.12.07 site-ul a fost in sfarsit indexat de google :D, ca un cadou de sarbatori :P.
In search-ul pe google dupa cuvintele cheie "interfete evoluate" ne situam acum pe locul 16 :) - pe pagina 2, insa fluctuatiile pozitiei in search sunt mari. Mai asteptam sa se stabilizeze treaba.
Acum ar fi un moment bun sa punem content nou (ex. pagina de prezentare) si pagini cu articole.

miercuri, 12 decembrie 2007

Nou - Modificare Site Interfete evoluate

Am completat sectiunea de stiri de pe site cu ultimele noutati legate de dezvoltarea proiectului si a temelor. Puteti sa mai adaugati si alte stiri care le considerati relevante.

Am completat si sectiunea de Prezentare cu cateva informatii despre membrii echipei in general. Va invit sa va adaugati fiecare o scurta descriere.

duminică, 9 decembrie 2007

Misterul disparitiei din Google search

Am pus un post ieri pe grupul de webmaster help de la google 
in care am explicat situatia site-ului si am cerut niste pareri. 
Aparent aceasta situatie nu este neobisniuta pentru un site nou,
cum este al nostru, si suntem noi prea impacienti.  
Sa speram ca situatia se va schimba in curand, cum se spune 
"May Google Gods be with us".
Intre timp am constatat ca Google Analytics este o unealta destul
 de puternica, printre lucrurile pozitive  constatate se numara :
  • updatarea la interval de minute a informatiei despre trafic
  • vizualizarea mai compacta a informatiei cu grafice per vizitatori/vizite/accese de pagina
  • flexibilitate mai mare in ceea ce priveste selectia perioadei de afisare a statisticelor
  • foloseste ajax pentru afisarea info - voi reveni cu un articol despre asta
Un posibil minus este ca nu am gasit nicaieri afisate IP-urile vizitatorilor.
Per total informatiile oferite sunt aceleasi ca la trafic.ro doar intr-o forma
mai prietenoasa.

sâmbătă, 8 decembrie 2007

Nou - Site XHTML 1.0 Transitional si CSS valid

Site-ul http://interfete-evoluate.xhost.ro este acum valid dpdv al standardului XHTML 1.0 Transitional.
Valid XHTML 1.0 Transitional
Valid CSS!

vineri, 7 decembrie 2007

Nou - site RSS feed

Am facut un feed pentru blog pe FeedBurner.com adresa este http://feeds.feedburner.com/blogspot/interfete-evoluate. Pentru a va inscrie intrati pe site-ul proiectului http://interfete-evoluate.xhost.ro/ dati click pe oricare link din sectiunea RSS Feed. Daca folositi un feed reader
diferit de cele prezente pe site puneti un comentariu la acest post cu numele programului.

Re - Vesti proaste

Am gasit pe forumul de la google support o situatie similara.Am urmat sugestiile celor de acolo si am testat site-ul cu un spam detector si a iesit curat, din pacate la testele de pe W3org ptr corectitudinea codului au iesit mai multe erori, asa ca e posibil din cauza asta sa ne fi eliminat din index. Din cate am citit pe blogul celor de la google nu ar fi avut motiv sa ne baneze. Din pacate pe contul de google web master nu spune ca ar fi fost vreo problema in a parcurge site-ul, dar nici data ultimei parcurgeri nu este updatata (3 dec). Intre timp am facut un site-map pe care l-am adaugat la google si am modificat parti din site a.i sa nu mai fie erori.Tot mai sunt cateva de la scriptul de trafic.ro pe care nu pot sa-l scot din pacate, probabil ca va trebui sa schimb tipul documentului din XHTML1.0 strict in XHTML transitional sau alceva...
 Orice alta sugestie este binevenita...

Vesti proaste

Se pare ca situl nostru nu a fost de gasit pe google azi toata ziua (ieri era pe pagina 3-4). Sa speram ca nu am fost banati din cine stie ce motive misterioase si isi va reveni in curand.

miercuri, 5 decembrie 2007

Tema 3 reloaded

 Am gasit solutia un pic mai complicata care merge pe mai toate browser-ele recente. Ideea este de a simula un popUp window definind o sectiune 
html (cu tag-ul div) pe care o afisezi/ascunzi atunci cand este nevoie. 
 Articolul ce descrie implementarea autocomplete-ului se gaseste  aici .

marți, 4 decembrie 2007

Tema 3 - Din nou !!!

Am uitat sa precizez in postul anterior ca tema nu functiona decat pe IE :D. 
Mda... stiu ca nu e profesional, dar nu este vina mea ca obiectul de popUp 
nu este suportat decat de IE, iar in cazul meu era varianta cea mai simpla
 de a rezolva problema.
Din pacate  azi cand am prezentat tema la laborator mi s-a zis clar ca 
trebuie sa-l fac sa functioneze si pe alte browsere (Firefox, Opera, ...) 
asa ca va trebui sa ma mai documentez :(.
Revin cat de curand cu informatii proaspete despre descoperiri. :D 

luni, 3 decembrie 2007

Tema 3

Salutare

Tocmai ce am uploadat tema 3, si ma gandeam sa unificam datele din tabelele noastre. Ma gandesc sa folosim aceleasi tabele din baza de date si sa facem temele sa mearga cu hostul nostru (de la xhost.ro). Astfel, toate temele vor afisa aceleasi date.
Am facut deja asta cu tema Mihaelei. Acum cautarea de articole (autocomplete) si selectarea de articole dupa autor merg pe acelasi tabel. Ulterior, vom integra totul pe site.
Am creat tabela articles cu toate articolele scrise de noi. Va mai trebui sa cream tabela users (cu id user si nume, si eventual si alte date), si toate celelalte tabele de la temele voastre.

Sa-mi ziceti ce pareri aveti.

PS. O sa fac public linkul dupa expirarea termenului temei. Pana atunci puteti sa-l vedeti pe ftp.

To crawl or not to crawl

Si iata ca a fost tema 2 (mai demult dar cum timpul e limitat postez despre ea acum). Am vazut ca Mihaela e mai harnica si a facut si tema 3 :).

La tema 2 am avut de facut un crawler web care sa descopere si salveze relatiile inter-personale de pe un site la alegere.

Eu am plecat de la last.fm - super site de ascultat, descoperit, impartasit muzica si evenimente asociate precum concerte, lansari de albume. Am identificat relatii de tipul X asculta aceeasi muzica cu Y (neighbour in limbaj last.fm), X este prieten cu Y.

M-au ajutat destul de mult URL-urile foarte "regulate" ale site-ului si faptul ca HTML-ul din pagini e bine structurat. De exemplu, e de ajuns sa se plece de la un nume X de utilizator, prietenii sai se gasesc la www.last.fm/user/X/friends, din pagina HTML respectiva se pot parsa usor numele prietenilor, se afla apoi prietenii prietenilor si tot asa.

Ca tehnologii, am folosit Python si sqlite pentru baza de date. Python din cauza ca e puternic, simplu, elegant si are un parser de SGML care e teribil de usor de folosit. Multi colegi au incercat sa parseze cu un parser de XML si au dat de probleme fiindca stim cu totii ca putine site-uri folosesc astazi XHTML desi ideal toate ar trebui sa o faca. Parserul XML se plangea cand dadea de HTML-ul ce respecta mai putine reguli; parserul de SGML din Python a mers perfect.

Tot legat de parser, capabilitatile dinamice si reflective ale Python sunt puse la treaba in folosirea lui. Vrei sa ti se apeleze o metoda cand incepe tag-ul <ul> In parserele standard trebuie sa iti inregistrezi o functie handler si sa faci incantatii magice :P. In Python trebuie sa definesti metoda start_ul intr-o clasa care extinde SGMLParser. Atat.

O alta chestie despre care am aflat mai multe cu ocazia acestei teme a fost sqlite. Le-am vizitat site-ul, am fost incantat de faptul ca e o solutie care face foarte multe (ofera suport pentru SQL, indecsi, tranzactii, triger-uri, view-uri) si totusi nu are nevoie de un server care sa gestioneze baza de date, nu are nevoie de nici o configurare, tine toata baza de date intr-un singur fisier self-contained si are mai putin de 250KB de cod. Daca nu era de ajuns, formatul bazei de date este neschimbat pe arhitecturi pe 32 sau 64 biti, little-endian sau big-endian. Faptul ca e un produs extraordinar de util se vede si din lista impresionanta de utilizatori.

Site-ul Proiectului IE s-a modificat - in bine bineinteles :D

Am imbunatatit look-ul si functionalitatea site-ului Proiectului de Interfete Evoluate folosind un template luat de pe site-ul acesta . Categoriile alese pentru a structura continutul sunt :
  • Home : se prezinta o scurta descriere a proiectului si a materiei.
  • Articole : se afiseaza link-uri catre paginile articolelor, atat cele de pe blog cat si cele de pe site
  • Portofoliu : se afiseaza enuntul temelor si link-uri catre impementarile fiecarui membru
  • Prezentare : se prezinta informatii despre fiecare membru (nu link-uri)
  • Contact : se pune la dispozitie un formular de contact

Sarini ramase de facut in cadrul proiectului:

  • completarea sectiunii Home cu inca vreo 2 paragrafe despre materie si proiect
  • scrierea de articole pe site despre tehnologii web si completarea sectiunii Articole
  • atragerea de echipe partenere :P, va invit sa va folositi metodele de persuasiune
  • adaugarea enunturilor temelor si link-uri catre temele rezolvate deja pentru a completa sectiunea Portofoliu
  • adaugarea unei scurte descriri despre fiecare membru al echipei
  • punerea in functiune a formularului de contact ai acesta sa trimita mail-uri pe adresa de mail a proiectului
  • crearea unei pagini de sitemap

Tema 3 Autocomplete - varianta "complexa"

In urma experienta temei 3 de javascript - recent terminate , pot sa spun cu mana pe inima ca cei care au propus impartirea in varianta simpla si varianta complexa probabil ca au vrut sa rada de noi. In cele ce urmeaza o sa detaliez aceasta idee.
Pentru a face aceasta tema am adoptat, ca orice inginer in devenire :P, o abordare incrementala. Auzind de la laboranti ca "varianta simpla este inclusa in cea complicata" am inceput prin a rezolva varianta simpla.
Vrand sa lucrez in eclipse, un IDE deja cunoscut si foarte usor de folosit, am downloadat un plugin pentru editarea de javascript - JSEclipse. A trebuit sa ma inregistrez la Adobe ca sa dwl acest plugin :(, instalarea a mers ok , pana la urma tot cu download managerul din eclipse am instalat :P ca mi-era mai usor. Pluginul nu este unul tocmai stralucit, raporatarea erorilor este foarte slaba, cateodata te induce in eroare, autocomplet-ul nu este prea util, avand in vedere ca tipul variabilelor este "on the fly".

Varianta simpla - durere de cap :(
Am citit tutorialul de pe w3schools de JavaScript si am inceput sa rezolv micile task-uri ce alcatuiau tema fara a tine cont de Ajax si aici au inceput problemele.
Am zis sa plec de la o abordare simplista si asa am facut separat un text box in care sa editezi titlul articolului si un select cu lista de autocomplete. Din pacate lucrurile nu au fost asa de simple deoarece tot ce sa gasea pe net erau aceleasi exemple standard, iar daca vroiai sa faci ceva mai altfel specificatiile pentru o anumita chestie-obiect in speta, trebuiau cautate bine. A trebuit sa citesc si despre HTML DOM, altfel nu aveam cum sa generez dinamic lista de autocomplete. Un exemplu util de HTML DOM aici .
In cele din urma, cu multe chinuri si cu ajutorul try catch-urilor am reusit sa fac pagina sa functioneze. (Am uitat sa zic de erorile foarte sugestive obtinute - "Unspecified error").
Urmatoarea etapa era sa fac afiserea listei de autocomplete sa semene cu cea din google suggest.
Aici am dat peste diverse solutii folosind HTML5.0 despre care nu am gasit o documentatie buna, doar exemple si un articol sumar . Oricum devenea foarte clar ca ceva trebuie drastic schimbat in abordarea temei ca asa nu mai merge.

Varianta cu Ajax - :D
In cele din urma am avut divina inspiratie sa citesc si tutorialul de Ajax. Aici am descoperit cu stupoare implementarea temei mele, intr-o varianta foarte simpla care NU folosea Javascript aproape deloc :D si care reusea sa faca site-ul sa semene ca cel de la google. Asa ca am sters cu "buretele" (aka delete ) tot ce scrisesem pana acum, si am copiat exemplele din tutorial. Din fericire site-ul ales de mine xhost.ro are suport pentru baze de date mySql si php, asa ca a functionat sa testez acolo si nu a trebuit local sa - mi instalez alte programe.
A trebuit desigur sa ma mai documentez despre php si obiectul de popup pentru a face sa functioneze tema. Un articol cu exemple bune referitoare la folosirea Popup Object.

In concluzie va sfatuiesc sa faceti varianta cu Ajax in conditiile in care aveti la dispozitie un server apache/.. cu php si mysql , deorece este mai simpla abordarea.

duminică, 2 decembrie 2007

Tema 2 - Mini crawler pentru o lista de discutii

Acum catva timp am avut de implementat la tema 2 un mini crawler al unei comunitati online (blog, forum, lista discutii etc.); scopul era acela de a descoperi relatii intre diversii membri care activeaza in respectiva comunitate online si de a retine informatiile intr-o tabela.

Am ales sa analizez lista de discutii a cursului de Sisteme de Operare (http://cursuri.cs.pub.ro/pipermail/so/) - mai exact paginile corespunzatoare mail-urilor trimise in octombrie si noiembrie, si sa concluzionez pe baza unor euristici destul de simpliste cam care e statutul celor care au trimis mail-uri pe lista de discutie: profesor, asistent, student, asistent responsabil de tema.

Ca de obicei, am ales sa scriu codul sub Linux :) folosind Java (fara Eclipse, doar Kate, ant si un terminal). Ca baza de date am folosit 'sqlite' (simplu si eficace).
Prima problema de care m-am izbit a fost faptul ca paginile pe care urma sa le analizez nu erau XHTML :( "Salvarea" a venit din partea unui asistent care a recomandat folosirea 'JTidy' pentru "curatarea" HTML-ului.
Urmatorul pas a fost alegerea tehnologiei de parsare: SAX sau DOM; desi mai ineficient din punct de vedere al consumului de memorie, am ales DOM pentru ca paginile analizate erau cat se poate de simple.

"Curatarea"HTML-ului si parsarea rezultatului s-au dovedit a fi lipsite de efort; mai dificila a fost parcurgerea arborelui si identificarea euristicilor care sa separe cat mai bine studentii de asistenti :) In cele din urma, am stabilit urmatoarele reguli: un mail fara reply reprezinta cel mai probabil un anunt facut de un asistent, ultimul reply a fost scris probabil tot de un asistent care lamureste definitiv problema din mail-ul initial, iar initiatorii unor mail-uri cu multe reply-uri sunt probabil studenti.

Parcurgerea arborelui s-a facut in urma unei analize a htm-ului asociat, pentru a putea identifica mai usor pe ce nivel se afla elementele de interes, in ce relatie sunt etc.
Mai dificila a fost identificarea ultimului mesaj dintr-un thread, din cauza ramificatiilor (ultimul mesaj poate sa apara ca reply al unui mesaj intermediar); o parcurgere recursiva nivelelor mesajelor dintr-un thread a rezolvat problema.

Baza de date a fost folosita prin intermediul JDBC.

Cam atat despre tema 2; codul poate fi download-at de pe site.

Urmeaza tema 3...

sâmbătă, 1 decembrie 2007

Crawler Web

Poate va intrebati cat de greu este sa faci un program care sa intre pe site-uri automat ex. yahoo360, mySpace si sa obtina informatii despre persoanele care posteaza pe acel site si relatiile intre ele si apoi sa le salveze pentru o vizualizare/prelucrare ulterioara.
Va spun eu, tot ce iti trebuie ca sa faci acel program sunt : cunostiinte minime de Java , o baza de date (MySql) si un profil de plecare pe acel site.

Conectarea
Site-ul poate necesita logarea cu un profil pentru accesarea paginilor. Pentru aceasta va fi nevoie de pastrarea si trimiterea de cookie-uri corespunzatoare pentru a te identifica in fiecare cerere de pagina. Pentru primirea si trimiterea de cookie-uri se foloseste clasa HttpURLConnection . Un exemplu de folosire este prezentat in articolul http://martin.nobilitas.com/java/cookies.html.

Prelucrarea paginii
In functie de tipul site-ului paginile pot fi xhtml sau doar html. Pentru parsarea xhtml in Java principalele pachete ce pot fi utilizate sunt org.xml.sax si javax.xml.parsers , tutoriale pentru folosirea lor se gasesc la adresele
http://java.sun.com/webservices/jaxp/dist/1.1/docs/tutorial/sax/index.html ptr SAX si
http://java.sun.com/webservices/jaxp/dist/1.1/docs/tutorial/dom/index.html ptrDOM.
Recomandarea mea este sa folositi SAX-ul pentru pagini mari deoarece este mai rapid, iar DOM-ul pentru pagini mai mici.

De obicei pentru a descoperii noi profile de utilizatori este deajuns sa cauti in pagina link-uri cu o anumita forma. De exemplu pentru yahoo360 url-ul pentru profil este de forma http://360.yahoo.com/profile-ID , unde ID este o combinatie de litere.

Cheia succesului - rank mare in motoarele de cautare

Sa obtii un rank mare in motoarele de nu este un lucru usor, mai multi factori contribuie la acest lucru.
Cei mai importanti factori fiind numarul de link-uri din cadrul altor site-uri care indica catre site-ul tau, numele domeniului sa contina cuvinte relevante pentru continutul site-ului si nu in ultimul rand continutul tag-ului title.
O practica foarte comuna pentru a obtine un rating mare era folosirea tag-ului meta cu atributele keywords si destription in care administratorul paginii include o scurta descriere a site-ului si cuvintele cheie. Acest tag nu mai este luat in considerare de motoarele de cautare actuale (Googleboot, yahoo) din cauza folosirii in scopuri rau intentionate de catre multi administartori de site-uri. Atributul description este in continuare folosit, dar are o importanta scazuta daca in interiorul site-ului nu se gasesc cuvinte care sa sustina descrierea. Ideea este ca motoarele de cautare isi genereaza singure o descriere a site-ului pe baza continutului.
Cateva sfaturi date de cei de la google pentru a obtine un rank bun in cautari :
  • inscrieti pagina in motorul de cautare http://www.google.com/addurl.html
  • incarca o harta a site-ului folosind Google webmaster tools pentru o buna acoperire a site-ului
  • pune link-uri catre site-ul tau in cadrul paginilor din acelasi domeniu de interes
  • foloseste text in locul imaginilor pentru a afisa nume, continut important sau link-uri
  • daca folosesti pagini generate dinamic, ia in considerare ca nu toate motoarele de cautare stiu sa proceseze astfel de pagini. Ajuta daca numarul de parametri este cat mai mic.
  • numarul de link-uri din cadrul unei pagini ar trebui sa nu depaseasca 100

O descriere detaliata o gasiti la http://www.google.com/support/webmasters/bin/answer.py?answer=35769.

sâmbătă, 3 noiembrie 2007

Despre Interfete Evoluate

Interfetele evoluate au aparut ca o nevoie a utilizatorilor pentru intefete usor de utilizat, care sa se adapteze la nevoile si particulatitatile lor.

Nou Site-ul Poiectului de Interfete Evoluate

http://interfete-evoluate.xhost.ro/

vineri, 2 noiembrie 2007

Proiect Interfete Evoluate

Acest blog are ca scop descrierea evolutiei proiectului la interfete evoluate.
De ce Interfetele evoluate ?
Acestea au inceput sa capete o mare importanta in ultima vreme, odata cu dezvolaterea internetului - a comunitatilor pe internet.

Ce parere aveti despre tehnologia Ajax ?

 
Director-Web.net