Speed of Browsers

Intr-un articol anterior vorbeam despre Web Workers. Pe scurt, "Web Workers"-ii reprezinta o modalitate prin care un script Javascript poate beneficia de facilitatile de multithreading oferite de sistemul de operare.

Motivul pentru care a aparut acest API (practic, utilizarea acestor facilitati se face prin intermediul unor functii disponibile in Javascript) il reprezinta dorinta utilizatorilor de a avea aplicatii web cat mai rapide, precum si dorinta programatorilor de a putea face aplicatii care sa ofere functii cat mai "dragute". Vezi Google Orice (Docs, Gmail etc.).

In ziua de azi, din ce in ce mai multe site-uri ofera continut care foloseste foarte mult facilitatile oferita de Javascript. Din aceasta cauza, baietii de la Google Chrome s-au gandit ca o dezvoltare logica a browser-elor inseamna marirea vitezei cu care se executa/interpreteaza codul Javascript. Astfel, in Chrome vine cu cateva lucruri diferite fata de alte browsere:

1. fiecare tab ruleaza intr-un proces separat, in care codul Javascript poate rula in thread-uri separate. La pornirea Google Chrome se creaza un proces principal, de control, iar fiecare tab deschise duce la crearea unui nou proces. In felul acesta, un tab care face niste procesari intense nu afecteaza in niciun fel celelalte tab-uri;
2. codul Javascript este compilat direct in cod binar specific masinii pe care ruleaza browserul. In Firefox 3, Javascript-ul este adus la forma unui limbaj intermediar (bytecode), dupa care este compilat la nevoie (oarecum asemanator cu ce se intampla in cazul Java). Firefox 3.1 are un mod diferit, despre care am sa vorbesc mai jos;
3. Javascript-ul nu are suport direct pentru clase. Cei de la Chrome au introdus o notiune noua (hidden classes), prin care permit reutilizarea codului intr-un mod asemanator cu cel din limbajele de programare normala. Plus ca apare si un Garbage Collector...

