Shortcodes în wordpress

Written on October 30th, 2009 by Staicu Ionuț-Bogdan

Wordpress permite, printre altele, folosirea codurilor scurte (shortcodes). Ce sunt acestea? Un [text cuprins între paranteze pătrate] ce este parsat de server în diferite feluri. Şi îţi voi arăta două feluri în care am folosit shortcodes pe blogurile mele: pentru Amazon S3 şi pentru tag-ul acronym.

Amazon S3

Fiind proaspăt mutat pe Amazon S3 şi fiind găzduit pe un cont de găzduire shared, nu prea pot modifica CNAMES pentru a avea un subdomeniu. Prin urmare, link-ul spre S3 arată ceva de genul:

http://content.iamntz.com.s3.amazonaws.com/blog.iamntz.com/imagine.jpg

Desigur, aş putea ţine minte (într-un final) ditamai cârnatul. Dar.. De ce aş face-o? În plus, ce s-ar întâmpla în momentul când mă zgârcesc şi nu mai vreau să plătesc ~50 cenţi/lună către Amazon? S-ar cam duce dracu toate imaginile. Prin urmare, am făcut un shortcode ce îmi permite să adaug o imagine într-un mod foarte simplu:

[ s3 thumbnail.jpg imaginemare.jpg ]

(fără spaţii!)

  1. Shortcode: s3
  2. Primul parametru thumbnail.jpg. Evident, link-ul spre imagine. Este obligatoriu.
  3. Al doilea parametru imaginemare.jpg. În cazul în care poza e prea mare, pui un thumbnail micuţ (primul parametru) şi link spre imaginea mare. Foarte util pentru galerii de genul lightblox
function amazonS3($amazon) {
	extract(shortcode_atts($amazon, $content = null));

	$ret = '<img src="http://content.iamntz.com.s3.amazonaws.com/blog.iamntz.com/images/'.$amazon[0].'" alt="" />';

	if(isset($amazon[1])){
		$ret = '<a href="http://content.iamntz.com.s3.amazonaws.com/blog.iamntz.com/images/'.$amazon[1].'">' . $ret . '</a>';
	}
	return $ret;
}
add_shortcode('s3', 'amazonS3');

Acronym

Tag-ul acronym îti permite să bagi mici explicaţii pentru anumite… acronime sub formă de tooltips. Poate ai observat în articolele anterioare anumite acronime subliniate cu o linie punctată ce arată o scurtă explicaţie când te duci cu mouse-ul peste ele.

În fine, problema cea mai mare este DRY. Cum aş putea face astfel încât să nu scriu explicaţia pentru fiecare termen dacă nu cu shortcodes? Şi un array, desigur :D 

global $acronime;
$acronime = Array(
	'html' => 'Hyper Text Markup Language',
	'css' => 'Cascading Style Sheet'
);

function acronym($acronym)  {
	global $acronime;
	extract(shortcode_atts($acronym));
	$ret = '<acronym title="'.$acronime[strtolower(trim($acronym[0]))].'">'.$acronym[0].'</acronym>';
	return $ret;
}
add_shortcode('acro', 'acronym');

După care 

[ acro HTML ]

va fi transformat în:

<acronym title="Hyper Text Markup Language">HTML</acronym>

Cum se foloseşte?

Copiezi codurile de mai sus (doar cele PHP!) în functions.php. Care este în wp-content/themes/TEMA-TA/functions.php. Şi gata :)

Enjoy!

3 Comments

Întrebare despre ASP.NET

Written on October 25th, 2009 by Staicu Ionuț-Bogdan

Având o oarecare experienţă (şi vârstă!), pot spune că am văzut multe. Cu siguranţă nu tot ce se putea vedea (în materie de programare web, desigur), dar cu certitudine foarte multe.

După cum (probabil) ştii, eu nu prea am legături prea strânse cu limbajele server side. Fie că e ASP.NET, PHP, RoR sau orice altceva, nu e pentru mine. Dacă din PHP mai înţeleg pe ici-pe colo câte ceva, fără prea mari probleme, pentru restul limbajelor trebuie să mă apuc să caut documentaţii pentru a putea face o modificare. Şi nici măcar atunci nu aş fi sigur că fac ceea ce trebuie.

