Outbook

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

Inicio que contiene a 2008

Datos de búsqueda

Año 2008

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:

HTML y Accesibilidad: el atributo longdesc en imágenes

Fecha de publicación: 2008/12/15

Actualizado .

Cuando se utilizan imágenes en una web la práctica habitual es darles un texto alternativo mediante el atributo alt, o dejar vacío dicho atributo en el caso de que la función de la imagen sea meramente decorativa.

Pero nos podemos encontrar con el caso de tener una imagen a la que haya que asociarle un texto alternativo, pero dicho texto sea excesivamente largo. Para esas ocasiones está el atributo longdesc.

Ejemplo de imagen con textos largosEjemplo de imagenes con texto largo

El atributo longdesc ha de ser siempre una URL que lleve a una descripción de la imagen, en la misma o en otra página:

longdesc = uri [CT]
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map’s contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent’s mechanism in the user interface for accessing the “longdesc” resource of the former must be different than the mechanism for accessing the href resource of the latter.

Se puede dar una URL externa o, como en el ejemplo expuesto más adelante, un marcador de página. En ese caso bastaría con dar un atributo id que haga de marcador al párrafo con la descripción. Ejemplo de como podría quedar el código HTML

<p><img src="imagen1.jpg" alt="Promoción" longdesc="#descripcion1" /></p>
<p id="descripcion1">Descripción de la primera imagen.</p>

<p><img src="imagen2.jpg" alt="Promoción" longdesc="#descripcion2" /></p>
<p id="descripcion2">Descripción de la segunda imagen.</p>

Lectores de pantalla

Se supone que el longdesc es para lectores de pantalla, pero resulta que los hay que no dejan elegir al usuario si quieren ir o no a la descripción, y les llevan directamente.

Una solución podría ser un enlace oculto (pero no mediante display:none;, que si no los lectores de pantalla no lo pillan) que llevase a la URL de la descripción.

Si la imagen va dentro de un enlace…

En este caso suele ser habitual que el enlace lleve a otra página cuyo contenido coincide con el de la imagen (o lo amplía). Esto haría que añadir un atributo longdesc con la misma URL que el enlace fuese redundante, por lo que no sería necesaria su inclusión.

Si se opta por esta vía el atributo alt de la imagen deberá describir correctamente el propósito del enlace.

Enlaces relacionados

Datos del artículo:

Maquetador Web versus Arquitecto de semántica y cognitividad de interfaces web

Fecha de publicación: 2008/12/02

Maquetador web

Individuo/a que se dedica a transformar diseños de sitios web a HTML. Para ello hará lo que sea necesario:

  • Mezclar presentación y contenido
  • Maquetación con tablas (y si se pueden anidar unas dentro de otras, mejor). Y si las tablas son para datos tabulares no espere encontrar elementos TH, THEAD y otro marcado semántico para tablas.
  • Utilizar elementos HTML desaconsejados (FONT, B, U, etc.)
  • Javascript intrusivo, desde atributos onclick, onmouseover, a enlaces que solo funcionan con Javascript activado.
  • Accesibilidad, ¿para qué? ¿qué es?
  • Semántica del marcado HTML, ¿para qué? ¿qué es?
  • Recomendaciones de la W3C, ¿para qué? ¿qué son?
  • En muchas ocasiones no ve más allá de Internet Explorer
  • Dispositivos móviles, ¿para qué? ¿qué son?
  • Etc.

Arquitecto de semántica y cognitividad de interfaces web

Profesional que se dedica a transformar diseños para sitios web a (X)HTML+CSS con Javascript no intrusivo.

Características:

  • Las tablas no se usan para maquetar: solo se usan para presentación de datos tabulares.
  • Genera un marcado HTML todo lo semántico que le sea posible: secuencias de encabezados, listados, etc. Se usa cada elemento en el cometido para el que fue ideado. De esta forma la página se entiende aunque se prescinda de CSS y Javascript.
  • Sigue escrupulosamente las recomendaciones de la W3C
  • Ve a Internet Explorer (sobre todo al 6) como su peor enemigo, pero aun así su actitud es noble y le tiende la mano en cada maquetación realizada.
  • Genera sitios web accesibles, de modo que personas con discapacidades o que accedan desde dispositivos móviles puedan disfrutar de los contenidos con las menores limitaciones posibles.
  • Separación impecable de la presentación y el contenido.
  • El Javascript no es intrusivo, y sus páginas no pierden la funcionalidad a pesar de que Javascript esté desactivado.

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: Partir una variable en varias líneas

Fecha de publicación: 2008/12/01

En ocasiones al escribir el contenido de una variable PHP se emplean líneas distintas que pueden no ser consecutivas, por ejemplo:

$html = $html.'<p>Primer elemento</p>';
$html = $html.'<p>Segundo elemento</p>';
$html = $html.'<p>Tercer elemento</p>';

Cuando sería más correcto:

$html .= '<p>Primer elemento</p>';
$html .= '<p>Segundo elemento</p>';
$html .= '<p>Tercer elemento</p>';

En el segundo ejemplo se ha sustituido la variable después del símbolo "igual" por un punto justo antes de dicho símbolo.

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:

PHP: redondeo de números decimales hacia abajo (floor)

Fecha de publicación: 2008/11/30

La función PHP floor permite eliminar la parte decimal de un número redondeándolo hacia abajo. Por ejemplo, 11.22 se redondearía a 11, 11.9999 se redondearía a 11:

echo floor(11.22); // 11
echo floor(11.9999); // 11

Para realizar el redondeo hacia arriba se usa ceil.

Saber más sobre floor.

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:

HTC Diamond: Características

Fecha de publicación: 2008/10/18

Listado de características del HTC Diamond:

  • Sistema operativo Windows Mobile 6.1.
  • Procesador de 512Mhz, 192MB de RAM y 4GB de almacenamiento. Tiene la pega de no tener ranura para tarjetas de memoria.
  • Solo un conector para carga, movimiento de datos y auriculares: ExtUSB. Para poner unos auriculares normaleshay que utilizar un adaptador. Es compatible con cables Mini-USB.
  • Pantalla táctil: puede utilizarse con o sin puntero, ya que los menús se pueden manejar bien directamente con los dedos. En cuanto al teclado (el que aparece en pantalla, evidentemente), trae uno de HTC más adecuado para los dedos que el predeterminado de Windows Mobile, para el que hay que usar el puntero.
  • Acelerómetro que detecta la posición del móvil. Sirve para que determinadas aplicaciones gieren al cambiar la orientación de la pantalla. Existe una aplicación llamada GSEN que permite el cambio de orientación de pantalla en todas las aplicaciones que se quiera.
  • Conectividad: Wi-Fi, GPRS/WCDMA/HSDPA (HSDPA hasta 7,2Mb), Bluetooth y ActiveSync (que utiliza la conexión del PC al que se le enchufe). Además se puede usar como modem en un ordenador, aunque la forma de realizar la conexión puede resultar un poco engorrosa, ya que hay que abrir una aplicación de conexión compartida en el móvil.
  • Navegación web: Internet Explorer y Opera 9.5. El Opera 9.5 es una maravilla, tiene pestañas y detecta la orientación de pantalla. Parec que el Internet Explorer va a ser actualizado.
  • Windows Media Player: escaso de formatos (le faltan OGG Vorbis, DivX, XVid). Se puede utilizar en su lugar el Core Player, que está en la sección de descargas de HTC Mania (requiere registro).
  • GPS: funciona bastante bien, aunque algunas veces parece que le cuesta pillar los satélites. Trae una aplicación Google Maps que puede usarse conjuntamente con el GPS, con la desventaja de que tiene que descargar los mapas, lo que supone un desembolso de dinero si no se tiene una buena tarifa de datos. Yo le he instalado el TomTom 7 y va muy bien: se puede encontrar en Vagos, y hay que fijarse bien que sea la versión para resolución VGA.
  • Aplicaciones Java, como en cualquier otro móvil.
  • Outlook para Windows Mobile: muy fácil de configurar las cuentas de Gmail.
  • Cámara de 3.2Mpx. Saca bastante bien las fotos, aunque tiene la pega de no tener flash, lo que hace que cuando hay poca luz la calidad se resienta un poco.
  • TouchFlo 3D: reune diversas funciones en unas pestañas en mi opinión bastante útiles:
    • Mensajes SMS
    • Correo electrónico
    • Internet: Acceso directo a Opera y a los favoritos almacenados en dicho navegador.
    • Imagen y vídeo: accesos directos a la camara y vista previa de las fotos y vídeos realizados.
    • Música: reproductor de música muy cómodo. Adolece del mismo problema de formatos que el Windows Media Player.
    • Predicción meteorológica: temperatura y estado climatológico actual y para los próximos cinco días. Solo para grandes ciudades.
    • Configuración: fondo de pantalla, interfaces de comunicación, etc.
    • Listado de accesos directos de aplicaciones configurable.
    • TF3D Config: para configurar algunos aspectos del TF3D.
  • En Linux solo funciona adecuadamente el modo de memoria USB. Para que funcione el ActiveSync hay que seguir un procedimiento muy engorroso.
  • Si se compra libre cuesta una pasta, pero se evitan las pesadas permanencias con operadores de móvil y tener que reflashear para quitar las "mejoras" introducidas por dichos operadores.

Datos del artículo:

PHP: recuperar la URL completa de la página actual

Fecha de publicación: 2008/10/07

Se puede realizar mediante esta sencilla función:

function averiguaUrl() {
 $protocolo = $_SERVER['HTTPS'] == 'on' ? 'https' : 'http'; // Se extrae el protocolo (http o https)
 return $protocolo.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; // Se devuelve la URL completa
}

Visto en PHP Tutorials Examples: Get Full URL.

Datos del artículo:

Información del sitio