Activar la gestió de perfils de color en Firefox 3

A banda de Safari, els navegadors d’Internet no estan preparats per llegir tota la gama de colors de les fotografies i gràfics que visualitzem (sempre i quan fem servir la gestió de color adequada en el seu tractament abans de pujar-les a Internet). Per aquest motiu ens perdem gran part de la gama de color d’aquestes fotografies i gràfics.

Ara Firefox 3 també ens permet d’activar la gestió de perfils de color. El procediment és el següent:

• Escriviu a la barra de navegació: about:config
• Premeu Enter
• Busqueu entre les opcions la que diu: gfx.color_management.enabled
• Per defecte al costat hi apareix False. Feu doble clic i canviarà a True. La gestió de perfils ja està activada.
• Reinicieu el navegador.

Els resultats salten a la vista

Tres validacions que hauríem de fer a les nostres maquetes web

A banda de les tendències de disseny que hi puguin haver avui dia o en el futur, existeixen uns estàndards que cal respectar i que afecten principalment al codi HTML i als estils CSS. Uns estàndards cap al qual es dirigeixen la majoria de navegadors i que facilitaran, d’una banda, una bona visualització als mateixos, i de l’altra, un bon posicionament als cercadors d’Internet.

1. Validació als navegadors (Firefox, Explorer, Opera, Safari…)

Un cop hem dissenyat i maquetat la nostra pàgina, abans de validar el codi com veurem a continuació, sempre cal comprovar que es veu correctament en la majoria de navegadors. Per sort, la majoria d’aquests navegadors estan disponibles pels sistemes operatius més utilitzats.

També cal tenir en compte que els navegadors disposen de diferents versions (Firefox 2, Firefox 3, IE6, IE7…), i elements que es visualitzen bé en la darrera versió poden tenir un comportament no desitjat en una versió anterior del navegador. Per desgràcia aquesta és una de les tasques més pesades que ha d’afrontar el maquetador i el programador web.

2. Validació del codi HTML i dels estils CSS

La validació de l’estàndard HTML el podem fer a validator.w3.org, i la de l’estàndard CSS a jigsaw.w3.org. Prèviament haurem de tenir la nostra maqueta penjada a Internet, i un cop escrivim l’adreça i pitgem el botó, l’aplicació ràpidament ens mostrarà els resultats. En el cas que no s’hagi superat la validació, l’aplicació ens llistarà els errors o avisos per a que els puguem corregir.

Firefox disposa de complements que mostren si els codi és vàlid, però la validació final sempre cal fer-la directament a W3c.

Un inconvenient que pot produir-se, és que a les pàgines amb gestor de continguts l’administrador del web (p.e. nostre client) introdueixi codi no vàlid. Això ja escapa una mica de les nostres mans i només ens queda anar millorant les nostres eines d’administració i mirar d’”educar” en la mida del possible al nostre client o a l’usuari que gestionarà el web.

3. Validació SEO (Search Engine Optimisation)

Si bé és cert que per obtenir un bon posicionament calen més factors (que van des d’un bon disseny d’arquitectura de continguts fins a una bona programació, passant per un disseny gràfic adequat, etc.), també hi ha eines a Internet que analitzen la sintaxi del codi buscant uns estàndards adequats. Pot passar que tinguem un codi HTML vàlid que no passi la validació SEO. Una eina molt útil és SEO validator, que té un funcionament molt similar al validador de W3c.

De totes maneres us aconsello (i a mi també) d’estudiar més aquest tema a través d’articles, manuals o llibres abans d’aventurar-se a fer aquesta validació sense saber res sobre SEO.

Una altra definició d’Usabilitat

Javier Royo ens explica en el seu llibre Diseño digital:

“[...] En aquest punt la usabilitat, la qualitat d’ús de les eines que ens trobarem als webs d’aquestes marques es converteix en peça fonamental per l’èxit de les mateixes. No és suficient amb mostrar una cara bonica, amb establir uns valors estètics. L’usuari busca un llenguatge clar, una forma coherent d’arribar a continguts i d’interactuar amb el sistema. Si no, la seva forma d’existència no arriba a ser comunicada amb eficiència i la seva principal tasca es dilueix.”

