como ya les conte antes en otro post el primer paso para tener un dominio web es elejir un buen hosting (para ver el post ) .bueno primero gracias a los que comentaron mis otros post y sigan disfrutando de este post en donde les dare una info de como personalizar tu web en este caso como hacer un formulario de inicio despegable, disfrutenlo.
Cómo hacer un formulario de ingreso desplegable
Hoy vamos a ver un pequeño truquillo (a lo flanders) 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:
texto planocopiar codigoimprimir?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Galería</a></td>
<td><a href="#">Contacto</a></td>
<td><a href="#">Log-in</a></td>
</tr>
</table>
</body>
</html>
en CSS
texto planocopiar codigoimprimir?
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.
2.- Ahora necesitamos crear nuestro formulario de ingreso, para esto usaremos un “<div>”, ya que este estará siempre en la página, pero se vera cuando nosotros los indiquemos.
Para esto, creamos un div como el siguiente:
texto planocopiar codigoimprimir?
<div id="login-form">
<form action="ingreso.html" method="post">
<input type="text" name="usuario" value="Usuario" id="usuario"/>
<input type="password" name="password" value="Password" id="password"/>
<input type="submit" value="Ingresar" />
</form>
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:
texto planocopiar codigoimprimir?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Galería</a></td>
<td><a href="#">Contacto</a></td>
<td><a href="#" id="login">Log-in</a></td>
</tr>
</table>
<div id="login-form">
<form action="ingreso.html" method="post">
<input type="text" name="usuario" value="Usuario" />
<input type="password" name="password" value="Password" />
<input type="submit" value="Ingresar" />
</form>
</div>
</body>
</html>
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:
texto planocopiar codigoimprimir?
#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:
texto planocopiar codigoimprimir?
display:none;
margin:auto;
quedando nuestro CSS de la siguiente manera:
texto planocopiar codigoimprimir?
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.
texto planocopiar codigoimprimir?
<script src="jquery-1.4.2.min.js" type="text/javascript" ></script>
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)
texto planocopiar codigoimprimir?
$(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)
texto planocopiar codigoimprimir?
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="funciones.js" type="text/javascript"></script>
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.
texto planocopiar codigoimprimir?
$('#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.
texto planocopiar codigoimprimir?
$(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 “<div>” 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
texto planocopiar codigoimprimir?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="funciones.js" type="text/javascript" charset="utf-8"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="contenedor">
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Galería</a></td>
<td><a href="#">Contacto</a></td>
<td><a href="#" id="login">Log-in</a></td>
</tr>
</table>
<div id="login-form">
<form action="ingreso.html" method="post">
<input type="text" name="usuario" value="Usuario" id="usuario"/>
<input type="password" name="password" value="Password" id="password"/>
<input type="submit" value="Ingresar" />
</form>
</div>
</div>
</body>
</html>
});
});
CSS
texto planocopiar codigoimprimir?
#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:rightright;
}
#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}
JQuery
texto planocopiar codigoimprimir?
$(function(){
$('#login').toggle(function(){
$('#login-form').slideDown();
},function(){
$('#login-form').slideUp();
});
$('#usuario').focus(function(){
$(this).val('');
});
$('#password').focus(function(){
$(this).val('');
});
});
Con esto, tienen listo su formulario desplegable. Solo queda hacer un diseño bonito para acompañar.
Cómo hacer un formulario de ingreso desplegable
Hoy vamos a ver un pequeño truquillo (a lo flanders) 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:
texto planocopiar codigoimprimir?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Galería</a></td>
<td><a href="#">Contacto</a></td>
<td><a href="#">Log-in</a></td>
</tr>
</table>
</body>
</html>
en CSS
texto planocopiar codigoimprimir?
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.
2.- Ahora necesitamos crear nuestro formulario de ingreso, para esto usaremos un “<div>”, ya que este estará siempre en la página, pero se vera cuando nosotros los indiquemos.
Para esto, creamos un div como el siguiente:
texto planocopiar codigoimprimir?
<div id="login-form">
<form action="ingreso.html" method="post">
<input type="text" name="usuario" value="Usuario" id="usuario"/>
<input type="password" name="password" value="Password" id="password"/>
<input type="submit" value="Ingresar" />
</form>
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:
texto planocopiar codigoimprimir?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Galería</a></td>
<td><a href="#">Contacto</a></td>
<td><a href="#" id="login">Log-in</a></td>
</tr>
</table>
<div id="login-form">
<form action="ingreso.html" method="post">
<input type="text" name="usuario" value="Usuario" />
<input type="password" name="password" value="Password" />
<input type="submit" value="Ingresar" />
</form>
</div>
</body>
</html>
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:
texto planocopiar codigoimprimir?
#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:
texto planocopiar codigoimprimir?
display:none;
margin:auto;
quedando nuestro CSS de la siguiente manera:
texto planocopiar codigoimprimir?
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.
texto planocopiar codigoimprimir?
<script src="jquery-1.4.2.min.js" type="text/javascript" ></script>
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)
texto planocopiar codigoimprimir?
$(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)
texto planocopiar codigoimprimir?
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="funciones.js" type="text/javascript"></script>
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.
texto planocopiar codigoimprimir?
$('#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.
texto planocopiar codigoimprimir?
$(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 “<div>” 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
texto planocopiar codigoimprimir?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="funciones.js" type="text/javascript" charset="utf-8"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="contenedor">
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Galería</a></td>
<td><a href="#">Contacto</a></td>
<td><a href="#" id="login">Log-in</a></td>
</tr>
</table>
<div id="login-form">
<form action="ingreso.html" method="post">
<input type="text" name="usuario" value="Usuario" id="usuario"/>
<input type="password" name="password" value="Password" id="password"/>
<input type="submit" value="Ingresar" />
</form>
</div>
</div>
</body>
</html>
});
});
CSS
texto planocopiar codigoimprimir?
#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:rightright;
}
#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}
JQuery
texto planocopiar codigoimprimir?
$(function(){
$('#login').toggle(function(){
$('#login-form').slideDown();
},function(){
$('#login-form').slideUp();
});
$('#usuario').focus(function(){
$(this).val('');
});
$('#password').focus(function(){
$(this).val('');
});
});
Con esto, tienen listo su formulario desplegable. Solo queda hacer un diseño bonito para acompañar.