Outbook

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

Inicio que contiene a

Datos de búsqueda

Etiqueta ‘Semántica’

WCAG 2.0: Accesibilidad de títulos de páginas

Fecha de publicación: 2008/12/30

El punto 2.4.2 de la WCAG 2.0 define que los títulos de las páginas deben describir su tema o propósito:

2.4.2 Page Titled: Web pages have titles that describe topic or purpose. (Level A)

Este punto se refiere al elemento TITLE.

El contenido del elemento TITLE no debe limitarse al título del sitio, sino que además debe describir de forma breve el contenido de la página a la que pertenece

La W3C propone el siguiente ejemplo:

The title of Web Content Accessibility Guidelines 2.0 is “Web Content Accessibility Guidelines 2.0.

  • The introduction has the title “Introduction to Web Content Accessibility Guidelines 2.0.”
  • The main body has the title “WCAG 2.0 Guidelines.”
  • Appendix A has the title “Glossary to Web Content Accessibility Guidelines 2.0.”
  • Appendix B has the title “Checklist for Web Content Accessibility Guidelines 2.0.”
  • Appendix C has the title “Acknowledgements for Web Content Accessibility Guidelines 2.0.”
  • Appendix D has the title “References for Web Content Accessibility Guidelines 2.0.”

Beneficios

Algunos de los beneficios de la aplicación de este punto serían:

  • El usuario podrá identificar con mayor rapidez si la información de la página le es relevante a sus necesidades.
  • Los usuario con deficiencias visuales podrán diferenciar las páginas de un mismo sitio cuando tenga varias abiertas simultaneamente.
  • Mejor indexación y visibilidad en buscadores.

Datos del artículo:

PHP: función para crear calendario accesible y semántico

Fecha de publicación: 2008/12/02

He aquí una función en PHP para generar un calendario con XHTML semántico y accesible, y con clases e identificadores adecuados para aplicarle rápidamente el CSS.

La función lleva cuatro parámetros, todos ellos opcionales, en el siguiente orden:

  • Año ($year): Define el año que se va a mostrar, siendo un valor de 4 dígitos. Se predetermina al año actual.
  • Mes ($mes): Define el mes a mostrar, con valores de 1 a 12. Se predetermina al mes actual.
  • Estado fines de semana ($finDeSemana=1): Define si los días de los fines de semana llevan o no enlace. Se le da valor 1 para mostrarlos con enlace, o valor 0 para quitar el enlace. Se predetermina a 1.
  • Estado de días nulos ($mostrarDiasNulos=1): Define si se muestran los días de la primera semana que pertenecen al mes anterior y los días de la última semana que pertenecen al mes posterior. Se le da valor 1 para mostrarlos, o valor 0 para ocultarlos. Se predetermina a 1.
  • Nivel de encabezado ($nivelH=2): Nivel del encabezado del bloque de calendario. Ha de terner un valor de entre 1 y 6. Se predetermina en 2.

Ejemplo de llamada a la función con el mes de febrero de 2009, los fines de semana desactivados, los días nulos activados y un encabezado de nivel 3:

calendario(2009,2,0,1,3);

Descargar archivo con ejemplo funcional o verlo en acción (abre en ventana nueva).

Funciones para generar el calendario (para mayor seguridad, utilizar el código del ejemplo descargable):

