Outbook

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

Inicio que contiene a XHMTL

Datos de búsqueda

Etiqueta ‘XHMTL’

Evitar el uso de la etiqueta NOSCRIPT

Fecha de publicación: 2008/10/06

En algunas ocasiones al crear un comportamiento Javascript se necesita, por accesibilidad, que haya un contenido alternativo en el caso de tener Javascript deshabilitado.

Esto puede conseguirse mediante la etiqueta NOSCRIPT. Aunque tiene un inconveniente. Supongamos un navegador que tiene Javascript activado pero no soporta el Javascript que se ha creado. No obtendrá ni el contenido resultante de ejecutar el Javascript ni el contenido de la etiqueta NOSCRIPT.

¿No sería mejor que el HTML tenga de inicio el contenido que va en NOSCRIPT y que mediante Javascript ese contenido se elimine al cargar la página en el caso de que el navegador sea compatible con el Javascript realizado?

Idea sacada de Replacing <noscript> with accessible, unobtrusive DOM/JavaScript

Datos del artículo:

XHTML: Pautas para generar un marcado más correcto

Fecha de publicación: 2007/04/13

Unas cuantas pautas para mejorar el marcado HTML según 456 Bereast (algunas de ellas un poco obvias):

  • Orientación a la máxima simplicidad que sea posible.
  • No usar tablas para la maquetación.
  • Evitar la inclusión de un atributo class a cada elemento al que se quiera dar un estilo. Es mejor usar selectores descendentes, evitando así bastante complejidad en el documento.
  • La estructura semántica del documento es lo primero, ha de anteponerse siempre a la presentación.
  • Conocer bien la especificación de HTML 4.01, y si no se conoce echarle unos cuantos vistazos, para saber bien que etiquetas y que atributos emplear. No está de más ver la referencia de XHTML 1.0 una vez que se sepa lo que es HTML (se trata de ver las pequeñas diferencias entre XHTML 1.0 y HTML 4.01).
  • Validar todo lo que se haga.

Validación

Estas son los medios que uso para validar:

Referencias y enlaces relacionados

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: Desarrollo web
  • Comentarios desactivados en XHTML: Pautas para generar un marcado más correcto

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