4 principis per a un bon disseny web

Fa alguns dies vaig llegir a My Ink Blog un article anomenat 4 principles of good design for websites. Em va semblar molt interessant i l’he volgut traduir per incloure’l dins el nostre bloc.

Tot i que el disseny pot semblar una cosa molt subjectiva ja que hi intervé el bon gust d’un dissenyador, també hi juguen elements que no ho son tant, com per exemple la percepció i uns patrons de conducta, alguns dels quals tenen molt a veure amb la percepció, específics dels usuaris d’Internet. Per això sempre és bo de tenir en compte aquests principis de disseny i usabilitat que de tant en tant podem anar descobrint de mans d’altres professionals, llibres, tutorials o fins i tot fruit del nostre propi treball.

1. CONTRAST

El contrast pot deixar una molt bona impressió de l’usuari. Sense un punt focal l’espectador es pot perdre en un mar d’elements de la mateixa mida i tipografia. El dissenyador té la tasca de crear elements o referents visuals que orientin l’usuari.

Contrast d’imatges: sovint és molt eficaç mostrar, per exemple, una gran il·lustració al costat de petits elements.

Contrast de colors: la proporció correcta de color és una altra manera eficaç de crear contrast dins d’un lloc web. Per exemple, podem centrar l’interès o podem donar rellevància afegint colors vius al costat de colors neutres.

Contrast de tipografies: podem generar contrast fent servir fonts o mides de lletra diferents dins la mateixa pàgina. La semblança de les fonts tendeix a crear confusió i a desdibuixar el disseny. Tanmateix pot ser molt eficaç si es combinen fonts amb mides molt diferents, combinant versions lleugeres amb versions agosarades d’una mateixa font.

2. REPETICIÓ

Ja hem parlat de la repetició d’elements en un article anterior. És un recurs fins i tot més comú dins el disseny d’impressió que en el disseny web. La repetició d’elements pot ajudar a crear un aspecte de marca, i podem jugar-hi també per agrupar elements,  ja que la nostra ment per defecte mira d’agrupar i racionalitzar el que percep. Vegeu els plàtans a l’exemple següent:

3. ALINEACIÓ

L’alineació dels elements també adquireix un paper important que pot marcar la diferència respecte dissenys més “amateurs”. Per aquest motiu és molt útil fer servir retícules que ens ajudin en aquesta tasca. Podeu aprofundir més sobre aquest tema consultant i fins i tot descarregant retícules de 960 Grid System.

El següent exemple és una clara mostra, també reforçada mitjançant l’ús de línies. Cal destacar el triple columnat. A l’igual que passa amb els escrits em premsa, quan més estreta és una columna millor és la llegibilitat del text que hi ha a dins.

4. PROXIMITAT

Amb anterioritat també hem parlat sobre aquest principi, que té a veure amb el que comentàvem abans sobre la nostra percepció i la tendència a agrupar elements tancats, similars, alineats o propers. De la mateixa manera podem fer servir la proximitat per diferenciar elements, tan sols hem de deixar les separacions o els espaiaments adequats. El següent exemple és una mostra d’això, ja que podem percebre tres columnes per la proximitat i distància dels seus elements:

Drupal, eina per a creació de websites dinàmics

Aquesta és la meva primera aportació al bloc, així que començaré per explicar ràpidament la plataforma CMS Drupal, una eina molt potent i útil que trobo indispensable per la creació de websites dinàmics.

Per a tots aquells que no ho sàpiguen, Drupal és una de les plataformes anomenades CMS (Content Management System), aplicables en qualsevol sistema operatiu i totalment gratuït. Es basa, doncs, en un sistema compost per diversos mòduls escrits en PHP i amb incorporació de MySQL (ja que funciona mitjançant consultes a bases de dades), i que a vegades poden contenir parts de codi en JavaScript. És a dir, és una plataforma que treballa en els servidors Apache i que permet crear weblogs (blogs en els casos més senzills de CMS com són el conegut WordPress, o el Joomla, un tant més avançat).

