Armonía | En definitiva...

De nuevo gracias al amigo posavasos descubro cosas interesantes. En un e-Mail que me ha mandado esta tarde me ha pasado un par de enlaces muy interesantes sobre la propiedad accesskey y las teclas más acertadas para usar con ella.

• Accesskeys and Reserved Keystroke Combinations
• Atajos de teclado en documentos

Leo en barrapunto, y en minid.net tambien se comenta, que El Mundo ha entrado a formar parte del W3C. Personalmente no me parece una mala cosa, salvo por el hecho de que su página Web, (elmundo.es), es una gran muestra de lo mal que se pueden hacer las cosas en la WWW. Ya la podrían haber adaptado a los últimos estándares antes de decidirse a formar parte del W3C, o bien antes de la presentación o lo que sea, porque da muy mala imágen que una de las entidades que tienen voz y voto en el futuro de la WWW no predique con el ejemplo.

Por otro lado, y siempre y cuando a partir de esta incorporación se fomente en nuestro país el uso de los estándares, esta incorporación podrá considerarse como beneficiosa. Pero como siempre, el tiempo lo dirá.

Poco a poco, los navegadores van encaminandose a una misma forma de interpretar los estándares, pero hoy día la cosa no está del todo igualada, y hay casos en los que una misma regla se toma de distinta forma en un navegador y en otro. Para solucionar en cierto modo estos problemas existen los filtros CSS.

Son pequeños hacks en nuestro código que algunos navegadores saben interpretar y otros no, y por tanto, las reglas que contengan esos hacks serán interpretadas o no.

Gracias a esto podemos tener ciertas ventajas para solucionar algunos de los problemas de interpretación de las reglas. Si os interesa el tema, aqui hay tabla fantástica con un listado de filtros CSS, con una explicación de cada filtro, y un listado de los navegadores que lo soportan y los que no. Una buena referencia a tener en cuenta.

Este post no va a ser muy largo, puesto que las etiquetas que voy a comentar, (p, em y strong), no son excesivamente complicadas, y además son de las que más se suelen usar. Pero de todas formas me gustaría comentar algunos detalles que creo que son bastante importantes a la hora de escribir nuestros documentos XHTML.

Para empezar, hablaré de la etiqueta p. Su uso es muy simple, se utiliza para determinar párrafos de texto. Cada párrafo de texto que tenga nuestro documento, deberá estar encerrado en esta etiqueta. Mucha gente se olvida de esto, y marca sus párrafos simplemente colocando saltos de linea, (br). Esto, además de muy cutre, es ilógico. ¿Por qué no usar una etiqueta expresamente creada para marcar párrafos, si precisamente lo que queremos es hacer eso? Un ejemplo simple de cómo usar esta etiqueta sería:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.</p>

Otra etiqueta que se suele usar mucho, pero que se usa la mayoría de las veces de forma incorrecta es la etiqueta em. Según el W3C, la etiqueta em sirve para dar énfasis a una determinada palabra o frase. Desgraciadamente, dar énfasis a una palabra o frase no es simplemente ponerla en cursiva, que es para lo que se suele usar esta etiqueta comunmente. Dar énfasis a una palabra o frase es marcar de forma distintiva los puntos más importantes de un texto. Un ejemplo del uso adecuado de em podría ser:

<p>El jam&oacute;n de Jabugo es <em>el jam&oacute;n m&aacute;s rico de Espa&ntilde;a</em></p>

Por último comentaré la etiqueta strong. No hay mucho que decir, habiendo explicado ya em. Al igual que esta, se usa para dar énfasis a una palabra o frase, con la diferencia de que strong le da aun más peso que la primera. Un ejemplo válido sería:

<p>Hace dos d&iacute;as entren&eacute; durante <strong>m&aacute;s de 3 horas</strong></p>

A raiz de un e-Mail que me envió un lector del blog, (el amigo posavasos, al cual le agradezco desde aquí su aportación), he modificado un poco mi CSS para que el contraste entre el color de fondo y el color del texto fuese el suficiente como para leer con total comodidad.

El e-mail de posavasos me ha llevado a investigar un poco más sobre este tema, y, gracias a unos enlaces que me adjuntaba, he podido encontrar algo de información interesante sobre los contrastes de colores para mejorar la legibilidad.

Según parece, el nivel correcto para une lectura cómoda en la Web se mide en base a dos valores: el brillo del color y la diferencia de color. Ambos valores se obtienen a través de unas fórmulas matemáticas, cuyo resultado nos indicarán si estan o no dentro de los valores adecuados.

Fórmula de Brillo de Color

