Cambiar estilos CSS con JavaScript

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 :

<link href="css/defecto.css" rel="stylesheet" type="text/css" id="estilo">

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:

<input type="buton" value="Cambiar Estilo" onClick="estilo('azul.css');">

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

servido por Sergio 2 comentarios compártelo

Mostrar una imagen desde blob mysql usando PHP

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:

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:

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:

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:

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

// 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

• MIME Types
• The BLOB and TEXT Types

Autor

Braulio Andrés Soncco Pimentel

Programador - Diseñador

braulio at buayacorp.com

servido por Sergio 3 comentarios compártelo

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

¿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
 
 // 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();
 
 }
 ?>

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

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

• Redimensionar Imágenes
• Mostrar una imagen desde blob mysql usando PHP

Autor

Braulio Andrés Soncco Pimentel

Programador - Diseñador

braulio at buayacorp.com

servido por Sergio 5 comentarios compártelo

Razones para tener tu página web II

Guía Básica para PYMES

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

Razones para tener tu página en Internet

1. 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.
2. 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.
3. 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:

1. 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.
2. 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.
3. 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:

1. 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.
2. 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.
3. 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.
4. Procura crear algo de relaciones publicas enviando una newsletter a los medios especializados sobre novedades en tu site y eventos que puedan ocurrir.

servido por Sergio 4 comentarios compártelo

Eyetrack III en la práctica

Datos del estudio de Eyetrack llamado “The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes” el cual es una invaluable fuente de información que nos enseña como leen las personas un sitio web:

- Sidebar a la izquierda: La parte más interesante del estudio es el camino que los ojos recorren por la pantalla al ver una página web.

- Cortes visuales: Según el Eyetrack III los encabezados subrayados hacen que inconcientemente los lectores no lean lo que sigue; este es un fenómeno que ellos llaman “visual breaks” o “cortes visuales”, al parecer un elemento como una línea hace que ignoremos el contenido que sigue. Esto hace conflicto con algunas leyes super básicas de usabilidad: todo enlace debe de estar subrayado.

- Publicidad: De acuerdo al Eyetrack III el area superior izquierda es la más vista.

- Título y encabezado: El estudio muestra que los títulos y encabezados ocupan menos de un segundo de la atención del visitante por lo que estos deberían ser cortos y en especial las 2 primeras palabras ser lo que atrapen la atención del lector.

Más información: Eyetrack III (en castellano)

servido por Sergio sin comentarios compártelo

Razones para tener tu propia página web I

Es muy frecuente que los clientes me pregunten los motivos por los que su empresa debería tener una página web y, como todos los que nos dedicamos al desarrollo web sabemos, existen una gran cantidad de razones que no siempre tienen que valer para cada caso.

Aunque no son ni mucho menos las 10 razones definitivas, creo que pueden valer para la mayoría de las empresas (según mis experiencias).

#1 Tus clientes potenciales asumen que tienes web
Actualmente es una práctica muy habitual entre los consumidores buscar información en Internet. Es conveniente tener una página web para ofrecer información de tus productos, datos de contacto, horario, etc. que proporcione la información necesaria para que el visitante se decida por tu empresa.

#2 Tus competidores tienen web
Si tu competencia tiene web y tu empresa no, estas perdiendo oportunidades de negocio.

#3 Mejora la imagen de tu empresa
Tu empresa ofrecerá una imagen de empresa moderna y profesional. Además, contando con un diseño adecuado, permitirá al visitante tener una buena impresión de su empresa.

#4 Siempre disponible
Cuando tienes una página web tu empresa nunca cierra. Estará abierta 24 horas los 365 días del año y permitirá a los clientes conocer sus productos, hacer pedidos, resolver dudas, etc.

#5 Expande tu mercado
Tu página web será accesible desde cualquier lugar del mundo. ¿Por qué no traducirla a otros idiomas? Con Internet ya no importa en que país viven tus clientes ya que podrás comunicarte con ellos en tiempo real y sin costes adicionales.

#6 Información más completa de tus productos
En tu página web podrás ofrecer mucha más información de tus productos que sobre un catálogo de papel: video, sonido, animaciones, demos on-line, etc. Además el usuario siempre podrá guardar o imprimir esa información.

#7 Conocimiento y retención de tus clientes
Podrás mantener una mejor relación con tus clientes permitiéndoles suscribirse para estar informados de las últimas novedades, lanzamientos, ofertas, etc. También será útil para conocer la opinión de los usuarios acerca de tus productos o servicios y de esta manera mejorarlos.

#8 Es tu herramienta de marketing más importante
Un catálogo o folleto es una herramienta que, nada más imprimirlo, se queda fácilmente obsoleta ya que no es posible actualizarlo sin volver a imprimir y muestra la información de una manera estática. Mientras que una página web se puede actualizar constantemente y permite al usuario ver todo tipo de información multimedia, probar el producto, hacer pedidos, etc.

#9 Fácil de actualizar
¿Lanzáis un nuevo producto? ¿Hay una nueva oferta? Toda la información de tu empresa se puede publicar instantáneamente en la web de una manera fácil y rápida desde cualquier ordenador.

#10 No es caro
Seguro que en alguna ocasión has impreso alguna publicidad a todo color o puesto un anuncio en alguna publicación. Hacer la página web de tu empresa no tiene por que ser más caro. Si comparas las dos cosas la web es un gasto mucho más efectivo.

Artículo de: Daniel Erola

servido por Sergio 1 comentario compártelo

Links CSS interesantes

Unos cuantos enlaces a páginas web interesantes para crear elementos con CSS y CSS + javascript:
- www.opencube.com
- www.dynamicdrive.com/style
- projectseven.com
- www.likno.com

servido por Sergio sin comentarios compártelo

Navegadores web

Además del popular (y mal) navegador de microsoft, internet explorer (que se llega por su versión 7), tenemos otras alternativas mejores y gratuitas que IE. Cualquiera de estos navegadores que propongo es mejor, aunque te recomiendo FireFox:
- FireFox: navegador rápido, eficaz, muy flexible y con funciones muy interesantes (para mi, sin duda, el mejor).
- Opera: si ya usabas las versiones anteriores de Opera, la última (la 9) te apasionará, y si no era así, merece la pena darle una oportunidad a este ágil y versátil navegador que gusta a todo el mundo.
- Flock: es un nuevo navegador de código abierto ("open source") basado en Firefox, muy rápido y con una serie de módulos totalmente inéditos.

Para más información acerca de los navegadores y ver más sustitutos de ie, visita la wikipedia.

servido por Sergio sin comentarios compártelo