¿Cómo calcula el tiempo de lectura el código JS?

El código estima el tiempo de lectura dividiendo el total de palabras del texto por una velocidad promedio de lectura de 250 palabras por minuto.

¿Este código JS ayuda en la educación?

Sí, es ideal para plataformas educativas, proporcionando a los estudiantes una estimación del tiempo necesario para leer materiales de estudio.

¿El contador de palabras mejora los blogs?

Definitivamente. Informa a los lectores sobre el tiempo estimado de lectura, mejorando la experiencia y el compromiso con el contenido del blog.

¿Cuál es la mejor opción para el medio ambiente?

El algodón es biodegradable y más amigable con el medio ambiente, pero su cultivo puede ser intensivo en recursos. Las mezclas y el poliéster reciclado son alternativas sostenibles.

¿Qué material es mejor para el ejercicio?

El poliéster es ideal para la ropa deportiva por su capacidad de secado rápido y resistencia al sudor.

</code>): Esta etiqueta define el título de la página y debe ser descriptiva y relevante al contenido de la página.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><title>Título de tu Página</title> </code></div></div></pre><ol start="2"><li>Metaetiqueta de Descripción (<code><meta></code>): Proporciona una breve descripción de la página. Debe ser atractiva y resumir el contenido de la página.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><meta name="description" content="Descripción de tu página"> </code></div></div></pre><ol start="3"><li>Metaetiqueta de Palabras Clave (<code><meta></code>): Aunque no es tan relevante como solía ser, aún puedes incluir palabras clave relevantes.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"> </code></div></div></pre><ol start="4"><li>Metaetiqueta de Autor (<code><meta></code>): Puedes incluir el nombre del autor si es relevante para tu sitio.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><meta name="author" content="Tu Nombre"> </code></div></div></pre><ol start="5"><li>Metaetiqueta de Idioma (<code><html></code>): Especifica el idioma de la página.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><html lang="es"> </code></div></div></pre><ol start="6"><li>Metaetiqueta de Canonical (<code><link></code>): Si tienes contenido duplicado o similar en varias páginas, utiliza la etiqueta canonical para indicar cuál es la página principal.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><link rel="canonical" href="URL de la página principal"> </code></div></div></pre><ol start="7"><li>Metaetiqueta de Robots (<code><meta></code>): Controla cómo los motores de búsqueda rastrean tu sitio. Por ejemplo, puedes bloquear ciertas páginas o directorios.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><meta name="robots" content="index, follow"> </code></div></div></pre><ol start="8"><li>Metaetiqueta de Redes Sociales (<code><meta></code>): Permite que las redes sociales muestren una vista previa adecuada cuando se comparte tu página. Es especialmente útil si compartes contenido en plataformas como Facebook y Twitter.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><meta property="og:title" content="Título de tu Página"> <meta property="og:description" content="Descripción de tu página"> <meta property="og:image" content="URL de la imagen en miniatura"> </code></div></div></pre><ol start="9"><li>Etiqueta de Google Analytics (<code><script></code>): Si utilizas Google Analytics para rastrear el tráfico de tu sitio web, incluye el código de seguimiento.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><script async src="https://www.googletagmanager.com/gtag/js?id=TU-CÓDIGO-DE-ANALYTICS"></script> </code></div></div></pre><ol start="10"><li>Etiqueta de Favicon (<code><link></code>): Agrega un favicon para mejorar la identidad visual de tu sitio web en la barra de direcciones del navegador.</li></ol><pre><div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 gizmo:dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md">html<button class="flex ml-auto gizmo:ml-0 gap-2 items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><link rel="icon" type="image/x-icon" href="favicon.ico"> </code></div></div></pre>Recuerda que el contenido de calidad y la estructura del sitio son igualmente importantes para el SEO. Además, el uso de etiquetas semánticas apropiadas en tu contenido HTML también contribuirá al éxito del SEO. </article> <article> <h1>xbr-random.js</h1> 2023-11-07T00:00:00Z Tu solo ves un par de texto, como este... <script> var elements = { copyYear: document.querySelector(".xbrRandom") }; var textRandom = [ "2", "1", new Date().getFullYear() + " @luisangelmaciel " ]; var rand = Math.floor(Math.random() * textRandom.length); elements.copyYear.innerHTML += textRandom[rand]; reset(); </script> pero la realidad es que lo de arriba, aparece gracias a todo esto: <pre class="language-css" tabindex="0"><code class="language-css"></code></pre> <pre class="language-html" tabindex="0"><code class="language-html"><p class="xbrRandom"></p></code></pre> <pre class="language-js" tabindex="0"><code class="language-js"><script> var elements = { copyYear: document.querySelector(".xbrRandom") }; var textRandom = [ "2", "1", new Date().getFullYear() + " @luisangelmaciel " ]; var rand = Math.floor(Math.random() * textRandom.length); elements.copyYear.innerHTML += textRandom[rand]; reset(); </script></code></pre> </article> <article> <h1>xbr-repeat.js</h1> 2023-11-07T00:00:00Z <pre class="language-html" tabindex="0"><code class="language-html"><script src="https://luisangelmaciel.vercel.app/js/xbr-repeat.js"></script></code></pre> <pre class="language-js" tabindex="0"><code class="language-js"><script> "use strict"; var xbr = {}; xbr.getElementsByAttribute = function (x, att) { var arr = [], arrCount = -1, i, l, y = x.getElementsByTagName("*"), z = att.toUpperCase(); l = y.length; for (i = -1; i < l; i += 1) { if (i == -1) {y[i] = x;} if (y[i].getAttribute(z) !== null) {arrCount += 1; arr[arrCount] = y[i];} } return arr; }; xbr.dataObject = {}, xbr.displayObject = function (id, data) { var htmlObj, htmlTemplate, html, arr = [], a, l, rowClone, x, j, i, ii, cc, repeat, repeatObj, repeatX = ""; htmlObj = document.getElementById(id); htmlTemplate = init_template(id, htmlObj); html = htmlTemplate.cloneNode(true); arr = xbr.getElementsByAttribute(html, "xbr-repeat"); l = arr.length; for (j = (l - 1); j >= 0; j -= 1) { cc = arr[j].getAttribute("xbr-repeat").split(" "); if (cc.length == 1) { repeat = cc[0]; } else { repeatX = cc[0]; repeat = cc[2]; } arr[j].removeAttribute("xbr-repeat"); repeatObj = data[repeat]; if (repeatObj && typeof repeatObj == "object" && repeatObj.length != "undefined") { i = 0; for (x in repeatObj) { i += 1; rowClone = arr[j]; rowClone = xbr_replace_curly(rowClone, "element", repeatX, repeatObj[x]); a = rowClone.attributes; for (ii = 0; ii < a.length; ii += 1) { a[ii].value = xbr_replace_curly(a[ii], "attribute", repeatX, repeatObj[x]).value; } (i === repeatObj.length) ? arr[j].parentNode.replaceChild(rowClone, arr[j]) : arr[j].parentNode.insertBefore(rowClone, arr[j]); } } else { console.log("xbr-repeat must be an array. " + repeat + " is not an array."); continue; } } html = xbr_replace_curly(html, "element"); htmlObj.parentNode.replaceChild(html, htmlObj); function init_template(id, obj) { var template; template = obj.cloneNode(true); if (xbr.dataObject.hasOwnProperty(id)) {return xbr.dataObject[id];} xbr.dataObject[id] = template; return template; } function xbr_replace_curly(elmnt, typ, repeatX, x) { var value, rowClone, pos1, pos2, originalHTML, lookFor, lookForARR = [], i, cc, r; rowClone = elmnt.cloneNode(true); pos1 = 0; while (pos1 > -1) { originalHTML = (typ == "attribute") ? rowClone.value : rowClone.innerHTML; pos1 = originalHTML.indexOf(", pos1); if (pos1 === -1) {break;} pos2 = originalHTML.indexOf(", pos1 + 1); lookFor = originalHTML.substring(pos1 + 2, pos2); lookForARR = lookFor.split("||"); value = undefined; for (i = 0; i < lookForARR.length; i += 1) { lookForARR[i] = lookForARR[i].replace(/^\s+|\s+$/gm, ''); //trim if (x) {value = x[lookForARR[i]];} if (value == undefined && data) {value = data[lookForARR[i]];} if (value == undefined) { cc = lookForARR[i].split("."); if (cc[0] == repeatX) {value = x[cc[1]]; } } if (value == undefined) { if (lookForARR[i] == repeatX) {value = x;} } if (value == undefined) { if (lookForARR[i].substr(0, 1) == '"') { value = lookForARR[i].replace(/"/g, ""); } else if (lookForARR[i].substr(0,1) == "'") { value = lookForARR[i].replace(/'/g, ""); } } if (value != undefined) {break;} } if (value != undefined) { r = " + lookFor + "; if (typ == "attribute") { rowClone.value = rowClone.value.replace(r, value); } else { xbr_replace_html(rowClone, r, value); } } pos1 = pos1 + 1; } return rowClone; } function xbr_replace_html(a, r, result) { var b, l, i, a, x, j; if (a.hasAttributes()) { b = a.attributes; l = b.length; for (i = 0; i < l; i += 1) { if (b[i].value.indexOf(r) > -1) {b[i].value = b[i].value.replace(r, result);} } } x = a.getElementsByTagName("*"); l = x.length; a.innerHTML = a.innerHTML.replace(r, result); } };</code></pre> <pre class="language-html" tabindex="0"><code class="language-html">var myObject= {"dataOne":[ {"stuff" : "Uno","number" : "1"}, {"stuff" : "Dos","number" : "2"} ]}; <table id="myData01"> <tr xbr-repeat="dataOne"> <td> - </td> </tr> </table> <script>xbr.displayObject("myData01", myObject);</script></code></pre> </article> <article> <h1>Define tu marca</h1> 2023-11-05T00:00:00Z <h1 id="define-tu-marca" tabindex="-1">Define tu marca <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h1> Esta parte conoceremos eso que te mueve por dentro. Que te ilumina la vista y te hace actuar con propósito. Lo que marcará la diferencia de tu contenido con el resto de creadores. Qué te hará único. Irremplazable. Conoce: <ul> <li>Tu historia</li> <li>Tus valores</li> <li>Tus pasiones</li> <li>Tus intereses</li> <li>Tus habilidades</li> </ul> Sabrás: <ol> <li>Sobre que hablar</li> <li>A quién hablar</li> <li>Como hablar</li> </ol> <h2 id="1-intereses" tabindex="-1">1/ Intereses <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h2> Necesitas definir tus intereses. Abajo tienes una plantilla para completar todo lo que te voy explicando. Donde pone “Las Semillas De Una Marca Única” Haz una lista de 10 temas que te gusten. <ul> <li>Escribir</li> <li>Negocios online</li> <li>Fitness</li> <li>Storytelling</li> <li>Psicología</li> <li>Esto nos sirve para ver en que nichos te moverás.</li> </ul> <h2 id="2-habilidades" tabindex="-1">2/ Habilidades <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h2> La divido en 2 tipos: <h3 id="habilidades-suaves-innatas-o-sin-mucho-conocimiento" tabindex="-1">Habilidades suaves- Innatas o sin mucho conocimiento <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h3> <ul> <li>Resiliencia</li> <li>Aprender rápido</li> <li>Gestión emocional</li> </ul> <h3 id="habilidades-duras-eso-que-se-te-da-bien-que-dominas" tabindex="-1">Habilidades duras- Eso que se te da bien, que dominas. <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h3> <ul> <li>Ventas</li> <li>Branding</li> <li>Marketing</li> <li>Copywriting</li> <li>Creación de contenido</li> </ul> Si no lo tienes claro, echa un ojo a tu vida Hay algo que haces cada día? Se te da bien? Te dicen que eres bueno en {actividad random}? Recoge feedback y escribe todas las que puedas. Ahora sabes 2 cosas: <ul> <li>Que temas te gustan</li> <li>Que temas dominas</li> </ul> <h4 id="haz-un-top-10-de-tus-30-temas-habilidades-un-mix" tabindex="-1">Haz un top 10 de tus 30 temas/habilidades (un mix) <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h4> De los 10 que te quedan haz un top 3. Felicidades… Ya sabes de qué hablarás en tu contenido Toca saber tu camino hasta donde estás hoy. La parte que engancha la gente a tu contenido. <h2 id="3-historia" tabindex="-1">3/ Historia <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h2> Tu historia es el pilar más valioso de tu marca personal. Te cuesta ser auténtico? Siéntate. Escribe tu historia. Aquí tienes algunas ideas: <ul> <li>Consejos</li> <li>Lecciones</li> <li>Opiniones</li> <li>Anécdotas</li> </ul> No seas el mejor. Sé único. Irremplazable. Fíjate en las grandes marcas: <ul> <li>Nike</li> <li>Apple</li> <li>Nude Project</li> </ul> No venden <ul> <li>Ropa y zapatos</li> <li>MacBooks e iPhones</li> <li>Ropa y complementos streetwear</li> </ul> Te venden un deseo. Un estilo de vida. Inspiración. Nike — Just do it Apple — Think different Nude — By artists, for artists Y cuando compras lo justificas con tu parte racional. El producto es 1 parte: El «Qué» Detrás está el propósito de cada marca: El «Por Qué» Y usan el storytelling para transmitir su mensaje (y que compres): El «Cómo» Por eso es CLAVE tu historia. No sirve decir: “A nadie le importan mis historias“. “Tengo miedo“. “Mi vida es aburrida“. Bla, bla…. Ábrete. Sé que no es fácil… a veces me cuesta escribir sobre mi vida. Pero la gente te quiere a ti, cuando hables te escucharán. Piénsalo. Te vendes a ti mismo cada día. <ul> <li>Tus habilidades</li> <li>Tu experiencia</li> <li>Tus opiniones</li> </ul> Así que escribe todo tu camino hasta donde estás hoy. No te dejes nada <h2 id="4-valores" tabindex="-1">4/ Valores <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h2> Qué crees? Por qué actúas como actúas? Qué te define como persona? Puede ser: <ul> <li>La libertad</li> <li>Ayudar a tu familia</li> <li>Pensamiento crítico</li> <li>Actuar con propósito</li> </ul> O no. Remueve tu cabecita a ver que cae… Tu marca irá en la misma dirección. <h2 id="5-pasiones" tabindex="-1">5/ Pasiones <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h2> Para ser un gran creador necesitas claridad. Pregúntate: <ul> <li>Cuál es mi propósito en la vida?</li> <li>Donde me veo en 3, 10, 20 años?</li> <li>Ha sido clave en mi crecimiento…</li> </ul> Tómate tiempo para responder. Eso sí. Lánzate ya. O vive en piloto automático. Tú decides. Ahora… -Qué acciones te apasionan? <ul> <li>Hobbies? Obsesiones?</li> <li>Manías que nadie sabe…</li> </ul> Ejemplos: <ul> <li>Escribir</li> <li>Cocinar, Entrenar,</li> <li>Andar solo</li> <li>Culturismo</li> <li>Emprender</li> <li>Pensar y aprender</li> <li>Café mientras miro el paisaje</li> <li>Entender nuestro comportamiento</li> </ul> <h2 id="6-los-pilares" tabindex="-1">6/ Los Pilares <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h2> Ahora tienes claro quién eres y tu historia. Solo te falta 1 cosa… Los temas de tu contenido. Para generar ideas infinitas. Calma. Es fácil (si has hecho todo lo anterior). Mira. Ya tienes los 3 temas de tu contenido. Busca 10 subtemas para cada tema. Ejemplo <h4 id="tema" tabindex="-1">Tema <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h4> Negocios Online <h4 id="subtema" tabindex="-1">Subtema: <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-11-05-define-tu-marca/">#</a></h4> <ul> <li>Marketing</li> <li>Networking</li> <li>Monetización</li> <li>Marca personal</li> <li>Ventas y ofertas</li> <li>Creación de contenido.</li> <li>Sistemas y planificación</li> </ul> Hay más, pero ya ves por donde voy (espero). Ahora piensa en 10 ideas por subtemas. Esto son 300 IDEAS de contenido en 30 minutos. Ya lo tienes. <hr> PD: Si tienes una agencia o negocio de formación y quieres crear tu marca personal para ser una autoridad en tu sector y generar de 10-15 leads/mes de forma orgánica sin preocuparte del contenido… Agenda una llamada conmigo de 30 minutos para ver si te puedo ayudar. Solo si estás listo. </article> <article> <h1>Registro de actividades 4 de noviembre</h1> 2023-11-04T00:00:00Z Registro de actividades 4 de noviembre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li> <a href="https://github.com/luisangelmaciel/wizard?ref=lampvercel" target="_blank">Wizard in Github</a> <a href="https://vercel.com/lamacpad-gmailcom/wizard/deployments?ref=lampvercel" target="_blank">Vercel</a> <a href="https://wizard-dun.vercel.app/?ref=lampvercel" target="_blank">app</a></li> <li> <a href="https://luisangelmaciel.github.io/download-templete-desing/deathly-hallows.html?ref=lampvercel" target="_blank">Deathly hallows HP</a></li> <li> In Codepen <a href="https://codepen.io/luisangelmaciel/pen/poxMVKR?ref=lampvercel" target="_blank">App converter Image file to Base64</a> y en app </li> <li> My photo avatar <a href="https://github.com/luisangelmaciel/my-photo-avatar/tree/main?ref=lampvercel" target="_blank">Github</a></li> <li> <a href="https://dulcet-platypus-bbc225.netlify.app/?ref=lampvercel" target="_blank">napp</a></li> <li> <a href="https://app.netlify.com/sites/dulcet-platypus-bbc225/overview?ref=lampvercel" target="_blank">netfly</a></li> <li> <a href="https://luisangelmaciel.vercel.app/blog/2023-04-de-noviembre/" target="_blank"></a></li> https://docs.google.com/spreadsheets/d/1Gdt7Xa9w44oHeVqcBOaDlD1_ezrMfQ7_AEvlgt9g5QU/edit#gid=0 Network Contact Gesell https://codepen.io/xiiberpage/pen/dyaOmZy?editors=1000 <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-04-de-noviembre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. https://www.uxsurvival.guide/design-portfolio-checklist PS: You haven't told me much about your creator business yet. If you have 30 seconds, I can tailor my writing to you. Just answer a couple of questions (and you may even get a special surprise offer)! https://fate-break-c31.notion.site/Portfolio-101-Design-Portfolio-Checklist-eb00b8e4f1e34bbcb9043d0f35e561f6 </article> <article> <h1>Registro de actividades 3 de noviembre</h1> 2023-11-03T00:00:00Z Registro de actividades 3 de noviembre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li> <a href="https://codepen.io/xiiberpage/pen/vYbyKjG?editors=1100?ref=lampvercel" target="_blank">Skills icons</a></li> <li> <a href="https://luisangelmaciel.vercel.app/blog/2023-03-de-noviembre/" target="_blank">Skills icons</a></li> <li> <a href="https://luisangelmaciel.vercel.app/blog/2023-03-de-noviembre/" target="_blank">Skills icons</a></li> <li> <a href="https://luisangelmaciel.vercel.app/blog/2023-03-de-noviembre/" target="_blank">Skills icons</a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-03-de-noviembre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. https://www.uxsurvival.guide/design-portfolio-checklist PS: You haven't told me much about your creator business yet. If you have 30 seconds, I can tailor my writing to you. Just answer a couple of questions (and you may even get a special surprise offer)! https://fate-break-c31.notion.site/Portfolio-101-Design-Portfolio-Checklist-eb00b8e4f1e34bbcb9043d0f35e561f6 </article> <article> <h1>Registro de actividades 2 de noviembre</h1> 2023-11-02T00:00:00Z Registro de actividades 2 de noviembre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li> <a href="https://www.uxsurvival.guide/resources?ref=lampvercel" target="_blank" aria-lebel=""></a></li> <li> Aprendiendo a utilizar Gap & Grind -template, <a href="https://codepen.io/xiiberpage/pen/zYeKjgz?ref=lampvercel" target="_blank" aria-lebel="grid-template-columns: repeat(auto-fit, minmax(240px, 3fr)) y grid-auto-rows: 550px; and gap automatico.">grid-template-columns: repeat(auto-fit, minmax(240px, 3fr)) y grid-auto-rows: 550px; and gap automatico.</a></li> <li> Github es una buena referencia de diseño con ese toque de elegancia y relevancia en negro. El<a href="https://codepen.io/xiiberpage/pen/yLZaELJ?editors=1000?ref=lampvercel" target="_blank" aria-lebel="FX github base"> efecto de perspectiva </a> me gusto mucho, así que decidi limpiarlo. Me sorprendio que todo, todo, si toooodo esta sumamente dividido, es bueno porque así no se vuelven locos, eso puedo identificarlo por que ha sido escalable el proyecto. </li> <li> Pasele pasele, <a href="https://codepen.io/xiiberpage/pen/KKJgegM?ref=lampvercel" target="_blank" aria-lebel="Pasele pasele,"> llevele su checkbox Pure CSS </a></li> <li> Templete para brindar <a href="https://codepen.io/xiiberpage/pen/abXmKLG?editors=1000?ref=lampvercel" target="_blank" aria-lebel="información de un trial. ">información de un trial. </a> No recuerdo haber visto este tipo de información previamente, me gusto porque es un buen referente, sirve como material de contenido, invita a ver con detalle lo que obtendras si si o si n o lo adquieres finalmente. Me ha pasado que en otros sitios te invitan a que descargues el trial, después lo usas y cuando llega el tiempo de periodo de prueba, ves practicamente todo bloqueado. Me ha pasado y se siente feo, así que luego decides comprarlo y pues lograron su cometido. Aunque insisto, es poco tiempo el que dan para poder tener una curva de aaprendizaje y posibles cambios en la organización o de forma personal. Bueno, eso es tema de otro costal que ya tengo muchas ideas, solo falta reunirlas y presentarlas. </li> <li> Curando ando <a href="https://codepen.io/xiiberpage/details/vYbXrEQ?ref=lampvercel" target="_blank" aria-lebel="unos separadores muy coquetos">unos separadores muy coquetos</a> algo de SVG, CSS, cobinar colores, definir ideas y listo, el resultado un bello contenido bien dividido. Benditos sean esos separadores con un poco de creatividad se pueden personalizar para el mismo branding de la marca. Así que de ahora en adelante a usar más <code><section></code> con separadores, o sea algo así como los separasection <a href="https://emojipedia.org/es/cara-de-empoll%C3%B3n" target="_blank" title="Google, WhatsApp, Facebook y JoyPixels originalmente tenían diseños con pocos dientes, pero desde entonces han cambiado (o han eliminado completamente) los dientes en la cara del empollón">🤓 </a></li> <li> ® R,™ TM, © C symbols.<a href="https://codepen.io/xiiberpage/pen/oNmzyMm?editors=1000?ref=lampvercel" target="_blank" aria-lebel="bonamark.com">vía bonamark.com</a></li> https://meetings.hubspot.com/renata-kasimova/custdev <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-02-de-noviembre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. https://www.uxsurvival.guide/design-portfolio-checklist PS: You haven't told me much about your creator business yet. If you have 30 seconds, I can tailor my writing to you. Just answer a couple of questions (and you may even get a special surprise offer)! https://fate-break-c31.notion.site/Portfolio-101-Design-Portfolio-Checklist-eb00b8e4f1e34bbcb9043d0f35e561f6 </article> <article> <h1>Registro de actividades 29 de octubre</h1> 2023-10-29T00:00:00Z Registro de actividades 29 de octubre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-29-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-29-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-29-de-octubre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. mkt - ideas que aumentan el porcentaje de ventas https://xbrpw.github.io/collection/mkt/christmas-landing-page/dist/index.html https://xbrpw.github.io/collection/mkt/gsap-coffee-slot-machine/dist/index.html https://xbrpw.github.io/collection/mkt/halloween-slider/halloween-slider/dist/index.html https://xbrpw.github.io/collection/mkt/happy-new-year-2023/dist/index.html /xbrpw.github.io/collection/mkt/usa%20el%20logo%20de%20pornhub.jpg https://xbrpw.github.io/collection/mkt/holiday-cssweater-generator/dist/index.html xbrpw.github.io/collection/mkt/scratch-to-reveal/index.html </article> <article> <h1>Registro de actividades 28 de octubre</h1> 2023-10-28T00:00:00Z Registro de actividades 28 de octubre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-28-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-28-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-28-de-octubre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. https://github.com/luisangelmaciel/report-google-lighthouse https://vercel.com/lamacpad-gmailcom/report-google-lighthouse/deployments https://report-google-lighthouse.vercel.app/ /img/icon/buy.svg facebook-money.svg option-pay.svg rating-app.svg send-product.svg /img/medidas/encendedor%20peque%20con%20serigrafia.svg /img/medidas/encendedor%20peque.svg /img/vectorizado/CorelDraw-Dark.svg img/vectorizado/CorelDraw.svg /img/vectorizado/CorelDraw-Dark-1.svg /img/vectorizado/CorelDraw-Light.svg img/vectorizado/CorelDraw-Light-1.svg https://luisangelmaciel.github.io/error404/ luisangelmaciel.github.io/desing/colum%20gallery%20y%20big.html https://vercel.com/lamacpad-gmailcom/w3-editor/deployments https://github.com/luisangelmaciel/w3-editor https://w3-editor.vercel.app/ /img/vectorizado/trankis.jpg https://ucarecdn.com/98aa09bb-2495-468b-adfe-8b237c0d2926/-/preview/500x500/-/quality/smart/-/format/auto/ https://ucarecdn.com/4246257b-1407-4f3d-a63c-96d9e91675c5/-/preview/500x500/-/quality/smart/-/format/auto/ img/unsplash/adrien-brun-9l7izWPKqlM-unsplash.webp /img/2006.webp /img/3d/cansado.webp /img/mi-primer-makeup-de-drag-queen.webp rostizados-win.webp https://ucarecdn.com/fc5c5721-a4b6-4062-8f8a-5ab2e4030b3d/-/preview/500x500/-/quality/smart/-/format/auto/ estarás muy orgulloso se mi solo dame un poco más de tiempo mama /img/ortidomex.svg img/ortidomex.png /pdf/orden-de-compra-pepido.pdf img/use-it-on-web-browser.svg https://github.com/luisangelmaciel/quizz https://vercel.com/lamacpad-gmailcom/quizz/deployments https://quizz-xi.vercel.app/ /luisangelmaciel.github.io/desing/button-with-accessible-loading-confirmation-states/index.html https://luisangelmaciel.github.io/one/Bootstrap-starter-fav/index.html /luisangelmaciel.github.io/desing/post.html https://www.xbr.pw/super-calculator-deluxe/index.html luisangelmaciel.github.io/desing/click-derecho/index.html luisangelmaciel.github.io/Igglybuff/svg/23/frienzone.svg luisangelmaciel.github.io/Igglybuff/svg/23/guatsappbro.svg. https://vercel.com/lamacpad-gmailcom/hihellomonster/deployments https://hihellomonster.vercel.app/ https://github.com/luisangelmaciel/hihellomonster </article> <article> <h1>Registro de actividades 26 de octubre</h1> 2023-10-26T00:00:00Z Registro de actividades 26 de octubre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-26-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-26-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-26-de-octubre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. https://luisangelmaciel.vercel.app/img/vectorizado/xiiber-travel-pornhub-logo-parodia.svg bike-logo.svg genius-insane.svg jesus-do-it.svg lowcost.svg nutyfella.svg /simba.svg zombie-barbie.svg </article> <article> <h1>Registro de actividades 25 de octubre</h1> 2023-10-25T00:00:00Z Registro de actividades 25 de octubre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li>CONVERTIRSE EN UN MEJOR DISEÑADOR EN LECCIONES DE 5 MINUTOS O MENOS. Boletin informativo por correo electrónico Desing Hack con consejos y tuturiales de Diseño<a href="https://luisangelmaciel.vercel.app/blog/2023-25-de-octubre/" target="_blank" aria-lebel="Únase a más de 50.000 personas en el boletín informativo (gratuito) Design Hacks.">Únase a más de 50.000 personas en el boletín informativo (gratuito) Design Hacks.</a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-25-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-25-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-25-de-octubre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. https://codepen.io/xiiberpage/details/zYexwJN - Pokemon Ipsum Generator in JS <h2 id="tambien-tomo-fotografias-y-a-veces-las-comparto-este-sitio-es-un-trabajo-en-progreso-v2-0-1-el-diseno-de-un-robot-y-thinkbot-son-marcas-registradas-de-thinkbot-inc" tabindex="-1">También tomo fotografías y a veces las comparto . Este sitio es un trabajo en progreso (v2.0.1) El diseño de un robot y thinkbot son marcas registradas de thinkbot, inc. <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-25-de-octubre/">#</a></h2> RECURSOS PARA EMPRENDEDORES, DISEÑADORES Y DESARROLLADORES Obtenga los frutos de todo lo que hemos aprendido mientras creamos productos exitosos Diseñado específicamente Consejos prácticos para emprendedores que desean crear productos que la gente adore. luisangelmaciel.github.io/desing/terminos%20y%20condiciones.txt https://github.com/luisangelmaciel/plastico-de-burbujas https://plastico-de-burbuja.vercel.app/ https://vercel.com/lamacpad-gmailcom/plastico-de-burbuja/deployments https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fplastico-de-burbuja.vercel.app%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext <hr> Iniciar mi página — Es gratis Es gratis y lleva menos de un minuto. Music Crystal Party https://github.com/luisangelmaciel/music-crystal-party /img/3d/Grinning%20Face%20with%20Smiling%20Eyes.webp /img/3d/Smiling%20Face%20with%20Horns.webp /img/3d/Pill.webp /img/3d/Notebook.webp /3d/hand%20with%20stopwatch.webp /img/vectorizado/dashi-vayi.svg /img/vectorizado/dashi-osito.svg /img/vectorizado/dashi-ok-ok.svg /img/vectorizado/steve-jobs-rip.svg /img/vectorizado/steve-jobs-body.svg /img/vectorizado/body-mister.svg /img/vectorizado/dashi-art-original-da-sahi-capitana-y-molly.svg dashi-rip.svg art-original-de-sahi-capitana.svg dashi-oli-guenas-tardes.svg /img/vectorizado/envialove.svg License Commercial and personal use license by Logistics Illustration in https://<a href="https://luisangelmaciel.vercel.app/blog/2023-25-de-octubre/www.getillustrations.com/single-illustration/present-gift-box-package-delivery-shipping-giveaway">Getillustrations</a> /img/original/foco-esfera-del-dragon-small.svg Smoot hover me in CSS https://luisangelmaciel.github.io/desing/smoot-hover-me.html CSS <style> @keyframes float { from { transform: translateY(1.5vh); } to { transform: translateY(-1.5vh); } } @keyframes spin { from { transform: rotateX(75deg) rotateZ(0deg); } to { transform: rotateX(75deg) rotateZ(1turn); } } .float { animation: float 2s linear infinite alternate; } .crystal { animation: spin 4s linear infinite; } </style> <div class="float">Float</div> <div class="spin>Spin</div> Mejor resultado en <a href=" https:="" luisangelmaciel.github.io="" desing="" crystal-shard.html="">Crystal Shard Eat, Sleep, Game, Repeat <a href="https://luisangelmaciel.github.io/desing/eat-sleep-game-repeat/index.html"></a> <a href="https://github.com/luisangelmaciel/pokemon-ipsum-generator">Pokemon ipsum generator</a> https://vercel.com/lamacpad-gmailcom/pokemon-ipsum-generator/deployments pokemon-ipsum-generator.vercel.app Antecedente https://codepen.io/xiiberpage/pen/zYexwJN Pelicula mexicana. Mariana Mariana Del libro "Las Batallas en el Desierto" de José Emilio Pacheco https://terabox.com/s/1peIXeUGrm3j4p4bIz738JA https://github.com/hihellomonster/how-to-snippes-doradas/blob/main/_includes/layouts/base.njk https://zingy-phoenix-3285bd.netlify.app/ Participar en: https://a11y-webring.club/ Completar formulario para solicitar una cuenta W3C https://www.w3.org/account/request/ Revienta las burbujas <style> .fadeinout-5s { animation: fade-in 5s ease, fade-out 5s ease 5s forwards; } @keyframes fade-in { from { opacity: 0} } @keyframes fade-out { to { opacity: 0} } @keyframes slide-in { from { transform: translateY(10px) } } .bubble { border-radius: 5em; box-shadow: 1px 1px 7px rgba(204, 204, 204, 0.7); height: 8em; width: 8em; cursor: pointer; background-image: radial-gradient(ellipse at 75% 70%, rgba(230, 230, 230, 0.8), rgba(230, 230, 230, 0.15) 9%, rgba(26, 26, 26, 0.1) 90%, rgba(26, 26, 26, 0.1)), radial-gradient(ellipse at 25% 30%, rgba(230, 230, 230, 0.8), rgba(153, 153, 153, 0.2) 7%, rgba(26, 26, 26, 0.1) 90%, rgba(26, 26, 26, 0.1)); } </style> </div> </article> <article> <h1>Registro de actividades 25 de octubre</h1> 2023-10-25T00:00:00Z Registro de actividades 25 de octubre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style> <ol> <li>CONVERTIRSE EN UN MEJOR DISEÑADOR EN LECCIONES DE 5 MINUTOS O MENOS. Boletin informativo por correo electrónico Desing Hack con consejos y tuturiales de Diseño<a href="https://luisangelmaciel.vercel.app/blog/2023-24-de-octubre/" target="_blank" aria-lebel="Únase a más de 50.000 personas en el boletín informativo (gratuito) Design Hacks.">Únase a más de 50.000 personas en el boletín informativo (gratuito) Design Hacks.</a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-24-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-24-de-octubre/" target="_blank" aria-lebel=""></a></li> <li>Lighthouse <a href="https://luisangelmaciel.vercel.app/blog/2023-24-de-octubre/" target="_blank" aria-lebel=""></a></li> </ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. https://codepen.io/xiiberpage/details/zYexwJN - Pokemon Ipsum Generator in JS <h2 id="tambien-tomo-fotografias-y-a-veces-las-comparto-este-sitio-es-un-trabajo-en-progreso-v2-0-1-el-diseno-de-un-robot-y-thinkbot-son-marcas-registradas-de-thinkbot-inc" tabindex="-1">También tomo fotografías y a veces las comparto . Este sitio es un trabajo en progreso (v2.0.1) El diseño de un robot y thinkbot son marcas registradas de thinkbot, inc. <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-24-de-octubre/">#</a></h2> RECURSOS PARA EMPRENDEDORES, DISEÑADORES Y DESARROLLADORES Obtenga los frutos de todo lo que hemos aprendido mientras creamos productos exitosos Diseñado específicamente Consejos prácticos para emprendedores que desean crear productos que la gente adore. luisangelmaciel.github.io/desing/terminos%20y%20condiciones.txt https://github.com/luisangelmaciel/plastico-de-burbujas https://plastico-de-burbuja.vercel.app/ https://vercel.com/lamacpad-gmailcom/plastico-de-burbuja/deployments https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fplastico-de-burbuja.vercel.app%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext <hr> Iniciar mi página — Es gratis Es gratis y lleva menos de un minuto. Music Crystal Party https://github.com/luisangelmaciel/music-crystal-party /img/3d/Grinning%20Face%20with%20Smiling%20Eyes.webp /img/3d/Smiling%20Face%20with%20Horns.webp /img/3d/Pill.webp /img/3d/Notebook.webp /3d/hand%20with%20stopwatch.webp /img/vectorizado/dashi-vayi.svg /img/vectorizado/dashi-osito.svg /img/vectorizado/dashi-ok-ok.svg /img/vectorizado/steve-jobs-rip.svg /img/vectorizado/steve-jobs-body.svg /img/vectorizado/body-mister.svg /img/vectorizado/dashi-art-original-da-sahi-capitana-y-molly.svg dashi-rip.svg art-original-de-sahi-capitana.svg dashi-oli-guenas-tardes.svg /img/vectorizado/envialove.svg License Commercial and personal use license by Logistics Illustration in https://<a href="https://luisangelmaciel.vercel.app/blog/2023-24-de-octubre/www.getillustrations.com/single-illustration/present-gift-box-package-delivery-shipping-giveaway">Getillustrations</a> /img/original/foco-esfera-del-dragon-small.svg Smoot hover me in CSS https://luisangelmaciel.github.io/desing/smoot-hover-me.html CSS <style> @keyframes float { from { transform: translateY(1.5vh); } to { transform: translateY(-1.5vh); } } @keyframes spin { from { transform: rotateX(75deg) rotateZ(0deg); } to { transform: rotateX(75deg) rotateZ(1turn); } } .float { animation: float 2s linear infinite alternate; } .crystal { animation: spin 4s linear infinite; } </style> <div class="float">Float</div> <div class="spin>Spin</div> Mejor resultado en <a href=" https:="" luisangelmaciel.github.io="" desing="" crystal-shard.html="">Crystal Shard Eat, Sleep, Game, Repeat <a href="https://luisangelmaciel.github.io/desing/eat-sleep-game-repeat/index.html"></a> <a href="https://github.com/luisangelmaciel/pokemon-ipsum-generator">Pokemon ipsum generator</a> https://vercel.com/lamacpad-gmailcom/pokemon-ipsum-generator/deployments pokemon-ipsum-generator.vercel.app Antecedente https://codepen.io/xiiberpage/pen/zYexwJN Pelicula mexicana. Mariana Mariana Del libro "Las Batallas en el Desierto" de José Emilio Pacheco https://terabox.com/s/1peIXeUGrm3j4p4bIz738JA https://github.com/hihellomonster/how-to-snippes-doradas/blob/main/_includes/layouts/base.njk https://zingy-phoenix-3285bd.netlify.app/ Participar en: https://a11y-webring.club/ Completar formulario para solicitar una cuenta W3C https://www.w3.org/account/request/ Revienta las burbujas <style> .fadeinout-5s { animation: fade-in 5s ease, fade-out 5s ease 5s forwards; } @keyframes fade-in { from { opacity: 0} } @keyframes fade-out { to { opacity: 0} } @keyframes slide-in { from { transform: translateY(10px) } } .bubble { border-radius: 5em; box-shadow: 1px 1px 7px rgba(204, 204, 204, 0.7); height: 8em; width: 8em; cursor: pointer; background-image: radial-gradient(ellipse at 75% 70%, rgba(230, 230, 230, 0.8), rgba(230, 230, 230, 0.15) 9%, rgba(26, 26, 26, 0.1) 90%, rgba(26, 26, 26, 0.1)), radial-gradient(ellipse at 25% 30%, rgba(230, 230, 230, 0.8), rgba(153, 153, 153, 0.2) 7%, rgba(26, 26, 26, 0.1) 90%, rgba(26, 26, 26, 0.1)); } </style> </div> </article> <article> <h1>Registro de actividades 23 de octubre</h1> 2023-10-23T00:00:00Z Registro de actividades 23 de octubre <style> .lighthouse { background-image: url("https://www.xbr.pw/lighthouse-report-viewer/favicon.svg"); width: 18px; height:18px; align-items: center; text-align: center; justify-content: center; } a {text-decoration:line} </style><ol> <li><a href="https://luisangelmaciel.github.io/desing/templetes/background/index.html?ref=lampvercel" target="_blank" aria-lebel="Un diseño que hice hace dos años y ahora vuelvo hacer pero con menos lineas de CSS. Se siente bien escribir ahora poco código, la pena ha valido aprender tanto">Un diseño que hice hace dos años y ahora vuelvo hacer pero con menos lineas de CSS. Se siente bien escribir ahora poco código, la pena ha valido aprender tanto.</a> <a href="https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fluisangelmaciel.github.io%2Fdesing%2Ftempletes%2Fbackground%2Findex.html&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext?ref=lampvercel" target="_blank" aria-lebel="Calificación de lightouse" class="lighthouse">Ya tiene en verde su Lighthouse</a>, historico en <a href="https://codepen.io/xiiberpage/pen/OJdPXQy?ref=lampvercel" class="xiiberpage" target="_blank" aria-lebel="Codepen">Codepen</a></li> <li><a href="https://luisangelmaciel.vercel.app/img/vectorizado/burbuja.svg?ref=lampvercel" target="_blank" aria-lebel="Vectorice una Burbuja de las chicas superpoderosas">Vectorice una Burbuja de las chicas superpoderosas</a> junto con su <a href="https://luisangelmaciel.vercel.app/img/8-bits/burbuja.svg?ref=lampvercel" target="_blank" aria-lebel="versión en 8bits">versión en 8bits</a></li> <li><a href="https://luisangelmaciel.vercel.app/img/frases-de-borracho/aguanta-corazon-no-seas-cobarde.svg?ref=lampvercel" target="_blank" aria-lebel="Frases de borracho">Frases de borracho <quote>"aguanta corazón, no seas cobarde"<quote></quote></quote></a></li> <li>Dragonzitos, si la famosa marca de polvitos de chilitos agridulces Dragonzitos vectorizados para ilustración<a href="https://luisangelmaciel.vercel.app/img/dragonzitos/amarillo.svg?ref=lampvercel" target="_blank" aria-lebel="Dragonzitos amarillo">Dragonzitos amarillo, imagino será como sabor piña,</a> <a href="https://luisangelmaciel.vercel.app/img/dragonzitos/verde.svg?ref=lampvercel" aria-lebel="Dragonzito verde">en color verde,</a> <a href="https://luisangelmaciel.vercel.app/img/dragonzitos/verde-green.svg?ref=lampvercel" target="_blank" aria-lebel="propuesta en colores verde">aquí en una propuesta de tonos de verde</a> <a href="https://luisangelmaciel.vercel.app/img/dragonzitos/limon.svg?ref=lampvercel" target="_blank" aria-lebel="diseño endulzado">este otro fue a trazo en un momento de ocio</a> y el más chistoso <a href="https://luisangelmaciel.vercel.app/img/dragonzitos/parodia-logo-house-of-the-dragon.svg?ref=lampvercel" target="_blank" aria-lebel="Parodia logo">la parodia del logo Dragonzitos con el de House of the dragon</a></li> <li>El juego de Sailor Moon Jump ya tiene <a href="https://luisangelmaciel.vercel.app/img/sailor-moon-game-app.svg?ref=lampvercel" target="_blank" aria-lebel="Sailor Moon logo">su logo, algo tarde pero seguro. </a></li> <li>Al igual que la <a href="https://luisangelmaciel.vercel.app/img/calculadora-app.svg?ref=lampvercel" target="_blank" aria-lebel="app Calculadora sencilla">app Calculadora sencilla</a> que hice como hace un año aproximadamente</li> <li><a href="https://codepen.io/xiiberpage/full/MWLYpZx?ref=lampvercel" target="_blank" aria-lebel="Codepen">Un preloader</a> con @keyframes rotate & fade, directo para el Sharon Loader</li> <li><a href="https://luisangelmaciel.vercel.app/tools/Hello_My_Name_is_Awesome_EXCERPT.html?ref=lampvercel" target="_blank" aria-lebel="Hello my name is awesome">Download pdf</a> Resumen del libro Hello my name is awesome </li> <li><a href="https://codepen.io/xiiberpage/full/zYexwGv?ref=lampvercel" target="_blank" aria-lebel="Galeria de fotos de la CDMX por Unsplash">Galeria de fotos de la CDMX por Unsplash cargados en ucarecdn</a> <a href="https://luisangelmaciel.vercel.app/blog/2023-23-de-octubre/img/unsplash/enrique-ortega-miranda-KtTDJsez5Xs.webp" target="_blank" aria-lebel="">Originales webp en Github, potencializado por Vercel, estructurados por un servidor... puff que hilo, pero esto se hace solo para que la carga sea más rapida, dando sus créditos y el diseño luzca bonito donde sea que vayan a publicarse</a> </li> <li><a href="https://luisangelmaciel.github.io/desing/templetes/join-list.html?ref=lampvercel" target="_blank" aria-lebel="Join list">Join list</a></li> <li><a href="https://luisangelmaciel.vercel.app/tools/podomoro-de-cocina-en-forma-de-huevo.html?ref=lampvercel" target="_blank" aria-lebel="">Podomoro de cocina en forma de huevo</a></li> <li>Un tipo twitt<a href="http://luisangelmaciel.github.io/desing/twits-twiland.html?ref=lampvercel" target="_blank" aria-lebel="hecho con twiland">hecho con twiland</a></li> <li>Audio de un minuto para ganar<a href="https://luisangelmaciel.vercel.app/audio/Cuenta-Regresiva-De-Minuto-Para-Ganar.ogg?ref=lampvercel" target="_blank" aria-lebel="Audio de un minuto para ganar">Cuenta regresiva</a></li> <li>Audio con el maestro Roshi de Dragon Ball diciendo "Muy bien, es hora de descansar"<a href="https://luisangelmaciel.vercel.app/audio/maestro-roshi-es-hora-de-tomar-un-descanso.ogg" target="_blank" aria-lebel="Muy bien, es hora de descansar">"Muy bien, es hora de descansar"</a>ideal para el podomoro de trabajo</li> <ol> <li><a href="http://luisangelmaciel.github.io/desing/bloque-de-textos.html?ref=lampvercel" target="_blank" aria-lebel="Bloque de textos"></a>Bloque de textos</li> <li><a href="http://luisangelmaciel.github.io/desing/clipboard-animation.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Clipboard animation</a></li> <li><a href="http://luisangelmaciel.github.io/desing/destellos.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Destellos al hacer click</a></li> <li><a href="http://luisangelmaciel.github.io/desing/light-dark-mode.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Darkmode switch</a></li> <li><a href="http://luisangelmaciel.github.io/desing/responsive-menu-no-js.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Menu responsivo sin JS</a></li> <li><a href="http://luisangelmaciel.github.io/desing/enciende-el-foco.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Enciende el foco</a></li> <li><a href="http://luisangelmaciel.github.io/desing/breadcrumbs-navigation.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Breadcumbs navigation</a></li> <li><a href="http://luisangelmaciel.github.io/desing/Ash-Ketchup-en-una-carrera-con-rapidas-one-element-realistic-photo-frame.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Photo frame realistic</a></li> <li><a href="http://luisangelmaciel.github.io/desing/text-animation-color.html?ref=lampvercel" target="_blank" aria-lebel="Desing code">Text animation color</a></li> <li><a href="http://luisangelmaciel.github.io/desing/ui-kit-dribbble-rebound/index.html?ref=lampvercel?ref=lampvercel" target="_blank" aria-lebel="UI kit dribbble rebound">UI kit dribbble rebound</a></li> <li><a href="https://luisangelmaciel.vercel.app/blog/2023-23-de-octubre/luisangelmaciel.github.io/desing/sticky-headers-be-sticky/index.html" target="_blank" aria-lebel="/sticky-headers-be-sticky/">Sticky headers be sticky</a></li> <li><a href="http://luisangelmaciel.github.io/desing/sparkle.html?ref=lampvercel" target="_blank" aria-lebel="sparkle">Sparkle</a></li> <ol> <li>Pasando My Play Store a Elevently Base <a href="https://vercel.com/lamacpad-gmailcom/my-play-store/?ref=lampvercel" target="_blank" aria-lebel="">para que en Vercel sea motorizado</a> hospedado en <a href="https://github.com/luisangelmaciel/my-play-store/tree/main?ref=lampvercel" target="_blank" aria-lebel="">Github</a> y el resultado final queda <a href="https://my-play-store.vercel.app/?ref=lampvercel" target="_blank" aria-lebel="/my-play-store.vercel.app">my-play-store.vercel.app</a> </li> <li>Proyecto referencia <a href="https://luisangelmaciel.github.io/one/beewin/index.html?ref=lampvercel" target="_blank" aria-lebel="Beewin">Beewin</a> hospedada en <a href="https://github.com/luisangelmaciel/beewin?ref=lampvercel" target="_blank" aria-lebel=" Github "> Github.</a> <a href="https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fluisangelmaciel.github.io%2Fone%2Fbeewin%2Findex.html&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext" target="_blank" aria-lebel="lighthouse">Verde en Lighthouse.</a> Proyecto ref</li> <li><a href="http://luisangelmaciel.github.io/?ref=lampvercel" target="_blank" aria-lebel=""></a></li> <ul> <li><a href="https://github.com/luisangelmaciel/beewin?ref=lampvercel" target="_blank" aria-lebel="github.com/luisangelmaciel/beewin">Github private</a> powered por <a href="https://luisangelmaciel.vercel.app/blog/2023-23-de-octubre/" target="_blank" aria-lebel="vercel">Vercel</a> Diseñado por @luisangelmaciel</li> </ul> <li><a href="https://luisangelmaciel.vercel.app//recursos/TheValueOfDesignFactfinder_Design_Council-2007pdf.html" target="_blank" aria-lebel="The Value of Design Factfinder">The Value of Design Factfinder</a></li> <ul> <li>Vectorización de los personajes de Mueganitos: <a href="https://luisangelmaciel.vercel.app/img/mueganitos/mueganitos-gatito.svg?ref=lampvercel">Gatito,</a> <a href="https://luisangelmaciel.vercel.app/img/mueganitos-la-chatita.svg?ref=lampvercel"> La chatita, </a> <a href="https://luisangelmaciel.vercel.app/img/mueganitos-logo?ref=lampvercel"> Logotipo- </a> <a href="https://luisangelmaciel.vercel.app/img/mueganitos-logotipo?ref=lampvercel"> Logo, </a> <a href="https://luisangelmaciel.vercel.app/img/mueganitos-mijo?ref=lampvercel"> Mijo, </a> <a href="https://luisangelmaciel.vercel.app/img/mueganitos-osito?ref=lampvercel"> Osito, </a> <a href="https://luisangelmaciel.vercel.app/img/mueganitos-perriosito?ref=lampvercel"> Perriosito </a> <ul> </ul></li></ul></ol> Nota. Imágenes vectorizadas por un servidor a menos que se indique lo contrario en su respectiva anotación. Sin más por el momento, muchas gracias. </ol></ol> </article> <article> <h1>Auditoría tecnica y de SEO</h1> 2023-10-21T00:00:00Z Auditoría tecnica y de SEO Una análisis SEO exhaustivo de tu proyecto para saber donde estamos y hacia dónde vamos. Como lo son los candados de seguridad, latencia, que sea responsivo, formato de imagenes, cumplimientos con la w3. </article> <article> <h1>UTM´s Urchin Tracking Module para conocer el comportamiento de los visitantes</h1> 2023-08-01T00:00:00Z <h2 id="utm-urchin-tracking-module" tabindex="-1">UTM (Urchin Tracking Module) <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-08-01-UTMs%20Urchin%20Tracking%20Module%20para%20conocer%20el%20comportamiento%20de%20los%20visitantes/">#</a></h2> Las UTM’s nos permiten conocer a fondo el comportamiento de nuestros visitantes, qué les gusta, qué les interesa de nuestro sitio, en dónde pasan más tiempo, y por lo tanto, cómo invertir mejor y en qué en próximas campañas para que en un futuro, obtengamos mejores resultados, aprovechando nuestra inversión de una manera más óptima. ¿Qué son los códigos UTM? Citando a RD Station, las UTM (Urchin Tracking Module) no son más que una serie de parámetros que son agregados a una URL para permitir a herramientas de análisis como Google Analytics entender y clasificar el tráfico que está llegando de una determinada campaña de marketing. https://www.amvo.org.mx/blog/que-es-una-utm-para-que-sirve-y-como-crear-una/#:~:text=%C2%BFQu%C3%A9%20son%20los%20c%C3%B3digos%20UTM,una%20determinada%20campa%C3%B1a%20de%20marketing. <h4 id="las-utm-se-componen-de-la-siguiente-manera" tabindex="-1">Las UTM se componen de la siguiente manera: <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-08-01-UTMs%20Urchin%20Tracking%20Module%20para%20conocer%20el%20comportamiento%20de%20los%20visitantes/">#</a></h4> https://circuit.ooo/?utm=publication-post-cta https://hotsale.com.mx/ ?utm_medium=xxxx - Nombre de la campaña. Aquí vamos a identificar con un nombre único a nuestra campaña. &utm_campaign=HS-2020 - Medio de la campaña. Identifica un medio como un email o costo por clic. &utm_source=Payback - Fuente de la campaña. Sirven para identificar un motor de búsqueda o el canal de una fuente de tráfico como una red social o una campaña de mailing. https://www.xbr.pw/?utm_medium=twtr&utm_campaign=HS-102023&utm_source=Ssearch-engine-optimization Términos de la campaña. Usa un parámetro para resaltar las keyword o palabra clave. Estos ayudan para identificar un producto específico o una campaña estratégica. Contenidos de la campaña. Este es un identificador para diferenciar anuncios que dirijan a la misma URL. Por ejemplo, si quieres saber si las personas le dan clic a una imagen de zapatos o a una de bolsos. Este puede ser opcional. Aquí un ejemplo de una UTM que en AMVO hicimos para la campaña de Hot Sale: ¡Esperamos que esta información te haya sido útil! <a href="https://circuit.ooo/search-engine-optimization?"> https://www.xbr.pw/?utm_medium=twtr&utm_campaign=HS-102023&utm_source=Search-engine-optimization </a> </article> <article> <h1>UTM´s Urchin Tracking Module para conocer el comportamiento de los visitantes</h1> 2023-07-15T00:00:00Z <h2 id="utm-urchin-tracking-module" tabindex="-1">UTM (Urchin Tracking Module) <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-07-15-UTMs%20Urchin%20Tracking%20Module%20para%20conocer%20el%20comportamiento%20de%20los%20visitantes/">#</a></h2> Las UTM’s nos permiten conocer a fondo el comportamiento de nuestros visitantes, qué les gusta, qué les interesa de nuestro sitio, en dónde pasan más tiempo, y por lo tanto, cómo invertir mejor y en qué en próximas campañas para que en un futuro, obtengamos mejores resultados, aprovechando nuestra inversión de una manera más óptima. ¿Qué son los códigos UTM? Citando a RD Station, las UTM (Urchin Tracking Module) no son más que una serie de parámetros que son agregados a una URL para permitir a herramientas de análisis como Google Analytics entender y clasificar el tráfico que está llegando de una determinada campaña de marketing. https://www.amvo.org.mx/blog/que-es-una-utm-para-que-sirve-y-como-crear-una/#:~:text=%C2%BFQu%C3%A9%20son%20los%20c%C3%B3digos%20UTM,una%20determinada%20campa%C3%B1a%20de%20marketing. <h4 id="las-utm-se-componen-de-la-siguiente-manera" tabindex="-1">Las UTM se componen de la siguiente manera: <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-07-15-UTMs%20Urchin%20Tracking%20Module%20para%20conocer%20el%20comportamiento%20de%20los%20visitantes/">#</a></h4> https://circuit.ooo/?utm=publication-post-cta https://hotsale.com.mx/ ?utm_medium=xxxx - Nombre de la campaña. Aquí vamos a identificar con un nombre único a nuestra campaña. &utm_campaign=HS-2020 - Medio de la campaña. Identifica un medio como un email o costo por clic. &utm_source=Payback - Fuente de la campaña. Sirven para identificar un motor de búsqueda o el canal de una fuente de tráfico como una red social o una campaña de mailing. https://www.xbr.pw/?utm_medium=twtr&utm_campaign=HS-102023&utm_source=Ssearch-engine-optimization Términos de la campaña. Usa un parámetro para resaltar las keyword o palabra clave. Estos ayudan para identificar un producto específico o una campaña estratégica. Contenidos de la campaña. Este es un identificador para diferenciar anuncios que dirijan a la misma URL. Por ejemplo, si quieres saber si las personas le dan clic a una imagen de zapatos o a una de bolsos. Este puede ser opcional. Aquí un ejemplo de una UTM que en AMVO hicimos para la campaña de Hot Sale: <a href="https://circuit.ooo/search-engine-optimization?"> https://www.xbr.pw/?utm_medium=twtr&utm_campaign=HS-102023&utm_source=Search-engine-optimization </a> </article> <article> <h1>Transformador de texto con Javascript, codigo y aplicaciones</h1> 2023-06-01T00:00:00Z <pre class="language-html" tabindex="0"><code class="language-html"> <style> #inputText { width: 100%; padding: 10px; margin-bottom: 10px; } </style> <input type="text" id="inputText" placeholder="Ingresa tu texto aquí"> <button onclick="transformarTexto()">Transformar</button> <p id="resultado"></p> <script> function transformarTexto() { var textoEntrada = document.getElementById("inputText").value; var textoResultado = textoEntrada.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[,;:.]/g, "").replace(/\s+/g, "-"); document.getElementById("resultado").innerText = textoResultado; } </script> </code></pre> Este código HTML crea un campo de entrada de texto donde puedes ingresar tu texto. Al hacer clic en el botón "Transformar", el texto ingresado se transformará según los criterios que has especificado y se mostrará debajo del botón. Claro, aquí está una explicación técnica y formal del código proporcionado: El código HTML proporciona una interfaz de usuario simple que consta de un campo de entrada de texto y un botón. Cuando el usuario ingresa un texto y hace clic en el botón "Transformar", se activa una función de JavaScript que realiza las siguientes acciones: <ol> <li> Captura de texto de entrada: La función <code>transformarTexto()</code> obtiene el valor del campo de entrada de texto utilizando el método <code>getElementById()</code> para acceder al elemento HTML con el id "inputText". Este valor se asigna a la variable <code>textoEntrada</code>. </li> <li> Transformación del texto: El texto de entrada se transforma utilizando una serie de métodos de cadena en JavaScript: <ul> <li><code>toLowerCase()</code>: Convierte todo el texto a minúsculas.</li> <li><code>normalize("NFD")</code>: Normaliza el texto utilizando la forma de composición canónica descompuesta (NFD) para asegurar que los caracteres acentuados se descompongan en su forma base y sus diacríticos por separado.</li> <li><code>.replace(/[\u0300-\u036f]/g, "")</code>: Elimina los diacríticos del texto normalizado.</li> <li><code>.replace(/[,;:.]/g, "")</code>: Elimina las comas, dos puntos y punto y coma del texto.</li> <li><code>.replace(/\s+/g, "-")</code>: Reemplaza los espacios en blanco con guiones medios para cumplir con el criterio de formato requerido.</li> </ul> </li> <li> Mostrar el texto transformado: El texto transformado se asigna al contenido del elemento HTML con el id "resultado" utilizando <code>innerText</code>, lo que hace que el texto resultante se muestre debajo del botón. </li> </ol> Este tipo de código podría ser útil en una variedad de campos de aplicación, incluyendo: <ul> <li>Optimización de URL: Al crear URL amigables para SEO, puede ser necesario transformar texto de entrada en un formato específico como parte de la generación de URL legibles por humanos y amigables para los motores de búsqueda.</li> <li>Procesamiento de datos de formularios: En aplicaciones web que recopilan datos de usuario a través de formularios, a menudo es útil normalizar y limpiar los datos ingresados antes de procesarlos o almacenarlos en una base de datos.</li> <li>Generación de etiquetas y categorías: Para organizar y clasificar contenido en sitios web o aplicaciones, puede ser necesario convertir texto de entrada en etiquetas o categorías utilizando un formato consistente y normalizado.</li> <li>Desarrollo de herramientas de análisis de texto: En campos como el procesamiento de lenguaje natural y la minería de textos, es común preprocesar y normalizar el texto de entrada para facilitar el análisis y la extracción de información significativa. Este tipo de código podría formar parte de un paso de preprocesamiento en tales herramientas.</li> </ul> </article> <article> <h1>Técnicas de texto persuasivo de ventas para millennials</h1> 2023-05-01T00:00:00Z <h3 id="1-storytelling" tabindex="-1">1.Storytelling <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Cuenta historias que se conecten con las experiencias y valores de los millennials.</li> <li>Usa un lenguaje auténtico y relatable.</li> <li>Muestra cómo tu producto o servicio puede mejorar sus vidas.</li> </ul> Ejemplo "Ana, una millennial como tú, estaba buscando una forma de ahorrar dinero sin sacrificar su estilo de vida. Después de usar nuestra app de finanzas personales, Ana pudo..." <h3 id="2-humor" tabindex="-1">2. Humor <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Incorpora humor inteligente y sutil en tu mensaje.</li> <li>Evita el humor ofensivo o que pueda ser malinterpretado.</li> </ul> Ejemplo "¿Cansado de pagar demasiado por tu café? ¡Prueba nuestro nuevo café instantáneo gourmet! Es tan bueno como el de la cafetería, pero sin el precio elevado." <h3 id="3-influencers" tabindex="-1">3. Influencers <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Colabora con influencers millennials relevantes para tu marca.</li> <li>Asegúrate de que el influencer tenga una audiencia que coincida con tu público objetivo.</li> </ul> Ejemplo "Nos hemos asociado con la influencer de moda Ana para ofrecerte un descuento exclusivo en nuestra nueva colección." <h3 id="4-contenido-visual" tabindex="-1">4. Contenido visual <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Usa imágenes y videos de alta calidad que sean atractivos para los millennials.</li> <li>Incorpora infografías y memes para comunicar información de forma creativa.</li> </ul> Ejemplo "Mira este video para descubrir cómo nuestro nuevo producto puede ayudarte a..." <h3 id="5-interactividad" tabindex="-1">5. Interactividad <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Crea contenido interactivo como encuestas, cuestionarios y concursos.</li> <li>Ofrece experiencias personalizadas que se adapten a las preferencias de los millennials.</li> </ul> Ejemplo "¿Qué tipo de contenido te gustaría ver más en nuestro blog?" <h3 id="6-autenticidad" tabindex="-1">6. Autenticidad <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Sé honesto y transparente en tu comunicación.</li> <li>Muestra la personalidad real de tu marca.</li> <li>Evita el lenguaje exagerado o engañoso.</li> </ul> Ejemplo "En X, creemos en la transparencia. Por eso, te ofrecemos una prueba gratuita de nuestro producto para que puedas probarlo antes de comprarlo." <h3 id="7-compromiso-social" tabindex="-1">7. Compromiso social <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Apoya causas sociales que sean importantes para los millennials.</li> <li>Demuestra que tu marca tiene valores y se preocupa por el mundo.</li> </ul> Ejemplo "Por cada producto que vendas, donaremos $1 a una organización benéfica que lucha contra el cambio climático." <h3 id="8-urgencia" tabindex="-1">8. Urgencia <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/2023-05-01-tecnicas-de-ventas-para-millenials/">#</a></h3> <ul> <li>Crea un sentido de urgencia para que los millennials actúen rápido.</li> <li>Ofrece descuentos por tiempo limitado o promociones exclusivas.</li> </ul> Ejemplo "¡Oferta por tiempo limitado! Obtén un 20% de descuento en tu primera compra." Recuerda, los millennials son una generación exigente que busca marcas auténticas, transparentes y que se preocupen por el mundo. Utiliza estas técnicas para crear textos persuasivos que les atraigan y les convenzan de que tu producto o servicio es la mejor opción para ellos. </article> <article> <h1>Haz un feedback original usando el efecto love pero con tu logo</h1> 2023-01-02T00:00:00Z <div> <h1>Haz un feedback original usando el efecto love pero con tu logo</h1> <div class="LOVE-HEART❤"> <style type="text/css" charset="utf-8"> [id='toggle-heart'] { display: inline-block; position: absolute; left: -100vw; } [id='toggle-heart']:checked + label { color: #e2264d; filter: none; will-change: font-size; -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49); animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49); } [id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after { -webkit-animation: inherit; animation: inherit; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } [id='toggle-heart']:checked + label:before { will-change: transform, border-width, border-color; -webkit-animation-name: bubble; animation-name: bubble; } [id='toggle-heart']:checked + label:after { will-change: opacity, box-shadow; -webkit-animation-name: sparkles; animation-name: sparkles; } [id='toggle-heart']:focus + label { text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white; } [for='toggle-heart'] { align-self: center; position: relative; color: #888; font-size: 1em; filter: grayscale(1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } [for='toggle-heart']:before, [for='toggle-heart']:after { position: absolute; z-index: -1; top: 50%; left: 50%; border-radius: 50%; content: ''; } [for='toggle-heart']:before { box-sizing: border-box; margin: -2.25rem; border: solid 2.25rem #e2264d; width: 4.5rem; height: 4.5rem; transform: scale(0); } [for='toggle-heart']:after { margin: -0.1875rem; width: 0.375rem; height: 0.375rem; box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080; } @-webkit-keyframes heart { 0%, 17.5% { font-size: 0; } } @keyframes heart { 0%, 17.5% { font-size: 0; } } @-webkit-keyframes bubble { 15% { transform: scale(1); border-color: #cc8ef5; border-width: 2.25rem; } 30%, 100% { transform: scale(1); border-color: #cc8ef5; border-width: 0; } } @keyframes bubble { 15% { transform: scale(1); border-color: #cc8ef5; border-width: 2.25rem; } 30%, 100% { transform: scale(1); border-color: #cc8ef5; border-width: 0; } } @-webkit-keyframes sparkles { 0%, 20% { opacity: 0; } 25% { opacity: 1; box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080; } } @keyframes sparkles { 0%, 20% { opacity: 0; } 25% { opacity: 1; box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080; } } </style>  <input id="toggle-heart" type="checkbox"><label for="toggle-heart" aria-label="like"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="50px" height="50px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 304.78 304.78" xmlns:xlink="http://www.w3.org/1999/xlink"> <path fill="currentColor" d="M94.61 233.57c-2.71,-0.11 -25.12,12.5 -25.75,14.16 -0.7,1.82 0.14,3.47 1.72,3.87 2.16,0.54 12.8,-6.14 15.31,-7.52 10.21,-5.63 13.04,-6.24 8.72,-10.51z"></path> <path fill="currentColor" d="M148.49 2.67l9.48 -0.8 -0.09 109.31c-3.6,-1.39 -6.83,-1.54 -9.52,0.12l0.13 -108.63z"></path> <path fill="currentColor" d="M119.19 226.7c30.19,28.31 68.08,5.92 70.95,-1.5l-17.7 0.08c-3.19,0.16 -5.29,0.04 -8.65,0.19 -10.49,0.46 -25.89,-0.05 -35.88,0.46 -3.24,0.16 -7.51,-0.25 -8.72,0.77z"></path> <path fill="currentColor" d="M160.29 271.95c-6.09,-0.89 -4.55,5.26 -4.64,15.31 -0.1,12 -1.76,16.53 4.58,15.5 2.15,-3.23 1.26,-10.64 1.31,-15.45 0.04,-5.18 0.9,-12.61 -1.25,-15.36z"></path> <path fill="currentColor" d="M201.38 279.05c0.84,1.51 7.11,16.14 10.38,9.36 1.17,-2.43 -5.63,-12.7 -7.11,-15.35 -5.51,-9.82 -5.81,-12.7 -10.63,-10.06 -0.59,3.47 1.53,6.02 3.09,8.64 1.47,2.47 2.92,4.97 4.27,7.41z"></path> <path fill="currentColor" d="M249.29 249.75c-0.46,-2.19 -11.8,-7.98 -14.15,-9.42 -2.09,-1.27 -9.23,-6.36 -11.58,-5.57 -1.18,0.39 -2.25,1.67 -1.92,3.52 0.3,1.7 11.17,7.41 14.13,9.16 2.14,1.28 15.2,10.43 13.52,2.31z"></path> <path fill="currentColor" d="M123.18 266.39c2.11,-3.88 -1.59,-6.93 -4.41,-4.03l-12.9 21.73c-2.29,4.39 2.06,6.48 4.41,3.91l8.81 -14.66c1.44,-2.28 2.91,-4.77 4.09,-6.95z"></path> <path fill="currentColor" d="M126.32 150.61c13.36,-1.67 11.33,-2.61 27.12,-2.81 10.15,-0.13 17.35,1.17 26.94,2.03 -0.09,-11.68 -0.23,-17.59 -6.28,-25.27 -3.8,-4.82 -11.69,-9.8 -21.12,-9.69 -9.54,0.12 -16.68,4.86 -20.94,10.19 -5.57,6.95 -5.98,14.31 -5.72,25.55z"></path> <path fill="currentColor" d="M128.41 153.7c-0.86,2.47 -3.99,2.35 -10.68,7.86 -6.83,5.62 -12.72,12.28 -17.78,19.77 -6.77,10.04 -16.56,31.54 -17.36,41.21 4.82,0.86 12.82,-0.24 18.24,-0.06 3.06,0.1 5.99,-0.22 9.07,-0.11l108.38 -1.88c2.83,0.11 5.69,-0.06 8.42,-0.29 -7.11,-24.62 -19.41,-50.25 -48.16,-66.55 -0.17,-0.2 -0.29,-0.48 -0.38,-0.83 -18.47,-2.04 -31.34,-2.01 -49.75,0.88z"></path> </svg> </label> </div> <h2 id="code" tabindex="-1">Code <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/haz%20un%20feedback%20original%20usando%20el%20efecto%20love%20pero%20con%20tu%20logo/">#</a></h2> <pre class="language-css" tabindex="0"><code class="language-css"><style type="text/css" charset="utf-8"> [id='toggle-heart'] { display: inline-block; position: absolute; left: -100vw; } [id='toggle-heart']:checked + label { color: #e2264d; filter: none; will-change: font-size; -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49); animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49); } [id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after { -webkit-animation: inherit; animation: inherit; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } [id='toggle-heart']:checked + label:before { will-change: transform, border-width, border-color; -webkit-animation-name: bubble; animation-name: bubble; } [id='toggle-heart']:checked + label:after { will-change: opacity, box-shadow; -webkit-animation-name: sparkles; animation-name: sparkles; } [id='toggle-heart']:focus + label { text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white; } [for='toggle-heart'] { align-self: center; position: relative; color: #888; font-size: 1em; filter: grayscale(1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } [for='toggle-heart']:before, [for='toggle-heart']:after { position: absolute; z-index: -1; top: 50%; left: 50%; border-radius: 50%; content: ''; } [for='toggle-heart']:before { box-sizing: border-box; margin: -2.25rem; border: solid 2.25rem #e2264d; width: 4.5rem; height: 4.5rem; transform: scale(0); } [for='toggle-heart']:after { margin: -0.1875rem; width: 0.375rem; height: 0.375rem; box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080; } @-webkit-keyframes heart { 0%, 17.5% { font-size: 0; } } @keyframes heart { 0%, 17.5% { font-size: 0; } } @-webkit-keyframes bubble { 15% { transform: scale(1); border-color: #cc8ef5; border-width: 2.25rem; } 30%, 100% { transform: scale(1); border-color: #cc8ef5; border-width: 0; } } @keyframes bubble { 15% { transform: scale(1); border-color: #cc8ef5; border-width: 2.25rem; } 30%, 100% { transform: scale(1); border-color: #cc8ef5; border-width: 0; } } @-webkit-keyframes sparkles { 0%, 20% { opacity: 0; } 25% { opacity: 1; box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080; } } @keyframes sparkles { 0%, 20% { opacity: 0; } 25% { opacity: 1; box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080; } } </style></code></pre> <pre class="language-html" tabindex="0"><code class="language-html"><input id="toggle-heart" type="checkbox" /><label for="toggle-heart" aria-label="like"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="50px" height="50px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 304.78 304.78" xmlns:xlink="http://www.w3.org/1999/xlink"> <path fill="currentColor" d="M94.61 233.57c-2.71,-0.11 -25.12,12.5 -25.75,14.16 -0.7,1.82 0.14,3.47 1.72,3.87 2.16,0.54 12.8,-6.14 15.31,-7.52 10.21,-5.63 13.04,-6.24 8.72,-10.51z"/> <path fill="currentColor" d="M148.49 2.67l9.48 -0.8 -0.09 109.31c-3.6,-1.39 -6.83,-1.54 -9.52,0.12l0.13 -108.63z"/> <path fill="currentColor" d="M119.19 226.7c30.19,28.31 68.08,5.92 70.95,-1.5l-17.7 0.08c-3.19,0.16 -5.29,0.04 -8.65,0.19 -10.49,0.46 -25.89,-0.05 -35.88,0.46 -3.24,0.16 -7.51,-0.25 -8.72,0.77z"/> <path fill="currentColor" d="M160.29 271.95c-6.09,-0.89 -4.55,5.26 -4.64,15.31 -0.1,12 -1.76,16.53 4.58,15.5 2.15,-3.23 1.26,-10.64 1.31,-15.45 0.04,-5.18 0.9,-12.61 -1.25,-15.36z"/> <path fill="currentColor" d="M201.38 279.05c0.84,1.51 7.11,16.14 10.38,9.36 1.17,-2.43 -5.63,-12.7 -7.11,-15.35 -5.51,-9.82 -5.81,-12.7 -10.63,-10.06 -0.59,3.47 1.53,6.02 3.09,8.64 1.47,2.47 2.92,4.97 4.27,7.41z"/> <path fill="currentColor" d="M249.29 249.75c-0.46,-2.19 -11.8,-7.98 -14.15,-9.42 -2.09,-1.27 -9.23,-6.36 -11.58,-5.57 -1.18,0.39 -2.25,1.67 -1.92,3.52 0.3,1.7 11.17,7.41 14.13,9.16 2.14,1.28 15.2,10.43 13.52,2.31z"/> <path fill="currentColor" d="M123.18 266.39c2.11,-3.88 -1.59,-6.93 -4.41,-4.03l-12.9 21.73c-2.29,4.39 2.06,6.48 4.41,3.91l8.81 -14.66c1.44,-2.28 2.91,-4.77 4.09,-6.95z"/> <path fill="currentColor" d="M126.32 150.61c13.36,-1.67 11.33,-2.61 27.12,-2.81 10.15,-0.13 17.35,1.17 26.94,2.03 -0.09,-11.68 -0.23,-17.59 -6.28,-25.27 -3.8,-4.82 -11.69,-9.8 -21.12,-9.69 -9.54,0.12 -16.68,4.86 -20.94,10.19 -5.57,6.95 -5.98,14.31 -5.72,25.55z"/> <path fill="currentColor" d="M128.41 153.7c-0.86,2.47 -3.99,2.35 -10.68,7.86 -6.83,5.62 -12.72,12.28 -17.78,19.77 -6.77,10.04 -16.56,31.54 -17.36,41.21 4.82,0.86 12.82,-0.24 18.24,-0.06 3.06,0.1 5.99,-0.22 9.07,-0.11l108.38 -1.88c2.83,0.11 5.69,-0.06 8.42,-0.29 -7.11,-24.62 -19.41,-50.25 -48.16,-66.55 -0.17,-0.2 -0.29,-0.48 -0.38,-0.83 -18.47,-2.04 -31.34,-2.01 -49.75,0.88z"/> </svg> </label> </div></code></pre> </div> </article> <article> <h1>Los beneficios del calendario de contenidos</h1> 2023-01-01T00:00:00Z <h2 id="los-beneficios-del-calendario-de-contenidos" tabindex="-1">LOS BENEFICIOS DEL CALENDARIO DE CONTENIDOS <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/calendario-anual-para-mercadologos-y-dise%C3%B1adores-web/">#</a></h2> Por si aún no lo sabes, existen al menos 4 aportes importantes que te puede dar un calendario si eres Community Manager, estos son: <h3 id="1-no-desviarse-de-la-estrategia" tabindex="-1">1. NO DESVIARSE DE LA ESTRATEGIA: <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/calendario-anual-para-mercadologos-y-dise%C3%B1adores-web/">#</a></h3> Respecto a este primer beneficio de los calendarios se puede decir que dado que un buen plan de marketing para las redes sociales requiere estrategia y una buena estrategia requiere de contenidos, el calendario resulta ser de ayuda para mantener el enfoque y mantener el contenido en linea con la estrategia general. La información incluida ayuda a garan- tizar que los temas de contenido no <h3 id="3-cumplir-con-horarios" tabindex="-1">3. CUMPLIR CON HORARIOS: <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/calendario-anual-para-mercadologos-y-dise%C3%B1adores-web/">#</a></h3> En tercer lugar, y como podría enten- derse con este tipo de materiales, un calendario permite mantenerse dentro de las fechas y horarios establecidos para la publicación de los contenidos. El calendario establece expectativas y ayuda a quien lo usa a mantener su enfoque y publicar contenidos de forma más consistente. <h3 id="4-planificar-con-anticipacion" tabindex="-1">4. PLANIFICAR CON ANTICIPACIÓN: <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/calendario-anual-para-mercadologos-y-dise%C3%B1adores-web/">#</a></h3> Finalmente, dado que gran parte del tiempo del profesional de las redes sociales se puede ir en actividades como la publicación de contenidos. <h2 id="la-capitalizacion-de-los-dias-festivos" tabindex="-1">La capitalización de los dias festivos <a class="header-anchor" href="https://luisangelmaciel.vercel.app/blog/calendario-anual-para-mercadologos-y-dise%C3%B1adores-web/">#</a></h2> Como sabrás, cada año existen determinados días en los que se celebra algo, por ejemplo, el Dia del Niño, Navidad, Año Nuevo o el Día del Taco, entre otros. Estos días pueden ser clave para las marcas o empresas, no solo para aprovecharlos con una promoción para lograr que la gente consuma más, también para hacer presente a la marca y que forme parte de la conversación digital que se genera. Dicho lo anterior, y para que puedas ir planificando mejor tu año, con los contenidos y cam- pañas, aquí te dejamos un calen- dario con las fechas relevantes y algunas curiosas que deberías considerar para unir a tu marca Además, con ellos es posible y conseguir resultados como involucrar a la marca con personas conversiones o la generación de influyentes y verdaderos fanáticos o brand awareness y engagement. Isolo estén en línea con los planes, sino a que también le hablen a su público objetivo. TODOS LOS ELEMENTOS: En relación al segundo beneficio, debes saber que existen múltiples elementos que componen a una buena publicación en redes socia- les, desde el copy hasta el llamado a la acción así como los artes que acompañaran al post. Cada uno de estos aspectos es clave para man- tener el enfoque y la organización, pero también permiten contemplar todo de una forma visual más fácil de procesar. la realización de reportes o el moni- toreo de la conversación digital en torno a la marca, con la ayuda de un calendario es posible adelantarse a la creación de contenidos antes de que llegue la fecha en la que deben publicarse. Si las fechas están establecidas es posible trabajar en una buena cantidad de materiales durante un periodo designado de tiempo con el fin de liberar la carga de trabajo. Hablando de fechas estableci- das, el calendario de contenidos no solo ayuda con lo anterior, también permite identificar momentos o dias que pueden ser clave para la marca o empresa y sus contenidos de marca. </article> <article> <h1>Caracteres se requieren para la description</h1> 2022-04-04T00:00:00Z </picture> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VisualArtwork", "name": "", "alternateName": "", "image": "https://luisangelmaciel.vercel.app//img/schema/visualArtwork/en-construccion.webp", "description": "", "creator": [ { "@type": "Person", "name": "Luis Angel Maciel", "sameAs": "" } ], "width": [ { "@type": "Distance", "name": "" } ], "height": [ { "@type": "Distance", "name": "" } ], "artMedium": """, "artworkSurface": """ } </script> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>https://example.com/sample1.html</loc> <a href="image:image">image:image</a> <a href="image:loc">image:loc</a>https://example.com/image.jpg</image:loc> </image:image> <a href="image:image">image:image</a> <a href="image:loc">image:loc</a>https://example.com/photo.jpg</image:loc> </image:image> </url> <url> <loc>https://example.com/sample2.html</loc> <a href="image:image">image:image</a> <a href="image:loc">image:loc</a>https://example.com/picture.jpg</image:loc> </image:image> </url> </urlset> <svg aria-labelledby="svgtitle1"></svg> <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop

