Imágenes responsivas con CSS

En este post sobre diseño responsivo en CSS te mostraré cómo hacer que una imagen sea responsiva o responsive. Es decir, que se adapte a cualquier tamaño de pantalla.

Hacer una imagen adaptable es útil cuando no usamos frameworks de diseño como Bootstrap, Bulma, etcétera, y queremos que la imagen sea responsiva.

(más…)

HTML a PDF con JavaScript

En este post te mostraré cómo exportar una página web a PDF a través de un botón, enlace o cualquier cosa soportada por JavaScript. A este proceso también se le conoce como convertir HTML a PDF.

Convertir HTML a PDF con JavaScript

Es decir, convertir web a PDF usando programación con JavaScript y las siguientes librerías:

De hecho, html2pdf usa las dos librerías anteriores. Aunque parece complejo, verás que no lo es realmente. Con esta librería podemos crear un PDF muy parecido a la página web, incluyendo imágenes.

(más…)

Conecta 4 en JavaScript y HTML

En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap.

Conecta 4 en JavaScript, HTML – Versión web

Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial.

A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea.

(más…)

Limpiar elemento HTML con JavaScript

En este corto post te mostraré cómo limpiar un elemento HTML con JavaScript, es decir, algo como el método “empty” de jQuery, pero con JavaScript puro.

Por ejemplo, con esto que te mostraré sabrás cómo eliminar todo el contenido de un elemento HTML ya sea una tabla, una lista, etcétera. A lo que haremos también se le conoce como Remover todos los hijos de un elemento HTML.

(más…)

Lectura de Código de barras con dibujo en canvas - JavaScript con QuaggaJs

Leer código de barras con JavaScript y cámara

En este post te mostraré cómo leer códigos de barras en el navegador web ya sea de una computadora o dispositivo móvil, usando la cámara del teléfono o la cámara web; y el lenguaje nativo JavaScript.

Esto hace que podamos hacer nuestras aplicaciones web todavía más diversas y con más características; en un ejemplo simple se me ocurre escanear el código de barras para un sistema de ventas.

La librería que vamos a usar se llama QuaggaJS y es capaz de leer códigos de barras con formato EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93 y CODABAR.

Con esto, podremos leer códigos de barras en dispositivos móviles o computadoras en tiempo real.

(más…)

Laravel: agregar campos a User

En este post te mostraré cómo puedes agregar campos de la tabla “users” en Laravel para así poder añadir algunos campos al modelo User. Explicado con otras palabras vamos a modificar la tabla de usuarios.

Con este modelo me refiero al usuario que se usa para iniciar sesión y en general hacer la autenticación en Laravel. Veremos cómo agregar otro campo además de los que ya existen.

(más…)

Checkbox en JavaScript

En este post te mostraré cómo trabajar con un input de tipo checkbox en JavaScript.

Será muy simple, veremos cómo marcar / desmarcar el input, y también cómo saber si está marcado o no.

Usaremos JavaScript puro; nada de frameworks.

(más…)

Vue JS: inyectar HTML en vista

Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos.

Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post.

(más…)

Servidor web en tarjeta NodeMCU ESP8266

Crear servidor web con NodeMCU ESP8266

En este artículo te mostraré cómo configurar la tarjeta NodeMCU como punto de acceso, AP o SoftAP para poder conectarte a ella usando WiFi y pode consultar un web server.

Dentro de la tarjeta vamos a “embeber” un servidor web, que no es otra cosa más que responder con HTML a las peticiones, pero podemos modificar ese HTML ya que tenemos el lenguaje C++ en la tarjeta.

De hecho eso hacen todos los lenguajes de programación del lado del servidor: leen peticiones y modifican HTML para mostrarlo.

Esto abre un mundo de posibilidades, pues podremos hacer bastantes cosas, pero comencemos con lo básico y es convertir la tarjeta en un servidor web.

(más…)

Excel generado a partir de tabla HTML con JavaScript y TableExport

Exportar tabla HTML a Excel con JavaScript

Resumen: en este post te mostraré cómo usar JavaScript del lado del cliente (no necesitas nada del servidor) para generar un documento de Excel (extensión xlsx) a partir del contenido de una tabla HTML.

Es decir, vamos a aprender cómo exportar a Excel desde JavaScript un simple elemento table de HTML usando la librería TableExport, permitiendo exportar desde la web una hoja de cálculo.

De este forma puedes exportar reportes o tablas creadas por un framework, a mano, del lado del servidor, o del cliente. Al final tendremos lo que se ve aquí.

Nota: esto es totalmente compatible con jQuery, pero no lo necesitas. Es decir, funciona con o sin jQuery.

(más…)

Convertir página web a PDF con wkhtmltopdf

Convertir HTML a PDF con wkhtmltopdf

Hoy vamos a ver cómo convertir un documento HTML (o página web) a un documento PDF utilizando la línea de comandos y un ejecutable llamado wkhtmltopdf que convierte HTML a PDF.

Si te preguntas de qué nos sirve de esto yo te respondo: gracias a que se puede ejecutar desde la línea de comandos, CMD o como lo llames, podemos hacer que casi cualquier lenguaje de programación invoque al binario y así convertir documentos o páginas web HTML a PDF desde una página web o aplicación de escritorio.

(más…)