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

septiembre 9, 2021 · 1 min · 197 palabras · Parzibyte

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

septiembre 9, 2021 · 7 min · 1339 palabras · Parzibyte

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

septiembre 8, 2021 · 7 min · 1324 palabras · Parzibyte

Lista de tareas pendientes con Angular - ToDo list

En este post te mostraré un proyecto muy sencillo creado con Angular. Se trata de una lista de tareas pendientes, ToDo list, to-do list o como sea que le llames. Vamos a usar el framework Angular y el lenguaje de programación TypeScript para crear una lista de tareas por hacer. Tendrá las opciones de agregar, eliminar, editar y marcar como terminada. Por cierto, en este caso vamos a usar localStorage para almacenar la lista pero bien podrías usar una API con un lenguaje como PHP o cualquier otra cosa. Para tener el proyecto simple me he enfocado a no usar frameworks CSS, así que solo será HTML plano. De todos modos lo que importa es cómo vamos a manejar la lista de tareas pendientes con Angular. ...

septiembre 7, 2021 · 6 min · 1082 palabras · Parzibyte

Programar en Angular desde Android

En este post te mostraré cómo editar y crear proyectos de Angular desde tu móvil o tableta con Android. No vas a usar emuladores o cosas así, realmente podrás usar Angular en tu teléfono o dispositivo móvil. Vamos a lograr esto usando NPM y Node.js, mismos que se pueden instalar en Termux. Y como la CLI de Angular es solo un paquete más, podremos instalarla en nuestro teléfono parar crear y compilar proyectos de Angular. ...

septiembre 7, 2021 · 3 min · 501 palabras · Parzibyte

Angular: uso de ngFor

En este simple post te mostraré cómo usar ngFor en Angular para iterar sobre una lista de elementos. También te enseñaré cómo acceder al índice de cada elemento, de manera que puedas recorrer y dibujar un arreglo por índice y valor. ...

septiembre 6, 2021 · 2 min · 280 palabras · Parzibyte

Angular - Simple binding en Input

En este post te mostraré cómo ligar un input con una variable de Angular, de manera que si la variable cambia en el input, se cambie en los demás lugares. Y de manera similar, si la variable cambia desde otro lugar se refresque en el input. Todo esto será con Angular y con el two way binding. Por cierto, esto que te enseñaré será muy simple por si solo necesitas un input. En caso de que quieras algo más avanzado mira los formularios con Angular. ...

septiembre 2, 2021 · 2 min · 404 palabras · Parzibyte

Centrar imagen con CSS

En el post de hoy te mostraré algo muy simple: cómo centrar una imagen HTML usando CSS, sin frameworks.alinear una imagen al centro Si bien es algo sencillo, en ocasiones olvidamos cómo hacerlo. Así que en este artículo te mostraré el estilo CSS para centrar un elemento img. ...

septiembre 1, 2021 · 1 min · 206 palabras · Parzibyte

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

septiembre 1, 2021 · 2 min · 344 palabras · Parzibyte

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

septiembre 1, 2021 · 3 min · 558 palabras · Parzibyte