Actividad	Hacerlo Tú Mismo	Contratar a un Profesional
Creación de Formulario	Semanas de aprendizaje y pruebas	Implementación rápida con software personalizado
Gestión de Blog y SEO	Requiere investigación continua	Experiencia y aplicación de mejores prácticas
Optimización Google My Business	Configuración inicial lenta	Configuración optimizada y continua
Diseño y Optimización Web	Meses de diseño y prueba	Diseño profesional con enfoque en conversión

Perfil de comprador	Prompt de la imagen	Texto del anuncio
Desarrollador Individual	Imagen de un Octocat personalizado con gafas de sol, auriculares y un fondo de código de GitHub. (Nombre del archivo: cool_octocat.png, Alt: Octocat cool con accesorios)	¿Cansado de que tus repositorios se vean aburridos? ¡Dale un toque único a tu GitHub con OctoDesign! Problema: Tus proyectos no destacan. Agitar: ¿Cuántas veces has sentido que tus contribuciones pasan desapercibidas? Solución: Con nuestros Octocat personalizados, tus repositorios serán el centro de atención. ✨ Haz que tu trabajo brille con un diseño exclusivo que refleja tu creatividad y esfuerzo. ➡️ ¡Visítanos ahora y elige tu diseño! #OctocatCool #GitHubDesign #MakeItUnique
Equipo de Desarrollo	Imagen de varios Octocats personalizados trabajando en equipo frente a monitores con código. (Nombre del archivo: team_octocat.png, Alt: Equipo de Octocats colaborando)	¿Tu equipo necesita una identidad visual profesional? Transforma la imagen de tus proyectos en GitHub con OctoDesign. Problema: Falta de cohesión visual en los proyectos de equipo. Agitar: ¿Te preocupa que la falta de uniformidad afecte la percepción de profesionalismo de tus clientes y colaboradores? Solución: Nuestros diseños de Octocat personalizados para equipos aportan una imagen unificada y profesional a cada repositorio. 🔗 Mejora la presentación y asegura que tu equipo sea reconocido por su cohesión y calidad. 🚀 ¡Descubre nuestras opciones y eleva tu proyecto al siguiente nivel! #TeamOctocat #GitHubProfessional #UnifiedDesign
Entusiasta del Diseño	Imagen de un Octocat artístico con pinceles y paleta de colores, fondo de lienzo y pinceladas. (Nombre del archivo: artistic_octocat.png, Alt: Octocat artístico con pinceles)	¿Buscas un diseño que refleje tu creatividad? OctoDesign trae la personalización artística a tus proyectos de GitHub. Problema: Tus diseños no destacan como deberían. Agitar: ¿Sientes que tu trabajo no refleja tu verdadero talento artístico? Solución: Con nuestros diseños de Octocat, cada proyecto se convierte en una obra maestra. 🎨 Destaca tu talento y muestra tu pasión por el diseño con un toque exclusivo. 🌟 ¡Transforma tus repositorios hoy mismo! #ArtisticOctocat #CreativeDesign #GitHubArt

