Outbook

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

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:

¿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:

  • Etiquetas: ,
  • Publicado en categorías: Sin categoría
  • Comentarios desactivados en ¿Qué es un talibán de Linux?

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:

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:

  • Etiquetas: , , , ,
  • Publicado en categorías: Sin categoría
  • Comentarios desactivados en Kubuntu (y Ubuntu): Imagen de fondo en Grub

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:

Crear gráficos de estadísticas con CSS

Fecha de publicación: 2007/02/03

Advertencias

Con el empleo de esta técnica surgen algunas limitaciones:

  • Accesibilidad: puede quedar invalidad el criterio de accesibilidad WCAG 1.0 de nivel AAA 14.2, referido al acompañamiento del texto por parte de una imagen que facilite su comprensión.
  • Ergonomía: el gráfico generado no será copiado con la misma facilidad que una imagen. Es necesario crear una hoja de estilo para impresora para permitir que el gráfico pueda ser impreso adecuadamente.
  • Interoperatividad: la información establecida en el gráfico se conservará solamente en la medida en que los datos de presentación (CSS) se conservern con el documento HTML.

Dependiendo del contexto, habrá que valorar si utilizar esta técnica o utilizar una imagen.

Esta técnica es adecuada cuando no se dispone de un medio técnico de realizar una presentación gráfica que ilustre los datos de los que se dispone y que se quiere difundir.

El código HTML

El código (X)HTML deberá ser el siguiente:

<div class="estadisticas">
<h2>Estadísticas de uso de navegadores en Outbook (2007-02-03)</h2>
 <ul>
  <li>Internet Explorer 6.x&nbsp;: <span class="porciento v50">47,5%</span></li>
  <li>Internet Explorer 7.x&nbsp;: <span class="porciento v20">20%</span></li>
  <li>Mozilla Firefox 2.x&nbsp;: <span class="porciento v10">12,5%</span></li>
  <li>Mozilla Firefox 1.x&nbsp;: <span class="porciento v10">12,5%</span></li>
  <li>Safari 1.x&nbsp;: <span class="porciento v10">7,5%</span></li>
 </ul>
</div>

Se crea una capa a la que se aplica la clase estadisticas (class="estadisticas"), y se incluyen los datos en una lista desordenada. El valor estadístico se introduce dentro de la etiqueta span, con las clases porciento y vX (donde X representa la anchura asociada al valor estadístico): class="porciento vX".

Ahora lo que queda por hacer es crear el CSS necesario.

La hoja de estilo CSS

Creación de las barras de los gráficos

Este será el estilo común a todas las barras asociadas a los elementos de la lista (clase percent):

/* Eliminación de las viñetas en la lista*/
 div.estadisticas ul {
 list-style: none;
 width:400px; /*La anchura que sea necesaria*/
 }
 div.estadisticas.porciento {
/*Dimensiones comunes a todos los datos del listado y otros ajustes.*/
 display: block;/*Se pone como bloque para poder definir sus dimensiones*/
 height: 1.5em;
 line-height: 1.5em;
 margin: 5px 10px;
 padding: 0 5px;
 text-align: right;
 color: #fff;
 font-weight: bold;
 font-family: monospace; 
 -moz-border-radius: 5px; /*Redondeo de las esquinas*/
 border-bottom: 1px solid #aaa;
 border-right: 1px solid #aaa;
 cursor: default;
}

Especialización de las barras en función de su valor

Una vez definidos los valores de estilo comunes a todas las barras se pasa a aplicar una anchura y color de fondo (o imagen) individual a cada una de las barras.

Llegados a barras casi invisibles e ilegibles, so’lo nos queda por aplicarles un color de fondo (o una imagen) y una anchura. Se pueden poner todas las que se quieran, en este ejemplo aparecen 10 (no tienen que coincidir con exactitud con los datos específicos que tengamos, se aplica el estilo que más se aproxime a cada dato):

.v100 { background: #970000; width: 100%; }
.v90 { background: #ff0000; width: 90%; }
.v80 { background: #ff6600; width: 80%; }
.v70 { background: #ff9c00; width: 70%; }
.v60 { background: #ffd800; width: 60%; }
.v50 { background: #eaff00; width: 50%; }
.v40 { background: #baff00; width: 40%; }
.v30 { background: #78ff00; width: 30%; }
.v20 { background: #12ff00; width: 20%; }
.v10 { background: #00ff60; width: 10%; }

Especialización del estilo en función de la lista

Se puede hacer diferenciación entre distintos bloques de datos, dando una clase específica en la etiqueta div:

<div class="estadisticas multicolor">  ...  </div>
<div class="estadisticas verde">  ...  </div>

De esta forma se aplica un estilo multicolor al primer bloque de estadística y un estilo de color verde al segundo.

/*Comun a ambos estilos*/
.v100 { width: 100%; }
.v90 { width: 90%; }
.v80 { width: 80%; }
.v70 { width: 70%; }
.v60 { width: 60%; }
.v50 { width: 50%; }
.v40 { width: 40%; }
.v30 { width: 30%; }
.v20 { width: 20%; }
.v10 { width: 10%; }
/*Multicolor*/
.multicolor .v100 { background: #970000; }
.multicolor .v90 { background: #ff0000; }
.multicolor .v80 { background: #ff6600; }
.multicolor .v70 { background: #ff9c00; }
.multicolor .v60 { background: #ffd800; }
.multicolor .v50 { background: #eaff00; }
.multicolor .v40 { background: #baff00; }
.multicolor .v30 { background: #78ff00; }
.multicolor .v20 { background: #12ff00; }
.multicolor .v10 { background: #00ff60; }
/*Color verde*/
.verde .porciento { background: #83df00; }

Ver página de ejemplo.

Complemento opcional

Resultaría muy útil añadir un atributo title a cada uno de los datos para que sea más fácil su lectura en caso de haber un fondo que disminuya la legibilidad.

Se puede añadir directamente en el código (X)HTML (<span title="Valor estadístico " class="porciento vX">Valor estadístico</span>) o utilizar Javascript.

Si se opta por el uso de Javascript lo que hay que hacer es recuperar todas las etiquetas span que tengan la clase porciento, con el siguiente código (se hace uso de jQuery):

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// script pour ajouter un attribut title au <span> de façon automatisée
function titlePercentage() {
 // pour chaque élément de classe "percent"
 $(".percent").each(function() {
  // on définit son attribut "title" à partir du texte de l'élément
  $(this).attr("title",$(this).html());
 });
}

$(document).ready(function() {
 titlePercentage();
});
</script>

Referencias y enlaces relacionados

Este artículo está basado en su mayor parte, con pequeñas diferencias en Des statistiques graphiques grâce aux CSS (Alsacreations), que se distribuye bajo licencia Creative Commons de reconocimiento.

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: CSS, Desarrollo web
  • Comentarios desactivados en Crear gráficos de estadísticas con CSS

Información del sitio