GWT, o solutie interesanta pentru crearea interfetelor web

GWT este o arhitectura ce se bazeaza pe Html Si JavaScript. A devenit open source in 2007 si la momentul respectiv a devenit cea mai buna unealta de a creea interfete web scalabile, de exemplu GMail si GoogleMaps.

Folosirea limbajul Java rezolva o serie de probleme de rapiditate. Codul este compilat in JavaScript si este de asemenea optimizat sa aibe o dimensiune cat mai mica.

Avantajele GWT sunt: scalabilitatea, viteza si optimizarea, compresia si obfuscarea.

Joel Webber, unul din creatorii de GWT, descrie GWT ca fiind o "incercare de a rezolva problema software engineering-ului, in AJAX". Definind scalabilitatea ca relatia dintre resursele alocate unui proiect si rezultatul acelui proiect, rezulta ca interfetele web scrise JavaScript nu se scaleaza bine. Conventiile de cod JavaScript cum ar fi namespace-urile, ajuta echipe mici de dezvoltatori sa nu se calce in picioare, dar aceste conventii se strica atunci cand e vorba de echipe mari si distribuite colaborand pentru creare de interfete web de dimensiuni mari.

Refractoring - Dezvoltatorul JavaScript se afla intr-o dilema. Stie ca JavaScript este un limbaj in care codul se scrie usor, dar stie de asemenea ca refactoring-ul ii va consuma foarte mult timp. O abordare logica ar fi sa faca o rapida functionalitate JavaScript, dar ceea ce dezvoltatorul naiv nu stie e ca isi va petrece o luna din viata mestecand guma si invartind cod JavaScript pentru crearea unei interfete web, dupa care se va afla in fata echipei de management. Daca codul merge, noul prototip va fi curand transfromat intr-o aplicatie, iar dezvoltatorul isi va face rost de o slujba full time in care va explica de ce e dificil sa adauge noi functionalitati interfetei web.

Viteza GWT se bazeaza pe inserarea unui compilator inteligent intre codul sursa si codul final al interfetei web scrisa in JavaScript. Acesta ne arata ca putem sa facem tot felul de optimizari pentru a ne asigura ca trimitem o cantitate minima de date si scripturi la interfata web de la client si ca facem acest lucru pe cat de eficient ne e posibil.
Codul interfetelor web scrise in JavaScript se comprima bine, dar GWT stie sa il comprime extraordinar de bine. Primul pas este optimizarea si eliminarea codului "mort". Operand pe principiul ca nu e nimic mai mic decat codul pe care nu il trimiti, GWT analizeaza sursele interfetei web pentru a descoperi cod la care nu se ajunge si il scoate afara. Pe deasupra, GWT 1.5 va transforma codul in cod inline, eliminand "overhead-ul" produs de apelare. Obfuscatorul implicit pornit, reduce numele variabilelor si al metodelor, folosind cele mai scurte nume. Codul se comprima si se trimite la client.


Cu siguranta GWT suna interesant, si merita incercat in implementarea interfetelor web care au neaparat nevoie de avantajele oferite de aceasta arhitectura.

Yahoo si Hotmail updateaza interfata

Numarul utilizatorilor/dependentilor de internet devine din ce in ce mai mare, deci imbunatatirea interfatei cu userul devine o necesitate. Astfel, doi giganti, Yahoo si Hotmail, pregatesc o schimbare radicala a interfetei web.

Introducerea functiilor precum drag-and-drop simplifica enorm utilizarea serviciilor webmail, dar si a altor aplicatii construite in Ajax. Microsoft si Yahoo urmeaza ca in scurt timp sa actualizeze serviciile de webmail prin schimbarea interfetei grafice cu o solutie mult mai asemanatoare clientilor pentru desktop.
In prezent, atat Microsoft cat si Yahoo au dezvoltat astfel de solutii, care sunt disponibile numai sub forma de test si numai pe baza de invitatie. Piata clientilor webmail va mai primi in curand un nou membru open source, denumit Zimbra, construit deasemenea pe standardul AJAX (Asynchronous JavaScript and XML).

