Interfete web pentru prezentari

De mult timp ma uit pe web pentru a gasi ceva cu adevarat original... tot ce exista e deja afumat... deja toata lumea stie... ideile se repeta sub diferite forme...

Azi am dat peste ceva special... o interfata web 2.0 speciala... m-a surprins prin originalitate... in sfarsit o idee... in sfarsit ceva care m-a uimit!

Este vorba de prezi, o aplicatie cu o interfata web realizata in flash, care m-a facut sa cred ca web-ul a facut un mare pas inainte...

Prezi este un fel powerpoint, o aplicatie web cu care se pot face prezentari, dar la puterea a 3-a. Ceea ce Microsoft nu a reusit sa faca intr-o aplicatie desktop, au reusit sa faca acesti baieti intr-o aplicatie web.

In continuare, vreau sa va arat o prezentare realizata cu Prezi. Intrati aici, si va minunati de puterea interfetelor web.

Interfata web realizata in Flex

Intr-un articol de pe site v-am prezentat cateva notiuni introductive despre Flex; ce este, ce poate sa faca, de ce Flex si tot asa.
Am considerat ca modalitatea cea mai buna de a intelege cu adevarat despre ce e vorba in aplicatiile Flex este sa construim o aplicatie de acest gen.
Asa ca voi incerca sa va duc pe "meleagurile" unei interfete realizate cu Flex.

First of all instalati eclipse de aici http://www.eclipse.org/
Second of all instalati Adobe Flex Builder 3 plug-in pentru eclipse de aici http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

Dupa ce ati realizat cele de mai sus incercati sa faceti inconjurul Tour de Flex. Si daca va place
ce ofera instalati-l.Tour de Flex se prezinta ca un meniu de unde puteti alege una din componentele Flex (controalere ui,containere,chart-uri,validari,efecte) si sa ii vizualizezi design-ul si codul din spate.In principiu Tour de flex este o chestie dezvoltata recent de cei din echipa Flex pentru a ajuta programatori in a avea o experienta mai usoara cu Flex.
Salut ideea lor si mi se pare foarte tare, pe mine cel putin m-a ajutat.

Aplicatia creata este una destul de banala pentru ca are ca scop introducerea cu elementele oferite de Flex. Tot ce am facut a fost sa dau copy-paste la bucati de cod din cadrul unor componente din tour de flex si sa fac o interfata. Pretty simple nu?
Am combinat 2 componente un treeview si tabnavigator. Schimbarile pe treeview se intampla pe evenimente declarate in CDATA.
Am atasat exemplu aici. Take a look.
Puteti sa realizati interfata dorita fara prea multe dureri de cap, toate cu ajutorul lui Tour de Flex si un mediu de dezvoltare ca eclipse. Incercati :)

Interfete web in GWT

In ziua de astazi folosim din ce in ce mai multe aplicatii web cu interfete cat mai complexe. Avem servicii gen: Youtube, Yahoo Mail, Google Docs, etc ...

De ce interfetele web realizate in GWT sunt cea mai buna alegere pentru echipele de dezvoltatori care cauta sa construiasca solutii de complexitate mare?

Pentru ca framework-ul GWT faciliteaza scrierea aplicatiilor web folosind AJAX, permitand astfel dezvoltatorilor sa scrie aplicatii in limbajul Java folosind clasele oferite de GWT. Este un lucru foarte bun, pentru ca nu mai esti nevoit sa scrii aplicatii in JavaScript, ci direct in Java. Iar conceptele de baza pentru interfata cu utilizatorul sunt foarte asemanatoare cu Java Swing.

De asemenea ofera componente de interfata dinamice, metode RPC(“remote procedure call”) pentru comunicarea intre server si aplicatie, compatibilitate cu toate browserele,etc.

