Lectura de Código de barras con dibujo en canvas - JavaScript con QuaggaJs

Leer código de barras con JavaScript y cámara

En este post te mostraré cómo leer códigos de barras en el navegador web ya sea de una computadora o dispositivo móvil, usando la cámara del teléfono o la cámara web; y el lenguaje nativo JavaScript.

Esto hace que podamos hacer nuestras aplicaciones web todavía más diversas y con más características; en un ejemplo simple se me ocurre escanear el código de barras para un sistema de ventas.

La librería que vamos a usar se llama QuaggaJS y es capaz de leer códigos de barras con formato EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93 y CODABAR.

Con esto, podremos leer códigos de barras en dispositivos móviles o computadoras en tiempo real.

(más…)

Laravel: agregar campos a User

En este post te mostraré cómo puedes agregar campos de la tabla “users” en Laravel para así poder añadir algunos campos al modelo User. Explicado con otras palabras vamos a modificar la tabla de usuarios.

Con este modelo me refiero al usuario que se usa para iniciar sesión y en general hacer la autenticación en Laravel. Veremos cómo agregar otro campo además de los que ya existen.

(más…)

Comunicación entre ventanas de JavaScript

En JavaScript podemos abrir una nueva pestaña o ventana (window) y comunicarnos con ella. Es decir, abrir una ventana con window.open y después hacer algo de lo siguiente:

  • Enviarle mensajes o datos a la ventana hija, recién abierta
  • Desde la ventana abierta, enviarle mensajes o datos a la ventana padre

Veamos cómo comunicar o enviar datos entre ventanas con JavaScript. Al final del post dejaré un ejemplo para que puedas probarlo y analizarlo tú mismo.

(más…)

Checkbox en JavaScript

En este post te mostraré cómo trabajar con un input de tipo checkbox en JavaScript.

Será muy simple, veremos cómo marcar / desmarcar el input, y también cómo saber si está marcado o no.

Usaremos JavaScript puro; nada de frameworks.

(más…)

Vue JS: inyectar HTML en vista

Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos.

Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post.

(más…)

Tabla responsiva con Bulma CSS

El framework CSS de Bulma provee clases para agregar estilos a las tablas, así como contenedores de las mismas.

Hoy vamos a ver cómo hacer una tabla responsiva utilizando la clase table-responsive, clase que funciona pero para que lo haga debemos hacer algunos cambios con los div padres.

(más…)

Servidor web en tarjeta NodeMCU ESP8266

Crear servidor web con NodeMCU ESP8266

En este artículo te mostraré cómo configurar la tarjeta NodeMCU como punto de acceso, AP o SoftAP para poder conectarte a ella usando WiFi y pode consultar un web server.

Dentro de la tarjeta vamos a “embeber” un servidor web, que no es otra cosa más que responder con HTML a las peticiones, pero podemos modificar ese HTML ya que tenemos el lenguaje C++ en la tarjeta.

De hecho eso hacen todos los lenguajes de programación del lado del servidor: leen peticiones y modifican HTML para mostrarlo.

Esto abre un mundo de posibilidades, pues podremos hacer bastantes cosas, pero comencemos con lo básico y es convertir la tarjeta en un servidor web.

(más…)

Quitar quicklink de ouo (saltar ouo)

Saltar enlace QuickLink de ouo.io

En este post te mostraré una herramienta que he programado para saltar un enlace quicklink de ouo.io, el sistema de acortadores.

Hay algunos sitios web que usan este servicio para acortar, pero no lo hacen con un software de acortadores, en su lugar hacen algo como:

https://ouo.io/s/LASKFzcB?s=https://parzibyte.me/blog

O algo como:

https://ouo.io/s/LASKFzcB?s=https%3A%2F%2Fparzibyte.me%2Fblog

En donde el link es incluido en la página y se puede quitar fácilmente.

(más…)

Demostración openlayers con marcadores y coordenadas

Tutorial OpenLayers: marcadores, coordenadas, eventos y datos dinámicos

En este post te mostraré un ejemplo de proyecto con OpenLayers en donde se muestran:

  • Introducción a OpenLayers
  • Descargar OpenLayers
  • Creación de mapa
  • Centrado de mapa en determinada ubicación
  • Marcadores personalizados con imagen propia
  • Listener de eventos como click o zoom cambiado
  • Consumo de API PHP para obtener los marcadores

Voy a desglosar cada cosa y al final dejaré el código del proyecto completo.

(más…)

Factura PDF con PHP - Documento PDF

Factura PDF con PHP – Ejemplo completo

Resumen: generar una factura PDF con PHP, es decir, un ticket, recibo, boleta o invoice que tenga detalles de un cliente, del emisor, número de factura, fecha y productos que se venden, así como el total con impuestos y descuento.

Para generar la factura vamos a usar la librería dompdf que convierte HTML a un PDF nativo. Aunque por el momento será estática, puedes usar más tarde una base de datos con PHP.

(más…)