NorfiPC
NorfiPC » Publicación web » Mostrar gráficos en mi blog

Como mostrar el código QR de cada página de un blog o sitio web


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
Código para insertar de forma automática usando la API de Google Charts, el código QR con la dirección URL de cada página, para que los lectores puedan escanearlo con la cámara de un celular o tableta y cargar las paginas en su dispositivo. Marcador para el navegador que permite obtener el código de cualquier página, al navegar en internet.
Como mostrar el código QR de cada página de un blog o sitio web
En un artículo anterior mostrábamos como insertar de forma sencilla usando la API de Google Charts, gráficos en las páginas de un blog o sitio web.
De forma algo similar se puede obtener la imagen del código QR, con la dirección URL de cualquier página.
Es extrema utilidad debido al uso cada vez mayor de los dispositivos portables como teléfonos celulares o tabletas, para navegar en internet.
Al mostrar el código QR que corresponde a una página, facilitamos a los lectores que puedan cargarla en su celular o tableta.
Solo es necesario apuntar y escanear la imagen con la cámara que incluyen estos dispositivos y si posee la aplicación necesaria, pueden cargarla en su navegador web.
De esa forma se hace innecesario escribir en su navegador una dirección URL, que de por si es muy incómodo.
Debemos aclarar que la aplicación para leer los códigos QR está incluida en todos los dispositivos con Android.
Puedes leer más información sobre los códigos QR en otro artículo de nuestro sitio.



¿Como obtener el código QR de la dirección de una página?


Para obtener la imagen del código URL de una página web, se hace la petición usando la siguiente dirección:

Solamente necesitamos cambiar los valores de dos parámetros:
chs - Indica el tamaño de la imagen en pixeles.
chl - Indica el dato a codificar, puede ser texto o la dirección URL de una página web.
Por ejemplo:

Para probar el código anterior, cópialo y pégalo en la barra de direcciones de tu navegador web y presiona la tecla Enter.
La imagen que devuelve en este caso es la dirección de esta página codificada:
Código QR



¿Como insertar el código para obtener el código QR correspondiente?


La dirección necesaria se debe usar dentro de una etiqueta de imagen de la siguiente forma:




¿Cómo obtener el código QR de varias páginas diferentes?


Por supuesto que el método anterior para especificar la dirección de cada página, no es factible cuando se trata de varias.
Para obtener de forma automática la dirección que corresponde a páginas diferentes podemos auxiliarnos de Javascript.
La variable "window.document.URL" devuelve la dirección URL correspondiente a una página.
Solo necesitamos insertar un sencillo script con un enlace que permita al usuario dar un clic, ejecutar la función y se escriba la imagen correspondiente.
Para eso usa el siguiente código.

Pruébalo en el siguiente enlace:
Carga el código QR de esta página.
En un blog de Blogger, Wordpress, Tumblr u otra plataforma, solo necesitamos agregar el código en nuestra plantilla para que aparezca en todos los post.




Marcador para obtener el código QR de cualquier página web


La API de Google Charts podemos usarla también para obtener el código QR que corresponde a la dirección de cualquier página, al estar navegando en internet y encontrar alguna que nos interese cargarla en nuestro celular.
Hay aplicaciones y extensiones que se valen de esta función, pero es mucho más sencillo y útil un marcador que no sea necesario instalar y principalmente que funcione en cualquier navegador web.
Usa cualquiera de los dos siguientes marcadores.
El primero carga el código QR en la misma página, el otro abre una nueva ventana.
Para guardar los marcadores o Bookmarklets solo arrástralos a la barra de marcadores de tu navegador web.
La API gratis de Google Charts que permite obtener imágenes con un código QR, estará funcional hasta el 20 de abril del 2015. Después de esa fecha podría o no estar disponible el servicio de forma gratuita.
Mas información en: Desarrolladores de Google



Páginas relacionadas



Síguenos en las redes sociales


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio

 
Inicio | Mapa del sitio | Sobre mí | RSS