Outbook

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

Inicio que contiene a

Datos de búsqueda

Etiqueta ‘HTML’

Accesibilidad: ordenación de columnas en tablas

Fecha de publicación: 2010/02/12

En las tablas de datos hechas con (X)HTML no es infrecuente encontrarse con que el encabezado de algunas columnas es un enlace que sirve para ordenar los datos en orden ascendente o descendente. Habitualmente se utiliza una imagen para indicar la ordenación que se ha seleccionado, pero, ¿es accesible?

Leer el resto del artículo

Datos del artículo:

Cumpliendo el punto 2.4.4 de WCAG 2.0: Propósito del enlace

Fecha de publicación: 2009/12/27

Punto 2.4.4. de WCAG 2.0:

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

Leer el resto del artículo

Datos del artículo:

PHP: Clase para generación de formularios accesibles

Fecha de publicación: 2009/12/08

Recientemente estuve creando una clase para generar formularios sencillos en PHP mediante JSON.

Le faltan bastantes detalles, pero se puede utilizar en la generación de formularios que no tengan mucha complejidad.

Tipos de campo:

  • Cumplen requisitos de accesibilidad para WCAG 1.0 AA
  • Definición de los atributos del elemento FORM.
  • Estructuración mediante elementos FIELDSET.
  • Campo de tipo texto (<input type="text" />).
  • Campo de tipo password (<input type="password" />).
  • Campo de tipo checkbox (<input type="checkbox" />).
  • Campo de tipo radio (<input type="radio" />).
  • Campo de tipo file (<input type="file" />).
  • Campo de tipo select (<select>[...]</select>),
  • Campo de tipo textarea (<textarea>[...]</textarea>),

Leer el resto del artículo

Datos del artículo:

Que hacer cuando el elemento OBJECT tapa una capa posicionada

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.

Datos del artículo:

Javascript: Slideshow con Jquery

Fecha de publicación: 2009/08/13

Actualizado 2009-10-02: Se le añade botón de pausa (vaya fallo el no haberlo puesto anteriormente) y comentarios útiles sobre el funcionamiento de cada parte del código.

He creado un slideshow sencillo con Jquery (probado en versión 1.3.2):

jQuery.noConflict(); // Así podemos convivir con otras librerías JS como Prototype o Motools (y las que utilicen $) sin ningún conflicto

jQuery(document).ready(function(){
 var slides1 = new Slides();
  slides1.inicia();
  
 /*
 // Ejemplo de uso
 var slides1 = new Slides();
 slides1.inicia();
 slides1.caja = '#slides'; // id del contenedor de los destacados
 slides1.numero = 1; // Número de destacados que se muestran
 slides1.tiempo = 2.5; // Segundos entre cambio de destacado
 slides1.velocidadMostrar = 'fast';
 */
});

