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.”
Algunos de los beneficios de la aplicación de este punto serían:
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:
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;
}
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.
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.
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:
Fecha de publicación: 2007/02/10
Se trata de etiquetas para marcar énfasis en las partes importantes de un texto.
strongDe 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;
}
emDa 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 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>
EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM (HTML 4.01 W3C Recommendation)TT, I, B, BIG, SMALL, STRIKE, S, and U elements (HTML 4.01 W3C Recommendation)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>
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.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.
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.
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.
titleEn 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”.
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:
Incluye un listado de búsquedas relacionadas (clusters) que ayudan a afinar los resultados de la búsqueda.
Lexxe se encuentra en fase Alpha.
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:
Fecha de publicación: 2007/01/16
En primer lugar hay que distinguir entre abreviatura y acrónimo:
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.Fecha de publicación: 2007/01/09
Interesante recurso que explica como pasar de una maquetación web basada en tablas a otra basada en CSS (capas). Además explica un poco como conseguir que el código HTML sea semántico, eliminando etiquetas y atributos relacionados con el aspecto estético de la página.
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).