Atajos de teclado en Firefox

Hace unos días comentaba que Firefox ha cambiado la manera de acceder a los atajos de teclado y que al hacerlo habían dejado de funcionar los atajos de teclado con números.

Pues bien, ya está arreglado :)

Comentarios

Citando

En HTML existen dos maneras de citar. Por una parte tenemos la etiqueta blockquote que se usa para citas grandes que se muestran como texto indentado. Por ejemplo:

En un lugar de la Mancha de cuyo nombre no quiero acordarme, ha tiempo vivía un hidalgo caballero de los de adarga antigua, …

Por otra parte, si lo que queremos es citar un texto corto o un par de palabras lo lógico es usar la etiqueta q.

Sin embargo, si bien blockquote se representa de igual manera en la gran mayoría de navegadores, q no es bien representado en el navegador mayoritario, el Internet Explorer, incluso en su última versión hasta el momento, la 7.

En la definición del estándar HTML 4.01, en el punto 9.2.2. dice:

Los agentes de usuario visuales deben asegurarse de que el contenido del elemento Q se representa con marcas de citación a su alrededor. Los autores no deberían colocar marcas de citación al principio y al final del contenido de un elemento Q.

Sin embargo, mientras que Firefox, Opera y otros navegadores, insertan comillas al inicio y al final de una cita marcada con la etiqueta q, Internet Explorer no lo hace, con lo cual podemos encontrarnos con que una cita que en Firefox se ve entre comillas (como debe ser), en Internet Explorer no se diferencia del resto del texto, con los problemas que eso puede acarrear. Por otra parte, si se usan comillas para marcar las citas (además de la etiqueta correspondiente) en IE se verán bien, pero en Firefox se verán las comillas duplicadas.

Ha pesar de que he buscado posibles soluciones a este problema no las he encontrado, así que he terminado por definir un estilo en el archivo CSS de la siguiente manera:

q { font-style: italic }

De esta manera, en IE las citas se ven en cursiva, mientras que en el resto de navegadores se ven en cursiva y entre comillas. Posiblemente no sea la mejor manera de hacerlo, así que si a alguien se le ocurre otra que lo haga saber :)

Comentarios

Apunts de microformats

Això no és més que un recull d’informació sobre microformats que espero em sigui útil. Estarà una mica desordenat, però espero que em faciliti fer un bon resum sobre que són els microformats, d’aquí a poc.

Definició