l Drupal es caracteritza, com els seus companys CMS, per ser una eina capaç de ser utilitzada tant per usuaris de nivell mitjà, com per desenvolupadors més avançats. Val a dir, a més, que es tracta d’un dels CMS gratuïts més complexos i complets pel ja anomenat sistema de mòduls, un conjunt de blocs de codi amb funcions molt específiques que permeten, mitjançant la seva instal·lació, realitzar diverses funcions dins el weblog com ara crear una galeria d’imatges, disposar els blocs amb informació segons es desitgi, crear un sistema de Feeds personalitzat… o d’altres més específiques com pot ser crear un sistema de classificació de paraules (tags) i visualitzar-los segons grau d’utilització.

Drupal disposa d’una xarxa d’usuaris molt extensa i documentada, cosa que la fa altament actualitzable gràcies a l’extens col·lectiu de desenvolupadors que la formen i participen. Només cal que aneu a la seva web general (www.drupal.org) per comprendre la dimensió de seguidors, desenvolupadors i dissenyadors, que composen aquest col·lectiu. A més, també existeixen agrupacions més locals, com és el cas de www.drupal.cat, ja que la plataforma permet, també, personalitzar tot el site en l’idioma o idiomes que es vulgui.

Una altra de les advantatges d’aquesta plataforma, (hem de tenir en compte que es tracta d’una eina de nivell mitjà-avançat per a desenvolupadors i dissenyadors web, si volem una plataforma per a blog més senzilla, podem utilitzar WordPress), és la creació de temes o “templates” personalitzats on, mitjançant coneixements avançats d’HTML, CSS i bàsics de PHP, podem crear una gràfica aplicable a qualsevol weblog de Drupal.

En quan a interès per a empreses, Drupal suposa una poderosa eina per a desenvolupament de websites dinàmics on existeix una actualizació de la informació continuada i amb una gran usabilitat. Redueix considerablement el temps dedicat a la construcció del site podent dedicar el temps de treball en temes més concrets com poden ser el disseny, o la creació de funcions específiques de la web.

Finalment, us deixo unes quantes captures d’exemple per a què pugueu veure la diversitat d’estils aplicables.

Les proporcions ideals d’un logotip

En aquest vídeo, el senyor Al Ries ens diu que probablement un logotip ha de funcionar o ser adequat per molts motius, però el motiu principal és que ha de ser adequat principalment per als nostres ulls. Tots dos ulls. Per a que això passi, ens explica el vídeo, la proporció ideal d’un logotip ha de ser rectangular, concretament 1:2,25. Ens parla de logotips massa alts o massa llargs, i aplica un altre principi vàlid per a la redacció en premsa i en Internet: millor dues línies curtes de text que una sola línia llarga. L’he trobat molt interessant i, tot i que naturalment sempre hi haurà excepcions, crec que és millor saber aquestes coses que ignorar-les.

Percepció, psicologia, usabilitat i disseny web

Sense voler envair el camp de la psicologia (Déu nos en guard!), si que voldria fer menció a la psicologia de la Gestalt com a un dels molts mitjans per mirar d’entendre la percepció humana i, en conseqüència, fer que els usuaris se sentin més a gust davant del nostre disseny o arquitectura de la informació.

De teoria de l’art se el poc que recordo de quan estudiava, i de teoria del disseny digital se (de moment) més aviat poc, tret del que he après de la meva experiència. I d’això puc extreure un parell de conclusions: l’usuari d’Internet és una persona que com a norma general és poc pacient i no li agrada perdre el temps o posar-se a llegir tot el que troba per la xarxa (tret que estigui buscant informació específica, com ara a un bloc, a la Wikipèdia, etc.). Per aquest motiu si un internauta que ha arribat a un web, per exemple, a través d’un cercador, no troba ràpidament la informació que busca, o l’aspecte visual (disseny, distribució de la informació) no el convenç, és caòtic, lleig…, trigarà menys d’un segon a marxar.

