Configuración

Una vez instalado el paquete, configuramos el componente para ajustar sus características a nuestro sitio web. Procederemos así:

  1. Activa el plugin de configuración, pues viene desactivado de forma predeterminada:

    1. En el menú Extensiones, elegimos Plugins

    2. Buscamos el plugin 'System - QR Card Config'

    3. Activamos el plugin haciendo clic en su campo 'Status'

  2. En el menú Componente, elegimos QR Card

  3. Aparece la pantalla con la lista de QR Cards registradas (vacía, al principio)

  4. En la zona de la barra de herramientas, hacemos clic sobre el botón Opciones

  5. Se muestra la pantalla de configuración del componente, con varias secciones

 

Sección Detalles

En esta sección se indica el tipo de URI codificada que el componente ofrece de forma predeterminada.

  • URI codificada. Indica el tipo de información registrada en la imagen QR generada. Se puede optar por:

    • Contenido dinámico. La URI codificada en la imagen QR contiene una dirección web donde se encuentra el contenido: una tarjeta interactiva. La tarjeta interactiva ofrece todas las demás opciones al mismo tiempo.

    • VCard estática. La URI contiene directamente los datos de contacto, en forma de VCard que puede añadirse a la agenda del teléfono móvil. En este formato no se incluye la foto del perfil, por motivos de espacio.

    • LLámame. La imagen QR sólo contiene el número de teléfono.

    • Envíame un SMS. La imagen QR permite enviar un SMS al teléfono de contacto.

    • Envíame un e-Mail. La imagen QR permite enviar un mensaje de correo electrónico a la dirección de contacto.

    • Encuéntrame. La imagen QR contiene una URI de Google Maps. Se utiliza la búsqueda de direcciones que ofrece el servicio de Google Maps para situar la dirección postal en un mapa.

    • Visítame. La imagen QR contiene la dirección de la página web de contacto.

 

Sección Código QR

En esta sección establecemos las opciones predeterminadas para el generador de códigos QR:

  • Formato de imagen. Se puede escoger entre JPEG, PNG o GIF para la imagen QR generada. La diferencia no se aprecia visualmente; genera la misma imagen, pero con diferentes formatos.

  • Corrección de errores. Determina el grado de tolerancia a errores que se utilizará para generar la imagen. Puede elegir entre bajo, medio, mejor y alto.

  • Tamaño. Establece el tamaño de la imagen en pixels entre 200px y 1400px. El tamaño predeterminado es 400px. Como los códigos QR son cuadrados, es suficiente indicar la medida de uno de los lados.

Nota: este generador usa la librería PHP qrcodelib de Y. Swetake (2000-2009), revisada por Terence Eden (2012).

Las siguientes secciones se refieren a la QR Card dinámica que se puede generar.

 

Sección Awesome QR

En esta sección se configura el componente para generar un código QR más atractivo, con la posibilidad de incorporar imágenes al código en forma de logo o como fondo. También cabe la posibilidad de usar imágenes animadas como fondo. Los parámetros están agrupados por categorías.

Posición

El código QR se forma a partir de una matriz de puntos situados en unas posiciones preestablecidas. Cada punto puede ser claro, u oscuro. El tamaño de los puntos puede variarse para permitir que la imagen de fondo sea visible a través de la trama formada por esta matriz. Se debe tomar la precaución de comprobar que el código puede ser leído cuando disminuye el tamaño de los puntos, a fin de ofrecer una imagen de fondo con mejor visibilidad.

En esta categoría encontramos los parámetros siguientes:

  • Tamaño. Establece el tamaño del código QR en pixels entre 50 y 1400. De forma predeterminada se muestra un código QR de tamaño 400 pixels. Ajusta el control para obtener el tamaño deseado.

  • Margen. Establece un margen alrededor del código QR donde no se incluirán puntos del código. El margen puede quedar en blanco, o incluir parte de la imagen de fondo.

  • Margen blanco. Indica si se debe dejar el margen en blanco, o permitir que se rellene con la imagen de fondo.

  • Escala de punto. De forma predeterminada se establece un valor del 35%, que permite la lectura correcta del código con la mayoría de las imágenes. Si no consigue leer el código, puede ajustar este parámetro con valores superiores, a costa de sacrificar la visualización de la imagen de fondo.

