Como Lo Hago » JQuery

Cómo hacer un formulario de ingreso desplegable

Jorge Nitales — Thu, 05 Aug 2010 04:35:52 +0000

Hoy vamos a ver un pequeño truquillo para mejorar tu sitio web, veremos como crear un formuario de ingreso desplegable al momento de hacer click en algún lugar y que además se esconda si volvemos a hacer click. Con esto evitaremos la carga de una página para que los usuarios puedan acceder al sitio.

Para ver Cómo lo hago y que necesito, vamos después del salto.

Cómo hacer un formulario de ingreso desplegable

Información del Tutorial

Dificultad: Baja

Tiempo de Realizacíon: 30 min

¿Qué necesito?

Un editor web

Conocimiento básico en HTML. Recomendamos esta saga

Conocimiento básico en CSS. Recomendamos esta saga

¿Cómo Lo Hago?

1.- Necesitamos crear una página HTML básica donde usemos hojas de estilo, que contenga nuestro menú donde una de las opciones sea “Login”, “Ingresar” o lo que ustedes prefieran.

En este caso haremos lo siguiente:

En HTML:







Untitled Document





Home
Galería
Contacto
Log-in

en CSS

table
{
background:green;
margin:auto;
font-family:verdana,helvetica;
font-size:14px;
}

a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

No ganará ningun concurso de diseño, pero para la explicación sirve.

Con lo anterior tendremos algo así.

2.- Ahora necesitamos crear nuestro formulario de ingreso, para esto usaremos un “

”, ya que este estará siempre en la página, pero se vera cuando nosotros los indiquemos.

Para esto, creamos un div como el siguiente:

Como ven, este div tiene un “id” que es un identificador, adicionalmente a esto, agregamos una etiqueta “id” al link del menu que corresponde a “login”, quedando el HTML de la siguiente forma:







Untitled Document





Home
Galería
Contacto
Log-in

También debemos agregar un nuevo código a la hoja de estilos para darle forma a nuestro formulario, por lo que agregaremos a nuestro CSS lo siguiente:

#login-form
{
width:120px;
background:gray;
text-align:center;
}
#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}

Quedando nuestro sitio así.

Sigue sin ganar ningun premio, pero nuevamente es funcional para el ejemplo.

En la hoja de estilos, al id del formulario, agregamos lo siguiente:

display:none;

margin:auto;

quedando nuestro CSS de la siguiente manera:

table
{
background:green;
margin:auto;
font-family:verdana,helvetica;
font-size:14px;
}

a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

#login-form
{
width:120px;
background:gray;
text-align:center;
margin:auto;
display:none;
}

#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}

Como verán, si es que estan haciendo esto a la vez que leen, nuestro formulario desapareció y jamas volvera, así que fin del tutorial. Lo que pasa que está inicialmente escondido, como necesitamos que este, además lo centramos, pero como no pueden ver, aun no lo sabe.

De aquí en adelante empieza la magia.

Primero que todo, como empezaremos a usar JQuery, necesitan bajar la librería y agregarla en el encabezado de su sitio.

Para descargarla lo pueden hacer aquí

y para agregarlo, ponen la siguiente linea en el encabezado de su sitio.

Y ahora, necesitamos crear un nuevo archivo, que para efectos de ejemplo, llamaremos “funciones.js”

en el cual pondremos el siguiente código (se comentará el código para explicar su funcionamiento)

$(function(){
/* Con esto se esta diciendo "una vez que se cargue el sitio",
cuando eso se cumpla se sigue con lo demas */

$('#login').toggle(function(){
/* Usamos la funcion toggle, que sirve para hacer cierta acción con el primer click
y otra con el segundo. Los clicks se deben hacer sobre #login que es el
identificador de "login" en nuestro menu */

$('#login-form').slideDown();
/* Con el primer click, hacemos que el formulario se despliegue hacia abajo */

},function(){ 

//y con el segundo click...

$('#login-form').slideUp();
// hacemos que el formuario se "guarde" hacia arriba

}); //cerramos la funcion que realiza toggle

}); //cerramos las funciones

Es importante decir que la función Toggle tiene al menos 12 mil usos más. En verdad 12 mil fue un número al azar y quizás exagerado, pero si tiene muchas más.

Ahora si vuelven a su sitio y hacen click en login.. ¡¡¡no pasará nada!!!

Y esto es porque tenemos que agregar este archivo de funciones a la cabecera de nuestro sitio, de la siguiente manera (a esta altura creo que debí hacer esto en video)

Como ven se agregó abajo de la librería de jquery, si lo agregar sobre esta, no funcionará nada. ¡Avisados!

Ahora ya esta funcionando, pero antes de mostrar como quedó, agregaremos unas funciones más. ¿Para qué?

