Facilitant la web » xhtml

Renovació de la web del W3C

Ramon Vilar Gavaldà — Tue, 20 Oct 2009 08:50:23 +0000

Acabo de veure que per fi s’ha llançat la nova web del W3C, encara que sembla ser que la seva estrena fou el passat 13 d’octubre. Ha estat el final del camí després que al març del 2009 es va llançar el lloc en beta obert a qualsevol tipus de contribució i comentari.

El nou lloc és força més intuïtiu, amb un disseny lleuger centrant l’atenció en el contingut i no tant en la forma de mostrar-lo. Al contrari de l’anterior lloc, sembla que en aquest s’hagin parat un moment i hagin rumiat l’arquitectura de la informació, ja que tots els continguts de la web estan categoritzats en diferents seccions de fàcil identificació i la navegació entre els diferents apartats es fa de forma força intuïtiva.

Com a nota irònica, al seu blog es comenta que el CSS usat no passa el seu validador. Segons argumenten, la majoria d’errors són per temes de hacks, regles pròpies d’alguns navegadors, etc.

Doncs res, nous aires pel W3C que ja tocava!

Organització i convenis en un projecte de maquetació

Ramon Vilar Gavaldà — Sun, 28 Dec 2008 16:55:33 +0000

Des de fa un temps, que sempre que m’he d’enfrontar amb un nou projecte de maquetació segueixo un conjunt de normes que ens varem marcar entre els companys de feina. Ens trobàvem que sempre que havíem de fer un manteniment d’una maqueta d’algú altra, l’organització del projecte era diferent, i clar, això feia que davant d’un canvi mínim, perdéssim força temps interpretant on era cada cosa i com ho feia.

Doncs bé, aniré exposant l’organització i els convenis que jo segueixo, classificat en apartats per una fàcil comprensió.

Normes generals de tractament d’arxius

El nom dels arxius, tant de text com d’imatges, estarà sempre en minúscules i, en cas d’estar format per més d’una paraula, s’usarà el guió com a separador.
Tots els fitxers de text estaran codificats en UTF-8.
Els tabuladors tindran una mida de dos espais.

Estructura de directoris

Si partim de l’arrel del nostre projecte, es poden trobar els següents directoris:

assets: Dins d’aquest directori trobarem tots els elements que formen part de la maqueta i que complementen a l’HTML. Cal tenir en compte que en aquest nivell, no s’hi trobarà cap arxiu, sinó només directoris on s’organitzaran els tipus de recursos (fulls d’estils, imatges, etc.).
- css: En aquest directori trobarem tots els full d’estils del projecte.
- img: En aquest directori trobarem totes les imatges que sigui necessàries per a visualitzar correctament la maqueta. aquestes imatges poden ser, per exemple, icones, botons, imatges de fons, etc., però mai imatges d’exemple (imatges d’una notícia, d’un contingut, etc.). Les imatges estaran sempre en format PNG.
- js: En aquest directori trobarem tots els arxius javascript que formen part de l’aplicació; tant el codi generat com qualsevol de les biblioteques que s’usi (jQuery, protoype, etc.).
images: Dins d’aquest directori trobarem les imatges de contingut que s’usen per a posar exemples a la maqueta però que no formen part d’aquesta.

No s’ha dit, però els fitxers HTML estaran sempre a l’arrel del projecte. Com es veu, l’estructura està pensada perquè sigui fàcil integrar, ja que només cal agafar la carpeta assets amb tot el que conté per tal de tenir tot el que es necessita per a una correcta visualització. Tant els arxius HTML com la carpeta images, es poden descartar una vegada la integració estigui feta.

Normes a l’HTML

El DOCTYPE serà XHTML1.0 Strict, sempre i quan la natura de l’aplicació no en demani un de diferent.
El nom de les classes i dels identificadors dels elements seran sempre en català i s’escriuran en minúscules i, en cas d’estar format per més d’una paraula, s’usarà el guió com a separador.
```
    ...
```

Normes al CSS

Sempre i quan la mida del projecte ho permeti, tots els estils s’escriuran en un sol fitxer que anomenarem sempre styles.css. En cas que necessitem d’un fitxer d’estils especial per a Internet Explorer, aquest s’anomenarà, styles-ie6.css (per la versió 6 del navegador), styles-ie7.css (per la versió 7 del navegador) o styles-ie.css (en cas que no calgui diferenciar de versió de navegador); i es vincularà dins de l’HTML amb comentaris condicionals.
L’arxiu sempre començarà amb la directiva @charset.
Just després de la directiva de codificació, s’introdueix una taula de continguts per tal d’organitzar l’arxiu d’estils. Les capçaleres que facin referència a la taula dins del full d’estils, seguiran el següent patró:
- Aniran entre comentaris de CSS (/**/).
- A la primera línia, després d’iniciar el comentari i abans del títol, hi haurà tants guions com nivell dins de la taula de continguts es trobi; és a dir, si és un títol de primer nivell tindrà només un guió, si és de segon nivell, tindrà dos guions, i així anant fent.
- Es fa un retorn de carro, i es posen 78 guions i es tanca el comentari (tot per fer una divisió de 80 caràcters).
L’estil d’obertura i tancament de claus serà la que varen proposar Kerninghan-Ritchie al seu tractat sobre el llenguatge de programació C; la primera clau va just després del predicat (separant amb un espai) i la clau de tancament va just després d’un retorn de carro.
Els estils s’escriuen en bloc i sempre precedits per un tabulador. Dintre de cada bloc, les directives s’ordenen en ordre alfabètic ascendent.

Un exemple de full d’estil podria ser:

@charset "utf-8";
/*
  TdC:
    - Elements genèrics
    - Capçalera
      - Regió capçalera
    - Estructura del contingut
      - Sense columnes
      - Una columna + contingut
      - Dues columnes + contingut
    - Peu
*/

/*- Elements genèrics
-----------------------------------------------------------------------------*/
body {
  color: #333;
  font-size: 62.5%;
  margin: 0 auto;
}

/*- Capçalera
-----------------------------------------------------------------------------*/
...

/*-- Regió capçalera
-----------------------------------------------------------------------------*/
...

Normes al javascript

Sempre i quan la mida del projecte ho permeti, el javascript anirà tot dins d’un sol fitxer amb nom script.js. En cas de necessitar-ne més, el criteri de nomenclatura haurà de ser racional.
El nom de les classes i dels identificadors dels elements que s’usin només per al javascript, seguiran les mateixes normes d’escriptura, però amb la diferència que seran en anglès per poder diferenciar-les de les que són pròpiament d’estructura.
Tant les variables com les funcions s’ecriuran en CamelCase. En el meu cas, tant el nom de les variables com els de les funcions els escriurem en angès.
No s’integraran biblioteques al projecte sempre i quan el seu ús no estigui justificat, és a dir, per a fer manipulacions mínimes del DOM no cal carregar jQuery. Passa el mateix amb l’ús d’extensions de les biblioteques: només s’usaran si es justifiquen molt els seus beneficis.
Tot el codi estarà documentat seguint JSDoc. Un bon programador sap que la documentació és útil, però l’abús d’aquesta ocasiona problemes.

Cal tenir present que aquest conjunt de normes són les que uso jo; no són ni un estàndard ni la millor manera de fer-ho, sinó una forma de fer-ho.

Si algú té cap conveni o norma que creieu que pot ser interessant, deixeu-ho en un comentari i així podem anar complementant-ho tot plegat.

Bulletproof Web Design

Ramon Vilar Gavaldà — Mon, 01 Dec 2008 00:22:07 +0000

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.