Luis Angel Maciel

Beneficios de Utilizar Schema JSON para Mejorar la Estructura de Datos en tu Sitio Web

Conclusión #

UTM´s Urchin Tracking Module para conocer el comportamiento de los visitantes

UTM (Urchin Tracking Module) #

Las UTM se componen de la siguiente manera: #

¿Cuántos caracteres son recomendados para el asunto de un email?

¿Cuántos caracteres son recomendados para el asunto de un email?

Longitud recomendada para el asunto de un email

¿Qué debo evitar en el asunto del correo?

Ejemplos de Asuntos de Correo Electrónico Efectivos

¿Cuál es la mejor hora para enviar un email?

Herramientas y Recursos Adicionales

Comentarios y Opiniones

Conclusión

Efecto de Desaturación y Seguimiento de Cursor

Efecto de Desaturación y Seguimiento de Cursor #

Importancia y diferencias entre análisis web: Google vs Fathom

¿Qué son los análisis de sitios web? #

Beneficios de los análisis de sitios web #

Diferencias entre Fathom Analytics y Google Analytics #

¿Estás iniciando un negocio? Descubre por qué el marketing digital es tu mejor alia

Componentes Clave de una Estrategia de Marketing Digital Efectiva #

Formulario Personalizado #

Blog con Copywriting y SEO Orgánico #