Para que cuando alguien haga click en el input de usuario o contraseña, se borre el texto que por defecto esta y lo deje en blanco, lo hacemos agregando lo siguiente, debemos agregarlo despues del cierre de la funcion de toggle pero antes del cierre de todas las funciones.

$('#usuario').focus(function(){
// Esto quiere decir, que cuando se selecciones el input con id "usuario"...
$(this).val(''); 
// el valor, idetificado como val, que es lo que esta dentro del campo sea igual a.. nada.

}); // Cerramos la funcion y abajo repetimos lo mismo con el input password

$('#password').focus(function(){
$(this).val('');

});
});    
/* Cerramos las funciones, no lo hicimos 2 veces,
recuerden que esto va abajo de la funcion anterior y antes del cierre */

Para evitar confusiones mostraremos todo el archivo de funciones sin comentarios.

$(function(){

$('#login').toggle(function(){

$('#login-form').slideDown();

},function(){

$('#login-form').slideUp();

});

$('#usuario').focus(function(){
$(this).val('');

});

$('#password').focus(function(){
$(this).val('');

});
});

Y como podemos ver, funciona si problemas, aquí

Para terminar, agregaremos un “

” que contenga todo lo anterior, para poder centrarlo y que nuestro formulario quede a la derecha con CSS. Ahora mostraremos los códigos de todo, para que vean el resultado final.

HTML









Untitled Document






Home
Galería
Contacto
Log-in














});
});

CSS

#contenedor
{
width:215px;
margin:auto;
}

table
{
background:green;
font-family:verdana,helvetica;
font-size:14px;
}

a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

#login-form
{
width:120px;
background:gray;
text-align:center;
display:none;
float:right;
}

#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}

JQuery

$(function(){

$('#login').toggle(function(){

$('#login-form').slideDown();

},function(){

$('#login-form').slideUp();

});

$('#usuario').focus(function(){
$(this).val('');

});

$('#password').focus(function(){
$(this).val('');
});
});

El resultado final aquí

Con esto, tienen listo su formulario desplegable. Solo queda hacer un diseño bonito para acompañar.

Cualquier duda que puedan tener, los invitamos a dejarnos un comentario a continuación.

Por ahora,

Me despido

Staff CLH

Cómo crear un contador de caracteres para tus formularios

Xabadu — Sun, 04 Jul 2010 05:37:56 +0000

Entre las tantas peticiones que nos han llegado ultimamente, una de las más recurrentes es sobre como crear un contador de caracteres para áreas de texto, similar a la funcionalidad que despliega Twitter en su sitio Web cada vez que enviamos una actualización (o tweet para nuestros amigos más 2.0). Pues bien, luego de analizarlo y darle un par de vueltas, pudimos notar que es una utilidad bastante sencilla de lograr mediante HTML y nuestro siempre querido jQuery.

Así que sin más, hoy mediante un sencillo y rápido tutorial, veremos el paso a paso para poder implementarlo en nuestros formularios.

El detalle, como siempre, después del salto.

Cómo crear un contador de caracteres para tus formularios

Detalles del tutorial

Tiempo aproximado de implementación: 15 min.

Dificultad: Básico.

Implementos necesarios:

jQuery.

Un editor Web (recomendamos Aptana Studio o Notepad++).

¿Qué haremos?

Para llevar a cabo este contador de caracteres, partiremos por definir un pequeño formulario que contendrá un área de texto y un botón de envío para el mensaje.

Ahora, si pensamos en el proceso propiamente tal, la lógica nos dice que debemos estar atentos a cada caracter que escriba el usuario, y en base a eso, ir generando el contador para advertirle cuanto más puede escribir. Esto último es posible hacerlo de manera muy sencilla mediante un método de jQuery llamado keydown, el cual detecta cada vez que se presiona una tecla dentro de un elemento en particular (en este caso, el textarea).

Con eso claro, vamos, manos a la obra:

HTML

Partiremos por definir un formulario sencillo, con un área de texto y un botón de envío. Esto lo envolveremos en un div, el cual contendrá este formulario y adicionalmente otro pequeño div, que es donde incluiremos el mensaje indicando los caracteres que restan.



 
 
 Ejemplo contador de caracteres - CLH
 
 
 
 
 
 
 Escribe tu mensaje


 Mensaje:

jQuery

Ahora que tenemos nuestro formulario armado, crearemos el código en jQuery que será responsable de detectar la inclusión de cada nuevo caracter y procederá a descontar de una cantidad que definimos a modo de ejemplo (en este caso 150):

