He is Barack Obama

JibJab és una pàgina d’enviament d’eCards que n’ha fet una sobre en Barack Obama. Com que l’he trobat molt divertida no m’hi he pogut estar d’incloure-la en aquest post, en format vídeo de YouTube (el vídeo acaba amb una mena de making-off publicitari que també està bé…)

Com escriure per al web

Segons l’expert en usabilitat Jakob Nielsen, el text de les pàgines web no es llegeix pràcticament mai.

Partint d’una afirmació tan dura (però probablement certa) només ens queda actuar de la següent manera: cal redactar textos amb força i fàcils de llegir.

Hi ha diversos motius o causes que fan que el lector no llegeixi amb detall i es limiti a fer un escombrat visual de les pàgines buscant elements que cridin la seva atenció. Per això les pàgines han d’estar preparades per a aquesta revisió ràpida dels continguts.

Abans d’entrar en detall cal fer una menció especial a la inclusió de publicitat dins els webs, ja que els usuaris han après a ignorar els missatges publicitaris:

• els que estan camuflats dins el text, fins i tot quan volen aparentar informació objectiva. L’usuari detesta la publicitat intrusiva que el desvia del contingut central.
• l’usuari avançat ignora sistemàticament els anuncis publicitaris en forma de bàner o de finestra emergent (pop-up). A més, els nous navegadors bloquegen aquestes finestres emergents.

1. Estil:

• Brevetat i senzillesa: es recomana fer servir menys del 50% del text utilitzat habitualment en una publicació escrita. Els paràgrafs han de ser curts, de dues o tres frases únicament. Les frases han de ser curtes i directes.
• Missatge clar: l’objectiu central del missatge ha d’estar clar des de la primera línia, des del primer paràgraf.
• Una idea per paràgraf.
• Veu activa: tot i semblar més impersonal o objectiva, la veu passiva allunya i allarga innecessàriament el missatge.
• El lector, a priori, no sap de què estem parlant: eliminem argot, llenguatge especialitzat, acrònims, sigles, denominacions tècniques i internes…
• Cada bloc de contingut ha de ser autònom i permetre ser llegit de forma independent. Això implica no fer referències necessàries a blocs anteriors ni posteriors ni utilitzar convencions que depenguin, per a ser enteses, d’informació que està fora d’aquell bloc.
• Els primers 3/4 del primer escombrat visual haurien de donar pistes per saber què trobarem més avall, si és que hi ha més continguts autònoms. Això pot resoldre’s principalment a través del disseny i prototipat de la pàgina, mostrant estructures que comencen més enllà, gràficament diferents, etc.

2. Tipografia i estructura

S’estima que la velocitat de lectura en pantalla baixa un 25% respecte al paper. Així mateix, l’índex de concentració és menor en pantalla. Només un 10% dels usuaris tendeix a llegir un missatge de més de 3 pantalles (400 paraules), independentment del seu tema. Per tant, es recomanable:

• Deixar espais en blanc dins el missatge (salts de paràgraf, distància dels marges, interlineats generosos…)
• Emprar lletres amb molt contrast cromàtic vers el fons.
• Evitar imatges de fons.
• Utilitzar cossos de tipografia relativament grans (de 10 a 14px)
• Evitar textos que es mouen, intermitents, etc.
• Utilitzar les negretes de forma regular, amb més freqüència que al paper, per destacar la idea, paraula o concepte clau de cada paràgraf. Però controlar-ho: massa negretes col·lapsen el paràgraf i “invisibilitzen” la resta de contingut.
• Per als continguts, tipografies sans-serif (contràriament al que es deia pels mitjans impresos). Per a títols, pot alternar-se amb serif.
• Evitar cursives i paraules o expressions escrites totes en majúscules.

3. Estructura del missatge i dels continguts

La lectura a Internet no és lineal. És diagonal, irregular, trencada per salts i exploratòria. Per tant, és recomanable:

