Tipo de dato de una variable en JavaScript

JavaScript: función que devuelve tipo de argumento

En este post de JavaScript veremos cómo saber el tipo de un argumento de una función. Es un ejercicio de programación, ya que si queremos saber el tipo de una variable usamos typeof, pero el ejercicio dice:

Escribe una función JavaScript que acepte un argumento y devuelva el tipo.

Nota: Hay seis posibles valores que el tipo de retornos: objeto, booleano, función, número, cadena y undefined.

Veamos cómo hacer esto con JS.

(más…)

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

Leer código de barras (lector USB conectado) con JavaScript

En este post te mostraré algo muy simple pero que no todos sabemos al principio: cómo conectar un lector de código de barras a nuestra aplicación de JavaScript.

Con esto me refiero a un lector de código de barras físico, conectado a la computadora ya sea por USB o PS/2.

Vamos a leer el código de barras y saber cuando el código se ha terminado de leer. Todo esto en la web con JavaScript y un input.

Nota: recuerda que en mi blog ya te enseñé a leer códigos de barras en JavaScript con la cámara del dispositivo, pero no con un lector físico de esos que tienen “luces rojas”.

(más…)

Ajustes del sistema - Impresora y acceso a través de la LAN

Software para control de eventos, aforo y boletería

En este post te mostraré otro sistema que he realizado recientemente. Se trata de un programa para llevar el control de eventos por tiempo, en donde se cobra por el tiempo que la persona ingresa al evento.

Esto está pensado para controlar el acceso a eventos como parques, piscinas, juegos, etcétera; ya que se registra el tiempo de entrada y de salida a partir de un número de pulsera.

Cuando la persona sale del evento se realiza el cobro del mismo y se imprime un ticket. Las características del software son:

  • Control de aforo: Indica cuántas personas están dentro del establecimiento o evento
  • Registro de datos con número de pulsera para tener un identificador
  • Posibilidad de acceder desde el teléfono o cualquier dispositivo para que una persona esté en la entrada y otra en la salida del evento a través de la LAN
  • Opción para anular los tickets
  • Reporte de ventas en donde se incluyen filtros por fecha y hora, así como un reporte que indica la cantidad de tickets vendidos o anulados.
  • Reporte de ticket con mayor costo y ticket con menor costo
  • Impresión de tickets en impresora térmica

Realmente este programa fue pensado para llevar el control de eventos a donde asisten niños acompañados con sus padres (en donde dependiendo del tiempo de la estancia, se realiza el cobro) pero se puede adaptar a cualquier circunstancia.

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

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

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

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

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