| |

Laboratorio: realizar drag and drop de elementos HTML

Dentro de la Web 2.0 se intentan hacer cosas menos web y más tipo aplicación de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser útil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginación. Eso sí, la forma de realizarlo es la misma.
drag.png
En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. También hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente también se podría hacer así, pero como lo hemos hecho válido para texto, si lo hacemos de la manera normal, se podría ir seleccionando el texto según se mueve el ratón.

Read More “Laboratorio: realizar drag and drop de elementos HTML”

| |

Laboratorio: calcular fondo de imagen con PHP

Hace tiempo contábamos como rotar imágenes aleatoriamente, algo que se puede utilizar para la cabecera del blog (como hace mucha gente). El problema es cuando las imágenes son completamente distintas y hay que buscar un fondo que le convenga. Para ello nada mejor que un script PHP que te calcule el fondo según los colores de la imagen, ya sea calculando la media o la mediana (el que más aparece). Como veréis en el ejemplo, la media (arriba) y la mediana (abajo) devuelven valores distintos.
backgrounds.png

Read More “Laboratorio: calcular fondo de imagen con PHP”

| |

Laboratorio: simulación de transparencia mediante CSS

En la Web 2.0 está más de moda usar transparencias en nuestras páginas web, realmente se puede realizar con estilos, pero con Internet Explorer se hace de una forma y con Firefox de otra, y no estoy muy seguro, con Opera no se puede (actualización: Federico nos comenta que en la versión 9 ya está implementada). Por ello, una forma de simular la transparencia en una capa es usar dos imágenes, una de fondo con la imagen original y la otra con una imagen que hemos creado nosotros que tendrá el efecto de transparencia.
transparencia.png

Yo en el ejemplo me he creado una capa blanca, encima he puesto la imagen con cierto grado de transparencia y encima he puesto la misma imagen con efecto de luminosidad suave, para que no sea símplemente una transparencia.

Tenemos una capa div y dentro de ella un párrafo:

<div><p>...</p></div>

Ahora le tenemos que indicar los estilos:

div.contenedor {
width: 500px;
height: 375px;
background: url(forest.jpg) top left no-repeat;
}
div.contenedor p {
width: 420px;
height: 295px;
top: 40px;
left: 40px;
background: url(forest_transparencia.jpg) -40px -40px no-repeat;
border: 2px solid #000000;
position: relative;
}

Si te fijas, verás que en el estilo de párrafo, se desplaza del background hacia arriba y hacia la izquierda tanto como está desplazado el párrafo hacia abajo y hacia la derecha sobre la capa contenedora.

Ejemplo

| |

Comet paso a paso: pizarra colaborativa para páginas web

Hoy vamos a ver otro ejemplo de Comet, que a los que trabajamos en desarrollo web, nos puede venir muy bien, para cuando queremos testear una aplicación web de forma conjunta y online. También puede ser útil para realizar presentaciones.

Se trata de una pizarra colaborativa, para dibujar sobre páginas web. Cada usuario dibuja sobre el navegador y el resto de los usuarios ven lo que ha dibujado. Nada mejor para entenderlo que el siguiente video.

Se van a usar sobre todo tres cosas: comet, canvas y http://www.php.net/xml, todo sobre Firefox.

Read More “Comet paso a paso: pizarra colaborativa para páginas web”

| |

Laboratorio: leer ficheros zip desde PHP

El formato de compresión ZIP es uno de los más usados y siempre puede sernos de ayuda saber cómo manejarlo, por ejemplo para permitir que nuestros usuarios nos envien ficheros en zip y no tenerles que enviar varios ficheros de uno en uno, cosa que suele sacar de quicio.

En PHP, para leer un fichero zip debemos usar la librería php_zip que ha sido desarrollada por Guido Draheim y que se puede bajar en: http://pecl.php.net/package/zip.

El uso es sencillo y tan solo dispone de unas pocas funciones:

  • zip_close: cierra un fichero zip.
  • zip_entry_close: cierra una archivo contenido en el zip.
  • zip_entry_compressedsize: nos devuelve el tamaño comprimido de un archivo contenido en el zip.
  • zip_entry_compressionmethod: nos devuelve el método de compresión de un archivo contenido en el zip.
  • zip_entry_filesize: nos devuelve el tamaño real del archivo contenido en el zip.
  • zip_entry_name: nos devuelve el nombre del archivo contenido en el zip.
  • zip_entry_open: abre para lectura un archivo contenido en el zip.
  • zip_entry_read: lee un archivo contenido en el zip.
  • zip_open: abre un fichero zip.
  • zip_read: lee el siguiente archivo contenido en el zip.

Un simple ejemplo de cómo leer información de un fichero zip sería el siguiente. Disponemos de una página HTML que tiene un formulario para enviar un fichero:

