Facilitant la web

En el seu moment, quan em vaig llegir aquest llibre, va marcar un abans i un després en els meus coneixements sobre maquetació web.

Si en el seu moment vaig recomanar el llibre Bulletproof Web Design per aquells que volen entrar al món de la maquetació web, recomano ara el CSS Mastery per tots aquells que volen accedir a uns coneixements més avançats d’aquest món, i poder passar així a fer projectes més complexes.

Andy Budd ens avisa des d’un principi: això no és pas un llibre per a novells, sinó que està fet per aquells que vulguin donar una volta més de cargol a la maquetació web. Ho diu amb raó, ja que el llibre comença amb un primer capítol de repàs, però ràpidament accelera per donar pas als següents capítols per entrar en tècniques més complexes, trucs usuals i sobretot, els hacks que no ens podem treure mai de damunt.

És un llibre fàcil de seguir si tenim uns mínims coneixements de CSS i HTML, però sobretot, és fàcil aprendre coses noves i fàcil poder-les posar en pràctica, ja que el llibre bé carregat d’exemples, explicacions de casos d’ús i amb alguna que altra referència de casos reals disponibles a la xarxa. En definitiva, un llibre molt més que recomanable: imprescindible!

Al revisar una mica l’índex, podem veure que el llibre està distribuït en onze capítols, nou dels quals són exposició de tècniques (separades per temàtica) i els dos darrers són l’elaboració de dos exemples o casos d’estudi amb tota la informació adquirida al llarg del llibre:

Setting the foundations

En aquest capítol, com ja he comentat abans, l’autor fa una petita introducció repassant conceptes com els d’especificitat, organització dels documents, els diferents tipus de selectors, etc. Es recomana una lectura, encara que sigui en diagonal, per tal d’entrar en matèria.

Visual formatting model recap

Repàs als diferents models de caixa, flotats i posicionament absolut/relatiu. Problema del doble marge i d’altres trucs.

Background images and image replacement

Repàs al concepte d’imatge de fons. Caixes amb cantonades arrodonides, tècniques per a la simulació d’ombres i repàs a diferents tècniques de reemplaçament d’imatges.

Styling links

Tal i com indica el títol, en aquest capítol es repassen diferents tècniques per a donar estils als enllaços, des d’estilitzar enllaços externs, tècniques per a l’ús d’sprites com a imatges de fons entre d’altres coses.

Styling lists and creating nav bars

En aquest capítol s’aborden diferents tècniques per a realitzar barres de navegació, tan verticals com horitzontals (tècnica d’sliding doors). També explica com crear un mapa d’imatge entre d’altres temes.

Styling forms and data tables

Un dels capítols d’on vaig treure més suc en el seu moment. No només explica temes de CSS sinó que també exposa conceptes sobre el marcat correcte per una taula, estructuració i accessibilitat a formularis i més moltes més coses.

Layout

El típic tema de tot llibre de CSS: layout fix, elàstic, líquid i combinat.

Hacks and filters

Capítol força interessant on s’exposen les tècniques per a separar fulls d’estils per diferents medis o navegadors, trucs per aplicar regles a certs clients, etc.

Bugs and bug fixing

Un altre capítol interessant i força inusual. S’hi recullen els bugs més importants dins del món de la maquetació i diferents tècniques per a identificar tant a aquests com d’altres que no estiguin documentats encara.

Case study 1: More than doodles

És el capítol més llarg de tot el llibre. En ell s’hi descriuen tots els passos que cal seguir per acabar construint la maqueta d’una pàgina, a simple vista força complexa. S’usen molts dels conceptes exposats al llibre, i sobretot s’hi fa especial atenció al tema de les llistes i del model de caixes.

Case study 2: Tuscany luxury resorts

Un exemple força interessant de pàgina amb layout fluid. A més a més, s’apliquen tècniques de posicionament de caixes força interessants i de reemplaçament de text per imatges que cal tenir força en compte.

En definitiva, i per tancar la ressenya, un llibre que cal comprar i llegir per ser un bon expert en el tema.

