Outbook

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 conserven 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 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.