Perfil en Google My Business #

Página Web Optimizada con SEO y UI/UX #

¿Qué Son SEO y UI/UX? #

La Ventaja de Trabajar Conmigo #

Tabla Comparativa: Hacerlo Tú Mismo vs. Contratar a un Profesional #

Preguntas Frecuentes #

La Oportunidad Está Aquí y Ahora #

OctoDesign by Luis Angel Maciel

Resumen del negocio #

Perfiles de posibles compradores #

Ideas de anuncios de Facebook Ads #

Preguntas de marketing, branding y publicidad #

Chatbots gratuitos

Tiempo de lectura - widget

Mi blog

Estructura Mejorada de Página de Ventas según CreatorHQ

Estructura Mejorada de Página de Ventas #

Clave para el Éxito #

Logotipo de Jellow Call Center

Logotipo de Jellow Call Center #

Logotipo de Jellow Call Center

Logotipo de Jellow Call Center #

La hora en México es (JS)

El marketing verde, también conocido como marketing ambiental o marketing sostenible

Que imágenes originales se asocian con el marketing verde #

Ideas innovadoras #

Ideas específicas para implementar el marketing verde en organizaciones en México #

Fechas importantes #

Chistes #

código que permite generar timestamps (marcas de tiempo)

HTML: #

CSS: #