<form action="zip.php" method='POST' enctype='multipart/form-data'<br />
<p>Seleccione un fichero ZIP para enviar
<br />
<input type="file" name="fichero" /<br />
<br />
<input type="submit" value="Enviar" /></p<br />

Y disponemos de un script PHP (en este caso se llama zip.php) que nos devuelve los archivos contenidos en el zip.

...
<ul>
<?php
$zip = zip_open($_FILES["fichero"]["tmp_name"]);
if ($zip) {
while ($entrada = zip_read($zip)) {
echo "<li>" . zip_entry_name($entrada) . "</li>";
}
zip_close($zip);
}
?>
</ul>
...

El número de utilidades que le podemos sacar a la lectura de ficheros zip puede ser importante.

Laboratorio: controlar el tiempo de sesión con PHP

Una de las cuestiones que hay que tener en cuenta por temas de seguridad es controlar el tiempo en el que está activa la sesión. Por ejemplo, para evitar que una persona olvide “desconectarse” y otro aproveche su usuario cuando no esté.

Las sesiones en PHP se controlan con la variable $_SESION, que es un array que contiene las variables de sesión. En nuestro caso, comprobaremos si existe una variabla de sesión que contenga el ID de sesión, si la hay, se recupera el tiempo en el que empezó la sesión (un timestamp) y se comprueba si ha pasado el tiempo máximo de sesión activa (en nuestro ejemplo 1 minuto), si ha sobrepasado el tiempo, se borran los datos de la sesión.

Una vez comprobada si la sesión debe seguir activa, se comprueba si sigue existiendo la sesión (vamos, que si no hemos acabado con ella), miramos si se ha pedido crear la sesión, por ejemplo cuando nos hemos logueado, en este caso, nos creamos las dos variables de sesión: el id y el timestamp.

<?php
// Inciamos la sesión
session_start();
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">
<html>
<head>
<title>Sentido Web - Sessiones</title>
</head>
<body>
<p>
<?php
// Primero miramos si la sesión es válida
// Cuando el tiempo que lleva activa sea menor que 1 minuto
if (isset($_SESSION["ID_SESSION"])) {
$antes = $_SESSION["SESION_TIME"];
// Si lleva más de 1 minuto (60 segundos)
if (time()-$antes > 60) {
// Libramos la sesion
session_unset();
session_destroy();
echo 'Finalizó la sesión. <br/>';
}
}
// Si ya hay sesión lo indicamos
if (isset($_SESSION["ID_SESSION"])) {
?>
Hay SESIÓN (<?php echo $_SESSION["ID_SESSION"]; ?>)
<?php
// Si no hay sesión
} else {
// Si se ha pedido la creación de una sesion
if (isset($_GET["accion"])) {
// se quiere crear una sesion
// Se crea la variable de sesion id de sesion
// y tiempo en el que empieza la sesion
if ($_GET["accion"] == "1") {
$_SESSION["ID_SESSION"] = "ID".rand();
$_SESSION["SESION_TIME"] = time();
?>
Has creado la sesión <?php echo $_SESSION["ID_SESSION"]. " " .$_SESSION["SESION_TIME"]; ?>
<?php
// No se quiere crear la sesión
} else {
?>
No has querido crear sesión.
<?php
}
// No hay sesión, se avisa y
// se pregunta si se quiere crear una
} else {
?>
No hay SESIÓN. ¿Quiere crear una?
<input type="button" value="SI" onclick="document.location='sesion.php?accion=1'" />
&nbsp;
<input type="button" value="NO" onclick="document.location='sesion.php?accion=0'" />
<?php
}
}
?>
</p>
</body>
</html>
|

Laboratorio: devolver ficheros con un determinador nombre en PHP

Es común que nuestras aplicaciones web devuelvan ficheros, y es también muy común que cuando devolvemos esos ficheros el nombre sea el que no deseamos. Para indicar el nombre del archivo que devolvemos tenemos que modificar la cabecera HTTP con la instrucción header:

header("Content-Disposition: attachment; filename=\"el-nombre-que-queramos.png\";");

Si además tenemos que especificar el tipo de archivo con el Content-type, tan solo tendremos que añadirlo:

header("Content-Disposition: attachment; filename=\"el-nombre-que-queramos.png\"; Content-type: image/png");

Podéis ver un ejemplo aquí

|

Laboratorio: añadir título a la cabecera usando PHP y filtros

El otro día nos preguntaban que funcionalidades se le podía añadir a la entrada Laboratorio: Recorta imágenes dinámicamente con PHP y HTML. Y aunque son muchas, depende de la imaginación que tengamos, a mí se me ha ocurrido escribir el título del blog en la cabecera usando un filtro blur para resaltar el texto, algo que he visto en varios lugares.
filtro.png

Read More “Laboratorio: añadir título a la cabecera usando PHP y filtros”