Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a 2007 que contiene a febrero

Datos de búsqueda

Archive for febrero, 2007

XHTML: Etiquetas de énfasis (STRONG y EM)

Fecha de publicación: 2007/02/10

Se trata de etiquetas para marcar énfasis en las partes importantes de un texto.

La etiqueta strong

De las dos etiquetas es la que concede mayor importancia al texto contenido en ella.

Con frecuencia es confundida con la etiqueta b, que aparentemente conduce al mismo resultado (y escribiendo menos): tipografía en negrita.

La etiqueta strong es un estado lógico, y b es un estado físico. El estado lógico separa la presentación del contenido, por ello la presentación dependerá del navegador (strong suele representarse en negrita) o de la hoja de estilo CSS. Utilizando b no se da énfasis al texto, sino que se especifica que ese texto va en negrita: es un elemento de presentación visual.

Para conseguir un texto en negrita sin utilizar b se puede recurrir a las hojas de estilo:

.negrita {
  font-weight:bold;
}

La etiqueta em

Da menor énfasis que la etiqueta strong. Los navegadores suelen representar el texto que contiene en cursiva.

En la etiqueta em también hay lugar a la confusión, esta vez con la etiqueta i, que sirve para delimitar texto en cursiva, siendo, igual que la etiqueta b, un elemento de presentación.

Para conseguir texto en cursiva también se debe recurrir a las hojas de estilo:

.cursiva {
  font-style: italic;
}

Ejemplo de uso

Ejemplo de uso de las etiquetas de énfasis y de los estilos visuales en negrita y cursiva (con las clases CSS especificadas anteriormente):

<p>
En este párrafo hay texto con
<em>poco énfasis</em>,
texto con <strong>bastante énfasis</strong>,
texto <span class="cursiva">en cursiva</span>
y texto <span class="negrita">en negrita</span>.
</p>

Referencias

Datos del artículo:

¿Es un artículo o es un anuncio sobre Windows Vista?

Fecha de publicación: 2007/02/10

Hace ya bastantes días salió un artículo en ELPAIS.com en el que un usuario de Windows, uno de MAC y otro de Linux analizaban Windows Vista (incluyo una imagen de la página (PNG 585 KB), tomada el 10 de febrero de 2007, por si sufre cambios o desaparece). Y me encuentro con esta argucia para ocultar una de las carencias de Vista:

Sólo un escritorio

A pesar de todas las novedades de Vista, Ruiz echa de menos un avance en concreto que se suele encontrar habitualmente en los entornos Linux. “Creía que iban a incluir la posibilidad de utilizar varios escritorios donde agrupar distintas herramientas y que queden ordenadas y accesibles muy fácilmente como ya ocurre con algunos escritorios para Linux que puedes acumular hasta cuatro diferentes, que se quedan identificados en la barra inferior con cuatro iconos”, comenta este administrador de sistemas.

“Bueno”, le replica Arturo, “ahora es más fácil cambiar de usuario y con él sus respectivos escritorios”. “No, no es lo mismo. No se trata de cambiar de entorno de trabajo si no de en un misma pantalla poder organizar tus herramientas o aplicaciones en distintas escritorios según el tipo de trabajo que estés haciendo”, responde rápidamente Ruiz, quien no puede entender por qué no han observado esta posibilidad.

“Hay escritorios bajo Linux que le dan cien mil vueltas a Vista. Hay uno que te presenta los distintos escritorios en cubo que se puede hacer rotar en las distintas caras”, insiste Ruiz.

El usuario de Linux dice que con algunos escritorios para Linux se pueden acumular hasta cuatro diferentes. Interesante. Yo, por comodidad, tengo cuatro. Pero en KDE se pueden acumular más de cuatro escritorios (pinchando con el botón derecho del ratón sobre los iconos de escritorio sale un menú para configurar el número de escritorios), como se puede observar en la siguiente imagen:

Configuración del número de escritorios en KDE
Configuración del número de escritorios en KDE.

No parece que hayan escogido un usuario de Linux muy experimentado. Encima intentan confundir con la característica ya incluida en XP de “Switch user”, consistente en que se puede cambiar de forma inmediata de usuario.

Esa característica de múltiples escritorios no se incluye ni en XP ni en Vista, aunque existen algunas aplicaciones para añadir esa funcionalidad (aunque no con la comodidad que en KDE o en Gnome).

Y también me llama la atención esto:

Pero la función que casi deja sin palabras a los usuarios es la inclusión del Windows Media Center, el sistema para la gestión de todo tipo de de funciones multimedia que antes se vendía de manera independiente y ahora forma parte de la versión Ultimate de Vista. “¡Se ve la televisión interactiva directamente!”, dice sorprendido Merino, el diseñador gráfico. “Me impresiona porque no estoy en la tele, es a través del ordenador”.