Clientii webmail construiti pe baza AJAX pot actualiza informatia instantaneu, astfel incat odata cu deschiderea unui mesaj, acesta se incarca mult mai rapid. La fel, la stergerea unui email, aplicatia actualizeaza imediat afisarea, desi in fundal inca se deruleaza operatiunea de stergere.

Noul Yahoo Mail va oferi posibilitatea folosirii shortcut-urilor in mod asemanator unei aplicatii desktop, iar prin apasarea tastelor CTRL si SHIFT se vor putea selecta mai multe mesaje. Inca in versiune beta, Yahoo se remarca totusi prin forma ergonomica si puterea de procesare. Noua structura afiseaza trei paneluri, precum Outlook Express sau Mozilla Thunderbird.


Hotmail nu se lasa mai prejos si propune un design deosebit pentru interfata grafica, bazat pe modelele anterioare microsoft, de exemplu Outlook.

Sub o titulatura de cod cu rezonante razboinice - Kahuna, Microsoft si-a pregatit noua interfata grafica a serviciului de webmail Hotmail. Testarea versiunii Mail Beta a demarat astazi pentru acei internauti care si-au aratat interesul si care detin deja un cont de Hotmail.
Upgrade-ul anuntat pentru Hotmail va propune suport pentru interfata AJAX, care a fost rescrisa de la zero pe baza framework-ului Atlas al Microsoft si a unei noi arhitecturi denumita FireAnt.



Interesant de aflat cine va lansa noua interfata mai repede si cine va avea mai mult succes!

Google trends

Zilele trecute m-am gandit sa mai vad care sunt noutatile, sau cum s-ar spune printre tineri care mai sunt trendurile, in materie de programare web. Astfel am ajuns sa aflu ca cei de la Google pun la dispozitie Google Trends care e un utilitar ce ofera utilizatorilor un mod de a vedea o statistica a cautarilor de-a lungul timpului pentru cuvintele care le trec prin cap sa le introduca in spatiul de cautare.

Asa ca am incercat sa vad ce se mai "poarta", ce este la moda, in cazul programarii web, a standardelor si aspectelor legate de aceasta.

PHP vs. Java. vs. Perl vs. Ruby

Se pare ca Java este inca cel mai tare limbaj de programare in ciuda tuturor frustrarilor la care sunt pusi dezvoltatorii cand vine vorba de facut toate setarile pentru ca sistemul lor sa mearga in tot ceea ce priveste Java. PHP-ul inca este regele in lumea scripturilor pentru internet, Perl-ul cam moare iar Ruby-ul nu este prea popular.

Firefox vs. Internet Explorer

Firefox-ul se pare ca a preluat pozitia numraul 1, desi nu pot spune ca este o surpriza. Poate in viitorul apropriat dezvoltatorii web nu vor trebui sa petreaca ore in plus pentru a face totul sa mearga si sa arate la fel cross-browser (adica pe orice alt browser in afara de IE), din moment ce nu prea multa lume mai foloseste IE.

DHTML vs. CSS vs. JavaScript

Acest grafic e cumva surprinzator din moment ce arata un declin in folosirea DHTML-ului, care practic este o combinatie de HTML, CSS si JavaScript. JavaScript este cautat din ce in ce mai putin,numarul cautarile pentru CSS este stabil in ultimii ani si candva la moda DHTML-ul nu prea mai are parte de cautari.

XSS vs. SQL Injection

Aceasta ultima comparatie arata ca dezvoltatorii din ziua de azi par sa fie mai bine informati in legatura cu posibilele amenintari care se ascund in codul lor. Injectia de SQL a fost intotdeauna un subiect fierbinte asa cum arata graficul, dar undeva de-a lungul anului 2004 cand "web 2.0" era la inceputuri, subiectul XSS a devenit relevant si inca se mentine, dat fiind faptul ca injectia de SQL se "bate" pentru primul loc.

Fun with Javascript

Tot amanand inceperea rezolvarii la tema 3, am dat peste ceva funny. Se ia urmatoarea bucata de cod :

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI= document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval('A()',5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI[i].style.position="static";}}; void(0)

