Fecha de publicación: 2010/04/21
En muchas ocasiones las distintas versiones de Internet Explorer interpretan la CSS un poco como quieren. Y es por eso que utilizamos hacks CSS (en inglés), que aunque en muchos casos cumplen con los estándares, de cara al futuro pueden ser un riesgo ¿Y si futuros navegadores los empiezan a interpretar? ¿Y si un navegador deja de necesitar esa regla CSS pero la sigue interpretando?.
Fecha de publicación: 2010/02/16
Habitualmente se utiliza el atributo scope en las tablas para definir la relación de las celdas con las columnas.
Fecha de publicación: 2010/01/09
Resulta muy habitual encontrarse con campos de texto que contienen un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo. El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca.
Este es el estado antes de activar el campo y una vez se desactiva sin haber introducido datos:

Y este es el estado del campo activado antes de haber introducido información:

Para obtener ese efecto es necesario el uso de Javascript, pero con HTML 5 eso se va a terminar.
Fecha de publicación: 2009/12/27
2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A).
El propósito de cada enlace debe ser determinado unicamente por su propio texto. También puede ser determinado por su contexto salvo si resultase ambiguo (esto es mejor evitarlo si resulta posible).
Fecha de publicación: 2009/11/11
Suele pasar que cuando hay capas emergentes y animaciones flash la capa se queda por debajo del Flash.
Basta con añadir esto dentro del elemento OBJECT:
<param name="wmode" value="transparent" />
Un ejemplo completo:
<object type="application/x-shockwave-flash" data="fichero.swf">
<param name="wmode" value="transparent" />
<param name="movie" value="fichero.swf" />
<param name="quality" value="high" />
<p>No dispone del plugin Flash Player, si lo desea puede <a href="http://www.adobe.com/go/getflashplayer">descargar el plugin</a>. [Resto de contenido alternativo].</p>
</object>
Este método tiene una pega: no funciona en sistemas Linux.
Fecha de publicación: 2009/09/18
Las nubes de tags suelen estar conformadas por un grupo de palabras que aparecen en distintos tamaños según la importancia que tengan. Pueden ir en un solo párrafo o bien en elementos de lista.
Para darles los tamaños es necesario darles una clase (no vale el atributo style, ya que supone mezclar presentación y contenido) o utilizar etiquetas EM y STRONG anidadas. En el segundo caso, en cuanto haya unas cuantos niveles de importancia habrá un montón de etiquetas anidadas dentro de otras, y el usuario no podrá distinguir adecuadamente cual tiene mayor importancia salvo por su aspecto visual.
Si la etiqueta más grande es la más importante, ¿por que no ponerla la primera?
En conclusión:
Un ejemplo:
<p>
<strong>Etiquetas<span class="oculto"> (de mayor a menor importancia)</span>:</strong>
<a href="#" class="s5">Etiqueta 1</a>,
<a href="#" class="s4">Etiqueta 2</a>,
<a href="#" class="s3">Etiqueta 3</a>,
<a href="#" class="s2">Etiqueta 4</a>,
<a href="#" class="s1">Etiqueta 5</a>,
<a href="#">Etiqueta 6</a>,
</p>
Enlace relacionado: Marking Up a Tag Cloud (24 Ways).
Fecha de publicación: 2009/01/30
El protocolo WTAI sirve para insertar enlaces en páginas y que al activarlos el dispositivo móvil ofrzca realiza una llamada al número de teléfono especificado en el enlace o guardarlo en la lista de contactos.
El valor del atributo href del enlace tiene el siguiente formato:
wtai://wp/mc;##########
Ejemplo de enlace para realizar llamada:
<a href="wtai://wp/mc;911234567">Llamar al número 91 123 45 67</a>
Ejemplo de guardar en contactos:
<a href="wtai://wp/ap;911234567;Nombre Contacto">Guardar en contactos el número 91 123 45 67</a>
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/10/03
Tengo unos enlaces dentro de elementos de lista, para un menú de navegación.
Esos enlaces se convierten en bloque mediante CSS, con la propiedad display:block; .
En Firefox, Opera e Internet Explorer 7 el enlace funciona correctamente, aunque no se pase el puntero por encima del texto de enlace.
En Internet Explorer 6 hay que pasar el puntero por encima del texto de enlace, en caso contrario el enlace no se activa.
ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;}
ul li a:hover {background-color:#FFCC66;}
Darle una anchura fija al enlace:
ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;width:160px;width:152px;}
ul li a:hover {background-color:#FFCC66;}
Atención: el efecto solo se observará en Internet Explorer 6 y anteriores.
Fecha de publicación: 2007/09/18
Este artículo es una ampliación a CSS Sprites: rollover utilizando una sola imagen.
En el artículo anterior se daban valores negativos para el eje de coordenadas Y en la propiedad CSS background-position. En este caso el valor se puede obtener de la siguiente forma: se resta a la altura total de la imagen la altura del sprite que se quiere ver y la coordenada Y de la propiedad background-position.
Ejemplo: la altura total de una imagen con 2 sprites es de 100px. Cada sprite tiene una altura de 6px, y el sprite que está inicialmente tiene un background-position:0 4px;. Entonces se hará la siguiente resta: 100px-6px-4px=90. La posición del eje Y que habrá que dar será -90px.