Nici unul dintre noi nu poate anticipa pe viitor, viitorul GWT, dar pot sa va spun ca angajamentul Google de la sprijinirea GWT de pana acum a fost pur si simplu minunat. Monitorizarea GWT pe forumul de colaboratori este un bun mod de a te familiariza cu aceasta tehnologie si de a te convige ca aceasta tehnologie sta in picioare si este viitorul interfetelor web.
Va recomandam sa verificati forumul pentru va face o idee referitoare la nivelul de trafic pe care il au.

A fi bun in ceea ce faci

Echipa Absolute Web va ureaza "La multi ani" si un an bun.
Si ca sa fim in trend cu ideea de a trage linie si a concluziona voi posta un fel de list.
Dar nu orice list , ci o lista despre website-uri ce ne vor ajuta sa fim mai "buni" in ceea ce facem.
Nu este creatia mea, expertiza in domeniu nu este destul de vasta ca sa imi permita o abordare asa ampla a problemei, dar am considerat-o helpfull.
Ajunge cu introducerea sa intram in cuprins.
Aceste site-uri vorbesc despre design de interfata, uzabilitate, experienta utilizatorului si cam tot ce tine de imbunatatirea experientei utilizatorului cu interfata.

1. Boxes and Arrows - gasiti articole despre uzabilitate, design si chiar exemple despre cum sa contruiti de exemplu o aplicatie email online.
   
2. UX Magazine - motto-ul lor este "User experience is everything" , si se pot gasi articole despre designing in layers si design tips pentru programatori.
3. UXmatters - dintre topicurile atinse se gasesc aplicatii in web 2.0 , uzabilitate , cum ajuta RIA utilizatorii si uzabilitatea formurilor de search.
4. A List Apart – in partea de User Science se gasesc 3 categorii in infos care v-ar interesa.
5. Usability post - este un blog despre uzabilitate; articolele din el sunt foarte practice.
6. Usability counts - este un blog al lui Patrick Neeman si Ha Phan, consultanti despre experienta utilizatorilor.
7. Usable web - este o colectie de linkuri despre UI design; nu mai este updated insa se gasesc link-uri despre tot ce tine de ui.
8. User Interface Engineering - este firma care tine conferinta anuala de UI. Articolele, podcasts acopera o paleta larga de topicuri practice ce tin de UI.
9. Useit.com - este blogul lui Jakob Nielsen, un expert in uzabilitate. Check out sectiunea Alertbox.
10. Designing Interfaces - Este o carte online ce are la baza O’Reilly’s Designing Interfaces: Patterns for Effective Interaction Design

Mai sunt cateva site-uri interesante dar am vrut sa fac un cliseu si sa ma opresc la 10. Le puteti vedea pe cele de mai sus si altele la adresa http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-master-user-interface-design/.
Un sfat acum la final. Bookmark them :)

SmartGWT - interfete web extrem de evoluate

Pentru cei care dezvolta interfete web cu ajutorul GWT, a aparut o noua librarie, cu ajutorul careia se poate crea foarte rapid partea de view a unei aplicatii web. SmartGWT este o librarie construita pentru a putea fi folosita cu ajutorul datelor luate de pe un server. In ultima vreme au aparut mai multe librarii de widgets, care arata foarte bine, dar carora le lipseste ceva, componenta de propagare a datelor modificate de client, pe server. Partea cea mai grea in construirea unei aplicatii enterprise, consta chiar in aceasta problema. SmartGWT a fost dezvoltata cu acest lucru in minte.

Pe langa faptul ca ne ofera o multime de widgeturi foarte atragatoare, SmartGWT ne ofera o solutie completa pentru programarea de interfete web, intr-un mod foarte placut.

Pentru a va face o idee asupra acestei librarii, aruncati o privire asupra paginii de samples. O sa ramaneti placut impresionati.

Interactiunea cu interfetele

Pana acum, pentru interactiunea cu interfetele web am folosit un mouse, o tastatura. Aceste device-uri au fost introduse de designerii de computere din necesitate. In acele momente, erau necesare device-uri speciale pentru a putea "comunica" cu computerul. Nu exista tehnologia necesara pentru o interactiune naturala cu interfetele! In acest moment, tehnica a evoluat, asa incat, in curand vom arunca la gunoi mouse-ul si tastatura (sau le vom expune in muzee).