(Detalii suplimentare despre V8, motorul Javascript al Chrome-ului gasiti la adresa: http://code.google.com/p/v8/)

Baietii de la Google au fost destul de destepti cand au luat decizia de a face un browser mai rapid. Nu neaparat pentru ca lor le-a iesit un produs bun, dar pentru ca au impins din spate ceilalti producatori.

Astfel se face ca cei de la Mozilla au facut o mica modificare in Firefox 3.1, care aduce un plus destul de important de viteza. Motorul Javascript din Firefox 3.1 nu mai este SpiderMonkey. El a fost inlocuit cu TraceMonkey, care foloseste o alta metoda de "interpretare" a codului. Practic, acesta nu mai genereaza un graf de control al fluxului (Control flow graph - CFG) in sensul clasic, si, in felul acesta, nu compileaza tot codul la inceput (ca Google Chrome) si nici nu aduce tot codul intr-un limbaj intermediar (ca Firefox 3.0.1). In felul acesta, se pot obtine pe alocuri viteze de circa 30 de ori mai mari decat in forma clasica. TraceMonkey foloseste trace-trees, despre gare gasiti mai multe detalii aici: http://www.ics.uci.edu/~franz/Site/pubs-pdf/ICS-TR-07-12.pdf


To be continued...


Ionut

Read more...

Testele ACID2 si browser-ele

Din pacate pentru colegii mei, nu am idei care sa fie legate in mod direct de interfetele web. Insa...

Astazi am avut niste probleme de layout intr-o aplicatie. Cautand pe net sa vad care-i problema, am dat peste o chestie interesanta, de care simt nevoia sa spun si altora.

Toata lumea stie ca browserele afiseaza in mod diferit aceeasi pagina. Motivul se datoreaza faptului ca fiecare browser are un motor diferit (afirmatie oarecum valabila deoarece exista motoare care se regasesc in mai multe browsere - ex. Gecko se gaseste in Firefox, Camino, Netscape si Thunderbird (stiu ca asta nu e browser)). Evident, fiecare motor e mai mult sau putin compliant cu standardele asa ca apar diferente.

Insa, ceea ce nu stiam este faptul ca exista un test care iti poate arata cat de compliant este un browser cu standardul CSS3. Pe scurt, va duceti la URL-ul: http://www.webstandards.org/files/acid2/test.html, si faceti testul.

Mai multe detalii gasiti aici: http://en.wikipedia.org/wiki/Acid2


Ionut


UPDATE: Cristi a semnalat printr-un comentariu faptul ca am facut o greseala in articol: ACID2 este pentru CSS2, nu CSS3... Mea culpa...

Read more...

Autentificarea pe web

Orice interfata web ce ofera acces la o serie de servicii web precum (Yahoo, Gmail, SourceForge ... ) necesita o forma de autentificare. O posibila problema o reprezinta multimea de nume si parole ce trebuie retinute. Una dintre solutiile acestei probleme o reprezinta folosirea autentificarii de tipul Single Sign-on.

Conceptul din spatele Single Sign-on este destul de simplu: utilizatorul se inregistreaza la un Identity Provider ce apoi ofera verificarii identitatii pentru utilizatorul respectiv. In continuare, voi exemplifica procesul de autentificare pentru sistemul OpenID.

Un site ce necesita autentificare in mod normal afiseaza doua campuri text pentru introducerea numelui si a parolei, insa un site ce foloseste OpenID va afisa doar un camp text, pentru introducerea identificatorului OpenID. Dupa comletarea acestui camp si trimiterea spre validare a identificatorului, site-ul contacteaza site-ul OpenID (de exemplu myopenid.com) pentru a valida utilizatorul, in general prin introducerea unei parole. Dupa autentificarea utilizatorului pe pagina OpenID, site-ul care a cerut autentificarea va primi acces la un document XRDS (eXtensible Resource Descriptor Sequence) care este un format XML folosit pentru descoperirea de metadate despre resurse (in cazul nostru datele utilizatorului). In continuare, utilizatorul primeste acces la site-ul dorit.

Iata cum folosind un singur cont puteti accesa o multime de resurse. Printre site-urile ce ofera autentificare folosind OpenID se numara: Technorati, SourceForge, Yahoo, Google, chiar si blogspot.com ofera posibilitatea autentificarii cu un cont OpenID in vederea comentarii articolelor.

Voi ce solutii de Single Sign-on folositi?

Florin

Read more...

Gliffy - un tool util cu o interfata web prietenoasa

L-am descoperit pe Gliffy in incercarea de a realiza o diagrama de retea decenta. Fiindca nu am Visio instalat si imi doream sa termin repede cu pasul acesta am cautat pe Google si foarte repede am dat peste acest website.

La ce este util Gliffy? Este un software online pentru crearea de diagrame, si in urma primei experiente cu interfata lui - ce contine toate functionalizatile potrivite si care este usor de utilizat - am ramas cu o impresie foarte buna. Gliffy ofera toata gama de diagrame de la floorplan-uri, la diagrame UML, flowchart-rui, retele si interfete utilizator. In plus, varianta basic, este gratuita, nelimitata in timp si ofera acces la toate shape-urile pentru diagrame. Totusi nu poti avea decat 5 diagrame publice - ceea ce este un trade-off mai mult decat rezonabil daca planuiesti sa il utilizezi ocazional pentru proiecte personale.

In concluzie, il recomand pentru realizarea de diagrame rapid, usor si fara costuri. Nu-i asa ca e grozav cand gasesti un tool online care face toata treaba de care ai nevoie, te scuteste de instalat alt program mare si complicat, si mai este si gratuit pe deasupra?

Daca aveti vreun tip despre alte software-uri online la fel de utile si usor de utilizat, nu ezitati sa ne lasati un comentariu.

Read more...

Securitatea DNS-ului

Cu siguranta ati auzit despre DNS, acel sistem distribuit care face posibila utilizarea internetului. Practic, DNS sau Domain Name System, este un sistem distribuit in intreg Internetul ce face posibila utilizarea de adrese "human readable", precum www.google.ro in loc de 64.233.183.99. Folosind DNS, adresele simbolice sunt transformate in adrese IP. DNS-ul utilizeaza protocolul UDP pentru transmiterea cererii si a raspunsului pentru aflarea unei anumite adrese.

Pana aici, totul este OK. Sau poate ca nu. Sa luam un exemplu banal de utilizare. Tastati in browser-ul preferat adresa www.google.ro si apasati enter. In scurt timp, browserul afiseaza continutul paginii cerute. Insa foarte multe lucuri s-au intamplat intre timp, unul dintre ele fiind afarea adresei IP a computerului pe care se afla pagina ceruta. Acest lucru s-a realizat prin intermediului DNS, astfel: browserul a trimis o cerere de rezolvare a adresei www.google.ro catre serverul DNS default. Daca serverul respectiv are adresa ceruta in cache, va returna adresa IP ceruta, altfel, va interoga si el la randul sau un alt server DNS iar aceasta secventa se va repeta pana cand unul dintre servere are informatia ceruta sau se ajunge la un server autoritar.

Problema poate aparea la unul dintre serverele intermediare. Daca printr-un mecanism obscur, serverul DNS este pacalit si ii este injectata o adresa IP falsa, atunci acesta va raspunde la cereri cu adresa respectiva. Acest lucru a fost descoperit de catre Kaminski in iulie anul acesta.

Care sunt implicatiile? Destul de mari. Daca un utilizator rau intentionat doreste sa redirecteze traficul de la google.ro catre goggle.ro atunci el va initia un atac Kaminski catre un server DNS preferat si in aproximativ 10 secunde serverul respectiv va fi compomis, daca nu se iau masuri de precautie.

O astfel de masura poate consta in configurarea serverelor DNS sa utilizeze un alt port pentru fiecare cerere, ceea ce ar micsora foarte mult sansele unui atacator de a injecta un raspuns fals. O alta masura ar putea fi utilizarea protocolului DNSSEC.

Serverul DNS pe care il folositi este securizat?

Florin

Read more...

Wiki wiki

Wiki=repede , wiki wiki=repede x2
Trebuie sa fi auzit pana acum de wiki-uri si de minunatiile pe care le pot face pentru o comunitate.
Pe scrut un wiki - este o aplicatie online care permite accesul mai multor useri pentru a colabora. Cel mai bun exemplu care sustine relevanta wiki-urilor este crearea unui document complex la care lucreaza mai multe persoane dintr-o echipa. Daca eu incep documentul si il trimit lui Nelu, el il downlodeaza, il modifica si apoi il trimite din nou ca atsament Mariei, iar ea la randul ei face acelasi lucru si mi trimite mie inapoi. Iar eu intre timp am mai modificat copia mea initiala, e evident ca s-au creat multe copii intermediare necesare si in final eu va trebui sa ma descurc intrce cele doua documente.

De aceea wiki este o inventie grozava. Pe langa facilitarea colaborarii, noile versiuni atat de diverse ofera functionalitati din ce in ce mai interesante.

Personal am folosit DekiWiki - o versiune de wiki care mi-a placut atat pentru simplitatea ei, cat si pentru faptul ca ofera o versiune hostat de ei - ce impune atat de putine limite. Mi-a fost util atat pentru gestionarea colaborarii in cadrul unei echipe mari cat si pentru proiecte personale pe care am putut sa le structurez mai bine.

V-am atsat un filmulet introductiv care explica intr-o maniera hazlie la ce este bun un wiki.

Welcome to the wiki world!

Anca

Read more...

Despre CTTE

Sau cum poti descrie designul unei aplicatii fara insa sa scrii cod pentru asta. CTTE inseamna Concurrent Task Tree Environement si este o aplicatie care permite realizarea obiectivului de mai sus.

Cu ajutorul aplicatiei se pot defini (relativ usor) comportamente orientate pe evenimente ale aplicatiei. Astfel exista patru tipuri de entitati disponibile: utilizator, aplicatie, interactiune si abstract. Intre entitati (care se numesc sarcini) pot exista diferite relatii temporale iar sarcinile pot avea atribute, preconditii, tipuri, etc. Un alt aspect pozitiv al aplicatiei este ca utilizeaza o structura ierarhica de actiuni, insa aceasta inseamna ca nu se pot reutiliza arbori de sarcini deja definiti.

Cate ceva despre cele patru tipuri de sarcini.

Prima, sarcina utilizator, modeleaza o actiune posibil logica, de alegere, de rezlvare de probleme pe care o executa utilizatorul, fara a interactiona insa cu sistemul.

Al doilea tip de sarcina este aplicatia, ce modeleaza procesarea datelor de catre sistem (la cererea utilizatorului) avand ca rezultat date ce sunt prezentate utilizatorului. De exemplu, ca urmare a unui click al utilizaotrului pe un link, sistemul va procesa cererea, va crea o pagina de raspuns si o va afisa utilizatorului.

Urmatorul tip de sarcina, interactiunea, reprezinta actiunea utilizaotrului asupra aplicatiei (click pe un buton, drag and drop something ...)

Ultimul tip de sarcina este cea abstracta - o sarcina complexa care nu se incadreaza in niciunul din tipurile prezentate mai sus.

Cam asta ar fi in mare despre CTTE. Personal, mi-a lasat o impresie ... nu foarte buna. Cu siguranta nu poate fi utilizat pentru ptoiecte de mari dimensiuni deoarece modul de vizualizare si interactiune cu obiectele lasa de dorit (lipsa alinierii obiectelor, mutarea obiectelor, rearanjarea automata urat implementata, etichetele obiectelor care sunt aliniate doar la stanga ...).

In concluzie, nu il recomand pentru a fi folosit in mod curent.

As vrea sa aflu si parea vostra daca ati utilizat acest program

Read more...

Starcraf2 si XML-ul

Un post foarte scurt:

Nu stiu cati dintre cei trei care urmaresc acest blog sunt pasionati de Starcraft, dar e un lucru care merita sa fie spus despre site-ul Starcraft2: este facut doar cu XML-uri si XSL-uri (plus, evident, Flash).

Insa, din cauza asta, consumul de resurse este putin cam mare. Folosind Process Explorer, lucrurile raportate arata cam asa (am folosit ultimele versiuni disponibile pentru browsere, fiecare a fost deschis pe aceeasi masina si a fost incarcat doar site-ul http://www.starcraft2.com/, sistemul de operare fiind Windows XP SP3):

1. Internet Explorer 7: private bytes: 72M, virtual size: 208M, 1 proces cu 12 thread-uri;
2. Firefox: private bytes: 41M, virtual size: 115M, 1 proces cu 16 thread-uri;
3. Chrome: private bytes: 18+17+48M (are trei procese diferite), virtual size: 125+76+127M, 3 procese cu cate 25, 2 si 7 thread-uri. Aici trebuie sa ma adaug si faptul ca are un consum imens de procesor (imi tine un core cam pe la 100%).

Asa ca vin si-mi pun o intrebare simpla: oare chiar merita sa folosesti XML-uri pentru a face interfete? Recunosc ca e simplu. De exemplu, site-ul Starcraft 2 e foarte curat. Codul sursa e pe intelesul oricui. Totul e frumos. Mai putin consumul de resurse...

Disclaimer: recunosc ca datele de performanta pentru browsere pot sa varieze, insa ele vor fi in jurul acelorasi valori.

Ionut

Read more...

Cuvantul magic : Usability

Pe romaneste utilizabilitate, acest aspect al definirii interfetelor web este unul cheie care poate determina succesul sau esecul unui website.

Utilizabilitatea web este o abordare a crearii websiteurilor din punctul de vedere al usurintei folosirii de catre utilizator, fara ca acesta sa urmeze un training special inainte.
Utilizatorul ar trebui sa coreleze in mod intuitiv actiunile pe care trebuie sa le realizeze pe pagina web cu alte tipuri de actiuni din viata de zi cu zi, de exemplu apesi pe buton si poof ai primit ceva.

In sens larg, scopurile pe care le urmareste utilizabilitatea sunt:

• sa prezinte informatia utilizatorulu intr-o maniera clara si concisa
• sa ii prezinte utilizatorului variante corecte de alegere, intr-un mod cat mai evident
• sa inlature ambiguitatea cu privire la consecintele unor actiuni
• sa puna cele mai importante elemente la locul potrivit pe pagina web sau in aplicatia web

Am gasit multe resurse pe web care trateaza subiectul acesta, oferind idei despre cum sa imbunatatesti sau sa testezi utilizabilitatea portalului tau.

Dintre acestea un blog mi-a placut mult si as vrea sa il impartasesc si cu voi. E vorba de UsabilityPost si puteti sa aruncati un ochi pe postul despre 7 greseli curente in ce priveste utilizabilitatea.

Noi suntem in curs de definirea a websiteului nostru http://www.interfete-evoluate.eu . Daca vreti sa ne sugerati vreo greseala fie din cele 7 fie din celelalte 1007 posibile in ce priveste utiliazbilitatea, asteptam comentariile voastre.

Anca

Read more...

Despre PageRank

Poate ca ati auzit despre PageRank sau PR. Sau poate ca aveti instalat Google Toolbar si ati observat ca vi se afiseaza un numar cuprins intre 0 si 10, numit Google PageRank. Sa vedem despre ce este vorba.

Mai intai, ce este PageRank? PR este un algoritm de analiza a link-urilor care atribuie o valoarea numerica unui document dintr-o colectie de documente pe baza importantei documentului. Cu alte cuvinte, PR determina importanta relativa a unui document dintr-o colectie, cu conditia sa existe lgaturi intre documentele respective (link-uri).

O varianta simplista a functionarii algoritmului. Daca o pagina A contine un link catre o alta pagina B, atunci se considera ca pagina A "sustine" pagina B. Deci, cu cat mai multe link-uri exista catre o pagina, cu atat mai mare va fi PR-ul paginii respective. Insa PageRank nu insumeaza pur si simplu valorile PR ale paginilor respective ci PR-ul unei pagini este impartit la numarul link-urilor care se gasesc pe acea pagina. Spre exemplu, daca o pagina are PR egal cu 8 si contine un singur link catre o pagina A, atunci A va primi 8 unitati la PR-ul sau. Insa, daca pagina initiala contine 100 de link-uri, printre care si unul catre A, atunci A va primi doar 0.08 unitati la PR-ul sau. Se presupune ca valoarea calculata de Google foloseste o scala logaritmica. Astfel, devine din ce in ce mai greu sa obtii valori mari ale PR-ului.

In concluzie, cu cat mai multe pagini web contin link-uri catre site-ul vostru, cu atat mai mult va creste PR-ul vostru.

Florin

Read more...

Despre comunitati sociale si magazine online

Am mai auzit despre comunitati sociale, gen Hi5, YouTube, Moodle (?). Ele permit mai multor utilizatori sa impartaseasca idei, resurse, ganduri, fisiere, informatii, ... si lista poate continua. Este chiar util sa aflii cate ceva in plus despre prietenii tai, depre ce le place sau nu le place, despre ce au mai facut ... si o mutime de alte lucruri.

Ceea ce am aflat de curand, este ca aceste comunitati sociale se pot forma si altfel si anume in cadrul magazinelor virtuale. Da, in momentul in care ne inregistram pe un site, oferim o serie de informatii despre noi acelui magazin. Pe masura ce cumparam, se formeaza un profil al nostru. Si uite asa, magazinul capata o baza de date cu preferintele utilizatorilor.

Care este legatura cu interfetele web? Una destul de evidenta. Folosind informatiile din reteua sociala creata, programatorii site-ului pot oferi continut particularizat utilizatorilor. In felul acesta, cand voi intra pe site-ul magazinului, voi vedea o lista cu produse care sa reflecte preferintele mele (poate doar, doar voi mai cumpara unul din ele). Si astfel ajungem la imbunatatirea interfetei web pe care utilizatorul o foloseste pentru accesarea site-ului.

O alta modalitate de folosire a informatiilor din reteaua sociala a magazinului este de a folosi preferintele celorlalti utilizatori pentru a-mi oferi mie sugestii de obiecte pe care le pot cumpara. Cum functioneaza? In primul rand mi se determina profilul din cadrul magazinului pe baza a ceea ce am mai cumparat. Apoi sunt cautati utilizatorii care au preferinte similare (eventual care au dat note produselor respective). Se extrage din lista de preferinte a utilizatorilor o alta lista de obiecte pe care ei le-au cumparat (dar eu nu) si mi se ofera ca recomandari pentru a le cumpara. Destul de interesant. De exemplu, Amazon are o politica destul de agresiva de recomandari.

Voi ce parere aveti despre folosirea informatiilor legate de profilul de utilizator in scopuri de marketing?

Florin.

Read more...

API pentru explorarea comunitatii HI5

A trecut si tema 1 la Interfete Evoluate. Titlul ei? Analiza unor comunitati web
.
Cum aveam un cont la HI5 m-am gandit ca e perfect daca as face o explorare pentru a vedea cu cati utilizatori este conectat profilul meu (mergand doua niveluri in jos am descoperit ca "am" aproximativ 6000 de prieteni distincti, destul de multi :) )

Dar pana sa ajung aici a fost destul de interesant.

Trebuie sa va spun ca mie imi place sa programez in JAVA, asa ca pentru tema aceasta m-am gandit ca ar fi excelent daca as utiliza cunostintele de parsere SAX pentru a rezolva tema.
Initial, am zis ca voi face o parsare a listei de prieteni Numai ca nu e chiar asa de simplu: in primul rand trebuie sa fii logat (se poate face din Java, de exemplu folosind clasa HttpClient insa nu e asa placut) apoi, pentru a folosi un parser XML cu o pagina HTML e riscant (paginile HTML nu au intotdeauna tag-urile inchise corect, nu folosesc intotdeauna ghilimele pentru valorile atributelor ...), apoi lista de prieteni este afisata pe mai multe pagini, deci trebuie mai multe parsari. In concluzie, prima solutie parea destul de complicata.

Dupa ce am cautat putin pe net am descoperit ca HI5 expune un api (aflat in stadiu beta!) de explorare a comunitatii. Exact ce aveam nevoie. API-ul era oferit sub forma de servcii web ce puteau fi accesate prin SOAP. Ca urmare am incercat sa ma conectez la serviciul de lookup pentru a afla ID-ul unui utilizator (eu) a carui adresa de email o cunosteam. Conectarea am incercat sa o realizez folosind un client SOAP si anume Axis. Desi pare foarte simplu: creezi un nou client SOAP, creezi un nou apel, setezi parametrii si tipul lor, tipul raspunsului, trimiti cererea si astepti raspunsul formatat XML, nu a fost simplu. Se pare ca nu degeaba e in stadiu beta API-ul. Aparent, WSDL-ul (Web Service Description Language) asociat nu era consistent (asa cum am aflat dupa ce am folosit un utilitar AXIS de generare a unui client folosind WSDL-ul).

A picat si SOAP-ul. Insa pe pagina API-ului HI5 mai era un API, si anume: REST (Representational state transfer). API-ul permite accesarea de resurse peste o retea folosind identificatori. In scurt timp am vazut cat de usor se puteau accesa informatiile care ma interesau (userID si lista de prieteni ai unui utilizator pentru care cunosc id-ul). Asa ca am folosit metoda /profile/lookup pentru a afla id-ul utilizatorului si /profile/foaf/ pentru a afla lista de utilizatori in format FOAF. Era exact ce imi trebuia; primesc raspunsul in XML, totul e foarte clar. Mai departe am inceput sa scriu programul care foloseste un XMLReader pentru a parsa documentele si cateva handlere (cate unul pentru fiecare tip de document). Este destul de usor sa creezi un handler SAX, este nevoie sa extinzi clasa org.xml.sx.helpers.DefaultHandler si sa redefinesti cateva metode: startDocument (apelata la inceputul documentului), startElement (apelata la dechiderea unui nou tag), endElement (apelata la inchiderea unui tag) si characters (apelata la intalnirea de caractere intre un tag de inceput si unul de sfarsit).

Si asa am utilizat SAX si REST scriind un program in JAVA pentru a descoperii ca am 6000 de prieteni indirecti pe HI5. Voi cati prieteni aveti?

Florin.

Read more...

Hello web

Hello web!

Un fel de "Hello World" al utilizatorului web 2.0 or something. In sfarsit am reusit sa ne punem pe picioare, suntem doar la inceput, insa avem convingerea ca vom reusi sa scriem o serie intreaga de articole interesante despre interfetele web actual folosite in web-ul 2.0.

Si cum un hello world trebuie sa fie scurt ... :)

Read more...

We are LIVE!

Ma bucur sa inaugurez cu un post proaspat blogul nostru adica al echipei Anca, Florin si Ionut sau Florin, Ionut si Anca sau Ionut, Florin si Anca ... sau cum vreti voi, pana ne gasim un nume :)

Bun venit si Enjoy! our blog and our website - pe care o sa il aduca barza cat de curand.

Nu vrem sa incarcam web-ul cu chestii inutile asa ca veti gasi aici numai noutati interesante atat din domeniul Interfetelor Web cat si din alte domenii conexe care ne pasioneaza. Sper ca va fi o experienta placuta sa ne rasfoiti blogul.

Have fun!

Anca

Read more...