Desarrolla un increíble formulario de inicio de sesión con jQuery

Spanish (Español) translation by Steven (you can also view the original English article)

Una lucha que aún permanece hoy en día en el diseño web es mostrar toda la información redundante en cada página. Por ejemplo, un formulario de inicio de sesión. ¿Qué pasaría si hubiera una manera de hacer que el contenido sea fácilmente accesible en cada página, pero mantenerlo oculto hasta que sea necesario? Bueno, tu puedes hacer un panel superior que al hacer clic, se revelará tu propia identidad y tu contenido. Pero tenemos que hacer que esto se vea bien, así que también lo animaremos.

En este tutorial, crearemos un panel deslizante, que se desliza para revelar más
contenido, utilizando JQuery para animar la altura del panel. En este caso, lo haremos
creando un inicio de sesión hipotético para la nueva área tutsplus que estará disponible próximamente.

Paso 1 - Diseño de Photoshop

Primero necesitamos planificar nuestro diseño y hacer que se vea bien con Photoshop. Gracias
a Collis, y sus increíbles habilidades en Photoshop, tenemos un diseño elegante para trabajar.
Puedes obtener el archivo PSD anterior y posterior para una inspección adicional en la fuente
del archivo zip. Pero es bastante evidente. Tampoco tiene gradientes, así que
deberíamos poder hacer esto fácilmente con CSS.

Así debería lucir.

Aquí puedes ver cómo se verá la demostración en su estado normal.

Y así después de hacer clic sobre el botón.

Así es como se verá la demostración cuando el panel se deslice hacia abajo.

Paso 2 - Planificación de la estructura.

En primer lugar, necesitamos construir la estructura de la página. Para crear el diseño de arriba,
¿qué necesitamos todos estructuralmente en el HTML?

En primer lugar, necesitamos un encabezado que se extienda por todo el ancho de la página.

También necesitaremos un panel superior, que por ahora, fingiremos que está expandido permanentemente
hasta que insertemos JQuery.

Necesitaremos un área para el contenido normal de la página.

Finalmente, necesitaremos un descanso visual entre el encabezado y el contenido de la página, que
lo lograremos a través de una regla horizontal (hr).

Bien, entonces el diseño de la página es bastante simple. Aquí está:


<div></div>  <!--Header-->

<hr>  <!--Header Stripe-->


  <div>                  <!--Contains the button and panel-->
    <div>                <!--Contains the panel itself-->

      <div> This div will serve as the background of the panel</div>
    
    </div>
    <div><a>Login Here</a></div>  <!--Will be the button to slide the panel down-->

    <div><a>Hide</a></div>        <!--Toggles to this when the panel is slid down-->
  </div>
</div>


<div>

  All of the Content will go here
</div>

Wow... sin clases o contenido dentro, parece una gran cantidad de divs sin sentido,
pero todo será necesario para el CSS y JQuery más adelante. Ahora empezaremos a añadir
clases en preparación para el CSS.

Paso 3 - Preparación de CSS: Clases e ID's

Ahora tenemos que cambiar el esqueleto en un sitio real con CSS. Bien
¡comienza agregando clases e ID a todos esos divs! Puedes hacerlo fácilmente
imprimiendo el diseño de Photoshop y luego marcando las áreas y las clases asociadas
con un sharpie. Para esta demostración, haré lo mismo solo en Photoshop.
Aunque puede ser extremadamente feo, esperamos que te muestre las diferentes regiones
de la página.

Estructura.

Nota: Planeo tener la imagen normal no resaltada al desplazar.

Aquí está la página con las clases e ID añadidas:



<div id="header">
</div>

<hr id="header_stripe"/>

<div id="wrapper">
  <div id="toppanel">

    <div id="panel">
      <div id="panel_contents"> </div>
    </div>
    <div class="panel_button"><a href="#">Login Here</a></div>

    <div class="panel_button"><a href="#">Hide</a></div>
  </div>
</div>
<div id="content">

</div>

