dijous, 24 de setembre del 2009

Sistemes de Navegació Accessibles Vol. 5

Les WCAG 2.0 i els sistemes de navegació

Els principis bàsics inclouen:
  • Principi 1: El contingut ha de ser perceptible.
  • Principi 2: Els elements de interacció presents al continguts han de ser operables.
  • Principi 3: El contingut i els controls han de ser comprensibles.
  • Principi 4: El continguts ha de ser el suficientment robust per a que funcioni amb les tecnologies actuals i futures.
Referent a la navegació pel lloc web, les WCAG 2.0 ens expliquen en el principi 2 de les pautes el concepte de la Operabilitat: els components de la interfície d’usuari han de ser operables.

En aquest cas fan referència al teclat, de manera que tota funcionalitat dels continguts és operable a través d’una interfície de teclat sense que existeixi límit de temps específic per a realitzar les pulsacions de les tecles. [Nivell A fins a AAA]

Navegabilitat: cal proporcionar mitjans que siguin d’ajuda a l’hora de navegar, localitzar el contingut i determinar on ens trobem.
Així ens trobem amb:
Si existeixen mecanismes per a saltar a blocs de continguts cal que es repeteixin en múltiples pàgines [Nivell A]
Les pàgines web cal que tinguin títols que descriguin el seu tema o propòsit [Nivell A]

Ordre de focus: Si en una pàgina web es pot navegar de forma seqüencial i la seqüència de navegació afecta al seu significat o operativitat, els components que poden rebre el focus ho han de fer en un ordre que conservi integres el seu significat i operativitat [Nivell A]

Encapçalaments i etiquetes: Els encapçalaments i les etiquetes han de descriure el tema o propòsit pertinent. [Nivell AA]

Focus visible: qualsevol interfície d’usuari que sigui operable a través del teclat ha de comptar amb un indicador visible del focus de teclat. [Nivell AA]

Ubicació: Cal que es proporcioni a l’usuari informació d’orientació sobre la seva ubicació dins d’una col·lecció de pàgines web [Nivell AAA]

Encapçalaments de secció: Usar encapçalaments de secció per a organitzar el contingut. [Nivell AAA]

També en el principi 3 Comprensibilitat: la informació i l’ús de la interfície d’usuari cal que sigui comprensible
La pauta 3.2 en parla de que el web cal que sigui Predictible: cal crear pàgines web l’aparença i operabilitat de les quals cal que sigui predictible.
Rebre el focus per part de qualsevol component no ha de provocar cap canvi en el context [Nivell A]

Navegació consistent: Els mecanismes de navegació repetits en múltiples pagines web dins d’una col·lecció de pàgines web apareixen en el mateix ordre relatiu cada cop que es repeteixen [Nivell AA]

Identificació consistent: Els components que tenen la mateixa funcionalitat dins d’una col·lecció de pàgines web s’han d’identificar de forma consistent. [Nivell AA]

Més informació sobre les pautes 2.0

Continuarà...
Read more ...

dijous, 17 de setembre del 2009

Recursos Vol. 27: CSS

