javascript

Rotar imagen en navegador web con JavaScript y canvas

En este artículo te voy a enseñar a rotar una imagen con HTML y JavaScript a través de canvas, de manera que podrás girar una imagen los grados que tú quieras, es decir, rotarla 90, 180, 270 o cualquier cantidad.

Veremos cómo cargar una imagen, pintarla en un canvas, agregarle rotación y después hacer cosas como descargar esa imagen o enviarla al backend que puede ser con Node, C#, PHP, etcétera.

(más…)

Por parzibyte, hace
Datos formateados como tabla en ticket en impresora térmica

JavaScript: tabular datos con límite de longitud, separador y relleno

El día de hoy veremos un algoritmo que he querido desarrollar desde hace mucho y que no fue tan complejo como creí. Se trata de una forma de crear una tabla con JavaScript y que los datos se acomoden automáticamente en cada columna para que no superen una longitud predefinida.

Datos formateados como tabla en ticket en impresora térmica

Datos formateados como tabla en ticket en impresora térmica

De este modo podremos crear tablas (en forma de texto) en donde el contenido se va a ajustar automáticamente, especificando un separador y una longitud por columna.

(más…)

Por parzibyte, hace
Dividir cadena en JavaScript usando separador y arreglo

JavaScript: separar cadena en bloques

En el post de hoy vamos a ver cómo dividir una cadena en pedazos si es que supera una máxima longitud. Por ejemplo, separar la string en JS si mide más de 5, y además de eso dividirla en fragmentos de N cantidad.

Vamos a ver cómo separar una cadena cada cierto número de caracteres y también cómo dividirla en trozos pequeños colocados en un arreglo donde se respete una cierta longitud.

(más…)

Por parzibyte, hace

Prevenir salto de línea en textarea de HTML

En este post vamos a ver cómo evitar que el usuario presione “Enter” en un textarea de HTML para que no se puedan agregar nuevas líneas o saltos de línea.

Te voy a enseñar a prevenir que el usuario agregue más líneas dentro del textarea escuchando el evento del teclado, y a partir del mismo puedes hacer más cosas para prevenirlo al momento de copiar y pegar o arrastrar.

(más…)

Por parzibyte, hace

Tiempo relativo con JavaScript y RelativeTimeFormat

En este post de JavaScript vamos a mostrar el tiempo relativo transcurrido o faltante entre 2 fechas de manera relativa usando Intl.RelativeTimeFormat.

Básicamente vamos a mostrar el “hace 2 minutos”, “hace 2 horas,” “dentro de 1 día”, “dentro de un mes” pero siendo capaces de cambiar el idioma.

De este modo podremos mostrar el tiempo que falta o el tiempo que ha transcurrido con JavaScript en cualquier idioma.

(más…)

Por parzibyte, hace
Cambiar ubicación e idioma (locale) en páginas web

Cambiar ubicación e idioma en página web

Hoy vamos a ver cómo modificar o falsificar nuestro idioma y ubicación en un sitio web. Esto sirve a los programadores para:

  1. Probar si el sitio web funciona en varios idiomas
  2. Revisar si la ubicación se mueve y no exponer la propia ubicación al momento de hacer pruebas

También puede servir para otras cosas como para no revelar tu ubicación real a las páginas web o ver una página en otro idioma.

Por cierto, lo haremos con Google Chrome pero me imagino que cualquier navegador decente debe funcionar.

(más…)

Por parzibyte, hace
Bot de Telegram con base de datos MySQL

Telegram y MySQL: conexión usando bot

En este post vamos a ver cómo realizar la conexión de Telegram con MySQL a través de un bot, de modo que podamos guardar y consultar datos de una base de datos de MySQL desde Telegram.

Telegram bot con MySQL - Listar e insertar registros a base de datos con comandos

Telegram bot con MySQL – Listar e insertar registros a base de datos con comandos

Con lo que veremos vamos a poder insertar datos en una tabla de MySQL desde Telegram y cualquier chat (siempre y cuando nuestro bot pueda leer los mensajes).

También vamos a ver cómo guardar el nombre del usuario y la fecha de envío del mensaje. Será un CRUD (sin Update) básico pero puedes partir del mismo para hacer cosas más específicas.

(más…)

Por parzibyte, hace
Calcular nota final de unidad y laboratorio - Ejercicio resuelto con JavaScript

JavaScript: calcular nota de estudiante con formulario (ejercicio resuelto)

Hoy vamos a resolver un ejercicio con JavaScript, HTML y CSS. La solicitud dice así:

Diseñar y desarrollar un formulario para calcular la nota de la unidad de una asignatura.El usuario debe enviar los datos mediante un formulario en HTML

 

Por medio de JavaScript procesar los datos recibidos y enviarlos a otra página donde debe imprimir el nombre del estudiante, el nombre de la asignatura y las notas obtenidas y el calculo de la nota del laboratorio, de la nota del parcial y de la unidad.

(más…)

Por parzibyte, hace
Preguntas separadas por materias en sistema generador de exámenes y calificaciones

Generador de exámenes con calificaciones automáticas

