Armonía | En definitiva...

Estás viendo las entradas catalogadas dentro de la categoría "Web Semántica".

Carga semántica en XHTML: code, kbd, samp, var

  • Domingo, 06 de Febrero de 2005 a las 23:08 CET
  • Guardado en: XHTML
    Warning: sprintf() [function.sprintf]: Too few arguments in /home/armoniaspiralstatic/armonia.spiral-static.org/ecrire/tools/multicat/functions.php on line 85

Siguiendo con el tema de la carga semántica en las etiquetas XHTML, hoy me gustaría hablar de cuatro etiquetas poco conocidas, usadas principalmente en contextos informáticos. Estas etiquetas son: code, kbd y samp.

Empezaremos hablando de code, que ha de utilizarse, según las especificaciones del W3C, para designar un fragmento de código de computador. Atendiendo a esta definición, podemos determinar que usaremos la etiqueta code para marcar cualquier trozo de código fuente que coloquemos en nuestros documentos.

Si miramos el código fuente de este blog, encontraremos probablemente varios ejemplos del uso de code. A continuación pongo un ejemplo específico para un trozo de código embebido dentro de un párrafo.

<p>En tu caso falta inicializar <code>$contador = 1;</code></p>

Que daría como resultado:

En tu caso falta inizializar $contador = 1;

Otra etiqueta que usaremos probablemente a menudo si escribimos sobre temas informáticos será kbd. Esta etiqueta se debe usar para marcar texto que el usuario deba introducir en el ordenador mediante el teclado, bien sea en un formulario, en una consola, en una barra de direcciones, etc.

Un uso muy extendido para esta etiqueta es colocarla cuando se quiere mostrar un atajo de teclado, al estilo Ctrl + Alt + Supr. Y posteriormente aplicarle estilos a esta etiqueta desde CSS para imitar el aspecto de una tecla del teclado, (como explica mini-d en este post).

A continuación un par de ejemplos del uso de kbd, el primero para mostrar un texto que se debe introducir, y el segundo para marcar un atajo de teclado.

<p>Para actualizar su sistema <cite>Debian</cite> introduzca <kbd>apt-get dist-upgrade</kbd> en su consola</p>

Que daría como resultado:

Para actualizar su sistema Debian introduzca apt-get dist-upgrade en su consola

Y ahora el ejemplo para representar un atajo de teclado:

<p>Para cerrar la ventana activa se suele utilizar <kbd>Alt</kbd> + <kbd>F4</kbd></p>

Que daría como resultado:

Para cerrar la ventana activa se suele utilizar Alt + F4

Otra etiqueta que, por ejemplo, estoy usando en este post, es samp, usada para marcar un ejemplo de salida para un programa, un script, etc. Esto es muy útil, por ejemplo, cuando queremos mostrar un mensaje de error que nos devuelve un comando Linux, o cuando debemos marcar cualquier texto que un programa nos devuelva. Aqui va un ejemplo:

<p>Al pulsar sobre el icono se muestra el siguiente texto: <samp>Elija un numero del 1 al 10</samp></p>

Dando como resultado:

Al pulsar sobre el icono se muestra el siguiente texto: Elija un numero del 1 al 10

Bueno, esto es todo, espero que os haya servido de algo este otro pequeño paso en nuestro repaso por la carga semántica de las etiquetas que componen el XHTML.

Actualización (13:27 07/02/2005).

Advertido por el amigo Federico, añado a este post la etiqueta var, usada para referenciar instancias a variables o argumentos de un programa. Se podría usar, por ejemplo, en el siguiente texto:

if (document.getElementById) blnDOM = true;

Cuyo código sería:

<p><code> if (document.getElementById) <var>blnDOM</var> = true; </code></p>

Carga semántica en XHTML: abbr

  • Jueves, 03 de Febrero de 2005 a las 16:03 CET
  • Guardado en: XHTML
    Warning: sprintf() [function.sprintf]: Too few arguments in /home/armoniaspiralstatic/armonia.spiral-static.org/ecrire/tools/multicat/functions.php on line 85

Volviendo al tema de la carga semántica de las etiquetas XHTML, hoy me gustaría hablar de la etiqueta abbr. Quizá lo más lógico hubiese sido hablar de abbr en el mismo post en el que hablé de acronym, pero pero quise separar las distintas etiquetas en distintos posts para tener más claro y separado el concepto de cada una.

Como siempre, para saber en que ocasiones debemos usar una etiqueta u otra, tenemos que tener clara la idea de lo que significa el texto o la palabra que queremos marcar y las herramientas de las que disponemos. En el caso de XHTML, las herramientas que poseemos son las etiquetas. Como aqui vamos a hablar de abbr, lo primero que debemos hacer es entender para qué sirve esta etiqueta.

Segun las especificaciones del W3C, abbr debe ser usado para marcar formas abreviadas de palabras o grupos de palabras. O lo que es lo mismo, abreviaturas. Ahora, para poder comprender bien el uso de esta etiqueta, y sabiendo que su función es marcar abreviaturas, debemos asegurarnos de comprender el significado de esto último. Segun la RAE:

