Sergio.Iglesias - Diseño y desarrollo web

Cambiar estilos CSS con JavaScript

2008-08-06T04:38:44+00:00

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:

Autor: David Martínez - http://www.dmnet.bitacoras.com

Mostrar una imagen desde blob mysql usando PHP

2009-06-14T02:21:25+00:00

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:

sql:

CREATE TABLE `tabla` (
 
   `idfoto` int(3) NOT NULL AUTO_INCREMENT,
   `nombre` varchar(255) NOT NULL DEFAULT '',
   `foto` blob NOT NULL,
   `thumb` blob NOT NULL,
   `mime` varchar(40) NOT NULL DEFAULT '',
   PRIMARY KEY  (`idfoto`)
 
 ) ;

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 $tam
 
 switch($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 blob
 header("Content-Type: $mime");
 // Muestra la imagen
 echo $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.

Elementos Utilizados

Código utilizado

Referencias

Autor

Braulio Andrés Soncco Pimentel

Programador - Diseñador

braulio at buayacorp.com

Guardar una imagen y su miniatura a un campo Blob de mysql

2008-12-05T00:36:53+00:00

¿Qué necesitamos?

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 errores
   error_reporting(E_ALL);
   // Constantes
   # Altura de el thumbnail en pÃxeles
   define("ALTURA", 100);
   # Nombre del archivo temporal del thumbnail
 
   define("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 datos
 
   define("DBHOST", "localhost");
   # nombre de la base de datos
   define("DBNAME", "test");
   # Usuario de base de datos
   define("DBUSER", "root");
   # Password de base de datos
 
   define("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Ã¡lida
 
   if(!in_array($type, $mimetypes))
     die("El archivo que subiste no es una imagen vÃ¡lida");
   // Creando el thumbnail
   switch($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();
 
 }
 ?>

html:

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
 <title>Imagen a Blob</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 
 <body>
 <form name="frmimage" id="frmimage" method="post"
 	enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>">
 
 	Nombre: <input type="text" id="nombre" name="nombre" /><br />
 	Imagen: <input type="file" id="foto" name="foto" /><br />
 
 	<input type="submit" name="enviar" id="enviar" value="Guardar" />
 </form>
 </body>
 </html>

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".

Según el tipo MIME de la imagen, crearemos la miniatura con las funciones imagecreatefromjpeg(), imagecreatefromgif() o imagecreatefrompng().

La función imagecopyresized() crea la miniatura de la imagen, aunque también podemos utilizar imagecopyresampled().

Y aquí el script que utilizé para la tabla:

sql:

CREATE TABLE `tabla` (
   `idfoto` int(3) NOT NULL AUTO_INCREMENT,
   `nombre` varchar(255) NOT NULL DEFAULT '',
   `foto` blob NOT NULL,
   `thumb` blob NOT NULL,
   `mime` varchar(40) NOT NULL DEFAULT '',
   PRIMARY KEY  (`idfoto`)
 
 ) ;

Ustedes ya le agregan los campos que necesiten.

Actualización

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.

Actualización 2

AgreguÃ© al script en el arreglo de mimes el tipo "image/pjpeg" para que no haya problemas al subirlo, tambiÃ©n a sugerencia de mi master Alex cambiÃ© la ruta de la NAMETHUMB, para que se guarde en la carpeta temporal del SO en el que se ejecuta. Si es windows entonces c:\Windows\Temp\ y si es linux /tmp/, etc.

Enlaces

Autor

Braulio Andrés Soncco Pimentel

Programador - Diseñador

braulio at buayacorp.com

Popups accesibles con javascript

2007-11-06T07:21:03+00:00

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.

La función abreventana() sería la típica:



							<script language="javascript" type="text/javascript">
							function abreventana(){


							  window.open(this.href,"nuevaventana",propiedades);


							  return false;


							}


							</script>

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



							<script type="text/javascript">


							<![CDATA[ 


							  document.write("<a href='#' onclick='window.close()'>Cerrar ventana</a>")

]]> </script>

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.

En categoría: Accesibilidad | Comentarios: 2703 | Ver o añadir comentarios |

Permitida la reproducción parcial o total citando la fuente: jlvelazquez.net

Colores en la web

2007-11-06T07:20:31+00:00

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

Creación de botones

2007-11-06T07:19:12+00:00

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

Recursos para la web

2007-11-06T07:19:12+00:00

A través del blog de Pixel, descubrimos varios enlaces a tener en cuenta para el diseño y el desarrollo web:
- Recursos de diseño web

Extensión FireFox

2007-11-06T07:18:15+00:00

- Xinha: nueva extensión para FireFox, con la que puedes transformar cualquier textarea en un editor html WYSIWYG.

Razones para tener tu página web II

2009-06-05T01:50:01+00:00

Guía Básica para PYMES

Artículo de: César Martín
Web: alzado.org

Razones para tener tu página en Internet

Estar en internet es algo mas que electrónica y ordenadores.
Cada vez mas gente se conecta a internet y con ello cada vez aparecen nueva necesidades a cubrir. Cada vez se demandan mas servicios y productos que pueden encajar con lo que tu negocio ofrece.
Todos los productos entran en internet.
Los servicios que mejor encajan en internet son los de servicios profesionales. Si ofreces servicios de jardinería, seria muy interesante consultar que hacer con mi jardín. Esta consulta puede ser gratis si soy yo el que mira la información que ofreces, pero puede ser de pago si te pido un proyecto. La ventaja que tiene el ofrecer servicios profesionales es que internet elimina las barreras internacionales y permite el intercambio de documentos de forma instantánea.
Si lo que ofreces son productos "físicos" lo único que tendrás que hacer es calcular cuanto te puede costar el envío a cualquier parte del mundo y si hubiera problemas legales de algún tipo. Pero no dudes en poner el catalogo "on-line" y en ofrecer la información sobre el precio y cuanto costaría enviarlo.
Hay muchos enemigos.
Si tienes un servicio tipo libros, música, vídeos... estas muy expuesto a los gigantes de internet tipo Amazon.com pero las PYMES suelen tener la ventaja de la especialización. Procura ofrecer un producto detallado y especial y juega con la ventaja del trato humano. Procura ofrecer una opinión mas personal y un mejor servicio.

Elementos a tener en cuenta: El nombre del dominio, la información a incluir y el posicionamiento

En el proceso de hacer una página hay unos cuantos pasos que debes tomar para arrancar. Aquí tienes algunos consejos:

Elegir un nombre de dominio:
Busca algo que describa tu servicio o producto con claridad y poco mas. Sobre comprar un dominio .es o .com es mejor comprar un dominio .com (.net es una buena opcion si el .com esta cogido. Los .org solo si te dedicas a cosas sin animo de lucro, etc.). En un mercado global, tenemos mas que ganar fuera de las fronteras que dentro. Solo es recomendable el dominio .es si tu servicio esta (legalmente) restringido a el país.
La información a incluir:
Lo básico es tu catalogo de productos y servicios. Lo mejor es crear un directorio y poner un buscador, si es muy sencillo (menos de 60 páginas) te bastara con el directorio.
Procura ofrecer un acceso a los productos por nombres que usen tus clientes, por familias y crea zonas destacadas para aquellos productos mas solicitados, . Luego información sobre como ponerse en contacto contigo para hacer negocios y por ultimo algo de información sobre la empresa y la plantilla.
El posicionamiento:
Esto quizás sea lo mas importante. En internet hay mucha información y esto genera confusión a la hora de saber que es importante. Es crucial para el éxito de tu página que este posicionada correctamente. Procura identificar a tus clientes con precisión, usa su terminología, sus necesidades para que cuando los usuarios busquen, te encuentren a ti primero.

Darse a conocer y responder al correo

Cuando tengas tu página en internet y todo funcione bien, tendrás que darte a conocer y mantener los clientes que generes.
Para que te conozcan hay que:

Darse de alta en los buscadores (buscas la categoría donde te quieres colocar y accedes por el enlace que suelen tener de "añadir un sitio", cuanto mas profundices en el directorio del buscador mejor). Desde que te des de alta hasta que aparezcas pueden pasar 3 meses. Paciencia que merece la pena.
Ponerse en contacto y crear enlaces con páginas que ya existan sobre tu negocio o actividad. En internet es bueno compartir información y enlaces. Busca las páginas que estén en tu sector, miralas y envíales un e-mail presentandote y contandoles que les quieres poner un enlace en tu página.
Responder al correo. Un cliente perdido, no solo es "1" cliente, es todos los amigos, primos, hermanos, etc. Con el poder que tiene internet responder al correo correctamente es vital para la propagación de tu sitio. Ademas el responder en menos de 24 horas te dará imagen de eficacia y disposición.
Procura crear algo de relaciones publicas enviando una newsletter a los medios especializados sobre novedades en tu site y eventos que puedan ocurrir.

Galeria de imágenes - 01

2007-11-06T07:16:11+00:00

Galería que al hacer clic en cada una de las imágenes se abre a tamaño real en un capa semitransparente:
- Lightbox JS v2.0