• Utilitzar llistes d’ítems, amb vinyetes o números.
• Estil de piràmide invertida. Un clàssic en l’estil periodístic. La importància dels arguments, de les idees, anirà decreixent a mesura que el lector continuï llegint. Així s’aconsegueix que, independentment del moment en què el lector abandoni el text, ja hagi llegit el més important. En resum: primer la idea general i després els detalls.
• En clau digital: una base ampla per a la piràmide invertida. Al mitjà digital, el peu d’una pàgina o d’un missatge té més pes que els continguts que puguin haver-hi pel mig. Per això, trencant la lògica de la piràmide invertida, el peu de missatge, el darrer bloc d’una pàgina, traurà profit d’un tractament estructural diferenciat i el seu contingut tindrà més possibilitats de ser llegit/clicat. Pot servir per concloure un missatge, per recordar punts interessants ja expressats i/o recuperar els èmfasis inicials, per donar un seguit d’eines de continuació, enllaços genèrics, etc.
• La nostra redacció ha de ser lineal (malgrat que a Internet la lectura no ho sigui). No intercalem temes o subtemes fins que hem acabat l’anterior; utilitzem subtítols o marques tipogràfiques o de paràgraf per indicar un canvi de tema; no recuperem temes ja tancats anteriorment (si no és a un bloc que pretengui fer de resum)…
• Cal fomentar la lectura lineal. Mirem de no excedir-nos amb la introducció d’enllaços interns o externs dins el text. L’usuari pot trobar-ho molest i pot sentir-se insegur per no saber si seguir amb la lectura o fer clic a l’enllaç.
• Si volem que un (algun) contingut sigui llegit amb més atenció, hem de facilitar-ne la impressió en paper.
• Corregir els textos.
• Fer servir llengües estrangeres amb professionalitat. Una mala traducció pot generar un efecte psicològic negatiu en els lectors estrangers que ens visitin.

4. Enllaços

A Internet, ningú té temps. Aquest és un factor comú de qualsevol sector, especialitat, gènere, moment del dia o franja d’edat. Per tant…

• Especialment en comunicació push, un objectiu bàsic ha de ser convertir la lectura en un clic en els primers 30-40 segons de la lectura.
• Per tant, el primer paràgraf i els 3/4 de l’escombrat visual ha de contenir diverses vies de sortida (conversió en clic), des del text, des d’alguna imatge, des d’algun botó o icona… Han de ser els enllaços amb els contingut més estratègic.
• Els enllaços són la porta de sortida i el retorn de la inversió d’una comunicació push. Ha de veure’s clarament que ho són. I, com les negretes, se n’ha de mesurar l’ús. Dins un mateix paràgraf o bloc, els enllaços competeixen entre ells i s’ha de triar el més significatiu, el més estratègic o el que condueixi més directament a l’acció que volem.
• No es recomanen fórmules tipus “clica aquí” o “segueixi aquest enllaç”, sinó hiperenllaçar les paraules o les fórmules clau, marcant (tipo)gràficament que són enllaços i només enllaços. També pot emprar-se l’adreça directa de l’enllaç, si és clara i curta.
• Els enllaços sempre han de portar al lloc on indiquen. Això vol dir que si anunciem un contingut, el clic ha d’anar directament a aquell contingut i mostrar-lo en pantalla; que no enviem l’usuari a pàgines prèvies o que intentem no enviar-lo a pàgines que necessiten registre previ, que no l’enviem a pàgines genèriques si no és el que estem indicant, etc.

5. Utilització d’imatges i icones

Les imatges compleixen diverses funcions dins un missatge electrònic, il·lustrant un contingut, ajudant a la lectura i la comprensió i, en general, construint una posada en escena més atractiva de tot el missatge. Caldria tenir en compte que…

