Facilitant la web

Els que ens dediquem a sistemes client-servidor, més específicament, a sistemes basats en web,  sovint ens trobem amb la necessitat de construir formularis que executin accions a partir d’una entrada. És ben normal, que un client o un funcional proclami:

• Vull que el número d’identificació sigui obligatori!
• El correu electrònic ha d’estar en el format correcte!

O altres típics requeriments que requereixin de fer una validació del formulari.

Davant d’aquest escenari, el primer que ens ve al cap és fer les validacions amb JavaScript a la capa client. Bé, no està malament. Fer les validacions a la capa de client, és ràpid en temps de computació, senzill (normalment) i proporciona una resposta ràpida a l’usuari, fet pel qual assegurem una bona experiència d’usuari mentre introduïm dades. Una de les primeres normes de la usabilitat a formularis és: com més aviat sàpiga l’usuari que s’ha equivocat, més aviat podrà reaccionar-hi (compte amb la interpretació d’aquesta frase made-by-me!). Però mai hem d’acabar aquí!

Fer les validacions només a la capa client és una decisió completament errònia. On de debò s’han de fer aquestes comprovacions és a la capa servidor. Allà és on s’ha de mirar si cert camp existeix, si el format de tal camp és el correcte, de si la relació entre dos camps és correcta, etc. És a la capa servidor on tot aquest algorisme s’ha d’executar per prevenir qualsevol error que pugui tenir l’aplicació. És allà on s’executa la lògica de l’aplicació i on les validacions, com part d’aquesta lògica que són, s’han d’executar. Si només ho féssim a client, què passaria si no tinguéssim disponible el JavaScript? Quin seria el comportament de l’aplicació? Possiblement, acabéssim en un estat d’inconsistència no desitjat per ningú.

Sovint quan es planteja aquest argument (validacions dobles a capa client i servidor), molts arquitectes d’aplicacions (remarco la paraula perquè és el títol que es posen ells, no el que els hi posaria jo) posen el crit al cel i diuen la del porc argumentant que s’està fent una tasca dues vegades i que el rendiment de l’aplicació en general es veu ressentit. Si alguna vegada us trobeu davant d’això, només heu de dir:

D’acord, llavors, les validacions que es facin només a la capa de servidor!

Veureu com els hi canvia la cara

Cal tenir ben presents quines són les implicacions de deixar un processament de dades a una capa tan fràgil com pot ser un navegador, i la nostra tasca és argumentar i deixar ben clar el per què a client no és lloc per fer aquest tipus de processament.

Tingueu aquest consell sempre ben present perquè segur que al llarg de la vostra vida professional us caldrà utilitzar-lo més d’un cop.

No us ha passat mai que mentre esteu acabant d’omplir un formulari, sense adonar-vos, feu clic allà on no toca i perdeu tot el que heu introduït? Doncs bé, hi ha una senzilla manera per evitar al màxim aquests errors: l’event onbeforeunload.

Cap allà als mitjans dels noranta, Internet Explorer 4.0 introduí aquest event no estàndard, però a diferència d’altres ocasions, aquest cop feu una cosa útil i els navegadors amb motor Gecko ho acabaren introduint a la versió 1.7 de Mozilla (Firefox 1.0).

Aquest event, tal i com resa el seu nom, es dispara just abans de l’event onunload, és a dir, abans que es descarregui el contingut actual de la pàgina, i per tant, ens permet executar algun tipus d’acció en aquest moment.

A diferència dels altres events, aquest funciona força diferent: per tal de mostrar un missatge a l’usuari abans de descarregar la pàgina, el que cal fer és retornar una cadena amb el missatge que es vulgui mostrar. Un exemple podria ser:

window.onbeforeunload = function(e) {
  return "No heu enviat el formulari. Si tanqueu la pàgina perdreu tots els canvis fets fins ara.";
}

Així, en cas d’abandonar la pàgina, se’ns mostraria un quadre amb el missatge:

Esteu segur que voleu sortir d’aquesta pàgina?

No heu enviat el formulari. Si tanqueu la pàgina perdreu tots els canvis fets fins ara.

Premeu D’acord per a continuar, o cancel·la per a romandre a la pàgina actual

Les frases que hi ha just abans i després de les nostres les posa el navegador (en aquest cas Firefox) i no es poden eliminar, substituir ni evitar de cap tipus de les maneres.

Val a dir que en cas que el navegador no tingui implementat aquest event, aquests simplement l’ignoraran i no mostraran pas el missatge a l’usuari.

Pàgines protegides