function Slides () {
 this.caja = '#slides'; // id del contenedor de los destacados
 this.slide = '.slide'; // destacado
 this.numero = 1; // Número de destacados que se muestran
 this.tiempo = 2.5; // Segundos entre cambio de destacado
 this.milisegundos = this.tiempo*1000; // No editar
 this.velocidadMostrar = 'fast';
 
 this.inicia = function () {
  
  numDestacados = jQuery(this.caja+' '+this.slide).length; // Número de destacados
  i=this.numero;
  k=0;
  
  // Se activa la primera tanda de destacados
  while (k<this.numero) {
   jQuery(this.caja+' '+this.slide).eq(k).addClass('activo');
   k++;
  }
  while (i<numDestacados) {
   jQuery(this.caja+' '+this.slide).eq(i).hide();
   i++;
  }
  
  // Se da ID a los destacados
  j=0;
  while (j<numDestacados) {
   jQuery(this.caja+' '+this.slide).eq(j).attr('id','slide-'+(j+1));
   j++;
  }
  
  this.paginacion(); // Se generan los controles de pausa y paginación
  
  // Se inicia el slideshow
  var that = this;
  this.intervalo = setInterval(function(){that.cambiar();}, this.milisegundos);
  
  // Al clicar una página se detiene el proceso y se va a la página
  jQuery('#paginadorSlide li a').click(function () {
   clearInterval(that.intervalo);
   that.controlPausar();
   that.irPagina(parseInt(jQuery(this).parent().attr('id').split('-')[1]));
   jQuery('#paginadorSlide li').removeClass('activo');
   jQuery(this).parent().addClass('activo');
   return false;
  });
  
  // Al clicar el botón de pausar/continuar se alterna detener/continuar el proceso
  jQuery('#pausarContinuar a').eq(0).click(function () {
   if (jQuery(this).hasClass('moviendo')) {
    that.controlPausar();
   } else {
    that.intervalo = setInterval(function(){that.cambiar();}, that.milisegundos);
    that.controlContinuar();
   }
   return false;
  });
  
 }
 
 // Modificar botón de pausar/reanudar
 this.controlPausar = function () {
  clearInterval(this.intervalo);
  jQuery('#pausarContinuar a').eq(0).html('Reanudar');
  jQuery('#pausarContinuar a').eq(0).removeClass('moviendo');
 }
 this.controlContinuar = function () {
  jQuery('#pausarContinuar a').eq(0).html('Pausar');
  jQuery('#pausarContinuar a').eq(0).addClass('moviendo');
 }
 
 // Cambiar de slide
 this.irPagina = function (pagina) {
  elUltimo = pagina*this.numero;
  el = (elUltimo)-this.numero;
  jQuery(this.caja+' '+this.slide).removeClass('activo');
  while (el<elUltimo) {
   jQuery(this.caja+' '+this.slide).eq(el).addClass('activo');
   jQuery(this.caja+' '+this.slide).eq(el).addClass('activo activoPausa');
   el++;
  }
  
  jQuery(this.caja+' '+this.slide+':not(.activo)').hide();
  jQuery(this.caja+' '+this.slide+'.activo').fadeIn(this.velocidadMostrar);
  
 }
 
 // Cambio automático de slide
 this.cambiar = function () {
  activos = jQuery(this.caja+' '+this.slide+'.activo').length-1;
  ultimoActivo = jQuery(this.caja+' '+this.slide+'.activo').eq(activos);
  numeroUltimoActivo = parseInt(jQuery(this.caja+' '+this.slide+'.activo').eq(activos).attr('id').split('-')[1])+this.numero;
  proximaPagina = (numeroUltimoActivo/this.numero)-1;
  numDestacados = jQuery(this.caja+' '+this.slide).length;
  
  if (numeroUltimoActivo>numDestacados) {proximoActivo=jQuery(this.caja+' '+this.slide).eq(0);proximaPagina=0;} else {proximoActivo = ultimoActivo.next(this.slide);}
  jQuery(this.caja+' '+this.slide+'.activo').removeClass('activo');
  i=0;
  while (i<this.numero) {
   proximoActivo.addClass('activo');
   proximoActivo = proximoActivo.next();
   i++;
  }
  jQuery(this.caja+' '+this.slide+':not(.activo)').hide();
  jQuery('#paginadorSlide li').removeClass('activo');
  jQuery('#paginadorSlide li').eq(proximaPagina).addClass('activo');
  jQuery(this.caja+' '+this.slide+'.activo').fadeIn(this.velocidadMostrar);
 }
 
 
 this.paginacion = function () {
  numPaginas = Math.ceil((jQuery(this.caja+' '+this.slide).length)/this.numero);
  jQuery(this.caja).after('<div id="controlesSlide"><ul class="paginadorSlide" id="paginadorSlide"></ul></div>'); // Se crea el contenedor de paginación
  jQuery('#paginadorSlide').before('<p id="pausarContinuar"><a href="#" class="moviendo">Pausar</a></p>'); // Se crea el párrafo para el botón de detener/continuar en su estado predeterminado (Pausar)
  
  i=0;j=1;
  while (i<numPaginas) {
   jQuery('#paginadorSlide').append('<li id="paginaSlide-'+j+'"><a href="#">'+j+'</a></li>');
   i++; j++;
  }
  jQuery('#paginadorSlide li').eq(0).addClass('activo');
 }
 
}

Para iniciarlo con los id y clases predeterminados:

var slides1 = new Slides();
 slides1.inicia();

En ese caso el HTML podría ser:

<div id="slides">
 <div class="slide">
  [Contenido del slide]
 </div>
 <div class="slide">
  [Contenido del slide]
 </div>
</div>

Un contenedor que lleve el id slide y elementos dentro del mismo con la clase slides.

Ver demostración o descargar el ejemplo (archivo ZIP, 348KB).

Datos del artículo:

Enmascaramiento de contraseñas en los formularios

