Acceder a data de Vue dentro del propio objeto

En este post de programación con el framework Vue o Vue.js te mostraré cómo acceder a data cuando regresamos los datos o el objeto data de nuestro componente.

Esto es necesario porque en ocasiones necesitamos acceder a los datos de Vue desde la definición.

Al final esto no tiene tanto que ver con Vue.js, sino con JavaScript. Pero incluso así en ocasiones podemos olvidar lo que sucede con los objetos anónimos.

(más…)

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

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

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

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

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

Recortar imagen con PHP y Cropper JS

Recortar foto con PHP

Hoy voy a enseñarte a recortar una foto con PHP dando al usuario la posibilidad de recortar una foto y luego guardarla en el servidor con PHP.

De este modo vamos a darle al usuario la opción de recortar una imagen y guardar el resultado en PHP. Luego ya puedes ligar esa foto o imagen a una base de datos, alojarla en el servidor, usarla para crear otra imagen, etcétera.

Usaremos Cropper.js en el lado del cliente y después enviaremos el resultado a PHP. Con esto vamos a ahorrar recursos pues el recorte de la foto se hará del lado del cliente pero al final prácticamente vamos a recortar la foto con PHP.

(más…)

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

Código fuente de sistema gratuito para Windows - Sublime POS 3

Código fuente de Sublime POS 3

Como bien sabes, hace algún tiempo liberé mi sistema de ventas para que sea gratuito para Windows. Si bien liberé el programa, no liberé el código. En este post te mostraré cómo obtener el código fuente y lo que te envío al comprarlo, así como los lenguajes con los que está hecho y todo ello.

Desde ahora te aclaro que te daré exactamente el mismo código fuente que uso para la versión que ya he publicado anteriormente.

(más…)

Canvas enviado como imagen desde JavaScript a PHP

Enviar canvas de JavaScript a PHP

En el post de hoy te mostraré una cosa sencilla pero muy útil: cómo enviar un canvas de HTML a PHP usando JavaScript, para guardar ese canvas como imagen.

Cuando digo que es útil es porque yo creo que canvas nos da varias posibilidades de trabajar con imágenes o con el canvas en sí, y gracias a lo que te mostraré podrás guardar el resultado en el servidor para cualquier cosa.

Se me ocurre que por ejemplo podrías tomar una foto de una credencial de identificación, recortarla y después guardarla con PHP.

(más…)

Recortar imagen con JavaScript - Descargar foto cortada

Recortar imagen con JavaScript

Hoy te mostraré cómo cortar o recortar una imagen con JavaScript. Es decir, darle al usuario la posibilidad de recortar una imagen seleccionando una porción de la misma.

Una vez que la foto haya sido recortada con JS podemos descargarla, colocarla en un canvas, en una imagen o subirla a un servidor que ejecute PHP, Node.js, Python, etcétera.

En resumen te voy a enseñar cómo hacer que el usuario recorte una foto usando JS.

(más…)

Ticket impreso desde JavaScript con Linux

Imprimir en impresora térmica desde JavaScript con Linux

Hoy te mostraré cómo imprimir directamente a una impresora térmica usando JavaScript en la web o mejor dicho en el navegador web, cuando el sistema operativo es Linux.

Si has seguido mi blog y mi canal de YouTube sabrás que hace tiempo desarrollé un plugin para imprimir en impresoras térmicas con JS pero para Windows. Pues bien, hoy he portado ese plugin para Linux (le di a Archivo > Exportar como > Plugin para Linux).

En este post te mostraré cómo descargarlo y cómo usarlo en Linux. Yo lo probé en una PC con elementary OS.

Por cierto, si lo llegas a probar me gustaría que me indiques en los comentarios en cuál distribución lo has hecho.

(más…)

Aplicación de temporizador con JavaScript - Programar tiempo restante

Temporizador con JavaScript – Open source

En este post sobre programación web y JavaScript te mostraré cómo hacer un temporizador usando JS puro sin ningún framework. Básicamente será una cuenta regresiva.

Temporizador en JavaScript - Indicar minutos y segundos para cuenta regresiva

Temporizador en JavaScript – Indicar minutos y segundos para cuenta regresiva

Le daremos al usuario la posibilidad de elegir los minutos y los segundos para comenzar la cuenta regresiva, el temporizador comenzará (se puede pausar en cualquier momento) y cuando llegue a 0 va a reproducir un sonido de alarma.

Todo esto lo haremos usando solo HTML, CSS y JavaScript.

(más…)