Aşa, acum că am făcut introducerea, trecem la întrebarea magică :D

Lucruri Gratis este un site ce l-am prezentat în articolul anterior la exemple de „aşa nu”, fiind „wrong on so many levels” încăt nu m-am obosit să-i fac o analiză mai amănunţită. (nu îi fac reclamă!)

Fiind scris în ASP, m-am uitat după o chestie ce am observat-o la vreo trei site-uri la care am lucrat în ultimele luni. Şi există:

<body>
	<form action="URL" method="post">
		<!-- codul site-ului -->
	</form>
</body>

Tot site-ul este un formular imens. Asta aşa, că tot vorbeam despre semantică! Evident, site-ul foloseşte js pentru a trimite formularele, prin urmare, nici vorbă de „degradare graţioasă”.

Întrebarea!

Întrebarea e foarte simplă: de ce se pune tot codul într-un formular uriaş? Care este avantajul?

Eu suspectez incompetenţa programatorilor. Tu?

33 Comments

Cod semantic şi cod tableless

Written on October 25th, 2009 by Staicu Ionuț-Bogdan

Chiar dacă a trecut mult timp de la buzz-ul cu renunţarea la tabele pentru designul unui site, am observat că încă sunt destui care nu înţeleg pe deplin acest … concept. Scriu acest post din două motive: am avut de curând un client (de fapt un intermediar) ce a cerut în mod express să NU folosesc tabele, chiar dacă datele erau tabulare şi, mai deunăzi, m-a întrebat cineva pe messenger ce tag-uri ar putea folosi în locul table.

Wtf?! Tabele pentru design???

Dacă eşti un pic mai vechi în domeniu sau ai avut tangenţe constante cu dezvoltarea web, probabil ai observat că în urmă cu aproximativ 5-6 ani a început un adevărat jihad împotriva tabelelor. De ce? Pentru că un site era „modelat” pe un tabel uriaş în care erau inserate alte tabele, în care erau inserate alte tabele şi tot aşa, nefiind decât o limită a bunului simţ în ceea ce priveşte nivelul tabelelor.

Avantajul major? 90% din browsere interpretau codul în mod identic (sau cu diferenţe foarte mici). Desigur, asta se întâmpla când CSS-ul era ceva proaspăt, iar suportul în browserele momentului (IE 5.0/IE5.5/IE5 pentru Mac şi Netscape 4) era la un nivel minim, făcând scrierea unui cod corect un adevărat chin.

Dezavantajele tabelelor se făceau simţite în diverse situaţii: persoanele cu probleme de vedere ce foloseau un screen reader aveau probleme în citirea paginii (un screen reader citeşte „cu voce tare” ce apare pe ecran), lăţime de bandă consumată inutil (dimensiunea unei pagini cu tabele fiind considerabil mai mare; se spune că traficul – în kb – microsoft.com s-a înjumătăţit după renunţarea la tabele pentru design ), întreţinere greoaie (din moment ce nu se folosea CSS, stilizarea se făcea inline; atribute precum bgcolor încă mai există :D ) şamd.

CSS ce?

CSS-ul are avantaje din toate punctele de vedere, mai ales acum, când toate browserele oferă un suport cel puţin decent (da, inclusiv IE6!):

  • Trafic mai mic în kb (aşa cum am zis mai sus. De ce? Majoritatea fişierelor externe (css, js) sunt descărcate o singură dată. După aceea sunt citite din cache. Desigur, cu mici excepţii, în care utilizatorul/administratorul de reţea a setat browserul altfel. În plus, foloseşti mai puţin cod html.
  • Poţi face rapid şi foarte uşor modificări în fişierul CSS pentru tot site-ul.
  • Site-ul va fi mult mai accesibil persoanelor cu dizabilităţi.

Extrema!

Problema cea mai mare la css este următoarea: sunt mulţi coderi care au sărit un pas. Acela în care învăţau DE CE e bine să foloseşti css dar mai ales CUM. Prin urmare, au apărut tot felul de combinaţii: de la boldarea unui text folosind:
Read the rest of this entry »

8 Comments
Page 8 of 13«12345678910111213»