Se da copy la bucata de cod si apoi paste in address bar- ul browserului. Enjoy!
Pentru a intelege mai usor de ce toate imaginile de pe pagina asta au inceput sa zboare (pentru ca sigur ai dat paste fix in tab-ul asta al browser-ului) incearca sa te uiti un pic pe codul de mai sus.

CTT - Concurrent Task Tree

CTT inseamna Concurrent Task Tree si este utilizat pentru specificarea modelelor orientate pe sarcini. Modelul CTT este folosit pentru descrierea aspectelor functionale ale aplicatiilor inca din primele stagii de dezvoltare, aducand astfel un plus fata de metodele traditionale utilizate in design-ul aplicatiilor. Aceasta notatie permite proiectantului sa descrie comportarile orientate pe evenimente (event-driven), dar si modificarile de stare ale sistemului.
Caracteristicile CTT :
- structura ierarhica intuitiva, bazata pe tehnica "divide-et-impera"
- sintaxa grafica - sub forma de arbore ce reflecta structura ierarhica, relatiile dintre entitati fiind usor de observat
- notatia concurenta - activitatile aflate pe acelasi nivel de abstractizare pot fi ordonate temporal prin utilizarea de operatori
- focalizarea pe activitati - proiectantii isi concentreaza atentia pe aspectele importante in proiectarea aplicatiei si anume relatiile dintre utilizator si sistem si lasa pentru etapa urmatoare detaliile legate de implementare

Editorul care permite prelucrarea modelelor de sarcini este CTTE si poate fi downloadat de la adresa : http://giove.cnuce.cnr.it/ctte.html .

Interfata editorului este urmatoarea :