Doresc sa prezint o interfata noua cu calculatorul, si anume introducerea conceptului de "haptic". Haptic vine de la cuvantul grecesc "haptesthai" care inseamna atingere (touch). Dar destul cu vorbele, aceste interfete avansate merita vizualizate!

Facebook isi prezinta vizual activitatea

Tim O’Reilly a definit Web 2.0 ca "o atitudine nu o tehnologie" si adevarul este ca tranzitia de la Web 1.0 la Web 2.0 s-a realizat aproape fara sa-ti dai seama. Este uimitor cat de mult a revolutionat internetul cumunicarea globala in ultimii ani. Si cum eu admir conceptul şi interfata web Facebook...

Un video lansat de site-ul de retele sociale Facebook arata cum web-ul a facut comunicarea la nivel global o parte din viata de zi cu zi. Acest video face parte dintr-un mic proiect numit PALANTIR (in momentul de fata exista doar versiunea demo) care prezinta activitatea Facebook de pe intregul glob, cuprinzand in plan vizual si geografic hartile de interactiune dintre utilizatorii site-ului. Spre exemplu, mesajele de la un user la altul sunt exprimate prin intermediul unor puncte luminoase care zboara intre tari. Alta activitate precum updatarea statusului este exprimata pe glob prin niste puncte albe care se ridica in spatiu de la locatia utilizatorului.De asemenea se pot vizualiza pe masura ce se creaza, legaturile dintre utilizatorii aflati in diferite puncte de pe glob.

jQuery

O unealta foarte mediatizata si puternica in dezvoltarea interfetelor web este jQuery. M-am gandit sa fac o prezentare asupra acestei tehnologii ( care de fapt are in spate un simplu script javascript).

Jquery este o librabrie JavaScript open source. The main purpose..este sa gaseasca si sa manipuleze elemente html folosind un numar minim de linii de cod. Asupra acestor elemente se pot aplica comenzii de diverse tipuri like animation(slide-up).Rezultatul unei comenzi poate fi pasat altei comenzii si tot asa.


M-am uitat pe mai multe site-uri cu exemple de Jquery si am create 6 pagini html ce folosesc cateva plugin-uri.

Plugin-uri folosite in exemple:

1. DatePicker - poate fi customizat prin selectia de data ranges ,se gaseste in mai multe limbi.
2. InnerFade - ascunde alternativ elemente in cadrul unui container.
3. BlockUI - simuleaza comportamentul sincron atunci cand AJAX este folosit fara a bloca browserul. Cand este activat nu va permite accesul userului asupra paginii sau a unei parti din pagini pana atunci cand este dezactivat.
4. TableSorter - transforma un tabel HTML cu THEAD si TBODY intr-o tabela sortabila fara refresh-ul paginii.
5. Superfish Menus - transforma o lista neordonata intr-un meniu, cu hover effect,animatii simple.Poate fi configurat orizontal si vertical. Se pot folosi fisiere css pt customize.Poate fi folosit pentru a creea meniu de navigare pentru pagini,bazate pe XML Web.SiteMap.
6. Query quickSearch - merge atasat la o tabela,lista,set de paragrafe cu un search field(textbox) deasupra sau dedesubt acestor elemente.Atunci cand sunt introduse caractere in texbox filtrarea pe tabela etc, se face in timp real.

Exemplele le puteti gasi la arhiva exemple_jquery .
Puteti gasi mai multe exemple folosind jQuery la http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html .
Un sfat acum, pana nu va uitati pe exemple sa vedeti cum va poate ajuta jQuery in dezvoltarea de interfete web nu veti intelege cu adevarat his meaning. Se pot face chestii foarte ok cu el, you just need to try it.
Enjoy now :)