En el post de hoy te voy a mostrar un generador de exámenes o pruebas para imprimir. No solo te permitirá crear exámenes e imprimir uno por cada alumno o estudiante, también podrás:

  • Agregar y modificar las preguntas, marcando la respuesta correcta
  • Ver la vista previa de impresión
  • Imprimir exámenes
  • Calificar examen generado ingresando solo las respuestas
  • Imprimir la hoja de respuestas
  • Imprimir clave del examen según respuestas correctas
  • Generar hojas de respuesta calificadas
  • Mostrar e imprimir portadas calificadas
  • Generar resultados y gráficas

Básicamente podrás generar exámenes, imprimir cada uno por cada alumno, registrar las calificaciones de manera rápida gracias a la hoja de respuestas generada automáticamente y luego dejar que el programa calcule las calificaciones.

Por cierto, el programa que te mostraré es totalmente gratis y tiene más cosas como el registro de asistencias y tareas que ya mostré en un post anterior:

Software para control de asistencia y tareas escolares – Gratuito

Veamos cómo usarlo.

(más…)

Por parzibyte, hace
Bot de Telegram - Agregar globo de texto o bocadillo a imagen para memes

Agregar globo de texto a imagen con bot de Telegram

Hoy vamos a ver cómo agregar un globo o bocadillo a cualquier imagen con un bot de Telegram usando Node y JavaScript para dicha tarea.

Una cosa será el bot de Telegram y otra el procesamiento de la imagen. Podemos usar ambas cosas por separado y mejorar cada una de ellas o combinarlas.

Bot de Telegram - Agregar globo de texto o bocadillo a imagen para memes

Bot de Telegram – Agregar globo de texto o bocadillo a imagen para memes

Técnicamente hablando vamos a escuchar si el usuario envía una imagen en Telegram (ya sea en grupos o en privado) y una vez que la envíe veremos el texto que la acompaña.

En caso de que el texto coincida con la orden vamos a combinar las 2 imágenes, redimensionando el globo o bocadillo según sea el caso y después vamos a responder con esa imagen ya modificada.

Nota: esto fue hecho por diversión para hacer memes y comentar rápidamente en Facebook o similares, aunque se pueden sacar varias cosas de aquí.

(más…)

Por parzibyte, hace

Variables del entorno con node y archivo .env

En el corto post de hoy veremos cómo leer variables del entorno con Node.js desde un archivo.

Normalmente estas environment variables se guardan en un archivo .env que no distribuimos junto con el repositorio (mejor distribuimos un .env.example) y que cada programador debe crear al momento de clonar el proyecto.

Veamos entonces cómo leer cosas secretas como claves API, tokens, etcétera de un archivo .env en Node con JavaScript usando el paquete dotenv.

(más…)

Por parzibyte, hace
Imprimir en impresora térmica conectada por Bluetooth en Android desde JavaScript

Imprimir ticket en impresora térmica bluetooth desde JavaScript con Android

El día de hoy vamos a hacer una cosa que varios me han pedido y que siempre he querido hacer: imprimir en una impresora térmica Bluetooth desde Android usando JavaScript.

Básicamente vamos a enviar un ticket a una thermal printer con Bluetooth desde el navegador web sin cuadros de diálogo ni cosas extrañas: tan solo usando un plugin gratuito desarrollado por mí y JavaScript puro.

Debido a que esto es hecho desde el navegador con JS luego puedes usarlo para imprimir en una impresora térmica Bluetooth desde Vue, React, Angular, TypeScript, etcétera: cualquier cosa que compile, use o traspile a JavaScript.

(más…)

Por parzibyte, hace
Leyendo código de barras para enviarlo a otro sitio usando algo como una API

Leer código de barras con cámara y enviarlo a página web

En este post te mostraré cómo leer un código de barras con una cámara usando JS (desde un teléfono, tableta o computadora con cámara web) y además enviarlo a una página web.

Esto nos va a permitir:

  • Usar la webapp expuesta aquí como una API, sin que tu sitio necesite HTTPS
  • Saltar la seguridad del acceso a la cámara solo en HTTPS, pues puedes leer el código de barras con la cámara y luego enviarlo a tu verdadero sitio web

Al final esta aplicación web será como una API gratuita para leer un código de barras y enviarlo a tu sitio web. Veamos los detalles a continuación.

(más…)

Por parzibyte, hace
Ticket impreso con impresora Xprinter usando plugin - Soporta imágenes, códigos QR, de barras y acentos

Comunicar JavaScript con impresora térmica usando plugin v3

En el tutorial de hoy vamos a ver cómo comunicarnos con una impresora térmica desde JavaScript para imprimir tickets, abrir el cajón, cortar el papel y otras cosas usando un plugin como intermediario y HTTP.

Con esto podremos imprimir tickets o recibos desde JS, imprimir imágenes, códigos de barras, códigos QR, imágenes como base64, caracteres personalizados y muchas cosas más.

(más…)

Por parzibyte, hace
Sweetalert 2 y ventas - mostrar cambio calculado según importe y pago de cliente

Sweetalert 2 – Mostrar total de venta y cambio a partir de pago

En este post sobre Sweetalert 2 (Sweet Alert 2) veremos un ejercicio práctico: cómo solicitar el pago del cliente y mostrar el cambio (Dinero que se devuelve al comprador cuando entrega una cantidad superior al importe) en la misma alerta, validando todo.

Veremos cómo escuchar el cambio del input de la alerta, modificar el HTML de la misma y validar según una variable externa.

Recomiendo ver el tutorial de SweetAlert2 antes de leer este artículo.

(más…)

Por parzibyte, hace