El W3C sugiere la siguiente fórmula para calcular el valor del Brillo del Color. Para considerarse correcto, la diferencia entre el valor de brillo del color de fondo y el valor de brillo del primero plano debería ser mayor que 125.

((Valor de Rojo × 299) + (Valor de Verde × 587) + (Valor de Azul × 114)) / 1000

Para este blog, por ejemplo, el color del texto, (#403e3e), y el color de fondo, (#fff), poseen una diferencia de 192, por lo que está dentro de los valores permitidos. Vamos a calcularlo:

Valor de brillo para #fff = ((255 × 299) + (255 × 587) + (255 × 114)) / 1000

Valor de brillo para #fff = ((76245) + (149685) + (29070)) / 1000

Valor de brillo para #fff = (255000) / 1000
	
Valor de brillo para #fff = 255

Como podemos ver, para el color blanco, (#fff), el valor de Brillo es 255. Ahora calcularemos el valor de Brillo para nuestro color de primer plano, (#403e3e).

Valor de brillo para #403e3e = ((64 × 299) + (62 × 587) + (62 × 114)) / 1000

Valor de brillo para #403e3e = ((19136) + (36394) + (7068)) / 1000

Valor de brillo para #403e3e = (62598) / 1000
	
Valor de brillo para #403e3e = 63   (*** Sale 62,598 Redondeamos hacia arriba)

Ahora, para saber si la diferencia entre los valores de Brillo de nuestro color de fondo y nuestro color de texto es correcta solo tenemos que restar los resultados.

Diferencia = Valor de Brillo color fondo - Valor de Brillo color primer plano
	
Diferencia = 255 - 63
	
Diferencia = 192

Como el resultado debería ser mayor que 125, y en mi caso es asi, se puede considerar que la diferencia de brillo entre el color de fondo y el color del texto es correcta.

Fórmula de Diferencia de Color

El W3C sugiere la siguiente fórmula para calcular la Diferencia de Color entre dos colores. Para considerarse correcta, esta diferencia debería ser mayor que 500.

(Máximo(valor Rojo 1, valor Rojo 2) - Mínimo (valor Rojo 1, valor Rojo 2)) + (Máximo (valor Verde 1, valor Verde 2) - Mínimo (valor Verde 1, valor Verde 2)) + (Máximo (valor Azul 1, valor Azul 2) - Mínimo (valor Azul 1, valor Azul 2))

Vamos a calcular ahora si la diferencia de colores entre el fondo y el texto es correcta en este blog:

Diferencia entre #fff y #403e3e = (Máximo(255, 64) - Mínimo (255, 64))
 + (Máximo (255, 62) - Mínimo (255, 62)) 
 + (Máximo (255, 62) - Mínimo (255, 62))
	
Diferencia entre #fff y #403e3e = (255 - 64) + (255 - 62) + (255 - 62)
	
Diferencia entre #fff y #403e3e = (191) + (193) + (193)
	
Diferencia entre #fff y #403e3e = 577

Como podemos ver, el resultado es 577, y según la recomendación del W3C debe ser mayor que 500, el valor es correcto.

Los cálculos son relativamente sencillos, pero un poco tediosos, por lo que existen diversas herramientas on-line que nos dan los resultados con solo darles los valores.

• Juici Studio: Analizador de Contraste de Color
• Colour Contrast Check - snook.ca

Espero que os haya sido de utilidad. Y vuelvo a agradecer a posavasos su e-Mail, el cual me ha abierto un poco los ojos en este tema.

Seguimos con la racha de etiquetas XHTML con carga semántica, y esta vez le toca el turno a la etiqueta cite. Al igual que hice con las anteriores, (acronym, headings), para entender correctamente el significado de esta etiqueta he recurrido a la Web de la RAE, y esto es lo que he obtenido:

cita.

1. f. Señalamiento, asignación de día, hora y lugar para verse y hablarse dos o más personas.

2. f. Reunión o encuentro entre dos o más personas, previamente acordado. "Trabajaron mucho en su primera cita".

3. f. Nota de ley, doctrina, autoridad o cualquier otro texto que se alega para prueba de lo que se dice o refiere.

4. f. mención.

mención

1. f. Recuerdo o memoria que se hace de una persona o cosa, nombrándola, contándola o refiriéndola.

Lo primero que uno "entiende" al leer la etiqueta cite es "cita", asi que fue eso lo primero que busqué en el diccionario, pero no encontre nada que me llevara donde yo quería, excepto la cuarta acepción, "mención", me fuí a por ella, y lo que encontré si que me pareció lógico. Por lo tanto, hasta ahora creo que estaremos de acuerdo en que la definición correcta para la etiqueta cite es el significado de la palabra "mención".

Entendiendo el significado de esto, ya tenemos cómo usar cite. Pongamos unos ejemplos:

Musashi Miyamoto es el protagonista del manga japonés Vagabond, cuyo autor es Takehiko Inoue.

Como podemos ver, en este ejemplo hacemos mención a dos personas y a un objeto. La primera, Musashi Miyamoto, luego mencionamos el manga Vagabond, y por último a su autor, Takehiko Inoue. Veamos como escribiriamos esto en nuestro código XHTML:

<p>
	<cite xml:lang="ja">Musashi Miyamoto</cite> es el protagonista
	del manga japonés <cite xml:lang="en">Vagabond</cite>,
	escrito por <cite xml:lang="ja">Takehiko Inoue</cite>
</p>

Observando el ejemplo podemos ver el uso de cite. La etiqueta de cierre es obligatoria, y siempre que la mención sea en un idioma distinto al de nuestro documento, haremos uso de lang o xml:lang para especificar el idioma del texto. También, aunque en el ejemplo no lo use, se puede hacer uso de la propiedad title para especificar alguna nota sobre la mención que estamos realizando. Mucha gente usa esta propiedad para colocar la traducción al idioma del documento del texto encerrado entre la etiqueta, (siempre que esté en otro idioma, claro). A mi esto no me parece correcto, ya que, si a la etiqueta le especificamos un idioma diferente con lang o xml:lang, el title que le pongamos se supone que tambien entraría dentro de ese idioma especificado. Pero bueno, como no lo tengo claro oficialmente, podeis tomar vuestra propia decisióon con respecto al tema.

Para XHTML 2.0 he visto que se añade una propiedad más, una llamada cite, (si, igual que la etiqueta), en la cual se pondría una URL referente a la mención que estemos haciendo, (si procede ponerla, claro).

Como ya dije hace un par de dias, pretendo escribir una serie de posts hablando sobre la carga semántica de algunas etiquetas XHTML. Pues bien, hoy es el turno de los headings, (<h1> <h2> <h3> <h4> <h5> <h6>), que, o bien se olvidan por completo, o bien se usan indebidamente solo por el hecho de que los navegadores lo renderizan con distintos tamaños, etc.

Hasta cierto punto comprendo por qué este elemento ha sido olvidado o mal utilizado hasta la saciedad, ya que en la actualidad, la mayoria de los diseños que se realizan no se hacen teniendo en cuenta el contenido que hay detrás, sino el aspecto externo que hay delante.

Como en el post anterior, voy a hacer uso del diccionario de la RAE para conocer el significado de la palabra "título".

título.

1. m. Palabra o frase con que se da a conocer el nombre o asunto de una obra o de cada una de las partes o divisiones de un escrito.

Veamos, ...cada una de las partes o divisiones de un escrito. ¿Eso qué significa? Siempre que tengo que explicar el uso de los headings uso el siguiente ejemplo. Imaginad que teneis que hacer un trabajo para el instituto, (los mas viejos que recuerden sus tiempos mozos). Una vez que teniais todo el trabajo redactado, para rellenar se metía un índice, enumerando las distintas secciones del trabajo. Pues bien, cada sección de ese trabajo equivaldría a un heading en un documento XHTML.

Además, cada sección de nuestros trabajos tiene una mayor o menor relevancia dependiendo del nivel que ocupe dentro de la lógica del documento. Pues para eso estan los distintos niveles de las etiquetas heading, desde el <h1> hasta el <h6>, donde la más importante es la <h1> y la menos la <h6>.

Atendiendo a esto último, e imaginando un documento cuya lógica fuese esta:

• Encabezado 1
  • Encabezado 1.1
  • Encabezado 1.2
• Encabezado 2
  • Encabezado 2.1
    • Encabezado 2.1.1

El código de nuestra página, usando de manera correcta los headings, sería:

<h1>Encabezado 1</h1>

<!-- Texto texto texto -->
	
<h2>Encabezado 1.1</h2>
<!-- Texto texto texto -->
	
<h2>Encabezado 1.2</h2>
<!-- Texto texto texto -->
	

<h1>Encabezado 2</h1>
<!-- Texto texto texto -->
	
<h2>Encabezado 2.1</h2>
<!-- Texto texto texto -->
	
<h3>Encabezado 2.1.1</h3>

<!-- Texto texto texto -->

Como se puede observar, para cada nivel usamos un heading distinto, a mayor nivel de profundidad en la lógica del documento, mayor será el tipo de heading que debamos usar. Por cierto, echandole un vistazo a la información que circula sobre XHTML 2.0, me doy cuenta de que los distintos niveles de esta etiqueta desaparecerán, dando paso a una sola, <h>, cuya profundidad se determinará atendiendo al anidamiento de la misma.

Espero que este post os sirva de algo, y que a partir de ahora pensemos un poco en la información que queremos dar en nuestras páginas para poder crear una estructura documental lógica. (Un truquito, comenzad a desarrollar las páginas dejando el CSS para el final).

Bitacoras.com lanza la tercera edición de los premios a los mejores blogs de 2004. Segun parece, este año participan más de 18.000, una cifra nada despreciable que demuestra el buen estado de la blogosfera española, al menos en cantidad.

Participan en los premios todos los blogs inscritos en el directorio de Bitacoras.com, asi que, si alguien esta pendiente de validación, que se de prisa en avisar en los foros.

Pensando esta tarde en la oficina sobre qué podría escribir en este humilde blog, se me ocurrió la idea de empezar a crear posts sobre las distintas etiquetas XHTML que aportan sentido semántico a las Webs. Sé que no es una idea original, pero, a pesar de eso, me gustaría ofrecer aquí una simple referencia para todos aquellos que estan empezando, que ya conocen, o que dominan y simplemente quieren recordar algunas cosas.

La cosa más o menos funcionará así, en cada post dedicado a este tema escribiré sobre una etiqueta XHTML. Cada uno de estos posts quedará guardado en la categoría Web semántica de este blog, de esta forma quedará facilmente al alcance del que quiera usarlo.

Para empezar con esta serie voy a hablar un poco sobre la etiqueta acronym. Como su propio nombre indica, esta etiqueta se usa para determinar que el texto que está encerrado en su interior es un acrónimo. Pero, ¿qué es un acrónimo? Según la RAE:

acrónimo.

1.- m. Tipo de sigla que se pronuncia como una palabra; p. ej., o(bjeto) v(olante) n(o) i(dentificado).

2.- m. Vocablo formado por la unión de elementos de dos o más palabras, constituido por el principio de la primera y el final de la última, p. ej., ofi(cina infor)mática, o, frecuentemente, por otras combinaciones, p. ej., so(und) n(avigation) a(nd) r(anging), Ban(co) es(pañol) (de) (crédi)to.

Atendiendo a esta definición, podemos ver algunos ejemplos de acrónimos, como por ejemplo: OVNI u ofimática. Pues bien, para expresar en XHTML que la palabra que vamos a escribir es un acrónimo, debemos usar la etiqueta acronym.

<acronym title="Objeto volante no identificado">OVNI</acronym>

<acronym title="Oficina Inform&aacute;tica">Ofim&aacute;tica</acronym>

Como podemos observar, la utilización de esta etiqueta es muy sencilla. Encerramos entra la etiqueta de apertura y la de cierre de acronym el acrónimo que queramos marcar. Para darle un marcado más semántico si cabe, hacemos uso de la propiedad title de nuestra etiqueta acronym. En ella colocaremos el significado del acrónimo. En el caso de OVNI colocaremos Objeto volador no identificado.

title="Objeto volador no identificado"

Al igual que en la mayoría de etiquetas, por no decir todas, acronym puede hacer uso de las propiedades lang y xml:lang para indicar el lenguaje del que proviene el acrónimo, (si usamos XHTML 1.1, solo podremos hacer uso de xml:lang). En el caso del acrónimo XHTML, al venir del inglés Extended Hypertext Markup Language, debemos usar estas propiedades para indicar su procedencia, (suponiendo que nuestro acrónimo no herede el lenguaje de una etiqueta superior).

<acronym xml:lang="en" title="Extended Hypertext Markup Language">XHTML</acronym>

Huelga decir que para esta etiqueta, el elemento de cierre es obligatorio, y, para mi gusto, la propiedad title también. Espero que os haya servido de ayuda, y que a partir de ahora, cada vez que useis un acrónimo en vuestras Webs, que lo hareis seguro, useis la etiqueta adecuada para marcarlo.

Siguiendo el consejo de mini-d, decidí, hace unos meses, encargar la serie completa de Vagabond. Actualmente, segun la página de la editorial Ivrea, va por el tomo número 13, aunque yo por ahora solo tengo hasta el 12.

Por lo que llevo leido, la historia es magnífica. Con un Miyamoto Musashi muy bien conseguido, y una historia estupendamente llevada. Además, la edición es muy buena, con un dibujo de gran calidad, tomos de un grosor considerable, y además páginas a color que no han sido editadas en la edición japonesa, pero que gracias a la colaboración del autor, Takehiko Inoue , ha sido posible sacar en la edición española.

Este es el primer manga que me compro, y la verdad es que estoy muy satisfecho, a pesar del dinero que tuve que soltar despues de comprar 11 tomos de golpe… Sea como sea, desde aqui le doy las gracias al amigo mini-d por darme a conocer esta gran obra.