viernes, 18 de abril de 2014

Login con HTML5

Hoy por la mañana decidí comenzar a construir un programa para visualizar un login, mi entrada llevaba como titulo "Login con HTML5 (y algo de CSS3)" cosa que hasta cierto punto es un error, pues, hace poco rato en una comunidad de software libre, un experto en tecnologías Web publicó una paǵina que contenía un juego que el asegura se programó con HTML5, yo tenía la idea erronea de que HTML5, CSS3 y Javascript eran tecnologías muy por aparte, siendo que no, pues todas ellas están englobadas en lo que es HTML5; me habló también sobre el futuro de las aplicaciones, puntualizando que estás en su gran mayoría migrarán a la nube, es decir aplicaciones totalmente web, y pues habiendo aclarado esto paso a ejemplificar el login de HTML5 con un poco de estilos.
Y bien lo primero que necesitamos para elaborar el ya famoso login es un navegador web no importa cual sea el que tengamos instalado debe funcionar, otra cosa que necesitamos para los mismos fines es un editor de textos, yo, personalmente recomiendo Sublime Text que actualmente se encuentra disponible de forma gratuita en su versión 2 y que puede descargarse aquí , lo recomiendo por que tiene elementos importante que nos son de mucha utilidad al momento de generar código como por ejemplo el autocompletado de texto que es bastante util para reducir tiempos, aocntinuación pongo una captura de la interfaz de Sublime Textcon fines ilustrativos.



Pues bien, a grandes rasgos y de forma muy resumida esto es Sublime Text, pero
no es el único que existe, pues también está Notepad++ que puede ser descargado desde su web ofical desde aquí, ambos son software libre de muy alta calidad, y pues teniendo instalado uno de estos procedemos a generar código, lo primero que hay por hacer es generar el cuerpo de nuestro programa HTML de la siguiente manera :




Bueno, teniendo esto me situaré en la etiqqueta <body> para colocar el siguiente código

Login

UserName : Password :
Con esto se crea la carcasa de un login pero lo interesante viene cuando hacemos uso de CSS3 para definir estilos para esto me situaré dentro de la definición de la etiqueta "head" y escribiré el siguiente código :

Es importante recalcar que todo este bloque de código va dentro de la etiqueta "head" de nuesto código html y que para definir los colores hago uso de una tabla que me ayuda a ver que color me agrada y el código que corresponde al mismo.
Al finalizar y ya con un poco más de personalización podriamos llegar a un resultado como el siguiente :

Anexo el documento html y la fuente que utilicé aquí

No hay comentarios:

Publicar un comentario