• Han d’aportar alguna cosa al missatge, però no necessàriament de manera directa i unívoca. Una imatge pot il·lustrar una activitat sense estar-hi directament relacionada.
• No gaires per missatge. Probablement una de central i més voluminosa i opcionalment altres de secundàries i amb menys pes gràfic.
• Cuidar-se que una icona no provoqui un malentès cultural.
• La selecció de la imatge central, especialment, és important per a una comunicació electrònica. Cal prestar-hi atenció i triar-la en funció dels valors, significats, estil i fins i tot cromatisme que aporten al conjunt comunicatiu.
• Especialment per a les imatges centrals, podem utilitzar ocasionalment imatges de repositoris fotogràfics.
• És interessant incloure continguts en vídeo dins alguns missatges. Si ho fem, utilitzem la convenció YouTube del botó de play al centre de la imatge que porta al vídeo.
• El disseny de les comunicacions, especialment les seriades, poden incorporar algunes icones que el complementin.
• Algunes accions interactives poden indicar-se mitjançant botons o similars.

6. Títols i subtítols

Els titulars, títols i subtítols tenen gran importància en la lectura en pantalla.

• Utilitzar títols i subtítols amb més freqüència que al suport paper.
• Els títols han de ser senzills, construccions simples i curtes. Els jocs de paraules poden tenir resultats contraproduents.
• Els subtítols intercalats amb el text tenen la funció de subdividir i ajudar a l’exploració del text i, per tant, són molt importants en la lectura en línia.

7. Altres elements estructurals

Podem enriquir alguns missatges, especialment els monotemàtics, amb frases, cites o elements semblants. Quan ho fem, marcarem tipogràficament i/o estructuralment que allò és un element exogen.

Fonts: Bloc de Joan Mayans, useit.com, Website boosting

Article relacionat: 20 tips on how to write for the web

IE6 denial message

Genial il·lustració d’en John Martz que representa de forma molt gràfica (i molt divertida) el que encara hem de patir la gent del ram del desenvolupament web.

Per veure-la en gran format cliqueu a sobre de la imatge o aquí.

Una altra definició d’Usabilitat

Usabilitat és un atribut de qualitat que avalua com les interfícies d’usuari són fàcils d’usar. La paraula “usabilitat” es refereix també a mètodes per millorar la facilitat d’ús durant el procés de disseny.

Jakob Nielsen

Firefox 3.5 beta

Ja és entre nosaltres la versió beta de Firefox 3.5. El web ens explica, entre d’altres meravelles, que la nova versió és 2 cops més ràpida que la versió 3.0., i fins a 10 cops més que la versió 2.0. Una altra novetat és que és compatible amb HTML 5. L’actualització arribarà a molts nivells del programa, fins i tot al logotip.

En ser una beta podem trobar problemes de compatibilitat amb alguns webs i add-ons que ja tinguem instal·lats …els típics inconvenients de les versions de prova.

En tot cas aquesta aparició és una gran notícia, i no puc deixar d’animar els usuaris de navegadors obsolets (IE6, IE6, IE6!) a que s’actualitzin

15 passes per a una jornada laboral més productiva

A Vandelay Design Blog podem trobar un article anomenat 15 Steps to a More Productive Workday. Us en faig cinc cèntims…

1. Prepara una llista de tasques per al dia. La millor manera de tenir un dia improductiu és començar-lo sense tenir una definició clara del que s’ha de fer.
2. Prioritza tasques.
3. Posa més èmfasi en acabar tasques que en començar-ne de noves.
4. Coneix els moments més productius del teu dia. D’aquesta manera podem dedicar les hores menys productives a fer tasques menys productives.
5. Dóna’t una mica de flexibilitat per fer front a imprevistos, etc.
6. Tingues una hora específica d’acabament de la jornada laboral.
7. Divideix el temps en blocs i dedica’ls a tasques determinades.
8. Mesura el temps que dediques a cada cosa.
9. Reconeix les teves distraccions.
10. Tingues expectatives reals dels projectes.
11. Al final de cada dia, planeja el dia següent.
12. Dorm suficientment.
13. Menja saludablement.
14. Pren l’aire.
15. Treballa en un ambient confortable.

Bones pràctiques en maquetació HTML