Yo en Kubuntu cuando abro Kaffeine también puedo ver la tele, y también a través del ordenador (¿es eso una novedad?).

Y esto:

“Es cierto que Microsoft copia, pero no es malo, todo el mundo copia lo que hacen otros”

Es bueno copiar cuando se aporta algo nuevo que además sea verdaderamente útil y novedoso. Qué mejor forma de ocultar la falta de innovación de Vista que ponerla a la vista y no darle mayor importancia.

Y en el titular:

“Es un espectáculo” [usuario de Windows], “es barroco” [usuario de MAC], “es complicado” [usuario de Linux]

Es un espectáculo hasta que tantos movimientos de ventanas cansan, y no creo que sea complicado.

¿El usuario de Linux era real o solo actuaba? Cuando habla de los escritorios no sabe que puede haber más de cuatro (algo difícil de creer si es un usuario minimamente avanzado), pero en la conclusión habla como lo haría como un taliban de Linux. ¿Windows Vista más complicado que Linux? No creo, Windows puede tener muchos defectos, pero en lo referido a facilidad de uso (que no comodidad) está bastante bien.

Datos del artículo:

Actualizaciones de post en Outbook

Fecha de publicación: 2007/02/10

Parece que cuando se realiza una actualización en un post de un blog con sistema Blogger el post vuelve a aparecer en el feed como si fuese nuevo.

Ayer estuve arreglando algunos post antiguos que fallaban con la plantilla que tengo actualmente, salen como si fuesen nuevos, a pesar de que tienen una antigüedad de casi dos años.

Datos del artículo:

¿Qué es un talibán de Linux?

Fecha de publicación: 2007/02/10

Un taliban de Linux es aquel usuario de Linux que no comprende que haya personas que por necesidad o por gusto usen otros sistemas operativos. Es una persona muy subjetiva, contra la que no valen los razonamientos.

Por ejemplo, si en un foro de Linux le preguntas como montar una red en la que una de las máquinas use Windows, o uno de los servicios de red esté en Windows, te dirá que uses Linux (y puede que la solución usando Linux), y no te ayudará a encontrar una solución (encontrar una solución es el objetivo del foro).

Datos del artículo:

XHTML: la etiqueta TITLE

Fecha de publicación: 2007/02/09

La etiqueta title es el elemento que define el título de un documento XHTML.

Ejemplo:

<html>

<head>
<title>Título del documento</title>
</head>

<body>
Contenido del documento......
</body>

</html>

Atributos

La etiqueta title no requiere la utilización de ningún atributo, aunque admite la inclusión de atributos I18n, que se refieren al idioma utilizado:

  • dir: especifica la dirección del texto de la página. Sus valores pueden ser ltr (de izquierda a derecha) o rtl (de derecha a izquierda).
  • xml:lang: especifica el idioma del elemento. Los valores pueden ser abreviaturas, como es (español), en (inglés), de (alemán), it (italiano), etc.

Motores de búsqueda

El contenido de la etiqueta title es importante en la indexación del documento XHTML por parte de los motores de búsqueda, ya que influirá en el posicionamiento del mismo en los resultados de los buscadores.

El título de la página contenido en la etiqueta title es utilizado por los buscadores como título para el resultado correspondiente a esa misma página (ver imagen):

Ejemplo de uso de title en páginas de resultados
Ejemplo de uso de title en páginas de resultados.

Al tratarse de una breve descripción del contenido del documento, el buscador da mayor relevancia al contenido de la etiqueta title que al contenido de otras etiquetas.

Navegadores web

Cuando se agrega una página a favoritos, el nombre de ese favorito se obtiene del contenido de la etiqueta title. Y no solo en los favoritos, sino en el título de la ventana del navegador e incluso en las pestañas:

Ejemplo de uso de title en el navegador web
Ejemplo de uso de title en el navegador web.

Como crear correctamente el contenido de title

En el caso de que la página sea la inicial o principal de un sitio no se deben usar artículos, ni otras palabras del estilo “Bienvenido”, sino el nombre del sitio o de la organización a la que se refiere el sitio:

For your homepage, begin the with the company name, followed by a brief description of the site. Don’t start with words like “The” or “Welcome to” unless you want to be alphabetized under “T” or “W.”

Y en el caso del resto de páginas se debe comenzar por las palabras (el título) que mejor describan su contenido, aunque sin extenderse demasiado:

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page.

En el segundo caso se puede añadir el nombre del sitio tras esas palabras, por ejemplo “Título de la página – Nombre del sitio”.

Referencias

Datos del artículo:

El nuevo sitio web de la RAE

Fecha de publicación: 2007/02/08

Parece que la RAE ha remodelado su sitio web.

