Las funciones de CSS de jQuery son de las más utilizadas para hacer comportamientos interactivos que mejoren la experiencia de uso de las páginas web. Son perfectas para darse cuenta del potencial del framework Javascript, pero os adelantamos que sólo son una pequeña parte de lo que podremos hacer con jQuery.

El objetivo de este vídeo es practicar un poco más con los métodos de la clasificación CSS, que ya empezamos a relatar en videotutorial sobre el método css() y el siguiente vídeo que habla sobre offset() y otros métodos para averiguar posición y dimensiones de los elementos.

Veremos cómo realizar un formulario dinámico, que tiene la particularidad de mostrar explicaciones sobre lo que el usuario tiene que rellenar en cada uno de los campos. Todas las explicaciones aparecen cuando el el usuario pone el foco de la aplicación en cualquier campo, mostrando un mensaje en una capa flotante que dice lo que se espera escriba en el elemento donde se ha posado.

Para ello, aprenderemos a crear comportamientos cuando el usuario coloca o retira el foco de la aplicación de un campo, con los eventos focus y blur. Pero lo más importante será ver cómo se puede, mediante los métodos CSS de jQuery, altera dinámicamente el aspecto de la página web.

En el videotutorial explicaremos por la práctica a trabajar con el método css(), para alterar las propiedades CSS de cualquier elemento. Pero además conoceremos el uso de otros métodos para extraer la posición de los elementos y su anchura, ya que tendremos que utilizar esos datos para posicionar dinámicamente los mensajes de ayuda al lado de los campos.

También haremos hincapié en el vídeo sobre el uso de una etiqueta HTML para formularios, que ayuda bastante para hacer que nuestra página web sea un poco más inteligente. Se trata de la etiqueta LABEL, que hace que un texto de la página se asocie con un campo de formulario. Con ello conseguimos que, haciendo clic en el texto, se ponga el foco de la aplicación sobre el campo de formulario asociado, lo que provocará también que aparezca el mensaje de ayuda para explicar el campo donde está el usuario.

En definitiva, un videotutorial muy práctico que nos adentrará un poco más en el uso del framework Javascript jQuery. Tiene unos 36 minutos y esperamos os parezca interesante incluso para las personas con menos experiencia. Como podréis comprobar, hemos realizado la grabación de manera que se pueda entender por todas las personas, incluso que no tengan muchos conocimientos de CSS o del propio jQuery.