Per això, l’arquitectura de la informació (usabilitat) ha de ser correcta, i el disseny ha de suposar una guia i no un entrebanc. Per facilitar-nos aquestes tasques podem fer servir estudis d’altres persones, que d’ordinadors no en sabien gaire. Fa un temps vaig escriure sobre l’aplicació de la secció àuria en disseny web. Doncs el primer en fer l’estudi formal d’aquest tema fou Euclides. I altres lleis sobre la percepció, vàlides avui dia en molts aspectes, van fer-se durant la primera meitat del segle XX. Lleis com les de l’escola de la Gestalt.

Per a ells, el cervell està configurat per percebre-ho tot com una totalitat, en la qual la porció més estructurada es constitueix en la figura, i el component més indiferenciat es constitueix com a fons. Es tractaria d’una forma de simplificació de la nostra memòria immediata davant, per exemple, de formes massa complexes. De les seves teories, que d’altra banda poden ser totalment discutibles, neixen unes lleis que al meu entendre poden aplicar-se a la perfecció. Aquestes son algunes d’elles:

1. Llei de la proximitat: la nostra ment percep les coses que estan juntes o pròximes com si formessin un tot.

Traslladat al web, aquesta llei ens indica que visualitzem amb més facilitat paràgrafs ben separats els uns dels altres que no pas paràgrafs sense cap separació.

2. Llei de la similitud: la nostra ment percep les coses que se semblen com si formessin part del mateix. O dit d’una altra manera: la nostra ment agrupa els elements semblants en una sola entitat.

D’aquesta llei podem aprendre que, en pàgines web, les coses o funcions diferents hem de mirar de representar-les de la manera més diferent possible.

3. Llei de les formes tancades: de manera intuïtiva, la nostra ment s’estima més els objectes tancats als oberts, per això quan percep una forma desconeguda, primer intenta interpretar-la com a un objecte tancat.

En disseny web significa que la manera en que es disposin gràfics, símbols, línies de separació, blocs de text, etc. tindran una repercussió directa en la manera de percebre la pàgina. Amb formes tancades, com per exemple línies d’una taula, podem fer que dita taula resulti més fàcil d’interpretar en un primer cop d’ull.

4. Llei de la simplicitat: també anomenada de la senzillesa, diu que la nostra ment percep preferentment formes que es destaquen de les altres per una determinada característica. Això vol dir que formes simples, tancades, que destaquen clarament del fons, es perceben amb més facilitat.

Aquesta imatge podria ser perfectament dues “K” enfrontades, però percebem principalment un rombe. Així que també ens indica que, com més simple sigui la forma, millor.

5. Llei de la continuïtat: la ment continua un patró fins i tot després que aquest desaparegui.

En pàgines web també podem buscar línies imaginàries que ens ajudin a agrupar i a diferenciar els continguts entre si per a que resulti més fàcil d’agrupar-los ràpidament.

6. Llei de la simetria: les formes ordenades simètricament, a primera vista, sembla que formin un conjunt.

L’ull busca automàticament una forma simètrica. Això també es pot tenir en compte alhora de dissenyar l’estructura de la pàgina web, com per exemple la distribució de text en diferents columnes, etc.

7. Llei de la experiència: quan les formes no es mostren explícitament, el nostre cervell posa la part que hi falta.

L’experiència omple els buits que falten. Cal anticipar-se a les experiències dels visitants, però amb cautela, ja que les desconeixem.

Voldria acabar dient que en cap cas penso que aquestes teories s’hagin d’aplicar sempre de manera rígida, son relatives i sovint hi haurà casos en que no funcionin. Soc dels que pensen que les normes estan per trencar-les, però abans estaria bé conèixer-les.

Màrqueting online clàssic: 1. Els bàners

Sens dubte la opció més antiga i més sabuda per entrar “en circulació” és la utilització de bàners. Els bàners són espais publicitaris, de diferents mides, que es lloguen als portals web amb un alt índex de visitants i que, en polsar-los, dirigeixen cap a la pàgina de l’anunciant. Com a concepte els bàners són molt semblants als anuncis dels diaris. Poden tenir diferents mides i formes, tot i que la mida més usada és la de 468×60 píxels (bàner complet).

