Prin urmare, dacă ai deja inclus jQuery în pagină (sau orice altă librărie), poți încropi un astfel de widget în câteva linii de cod. Să vedem despre ce este vorba!

Codul html

Codul HTML este foarte simplu: o listă:

<ul id="twitterUpdates">
	<li>Loading...</li>
</ul>

Acel li este necesar din două motive: 1) un ul gol nu ar fi valid; 2) trebuie să înștiințăm utilizatorul cumva că se întâmplă… ceva

Următoarele bucăți de cod sunt furate de undeva, dar… Nu prea mai știu de unde. Deși am vaga bănuială că direct de la twitter.

Funcția următoare transformă data din forma „Thu Jun 10 12:00:33 +0000 2010” în ceva mult mai drăguț, de genul „X hours ago”

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

Funcția următoare prelucrează răspunsul JSON venit de la twitter și îl injectează în lista de care am pomenit puțin mai sus.

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0, len=twitters.length; i<len; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitterUpdates').innerHTML = statusHTML.join('');
}

Nu uita să schimbi USER_ID cu user-ul tău de twitter. De asemenea, acel „3” din coadă reprezintă câte twit-uri vrei să afișezi.

$('#twitterUpdates').rdy(function() {
	$.getScript("http://twitter.com/statuses/user_timeline/USER_ID.json?callback=twitterCallback2&count=3");
});

Despre funcția rdy am povestit un pic aici.
Și gata.

Demo poți vedea în sidebar-ul blogului

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? ) 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 :

<span class="rating"><span style="width:25%"></span></span>

<span class="rating small"><span style="width:52%"></span></span>

Am specificat width inline din motive de… afişare. Fiecare stea înseamnă 20%. Astfel, trei stele înseamnă 60%, patru 80%, două 40% şamd.

Css-ul în schimb, e un pic mai lung de atât:

.rating,
.rating span {
	float:left;
	height:64px;
	width:320px;
	background:url(../images/stars.png) repeat-x left top;
	margin-right:1em;
}
.rating.small,
.rating.small span {
	height:16px;
	width:80px;
	background-image:url(../images/stars_mici.png)
}
	.rating span,
	.rating.small span {
		float:none;
		display:block;
		height:64px;
		background-position:left -129px
	}
	.rating.small span {
		height:16px;
		background-position:left -32px
	}

Ce se întâmplă?

1. .rating & .rating span:
2. Setăm fie float fie display:block pentru elementul ce conţine stelele. Astfel, putem specifica şi dimensiunile elementului
3. Setăm înalţimea unei stele şi lăţimea a cinci stele.
4. Setăm imaginea de fundal
5. .rating.small & .rating.small span
6. Fiind vorba de stele ceva mai mici, specificăm alte dimensiuni şi altă imagine

Cum votăm?

Avem două posibilităţi:
1) ne complicăm cu ceva cod html
2) ne complicăm cu ceva cod js ce injectează html

Mie îmi place mai mult cea de-a doua variantă. Prin urmare, modificăm puţin markup-ul iniţial în:

<span class="rating" id="stars-1"><span style="width:25%"></span></span>

S-a aduăugat id-ul din motive de… identificare. Vrem să trimitem serverului ce ID are fiecare stea. De aici, începe distracţia cu javascript

var removeThanks ='';
$('.rating:not(.ignore)').each(function(){
	var t = $(this);
	for(var i=1;i<=5;i++){
		$(document.createElement('a')).attr('href', '#').addClass('vot-'+i).appendTo(t);
	}
	t.addClass('active').find('a').click(function(){
		$.ajax({
			type: "GET",
			url: "vot.php",
			data: { nota:t.find('a').index(this), id:t.attr('id') },
			dataType:'json',
			cache: false,
			success: function(data){
				t.addClass('votat').find('span').width(data.votNou+'%');
				window.clearTimeout(removeThanks);
				$('.thanksForVoting').remove();
				$(document.createElement('div')).addClass('thanksForVoting').css({
					left:t.offset().left+t.width(),
					top:t.offset().top
				}).text(data.raspuns).appendTo('body');
				removeThanks = window.setTimeout(function(){
					$('.thanksForVoting').fadeOut(function(){$(this).remove()})
				}, 2000);
			}
		});
		return false;
	});
});