He aquí el meu primer problema. Com definir els microformats? Anem a veure alguna definició que he trobat per ahí:

  • Los microformatos son soluciones estándard de marcado XHTML para casos de uso concretos. (http://www.alzado.org/articulo.php?id_art=416)
  • Los Microformatos son marcas que permiten expresiones semánticas en una página HTML (o XHTML). Wikipedia
  • Microformatos son códigos simples que tu puedes usar para identificar tipos de datos específicos, como personas o eventos, en tus páginas web.
  • Los microformatos son porciones de código XHTML ó HTML estándar cuyo objetivo es insertar contenido semántico aprovechando las características de los atributos “id” ó “class” usada por algunas etiqueta de HTML. Para ello, asignamos un valor a los atributos “id” ó “class”, que aparte de asociarle un estilo de presentación mediante hojas de estilos (por ejemplo color, volumen, tipo de fuente,…), también tiene otra utilidad, como podemos ver en la especificación de HTML (7.5.2 Identificadores de elementos: los elementos id y class): Para procesos generales por parte de agentes de usuario (p.ej., para identificar campos cuando se transfieren datos desde páginas HTML hasta una base de datos, para traducir documentos HTML a otros formatos, etc.). (Microformatos Dublin Core)

Aquesta darrera és la millor definició de totes. Ens diu per a que serveixen (”insertar contenido semántico”) i com es fa (”aprovechando las características de los atributos ‘id’ ó ‘class’”)

Opinions

  • “Existen principalmente dos tipos de microformatos, los simples y los compuestos. Los simples se caracterizan por tener un XMDP definido. ¿Que es un XMDP? El XMDP, considerado un microformato en si mismo, es en realidad cuatro líneas de código (llamadas profile) en la que definimos de que manera estamos utilizando los atributos rel y class para definir un microformato, dicho de otra forma, cuales son los valores posibles de estos atributos que los harán característicos respecto a los valores que habitualmente tienen.” (http://ernest.blogsome.com/2005/08/06/microformatos-parte-ii/)
  • Los microformatos están pensados para la interoperabilidad, dada la tecnología actual son 100% efectivos en ese terreno. Dada la tecnología actual son 100% inútiles en el terreno de la accesibilidad y la mera experiencia del usuario con un navegador (incluso usando alguna extensión en Firefox u Opera, su utilidad para un usuario, más allá de la curiosidad, es nula). Si algún lector de pantalla hace uso de microformatos es algo que se me escapa ahora; y eso sí justificaría el uso de microformatos en aras de la accesibilidad; pero en cuanto a la 13.2 solo ayudaría a la parte semántica, no a la de metadatos. (Micky Mourelo, llista Ovillo)
  • Los microformatos se han inventado una lista de clases. Extender el XHTML es inventarse una lista de elementos. Lo último está avalado por el w3c, lo primero no. (Micky Mourelo, llista Ovillo)
  • Antes de lanzarse al uso de los microformatos, sería importante que los desarrolladores comenzaran/comenzáramos, antes que nada, a utilizar profusa y correctamente los contenedores de metadatos existentes desde tiempo inmemorial. (Emmanuelle Gutiérrez y Restrepo, llista Ovillo)
  • Entiendo que los microformatos son mucho más “cómodos” para los desarrolladores, porque evitan el tener que leerse y, sobre todo comprender, especificaciones como la de RDF (que es un tostón), pero desde luego no puede equipararse la capacidad de los microformatos al uso de metadatos expresados mediante un esquema, etc. (Emmanuelle Gutiérrez y Restrepo, llista Ovillo)
  • No he querido entrar ya en la separación de niveles de información para no ser demasido teórico (=pedante), pero la razón por la que los microformatos no ayudan al accesibilidad hoy en día, ni deberían tal y como es la especificación de xhtml, es que están pasando información semántica, y además importante, a las clases. En otras palabras están ocultando información semántica del contenido. Las clases contienen valores (sus nombres) que no deben contener información sobre el elemento en el que están, están solo para hacer referencia a ellas desde script y css, no para dar información a mayores sobre el elemento; para eso están los elementos de html. Si no <dt>Ave</dt> podría ser lo mismo que <span class=”definition term”>Ave </span>. Y los interpretes de html tiene que saltarse la especificación y buscar información semántica dentro de las clases, y algún día alguien dirá “pongamos más metainformación en los id” y usaremos atributos al nivel de los elementos. (Micky Mourelo, llista Ovillo)
  • Los microformatos te permiten especificar información acerca de la información: es decir, son metadatos. La 13.2 dice que proporcionemos metadatos: luego, al menos para este punto, yo creo que los microformatos son perfectamente válidos. Y no pueden identificarse con utilizar etiquetas HTML (la metainformación que éstas aportan o su información semántica ya las hace ser recomendadas en los puntos de la directriz 3). Los microformatos apuestan por dar nombres “con sentido” a ciertos atributos HTML. La metainformación está en el significado y uso común de esos nombres. Vamos, para mí no hay duda de que son metadatos. (Jorge Manrubia Díez, llista Ovillo)
  • Múltitud de veces se ha visto que ésta determina el fracaso de los estándares propuestos por los comités, o el éxito de las iniciativas que surgen de la comunidad. No hay duda de que el RDF tiene innumerables posibilidades y de que los lenguajes basados en él van a triunfar en muchas áreas. Pero el RDF, como el XML, por sí sólo no vale de nada. Tiene que haber convenios extendidos acerca de cómo interpretarlo, y en este punto, su complejidad puede jugar en su contra de cara a que los desarrolladores lo adopten para casos concretos (fuera de los lenguajes basados en RDF más extendidos). Y por este mismo razonamiento, el uso y aceptación por parte de herramientas de terceros de los microformatos puede verse favorecido. (Jorge Manrubia Díez, llista Ovillo)
  • Pues si, microformatos agregan a los metadatos, pueden mejorar la web, y me parece valido en el contexto de WCAG 13.2. Pero al mismo tiempo su uso implica limites al usabilidad en general de HTML. Quizas es mejor mirar otra posibilidades - o de basarlos en RDF o algo parecido, o de pasar directamente alli - si pretendemos que HTML sera util tras muchos años, como a mi parece la mejora posibilidad. (Charles McCathieNevile, llista Ovillo)

Microformats existents

  • hCalendar: para mostrar calendarios y eventos
  • hCard: información sobre personas, compañías y organizaciones
  • rel-license: para indicar la licencia de uso
  • rel-nofollow: el enlace no debe ser analizado por motores de búsqueda
  • rel-tag: para indicar que el enlace es un tag
  • VoteLinks: para indicar el tipo de voto que se hace sobre una pregunta
  • xFolk: para etiquetado de enlaces

Enllaços interessants

Comentarios

Firefox 2.0 i les dreceres

Resulta que fins a aquesta darrera actualització de Firefox, les dreceres (atajos de teclado en castellà) es feien amb la combinació de tecles alt més la tecla corresponent. Això tenia algun inconvenient, doncs, al ser tecles definides per l’autor de la web, podien coincidir amb les tecles definides pel navegador. Solució, canviar-les per la combinació majúscules, alt i la tecla corresponent. La mesura redueix la usabilitat del navegador alhora que pot complicar en alguns casos l’accesibilitat.

Però no acaba aquí la cosa. Resulta que, a més, s’han perdut les dreceres que es feien amb números. Un greu error que esperem que no triguin en solucionar.

Comentarios (1)

Taules: TH - THEAD

La utilització de les taules, quan volem fer una web accessible, requereix un tracte curós, especialment quan es tracta de taules complexes o molt llargues.

No cal dir que les taules només s’han de fer servir per a la presentació de dades tabulades, no per a la correcta presentació del disseny gràfic.

Per tal que siguin fàcilment interpretables, totes les taules han de portar les corresponents capceleres de columna. Aquestes capceleres es posen amb l’etiqueta TH, que substitueix a la primera fila de la taula, a les etiquetes TD.

Per altra banda, quan les taules són molt grans i poden ocupar més d’una pàgina al imprimir, es pot fer servir THEAD,TBODY i TFOOT per indicar la capçalera (que es repetirà a l’inici de tots els troços de taula a les diferents pàgines), el cos i el peu de la taula (que, de nou, es repetirà a cada pàgina). A més en alguns navegadors, es podria veure el cos de la taula amb una barra de desplaçament, mantenint fixes el THEAD i el TFOOT. En el cas de fer servir THEAD, les columnes de capçalera estaran indicades també amb TH.
A taules complexes (com ara aquesta que poso a continuació) podem tenir TH fora del THEAD. L’exemple és prou clar:

Imported Domestic
Oranges Apples Oranges Apples
Sydney
Wholesale $1.00 $1.25 $1.20 $1.00
Retail $2.00 $3.00 $1.80 $1.60
Melbourne
Wholesale $1.20 $1.30 $1.00 $0.80
Retail $1.60 $2.00 $2.00 $1.50

Aquest exemple està tret de http://www.usability.com.au/resources/tables.cfm

Creador de taules complexes: http://accessify.com/tools-and-wizards/accessibility-tools/table-builder/

Comentarios

Accessibilitat, metadades i e-aprenentatge.

Aquests dies estic buscant informació sobre accessibilita, metadades i e-aprenentatge i donat que estic trobant força informació a la web, he decidit obrir aquesta entrada per tal de mantenir un repositori d’enllaços a aquests temes.

De fet, faré servir també del.icio.us per mantenir els enllaços, però el blog m’ofereix més espai pels comentaris i una localització encara més ràpida que del.icio.us

IMS AccessForAll Meta-data Specification

Interessant web on (si haig de fcer cas de la meva primera impressió) parlen d’especificació de metadades per a accessibilitat. Sembla força actualitzat.

Accessibility Metadata Specification V:1.2 (No funciona. Alternativa (a partir de la caché de google))

Proposta d’especificació de metadades per a l’accessibilitat. No té data, però sembla antic.

Accessibility and metadata

No diu gran cosa, però té enllaços interessants i pot servir de base per iniciar un article.

Accessibility Metadata and Learning Objects

PDFs:

Grupo de trabajo sobre accesibilidad

DCMI Accessibility Working Group

The aim of the work of the DC-Accessibility Working Group is to ensure that DC metadata users can describe resources and services in a way that will increase the accessibility of information for everyone.

Comentarios

Headings

Els headings són aquells tags que comencen per h i tenen un número a continuació: h1, h2, h3, h4, h5 i h6. Però compte, en aquest cas heading no vol dir capçalera, sinò títol:

The title, subtitle, or topic that stands at the top or beginning, as of a paragraph, letter, or chapter.

Dictionary.com/heading

La qüestió és que aquests tags tenen una gran càrrega semàntica, doncs d’alguna manera resumeixen en una sola línia el contingut del que ve a continuació.

Tot i la importància semàntica dels títols, a moltes webs no es fa servir i s’utilitza el tag font per a canviar la grandària i/o la tipografia dels títols, amb la qual cosa es perd completament la càrrega semàntica, alhora que es complica considerablement el manteniment de la web (si volem canviar la tipografia dels títols caldrà canviar-la a tots i cadascun d’ells).

Perquè moltes vegades no es fan servir els headings? Doncs perque tenen uns estils predeterminats que no són precisament macos. I quan el dissenyador o el programador web no sap fer servir CSS, l’única manera que té de posar uns títols macos és fent servir el tag font. Evidentment la solució és aprendre CSS, una solució gens complicada :)
Però, de quina manera afecta a l’usabilitat, l’accessibilitat i als estàndards la no utilització dels headers?

  • En quan a usabilitat, el fet de no fer-los servir facilita que diferents títols del mateix nivell puguin tenir diferents estils, la qual cosa pot despistar a l’usuari, a qui li costarà entendre quin nivell de títol és el que està llegint.
  • En quan a accessibilitat, les persones amb discapacitat visual, podran saber que la frase en qüestió és un títol perquè el lector els informarà.
  • Referent a estàndards, evidentment la utilització d’altres sistemes per marcar els títols que no siguin els headers no és estàndard.
  • I en quan als cercadors (lligat de fet a la semàntica de la web), el fet de fer servir els headings fa que els cercadors es mirin d’una altra manera aquestes línies, donant-lis més importància.

I això és tot. Crec que amb això queda clara la importància de fer servir els tags de títols correctament, així com la importància d’aplicar estils mitjançant el CSS

Comentarios

L’atribut title

Llegint informació sobre la web semàntica, un arriba a la conclusió de que, en general, a la web li manca molta informació. Entre els blocàires (gent que escriu blocs) més tecnològics n’hi ha un cert interès en aconseguir pàgines més semàntiques que facilitin la tasca dels cercadors i, alhora, millorin el seu posicionament a les cerques més interessants (per a ells). Dins d’aquesta estratègia s’inclou el aprofitar l’atribut title, un atribut comú a molts tags i que sovint no es fa servir. L’atribut title no és l’únic que permet incloure semàntica a una web, però, potser, és el que més es pot fer servir i, per tant, el que crec que pot ser més rellevant. A http://telendro-badalona.blogspot.com/ he fet una prova de rellevància del title. Com que ho he fet avui, caldrà esperar uns dies abans de poder valorar com interpreten els cercadors aquest atribut.

Em centro ara en aquest atribut, com s’interpreta als diferents navegadors i lectors de pantalla. Començo amb una explicació, crec que prou bona, de quina és la utilitat d’aquest atribut i les diferències respecte l’atribut alt.

The ALT attribute is designed to be an alternative text description for images. ALT text displays before the image is loaded (if it’s loaded at all) in the major browsers and instead of the image in text-based browsers like Lynx. ALT is a required element for images and can only be used for image tags because its specific purpose is to describe images.

In contrast, you can use the TITLE attribute for just about any page element, but it isn’t required for any page element. Use it to describe links, tables, individual table rows, and other structural HTML elements. They’re more versatile than the ALT attribute and many search engine ranking algorithms read the text in TITLE attributes as regular page content.

(http://www.netmechanic.com/news/vol6/html_no1.htm)

L’atribut title, acostuma a presentar-se com un “tool tip�? en tots els navegadors, però no es llegeix als lectors de pantalla, la qual cosa fa que no sigui accessible. Així, doncs, sembla una bona eina per donar semàntica a la web, però a canvi no aporta res en quan a accessibilitat. I en quan a usabilitat? Doncs sí, fa la web més usable al donar més informació a l’usuari, sigui una imatge, sigui un enllaç (en aquest cas donaria més informació sobre a on t’envia l’enllaç), sigui una taula, o una cel·la…

Així doncs, complint els estàndards, tenim una eina que ens dóna la possibilitat de fer més semàntica la nostra web, alhora que la fa més usable. No incrementem l’accessibilitat, però tampoc l’hauríem de perdre (això sempre i quan fem servir l’atribut title com el que és). Afegir que l’atribut title s’hauria de fer servir per afegir informació, no per amagar informació.

Més informació:

Comentarios

Web semàntica

En començar a treballar els temes dels que tracta aquesta pàgina, una de les coses que més em van cridar l’atenció va ser la web semàntica. No sé fins a quin punt està realment desenvolupada aquesta tecnologia (?), però sí se que s’en parla molt i que no hi ha gaire cosa realment concreta.

He llegit un munt d’articles al respecte (fullejar crec que seria la paraula correcta) i tots diuen més o menys el mateix, així que posaré només quatre enllaços:

  1. Cerca de web semántica a Google
  2. Cerca de semantic web a Google
  3. Semantic web a la wikipedia
  4. Web semántica a la wikipedia

Comentarios

Project-Id-Version: WordPress 2.0.5-beta es_ES Formal Beta POT-Creation-Date: 2005-10-05 22:49+0200 PO-Revision-Date: 2006-10-12 09:41+0100 Last-Translator: Maira Belmonte Language-Team: wordpress-es MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit X-Poedit-SourceCharset: utf-8 X-Poedit-KeywordsList: __;_e X-Poedit-Basepath: c:\repo\wordpress\branches\2.0 X-Poedit-Language: Spanish X-Poedit-Country: SPAIN X-Poedit-SearchPath-0: . Project-Id-Version: WordPress 2.0.5-beta es_ES Formal Beta POT-Creation-Date: 2005-10-05 22:49+0200 PO-Revision-Date: 2006-10-12 09:41+0100 Last-Translator: Maira Belmonte Language-Team: wordpress-es MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit X-Poedit-SourceCharset: utf-8 X-Poedit-KeywordsList: __;_e X-Poedit-Basepath: c:\repo\wordpress\branches\2.0 X-Poedit-Language: Spanish X-Poedit-Country: SPAIN X-Poedit-SearchPath-0: . Next entries »