Entradas

Crea un buscador de imágenes (json) con Fuse.js - para principiantes

Imagen
Este buscador está basado en Fuse.js  el cual es un poco complicado de entender si eres principiante, así que vamos a agregar el ejemplo completo para que funcione si o si a la primera. Así que solo deberás copiar este código en un archivo html, puedes llamarlo como desees. Ver demo <!doctype html> <html lang="es"> <head> <title>Buscar imágenes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> </head> <body> <body class="bg-light"> <nav class="navbar navbar-dark bg-success"> <div class="container-fluid"> <a class="navbar

Copiar el valor de un INPUT con Javascript

Imagen
  En nuestras páginas o paneles muchas veces mostramos datos en algún INPUT y es necesario copiarlo con el clic de un botón. Este código funciona solo con JavaScript, debido a que ahora todos los navegadores trabajan con la última versión de JS que es bastante potente. Cómo funciona A el INPUT se le asigna un ID para poder identificarlo, luego el botón llama a la función copiar. Al final la función usa el ID del INPUT y selecciona su valor  para finalmente copiarlo. <input id="123" type="text" value="https://wwww.guiaplaza.com" /><button onclick="copiar(1)" type="button">Copiar</button> <script> function copiar() { let copyInput = document.querySelector('#123'); copyInput.select(); document.execCommand("copy"); } </script> Para hacerlo con varios INPUT mira el siguiente ejemplo: https://webmasters.guiaplaza.com/2022/05/copiar-el-valor-de-un-input-de-una.html

Copiar el valor de un input de una lista de varios input

Imagen
  En nuestras páginas o paneles muchas veces mostramos datos en los INPUT y es necesario copiarlos solo con el clic de un botón. Este código funciona solo con JavaScript, debido a que ahora todos los navegadores trabajan con la última versión de JS que es bastante potente. Cómo funciona A cada INPUT se le asigna un ID para poder identificarlo y luego cada botón llama a la función copiar enviando como parámetro el mismo ID del INPUT. Al final la función se ejecuta recogiendo el parámetro, pero muy importante haciendo un escape del ID, seleccionando el valor del INPUT y finalmente copiándolo. <input id="1" type="text" value="url1" /><button onclick="copiar(1)" type="button">Copiar</button> <input id="12" type="text" value="url2" /><button onclick="copiar(12)" type="button">Copiar</button> <input id="123" type="text" value="

JavaScript: Cambiar imagen, si cambia el valor del input

Imagen
Si tienes un panel (dashboard) con varios input y uno de ellos contiene la URL de una imagen, a lo mejor deseas mostrar la imagen en la parte superior y que al cambiar la URL dentro del input muestre la nueva imagen. Voilà! aquí lo que buscabas: document.getElementById("id_del_input").addEventListener('input', cambiaImagen); function cambiaImagen(){ var dato = document.getElementById("id_del_input").value; document.getElementById('id_del_img_src').src = dato; } Otra versión, hace lo mismo. var elemento = document.getElementById('id_del_input'); elemento.addEventListener('input', function (cambiaImagen) { var dato = document.getElementById("id_del_input").value document.getElementById('id_del_img_src').src = dato; }); En realidad hay muchas formas de hacerlo, pero hay que adaptar la que se adapte más a tus necesidades.

Instalar PHP en MacOS Monterrey

Imagen
  La nueva versión de MacOS, llamada Monterrey viene sin PHP, lo único que trae es el servidor web Apache y con algunas limitaciones. Así que para disfrutar nuevamente de PHP en resumen hay que desinstalar Apache e instarlo junto con PHP a través de Homebrew, este es un gestor de paquetes propio para MacOS. Toda la instalación se realiza desde la terminal y se requieren al menos algunos conocimientos avanzados del uso del equipo. Para la edición del archivo httpd.conf usa SUDO, así no te aparecerá el mensaje que no se puede escribir en el archivo. Paso 1: Instalar HomeBrew Tienes la opción de ir a su página web:  https://brew.sh/ y copiar el código o hacerlo desde acá: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Te pedirá la contraseña del equipo. Esta línea se autoinstala además unos componentes del Xcode , si no lo tienes deberías antes instalarlo.  Al finalizar podrás comprobar que ya está instalado con este comando qu

Transformaciones para fotos en blogger(blogspot)

Imagen
 Los efectos en fotos en las CMS normalmente son agregados con otros servicios externos de procesamiento de imágenes como Cloudinary  entre otros. Sin embargo Blogger.com está agregando algunos efectos de recorte al hosting propio de imágenes: Veamos algunos ejemplos: Tamaño original de 4032 × 3024 <img src="https://1.bp.blogspot.com/-BGcLIyu3IIA/YH36arpE9aI/AAAAAAAADew/PaC_ih5LgZgx58LaBtrs5TffXlSRRFpswCLcBGAsYHQ/s16000/deperu-com-dclGBWd-2nU-unsplash.jpg" /> Ahora vamos a recortar a FullHD <img src="https://1.bp.blogspot.com/-BGcLIyu3IIA/YH36arpE9aI/AAAAAAAADew/PaC_ih5LgZgx58LaBtrs5TffXlSRRFpswCLcBGAsYHQ/w1920-h1080-p-k-no-nu/deperu-com-dclGBWd-2nU-unsplash.jpg" /> Ahora vamos a recortar a una franja horizontal <img src="https://1.bp.blogspot.com/-BGcLIyu3IIA/YH36arpE9aI/AAAAAAAADew/PaC_ih5LgZgx58LaBtrs5TffXlSRRFpswCLcBGAsYHQ/w1920-h480-p-k-no-nu/deperu-com