Facilitant la web

Hi ha moments a la vida d’un programador d’interfícies web (mal anomenats sovint com a maquetadors) que vol crear un component que tingui una certa aparença segons si el navegador amb que es visualitza té el javascript habilitat o inhabilitat.

Posem un exemple. Imaginem-nos que estem creant un botó d’imprimir “especial”. El que volem aconseguir és que al fer clic a la icona d’exportació de la nostra pàgina, es desplegui un menú d’opcions on ens permeti obtenir la vista actual en PDF, en XML o en HTML sense estils (per posar un exemple). Com som bona gent i ens preocupa de debò l’accessibilitat, volem que, en cas de tenir el javascript inhabilitat o no disposar de suport per aquest, el que es visualitzi sigui el literal “Exportar a “, i la llista d’opcions que he explicat abans, una darrera l’altra. Total, que el nostre component ha de tenir dues representacions diferents, és a dir, dos conjunts d’estils ben diferents.

I com fer que un component tingui dues representacions? Doncs bé, jo explicaré aquí la tècnica que jo uso al meu dia a dia.

El que farem serà marcar el document amb una classe en cas que tinguem javascript habilitat, i així, des del nostre full d’estils, podrem diferenciar entre una representació i l’altra de la següent forma:

.element-que-interessa {
    /* Aquí van els estils per l'element en cas de no disposar de suport javascript */
    ...
}

.marca-document .element-que-interessa {
    /* Aquí van els estils per l'element en cas de disposar de javascript */
    ...
}

Una vegada explicada la idea, anem a l’acció. Personalment, el que jo faig és marcar l’etiqueta /html amb la classe js al principi del fitxer javascript:

document.documentElement.className = "js";

I llavors, al full d’estil, usar aquesta classe per a diferenciar-ho. Aplicat al nostre exemple:

.menu-exportacio {
    /* estils de la representació quan no hi ha javascript */
}

.js .menu-exportacio {
    /* estils per a la representació amb javascript */
}

Cal tenir present que aquesta tècnica pot ser útil quan, per exemple, volem amagar alguna porció del nostre document en cas de disposar de javascript (per exemple les àncores al contingut, barra lateral i demés) o fins i tot, per a diferenciar els estils que s’aplicaran a elements introduïts al document de forma dinàmica mitjançant javascript.

Portada del llibre Bulletproof Web Design

Aquest és el segon llibre d’en Dan Cederholm, fundador de SimpleBits. És el primer llibre que vaig llegir d’aquest gran expert, i he de dir que em va deixat un molt bon sabor de boca.

El llibre que posseeixo i del qual vull fer aquesta petita ressenya, és la primera versió que data del 2006, però actualment ja existeix una segona versió de l’agost del 2007 que també he pogut fullejar, i que a més a més de modificar alguna errada d’impremta del llibre, afegeix algun nou apartat i actualitza els existents amb noves característiques de navegadors.

Com bé resa el títol i subtítol del llibre, Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, ens ajudarà crear maquetes a prova de bales.

Sota el meu punt de vista, aquest és un molt bon llibre per aquells que volen iniciar-se al món de la maquetació, ja que comença poc a poc explicant l’estructura bàsica d’un document XHTML i d’un CSS i va avançant en els capítols fins acabar construint un petit exemple d’una pàgina amb dues columnes.

És un llibre molt didàctic ja que trobem molts exemples a cada capítol que es desenvolupen mica en mica i que s’explica fins a l’últim detall de cada decisió que es pren, aportant sovint alternatives de marcatge per tal que ho tinguem tot present. A més a més, una cosa que em va agradar molt d’aquest llibre fou els consells que dóna mentre avances, com per exemple, marcatge que es pot generar via Javascript per eliminar les etiquetes innecessàries, alguns consells d’accessibilitat, etc. Igualment, trobo que la progressió dels temes que fa agrupats als capítols és força correcte, tot ajudant als que comencen amb aquests temes a introduir-s’hi poc a poc i de forma ordenada.

Tot seguit poso un petit índex amb els capítols del llibre i una breu explicació:

Flexible text

Com a primer capítol que és, ens explica una lliçó ben bàsica: com gestionar la mida del text del nostre document. Explica les diferències entre mides absolutes i relatives, i explica el mètode que ell segueix, els percentatges.

Scalable navigation

Típic exemple de generació d’un menú amb pestanyes i la tècnica de les portes corredisses. Molt útil per començar-se a familiaritzar amb les imatges de fons, la diferència entre border, margin i padding i el model de caixa.

Expandable rows

En aquest capítol explica com crear una barra (ja sigui de navegació, cerca, una capçalera, etc.) que s’expandeix de forma correcta. Interessant.

Creative floating

Introducció a les caixes flotants tot construint una petita galeria de fotografies.

Indestructible boxes

Qui no ha hagut d’enfrontar-se algun cop a maquetar un disseny amb caixes? Sembla que actualment la majoria li hem agafat gràcia a aquest element. Doncs bé, aquest capítol ens explica com crear maquetes amb aquest element tot progressant en dificultat amb les diverses alternatives que se’ns pots presentar.

No images? No CSS? No problem

Possiblement el capítol més interessant que té el llibre sota el meu punt de vista. Sovint anem posant imatges de fons al nostre document, però sovint mai ens preocupem de com veu la pàgina algú que no veu les imatges de fons. I si tenim els CSS inhabilitats o bé el nostre navegador no els interpreta? Doncs bé, en aquest capítol ens explica forces tècniques, trucs i consells per tal de poder crear una maqueta robusta i a prova de bales.

Convertible tables

La gent que es pensa que les taules es limiten a /table, /tr i /td està molt equivocada. En aquest capítol, a més a més de descobrir-nos com s’han d’escriure les taules semànticament correctes, també ens explica com els hi podem donar una vista atractiva amb els fulls d’etils.

Fluid layouts

Què seria un llibre de CSS sense el típic capítol de creació de layout? Doncs bé en aquest capítol ens explica com crear-ne un de fluït amb dues i tres columnes, quins són els típics problemes que ens hi podem trobar i com donar-lis solució.

Putting it all together

El darrer capítol ho posa tots els conceptes en joc per a crear una petita pàgina d’inici amb dues columnes i capses per al contingut lateral. Una bona manera de tancar el llibre i posar tots els conceptes en joc per a resoldre un problema que serà el dia a dia d’un maquetador.

Doncs bé, per tancar aquesta ressenya, només dir que és un llibre a considerar si és que volem entrar al món de la maquetació web, o bé, si ja tenim alguns coneixements, intentar posar-los tots en ordre a la nostra ment tot seguint un guió redactat per un gran expert.

Una compra molt recomanable.