Mostrando entradas con la etiqueta web. Mostrar todas las entradas
Mostrando entradas con la etiqueta web. Mostrar todas las entradas

Generar imágenes QR con PHP usando qrlib.php

   
   Vamos a generar imágenes QR en PHP de una manera sencilla utilizando qrlib.php. Lo haremos de una manera muy fácil, usando la función QRcode::png.

   Lo primero, como siempre, es descargarnos la librería en este ENLACE. Una vez descargada, la descomprimimos y la añadimos a nuestro proyecto.


 En el código php tenemos que incluir la ruta al fichero qrlib.php que está en la carpeta que hemos añadido. El código más básico para generar una imagen qr, teniendo como datos una url, es el siguiente:

include_once dirname(__FILE__)."/phpqrcode/qrlib.php";

// --- url
$url = "https://es.wikipedia.org";

QRcode::png($url);

   A la función png le podemos pasar ciertos parámetros para cambiar la imagen del qr. Le podemos pasar una ruta para guardar la imagen, el tamaño de la imagen (ECC Level), los pixeles y el tamaño del frame. Los distintos valores para el tamaño de la imagen son los siguientes:

  • QR_ECLEVEL_L
  • QR_ECLEVEL_M
  • QR_ECLEVEL_Q
  • QR_ECLEVEL_H

   El L es el más pequeño y el H es el más grande. Jugando con estos niveles y los pixeles podemos obtener la imagen más grande o más pequeña y con más resolución o menos.

   Estos parámetros lo vemos con el siguiente código

include_once dirname(__FILE__)."/phpqrcode/qrlib.php";

// --- url
$url = "https://es.wikipedia.org";

QRcode::png($url,"temp/01.png",QR_ECLEVEL_L,3,1);
echo '<img src="temp/01.png"/>';

   El 3 corresponde a los pixels y el 1 al frame (el frame es como un margen blanco en la imagen en todos los lados). En tmp se guarda la imagen:

   Os voy a poner como se escribirian los datos para mandar un teléfono, sms, skype o email (la variable es $codigo, en los comentarios están las distintas formas del código para mandar teléfono, skype, etc):

include_once dirname(__FILE__)."/phpqrcode/qrlib.php";
// --- sms y telefono
//$codigo = "sms:568999666";
//$codigo = "tel:568999666";

// -- email
$email="sandritascs@gmail.com";
$subject="Test qr";
$body = "Comprobación del test qr";
$codigo="mailto:".$email."?subject=".urlencode($subject)."&body=".urlencode($body);

// --- skype
//$codigo = "skype:".urlencode("usuarioSkype")."?call";

// --- generar imagen
QRcode::png($codigo,"temp/01.png",QR_ECLEVEL_L,3,1);

echo '<img src="temp/01.png"/>';
 
En el video se puede ver una demostración del funcionamiento. Aquí teneis los ficheros del ejemplo del video junto con la librería --> DESCARGA

Sandra Campos

Etiquetas

, , , , , ,

Comparte si te gusta

Tutorial Animaciones y efectos botones CSS3 - Entrega 2



   En esta entrega de animaciones y efectos para botones con CSS3 os muestro otros 4 efectos para dar a vuestros botones. Podéis encontrar el código en el siguiente enlace:


   El primer efecto consiste en que el botón se mueva hacia arriba, como si estuviese flotando (efecto float). El tipo de animación es una transición de transformación. Podemos ponerle una propiedad para el tiempo (transition-timing-function) para que se acelere al final, al principio, etc. Cuando pasamos el puntero por encima del botón (evento hover) lo que hacemos es mover el botón en el eje Y hacia arriba con un valor negativo (traslateY(-10px)).


   El otro efecto es similar al anterior, lo que cambia es que en vez de moverse hacia arriba se mueve hacia abajo (down). Únicamente tenemos que cambiar el traslateY en el evento hover.

   El tercer efecto es que cuando pasemos el puntero, aparezca una flecha al lado de nuestro botón. En este caso vamos a utilizar pseudo-elementos en css, en concreto :before. Con esto lo que hacemos es añadir contenido después del contenido original. Tenemos que utilizar la propiedad de css content.
   El código es el siguiente:


   Crearemos un triángulo y calculamos el centro con (left: calc(50%-10px);) y le daremos borde y color. Dependiendo de dónde queramos que salga el triángulo o flecha (top, bottom,right,left) tenemos que cambiar esas tres propiedades de css. Así por ejemplo si queremos que salga hacia arriba utilizariamos:
top: calc(50%-10px);
border-width: 0 10px 10px 10px;

   Por último cuando es el evento hover lo que tenemos que hacer es mover este triángulo hacia afuera con traslateY. Dependiendo de donde pongamos la flecha se trasladará en un eje u otro y positivo o negativo.

   El último efecto es rellenar el fondo del botón desde el centro gradualmente.
   Vamos a crear un cuadrado (que al principio no se ve) y lo vamos a ir agrandando hasta que ocupe todo el fondo. La animación consiste en ir agrandando ese cuadrado hasta que ocupe las dimensiones del botón.


   NOTA: no podemos utilizar estos dos últimos efectos, que utilizan pseudo-elementos, con un botón creado con la etiqueta input. Esto es debido a que input no es un contenedor, por lo que no va a funcionar el efecto.

   Para saber más de pseudo-elementos en css:
http://librosweb.es/libro/css_avanzado/capitulo_3/pseudo_elementos.html