Pr Ctica 1 Javascript Html5 Y Css

Práctica 1: Javascript, HTML5 y CSS

El objetivo de esta práctica es conocer la herramienta jsfiddle (jsfiddle.net) y dominar la validación del lado del cliente con jquery, así como una pequeñaintroducción a CSS.

Registro en jsfiddle.net

1. Ir a jsfiddle.net




2. Dar clic en , aparecerá una pantalla como la que se muestra a continuación



3. Dar clic en el enlace Sign up, aparecerá lasiguiente pantalla, en donde tendrán que crear una cuenta y posteriormente les pedirá que completen con más información personal.


4. Capturen su información de perfil (No es obligatorio)

5. Dar clic enla opción Editor, esto nos llevará a la pantalla principal, pero ya estaremos logueados en la plataforma. Ver figura siguiente.

Creando el código html

1. Seleccionar el Framework jQuery1 2.x(edge)

2. Capture el siguiente código en el apartado HTML


















3. Ejecute el código en el botón de , se mostrará una pantalla similar a la siguiente en el apartado Result

Añadiendo estilosCSS externos

1. Agregar la siguiente URL en la opción de External Resources:
a. http://getbootstrap.com/dist/css/bootstrap.css


2. Ejecutar nuevamente el código, se mostrará una pantalla como lasiguiente, en donde se puede observar que se modificó el formato, esto es debido a la hoja de estilos bootstrap.css2. Note que aún no funciona la validación al dar clic en el botón submit.

Añadiendolibrerías para validación

1. Agregar las siguientes URLs (una a la vez) en la opción de External Resources:
a. http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js


2. Añadir elsiguiente código en el apartado de Javascript, este código es el que permite la validación del lado del cliente y también permite personalizar los mensajes de error utilizando las funciones del scriptde jquery.validate.min.js.







3. Ejecute nuevamente el código y podrá ver la funcionalidad de validación del lado del cliente con Jquery. Véase figura siguiente.

Guardando y compartiendo el...