JavaScript: #

Funcionalidad y Usuarios: #

Estrategias SEO para un Blog de Sexualidad para Hombres Gay

Estrategias SEO para un Blog de Sexualidad para Hombres Gay #

Ejemplo de Estrategia de Contenido #

Resumen #

Cómo trabajar las urls para que Google ame tu web

Cómo trabajar las urls para que Google ame tu web. #

Trabajar las URLs para que Google ame tu web #

Truquitos para destacar y ganarle la 1ª posición a tus competidores. #

Truquitos para destacar y ganarle la 1ª posición a tus competidores #

El enfoque perfecto para ganar lectores y clientes potenciales con búsquedas orgánicas. #

Enfoque perfecto para ganar lectores y clientes potenciales con búsquedas orgánicas #

La correcta utilización de los encabezados. La mayoría de bloggers cometen el mismo error. #

Correcta utilización de los encabezados #

Las 3 ideas más 🔝para conseguir miles de visitas orgánicas con tu blog. #

Ideas para conseguir miles de visitas orgánicas con tu blog #

Los errores más comunes (y la solución) en SEO de blogs de viajes.

Errores Comunes en SEO de Blogs de Viajes y sus Soluciones #

Resumen #

¿Cómo colocar los enlaces internos estratégicamente?

Estrategias para Colocar Enlaces Internos #

Ejemplo Práctico #

Opción 4. `view-source:` #