Color

Establece los colores a usar para generar el código QR, o permite que el algoritmo decida los colores más adecuados.

  • Color oscuro. Establece el color a usar en los puntos oscuros. De forma predeterminada, se usa el color negro, pero se puede usar cualquier color (oscuro) de la gama.

  • Color claro. Establece el color a usar en los puntos claros. De forma predeterminada, se usa el color blanco, pero se puede usar cualquier color (claro) de la gama.

  • Auto color. En función de los colores que predominan en la imagen de fondo, el algoritmo escoge de forma automática los colores que se usarán en el código QR.

Fondo

Determina como será el fondo del código QR: en blanco o con una imagen.

  • Imagen. Permite elegir una imagen para el incorporar al código QR

  • Usar como. Establece el tipo de uso que se dará a la imagen. Se puede optar por:

    • Imagen de fondo. Establece la imagen como fondo de todo el código QR. Los puntos de la matriz se colocan directamente sobre la imagen.

    • Logo. Establece la imagen como fondo del centro del código QR. Los puntos de la matriz se colocan alrededor de la imagen.

    • GIF animado. Funciona como la opción Imagen de fondo, pero la imagen que se utiliza contiene una animación. El resultado es un código QR cuya imagen de fondo se mueve.

Atenuación

Establece un filtro coloreado para el fondo del código QR. Si se usa una imagen, está se verá a través de este filtro. Puede usarse para homogeneizar algo una imagen con fuertes contrastes.

  • Color. Permite establecer el color del filtro.

  • Opacidad. Establece el grado de transparencia del filtro.

Logo

Establece las características del logo que aparece en el centro del código QR generado.

  • Escala del logo. Establece el tamaño del logo como un porcentaje del tamaño del código QR. De forma predeterminada es el 20%.

  • Margen. Establece el tamaño del margen alrededor de la imagen donde no se añadirán puntos.

  • Radio. Redondea las esquinas de la imagen con este radio.

 Duotono

  • Binarizar. Indica si la imagen debe convertirse a blanco y negro, sin escala de grises: cada punto de la imagen es blanco, o negro.

  • Umbral. Establece el umbral a partir del cual cada punto se considera blanco o negro. Permite establecer un valor entre 0 y 255. De forma predeterminada se establece el valor 128 (centro de la escala de valores).

Nota: este generador usa la librería Javascript de Sumi Makito (2017).

 

Sección Encabezado

En esta sección se configura el componente para generar el encabezado de la QR Card, pudiendo establecerse las siguiente opciones:

Color

  • Fuente. Establece el color del texto que se muestra en el encabezado.

  • Borde. Establece el color de los bordes para los objetos que se muestran en el encabezado: fotografía del perfil y botonera.

  • Gradiente. Establece dos colores para el fondo del encabezado, creando una transición suave entre ambos.

Imagen

  • Tamaño. Sirve para establecer el tamaño de la imagen del perfil. Se puede usar una fotografía, o un logotipo.

  • Posición. Sirve para colocar la imagen en el lugar que convenga.

 

 Sección Cuerpo

En esta sección se configura el componente para generar el cuerpo de la QR Card, con las siguientes opciones:

Color

  • Fondo. Establece el color de fondo para el cuerpo de la QR Card.

  • Fuente. Establece el color del texto en el cuerpo de la QR Card.

Fuente

  • Tamaño. Establece el tamaño del texto para toda la QR Card.

 

Sección Iconos

En esta sección se puede asociar un icono a cada información presente en la QR Card, con este detalle:

  • Empresa

  • Dirección

  • Página web

  • Dirección e-Mail

  • Teléfono móvil

Cada icono se puede establecer como mejor convenga en cada situación, para denotar la información que se refleja en cada línea de la QR Card.

 

Sección Servidor*

Cada QR Card de tipo dinámico puede codificar una URI diferente, dependiendo de si se utiliza un servidor virtual para entregar el contenido, o simplemente se usa el componente.

En caso de configurar un servidor virtual, cada usuario puede elegir el nombre de su servidor virtual; el nombre debe pertenecer a un dominio registrado por el usuario. De este modo, el código de la imagen QR se independiza del servidor donde se encuentra instalado el componente, e incluso del contenido asociado.