Es ben sabut per tots els que ens dediquem a la programació d’interfícies web (també anomenats maquetadors o programadors front end) que cal tenir ben present que sempre s’ha de separar el document (HTML) de la seva presentació en un medi concret (CSS) i dels components amb comportament que pugui tenir (JavaScript). Així, és fàcil veure que el següent fragment d’un document és completament incorrecte pel que fa a aquests cànons:

<div style="margin: 5px;">
    <em>Aquest contingut el vull en lletra cursiva</em>
    <small><a onclick="window.location='/lipsum'" href="http://www.example.com">Lorem ipsum dolor</a></small>
</div>

Normalment la majoria de programadors som ben conscients de la incorrecció del fragment anterior, però sovint ens trobem incorreccions d’aquest tipus completament encobertes, i sempre seguint el mateix patró: el mal ús dels noms de classe dels elements.

Usaré exemples de la xarxa per a il·lustrar el que vull dir. Si anem a la portada de la pàgina d’una institució molt important del país podem trobar coses així (canvio els texts per centrar l’atenció):

<ul id="ul_home">
	<li><a class="vermell_nobullet_2" href="http://www.example.com">Ipse quat erimo</a></li>
	<li><a class="vermell_nobullet_2" href="http://www.example.com/dog">Sailer due rit</a></li>
</ul>

<div class="marge_superior">
    <h2><span id="actualitat" class="titol_seccio">Lorem ipsum</span></h2>
</div>
<div id="altres_serveis" class="border_top">
    <div class="border_bottom">
        <a class="text_gris" href="http://www.example.com/bird">Dolor et sumum</a>
    </div>
</div>

El valor de l’atribut @class d’alguns dels elements ja ens dóna informació de com s’estilitzaran al veure-ho associat al seu full d’estils.

Però sovint no es veu tan fàcilment la incorrecció a l’assignació dels noms de les classes. Per exemple, és ben normal trobar-nos sempre al fragment de descripció de l’organització d’un document, classes del tipus:

<body class="3-columnes">
    <div class="columna-esquerra">
        Lorem ipsum
    </div>
    <div class="columna-central">
        Dolor set
    </div>
    <div class="columna-dreta">
        Icse et luopir
    </div>
</body>

Hi veieu res d’estrany? Per saber si les classes són reveladores de la forma final, només cal que us feu la següent pregunta: podríeu saber quina és la forma final de la pàgina només llegint l’HTML? Si la resposta és sí, les classes són errònies. Si és no, doncs la cosa ja està millor.

Per exemple, una forma correcte de fer la divisió del document podria ser:

<body class="layout-complet">
    <div class="contingut-primari">
        Lorem ipsum
    </div>
    <div class="contingut-secundari">
        Dolor set
    </div>
    <div class="contingut-terciari">
        Icse et luopir
    </div>
</body>

Oi que ara ja no us espereu com serà el document final?

Per tant, cal anar amb compte a l’hora d’assignar els noms a les classes. Sempre cal tenir ben present de separar la forma o presentació del contingut i anar una mica amb peus de plom a l’hora de cercar els valors. Així aconseguirem que els nostres documents siguin 100% independents de la forma en que es visualitzen.

Sovint ens interessa amagar contingut de la nostra pàgina a l’ull humà com pot ser el cas dels menús per a saltar a continguts de la pàgina, en l’ús de tècniques de reemplaçament de contingut per imatges o per ocultar capçaleres o elements estructurals de la pàgina. És veritat que ens interessa amagar-ho de l’ull humà, però el que no volem de cap de les maneres, és amagar-ho dels lectors de pantalla.

El típic error

Si donem una volta per la xarxa, el que sovint trobem escrit i recomanat, és l’ús de la propietat display: none per a ocultar elements. Amb això satisfem la nostra voluntat de que l’ull humà no percebi el contingut, però el problema és que sovint, els lectors de pantalla tampoc n’interpreten res.

Podríem dir que display: none significa que l’element no existeix: ni es mostra, ni s’imprimeix, ni es llegeix el seu contingut.