Recapitulem. La raó principal d’aquest article és que fa poc a la feina em varen demanar que implementés una funcionalitat per a protegir pàgines: volien poder mostrar un missatge quan un usuari intentés abandonar la pàgina enmig d’un formulari dins d’un procés amb un cert flux o bé intentés abandonar una pàgina, la construcció de la qual fos molt costosa. Un exemple ideal per a treure l’event onbeforeunload de la nostra cartera de recursos. Anem a construir-ho.

Per tal de poder marcar si una pàgina la tractem com a protegida o no, és a dir, si registrem l’event onbeforeunload per mostrar un missatge a l’usuari en cas d’abandonar la pàgina, afegirem la classe protected a l’element /body de la pàgina:

<body class="protected">

Així, si usem jQuery, podem afegir les següents línies de codi per a tenir-ho fet:

$('body.protected').each(function () {
  window.onbeforeunload = function(e){
    return "Si abandones, ho perdràs tot per sempre!";
  };
});

Però tenim un petit inconvenient: si fem clic en un enllaç o si enviem el formulari fent clic a un botó, se’ns mostrarà el missatge, cosa que volem evitar. Això es pot resoldre inhabilitant l’event en cas de fer clic a certs elements:

$('body.protected p.botons input, body.protected a.sense-onbeforeunload', context).click(function () {
  window.onbeforeunload = null;
});

I així de fàcil obtenim el que busquem. Fàcil, oi? I segur que a més d’un li sembla útil, i fins i tot, més que necessari en alguna situació quotidiana.

Recursos

• Onbeforeunload event. Internet Explorer Developer Center
• Window.onbeforeunload. Mozilla Developer Center
• onbeforeunload: tiende una mano al usuario

Portada del llibre Don't make me think

Aquest és un llibre que, sota el meu punt de vista, tota persona que es dediqui a la maquetació web o directament al desenvolupament de sistemes basats en web, s’ha de llegir. Dic això, perquè crec que tots els que ens dediquem a aquest món cal que tinguem unes nocions bàsiques d’usabilitat, més que res, per poder comprendre l’usuari i fer dels nostres treballs, feines de qualitat.

I no recomano aquest llibre en va. Ho faig perquè ja fa un temps, quan vaig veure que em calia endinsar-me una mica en el món de la usabilitat per comprendre més a l’usuari final, vaig demanar-li consell a una especialista en el tema, i ella fou qui me’l recomanà.

“No em facis pensar” és, a més a més del títol del llibre, el que pensa qualsevol usuari de qualsevol tipus de pàgina o aplicació web. Un usuari al entrar a un lloc web no vol haver de pensar en què ha de fer, com ho ha de fer i demés, sinó que senzillament vol i espera que l’aplicació o la pàgina el condueixi. Hem de tenir clar que si per usar la nostra pàgina cal pensar, llavors, estem condemnats al fracàs.

Amb aquest llibre, el seu autor, Steve Krug, vol transmetre les idees bàsiques de la usabilitat dins del món web. És un llibre de lectura més que fàcil, i que gràcies als seus exemples, que a primera vista poden semblar absurds, ens guiarà cap a l’aprenentatge de certes idees bàsiques per tal de fer dels nostres llocs, uns productes de qualitat tot esent de fàcil ús per als nostres usuaris.

Si donem un cop d’ull a l’índex del llibre, podem veure que aquest està dividit en quatre parts que duen com a títol:

Guiding principles

En aquesta primera part, formada per cinc capítols, l’autor ens mostrarà els principis bàsics de la usabilitat a la web. Es posa molta referència en temes com els hàbits de lectura al món web, les estructures típiques de certs components (cercador, etc.), entre d’altres temes.

Things you need to get right

Aquest segon apartat, format per dos capítols, engloba el disseny de la navegació del lloc, a més a més, del disseny de la portada. Ambdós temes, segons l’autor, són dels més importants.

Making sure you got them right

El tercer apartat, format també per dos capítols, ens fa centrar en com convèncer el nostre equip sobre la importància de la usabilitat. A part d’aquest tema, també trobem un capítol centrat en per què fer tests d’usuaris i quina repercussió poden tenir en el nostre projecte.

Larger concerns and outside influences

En aquest quart i darrer apartat, format per tres capítols, l’autor exposa altres temes vinculats amb l’usabilitat, com poden ser l’accessibilitat, entre d’altres.

Per acabar, només dir que és un llibre curt, de lectura ràpida i que personalment, em va ajudar molt en la meva carrera professional.

Personalment, crec que és una molt bona compra.