Antes que nada les comento que trataré castellanizar en la medidad de lo posible la aplicación salvo en casos que son tan comunes que se hagan en inglés que hasta suena raro hacer algún tipo de traducción, lo cuál también es una práctica muy difícil para mí ya que entiendo el
spanglish fluídamente y lo escribo exclusivamente
bueno, vamos a trabajar, lo que haremos hoy será:
- Crear la estructura inicial de archivos dentro de nuestro folder "admin"
- Trazar el HTML del formulario de login
- Hablar un poco acerca de la clase usuario
Vamos a colocarnos en:
Raiz del Sitio\Admin\ * Crea los siguientes archivos, dejalos todos en blanco: - footer.asp
- header.asp
- login.asp
- estilos.css
- libreria.js
Más o menos así debe haber quedado tu folder:
admin1.gif * Acerca de los archivos header.asp y footer.asp
Por cuestiones de reutilización de código siempre es recomendable hacer un archivo header(encabezado, ya lo sabías ¿cierto?) y footer, los cuales estarán en la parte de arriba y abajo de tu aplicación, en esta ocasión estamos trabajando en el "backend" por lo cuál estos archivos residen dentro de la carpeta admin.
Regularmente la estructura básica del HTML debería estar en otro archivo y llamar a nivel de include a aquellos archivos que dan contenido, esto se hace más que nada en el front end, pues es dónde regularmente requires un poco de más dinamismo, en tanto que el backend puede llegar a ser un poco más constante en cuanto a su conducta se refiere, la idea es la siguiente:
Código:
<html>
<!--#include file = "header.asp"-->
<%
'Serie de condiciones que pone al archivo en vistas distintas por medio de llamadas include a diferentes archivos.
%>
<!--#include file = "footer.asp"-->
</html>
Obviamente en el header tendríamos nuestra definicón del tag head y todo lo que conlleva y el inicio del tag body, en el footer pues tendremos la parte de abajo del website, el footer de FDW podría comenzar donde se lee: "Todas las horas son GMT -7. La hora es 07:36:15."
No estoy aquí para enseñarte HTML, ya que estoy seguro que para este momento serás un experto, sin embargo, nunca está de más hacer un repaso rápido, así que brevemente detallaremos el HTML de nuestro formulario de login:
Abre tu archivo header.asp, y pega por favor el siguiente código:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<script type="text/javascript" src="libreria.js"></script>
</head>
<body>
Por favor, no nos acostumbremos a hacernos alérgicos al tipo de documento, siempre es una buena costumbre incluírlo, mas info
aquí.
Dentro de la etiqueta header estoy poniendo nuestra hoja de estilos, un archivo javascript y el
charset, este último es bien importante, y espero me perdones por no incluír titulo, descripción y demás, pero tú si lo puedes hacer bien en tu aplicación
Continuaremos en nuestro archivo footer.asp, por favor, abre copia y pega el siguiente HTML:
Bueno, ya tenemos nuestro esqueleto HTML, ahora si, podemos ponernos a trabajar con nuestro formulario de login:
Código:
<form action="login.asp" method="post" id="formaAsp">
<input type="hidden" name="formaEnviada" value="1" />
<input type="hidden" name="accion" value="ingresar" />
<fieldset class="forma">
<legend>Introduzca sus datos de acceso</legend>
<div class="formaEtiqueta">
<label for="uname">Usuario: </label>
</div>
<div class="formaCampo">
<input type="text" id="uname" name="uname" value="" maxlength="50" />
</div>
<br />
<div class="formaEtiqueta">
<label for="pwd">Password: </label>
</div>
<div class="formaCampo">
<input type="password" id="pwd" name="pwd" maxlength="8" vcalue="" />
</div>
<br />
<input type="submit" value="Ingresar" class="formaBoton" />
</fieldset>
</form>
Como te dije anteriormente, no pretendo re-enseñarte HTML, pero revisaremos rápidamente la estructura de nuestro formulario.
<form
action="login.asp" method="post" id="formaAsp">
Esta forma viaja al archivo login.asp, es decir que se llamará a si misma. Viaja por post, es decir que entre otras cosas los valores no se muestran en la URL El identiicador único de esta forma es formaAsp, todo elemento HTML debería en teoría tener un identificador único mediante el cuál poder hacer referencia.
Por lo demás, desde hace ya algunos años la tendencia es no maquetar con tablas, sino hacerlo con css, para los que venimos de la vieja escuela de tablas fué todo un reto pensar en contendores en lugar de celdas y posicionamientos en lugar de spacing y padding, pero una vez que lo conseguimos, no nos queda otra que presumirlo
Basicamente utilizamos un "wrapper" para los elementos label e input que haremos flotantes y utilizamos el <br /> para hacer un "clearing" entre lineas de elementos, pero nos dedicaremos mas adelante a dejarlo bonito.
Por lo demás por costumbre del lugar donde actualmente trabajo, tenemos que hacer aplicaciones que en la medida de lo posible cumplan con la famosa
sección 508 la cual se refiere a crear aplicaciones en las cuales las personas con ciertas discapacidades puedan acceder a la información, aquí en nuestro foro hay
mucha info al respecto , la parte destacable entonces, es esta:
Código:
<label for="uname">Usuario: </label>
<input type="text" id="uname" name="uname" value="" maxlength="50" />
Básicamente lo que se hace es asociar mediante el atributo "for" del elemento label, a la etiqueta del formulario con su campo correspondiente, de esta manera si una persona es invidente y está utilizando un lector de HTML, podrá llenar el formulario al saber que lo que contenga la etiqueta label es el texto para el campo que tiene un id uname, en este caso, el nombre de usuario.
Por último, abre el archivo login.asp y coloca todo el código:
Código:
<!--#include file = "../admin/header.asp"-->
<form action="login.asp" method="post" id="formaAsp">
<input type="hidden" name="formaEnviada" value="1" />
<input type="hidden" name="accion" value="ingresar" />
<fieldset class="forma">
<legend>Introduzca sus datos de acceso</legend>
<div class="formaEtiqueta">
<label for="uname">Usuario: </label>
</div>
<div class="formaCampo">
<input type="text" id="uname" name="uname" value="" maxlength="50" />
</div>
<br />
<div class="formaEtiqueta">
<label for="pwd">Password: </label>
</div>
<div class="formaCampo">
<input type="password" id="pwd" name="pwd" maxlength="8" vcalue="" />
</div>
<br />
<input type="submit" value="Ingresar" class="formaBoton" />
</fieldset>
</form>
<!--#include file = "../admin/footer.asp"-->
¿Qué crees? que ya me extendí demasiado por hoy, y tengo que cortar aquí, revisaremos la clase usuario en la próxima ocasión.
Saludos!