Formulario multi pasos con CSS y Jquery

Vamos a ver la forma de crear una sencillo formulario  del tipo multipaso, muy útil cuando tenemos formularios muy extensos o con demasiados campos, utilizaremos Jquery easing para animar la transición de las diferentes etapas o partes de las que se compondrá y le daremos el toque artístico con un poco de CSS (no esperen mucho, no soy bueno para el CSS).

Bueno lo primero sera confeccionar nuestro formulario, para ello utilizaré el siguiente código, el cual no presenta secretos.

En primer lugar definimos la cantidad de pasos para confeccionar una barra de progreso, para mantener informado al usuario y evitar que deje el formulario abandonado y perdamos trafico,  en este ejemplo serán 3 (Configurar tu cuenta, Perfil Social y Detalles Personales).

<form id="formulario">
<!-- progreso -->
<ul id="progreso">
<li class="active">Configurar tu cuenta</li>
<li>Perfil Social</li>
<li>Detalles Personales</li>
</ul>
</form>

La barra de progreso sera una simple etiqueta ul  con un id llamado progreso, con sus correspondientes etiquetas li (tantas como pasos tenga el formulario) [highlight color=yellow]no olvidar asignar la clase active al primer li[/highlight] que mediante jQuery y CSS posteriormente la dotaremos de vida.

Luego de definir los step o pasos del formulario, creamos diferentes campos fieldsets para contener cada paso y dentro todo lo que se requiera (inputs, h2, h3, p, label, etc).

<!-- fieldsets -->
<fieldset>
    <h2 class="fs-title">Crear su cuenta</h2>
    <h3 class="fs-subtitle">Paso 1</h3>
    <input type="text" name="email" placeholder="Email" />
    <input type="password" name="pass" placeholder="Password" />
    <input type="password" name="cpass" placeholder="Confirmar Password" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
    <h2 class="fs-title">Perfil social</h2>
    <h3 class="fs-subtitle">Tu presencia en las redes</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
    <h2 class="fs-title">Detalles Personales</h2>
    <h3 class="fs-subtitle">Nunca venderemos tu informaci&oacute;n personal</h3>
    <input type="text" name="fname" placeholder="Nombre" />
    <input type="text" name="lname" placeholder="Apellido" />
    <input type="text" name="phone" placeholder="Telefono" />
    <textarea name="address" placeholder="Direcci&oacute;n"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>

En cada fieldset, adicional a los campos que requiramos, debemos agregar un input tipo button para avanzar de paso en paso y otro para retroceder (según corresponda), por tanto en este ejemplo necesito agregar uno el primer fieldset para avanzar, dos al segundo y uno para retroceder en el ultimo junto a uno tipo submit.
Si probamos el código obtendremos una simple pagina de fondo blanco con un formulario donde veremos todos los campos así.

Un toque de sensibilidad

Ahora lo principal es hacer mas vistoso nuestro formulario, para ello sacamos nuestros dotes artísticos (mas de alguien fumara algo para encontrar su inspiración xD) y nos zambullimos en CSS, yo no tengo estudios formales en CSS, pero la web es basta y repleta de información al respecto, al final de este articulo les dejare algunos link relacionados para el que desee profundizar alguno de los temas tratados en este post.

Primero importaremos una fuente tipografica desde el CDN de fuentes de google, yo usare la fuente Montcerrat, pero pueden usar la que estimen, desde google fonts podran navegar, buscar y elegir la que mas les agrade.

/*importamos una fuente personalizada desde google*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

Un pequeño reset de estilos al documento,  sera muy básico.

/*reset basico*/
* {margin: 0; padding: 0;}

Altura del documento html y aplicamos un combo de imagen como patern + gradient, cave señalar que la mayoría de CSS que usaremos, no aplica en internet explorer, esto debido a su incompatibilidad con esta versión de CSS 3 (pero bueno a quien le importa esos dinosaurio xD).

html {
    height: 100%; /*Image only BG fallback*/
    background: url('bitmaps/gs3.png'); /*background = combo gradient + imagen pattern*/
    background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
}

A pesar que mencione que no funcionaba bien en internet explorer  debemos asegurarnos que los otros navegadores entiendan nuestra codificación de estilos y para ello utilizaremos los prefijos para sus respectivos motores de render:

[checklist]
  • -webkit- : Para la familia Chrome / Chromium y Safari
  • -moz- : Para Mozilla Firefox y derivados
  • -o- : Para Opera (o si, aun existe)
  • -ms-: Para internet explorer 9 (pero linear-gradient no funciona bien en ie)
[/checklist]
background: -webkit-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -moz-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -o-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -ms-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');

Aplicamos la fuente importada

body {
    font-family: montserrat, arial, verdana;
}

Ahora el formulario y su contenido

/*estilo formulario*/
#formulario {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#formulario fieldset {
    background: #ffffff;
    border: 0 none;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    width: 80%;
    margin: 0 10%; /*Posicionamos todos los fieldset uno encima del otro*/
    position: absolute;
}
/*Ocultamos todos menos el primer fieldset*/
#formulario fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#formulario input,#formulario textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#formulario .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#formulario .action-button:hover,#formulario .action-button:focus {
    -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