Hola que tal, Benvinguts a una nova edició dels recursos.
Avui edició especial CSS

  1. Col·lecció de trucs amb CSS (donar estils a llistes amb números, l'atribut !important, lletra capital, posicionar elements al centre, etc.)
  2. Tècniques avançades de tipografia amb CSS
  3. Llistes multi columna amb CSS
  4. CSS3 tècniques essencials:
  • Rounded corners
  • Vores de les imatges (border image)
  • Text amb ombra (Text shadow)
  • Box-sizing
  • Transparències i opacitat (Transparency & Opacity)
  • Múltiples fons (Multiple Backgrounds)
Read more ...

divendres, 11 de setembre del 2009

Sistemes de Navegació Accessibles Vol. 4

Les WCAG 1.0 i els sistemes de navegació

Tècniques essencials per a les directrius d’Accessibilitat per al Continguts de la Web 1.0

Navegació
Punts de control:
  • Crear un estil de presentació que sigui consistent a través de las pagines. [Prioritat 3]
  • Emprar mecanismes de navegació de manera consistent. [Prioritat 2]
  • Proporcionar barres de navegació per a destacar y donar accés als mecanismes de navegació. [Prioritat 3]
  • Proporcionar informació sobre la distribució general del lloc (Ex., amb un mapa del lloc o una taula de continguts). [Prioritat 2]
  • Si es proporcionen funcions de cerca, habilitar diferents tipus de cerca per a diferents nivells de habilitat i preferències. [Prioritat 3]
  • Proporcionar metadades per a afegir informació semàntica a les pàgines i als llocs. [Prioritat 2]
Un estil de presentació consistent en cada pàgina, permet als usuaris localitzar mecanismes de navegació més fàcilment i també poder saltar de forma fàcil aquests mecanismes per a trobar el contingut important. Això ajuda a les persones amb problemes d’aprenentatge i lectura, però també fa més fàcil la navegació per a tots els usuaris.
Exemple d’estructures que poden aparèixer en el mateix lloc a totes les pàgines:
  1. barres de navegació
  2. el contingut principal de la pàgina
  3. publicitat
Un mecanisme de navegació crea una sèrie de rutes que el usuari pot prendre a través del lloc. Proporcionant barres de navegació, mapes del lloc, y sistemes de cerca, s’incrementa la possibilitat de que un usuari trobi la informació que està cercant en el lloc.
Si el lloc web es bàsicament visual, l’estructura pot ser difícil de navegar si l’usuari no pot formar-se un mapa mental de cap on va o d’on està. Per ajudar-lo, els desenvolupadors de continguts cal que descriguin algun mecanisme de navegació.

Continuarà...
Read more ...

dimecres, 9 de setembre del 2009

Colorsuckr: Paletes de colors a partir d'imatges del teu web

Una altra d'aquestes boniques eines gratuïtes i on-line.
Colorsuckr ens crea una paleta de colors a partir d'una imatge o d'una web.
Per exemple, a partir del logo del CMS matxambrat 2.0, ha extret la següent paleta de colors:


Molt recomanable i curiosa.
Read more ...

diumenge, 6 de setembre del 2009

Deep Catalonia Live Tour Vol. 6

Espremulls on tour.
Festa Major de Cambrils, 6 de setembre.

Concert-vermut a l'Ermita de la Mare de Déu del Camí de Cambrils.
Ni la pluja, ni el vent, ni la coca de recapte impedeixen als Espremulls oferir un magnífic concert.
1 hora de greatests hits amb el flabiolaire oficial del grup com a mestre de cerimònies.
Read more ...

Els 7 millors llibres sobre usabilitat

No me hagas pensar de Steve Krug Disponible en castellà i anglès

Usabilidad de Páginas de Inicio de Jakob Nielsen Disponible en castellà i anglès

Defensive Design for the Web de 37 signals Disponible en anglès

About Face 2.0 de Alan Cooper i Robert Reimann Disponible en anglès

Psicología del Color de Eva Heller Disponible en castellà

Universal Principles of Design de William Lidwell, Kritina Holden i Jill Butler Disponible en anglès

Web Bloopers de Jeff Johnson Disponible en anglès
Read more ...

dijous, 3 de setembre del 2009

Sistemes de Navegació Accessibles Vol. 3

Sistemes de navegació accessible

Navegació Tabular

L'ordre de tabulació: Per defecte aquest és el mateix que l'ordre d'aparició de l'element HTML, és a dir, el primer que apareix al codi és el primer al que es pot accedir.
Així la navegació amb el tabulador es farà element a element començant pel de més amunt.
Es pot canviar l'ordre de tabulació posant la propietat tabindex al elements. No s'aconsella canviar l'ordre de tabulació ja que s'entén millor l'ordre per defecte (de dalt a baix i d'esquerra a dreta)
Val a dir que a nivell d’usabilitat els webs acostumen a tenir molts enllaços, pensem per exemple en la plana portada d'un diari digital o d'un portal turístic, i por resultar molt costós en temps i esforç arribar a un enllaç concret.
També hem de tenir en compte que l'usuari ha de poder veure per quin element va la tabulació, per això podem emprar el següent codi CSS:
:focus, input:focus{outline:2px red solid;}
és a dir, remarcar amb requadre de color l'element sobre el qual està el focus.

Dreceres de teclat

Les dreceres de teclat són una alternativa a la navegació tabular amb el problema de l'excés d'enllaços.
Es poden crear diverses combinacions de tecles per arribar als elements que poden tenir més importància pels usuaris:
  • Pàgina d'inici
  • Pàgina productes
  • Pàgina informació de la empresa
  • Pàgina Contacte
  • Alt-1 + Intro: Pàgina d'inici
  • Alt-2 + Intro: Pàgina productes
  • Alt-3 + Intro: Pàgina informació de la empresa
  • Alt-4 + Intro: Pàgina Contacte

Dreceres de navegació

Les dreceres de navegació ajudaran als usuaris a accedir a les seccions importants de la pàgina (que nosaltres mateixos definirem)
Per exemple podem afegir dreceres de navegació per accedir directament a:
  • Pàgina d'inici
  • Menú de navegació
  • Contingut
  • Contacte
Accesskeys

Les accesskeys ens ajudaran a accedir ràpidament a un element. És aconsellable que s'usin per a accedir a parts del web que s'utilitzin sovint, com per exemple:
  • cercador
  • pàgina d'inici
  • menú de navegació
Les accesskeys, encara que poden resultar molt útils tenen alguns problemes, per exemple:
  • Cada lloc web té les seves pròpies, no s'ha arribat mai a un consens sobre un grups de tecles.
  • De vegades poden generar conflictes si s'usen lletres com a accesskey.
  • Els usuaris han d'accedir a una pàgina d'ajuda per veure les accesskey disponibles per aquell lloc web.
Continuarà...
Read more ...