Fa pocs dies, a Nettuts+, s’hi va publicar l’article 30 HTML Best Practices for Beginners. El seu autor és Jeffrey Way. M’ha semblat molt interessant, tot i que per vergonya meva el títol de l’article original acaba amb les paraules for Beginners. No em considero un principiant, i hi ha algunes d’aquestes pràctiques que no aplico. Així que per fer-ho menys humiliant he tret els beginners del títol. He traduït algunes de les bones pràctiques i espero que em pugui servir de memo a mi, als meus companys i a la gent del ram que llegeixi l’article.

1. Tancar sempre les etiquetes

Pels estàndards actuals de maquetació hem de mirar d’evitar al 100% les etiquetes sense tancar o les mal tancades.

Mal fet:
<li>Some text here.
<li>Some new text here.
<li>You get the idea.

Ben fet:
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>

2. Declarar el correcte DOCTYPE

El DocType va abans de l’obertura de les etiquetes HTML a la part superior de la pàgina, i li indica al navegador si la pàgina conté HTML, XHTML, o una combinació d’ambdós, de manera que pugui interpretar correctament les marques.

La majoria triem entre aquests quatre DocType a l’hora de crear nous llocs web:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

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

3. No utilitzar estils en línia

Quan piquem codi durant la maquetació HTML ens podem veure temptats per fer via i anar aplicant els estils sobre la marxa, dins la mateixa línia de codi HTML.

<p style=”color: red;”>I’m going to make this text red so that it really stands out and makes people take notice! </p>

Pot semblar inofensiu però a la llarga pot apuntar cap a errors de codi, a banda que fa que les línies de codi siguin molt més llargues i això repercuteix negativament al pes de la pàgina i a les validacions d’accessibilitat, SEO…

Primer s’ha de construir l’estructura completa. Un cop tinguem tot el codi hi aplicarem els estils en cascada CSS:

#someElement > p {
color: red;
}

4. Col·locar els estils CSS externs dins l’etiqueta HEAD

Tècnicament l’especificació d’HTML recomana l’inclusió dels estils en cascada CSS dins el Head. El benefici principal és que la pàgina carrega més ràpidament.

<head>
<title>My Favorites Kinds of Corn</title>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”path/to/file.css” />
</head>

5. Col·locar els arxius Javascript a la part inferior de la pàgina

Cal recordar que l’objectiu principal és que la pàgina carregui el més ràpid possible a l’usuari. Quan es carrega un script, el navegador atura la càrrega de la pàgina fins que no acaba d’interpretar aquest script. L’usuari haurà d’esperar un temps a que finalitzi aquest procés.

La única finalitat dels arxius Javascript és afegir funcions extra a la pàgina, per tant podem situar aquests arxius a la part inferior de la codificació. El fet que siguin els últims arxius en carregar-se no afectaran negativament el procés de càrrega de la resta de la pàgina, si no tot el contrari.

<p>And now you know my favorite kinds of corn.</p>
<script type=”text/javascript” src=”path/to/file.js”></script>
<script type=”text/javascript” src=”path/to/anotherFile.js”></script>
</body>
</html>

6. No utilitzar Javascript en línia

Una pràctica comuna anys enrere era la utilització de comandaments Javascript aplicats directament sobre les etiquetes HTML. Això va ser molt comú en les galeries d’imatges o a enllaços on normalment s’adjuntava a la etiqueta un atribut “onclick”. Actualment això mai no s’ha de fer.

7. Validar contínuament

Fa poc vàrem publicar un article en el que parlàvem de la importància de validar, i d’alguns dels diferents mètodes online de validar els nostres documents HTML i fulls d’estils CSS.

Per anar fent les validacions de forma àgil mentre anem treballant és recomanable descarregar la barra d’eines per a desenvolupadors web de Firefox: Web Developer Toolbar. Un cop l’instal·leu, cliqueu el botó “tools” i feu servir contínuament les opcions “Validate HTML” i “Validate CSS”.

8. Descarregueu “Firebug”

