aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

JuanPe, mi sensei, me muestra por mail txReadability, una curiosa herramienta que analiza tu página web para estimar el nivel de estudios que requiere una persona para leer tu página. Usando un cálculo basado en el número de silabas y las frases de más de 100 palabras obtenemos el Huerta Reading Ease (HRE).

Huerta Reading Ease = 206.84 - (0.60 * P) - (1.02 * F)
P = Número de sílabas por 100 palabras. 
F = Número de frases por 100 palabras.

El cálculo sobre el texto de tu aplicación arrojará un resultado numérico de 0-100 con el que podremos determinar si nuestra página es fácil o dificil de leer.

Fran de Mas Que Accesibilidad, me avisa de que por fín, despues de un año dandole vueltas al proyecto, Usamos.es ha visto la luz.

Usamos.es es una consultoría de accesibilidad y usabilidad que tiene como meta mejorar las páginas web de instituciones y empresas con el fín de mejorar en acceso a estas y ofrecer un camino más sencillo y eficaz para completar acciones en dichas páginas.

Actualmente los informes automáticos son gratuitos pero este no va a ser el único aliciente de esta aplicación, sinó que periódicamente nos van a tener informados de técnicas, documentos y el estado de los temas que más directamente tocan al usuario.

Visita Usamos.es

Esta mañana he visto en AyudaWordpress un artículo traducido de Weblog Tools Collection que a su vez es una mención del codex de WordPress en el que muestran las teclas de acceso rápido (o atajos de teclado) de WordPress 2.7. 

Yo desde la versión 2.5 (creo que fué la primera con jQuery) uso un marcador que nos muestra todos los accesskey definidas en las páginas de WordPress.

(function() { var salida = 'Teclas rápidas de WordPress\n'; jQuery("*[accesskey]").each(function(x,el){var text = (jQuery(el).val() != '')?jQuery(el).val():jQuery(el).text(); if (text != '') salida += jQuery(el).attr("accesskey") + ' --> ' + text + '\n';});alert(salida);})()

Puedes salvar el marcador directamente desde este enlace.

PD: Este script se encarga de encontrar cualquier accesskey de cualquier página (con jQuery), no solo de WordPress. Si ejecutas el enlace sobre esta página verás las definidas para aNieto2k 😀

La influencia de Apple, está muy latente en el desarrollo web y no es para menos, el conjunto de diseño limpio y usable es algo ideal para lo que el desarrollo web moderno intenta conseguir con las páginas web.

Una muestra de ello es este motor de búsqueda desarrollado en Javascript/CSS para emular el «searchbox» del sistema operativo de Apple. He estado mirando el código fuente y no me ha acabado de gustar la idea de usar <span></span> para alojar elementos que deberían ser inputs.

Por ese motivo me he tomado la libertad de modificar el CSS y adaptar a jQuery un par de líneas que son realmente las necesarias para dotar este tipo de elementos al aspecto de Mac OS X que queremos darle.

HTML

<form name="form" class="searchbox" action="" method="post">
<p>
    <input type="text" name="s" value="" class="search"/>
    <input type="reset" name="reset" value="Reset" />
    <input type="submit" value="Enviar" />
</p>
</form>

La estructura es, a mi entender, algo más correcta ya que simplemente nos basamos de los elementos HTML que componen un formulario normal. Usando la class searchbox para indicar al javascript que ese formulario va a ser tratado para emular el searchbox de Mac OS X.

En este código, usaremos el botón reset para emular el botón (x) que vemos en la parte derecha del <input /> y la lupa que vemos en la parte izquierda del <input /> será nuestro botón de submit y el que nos llevará a la siguiente página.

CSS

.searchbox .resetButton  {
	background: white url("i/srch_r.gif") no-repeat scroll left top;
	width: 19px;
	height: 19px;
	border:0;
	text-indent:-5000;
	position:absolute;
	margin-left:-18px;
}
.searchbox .delete {
	background: white url("i/srch_r_f2.gif") no-repeat scroll left top;
}

.searchbox .submitButton {
		background: white url('i/srch_l.gif') no-repeat top left;
		width: 19px; height: 19px;
		text-indent:-5000;
		border:0;
		position:absolute;
}

.searchbox input.search {
	height:19px;
	padding-left:10px;
	width:600px;
}

Este código, consigue que nuestro input tenga el aspecto que deseamos, simplemente usamos la class searchbox para cambiar los estilos de los elementos que hay dentro.

Javascript

