Descripción: Al igual que Foundation o Bootstrap, Materialize CSS es un framework para el desarrollo frontend responsivo que nos proporciona una serie de componentes CSS y ficheros JavaScript para trabajar. Me...
Contenido Que son las hojas de estilo (CSS) Elaborar el diseño de un login Código HTML Código de hoja en estilo en cascada Creación de la tabla de login Código de AJAX Código PHP
Que son las hojas de estilo (CSS) CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitios web se concentraban más en su contenido que en su presentación. HTML no pone mucha atención en la apariencia del documento. CSS describe como los elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general. Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página. Son tres maneras de asociar las reglas de estilo a las marcas HTML: Directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *.css
Primer Manera: Directamente a la marca
En la Imagen se muestra como asocia css en el elemento de HTML. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y backgroundcolor (define el color de fondo del texto). Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.
Segunda Manera: En el head de la página.
Podemos observar que en la cabecera de la página definimos la sección:
Tercera Manera: Definición de hojas de estilo en un archivo externo.
Es metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión .css Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora) pero estarán separadas del archivo HTML. La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las páginas del sitio web.
Nombre del Archivo
Como podemos observar en la imagen de arriba, para indicar el archivo de estilos externo, debemos agregar en la cabecera (head) del archivo HTML la siguiente marca: El archivo que tiene las reglas de estilo es (estilos.css):
Elaborar el diseño de un login
Como se aprecia en la imagen de arriba tenemos dos entradas de texto y un botón, en cual todavía no aplicamos nuestra hoja en estilo de cascada (CSS).
En esta imagen podemos observar cómo puede quedar después de aplicar código de CSS, para poder realizar se presenta el código de HTML a continuación, en seguida el Código CSS.
En código que se presenta estamos haciendo referencia a una hoja en estilo de cascada la cual tendrán que estar juntas, Con el nombre css.css
Estos atributos se encuentran en la entrada de texto, () implementación en HTML5 Placeholder: Contiene un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo. El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca. Autofocus: la propiedad autofocus, nos permite hacer que un campo de formulario tenga el foco por defecto. Requiered: Al oprimir el boton sin haber ingresado texto no nos deja y nos dara este aviso (“Completa este campo”)
Ahora para poder darle manejarlo utilizamos tres
y para identificarlos les ponemos un id que es la estrututura que se mira en el código HTML
Código de hoja en estilo en cascada El cual debemos guardar con el nombre css.css
Creación de la tabla de login La cual almacenara nombre de usuario, contraseña y tipo de usuario. Hasta aquí solamente hemos creado la estructura de nuestro login, que es el código html, y darle un poco de diseño con css. Ahora tendremos que crear una tabla de login en nuestra base de datos. Nombre de la tabla: login Identificador: idUser Nombre de Usuario: nombreUser Contraseña de Usuario: passwordUser Tipo de usuario que almacenara 0 ó 1en caso de que sea administrador será 1 en caso de que sea usuario normal será 0: tipoUser
Una imagen del login donde solo refresco la parte donde dice password incorrecto a través de Ajax.
Código de AJAX Vamos a utilizar el siguiente código para refrescar solamente en caso de que el usuario no se logueado correctamente, para ello vamos a crear un archivo con el siguiente código. El nombre con el que se va guardar el archivo sera: Ajax.js function objetoAjax() { // En esta función se identifica que navegador se Utiliza var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function validarUsuario() { divFormulario = document.getElementById('status'); var username=document.getElementById('username').value; var password=document.getElementById('password').value; xmlhttp=objetoAjax(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 &&xmlhttp.status==200) { //mostrar el formulario //divFormulario.style.display="block"; if(xmlhttp.responseText=='10'){ window.location="Usuario.php"; }else if(xmlhttp.responseText=='20') window.location="Administrador.php"; else divFormulario.innerHTML = xmlhttp.responseText } } //enviando los valores xmlhttp.open("POST","verificar.php?",true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("username="+username+"&password="+password); }
Código PHP El código de Ajax nos redirección a verificar.php que es el que contendrá las condiciones que validen nuestro logueo. Para ello crearemos un archivo con el código que se muestra a continuación. Nombre de archivo será verificar.php
