Monthly Archives: October 2007

Javascript no intrusiu

Vaig començar a treballar amb mootools farà poc més d’un mes, i mirant tot d’exemples de com programar-ho vaig veure en exemples quelcom que ja havia sentit però del que mai havia prestat atenció: el JavaScript no intrusiu.

Bàsicament el JavaScript no intrusiu és el que permet realitzar accions al DOM i manipular els esdeveniments o events però sense haver d’escriure el codi JavaScript dins de les etiquetes html. Fins ara ho veiem així:

<div onclick="executa_funcio()">text qualsevol</div>

Això no està pas malament, però xoca una mica amb la filosofia de separar la web les tres capes de lògica, disseny i estructura perquè estàs barrejant lògica (JavaScript) i estructura (HTML).

Mootools dòna un pas endevant i permet introduïr en el codi el JS no intrusiu d’una forma semblant a la següent:

$A($$('.delete')).each(function(el) {
el.onclick = this.click.pass(el, this);
}, this);

Com es veu en l’exemple el JavaScript crea un Array ($A) amb tots els elements que tenen la classe delete, i inicia un bucle per aquest array on assigna l’event onclick per cadascun d’aquests elements. Com es pot veure no hi ha cap etiqueta html afectada directament. Aquest mètode ajuda a tenir el codi més net i endreçat en les tres capes.

I com passem es paràmetres? Doncs si vols recollir informació ho faries a través dels atributs de l’element afectat. Si tenim a l’html quelcom així:

<div title="Un valor qualsevol" alt="Un altre valor">Text qualsevol</div>

A l’arxiu JS ho recolliriem així (el fa referència al element html):

var param_tit = el.title; // Recull Un valor qualsevol
var param_alt = el.alt // Recull Un altre valor

En definitiva, una passada i que dòna moltes possibilitats!

No sé si Prototype, jquery o el JavaScript tradicional permet fer-ho, però probablement sí.

Iniciació al patró MVC

Fa una setmana i poc vaig decidir donar el pas i començar a dissenyar l’arquitectura d’una pàgina web que estic fent seguint amb el sistema MVC (Model-Vista-Controlador). Pel que havia llegit era la forma més avançada de programar en PHP i la millor forma de dissenyar un site. Les seves avantatges són la gran facilitat de manteniment i modificació d’una web ja que aquest sistema utilitza la POO (Programació Orientada a Objectes).

Sincerament, no m’ha sigut fàcil entendre el concepte i el funcionament del sistema, però després d’haver invertit MOLTES hores ja he trovat el camí, i vull fer aquest post per deixar constància i publicar alguns consells que faciliti a altres la introducción al tema. Una de les coses que més m’han dificultat el entendre com funcionaba ha sigut la gran complexitat dels exemples i el lleguantge massa tècnic. En aquest escrit intentaré utilitzar explicacions clares i fàcils d’entendre. Això sí, aconsello abans de començar amb el MVC entendre una mica sobre la POO en PHP. Comencem!

Continue reading

Web 2.0: Li deus al JavaScript

Aquesta setmana m’he estrenat com a blogger a “la Grapadora“, el blog de Grapa, amb un article anomenat: Web 2.0: Se lo debes al JavaScript. Com que l’article l’he publicat en castellà vull deixar aquí la traducció al català:

El JavaScript era, farà tres anys, un llenguatge de programació de segona. La seva principal funció era la de controlar petits detalls en l’enviament de formularis, com que els camps estiguessin correctament omplerts i poca cosa més. Pràcticament estava relegat a aquesta funció quan un dia algú va inventar AJAX i va nèixer el web 2.0. Sense anar més lluny, JavaScript és la J d’AJAX: Asynchronous JavaScript And XML. Aquest detall dòna una idea de la seva importància i la seva vinculacó al nou sistema.

Ara, una gran massa de programadors utilitzem JavaScript, no només per implementar AJAX, sino també per totes aquestes parafernà lies i efectes tan macus que semblen Flash però que no ho són, amagar i ensenyar textos, crear nous elements a l’HTML i un llarg etcétera. I tot axò, ¿per què és tan bo? Doncs perquè facilita la interacció usuari-màquina estalviant carregar la pàgina cada cop que punxes un enllaç, perquè fa la navegació més agradable visualment, perquè millora la usabilitat i perquè, d’aquesta manera, els textos també són indexables en navegadors (cosa que, cal recordar, no passa en Flash).

Coneixent això, resulta evident lo important que és el JavaScript per un site i molts estaran d’acord amb mí en que s’està convertint en una eina bàsica per la navegació web. M’atreviria a dir que el 96% de les noves webs utilitzen JS d’alguna manera o una altra.

Però com tot a la vida, el JavaScript no és perfecte. L’ús de JS també té alguns inconvenients d’usabilitat i accesibilitat. Si, per exemple, algú visita una web amb un navegador antic que no el soporti, o si té el llenguatge deshabilitat al seu navegador, no podrà accedir correctament al site. Davant d’això, alguns conservadors defenen que el JavaScript fa el web inaccessible als usuaris que no disposin de programes que el soportin. Això és cert, però crec que ja va sent hora que aquests usuris s’actualitzin una mica. Si hi ha algú que encara navegui amb IE5 no té perdó de Déu, i més, quan existeixen molts altres navegadors gratuïts, Firefox per exemple, que sí el soporten.

I per si encara fos poc, davant del boom del JS han surgit, des de fa algún temps, gran quantitat de frameworks que facil·liten als programadors la implementació de JavaScript i AJAX als nous sites web. Mootools, Prototype i jquery són alguns dels exemples més coneguts. De fet, poc a poc va creant-se la perspectiva en la qual ja no s’aprèn JS, sino la estructura d’algún o altre framework.

Sigui com sigui, el JavaScript s’ha convertit en un llenguatge imprescindible en la web actual del qual si releguéssim seria donar un pas enrere en l’evolució d’internet.