Javascript nos permite cambiar las propiedades de un objeto usando la sintaxis objeto.propiedad=valor así que cambiando la propiedad href de la etiqueta
que enlaza los archivos CSS el estilo especificado se cargará.
Primero, crearemos un enlace al estilo CSS por defecto asignándole un identificador :
Despues crearemos en Javascript la función que cambiará el estilo. Funciona pasándole como único argumento el nombre o ruta completa del archivo CSS a mostrar. Usaremos la propiedad getElementById() para identificar el objeto:
function estilo(arquivo) {
document.getElementById('estilo').href=arquivo;
}
Y finalmente sólo tendremos que llamar a la función desde un enlace o botón pasándole como argumento el nombre o ruta del arquivo CSS que queramos mostrar:
Para que el script se muestre como una imagen necesitamos usar la cabecera Content-type y poner el tipo MIME de la imagen que recuperaremos de la tabla, esto es:
php:
Donde image/gif es el el tipo MIME para una imagen GIF.
Desarrollo del Script
Las imágenes han sido guardadas en la tabla y tienen un único identificador representado por el campo idfoto, la imagen original se guarda en el campo foto, la miniatura en el campo thumb y el tipo MIME en el campo mime, como podemos ver en la estructura de la tabla:
Necesitamos enviar parámetros al script para indicarle el id de la imagen que queremos ver, y también si queremos ver la imagen original o su miniatura, suponiendo que el archivo que contiene al script se llame verblob.php:
html:
Donde el parámetro idfoto indica el id de la imagen, y el parametro tam indica si va a mostrar la imagen original o la miniatura (1 para mostrar la imagen original y 2 para mostrar la miniatura). El script trabaja de la siguiente manera:
php:
// Parámetros para recuperar la imagen# Recuperamos el parámetro GET con el id único de la foto que queremos mostrar$idfoto = (isset($_GET["idfoto"])) ? $_GET["idfoto"] : exit();
# Recuperamos el parámetro GET para elegir entre la miniatura o la foto real$tam = (isset($_GET["tam"])) ? $_GET["tam"] : 1;
// Escojemos la foto real o la miniatura según la variable $tamswitch($tam){case"1":
$campo = "foto";break;;
case"2":
$campo = "thumb";break;;
default:
$campo = "foto";break;;
}
Ya sabiendo el id de la imagen que vamos a mostrar, hacemos la consulta a la base de datos:
php:
// Recuperamos la foto de la tabla$sql = "SELECT $campo, mime
FROM tabla
WHERE idfoto = $idfoto";
# Conexión a la base de datos$link = mysql_connect(DBHOST, DBUSER, DBPASSWORD) or die(mysql_error($link));;
mysql_select_db(DBNAME, $link) or die(mysql_error($link));
$conn = mysql_query($sql, $link) or die(mysql_error($link));
$datos = mysql_fetch_array($conn);
// La imagen$imagen = $datos[0];
// El mime type de la imagen$mime = $datos[1];
// Gracias a esta cabecera, podemos ver la imagen // que acabamos de recuperar del campo blobheader("Content-Type: $mime");
// Muestra la imagenecho$imagen;
Conclusiones
Los campos blob no solo nos permiten guardar imágenes, sino una gran variedad de datos, para mostrarlos solo hay que tener en cuenta el tipo MIME del archivo que hemos guardado, y al momento de recuperarlo sólamente utilizamos header con el Content-Type.
Para crear la miniatura necesitamos la Librería Gráfica GD, en este script estamos usando la versión 2.0.28 de esta librería.
Si no la tenemos activada solo tenemos que modificar el archivo php.ini que se encuentra en C:\Windows (puede variar según tu versión de Windows), y agregar la línea extension=php_gd2.dll en la sección "Dynamic Extensions". El archivo php_gd2.dll debe estar en la carpeta "extensions" dentro del directorio donde instalaste el php, por ejemplo "C:\php\extensions". Si no tienes el archivo php_gd2.dll, te lo puedes descargar aquí.
Desarrollo del Script
El formulario de upload y el script php está en una sola página, la nombré como blob.php, empezemos entonces:
php:
<?php// Verificamos que el formulario no ha sido enviado aun$postback = (isset($_POST["enviar"])) ? true : false;
if($postback){// Nivel de erroreserror_reporting(E_ALL);
// Constantes# Altura de el thumbnail en pÃxelesdefine("ALTURA", 100);
# Nombre del archivo temporal del thumbnaildefine("NAMETHUMB", "/tmp/thumbtemp"); //Esto en servidores Linux, en Windows podrÃa ser:// define("NAMETHUMB", "c:/windows/temp/thumbtemp"); y te olvidas de los problemas de permisos# Servidor de base de datosdefine("DBHOST", "localhost");
# nombre de la base de datosdefine("DBNAME", "test");
# Usuario de base de datosdefine("DBUSER", "root");
# Password de base de datosdefine("DBPASSWORD", "");
// Mime types permitidos$mimetypes = array("image/jpeg", "image/pjpeg", "image/gif", "image/png");
// Variables de la foto$name = $_FILES["foto"]["name"];
$type = $_FILES["foto"]["type"];
$tmp_name = $_FILES["foto"]["tmp_name"];
$size = $_FILES["foto"]["size"];
// Verificamos si el archivo es una imagen válidaif(!in_array($type, $mimetypes))die("El archivo que subiste no es una imagen válida");
// Creando el thumbnailswitch($type){case$mimetypes[0]:
case$mimetypes[1]:
$img = imagecreatefromjpeg($tmp_name);
break;
case$mimetypes[2]:
$img = imagecreatefromgif($tmp_name);
break;
case$mimetypes[3]:
$img = imagecreatefrompng($tmp_name);
break;
}$datos = getimagesize($tmp_name);
$ratio = ($datos[1]/ALTURA);
$ancho = round($datos[0]/$ratio);
$thumb = imagecreatetruecolor($ancho, ALTURA);
imagecopyresized($thumb, $img, 0, 0, 0, 0, $ancho, ALTURA, $datos[0], $datos[1]);
switch($type){case$mimetypes[0]:
case$mimetypes[1]:
imagejpeg($thumb, NAMETHUMB);
break;
case$mimetypes[2]:
imagegif($thumb, NAMETHUMB);
break;
case$mimetypes[3]:
imagepng($thumb, NAMETHUMB);
break;
}// Extrae los contenidos de las fotos# contenido de la foto original$fp = fopen($tmp_name, "rb");
$tfoto = fread($fp, filesize($tmp_name));
$tfoto = addslashes($tfoto);
fclose($fp);
# contenido del thumbnail$fp = fopen(NAMETHUMB, "rb");
$tthumb = fread($fp, filesize(NAMETHUMB));
$tthumb = addslashes($tthumb);
fclose($fp);
// Borra archivos temporales si es que existen
@unlink($tmp_name);
@unlink(NAMETHUMB);
// Guardamos todo en la base de datos#nombre de la foto$nombre = $_POST["nombre"];
$link = mysql_connect(DBHOST, DBUSER, DBPASSWORD) or die(mysql_error($link));;
mysql_select_db(DBNAME, $link) or die(mysql_error($link));
$sql = "INSERT INTO tabla(nombre, foto, thumb, mime)
VALUES
('$nombre', '$tfoto', '$tthumb', '$type')";
mysql_query($sql, $link) or die(mysql_error($link));
echo"Fotos guardadas";
exit();
}?>
Las primeras líneas controlan que el formulario aun no se ha enviado, despues definimos constantes para guardar los archivos en nuestra base de datos, solo las cambiamos según nos convenga.
Despues verificamos si el archivo que subimos es una imagen para esto verificamos su tipo MIME. Los tipos que se permiten en este script son "image/jpeg" , "image/gif" e "image/png". Caso contrario recibiremos el mensaje "El archivo que subimos no es una imagen válida".
Dado que el soporte GIF fue retirado por completo de la biblioteca GD en la versión 1.6, la función imagegif no se encuentra disponible si está usando tal versión de la biblioteca GD. Se espera que el soporte para esta caracterÃstica regrese en una versión posterior al relanzamiento del soporte GIF en la biblioteca GD a mediados de 2004. Para más información, consulte el sitio web del Proyecto GD.
Para que nuestro script funcione corréctamente la carpeta que lo contiene debe tener permisos de escritura, la mayoría de hostings que ofrecen PHP tienen los archivos bajo la carpeta public_html, no se sugiere correr este script bajo la carpeta raiz, ya que si damos permisos de escritura a public_html otros usuarios pueden acceder y modificar nuestros archivos. La sugerencia es correr el script bajo una carpeta cualquiera diferente de la raiz, por ejemplo /thumbs/blob.php, asi no tendremos problemas de seguridad.
En ocasiones y por exigencias ajenas a los desarrolladores, nos vemos obligados a abrir páginas en esas "amables" ventanas que dicen llamarse popups. Entendiendo por popup como aquellas ventanas a las que podemos eliminar funcionalidades como la barra de direcciones, la barra de estado; definir su tamaño, etc.
A través de este pequeño tutorial veremos cómo depurar nuestro código para que su contenido sea 100% accesible, y a convertir esta técnica en algo un poco más usable.
Desde el punto de vista de los navegadores con los que nuestro público accederá a la web podemos encontrarnos con tres casos:
Su navegador soporta javascript y permite lanzar nuevas ventanas: Abriremos un popup con las características que le hayamos definido.
Su navegador no soporta javascript pero permite lanzar nuevas ventanas: Lanzaremos una ventana del navegador normal y corriente.
Su navegador no soporta javascript y no permite lanzar nuevas ventanas: La página se abrirá en la misma ventana.
Y todo esto traducido a XHTML significa...
Nos ponemos en situación: tenemos un enlace desde el que queremos abrir en un popup la página popup.html.
Unas técnicas muy vistas en la www son las siguientes:
<a href="javascript:abreventana()">texto del enlace</a>
<a href="#" onclick="abreventana()">texto del enlace</a>
Ninguna de las dos es correcta. Si abreventana() no se ejecuta, el contenido no será accesible. Además de que el contenido del popup no quedará accesible a los robots de los buscadores, por lo que la página no quedará indexada (a fecha de hoy, éstos no son capaces de seguir enlaces generados mediante JavaScript).
La solución correcta sería algo así:
<a href=”popup.htm” onclick=”abreventana()” target=”nuevaventana” title=”Se abre en otra ventana”>(nueva ventana) texto del enlace</a>
Como podéis ver con este código informamos claramente tanto al usuario como a su navegador de que el enlace se abrirá en una nueva ventana.
Es importante no olvidar el return false, de lo contrario se ejecutará la función de JavaScript y el href del enlace.
Si el AU permite ejecutar javascript y abrir nuevas ventanas, nuestra página se abrirá en una ventana con las propiedades que le hayamos definido.
Si no soporta javascript pero sí permite abrir nuevas ventanas, el enlace se abrirá en una ventana estándar del navegador en cuestión.
Si no soporta javascript ni permite abrir nuevas ventanas, la página se abrirá en la misma. Como podéis ver, hemos cubierto todas las posibilidades.
Para terminar de ganarnos el sueldo, en la página popup.html, introduciremos un par de líneas de código para asegurarnos de que el usuario puede cerrar la ventana o volver a donde estaba (siempre puede usar el menú de su navegador, pero hagámosle la vida un poco más fácil).
Con esta etiqueta cubrimos el abanico de los navegadores con soporte de javascript. Ahora hacemos lo propio para los que no:
<noscript>
<a href="padre.html">Volver</a>
</noscript>
Conclusiones
Como hemos podido ver, hacer un poco más accesible una página es cuestión de llevar una metodología de trabajo correcta, teniendo siempre en mente al usuario.
En este caso hemos conseguido que la página popup.html sea totalmente accesible, tanto para los agentes de usuario como para los robots de búsqueda.
Siempre se habla de la importancia de los colores en la web. Aquí presento 2 páginas para poder crear una buena paleta de colores:
- colorschemer.com
- www.colorblender.com
Aquí tenemos una página web para crear interesantes botones para todo lo que queramos, además de poder personalizarlos con el tipo de letra, color del texto, color de fondo, distintos estilos de botón...
- www.buttonator.com
