| Textos con anglicismos |
|
|
Una desarrolladora web mejicana estaba preparando una página para una empresa de servicios y nos consultó sobre la problemática del uso de palabras en inglés y que pueden no tener una fácil traducción en una sola palabra (software, hardware, etc). En este caso, y en otros similares en los que las palabras en inglés están muy extendidas, siempre es delicado decidir si se traduce o si se mantiene la palabra en inglés. Una solución "salomónica" que puedes aplicar en estos casos, es dejar la palabra original y añadirle una breve descripción, de tal forma que cuando el cursor pasa por encima de la palabra en cuestión, aparezca un pequeño mensaje donde explica su significado. En el ejemplo que a continuación te damos, además hemos añadido una etiqueta para que los lectores de pantalla puedan reconocer las palabras en otro idioma, así de paso mejoras la "accesibilidad" de tu web Puedes ver un ejemplo (similar al que te adjuntamos) en la noticia sobre IV Congreso Iberoamericano de Informática en la Educación Especial que aparece en la página principal de http://www.NI4.org A continuación te muestro el ejemplo: Código (X)HTML < span lang="en" class="descripcion" title="Software: Programas y aplicaciones informáticas que permiten realizar tareas en un ordenador" >software Código CSS span.descripcion { border-bottom: 1px dotted; cursor: help; font-weight: bold; }
Explicaciones del código HTML: Utilizamos un elemento para enmarcar la palabra(s) en inglés (u otro idioma). Le añadimos el atributo [lang="en "] para especificar el idioma de la parabra (s); al usuario "normal" no le supone ninguna diferencia, pero es una gran ayuda para los usuarios que usan lectores de pantallas. A continuación, le añadimos [class="descripcion "] para poder aplicarle un estílo que resalte la palabra(s) del resto del texto (no tiene que ser "descripción", puede ser cualquier otra cosa). Dentro de "title" es donde hay que introducir la descripción/explicación del término(s); este texto aparece en forma de mensaje emergente (tooltip) cuando se pasa el cursor del ratón por encima de la palabra.
Explicación del código CSS: [span.descripcion] de esta manera especificamos que todos los elementos con [class="descripcion "] tengan un subrallado con puntos (border-bottom: 1px dotted), que el cursor cambie al pasar sobre ellos a un signo de interrogación (cursor: help), y que el texto sea negrita (font-weight: bold). Puedes modificar cualquiera de los valores anteriores o cambiar cualquier aspecto de la presentación como el color del texto, tamaño, etc.
NI4 |