La idea de este documento es mostrar algunos plugins interesantes de jQuery que permiten

resolver algunas funcionalidades comunes, muy utilizadas actualmente en los sitios web.

A lo largo y ancho de la web se puede encontrar una gran variedad de plugins de jQuery, pero en
esta ocasin se presentarn tres plugins interesantes para este taller:

QR code generator: genera cdigos QR en forma muy sencilla con JQuery.

Datepicker plugin: permite seleccionar una fecha desde un calendario desplegable.
Password strength checker: chequea la fortaleza de un password introducido en una
caja de texto.

QR code generator plugin

Como sabemos, un cdigo QR es un mdulo para almacenar

informacin en una matriz de puntos o en un cdigo de barras
bidimensional. Presenta tres cuadrados en las esquinas que permiten
detectar la posicin del cdigo al lector. El objetivo de los creadores
fue que el cdigo permitiera que su contenido se leyera a alta
velocidad.
(Fuente: wikipedia).

Para utilizar el plugin QR code generator, en primer lugar, debemos descargarlo de su sitio
oficial (https://larsjung.de/jquery-qrcode/) y luego debemos incluirlo, adems de la librera
jQuery, en nuestro documento HTML (dentro del cabezal).

<script src="jQuery.js"></script>

<script src="jquery.qrcode.min.js"></script>

(Nota: asumimos que el archivo js del plugin y el de jQuery se encuentran en el mismo directorio
que el archivo HTML, de lo contrario debemos modificar la ruta relativa al incluir los scripts).

Seguidamente, debemos incluir un script que nos va a servir para incluir nuestro cdigo
JavaScript y utilizar el plugin.

<script src="script.js"></script>

(Nota: es importante destacar, que la librera JQuery debe ser la primera incluida en el cabezal
del documento HTML, siguiendo el orden que se presenta en este documento).
En nuestro HTML debemos incluir un div en donde se va a colocar el cdigo QR al generarlo, en
nuestro ejemplo, el div se va a identificar con el id = container.

<div id="container"></div>

Dentro de nuestro script.js debemos, en primer lugar, establecer el texto o url que representar
el cdigo QR, por lo que debemos generar un array asociativo (como mnimo) con la siguiente
estructura:

var options = {

text: Texto a mostrar en el QR

};

Adems, podemos establecer valores para otros parmetros que refieren a la forma de
renderizacin, tamao, color, etc. (Por ms informacin sobre estos parmetros, dirigirse a la
pgina del plugin antes mencionada en este documento).

Una vez establecido el array asociativo de configuracin, debemos invocar la funcin que genera
el cdigo QR y lo coloca en un contenedor de nuestro HTML.

$('#container').empty().qrcode(options);

Un ejemplo completo del JS necesario par la generacin del cdigo QR podra ser el siguiente:

function generateQR(){

var textValue = $("#txtQR").val()

var options = {

text: textValue

};

$('#container').empty().qrcode(options);

Este ejemplo toma un texto desde una caja de texto (input) y genera un cdigo QR a partir de
dicho texto y lo muestra en un div cuyo id es container.