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

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
Archivo modificado en commit de GitHub

Obtener lista de archivos modificados en commit de GitHub desde la web

Hoy vamos a ver cómo listar los archivos modificados en un commit de GitHub desde la interfaz web, no desde la línea de comandos.

Cuando estamos en github.com podemos ver un commit que muestra los archivos modificados o creados, pero no los muestra en forma de lista para copiar y pegar.

En este post te mostraré cómo obtener la lista de la ruta completa de los archivos creados o modificados en ese commit, usando la consola de depuración.

Nota: seguramente esto se puede hacer desde la línea de comandos, pero veamos cómo hacerlo con JavaScript desde el navegador.

(más…)

Por parzibyte, hace
Reducir tamaño de imagen con JavaScript

Reducir tamaño de imagen con JavaScript

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).

Reducir tamaño de imagen con JavaScript – Antes y después, al poner el 30 % de calidad

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.

(más…)

Por parzibyte, hace
Service worker en Progressive Web App

Crear y publicar Progressive Web App – Convertir app web en PWA

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.

(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
Dibujar en canvas de JavaScript usando mouse - Prototipo de paint

Dibujar en canvas con mouse usando JavaScript

En este post sobre programación web HTML y JavaScript te mostraré cómo hacer que el usuario pueda dibujar en un canvas usando el mouse, algo así como un paint muy básico.

De esta forma vamos a permitir que el usuario pueda dibujar y pintar sobre el canvas usando el ratón.

Más adelante podrías adaptar este código para cualquier otra cosa, incluso para crear un paint completo. Aquí solo te mostraré cómo permitir que el usuario dibuje en la web con un color y grosor determinado.

(más…)

Por parzibyte, hace
Prevenir que usuario cierre página web con JavaScript

Prevenir cierre de página web con JavaScript

En el post de hoy te mostraré cómo prevenir que el usuario navegue a otra página o pestaña, recargue la página o la cierre. Todo esto con JavaScript.

Desde ahora te digo que (si bien contradice el título del post) no es posible prevenirlo al 100 %, solo se puede mostrar una advertencia que el usuario puede ignorar.

Si bien no vamos a prevenir, te mostraré cómo mostrar un mensaje para darle al usuario la posibilidad de no cerrar la pestaña o navegar a otro lugar.

Esto funciona con Chrome y Firefox en sus últimas versiones al momento de escribir este post.

(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
Mostrar ubicación de usuario en mapa usando JavaScript, GPS y OpenLayers

Mostrar ubicación en mapa en tiempo real – Programación

En el artículo de hoy te mostraré cómo mostrar la ubicación del usuario en un mapa en tiempo real e ir actualizando el marcador del mapa conforme el usuario se mueva.

Esto puede servir para varias cosas. La más simple es mostrarle al usuario su ubicación en el mapa, pero puede enfocarse a algo tan complejo como hacer algo como Uber (enviando la ubicación a un servidor y todo eso).

Por cierto, vamos a usar JavaScript y OpenLayers (alternativa a Google Maps): tecnologías gratuitas y open source que no nos obligan a aceptar licencias ni pagar.

Obviamente esto se puede usar en dispositivos móviles Android o iOS mientras tengan un navegador web decente. Y más tarde podemos convertir la app web en una PWA para que sea algo así como una app nativa (como hice con la app de transportes).

Pero bueno, vamos a lo interesante: cómo obtener la ubicación del usuario y mostrarla en el mapa mientras se mueve.

Puedes acceder a la demostración justo ahora desde este enlace. Te debería mostrar tu ubicación actual con el símbolo de un auto.

(más…)

Por parzibyte, hace