Es tracta d’un altre add-on de Firefox. Ajuda a la depuració de Javascript i ens ajuda a identificar elements que hereten propietats d’altres elements que desconeixem. Descarregueu-lo!

9. Ús de Firebug

• Descripció general de Firebug (anglès)
• Depura Javascript amb Firebug (anglès)

10. Escriviu les etiquetes amb minúscules

Tècnicament no hi ha cap problema en la capitalització dels noms de les etiquetes HTML, però fer-ho tampoc no serveix per a res i resulta bastant molest per als ulls dels desenvolupadors.

Mal fet:
<DIV>
<P>Here’s an interesting fact about corn.</P>
</DIV>

Ben fet:
<div>
<p>Here’s an interesting fact about corn.</p>
</div>

11. Feu servir etiquetes H1-H6

La millor pràctica és fer servir tots 6 tipus d’encapçalament. L’autor d’aquest article se sincera dient que no arriba a sobrepassar el H4. Jo no supero el H3. Però per raons semàntiques i de SEO, de vegades és millor fer servir un H6 que una P quan s’escaigui.

<h1>This is a really important corn fact!</h1>
<h6>Small, but still significant corn fact goes here.</h6>

12. Als blocs, feu servir H1 per al títol de l’article

Als blocs i als webs, és millor assignar la etiqueta d’encapçalament principal H1 per al títol d’un article o d’un encapçalament rellevant que no pas un logotip o el títol del bloc o el web.

13. Descarregueu “ySlow”

És un altre add-on de Firefox. ySlow un cop s’activa, analitza el web i ens fa un informe on es detallen les necessitats de millora del lloc.

14. Barres de navegació amb llistes UL

Podem maquetar aquesta secció de navegació de la següent manera:
<div id=”nav”>
<a href=”#”>Home </a>
<a href=”#”>About </a>
<a href=”#”>Contact </a>
</div>

Però per raons semàntiques, és millor maquetar el contingut com si es tractés d’un llistat d’ítems:
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>

15. Aprèn hacks de IE

També hem parlat dels hacks en un article anterior. Tard o d’hora ens trobarem aplicant estils que només Internet Explorer pugui interpretar, especialment les versions anteriors a les actuals (IE6 principalment).

Una bona manera de fer-ho és generar un full d’estils exclusiu per Internet Explorer, i que podríem anomenar “ie.css”. Després aplicarem aquest condicional al codi de la maqueta:

<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”path/to/ie.css” />
<![endif]–>

Aquest codi està dient: “Si ets usuari d’Internet Explorer 6 o inferior, importa aquest full d’estils. Del contrari, no ho facis”.

16. Tria un bon editor web

Mac:

• Coda
• Expresso
• TextMate
• Aptana
• Dreamweaver CS4

PC:

• InType
• E-Text Editor
• Notepad++
• Aptana
• Dreamweaver CS4

17. Quan el web estigui acabat, comprimeix

Comprimint els arxius CSS i Javascript podem reduir el pes dels arxius en un 25% o més. No és convenient de fer-ho durant el procés de desenvolupament, només un cop hem acabat.

Serveis de compressió Javascript:

• Javascript Compressor
• JS Compressor

Serveis de compressió CSS:

• CSS Optimised
• CSS Compressor
• Clean CSS

18. Talla, talla, talla

Un cop hem finalitzat la maquetació hem de revisar el codi i mirar de reduir el nombre d’elements de la pàgina. Un UL ha d’estar embolcallat per un DIV? No cal.

19. Totes les imatges han de tenir atributs ALT

És fàcil passar per alt els atributs ALT dins les etiquetes d’imatges. Tanmateix és un element molt important per qüestions de validació i accessibilitat. Cal tenir cura especial d’aquest punt.

Mal fet:
<IMG SRC=”cornImage.jpg” />

Ben fet:
<img src=”cornImage.jpg” alt=”A corn field I visited.” />

20. Observar el codi font