Explicaţii

• Iterăm fiecare element cu clasa rating dar fără clasa ignore. Astfel putem avea şi doar stelele afişate, fără să se întâmple nimic la click (de exemplu, stelele votate)
• În fiecare element rating injectăm cinci link-uri
• La fiecare link ataşăm un event click ce va face un request ajax spre server. Deoarece linkul de vot nu variază (sau cel puţin aşa ar fi normal), acesta este specificat direct în codul JS (vot.php)
• Trimitem către server ID-ul şi nota (de la 0 la 4) pe care s-a făcut click şi specificăm să primim datele înapoi în format json
• Actualizăm nota curentă (lăţimea span-ului) şi afişam noua notă (dacă s-a modificat)
• Dacă nu vrei să afişezi niciun mesaj, te poţi opri aici, ai terminat
• Pentru a afişa un mesaj, cea mai la îndemână soluţie (de care poţi fi sigur că nu-ţi strică layout-ul) este de a insera un mic tooltip la sfârşitul documentului şi a-l poziţiona absolut. Prin urmare, îl construim, îl umplem (cu text, desigur), îl injectăm şi îl ascundem (şi ştergem) după X secunde. În cazul de faţă două

document.createEle… ce?

Folosind jQuery ai trei posibilităţi de a include elemente în DOM:

1. $(‘<a></a>’).appendTo(element)
2. $(‘<a/>’).appendTo(element)
3. $(document.createElement(‘a’)).appendTo(element)

Chiar dacă cea de-a treia variantă pare mai lungă, este un pic mai rapidă. Am listat metodele în funcţie de viteză, prima fiind cea mai înceată.

Deoarece injectăm cod html nou, trebuie să-l stilizăm cu puţin CSS suplimentar (ce nu cred că are nevoie de explicaţii suplimentare):

.rating.active {
	position:relative;
}
	.rating.active a {
		position:absolute;
		left:0;
		top:0;
		height:100%;
		background:url(../images/stars.png) repeat-x left -999px;
	}
	.rating.active a:hover {
		background-position:left -64px
	}
	.rating.small.active a {
		background:url(../images/stars_mici.png) repeat-x left -999px;
	}
	.rating.small.active a:hover {
		background-position:left -16px;
	}
	.rating.active a.vot-1 {
		width:20%;
		z-index: 10;
	}
	.rating.active a.vot-2 {
		width:40%;
		z-index: 9;
	}
	.rating.active a.vot-3 {
		width:60%;
		z-index: 8;
	}
	.rating.active a.vot-4 {
		width:80%;
		z-index: 7;
	}
	.rating.active a.vot-5 {
		width:100%;
		z-index: 6;
	}
.thanksForVoting {
	position:absolute;
	background:#fbffde;
	z-index: 11;
	white-space:nowrap;
	border: 1px solid #999;
	-moz-border-radius:3px;
	-webkit-border-radius: 3px;
	border-radius:3px;
	padding:3px;
	font-weight:700;
	font-size:10px;
}

Răspunsul de la server (care am zis la început că este json) :

({
	raspuns : 'Mulţumim pentru vot',
	votNou	:	'50' // în procente
})

Atenţie! Nu uita să faci escape la ghilimelele din text (dacă foloseşti).

Cam asta e tot. Ţi-am arătat cum poţi face un simplu sistem de vot cu câteva linii (şi jQuery, desigur), fără să încarci inutil codul HTML. Dezavantajul MAJOR al acestei metode este că, în cazul în care nu se încarcă vreun fişier javascript, votul NU va funcţiona. Soluţia? Pui codul (da, cel pe care îl injectăm) direct în html