javascript

Convertir HTML a imagen con html2canvas – Tomar screenshot de página web

En este post voy a explicar y a dar algunos ejemplos para convertir el contenido de una página web a una imagen, es decir, tomarle una “captura de pantalla” a la página web usando únicamente JavaScript del lado del cliente y la maravillosa librería de html2canvas.

Voy a mostrar cómo adjuntar el elemento canvas al documento, descargar la imagen, ignorar algunos elementos al tomar la captura de pantalla, respetar los estilos CSS y poner el resultado sobre un canvas existente.

HTML convertido a imagen con html2canvas

HTML convertido a imagen con html2canvas

La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más.

(más…)

parzibyte

Convertir canvas a imagen PNG para descargarla

Los elementos canvas son algo muy útil en HTML, son un lienzo en donde se pueden dibujar varias cosas.

Al generar un contenido en un canvas el mismo puede ser descargado por el usuario, ¿pero qué pasa si queremos agregar más funcionalidad y agregar un botón para descargar el elemento como imagen?

Precisamente eso veremos hoy: cómo convertir el contenido de un canvas a una imagen PNG y hacer que la misma se descargue, usando JavaScript.

(más…)

parzibyte
jQuery y select - Manipular elemento HTML

Select y jQuery: obtener seleccionado, agregar opción, limpiar y escuchar cambios

jQuery sigue siendo una librería usada en estos últimos tiempos. Me atrevo a decir que es el framework más usado en el entorno de JavaScript, aunque claro, existen mejores por mucho, pero no vamos a discutir eso hoy.

La librería de jQuery y su forma de seleccionar los elementos permite interactuar con los mismos de una manera muy fácil, pero debemos aprender los métodos.

jQuery y select - Manipular elemento HTML

jQuery y select – Manipular elemento HTML

Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo:

  • Obtener elemento seleccionado del select (la opción)
  • Agregar una opción al select
  • Limpiar el select, es decir, remover todas las opciones
  • Escuchar cuando el usuario seleccione otra opción del select.

Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post.

Nota: si quieres ver la demostración de lo que haremos aquí puedes entrar a este enlace.

(más…)

parzibyte
Manipular select con JavaScript puro

Select y JavaScript: agregar, limpiar, obtener y escuchar cambios del elemento HTML

Un select es una lista desplegable de opciones de HTML, se declara usando <select> y dentro de él tiene opciones declaradas con <option>. Cada opción tiene un valor y un texto.

El select de HTML se maneja a través de JavaScript. Al select también se le conoce como lista desplegable, Dropdown list o simplemente select.

Manipular select con JavaScript puro

Manipular select con JavaScript puro

Hoy veremos cómo trabajar con JavaScript y los elementos de tipo select con option. Vamos a ver cómo:

  1. Obtener valor seleccionado de un select
  2. Agregar opciones al elemento select
  3. Obtener opción seleccionada
  4. Limpiar el select
  5. Escuchar cuando el valor del select cambia, es decir, que se selecciona otro valor

Está de más mencionar que esto lo haremos con JavaScript puro, sin usar frameworks ni librerías externas.

Al final tendremos un ejemplo en donde manejamos un select con JavaScript, el cual se puede probar en este enlace.

(más…)

parzibyte

Ejercicio resuelto: semáforo con JavaScript

En este post veremos la solución a un ejercicio sencillo de JavaScript. Se trata de crear una función que regrese “amarillo”, “rojo”, o “verde” dependiendo del argumento que reciba indicando la luz encendida actualmente.

La función va a indicar cuál es la luz que debería encender de acuerdo a la que está encendida actualmente.

Si la luz es “rojo” entonces debe mostrar “verde”, si es “verde” debe mostrar “amarillo” y finalmente si es “amarillo” debe mostrar “rojo”.

Por cierto, este es un ejercicio de Codewars.

(más…)

parzibyte

Node.js y PostgreSQL – Ejemplo de conexión

Node JS puede ser conectado a PostgreSQL fácilmente a través del paquete pg.

En este tutorial vamos a ver cómo conectar Node.JS con PostgreSQL y hacer las cuatro operaciones básicas de la base de datos: Create, read, update y delete (CRUD); todo esto evitando inyecciones SQL y usando un poco el model MVC.

Para la interfaz vamos a usar Bootstrap (ya que será responsivo), y para que el usuario use nuestra app web vamos a usar Express.

Archivos que conforman el CRUD de PostgreSQL con Express

Aunque estos ejemplos son con la web, los mismos pueden ser ejecutados en la terminal sin ningún problema.

(más…)

parzibyte

Instalar Node.js y NPM en Ubuntu

Los paquetes de Node para Ubuntu están un poco desactualizados, además de que el binario se llama nodejs en lugar de node. Hoy vamos a ver cómo descargar e instalar Node 12 y NPM para Ubuntu, pero desde los paquetes de Node, para obtener la última versión.

Al final de la instalación tendremos la última versión de Node: la versión 12.5; y la última de NPM: 6.9

Si tú visitas este post en el futuro, mira las instrucciones en el repositorio oficial; solo es cosa de cambiar el script llamado setup_[versión_aquí].x.

(más…)

parzibyte

Conexión Node.js y MySQL con Express

En este post te voy a mostrar cómo conectarte a una base de datos de MySQL usando el lenguaje de programación JavaScript del lado del servidor a través del entorno Node; también conocido como Node.Js.

Vamos a hacer las 4 operaciones básicas de la base de datos: obtener datos, insertar datos, actualizar datos y eliminar datos.

Para la interfaz del usuario vamos a usar Bootstrap y una estructura de aplicación web generada con express-generator.

(más…)

parzibyte

Promesas en JavaScript

Las promesas en JavaScript son una manera más elegante de trabajar con código asíncrono que los callbacks, pues evitan el famoso callback hell. Aunque actualmente las promesas o promises de JavaScript están siendo remplazadas por async y await es bueno saber cómo funcionan las mismas.

Hoy vamos a ver cómo funcionan las promesas con JavaScript, además de aprender a crear promesas y devolverlas en una función.

(más…)

parzibyte

Menú responsivo de Bootstrap 4 sin dependencias

En este post voy a mostrarte un ejemplo de código para tener el menú responsivo de Bootstrap sin dependencias como jQuery, usando únicamente algunas líneas de JavaScript puro.

Bootstrap es el framework CSS por excelencia. Casi todo programador web lo conoce, es de hecho una base que hay que tener. Sin embargo, tiene una desventaja y es que normalmente no funciona sin jQuery (u otros frameworks).

(más…)

parzibyte

Cambiar puerto de app generada con express-generator

El paquete express-generator ayuda muchísimo en el desarrollo de aplicaciones web con Node, pues genera la estructura de una aplicación.

Una pequeña desventaja es que al generar el código no sabemos cómo cambiar algunas cosas muy básicas, por ejemplo, el puerto en el que escucha la app (por defecto es el puerto 3000).

Por ello es que hoy veremos cómo cambiar el puerto de escucha de una app de Express generada con express-generator.

(más…)

parzibyte