La solució

Una tècnica alternativa que es pot considerar és la de posicionar l’element que volem amagar de forma absoluta fora del viewport. Així, l’element existeix però no es percep per l’ull humà. El CSS que podem usar és:

.access {
    left: -9999px;
    position: absolute;
}

Amb això aconseguim el mateix efecte visual però sense ignorar a una part dels usuaris.

Tot això no és pas invenció meva, sinó que és una adaptació d’un article que vaig llegir fa uns dies.

Quan parlem de selectors CSS sovint ens venen al cap o als ulls expressions d’aquest tipus:

* {...}
e {...}
e f {...}
e > f {...}
e, f {...}

Però dins l’àmbit de selectors, hi ha tot un món de possibilitats que ens poden ajudar molt al nostre dia a dia (sinó, doneu-li un cop d’ull a l’apartat de selectors de l’especificació de CSS2¹ o de CSS3).

Del gran conjunt de selectors, en aquesta entrada vull parlar una mica i posar diversos exemples de com treure-li profit als selectors d’atribut. Abans de continuar, i per variar una mica, aquest tipus de selectors no funcionen en Internet Explorer 6 o anterior.

Els selectors d’atribut són els següents:

Per exemplificar l’ús d’aquest tipus de selectors, prendrem com a cas d’ús la personalització d’enllaços en diferents situacions.

Per exemple, i tal i com es fa en aquest bloc amb els enllaços, podríem voler adjuntar de forma visible pel lector quin és l’idioma de la pàgina enllaçada. Aquí ho fem amb la següent regla:

a[hreflang]:after {
  content: " ["attr(hreflang)"]";
  font-size: 0.8em;
}

Seguint l’exemple dels idiomes, podríem voler marcar l’enllaç d’un cert idioma amb una icona gràfica al seu voltant. Per exemple, en el cas del català, ho podríem fer de la següent manera:

a[hreflang="ca"] {
  background: url(icona-catala.png) no-repeat right center;
  padding-right: 1em;
}

Seguint amb aquests exemples, imaginem-nos que tenim un enllaç on el seu atribut rel té el conjunt de valors friend met co-worker muse i volem caracteritzar els amics amb una icona especial al costat de l’enllaç. Doncs bé, ho podríem fer amb el següent codi:

a[rel~="friend"] {
  background: url(icona-amic.png) no-repeat right center;
  padding-right: 1em;
}

Si ens interessés destacar amb alguna icona, tots els enllaços que tinguessin com a destí el W3C, podríem fer servir el següent codi:

a[href^="http://www.w3c.org"] {
  background: url(icona-w3c.png) no-repeat right center;
  padding-right: 1em;
}

O per exemple, si volguéssim posar-li una icona del format del fitxers enllaçat, podríem usar el següent codi pel cas del PDF:

a[href$=".pdf"] {
  background: url(icona-pdf.png) no-repeat right center;
  padding-right: 1em;
}

Seguint amb tot això, si volem tenir un enllaç caracteritzat si el seu atribut title o l’href conté la paraula “css”, podem usar el següent codi:

a[title*="css"][href*="css"]:after {
  color: #000;
  content: " (enllaç sobre CSS)";
  font-size: 0.8em;
}

I per acabar amb el darrer selector i tornant amb els exemples de la caracterització d’enllaços segons el seu idioma, podríem voler caracteritzar tots els enllaços en anglès amb una icona, independentment de si és anglès americà (en-US) o el general (en):

a[hreflang|="en"] {
  background: url(icona-angles.png) no-repeat right center;
  padding-right: 1em;
}

Amb tots aquests exemples, es pot veure que gràcies a aquest selector, se’ns obra tot un món de possibilitats a l’hora de caracteritzar diversos elements.

div#contenidor {
  /* estils per a IE6 i anteriors */
}

div[id="contenidor"} {
  /* estils per als altres navegadors */
}

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.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

  <div id="columna-metadades" class="bloc">
      ...
  </div>

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.