En este momento, te mostraría una captura de pantalla de lo que tenemos hasta ahora, pero ya no hablamos de
tener cualquier cosa excepto una regla horizontal y dos enlaces sin estilo. Tienes la idea
Ahora podemos darle estilos a la página.

Paso 4 - Vinculando los archivos

Antes de continuar, debemos introducir el archivo CSS en el maquetado.
Creé una hoja de estilo titulada "style.css". Mientras estamos agregando código
en el head, también podríamos agregar javascript y jQuery. Aquí está el
head de la página:


<head>
<title>Nettuts JQuery Sliding Panel</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></
<wbr>
    script> <script src="javascript.js" type="text/javascript"></<wbr>script>
</head>

Paso 5 - Darle estilos al maquetado: Header

Ahora tenemos que estilizar ese esqueleto de divs. Vamos a empezar de arriba a abajo. Primero
necesitamos el estilo del encabezado así como la etiqueta del cuerpo:


body {
    background: #202020;
    text-align: center;
    margin: 0px;
}

#header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 135px;
    background: #3f3f3f url(images/header.png) no-repeat center ;
    position: relative;
    border-bottom: 1px solid #4a4a4a;
}

Afortunadamente, no tenemos gradientes de los que preocuparnos aquí. Pero todavía tenemos un fondo con
imagen. También agregué un borde de 1px a la parte inferior del encabezado para un descanso visual.

La imagen de fondo es opcional. Me gustó tanto la fuente Bell Gothic BT, decidí
convertirlo en una imagen. Alternativamente, puedes elegir simplemente darle estilo al texto plano
agregando estilo a las etiquetas h1 y h2:


#header h1{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
top: 30px;
font-size: 40px;
color: white;
}

#header h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #7e7e7e;
}

Y luego modificando el encabezado a esto:


<div id="header">

  <h1>Sliding Panel</h1>
  <br />
  <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
</div>

Así que ahora la página debería verse así:

Puedes ver el paso 5 aquí.

Con la línea horizontal.

Paso 6 - Diseñar la regla horizontal

Aunque tenemos el borde inferior del encabezado para separar visualmente las secciones,
También necesitamos un borde más grueso y más visual. Como no podemos aplicar dos fondos
al encabezado, solo podemos darle estilos a la regla horizontal (hr):


hr#header_stripe{
height: 12px;
position: relative;
top: -7px;
background-color: #191919;
border: none;
color: #191919;

}

Ahora tenemos una separación más gruesa para agregar al borde de 1px:

Así debería verse la línea horizontal.

Puedes ver el paso 6 aquí.

Paso 7 - Diseño del panel

Ahora tenemos que diseñar el panel. Hasta que agreguemos JQuery, vamos a dar estilos
al panel como este fue expandido. Cuando hayamos terminado con el CSS, vamos
a animar la altura del panel a cero, y luego volver a la altura máxima; por lo tanto
necesitamos asegurarnos de que cuando cambiemos la altura, se mantenga igual.

Aquí está el código CSS, lo explicaré después:


#wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: center;
}
#toppanel {
    position: absolute;
    top: 135px;
    width: 900px;
    z-index: 25;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#panel {
    width: 900px;
    position: relative;
    top: 1px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}
#panel_contents {
    background: black;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    height: 100%;
    width: 904px;
    position: absolute;
    z-index: -1;
}

step7 step7 step7 Algo de espacio para el panel.

Ok, eso es mucho código para una caja. Bueno, es más que eso. Trata de inspeccionar
con Firefox Extension Firebug o Web Developer, y verás
todo lo que hace CSS.

Echa un vistazo al paso 7 que actualmente
luce así.

En primer lugar, necesitamos que el panel se coloque en absoluto, o bien, cuando se expanda,
que empuje todo el contenido debajo de él. Añadimos un wrapper, que envuelva
alrededor de todo lo demás, y luego lo centre. Si dejamos el wrapper fuera, el panel,
se va a posicionar como absoluto, no podría centrarse tan fácilmente.

