html

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

Abrir y cerrar etiqueta HTML cada N elementos

En este post vamos a ver un algoritmo para separar etiquetas HTML cada cierto número de elementos. Por ejemplo, colocar un div cada 4 elementos sin importar la cantidad total de los elementos.

Esto sirve como ejercicio y para aplicaciones de la vida real. Recientemente tuve que separar un grupo de etiquetas div de 4 en 4 y encerrarlos en un div contenedor.

Entonces veamos cómo separar elementos cada cierto número y encerrarlos en otro contenedor sin importar la cantidad de elementos ni cada cuánto debemos separarlos. Básicamente vamos a realizar agrupaciones y división de datos.

(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
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
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
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

Limpiar input file de HTML con JavaScript

En este corto post de programación con JS puro vamos a ver cómo resetear, reiniciar, reestablecer o limpiar un elemento input de tipo file.

Explicado con otras palabras veremos cómo eliminar el archivo seleccionado de un input tipo file o input de archivo, para que parezca que no se ha seleccionado un archivo.

Lo haremos con JavaScript puro para que puedas aplicarlo a cualquier framework.

(más…)

Por parzibyte, hace
Solicitar firma de usuario con JavaScript y HTML en la web

Solicitar firma manuscrita con JavaScript

En este post te mostraré cómo solicitar la firma a un usuario desde la web usando JavaScript, de modo que el usuario pueda firmar como si lo hiciera en una hoja de papel.

Después podremos enviar esa firma al servidor, descargarla, colocarla en un documento, etcétera.

Documento con firma de usuario con JavaScript - Imprimir o guardar como PDF

Documento con firma de usuario con JavaScript – Imprimir o guardar como PDF

Quiero que quede claro que vamos a solicitar la firma manuscrita usando programación en la web a través de un navegador. Para ello vamos a usar el canvas.

Nota: una vez que la firma haya sido dibujada puedes enviarla a PHP, Java, Node, etcétera. En el ejemplo te mostraré cómo descargarla como imagen y colocarla en un documento.

(más…)

Por parzibyte, hace

Cambiar color de fondo a canvas con JavaScript

En este corto post te mostraré cómo cambiar el color de fondo o background de un canvas HTML usando JavaScript.

Básicamente vamos a colorear todo el canvas o limpiar el canvas dibujando un rectángulo que tendrá las mismas dimensiones que el canvas.

Al final con lo que te mostraré aprenderás a cambiar el color de un canvas con JavaScript.

(más…)

Por parzibyte, hace
Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con header, section, aside y footer

En este post te mostraré una plantilla HTML que tiene los elementos o etiquetas header, section, aside y footer. Es un simple ejemplo con HTML y CSS para una página web.

Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con aside, footer, section y header – Barra a la derecha

El aside y el section tienen la misma altura, y el aside es mostrado a la derecha con un borde. Obviamente tú podrás cambiar los colores o el estilo, aquí solo te dejo una plantilla HTML muy simple con CSS puro.

(más…)

Por parzibyte, hace

JavaScript – Generar archivo txt con Blob

En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS.

De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo.

Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL.

(más…)

Por parzibyte, hace

Condicional con Webpack y HTML

Hoy voy a mostrarte cómo usar un if dentro de una plantilla HTML cuando utilizas Webpack, HtmlWebpack o html-webpack.

Concretamente yo estoy usando Webpack con la CLI de Vue y tuve la necesidad de incluir un script de JavaScript solo en el entorno de producción, cosa que fue muy sencilla de hacer con EJS y Webpack.

En este post te mostraré cómo hacer una condicional dependiendo de si estamos en producción o desarrollo dentro de HTML.

(más…)

Por parzibyte, hace
Código QR con HTML y JS - Descargar como imagen

Generar códigos QR con JavaScript

En este post de programación web te voy a mostrar cómo generar códigos QR desde JS o JavaScript para que puedas generar un QR desde la web.

Vamos a usar una librería de terceros; verás que es muy simple crear códigos QR y tal vez esto te anime para crear tu propio generador.

Te aviso que vamos a usar JavaScript puro, así que puedes portar este código para frameworks como Angular, React o Vue.

(más…)

Por parzibyte, hace