Generar QR Code con Google Charts

Generar QR Code con Google Charts

Como desarrolladores sabemos que los códigos QR permiten interactuar con el mundo a través de un teléfono inteligente, podemos generar QR Code con Google Charts muy fácilmente.

Hoy en día, los códigos QR se pueden ver en folletos, carteles, revistas, etc. Permiten de una forma rápida y sencilla de almacenar información que luego puede ser interpretada por nuestro teléfono inteligente.

Al escanear un código QR utilizando el teléfono inteligente, se obtiene un acceso inmediato a su contenido. El lector de código QR puede realizar una acción, como abrir el navegador web para una URL específica, abrir una aplicación, desbloquear una bicicleta, realizar un pago y una infinidad de acciones posibles.

Depende del lenguaje hay dependencias que te permiten manejar la generación de estos códigos, el problema muchas veces es que para poder implementar algo tan sencillo, requerimos de la instalación de varios repositorios, dependencias, paquetes, configuraciones y tener habilitado nuestro servidor para poder generarlos. ¿Qué problema no?

Bueno, buscando una forma de poder generar fácilmente y evitando toda la configuración anterior, encontré una solución donde podemos generar QR Code con Google Charts fácilmente.

Tenemos una URL http://chart.apis.google.com/chart la cual debemos pasarle por query params los siguientes argumentos:

  • cht: Indica el tipo de gráfico que queremos mostrar, para nuestro caso sería qr.
  • chl: Es el contenido en String que queremos como contenido de nuestro código QR.
  • chs: Es el tamaño width, height qué deseamos para nuestro código.

Todos los argumentos son requeridos así que no olvides enviarlos todos.

Este sería un ejemplo de QR que apunta a este mismo post.

Si te gustaría conocer más sobre los argumentos que acepta esta api puedes revisarlo en la documentación de Google Charts

Si te ha parecido útil, compártelo con tus amigos en tus redes sociales.

¡Hasta un próximo post!

Nuevo Theme para Febrero 2016

Theme para Febrero

Este blog comenzó como una recopilación de aprendizajes a lo largo de mi carrera profesional, compartiendo cada experiencia vivida, celebrando las cosas buenas y como las que no han sido tan buenas también. Muchos themes han ido y venido, la mayoría no han sido mis favoritos y es hora de cambiar las cosas, por eso he decidido que debo tener un nuevo theme para febrero 2016.

Ya en publicaciones anteriores había comentado que estoy buscando un nuevo theme para mi website, el que estaba nunca me gustó del todo, pero había que salir con algo, aplicando la teoría del Producto mínimo viable
(MVP) nos dice que:

Un producto mínimo viable tiene sólo las características básicas suficientes para lanzar el producto, y no más.

Y por eso decidí comenzar con lo que tenía para ese entonces, pero desde hace un tiempo para acá he seguido de cerca lo fácil que es leer en medium.com por su estilo de diseño, fuente, facilidad de lectura y muchas cosas más, me inspiró a cambiar de theme.

Luego de tanto buscar finalmente me decidí a probar este theme (que está instalado actualmente), pensando que sería solo el nuevo Theme para Febrero 2016, vamos a ver cómo influye esto en visitas, calidad del contenido, comentarios y todo el feedback de todos los lectores, ustedes serán los primeros influenciadores para mantener este Theme o si busco otro para marzo. WOW ya vamos para marzo…

Bueno, espero que les guste este cambio de diseño en el blog, yo lo estoy disfrutando un montón.

¡Hasta un próximo post!

Raw output Handlebars.js

Muchas veces necesitamos colocar en HandlebarsJS caracteres especiales que no deben ser parseados o convertidos. Para esto hay una solución muy sencilla, y lo dejo aquí como un recordatorio que esto existe.

Para lograr conseguir este raw HTML output simplemente debes usar triple llave {{{ }}}

Y todo el contenido HTML no interpretado por el navegador se irá.

¡Hasta un próximo post!

Tamaño estandar de banners

Este es un artículo algo viejo pero puede servir de mucho como un histórico. Cual es o fue el tamaño estándar de un banner. La publicidad en Internet ha cambiado mucho desde aquellos tiempos en los que un banner estático invadía la pantalla.

¡Hasta un próximo post!

¿Pero, qué es un diseño responsive?

Hoy en día accedemos a Internet desde todo tipo de dispositivos móviles por lo que es un requisito obligatorio que una web sea capaz de adaptarse a los diferentes tamaños de pantalla de los dispositivos. El diseño web responsive responde a un diseño con una correcta visualización de una misma página en diferentes dispositivos, pudiendo ser un móvil, una tablet o un desktop.

Este diseño responsive se caracteriza por tener imágenes muy fluidas que se adaptan a todo tipo de tamaño de las diferentes pantallas de los dispositivos, además de permitir una navegabilidad rápida, ofreciendo una lectura muy cómoda sin contenidos duplicados y botones adaptados para el uso de cada dispositivo.

Es necesario ofrecer una web adaptable a las diferentes pantallas, ya no solo con el fin de evitar la pérdida de clientes, actuales y potenciales, y ventas, ahora Google puede hacerte descender de sus primeros puestos por no tener una web adaptada al móvil o incluso hacerte desaparecer por ello.

Si tienes una web que aun no es responsive deja tu comentario.

¡Hasta un próximo post!

Herramientas para Wireframe

Todos los proyectos en etapa inicial necesitan tener un boceto rápido acerca de como quedará la interfaz, poder validar, medir la experiencia de usuario y usabilidad. Para ello, usamos Wireframes, según Wikipedia:

En diseño web, un wireframe es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para comprobar la usabilidad de un sitio web.

La principal ventaja es que ofrece una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc.).

Aquí hay algunas herramientas gratis y otras pagas.

iPhone Mockup

Wireframe Tools

MockNow

Wireframe Tools

Mockingbird

pidoco

Wireframe Tools

Lovely Charts

justinmind

Wireframe Tools

Cacoo

Jumpchart

Wireframe Tools

Lumzy

Creately

Wireframe Tools

Gliffy

frame box

Wireframe Tools

Mockflow

Pencil

Wireframe Tools

SimpleDiagrams

JustProto

Wireframe Tools

Denim

Balsamiq Mockups

WireframeSketcher

Wireframe Tools

iPlotz

FlairBuilder

Wireframe Tools