Las opciones que se pueden establecer son:

  • Esquema. Se puede optar por HTTP o HTTPS.

  • Nombre de host. Establece el nombre del host que servirá el contenido de la QR Card. Cuando se establece uno, el generador QR produce códigos más compactos, al utilizar únicamente al valor del campo alias de la QR Card.

En otro artículo encontrarás información ampliada sobre como configurar un servidor virtual para entregar el contenido de la QR Card.


*Nota: disponible solamente en la versión PRO.

 

Sección Tienda*

En esta sección se configura las opciones que permiten ofrecer este servicio a cambio de un precio.

  • Términos y condiciones

    • Artículo: selecciona un artículo de contenido con los términos y condiciones de venta del sitio. Se utiliza para generar el cuadro de verificación que obliga al cliente a aceptar los términos y condiciones de venta, donde se incluye un enlace a este artículo de contenido, que se abrirá en un popup si el cliente hace clic.

  • Notificar la creación

    • Administrador: selecciona un administrador al que notificar la creación de cada nueva QR Card que se vaya registrando en el sistema. Si se omite, no se envía este tipo de notificación.

  • Notificar la renovación

    • Administrador: selecciona un administrador al que notificar la renovación (venta del servicio) de una o varias QR Card. Si se omite, no se envía este tipo de notificación.

  • Período de prueba

    • Cuenta límite: indica cuantas QR Card puede crear un usuario antes de renovar al menos una de ellas. Si se indica 0, no se utiliza este mecanismo para limitar la creación de nuevas QR Card, permitiendo al usuario crear tantas como sea su deseo.

    • Plazo para despublicar: indica durante cuantos días puede utilizarse una QR Card para asegurarse de su utilidad; transcurrido ese plazo, la QR Card ya no se mostrará cuando un móvil lea el código QR. Tampoco se permite al usuario modificarla, una vez expirado el plazo. Para continuar utilizando el servicio, es necesario renovar aquellas QR Card en las que se esté interesado. Por cada QR Card renovada, es posible crear otra en periodo de pruebas. Si se omite, no se utiliza el mecanismo descrito y las nuevas QR Card no tendrán periodo de prueba, quedando operativas indefinidamente.

  • Renovación

    • Oferta de precios: crea una tabla de periodos de renovación y precios, que se ofrecerán al cliente en la lista de QR Cards para que pueda elegir el periodo que más le interese. Si se omite, no es posible vender al no haber oferta.

    • Código de moneda: indica el código de moneda en el que se realizan las transacciones económicas. El precio de todas las ofertas se debe indicar en esa moneda.

    • Porcentaje de impuestos: indica el porcentaje de impuestos que se cargará al precio de cada oferta. El precio se verá aumentado en ese porcentaje.

  • Notificar al cliente

    • Remitente: selecciona un administrador cuya dirección de correo electrónico será revelada al cliente cuando se le envíe el resumen de compra. Si no deseas atender en esa dirección, puedes crear un monigote de administrador, con una contraseña imposible y una dirección del tipo no responder.

    • Asunto: indica el texto del asunto, o una clave de uno de los ficheros de idioma, donde se encuentra el texto del asunto. Se hace así para que ofrecer la posibilidad de dirigirse a cada cliente en su propio idioma. El texto puede incluir la referencia {order_id}, que será sustituida por la referencia de compra en el momento de enviar el mensaje.

    • Texto: indica el texto del mensaje, o una clave de uno de los ficheros de idioma, donde se encuentra el texto del asunto. El texto puede incluir las referencias {payer_surname} y {order_details}, que serán sustituidas por el apellido del cliente y el detalle de su pedido respectivamente, en el momento de enviar el mensaje.

Es posible crear modificaciones de los idiomas instalados (usando el componente idiomas), para añadir ahí las traducciones para el asunto y el texto del mensaje. Simplemente copie la clave configurada en el componente y redacte un nuevo texto. Joomla hará las sustituciones en el momento de enviar los mensajes.


*Nota: disponible solamente en la versión PRO.

 

Sección PayPal*

Esta sección permite configurar PayPal como pasarela de pagos, y personalizar la apariencia de los botones.