Pero adolece de problemas:

  • Ya se puede buscar una palabra del diccionario desde cualquier página del sitio, pero la página de resultados se abre en una ventana nueva.
  • El marcado no es semántico.
  • Dice ser accesible y no lo es (cuando por ley debe serlo).

Análisis de algunos aspectos del sitio

La página inicial (no la principal) está bien planteada, a pesar de tratarse de una página intermedia, con el nombre y el logotipo bien situados, un buscador para el diccionario y un enlace para acceder al resto del sitio, aunque la estética es un poco cutre.

Captura de la página inicial
Captura de la página inicial

Pero el marcado semántico en la página inicial es un poco pobre, utilizando:

<span title="Página web de la Real Academia Española">
<span style="font-family: Times New Roman;
font-size: 40pt; color: rgb(208, 47, 30);">R</span>
<span style="font-family: Times New Roman;
font-size: 25pt; color: rgb(208, 47, 30);">EAL </span>
<span style="font-family: Times New Roman;
font-size: 40pt; color: rgb(208, 47, 30);">A</span>
<span style="font-family: Times New Roman;
font-size: 25pt; color: rgb(208, 47, 30);">CADEMIA</span>
<span style="font-family: Times New Roman;
font-size: 40pt; color: rgb(208, 47, 30);">E</span>
<span style="font-family: Times New Roman;
font-size: 25pt; color: rgb(208, 47, 30);">SPAÑOLA</span>
</span>

en lugar de esto (sin que todas las letras sean mayúsculas):

<h1>Real Academia Española</h1>

Utilizando H1 también se puede conseguir que en el código las letras sean minúsculas y en el navegador sean mayúsculas, utilizando el siguiente CSS:

h1 {
text-transform:uppercase;
}

Los enlaces del menú de navegación de la página principal están hechos con imágenes:

Captura de la página principal
Captura de la página principal.

Y el código utilizado en ese menú de navegación tiene la siguiente estructura (he quitado todos los atributos para que la estructura se entienda mejor):

<a><img></a>
<br>
<a><img></a>
<br>
<a><img></a>
<br>
<a><img></a>
<br>
<a><img></a>
<br>
<a><img></a>

Para ese menú de navegación puede que hubiese sido mejor usar este otro código:

<ul>
<li><a>Texto de enlace</a></li>
<li><a>Texto de enlace</a></li>
<li><a>Texto de enlace</a></li>
<li><a>Texto de enlace</a></li>
<li><a>Texto de enlace</a></li>
<li><a>Texto de enlace</a></li>
</ul>

Y la página de la noticia del rediseño tiene también algunos fallos: ¿donde está la fecha? Y también alguna que otra chapuza de código (he eliminado el texto de la noticia):

<table border="0" width="100%">
<tbody><tr>
<td class="textotittabl">&nbsp;La Real Academia Española
actualiza su página electrónica</td>
</tr>
</tbody></table>
<table border="0" width="100%">
<tbody><tr>
<td class="textos" align="justify">
<p>&nbsp; [Texto de la noticia]</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody></table>

Captura del código HTML
Captura del código HTML del texto de la noticia del rediseño.

Captura de la página de la noticia del rediseño
Captura de la página de la noticia del rediseño.

Accesibilidad

A pesar de tener medalla de accesibilidad la página principal tiene algunos fallos según el test automático HERA:

Captura del test de accesibilidad
Captura del test de accesibilidad.

Conclusiones

Horrible, lo único que me parece que han mejorado ha sido lo de la búsqueda en el diccionario, pero con el fallo de que se abra en una ventana nueva.

Para saber más

Datos del artículo:

Kubuntu (y Ubuntu): Imagen de fondo en Grub

Fecha de publicación: 2007/02/07

Este proceso ha sido verificado en Kubuntu 6.06 (debería funcionar en Ubuntu 6.06 y distribuciones de la misma rama).

El objetivo es conseguir que el menú de GRUB que aparece al inicio sea un poco más agradable para la vista, con una imagen a gusto del usuario.

Se deben seguir los siguientes pasos:

  1. Conseguir la imagen. Esa imagen debe tener una resolución de 640×480, un máximo de 14 colores, en formato XPM y comprimida en gzip (con extensión .gz). También existe la posibilidad de instalar unas imágenes ya preparadas, con el comando sudo apt-get install grub-splashimages, que instalará algunas imágenes ya preparadas en el directorio /boot/grub/splashimages.
  2. Editar la configuración de GRUB. Hay que abrir el archivo de configuración de GRUB (como superusuario): /boot/grub/menu.lst y añadir una línea: splashimage=(hd0,2)/ruta imagen/imagen.xpm.gz. (hd0,2) es la partición donde se encuentra la imagen (se puede averiguar viendo la entrada de menú correspondiente al sistema Kubuntu donde GRUB está instalado).
  3. Se guarda y se reinicia, a ver si ha salido bien.