abreviatura.
1. Tipo de abreviación que consiste en la representación gráfica reducida de una palabra mediante la supresión de letras finales o centrales, y que suele cerrarse con punto; p. ej., afmo. por afectísimo; íd. por ídem; SS. MM. por Sus Majestades; D. por don.
2. Palabra representada en la escritura de este modo.

Conociendo todo esto, ya sabemos como marcar nuestro texto para formar un buen XHTML, y esta misma fórmula sirve tanto para abbr como para cualquier otra. Pero como estamos hablando de la primera, vamos a poner algunos ejemplos prácticos:

<p><abbr title="A la atenci&oacute;n de">Att.</abbr> <abbr title="Don">D.</abbr> Juan Antonio Navarro</p>

Este ejemplo de arriba quedaría como:

Att. D. Juan Antonio Navarro

Bueno, creo que esto es todo. Me gustaría recordar una pequeña regla que uso yo para diferenciar cuándo debo usar abbr y cuando acronym. Todas aquellas palabras que se abrevian usando un punto al final, (P. ej. Barriada, que pasa a ser Bda.), son, a mi entender, abreviaturas, y por tanto uso abbr. Para el resto, (P. ej. Extended Hypertext Markup Language, que pasa a ser XHTML), uso acronym.

Recordar que es una regla personal, y que para mi es correcta. Pero no soy un experto lingüista y puedo estar equivocado en los conceptos de abreviatura y acrónimo.

Actualización (22:30 03/02/2005).

Gracias al amigo posavasos, The Lord of the Links jiji, he llegado a unos cuantos sitios muy interesantes con más información sobre el tema. Ahí van los enlaces:

A gustito con A List Apart

  • Martes, 01 de Febrero de 2005 a las 22:56 CET
  • Guardado en: XHTML
    Warning: sprintf() [function.sprintf]: Too few arguments in /home/armoniaspiralstatic/armonia.spiral-static.org/ecrire/tools/multicat/functions.php on line 85

    Warning: sprintf() [function.sprintf]: Too few arguments in /home/armoniaspiralstatic/armonia.spiral-static.org/ecrire/tools/multicat/functions.php on line 85

Los dos últimos artículos de A List Apart me han dejado maravillado. Son dos técnicas avanzadas, pero a la vez tan simples y lógicas, que no puedo más que quitarme el sombrero y aplaudir, (cosa común cuando hablamos de A List Apart).

Los artículos en cuestión son:

Siendo sinceros, yo no soy muy partidario del uso de Javascript, aunque a veces no dudo que venga genial, sea útil, y hasta bonito. Pero aún asi no me convence, (será mi vena fundamentalista). A pesar de ello, el comienzo del primer artículo es genial. Habla de la separació entre contenido, presentación y comportamiento. Tres capas distintas, que jamás deberían mezclarse. Cada una de ellas corresponde a una tecnología distinta:

  • XHTML para la capa de estructura, semántica y contenido.
  • CSS para la capa presentacional.
  • Javascript para la capa de comportamientos, (behaviors).

Simple, directo al grano, y a mi entender, dando en el clavo. Aunque obviamente el artículo no habla expresamente de esto, pero es el concepto con el que prefiero quedarme. El resto no es más que una técnica, fantástica, eso si, pero nada más. Sea como sea, bravo por A List Apart, una y mil veces.

Paginación:

Búsqueda

Acerca de este blog

Armonía es el blog personal de Juan G. Hurtado, (C. V.). Aquí se tratarán muchos temas, pero sobre todo los relacionados con la programación, la tecnología, el desarrollo y los estándares en la World Wide Web.

Si quieres puedes visitar también las galerias de fotos guardadas en su cuenta Flickr, o su colección de enlaces en del.icio.us.

Velas en la oscuridad Mano del autor del blog en blanco y negro Trozo del paisaje desde la ventana del autor del blog Palma de la mano del autor del blog en blanco y negro

Lectura

CSS Mastery, de Andy Budd
Portada del libro Bulleproof Web Design
Muy buen libro, escrito por Andy Budd en el que nos muestra un repaso muy bien detallado por infinidad de técnicas ingeniosas para conseguir que nuestras hojas de estilo "hagan magia"
[Leer revisión]
Bulletproof Web Design, de Dan Cedelhorm
Portada del libro Bulleproof Web Design
Un libro genial en el que Dan Cedelhorm nos enseña cómo blindar nuestras páginas para evitar que se "rompan" ante configuraciones no habituales de los navegadores de los visitantes, (aparte de otras muchas cosas)
[Leer revisión]
Agile Web Development With Rails, de Dave Thomas y David Heinemeier
Portada del libro Agile Web Development With Rails
Una perfecta introducción a Ruby on Rails, el framework de desarrollo Web que está causando furor en estos momentos...
[Leer revisión]

Contacto

  • e-Mail: juan.g.hurtado@gmail.com
  • Jabber: juan.g.hurtado@jabberes.org
  • Skype: juan.g.hurtado
  • Messenger: the_micro_cuts@hotmail.com