A continuación, agregamos la información de estilo para el panel superior como un todo. Como puedes ver, esto incluye
los botones del panel.

Después de eso, agregamos la información de estilo para el panel que normalmente está oculto. Esta
es la caja que ves expandida ahora. Hice la altura 100%, de modo que si aumentamos
o disminuimos la altura del #toppanel, la altura de #panel será la misma.
Además, el desbordamiento está oculto, por lo que si se reduce la altura del panel superior,
se cortará del contenido del panel.

Si examinas el HTML anterior, verás el div con el ID de panel_contents.
Este div, aunque vacío, nos permite tener el fondo transparente, mientras que todavía
mantenemos el contenido dentro opaco.

Paso 8 - Añadir contenido al Panel

Antes de probar el panel, necesitamos agregar algo de contenido, para ver si lo oculta
correctamente. En este ejemplo, estamos creando un área de inicio de sesión, por lo que necesitamos agregar un formulario,
y también agregaremos una imagen para equilibrarla. Este paso es solo para agregar contenido
para la demo. Es menos importante y es más básico, así que no lo explicaré como
tanto como todo lo demás. Aquí está el código:

CSS:


.border {
    border: 15px #1d1d1d solid;
}

img.border_pic {
    border: 15px #1d1d1d solid;
    position: absolute;
    top: 110px;
    float: left;
    margin-left: 150px;
    width: 250px;
    height: 150px;
    z-index: 30;
}
div#login {
    width: 240px;
    height: 150px;
    position: absolute;
    right: 150px;
    top: 110px;
    background: #46392f;
    text-align: left;
    padding-left: 10px;
}
div#login p {
    color: #CCCCCC;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
div#login input#password {
    position: relative;
    right: -6px;
}
div#login input#login_btn {
    border: 1px #899690 solid;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 86px;
}

HTML:



      <img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" />
      <div class="border" id="login">

        <p>Username:
          <input type="text" size="15" name="username" id="username" />

          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />

          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" />

        </p>
      </div>

La imgen y el formulario para iniciar sesiín.

El paso 8 está disponible aquí.

Paso 9 - Probar el CSS

Ahora debemos asegurarnos de que si usamos jQuery para animar la altura de la parte superior
del panel, funcionará sin problemas. Ahora que tenemos contenido, vamos a cambiar el
alto del panel a 200 y ver qué pasa:

Espaciado.

Maravilloso. Puedes ver el paso 9 aquí.
Ahora vamos a cambiarlo a 0:

Con 0.

Perfecto. Ahora sabemos que el diseño funcionará con JQuery.

Paso 10 - Diseñando el botón

Si examinas el producto terminado, puedes ver que el botón que desliza el
panel abajo, cambia una vez que haces clic en él una vez. Esto significa que cambia. Por lo tanto,
necesitamos dos botones, y alternaremos su visibilidad. Antes de esconder uno de ellos,
sin embargo, necesitamos agregarles CSS.

Si recuerdas, les agregamos la clase ".panel_button". Aquí está el
código. Lo explicaré después:


.panel_button {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 1px;
    width: 173px;
    height: 54px;
    background: url(images/panel_button.png);
    z-index: 20;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    cursor: pointer;
}
.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 5px;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}

Estilos de los botones.

Botones del panel del paso 10

Primero centramos el botón utilizando la técnica de margen automático. Luego lo posicionamos
y añadimos un fondo del botón. También agregamos toda esa información de estilo
para adaptarse a todas las preferencias de los diferentes navegadores. Y hacer el
botón clikable haciendo que el cursor sea un puntero, cuando se desplaza sobre él. Esta
solo mejora la usabilidad.

También vamos a envolver el texto en un enlace, para proporcionar un efecto sobre la marcha,
así como posicionamiento.

Paso 11 - Botón HTML

Ahora, en preparación para el JQuery, necesitamos configurar los botones, con su HTML.
En primer lugar, vamos a agregar una imagen a cada botón y posicionarla con CSS,
verás el HTML en un segundo:


.panel_button img{
position: relative;   
top: 10px;
border: none;
}

Ahora, también necesitamos ocultar el botón Hide por ahora. Por mucho que odie, el estilo en línea,
creo que es más fácil agregar este CSS en línea, así que aquí está el nuevo código HTML para
los botones, con las imágenes:


    <div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/>
      <a href="#">Login Here</a>

      </div>
    <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" />

      <a href="#">Hide</a>
      </div>

Ok, así que, fíjate, ahora mismo, el botón de ocultar está oculto con un estilo en línea. Esto
se cambiará más tarde con jQuery. Aviso, también agregué un ID al segundo botón, así que
podemos apuntarlo más tarde fácilmente.

Botón de ingreso.

Botón del panel del paso 11

Paso 12 - Agregar el contenido

Este es un paso rápido, pero necesario, agregando contenido. Escribí una oración y añadí
Un párrafo de texto ficticio. Lo centré usando la técnica de margen automático, y
lo he coloreado de un color gris:


#content {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    position: relative;
    top: 90px;
    text-align: left;
    color: #545454;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 30px;
}

Párrafo de fondo.

Mira el texto detrás del panel en el paso 12.

Paso 13 - ¡Hora del JQuery!

Bien, para la parte final del tutorial, JQuery puedes usar la última versión JQuery
en jQuery.com. Si recién estás comenzando, asegúrate de revisar este otro
tutorial de Nettuts por Jeffrey Way, para excelentes recursos de JQuery. Ya he tomado
una copia de JQuery.com, y ya la ha vinculado a la página en el Paso 4.

Paso 14 - Piensa en lo que necesitamos

Primero pensemos en lo que necesitamos que haga JQuery antes de escribir el código.

Queremos activar la animación en el botón 'div.panel_button'.

Luego queremos animar la altura del panel a 400px.

También queremos cambiar el botón.

Luego queremos activar la animación inversa al hacer clic en 'div # hide_button'.

Por último queremos animar la altura de nuevo a 0px

Paso 15 - Escribe el código

Así que primero comenzamos por preparar el script con el siguiente JQuery:


$(document).ready(function() {
});

Now we write the code that goes inside there:

$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"
        });
   });       
});

Panel animado.

Panel en movimiento en el paso 15.

Al principio, cuando examinas el código anterior, algunos de ustedes se preguntarán por qué yo solo
estoy alternando en la primera acción. Bueno, hay que recordar que el botón de ocultar
también tiene una clase de panel_button. Por lo tanto, cuando haces clic en el botón 'Ocultar'
en realidad estás aplicando ambas acciones.

Paso 16 - Hacer que la animación se vea "real"

Así que ahora se ve bastante bien, pero aún podemos hacer más; como hacer que la animación
luzca mejor. Al animar, generalmente es importante tratar de imitar la vida real
cuanto más se pueda. En este caso, pienso en un ejemplo de la vida real, como un menú desplegable
proyectado en la pantalla. Recuerda que cuando tiras de ellos, lo haces más abajo y luego
se hará, luego vuelve a subir un poco. De la misma manera, cuando quieras ponerlo
retrocede, bájalo un poco antes de que suba muy rápido.

Tratemos de imitar eso:


$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "500px" }) .animate({
        height: "400px" }, "fast"); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"

        }, "fast"); 
      });       
});

Ten en cuenta que animamos el panel a una altura de 500 antes de ir a 400. También
agregamos una diferencia de velocidad como en la vida real, al hacer que ciertas partes sean más lentas. Si
miras la demostración, verás que cuando ocultas el panel, sigue apareciendo
500 primero. Nuevamente, esto es porque ambos botones tienen la misma clase. Así que realmente cuando
ocultas el panel, pasa por este proceso:

Animar a 500 y alternar

Animar de nuevo a 400 rapido

Animar de nuevo a 0 rapido

Ahora tenemos un panel deslizante que funciona con JQuery. Espero que hayas encontrado útil este tutorial.
Si es así, envíalo a Digg, StumbleUpon, DZone, etc.