Aquí podemos ver el antes:

Grub sin imagen de fondo

Y aquí el después:

Grub con imagen de fondo

Referencias

Datos del artículo:

AENOR lanza una certificación de accesibilidad web

Fecha de publicación: 2007/02/07

AENOR ha lanzado una certificación de accesibilidad web como resultado de un acuerdo con CTIC y ESI Tecnalia.

Interesante, pero AENOR no esta en condiciones de dar lecciones de accesibilidad, de momento, ya que la nota de prensa la distribuye en PDF, sin ofrecer una alternativa en HTML, y su sitio web dispone también de áreas de navegación con enlaces en javascript (contraindicados si la accesibilidad es importante). Sería interesante que arreglasen esas deficiencias que tienen actualmente, ¿quien se fiaría de una organización que ofrece un certificado de accesibilidad para sitios web pero que tiene un sitio que no puede obtener ese certificado?

En esa nota de prensa explica brevemente la legislación que hay actualmente en España respecto a la accesibilidad web, en realidad un párrafo de la disposición adicional quinta de la LSSICE:

DISPOSICIONES ADICIONALES

Quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos.

Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005.

Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.

Después continúa con la base que han utilizado la norma UNE 139803:1994 (Aplicaciones informáticas para personas con discapacidad) y las pautas de accesibilidad del W3C, una mención al concepto de usabilidad y a los inspectores cualificados que verificarán el cumplimiento de la correspondiente norma en aquellos sitios web que aspiren a conseguir el certificado.

Texto parcial de la nota de prensa de AENOR:

AENOR lanza la certificación de accesibilidad web en colaboración con CTIC y ESI

[...]

Según la Ley de Servicios de la Sociedad de la Información y de Comercio Electrónico (LSSICE), las Administraciones públicas españolas deben cumplir desde el 1 de enero de 2006, los requisitos necesarios para que sus páginas web sean accesibles a personas con discapacidad y de edad avanzada. Esto mismo es aplicable a los sitios web privados que cuenten con financiación pública.

AENOR ha desarrollado un sistema de certificación en esta materia, según la norma UNE 139803:1994 Aplicaciones informáticas para personas con discapacidad. Requisitos de accesibilidad para contenidos Web, que se fundamenta en las directrices de accesibilidad del World Wide Web Consortium (W3C), cuya oficina española está en la Fundación CTIC.

La nueva certificación asegura a empresas privadas y Administraciones públicas que sus sitios web cumplen en todo momento con las pautas de accesibilidad establecidas en la norma y aporta un sello de excelencia a su presencia en Internet. Asimismo sirve como importante guía de apoyo a la hora de definir los requisitos de contratación y como distintivo de confianza para los usuarios.

[...]

Inspectores cualificados

El acuerdo supone que CTIC y ESI prestarán a AENOR servicios técnicos mediante inspectores cualificados que analizarán el grado de accesibilidad de las páginas web, tanto en empresas como en instituciones. El proceso consiste en evaluar un sitio web, combinando sistemas de revisión automática con metodologías de inspección manual.

Estos especialistas trabajarán como inspectores cualificados de acuerdo a los procedimientos vigentes en la certificación de productos y según los requisitos deontológicos establecidos por AENOR, especialmente, en lo relativo a la independencia para asumir labores de asesoramiento y consultoría.

[...]

Referencias

Datos del artículo:

Lexxe: buscador en lenguaje natural

Fecha de publicación: 2007/02/04

Lexxe es un buscador en el que se puden introducir cadenas de búsqueda en lenguaje natural.

En la página de inicio indica el tipo de búsqueda más adecuado, las preguntas:

Please type your question or key words below:

El buscador trata de dar una respuesta a la pregunta del usuario de forma que no sea necesario ir más allá de la página de resultados.

Algunas preguntas que le he realizado:

  • Pregunta: Who is Tony Blair?
    Respuesta: Prime Minister of Great Britain since May 1997.
  • Pregunta: Where is madrid?
    Respuesta: capital and largest city situated centrally in Spain.

Incluye un listado de búsquedas relacionadas (clusters) que ayudan a afinar los resultados de la búsqueda.

Captura de pantalla de la página de resultados de Lexxe

Lexxe se encuentra en fase Alpha.

Ir a Lexxe.

Datos del artículo:

Dos años de estadísticas

Fecha de publicación: 2007/02/04

Hoy hace dos años que decidí comenzar a registrar las visitas que recibe éste blog.

En un año (4 de febrero de 2006 a 4 de febrero de 2007) he recibido 7020 visitas, aumentando en un 262% las visitas del periodo que va del 4 de febrero de 2005 al 4 de febrero de 2006.

Parece que va mejorando la cosa.

Ver las estadísticas detalladas.

Datos del artículo:

Información del sitio