Fecha de publicación: 2009/06/25

Actualizado 2009-06-30.

Según Jakob Nielsen Ocultar los caracteres de un campo de contraseña (mediante <input type="password" id="ejemplo" name="ejemplo" />) puede ocasionar algunos problemas. Considero que se pasa un poco, de modo que expongo los que creo que son más importantes:

  • El usuario no ve lo que está escribiendo, lo que facilita que se equivoque.
  • Utilización de contraseñas más sencillas a la vez que inseguras o uso del copiar-pegar para introducir la contraseña.
  • En dispositivos móviles, en los que la escritura es más incómoda e imprecisa el usuario puede desesperarse, pensando si habrá tecleado bien.

He de aclarar que en bastantes dispositivos móviles en los campos de contraseña el caracter introducido está visible durante un breve espacio de tiempo, pero puede que no sea suficiente.

Nielsen también menciona que ocultar los caracteres de contraseña puede hacer que los usuarios se desanimen a entrar en un sitio web. Esto me parece un poco exagerado.

Puede que sea interesante dejar visibles los caracteres de los campos de contraseña, pero, si nos decantamos por esa opción habrá usuarios que no se sientan seguros, ya que la contraseña será visible por otras personas (imaginemos punto de acceso a Internet en un lugar público). Aquí Nielsen sugiere el uso de un checkbox para activar o desactivar la ocultación de los caracteres.

Ejemplo en Winzip

Capturas de la pantalla de encriptación de WinZip 12, en las que se puede apreciar la casilla que alterna la contraseña visible u oculta:

Ventana de encriptación de WinZip 12 con contraseña oculta

Ventana de encriptación de WinZip 12 con contraseña visible

Enlaces relacionados

Datos del artículo:

Decálogo de maquetación web

Fecha de publicación: 2009/05/11

Diez consejos útiles que mejorarán ostensiblemente la accesibilidad de un sitio web:

  1. Utilización de encabezados (H1H6) para estructurar el documento y utilizar adecuadamente los párrafos y listas. En los encabezados no se saltan niveles. Cuando una lista tiene un solo elemento no es una lista: es un párrafo.
  2. Los textos de los enlaces habrán de ser descriptivos de la acción que realizan, y deberán avisar si se abren en ventana nueva.
  3. Maquetar con capas (elementos DIV), en lugar de con tablas.
  4. Utilizar Javascript no intrusivo y que su presencia no sea obligatoria: todo el contenido y la funcionalidad del sitio deberá estar disponible sin necesidad de Javascript. No utilizar atributos HTML (onclick, onmouseover, etc.) para eventos de Javascript.
  5. Utilizar colores de fondo y de texto que hagan un buen contraste.
  6. No utilizar imágenes con texto, salvo en logotipos. Utilizar fuentes de sistema para evitar ese mal uso de las imágenes.
  7. Toda imagen que tenga contenido informativo deberá llevar texto alternativo (atributo alt). El atributo irá vacío en caso contrario. Si es una imagen que se repite en diversas páginas, no es informativa, y no es publicable, debería ir como fondo mediante CSS.
  8. Estructurar bien los formularios: grupos de campos dentro de elementos FIELDSET con sus correspondientes LEGEND, elementos INPUT, SELECT y TEXTAREA contenidos dentro del elemento LABEL (asociación implícita), y atributo for en el LABEL y atributo id en el elemento de campo con el mismo valor (asociación explícita).
  9. Uso del elemento OBJECT para añadir contenido en Flash o en Java, incluyendo el contenido alternativo correspondiente para aquellos usuarios que no dispongan del plugin.
  10. Separación de contenido (HTML), presentación (CSS) y comportamiento (Javascript). En el documento HTML solo se mete HTML, y no se utilizan atributos para controlar la presentación. No se mete código Javascript en el elemento SCRIPT (que solo ha de incluirse dentro del elemento HEAD y nunca fuera de él), ni código CSS en el elemento STYLE (de hecho a la CSS se la llama con el elemento LINK).

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:

PHP: Crear una paginación de resultados para una consulta MySQL

Fecha de publicación: 2008/11/30

Actualización 2010-03-10: Código de ejemplo corregido (faltaban algunos caracteres).

No es necesario copiar todos estos fragmentos de código: al final del artículo se muestra completo.

El primer paso es definir cuantos registros se quieren mostrar en cada página, en este caso se deja en 10:

// Registros a mostrar en cada página
$regVistos = 10;

Se define una consulta que recupere todos los registros que se vayan a mostrar, con los parámetros mínimos imprescindibles:

// Consulta que devuelve todos los registros
$lista0 = mysql_query(" SELECT * FROM registros");

Se cuentan los registros recuperados por la consulta MySQL:

// Se cuentan los registros devueltos por la consulta SQL $lista0
$totalSql = mysql_num_rows($lista0);

Con los registros que salen divididos por los que se quiere que se vean por cada página, se obtienen las páginas en las que se dividirá el listado de resultados. Se redondea siempre hacia arriba con ceil, ya que si, por ejemplo, salen 3,4 páginas, ese 0,4 que queda suelto, debe ocupar una página entera:

// Páginas que van a aparecer, redondeando los decimales siempre hacia arriba
$pagTotal = ceil($totalSql/$regVistos);

Son también necesarios los datos de la página actual, la anterior y la siguiente. En este ejemplo la página actual se recoge del parámetro de la URL pag. Si ese parámetro no está definido, se predetermina en 1. Las páginas anterior y siguiente se obtienen restando o sumando 1 según sea necesario:

// Se definen la página actual (desde el parámetro 'pag' de la URL) y las páginas anterior y siguiente
if (!isset($_GET['pag'])) {$pagActual=1;} else {$pagActual=$_GET['pag'];}
$pagAnterior = $pagActual-1;
$pagSiguiente = $pagActual+1;

Es el momento de realizar la consulta MySQL para mostrar los registros. En este caso la consulta devolverá los mismos registros que en la anterior, pero se le ha añadido ordenación descendente (es opcional) y el parámetro LIMIT. El parámetro LIMIT contiene dos números separados por comas: el primero es que el registro por el que se empieza el listado (la página actual menos 1 por los registros a mostrar en cada página), y el segundo el número de registros a mostrar. Ejemplo:

// Consulta SQL con la que se sacará el listado de registros
$lista1 = mysql_query(" SELECT * FROM registros ORDER BY campo DESC LIMIT ".(($pagActual-1)*$regVistos).",".$regVistos."");
// Bucle para generar el listado de registros
while($fila = mysql_fetch_assoc($lista1)) {
 // Aquí irá el código PHP que escriba los registros
}

Finalmente se genera el listado de páginas mediante una lista desordenada (UL).

El primer elemento de la lista será el enlace a la página anterior, mostrándose con la condición de que la página actual no sea la primera.

Se mostrarán los números de página mediante un bucle, destacando la página actual mediante un elemento strong.

Y el último elemento de la lista será el enlace a la página siguiente.

Ejemplo:

// Se inicia el listado de páginas
echo '<ul>';

// Si la página actual no es la primera, se muestra el enlace a la página anterior
if ($pagAnterior>0) {echo '<li class="anterior"><a href="lista.php?pag='.$pagAnterior.'"><span class="oculto">Página </span>Anterior</a></li>';}

// Se saca el listado de páginas mediante un bucle
$pgIntervalo = 3; // Páginas que aparecen antes y después de la actual
$pgMaximo = ($pgIntervalo*2)+1; // Máximo de páginas en el listado
$pg=$pagActual-$pgIntervalo;$i=0;
while ($i<$pgMaximo) {
 if ($pg==$pagActual) {$strong=array('<strong>','</strong>');} else {$strong=array('','');}
 if ($pg>0 and $pg<=$pagTotal) {
  echo '<li>'.$strong[0].'<a href="lista.php?p='.$_GET['p'].'&amp;pag='.$pg.'"><span class="oculto">Página </span>'.$pg.'</a>'.$strong[1].'</li>';
  $i++;
 }
 if ($pg>$pagTotal) {$i=$pgMaximo;} // Si la página que se va a mostrar se pasa de la cantidad de páginas definidas en $pagTotal se para la generación de elementos de lista
 $pg++;
}

// Si la página actual no es la última, se muestra el enlace a la página siguiente
if ($pagSiguiente<=$pagTotal) {echo '<li class="siguiente"><a href="lista.php?p='.$_GET['p'].'&amp;pag='.$pagSiguiente.'"><span class="oculto">Página </span>Siguiente</a></li>';}

// Se finaliza el listado de páginas
echo '</ul>';

Y de esta forma se obtiene una paginación en PHP.

