O să învățăm acolo despre social media, user experience design și multe altele. Iar după putem să și petrecem, că e Halloween!

Detalii despre eveniment aici.

Așa că ne vedem acolo!

În primul rând o să fac o listă cu necesitățile pentru a face chestia să funcționeze:

• ultimul release jQuery (in acest moment v1.3.2)
• vreo 20minute libere

Bun, acum trebuie să facem o simplă listă neordonată. Asta ar arăta în felul următor:

 
<ul id="unordered_list">
<li class="current">Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
 

ID-ul listei si clasa primului element din listă ne vor folosi puțin mai târziu când ne vom "plimba" prin listă cu Javascript, așa că luați-le "as is". Și dacă tot ne vom juca prin elemente ar fi bine să definim o clasă de CSS pentru elementul curent. Eu am fost puțin mai interesat de subiect decât de felul în care arată așa că am făcut următoarea clasă:

.current { background: yellow; }

Bun, acum nu ne mai trebuie decât 4 butoane: pentru a adăuga elemente, pentru a șterge elemente, pentru a trece la elementul următor și la cel precedent. Asta s-ar traduce prin:

 
<input id="add" type="button" value="Add new item" />
<input id="remove" type="button" value="Remove item" />
<input id="prev" type="button" value="Previous item" />
<input id="next" type="button" value="Next item" />

În acest moment suntem gata să scriem Javascript. Două funcții importante pe care le vom folosi în exemplul de mai jos sunt cele care îmi vor întoarce numarul elementelor din listă și poziția elementului curent.

function ul_size()
{
	var size = $("#unordered_list").children('li').size();
	$(".size").text('Size: '+size);
 
	return size;
}
 
function ul_pos()
{
	var current_pos = $(".current").prevAll().length;
	$(".current_pos").text('Current: '+current_pos);
 
	return current_pos;
}

Puteți ignora momentan metoda .text(). Pe scurt, funcția ul_size() numără elementele de tip li din lista noastră, iar funcția ul_pos() numără toate elementele dinaintea celui curent. Acum mai trebuie doar să adăugăm acțiuni pe cele 4 butoane de care vorbeam mai sus.

