BlogPro

Els formularis web són la eina clau en la interacció entre servidor i client, la forma que té el sistema per a que l’usuari pugui passar informació al site. Gairebé tot es fa amb formularis, registrar-se a una web, escriure un post a un foro, un tema a un blog… tot i que des del surgiment del web 2.0 en alguns casos han sigut substituits per formularis AJAX, però aquí no parlaré ara d’AJAX, si no dels formularis de tota la vida.

Com tot, els formularis també tenen diferents graus de qualitat, i depenent de la que vulguis implementar tindrà un temps d’el·laboració o un altre. Molta gent es pensa que un formulari és quelcom fàcil de fer, i sí, ho és, però molt entretingut i quant millors els vulguis fer encara més.

Read the rest of this entry »

La indexació de pàgines als buscadors és quelcom que s’ha tornat gairebé imprescindible a l’hora de publicar una pàgina web. I aquesta importància recau d’igual manera en sites multiidioma on totes les pàgines en tots els idiomes han d’estar indexades.

Jo conec dos sistemes per fer pàgines web multiidioma. El primer seria el clàssic de ficar la web en un idioma, per exemple català, dins http://www.javierseixas.com/blog/wp-admin/post.php?action=edit&post=23la carpeta ‘ca’. Per traduïr-la a un altre idioma, per exemple el castellà, es duplica la carpeta, se li assigna el nom ‘es’ i es tradueixen tots els arxius html que la componen. Aquest sistema no el recomano ja que obliga a que quan s’hagi de fer una modificació fer-la en tants arxius com pàgines hi hagin, lo qual duplica el treball i el temps. De totes maneres no queda més remei que fer-ho així en servidors que no suportin algun tipus de llenguatge.

El segon sistema que conec és mitjantçant includes que contenen les textos fixes, com titol de seccions, nom de botons, etc. Hi ha un include per cada idioma, i mitjançant una sessió carregarà un include o un altre. S’haurà de declarar una sessió per defecte, per quan l’usuari entri per primer cop l’assigni i carregui l’idioma per defecte. Si l’usuari canvia l’idioma canviarà el valor de la sessió.

Fins aquí tot bé, però què passa quan un robot entra al nostre site? El robot trobarà l’enllaç per canviar d’idioma, però no sabrà interpretar el canvi de sessió, per lo qual, el robot només detectarà i indexarà el nostre site en l’idioma per defecte. I com es soluciona aquest problema?

La clau està en col·locar a l’enllaç on es canvia l’idioma una adreça falsa. Per exemple:

<a href="http://www.javierseixas.com/ca“>Català</a>
<a href=”http://www.javierseixas.com/es“>Castellà</a>

Fet això, el PHP haurà de saber en quin idioma s’està navegant. Això es pot saber per la funció $_SERVER['REQUEST_URI'] que retorna la part de l’adreça després del domini. Tot seguit, el PHP haurà de decidir quin include incloure segons hagi dit el REQUEST_URI, per exemple, ca per català , es pel castellà, en per l’anglés. En aquest punt recomano seguir les sigles que utilitza la wikipedia.

I el darrer punt clau el juga Apache. S’ha d’activar el ModRewrite i escriure les regles per l’idioma concret:

RewriteRule ^ca/(.+) /?sec=$1
RewriteRule ^es/(.+) /?sec=$1
RewriteRule ^en/(.+) /?sec=$1

Construïnt la web de Grapa hem vaig trobar amb un problema: carregar un flash dins d’una capa modificada per AJAX.

Per què ve el problema? Per un costat tenim que el swfobject s’executa quan la pàgina es carrega. Per l’altre costat sabem que l’AJAX carrega un contingut que importa des de una altra pàgina. Quan importa aquest “codi” el que fa és imprimir-lo allà on li dius. Amb mootools es faria així:

var showContents = this.showContents.bind(this);

var ajaxOptions = {
method: ‘get’,
update: $(’section_cont’),
onComplete: showContents
};

this.ajaxRequest = new Ajax(this.url, ajaxOptions).request();

L’AJAX executa un Javascript però no torna a executar la pàgina de nou, per lo qual cridar al swfobject com es fa tradicionalment no funciona.

Com arrivar a la solució? Doncs cal saber una mica com funciona el swfobject. Bàsicament el que fa és crear un objecte i posteriorment imprimir-lo a la capa que li dius. Si això no deixa de ser Javascript, no podriem fer que crees aquest objecte quan ha de carregar l’AJAX?

Doncs efectivament, es pot! Seria alguna cosa així:

showContents: function() {
var interactive_flash = new FlashObject("/swf/reproductor.swf", "header", "548", "425", "8", "#ffffff", true);

interactive_flash.addParam(”wmode”, “opace”);
interactive_flash.addParam(”scale”, “noscale”);
interactive_flash.addVariable(”file”, this.video);
interactive_flash.write(”embed_cont”);
}

Si us fixeu, la crida AJAX del primer codi té una linia dins la variable “ajaxOptions” que diu onComplete: showContents. Això vol dir que quan hagi carregat l’AJAX cridarà la funció showContents, la qual crearà el swfobject.

I ja ho tenim. No és pas tan difícil!

Vull recomanar a tots els usuaris de Mozilla Thunderbird (pels que no el coneguin seria un Outlook Express de Mozilla) en Windows un plugin anomenat Minimize to Tray i que trobo realment pràctic. Bàsicament el que fa és que quan minimitzes el programa, el fica a l’àrea de notificació (que és aquella on surten tots els iconets) en comptes de tenir-la a la barra de tarees.

Va molt bé això sobretot si ets algú que acostuma a rebre correus força sovint, perquè pots tenir el correu obert sense que et molesti a la barra mentre fas altres coses. A més, com que el Thunderbird t’avisa amb un avís a la pantalla i amb el típic sorollet de quan reps un email t’assebentaràs al moment que has rebut un nou correu.

Pots descarregar-te el plugin des d’aquest adreça: Minimitzar Thunderbird.

I per si fos poc hi ha un altre plugin que complementa aquest que aporta noves opcions, com que el Thunderbird s’inicialitza en iniciar Windows (força útil també) o que en obrir-lo es minimitzi directament. Per descarregar el plugin ho pots fer des d’aquí: Complement al Minimize to Tray

Farà aproximadament un mes que estic treballant en la nova web de Grapa. Realment està sent una feina feixuga, que hem deixa poc temps per altres coses, tenint en compte que a l’hora també estic treballant en altres projectes dins de la pròpia Grapa…

Si vols animar-me a que faci una web de **** mare no oblidis passar per la web temporal de Grapa i deixar-me un missatget a la adreça de correu que s’indica.

Mercès

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í.

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!

Read the rest of this entry »

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.

Quina grata sorpresa ha sigut quan avui una companya de feina, Caro, m’ha cridat per mostrar-me una cosa. Ella estava fent proves amb el nou cercador de Microsoft, Live, i m’ha mostrat alguns resultats per cerques dels noms d’alguns clients de Grapa. M’ha fet molta gràcia quan he vist que en alguns casos javierseixas.com sortia en les primeres posicions del cercador.

És clar que eren noms molt concrets i que no hi ha moltes webs, sembla, que els nombrin, però tot i això resulta una satisfacció el bon posicionament d’aquesta web. Sembla que tots els tutorials de SEO que he llegit han servit per quelcom.

Si algun interessat en millorar el posicionament de la web vol saber més coses sobre el tema, pot trobar webs que en parlen en el del.icio.us de Javier Seixas per SEO.