Ejemplo completo

<?

// Registros a mostrar en cada página
$regVistos = 10;

// Consulta que devuelve todos los registros
$lista0 = mysql_query(" SELECT * FROM registros");

// Se cuentan los registros devueltos por la consulta SQL $lista0
$totalSql = mysql_num_rows($lista0);

// Páginas que van a aparecer, redondeando los decimales siempre hacia arriba
$pagTotal = ceil($totalSql/$regVistos);

// Se definen la página actual (desde el parámetro 'pag' de la URL) y las páginas anterior y siguiente
if (!isset($_GET['pag'])) {$pagActual=1;} else {$pagActual=$_GET['pag'];}
$pagAnterior = $pagActual-1;
$pagSiguiente = $pagActual+1;

// Consulta SQL con la que se sacará el listado de registros
$lista1 = mysql_query(" SELECT * FROM registros ORDER BY campo DESC LIMIT ".(($pagActual-1)*$regVistos).",".$regVistos."");
// Bucle para generar el listado de registros
while($fila = mysql_fetch_assoc($lista1)) {
 // Aquí irá el código PHP que escriba los registros
}

// Se inicia el listado de páginas
echo '<ul>';

// Si la página actual no es la primera, se muestra el enlace a la página anterior
if ($pagAnterior>0) {echo '<li class="anterior"><a href="lista.php?pag='.$pagAnterior.'"><span class="oculto">Página </span>Anterior</a></li>';}

// Se saca el listado de páginas mediante un bucle
$pgIntervalo = 3; // Páginas que aparecen antes y después de la actual
$pgMaximo = ($pgIntervalo*2)+1; // Máximo de páginas en el listado
$pg=$pagActual-$pgIntervalo;$i=0;
while ($i<$pgMaximo) {
 if ($pg==$pagActual) {$strong=array('<strong>','</strong>');} else {$strong=array('','');}
 if ($pg>0 and $pg<=$pagTotal) {
  echo '<li>'.$strong[0].'<a href="lista.php?p='.$_GET['p'].'&amp;pag='.$pg.'"><span class="oculto">Página </span>'.$pg.'</a>'.$strong[1].'</li>';
  $i++;
 }
 if ($pg>$pagTotal) {$i=$pgMaximo;} // Si la página que se va a mostrar se pasa de la cantidad de páginas definidas en $pagTotal se para la generación de elementos de lista
 $pg++;
}

// Si la página actual no es la última, se muestra el enlace a la página siguiente
if ($pagSiguiente<=$pagTotal) {echo '<li class="siguiente"><a href="lista.php?p='.$_GET['p'].'&amp;pag='.$pagSiguiente.'"><span class="oculto">Página </span>Siguiente</a></li>';}

// Se finaliza el listado de páginas
echo '</ul>';
?>

Datos del artículo:

Personal dedicado a la gestión de contenidos: ¿Qué deben saber?

Fecha de publicación: 2008/10/20

Un aspecto que debe cuidar una empresa cuando dispone de un sitio web es el del mantenimiento y creación de contenidos. Se suelen utilizar gestores de contenido, lo que facilita dicha tarea.

Y es ahí donde pueden surgir problemas. ¿Quién se dedica a introducir y modificar los contenidos? Hay ocasiones, incluso en compañías enormes que son la cabeza visible de su sector, que esa tarea se encarga a personas sin el más mínimo conocimiento de HTML.

Esto ocasiona que a veces un portal que se ha elaborado respetando estándares y accesibilidad acabe perdiendo dichas características, de modo que la inversión extra realizada para ello resulta un desperdicio.

Las personas que se dediquen a realizar estas funciones no tienen por que saber de maquetación HTML-CSS, pero si deben tener unos conocimientos básico de HTML que no es muy complicado de aprender:

  • Concepto de etiqueta HTML.
  • Etiquetas y atributos básicos:
    • DIV, SPAN.
    • H1-H6, P, BR, STRONG, EM.
    • BR.
    • DL, UL, OL, DL: las etiquetas para listados.
    • TABLE, CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH, TD etiquetas para tablas. Debe también saber hacer uso del atributo scope.
    • IMG: debe conocer al menos el atributo alt.
    • Los atributos id y class.

Además deben saber en que momento utilizar cada etiqueta y como hacer que el contenido que están generando sea mínimamente accesible.

Datos del artículo:

Información del sitio