Contenido

Javascript Image Combobox, dale vida a tus select

16 abr

+ 16

Javascript Image Combobox es un plugin jQuery que permite que nuestros elementos <select/> tenga una vida que hasta ahora no podían tener.

preview
(Ver Imagen)

Se trata de una extensión que permite que los items de los <select /> tengan una imagen para facilitar la selección de items dentro de un listado de opciones.

Para ello hacen uso de un atributo (no estandar) del elemento <option /> llamado icon, que indicará de donde coger la imagen que mostraremos junto al <option />.

 <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" icon="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" icon="icons/icon_email.gif">Email</option>
    <option value="faq" icon="icons/icon_faq.gif">FAQ</option>
    <option value="games" icon="icons/icon_games.gif">Games</option>
    <option value="music" icon="icons/icon_music.gif">Music</option>
    <option value="phone" icon="icons/icon_phone.gif">Phone</option>
    <option value="graph" icon="icons/icon_sales.gif">Graph</option>
    <option value="secured" icon="icons/icon_secure.gif">Secured</option>
    <option value="video" icon="icons/icon_video.gif">Video</option>
  </select>

Despues con una línea de Javascript este atributo se convertirá en una imagen alojada dentro del <select />.

MSDropDown.init();

Si quieres ver una demo de como quedaría, puedes echarle un vistazo aqui.

Poniendonos al día, un poco de todo

5 mar

+ 1

Bueno, ya estamos al lío. Hagamos un pequeño listado de lo más interesante de estos días ausente.

WordPress

  1. NoFollow filter: Agustin Garassino desarrolla un plugin (su primer plugin) que nos permite definir previamente que url’s tendrán el atributo rel=”nofollow” en nuestros posts.
  2. WordPress Mobile Edition: Alex King renueva el plugin que nos permite mostrar el contenido de nuestro WordPress adaptado a los dispositivos móviles. En esta versión, por fín tenemos compatibilidad con WP-SuperCache.
  3. WordPress 2.7.1: Otra nueva versión que soluciona una buena tanda de tickets abiertos y que nos acercan más a una prometedora versión 2.8.
  4. The Definitive URL Sanitizer: David Martinez crea un plugin que nos sanéa perfectamente las URL’s de nuestros posts. Se acabaron los carácteres raros en nuestras URL’s (Via Sentido Web)

WebDev

  1. Twitter se traga tu PageRank: En Adseok nos cuentan lo peligroso que se está convirtiendo Twitter.
  2. Navegar seguro por Internet: En Usolab nos muestran una comparación de los principales navegadores y las vulnerabilidades descubiertas y solventadas. Una buen motivo para motivar el cambio.
  3. Juicer: Herramienta para comprimir nuestros ficheros Javascript y CSS.
  4. Detecta la posibilidad de usar APNG en tus aplicaciones web: Código Javascript que nos permite detectar la capacidad del navegador del usuario para usar imagenes APNG.
  5. Crea un Web Slide dinámico en 5 minutos: Internet Explorer 8 nos trae la posibilidad de crear herramientas que se integrarán con el navegador llamadas Web Slide. IEBlog nos muestra que en 5 minutos podemos crear una completamente dinámica.
  6. Más velocidad al javascript con WebKit: Nos muestran unas comparativas de velocidad de las mejoras que se están implementando al nuevo WebKit. Las mejoras son simplemente impresionantes, QtWebKit está obteniendo mejores resultados de los previstos.
  7. Testea tu diseño con un aumento del 200% de tus fuentes: 456 Berea St. se hace eco de es medida que aparece en el WCAG 2.0 y que nos pide que ampliemos un 200% el tamaño de nuestras fuentes (medida para obtener nivel AA).
  8. Manipulando video usando canvas: Firefox 3.1 integrará la opción de manipular video directamente desde Javascript gracias a canvas. Tenemos un ejemplo (que únicamente funciona con Firefox 3.1).
  9. CSS Transformation en SVG: La gente de WebKit está planeando añadir las opciones que disponemos con CSS Transformation a los ficheros SVG.
  10. CSS Orientado a Objetos: Interesante propuesta de llevar la Orientación a Objetos al CSS.
  11. El arte de lanzar errores en Javascript: Nicolas C. Zakas, nos muestra como usar throw new Error(); para lanzar errores y delegar así al navegador la forma de mostrarlo.
  12. Usando el portapapeles con Javascript: Interesante técnica de usar el portapapeles del sistema operativo para alojar información de nuestras páginas web.

Varias

  1. Extensiones de Firefox del Futuro: Aza Raskin tuvo un sueño y lo convirtió en un post. Nos muestra como le gustaría que fueran las extensiones del futuro de Firefox.
  2. Blueding: Pablo Gallego me envia esta aplicación que ha desarrollado con la que podremos enviarnos contenido (fotos, video,..) directamente por Bluetooth a nuestro móvil.

Evalua el nivel de estudios para poder leer tu web

6 feb

+ 3

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.