function calendario ($year,$mes,$finDeSemana=1,$mostrarDiasNulos=1,$nivelH=2) {
 
 if (strlen($year)!=4) {$year=date('Y');}
 if (($mes<1 or $mes>12) or (strlen($mes)<1 or strlen($mes)>2)) {$year=date('n');}
 
 // Listados: días de la semana, letra inicial de los días de la semana, y meses
 $dias = array('Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo');
 $diasAbbr = array('L','M','M','J','V','S','D');
 $meses = array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiempre','Octubre','Noviembre','Diciembre');
 
 // Se sacan valores que se utilizarán más adelante
 $diaInicial = gmmktime(0,0,0,$mes,1,$year);  // Primer día del mes dado
 $diasNulos = (date("N",$diaInicial))-1; // Con 'N' la semana empieza en Lunes. Con 'w', en domingo
  if($diasNulos<0){$diasNulos = 7-abs($diasNulos);}
 $diasEnMes = date("t",$diaInicial); // Número de días del mes dado
 
 // Se abre la capa contenedora y se genera el encabezado del bloque de calendario
 $html .= '<div id="calendario">';
 $html .= '<h'.$nivelH.' class="encabezadoCalendario">Calendario</h'.$nivelH.'>';
 
 // Párrafos con la fecha actual y la fecha seleccionada
 $html .= '<p>Fecha actual: '.date('j').' de '.$meses[(intval(date('n'))-1)].' de '.date('Y').'</p>';
 $html .= '<p>Fecha seleccionada: ';
 if (isset($_GET['dia'])) {$html .= ''.$_GET['dia'].' de ';} // El día solo sale si se ha definido previamente en el parámetro 'dia' de la URL
 $html .= ''.$meses[($mes-1)].' de '.$year.'</p>';
 $html .= '<div class="tabla">';
 
 
 // Enlaces al mes anterior y al siguiente
 $html .= '<p>Navegación por meses:</p>';
 $html .= '<ul id="calNavMeses">';
 $enlaceAnterior1 = gmmktime(0,0,0,($mes-1),1,$year);
 $mesAnterior = date('n',$enlaceAnterior1);
 $yearMesAnterior = date('Y',$enlaceAnterior1);
 $enlaceSiguiente1 = gmmktime(0,0,0,($mes+1),1,$year);
 $mesSiguiente = date('n',$enlaceSiguiente1);
 $yearMesSiguiente = date('Y',$enlaceSiguiente1);
 $html .= '<li class="anterior"><a href="?mes='.$mesAnterior.'&ano='.$yearMesAnterior.'"><span>Mes anterior ('.$meses[($mesAnterior-1)].')</span></a></li>';
 $html .= '<li class="siguiente"><a href="?mes='.$mesSiguiente.'&ano='.$yearMesSiguiente.'"><span>Mes siguiente ('.$meses[($mesSiguiente-1)].')</span></a></li>';
 $html .= '</ul>';
 
 // Enlaces al año anterior y al siguiente
 $html .= '<p>Navegación por años:</p>';
 $html .= '<ul id="calNavYears">';
 $enlaceAnterior2 = gmmktime(0,0,0,$mes,1,($year-1));
 $yearAnterior = date('Y',$enlaceAnterior2);
 $enlaceSiguiente2 = gmmktime(0,0,0,$mes,1,($year+1));
 $yearSiguiente = date('Y',$enlaceSiguiente2);
 $html .= '<li class="anterior"><a href="?mes='.$mes.'&ano='.$yearAnterior.'"><span>Año anterior (</span>'.$yearAnterior.'<span>)</span></a></li>';
 $html .= '<li class="siguiente"><a href="?mes='.$mes.'&ano='.$yearSiguiente.'"><span>Año siguiente (</span>'.$yearSiguiente.'<span>)</span></a></li>';
 $html .= '</ul>';
 
 // Se abre la tabla que contiene el calendario
 $html .= '<table>';
 
 // Título mes-año (elemento CAPTION)
 $mesLista = $mes-1;
 $html .= '<caption>'.$meses[$mesLista].'<span> de</span> '.$year.'</caption>';
 
 // Se definen anchuras en elementos COL
 $cl=0; $anchoCol=100/7; while ($cl<7) {$html .= '<col width="'.$anchoCol.'%" />'; $cl++;}
 
 // Fila de los días de la semana (elemento THEAD)
 $html .= '<thead><tr>';$d=0;
 while ($d<7) {$html .= '<th scope="col" abbr="'.$dias[$d].'">'.$diasAbbr[$d].'</th>';$d++;}
 $html .= '</tr></thead>';
 
 // Se generan los días nulos (días del mes anterior o posterior) iniciales, el TBODY y su primer TR
 $html .= '<tbody>';
 if ($diasNulos>0) {$html .= '<tr>';} // Se abre el TR solo si hay días nulos
 if ($diasNulos>0 and $mostrarDiasNulos==0) {$html .= '<td class="nulo" colspan="'.$diasNulos.'"></td>';} // Se hace un TD en blanco con el ancho según los día nulos que haya
 if ($mostrarDiasNulos==1) { // Generación de los TD con días nulos si está activado que se muestren
  $dni=$diasNulos;$i=0;
  while ($i<$diasNulos) {
   $enSegundosNulo = gmmktime(0,0,0,$mes,(1-$dni),$year);
   $dmNulo = date('j',$enSegundosNulo);
   $idFechaNulo = 'cal-'.date('Y-m-d',$enSegundosNulo);
   $html .= '<td id="'.$idFechaNulo.'" class="diaNulo"><span class="dia"><span class="enlace">'.$dmNulo.'</span></span></td>';
   $dni--;
   $i++;
  }
 }
 
 
 
 // Se generan los TD con los días del mes
 $dm=1;$x=0;$ds=$diasNulos+1;
 while ($dm<=$diasEnMes) {
  if(($x+$diasNulos)%7==0 and $x!=0) {$html .= '</tr>';} // Se evita el cierre del TR si no hay días nulos iniciales
  if(($x+$diasNulos)%7==0) {$html .= '<tr>';$ds=1;}
  $enSegundosCalendario = gmmktime(0,0,0,$mes,$dm,$year); // Fecha del día generado en segundos
  $enSegundosActual = gmmktime(0,0,0,date('n'),date('j'),date('Y')); // Fecha actual en segundos
  $enSegundosSeleccionada = gmmktime(0,0,0,$_GET['mes'],$_GET['dia'],$_GET['ano']); // Fecha seleccionada, en segundos
  $idFecha = 'cal-'.date('Y-m-d',$enSegundosCalendario);
  
  // Se generan los parámetros de la URL para el enlace del día
  $link_dia = date('j',$enSegundosCalendario);
  $link_mes = date('n',$enSegundosCalendario);
  $link_year = date('Y',$enSegundosCalendario);
  
  // Clases y etiquetado general para los días, para día actual y para día seleccionado
  $claseActual='';$tagDia='span';
  if ($enSegundosCalendario==$enSegundosActual) {$claseActual=' fechaHoy';$tagDia='strong';}
  if ($enSegundosCalendario==$enSegundosSeleccionada and isset($_GET['dia'])) {$claseActual=' fechaSeleccionada';$tagDia='em';}
  if ($enSegundosCalendario==$enSegundosActual and $enSegundosCalendario==$enSegundosSeleccionada and isset($_GET['dia'])) {$claseActual=' fechaHoy fechaSeleccionada';$tagDia='strong';}
  
  // Desactivación de los días del fin de semana
  if (($ds<6 and $finDeSemana==0) or $finDeSemana!=0) { // Si el fin de semana está activado, o el día es de lunes a viernes
   $tagEnlace='a';
   $atribEnlace='href="?dia='.$link_dia.'&mes='.$link_mes.'&ano='.$link_year.'"';
  } if ($ds>5 and $finDeSemana==0) { // Si el fin de semana está desactivado y el día es sábado o domingo
   $tagEnlace='span';
   $atribEnlace='';
   $paramFinde='0';
  }
  
  // Con las variables ya definidas, se crea el HTML del TD
  $html .= '<td id="'.$idFecha.'" class="'.calendarioClaseDia($ds).$claseActual.'"><'.$tagDia.' class="dia"><'.$tagEnlace.' class="enlace" '.$atribEnlace.'>'.$dm.'</'.$tagEnlace.'></'.$tagDia.'></td>';
  
  $dm++;$x++;$ds++;
 }
 
 // Se generan los días nulos finales
 $diasNulosFinales = 0;
 while((($diasEnMes+$diasNulos)%7)!=0){$diasEnMes++;$diasNulosFinales++;}
 if ($diasNulosFinales>0 and $mostrarDiasNulos==0) {$html .= '<td class="nulo" colspan="'.$diasNulosFinales.'"></td>';} // Se hace un TD en blanco con el ancho según los día nulos que haya (si no se activa mostrar los días nulos)
 if ($mostrarDiasNulos==1) { // Generación de días nulos (si se activa mostrar los días nulos)
  $dnf=0;
  while ($dnf<$diasNulosFinales) {
   $enSegundosNulo = gmmktime(0,0,0,($mes+1),($dnf+1),$year);
   $dmNulo = date('j',$enSegundosNulo);
   $idFechaNulo = 'cal-'.date('Y-m-d',$enSegundosNulo);
   $html .= '<td id="'.$idFechaNulo.'" class="diaNulo"><span class="dia"><span class="enlace">'.$dmNulo.'</span></span></td>';
   $dnf++;
  }
 }
 
 // Se cierra el último TR y el TBODY
 $html .= '</tr></tbody>';
 
 // Se cierra la tabla
 $html .= '</table>';
 
 // Se cierran la capa de la tabla y la capa contenedora
 $html .= '</div>';
 $html .= '</div>';
 
 // Se devuelve la variable que contiene el HTML del calendario
 return $html;
}

