11 de octubre de 2014

Como generar barcodes lineales y QR barcodes con jQuery en pocas líneas de código

En el artículo anterior Quick Response Barcode o «código de respuesta rápida» perfilamos las dimensiones que tiene y puede alcanzar este tipo de software. También hablamos de la infinidad de servicios que nos permiten generar el código de forma sencilla y transparente ya sea a través de la instalación de un programa o directamente desde la barra de direcciones de nuestro navegador.

Ahora bien, ¿estamos dispuestos a crear códigos qr dependientes de servicios de terceros?

Con jQuery.qrcode generar códigos QR de forma dinámica en nuestro sitio web será muy fácil y tendremos la posibilidad de codificar alrededor de 2900 caracteres (8 bits).

Este plugin permite la creación de códigos QR de dos formas diferentes:

  • Dibujándolo sobre un objeto canvas: genera en el elemento que deseemos una etiqueta canvas de HTML5, y luego pinta el código sobre su superficie.

    Funcionará en los navegadores más modernos que soporten el objeto canvas de forma nativa:

    • Internet Explorer 9+
    • Firefox 31+
    • Chrome 31+
    • Safari 5.1+
    • Opera 24+
    • iOS Safari 7.1+
    • Opera Mini 7+
    • Android Browser 2.3+
    • Chrome for Android 37+

    Toda la información en http://caniuse.com/#feat=canvas

  • Generándolo a partir de capas o divs: crea el código dibujando cada punto a partir de un elemento div de HTML, por lo que funcionará en cualquier navegador.
Podemos ver una demostración que ilustra estos dos métodos en la dirección https://larsjung.de/jquery-qrcode/latest/demo/

Su uso es simple: seleccionamos con jQuery el elemento en el que queremos albergar el código y llamamos al método qrcode con el parámetro text y la información que queremos mostrar.

Obtenemos el código QR:



También podemos pasar parámetros al método para definir el aspecto del código QR: tamaño, color, fuente, bordes, etc.

Código QR resultante:



jQuery también nos proporciona otro plugin para generar barcodes o códigos de barras lineales, cuya concepción se basa en en la 'representación mediante un conjunto de líneas paralelas verticales de distinto grosor y espaciado que en su conjunto contienen una determinada información, es decir, las barras y espacios del código representan pequeñas cadenas de caracteres'.
Fuente: http://es.wikipedia.org/wiki/Código_de_barras

También resulta extraordinariamente fácil su uso, tan sólo tenemos que importar en nuestro web site la librería jquery-barcode.min.js que podemos bajarnos del sitio oficial http://barcode-coder.com/download/jquery-barcode-2.0.3.zip.

En este caso seleccionamos el elemento en el que queremos insertar el código y llamamos al método barcode con la cadena numérica a codificar y el tipo de codificación.




De la misma forma que los códigos de dos dimensiones, podremos definir el aspecto del barcode: color de fondo, color de las barras verticales, ancho y algo de las barras, etc.


Obtenemos el siguiente código de barras lineal:



Los tipos de códigos de barras que nos proporciona la librería son:

  • EAN 8
  • EAN 13
  • UPC
  • standard 2 of 5 (industrial)
  • interleaved 2 of 5
  • code 11
  • code 39
  • code 93
  • code 128
  • codabar
  • MSI
  • Data Matrix

Toda la información en http://barcode-coder.com/en/barcode-jquery-plugin-201.html


5 comentarios:

Anónimo dijo...

Son buenos tus comentarios, pero que pasa si lo que quiero es imprimir el QR, al parecer no tiene opcion para hacerlo, o conoces alguna manera de mandarlo a un archivo, por ejemplo un png.

Saludos GRC

Jose Maria Acuña Morgado dijo...

Buenos días GRC.

Los códigos QR bidimensionales generados a través de jQuery devuelven un objeto Canvas de html5. Si pulsas con el botón derecho del ratón sobre el código te aparecerá un menú contextual con la opción 'Guardar imagen como...', al menos en Mozilla Firefox y en Google Chrome.

Como comenté en el post anterior (Quick Response Barcode o «código de respuesta rápida») existen otras alternativas para obtener la imagen correspondiente al QR code. Señalo sólo tres pero hay muchas más:

http://www.qrplanet.com/es/generador-qr-code/
http://www.codigo-qr.es/
http://www.barcode-generator.org/

Cuando dependemos de servicios de terceros, corremos el riesgo de que detengan su mantenimiento o que el servidor esté caído e incluso de que la página desaparezca.

Considero que la mejor opción para la integración en un blog o sitio web es bajarnos las librerías javascript (jQuery es muy fácil de usar) a nuestro proyecto para tener el control completo y usarlas de forma segura.

Un saludo!!

sergio andres Rodriguez Bautista dijo...

Como podría generar un barco de pero no horizontal sino vertical????

sergio andres Rodriguez Bautista dijo...

Como podría generar un barco de pero no horizontal sino vertical????

Jose Maria Acuña Morgado dijo...

No entiendo tu pregunta Sergio,
¿podrías ser más explícito?

Gracias.