Darrerament cada cop es fan servir més els bàners Flash, una tecnologia que proporciona major llibertat de disseny per a l’anunciant. Però té el perill de distreure el visitant de l’autèntica finalitat: llegir el text del web que està visitant.

Hi ha molta gent a la qual no li agraden aquest tipus de bàners, i part d’aquesta gent sent autèntic refús. Cal tenir en compte un fenomen que fa que els usuaris/internautes/visitants més experimentats ni tan sols percebin els bàners. És el que es coneix com a “ceguera als bàners”.

La mecànica dels bàners és i ha estat la següent:

1- Antigament es comptabilitzaven per contacte visual (AdViews), amb el que l’anunciant pagava per cada mil contactes visuals en carregar-se la pàgina on es trobaven. El mode de facturació s’anomenava CPM o Cost per Mille.

2- Posteriorment, en veure que pocs internautes polsaven el bàner, es va passar al AdClick, en el que l’anunciant pagava per cada clic que l’usuari feia al bàner. El mode de facturació va passar a dir-se CPC o Cost per Click.

3- Altres sistemes més actuals són, per exemple, el CPL o Cost per Lead, en la qual el visitant no només ha de clicar-hi si no que també ha de fer alguna acció concreta, com per exemple subscriure’s a un butlletí, etc.

4- El mètode més eficaç actualment és el AdSales, en el que qui ofereix l’espai cobra una comissió si el visitant realment efectua una compra després de clicar el bàner.

Els bàners poden ser:

1- Estàtics, sense animacions.
2- Animats.
3- Interactius.
4- Multimèdia (rich media), contenen seqüències de vídeo, etc.
5- Etc.

Tot i ser i haver estat un mitjà de publicitat electrònica molt estès, cal tenir en compte que hi ha navegadors que tenen diferents opcions per ocultar els bàners i les finestres emergents (pop-ups). A banda cal tenir en compte el fenomen de la ceguera als bàners. Per això els bàners són un mitjà clàssic i, segons la meva opinió, una mica obsolet. Una opció poc interessant si els anunciants són petites o mitjanes empreses.

Estadístiques globals 2008

Aquestes són les estadístiques sobre navegadors, sistemes operatius, països i resolucions de pantalla que W3Counter va publicar el passat desembre de 2008. Informació molt útil, al meu entendre…

La resolució de pantalla 800×600 s’ha vist reduïda a la meitat en comparació amb l’any 2007, i l’ús de Firefox ha augmentat. Desgraciadament per als desenvolupadors, Internet Explorer 6 segueix sent un navegador molt usat. Temps al temps.

La secció àuria en disseny web

Fa poc vaig llegir l’article “The Golden Ratio in Web Design” a Nettuts. El seu autor és Jarel Remick. Com que m’ha semblat molt interessant i útil, he pensat d’incloure una adaptació en català al bloc.

Anatomia d’un web

Els elements d’un web són vitals per a un correcte funcionament i una estètica satisfactòria.

Container (contenidor), header (capçalera), logotip, navigation (menú), main content (contingut principal), sidebar (columna lateral) i footer (peu de pàgina).

Aquests són els elements principals del web. Hi ha moltes maneres diferents d’organitzar-los però aquesta és potser la disposició bàsica més comuna.

El contenidor

Tots els webs fan servir un contenidor pel mateix propòsit: contenir els elements de la pàgina. No obstant les maneres de fer-ho són diferents. Per exemple, actualment l’etiqueta més usada és el div (les taules ja no es fan servir, ja que actualment la taula de maquetació no és un element vàlid). El contenidor vindria a ser com la paret externa de la casa, dins la qual es van situant els dormitoris, la cuina, etc.
Tipus de contenidor:

1. Líquid: s’amplia per ocupar l’amplada del navegador
2. Fixe: té una amplada específica que no canvia, sense importar la mida de finestra del navegador.