function calendarioClaseDia ($dia) {
 switch ($dia) {
  case 1: $clase = 'lunes semana'; break;
  case 2: $clase = 'martes semana'; break;
  case 3: $clase = 'miercoles semana'; break;
  case 4: $clase = 'jueves semana'; break;
  case 5: $clase = 'viernes semana'; break;
  case 6: $clase = 'sabado finDeSemana'; break;
  case 7: $clase = 'domingo finDeSemana'; break;
 }
 return $clase;
}

Actualizaciones

Actualizado 2008-12-03: Se añade la posibilidad de desactivar los fines de semana.

Actualizado 2008-12-04: Se añade la posibilidad de desactivar o activar los días de la primera semana que son del mes anterior y los de la última que son del mes siguiente (denominados como días nulos). Se explican los parámetros a introducir al llamar a la función.

Actualizado 2008-12-05: Mejoras de accesibilidad.

Actualizado 2009-02-01: Corregido el fragmento de código expuesto en la página.

Licencia

A diferencia de otros contenidos la licencia para este artículo y el ejemplo adjunto es Reconocimiento-Compartir bajo la misma licencia 3.0 España.

Datos del artículo:

HTML: el atributo scope

Fecha de publicación: 2007/07/31

El atributo scope se utiliza para vincular la información contenida en las diferentes celdas de una tabla.

