tag:blogger.com,1999:blog-89381332925342740172024-03-28T00:53:15.522+01:00Soluciones para WebmastersCientos de Soluciones Utiles para Webmasters, basados en la experiencia.Unknownnoreply@blogger.comBlogger170125tag:blogger.com,1999:blog-8938133292534274017.post-82061947401776725182023-06-16T18:15:00.003+02:002023-06-16T18:15:35.385+02:00¿Recibes muchos mensajes de Clever Advertising Partner?¿Recibes muchos mensajes de Clever Advertising Partner?<br /><br /><br /><div style="text-align: center;"><span style="font-size: large;">4youads.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">ads-supplier.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">ampliffy.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">directadx.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">g13advertising.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">improvingads.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">jlscleverads.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">justclickads.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">m5ads.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">onrunads.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">popmytraffic.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">primads.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">prymeskill.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">supernovacy.com</span></div><div style="text-align: center;"><span style="font-size: large;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">upperising.com</span></div><br /><div><br /></div><div><br /></div>Unknownnoreply@blogger.com0Valencia, Provincia de Valencia, España39.4699075 -0.376288111.159673663821152 -35.5325381 67.780141336178843 34.7799619tag:blogger.com,1999:blog-8938133292534274017.post-2351517152845608172022-09-08T23:51:00.000+02:002022-09-08T23:51:05.806+02:00Crea un buscador de imágenes (json) con Fuse.js - para principiantes<div class="separator" style="clear: both; text-align: center;"><img alt="Buscador de imágenes con Json" border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7zm44a3YWwDILNPUjKysp9HKCKgJOCmaL5GSG7g7cBs9An_G5FdBllDENZk_3_1xmIXe2htQgI-36tbBCmfTceSagwobM2l9DjDYHvmJpiySatcb0B6x87_peZqssZQb-mJRWtAR2ZZR52Rv6ZUUnSLZN5QSNYlh9uyjJ2dASEgaxUeyL7KxEzjfOg/s16000/buscador_imagenes_json.png" title="Buscador de imágenes con Json" /></div><br /><p></p><p>Este buscador está basado en <a href="http://Fuse.js" target="_blank">Fuse.js</a> 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.</p><p>Así que solo deberás copiar este código en un archivo html, puedes llamarlo como desees.</p><p><a href="https://www.guiaplaza.com/imagenes/" target="_blank">Ver demo</a></p>
<pre><code class="language-php">
<!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/bootstrap@5.2.1/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-brand" href="https://www.guiaplaza.com">
<img src="https://www.guiaplaza.com/assets/guiaplaza.png" alt="guiaplaza" width="150" height="24" class="d-inline-block align-text-top">
</a>
</div>
</nav>
<section style="background: #ffffff url('https://www.guiaplaza.com/imagenes/wim-van-t-einde-uj7eb7CgqRk-unsplash.jpg') no-repeat center/100%;" class="text-light">
<div class="container">
<div class="row justify-content-center pt-5 mb-3">
<div class="col-auto text-center">
<h1 class="display-4">Banco de imágenes</h1>
</div>
</div>
<div class="row justify-content-center pb-3">
<div class="col-12 col-md-10 col-lg-8">
<form class="card mb-3">
<div class="card-body">
<input class="form-control border-0 fs-2 search" type="text" id="search" value="" />
</div>
</form>
<span class="text-bg-dark"> Ingrese una palabra </span>
</div>
</div>
</div>
</section>
<div class="container-fluid px-5">
<hr class="m-3">
<p class="info" id="info"></p>
<div class="row visual" id="visual"></div>
</div>
<footer class="container">
<hr>
<p>GuiaPlaza.com - Banco de Imágenes</p>
<hr>
<div class="my-3">
<label class="form-label text-muted">Palabras registradas que puedes usar</label>
<textarea class="form-control" rows="3" disabled>
Barcelona, ciudades, Madrid, Bilbao, Valencia, cajas, regalos, obsequio, caja, regalo, canasta, navidad, madrileños, metro, lugares, estadio, madriguera
</textarea>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
<script>
var searchEle = document.getElementById("search");
var visual = document.getElementById("visual");
var dataset = [
{"nombre":"Barcelona","largo":1280,"alto":720,"categoria":"ciudades","url":"https://www.guiaplaza.com/imagenes/benjamin-voros-oJsRqwMHWHI-unsplash.jpg"},
{"nombre":"Madrid","largo":1280,"alto":720,"categoria":"ciudades","url":"https://www.guiaplaza.com/imagenes/florian-wehde-WBGjg0DsO_g-unsplash.jpg"},
{"nombre":"Bilbao","largo":1280,"alto":720,"categoria":"ciudades","url":"https://www.guiaplaza.com/imagenes/sebastian-staines-8z1seJUwg2A-unsplash.jpg"},
{"nombre":"Valencia","largo":1280,"alto":720,"categoria":"ciudades","url":"https://www.guiaplaza.com/imagenes/juan-gomez-bLBrjMXw-5k-unsplash.jpg"},
{"nombre":"cajas regalos","largo":1280,"alto":720,"categoria":"obsequio","url":"https://imgs.deperu.com/navidad/regalos.jpg"},
{"nombre":"caja regalo","largo":720,"alto":1280,"categoria":"obsequio","url":"https://imgs.deperu.com/navidad/regalo_caja_verde.jpg"},
{"nombre":"canasta navidad","largo":720,"alto":1280,"categoria":"obsequio","url":"https://imgs.deperu.com/alimentacion/canasta_navidad.jpg"},
{"nombre":"madrileños","largo":720,"alto":1280,"categoria":"obsequio","url":"https://phantom-marca.unidadeditorial.es/9d5e10f324e29fcadb01086fd6f0bd15/resize/1320/f/webp/assets/multimedia/imagenes/2022/05/13/16524550918680.jpg"},
{"nombre":"metro Madrid","largo":720,"alto":1280,"categoria":"lugares","url":"https://www.autofacil.es/wp-content/uploads/2021/05/istock-1-4.jpg"},
{"nombre":"estadio Barcelona","largo":854,"alto":1280,"categoria":"lugares","url":"https://www.fcbarcelona.com/photo-resources/2021/08/09/d4236e65-4502-4cca-816d-a97c441abdac/Camp-nou-1.jpg?width=1200&height=750"},
{"nombre":"madriguera","largo":720,"alto":1280,"categoria":"lugares","url":"https://www.deperu.com/diccionario/imagenes/palabra-madriguera.jpg"}];
const options = {
shouldSort: true,
findAllMatches: true,
threshold: 0.3,
location: 0,
distance: 100,
minMatchCharLength: 1,
keys: ["nombre", "categoria"]
};
const myIndex = Fuse.createIndex(options.keys, dataset);
const fuse = new Fuse(dataset, options, myIndex);
// BUSCA
function iniciaBusqueda() {
var resultJSON = fuse.search(searchEle.value);
document.title = searchEle.value + ' - Buscando...';
document.getElementById("info").innerHTML = `Encontradas <strong>${resultJSON.length} imágenes</strong> de ${dataset.length} con su texto de consulta.`;
tarjeta = '';
resultJSON.forEach(imagen => {
tarjeta += '<div class="col-3 mb-3"><div class="card"><img class="card-img-top fondo" src="' + imagen.item.url + '"><div class="card-body"><p><input class="form-control" onClick="this.select();" value="' + imagen.item.url + '"></p><h5 class="card-title">' + imagen.item.nombre + '</h5><span class="badge bg-primary">' + imagen.item.categoria + '</span> <span class="badge bg-success">' + imagen.item.largo + ' x ' + imagen.item.alto + '</span></div></div></div>';
});
visual.innerHTML = tarjeta;
resultJSON.length = 0;
}
var delayedSearch;
searchEle.addEventListener("input", () => {
if (delayedSearch) {
clearTimeout(delayedSearch);
}
delayedSearch = setTimeout(iniciaBusqueda, 750);
});
iniciaBusqueda();
</script>
</body>
</html>
</code></pre>
<p>La lista de imágenes (dataset) es un objeto en Json, la estructura puede cambiar.</p><p>Gracias a <a href="https://github.com/derekcabare" target="_blank">Derek</a> por la explicación de cómo funciona Fuse.js</p>Unknownnoreply@blogger.com0Valencia, Provincia de Valencia, España39.4699075 -0.376288111.159673663821152 -35.5325381 67.780141336178843 34.7799619tag:blogger.com,1999:blog-8938133292534274017.post-19841053918628881472022-05-06T19:41:00.003+02:002022-05-06T19:44:11.786+02:00Copiar el valor de un INPUT con Javascript<p></p><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs5IKVq7I6W7zxeS_F1Z7Ha0_V9pCASHkCYt8BYmUG8hyztAGT2LOfWrZzw4u0yemTKxSfozmNIY0VNCT46mkn07G5ELnAN-ie7ngjPi4IMnnJrfnHs6wJ1fwWGOCPQa9e_vEX5otTI71gMxm7Yye4AYQM0RulOnPVElyzEhOklD4C_0joiG5Tvg-fUQ/s16000/input_copy_guiaplaza.jpg" /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /> <p></p><p>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.</p><p>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.</p><h4 style="text-align: left;">Cómo funciona</h4><p>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.</p>
<pre><code class="language-html">
<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>
</code></pre>
<p>Para hacerlo con <a href="https://webmasters.guiaplaza.com/2022/05/copiar-el-valor-de-un-input-de-una.html">varios INPUT</a> mira el siguiente ejemplo: https://webmasters.guiaplaza.com/2022/05/copiar-el-valor-de-un-input-de-una.html</p><p><br /></p>Unknownnoreply@blogger.com0Senda Perolo, 22, 46019 València, Valencia, España39.4994447 -0.374007938.652089751293495 -1.4726407125 40.3467996487065 0.72462491249999994tag:blogger.com,1999:blog-8938133292534274017.post-63795270891098745622022-05-06T19:32:00.001+02:002022-05-06T19:43:04.439+02:00Copiar el valor de un input de una lista de varios input<p></p><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0aeS_CfeSqMinpxC4F5y9pDgds9FAbzuKlAC-hgs3XUvdrkKruUndBFxIAcRTccdBuBNL2MXSTQI-28knt6kRefAnS9SbidZex3mrPR2wcjyTjdydfjZDd6XkNnhjkQxc0TibJ7Vy1yNN28v2It7zDyqWCqwWQXXYsWjl0ebJalZ1T_OzGGMW3B1aCg/s16000/inputs_copy_guiaplaza.jpg" /></div><br /> <p></p><p>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.</p><p>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.</p><h4 style="text-align: left;">Cómo funciona</h4><p>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.</p>
<pre><code class="language-html">
<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="url3" /><button onclick="copiar(123)" type="button">Copiar</button>
<input id="1234" type="text" value="url4" /><button onclick="copiar(1234)" type="button">Copiar</button>
<input id="12345" type="text" value="url5" /><button onclick="copiar(12345)" type="button">Copiar</button>
<input id="123456" type="text" value="url6" /><button onclick="copiar(123456)" type="button">Copiar</button>
<input id="1234567" type="text" value="url7" /><button onclick="copiar(1234567)" type="button">Copiar</button>
<script>
function copiar(id) {
let copyInput = document.querySelector('#' + CSS.escape(id));
copyInput.select();
document.execCommand("copy");
}
</script>
</code></pre>
<p>Para hacerlo con <a href="https://webmasters.guiaplaza.com/2022/05/copiar-el-valor-de-un-input-con.html">un solo INPUT</a> mira el siguiente ejemplo: https://webmasters.guiaplaza.com/2022/05/copiar-el-valor-de-un-input-con.html</p><p><br /></p>Unknownnoreply@blogger.com0C64X+G8 Barcelona, España41.406251 2.248323738.0614958760733 -2.14620755 44.751006123926693 6.64285495tag:blogger.com,1999:blog-8938133292534274017.post-53970310996411099952022-02-09T01:08:00.005+01:002022-02-09T01:11:28.457+01:00JavaScript: Cambiar imagen, si cambia el valor del input<img border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/a/AVvXsEhzdH2B1J_YsYD4mnUNQLp_5OrXcIrsnqY2LQoIaZOUwsIxk_i-Wr3WtfiQT8SeTKNOQyBmLej8bxGjSuS9IwjG9S2sNju4JX1v2PaZAJCed1ud5-k7DYOgoEZszr7SzAFktVdWn9ff3BioGKeGLNg59i3o0rluyPnuUzk6BN9Q7g5Cj8oG56IoIbR6fw=s16000" />
<hr />
<p>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.</p>
<p><b>Voilà! </b>aquí lo que buscabas:</p>
<pre><code class="language-javascript">
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;
}
</code></pre>
<p>Otra versión, hace lo mismo.</p>
<pre><code class="language-javascript">
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;
});
</code></pre>
<p>En realidad hay muchas formas de hacerlo, pero hay que adaptar la que se adapte más a tus necesidades.</p>Unknownnoreply@blogger.com0Valencia, Provincia de Valencia, España39.4699075 -0.376288111.159673663821152 -35.5325381 67.780141336178843 34.7799619tag:blogger.com,1999:blog-8938133292534274017.post-32779891185240472042021-11-09T00:25:00.002+01:002021-11-09T00:25:21.228+01:00Instalar PHP en MacOS Monterrey<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5OLStuNlj_U7NAM2Ev0KA0zsQKfaL-cdM-652PZdxpCh5aIPz762dXMLXMr98HPdZGDFx_FCErDuN5-Hgfbq6Am9V6xijigx109UMpT2Qbp4_j3K6ApCpPelqIE4kIrze0b2Y_QiVo4Jt/s1280/phpMacOS.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5OLStuNlj_U7NAM2Ev0KA0zsQKfaL-cdM-652PZdxpCh5aIPz762dXMLXMr98HPdZGDFx_FCErDuN5-Hgfbq6Am9V6xijigx109UMpT2Qbp4_j3K6ApCpPelqIE4kIrze0b2Y_QiVo4Jt/s16000/phpMacOS.png" /></a></div><br /> <p></p><p>La nueva versión de MacOS, llamada Monterrey viene sin PHP, lo único que trae es el servidor web Apache y con algunas limitaciones.</p><p>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.</p><p>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.</p><h2 style="text-align: left;">Paso 1: Instalar HomeBrew</h2><p>Tienes la opción de ir a su página web: https://brew.sh/ y copiar el código o hacerlo desde acá:</p>
<pre><code class="language-html">
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
</code></pre>
<p>Te pedirá la contraseña del equipo. Esta línea se autoinstala además unos componentes del <a href="https://developer.apple.com/xcode/" rel="nofollow" target="_blank">Xcode</a>, si no lo tienes deberías antes instalarlo. </p><p>Al finalizar podrás comprobar que ya está instalado con este comando que te dice la versión:</p>
<pre><code class="language-php">
brew --version
<br /></code></pre>
<p>para comprobar su buena instalación puede usar:</p>
<pre><code class="language-php">
brew doctor
</code></pre>
<p><br /></p><h2 style="text-align: left;">Paso 2: Desinstalar Apache</h2><p>La versión de serie del equipo no trabaja bien con PHP, así que hay que retirarla así:</p>
<pre><code class="language-php">
sudo apachectl stop
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null
<br /></code></pre>
<p>e instalar</p>
<pre><code class="language-php">
brew install httpd
</code></pre>
<p>y Activar el servicio</p>
<pre><code class="language-php">brew services start httpd</code></pre>
<p>Para probar, ve a tu navegador e ingresa <b>http://localhost:8080</b> en la pantalla debe decir: "<b>It works!</b>" como vemos es el puerto 8080, así que hay que cambiarlo al puerto 80 para que podamos usar solamente http://localhost para lo cual deberemos modificar el archivo httpd.conf</p>
<pre><code class="language-php">
//Ruta del archivo de configuración:
/usr/local/etc/httpd/httpd.conf
</code></pre>
<p>Con tu editor favorito (vi, nano) edítalo con sudo, busca <b>Listen 8080</b> y borra los dos últimos dígitos para que quede <b>Listen 80</b></p><p>Vuelve a probar nuevamente en tu navegador, ahora solamente con http://localhost todo debería funcionar correctamente.</p><p>Ahora bien, es recomendable usar una carpeta para tus archivos, sí así lo haces deberás buscar la línea (seguimos en el httpd.conf) </p>
<p></p><p></p>
<pre><code class="language-php">
DocumentRoot "/usr/local/var/www"
// y reemplazar por:
DocumentRoot "/Users/your_user/Sites"
// este otro archivo debe quedar así:
<Directory "/Users/your_user/Sites">
</code></pre>
<p>Recuerda que aún deberemos volver a editar este archivo para activar php.</p>
<h2 style="text-align: left;">Paso 3: Instalar PHP</h2><p>Seguiremos con Brew:</p>
<pre><code class="language-php">
brew install php
</code></pre>
<p>Una vez instalado, lo activamos:</p>
<pre><code class="language-php">brew services start php</code></pre>
<p>Y comprobamos...</p>
<pre><code class="language-php">php --version</code></pre>
<p> Ahora deberemos volver a editar el archivo httpd.conf y al final de todos las líneas LoadModule, agrega esta:</p>
<pre><code class="language-php">
LoadModule php_module /usr/local/opt/php/lib/httpd/modules/libphp.so
</code></pre>
<p><a href="https://formulae.brew.sh/formula/php" rel="nofollow" target="_blank">Brew recomienda otra línea</a>, pero no funciona, aún así si deseas puedes intentarlo.</p><p>Luego, agrega:</p>
<pre><code class="language-php">
<FilesMatch \.php$>
SetHandler application/x-httpd-php
</FilesMatch>
</code></pre>
<p>Finalmente, busca y agrega index.php en esta línea:</p>
<pre><code class="language-php">
DirectoryIndex index.php index.html
</code></pre>
<p>Reinicia apache:</p>
<pre><code class="language-php">
brew services restart httpd
</code></pre>
<p>y debe estar listo.</p><p>Crea un archivo con el info() de php y verás todo el reporte.</p><p><br /></p><h3 style="text-align: left;">Datos para recordar con Brew:</h3>
<pre><code class="language-php">
brew services stop httpd // Detiene
brew services start php // Inicia
brew services restart httpd // reinicia
</code></pre>
<p><br /></p>Unknownnoreply@blogger.com3Valencia, Provincia de Valencia, España39.4699075 -0.376288111.159673663821152 -35.5325381 67.780141336178843 34.7799619tag:blogger.com,1999:blog-8938133292534274017.post-29254264481342564322021-04-20T00:12:00.004+02:002021-05-18T03:04:00.013+02:00Transformaciones para fotos en blogger(blogspot)<p> Los efectos en fotos en las CMS normalmente son agregados con otros servicios externos de procesamiento de imágenes como <a href="https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/dbnztehvp8woww08b2xs" rel="nofollow" target="_blank">Cloudinary</a> entre otros.</p>
<p>Sin embargo Blogger.com está agregando algunos efectos de recorte al hosting propio de imágenes:</p>
<p>Veamos algunos ejemplos:</p>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/s2048/deperu-com-dclGBWd-2nU-unsplash.jpg" style="margin-left: auto; margin-right: auto;">
<img border="0" data-original-height="1536" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/s16000/deperu-com-dclGBWd-2nU-unsplash.jpg" />
</a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">Tamaño original de 4032 × 3024</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/s16000/deperu-com-dclGBWd-2nU-unsplash.jpg" />
</code></pre>
<p><br /></p><p>Ahora vamos a recortar a FullHD</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/w1920-h1080-p-k-no-nu/deperu-com-dclGBWd-2nU-unsplash.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1920" data-original-width="1080" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/w1920-h1080-p-k-no-nu/deperu-com-dclGBWd-2nU-unsplash.jpg" /></a></div><br />
<pre><code class="language-html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/w1920-h1080-p-k-no-nu/deperu-com-dclGBWd-2nU-unsplash.jpg" />
</code></pre>
<p><br /></p>
<p>Ahora vamos a recortar a una franja horizontal</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/w1920-h480-p-k-no-nu/deperu-com-dclGBWd-2nU-unsplash.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1920" data-original-width="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/w1920-h480-p-k-no-nu/deperu-com-dclGBWd-2nU-unsplash.jpg" /></a></div><p><br /></p><pre><code class="language-html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZNsfYcrxis_mvYRzJDUT5oI-Sc1A06nh_Vm_d_3_xFewu4AuLM8KjsUxUIr4vLls0vpJ66ZvEkTHc4lhIUW3ApJrtZqHgJ3YaG8wPb_enKlNeO2YIiJJiiQRkJc3aQujsOJi5KXHbk4C/w1920-h480-p-k-no-nu/deperu-com-dclGBWd-2nU-unsplash.jpg" />
</code></pre>
<p><br /></p><p>Las posibilidades de recorte pueden ir de acuerdo a las necesidades del editor, puedes crear imágenes verticales u horizontales, todo depende de tu <a href="https://www.deperu.com/catalogos/">catálogo</a> de imágenes .</p><p>Los parámetros de configuración se encuentran en:</p>
<pre><code class="language-html">
w1920-h480-p-k-no-nu
</code></pre>
<p><u>Donde</u>:</p><p>h = height (alto)</p><p>w = width (largo)</p><p>...</p>
<hr />
<p>Photo by <a href="https://unsplash.com/@deperucom?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">DePeru.com</a> on <a href="https://unsplash.com/@deperucom/stats?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p><br />Unknownnoreply@blogger.com1Andorra42.506285 1.52180114.196051163821153 -33.634449000000004 70.816518836178844 36.678050999999996tag:blogger.com,1999:blog-8938133292534274017.post-21343654127349047712021-01-08T00:00:00.005+01:002021-01-08T00:08:50.592+01:00PHP - Eliminar las tildes (acentos) ortográficos<p>Existen varias funciones para eliminar los acentos de las palabras, cada una de ellas se puede usar en escenarios diferentes. El uso más conocido es la generación de las direcciones a través de títulos, ahora requisito de los buscadores, configurado en la cabecera de las páginas.</p>
<p>Ejemplo:</p>
<pre><code class="language-html">
<link href="https://www.guiaplaza.com/esta-direccion-mo-existe.html" rel="canonical"></link>
</code></pre>
<p>Funciones PHP</p>
<pre><code class="language-php">
function quitaTildes($letra)
{
$letra = ereg_replace("[áàäâ]", "a", $letra);
$letra = ereg_replace("[éèëê]", "e", $letra);
$letra = ereg_replace("[íìïî]", "i", $letra);
$letra = ereg_replace("[óòöô]", "o", $letra);
$letra = ereg_replace("[úùüû]", "u", $letra);
$letra = ereg_replace("[Ññ]", "n", $letra);
$letra = str_replace("Ç", "c", $letra);
$letra = str_replace("ç", "c", $letra);
$letra = str_replace(" ", "-", $letra);
$letra = ereg_replace("[()/\$%,;.ºª^+:@!¡|?¿*]", "", $letra);
return $letra;
}
</code></pre>
<p>...</p>Unknownnoreply@blogger.com0Barcelone, Espagne41.3850639 2.173403513.074830063821153 -32.9828465 69.695297736178844 37.3296535tag:blogger.com,1999:blog-8938133292534274017.post-70955899177315491812020-11-13T23:22:00.004+01:002020-11-13T23:30:24.908+01:00Encontrar la primera imagen con PHP<div class="separator" style="clear: both; text-align: center;"><a href="https://www.deperu.com/imagenes/afp/2015/8a3e364395a3bef5969f2668021b15e662c87507.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="768" src="https://www.deperu.com/imagenes/afp/2015/8a3e364395a3bef5969f2668021b15e662c87507.jpg" /></a></div><br /><p><br /></p><p>Cuando trabajamos con bases de datos o archivos json, éstos vienen con código html y a veces es necesario obtener solamente la primera imagen.</p><p>Esta función <b>retornaImagen()</b> me ha servido en muchas ocasiones para extraer la imagen de un texto enriquecido con html.</p><p>La función recibe dos datos:</p><p></p><ol style="text-align: left;"><li>La variable con todo el código html.</li><li>Una URL de una imagen alternativa</li></ol><p></p><p>La función devolverá la URL de la primera imagen encontrada (jpg, png, gif o jpeg), caso contrario devolverá la url de la imagen alternativa.</p><p>Si falla la búsqueda de la imagen, por ejemplo debido a que el scr contiene una imagen de tipo base64, el cual es un código muy largo, la función también devolverá la imagen alternativa. </p>
<pre><code class="language-php">
function retornaImagen($texto, $foto) {
$texto = html_entity_decode($texto);
$inicio = strpos($texto, 'src="');
$fin = 0;
if ((int) strpos($texto, '.jpg') != 0) {
$finImagen['jpg'] = (int) strpos($texto, '.jpg');
}
if ((int) strpos($texto, '.png') != 0) {
$finImagen['png'] = (int) strpos($texto, '.png');
}
if ((int) strpos($texto, '.JPG') != 0) {
$finImagen['JPG'] = (int) strpos($texto, '.JPG');
}
if ((int) strpos($texto, '.PNG') != 0) {
$finImagen['PNG'] = (int) strpos($texto, '.PNG');
}
if ((int) strpos($texto, '.jpeg') != 0) {
$finImagen['jpeg'] = (int) strpos($texto, '.jpeg');
}
if ((int) strpos($texto, '.JPEG') != 0) {
$finImagen['JPEG'] = (int) strpos($texto, '.JPEG');
}
if ((int) strpos($texto, '.GIF') != 0) {
$finImagen['GIF'] = (int) strpos($texto, '.GIF');
}
if ((int) strpos($texto, '.gif') != 0) {
$finImagen['gif'] = (int) strpos($texto, '.gif');
}
$valorBajo = array_values($finImagen);
$fila = array_search(min($valorBajo), $finImagen);
if ($fila == 'jpeg' OR $fila == 'JPEG') {
$digitoResta = 0;
} else {$digitoResta = 1;}
$fin = $finImagen[$fila];
if ($inicio != FALSE) {
$salida = rawurldecode(substr($texto, $inicio + 5, $fin - $inicio - $digitoResta));
if (strlen($salida) < 256) {
return $salida;
} else { return $foto; }
} else {
return $foto;
}
}
</code>
</pre>
<h3>¿Cómo usarla?</h3>
<p>Es sencillo, primero asegúrate de asignar una url de la imagen alternativa a la variable $foto con esto ya podrás trabajar, luego la función la usas con los dos datos que ya tienes. </p>
<pre><code class="language-php">
$foto = 'https://www.guiaplaza.com/imagenes/juan-gomez-bLBrjMXw-5k-unsplash.jpg';
echo retornaFoto($texto, $foto);
</code>
</pre>
<p>Es sencillo </p>Unknownnoreply@blogger.com0Barcelona, Provincia de Barcelona, España41.3850639 2.173403513.074830063821153 -32.9828465 69.695297736178844 37.3296535tag:blogger.com,1999:blog-8938133292534274017.post-45968755455582249452020-03-17T18:51:00.000+01:002020-03-17T18:51:07.968+01:00SEO para Youtubers y no depender de las recomendaciones<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJEV3GBB-AKxaIjCvTnwDktVLeyY36rQwSBriEyZK5hWjnhKAyt6UQoQOmJJkPiCIY3sldMkS9W0ikFS59-0nM7zi5eAAPVZSCOYxrQq7Tyimzm5nwkCWlzQIgWejHM-HEQWdcnPvezvE/s1600/videoEmbed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="458" data-original-width="709" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJEV3GBB-AKxaIjCvTnwDktVLeyY36rQwSBriEyZK5hWjnhKAyt6UQoQOmJJkPiCIY3sldMkS9W0ikFS59-0nM7zi5eAAPVZSCOYxrQq7Tyimzm5nwkCWlzQIgWejHM-HEQWdcnPvezvE/s1600/videoEmbed.png" /></a></div>
<br />
<br />
Muchos Youtubers dependen de las recomendaciones de Youtube, pero estas pueden ser muy buenas hasta que la misma plataforma cambia las reglas.<br />
<br />
Ya son incontables influenciadores que han caído estrepitosamente sus reproducciones porque Google cambió las variables que toma en cuenta para recomendar vídeos.<br />
<br />
Hasta ahora la mejor estrategia es lograr que los sitios web pongan tus vídeos en sus páginas, también llamado como «incrustar» o «embeber» un vídeo dentro de una página web.<br />
<br />
Para ello como Youtuber debes crear Alianzas con sitios web para lograr este objetivo, que pongan tus vídeos en sus páginas.<br />
<br />
Adicionalmente debes lograr que debajo del vídeo inscrustado el webmaster agregue un link directo a tu vídeo o canal. Este link puede ir opcionalmente dentro del texto del artículo o al pie como fuente, lo necesario es conseguir el enlace y no solamente que pongan el vídeo.<br />
<br />
La publicidad en estos videos sigue siendo ingresos únicamente para el Youtuber, no se comparte con el sitio web que lo inserta.<br />
<br />
Si tienes un sitio web podrías considerar aprovechar este <a href="https://www.deperu.com/webmasters/link-youtube/" target="_blank">creador de links para vídeos de youtube</a> de un portal de alto tráfico que apoya a los youtubers de su país, pero que resulta una herramienta muy útil porque crea una página dentro de su dominio con buenos links hacia los vídeos recomendados, es muy fácil de hacer, solo ingresas la dirección de tu vídeo y podrás generar un enlace de una página. Ese link deber agregarlo en tu página, solo el link. Con esta acción harás que se indexe la página del proveedor pero con tu contenido, esto es una opción adicional para ser visto o encontrado en la red.<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0Barcelona, España41.3850639 2.173403541.1944764 1.85068 41.5756514 2.496127tag:blogger.com,1999:blog-8938133292534274017.post-67679443919947295002019-10-17T00:56:00.001+02:002019-10-17T01:00:37.931+02:00Cuántos buscadores aún quedan en la web<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-Fbb6i26e91wQE4SF2Z3zQHDNkORiEfIdN5UJGJNWlyUgO9avLG3H3Du5hgEofqt9Q1l-1pCdNwoxFpHg03GUpmnRSaXYyqrk-76TEg_jqIPb0LBz_gdnnDAUUOPQyrXd0v-RaJK-4UP/s1600/domenico-loia-hGV2TfOh0ns-unsplash.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-Fbb6i26e91wQE4SF2Z3zQHDNkORiEfIdN5UJGJNWlyUgO9avLG3H3Du5hgEofqt9Q1l-1pCdNwoxFpHg03GUpmnRSaXYyqrk-76TEg_jqIPb0LBz_gdnnDAUUOPQyrXd0v-RaJK-4UP/s1600/domenico-loia-hGV2TfOh0ns-unsplash.jpg" /></a></div>
<br />
<br />
Según el mismo google, estos quedan:<br />
<br />
<h2>
Lista de motores de búsqueda predeterminados</h2>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
</style>
<br />
<table>
<tbody>
<tr>
<th>Motor</th>
<th>Nombres de dominio</th>
<th>Parámetro</th>
</tr>
<tr>
<td>360.cn</td>
<td><a href="https://360.cn/" target="_blank">https://360.cn/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Alicia</td>
<td><a href="https://www.alice.com/" target="_blank">https://www.alice.com/</a>
<br />
<a href="https://aliceadsl.fr/" target="_blank">https://aliceadsl.fr</a>
</td>
<td>qs</td>
</tr>
<tr>
<td>Alltheweb</td>
<td><a href="https://www.alltheweb.com/" target="_blank">https://www.alltheweb.com/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Altavista</td>
<td><a href="https://www.altavista.com/" target="_blank">https://www.altavista.com/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>AOL</td>
<td><a href="https://www.aol.com/" target="_blank">https://www.aol.com/</a>
</td>
<td>encquery, q, query</td>
</tr>
<tr>
<td>Ask</td>
<td><a href="https://www.ask.com/" target="_blank">https://www.ask.com/</a>
<br />
<a href="https://search.aol.fr/" target="_blank">https://search.aol.fr</a>
<br />
<a href="https://support.google.com/analytics/answer/alicesuche.aol.de">alicesuche.aol.de</a>
<br />
etc.</td>
<td>q</td>
</tr>
<tr>
<td>Auone</td>
<td><a href="https://search.auone.jp/" target="_blank">https://search.auone.jp/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Avg</td>
<td><a href="https://isearch.avg.com/" target="_blank">https://isearch.avg.com</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Babylon</td>
<td><a href="https://search.babylon.com/" target="_blank">https://search.babylon.com</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Baidu</td>
<td><a href="https://www.baidu.com/" target="_blank">https://www.baidu.com/</a>
</td>
<td>wd, word</td>
</tr>
<tr>
<td>Biglobe</td>
<td><a href="https://biglobe.ne.jp/" target="_blank">https://biglobe.ne.jp</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Bing</td>
<td><a href="https://www.bing.com/" target="_blank">https://www.bing.com/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Centrum.cz</td>
<td><a href="https://search.centrum.cz/" target="_blank">https://search.centrum.cz/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Comcast</td>
<td><a href="https://search.comcast.net/" target="_blank">https://search.comcast.net</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Conduit</td>
<td><a href="https://search.conduit.com/" target="_blank">https://search.conduit.com</a>
</td>
<td>q</td>
</tr>
<tr>
<td>CNN</td>
<td><a href="https://www.cnn.com/SEARCH/" target="_blank">https://www.cnn.com/SEARCH/</a>
</td>
<td>query</td>
</tr>
<tr>
<td>Daum</td>
<td><a href="https://www.daum.net/" target="_blank">https://www.daum.net/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>DuckDuckGo</td>
<td><a href="https://duckduckgo.com/" target="_blank">https://duckduckgo.com</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Ecosia</td>
<td><a href="https://www.ecosia.org/" target="_blank">https://www.ecosia.org</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Ekolay</td>
<td><a href="https://www.ekolay.net/" target="_blank">https://www.ekolay.net/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Eniro</td>
<td><a href="https://www.eniro.se/" target="_blank">https://www.eniro.se/</a>
</td>
<td>search_word</td>
</tr>
<tr>
<td>Globo</td>
<td><a href="https://www.globo.com/busca/" target="_blank">https://www.globo.com/busca/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>go.mail.ru</td>
<td><a href="https://go.mail.ru/" target="_blank">https://go.mail.ru/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Google</td>
<td>(Todos los dominios de Búsqueda de Google)<br />
(p. ej., www.google.com, www.google.co.uk, etc.)</td>
<td>q</td>
</tr>
<tr>
<td>goo.ne</td>
<td><a href="https://goo.ne.jp/" target="_blank">https://goo.ne.jp</a>
</td>
<td>MT</td>
</tr>
<tr>
<td>haosou.com</td>
<td><a href="https://www.haosou.com/s" target="_blank">https://www.haosou.com/s</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Incredimail</td>
<td><a href="https://search.incredimail.com/" target="_blank">https://search.incredimail.com</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Kvasir</td>
<td><a href="https://www.kvasir.no/" target="_blank">https://www.kvasir.no/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Live</td>
<td><a href="https://www.bing.com/" target="_blank">https://www.bing.com/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Lycos</td>
<td><a href="https://www.lycos.com/" target="_blank">https://www.lycos.com/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Lycos</td>
<td><a href="https://search.lycos.de/" target="_blank">https://search.lycos.de</a>
<br />
Otros TLD regionales</td>
<td>query</td>
</tr>
<tr>
<td>Mamma</td>
<td><a href="https://www.mamma.com/" target="_blank">https://www.mamma.com/</a>
</td>
<td>query</td>
</tr>
<tr>
<td>MSN</td>
<td><a href="https://www.msn.com/" target="_blank">https://www.msn.com/</a>
<br />
<a href="https://money.msn.com/" target="_blank">https://money.msn.com</a>
<br />
<a href="https://local.msn.com/" target="_blank">https://local.msn.com</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Mynet</td>
<td><a href="https://www.mynet.com/" target="_blank">https://www.mynet.com/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Najdi</td>
<td><a href="https://najdi.si/" target="_blank">https://najdi.si</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Naver</td>
<td><a href="https://www.naver.com/" target="_blank">https://www.naver.com/</a>
</td>
<td>query</td>
</tr>
<tr>
<td>Netscape</td>
<td><a href="https://search.netscape.com/" target="_blank">https://search.netscape.com/</a>
</td>
<td>query</td>
</tr>
<tr>
<td>ONET</td>
<td><a href="https://szukaj.onet.pl/" target="_blank">https://szukaj.onet.pl</a>
</td>
<td>q, qt</td>
</tr>
<tr>
<td>Ozu</td>
<td><a href="https://www.ozu.es/" target="_blank">https://www.ozu.es/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Rakuten</td>
<td><a href="https://rakuten.co.jp/" target="_blank">https://rakuten.co.jp</a>
</td>
<td>qt</td>
</tr>
<tr>
<td>Rambler</td>
<td><a href="https://rambler.ru/" target="_blank">https://rambler.ru/</a>
</td>
<td>query</td>
</tr>
<tr>
<td>Search-results</td>
<td><a href="https://search-results.com/" target="_blank">https://search-results.com</a>
</td>
<td>q</td>
</tr>
<tr>
<td>search.smt.docomo</td>
<td><a href="https://search.smt.docomo.ne.jp/" target="_blank">https://search.smt.docomo.ne.jp</a>
</td>
<td>MT</td>
</tr>
<tr>
<td>Sesam</td>
<td><a href="https://sesam.no/" target="_blank">https://sesam.no/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Seznam</td>
<td><a href="https://www.seznam.cz/" target="_blank">https://www.seznam.cz/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>So.com</td>
<td><a href="https://www.so.com/s" target="_blank">https://www.so.com/s</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Sogou</td>
<td><a href="https://www.sogou.com/" target="_blank">https://www.sogou.com/</a>
</td>
<td>query</td>
</tr>
<tr>
<td>Startsiden</td>
<td><a href="https://www.startsiden.no/sok" target="_blank">https://www.startsiden.no/sok</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Szukacz</td>
<td><a href="https://www.szukacz.pl/" target="_blank">https://www.szukacz.pl/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Terra</td>
<td><a href="https://buscador.terra.com.br/" target="_blank">https://buscador.terra.com.br</a>
</td>
<td>query</td>
</tr>
<tr>
<td>Tut.by</td>
<td><a href="https://search.tut.by/" target="_blank">https://search.tut.by/</a>
</td>
<td>query</td>
</tr>
<tr>
<td>Ukr</td>
<td><a href="https://search.ukr.net/" target="_blank">https://search.ukr.net/</a>
</td>
<td>q</td>
</tr>
<tr>
<td>Virgilio</td>
<td><a href="https://search.virgilio.it/" target="_blank">https://search.virgilio.it/</a>
</td>
<td>qs</td>
</tr>
<tr>
<td>Voila</td>
<td><a href="https://www.voila.fr/" target="_blank">https://www.voila.fr/</a>
</td>
<td>rdata</td>
</tr>
<tr>
<td>Wirtulana Polska</td>
<td><a href="https://www.wp.pl/" target="_blank">https://www.wp.pl/</a>
</td>
<td>szukaj</td>
</tr>
<tr>
<td>Yahoo</td>
<td><a href="https://www.yahoo.com/" target="_blank">https://www.yahoo.com/</a>
<br />
<a href="https://yahoo.cn/" target="_blank">https://yahoo.cn</a>
<br />
<a href="https://support.google.com/analytics/answer/m.yahoo.com">m.yahoo.com</a>
<br />
Otros sitios móviles regionales</td>
<td>p</td>
</tr>
<tr>
<td>Yandex</td>
<td><a href="https://www.yandex.com/" target="_blank">https://www.yandex.com/</a>
<br />
<a href="https://yandex.ru/" target="_blank">https://yandex.ru</a>
</td>
<td>text</td>
</tr>
<tr>
<td>Yam</td>
<td><a href="https://www.yam.com/" target="_blank">https://www.yam.com/</a>
</td>
<td>k</td>
</tr>
</tbody>
</table>
<br />Unknownnoreply@blogger.com0Barcelona, España41.3850639 2.173403499999949441.1944764 1.8506799999999495 41.5756514 2.4961269999999494tag:blogger.com,1999:blog-8938133292534274017.post-51482111823325353442019-09-26T01:33:00.002+02:002019-09-26T01:38:13.719+02:00Input para crear y direccionar una URL con JavaScript<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZH0RCv0qv1BdikTTMmt25uOcupR4K0DFsWxK0STnIohz-HhjGHZpmUEzYwF6a1dwhfl3ZOTzo4P3xerfB74PNFFp2tNAb_mePJlsOxXaIgfCPK0gslseKDo06QEzzuOmfI2cW8ymMAMwy/s1600/input-url-redirect.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1280" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZH0RCv0qv1BdikTTMmt25uOcupR4K0DFsWxK0STnIohz-HhjGHZpmUEzYwF6a1dwhfl3ZOTzo4P3xerfB74PNFFp2tNAb_mePJlsOxXaIgfCPK0gslseKDo06QEzzuOmfI2cW8ymMAMwy/s640/input-url-redirect.png" width="640" /></a></div>
<br />
<br />
Muchas veces tenemos un sitio web con una casilla de búsqueda (INPUT) y deseamos agregar esta palabra a la creación de una URL, lo usual es hacerlo enviando la palabra como un parámetro de URL y recoger la variable con $_GET de php, pero si ya sabemos cómo va la dirección en su estructura, es mejor crearla en el mismo buscador y redireccionar la página a la nueva dirección de destino.<br />
<br />
Pero, veamos qué objetivos buscamos:<br />
<ul>
<li>Ingresar un texto.</li>
<li>Bajar el texto a minúsculas.</li>
<li>Retirar los acentos o tildes.</li>
<li>Crear una nueva URL.</li>
<li>Redireccionar automáticamente.</li>
</ul>
<br />
<b>Usaremos Javascript:</b><br />
<pre><code class="language-html">
<form>
<input id="text" type="search" placeholder="ingrese texto" />
<button onclick = "ir()" type="submit">Buscar</button>
</form>
<script>
function ir() {
var url= "https://www.deperu.com/productos/categoria-" + document.getElementById("text").value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "") + "/";
setTimeout(function(){window.location = url;}, 0);
}
</script>
</code></pre>
Demo: <a href="https://www.deperu.com/productos/" target="_blank">Buscador de productos</a><br />
<br />
Tengan en cuenta que se ha usado setTimeout para dar un tiempo cero en la redirección, lo que se podría aprovechar para colocar antes un document.write e imprimir un texto, dándole un tiempo extra para que se visualice bien.<br />
<pre><code class="language-html">
<script>
//...
document.write("Será direccionado en 3 segundos...");
setTimeout(function(){window.location = url;}, 3000);
//...
</script>
</code></pre>
Basado en el artículo: <a href="https://www.geeksforgeeks.org/javascript-redirect-a-url/" target="_blank">JavaScript | Redirect a URL</a>, y optimizado para llevar solo minúsculas y eliminar los acentos.<br />
<br />Unknownnoreply@blogger.com0Andorra42.506285 1.521800999999982242.131915 0.8763539999999822 42.880655 2.1672479999999821tag:blogger.com,1999:blog-8938133292534274017.post-55525893365186315052019-03-06T23:41:00.000+01:002019-03-06T23:41:50.615+01:00PHP - Cortar cadena de texto hasta un determinado carácter<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtwWG0RrFckebpdCZoefRMWWmYBptnz_cgQEfn8WwVZ6EQiyVQLTL5YVIxRWDyz71M0_4hryWVcNl1lR4ridgraYo2l7GetsyrwyLxv0-YstHG-ElLxqCF6PKyBa65IIkAYATZi2WMZ22/s1600/php_guiaplaza.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="127" data-original-width="358" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtwWG0RrFckebpdCZoefRMWWmYBptnz_cgQEfn8WwVZ6EQiyVQLTL5YVIxRWDyz71M0_4hryWVcNl1lR4ridgraYo2l7GetsyrwyLxv0-YstHG-ElLxqCF6PKyBa65IIkAYATZi2WMZ22/s320/php_guiaplaza.png" width="320" /></a></div>
<br />
Tenemos la cadena:<br />
<pre><code class="language-php">
$cadena = "Título de receta 1: en GuiaPlaza.com";
$cadena2 = "Título de receta 2: en GuiaPlaza.com";
$cadena3 = "Título de receta 3: en GuiaPlaza.com";
// ... y así sucesivamente.
</code></pre>
<br />
Normalmente puede ser un array.<br />
<pre><code class="language-php">
$cadena = preg_match("/(.*)\:/", $cadena, $matches);
echo $matches[1];
// Resultado: Título de receta 1
</code></pre>
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0Madrid, España40.4167754 -3.703790199999957640.0300434 -4.3492371999999575 40.8035074 -3.0583431999999577tag:blogger.com,1999:blog-8938133292534274017.post-31617274269813919992019-03-06T19:44:00.000+01:002019-03-06T19:46:03.166+01:00PHP - Eliminar texto entre paréntesis dentro de una cadena<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtwWG0RrFckebpdCZoefRMWWmYBptnz_cgQEfn8WwVZ6EQiyVQLTL5YVIxRWDyz71M0_4hryWVcNl1lR4ridgraYo2l7GetsyrwyLxv0-YstHG-ElLxqCF6PKyBa65IIkAYATZi2WMZ22/s1600/php_guiaplaza.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="127" data-original-width="358" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtwWG0RrFckebpdCZoefRMWWmYBptnz_cgQEfn8WwVZ6EQiyVQLTL5YVIxRWDyz71M0_4hryWVcNl1lR4ridgraYo2l7GetsyrwyLxv0-YstHG-ElLxqCF6PKyBa65IIkAYATZi2WMZ22/s320/php_guiaplaza.png" width="320" /></a></div>
<br />
<br />
Se tiene la cadena:<br />
<pre><code class="language-php">
$cadena = "GuiaPlaza.com es un sitio con buenas recetas (actualizado a 2018)";
</code></pre>
<br />
Y lo que deseamos hacer es eliminar el texto entre paréntesis.<br />
<pre><code class="language-php">
$cadena = preg_replace("/\((.*?)\)/",".", $cadena);
echo $cadena;
// devuelve: GuiaPlaza.com es un sitio con buenas recetas
</code></pre>
En el ejemplo de arriba lo hemos reemplazado con un punto ".", pero podría ser un espacio en blanco o nada.<br />
<br />
No hay que olvidar que nos entregará un espacio en blanco al final, así que hay que retirarlo con la función trim:<br />
<pre><code class="language-php">
$cadena = trim($cadena);
</code></pre>
<br />
Este útil ejemplo puede servir para eliminar otro texto entre llaves o corchetes, etc.<br />
<pre><code class="language-php">
$cadena = preg_replace("/\{(.*?)\}/",".", $cadena);
$cadena = preg_replace("/\[(.*?)\]/",".", $cadena);
$cadena = preg_replace("/\<(.*?)\>/",".", $cadena);
</code></pre>
<br />
¡Suerte!Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8938133292534274017.post-52699122870207364312019-02-28T21:52:00.000+01:002019-02-28T21:52:05.741+01:00PHP - Los arraysLos arrays en PHP son fáciles de usar cuando se comprende su estructura:<br />
<br />
<pre><code class="language-php">
$variable = array(datos);
</code></pre>
<b>Datos de Texto
</b><br />
Este tipo de array es el más simple y no usa clave.<br />
<pre><code class="language-php">
$variable = array("rojo","azul","amarillo");
</code></pre>
<b>Datos Numéricos
</b><br />
Fijarse que este tipo de array no lleva comillas.<br />
<pre><code class="language-php">
$variable = array(1,2,3,4,5);
</code></pre>
<b>Datos combinados
</b><br />
Notar que los datos numéricos no llevan comillas y los datos de texto si lo hacen<br />
<pre><code class="language-php">
$variable = array("rojo",2,"verde",4,"azul");
</code></pre>
<h4>
Arrays Asociativos
</h4>
Este tipo de array son más completos y sirven para ser más específicos con los datos, se recomienda su uso cuando tenemos más información para crearlos, como ya diferenciamos los tipos de datos, ahora vamos a usar un array asociativo combinado.
<br />
<pre><code class="language-php">
$variable = array("color" => "rojo", "cantidad" => 20, "lugar" => "arriba", "puntaje" => 12);
</code></pre>
La clave (key) es una descripción del tipo de dato que sigue a la derecha, como indica la flecha.<br />
<br />
<pre><code class="language-php">"color" => "rojo"</code></pre>
<br />
<b>color</b> es la <i>clave</i> (key) y <b>rojo</b> es el <i>dato</i>, de igual manera es el resto.<br />
<br />
Notar que es casi como una variable con un solo dato, aunque la potencia de los arrays es que pueden contener mucha más información que una sola palabra o un solo número. Por ejemplo pueden ser cadenas de texto separadas por comas.<br />
<br />
Más adelante veremos los arrays Multidimensionales que son arrays dentro de otros arrays.<br />
<h4>
Sobre los Keys (claves)</h4>
<ul>
<li><b>Si la clave es</b> un texto debe ir "entre comillas".</li>
<li>Si es un número siempre <b>debe ser un número entero</b>, cualquier decimal será eliminado.</li>
<li>Si es un número con <b>un cero adelante</b>, será almacenado y procesado como un texto, es más deberá ser creado con comillas, ejemplo: "07" => "dato".</li>
<li>Si se asigna true (verdadero) o false (falso) php le asigna <b>1 para true</b> y <b>0 para false</b>.</li>
</ul>
<h4>
Cómo ver el contenido de un Array</h4>
Existen dos funciones para visualizar los arrays en modo de desarrollo, éstas no deben utilizarse en la programación, son solo para uso de los programadores, los veremos en detalle en otro post.<br />
<pre><code class="language-php">
print_r($variable);
var_dump($variable</code>);</pre>
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8938133292534274017.post-75199599976159797182018-09-11T02:04:00.000+02:002018-09-11T02:04:20.329+02:00Resaltar texto en página con jqueryEs muy común en algunas páginas web que haya un <span style="background-color: yellow;"><b>texto resaltado</b></span> debido a una búsqueda o palabra clave destacada, esto se puede hacer directamente en la página del lado del usuario/navegador con jquery, evitando resaltar desde el lenguaje de programación usado en el servidor de hosting.<br />
<br />
Primero hay que crear un estilo para resaltar el texto<br />
<pre><code class="language-html">
<style type="text/css">
.highlight { background-color: yellow }
</style>
</code></pre>
<br />
Luego debemos enlazar un plugin de jquery, porsupuesto luego invocar a jquery.<br />
<pre><code class="language-html">
<script language="javascript" type="text/javascript" src="/js/jquery.highlight-3.yui.js"></script>
</code></pre>
Seguido vamos a crear el script que buscará un párrafo <p> con la palabra a destacar, en este caso del ejemplo será laptops.<br />
<pre><code class="language-html">
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('p').highlight('laptops');
});
</script>
</code></pre>
Podemos ver un demo real en el <a href="https://www.deperu.com/catalogos/tema-tablets" target="_blank">siguiente link</a><br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8938133292534274017.post-14406510809003709072018-09-05T02:42:00.001+02:002018-09-05T02:46:12.434+02:00Agregar ID aleatorios a archivo CSS para actualizarlo y evitar el caché<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="127" data-original-width="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtwWG0RrFckebpdCZoefRMWWmYBptnz_cgQEfn8WwVZ6EQiyVQLTL5YVIxRWDyz71M0_4hryWVcNl1lR4ridgraYo2l7GetsyrwyLxv0-YstHG-ElLxqCF6PKyBa65IIkAYATZi2WMZ22/s1600/php_guiaplaza.png" /></div>
Este sencillo código te permitirá evitar el caché del navegador del usuario o evitar el caché del hosting. Por ejemplo si tienes un archivo CSS en tu página:
<br />
<pre><code class="language-html">
<link href="https://www.guiaplaza.com/css/estilos.css" rel="stylesheet">
</code></pre>
<br />
Lo más probable es que éste se almacene en el caché y cuando quieras hacer una actualización y subas el archivo no verás los cambios.
Si la extensión de tu página es .php podrás agregar este sencillo código.
<br />
<pre><code class="language-php">
<?php echo '?'.rand(1000, 9999); ?>
</code></pre>
<br />
Cuando ya no necesites la actualización automática simplemente puedes comentar la línea:
<br />
<pre><code class="language-php">
<?php //echo '?'.rand(1000, 9999); ?>
</code></pre>
<br />
<h4>
¿Cómo Funciona?</h4>
<pre><code class="language-html">
<link href="https://www.guiaplaza.com/css/estilos.css<?php echo '?'.rand(1000, 9999); ?>" rel="stylesheet">
</code></pre>
<br />
Es sencillo, <b><i>echo</i></b> es la sentencia que imprime en la página y <i><b>rand()</b></i> es un generador aleatorio, en este caso generará un número aleatorio entre <b>1000 y 9999</b>, puedes ampliar el rango o reducirlo a tu gusto.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8938133292534274017.post-87800766516172355312017-09-15T20:16:00.000+02:002018-09-05T02:21:08.171+02:00Poner en negritas parte de un texto en una página<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArSNLDzUjqUqAc84xgoO-o2kA93vMia02o0NTru3iMYpGqts6ZiDbC3tUyVs99fWql5CRWErx8nliWKB_RXMtqEkTqGV0HuPZE_m3I0aRwyMghCJVeDmsMX0FF74YEXzG9UneY8GBC3yG/s1600/Capture+d%25E2%2580%2599e%25CC%2581cran+2017-09-15+a%25CC%2580+12.56.46+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="318" data-original-width="662" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArSNLDzUjqUqAc84xgoO-o2kA93vMia02o0NTru3iMYpGqts6ZiDbC3tUyVs99fWql5CRWErx8nliWKB_RXMtqEkTqGV0HuPZE_m3I0aRwyMghCJVeDmsMX0FF74YEXzG9UneY8GBC3yG/s640/Capture+d%25E2%2580%2599e%25CC%2581cran+2017-09-15+a%25CC%2580+12.56.46+PM.png" width="640" /></a></div>
<br />
Este efecto lo he visto en un sitio llamado <a href="https://www.deperu.com/" target="_blank">DePeru.com</a> en sus noticias hay un texto que no está en negrita con la etiqueta <strong> o <b> sino que se convierte en negrita gracias a Jquery (en el código fuente).<br />
<br />
El uso de este efecto se puede trasladar a muchos otros escenarios donde podríamos necesitar cambiar los estilos para nuestras páginas.<br />
<br />
Para este caso el webmaster ha detectado que todos sus textos tienen un <p> que empieza con una raya (o guión) ... visto desde el código fuente por supuesto.<br />
<br />
<pre><code class="language-html">
<p>- Multiplicar el impacto -</p>
</code></pre>
Para cualquier otra aplicación podría ser un <h1>, <a>... etc<br />
<br />
El truco es simple, debajo de la llamada al archivo Jquery externo y antes de finalizar el <i>body </i>agregar el <i>script</i>:<br />
<br />
<pre><code class="language-html">
<script>
$( ".contenido p:contains('- ')" ).css( "font-weight","bold" );
</script>
</body>
</html>
</code></pre>
<br />
<b><u>Dónde</u>:</b> <i>.contenido</i> es el class que contiene al texto, luego le dice que busque un <p> que contenga el caracter señalado ('- ') es importante darse cuenta del espacio seguido de la raya. Bueno lo demás es aplicarle uno o más estilos.<br />
<br />
<b>Les dejo el link de la noticia para que vean su código fuente y entiendan a detalle:</b><br />
<a href="https://www.deperu.com/noticias/con-neymar-mbappe-y-compania-el-paris-sg-es-el-nike-futbol-club-82487.html" target="_blank">https://www.deperu.com/noticias/con-neymar-mbappe-y-compania-el-paris-sg-es-el-nike-futbol-club-82487.html</a><br />
<br />Unknownnoreply@blogger.com0Miami, Florida, EE. UU.25.7616798 -80.19179020000001425.5329123 -80.514513700000009 25.9904473 -79.869066700000019tag:blogger.com,1999:blog-8938133292534274017.post-34442498767489757002017-08-18T05:53:00.000+02:002018-09-05T02:13:05.003+02:00Protege tus fotos propias con imágenes sobrepuestas<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
En internet hay 03 tipos de usuarios, los novatos, los intermedios y los expertos, para estos últimos que tienen altos conocimientos, será imposible intentar bloquear una imagen, sin embargo para los otros dos primeros y que son la mayoría si es viable.<br />
<br />
Un truco poco difundido es usar imágenes transparentes, normalmente gif o png que se colocan encima (sobreponer) de la imagen que se desea proteger.<br />
<br />
El usuario al dar clic derecho no podrá grabar la imagen protegida, sólo tendrá acceso a grabar la imagen transparente que se encuentra encima.<br />
<br />
Las imágenes transparentes la podemos crear en cualquier tamaño, se pueden estirar sin problema porque no tienen información visual y con cualquier programa gratuito se pueden realizar.<br />
<br />
<b>Veamos el ejemplo, protegeremos la imagen que se ve:</b><br />
<br />
<div style="position: relative;">
<img height="280" hspace="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9cpNKIlobIujoYNsC32_MBhNQVOZiDCSMYzsHd-dNYtzpIcav9NZGerl9SP-8wjpqxxZwvxCbEUp6Do-SzNpjLJC9Yx-8ao_wJaPo2FemtYZ6Ho6EbM3USPjhNwwYHifq2C0pjJyjUY/s1600/10-euros.jpg" vspace="16" width="280" />
<br />
<div style="left: 0; position: absolute; top: 0;">
<a href="http://www.guiaplaza.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghmDMXM-UACzKwwByNMgWS4MVh_MDhgwf4VsiGEc8K9p__v_IlNumqYu7KG3Z-12gsrSLvgz1jhzQMeJk8Gr7yZfU6XdQbQ9XK10PbACvhD4JKCt9zqBEL0sbmshyphenhyphen3-S1X6KcrBRfyjvw/s1600/marcochistes.png" width="300" /></a></div>
</div>
<br />
<br />
Aún poniendo la foto en una plataforma gratuita como blogger es posible proteger las fotos, ahora veamos el código:<br />
<pre><code class="language-html">
<img alt="foto escondida" height="384" src="http://1.bp.blogspot.com/-2-MMeXF8qFw/TkyMQZCVVVI/AAAAAAAAALY/iJsHLoSbhuQ/s1600/proteger-imagen.jpg" width="450" />
<div style="left: 0; position: absolute; top: 0;">
<img alt="imagen sobrepuesta" border="0" height="384" src="http://1.bp.blogspot.com/-hm46jqQXNuY/TkyPbBiDRYI/AAAAAAAAALc/jZDqp4evsac/s1600/transparente_guiaplaza.png" width="450" /></div>
</code>
</pre>
<br />
<br />
El truco es sobreponer una imagen transparente, que podría como en este caso mostrado aquí hasta tener el copyright o la dirección de tu web, cualquier variedad está limitado por la imaginación.<br />
<br />
<span class="Apple-style-span" style="background-color: white; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: 13px; line-height: 18px;"><b><span class="Apple-style-span" style="font-size: medium;">Otros artículos del mismo tema que te pueden interesar:</span></b></span><br />
<span class="Apple-style-span" style="background-color: white; font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: 13px; line-height: 18px;"><b><span class="Apple-style-span" style="font-size: medium;"><br /></span></b></span>
<span class="Apple-style-span" style="background-color: white; line-height: 18px;"><span class="Apple-style-span" style="font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: large;"><b>» <a href="http://webmasters.guiaplaza.com/2011/01/superponer-una-imagen-sobre-otra-con.html">Superponer una imagen sobre otra con CSS</a></b></span></span><br />
<span class="Apple-style-span" style="background-color: white; line-height: 18px;"><span class="Apple-style-span" style="font-family: "trebuchet ms" , "trebuchet" , "verdana" , sans-serif; font-size: medium;"><b><br /></b></span></span></div>
Anonymousnoreply@blogger.com6Barcelona, España41.387917 2.169918700000039341.3137835 2.0830957000000394 41.462050500000004 2.2567417000000392tag:blogger.com,1999:blog-8938133292534274017.post-83975459076011819722017-08-01T20:00:00.000+02:002018-07-24T20:03:19.794+02:00Lista de Anunciantes para ads.txtEl último acuerdo del IAB ahora incluye agregar una lista de las cuentas de anunciantes que los editores tienen en las redes publicitarias, las famosas networks.<br />
<br />
Cabe destacar que a veces los publishers tienen más de una cuenta, por ejemplo una cuenta de adsense para el diseño de pc de escritorio y otra cuenta de Adsense para móviles, en este caso hay que agregar ambas cuentas.<br />
<h3>
LISTA de ejemplo para ads.txt</h3>
<code>
google.com, pub-xxxxxxxxxxxxxxxx, DIRECT<br />
c.amazon-adsystem.com, xxxx, DIRECT<br />
teads.tv, xxxxx, DIRECT, 15a9c44f6d26cbe1<br />
facebook.com, xxxxxxxxxxxxxxx, DIRECT<br />
appnexus.com, xxxx, DIRECT<br />
indexexchange.com, xxxxxx, DIRECT<br />
liveintent.com, xxx, DIRECT<br />
openx.com, xxxxxxxxx, DIRECT<br />
rubiconproject.com, xxxxx, DIRECT<br />
yieldmo.com, xxxxxxxxxxxxxxxxxxx, DIRECT<br />
<br />--- PRONTO ---<br />
taboola.com,<br />
vidweb.com,</code><br />
<code>disqus.com<br />
</code><br />
Aún falta completar, pero iremos agregando según vaya llegando más información.<br />
<br />
(*) Las equis (x) representan el número de dígitos hasta ahora conocidos.<br />
<br />
Demo: <a href="https://www.irradiah.com/ads.php?dom=guiaplaza.com" target="_blank">ver ads.txt</a>Unknownnoreply@blogger.com0España40.463667000000008 -3.749220000000036614.533696500000008 -45.057814000000036 66.393637500000011 37.559373999999963tag:blogger.com,1999:blog-8938133292534274017.post-31141700041948327872017-06-24T01:21:00.000+02:002017-06-24T01:21:58.731+02:00Especial Cordova - 4 - Creando APK para Publicar en Store<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3RJR5uxPj7u2wLRrfkxcctAzVlfwvuxsP1OMm2nVjZETO9zJgmf5o4Znh0LiWKwty-vO8PlxJrBk5804hCuyqMboouBbw5jNy3N0oO_SL-vBsW0IMtefjwLPcgsrtDK9kK8VwVr5naJpc/s1600/apk1600.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3RJR5uxPj7u2wLRrfkxcctAzVlfwvuxsP1OMm2nVjZETO9zJgmf5o4Znh0LiWKwty-vO8PlxJrBk5804hCuyqMboouBbw5jNy3N0oO_SL-vBsW0IMtefjwLPcgsrtDK9kK8VwVr5naJpc/s320/apk1600.png" width="320" /></a></div>
<br />
Supongo que ya has probado y re-probado tu App en el emulador y quizás en tu propio móvil, bueno el archivo que has estado usando está en modo "debug", así que vamos por pasos:<br />
<br />
Ahora debes tener un archivo como este: <code>android-debug.apk</code><br />
<h3>
1. Crear el archivo en modo "release" </h3>
el cual está preparado para ser publicado, pero falta firmar con un certificado que te identifica como su creador y te permite solo a ti hacer una actualización del App.<br />
<br />
<code>cordova build --release android</code><br />
<br />
Esto generará un archivo como este otro: android-release-unsigned.apk<br />
<h3>
2. Firmar APK teniendo archivo keystore</h3>
Habiendo generado tu archivo keystore haz esto:<br />
<br />
<code>jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore firma.keystore android-release-unsigned.apk alias</code><br />
<br />
donde:<br />
<br />
firma.keystore es el nombre del archivo generado o que ya tienes.<br />
<br />
alias fue usado en la creación del archivo keystore<br />
<br />
Cuando lo ejecutes te pedirá la clave que igualmente usaste en el keystore.<br />
<br />
En este paso tu archivo android-release-unsigned.apk ya debe estar firmado, pero sigue con el mismo nombre. Si deseas comprobar que realmente está firmado usa:<br />
<br />
<code>jarsigner -verify -verbose -certs android-release-unsigned.apk</code><br />
<h3>
3. Cambiar de nombre y Comprimir APK</h3>
Con este paso terminamos, lo que hace este comando es comprimir el archivo para un uso más eficiente de la memoria dentro de los móviles.<br />
<br />
<code>zipalign -v 4 android-release-unsigned.apk NombredelApp.apk </code><br />
<br />
Si sale error porque no encuentra zipalign usa la ruta del archivo<br />
<br />
<code>/Users/TuUsuarioMac/Library/Android/sdk/build-tools/26.0.0/zipalign -v 4 android-release-unsigned.apk NombredelApp.apk</code><br />
<br />
El número 26.0.0 puede variar de acuerdo a tu versión de Android Studio y cuando la descargaste.<br />
<br />Unknownnoreply@blogger.com0Barcelona, España41.3850639 2.173403499999949441.1944764 1.8506799999999495 41.5756514 2.4961269999999494tag:blogger.com,1999:blog-8938133292534274017.post-4214768379830071452017-06-24T00:53:00.001+02:002017-06-24T00:53:29.891+02:00Especial Cordova - 1 - La Instalación<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4lyVBI0Q_8KCxl8YBv-YigwP_CO2f6wLBUwM0wNvuisMoPNkNrqPnC-kFuJg8TtG2PY3DKA3hbWlzlCoW-oJyFExNFbMDCozB2Q94HlEKtHcYuDB6SaG8uZ_baZCV9F29f0kXnhTI3e3/s1600/Apache_Cordova1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="477" data-original-width="1600" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4lyVBI0Q_8KCxl8YBv-YigwP_CO2f6wLBUwM0wNvuisMoPNkNrqPnC-kFuJg8TtG2PY3DKA3hbWlzlCoW-oJyFExNFbMDCozB2Q94HlEKtHcYuDB6SaG8uZ_baZCV9F29f0kXnhTI3e3/s640/Apache_Cordova1.png" width="640" /></a></div>
<br />
Mucho se habla que Cordova es muy fácil y que cualquiera puede hacer aplicaciones híbridas, bueno vamos a facilitarle la vida a muchos, ojalá hubiese yo encontrado la información que les voy a dar en estos artículos.<br />
<h3>
PARA MAC</h3>
Para empezar de cero reinstalé el sistema operativo de mi MAC- Sierra. Ustedes lo pueden hacer instalar desde donde ya están.<br />
<h4>
1. Asegurarse que ya tienen instalado el JDK de JAVA</h4>
Abrir Safari y entrar a este link: https://www.java.com/es/download/installed8.jsp<br />
Lógico, dar clic en el botón rojo de "Verificar versión de Java"<br />
<br />
Si no lo tienen instalarlo de: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html<br />
<br />
Clic en botón: "Accept License Agreement" y elegir descarga de "Mac OS X<span style="white-space: pre;"> </span>226.57 MB <span style="white-space: pre;"> </span>jdk-8u131-macosx-x64.dmg" o la última que que haya en este momento.<br />
<h3>
2. Descargar e instalar Node.js porque este software trae un administrador de paquetes vía consola llamado NPM y con ese vamos a instalar Cordova.</h3>
Elegir versión LTS y Macintosh Installer en: https://nodejs.org/es/download/<br />
<br />
Ahora si recién abran la web de Cordova: https://cordova.apache.org<br />
<br />
(antes del paso 3 sería bueno comprobar que npm está bien instalado, abre la terminar/consola y escribe npm -v y te dará unos números de versión, hasta ahí todo bien)<br />
<h3>
3. Instalar Cordova como dice en su web</h3>
Abrir la terminal de mac y escribir: npm install -g cordova<br />
<br />
No termina todo ahí para que podamos convertir los archivos en el famoso APK de Android debemos instalar el SDK de Android y lo más fácil y recomendable es instalando Android Studio, seguro dirás, "es justo lo que no quería hacer", pero créeme es lo más fácil.<br />
<h3>
4. Instalar Android Studio de Google</h3>
Con esta instalación obtenemos el famoso y necesario SDK y el emulador mejorado de móvil, por lo menos ahora ya parece un móvil de verdad.<br />
<br />
Te dejo el link de descarga: https://developer.android.com/studio/index.html<br />
<br />
Como paso final deberás abrir Android Studio y crear una aplicación cualquiera, dale siguiente a todo.<br />
<br />
Luego vas al menú Tools, Android, SDK Manager<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHy6tQLXwPssric-e9xI65B830EEJxCouJ2n4caMm7iWvM8ywQTgQfqPYlGDr85mvuO_mtlh3JVqOqMa8agNiVZZk_6i7gjFgQkaAxEhsZo7McpwLQcjYi_zweqRXlLuF8wzjsqKMk4FHA/s1600/Captura+de+pantalla+2017-06-23+a+la%2528s%2529+17.44.27.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="417" data-original-width="709" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHy6tQLXwPssric-e9xI65B830EEJxCouJ2n4caMm7iWvM8ywQTgQfqPYlGDr85mvuO_mtlh3JVqOqMa8agNiVZZk_6i7gjFgQkaAxEhsZo7McpwLQcjYi_zweqRXlLuF8wzjsqKMk4FHA/s640/Captura+de+pantalla+2017-06-23+a+la%2528s%2529+17.44.27.png" width="640" /></a></div>
<br />
En el SDK activa las versiones que deseas tener, recomendable desde la 4.00 para arriba, y en la otra pestaña (SDK Tools) activa Google Play services si es que vas a poner publicidad con Admob de Google, si no después lo puedes hacer.<br />
<br />
Luego ve al menú RUN y Run App, se abrirá una ventana donde debes crear si no lo hay un móvil que te servirá como emulador.<br />
<br />
Con esto ya puedes empezar a trabajar con Cordova, en el siguiente ejemplo haremos una aplicación básica y sabrás que no funciona en el html y javascript para las aplicaciones híbridas.<br />
<br />
<br />Unknownnoreply@blogger.com0Barcelona, España41.3850639 2.173403499999949441.1944764 1.8506799999999495 41.5756514 2.4961269999999494tag:blogger.com,1999:blog-8938133292534274017.post-14005129619464235042017-04-06T00:06:00.001+02:002017-04-06T00:06:19.728+02:00Tildes y diéresis en las URL con htaccess<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBZD9wfUR1xgV_ymMbLEnHH5Z5dlV28hBPH8OHCD07jkyYcmj9T4-4QrMmp74jnPalDxg_WzvzU01s6ONYC3nwnpythXxkL6KVT-jv3nNKP2qw3ms1vpRVflUjH_XyYElMM74m8H20XmX/s1600/cooltext239240181517358.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBZD9wfUR1xgV_ymMbLEnHH5Z5dlV28hBPH8OHCD07jkyYcmj9T4-4QrMmp74jnPalDxg_WzvzU01s6ONYC3nwnpythXxkL6KVT-jv3nNKP2qw3ms1vpRVflUjH_XyYElMM74m8H20XmX/s1600/cooltext239240181517358.png" /></a></div>
Hoy en día las direcciones de páginas web ya pueden llevar tildes, diéresis y la virgulilla(de la ñ), estos acentos se pueden configurar con una solo línea en el archivo htaccess de tu hosting.<br />
<br />
Como comentario aparte vale recordar que en la actualidad también se pueden registrar dominios con tildes y eñes, no es una novedad porque ya lleva unos años, pero se ha implementado muy poco.<br />
<br />
La línea en htaccess es la siguiente:<br />
<br />
<span style="font-family: Courier New, Courier, monospace;">RewriteRule ^([a-zÑ-üA-Z-]+)$ index.php?Variable=$1</span><br />
<h3>
Explicación:</h3>
El archivo htaccess recibe los patrones de los caracteres ASCII, los cuales se encuentran ordenados alfabéticamente, es por eso que cuando usamos <span style="font-family: Courier New, Courier, monospace;">[a-z]</span> le decimos que vaya desde la letra <span style="font-family: Courier New, Courier, monospace;"><b>a</b></span> hasta la última letra que es la <span style="font-family: Courier New, Courier, monospace;"><b>z</b></span> y de igual manera con las mayúsculas.<br />
<br />
Pero al caso curioso es que las letras tildadas en diferentes idiomas también tienen un rango que van del 209 al 252 de la lista de caracteres ASCII:<br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><b>Ñ</b>, Ò, Ó, Ô, Õ, Ö, ×, Ø, Ù, Ú, Û, Ü, Ý, Þ, ß, à, à, <b>á</b>, â, ã, ä, å, æ, ç, è, <b>é</b>, ê, ë, ì, <b>í</b>, î, ï, ð, <b>ñ</b>, ò, <b>ó</b>, ô, õ, ö, ÷, ø, ù, <b>ú</b>, û, ü</span><br />
<br />
De esta lista tenemos la Ñ, ñ, á, é, í, ó, ú y la ü, completando los caracteres oficiales de la lengua española.<br />
<br />
<b>Ejemplos:</b><br />
<br />
Tenemos los siguientes links:<br />
<br />
<ul>
<li><a href="https://www.deperu.com/escudos/apellido-ch%C3%A1vez">Escudo del apellido Chávez</a></li>
<li>Datos del <a href="http://www.deperu.com/apellidos-peruanos/p%C3%A9rez.html">apellido Pérez</a></li>
</ul>
<br />
<br />
<br />Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-8938133292534274017.post-73068270679357412432017-01-28T01:03:00.001+01:002021-04-20T00:35:49.778+02:00Superponer una imagen sobre otra con CSS<div style="position: relative;">
<img height="280" hspace="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbRbxOXdH6JgMiE_HLf8P-0ahZvxEP0y_7mwJxp0-3d4fduBKUobHvC9fQJkf92SMopQTcJbBgOJ49WpLAgEeDbZi1-46CmYXexZ3oSxqjzr9rIYTcEOhNB_d6Ko8Wyis1DLw0-CGNy8/s1600/proteger-imagen.jpg" vspace="16" width="280" />
<br />
<div style="left: 0px; position: absolute; top: 0px;">
<a href="http://www.guiaplaza.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghmDMXM-UACzKwwByNMgWS4MVh_MDhgwf4VsiGEc8K9p__v_IlNumqYu7KG3Z-12gsrSLvgz1jhzQMeJk8Gr7yZfU6XdQbQ9XK10PbACvhD4JKCt9zqBEL0sbmshyphenhyphen3-S1X6KcrBRfyjvw/s1600/marcochistes.png" width="300" /></a></div>
</div>
<br />
El otro día me encontré con la necesidad de superponer una <a href="https://webmasters.guiaplaza.com/2021/04/transformaciones-fotos-blogger-blogspot.html">imagen</a> sobre otra, mi aplicación debía mostrar una imagen y luego encima colocarle un marco quedando superpuesto.<br />
<br />
Claro está que la imagen superpuesta como un marco debe ser trasparente en su interior para poder mostrar la imagen que va debajo.<br />
<br />
Hay dos maneras de hacerlo, una poniendo el estilo en un archivo externo o incrustado en el <head> de la página web o sino agregándolo en el mismo DIV.<br />
<pre><code class="language-html">
<div style="position:relative">
<img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" />
<div style="position:absolute; top:0; left:0;">
<a href="http://www.guiaplaza.com">
<img border="0" src="marco_chistes.png" width="300" height="300" />
</a>
</div>
</div>
</code></pre>
<br />
<b>Si desean la opción completa es la siguiente:</b><br />
<pre><code class="language-html">
<html>
<head>
<title>Ejemplo de Superponer Imagenes</title>
</head>
<style type="text/css">
#chistes{
position: relative;
}
.sobre {
position:absolute;
top:0px;
left:0px;
border:none;
}
</style>
<body>
<div id="chistes">
<img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" />
<a href="http://www.guiaplaza.com/chistes"><img class="sobre" src="marco_chistes.png" width="300" height="300" /></a>
</div>
</body>
</html>
</code></pre>
<br />
<b><span class="Apple-style-span" style="color: #cc0000; font-size: large;"><br /></span></b>Otros artículos del mismo tema que te pueden interesar:<br /> <br /> » <a href="https://www.blogger.com/#">Protege tus fotos propias con imágenes sobrepuestas</a><br /><br />» <a href="https://webmasters.guiaplaza.com/2021/04/transformaciones-fotos-blogger-blogspot.html">Transformaciones para fotos en blogger</a> (blogspot)<br />Anonymousnoreply@blogger.com22California, EE. UU.36.778261 -119.4179323999999823.886426 -140.07222939999997 49.670096 -98.763635399999984tag:blogger.com,1999:blog-8938133292534274017.post-78063576605682001722017-01-27T17:04:00.001+01:002017-01-27T17:06:15.467+01:00Ni google con AMP, ni facebook con Instant Articles han triunfado<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTxzCaOD-AckqxcXxXnHaQIjdgweLm52-oKkMFbHehvk6GYopNjA5X7pTCtRI9bYei3bAylNu9vM-8wyGtDjRe4zfyjl8g7YzL3LepxypASN9u5CiVlhD37SuXrc6xspDaemoMbhGpNZj/s1600/Google-Facebook-1920-800x500.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTxzCaOD-AckqxcXxXnHaQIjdgweLm52-oKkMFbHehvk6GYopNjA5X7pTCtRI9bYei3bAylNu9vM-8wyGtDjRe4zfyjl8g7YzL3LepxypASN9u5CiVlhD37SuXrc6xspDaemoMbhGpNZj/s320/Google-Facebook-1920-800x500.gif" width="320" /></a></div>
Los dos grandes de la industria Google y Facebook han intentado en vano ganar el mercado de las páginas aceleradas, lo que les daría mayor control y mostrar sus anuncios sobre otras redes publicitarias.<br />
<br />
Hoy cuando usamos google móvil o la aplicación de facebook vemos que muy pocos sitios web se han afiliado a estas versiones de páginas aceleradas, es más ni el mismo Blogger de google tiene ese servicio.<br />
<br />
Para los desarrolladores resulta cada vez más tedioso tener que crear páginas para cada plataforma, así que los servidores CDN que almacenan y distribuyen las páginas geográficamente hasta ahora son las que van ganando la guerra.<br />
<br />
Un servidor CDN (Content Delivery Network) acelera la distribución de las páginas en todo el mundo, será un poco más lento que las AMP o IA, pero poco lo nota el usuario, además los webmasters hacen un solo diseño responsive que se adapta a todos los dispositivos y eso es suficiente ventaja.<br />
<br />
Además los sistemas de AMP e IA recomiendan usar su propio sistema publicitario y si trabajamos con otras redes que pagan más vamos a perder mejores ingresos y peor aún vamos a dividir los ingresos en solo Google Adsense (DFP) y Facebook Audience Network, lo que significa dos pagos y dos fechas diferentes.<br />
<br />
Estos sistemas de páginas aceleradas nacieron por la lentitud de carga de las páginas web para celulares y porque los operadores celulares cobraban por salir de facebook o google, hoy en día con la competencia de operadores, las redes móviles más rápidas, servidores de CDN y por supuesto con mejores diseños responsives ya no es necesario contar con páginas aceleradas de google y facebook, por lo que podríamos ir diciéndoles adiós.<br />
<br />
<a href="https://www.ampproject.org/es/" target="_blank">AMP</a><br />
<a href="https://instantarticles.fb.com/" target="_blank">Instant Articles</a><br />
<br />Unknownnoreply@blogger.com0Madrid, España40.4167754 -3.703790199999957640.0300434 -4.3492371999999575 40.8035074 -3.0583431999999577