$(function(){

/* Definimos variables que utilizaremos

   valor: En ella almacenaremos cuantos caracteres hay en el
          área de texto.

   contador: Almacenará el número de caracteres restantes,
             descontando el valor actual desde el máximo (150).

   parrafo: Almacenará en que tipo de clase (estilo) se mostrará el
            mensaje (verde si no se ha pasado el límite, rojo si se
            sobrepasado).

*/

var valor, contador, parrafo;

// Mostramos un mensaje inicial y lo añadimos al div de id contador.
$('Tienes 150 caracteres restantes').appendTo('#contador');

// Definimos el evento para que detecte cada vez que se presione una tecla.
$('#mensaje').keydown(function(){

// Redefinimos el valor de contador al máximo permitido (150).
contador = 150;

/* Quitamos el párrafo con clase advertencia o indicador, en caso de que ya se
   haya mostrado un mensaje */
$('.advertencia').remove();
$('.indicador').remove();

// Tomamos el valor actual del contenido del área de texto
valor = $('#mensaje').val().length;

// Descontamos ese valor al máximo.
contador = contador - valor;

/* Dependiendo de cuantos caracteres quedan, mostraremos el mensaje de una
   u otra forma (lo definiremos a continuación mediante CSS */
if(contador < 0) {
   parrafo = '';
}
else {
   parrafo = '
';
}

// Mostramos el mensaje con el número de caracteres restantes.
$('#contador').append(parrafo + 'Tienes ' + contador + ' caracteres restantes');

});

});

CSS

Y finalmente estilizamos un poco nuestro formulario y mensajes (esto último es opcional):

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

h1 {
font-size: 20px;
}

label {
display: block;
}

#mensaje {
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

}

#publicar {
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #999999;
padding: 10px;
font-weight: bold;
color: white;
}

#publicar:hover {
background: #666666;
cursor: pointer;
}

.advertencia {
color: red;
}

.indicador {
color: green;
}

Con esto obtendríamos nuestro contador de caracteres, el cual según se puede apreciar, es posible construirlo de manera sencilla, con solo algunas líneas de codificación y entregando una funcionalidad más que interesante para nuestros usuarios.

Antes de cerrar:

Y como siempre, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear un formulario de contacto – Versión 2.0

Xabadu — Sun, 30 May 2010 02:16:33 +0000

Hace algún largo tiempo ya, les trajimos un tutorial sobre como armar un formulario de contacto para nuestros sitios Web, en el cual vimos todo el proceso de creación, desde el armado hasta el envío de los datos vía correo electrónico.

Pero como el tiempo pasa, y nos vamos poniendo viejos, y sabemos que las soluciones no son eternas ni apropiadas para estos tiempos, hoy hemos decidido sacar a relucir nuestros talentos musicales y poéticos desarrollísticos (¿desarrolladores?) y traerles una nueva versión de este formulario, ahora con sabor a limón y algunas características que lo convierten en una versión mucho más óptima que la anterior.

El detalle, como siempre, después del salto.

Cómo crear un formulario de contacto – Versión 2.0

Como siempre, lo primero:

Detalles del tutorial

Tiempo aproximado de implementación: 30 minutos.

Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).

Conocimientos previos requeridos: Entendimiento de HTML, CSS, jQuery y PHP.

Implementos necesarios:

Un editor Web (Recomendamos Aptana Studio o Notepad++, ambos gratuitos).

Ahora, la pregunta de rigor. ¿Qué trae de nuevo este formulario 2.0?:

Validaciones de ingreso de datos en tiempo real mediante jQuery.
Validación del correo electrónico en tiempo real mediante expresiones regulares.
Envío de información de forma asincrónica (sin recargar la página) mediante el método .ajax de jQuery.
Mejoras de estilo y codificación.

Así que con eso claro, vamos, manos a la obra:

Procedimiento:

Separaremos este desarrollo en las siguientes partes:

Código HTML – Armado del formulario.
Código CSS – Estilización del formulario.
Código jQuery/Javascript – Validaciones.
Código PHP – Envío de información.

1.- Código HTML

El armado del formulario es bastante estándar:


  
    Contacto

 
 Nombre: 
 
 


 
  Correo:
 
 
 

Sitio Web:
 
 


 
 Mensaje:

Con este código tendremos un formulario bastante estándar armado en nuestra página de contacto. Este contará con campos de texto para que el visitante ingrese su nombre, correo electrónico y sitio Web, así como un área de texto para que ingrese su mensaje. Y obviamente al final añadimos un botón para el envío.

Como podrán fijarse, a continuación de cada campo de texto y área de texto, hemos añadido un span sin contenido. Esto lo hemos hecho para insertar mensajes y resultados de las validaciones posteriormente mediante jQuery.

A continuación, haremos la estilización del formulario, mediante CSS.

2.- Código CSS

body {
 height: 100%;
 background: #348075;
 font-family: Arial;
 font-size: 11px;
 color: white;
}

#container {

 width: 1000px;
 margin: 0 auto;
 background: #5b5c5c;
 border: 1px solid white;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;

}

#formulario {

 padding: 1em;

}

#formulario fieldset {

 width: 400px;
 padding: 0 0 0 0;
 border: 0;

}