$("#add").click(function ()
{
	var size = $("#unordered_list").children('li').size();
	$("#unordered_list").append('
<li>Item '+size+'</li>
 
');
 
	ul_size();
});
 
$("#remove").click(function ()
{
	if(ul_size() != 1)
	{
		$("#unordered_list li:last").remove();
		ul_size();
	}
});
 
$("#prev").click(function ()
{
	if(ul_pos() != 0)
	{
		$(".current").removeClass('current').prev('li')
                     .addClass('current');
		ul_pos();
	}
});
 
$("#next").click(function ()
{
	if(ul_size() &gt; ($(".current").prevAll().length)+1)
	{
		$(".current").removeClass('current').next('li')
                     .addClass('current');
		ul_pos();
	}
});

Am pregătit și un exemplu pe care îl puteți vedea aici.

Dacă aveți întrebări, comentarii sau sugestii, folosiți formularul de mai jos.

UPC, adevaratul internet carat cu roaba!

În general nu prea îmi scriu eu frustrările de zi cu zi pentru că probabil aș ajunge să am o listă destul de impresionantă, dar a venit momentul când pur si simplu nu mai suport. Azi este o zi ca oricare alta, cel puțin pentru mine. M-am trezit, m-am dus la job, mi-am făcut datoria față de cei care au grijă ca și mâine să-mi pot procura cele necesare pentru a trai, iar apoi am ajuns acasă. Acasă însemnând micul meu apartament cu 2 camere în care îmi petrec serile liniștite și diminețile agitate de alarma telefonului. Îmi place aici. Nu e încă așa cum îmi doresc, dar sunt pe drumul cel bun.

Și se face că într-o frumoasă zi de septembrie a anului care tocmai s-a încheiat mi-am făcut un abonament de internet. Sunt un geek. De când am descoperit ce-i aia internet și cu ce se mănâncă am facut cam tot ce mi-a stat în putință să fiu on-line. Încă îmi aduc aminte de nopțile pierdute rugându-mă de dial-up-ul de la XNET să meargă și să se conecteze mai repede, de facturile kilometrice pe care le primeau ai mei de la Romtelecom și de momentele când improvizam ca sa fentez taierea cablului care facea legatura între priza telefonică și minunatul meu modem. Good ol' days.

Timpul a trecut, apa din Dâmbovița a tot curs și iata-ne în 2009. În continuare programez, în continuare internetul a ramas aceeași nevoie zilnică (poate sună ciudat și obsesiv, dar ăsta e adevărul și nu am de ce să mă ascund). Revenind, în acea frumoasă zi de septembrie mi-am vândut sufletul la UPC pentru un abonament "Large" (20Mbps) din motive simple: nu aveam alta opțiune în zonă exceptând Clicknet de care sunt oarecum rezervat și care nu mi se pare o alternativă prea bună. Cu întârzierea de rigoare minunatul internet mi-a fost montat. Happy, happy, joy, joy! Numai că unul din cabluri n-a fost montat corect in cutie, așa că am mai așteptat câteva zile să vină cineva să-l pună corect, că deh, la UPC toată lumea din teren e ocupată. Mă rog, cert e că după ce a fost montat corect, netul a început să meargă. Încet, dar mergea.

Așa că am făcut o a doua sesizare, însă problema nu s-a rezolvat, totul era bine, însă de mers tot prost mergea (la început 1Mbps, adică dacă aveam noroc downloadam ceva cu peste 100KB/s și în câteva minute poate se încărca un clip de pe YouTube). Parcă era SF. Toți ziceau că modemul e ok, totul e ok și ar trebui sa-mi meargă cel puțin decent. Însă nu o facea. Și acest lucru s-a repetat de câteva ori...

Ceea ce ne aduce în ziua de azi, minunata zi de azi...când după ultima intervenție de ieri am vazut pentru prima data în 5 luni de zile într-un speedtest metropolitan o valoare in kbps de 5 cifre (in jur de 17mbps pe Alsys). Este evident că aseară când m-am întors acasă se "reglase" la obisnuitul 2500-3000kbps. Dar astăzi...astăzi n-a mai mers deloc. Rectific, nu mai merge deloc! (pentru ca acum scriu de pe un Orange 3G, care, vă vine să credeți sau nu, merge de multe ori mai bine ca "Large"-ul de la UPC). Bun, deci nu merge netul, hop pe telefon și să formăm numarul magic 031 1000 872 urmând shortcut-ul 133 (deh, când sun aici mă simt ca acasă pentru că nu mai am mult și cred că o să ies la bere cu băieții/fetele de la support). Aici mi se spune că într-adevăr modemul meu e picat (complex dom'ne, nu mi-aș fi dat seama) și că e o problemă pe zonă.

Bun, trecem mai departe, parcă m-ar mânca să renunț la contractul ăsta, prea multe bătai de cap, poate mai bine îmi pun un net business sau pe lânga abonamentul de date de la Orange caruia îi fac tethering pe laptop îmi iau unul numai pentru laptop și am terminat povestea (pe scurt, sunt client Orange de peste 4ani și nu cred că am sunat niciodată la ei pentru o problemă). Așa că încerc să mă informez care sunt clauzele în cazul în care renunț la contract: platesc 400RON, câte 200 pentru fiecare serviciu pe care îl am (TV și net, ca net fără TV nu se poate), după care o întreb frumos pe domnișoara de la UPC să-mi zică și mie câte reclamații valide am făcut eu de când sunt abonat UPC, și dacă nu cumva numărul lor influențează suma de plătit în favoarea mea. Mi-a zis că nu știe dacă mă ajută la ceva, dar numărul lor este de 17, fără să punem la socoteală pe cea pe care tocmai o desfășuram. Mișto nu? Asta înseamnă 3.6 reclamații/lună, adică aproape o reclamație pe săptămână...

Acum o să vă dau niște bucăți dintr-un mail pe care un angajat al lor de la support mi l-a dat referitor la discuțiile asupra uneia din sesizările mele, destul de recentă. Mulțumesc cu această ocazie domnului Claudiu Corches.

From: Claudiu.Corches@upc.ro
Subject: explicatii
Date: February 15, 2009 8:14:32 PM EET
Received: from mx2.upc.ro (mx2.upc.ro [86.105.68.243]) by mx.google.com with ESMTP id 22si3742292bwz.110.2009.02.15.10.14.33; Sun, 15 Feb 2009 10:14:34 -0800 (PST)

** PHONE LOG 24-01-2009 12:03:31 dilea
Clientul reclama nefunctionarea internetului in parametri. Va rog verificati si contactati clientul pentru confirmare.Multumesc frumos.

*** NOTES 26-01-2009 12:26:46 rfalnicu Action Type: Comments
retea ok, diferenta mare intre CNR si SNR pls reglati si nivele semnal modem Rx sa fie aproape de 0 dBmV
SNR NOD US phy MER(SNR)_estimate for good packets - 32.3012 dB
TxPower                   = 53.7 dBmV
RxPower                   = 11.8 dBmV
Signal to Noise Ratio     = 37.9 dB
CNR Modem Upstream Power : 0.00 dBmV (SNR = 24.47 dB)
Total Time Online                   : 1d10h5m
la un flood pe modem abia atinge 11Mbps din 20

*** NOTES 27-01-2009 18:11:55 ccepoi Action Type: Comments
Semnalele pe acel modem sunt ok, incarcarea nodului insa nu, este incarcat aproape 100%, de aceea intra in congestie si nu ii functioneaza nici clientului cu 20Mbps

Așa că priviți și voi ce zice UPC-ul: nodul e atât de încărcat încât nici când au dat flood în IP-ul meu n-au reușit mai mult de 11Mbps, dar eu totuși platesc 20Mbps (best effort) și de obicei îmi merge cam la 10% din capacitate. Asta e din seria "noi luăm banii, dă-l în mă-sa pe client".

Și uite că așa am ajuns și la concluzia din titlu: UPC, adevăratul internet cărat cu roaba!

Vă las să vă delectați mai jos cu un speedtest făcut cu București într-una din zilele obișnuite. Și nu uitați: UPC SUNT CEI MAI TARI! NOT!!!

Și ca să nu vă fac să așteptați prea entuziasmați (glumesc ), primul tutorial va fi de jQuery și php, un mic și eficient sistem de chat. Poate nu pare prea impresionant, dar o să vă conduc prin toată logica din spatele lui. Pentru fanii de engleză (și sigur se vor gasi câțiva), voi încerca să pun și o versiune în "english" a articolelor, poate mai vor și vorbitorii de alte limbi să învețe niște lucrușoare interesante!

În altă ordine de idei, urmează să vedeți pe aici și niște screencasturi destul de interesante (zic eu) despre un framework foarte inteligent de php, companionul meu de zi cu zi în ultimele luni.

Acestea fiind zise, dacă aveți sugestii sau idei pe care am putea să le dezvoltăm împreună și mai apoi să le prezentăm "disecate" publicului, folosiți cu încredere formularul de mai jos!

Enjoy!

Azi a fost ziua cea mare: verificarea "prăzii". Am găsit nu mai puţin de 18 lucruşoare acolo dintre care amintesc: 1 bucată scrisoare cu promoţie de la ING (banca ale cărei servicii le folosesc cel mai des), 2 x cereri de închiriere/cumpărare apartament în bloc iar restul de 15 erau pur si simplu SPAM.
Ca să fiu mai bine înţeles puteţi vedea mai jos concluzia micului meu test.

Continutul cutiei postale

Profilul SPAM-ului

Acestea fiind zise, eu aş vrea să văd rezultatele acestui test şi la voi! Oricine vrea să încerce, doar lasaţi-mi un semn ca să văd şi eu ce veţi avea voi in cutiile poştale dupa 7zile.
O să "dau mai departe" la Alex Buga, Andi Stancu, Beavy, Brayn şi Sorin Vasilescu rugămintea de a realiza experimentul şi aştept cu nerabdare să văd rezultatele!

Aşa că staţi pe aproape!

Acestea fiind zise, astăzi o să facem următoarele:

• o să stilizăm un tabel obişnuit (CSS aplicat cu jQuery)
• o să-i dăm o notă mai accentuată rândului pe care ne poziţionăm mouseul
• o să-i adăugăm un selector

Bun, să începem cu tabelul. Eu am făcut un tabel obişnuit cu nişte valori random. Rezultatul îl puteţi vedea mai jos.

 
<table>
<tbody>
<tr>
<th>first name</th>
<th>last name</th>
<th>city</th>
</tr>
<tr>
<td>john</td>
<td>doe</td>
<td>the "big apple"</td>
</tr>
<tr>
<td>anne</td>
<td>robinson</td>
<td>the city of angels</td>
</tr>
</tbody>
</table>
 

Bun. Acum o să facem câteva clase CSS pentru tabelul nostru. În primul rând ne trebuie o clasă pentru rândurile pare şi una pentru rândurile impare ca să-i dăm un mic contrast să poată fi citit cu uşurinţă. ( Ca sugestie, încercaţi să faceţi abstracţie de culori pentru că nu prea sunt "pe domeniul meu" )

.odd { background: #D1E6E7; }
.even { background: #94d1e6; }

Acum să facem ceva ca să dăm o notă mai accentuată rândului peste care ţinem mouseul. Voi denumi această clasă mouseover.

.mouseover { background: #fff395; }

Şi suntem aproape gata...ne mai trebuie totuşi o ultimă clasă care să ne permită "selectarea" rândului dorit. O să-i spunem click.

.click { background: #feb40c; font-weight: bold; }

Ok, acum deţinem tot CSS-ul de care avem nevoie, urmează să-l convingem pe jQuery să facă treaba în locul nostru În principiu azi o să folosim funcţiile addClass(), removeClass(), mouseover(), mouseout() şi toggle(). Documentaţie pentru ele găsiţi pe documentaţia jQuery.

Să ne gândim cam ce ar trebui să facem noi cu jQuery...în primul rând să asociem clasele odd şi even rândurilor de care aparţin (în speţă, cele impare şi cele pare), să punem clasa mouseover pe aceste rânduri când trece mouseul, şi s-o scoatem când nu mai e mouseul deasupra. Acest lucru se face cam aşa:

$("tr:even").addClass("even")
.mouseover(function () { $(this).addClass("mouseover"); })
.mouseout(function () { $(this).removeClass("mouseover"); });
 
$("tr:odd").addClass("odd")
.mouseover(function () { $(this).addClass("mouseover"); })
.mouseout(function () { $(this).removeClass("mouseover"); });

Ne mai rămâne să facem "selectorul". Ideea e simplă: când dai click pe un rând îşi schimbă culoarea, iar când faci al doilea click pe acelaşi rând revine la normal. jQuery are implementată o funcţie care se cheamă toggle() şi care face exact ce ne trebuie! Haideţi să vedem cum arată...

$("tr").toggle(
function ()
{
	$(this).addClass("click");
},
function ()
{
	$(this).removeClass("click");
}
);

Şi cam asta a fost tot! Nu-mi spuneţi că vă aşteptaţi să fie mai complicat E destul de simplu când foloseşti o librărie care-şi uşurează munca.

Ok, acum haideţi să vă arăt şi rezultatul final. Pentru a vedea mai multe detalii nu vă rămâne decât să vă uitaţi peste sursă. Pentru alte detalii, formularul de jos vă aşteaptă să-l folosiţi!

Pentru început aş avea nevoie de câţiva doritori care să facă un beta-test la acest plugin (care vă asigur că satisface cam toate nevoile legate de Twitter pe care vi le-aţi dori pe blog, poate în versiunea finală chiar şi altele noi). Oricine e doritor să fie printre testeri să lase un comentariu în formularul de mai jos cu o adresă de mail validă şi eventual link-ul către blogul personal şi eu o să vă contactez.

În data de 15 octombrie 2008 îmi propun ca plugin-ul să iasă din development cu un v1.0 final, dar până atunci dacă am nişte `ajutor` în testing mi-ar fi mult mai uşor.
Deci haideţi să începem...

WV Passat

După lecţiile astea scurte de jQuery, să ne mai şi amuzăm puţin, zic. Din seria `românul nu ştie ce conduce, dar se dă mare cu ea` vă invit să vă uitaţi la poza din stânga şi să reperaţi porumbelul scos de acest proprietar...

Spoiler: `Wolksvagen` izbit în zid.