Calificación (Huerta Reading Ease Score) Descripción de dificultad Nivel estimado de grado de lectura Estándar Internacional de Clasificación de Educación (ISCED)
0 – 30 Muy difícil Graduado de universidad Avanzado
30 – 50 Difícil Grados 13 a 16 Avanzado
50 – 60 Moderadamente difícil Grados 10 a 12 Secundaria alta (últimos años)
60 – 70 Normal Grados 8 a 9 Secundaria baja (primeros años)
70 – 80 Moderadamente fácil Grado 7 Secundaria baja (primer año)
80 – 90 Fácil Grado 6 Primaria
90 – 100 Muy Fácil Grado 5 Primaria
-1

No se pudo calcular la facilidad de lectura porque:

  • no hubo suficientes palabras para analizar; o
  • el contenido no tuvo puntuación de fin de frase

Usamos.es, informes de usabilidad y accesibilidad gratis

5 feb

+ 7

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.

usamoses

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

Simplemente pregunta: Integración de la accesibilidad en el diseño

9 dic

+ 1

Daniel TorresBurriel nos comenta que  Shawn Lawton publica de forma gratuita llamado “Simplemente pregunta: Integración de la accesibilidad en el diseño“. El título ya es bastante explicito así que si te gusta el diseño y quieres hacer que este sea lo más accesible posible, te recomiendo que lo leas detenidamente.

Atajos de teclado en WordPress

4 nov

+ 5

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 :D

Opera Mobile 9.5, la visión del desarrollador

17 jul

+ 2

Opera anunció hace unos días la versión final de Opera 9.5. Una versión que venía marcada por un cambio de aspecto bastante importante y la mejora en el tratamiento de los estandares web.

Ahora le toca actualizarse a la versión Mobile, una versión destinada a los dispositivos móviles y que promete mejorar el actual Opera Mobile. Actualmente la versión 9.5 beta 1, únicamente está disponible para Pocket PC, aunque en breve se actualizarán las diferentes versiónes para los diferentes sistemas operativos móviles.

Interface

mobile95ui

La interface es uno de los cambios que esta versión (la 9.5) está siendo más notable en todas las versiones del navegador, como podemos ver el interface ha cambiado considerablemente usando la estructura de Safari para el iPhone, un acierto por parte de Opera que se sube al carro de la popularidad del iPhone y hace que los desarrolladores no tengan que adaptar sus aplicaciones para varios navegadores móviles.

CSS Media Querys

Otra novedad interesante es la capacidad de usar media query en nuestros CSS, que al igual que Safari para iPhone, nos permite especificar que CSS cargar dependiendo del tamaño de la pantalla de nuestro dispositivo.

img {
  margin: 0 0 10px 10px;
  float: right;
}

@media all and (max-device-width: 480px) {
  img {
    margin: 10px auto;
    float: none;
    display: block;
  }
}

Viewport

<meta name="viewport" content="width=device-width, height=device-height" />

Usando el meta “viewport” podemos especificar entre cosas cosas:

  • width y height: Nos permite espeficificar el tamaño de la página en pixels [200 – 10.000]. (Por defecto el valor height está calculado en relación al especificado en width).
  • initial-scale: Indica el nivel de escalado inicial con el que los usuarios se encontrarán al abrir la página.
  • minimum-scale y maximum-scale: Especifica el rango de escalados posibles dentro de una página específica y el rango en el que el usuario puede escalar la página.
  • user-scalable: Especifica si el usuario tiene la capacidad de poder cambiar el escalado de la página, dentro del rango de valores especificados.

Opera Dragonfly para Opera Mobile

Tambien disponemos de la posiblidad de depurar nuestras aplicaciones con Opera Dragonfly, Opera nos muestra como hacerlo para estos dispositivos.

Opinión

Hoy se ha creado un nuevo estandar que el iPhone inició que los demás navegadores para dispositivos móviles deberían empezar a implementar. Esperemos que el futuro sea igual de utópico como lo veo ahora mismo en mi cabeza.

Crea un motor de busquedas accesibles al estilo Mac OS X

14 jul

+ 6

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.

searchbox

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

searchbox2

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

Combos dependientes accesibles con PHP y jQuery

27 may

+ 15

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.

combos_dependientes_accesibles

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.

Añade un teclado virtual a tus aplicaciones web

18 may

+ 8

Una forma de darle a tu aplicación web un valor añadido mejorando la usabilidad del sitio es usando un teclado virtual para complementar los elementos <input />.

virtualkeyboard

Esta versión desarrollada en Javascript, nos permite, entre otras cosas, seleccionar la configuración de teclas que deseamos mostrar en un buen listado de posibles.

Instalación

El script se basa de 2 ficheros, un JS en el que se encuentra la funcionalidad necesaria para que el teclado virtual funcione y un fichero CSS en el que podremos personalizar nuestro teclado a nuestro antojo. Simplemente tendremos que llamarlo en el <head></head> de nuestra aplicación.

<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">

Modo de empleo

Una vez añadidos los ficheros necesarios, únicamente tendremos que añadir a los <input /> que deseemos extender la clase keyboardInput.

<input type="text" value="" class="keyboardInput">

Descargar

Todo el código se encuentra bajo la licencia BSD y se puede descargar desde aqui.