#formulario label {

 display: block;
 padding: 5px 0 5px 0;

}

#formulario input[type=text], textarea {

 padding: 10px 0 10px 0;
 border: 1.5px solid black;
 color: #5b5c5c;
 font-family: inherit;
 font-size: inherit;
 -moz-border-radius: 5px;
 -webkit-border-radius: 3px;

}

#formulario input[type=text]:focus, textarea:focus {

 background: #f5f2c9;

}

#formulario input[type=submit] {

 border: none;
 margin-right: 1em;
 padding: 6px;
 text-decoration: none;
 font-size: 12px;
 font-weight: bold;
 -moz-border-radius: 4px;
 background: #348075;
 color: white;
 width: 100px;

}

#formulario input[type=submit]:hover {
 background: #287368;
 cursor: pointer;
}

#validar-nombre, #validar-correo, #validar-sitio, #validar-mensaje {
 position: absolute;
 width: 100px;
}

#validar-nombre img, #validar-correo img, #validar-mensaje img {
 padding:10px 0 0 5px;
}

Como podrán ver, en algunas partes hemos utilizado la propiedad border-radius (con moz y webkit para apuntar a distintos navegadores). Esta propiedad, tal como hemos indicado anteriormente, es de CSS3, por lo que no está completamente soportada por todos los navegadores, especialmente los más antiguos. El efecto que logra es el de bordes redondeados, así que ojo, si utilizan IE o algún navegador de mayor antiguedad no lo podrán apreciar.

3.- Código jQuery / Javascript

Acá debemos fijarnos en algunas cosas. Primero, debemos asegurarnos de descargar e incluir jQuery en la cabecera de nuestro formulario, y luego, crear un documento js en el que incluiremos el código en jQuery que hará las validaciones y el correspondiente a Javascript que contendrá la expresión regular que evaluará la dirección de correo ingresada para ver si es válida. Partamos con jQuery:

$(function(){

 var valor;
 var i = 0;

 $('#nombre').focus(function(){

     $('#resultado-nombre').remove();
     $('#validar-nombre').append('* Obligatorio');

 });

 $('#nombre').blur(function(){

     $('.advertencia').remove();

     valor = $('#nombre').val();

     if(valor != '') {
         $('').appendTo('#validar-nombre');
     }
     else {
         $('').appendTo('#validar-nombre');
     }

 });

 $('#correo').focus(function(){

     $('#resultado-correo').remove();
     $('#validar-correo').append('* Obligatorio');

 });

 $('#correo').blur(function(){

     $('.advertencia').remove();

     valor = $('#correo').val();

     if(valor != '') {

       if(validaCorreo(valor)){

          $('').appendTo('#validar-correo');
          var valido = true;

       }
      else {
          $('Correo no valido').appendTo("#validar-correo");
      }
    }
    else {
         $('').appendTo('#validar-correo');
    }

 });

 $('#sitio').focus(function(){

     $('#validar-sitio').append('* Opcional');

 });

 $('#sitio').blur(function(){

      $('.advertencia').remove();

 });

 $('#mensaje').focus(function(){

      $('#resultado-mensaje').remove();
      $('#validar-mensaje').append('* Obligatorio');

 });

 $('#mensaje').blur(function(){

     $('.advertencia').remove();

     valor = $('#mensaje').val();

     if(valor != '') {
          $('').appendTo('#validar-mensaje');
     }
     else {
        $('').appendTo('#validar-mensaje');
     }

 });

 $('#enviar').click(function(){

       if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='' && valido) {

         $('.advertencia').remove();

         $('#envio').append('');

         var nombre = $('#nombre').val();
         var correo = $('#correo').val();
         var sitio = $('#sitio').val();
         var mensaje = $('#mensaje').val();

       $.ajax({
           url: 'envio.php',
           type: 'POST',
           data: 'nombre=' + nombre + '&correo=' + correo + '&sitio=' + sitio + '&mensaje=' + mensaje,

           success: function(resultado) {
               $('#respuesta').remove();
               $('#envio').append('' + resultado + '');
               $('#cargando').fadeOut(500, function() {
                   $(this).remove();
               });

           }
       });

       return false;

   }
   else {
       $('#envio').append('Debe completar los datos requeridos.');
       return false;
    }

 });

});

Varias cosas a las que ponerle atención en el código anterior:

Utilizamos 3 imágenes en los procesos de validación y envío (accept.png, delete.png, ajax-loader.gif). Estas imágenes son utilizadas para validar correcta e incorrectamente así como mostrar un pequeño cargador al momento de enviar los datos. Pueden obtenerlas en el código fuente que hemos adjuntado al final.
Hacemos uso del método ajax de jQuery, el cual nos permite enviar asincrónicamente los datos a una página en PHP mediante un método como POST o GET y que esta se ejecute sin la necesidad de recargar la página. Como se puede apreciar, en caso de éxito de esta llamada (el código correspondiente a success), hay un parámetro que es devuelto (resultado), el cual corresponde a un mensaje desplegado por el script que ejecutamos, lo que podremos ver más adelante.
Hemos incluido en 2 partes un return false. Esto se ha hecho para que el formulario no ejecute el action (de enviar a la página envio.php) de forma normal, sino que ejecute todo de forma asincrónica. Si el usuario tiene desactivado Javascript en su navegador, se ejecutará todo de forma normal.
En la validación del correo se hace un llamado a una función que lo evaluará, esa la incluiremos a continuación.

El código básicamente ejecuta acciones cada vez que se selecciona un campo de texto (focus) y/o se sale de el (blur). Ahí evalua de acuerdo a los parámetros que hemos definido (que existan datos) y en base a eso muestra un resultado de la validación. Luego, al final, cuando se hace click en el botón de envío, evalúa que existan datos en todos los campos y en ese caso envía. De lo contrario, despliega un mensaje indicando la necesidad de completar el formulario.

Luego, a continuación del código jQuery, incluiremos una función en Javascript que evaluará el correo mediante una expresión regular para verificar que tenga el formato correcto:

function validaCorreo(correo) {

 var expresion = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)
|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})
\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.
|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.)
{2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
 return expresion.test(correo);

}

Entre estos 2 códigos se encargan de toda la validación del formulario, tal como indicamos, en tiempo real. Lo que nos queda hacer ahora es crear nuestro script en PHP para el envío final de los datos.

4.- Código PHP

Nombre: ".$nombre."

 Correo: ".$correo."

 Sitio Web: ".$sitio."

 Mensaje: ".$mensaje;

 /* Definimos las cabeceras del mensaje */

 $cabecera = "MIME-Version: 1.0\r\n";
 $cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n";
 $cabecera .= "From: $correo\r\n";
 $cabecera .= "Reply-to: $correo\r\n";
 $cabecera .= "Cc: $correo\r\n";

 /* Enviamos vía correo, devolviendo un mensaje en caso de éxito o falla */ 

 if(mail($destino, $asunto, $cuerpo, $cabecera)) {
    echo 'Su mensaje ha sido enviado.
     De ser necesario, nos pondremos en contacto con Ud.';
 }
 else {
    echo 'No se pudo enviar el mensaje. Inténtelo nuevamente';
 }

?>

Los mensajes desplegados en el if y else cuando enviamos el correo son aquellos que son devueltos al método .ajax de jQuery (el parámetro resultado del que hablamos anteriormente), los cuales son desplegados en el formulario.

Conclusión

Y con eso tenemos nuestro formulario de contacto terminado, el cual valida en tiempo real y envía los datos de forma asincrónica. En caso de que el visitante tenga Javascript desactivado en su navegador, esto se ejecutará de forma normal, es decir, el script PHP se cargará al momento de presionar el botón Enviar y no habrá validación en tiempo real.

Antes de terminar:

Y como siempre, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear una galería de imágenes para tu Web

Xabadu — Mon, 29 Mar 2010 18:41:56 +0000

Continuando con nuestra larga saga de tutoriales sobre diseño Web, en esta ocasión les traemos un pequeño desarrollo que sin duda puede ser de gran utilidad para nuestros sitios, en especial si queremos montar una especie de portafolio o una simple galería para desplegar imágenes.

En un esfuerzo conjunto e integración de tecnologías como PHP, jQuery, CSS, XHTML y un poco de MySQL, hoy veremos un paso a paso de como construir una simple galería de imágenes desde cero.

El detalle, como siempre, después del salto.

Cómo crear una galería de imágenes para tu Web

Como siempre, lo primero:

Detalles del tutorial

Tiempo aproximado de implementación: 60 minutos.

Dificultad: Intermedio.

Conocimientos requeridos: Idealmente nociones de PHP, XHTML, CSS, jQuery y bases de datos, especialmente si quieren personalizar el diseño final. De cualquier forma, todo será explicado paso a paso en caso de que deseen implementar tal como está acá.

Implementos necesarios:

Un servidor que pueda ejecutar archivos PHP. (Recomendamos XAMPP para Windows, Linux y Mac).

Un sistema gestor de bases de datos MySQL (En XAMPP viene uno incluido).

Opcionalmente un editor Web (Recomendamos Adobe Dreamweaver o Aptana Studio).

Un editor de imágenes (Recomendamos Adobe Photoshop).

La librería jQuery, que pueden obtener desde su sitio oficial.

Imágenes para montar en la galería. Para este caso utilizamos algunas de la galería de JoesSistah, las cuales están bajo una licencia Creative Commons.

Con eso claro, vamos, manos a la obra:

1.- Lo primero que haremos será crear una base de datos en nuestro MySQL y en el una tabla llamada imagen, la cual contendrá 4 campos de información:

CREATE TABLE 'clh'.'imagen' (
'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
'titulo' VARCHAR( 50 ) NOT NULL ,
'descripcion' TEXT NOT NULL ,
'archivo' VARCHAR( 20 ) NOT NULL
) ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_unicode_ci

Repasando nuestro código anterior, lo que hemos hecho ha sido crear una tabla llamada imagen, la cual contiene 4 campos:

id: Contendrá un número identificatorio para cada imagen, lo hemos dejado con auto increment para que cada vez que se inserte un nuevo registro aumente automáticamente.
titulo: Contendrá el título de la imagen.
descripcion: Contendrá la descripción de la imagen.
archivo: Contendrá el nombre del archivo y su extensión para luego llamarlo desde nuestra galería.

2.- Luego que hemos creado la tabla, insertaremos información de 4 imágenes:

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 1', 'Imagen representativa de un paisaje con costa',
'1.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 2', 'Imagen representativa de un paisaje con nieve',
'2.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 3', 'Imagen representativa de un paisaje con una
luna en el fondo', '3.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Imagen abstracta', 'Representacion de una mariposa',
'4.jpg')

3.- Con eso debiésemos tener una tabla de la siguiente forma:

id	titulo	descripcion	archivo
1	Paisaje Numero 1	Imagen representativa de un paisaje con costa	1.jpg
2	Paisaje Numero 2	Imagen representativa de un paisaje con nieve	2.jpg
3	Paisaje Numero 3	Imagen representativa de un paisaje con una luna en el fondo	3.jpg
4	Imagen abstracta	Representacion de una mariposa	4.jpg

4.- Con nuestra tabla creada, y antes de empezar a codificar, haremos la preparación de nuestras imágenes. Para la galería, necesitaremos 3 tamaños de las mismas imágenes, 2 los fijaremos en imágenes distintas y 1 lo redimensionaremos vía CSS. Así que necesitaremos:

Tamaño normal de las imágenes para la vista completa. En este caso utilizamos 400px.
Tamaño reducido para los previews o thumbnails. En este caso utilizamos 150px.
Tamaño aún más reducido para los previews bajo la vista completa. En este caso utilizamos 75px. Este es el que ajustaremos vía CSS.

Los 2 primeros pueden hacerlo mediante su editor de imágenes favorito.

5.- Con todo aquello listo, procedemos a codificar. Nuestra galería contará de 2 archivos en formato PHP, uno donde desplegaremos un preview de las imágenes y añadiremos un pequeño efecto en jQuery para que estas aparezcan oscuras al cargar la página y que solo sean completamente visibles cuando el usuario pase el mouse por encima, y el otro funcionará como un visor de la imagen en tamaño completo, con su respectiva información y enlaces para imágenes siguientes y anteriores, así como otro preview de la misma galería en un tamaño más pequeño. Adicionalmente codificaremos un archivo en formato CSS para el estilo de la galería y un archivo en formato JS para nuestras funciones en jQuery. Así que resumiendo, los archivos que crearemos son:

index.php
visor.php
estilos.css
funciones.js

Vamos con el primero. Los comentarios como siempre, dentro del código:

index.php



	
		
		/* Incluimos la hoja de estilos, la libreria jquery y
                nuestra libreria de funciones */
                
		
		
		Galería de Imágenes
	
	

		
			Mi galería de imágenes
		query($consulta);

		// Desplegamos las imagenes con un enlace a su id
                while($filas = $resultado->fetch_array(MYSQLI_ASSOC)) {

		?>
		
   " alt="imagen" />

En resumen, lo que hemos hecho en nuestro index.php, yendo paso a paso:

Incluimos la hoja de estilo, la librería jQuery y nuestra librería de funciones.
Conectamos a la base de datos y obtenemos toda la información de las imágenes que tenemos almacenadas.
Desplegamos las imágenes con un enlace hacia el visor y pasamos como parámetro el id de la imagen para luego obtener más información.

Y ahora continuamos con el visor, en donde podremos mostrar las imágenes en tamaño completo y con más información:

visor.php

query($consulta);

$fila = $resultado->fetch_array(MYSQLI_ASSOC);

/* Luego conectamos a la BD y obtenemos la
primera y ultima id de imagen, para saber cuando
se trata de la ultima y/o primera imagen de la
galeria */
$consulta = "SELECT min(id) as minimo, max(id) as maximo FROM imagen";
$resultado = $conexion->query($consulta);

$datos = $resultado->fetch_array(MYSQLI_ASSOC);
?>




// Creamos el titulo de la pagina de acuerdo a la imagen
Galería de Imágenes - <?php echo $fila['titulo'];?>

// Incluimos la hoja de estilo y librerias





  
  
  
  
   
/* De lo contrario, mostramos una imagen
indicando que no hay nada antes */
  
  

  

/* Desplegamos la imagen actual en tamaño completo
con su respectiva descripcion */
  "
  alt="" />

/* Comparamos la id actual a la mayor id de la tabla
para saber si es la ultima imagen. Si no es igual
mostramos un enlace para la imagen siguiente */
  

  
  
  

/* De lo contrario, mostramos una imagen
indicando que no hay nada despues */
  
  

  
/* Establecemos un pequeño div para la
informacion de la imagen. Cuando el usuario
pase el mouse por encima, apareceran los datos
(titulo y descripcion) */
  Información de la imagen 

/* Este div mostrara la informacion de la imagen.
Por defecto lo dejaremos oculto mediante CSS y
solo se mostrara al pasar el mouse sobre el */
     
     Título: 
     Descripción: 
     
  

/* Al igual que en index, mostraremos la
galeria completa, solo que esta vez las
imagenes seran mas pequeñas */
 
	Mis otras imágenes
	query($cons);

	while($filas = $res->fetch_array(MYSQLI_ASSOC)) {

	?>

	
        " alt="imagen" />

Resumiendo el archivo anterior, lo que hicimos fue:

Obtuvimos la id enviada por parámetro para obtener la información de la imagen actual.
Obtuvimos la primera y última id de imágenes almacenadas para saber cuando tratamos con la primera y/o última imagen de la galería.
Cargamos la hoja de estilos y librerías.
Comparamos la id actual con la menor existente en la base de datos para saber si es la primera imagen de la galería. De ser así, mostramos una imagen que indica que no hay nada antes. De lo contrario, mostramos una imagen con un enlace a la imagen anterior.
Mostramos la imagen actual en tamaño completo.
Lo mismo que el punto 4, pero ahora con la última id y la imagen siguiente.
Creamos un div para la información de la imagen el cual permanecerá oculto hasta que el usuario pase el mouse por encima.

Ya con eso listo, nos falta declarar nuestras funciones en jQuery y nuestra hoja de estilos. Partiremos por las funciones:

funciones.js

$(function(){

/* Este es un efecto inicial sobre la galeria,
en el cual decimos basicamente que cuando
la pagina cargue, las imagenes se muestren mas
oscuras y que al pasar el mouse por encima
tomen su opacidad natural. Para esto utilizamos
las funciones animate, hover y stop de jQuery. */
  $('#galeria img').animate({
	"opacity" : .5
  });

  $('#galeria img').hover(function(){

	$(this).stop().animate({ "opacity" : 1 });

   }, function(){

	$(this).stop().animate({ "opacity" : .5});

  });

/* Repetimos el mismo efecto para la galeria
pequeña que mostramos en el visor */

  $('#galeria-small img').animate({
	"opacity" : .5
  });

  $('#galeria-small img').hover(function(){

	$(this).stop().animate({ "opacity" : 1 });

  }, function(){

	$(this).stop().animate({ "opacity" : .5});

  });

/* Ahora aplicamos la funcion para que cuando
un usuario pase el mouse por encima del div con id
masinfo, se despliegue la informacion del div info
del visor. Esto lo haremos mediante las funciones
hover, fadeIn y fadeOut de jQuery */

  $('#masinfo').hover(function(){
 	$('#info').fadeIn();
  }, function(){
        $('#info').fadeOut();
  });

});

En resumen, lo que hicimos aquí fue:

Creamos 3 funciones para que estén disponibles cuando la página cargue.
La primera agregará un efecto de opacidad sobre la galería que se desactivará cuando el usuario pose el mouse encima.
La segunda agregará el mismo efecto pero a la galería pequeña que añadimos al visor.
La tercera hará aparecer la información de la imagen cuando el usuario pose el mouse sobre el div ‘masinfo’ del visor y a su vez la hará desaparecer cuando mueva el mouse de ahí.

Y ahora nos queda la parte final, que es declarar los estilos:

estilos.css

body {
	background: black;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	margin: 0 auto;

}

#galeria{
	width: 800px;
	margin: 0 auto;
}

#galeria img{
	border: 1px solid white;
	padding: 1px;
	margin-right: 10px;
	margin-bottom: 10px;

}

#galeria-small{
	width: 800px;
	margin: 0 auto;
}
#galeria-small img{
	width: 100px;
	height: 100px;
	border: 1px solid white;

}

#contenedor{
	width: 800px;
	margin: 0 auto;
	padding-top: 10px;
}

#imgcompleta{
	border: 1px solid white;
}

a img{
	border: none;
}

/* Este es el div con informacion de
la imagen. Inicialmente cargara con
display:none para que no sea visto a menos
que el usuario pose el mouse encima */

#info {
	display: none;
}

Y con eso tenemos nuestro resultado final:

Primera vista de la galería

La imagen toma su opacidad natural al pasar el mouse por encima