$.extend({
    searchbox: function() {
        var isSafari = /Apple/.test(navigator.vendor);
        var isOpera = window.opera;
        var input = $("form.searchbox input:text");
        var submit = $("form.searchbox input:submit");

        $("form.searchbox input:reset").each(function(x, el){
                $(el).addClass("resetButton");
                $(el).bind("click", function(){
                        $(this).removeClass("delete");
                });
        });

        $("form.searchbox input:submit").each(function(x, el){ $(el).addClass("submitButton");});

        input.css({
                "height": (isOpera || isSafari)?"13px":"14px",
                "padding-left" : (isOpera || isSafari)?"15px":"10px",
                "outline":"none"
                });
        var corrector = (isOpera || isSafari)?29:21;
        $("input.submitButton").css("margin-left", "-" + input.width() - (corrector) + "px");


        input.bind("keyup", function(){
            if($(this).val() != '') $(this).parent().find("input:reset").addClass("delete");
            else $(this).parent().find("input:reset").removeClass("delete");
        });
    }
});
// Activamos al cargar la página.
$(document).ready(function(){
        $.searchbox();
})

Usando jQuery como base, extendemos las opciones del framework con el método extend() que nos permite definir nuevas opciones de forma fácil y limpia. Esta nueva funcionalidad, nos añade los estilos necesarios para los usuarios que disponen de javascript.

Ventajas

Al necesitar javascript para aplicar los estilos los usuarios que no disponen de ellos ven un formulario compuesto por un <input /> en el que pueden introducir un lo que están buscando y dos botones, uno que nos limpiará el formulario y el botón de submit que nos permite enviar el valor del elemento a nuestra página de resultados. Para ello he usado este gran artículo de Olga Carreras en el que nos muestra las diferentes formas de crear formularios con varios botones.

Problemas

Pese a que he podido probarlo en Firefox 3, Safari y Opera no he podido verlo en Internet Explorer, aunque seguro que falla, el text-indent no le gustaba, así que tendré que testearlo cuando tenga tiempo.

Demo

Podéis ver como se vería en el ejemplo que he montado. Creo que como idea puede valer 😉

En el último proyecto en el que estoy desarrollando en el trabajo he tenido que crear unos combos dependientes, hasta el momento siempre los había hecho con Javascript, usando Ajax para cargar los datos de un combo a otro, pero para este proyecto quería hacerlo un poco más accesible.

Como ya hemos visto en muchos posts, el desarrollar pensando en ser accesibles para todo el mundo es complicado, pero no imposible.

Empecemos

Lo primero que tenemos que hacer es tener claro que es lo que queremos hacer, en el ejemplo, una select de destino que dependerá de una select padre llamada pais.

Viendo que es lo que necesitamos crear, veamos como podría ser una aproximación al código PHP que necesitamos.

Al código…

Primero vayamos por partes, y como hay que empezar por alguna definamos la estructura en el servidor y ya iremos subiendo.

destino.php

<?php if ($_POST["type"] == "xml")	header ("content-type: text/xml"); ?>
<select id="destino" name="destino">
        <option value="-1">Selecciona una zona</option>
<?php if ($_POST["pais"] == "ES"){ ?>
	<option value="PMI">Palma de Mallorca</option>
	<option value="AGP">Malaga</option>
	<option value="BCN">Barcelona</option>
<?php } else if($_POST["pais"] == "FR") { ?>
	<option value="TOU">Toulousse</option>
	<option value="CHD">Charles de Gaulle</option>
<?php } ?>	
</select>

Este fichero es un ejemplo rápido de un XML bien formado, que a su vez hará de elemento <select /> en nuestro script. La primera línea nos condicionará, más adelante, el formato de salida que usaremos. Ahora veamos en donde lo incrustamos.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<select name="pais" id="pais">
				<option value="-1">Selecciona un pais</code>
				<option value="ES">España</code>
				<option value="FR">Francia</code>	
			</select>
		</p>
		<p class="destino">
			<?php echo "Destino: ";
			      include("destino.php"); 
 			?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Como vemos, lo incluimos mediante un include normal, que nos generará el HTML necesario para que veamos un <select />.

Si ahora miramos el código resultante, nos encontramos con esto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<select name="pais" id="pais">
				<option value="-1">Selecciona un pais</code>
				<option value="ES">España</code>
				<option value="FR">Francia</code>	
			</select>
		</p>
		<p class="destino">
			Destino:
			<select id="destino" name="destino">
				<option value="-1">Selecciona una zona</option>
			</select>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Como podemos ver, se trata de un HTML normal, sin ningún tipo de secreto. Ahora empezemos a ponerle polvos mágicos para que esata rana se convierta en principe.

Abracadabra…

Para hacer mágia, voy a usar jQuery (principalmente por su simplicidad para el ejemplo) y con él veremos lo fácil que es conseguir unos combos disponibles para todos. Primero hemos de volver a replantearnos los ficheros PHP

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<?php if ($hayPais) : ?>
				<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
			<?php else: ?>
		<select name="pais" id="pais">
			<option value="-1">Selecciona un pais</code>
			<option value="ES">España</code>
			<option value="FR">Francia</code>	
		</select>
		<?php endif;?>
		</p>
		<p class="destino">
			<?php if ($hayPais) {
				echo "Destino: ";
				include("destino.php"); 
			} else { ?>
				<noscript>
					<input type="submit" value="Buscar Destinos" />
				</noscript>
			<?php }	?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Vayamos por partes:

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
        /*
		Esta versión es más corta, pero menos ilustrativa.
		$hayPais = isset($_POST["pais"]); // ¿Existe $_POST["pais"];
	*/
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>