Task-urile pot fi de urmatoarele tipuri :
- user - efectuate integral de utilizator
- application - efectuate integral de sistem
- interaction - interactiuni ale utilizatorului cu sistemul
- abstract - actiuni complexe ce nu se incadreaza in nici unul din cazurile anterioare
Tipuri de relatii temporale:
- T1[]T2 - Selectie
- T1 |=| T2 - Ordine independenta
- T1 ||| T2 - Concurenta
- T1 |[]|T2 - Concurenta cu schimb de informatii
- T1 [>T2 - Dezactivare
- T1|>T2 - Suspendare/Reluare
- T1>>T2 - Activare
- T1[]>>T2 - Activare cu transmitere de informatie

Utilizarea editorului pe scurt :
- adaugarea un task nou : se selecteaza task-ul parinte sau frate (depinde de locul unde va fi introdus noul task in arborele deja existent) si apoi se da click pe icon-ul corespunzator tipului de task dorit
- adaugarea unei relatii temporale : se selecteaza task-ul din stanga si apoi se da click pe icon-ul relatiei temporale dorite
- dupa terminarea constructiei arborelui se verifica structura (Check model structure)
- dupa verificare structurii si corectarea tuturor erorilor aparute se poate trece la simularea modelului (Start task model simulator)

Desi ideea de proiectare folosind sarcini pare a fi utila, aplicatia care face acest lucru, CTTE, are inca multe buguri si trebuie sa te inarmezi cu multa rabdare inainte de a te apuca sa proiectezi ceva in aceasta aplicatie. Cateva sfaturi utile :
- salvati cat mai des, folosind optiunea "Save as"
- nu folositi CTRL+Z, CTRL+Y pentru UNDO, REDO, ci folositi optiunile din meniul Edit

YUI Library

Acum ceva vreme am auzit de la un prieten ca foloseste o librarie de la Yahoo! pentru o aplicatie care ruleaza in browser deoarece exista deja componente care pot fi integrate fara a fi nevoie sa le scrii chiar tu. Si, din moment ce exista deja componentele de care ai nevoie si care au mai fost si testate, de ce sa reinventezi roata cand ai putea sa folosesti YUI Library? Asa ca m-am gandit sa ma documentez si sa aflu ce este acest YUI Library deoarce ideea care sta la baza acestei librarii mi se pare o idee foarte buna si de un real ajutor in multe cazuri. Mai jos am scris pe scurt ce am aflat.

YUI - Yahoo User Interface- Library este o colectie coerenta de resurse JavaScript si CSS care simplifica construirea unor aplicatii care ruleaza in browsere web ce au un continut bogat in elemente interactive. Unele componente din YUI,cum ar fi Event Utility, opereaza la baza si se gasesc acolo pentru a face programarea in-browser mai usoara. Alte componente, cum ar fi Calendar Control, includ obiecte vizuale care pot fi plasate in pagina cu aspect default.
Libraria YUI este gratis,este licentiata sub o licenta BSD permisiva si deci poate fi folosit atat in scop comercial cat si necomercial. YUI este sustinuta de dezvoltatori de la Yahoo!, unde codul YUI este folosit si imbunatatit pentru pagini care sunt vizitate de miliarde de ori in fiecare zi. YUI este din ce in ce mai cuprinzator, bine documentat si este sustinut de o cumunitate in crestere pe forumurile YUI.
YUI este distribuit de pepagina proiectului de pe SourceForge.
In cazul in care exista probleme de implementare comunitate YUI poate fi de un real folos si este deschisa la intrebari si sugestii pe forumurile YUI. Forumurile sunt cel mai bun loc unde se pot pune intrebari, se pot face cautari si cum mii intrebari au fost deja puse si au primit raspunsuri,o simpla cautare poate fi solutia la problemele aparute in cazul folosirii YUI.
O alta intrebare importanta este : YUI este suportata de toate browser-ele? Raspunsul ar fi: Nu; nu exista nici o librarie in intregime scrisa in JavaScript sau CSS care sa fie suportata de toate browser-ele, dar YUI este suportata de marea majoritate a browser-eleor care sunt folosite pe scara larga.
Pentru a fi la curent cu noutatile si cu update-urile care se fac periodic puteti sa va inscrieti la blogul YUI.

Toate aceste informatii au un caracter pur informativ, dar daca v-au trezit curiozitatea puteti afla mai multe direct de la sursa:http://developer.yahoo.com/yui/. Mie mi se pare aceasta librarie foarte interesanta deoarce in primul rand e gratis, e testata, ofera documentatie bine pusa la punct, daca dai de vreo problema poti afla raspunsul pe un forum pe care exista o comunitate numeroasa de dezvoltatori care folosesc libraria si in cazul in care problema nu a fost rezolvata poti oricand sa adaugi bug-ul descoprit in baza de date si astfel sa semnalezi problema care probabil o sa fie solutionata.Poate in urmatoarea faza a proiectului o sa incercam sa folosim si noi aceasta librarie.

Twitter & Twitter4J

Despre Twitter

Este un site de interconectare sociala, simplu din punct de vedere al structurii sale, informatia de baza pentru un utilizator fiind scurte mesaje ce le poate posta la un moment dat pentru a arata ce face el in acel moment. Acest lucru se poate usor observa inca de pe prima pagina a site-ului, unde apare o simpla intrebare: "What are you doing?" si posibilitatea de raspuns intr-un textbox. In ceea ce priveste relatiile sociale, se pot evidentia 2 liste de contacte: friends si followers. Friends sunt contactele carora userul curent le urmareste evolutia posturilor, pe cand un follower este exact opusul. Pe scurt, daca A este friend pentru B, atunci B este follower pentru A.


Despre Twitter4J

Pentru a putea integra intr-o aplicatie proprie informatiile si functionalitatile puse la dispozitie de Twitter unui utilizator inregistrat, acesta poate folosi cu usurinta API-ul dezvoltat de realizatorii site-lui. Dintre implementarile acestui API, una foarte accesibila si usor de utilizat este Twitter4J. Aceasta librarie poate fi utilizata pe orice sistem ce suporta Java (Windows, Unix), si in special versiunea 5.0 a acestei masini virtuale.
Cum se utilizeaza aceasta librarie? Nimic mai simplu decat includerea arhivei twitter4j-1.1.2.jar in classpath-ul aplicatiei si instantierea claselor puse la dispozitie. Clasa de baza folosita este numita chiar Twitter, si are un constructor ce primeste ca parametrii id-ul userului si parola asociata acestuia. Dupa ce se realizeaza autentificarea userului, se pot face diverse actiuni pe baza obiectului Twitter obtinut, de exemplu updatarea statusului curent:

    Twitter twitter = new Twitter(twitterID,twitterPassword);
 Status status = twitter.update(latestStatus);
 System.out.println("Successfully updated the status to [" + status.getText() + "].");

Libraria Twitter4J este un software opensource si poate fi folosit de toata lumea, atat in scopuri non-comerciale cat si comerciale.

flickrj for dummies

Ce este flickrj?

Flickrj este o librarie in Java care va ajuta sa lucrati cu API-ul flickr, fara a fi nevoie sa stiti cum se utilizeaza si ce face acest API. Puteti folosi flickrj pentru a obtine si prelucra informatii despre persoanele care au un cont pe flickr. In continuare voi numi flickrj - un API java pentru flickr, aceasta pentru a usura exprimarea.

Cum se foloseste flickrj?


Pentru extragerea si prelucrarea datelor despre utilizatorii unei comunitati m-am gandit sa-mi aleg comunitatea Flickr. Asa ca am intrat www.flickr.com/services/api ca sa downloadez API-ul pentru Java (daca intrati pe site veti vedea ca sunt puse la dispozitie API-uri pentru diferite limbaje de programare, oferta fiind extrem de variata). Acesta e primul pas, dar mai urmeaza alti cativa pasi pana a putea face de unii singuri o aplicatie care sa foloseasca acest API.

Pasul urmator este obtinerea unei chei si a unui secret de pe www.flickr.com/services/api/keys/apply pe care le veti folosi in aplicatia voastra atat pentru a va autentifica aplicatia( astfel sa obtina permisiunea de acces la datele de pe flickr), cat si pentru a crea instante ale unor obiecte definite in API. Dupa ce primiti cheia si secretul, in directorul "flickrapi-1.1\examples" din arhiva downloadata veti gasi un fisier sablon "setup.properties.example" pe care il veti folosi pentru a crea fisierul propriu de configurare "setup.properties" in care veti salva cheia si secretul pe care l-ati primit. Daca deschideti fisierul sablon indicat mai sus veti observa ca va mai trebuie si un token. De unde obtineti acest token? Ei bine va trebui sa compilati si sa rulati exemplul dat, "AuthExample.java" care se afla in acelasi director "flickrapi-1.1\examples". In timpul rularii veti obtine o adresa pe care o veti copia in browser si veti obtine tokenul. Dupa ce ati obtinut tokenul(si nu inainte) continuati cu rularea aplicatiei "AuthExample" prin apasarea tastei enter. Acum ca ati obtinut tokenul salvati-l si pe acesta in fisierul "setup.properties" creat mai devreme pentru a termina configurarea parametrilor necesari pentru a purcede la realizarea aplicatiei dumneavoastra.

Acum ca ati terminat cu partea de configurare cel mai util este sa va uitati pe cod si sa rulati exemplul "ActivityExample.java" de la care puteti sa si porniti propria aplicatie. In arhiva veti gasi si documentatia pentru pachetele si clasele din API. Din pacate aceasta documentatie este foarte sumara, in multe cazuri descrierea metodelor este inexistenta. Desi descrierea este absenta metodele au nume semnificative si intuitive ceea ce va poate fi de ajutor. Metodele din diferite clase si pachete care au utilizari similare au si denumirile similare. Un exemplu ar fi metodele care contin "Public" si care au ca parametru un user id; pentru aceste metode veti primi rezultate care se refera la utilizatorul dat ca parametru. Metodele care nu contin "Public" in nume va vor oferi date pentru user-ul default(user-ul care a autentificat aplicatia).

Una dintre primele greseli pe care le-am facut a fost sa cred, luandu-ma dupa nume, ca anumite clase sunt interfete doar pentru ca numele lor includea si cuvantul "Interfaces". Asa ca fiti atenti si nu va luati doar dupa aparente, cititi si din documente putinele date si informatii care va sunt oferite. Veti realiza la scurt timp ca API-ul ofera destule implementari si va veti obisnui cu el intr-un timp relativ scurt.

Acuma ca ati aflat unele lucruri, sper ajutatoare si care va vor face munca mai usoara, puteti sa va suflecati manecile, sa va "incalziti" degetele asa cum stiti mai bine si sa treceti la tastatura pentru a va compune opera.

Succes si spor la lucru!

WEB design

Ce este WEB design-ul?

Pentru a raspunde la aceasta intrebare trebuie intai sa vedem care sunt premisele aparitiei acestui fenomen. Cu totii traim intr-o lume dictata de economia concurentiala, o economie suprapopulata de produse si servicii in care fiecare ofertatant trebuie sa-si vanda produsele. Cum realizeaza ofertantul acest lucru?! Raspunsul, desi nu este singular, vine sub forma unui termen general: promovarea. A nu se identifica in mod gresit promovarea cu publicitatea, nu sunt unul si acelasi lucru. Promovarea nu inseamna a-ti face cunoscute produsele, ci mai degraba a te face cunoscut. Cum sa te faci cunoscut pe scara larga in conditiile economiei actuale?! Ce solutie iti ofera acces catre lumea larga, si ofera lumii largi acces catre tine?! Nimic mai simplu decat Internetul. Astfel a aparut ideea de web-design, din necesitatea de promovare pe scara larga.

Inainte de a prezenta cateva din ideile de baza ale web-designului, va voi spune cateva cuvinte despre termenul de brand. Este un termen pe care il intalnim la tot pasul, aproape in orice domeniu. Dar ce inseamna? Un brand este o intruchipare simbolica a tuturor informatiilor legate de o companie, produs sau serviciu, un detinator de baza al unui loc pe harta mintii consumatorului, titlu obtinut in general pe baza acumularii de experienta. Cum web-ul este o unealta cat se poate de utila si accesibila, in acest domeniu termenul de brand a evoluat intr-un nou termen: web branding. Acesta din urma este menit sa puna in evidenta pesonalitatea, sa transmita un mesaj, sa comunice valori, toate acestea cu ajutorul serviciilor oferite de Internet - conectivitate pe scara larga, tool-uri pentru crearea interfetelor cu utilizatorii, browsere web. Cand vorbim de web branding, vorbim despre simboluri definitorii, specifice, care pun in evidenta personalitatea si valorile, simboluri care in web se traduc prin fonturile folosite, cuvinte, nume, sloganuri, culori, imagini, logo si chiar sunete. Acestea, desi nu par atat de importante la prima vedere, sunt elemente care pe langa experienta, pun bazele notorietatii, si chiar increderii si loialitatii.

Pana acum am adus in discutie elemente referitoate la ofertant, insa nu am pus in evidenta un element foarte important, si anume elementul de cerere, utilizatorul. Orice producator cunoaste lozinca "Clientul nostru, stapanul nostru" si cum poate el respecta mai bine aceasta in web decat prin asigurarea confortului clientului. Confort intr-o pagina web nu poate insemna decat claritate si usurinta in accesare si in folosire, interactivitate si dinamism. Toate acestea sunt inglobate intr-un alt termen specific Internetului, si anume web development. Acesta este interdependent de web design, si pune la dispozitie solutii si tehnologii specifice Internetului pentru realizarea de interfete web - pagini web, tehnologii din care voi prezenta in post-uri viitoare.

ReEnventeaza-te!

Orice drum lung incepe cu un pas. Asadar iata primul pas: primul post pe acest blog.
Sa facem cunostinta. Noi suntem ReEnvent, mai exact Alex, Geo si Ionel.
Acest blog face parte din proiectul nostru pentru interfete web. Ne propunem sa va facem cunoscute cele mai noi tehnologii folosite in crearea de interfete web evoluate.
Deci stati pe aproape ca revenim indata cu noutati. Intre timp puteti da o fuga si pe site-ul nostru si sa ne spuneti cum vi se pare.