Solo resta la parte superior del formulario, donde se marcan los pasos:

/*progreso*/
#progreso {
    margin-bottom: 30px;
    overflow: hidden; 
    counter-reset: step; /*CSS contador para numerar los pasos, lo aprendi en http://www.w3schools.com/*/
}
#progreso li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progreso li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*conectores de progreso*/
#progreso li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*lo pone detrás de los números*/
}
#progreso li:first-child:after {
    /*el conector no es necesario antes de que el primer paso*/
    content: none; 
}
/*marca activo/completado los pasos en verde*/
/*El numero del paso y el conecto quedaran en verde*/
#progreso li.active:before,#progreso li.active:after {
    background: #27AE60;
    color: white;
}

Con esto hemos terminado la parte «artistica» de nuestro formulario. Si probamos nuestro formulario notaran que se ve bien esteticamente, que solo vemos la primera parte del formulario, pero al darle click al boton Next, no pasa nada, ahora le daremos vida con un poco de JQuery.

Crearemo un nuevo archivo con extension js, llamenlo como quieran, yo lo llamare funciones.js

$(document).ready(function(){
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //propiedades fieldset que vamos a animar
var animating; //

$(".next").click(function(){
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activar el siguiente paso en progreso usando el índice de next_fs
    $("#progreso li").eq($("fieldset").index(next_fs)).addClass("active");

    //mostrar el siguiente fieldset
    next_fs.show(); 
    //ocultar el fieldset actual con estilo
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //como la opacidad de current_fs está reducida a 0 - almacenado en "now"
            //1. escala current_fs hasta 80%
            scale = 1 - (1 - now) * 0.2;
            //2. traer next_fs desde la derecha (50%)
            left = (now * 50)+"%";
            //3. aumentar la opacidad de next_fs a 1 a medida que avanza
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
        }, 
        //Esto viene del plugin easing
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //des-activar paso actual en progreso
    $("#progreso li").eq($("fieldset").index(current_fs)).removeClass("active");

    //mostrar el fieldset anterior
    previous_fs.show(); 
    //ocultar el fieldset actual con estilo
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. escalar previous_fs de 80% a 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
        }, 
        //Esto viene del plugin easing
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})

});

Ahora si hemos terminado, si desean que su formulario envié deben editar la ultima función del script.

Adicionalmente deben refererciar al plugin easing porque ocuparemos uno de sus metodos para animar nuestro formulario.

<!-- jQuery easing plugin -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>

A continuacion les dejare un enlace con una demo de este formulario y un link donde podrán descargar el ejemplo completo listo para usar o editar a su conveniencia.

Referencias

 

Demo

Ver Demostración

Descargar ejemplo

Por un Grub mas Atractivo

Muchos de nosotros y en general la mayoría de los usuarios de algún sabor Linux tratamos de mantenerlo lo mas hermoseado posible, cambiamos los iconos, el wallpaper, los menús, incluso usamos alguno que otro applets de escritorio como SuperKaramba (KDE) o GDesklets (Gnome). Y logramos unos resultados muy buenos.

Pero hay un momento en que nos sentimos un poco traumados, luego del arduo trabajo, y este momento es cuando iniciamos nuestro PC y tenemos ante nosotros un sistema dual (Linux, Window$) y el horrible aspecto de nuestro Boteador de turno. Situación superada por distros como Mandriva, SuSE, Fedora, entre otras, pero los usuarios Ubuntu no Y_Y, hasta Ahora xD.

Debido a esta situación decidí escribir el procedimiento mas eficaz y menos doloroso para poder disfrutar de un Grub mas vistoso. Y la receta es:

Edit= Esto esta dirigido y realizado sobre un ubuntu 7.04 pero puede extenderse a cualquier distro que utilice grub como boteador de inicio, solo varia la forma de instalar los paquetes pero en esencia es lo mismo. xD Suerte a todos.

Primero asegurarse que tenemos un sistema actualizado para evitar errores.

sudo apt-get update

ahora instalamos los splash que viene con la distro, muchos curiosos notaran que son enfocados en kubuntu, pero es solo un medio para un fin (que filosofal me salio xD)

sudo apt-get install grub-splashimages

luego de esto tendremos un directorio nuevo en «/boot/grub/splashimages» el cual contendrá unas imágenes que podremos ocupar de inmediato, pero en caso que queramos poner nuestra propia imagen (La idea original de este pequeño How) deberemos cumplir algunas condiciones como:

La imagen debe ser en formato .xpm
La resolución debe ser 640×480
La profundidad de 14 colores
Debe estar comprimida en formato .gz (Gunzip)

Luego la movemos al directorio de los splash, y editamos el archivo de configuración del Grub.

gksu gedit /boot/grub/menu.lst

buscamos la siguiente linea, que por lo general se encuentra de las primeras.

splashimage (hd0,2)/ruta imagen/imagen.xpm.gz

y reemplazamos donde dice imagen.xpm.gz por la nuestra.
y debería quedarnos man menos presentable xD, les muestro mi Grub para que se hagan una idea del resultado final.

Es evidente que al ser imágenes de 16 colores no resalten tanto, pero pronto cambiaremos esa situación con un nuevo How sobre este tema y realizaremos un trabajo aun mejor.

Hasta entonces.