El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP: cómo mostrar una imagen (existente en el sistema de archivos) codificada en base64 como el atributo src de un elemento img generado con PHP. Veremos cómo leer y codificar la imagen así como colocar el tipo mime correcto. ...
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo llenar un select con JS pero con datos traídos desde PHP usando AJAX, es decir, trayendo los datos en segundo plano desde un servidor con PHP usando JavaScript. Esto es, se podría decir, la continuación del tutorial para llenar un select a partir de un arreglo con JavaScript, pero ahora el arreglo va a provenir de PHP y será transmitido como JSON. Será un ejemplo sencillo pero que te servirá para casos más complejos al momento de llenar un select con AJAX desde PHP. ...
Hoy vamos a programar la impresión de un PDF generado a partir de HTML de modo que serás capaz de crear un PDF a partir de una cadena HTML indicando el tamaño de las hojas y márgenes para después enviar ese PDF a cualquier impresora de manera automáticamente. Dicho con otras palabras te voy a enseñar a imprimir un PDF directamente desde cualquier lenguaje de programación (incluyendo JavaScript) sin diálogos de confirmación, creando ese PDF usando HTML, así puedes diseñar cualquier documento directamente con el plugin. ...
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista desplegable o select a partir de un arreglo o array. Te voy a enseñar dos ejemplos: uno para llenar un select con un array de tipo cadena y otro ejemplo más completo para ver cómo llenar un select con un arreglo de objetos, teniendo una propiedad como valor y otra como el texto mostrado. ...
En estos días estuve buscando un editor HTML o un editor WYSIWYG, parecido al editor de WordPress pero de una manera muy simple. Las siglas hacen referencia a What you see is what you get, que es algo como: lo que ves, es lo que obtienes. Puedes probar el resultado final en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/wysiwyg/ Esto es debido a que el HTML resultante, al momento de ser mostrado en otro lugar, se verá igual que en el editor. El punto es que estuve buscando un editor WYSIWYG para integrar con JavaScript en el navegador web, de manera simple y rápida, permitiendo alinear el texto, insertar imágenes y obtener el HTML resultante. Después de buscar y revisar las licencias (está disponible bajo la licencia MIT), encontré summernote y lo quiero recomendar así como mostrarte cómo usar ese editor de HTML en tu web. ...
En el blog ya he escrito sobre cómo usar TailwindCSS con Vue 3 y Vite, pero no he hablado sobre cómo usarlo sin ningún framework, es decir, usar Tailwind CSS con HTML plano y puro, cosa que sí es totalmente posible. ...
El día de hoy vamos a ver cómo mostrar las opciones de un select en JavaScript de manera programada, es decir, abrir el select con JS mostrando sus opciones como si el usuario hubiera hecho clic sobre el elemento. Sorprendentemente, invocar a la función click del elemento no funciona. Podemos enfocarlo con focus, pero el select solo va a estar enfocado y no va a mostrar la lista de opciones. Entonces veamos cómo mostrar las opciones de un select (abrir select) con JavaScript. ...
En el tutorial de hoy vamos a trabajar con JavaScript y la librería html2pdf.js que a su vez usa jsPDF. Estas librerías sirven para generar un PDF y descargarlo, como ya te he mostrado en otro tutorial. Lo que vamos a ver hoy es cómo obtener el PDF generado como un BLOB, es decir, como un montón de bytes que representan al archivo, ya sea para descargarlo, almacenarlo en otro lugar o enviarlo a algún servidor. ...
En el post de hoy vamos a programar con JavaScript del lado del cliente para obtener el tamaño original de una imagen, es decir, su alto y ancho originales. Podemos hacer esto con una imagen existente (etiqueta img) o con una creada a partir de la clase Image. Te mostraré un ejemplo de cómo hacerlo a partir de una imagen seleccionada en un input tipo file. ...
En este artículo te voy a enseñar a rotar una imagen con HTML y JavaScript a través de canvas, de manera que podrás girar una imagen los grados que tú quieras, es decir, rotarla 90, 180, 270 o cualquier cantidad. Veremos cómo cargar una imagen, pintarla en un canvas, agregarle rotación y después hacer cosas como descargar esa imagen o enviarla al backend que puede ser con Node, C#, PHP, etcétera. ...