Vista completa de la primera imagen

Información de la primera imagen al pasar el mouse por encima del div de información

Vista completa de imagen que tiene una previa y una siguiente

Vista completa de la última imagen

Antes de terminar, y comprendiendo que este tutorial ha sido largo, integramos una nueva característica a estos tutoriales:

Y con eso damos por terminado este tutorial, recordándoles como siempre que ha sido:

Esperamos que haya sido de utilidad para Uds. Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear un slideshow para nuestros sitios Web

Xabadu — Thu, 26 Mar 2009 01:42:39 +0000

Quizás el término “slideshow” sea algo desconocido para muchos. Cuando hablamos de eso, nos referimos a un set de diapositivas animadas, dentro de las cuales podemos incluir imágenes, que van rotando con el paso de un tiempo determinado.

Esta sin duda es una inclusión muy atractiva que podemos hacer en nuestros sitios Web si tenemos contenido que quisiéramos desplegar de esa forma. Pues bien, hoy, en CLH, les traemos una sencilla forma de aplicarlos en sus páginas Web mediante el uso de librerías de carga rápida y que les entregarán un efecto sólido para sus visitantes.

Todo el detalle, como siempre, después del salto.

Cómo crear un slideshow para nuestros sitios Web

Como siempre, lo primero:

Implementos necesarios:

Un editor Web, aunque de cualquier forma si no poseemos podemos utilizar block de notas. Como siempre, recomendamos, Adobe Dreamweaver, el cual pueden descargar desde este enlace.

Para esto nos apoyaremos en la librería JQuery y en un simple script llamado Simple Slideshow, el cual no es necesario descargar, ya que lo incluiremos en el código final de este ejemplo.

Procedimiento:

1.-Lo primero que hacemos será crear un nuevo archivo HTML y lo llamamos como queramos. Para este tutorial, lo hemos llamado ejemplo.html

2.- A continuación, hacemos todos los ajustes que queramos con respecto al título de la página y estilo de esta (color de fondo, márgenes, etc.).

3.- Luego, justo después de cerrar la etiqueta y antes de cerrar la etiqueta <HEAD>, insertaremos el siguiente código, correspondiente a los ajustes de CSS que se realizarán sobre el slideshow: <blockquote> <style type=”text/css”> ul.ppt { position: relative; } .ppt li { list-style-type: none; position: absolute; top: 0; left: 0; } .ppt img { border: 1px solid #e7e7e7; padding: 5px; background-color: #ececec; } </style></blockquote> 4.- A continuación, luego de abrir la etiqueta BODY, crearemos una lista no ordenada con elementos Li. Cada uno de estos elementos contendrá la ruta de una de las imágenes que queremos desplegar en nuestro Slideshow. En nuestro caso mostraremos las siguientes imágenes: Entonces, nuestro código quedaría de la siguiente forma, justo después de abrir la etiqueta BODY: <blockquote> <ul class=”ppt”> <li></img></li> <li></img></li> <li></img></li> </ul></blockquote> Como podemos ver, el elemento de lista no ordenada (ul) hace un llamado al estilo ppt definido en nuestro CSS más arriba y luego listamos las imágenes que pondremos con sus respectivas descripciones. 5.- Luego, insertaremos el código que hará el llamado a la librería JQuery para hacer los efectos correspondientes. Este código lo ponemos a continuación del anterior y no es necesario modificarlo: <blockquote> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type=”text/javascript”> $(‘.ppt li:gt(0)’).hide(); $(‘.ppt li:last’).addClass(‘last’); var cur = $(‘.ppt li:first’); function animate() { cur.fadeOut( 1000 ); if ( cur.attr(‘class’) == ‘last’ ) cur = $(‘.ppt li:first’); else cur = cur.next(); cur.fadeIn( 1000 ); } $(function() { setInterval( “animate()”, 5000 ); } ); </script></blockquote> 6.- Guardamos nuestro HTML asegurándonos que las imágenes se encuentren en la misma ruta y abrimos el archivo en nuestro navegador favorito. Para ver como queda el ejemplo, pueden ver <a href="http://www.comolohago.cl/uploads/ejemplo.html" target="_blank">este enlace</a>. Como podemos ver, hemos obtenido un muy buen resultado basándonos en librerías bastante livianas para ejecutar en nuestros sitios Web y de esta forma podemos ofrecer un contenido muy atractivo a nuestros visitantes. Los instamos a probar distintas formas de aplicar estos slideshows y acomodarlos a sus propias necesidades, como se puede ver, el código es muy simple y no requiere mayores conocimientos ni ajustes. Como siempre, recuerden que este tutorial ha sido: Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación. Esperamos que este tutorial haya sido de utilidad para Uds. Muchas gracias por leer y será hasta una próxima oportunidad. Staff CLH </article> </main></body></html>