Sistem simplu de votare (rating)

În urmă cu câțiva ani s-a făcut mare tam tam cu web 2.0. Internetul s-a reinventat, gradul de implicare al utilizatorului a crescut, iar tehnologiile au început să fie folosite la adevărata loc capacitate. Dacă înainte de 2003-2004 termenul de aplicație web nu exista decât pe hârtie (probabil), după 2004 google a dat startul cu binecunoscutul gmail, ducând web mailul la un nivel la care hotmail sau yahoo! nici nu visau (începând de la organizarea mesajelor – care între noi fie vorba, a fost preluată de microsoft în office 2010 – și terminând cu capacitatea de stocare).

Ce a reprezentat această revoluție 2.0? În principiu, modul în care utilizatorul final interacționează cu un site. Astfel au apărut wikipedia (un site unde utilizatorii pot scrie articole), youtube (unde utilizatorii generează conținutul) sau blogurile (unde vizitatorii pot comenta pe marginea unui articol). O altă funcție care a apărut pe multe site-uri sunt voturile. Steluțele alea mici prin care apreciezi calitatea articolului sau a filmului postat. Și cum sunt mulți care nu știu să le folosească, m-am hotărât să scriu un mic articol. Metoda mea mi se pare cea mai curată (din punct de vedere al codului folosit) din cele existente. De asemenea, îți voi arăta și cum să faci un request ajax (se poate să vorbim de web 2.0 fără să amintim de ajax? :D ) pentru a trimite serverului ce a votat utilizatorul și să returnezi un mesaj din partea serverului folosindu-te de JSON. Desigur, va trebui să faci procesarea voturilor pe server, cu limbajul preferat (php, asp, ruby etc) deoarece cunoștințele mele de programare server side sunt destul de limitate.

Avem nevoie de o imagine cu „stările” steluțelor (pot fi frunze, pisici, pahare, etc). De ce trei? Una pentru background (cea albă), una pentru hover (cea galbenă) și una pentru a arăta votul curent (cea roșie). Desigur, dimensiunile rămân la discreția fiecăruia, ajustându-le în funcție de necesități. De asemenea, se pot folosi și trei imagini separate, chiar dacă nu este recomandat.

Folosind această imagine (și încă una, mai mare), îți voi arăta cum să încropești rapid un sistem de vot foarte simplu.

Markup

Fie că vrei să faci un sistem de votare, fie că vrei doar să afișezi media voturilor, markup-ul e același: două span-uri :
Citeste mai departe »

Taburi cu CSS și jQuery

Taburile reprezintă o modalitate foarte eficientă de organizare a informației. Prima dată când le-am văzut au fost prin Windows 95 și de atunci… N-am mai scăpat de ele. În editoare text, în browsere, mai nou în Adobe CS4, taburile te ajută să organizezi eficient – în funcție de anumiți factori – câteva pagini de informație.

Având în vedere că de câțiva ani se tot încearcă o migrare a aplicațiilor desktop spre online (într-o măsură mai mare sau mai mică), taburile nu puteau lipsi. Fie că sunt cât se poate de seci, încărcând fiecare pagină în parte (cu un refresh al browserului), fie că sunt bazate pe AJAX, încărcând doar conținutul tabului, fie că pur și simplu se află în sursa paginii ascunse iar utilizatorul le vede după ce face un click, taburile există și pe online.

Ca utilizator, taburile sunt foarte simplu de folosit. Dar ca programator, oare cât de simplu sunt de implementat?

Partea ușoară (și nu neapărat cea mai bună)

Cea mai ușoară metodă de a implementa într-un proiect taburi ar reprezenta-o folosirea unei librării gen jQuery UI. Desigur, dacă nu te deranjează să încarci 20kb jQuery și încă vreo 20kb UI (tabs), plus ceva CSS (nu neapărat necesare). Dar hei, ai o grămadă de opțiuni, events și metode pe care oricum nu le vei folosi decât foarte rar (spre deloc, îți spun din experiență).

Partea un pic mai… „grea”

Ce-ar fi dacă… Îți scrii singur o funcție pentru taburi (desigur, nu cu atât de multe opțiuni cum are UI)? Nu sună prea tentant, nu? Dar dacă ți-aș spune că poți face asta în câteva linii de cod scrise răsfirat ? Deja ți-am stârnit interesul! Pentru că, așa cum știe toată lumea, mai puțini KB înseamnă o factură mai mică (la hosting) și un utilizator ceva mai fericit că se încarcă site-ul mai repede. Desigur, la 2-3000 unici/lună nu e mare brânză, dar ia gândește-te la un site cu peste 100.000 unici/lună, ar însemna o economie de vreo 2gb (cel puțin!).

Mark-up

Să vedem cu ce ne murdărim pe mâini. Începem cu puțin html:
Citeste mai departe »

Clienții ăștia…

Fără alte comentarii:

via.

windows apple dropbox facebook twitter