Cómo crear un código QR para nuestro sitio web

Cómo crear un código QR para nuestro sitio web

16/10/2013
Número de visualizaciones

Cada vez más es habitual ver junto a cualquier cartel de publicidad el famoso código QR que proporciona la información deseada a los usuarios de dispositivos móviles.

Al capturar ese código a través de la cámara de nuestro móvil, con la aplicación adecuada (ej. Beetag ReaderQuickMark Reader,  Kaywa Reader, etc. ), recogemos la información que el creador del código ha deseado insertar. Normalmente la web del sitio al que hace referencia la publicidad.

Bien en este post vamos a ver como crear un código QR para nuestro sitio web, independientemente del sistema a través del que esté creado nuestro sistema.

Este proceso es muy sencillo a traves de una API de Google. Solo tendremos que incluir en nuestra web, donde deseemos que aparezca el código:

<img src="https://chart.googleapis.com/chart?chs=150x150&
cht=qr&chl=https://www.inesem.es"/>

Este código insertado dentro de nuestra web, nos generará una imagen como:

Si disponéis de la aplicación adecuada en vuestro móvil capturar esta imagen y veréis como automáticamente se abre la página web https://www.inesem.es

De este modo podemos facilitar a los usuarios que están navegando a través de PC, la carga de la página web en sus dispositivos móviles.

Por ejemplo para realizar esto en un sitio que tengamos implementado en wordpress, solo tendríamos que ir a la parte de administración (apariencia -> widgets).

Una vez aquí podemos usar por ejemplo el Widgets Text que nos permite escribir HTML. Este Widget lo ponemos en la posición deseada dentro de los apartados de la plantilla. La siguiente imagen dependerá de la plantilla que tengamos activa, ya que no todas tienen los mismos apartados:

Al visualizar luego nuestra web, veríamos algo así:

Bien, como se ha comentado, este proceso lo que va a permitir es que cualquier usuario que esté navegando por nuestra web, pueda abrirla en su móvil solo capturando el código QR mostrado.

Ya estamos en disposición de añadir otra funcionalidad más a nuestra web.

0
Categorizado en: Desarrollo de Aplicaciones

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Descubre MasterClass de INESEM. Una plataforma en la que profesionales enseñan en abierto

Profesionales enseñando en abierto