Quina manera millor d’aprendre HTML que copiant. Inicialment tots som copiadores. A continuació, lentament, comencem a desenvolupar els nostres propis estils i mètodes. No es tracta de robar el disseny, si no d’aprendre l’estil de codificació.

En quant als efectes Javascript, moltes pàgines fan servir scripts. Només cal de saber de quin script es tracta i de cercar-lo a Google.

21. Estils a tots els elements

Aquesta bona pràctica està bàsicament pensada per als clients que administrin els seus webs. Només perquè nosaltres no fem servir blockquote o OL no significa que els nostres clients no les facin servir. Cal crear una pàgina especial on mostrar els estils de cada element: ul, ol, p, h1-h6, blockquote, etc.

22. Fes servir Photoshop

Tot i que faig servir bàsicament Fireworks per fer els dissenys de webs, també m’ajudo en força ocasions de Photoshop. Aquest punt vindria a dir que familiaritzar-se amb un editor d’imatge és el pas necessari posterior a l’haver après HTML i CSS (o a l’inrevés).

23. Aprèn cada etiqueta HTML

Hi ha dotzenes d’etiquetes que no fem servir i ni tan sols veiem en altres llocs. Però això no significa que no els hàgim d’aprendre. Què hi ha de la etiqueta <abbr>? I de la etiqueta <cite>?

24. Participeu a la Comunitat

Hi ha llocs web que contribueixen en gran mesura a la millora dels coneixements del desenvolupador web. Tard o d’hora un pot arribar a familiaritzar-se de tal manera amb aquest entorn que també pot ensenyar a altres desenvolupadors amb menys experiència. I tot gràcies a blocs, fòrums, pàgines personals, etc.

25. Fes servir CSS Reset

Aquest és un aspecte debatut: fer servir o no un CSS Reset. A l’igual que l’autor de l’article, jo també ho recomano al 100%.

Per defecte els navegadors interpreten a la seva manera les diferents etiquetes HTML. Per això ens podem trobar que quan no hem donat estil a determinades etiquetes, aquestes poden tenir un comportament no desitjat o molest. Un CSS Reset el que fa es deixar totes les propietats de les etiquetes a 0.

A continuació hi ha el CSS Reset més popular, d’Eric Meyer:

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;

}

26. Alinea els elements

Aquesta ja és més una qüestió de disseny que no pas de codificació. Anteriorment també hem parlat d’això en un article. Hem de buscar la millor alineació dels elements. El nostre cervell busca associacions d’elements, relacions entre ells… En definitiva, tendeix a ordenar i agrupar els elements. Alinear-los correctament ajuda a una comprensió més ràpida per part de l’ull i el cervell. A més, segons l’autor, podrem argumentar de forma irrebatible el perquè hem situat un element en un lloc determinat.

Fashion your Firefox

Fashion your Firefox és un recull d’add-ons pensats per donar un “toc personal” al navegador Firefox.

Classificats per categories, podem trobar complements per modificar l’aspecte del navegador, per connectar-nos a xarxes socials o subscriure’ns a RSS sense haver d’anar a cap web…

La biblioteca de complements de Firefox és molt àmplia i aquí en falten molts, però els que hi ha són molt interessants. Un altre valor afegit que fa tant interessant aquest navegador.

La Segona Edat Contemporània (II)

Poc més d’un any després de la publicació de l’article en que comentàvem la presentació d’aquesta iniciativa privada sense ànim de lucre, La Segona Edat Contemporània presenta ara la seva nova imatge gràfica.

Aquest nou impuls neix coincidint amb la publicació, en format PDF, de l’assaig que du per nom “La Societat de la Ignorància“, que podeu descarregar des de la mateixa pàgina web de La Segona Edat Contemporània o fent clic a sobre de la imatge.

JPlayer, el plugin reproductor de MP3

JPlayer és un plugin JQuery que ens permet la reproducció i el control d’arxius MP3 dins els nostres webs. És totalment personalitzable mitjançant CSS, i fins i tot inclou efectes de so.