Capçalera (header)

S’utilitza generalment per referir a la secció superior d’un web, on es localitza el logotip, el menú, etc. Molta gent fa servir la etiqueta div per maquetar-lo, i pot ser líquid o fixe segons l’esmentat abans.

Logotip

El logotip és la identitat. La col·locació més comuna per al logotip és dins la capçalera i aliniat a l’esquerra. Llegim d’esquerra a dreta i de dalt a baix, així que molt probablement serà el primer element que visualitzaran els visitants.

Navegació (menú)

És un dels elements més importants del web. És necessari per a que els visitants “utilitzin” el web. Ha de ser fàcil de trobar i d’utilitzar, pel que gairebé sempre està situat dins la capçalera o, almenys, a prop d’ella.

Tipus de navegació:

1. Horitzontal: enllaços disposats en línia. Generalment se l’anomena “navegació”.
2. Vertical: enllaços disposats en columna. Generalment se l’anomena “menú”.

Contingut principal (main content)

Com sap tothom, el contingut és el rei! Quan la gent visita el teu web, aquest és l’element que buscarà per sobre de tot. Ha de ser el punt focal principal del web per a que els visitants trobin ràpidament el que estiguin buscant.

Columna lateral (sidebar)

És un element amb contingut secundari tal com publicitat, cerca al web, subscripcions RSS, etc. No és un element necessari tot i que molts webs el facin servir. Normalment el trobem alineat a la dreta, però també pot anar alineat a ambdós costats en forma de dues columnes laterals (sempre que no interfereixi en la correcta visualització del contingut principal). Per a webs que facin servir navegació horitzontal i vertical, normalment, la columna lateral se sol substituir per l’element de la navegació vertical.

Peu de pàgina (footer)

El final del web sempre ha de tenir un peu de pàgina per deixar clar, als seus visitants, que han arribat al final. A l’igual que la capçalera, el peu de pàgina no és realment un element específic si no una secció del web. Dins el peu sobretot hi anirà informació legal, drets reservats, contacte, etc. Alguns webs el fan servir com a oportunitat d’esmentar contingut addicional o relacionat amb altra informació important.

Espais en blanc

És tota l’àrea del web que no està coberta per tipografia o altres continguts. Els espais en blanc són gairebé tan importants per a un bon disseny com el contingut que s’utilitzarà. Els espais buits són una guia a través del contingut i separen les diferents àrees de contingut o els diferents elements.

Les retícules i la secció àuria

Milers d’artistes, arquitectes, dissenyadors, etc. de la història han fet servir, intencionadament o no, proporcions o ràtios comunes per satisfer els seus criteris estètics. Així va aparèixer la secció àuria. Quin és el número màgic? Realment 1,618… però per eliminar decimals i buscar un número més rodó el deixarem en 1,62.

Fer servir el número d’or pel disseny web és simple. Ajuda a trobar l’amplada de la columna principal i la columna lateral del web. Cal que prenem l’amplada total de l’àrea continguda (com a exemple farem servir una amplada total de 900 px.). Dividirem aquests 900 per 1,62 i obtindrem 555,55 px. No ens cal ser exactes, així que el deixarem en 555 px. Així doncs, per al contingut principal farem servir una amplada de 555 px., i l’amplada de la barra lateral tindrà els 345 px. restants.

També podem fer servir la secció àuria per definir l’alçada d’un element prenent com a referència la seva amplada, o viceversa.

Fent servir retícules

Potser no voldreu fer servir una calculadora cada cop que volem fer servir aquest ràtio. Per simplificar el procés podem fer servir una retícula simple. L’únic que cal fer és dividir l’amplada i alçada per terços.

Per produir una retícula més detallada, podem reduir encara més la divisió tenint en compte els terços de la divisió inicial

Fer servir retícules no fa el disseny més fàcil o ràpid, però ajuda a crear una disposició estètica satisfactòria.

Si no feu servir retícules per dissenyar, podeu fer servir les retícules en format imatge (Photoshop, Fireworks…) o en format CSS que trobareu a http://960.gs