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

Tabla responsiva con Bulma CSS

El framework CSS de Bulma provee clases para agregar estilos a las tablas, así como contenedores de las mismas.

Hoy vamos a ver cómo hacer una tabla responsiva utilizando la clase table-responsive, clase que funciona pero para que lo haga debemos hacer algunos cambios con los div padres.

(más…)

Por parzibyte, hace
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…)

Quitar quicklink de ouo (saltar ouo)

Saltar enlace QuickLink de ouo.io

En este post te mostraré una herramienta que he programado para saltar un enlace quicklink de ouo.io, el sistema de acortadores.

Hay algunos sitios web que usan este servicio para acortar, pero no lo hacen con un software de acortadores, en su lugar hacen algo como:

https://ouo.io/s/LASKFzcB?s=https://parzibyte.me/blog

O algo como:

https://ouo.io/s/LASKFzcB?s=https%3A%2F%2Fparzibyte.me%2Fblog

En donde el link es incluido en la página y se puede quitar fácilmente.

(más…)

Demostración openlayers con marcadores y coordenadas

Tutorial OpenLayers: marcadores, coordenadas, eventos y datos dinámicos

En este post te mostraré un ejemplo de proyecto con OpenLayers en donde se muestran:

  • Introducción a OpenLayers
  • Descargar OpenLayers
  • Creación de mapa
  • Centrado de mapa en determinada ubicación
  • Marcadores personalizados con imagen propia
  • Listener de eventos como click o zoom cambiado
  • Consumo de API PHP para obtener los marcadores

Voy a desglosar cada cosa y al final dejaré el código del proyecto completo.

(más…)

Factura PDF con PHP - Documento PDF

Factura PDF con PHP – Ejemplo completo

Resumen: generar una factura PDF con PHP, es decir, un ticket, recibo, boleta o invoice que tenga detalles de un cliente, del emisor, número de factura, fecha y productos que se venden, así como el total con impuestos y descuento.

Para generar la factura vamos a usar la librería dompdf que convierte HTML a un PDF nativo. Aunque por el momento será estática, puedes usar más tarde una base de datos con PHP.

(más…)

HTML a PDF con PHP usando dompdf y Bootstrap

Generar PDF con PHP usando dompdf

Resumen: mostrar cómo generar PDF con PHP de una forma sencilla a través de HTML, respetando estilos CSS para darle buena forma a los PDF creados con PHP.

Vas a aprender a crear un PDF a partir de HTML (es decir, se va a convertir código HTML a un documento PDF bien hecho), usando dompdf. Al final, los documentos podrán ser:

  • Mostrados en el navegador
  • Forzados para descargar
  • Guardados en el disco duro

También incluyo un ejemplo con Bootstrap y con estilos CSS.

(más…)

Sweet Alert 2 – Tutorial con ejemplos

Resumen: mostrar una introducción (instalación y uso) a Sweet Alert 2, una librería de JavaScript para mostrar alertas y diálogos de confirmación con un diseño bonito.

Te mostraré cómo descargar SweetAlert 2, además de:

  • Mostrar una alerta
  • Personalizar el contenido
  • Mostrar un diálogo de confirmación y saber respuesta del usuario
  • Diálogo personalizado con HTML
  • Mostrar alerta con input para recoger información

Todo esto usando JavaScript.

Nota: el código mostrado aquí está en GitHub, y la demostración aquí.

(más…)

Descargando página web completa con HTTrack

Descargar página web completa para uso offline

Resumen: mostrar cómo descargar un sitio web completo (con imágenes, scripts, etcétera) como HTML para su uso fuera de internet o sin depender del dominio, útil también para convertir un sitio de WordPress a un sitio estático (pero con cualquier página funciona).

La herramienta que vamos a usar se llama HTTrack y es completamente gratuita y open source.

(más…)

Comandos de voz en la web con JavaScript y Annyang - Demostración

Comandos de voz en la web con JavaScript y Annyang

Resumen: mostrar cómo controlar elementos en una página web usando la voz; es decir, implementar el reconocimiento de voz con JS para definir comandos de voz y ejecutar acciones (enviar un correo, mostrar un reporte, mostrar una gráfica, escribir texto) dependiendo de la acción.

Para el reconocimiento de acciones de voz en la web (o mejor dicho, en el navegador con JavaScript) vamos a usar la librería annyang que internamente utiliza la API de speech recognition.

Puedes ver lo que construiremos al final en este enlace.

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