Archive for mayo, 2011

mayo 23, 2011 1

Autofocus en campos de formulario

By in HTML 5, JavaScript

Las webs pueden usar JavaScript para situar el foco en un campo concreto de un formulario, normalmente el primero, como por ejemplo hace Google. Para facilitar esto, HTML 5 introduce una nueva propiedad en los campos de formulario, la propiedad autofocus, que nos permite hacer que un campo de formulario tenga el foco por defecto.

Veamos como se usa esta propiedad:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 </form>
</body>
</html>

Sencilla de usar, pero ¿qué pasa si el navegador no soporta esta propiedad? Podemos hacer uso de JavaScript para ello:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 <script>
 if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 document.getElementById( "buscar" ).focus();
 }
 </script>
 </form>
</body>
</html>

Comprobamos si el elemento input soporta la propiedad “autofocus” y si no la soporta se asignamos el foco al elemento mediante JavaScript.

Si usamos jQuery como framework JavaScript podemos hacer:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
 <script src="jquery.min.js"></script>
 <script>
 $(document).ready(function() {
 if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 $( "#buscar" ).focus();
 }
 });
 </script>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 </form>
</body>
</html>

Como podemos es muy fácil implementar esta funcionalidad, tanto si el navegador soporta esta propiedad como si no. Como suele ser habitual esta funcionalidad no es una panacea que haya que implementar en todos los proyectos, dependerá de las características del mismo y tendremos que saber cuando es conveniente y cuando no utilizarla.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

mayo 17, 2011 0

Filtrando datos con filter_input

By in PHP

Algo que hay que tener en cuenta a la hora de desarrollar cualquier tipo de software, tanto web como de otro tipo, es que los datos que introduce el usuario no tienen porque ser los correctos, y en algunos casos pueden llegar a ser incluso maliciosos. Veamos un pequeño ejemplo:

Supongamos que tenemos el siguiente formulario:

formulario.php

<html>
<head>
  <title>Formulario</title>
</head>
<body>
  <form method="post" action="mensaje.php">
   <label for="mensaje">Mensaje:</label>
   <input type="text" name="mensaje" id="mensaje"/>
   <input type="submit" value="Enviar mensaje"/>
  </form>
</body>
</html>

Al pulsar el botón de enviar este nos lleva al siguiente script:

mensaje.php

<?php
  $mensaje = $_POST['mensaje'];
?>
<html>
<head>
  <title>Ver mensaje</title>
</head>
<body>
<p>El mensaje es:</p>
<p><?php echo $mensaje;?></p>
</body>
</html>

Si no tenemos cuidado puede ocurrir que un atacante malintencionado insertara como mensaje algo como:

<script src="script-dañino.js"></script>

Con lo que el código de ese script-dañino.js se ejecutaría, lo que podría hacer que cambiara el contenido de la página, que instalará algún tipo de malware, etc.

Podemos evitar esto con una función, que está presente desde PHP 5.2.0, que nos permite filtrar los datos que recibe el servidor por parte del navegador, la función filter_input. Veamos como quedaría el archivo mensaje.php una vez corregido:

mensaje.php

<?php
  $mensaje = filter_input(INPUT_POST, 'mensaje', FILTER_SANITIZE_SPECIAL_CHARS);
?>
<html>
<head>
  <title>Ver mensaje</title>
</head>
<body>
<p>El mensaje es:</p>
<p><?php echo $mensaje;?></p>
</body>
</html>

Y de esta sencilla forma hemos conseguido filtrar la variable mensaje. Este método no nos serviría si esperamos que la entrada venga en formato HTML, por ejemplo, pero si nos puede venir bien para otros tipos de datos.

Para ver una descripción completa de esta función es recomendable ver su documentación.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

mayo 5, 2011 0

Midiendo el tiempo que tarda en ejecutarse una porción de código en PHP

By in PHP

Algunas veces nos puede resultar útil saber cuanto tiempo tarda en ejecutarse una porción de código en PHP, por ejemplo para realizar pruebas de rendimiento. Para ello podemos usar la función de PHP microtime, que nos devuelve la fecha con microsegundos, de la siguiente manera:

$time_start = microtime(true);

/* Porción de código que queremos ejecutar */

$time_end = microtime(true);
$time_total = $time_end - $time_start;

echo "El código se ha ejecutado en $time_total segundos";

A partir de PHP 5.0.0 la función microtime admite un parámetro booleano, que puede ser verdadero o falso, para indicar que el resultado se devuelva como un  número real, en lugar de como una cadena, que era como se retornaba en versiones anteriores.

Si estamos usando una versión anterior a la 5.0.0 podemos hacerlo de la siguiente forma:

function microtime_float()
{
    list($usec, $sec) = explode(" ", microtime());
    return ((float)$usec + (float)$sec);
}
$time_start = microtime_float();

/* Porción de código que queremos ejecutar */

$time_end = microtime_float();
$time_total = $time_end - $time_start;

echo "El código se ha ejecutado en $time_total segundos";
Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: ,