Notificaciones de PayPal

  • Huso horario: elige el huso horario de tu servidor. Sirve para determinar la hora local de las transacciones.

  • Certificados SSL

    • Certificados del componente: utiliza los certificados proporcionados por PayPal, que se encuentran en una carpeta del componente.

    • Certificados de PHP: utiliza los certificados del servidor. Comprueba que están correctamente instalados.

    Nota: las comunicaciones con PayPal utilizan protocolos seguros, y utilizan un juego de certificados SSL. El componente incorpora los certificados proporcionados por PayPal, pero también es posible utilizar los certificados que vienen con la distribución de PHP, si están correctamente instalados.

  • Sandbox

    • Modo de pruebas (Sandboxed): el componente viene con este modo configurado. En este modo, las operaciones no se realizan con dinero real y no quedan reflejadas en el saldo de la cuenta.

    • Modo producción: en este modo las operaciones de realizan con respaldo económico, y el dinero fluye entre las cuentas.

  • Client Id: copia aquí el ID de cliente PayPal; hay uno diferente para cada modo. Identifica la cuenta que recibe el valor económico de las transacciones, así que es mejor no equivocarse en esto.

  • Webhook Id: este componente se ha programado para recibir notificaciones de PayPal del tipo checkout order. Para que funcione, es necesario crear en PayPal un registro de aplicación y añadirle un webhook. El webhook es una dirección del componente, que desencadena el proceso de renovación tras realizar las comprobaciones necesarias para impedir el fraude.

Nota: asegúrate de introducir el client id y el webhook id de pruebas en el modo de pruebas, y los de producción en modo producción. Estos identificadores se puede obtener en el panel de administración de PayPal.

Nota: la dirección que se debe introducir en el webhook de PayPal sería parecida a esta:

https://www.miservidor.com/index.php?option=com_qrcard&task=paypal.paid
 

Botones

PayPal ofrece una gran diversidad de aspectos para sus botones, pero sin perder por ello la imagen corporativa que los caracteriza.

  • Distribución

    • Horizontal: los botones se distribuyen en horizontal (uno desaparece).

    • Vertical: se muestran dos (o tres) botones apilados uno sobre otro.

     
  • Color: se puede optar por varias combinaciones de colores, típicas de PayPal.

    • Dorado

    • Azul

    • Plateado

     
    • Blanco

    • Negro

     
  • Silueta: se puede optar entre botones cuadrados o redondeados.

    • Cuadrada

    • Redondeada

     
  • Texto: PayPal sólo muestre unos pocos textos que animan al cliente a decidir su compra.

    • PayPal

    • PayPal pagar

    • PayPal comprar ahora

    • Pagar con PayPal

     
  • Leyenda: controla la aparición del pequeño texto bajo el botón.

    • Mostrar

    • Ocultar

Nota: no es posible especificar las opciones de leyenda en el modo vertical.


*Nota: disponible solamente en la versión PRO.

 

Sección Integración

En esta sección se establecen diferentes opciones que determina el comportamiento lógico del componente:

  • Multimedia

    • Ruta al directorio de archivos del usuario: Introduce aquí la ruta relativa a la carpeta de archivos del usuario, a partir de la misma opción del componente Multimedia. Sirve para enjaular los archivos del componente con respecto a los demás archivos del sistema.

    • Ruta al directorio de imágenes del usuario: Lo mismo que el anterior, pero para las imágenes. El propósito es el mismo: separar las imágenes de los usuarios del componente del resto de las imágenes del sistema.

    Nota: cada usuario tiene su propia carpeta privada para las imágenes.

  • Captcha

    • Habilitar. Establece el uso de un artefacto CAPTCHA durante la edición de la QR Card en el front-end. Se puede deshabilitar, si no tenemos uno configurado en nuestro Joomla.

  • Componente Contactos

    • Habilitar. Permite utilizar el componente Contactos de Joomla para recuperar los datos de contacto que muestra la QR Card.

    • Categoría. Permite indicar en que categoría del componente Contactos se registrarán los contactos que se vayan creando.

    Nota: Sólo es posible indicar la categoría con el componente Contactos habilitado. El usuario debería tener permiso para crear contactos en esa categoría.

 

Sección Permisos

Permite establecer los permisos para el componente QR Card, Lea la documentación de Joomla para saber la forma correcta de establecerlos.

Nota: durante la instalación se establecen los permisos mínimos necesarios para hacer funcionar el componente con usuarios registrados.