Web

En el post de hoy te enseñaré a comprimir una imagen usando JavaScript al seleccionar una imagen con un input de tipo file. Con comprimir me refiero a reducir el tamaño del archivo de imagen, cambiando su calidad. Verás que podrás reducir la imagen hasta el 20 % de su calidad sin que se note (y podrás comprimirla incluso más). De este modo puedes reducir el tamaño de una imagen antes de subirla a un servidor o cosas por el estilo (cambiando su peso, no su medida en pixeles). Todo esto lo haremos del lado del cliente trabajando con JS, Canvas y URL. Yo hago este post porque estoy usando el storage de Firebase y necesito subir archivos pero no quiero que se agote mi plan gratuito. También te servirá a ti para ahorrar ancho de banda y almacenamiento en tu servidor, o tal vez solo quieras hacer una app que reduzca la calidad de las imágenes. ...

Hoy voy a enseñarte una app móvil y web que sirve para llevar el registro de las deudas y gastos compartidos entre cierto grupo de personas. En esta app puedes registrar las deudas que tienes, y las otras personas pueden registrar lo que tú le debes a ellas. Además, las deudas o gastos pueden ser de persona a persona o compartidas entre todos. A lo largo de este post te mostraré las características de la app, los módulos que tiene y cómo funciona. Desde ahora te cuento que esta es una PWA y puede ser usada en móviles o en computadoras como si fuera nativa. Entre sus características encontramos: Sincronización de datos en tiempo real Trabajo sin conexión (los datos se suben cuando la conexión regresa) PWA que puede ser usada como nativa o en el navegador web Manejo de usuarios Control de deudas con opción para repartir los gastos y liquidar las deudas Filtros para acreedores y deudores Totalmente gratuita y open source, puede ser usada como un proyecto de estudiante Tú puedes tener tu propia versión, solo debes configurar el SDK de Firebase y comenzar a usar la app Por cierto, la he hecho usando Firebase con Firestore Database y Vue con Buefy. ...

Hoy voy a enseñarte cómo convertir cualquier aplicación web en una PWA o Progressive Web App. Tú puedes programar en cualquier lenguaje y Framework, ya que las PWA no están atadas a algo más allá de JavaScript. Así que mientras tu app conste de archivos del lado del cliente, podrás convertirla en PWA. Y con estos archivos me refiero a CSS, JS, HTML, imágenes, etcétera. Te repito que para crear una PWA no necesitas usar un framework específico, así que puedes usar JavaScript puro, Angular, Vue, React, jQuery (bueno, jQuery no, ya es obsoleto) y cualquier otro que genere JavaScript al final. ...

Hoy ando trabajando con algunas cosas de Firebase, específicamente migrando de Realtime database a Firestore y me confundí un poco al eliminar un documento. Por ello es que en este post te mostraré cómo eliminar un documento (de una colección) a través de su ID al usar Firestore Database en la versión web. ...

En este post te mostraré algo muy simple pero que no todos sabemos al principio: cómo conectar un lector de código de barras a nuestra aplicación de JavaScript. Con esto me refiero a un lector de código de barras físico, conectado a la computadora ya sea por USB o PS/2. Vamos a leer el código de barras y saber cuando el código se ha terminado de leer. Todo esto en la web con JavaScript y un input. Nota: recuerda que en mi blog ya te enseñé a leer códigos de barras en JavaScript con la cámara del dispositivo, pero no con un lector físico de esos que tienen “luces rojas”. ...

En este post te mostraré un programa que he terminado de hacer y que es totalmente gratuito. Se trata de un software para rentar consolas de juegos o computadoras por tiempo y cobrar por ese tiempo, con opción para agregar productos adicionales a la renta. El sistema gratuito te ayudará si tú tienes un negocio de renta de consolas de juegos o tienes un cibercafé. De cierto modo esto podría ser una alternativa a CafeStation de CafeSuite o Control de Ciber. Este sistema permite registrar equipos como consolas de juegos o computadoras con precio por hora, colocar tiempo libre o un tiempo límite y agregar productos al consumo de la renta. Entre sus características se encuentran: Control de dispositivos con descripción y precio por hora Gestión de productos para vender, con descuento de inventario Módulo para rentar consolas, computadoras, etcétera ya sea por tiempo libre o con límite Escritorio con reporte de rentas y productos vendidos, así como gráficas de ventas y detalles Ajuste de redondeo y tolerancia para el costo de la renta Impresión de tickets en impresora térmica Soporte para móviles Opción para usar a través de la red de área local (LAN) A lo largo de este artículo te mostraré los módulos del programa, cómo descargarlo y cómo usarlo. Por cierto, no es un post falso ni algo para distribuir virus. Realmente te ofrezco un programa totalmente gratuito (no versión demo, sin restricciones) tal y como todo lo que publico en mi blog. ...

Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM. Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue. Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm. Nota 2: en febrero de 2023 intenté usar este método y si instalas la última versión tal vez te aparezca un error. Para evitarlo, en el siguiente paso en lugar de usar npm install --save chart.js usa npm install --save chart.js@3.2.1, yo pongo la 3.2.1 porque es la última que me ha funcionado, pero me imagino que mientras sea menor a la 4 todo debería funcionar. La guía está en: https://www.chartjs.org/docs/latest/migration/v4-migration.html ...

Hoy vamos a ver cómo cortar un array o extraer elementos de un arreglo usando programación en JavaScript, de modo que podamos obtener cierta cantidad de elementos de un array. Esto puede ser útil cuando queremos tomar los primeros N elementos del arreglo, o dividir el arreglo en porciones. ...

En este post de programación en PHP te mostraré cómo escanear el directorio actual (donde se ejecuta el script) para obtener una lista de todas las imágenes existentes, ya sean gif, png o jpg. Obviamente con este ejemplo tú vas a poder obtener la lista de archivos de cualquier extensión o que cumplan con determinado patrón. Para esto vamos a usar la función glob. ...

En este post de programación en PHP te mostraré cómo extraer el texto de imágenes o mejor dicho cómo usar Tesseract OCR desde este lenguaje, de modo que podamos digitalizar el texto de una imagen usando PHP. Al final esto que te muestro es un simple wrapper o una envoltura, ya que si bien vamos a procesar la imagen con PHP, internamente vamos a invocar a Tesseract. Pero bueno, al final veremos cómo usar OCR con PHP para extraer el texto de imágenes. Obviamente te voy a dejar el ejemplo de código. ...