Con la variable $hayPais, arrastramos por todo el script un valor Booleano que nos permite conocer si el parámetro $_POST["pais"] existe. De esta forma, las futuras comprobaciones son más sencillas.

Acto seguido, nos encargamos de informar la variable $url, que contendrá la URL a donde ha de ser redirigido el formulario. Esto es simplemente para conseguir submitar al lugar correcto en cada paso.

<?php if ($hayPais) : ?>
	<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
<?php else: ?>
	<select name="pais" id="pais">
		<option value="-1">Selecciona un pais</code>
		<option value="ES">España</code>
		<option value="FR">Francia</code>	
	</select>
<?php endif;?>

Al igual que la comprobación anterior, sabiendo que hemos recibido el parámetro $_POST["pais"], modificamos el <select /> por un elemento <input /> con el valor que hemos pasado previamente. Esto nos servirá para submitar el valor a la página siguiente.

<?php if ($hayPais) {
	echo "Destino: ";
	include("destino.php"); 
} else { ?>
        <noscript>
	<input type="submit" value="Buscar Destinos" />
	</noscript>
<?php }	?>

Aqui es donde está parte de la gracia del script, y curiosamente se llama <noscript />. Como podemos ver, en caso de haber pasado el parámetro $_POST["pais"], cargaremos el fichero destino.php y este ya se encargará de mostrar los datos relacionados al parámetro enviado. En caso de no enviar este parámetro, insertaremos el tag <noscript /> que contendrá un elemento <input type="submit" /> que se encargará de submitar el formulario con el valor necesario para cargar $_POST["pais"].

Hasta ahora, todo bien. Salvo para los que si tenemos Javascript activo. No nos olvidemos que el tag <noscript /> no será mostrado en caso de disponer de Javascript en nuestro navegador. Para ello, debemos extendernos a la siguiente capa, la del javascript.

Mejorando la experiencia del usuario

Como hemos dicho antes, usaremos jQuery para la capa de cliente. Así, que manos a la obra.

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// Creamos elemento destino y lo incrustamos en <p class="destino">
			$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');

			// Modificamos el action del formulario a la página receptora.
			$("form#form").attr("action", "receptor.php");

			// Definimos la petición de ajax, al fichero destino.php
			$("#pais").bind("change", function() {
			    $.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
			        $("#destino").empty();
			        $(xml).find("option").each(function(x,el) {
			         $("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
			        });
			    }, "xml");
			});

		});
	</script>
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<?php if ($hayPais) : ?>
				<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
			<?php else: ?>
		<select name="pais" id="pais">
			<option value="-1">Selecciona un pais</code>
			<option value="ES">España</code>
			<option value="FR">Francia</code>	
		</select>
		<?php endif;?>
		</p>
		<p class="destino">
			<?php if ($hayPais) {
				echo "Destino: ";
				include("destino.php"); 
			} else { ?>
				<noscript>
					<input type="submit" value="Buscar Destinos" />
				</noscript>
			<?php }	?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Destripémoslo un poco para entenderlo mejor.

<script type="text/javascript" src="jquery.js"></script>

Cargamos jQuery para disponer de las ventajas que nos ofrece este framework.

// Creamos elemento destino y lo incrustamos en <p class="destino">
$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');

Dentro del $(document).ready(... definimos las tareas que ayudarán al usuario. La que vemos arriba se encarga de añadir el <select /> de destinos vacio en el lugar apropiado, pendiente de ser relleneado con la petición ajax.

// Modificamos el action del formulario a la página receptora.
$("form#form").attr("action", "receptor.php");

Modificamos el action del formulario para que la ruta de submit sea la correcta.

// Definimos la petición de ajax, al fichero destino.php
$("#pais").bind("change", function() {
    $.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
      $("#destino").empty();
      $(xml).find("option").each(function(x,el) {
         $("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
       });
    }, "xml");
});

Con este código, lanzamos una petición a nuestro fichero destino.php con los parámetros pais y type, cargamos con los datos que necesitamos para que al detectar un cambio en el elemento <select id="pais" /> este envie la petición indicando que quiero recibir los datos en XML para luego recorrerlo y pintar las option que necesito para rellenar <select id="destino" />

Resultado

El resultado es una página en la que podemos acceder con dos posibles configuraciones, con Javascript o sin él. En caso de entrar con javascript, todo estará preparado para usarlo y hacer que selección de destino sea mediante Ajax y en un solo paso.

En caso de tener el javascript desactivado, tendremos que realizar un paso más para cargar los datos referentes al destino, pero al final enviaremos los mismo datos a la página siguiente.

Podeis probarlo en esta demo que he montado, solo he podido probar el JS en Firefox, así que si alguien me lo puede probar en otros navegadores se lo agradeceré.

Espero vuestras opiniones, y sugerencias.