Este atributo especifica el conjunto de celdas cuya información se refiere a la celda que contiene este atributo.

Supone una alternativa simple al atributo headers.

El atributo scope puede tomar uno (solamente uno) de los siguientes valores:

  • row. La celda se refiere al resto de celdas que componen su fila.
  • col. La celda se refiere al resto de celdas que componen su columna.
  • rowgroup. La celda se refiere al las celdas que componen su grupo de filas.
  • colgroup. La celda se refiere al las celdas que componen su grupo de columnas.

Saber más sobre el atributo scope.

Datos del artículo:

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:

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:

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:

Etiquetas XHMTL para revisión de texto

Fecha de publicación: 2007/01/23

En el momento en el que se hacen modificaciones a un texto XHMTL y se quiere dejar constancia de ello (que se note al leerlo) hay dos etiquetas que sirven de mucha ayuda: ins y del

Con la etiqueta del se tacha el texto que se haya eliminado: Ejemplo de texto tachado.

<del>Ejemplo de texto tachado</del>

Con la etiqueta ins se subraya el texto que se haya eliminado: Ejemplo de texto añadido.

<del>Ejemplo de texto añadido</del>

Saber más:

Datos del artículo:

XHTML: Abreviaturas y acrónimos

Fecha de publicación: 2007/01/16

En primer lugar hay que distinguir entre abreviatura y acrónimo:

  • En la abreviatura no se lee la palabra que se crea con la forma abreviada, sino que se traduce su significado.
  • En el acrónimo se lee la palabra que constituye la forma abreviada tal cual se ha escrito.

Un ejemplo de abreviatura:

<abbr title="izquierda">izqda.</abbr>

Y un ejemplo de acrónimo:

<acronym title="Centro Nacional de Inteligencia">CNI</abbr>

Ambas opciones tienen en común el uso del atributo title para señalar la forma completa de la abreviatura o del acrónimo, aunque cada una utiliza una etiqueta distinta, como se ha podido ver en los ejemplos:

  • abbr para la abreviatura.
  • acronym para el acrónimo.

Referencias

Datos del artículo:

WYMeditor: Editor XHTML WYSIWYM

Fecha de publicación: 2006/12/14

WYMeditor es un editor XHTML que se ejecuta en navegador (compatible con Internet Explorer y Firefox), pero en lugar de ser el habitual WYSIWYG (What You See Is What You Get) es WYSIWYM (What You See Is What You Mean).

En este editor lo que se ve es el resultado semántico (párrafos, encabezamientos, citas, etc.), y además permite agregarle estilos (mediante el atributo class).

Saber más y probar WYMeditor.

Datos del artículo:

Información del sitio