[{"data":1,"prerenderedAt":7607},["ShallowReactive",2],{"blog-index-posts":3,"blog-unique-tags":7558},[4,916,1138,2123,2245,2512,3892,4012,4379,4565,4953,5207,5371,5763,6055,6801,6935,7398],{"id":5,"title":6,"body":7,"date":894,"description":895,"extension":896,"headerImage":897,"isActive":149,"keywords":898,"meta":904,"navigation":149,"path":905,"seo":906,"stem":897,"subject":907,"summary":910,"tags":911,"__hash__":915},"blog\u002Fblog\u002Foptimizar-web-para-agentes-ia.md","Guía para optimizar tu web para agentes de inteligencia artificial",{"type":8,"value":9,"toc":868},"minimark",[10,15,26,48,52,64,69,82,109,221,224,228,231,235,254,257,268,341,345,348,355,368,372,386,389,417,425,429,441,444,450,453,459,462,466,481,485,500,504,514,521,526,647,651,664,695,699,710,714,717,739,757,761,777,784,788,864],[11,12,14],"h2",{"id":13},"introducción","Introducción",[16,17,18,19,25],"p",{},"Si tienes un sitio web probablemente ya conoces ",[20,21,24],"span",{"className":22},[23],"inline-file","robots.txt"," y los sitemaps, archivos que ayudan a los buscadores tradicionales a indexar tu contenido. Pero en los últimos años ha surgido un nuevo ecosistema: los agentes de inteligencia artificial que recorren la web para responder preguntas, alimentar modelos de lenguaje o asistir a programadores en sus editores de código.",[16,27,28,29,33,34,33,38,42,43,47],{},"Para estos agentes han aparecido nuevos estándares que permiten comunicar de forma clara qué contenido queremos que consuman, cómo deben hacerlo y si permitimos que nuestros textos se utilicen para entrenar modelos. Hoy voy a hablarte de cuatro de ellos: ",[20,30,32],{"className":31},[23],"llms.txt",", ",[20,35,37],{"className":36},[23],"llms-full.txt",[20,39,41],{"className":40},[23],"ai.txt"," y ",[20,44,46],{"className":45},[23],"\u002F.well-known\u002Fai.txt",".",[11,49,51],{"id":50},"qué-es-llmstxt","¿Qué es llms.txt?",[16,53,54,55,58,59,63],{},"Propuesto por Jeremy Howard en septiembre de 2024, ",[20,56,32],{"className":57},[23]," es un archivo Markdown que se coloca en la raíz del dominio y actúa como un ",[60,61,62],"strong",{},"índice curado"," para modelos de lenguaje. Su objetivo es ofrecer a un agente de IA un mapa limpio y organizado de las páginas más importantes del sitio, evitando que tenga que crawlear todo el dominio para encontrar lo relevante.",[65,66,68],"h3",{"id":67},"formato","Formato",[16,70,71,72,81],{},"El archivo debe colocarse en ",[20,73,75],{"className":74},[23],[76,77,78],"a",{"href":78,"rel":79},"https:\u002F\u002Fejemplo.com\u002Fllms.txt",[80],"nofollow"," y sigue esta estructura:",[83,84,85,93,99,106],"ul",{},[86,87,88,89,92],"li",{},"Un ",[60,90,91],{},"H1"," con el nombre del sitio",[86,94,88,95,98],{},[60,96,97],{},"blockquote"," con un resumen de una o dos líneas",[86,100,101,102,105],{},"Secciones con ",[60,103,104],{},"H2"," que agrupan los enlaces por temática",[86,107,108],{},"Enlaces en formato Markdown con una descripción breve",[110,111,116],"pre",{"className":112,"code":113,"filename":32,"language":114,"meta":115,"style":115},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Mi Sitio Web\n> Blog personal con tutoriales de desarrollo web, ciencia y tecnología.\n>\nEscrito por Juan Pérez.\n\nEl contenido principal son guías prácticas y artículos de opinión\nsobre programación y tecnología en general.\n\n## Artículos de programación\n- [Guía de Vue 3](\u002Fvue-guide): Tutorial completo de Vue 3\n- [Tailwind CSS desde cero](\u002Ftailwind-css): Introducción a utilidades CSS\n- [SEO con schema.org](\u002Fseo-schema): Cómo implementar datos estructurados\n\n## Páginas principales\n- [Inicio](\u002F): Página principal\n- [Blog](\u002Fblog): Listado completo de artículos\n- [Sobre mí](\u002Fabout): Información del autor\n","markdown","",[117,118,119,126,132,138,144,151,157,163,168,174,180,186,192,197,203,209,215],"code",{"__ignoreMap":115},[20,120,123],{"class":121,"line":122},"line",1,[20,124,125],{},"# Mi Sitio Web\n",[20,127,129],{"class":121,"line":128},2,[20,130,131],{},"> Blog personal con tutoriales de desarrollo web, ciencia y tecnología.\n",[20,133,135],{"class":121,"line":134},3,[20,136,137],{},">\n",[20,139,141],{"class":121,"line":140},4,[20,142,143],{},"Escrito por Juan Pérez.\n",[20,145,147],{"class":121,"line":146},5,[20,148,150],{"emptyLinePlaceholder":149},true,"\n",[20,152,154],{"class":121,"line":153},6,[20,155,156],{},"El contenido principal son guías prácticas y artículos de opinión\n",[20,158,160],{"class":121,"line":159},7,[20,161,162],{},"sobre programación y tecnología en general.\n",[20,164,166],{"class":121,"line":165},8,[20,167,150],{"emptyLinePlaceholder":149},[20,169,171],{"class":121,"line":170},9,[20,172,173],{},"## Artículos de programación\n",[20,175,177],{"class":121,"line":176},10,[20,178,179],{},"- [Guía de Vue 3](\u002Fvue-guide): Tutorial completo de Vue 3\n",[20,181,183],{"class":121,"line":182},11,[20,184,185],{},"- [Tailwind CSS desde cero](\u002Ftailwind-css): Introducción a utilidades CSS\n",[20,187,189],{"class":121,"line":188},12,[20,190,191],{},"- [SEO con schema.org](\u002Fseo-schema): Cómo implementar datos estructurados\n",[20,193,195],{"class":121,"line":194},13,[20,196,150],{"emptyLinePlaceholder":149},[20,198,200],{"class":121,"line":199},14,[20,201,202],{},"## Páginas principales\n",[20,204,206],{"class":121,"line":205},15,[20,207,208],{},"- [Inicio](\u002F): Página principal\n",[20,210,212],{"class":121,"line":211},16,[20,213,214],{},"- [Blog](\u002Fblog): Listado completo de artículos\n",[20,216,218],{"class":121,"line":217},17,[20,219,220],{},"- [Sobre mí](\u002Fabout): Información del autor\n",[16,222,223],{},"Cada enlace debe ser una URL absoluta o relativa y debe llevar una descripción que ayude al modelo a entender qué encontrará al seguir ese enlace.",[65,225,227],{"id":226},"para-qué-sirve","¿Para qué sirve?",[16,229,230],{},"Los asistentes de IA como Claude, ChatGPT o las herramientas integradas en editores de código (Cursor, Windsurf, Continue) pueden leer este archivo para entender rápidamente la estructura del sitio sin tener que hacer múltiples peticiones. Es especialmente útil para sitios con mucha documentación técnica o catálogos extensos de contenido.",[11,232,234],{"id":233},"qué-es-llms-fulltxt","¿Qué es llms-full.txt?",[16,236,237,238,241,242,245,246,249,250,253],{},"Si ",[20,239,32],{"className":240},[23]," es el índice, ",[20,243,37],{"className":244},[23]," es el ",[60,247,248],{},"corpus completo",". Es un archivo compañero que contiene el texto íntegro de las páginas referenciadas en ",[20,251,32],{"className":252},[23],", todo concatenado en un solo documento Markdown.",[65,255,68],{"id":256},"formato-1",[16,258,259,260,267],{},"Se coloca en ",[20,261,263],{"className":262},[23],[76,264,265],{"href":265,"rel":266},"https:\u002F\u002Fejemplo.com\u002Fllms-full.txt",[80]," y no tiene una estructura fija más allá de ser Markdown válido. La convención más extendida es separar cada página con un H2 que indique la URL y el título original:",[110,269,271],{"className":112,"code":270,"filename":37,"language":114,"meta":115,"style":115},"# Mi Sitio Web - Contenido completo\n\n## https:\u002F\u002Fejemplo.com\u002Fvue-guide\n### Guía de Vue 3\n\nVue 3 es un framework progresivo de JavaScript para construir interfaces de usuario...\n\n(contenido completo del artículo)\n\n## https:\u002F\u002Fejemplo.com\u002Ftailwind-css\n### Tailwind CSS desde cero\n\nTailwind CSS es un framework de utilidades que acelera el desarrollo...\n\n(contenido completo del artículo)\n",[117,272,273,278,282,287,292,296,301,305,310,314,319,324,328,333,337],{"__ignoreMap":115},[20,274,275],{"class":121,"line":122},[20,276,277],{},"# Mi Sitio Web - Contenido completo\n",[20,279,280],{"class":121,"line":128},[20,281,150],{"emptyLinePlaceholder":149},[20,283,284],{"class":121,"line":134},[20,285,286],{},"## https:\u002F\u002Fejemplo.com\u002Fvue-guide\n",[20,288,289],{"class":121,"line":140},[20,290,291],{},"### Guía de Vue 3\n",[20,293,294],{"class":121,"line":146},[20,295,150],{"emptyLinePlaceholder":149},[20,297,298],{"class":121,"line":153},[20,299,300],{},"Vue 3 es un framework progresivo de JavaScript para construir interfaces de usuario...\n",[20,302,303],{"class":121,"line":159},[20,304,150],{"emptyLinePlaceholder":149},[20,306,307],{"class":121,"line":165},[20,308,309],{},"(contenido completo del artículo)\n",[20,311,312],{"class":121,"line":170},[20,313,150],{"emptyLinePlaceholder":149},[20,315,316],{"class":121,"line":176},[20,317,318],{},"## https:\u002F\u002Fejemplo.com\u002Ftailwind-css\n",[20,320,321],{"class":121,"line":182},[20,322,323],{},"### Tailwind CSS desde cero\n",[20,325,326],{"class":121,"line":188},[20,327,150],{"emptyLinePlaceholder":149},[20,329,330],{"class":121,"line":194},[20,331,332],{},"Tailwind CSS es un framework de utilidades que acelera el desarrollo...\n",[20,334,335],{"class":121,"line":199},[20,336,150],{"emptyLinePlaceholder":149},[20,338,339],{"class":121,"line":205},[20,340,309],{},[65,342,344],{"id":343},"ventajas-y-consideraciones","Ventajas y consideraciones",[16,346,347],{},"La principal ventaja es que el agente obtiene todo el contenido en una sola petición HTTP, sin necesidad de seguir cada enlace individualmente. Esto es especialmente útil para herramientas de edición de código y asistentes que operan con ventanas de contexto limitadas.",[16,349,350,351,354],{},"Sin embargo, tienes que valorar si quieres tener todo el contenido de tu web expuesto en un único archivo. Puede llegar a ser muy grande (varios megabytes) y, al ser un solo fichero, cualquier persona o bot puede descargarlo entero. Si esto te preocupa, puedes limitarte a publicar solo ",[20,352,32],{"className":353},[23],", que sigue siendo útil sin exponer el contenido completo.",[97,356,357],{},[16,358,359,360,363,364,367],{},"💡 ",[60,361,362],{},"Consejo",": Si decides publicar ambos, genera ",[20,365,37],{"className":366},[23]," automáticamente desde tu pipeline de construcción para que siempre esté actualizado.",[11,369,371],{"id":370},"qué-es-aitxt-en-la-raíz","¿Qué es ai.txt en la raíz?",[16,373,374,377,378,381,382,385],{},[20,375,41],{"className":376},[23]," es un archivo propuesto por ",[60,379,380],{},"Spawning.ai"," en 2023 que permite a los propietarios de sitios web declarar si su contenido puede utilizarse para entrenar modelos de inteligencia artificial. Es similar a ",[20,383,24],{"className":384},[23]," pero enfocado específicamente en el uso para entrenamiento, no en el acceso.",[65,387,68],{"id":388},"formato-2",[16,390,259,391,398,399,402,403,33,408,42,412,416],{},[20,392,394],{"className":393},[23],[76,395,396],{"href":396,"rel":397},"https:\u002F\u002Fejemplo.com\u002Fai.txt",[80]," y utiliza una sintaxis muy similar a ",[20,400,24],{"className":401},[23]," con directivas ",[20,404,407],{"className":405},[406],"inline-coding","User-Agent",[20,409,411],{"className":410},[406],"Allow",[20,413,415],{"className":414},[406],"Disallow",":",[110,418,423],{"className":419,"code":421,"filename":41,"language":422,"meta":115},[420],"language-text","# ai.txt - Permisos para entrenamiento de IA\nUser-Agent: *\nAllow: \u002F\n","text",[117,424,421],{"__ignoreMap":115},[65,426,428],{"id":427},"valores-posibles","Valores posibles",[83,430,431,436],{},[86,432,433,435],{},[60,434,411],{},": Indica que permites que tu contenido se utilice para entrenamiento.",[86,437,438,440],{},[60,439,415],{},": Indica que NO permites el uso de tu contenido para entrenamiento.",[16,442,443],{},"Puedes restringir por tipo de contenido o rutas específicas:",[110,445,448],{"className":446,"code":447,"filename":41,"language":422,"meta":115},[420],"# Permitir solo contenido público, denegar contenido premium\nUser-Agent: *\nAllow: \u002Fblog\u002F\nAllow: \u002Fguides\u002F\nDisallow: \u002Fpremium\u002F\nDisallow: \u002Fprivate\u002F\n",[117,449,447],{"__ignoreMap":115},[16,451,452],{},"También puedes segmentar por agente:",[110,454,457],{"className":455,"code":456,"filename":41,"language":422,"meta":115},[420],"User-Agent: GPTBot\nAllow: \u002F\n\nUser-Agent: ClaudeBot\nDisallow: \u002F\n",[117,458,456],{"__ignoreMap":115},[16,460,461],{},"Este formato es reconocido por la API de Spawning y lo respetan empresas como Hugging Face y Stability AI. Para el resto de agentes es una señal voluntaria, pero ayuda a dejar clara tu posición respecto al uso de tu contenido.",[11,463,465],{"id":464},"qué-es-well-knownaitxt","¿Qué es \u002F.well-known\u002Fai.txt?",[16,467,468,469,472,473,476,477,480],{},"A principios de 2026 se presentó un borrador en el IETF (el organismo que estandariza protocolos de internet) para un nuevo archivo: ",[20,470,46],{"className":471},[23],". Es una evolución más completa del ",[20,474,41],{"className":475},[23]," de Spawning, con un formato más estructurado y capaz de expresar políticas matizadas que ",[20,478,24],{"className":479},[23]," no puede comunicar.",[65,482,484],{"id":483},"ubicación","Ubicación",[16,486,487,488,495,496,47],{},"Debe servirse en ",[20,489,491],{"className":490},[23],[76,492,493],{"href":493,"rel":494},"https:\u002F\u002Fejemplo.com\u002F.well-known\u002Fai.txt",[80]," sobre HTTPS y con ",[20,497,499],{"className":498},[406],"Content-Type: text\u002Fplain; charset=utf-8",[65,501,503],{"id":502},"formato-y-propiedades","Formato y propiedades",[16,505,506,507,42,510,416],{},"Utiliza un formato de bloques clave:valor inspirado en ",[20,508,24],{"className":509},[23],[20,511,513],{"className":512},[23],"security.txt",[110,515,519],{"className":516,"code":517,"filename":518,"language":422,"meta":115},[420],"# ai.txt - Declaración de política de IA\nSpec-Version: 1.0\nSite-Name: Mi Blog\nSite-URL: https:\u002F\u002Fejemplo.com\nContact: ai@ejemplo.com\nPolicy-URL: https:\u002F\u002Fejemplo.com\u002Fpolitica-ia\nTraining: deny\nScraping: allow\nIndexing: allow\nCaching: allow\nTraining-License: CC-BY-4.0\nAttribution: required\n\nAgent: *\n  Rate-Limit: 30\u002Fminute\n\nAgent: GPTBot\n  Training: allow\n  Rate-Limit: 120\u002Fminute\n",".well-known\u002Fai.txt",[117,520,517],{"__ignoreMap":115},[522,523,525],"h4",{"id":524},"campos-principales","Campos principales",[83,527,528,534,540,546,552,558,578,590,602,614,629],{},[86,529,530,533],{},[60,531,532],{},"Spec-Version",": Versión de la especificación (actualmente 1.0).",[86,535,536,539],{},[60,537,538],{},"Site-Name",": Nombre del sitio.",[86,541,542,545],{},[60,543,544],{},"Site-URL",": URL canónica del sitio.",[86,547,548,551],{},[60,549,550],{},"Contact",": Dirección de contacto para temas de licencia o política de IA.",[86,553,554,557],{},[60,555,556],{},"Policy-URL",": Enlace a la política de IA en lenguaje humano.",[86,559,560,563,564,33,568,572,573,577],{},[60,561,562],{},"Training",": Indica si permites el entrenamiento de modelos con tu contenido. Valores: ",[20,565,567],{"className":566},[406],"allow",[20,569,571],{"className":570},[406],"deny"," (por defecto), ",[20,574,576],{"className":575},[406],"conditional"," (activa reglas por ruta).",[86,579,580,583,584,572,587,47],{},[60,581,582],{},"Scraping",": Permite que los agentes lean tu contenido. Valores: ",[20,585,567],{"className":586},[406],[20,588,571],{"className":589},[406],[86,591,592,595,596,572,599,47],{},[60,593,594],{},"Indexing",": Permite que tu contenido aparezca en índices de IA. Valores: ",[20,597,567],{"className":598},[406],[20,600,571],{"className":601},[406],[86,603,604,607,608,572,611,47],{},[60,605,606],{},"Caching",": Permite que los agentes cacheen tu contenido. Valores: ",[20,609,567],{"className":610},[406],[20,612,571],{"className":613},[406],[86,615,616,619,620,33,624,628],{},[60,617,618],{},"Training-License",": Identificador SPDX de la licencia bajo la que se permite el entrenamiento (ej: ",[20,621,623],{"className":622},[406],"CC-BY-4.0",[20,625,627],{"className":626},[406],"MIT",").",[86,630,631,634,635,33,639,33,643,47],{},[60,632,633],{},"Attribution",": Si se debe atribuir la fuente al usar el contenido. Valores: ",[20,636,638],{"className":637},[406],"required",[20,640,642],{"className":641},[406],"optional",[20,644,646],{"className":645},[406],"none",[522,648,650],{"id":649},"bloques-por-agente","Bloques por agente",[16,652,653,654,658,659,663],{},"Dentro de un bloque ",[20,655,657],{"className":656},[406],"Agent:"," se pueden sobrescribir las políticas por agente específico. El agente comodín ",[20,660,662],{"className":661},[406],"*"," establece la política por defecto. Los campos más comunes dentro de un bloque de agente son:",[83,665,666,672],{},[86,667,668,671],{},[60,669,670],{},"Training, Scraping, Indexing, Caching",": Sobrescriben los valores globales.",[86,673,674,677,678,682,683,33,687,33,691,628],{},[60,675,676],{},"Rate-Limit",": Límite de peticiones en formato ",[20,679,681],{"className":680},[406],"N\u002Fventana"," (ej: ",[20,684,686],{"className":685},[406],"30\u002Fminute",[20,688,690],{"className":689},[406],"100\u002Fhour",[20,692,694],{"className":693},[406],"1000\u002Fday",[65,696,698],{"id":697},"diferencias-con-robotstxt","Diferencias con robots.txt",[16,700,701,702,705,706,709],{},"Mientras que ",[20,703,24],{"className":704},[23]," solo puede permitir o bloquear el acceso a rutas, ",[20,707,46],{"className":708},[23]," permite expresar matices como \"puedes crawlear mi sitio para indexarlo, pero no puedes entrenar modelos con mi contenido\". Esto es útil si quieres aparecer en búsquedas de IA pero no quieres que tu contenido forme parte del dataset de entrenamiento de un modelo.",[11,711,713],{"id":712},"merece-la-pena-implementarlos","¿Merece la pena implementarlos?",[16,715,716],{},"La adopción de estos archivos es aún temprana, pero el coste de implementarlos es muy bajo: son archivos de texto estáticos que apenas ocupan espacio. A día de hoy:",[83,718,719,724,729,734],{},[86,720,721,723],{},[60,722,32],{}," es leído por asistentes de código como Cursor y Continue. Su valor actual está más en herramientas de desarrollo que en buscadores de IA, pero tenerlo te coloca en una buena posición cuando la adopción crezca.",[86,725,726,728],{},[60,727,37],{}," es opcional y útil si tienes documentación técnica densa. Si te preocupa exponer todo tu contenido, puedes prescindir de él.",[86,730,731,733],{},[60,732,41],{}," (Spawning) es respetado por actores concretos del ecosistema de entrenamiento.",[86,735,736,738],{},[60,737,46],{}," es el más completo y está en proceso de estandarización en el IETF. Permite expresar políticas con mucho más detalle que cualquier otro formato.",[16,740,741,742,42,745,748,749,752,753,756],{},"Mi recomendación es empezar por ",[20,743,32],{"className":744},[23],[20,746,41],{"className":747},[23]," (en la raíz), que son los más sencillos. Si necesitas más control, añade ",[20,750,46],{"className":751},[23],". Y si tu web tiene mucha documentación técnica, valora si ",[20,754,37],{"className":755},[23]," tiene sentido para ti.",[11,758,760],{"id":759},"conclusión","Conclusión",[16,762,763,764,33,767,33,770,42,773,776],{},"Los archivos ",[20,765,32],{"className":766},[23],[20,768,37],{"className":769},[23],[20,771,41],{"className":772},[23],[20,774,46],{"className":775},[23]," son la nueva capa de comunicación entre los sitios web y los agentes de inteligencia artificial. Aunque ninguno es obligatorio ni está universalmente adoptado, implementarlos es una inversión de futuro con coste casi nulo.",[16,778,779,780,783],{},"Si ya tienes un ",[20,781,24],{"className":782},[23]," y un sitemap, añadir estos archivos es el siguiente paso natural para que tu web sea correctamente interpretada tanto por buscadores tradicionales como por el creciente ecosistema de agentes de IA.",[11,785,787],{"id":786},"referencias","Referencias",[83,789,790,801,810,819,828,837,846,855],{},[86,791,792,795,796],{},[60,793,794],{},"Propuesta original de llms.txt por Jeremy Howard (Answer.AI, 2024)",": ",[76,797,798],{"href":798,"rel":799,":target":800},"https:\u002F\u002Fwww.answer.ai\u002Fposts\u002F2024-09-03-llmstxt",[80],"_blank",[86,802,803,795,806],{},[60,804,805],{},"Especificación oficial de llms.txt (llmstxt.org)",[76,807,808],{"href":808,"rel":809,":target":800},"https:\u002F\u002Fllmstxt.org\u002F",[80],[86,811,812,795,815],{},[60,813,814],{},"Repositorio de la especificación llms.txt en GitHub",[76,816,817],{"href":817,"rel":818,":target":800},"https:\u002F\u002Fgithub.com\u002FAnswerDotAI\u002Fllms-txt",[80],[86,820,821,795,824],{},[60,822,823],{},"Llms.txt de Anthropic (ejemplo real)",[76,825,826],{"href":826,"rel":827,":target":800},"https:\u002F\u002Fdocs.anthropic.com\u002Fllms.txt",[80],[86,829,830,795,833],{},[60,831,832],{},"Llms-full.txt de Anthropic (ejemplo real)",[76,834,835],{"href":835,"rel":836,":target":800},"https:\u002F\u002Fdocs.anthropic.com\u002Fllms-full.txt",[80],[86,838,839,795,842],{},[60,840,841],{},"Generador de ai.txt de Spawning.ai",[76,843,844],{"href":844,"rel":845,":target":800},"https:\u002F\u002Fsite.spawning.ai\u002Fspawning-ai-txt",[80],[86,847,848,795,851],{},[60,849,850],{},"Borrador IETF de .well-known\u002Fai.txt (Kayla Cardillo, 2026)",[76,852,853],{"href":853,"rel":854,":target":800},"https:\u002F\u002Fdatatracker.ietf.org\u002Fdoc\u002Fdraft-car-ai-txt-wellknown\u002F",[80],[86,856,857,795,860],{},[60,858,859],{},"Repositorio de la especificación ai.txt en GitHub",[76,861,862],{"href":862,"rel":863,":target":800},"https:\u002F\u002Fgithub.com\u002Fkaylacar\u002Fai-txt",[80],[865,866,867],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":115,"searchDepth":128,"depth":134,"links":869},[870,871,875,879,883,891,892,893],{"id":13,"depth":128,"text":14},{"id":50,"depth":128,"text":51,"children":872},[873,874],{"id":67,"depth":134,"text":68},{"id":226,"depth":134,"text":227},{"id":233,"depth":128,"text":234,"children":876},[877,878],{"id":256,"depth":134,"text":68},{"id":343,"depth":134,"text":344},{"id":370,"depth":128,"text":371,"children":880},[881,882],{"id":388,"depth":134,"text":68},{"id":427,"depth":134,"text":428},{"id":464,"depth":128,"text":465,"children":884},[885,886,890],{"id":483,"depth":134,"text":484},{"id":502,"depth":134,"text":503,"children":887},[888,889],{"id":524,"depth":140,"text":525},{"id":649,"depth":140,"text":650},{"id":697,"depth":134,"text":698},{"id":712,"depth":128,"text":713},{"id":759,"depth":128,"text":760},{"id":786,"depth":128,"text":787},"2026-07-19","Aprende qué son estos archivos, cómo se crean y cómo pueden ayudar a que los agentes de IA encuentren y entiendan mejor tu contenido.","md","blog\u002Foptimizar-web-para-agentes-ia",[32,37,41,899,900,901,902,903],"well-known ai.txt","ia sitio web","crawlers ia","optimizar web para ia","geo",{},"\u002Fblog\u002Foptimizar-web-para-agentes-ia",{"title":6,"description":895},[908,909],"llms","ia","Cada vez más agentes de IA, asistentes y crawlers especializados recorren la web en busca de contenido. Para facilitarles el trabajo han surgido nuevos estándares como llms.txt, llms-full.txt, ai.txt y .well-known\u002Fai.txt. Te explico qué es cada uno, cómo crearlos y qué ventajas pueden aportar a tu sitio web.",[912,913,914],"Programación","Tecnología","IA","FGkuANjRfJS_e373SPEIcDxE9oQ7a4zmTly_9BdASOE",{"id":917,"title":918,"body":919,"date":1122,"description":1123,"extension":896,"headerImage":1124,"isActive":149,"keywords":1125,"meta":1130,"navigation":149,"path":1131,"seo":1132,"stem":1133,"subject":1134,"summary":1135,"tags":1136,"__hash__":1137},"blog\u002Fblog\u002Fia-analiza-logo-thebyteland.md","Lo que la IA entiende del logo de The Byteland",{"type":8,"value":920,"toc":1114},[921,925,928,931,934,947,951,962,968,971,978,981,1021,1024,1031,1035,1038,1050,1053,1056,1060,1063,1066,1072,1075,1083,1086,1088,1098,1104,1106],[11,922,924],{"id":923},"sobre-el-logo-de-the-byteland","Sobre el logo de The Byteland",[16,926,927],{},"Cuando me propuse empezar este proyecto, una de las cosas que más me preocupaban era el diseño del logo, porque tenía claro de lo que quería hablar en este blog pero lo difícil era conseguir un logo relativamente sencillo, que me gustara y que tuviera significado, no sólo que fuera un diseño bonito y llamativo sin sentido alguno.",[16,929,930],{},"A esto se le suma que no tengo muchos conocimientos de diseño, por lo que al principio busqué ayuda en diseñadores profesionales, opiniones de amigos sobre los bocetos que se iban creando y sobre la idea principal que quería transmitir.",[16,932,933],{},"La verdad es que nada me convencía y lo dejé aparcado un tiempo pero al final me puse yo mismo a dibujar, escribir conceptos y en definitiva a trastear en busca de inspiración hasta que conseguí el logo actual.",[935,936,942],"div",{"className":937},[938,939,940,941],"w-fit","mx-auto","rounded-lg","dark:bg-white",[943,944],"byte-image",{"src":945,"alt":946},"app\u002Flogo","Logo de The Byteland",[11,948,950],{"id":949},"qué-interpretó-chatgpt-sobre-el-logo","¿Qué interpretó ChatGPT sobre el logo?",[16,952,953,954,956,957,961],{},"Se dice que lo más importante de la interacción con una ",[60,955,914],{}," es el contexto que le damos para que nos pueda ofrecer una respuesta lo más correcta posible, aquello de pensar minuciosamente el ",[20,958,960],{"className":959},[406],"prompt"," que le vamos a pasar como entrada.",[16,963,964,965,967],{},"Pero quería probar algo distinto: Con un contexto mínimo y pasándole el fichero de la imagen del logo me preguntaba si la ",[60,966,914],{}," sería capaz de aproximarse a los conceptos que yo pensé para crear el logo y lo que quería transmitir.",[16,969,970],{},"Así que me puse manos a la obra. Subí la imagen y le pregunté lo siguiente:",[972,973,974],"byte-blockquote",{},[975,976,977],"template",{},"\nEste es el logo del sitio web The Byteland, el cual es un blog. ¿Qué te sugiere este logo?\n",[16,979,980],{},"En menos de dos segundos ya estaba sacando por pantalla una respuesta elaborada que me dejó muy asombrado, porque sin tener el contexto prácticamente había acertado en todos los conceptos, estilos del logo y en parte de la esencia que quería transmitir. Su respuesta exacta fue:",[972,982,983],{},[975,984,985,986,1020],{},"\nEl logo del sitio web \"The Byteland\" que has proporcionado sugiere varios aspectos:\n",[987,988,989,996,1002,1008,1014],"ol",{},[86,990,991,995],{},[992,993,994],"b",{},"Tecnología y Modernidad",": La forma geométrica y el diseño abstracto del logo transmiten una sensación de tecnología y modernidad, lo cual es apropiado para un blog centrado en temas tecnológicos.",[86,997,998,1001],{},[992,999,1000],{},"Estabilidad y Estructura",": La simetría y las líneas limpias del logo dan una impresión de estabilidad y organización, sugiriendo que el contenido del blog es bien estructurado y fiable.",[86,1003,1004,1007],{},[992,1005,1006],{},"Innovación",": El diseño del logo, con sus formas angulares y apariencia futurista, puede insinuar que el blog se enfoca en innovación y avances tecnológicos.",[86,1009,1010,1013],{},[992,1011,1012],{},"Minimalismo",": La simplicidad del diseño sugiere un enfoque minimalista, lo cual puede reflejarse en el estilo de escritura y la presentación del contenido del blog, haciéndolo accesible y fácil de entender.",[86,1015,1016,1019],{},[992,1017,1018],{},"Unión y Conectividad",": Las líneas convergentes del logo pueden simbolizar la unión de diferentes ideas y conceptos, lo cual es ideal para un blog que podría estar uniendo diferentes áreas del conocimiento tecnológico.","\nEn general, este logo parece bien pensado para un blog tecnológico, transmitiendo profesionalismo, innovación y claridad.",[16,1022,1023],{},"Esta es una captura de pantalla de la conversación completa:",[935,1025,1027],{"className":1026},[938,939,940,941],[943,1028],{"src":1029,"alt":1030},"blog\u002Fia-logo-captura","Captura de pantalla de conversación con ChatGPT",[11,1032,1034],{"id":1033},"el-significado-del-logo","El significado del logo",[16,1036,1037],{},"El logo está compuesto por tres barras torcidas del mismo tamaño que se apuntan unas a otras en el origen de su ángulo, como si fuesen tres flechas apuntando hacia un centro común.Encima de las barras se encuentra un rombo centrado en el hueco de la barra superior.",[16,1039,1040,1041,33,1043,42,1046,1049],{},"Cada una de las barras hace referencia a uno de los temas principales del blog: ",[60,1042,913],{},[60,1044,1045],{},"programación",[60,1047,1048],{},"ciencia",". Como son el tema principal su tamaño indica que tienen el mismo peso en el contenido del blog (aunque luego no escriba de forma proporcionada para cada tema).",[16,1051,1052],{},"Y finalmente el rombo significa mi figura como escritor del blog, controlando lo que debe aparecer en el mismo y en parte también para simbolizar la parte personal o más humana dentro de todo el contenido.",[16,1054,1055],{},"Por mi forma de programar, organizar las tareas y fijar los objetivos, intento siempre que haya una armonía, equilibrio y busco que sea un diseño claro sobre el que ir mejorando día a día, probar cosas nuevas e ir innovando en las tecnologías que uso.",[11,1057,1059],{"id":1058},"estaba-acertada-la-ia-en-su-respuesta","¿Estaba acertada la IA en su respuesta?",[16,1061,1062],{},"Mi primera reacción al leer la respuesta fue pensar que la IA estaba haciendo trampa, porque supuestamente no tiene acceso a internet y no puede consultar el contenido de mi web. Además no es un sitio conocido del que tenga conocimiento porque otras personas escriban sobre el mismo.",[16,1064,1065],{},"Entonces: ¿Cómo era capaz de relacionar el logo con el contenido, acertando sobre el tema principal?",[16,1067,1068,1069,1071],{},"El blog podría tratar únicamente sobre cine por ejemplo y no tener una estructura fija que busque orden y fuera más caótico y el hecho de que la  ",[60,1070,914],{}," sea capaz de sacar ese análisis de una simple imagen y de forma tan rápida no deja de ser algo sorprendente.",[16,1073,1074],{},"Es verdad que podría ser cosa del azar, que simplemente haya valorado que hay una gran cantidad de blogs que traten estos temas, que busquen los objetivos que comenta pero la última de las observaciones me dejó realmente impactado:",[972,1076,1077],{},[975,1078,1079,1082],{},[992,1080,1081],{},"\nUnión y Conectividad\n","\n: Las líneas convergentes del logo pueden simbolizar la unión de diferentes ideas y conceptos, lo cual es ideal para un blog que podría estar uniendo diferentes áreas del conocimiento tecnológico.\n",[16,1084,1085],{},"Si bien es verdad que lo que reflejan no son áreas del conocimiento tecnológico sino los tres temas principales, el hecho de que pueda llegar a asociar estos conceptos por unas simples líneas en una imagen y resumirlo en tan poco tiempo es algo que hay que admirar.",[11,1087,760],{"id":759},[16,1089,1090,1091,1094,1095,1097],{},"Esa pequeña prueba con ",[60,1092,1093],{},"ChatGPT"," me ha animado a escribir este artículo porque lo que pienso que realmente es útil actualmente de una herramienta como ",[60,1096,1093],{}," es esa capacidad de asociar conceptos abstractos y plasmarlos en unas pocas líneas de texto que podemos entender fácilmente.",[16,1099,1100,1101,1103],{},"Últimamente, cuando estudio algo complejo o leo documentación sobre alguna herramienta con la que estoy trabajando y no consigo entenderlo bien, suelo recurrir a ",[60,1102,1093],{}," para que me lo explique de otra forma y creo que los avances que está teniendo respecto a sus primeras versiones van a revolucionar la forma en la que aprendemos y el cómo expresamos conceptos complejos.",[11,1105,787],{"id":786},[16,1107,1108,1111],{},[76,1109],{"href":1110,"target":800},"https:\u002F\u002Fchatgpt.com\u002F",[76,1112,1110],{"href":1110,"rel":1113},[80],{"title":115,"searchDepth":128,"depth":134,"links":1115},[1116,1117,1118,1119,1120,1121],{"id":923,"depth":128,"text":924},{"id":949,"depth":128,"text":950},{"id":1033,"depth":128,"text":1034},{"id":1058,"depth":128,"text":1059},{"id":759,"depth":128,"text":760},{"id":786,"depth":128,"text":787},"2024-07-15","Le he preguntado a ChatGPT sobre el logo de The Byteland y su respuesta ha sido muy interesante.","blog\u002Fia-analiza-logo",[909,1126,1127,1128,1129],"ia logo","ia logo thebyteland","ia entiende logo","ia analiza logo",{},"\u002Fblog\u002Fia-analiza-logo-thebyteland",{"title":918,"description":1123},"blog\u002Fia-analiza-logo-thebyteland",[909],"El logo de un sitio web es un elemento importante porque debe reflejar de una manera simple algo muy complejo: Su identidad. El cómo lo entendemos los humanos el algo complejo y subjetivo pero... ¿Qué información puede sacar una IA de un logo?",[913],"HplREuUxBlv-AnlKht2an0kEHh0D8a-rRUsDeAiAQm8",{"id":1139,"title":1140,"body":1141,"date":2105,"description":2106,"extension":896,"headerImage":2107,"isActive":149,"keywords":2108,"meta":2113,"navigation":149,"path":2115,"seo":2116,"stem":2117,"subject":2118,"summary":2120,"tags":2121,"__hash__":2122},"blog\u002Fblog\u002Fgestionar-rutas-dinamicas-nuxt.md","Gestionar rutas dinámicas Nuxt",{"type":8,"value":1142,"toc":2099},[1143,1147,1150,1177,1180,1198,1219,1223,1235,1251,1376,1379,1383,1395,1421,1429,1655,1666,1669,1706,1723,1813,1820,1824,1827,1830,1845,1976,1986,1993,2096],[11,1144,1146],{"id":1145},"entendiendo-las-rutas-dinámicas","Entendiendo las rutas dinámicas",[16,1148,1149],{},"Antes de meterse de lleno en la cuestión principal es importante que tengamos claro qué son y cómo funcionan las rutas dinámicas en Nuxt.",[16,1151,1152,1153,1157,1158,1162,1163,1167,1168,1171,1172,1176],{},"Por defecto Nuxt utiliza ",[20,1154,1156],{"className":1155},[406],"vue-router"," para crear su sistema de rutas de forma que el nombre de cada fichero que incluyamos en el directorio ",[20,1159,1161],{"className":1160},[23],"\u002Fpages"," tenga una ruta asociada, es decir, si creamos un fichero con el nombre ",[20,1164,1166],{"className":1165},[23],"test.vue"," en el directorio ",[20,1169,1161],{"className":1170},[23]," tendremos la url ",[20,1173,1175],{"className":1174},[406],"https:\u002F\u002FTU_DOMINIO\u002Ftest"," disponible.",[16,1178,1179],{},"Cuando queremos crear rutas dinámicas el proceso es parecido pero debemos indicar cual es el directorio raíz del que van a partir las rutas dinámicas, de manera que si tenemos una sección de nuestra web que cataloga especies de animales y queremos que para cada especie exista una página diferente, añadir cada una de ellas a mano puede no ser la mejor opción y querremos tener un sistema automatizado ya sea por un gestor de contenidos o una base de datos que se encargue de ello.",[16,1181,1182,1183,1187,1188,1192,1193,1197],{},"Para este caso, podríamos tener un directorio ",[20,1184,1186],{"className":1185},[23],"\u002Fanimals"," en el que podemos definir un fichero ",[20,1189,1191],{"className":1190},[23],"index.vue"," que será la página principal de ese directorio, y otro fichero ",[20,1194,1196],{"className":1195},[23],"_slug.vue"," que se encargará de gestionar las páginas dinámicas para cada animal. Esto generaría las siguientes rutas:",[83,1199,1200,1207],{},[86,1201,1202,1203],{},"Ruta principal de animales: ",[20,1204,1206],{"className":1205},[406],"https:\u002F\u002FTU_DOMINIO\u002Fanimals",[86,1208,1209,1210,1214,1215],{},"Rutas dinámicas: ",[20,1211,1213],{"className":1212},[406],"https:\u002F\u002FTU_DOMINIO\u002Fanimals\u002Flion"," ó ",[20,1216,1218],{"className":1217},[406],"https:\u002F\u002FTU_DOMINIO\u002Fanimals\u002Fdog",[11,1220,1222],{"id":1221},"nomenclatura-de-ficheros","Nomenclatura de ficheros",[16,1224,1225,1226,1230,1231,628],{},"Al nombrar un fichero empezando con una barra baja (",[20,1227,1229],{"className":1228},[406],"_",") le decimos a Nuxt que esa página va a ser dinámica y el nombre que le damos después de la barra baja indica la variable que recibirá el nombre de la ruta (En el ejemplo anterior ",[20,1232,1234],{"className":1233},[406],"slug",[16,1236,1237,1238,1242,1243,1246,1247,1250],{},"Esto es útil de cara a validar si esa ruta existe o no a la hora de acceder a una de estas páginas dinámicas y poder gestionar redirecciones a páginas de error. Por ejemplo podríamos usar el método ",[20,1239,1241],{"className":1240},[406],"validate"," para asegurarnos que el ",[20,1244,1234],{"className":1245},[406]," es válido o tiene un formato que deseamos, por lo que si el parámetro de ruta ",[20,1248,1234],{"className":1249},[406]," no cumple las validaciones que queramos el método validate ejecutará la redirección automática a la página de error.",[110,1252,1257],{"className":1253,"code":1254,"filename":1255,"language":1256,"meta":115,"style":115},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default {\n  name: 'AnimalPage',\n\n  validate({ params }) {\n    const { slug } = params\n\n    return slug && typeof slug === 'string'\n  }\n}\n",".pages\u002Fanimals\u002F_slug.vue","js",[117,1258,1259,1272,1293,1297,1314,1336,1340,1366,1371],{"__ignoreMap":115},[20,1260,1261,1265,1268],{"class":121,"line":122},[20,1262,1264],{"class":1263},"s7zQu","export",[20,1266,1267],{"class":1263}," default",[20,1269,1271],{"class":1270},"sMK4o"," {\n",[20,1273,1274,1278,1280,1283,1287,1290],{"class":121,"line":128},[20,1275,1277],{"class":1276},"swJcz","  name",[20,1279,416],{"class":1270},[20,1281,1282],{"class":1270}," '",[20,1284,1286],{"class":1285},"sfazB","AnimalPage",[20,1288,1289],{"class":1270},"'",[20,1291,1292],{"class":1270},",\n",[20,1294,1295],{"class":121,"line":134},[20,1296,150],{"emptyLinePlaceholder":149},[20,1298,1299,1302,1305,1309,1312],{"class":121,"line":140},[20,1300,1301],{"class":1276},"  validate",[20,1303,1304],{"class":1270},"({",[20,1306,1308],{"class":1307},"sHdIc"," params",[20,1310,1311],{"class":1270}," })",[20,1313,1271],{"class":1270},[20,1315,1316,1320,1323,1327,1330,1333],{"class":121,"line":146},[20,1317,1319],{"class":1318},"spNyl","    const",[20,1321,1322],{"class":1270}," {",[20,1324,1326],{"class":1325},"sTEyZ"," slug",[20,1328,1329],{"class":1270}," }",[20,1331,1332],{"class":1270}," =",[20,1334,1335],{"class":1325}," params\n",[20,1337,1338],{"class":121,"line":153},[20,1339,150],{"emptyLinePlaceholder":149},[20,1341,1342,1345,1347,1350,1353,1355,1358,1360,1363],{"class":121,"line":159},[20,1343,1344],{"class":1263},"    return",[20,1346,1326],{"class":1325},[20,1348,1349],{"class":1270}," &&",[20,1351,1352],{"class":1270}," typeof",[20,1354,1326],{"class":1325},[20,1356,1357],{"class":1270}," ===",[20,1359,1282],{"class":1270},[20,1361,1362],{"class":1285},"string",[20,1364,1365],{"class":1270},"'\n",[20,1367,1368],{"class":121,"line":165},[20,1369,1370],{"class":1270},"  }\n",[20,1372,1373],{"class":121,"line":170},[20,1374,1375],{"class":1270},"}\n",[16,1377,1378],{},"Esta validación inicial puede ser muy útil para evitar llamadas innecesarias a nuestro backend para validar una ruta que ya podemos identificar como no válida.",[11,1380,1382],{"id":1381},"generando-las-rutas-dinámicas","Generando las rutas dinámicas",[16,1384,1385,1386,1390,1391,47],{},"Es posible que ya tengamos montado nuestro sistema con una gran cantidad de páginas de animales pero si ahora tratamos de desplegar nuestro sitio web en nuestro hosting vamos a observar que todas las rutas dinámicas dan error y nos redirigen a la página de\n",[20,1387,1389],{"className":1388},[406],"404",". Esto ocurre porque si bien hemos construido y definido nuestro sistema de rutas en tiempo de ejecución, no hemos definido cómo van a generarse estas páginas y por lo tanto no se han creado al ejecutar nuestro proceso de ",[20,1392,1394],{"className":1393},[406],"build",[16,1396,1397,1398,1402,1403,1407,1408,1412,1413,1417,1418,47],{},"Si tenemos un sitio web estático podemos ver que al ejecutar el comando ",[20,1399,1401],{"className":1400},[406],"nuxt generate"," se crea la página ",[20,1404,1406],{"className":1405},[23],"animals"," pero no las páginas dinámicas y como cada página debe tener su ",[20,1409,1411],{"className":1410},[406],"bundle"," generado en el directorio (por defecto) ",[20,1414,1416],{"className":1415},[23],"\u002Fdist",", todo lo que no esté aquí dará como resultado una redirección a la página ",[20,1419,1389],{"className":1420},[406],[16,1422,1423,1424,1428],{},"Para solucionar este problema vamos a indicar que en el proceso de generación de nuestro sitio se incluyan todas estas rutas, cosa que debemos indicar porque Nuxt no puede saber cuántos animales tenemos en nuestra base de datos o gestor de contenidos, de modo que vamos a editar el fichero ",[20,1425,1427],{"className":1426},[23],"nuxt.config.js"," y a definir nuestras rutas. Lo primero es crear una función que se va a encargar de consultar las rutas disponibles en nuestra base de datos o gestor de contenido, la cual podemos ubicar en el mismo fichero o extraerla a un fichero de utilidades e importarla:",[110,1430,1433],{"className":1253,"code":1431,"filename":1432,"language":1256,"meta":115,"style":115},"async function _getRoutes() {\n  const response = await fetch('https:\u002F\u002Fwww.fakeapi.com\u002Fanimals', {\n    method: 'GET'\n  })\n  \u002F\u002F ['lion', 'dog']\n  const animalsList = await response.json()\n  const animalsPaths = []\n\n  if (Array.isArray(animalsList)) {\n    animalsList.forEach((animalPath) => {\n      animalsPaths.push(`\u002Fanimals\u002F${animalPath}`)\n    })\n  }\n\n  return animalsPaths\n}\n","JS",[117,1434,1435,1452,1483,1497,1505,1511,1532,1544,1548,1575,1600,1628,1635,1639,1643,1651],{"__ignoreMap":115},[20,1436,1437,1440,1443,1447,1450],{"class":121,"line":122},[20,1438,1439],{"class":1318},"async",[20,1441,1442],{"class":1318}," function",[20,1444,1446],{"class":1445},"s2Zo4"," _getRoutes",[20,1448,1449],{"class":1270},"()",[20,1451,1271],{"class":1270},[20,1453,1454,1457,1460,1462,1465,1468,1471,1473,1476,1478,1481],{"class":121,"line":128},[20,1455,1456],{"class":1318},"  const",[20,1458,1459],{"class":1325}," response",[20,1461,1332],{"class":1270},[20,1463,1464],{"class":1263}," await",[20,1466,1467],{"class":1445}," fetch",[20,1469,1470],{"class":1276},"(",[20,1472,1289],{"class":1270},[20,1474,1475],{"class":1285},"https:\u002F\u002Fwww.fakeapi.com\u002Fanimals",[20,1477,1289],{"class":1270},[20,1479,1480],{"class":1270},",",[20,1482,1271],{"class":1270},[20,1484,1485,1488,1490,1492,1495],{"class":121,"line":134},[20,1486,1487],{"class":1276},"    method",[20,1489,416],{"class":1270},[20,1491,1282],{"class":1270},[20,1493,1494],{"class":1285},"GET",[20,1496,1365],{"class":1270},[20,1498,1499,1502],{"class":121,"line":140},[20,1500,1501],{"class":1270},"  }",[20,1503,1504],{"class":1276},")\n",[20,1506,1507],{"class":121,"line":146},[20,1508,1510],{"class":1509},"sHwdD","  \u002F\u002F ['lion', 'dog']\n",[20,1512,1513,1515,1518,1520,1522,1524,1526,1529],{"class":121,"line":153},[20,1514,1456],{"class":1318},[20,1516,1517],{"class":1325}," animalsList",[20,1519,1332],{"class":1270},[20,1521,1464],{"class":1263},[20,1523,1459],{"class":1325},[20,1525,47],{"class":1270},[20,1527,1528],{"class":1445},"json",[20,1530,1531],{"class":1276},"()\n",[20,1533,1534,1536,1539,1541],{"class":121,"line":159},[20,1535,1456],{"class":1318},[20,1537,1538],{"class":1325}," animalsPaths",[20,1540,1332],{"class":1270},[20,1542,1543],{"class":1276}," []\n",[20,1545,1546],{"class":121,"line":165},[20,1547,150],{"emptyLinePlaceholder":149},[20,1549,1550,1553,1556,1559,1561,1564,1566,1569,1572],{"class":121,"line":170},[20,1551,1552],{"class":1263},"  if",[20,1554,1555],{"class":1276}," (",[20,1557,1558],{"class":1325},"Array",[20,1560,47],{"class":1270},[20,1562,1563],{"class":1445},"isArray",[20,1565,1470],{"class":1276},[20,1567,1568],{"class":1325},"animalsList",[20,1570,1571],{"class":1276},")) ",[20,1573,1574],{"class":1270},"{\n",[20,1576,1577,1580,1582,1585,1587,1589,1592,1595,1598],{"class":121,"line":176},[20,1578,1579],{"class":1325},"    animalsList",[20,1581,47],{"class":1270},[20,1583,1584],{"class":1445},"forEach",[20,1586,1470],{"class":1276},[20,1588,1470],{"class":1270},[20,1590,1591],{"class":1307},"animalPath",[20,1593,1594],{"class":1270},")",[20,1596,1597],{"class":1318}," =>",[20,1599,1271],{"class":1270},[20,1601,1602,1605,1607,1610,1612,1615,1618,1621,1623,1626],{"class":121,"line":182},[20,1603,1604],{"class":1325},"      animalsPaths",[20,1606,47],{"class":1270},[20,1608,1609],{"class":1445},"push",[20,1611,1470],{"class":1276},[20,1613,1614],{"class":1270},"`",[20,1616,1617],{"class":1285},"\u002Fanimals\u002F",[20,1619,1620],{"class":1270},"${",[20,1622,1591],{"class":1325},[20,1624,1625],{"class":1270},"}`",[20,1627,1504],{"class":1276},[20,1629,1630,1633],{"class":121,"line":188},[20,1631,1632],{"class":1270},"    }",[20,1634,1504],{"class":1276},[20,1636,1637],{"class":121,"line":194},[20,1638,1370],{"class":1270},[20,1640,1641],{"class":121,"line":199},[20,1642,150],{"emptyLinePlaceholder":149},[20,1644,1645,1648],{"class":121,"line":205},[20,1646,1647],{"class":1263},"  return",[20,1649,1650],{"class":1325}," animalsPaths\n",[20,1652,1653],{"class":121,"line":211},[20,1654,1375],{"class":1270},[83,1656,1657,1660],{},[86,1658,1659],{},"Asumimos que existe una API llamada \"FakeAPI\" que nos va a devolver un listado de rutas de animales. Seguramente nuestro sistema nos devuelva otra estructura pero creo que este ejemplo es sencillo para entender lo que debemos hacer",[86,1661,1662,1663,47],{},"Construimos la estructura de rutas relativas y la devolvemos en un ",[20,1664,1558],{"className":1665},[406],[16,1667,1668],{},"Lo que nos dará un resultado como este:",[110,1670,1673],{"className":1253,"code":1671,"filename":1672,"language":1256,"meta":115,"style":115},"[\n  '\u002Fanimals\u002Flion',\n  '\u002Fanimals\u002Fdog'\n]\n","JS Array",[117,1674,1675,1680,1692,1701],{"__ignoreMap":115},[20,1676,1677],{"class":121,"line":122},[20,1678,1679],{"class":1325},"[\n",[20,1681,1682,1685,1688,1690],{"class":121,"line":128},[20,1683,1684],{"class":1270},"  '",[20,1686,1687],{"class":1285},"\u002Fanimals\u002Flion",[20,1689,1289],{"class":1270},[20,1691,1292],{"class":1270},[20,1693,1694,1696,1699],{"class":121,"line":134},[20,1695,1684],{"class":1270},[20,1697,1698],{"class":1285},"\u002Fanimals\u002Fdog",[20,1700,1365],{"class":1270},[20,1702,1703],{"class":121,"line":140},[20,1704,1705],{"class":1325},"]\n",[16,1707,1708,1709,1713,1714,1718,1719,416],{},"Ahora que tenemos los ",[20,1710,1712],{"className":1711},[406],"paths"," de nuestras rutas dinámicas podemos editar el parámetro ",[20,1715,1717],{"className":1716},[406],"generate"," invocando a la función ",[20,1720,1722],{"className":1721},[406],"_getRoutes()",[110,1724,1726],{"className":1253,"code":1725,"filename":1427,"language":1256,"meta":115,"style":115},"{\n  generate: {\n    fallback: true,\n    async routes() {\n      const routes = await _getRoutes($content)\n\n      return routes\n    }\n  }\n}\n",[117,1727,1728,1732,1742,1755,1768,1788,1792,1800,1805,1809],{"__ignoreMap":115},[20,1729,1730],{"class":121,"line":122},[20,1731,1574],{"class":1270},[20,1733,1734,1738,1740],{"class":121,"line":128},[20,1735,1737],{"class":1736},"sBMFI","  generate",[20,1739,416],{"class":1270},[20,1741,1271],{"class":1270},[20,1743,1744,1747,1749,1753],{"class":121,"line":134},[20,1745,1746],{"class":1736},"    fallback",[20,1748,416],{"class":1270},[20,1750,1752],{"class":1751},"sfNiH"," true",[20,1754,1292],{"class":1270},[20,1756,1757,1760,1763,1766],{"class":121,"line":140},[20,1758,1759],{"class":1325},"    async",[20,1761,1762],{"class":1445}," routes",[20,1764,1765],{"class":1276},"() ",[20,1767,1574],{"class":1270},[20,1769,1770,1773,1775,1777,1779,1781,1783,1786],{"class":121,"line":146},[20,1771,1772],{"class":1318},"      const",[20,1774,1762],{"class":1325},[20,1776,1332],{"class":1270},[20,1778,1464],{"class":1263},[20,1780,1446],{"class":1445},[20,1782,1470],{"class":1276},[20,1784,1785],{"class":1325},"$content",[20,1787,1504],{"class":1276},[20,1789,1790],{"class":121,"line":153},[20,1791,150],{"emptyLinePlaceholder":149},[20,1793,1794,1797],{"class":121,"line":159},[20,1795,1796],{"class":1263},"      return",[20,1798,1799],{"class":1325}," routes\n",[20,1801,1802],{"class":121,"line":165},[20,1803,1804],{"class":1270},"    }\n",[20,1806,1807],{"class":121,"line":170},[20,1808,1370],{"class":1270},[20,1810,1811],{"class":121,"line":176},[20,1812,1375],{"class":1270},[16,1814,1815,1816,1819],{},"De esta forma cuando ejecutemos de nuevo el comando ",[20,1817,1401],{"className":1818},[406]," se van a generar todas las rutas dinámicas que hemos obtenido de nuestra base de datos o gestor de contenidos.",[11,1821,1823],{"id":1822},"consideraciones","Consideraciones",[16,1825,1826],{},"Aunque he tratado de poner un ejemplo muy simple, es importante tener en cuenta que este sistema de generación nos puede ayudar a realizar muchos tipos de validaciones. Por ejemplo nuestro sistema de backend podría indicarnos que una ruta está temporalmente inactiva mediante un atributo de cada ruta de animales y podríamos excluirla de la generación.",[16,1828,1829],{},"Hay muchos casos de uso a los que nos enfrentaremos a la hora de construir el routing de nuestra aplicación pero con estos casos básicos seguro que podrás entender el cómo abordarlos.",[16,1831,1832,1833,1837,1838,1841,1842,416],{},"Si estás utilizando el módulo ",[20,1834,1836],{"className":1835},[406],"@nuxt-content"," para crear tus páginas de contenido puedes utilizar su API para configurar la generación de rutas. Sólo tienes que editar la función ",[20,1839,1722],{"className":1840},[406]," para que reciba la referencia al módulo ",[20,1843,1785],{"className":1844},[406],[110,1846,1848],{"className":1253,"code":1847,"filename":1432,"language":1256,"meta":115,"style":115},"async function _getRoutes($content) {\n  const animalsList = await $content('animals')\n    .fetch()\n    .catch(() => {\n      return []\n    })\n  const animalsPaths = animalsList.map((item) => item.path)\n\n  return animalsPaths\n}\n",[117,1849,1850,1866,1889,1899,1914,1920,1926,1962,1966,1972],{"__ignoreMap":115},[20,1851,1852,1854,1856,1858,1860,1862,1864],{"class":121,"line":122},[20,1853,1439],{"class":1318},[20,1855,1442],{"class":1318},[20,1857,1446],{"class":1445},[20,1859,1470],{"class":1270},[20,1861,1785],{"class":1307},[20,1863,1594],{"class":1270},[20,1865,1271],{"class":1270},[20,1867,1868,1870,1872,1874,1876,1879,1881,1883,1885,1887],{"class":121,"line":128},[20,1869,1456],{"class":1318},[20,1871,1517],{"class":1325},[20,1873,1332],{"class":1270},[20,1875,1464],{"class":1263},[20,1877,1878],{"class":1445}," $content",[20,1880,1470],{"class":1276},[20,1882,1289],{"class":1270},[20,1884,1406],{"class":1285},[20,1886,1289],{"class":1270},[20,1888,1504],{"class":1276},[20,1890,1891,1894,1897],{"class":121,"line":134},[20,1892,1893],{"class":1270},"    .",[20,1895,1896],{"class":1445},"fetch",[20,1898,1531],{"class":1276},[20,1900,1901,1903,1906,1908,1910,1912],{"class":121,"line":140},[20,1902,1893],{"class":1270},[20,1904,1905],{"class":1445},"catch",[20,1907,1470],{"class":1276},[20,1909,1449],{"class":1270},[20,1911,1597],{"class":1318},[20,1913,1271],{"class":1270},[20,1915,1916,1918],{"class":121,"line":146},[20,1917,1796],{"class":1263},[20,1919,1543],{"class":1276},[20,1921,1922,1924],{"class":121,"line":153},[20,1923,1632],{"class":1270},[20,1925,1504],{"class":1276},[20,1927,1928,1930,1932,1934,1936,1938,1941,1943,1945,1948,1950,1952,1955,1957,1960],{"class":121,"line":159},[20,1929,1456],{"class":1318},[20,1931,1538],{"class":1325},[20,1933,1332],{"class":1270},[20,1935,1517],{"class":1325},[20,1937,47],{"class":1270},[20,1939,1940],{"class":1445},"map",[20,1942,1470],{"class":1276},[20,1944,1470],{"class":1270},[20,1946,1947],{"class":1307},"item",[20,1949,1594],{"class":1270},[20,1951,1597],{"class":1318},[20,1953,1954],{"class":1325}," item",[20,1956,47],{"class":1270},[20,1958,1959],{"class":1325},"path",[20,1961,1504],{"class":1276},[20,1963,1964],{"class":121,"line":165},[20,1965,150],{"emptyLinePlaceholder":149},[20,1967,1968,1970],{"class":121,"line":170},[20,1969,1647],{"class":1263},[20,1971,1650],{"class":1325},[20,1973,1974],{"class":121,"line":176},[20,1975,1375],{"class":1270},[16,1977,1978,1981,1982,47],{},[60,1979,1980],{},"NOTA",": Suponiendo que los ficheros están en el directorio ",[20,1983,1985],{"className":1984},[23],".\u002Fcontent\u002Fanimals",[16,1987,1988,1989,1992],{},"Y para terminar modificaríamos el fichero ",[20,1990,1427],{"className":1991},[23]," de la siguiente forma:",[110,1994,1996],{"className":1253,"code":1995,"filename":1427,"language":1256,"meta":115,"style":115},"{\n  generate: {\n    fallback: true,\n    async routes() {\n      const { $content } = require('@nuxt\u002Fcontent')\n      const routes = await _getRoutes($content)\n\n      return routes\n    }\n  }\n}\n",[117,1997,1998,2002,2010,2020,2030,2056,2074,2078,2084,2088,2092],{"__ignoreMap":115},[20,1999,2000],{"class":121,"line":122},[20,2001,1574],{"class":1270},[20,2003,2004,2006,2008],{"class":121,"line":128},[20,2005,1737],{"class":1736},[20,2007,416],{"class":1270},[20,2009,1271],{"class":1270},[20,2011,2012,2014,2016,2018],{"class":121,"line":134},[20,2013,1746],{"class":1736},[20,2015,416],{"class":1270},[20,2017,1752],{"class":1751},[20,2019,1292],{"class":1270},[20,2021,2022,2024,2026,2028],{"class":121,"line":140},[20,2023,1759],{"class":1325},[20,2025,1762],{"class":1445},[20,2027,1765],{"class":1276},[20,2029,1574],{"class":1270},[20,2031,2032,2034,2036,2038,2040,2042,2045,2047,2049,2052,2054],{"class":121,"line":146},[20,2033,1772],{"class":1318},[20,2035,1322],{"class":1270},[20,2037,1878],{"class":1325},[20,2039,1329],{"class":1270},[20,2041,1332],{"class":1270},[20,2043,2044],{"class":1445}," require",[20,2046,1470],{"class":1276},[20,2048,1289],{"class":1270},[20,2050,2051],{"class":1285},"@nuxt\u002Fcontent",[20,2053,1289],{"class":1270},[20,2055,1504],{"class":1276},[20,2057,2058,2060,2062,2064,2066,2068,2070,2072],{"class":121,"line":153},[20,2059,1772],{"class":1318},[20,2061,1762],{"class":1325},[20,2063,1332],{"class":1270},[20,2065,1464],{"class":1263},[20,2067,1446],{"class":1445},[20,2069,1470],{"class":1276},[20,2071,1785],{"class":1325},[20,2073,1504],{"class":1276},[20,2075,2076],{"class":121,"line":159},[20,2077,150],{"emptyLinePlaceholder":149},[20,2079,2080,2082],{"class":121,"line":165},[20,2081,1796],{"class":1263},[20,2083,1799],{"class":1325},[20,2085,2086],{"class":121,"line":170},[20,2087,1804],{"class":1270},[20,2089,2090],{"class":121,"line":176},[20,2091,1370],{"class":1270},[20,2093,2094],{"class":121,"line":182},[20,2095,1375],{"class":1270},[865,2097,2098],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":115,"searchDepth":128,"depth":134,"links":2100},[2101,2102,2103,2104],{"id":1145,"depth":128,"text":1146},{"id":1221,"depth":128,"text":1222},{"id":1381,"depth":128,"text":1382},{"id":1822,"depth":128,"text":1823},"2022-08-22","Aprende a gestionar y generar tus rutas dinámicas con Nuxt mediante una simple configuración.","blog\u002Fcoding-ndr",[2109,2110,2111,2112],"nuxt rutas dinamicas","rutas dinamicas","thebyteland rutas dinamicas","byteland rutas dinamicas",{"postTitle":2114},"Gestiona tus rutas dinámicas con Nuxt","\u002Fblog\u002Fgestionar-rutas-dinamicas-nuxt",{"title":1140,"description":2106},"blog\u002Fgestionar-rutas-dinamicas-nuxt",[2119],"Nuxt","Si tienes o quieres montar un sitio web con Nuxt y parte de tus páginas tienen rutas dinámicas puede que hayas encontrado alguna dificultad a la hora de gestionarlas. Te cuento cómo hacerlo de forma sencilla.",[912],"L1tDsHGP0bqy_TEqF483ga-sXQKBSJqZHosI3k3PRGw",{"id":2124,"title":2125,"body":2126,"date":2226,"description":2227,"extension":896,"headerImage":2228,"isActive":149,"keywords":2229,"meta":2235,"navigation":149,"path":2236,"seo":2237,"stem":2238,"subject":2239,"summary":2241,"tags":2242,"__hash__":2244},"blog\u002Fblog\u002Fla-casa-del-dragon.md","La casa del dragón",{"type":8,"value":2127,"toc":2220},[2128,2132,2135,2146,2149,2153,2156,2163,2169,2172,2175,2179,2182,2188,2195,2199,2202],[11,2129,2131],{"id":2130},"el-fiasco-de-juego-de-tronos","El fiasco de Juego de tronos",[16,2133,2134],{},"No quiero hacer leña del árbol caído pero todo el mundo sabe que el final de la serie no fue de los mejores, ya no solo por el guion y el cierre de la trama, también por la nefasta calidad visual del episodio más esperado de todos \"La larga noche\" donde sucedía una batalla sin ningún sentido estratégico y para colmo la mitad de las escenas estaban tan oscuras que no se sabía lo que ocurría.",[16,2136,2137,2138,2141,2142,2145],{},"Pero mucho antes del estreno de la última temporada, que ya no estaba basada en los libros del autor ",[60,2139,2140],{},"George R.R. Martin",", tuvo lugar la publicación de otro libro del mismo autor que narraba ",[60,2143,2144],{},"la historia de Poniente 300 años antes"," de los hechos que conocemos.",[16,2147,2148],{},"Esto tiene relevancia en la trama principal porque el autor retrasó la escritura de los últimos libros de la saga original para terminar \"Fuego y sangre\" (la precuela) y como vivimos en una sociedad impaciente que no puede esperar, la serie original debía terminar con o sin el autor de los libros.",[11,2150,2152],{"id":2151},"sobre-fuego-y-sangre","Sobre Fuego y sangre",[16,2154,2155],{},"En el momento de la publicación del libro, cualquier amante de los libros y la serie hubiera querido leer esta nueva entrega, que nos ambienta en un antiguo Poniente donde la dinastía Targaryen, en todo su esplendor, llegaba al continente para conquistarlo de la mano de Aegon I Targaryen.",[16,2157,2158],{},[2159,2160],"img",{"alt":2161,"src":2162},"Portada de Fuego y Sangre","\u002Fimages\u002Ffuegoysangre.webp",[16,2164,2165,2166,47],{},"Así que compré el libro y la verdad es que lo disfruté mucho, pero no quiero hablar de la historia que cuenta si no de la serie adaptada del libro que ",[60,2167,2168],{},"se va a estrenar en HBO Max el 22 de agosto en España",[16,2170,2171],{},"Según tengo entendido no estará ambientada exactamente en la misma línea temporal que el libro pero no debería ser un problema si se ciñen a los eventos que narra. Me preocupa más el cómo van a abordar esta nueva etapa, sabiendo el descontento de la comunidad con el cierre de la serie hermana.",[16,2173,2174],{},"Espero que hayan aprendido de los errores cometidos y traten con más cariño la mina de oro que tienen entre las manos porque creo que otro fiasco al estilo Juego de Tronos podría jugar muy en contra del futuro de la cadena y la saga.",[11,2176,2178],{"id":2177},"la-nueva-serie","La nueva serie",[16,2180,2181],{},"Al ver el tráiler de La casa del dragón (House of dragon en inglés) no puedo evitar sentir interés por volver a sumergirme en el mundo de Poniente aunque si es verdad que ésta vez veré la nueva serie con cierto recelo pero con la esperanza que esta vez hagan las cosas bien.",[16,2183,2184,2185,416],{},"Si no habéis visto aún nada y queréis echarle un vistazo, os dejo el tráiler desde el canal de Youtube de ",[60,2186,2187],{},"HBO Max España",[935,2189,2190],{},[2191,2192],"byte-embed-video",{"link":2193,"title":2194},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FoBFtJUWuGFI","Trailer en español de la Casa del Dragón",[11,2196,2198],{"id":2197},"dónde-comprar-el-libro-fuego-y-sangre","¿Dónde comprar el libro Fuego y sangre?",[16,2200,2201],{},"En mi caso yo lo compré por Amazon, la edición de tapa dura porque me gusta que los libros sean robustos (Ver imagen de la portada), pero seguramente está disponible ya en muchas librerías. Sí te interesa esta edición o la de tapa blanda puedes comprarlas a través de los siguientes enlaces en Amazon:",[83,2203,2204,2212],{},[86,2205,2206,2207],{},"Tapa dura: ",[76,2208,2209],{"href":2209,"rel":2210,"title":2211},"https:\u002F\u002Famzn.to\u002F3Px6kvO",[80],"Comprar Fuego y sangre (tapa dura) en Amazon",[86,2213,2214,2215],{},"Tapa blanda: ",[76,2216,2217],{"href":2217,"rel":2218,"title":2219},"https:\u002F\u002Famzn.to\u002F3Cen8EI",[80],"Comprar Fuego y sangre (tapa blanda) en Amazon",{"title":115,"searchDepth":128,"depth":134,"links":2221},[2222,2223,2224,2225],{"id":2130,"depth":128,"text":2131},{"id":2151,"depth":128,"text":2152},{"id":2177,"depth":128,"text":2178},{"id":2197,"depth":128,"text":2198},"2022-08-18","Ya falta poco para el estreno del spin-off de Juego de tronos. Hablemos un poco de esta nueva serie.","blog\u002Fhod",[2230,2231,2232,2233,2234],"la casa del dragon","house of dragon","houseofdragon","hbo casa del dragon","juego de tronos",{"postTitle":2125},"\u002Fblog\u002Fla-casa-del-dragon",{"title":2125,"description":2227},"blog\u002Fla-casa-del-dragon",[2240],"Series","Pronto se estrenará la nueva serie ambientada en el universo de Juego de tronos: La casa del dragón. Nos cuenta la historia de Poniente cientos de años antes de los acontecimientos que conocemos pero... ¿Estará a la altura?",[2243],"Ocio","8fgpmCNzl4rD63co5pxUg1TmfckpApCNRswssu2nimc",{"id":2246,"title":2247,"body":2248,"date":2496,"description":2497,"extension":896,"headerImage":2498,"isActive":149,"keywords":2499,"meta":2503,"navigation":149,"path":2505,"seo":2506,"stem":2507,"subject":2508,"summary":2509,"tags":2510,"__hash__":2511},"blog\u002Fblog\u002Fel-reclutamiento-it-en-decadencia.md","El reclutamiento IT en decadencia",{"type":8,"value":2249,"toc":2488},[2250,2254,2257,2264,2271,2274,2281,2285,2288,2338,2342,2349,2363,2367,2374,2380,2387,2390,2403,2406,2430,2437,2444,2448,2451,2454,2457,2460,2463,2466,2468,2478,2485],[11,2251,2253],{"id":2252},"cómo-hemos-cambiado","Cómo hemos cambiado...",[16,2255,2256],{},"Aún recuerdo cómo nos vendían que iba ser el sector laboral: Prácticamente suplicando por un trabajo de dudosa calidad, sueldos mediocres y teniendo que aguantar a los típicos \"jefes\" gritándote y calendando la silla mientras los trabajadores sacan su empresa adelante.",[16,2258,2259,2260,2263],{},"Lo cierto es que mi experiencia laboral no ha sido tan traumática porque he tenido la suerte de trabajar, en la mayoría de los casos, con personas conscientes de su trabajo, puesto, responsabilidades y con una ética laboral decente. Pero eso no quita el hecho que antes de la pandemia que nos ha hecho replantearnos tantas cosas, las empresas \"",[60,2261,2262],{},"dinosaurio","\" estaban ocultas y se mezclaban entre las empresas que realmente están en la ola del avance tecnológico.",[16,2265,2266,2267,2270],{},"Esta pequeña introducción un tanto dramática viene al caso porque ",[60,2268,2269],{},"un gran reflejo de las empresas son sus procesos de selección",". Venimos de una época donde en un proceso de selección parecía que ibas a competir contra miles de personas y tenías que ir con precaución por cada palabra que decías, cada impresión que dabas y rezar para que tras una semanas de reflexión por parte de las personas a cargo del proceso, se dignaran a contestarte. Venimos de una sociedad donde calentar la silla es mejor que trabajar y tener buena productividad, donde la proactividad laboral se mide por el número de horas extra impagadas que realizabas en lugar de los aportes reales que hacías en tu horario laboral.",[16,2272,2273],{},"Y en todos estos aspectos el sector tecnológico ha jugado un gran papel para luchar y cambiar las costumbres, para cambiar la forma de trabajar, haciéndonos valer cada vez más y dando a entender a las empresas que no sólo estamos trabajando por un salario y que hay ciertas reglas laborales que éstas incumplían impunemente que ahora deben cumplirse.",[16,2275,2276,2277,2280],{},"Algo que se ha hecho notar es que hemos conseguido cambiar los procesos de selección. ",[60,2278,2279],{},"Donde antes eran en una sola dirección, ahora son bidireccionales, los candidatos entrevistan a la empresa",". Queremos saber no solo cuánto vamos a ganar, económicamente hablando, sino para quien trabajaremos, quienes serán parte de nuestro equipo, qué productos vamos a sacar adelante, qué valores éticos y sociales tiene la empresa.",[11,2282,2284],{"id":2283},"los-problemas-de-los-procesos-de-selección","Los problemas de los procesos de selección",[16,2286,2287],{},"Aún veo día a día empresas quejándose porque no encuentran personas para cubrir sus puestos tecnológicos. Y cuando miro un poco más en detalle y busco información sobre esas empresas siempre encuentro los mismos patrones:",[83,2289,2290,2296,2302,2308,2314,2320,2326,2332],{},[86,2291,2292,2295],{},[60,2293,2294],{},"Ofertas de empleo sin información relevante",": Todas trabajan para un cliente importante y líder en su sector. ¡Vaya! Qué novedad. Es que lo contrario sería como si yo voy a un proceso de selección y les digo que programar no se me da muy allá, que soy más de ver Netflix. ¿Y en su sector? ¿Qué sector? Toda esa información es de vital importancia porque queremos saber para quién vamos a trabajar.",[86,2297,2298,2301],{},[60,2299,2300],{},"Procesos de selección largos",": Todavía siguen confiando en procesos de selección que se alargan hasta los dos o tres meses. ¡Hay que espabilar! Si tardas dos semanas en revisar las candidaturas, otra en contestar y todo eso para realizar una primera entrevista nadie va a querer esperar tanto tiempo. Y no es excusa lo de que hay un gran número de aplicaciones al puesto en cuestión, porque hay que aprender a filtrar y para filtrar lo primero es que tu oferta sea clara y con toda la información posible.",[86,2303,2304,2307],{},[60,2305,2306],{},"Descripción técnica",": Si una empresa no es capaz de elaborar una descripción técnica del puesto a cubrir, que indique las tecnologías que van a usarse, metodologías de trabajo, lenguajes de programación (Sin confundir Java y Javascript), sin saber si realmente necesitan un puesto de frontend, backend o devops; si realmente no saben eso: Están yendo a ciegas. Debes saber qué necesita tu departamento IT o tu cliente y tu personal de reclutamiento debe conocer los diferentes roles, de verdad que es algo vital para cubrir una vacante.",[86,2309,2310,2313],{},[60,2311,2312],{},"Salario según valía",": Creo que es lo más insultante que veo en una oferta de trabajo. ¿Quién va a decidir nuestra valía? ¿Una persona que ni si quiera distingue entre lenguajes de programación? Es más, en la mayoría de casos ni si quiera saben qué es programar. Estudiad el mercado, y decidid en base a ello y al proyecto para el que vais a contratar a alguien qué perfil buscáis, concretad y sed claros, las bandas salariales según los perfiles no son ningún misterio.",[86,2315,2316,2319],{},[60,2317,2318],{},"Salarios bajos",": A colación de lo anterior, cuando no las empresas no han hecho un buen estudio de perfiles y bandas salariales suelen poner rangos salariales que no concuerdan con el perfil, y sí, aunque parezca mentira, nadie va a bajarse el salario a la mitad para trabajar en \"Una importante empresa líder en su sector\". Si vemos los requisitos de los puestos y es un listado más grande que nuestras pantallas pero el salario no da ni para pagar el alquiler, os descartamos instantáneamente.",[86,2321,2322,2325],{},[60,2323,2324],{},"Falta de profesionalidad",": Normalmente las empresas quieren a los candidatos ideales, pero para encontrarlos los buscan con personal no preparado, sin conocimientos del sector (Sí, ese sector para el que la empresa o cliente es líder), por no hablar del trato humano. Parece que hemos perdido completamente la educación en muchos casos. Y todo esto tiene solución, bien lo saben las empresas que han invertido en formar a su personal de reclutamiento para el sector IT.",[86,2327,2328,2331],{},[60,2329,2330],{},"Localización",": Este es un punto que ha tomado especial relevancia respecto a la época pre pandemia, pues ahora que sabemos que somos perfectamente capaces de desarrollar nuestro trabajo con más calidad y comodidad en un lugar de trabajo que elijamos en lugar de una oficina para todo el mundo... Es un factor importante a tener en cuenta. Lejos ha quedado el presentismo y calentamiento de silla mientras unos trabajan y otros hacen que trabajan. Esto no quiere decir que todos los trabajos tengan que ser presenciales, remotos o híbridos (Presenciales enmascarados) , más bien indica que las empresas deben adaptarse al cambio y entender que hay varias formas de entender el concepto de oficina y al igual que nunca llueve a gusto de todos, ninguna oficina será cómoda para todos sus trabajadores.",[86,2333,2334,2337],{},[60,2335,2336],{},"Otros beneficios",": La red está llena de chistes, memes y demás escenas caricaturescas y no es un tema con el que me quiera explayar pero... Fruta fresca en la oficina por la que tienes que luchar no es un beneficio al igual que buen ambiente laboral no es un beneficio si no algo que si no tienes deberías plantearte qué está pasando. Si la oferta indica beneficios extra... Seamos realistas y honestos porque nadie va a ir a tu empresa por la fruta.",[11,2339,2341],{"id":2340},"connotaciones-negativas-de-los-procesos-anticuados","Connotaciones negativas de los procesos anticuados",[16,2343,2344,2345,2348],{},"Tal vez he sido un poco sarcástico en los puntos anteriores, pero es que es realmente ridículo ver lo mismo en todas las ofertas y oír las mismas quejas. ",[60,2346,2347],{},"Si esperas distintos resultados tendrás que cambiar algo",", las ofertas de hace 20 años no van a ayudarte a encontrar el mejor talento.",[16,2350,2351,2352,33,2355,2358,2359,2362],{},"Cuando veo una oferta de estas realmente me están dando a entender que la empresa que tiene la vacante ",[60,2353,2354],{},"no confía en sus empleados",[60,2356,2357],{},"no se esfuerza en encontrar buenos profesionales"," si no que va a ofrecer un salario mínimo y las condiciones más bajas y básicas, da muy mala primera impresión. Si ni si quiera se ha definido que rol debe tener la persona que debe cubrir el puesto o si el personal de reclutamiento me contacta ofreciendo un puesto para un rol que no es el mío, me están indicando una ",[60,2360,2361],{},"gran falta de profesionalidad",". Por un lado por desconocimiento básico de roles y necesidades del puesto y por otro porque no se han tomado ni dos minutos para estudiar mi perfil.",[11,2364,2366],{"id":2365},"empleo-en-redes-sociales","Empleo en redes sociales",[16,2368,2369,2370,2373],{},"Es muy común utilizar algún tipo de red social de empleo tanto por empresas como por profesionales y seguramente ",[60,2371,2372],{},"Linkedin"," sea la más conocida en la actualidad.",[16,2375,2376,2377,47],{},"Personalmente trato de contestar a todos los mensajes de personal de reclutamiento que llegan, y suelen ser muchos, pero hay una práctica que es muy molesta y que generalmente hace que los profesionales descartemos no solo la oferta si no a la misma empresa que nos contacta, esta práctica es ",[60,2378,2379],{},"hacernos perder el tiempo innecesariamente",[16,2381,2382,2383,2386],{},"Hay algo de lo que creo que muchas personas del sector de reclutamiento no son conscientes y es que mientras que nos contactan porque es su trabajo, ",[60,2384,2385],{},"los profesionales no trabajamos respondiendo mensajes ni tenemos la obligación de hacerlo",", por lo que cuando veo esas quejas de personal de reclutamiento diciendo que somos maleducados por no responder, me hierve un poco la sangre, no voy a mentir, pero insisto, trato de contestar siempre porque creo que es como cuando te saludan por la calle, devuelves el saludo sin más.",[16,2388,2389],{},"Y son estos primeras tomas de contacto las que hacen perder muchos potenciales candidatos a las empresas, usando plantillas como esta:",[972,2391,2392],{},[975,2393,2394,2397,2400],{},[16,2395,2396],{},"Hola Pepito, He visto tu perfil de backend y me parece que encajarías perfectamente en un proyecto para un importante cliente líder en su sector.",[16,2398,2399],{},"Mándame tu CV actualizado y teléfono y te llamo para contarte más detalles.",[16,2401,2402],{},"Un saludo.",[16,2404,2405],{},"¿Qué pasa con esta plantilla?",[83,2407,2408,2411,2414,2417,2420,2423],{},[86,2409,2410],{},"Pues que muchas veces ni cambian el Pepito, y no, no sirve lo de me confundí porque son muchos mensajes",[86,2412,2413],{},"No soy desarrollador de backend (Por favor lee mi perfil y especialízate en reclutamiento IT)",[86,2415,2416],{},"¿Cliente secreto líder en su sector otra vez? ¿Cuántos líderes de sector puede haber?",[86,2418,2419],{},"Perdona, que yo te mande ¿Qué? No tengo que mandarte nada, tú me contactas a mí y mi información está en el perfil de la red social, si algo no te encaja o falta información puedes preguntarme con educación, pero ¿Qué son esas exigencias sin conocernos y sin que sea yo el que aplica al puesto?",[86,2421,2422],{},"¿Mi teléfono? No, claro que no. Imagina que le diéramos el teléfono a cada persona que nos contacta y dedicáramos entre 10 minutos y 1 hora (Lo que suelen durar esas llamadas rápidas). Si la oferta estuviera en condiciones tal vez sería indicado decir que si le interesa al profesional, el reclutador está abierto a tener una llamada para entrar en detalles. Pero es mejor hacerle perder el tiempo a las personas sin indicar de qué se trata la oferta, condiciones ni salario.",[86,2424,2425,2426,2429],{},"¿Falta algo no? ¿Dónde está la descripción técnica del puesto? ",[60,2427,2428],{},"Si no das la información más importante, lo que va a distinguir a tu proyecto del resto, no generas interés"," si no todo lo contrario, un fuerte rechazo.",[16,2431,2432,2433,2436],{},"Hay otros pequeños detalles pero las excusas por parte de las empresas son siempre las mismas, es que no podemos dar esa información, mejor por teléfono. ",[60,2434,2435],{},"¡Abrid los ojos!"," Año 2022 ¿De verdad crees que una llamada telefónica es confidencial?",[16,2438,2439,2440,2443],{},"No cuesta nada redactar una oferta, una buena oferta detallada con todos esos puntos de los que hablaba antes, y ni si quiera hay que personalizarla, ",[60,2441,2442],{},"no necesitamos ver nuestro nombre encima, necesitamos ver que sabéis de lo que habláis",", que vuestro proyecto vale la pena y nos genere interés.",[11,2445,2447],{"id":2446},"acaso-todo-está-mal","¿Acaso todo está mal?",[16,2449,2450],{},"Ni mucho menos, dejemos la parte mala atrás y vamos a hablar de lo bueno porque al igual que he tenido muchas experiencias malas he tenido otras realmente gratificantes y por las que sé que todo esto puede mejorar y se puede llegar a crear ciertos estándares de procesos de selección y ofertas que nos ayuden a optimizar los procesos de selección.",[16,2452,2453],{},"Al principio de mi carrera profesional, las entrevistas y contactos con empresas siempre eran un dolor de cabeza, me sacaban de mi zona de confort y me veía en una posición vulnerable, pero la verdad es que a medida que haces entrevistas, contactas con empresas y vas haciendo todos estos procesos parte de esa zona de confort entiendes los beneficios que pueden tener.",[16,2455,2456],{},"En los últimos dos años he tenido entrevistas con profesionales del sector de reclutamiento IT increíbles, personas preparadas con las que puedes tener charlas amenas (Evidentemente no debemos entrar a hablar de bucles y variables), conversaciones de tú a tú en las que realmente se trata de ver el encaje de ambas partes, ya que la empresa tiene un método de trabajo, un equipo y una cultura. Y es esto lo más importante, ese encaje mutuo es lo que va a hacer que la relación laboral dure y tenga éxito. Da igual si soy el mejor programador del mundo (No lo soy) o si es la mejor empresa del mundo (No existe), se debe buscar ese encaje.",[16,2458,2459],{},"Cuando la persona que te entrevista conoce el sector todo fluye, la entrevista se convierte en una charla formal pero amistosa, sin tensiones, en la que puede haber errores por ambas partes pero en la que hay respeto, un respeto que se puede notar por ambas partes.",[16,2461,2462],{},"Y no quiere decir que porque esto se cumpla te vayan a contratar directamente o has encontrado a tu candidato unicornio, ni mucho menos, pero algo tengo claro: Ambas partes van a crecer con esta entrevista y mejorarán.",[16,2464,2465],{},"Lo más curioso es que de estas personas preparadas suelen venir las mejores ofertas, en el sentido de información clara, relevante y que como una buena película te atrapan y te crean la necesidad de saber más. Son ofertas estudiadas que van dirigidas a tu perfil, en las que se puede notar que hay tiempo invertido y no una plantilla básica.",[11,2467,760],{"id":759},[16,2469,2470,2471,2474,2475],{},"No creo que el sector del reclutamiento IT esté cayendo en picado pero si le ",[60,2472,2473],{},"hace falta una reforma, adaptarse al cambio"," porque al igual que los profesionales del sector IT nos vemos obligados a actualizarnos continuamente y seguir estudiando, ",[60,2476,2477],{},"el reclutamiento debe evolucionar.",[16,2479,2480,2481,2484],{},"He entrado poco en detalle sobre el tema salarial, pero debido a que el sector tecnológico puede llevar a cabo su labor en cualquier parte del mundo, ",[60,2482,2483],{},"los países que mejores ofertas económicas pueden dar se suelen llevar el mejor talento",", por lo que si la empresa no está a la altura económicamente, al menos sería interesante tener unos fuertes valores que la distingan del resto.",[16,2486,2487],{},"Y para cerrar, recomiendo tanto ambas partes salir de la zona de confort y realizar muchas entrevistas, aunque sea para conocer el mercado y acostumbrarse a que una entrevista debe ser algo cómodo: Estamos conociendo a alguien y charlando ¡No se ha muerto nadie!",{"title":115,"searchDepth":128,"depth":134,"links":2489},[2490,2491,2492,2493,2494,2495],{"id":2252,"depth":128,"text":2253},{"id":2283,"depth":128,"text":2284},{"id":2340,"depth":128,"text":2341},{"id":2365,"depth":128,"text":2366},{"id":2446,"depth":128,"text":2447},{"id":759,"depth":128,"text":760},"2022-08-17","Estas son las causas por las que el mundo del reclutamiento está mal y necesita un cambio.","blog\u002Freclutamiento",[2500,2501,2502],"reclutamiento IT","reclutamiento thebyteland","reclutamiento IT thebyteland",{"postTitle":2504},"El reclutamiento IT está roto","\u002Fblog\u002Fel-reclutamiento-it-en-decadencia",{"title":2247,"description":2497},"blog\u002Fel-reclutamiento-it-en-decadencia",[],"En los últimos años el sector tecnológico ha crecido hasta hacerse irreconocible sin embargo el mundo del reclutamiento parece haberse estancado. ¿Por qué ocurre esto?",[913],"0kjG2CwEkeJdWAKg65L6Z4W36XyXtWjGFzBfRoesGwg",{"id":2513,"title":2514,"body":2515,"date":3873,"description":3874,"extension":896,"headerImage":3875,"isActive":149,"keywords":3876,"meta":3883,"navigation":149,"path":3885,"seo":3886,"stem":3887,"subject":3888,"summary":3889,"tags":3890,"__hash__":3891},"blog\u002Fblog\u002Foptimiza-tu-web-con-resultados-enriquecidos.md","Optimiza tu web con resultados enriquecidos",{"type":8,"value":2516,"toc":3859},[2517,2519,2522,2525,2528,2532,2544,2547,2554,2558,2561,2565,2579,2584,2587,2684,2687,2709,2713,2716,2721,2842,2856,2976,2988,2995,2999,3013,3350,3357,3368,3372,3375,3409,3413,3416,3419,3431,3435,3443,3509,3512,3515,3784,3788,3800,3803,3809,3816,3841,3845,3848,3856],[11,2518,14],{"id":13},[16,2520,2521],{},"Seguramente ya has trabajado en la semántica web de tu contenido para evitar errores y que contenga páginas fáciles de leer e indexar para los buscadores. Pero podemos ir más allá y optimizar cómo se muestran los resultados de nuestras páginas en los buscadores.",[16,2523,2524],{},"Ya que no hay una única forma de maquetar una página web y hay una infinidad de posibilidades de hacer un mismo contenido, esto radica en que la semántica de un sitio web puede variar mucho respecto a otra con la misma temática, por cuestiones de maquetación y organización del contenido.",[16,2526,2527],{},"Esto hace necesario el que se busque una manera unificada de indicar qué tipo de contenido mostramos en nuestras páginas y cómo está organizado, así como su jerarquía dentro de nuestro sitio web.",[11,2529,2531],{"id":2530},"esquemas-de-datos","Esquemas de datos",[16,2533,2534,2535,2540,2541,47],{},"A través de los esquemas (",[76,2536,2537],{"href":2537,"rel":2538,"title":2539},"https:\u002F\u002Fschema.org\u002F",[80],"Más información sobre esquemas",") podemos organizar y ",[60,2542,2543],{},"clasificar nuestro contenido y definir para cada una de nuestras páginas cuál es el esquema que más le conviene según su contenido",[16,2545,2546],{},"Esto es importante porque hay diferentes tipos de sitios web: Sitios de venta de productos, blogs, sitios para dar opiniones, foros, etc. Clasificar correctamente nuestras páginas puede ayudarnos a que nuestro sitio web tenga una mayor relevancia en los resultados asociados a su contenido.",[16,2548,2549,2550,2553],{},"Una vez que clasificamos nuestras páginas podemos añadir la información de los atributos del esquema asociado. Hay varios formatos pero en este caso vamos a trabajar con ",[60,2551,2552],{},"json\u002Fld"," porque es un formato fácilmente adaptable y versátil que podemos desacoplar del código HTML de nuestras páginas.",[11,2555,2557],{"id":2556},"jerarquía-del-sitio-web","Jerarquía del sitio web",[16,2559,2560],{},"Es importante que tengamos clara la jerarquía de nuestras páginas, ya que seguramente tengamos una página principal de la que dependan otras muchas páginas. Además es posible que estas páginas secundarias tengan a su vez otras páginas en un nivel inferior y no tienen por qué pertenecer al mismo tipo de esquema.",[65,2562,2564],{"id":2563},"página-principal","Página principal",[16,2566,2567,2568,2571,2576,2578],{},"Ya que todas las demás páginas son dependientes de la principal podemos definir que nuestra página principal utilizará el esquema ",[60,2569,2570],{},"WebSite (",[76,2572,2573],{"href":2573,"rel":2574,"title":2575},"https:\u002F\u002Fschema.org\u002FWebSite",[80],"Documentación del esquema WebSite",[60,2577,1594],{}," y según su definición la mayoría de páginas principales podrían encajar en este esquema:",[972,2580,2581],{},[975,2582,2583],{},"\nA WebSite is a set of related web pages and other items typically served from a single web domain and accessible via URLs.\n",[16,2585,2586],{},"Para ello vamos a crear un objeto con formato JSON que incluya los atributos de este esquema:",[110,2588,2592],{"className":2589,"code":2590,"filename":2591,"language":1528,"meta":115,"style":115},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"WebSite\",\n  \"@id\": \"https:\u002F\u002Fexample.com\",\n  \"name\": \"My Website\"\n}\n","JSON",[117,2593,2594,2598,2621,2641,2661,2680],{"__ignoreMap":115},[20,2595,2596],{"class":121,"line":122},[20,2597,1574],{"class":1270},[20,2599,2600,2603,2606,2609,2611,2614,2617,2619],{"class":121,"line":128},[20,2601,2602],{"class":1270},"  \"",[20,2604,2605],{"class":1318},"@context",[20,2607,2608],{"class":1270},"\"",[20,2610,416],{"class":1270},[20,2612,2613],{"class":1270}," \"",[20,2615,2616],{"class":1285},"https:\u002F\u002Fschema.org",[20,2618,2608],{"class":1270},[20,2620,1292],{"class":1270},[20,2622,2623,2625,2628,2630,2632,2634,2637,2639],{"class":121,"line":134},[20,2624,2602],{"class":1270},[20,2626,2627],{"class":1318},"@type",[20,2629,2608],{"class":1270},[20,2631,416],{"class":1270},[20,2633,2613],{"class":1270},[20,2635,2636],{"class":1285},"WebSite",[20,2638,2608],{"class":1270},[20,2640,1292],{"class":1270},[20,2642,2643,2645,2648,2650,2652,2654,2657,2659],{"class":121,"line":140},[20,2644,2602],{"class":1270},[20,2646,2647],{"class":1318},"@id",[20,2649,2608],{"class":1270},[20,2651,416],{"class":1270},[20,2653,2613],{"class":1270},[20,2655,2656],{"class":1285},"https:\u002F\u002Fexample.com",[20,2658,2608],{"class":1270},[20,2660,1292],{"class":1270},[20,2662,2663,2665,2668,2670,2672,2674,2677],{"class":121,"line":146},[20,2664,2602],{"class":1270},[20,2666,2667],{"class":1318},"name",[20,2669,2608],{"class":1270},[20,2671,416],{"class":1270},[20,2673,2613],{"class":1270},[20,2675,2676],{"class":1285},"My Website",[20,2678,2679],{"class":1270},"\"\n",[20,2681,2682],{"class":121,"line":153},[20,2683,1375],{"class":1270},[16,2685,2686],{},"Es sencillo pero veamos que son estos atributos:",[83,2688,2689,2694,2699,2704],{},[86,2690,2691,2693],{},[60,2692,2605],{},": Indica el contexto general de los esquemas que vamos a utilizar en toda la estructura de datos, por lo que será una url que apunte a la página web que contiene todos los esquemas.",[86,2695,2696,2698],{},[60,2697,2627],{},": Nos indica la especificación del esquema, la cual podemos representar con el nombre del esquema que vamos a utilizar.",[86,2700,2701,2703],{},[60,2702,2647],{},": Este será el identificador de nuestra estructura de datos, la url principal de nuestro sitio web.",[86,2705,2706,2708],{},[60,2707,2667],{},": El nombre que le damos a nuestro esquema. En este caso puede ser el nombre de nuestro sitio web por ser la página principal, pero cada esquema debe tener el suyo para identificarlo entre otros esquemas del mismo tipo.",[65,2710,2712],{"id":2711},"páginas-secundarias","Páginas secundarias",[16,2714,2715],{},"Supongamos ahora que tenemos otras páginas secundarias, de las que dependen otras sub páginas, así como una página de contacto, un blog, secciones del blog, una página de productos, etc.",[16,2717,2718,2719,47],{},"Podemos definir un esquema diferente para cada una según se adapte a nuestro contenido. Por ejemplo si tuviéramos una página secundaria que hablara de diferentes tipos de animales y esta a su vez tendría otras páginas para cada tipo de animal, también podríamos utilizar el esquema ",[60,2720,2636],{},[110,2722,2724],{"className":2589,"code":2723,"filename":2591,"language":1528,"meta":115,"style":115},"{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"WebSite\",\n  \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals\",\n  \"name\": \"My Website - Animals\",\n  \"isPartOf\": {\n    \"@id\": \"https:\u002F\u002Fexample.com\"\n  }\n}\n",[117,2725,2726,2730,2748,2766,2785,2804,2817,2834,2838],{"__ignoreMap":115},[20,2727,2728],{"class":121,"line":122},[20,2729,1574],{"class":1270},[20,2731,2732,2734,2736,2738,2740,2742,2744,2746],{"class":121,"line":128},[20,2733,2602],{"class":1270},[20,2735,2605],{"class":1318},[20,2737,2608],{"class":1270},[20,2739,416],{"class":1270},[20,2741,2613],{"class":1270},[20,2743,2616],{"class":1285},[20,2745,2608],{"class":1270},[20,2747,1292],{"class":1270},[20,2749,2750,2752,2754,2756,2758,2760,2762,2764],{"class":121,"line":134},[20,2751,2602],{"class":1270},[20,2753,2627],{"class":1318},[20,2755,2608],{"class":1270},[20,2757,416],{"class":1270},[20,2759,2613],{"class":1270},[20,2761,2636],{"class":1285},[20,2763,2608],{"class":1270},[20,2765,1292],{"class":1270},[20,2767,2768,2770,2772,2774,2776,2778,2781,2783],{"class":121,"line":140},[20,2769,2602],{"class":1270},[20,2771,2647],{"class":1318},[20,2773,2608],{"class":1270},[20,2775,416],{"class":1270},[20,2777,2613],{"class":1270},[20,2779,2780],{"class":1285},"https:\u002F\u002Fexample.com\u002Fanimals",[20,2782,2608],{"class":1270},[20,2784,1292],{"class":1270},[20,2786,2787,2789,2791,2793,2795,2797,2800,2802],{"class":121,"line":146},[20,2788,2602],{"class":1270},[20,2790,2667],{"class":1318},[20,2792,2608],{"class":1270},[20,2794,416],{"class":1270},[20,2796,2613],{"class":1270},[20,2798,2799],{"class":1285},"My Website - Animals",[20,2801,2608],{"class":1270},[20,2803,1292],{"class":1270},[20,2805,2806,2808,2811,2813,2815],{"class":121,"line":153},[20,2807,2602],{"class":1270},[20,2809,2810],{"class":1318},"isPartOf",[20,2812,2608],{"class":1270},[20,2814,416],{"class":1270},[20,2816,1271],{"class":1270},[20,2818,2819,2822,2824,2826,2828,2830,2832],{"class":121,"line":159},[20,2820,2821],{"class":1270},"    \"",[20,2823,2647],{"class":1736},[20,2825,2608],{"class":1270},[20,2827,416],{"class":1270},[20,2829,2613],{"class":1270},[20,2831,2656],{"class":1285},[20,2833,2679],{"class":1270},[20,2835,2836],{"class":121,"line":165},[20,2837,1370],{"class":1270},[20,2839,2840],{"class":121,"line":170},[20,2841,1375],{"class":1270},[16,2843,2844,2845,2848,2853,2855],{},"Pero si por ejemplo esta página fuera un blog sobre animales con diferentes artículos que tratan sobre el mundo animal podríamos elegir el esquema ",[60,2846,2847],{},"Blog(",[76,2849,2850],{"href":2850,"rel":2851,"title":2852},"https:\u002F\u002Fschema.org\u002FBlog",[80],"Documentación del esquema Blog",[60,2854,1594],{}," para definir la página principal del blog de la que dependen los artículos.",[110,2857,2859],{"className":2589,"code":2858,"filename":2591,"language":1528,"meta":115,"style":115},"{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"Blog\",\n  \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002F\",\n  \"name\": \"Amazing Blog about animals\",\n  \"isPartOf\": {\n    \"@id\": \"https:\u002F\u002Fexample.com\"\n  }\n}\n",[117,2860,2861,2865,2883,2902,2921,2940,2952,2968,2972],{"__ignoreMap":115},[20,2862,2863],{"class":121,"line":122},[20,2864,1574],{"class":1270},[20,2866,2867,2869,2871,2873,2875,2877,2879,2881],{"class":121,"line":128},[20,2868,2602],{"class":1270},[20,2870,2605],{"class":1318},[20,2872,2608],{"class":1270},[20,2874,416],{"class":1270},[20,2876,2613],{"class":1270},[20,2878,2616],{"class":1285},[20,2880,2608],{"class":1270},[20,2882,1292],{"class":1270},[20,2884,2885,2887,2889,2891,2893,2895,2898,2900],{"class":121,"line":134},[20,2886,2602],{"class":1270},[20,2888,2627],{"class":1318},[20,2890,2608],{"class":1270},[20,2892,416],{"class":1270},[20,2894,2613],{"class":1270},[20,2896,2897],{"class":1285},"Blog",[20,2899,2608],{"class":1270},[20,2901,1292],{"class":1270},[20,2903,2904,2906,2908,2910,2912,2914,2917,2919],{"class":121,"line":140},[20,2905,2602],{"class":1270},[20,2907,2647],{"class":1318},[20,2909,2608],{"class":1270},[20,2911,416],{"class":1270},[20,2913,2613],{"class":1270},[20,2915,2916],{"class":1285},"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002F",[20,2918,2608],{"class":1270},[20,2920,1292],{"class":1270},[20,2922,2923,2925,2927,2929,2931,2933,2936,2938],{"class":121,"line":146},[20,2924,2602],{"class":1270},[20,2926,2667],{"class":1318},[20,2928,2608],{"class":1270},[20,2930,416],{"class":1270},[20,2932,2613],{"class":1270},[20,2934,2935],{"class":1285},"Amazing Blog about animals",[20,2937,2608],{"class":1270},[20,2939,1292],{"class":1270},[20,2941,2942,2944,2946,2948,2950],{"class":121,"line":153},[20,2943,2602],{"class":1270},[20,2945,2810],{"class":1318},[20,2947,2608],{"class":1270},[20,2949,416],{"class":1270},[20,2951,1271],{"class":1270},[20,2953,2954,2956,2958,2960,2962,2964,2966],{"class":121,"line":159},[20,2955,2821],{"class":1270},[20,2957,2647],{"class":1736},[20,2959,2608],{"class":1270},[20,2961,416],{"class":1270},[20,2963,2613],{"class":1270},[20,2965,2656],{"class":1285},[20,2967,2679],{"class":1270},[20,2969,2970],{"class":121,"line":165},[20,2971,1370],{"class":1270},[20,2973,2974],{"class":121,"line":170},[20,2975,1375],{"class":1270},[16,2977,2978,2979,2983,2984,2987],{},"En ambos casos tenemos un nuevo atributo ",[20,2980,2982],{"className":2981},[406],"@isPartOf"," que nos indica que pertenecen a la página principal y cuyo valor debe ser el mismo que el atributo ",[20,2985,2647],{"className":2986},[406]," del esquema de la página principal.",[16,2989,2990],{},[20,2991,2994],{"className":2992},[2993],"strong-p","Estos son los atributos básicos pero pueden añadirse todos los indicados en la especificación del esquema.",[65,2996,2998],{"id":2997},"páginas-de-artículos-de-blog","Páginas de artículos de blog",[16,3000,3001,3002,3005,3010,3012],{},"Si tenemos artículos asociados a nuestro blog, cada una de estas páginas puede utilizar el esquema ",[60,3003,3004],{},"BlogPosting(",[76,3006,3007],{"href":3007,"rel":3008,"title":3009},"https:\u002F\u002Fschema.org\u002FBlogPosting",[80],"Documentación del esquema BlogPosting",[60,3011,1594],{},", mediante el que podemos aportar datos útiles del artículo como su fecha de creación. contenido, tema dentro del blog, indicar la autoría, etc.",[110,3014,3016],{"className":2589,"code":3015,"filename":2591,"language":1528,"meta":115,"style":115},"{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BlogPosting\",\n  \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002Flions\",\n  \"name\": \"Animal blog - Lions\",\n  \"headline\": \"Lions\",\n  \"isPartOf\": {\n    \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002F\"\n  },\n  \"articleSection\": \"Science\",\n  \"datePublished\": \"2022-01-01\",\n  \"dateCreated\": \"2022-01-01\",\n  \"image\": \"https:\u002F\u002Fexample.com\u002Fimages\u002Fexample.jpg\",\n  \"backstory\": \"Your post summary\",\n  \"creator\": \"Creator name\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"url\": \"https:\u002F\u002Fexample.com\u002Fabout\",\n    \"name\": \"Author name\"\n  }\n}\n",[117,3017,3018,3022,3040,3059,3078,3097,3117,3129,3145,3150,3170,3190,3209,3229,3249,3269,3282,3301,3322,3340,3345],{"__ignoreMap":115},[20,3019,3020],{"class":121,"line":122},[20,3021,1574],{"class":1270},[20,3023,3024,3026,3028,3030,3032,3034,3036,3038],{"class":121,"line":128},[20,3025,2602],{"class":1270},[20,3027,2605],{"class":1318},[20,3029,2608],{"class":1270},[20,3031,416],{"class":1270},[20,3033,2613],{"class":1270},[20,3035,2616],{"class":1285},[20,3037,2608],{"class":1270},[20,3039,1292],{"class":1270},[20,3041,3042,3044,3046,3048,3050,3052,3055,3057],{"class":121,"line":134},[20,3043,2602],{"class":1270},[20,3045,2627],{"class":1318},[20,3047,2608],{"class":1270},[20,3049,416],{"class":1270},[20,3051,2613],{"class":1270},[20,3053,3054],{"class":1285},"BlogPosting",[20,3056,2608],{"class":1270},[20,3058,1292],{"class":1270},[20,3060,3061,3063,3065,3067,3069,3071,3074,3076],{"class":121,"line":140},[20,3062,2602],{"class":1270},[20,3064,2647],{"class":1318},[20,3066,2608],{"class":1270},[20,3068,416],{"class":1270},[20,3070,2613],{"class":1270},[20,3072,3073],{"class":1285},"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002Flions",[20,3075,2608],{"class":1270},[20,3077,1292],{"class":1270},[20,3079,3080,3082,3084,3086,3088,3090,3093,3095],{"class":121,"line":146},[20,3081,2602],{"class":1270},[20,3083,2667],{"class":1318},[20,3085,2608],{"class":1270},[20,3087,416],{"class":1270},[20,3089,2613],{"class":1270},[20,3091,3092],{"class":1285},"Animal blog - Lions",[20,3094,2608],{"class":1270},[20,3096,1292],{"class":1270},[20,3098,3099,3101,3104,3106,3108,3110,3113,3115],{"class":121,"line":153},[20,3100,2602],{"class":1270},[20,3102,3103],{"class":1318},"headline",[20,3105,2608],{"class":1270},[20,3107,416],{"class":1270},[20,3109,2613],{"class":1270},[20,3111,3112],{"class":1285},"Lions",[20,3114,2608],{"class":1270},[20,3116,1292],{"class":1270},[20,3118,3119,3121,3123,3125,3127],{"class":121,"line":159},[20,3120,2602],{"class":1270},[20,3122,2810],{"class":1318},[20,3124,2608],{"class":1270},[20,3126,416],{"class":1270},[20,3128,1271],{"class":1270},[20,3130,3131,3133,3135,3137,3139,3141,3143],{"class":121,"line":165},[20,3132,2821],{"class":1270},[20,3134,2647],{"class":1736},[20,3136,2608],{"class":1270},[20,3138,416],{"class":1270},[20,3140,2613],{"class":1270},[20,3142,2916],{"class":1285},[20,3144,2679],{"class":1270},[20,3146,3147],{"class":121,"line":170},[20,3148,3149],{"class":1270},"  },\n",[20,3151,3152,3154,3157,3159,3161,3163,3166,3168],{"class":121,"line":176},[20,3153,2602],{"class":1270},[20,3155,3156],{"class":1318},"articleSection",[20,3158,2608],{"class":1270},[20,3160,416],{"class":1270},[20,3162,2613],{"class":1270},[20,3164,3165],{"class":1285},"Science",[20,3167,2608],{"class":1270},[20,3169,1292],{"class":1270},[20,3171,3172,3174,3177,3179,3181,3183,3186,3188],{"class":121,"line":182},[20,3173,2602],{"class":1270},[20,3175,3176],{"class":1318},"datePublished",[20,3178,2608],{"class":1270},[20,3180,416],{"class":1270},[20,3182,2613],{"class":1270},[20,3184,3185],{"class":1285},"2022-01-01",[20,3187,2608],{"class":1270},[20,3189,1292],{"class":1270},[20,3191,3192,3194,3197,3199,3201,3203,3205,3207],{"class":121,"line":188},[20,3193,2602],{"class":1270},[20,3195,3196],{"class":1318},"dateCreated",[20,3198,2608],{"class":1270},[20,3200,416],{"class":1270},[20,3202,2613],{"class":1270},[20,3204,3185],{"class":1285},[20,3206,2608],{"class":1270},[20,3208,1292],{"class":1270},[20,3210,3211,3213,3216,3218,3220,3222,3225,3227],{"class":121,"line":194},[20,3212,2602],{"class":1270},[20,3214,3215],{"class":1318},"image",[20,3217,2608],{"class":1270},[20,3219,416],{"class":1270},[20,3221,2613],{"class":1270},[20,3223,3224],{"class":1285},"https:\u002F\u002Fexample.com\u002Fimages\u002Fexample.jpg",[20,3226,2608],{"class":1270},[20,3228,1292],{"class":1270},[20,3230,3231,3233,3236,3238,3240,3242,3245,3247],{"class":121,"line":199},[20,3232,2602],{"class":1270},[20,3234,3235],{"class":1318},"backstory",[20,3237,2608],{"class":1270},[20,3239,416],{"class":1270},[20,3241,2613],{"class":1270},[20,3243,3244],{"class":1285},"Your post summary",[20,3246,2608],{"class":1270},[20,3248,1292],{"class":1270},[20,3250,3251,3253,3256,3258,3260,3262,3265,3267],{"class":121,"line":205},[20,3252,2602],{"class":1270},[20,3254,3255],{"class":1318},"creator",[20,3257,2608],{"class":1270},[20,3259,416],{"class":1270},[20,3261,2613],{"class":1270},[20,3263,3264],{"class":1285},"Creator name",[20,3266,2608],{"class":1270},[20,3268,1292],{"class":1270},[20,3270,3271,3273,3276,3278,3280],{"class":121,"line":211},[20,3272,2602],{"class":1270},[20,3274,3275],{"class":1318},"author",[20,3277,2608],{"class":1270},[20,3279,416],{"class":1270},[20,3281,1271],{"class":1270},[20,3283,3284,3286,3288,3290,3292,3294,3297,3299],{"class":121,"line":217},[20,3285,2821],{"class":1270},[20,3287,2627],{"class":1736},[20,3289,2608],{"class":1270},[20,3291,416],{"class":1270},[20,3293,2613],{"class":1270},[20,3295,3296],{"class":1285},"Person",[20,3298,2608],{"class":1270},[20,3300,1292],{"class":1270},[20,3302,3304,3306,3309,3311,3313,3315,3318,3320],{"class":121,"line":3303},18,[20,3305,2821],{"class":1270},[20,3307,3308],{"class":1736},"url",[20,3310,2608],{"class":1270},[20,3312,416],{"class":1270},[20,3314,2613],{"class":1270},[20,3316,3317],{"class":1285},"https:\u002F\u002Fexample.com\u002Fabout",[20,3319,2608],{"class":1270},[20,3321,1292],{"class":1270},[20,3323,3325,3327,3329,3331,3333,3335,3338],{"class":121,"line":3324},19,[20,3326,2821],{"class":1270},[20,3328,2667],{"class":1736},[20,3330,2608],{"class":1270},[20,3332,416],{"class":1270},[20,3334,2613],{"class":1270},[20,3336,3337],{"class":1285},"Author name",[20,3339,2679],{"class":1270},[20,3341,3343],{"class":121,"line":3342},20,[20,3344,1370],{"class":1270},[20,3346,3348],{"class":121,"line":3347},21,[20,3349,1375],{"class":1270},[16,3351,3352,3353,3356],{},"En este caso el atributo ",[20,3354,2982],{"className":3355},[406]," haría referencia a la página padre, el blog, por lo que la url debe referenciar a la ubicación de la página principal del Blog. Esto se aplica a cualquier subpágina, de forma que poco a poco se va creando la jerarquía de todo el sitio web.",[16,3358,3359,3360,3363,3364,3367],{},"El atributo ",[20,3361,3275],{"className":3362},[406]," puede identificar a la persona que escribió el artículo. Puede ser también un listado de objetos en caso que existan varias personas que hayan creado el artículo, mientras que el atributo ",[20,3365,3308],{"className":3366},[406]," de cada autor puede ser un link a una página que trate del autor, una red social u otro sitio web.",[65,3369,3371],{"id":3370},"otros-tipos-de-páginas","Otros tipos de páginas",[16,3373,3374],{},"Existe una gran variedad de esquemas por lo que siempre deberías buscar el que más se adapte a al contenido de tu página, pero aquí tienes algunos de los más comunes y útiles:",[83,3376,3377,3385,3393,3401],{},[86,3378,3379,3380],{},"Página de contacto: ",[76,3381,3382],{"href":3382,"rel":3383,"title":3384},"https:\u002F\u002Fschema.org\u002FContactPage",[80],"Documentación del esquema ContactPage",[86,3386,3387,3388],{},"Página de preguntas frecuentes: ",[76,3389,3390],{"href":3390,"rel":3391,"title":3392},"https:\u002F\u002Fschema.org\u002FFAQPage",[80],"Documentación del esquema FAQPage",[86,3394,3395,3396],{},"Página de un producto: ",[76,3397,3398],{"href":3398,"rel":3399,"title":3400},"https:\u002F\u002Fschema.org\u002FProduct",[80],"Documentación del esquema Product",[86,3402,3403,3404],{},"Página de tu organización: ",[76,3405,3406],{"href":3406,"rel":3407,"title":3408},"https:\u002F\u002Fschema.org\u002FOrganization",[80],"Documentación del esquema Organization",[11,3410,3412],{"id":3411},"breadcrumbs","Breadcrumbs",[16,3414,3415],{},"También es posible que quieras tener en tus páginas una guía sobre esta jerarquía que has definido, lo que puede ayudar a usuarios y buscadores a entender en qué punto de tu sitio web se encuentran al acceder a una página con varios niveles de profundidad.",[16,3417,3418],{},"Tengo otro artículo sobre cómo crear un componente y su esquema de datos con Vue que puede interesarte:",[935,3420,3425],{"className":3421},[3422,3423,3424],"flex","justify-center","not-byte-content",[3426,3427],"byte-button",{"label":3428,"to":3429,":flat":3430},"Crea tu componente Breadcrumb con Vue","\u002Fblog\u002Fcrea-un-componente-breadcrumb-optimizado-para-seo-con-vue","true",[11,3432,3434],{"id":3433},"integrando-los-esquemas-en-la-web","Integrando los esquemas en la web",[16,3436,3437,3438,3442],{},"Ahora que ya sabemos cómo crear nuestros esquemas sólo falta añadirlos a nuestras páginas. Para ello simplemente vamos a añadir un ",[20,3439,3441],{"className":3440},[406],"script"," con cada uno de los esquemas que tenga nuestra página. Por ejemplo para la página principal añadiríamos el siguiente script:",[110,3444,3448],{"className":3445,"code":3446,"filename":2591,"language":3447,"meta":115,"style":115},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"WebSite\",\n  \"@id\": \"https:\u002F\u002Fexample.com\",\n  \"name\": \"My Website\"\n}\n\u003C\u002Fscript>\n","html",[117,3449,3450,3472,3476,3481,3486,3491,3496,3500],{"__ignoreMap":115},[20,3451,3452,3455,3457,3460,3463,3465,3468,3470],{"class":121,"line":122},[20,3453,3454],{"class":1270},"\u003C",[20,3456,3441],{"class":1276},[20,3458,3459],{"class":1318}," type",[20,3461,3462],{"class":1270},"=",[20,3464,2608],{"class":1270},[20,3466,3467],{"class":1285},"application\u002Fld+json",[20,3469,2608],{"class":1270},[20,3471,137],{"class":1270},[20,3473,3474],{"class":121,"line":128},[20,3475,1574],{"class":1325},[20,3477,3478],{"class":121,"line":134},[20,3479,3480],{"class":1325},"  \"@context\": \"https:\u002F\u002Fschema.org\",\n",[20,3482,3483],{"class":121,"line":140},[20,3484,3485],{"class":1325},"  \"@type\": \"WebSite\",\n",[20,3487,3488],{"class":121,"line":146},[20,3489,3490],{"class":1325},"  \"@id\": \"https:\u002F\u002Fexample.com\",\n",[20,3492,3493],{"class":121,"line":153},[20,3494,3495],{"class":1325},"  \"name\": \"My Website\"\n",[20,3497,3498],{"class":121,"line":159},[20,3499,1375],{"class":1325},[20,3501,3502,3505,3507],{"class":121,"line":165},[20,3503,3504],{"class":1270},"\u003C\u002F",[20,3506,3441],{"class":1276},[20,3508,137],{"class":1270},[16,3510,3511],{},"De esta forma los buscadores y validadores de esquema sabrán que hemos definido nuestro esquema y podrán verificar que los datos son correctos.",[16,3513,3514],{},"Si sumamos los tres ejemplos nos quedaría una importación de scripts de la siguiente forma para la página de un artículo:",[110,3516,3519],{"className":3445,"code":3517,"filename":3518,"language":3447,"meta":115,"style":115},"\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"WebSite\",\n  \"@id\": \"https:\u002F\u002Fexample.com\",\n  \"name\": \"My Website\"\n}\n\u003C\u002Fscript>\n\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"Blog\",\n  \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002F\",\n  \"name\": \"Amazing Blog about animals\",\n  \"isPartOf\": {\n    \"@id\": \"https:\u002F\u002Fexample.com\"\n  }\n}\n\u003C\u002Fscript>\n\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BlogPosting\",\n  \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002Flions\",\n  \"name\": \"Animal blog - Lions\",\n  \"headline\": \"Lions\",\n  \"isPartOf\": {\n    \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002F\"\n  },\n  \"articleSection\": \"Science\",\n  \"datePublished\": \"2022-01-01\",\n  \"dateCreated\": \"2022-01-01\",\n  \"image\": \"https:\u002F\u002Fexample.com\u002Fimages\u002Fexample.jpg\",\n  \"backstory\": \"Your post summary\",\n  \"creator\": \"Creator name\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"url\": \"https:\u002F\u002Fexample.com\u002Fabout\",\n    \"name\": \"Author name\"\n  }\n}\n\u003C\u002Fscript>\n","HTML",[117,3520,3521,3539,3543,3547,3551,3555,3559,3563,3571,3589,3593,3597,3602,3607,3612,3617,3622,3626,3630,3638,3656,3660,3665,3671,3677,3683,3689,3694,3700,3705,3711,3717,3723,3729,3735,3741,3747,3753,3759,3765,3770,3775],{"__ignoreMap":115},[20,3522,3523,3525,3527,3529,3531,3533,3535,3537],{"class":121,"line":122},[20,3524,3454],{"class":1270},[20,3526,3441],{"class":1276},[20,3528,3459],{"class":1318},[20,3530,3462],{"class":1270},[20,3532,2608],{"class":1270},[20,3534,3467],{"class":1285},[20,3536,2608],{"class":1270},[20,3538,137],{"class":1270},[20,3540,3541],{"class":121,"line":128},[20,3542,1574],{"class":1325},[20,3544,3545],{"class":121,"line":134},[20,3546,3480],{"class":1325},[20,3548,3549],{"class":121,"line":140},[20,3550,3485],{"class":1325},[20,3552,3553],{"class":121,"line":146},[20,3554,3490],{"class":1325},[20,3556,3557],{"class":121,"line":153},[20,3558,3495],{"class":1325},[20,3560,3561],{"class":121,"line":159},[20,3562,1375],{"class":1325},[20,3564,3565,3567,3569],{"class":121,"line":165},[20,3566,3504],{"class":1270},[20,3568,3441],{"class":1276},[20,3570,137],{"class":1270},[20,3572,3573,3575,3577,3579,3581,3583,3585,3587],{"class":121,"line":170},[20,3574,3454],{"class":1270},[20,3576,3441],{"class":1276},[20,3578,3459],{"class":1318},[20,3580,3462],{"class":1270},[20,3582,2608],{"class":1270},[20,3584,3467],{"class":1285},[20,3586,2608],{"class":1270},[20,3588,137],{"class":1270},[20,3590,3591],{"class":121,"line":176},[20,3592,1574],{"class":1325},[20,3594,3595],{"class":121,"line":182},[20,3596,3480],{"class":1325},[20,3598,3599],{"class":121,"line":188},[20,3600,3601],{"class":1325},"  \"@type\": \"Blog\",\n",[20,3603,3604],{"class":121,"line":194},[20,3605,3606],{"class":1325},"  \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002F\",\n",[20,3608,3609],{"class":121,"line":199},[20,3610,3611],{"class":1325},"  \"name\": \"Amazing Blog about animals\",\n",[20,3613,3614],{"class":121,"line":205},[20,3615,3616],{"class":1325},"  \"isPartOf\": {\n",[20,3618,3619],{"class":121,"line":211},[20,3620,3621],{"class":1325},"    \"@id\": \"https:\u002F\u002Fexample.com\"\n",[20,3623,3624],{"class":121,"line":217},[20,3625,1370],{"class":1325},[20,3627,3628],{"class":121,"line":3303},[20,3629,1375],{"class":1325},[20,3631,3632,3634,3636],{"class":121,"line":3324},[20,3633,3504],{"class":1270},[20,3635,3441],{"class":1276},[20,3637,137],{"class":1270},[20,3639,3640,3642,3644,3646,3648,3650,3652,3654],{"class":121,"line":3342},[20,3641,3454],{"class":1270},[20,3643,3441],{"class":1276},[20,3645,3459],{"class":1318},[20,3647,3462],{"class":1270},[20,3649,2608],{"class":1270},[20,3651,3467],{"class":1285},[20,3653,2608],{"class":1270},[20,3655,137],{"class":1270},[20,3657,3658],{"class":121,"line":3347},[20,3659,1574],{"class":1325},[20,3661,3663],{"class":121,"line":3662},22,[20,3664,3480],{"class":1325},[20,3666,3668],{"class":121,"line":3667},23,[20,3669,3670],{"class":1325},"  \"@type\": \"BlogPosting\",\n",[20,3672,3674],{"class":121,"line":3673},24,[20,3675,3676],{"class":1325},"  \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002Flions\",\n",[20,3678,3680],{"class":121,"line":3679},25,[20,3681,3682],{"class":1325},"  \"name\": \"Animal blog - Lions\",\n",[20,3684,3686],{"class":121,"line":3685},26,[20,3687,3688],{"class":1325},"  \"headline\": \"Lions\",\n",[20,3690,3692],{"class":121,"line":3691},27,[20,3693,3616],{"class":1325},[20,3695,3697],{"class":121,"line":3696},28,[20,3698,3699],{"class":1325},"    \"@id\": \"https:\u002F\u002Fexample.com\u002Fanimals-blog\u002F\"\n",[20,3701,3703],{"class":121,"line":3702},29,[20,3704,3149],{"class":1325},[20,3706,3708],{"class":121,"line":3707},30,[20,3709,3710],{"class":1325},"  \"articleSection\": \"Science\",\n",[20,3712,3714],{"class":121,"line":3713},31,[20,3715,3716],{"class":1325},"  \"datePublished\": \"2022-01-01\",\n",[20,3718,3720],{"class":121,"line":3719},32,[20,3721,3722],{"class":1325},"  \"dateCreated\": \"2022-01-01\",\n",[20,3724,3726],{"class":121,"line":3725},33,[20,3727,3728],{"class":1325},"  \"image\": \"https:\u002F\u002Fexample.com\u002Fimages\u002Fexample.jpg\",\n",[20,3730,3732],{"class":121,"line":3731},34,[20,3733,3734],{"class":1325},"  \"backstory\": \"Your post summary\",\n",[20,3736,3738],{"class":121,"line":3737},35,[20,3739,3740],{"class":1325},"  \"creator\": \"Creator name\",\n",[20,3742,3744],{"class":121,"line":3743},36,[20,3745,3746],{"class":1325},"  \"author\": {\n",[20,3748,3750],{"class":121,"line":3749},37,[20,3751,3752],{"class":1325},"    \"@type\": \"Person\",\n",[20,3754,3756],{"class":121,"line":3755},38,[20,3757,3758],{"class":1325},"    \"url\": \"https:\u002F\u002Fexample.com\u002Fabout\",\n",[20,3760,3762],{"class":121,"line":3761},39,[20,3763,3764],{"class":1325},"    \"name\": \"Author name\"\n",[20,3766,3768],{"class":121,"line":3767},40,[20,3769,1370],{"class":1325},[20,3771,3773],{"class":121,"line":3772},41,[20,3774,1375],{"class":1325},[20,3776,3778,3780,3782],{"class":121,"line":3777},42,[20,3779,3504],{"class":1270},[20,3781,3441],{"class":1276},[20,3783,137],{"class":1270},[11,3785,3787],{"id":3786},"validando-los-esquemas","Validando los esquemas",[16,3789,3790,3791,3794,3795],{},"Existe una extensión para el navegador Google Chrome que me gusta por su sencillez y permite validar en tiempo real los esquemas añadidos a tus páginas, esta se llama ",[60,3792,3793],{},"JSON LD Tester"," y podemos encontrarla en el catálogo de extensiones o a través de este enlace: ",[76,3796,3797],{"href":3797,"rel":3798,"title":3799},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fjson-ld-tester\u002Faohmciehgjboidolkmoaofcbnejmokan",[80],"Extensión JSON LD tester",[16,3801,3802],{},"Una vez instalada aparecerá un icono en la parte superior derecha del navegador que al pulsarlo mostrará un pop-up con los datos de los esquemas que hemos añadido. Por ejemplo para este artículo muestra los siguientes datos:",[16,3804,3805],{},[2159,3806],{"alt":3807,"src":3808},"Resultados de los esquemas a través de la extensión JSON LD Tester","\u002Fimages\u002Fjsonlstester.webp",[16,3810,3811,3812,3815],{},"Si queremos ver en detalle cada uno de los esquemas podemos pulsa en el botón \"",[60,3813,3814],{},"Test this","\", lo que nos llevará a las herramientas online de validación de esquemas:",[83,3817,3818,3830],{},[86,3819,3820,3823,3824,3829],{},[60,3821,3822],{},"Validador de Google para resultados enriquecidos",": (",[76,3825,3826],{"href":3826,"rel":3827,"title":3828},"https:\u002F\u002Fsearch.google.com\u002Ftest\u002Frich-results",[80],"Validador de resultados enriquecidos",") Que nos permite validar una página a través de su url o un fragmento de código que podemos insertar manualmente.",[86,3831,3832,3823,3835,3840],{},[60,3833,3834],{},"Validador de Schema.org",[76,3836,3837],{"href":3837,"rel":3838,"title":3839},"https:\u002F\u002Fvalidator.schema.org\u002F",[80],"Validador de marcado de Schema.org",") Que también nos permite validar por url o fragmento de código.",[11,3842,3844],{"id":3843},"para-terminar","Para terminar",[16,3846,3847],{},"Con toda esta información ya puedes añadir toda la información a tus páginas para ayudar a mejorar los resultados enriquecidos en los buscadores.",[16,3849,3850,3851,3855],{},"No obstante hay muchos tipos de páginas y esquemas por lo que te recomiendo que le eches un ojo a la documentación de esquemas de ",[76,3852,2537],{"href":2537,"rel":3853,"title":3854},[80],"Documentación de esquemas"," para encontrar los que mejor se adapten a tu contenido.",[865,3857,3858],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":115,"searchDepth":128,"depth":134,"links":3860},[3861,3862,3863,3869,3870,3871,3872],{"id":13,"depth":128,"text":14},{"id":2530,"depth":128,"text":2531},{"id":2556,"depth":128,"text":2557,"children":3864},[3865,3866,3867,3868],{"id":2563,"depth":134,"text":2564},{"id":2711,"depth":134,"text":2712},{"id":2997,"depth":134,"text":2998},{"id":3370,"depth":134,"text":3371},{"id":3411,"depth":128,"text":3412},{"id":3433,"depth":128,"text":3434},{"id":3786,"depth":128,"text":3787},{"id":3843,"depth":128,"text":3844},"2022-08-15","Aprende cómo optimizar el SEO de tu sitio web con una estructura de datos organizada.","blog\u002Fschema",[3877,3878,3879,3880,3881,3882],"SEO","SEO jsonld","jsonld","resultados enriquecidos","SEO thebyteland","resultados enriquecidos google",{"postTitle":3884},"Cómo optimizar tu web con resultados enriquecidos","\u002Fblog\u002Foptimiza-tu-web-con-resultados-enriquecidos",{"title":2514,"description":3874},"blog\u002Foptimiza-tu-web-con-resultados-enriquecidos",[3877],"Si quieres exprimir todo el potencial del contenido de tu sitio web y ayudar a los buscadores a mostrar mejores resultados para tu contenido, te enseño cómo crear una buena estructura de datos con json+ld.",[912],"I9ndX0uxqaobWfPMyXjR68mvrn3Av1zz_wklZ4-zHoM",{"id":3893,"title":3894,"body":3895,"date":3993,"description":3994,"extension":896,"headerImage":3995,"isActive":149,"keywords":3996,"meta":4002,"navigation":149,"path":4003,"seo":4004,"stem":4005,"subject":4006,"summary":4008,"tags":4009,"__hash__":4011},"blog\u002Fblog\u002Fla-escala-de-kardashov.md","La escala de Kardashov",{"type":8,"value":3896,"toc":3987},[3897,3901,3904,3907,3910,3917,3921,3924,3927,3930,3936,3960,3963,3965,3968,3970],[11,3898,3900],{"id":3899},"el-dominio-de-la-energía-para-clasificar-civilizaciones","El dominio de la energía para clasificar civilizaciones",[16,3902,3903],{},"¿Quién no se ha preguntado alguna vez cómo serían otras civilizaciones? Es fácil imaginar civilizaciones primitivas porque venimos de eso y a través de nuestra historia podemos ver los avances tecnológicos a los que hemos llegado, pero si hubiera por ahí fuera civilizaciones mucho más avanzadas es difícil de imaginar el nivel tecnológico que podrían alcanzar.",[16,3905,3906],{},"Pero hay una pista que nos ayudaría a imaginar hasta qué punto una civilización puede estar avanzada tecnológicamente aunque no lleguemos a entender estos avances. Y no hay más que mirarnos al espejo porque a medida que hemos ido controlando la energía, desde una pequeña hoguera, al uso y distribución de energía eléctrica y tratando de buscar fuentes de energía renovables que no se agoten fácilmente estamos consiguiendo dominar los recursos de nuestro planeta (Si no lo destruimos en el intento).",[16,3908,3909],{},"Este control de la energía nos ha permitido avanzar mucho tecnológicamente, hasta el punto que si alguien que vivió hace 200 años pudiera echarle un ojo a nuestro mundo le parecería brujería, sería algo inimaginable para esa persona, lo que seguramente nos pasaría a cualquiera si pudiéramos ver la civilización dentro de 200 años,",[16,3911,3912,3913,3916],{},"El caso es que a medida que controlamos un lugar tendemos a expandirnos y buscar nuevas fuentes de energía con las que seguir avanzando. Es en base a esta premisa en lo que se basó ",[60,3914,3915],{},"Niolài Kardashov"," para crear una escala de civilizaciones.",[11,3918,3920],{"id":3919},"la-escala-kardashev","La escala Kardashev",[16,3922,3923],{},"Aunque pueda parecernos que estamos muy avanzados tecnológicamente hablando, aún no somos capaces de controlar de forma eficiente toda la energía que podríamos de nuestro planeta y si miramos un poco más allá hay otras fuentes aún mayores, como nuestro Sol.",[16,3925,3926],{},"Es por ello que teniendo en cuenta todas las fuentes de energía que podemos observar en el universo, nuestro escaso aprovechamiento de las mismas nos deja en un nivel de civilización muy bajo por el momento.",[16,3928,3929],{},"Si bien es poco preciso hablar en términos de energía, ya que este término es algo muy global y hay muchos tipos de energías, lo que realmente indica que aprovechamos la energía disponible de un sistema es si hacemos uso de su potencia, ya que la potencia determina la cantidad de energía que se transfiere a lo largo de un tiempo.",[16,3931,3932,3933,416],{},"Y es que principalmente ",[60,3934,3935],{},"la escala Kardashev clasifica las civilizaciones en 3 grandes tipos",[83,3937,3938,3944,3954],{},[86,3939,3940,3943],{},[60,3941,3942],{},"Tipo I",": Este tipo de civilización sería capaz de controlar toda la potencia de su planeta de forma eficiente. Por lo que según esta definición, aún no hemos llegado ni al tipo I, aunque se piensa que podríamos estar relativamente cerca de alcanzarlo.",[86,3945,3946,3949,3950,3953],{},[60,3947,3948],{},"Tipo II",": Aquí la cosa se pone más seria porque este tipo de civilización sería capaz de controlar toda la potencia de su estrella. En nuestro caso, tendríamos que controlar la potencia del Sol para alcanzar este nivel. Aunque pueda parecer algo imposible, se plantea que una civilización muy avanzada podría crear una estructura alrededor de su estrella con la que capturar gran parte de la radiación que emite, a estas estructuras se las conoce como ",[60,3951,3952],{},"esferas de Dyson",", que para hacernos una pequeña idea sería como una infinidad de placas solares rodeando el sol: Una barbaridad de energía.",[86,3955,3956,3959],{},[60,3957,3958],{},"Tipo III",": Si el tipo II ya te ha parecido algo imposible, para alcanzar el tipo III se requeriría algo inimaginable, porque si ya dominas tu plantea, planetas vecinos y prácticamente todo tu sistema solar, lo siguiente es expandirse al resto de sistemas de tu galaxia. Con el dominio energético y tecnológico que podría tener una civilización de tipo II, en algún momento tendría la capacidad de viajar a otros sistemas, y podría utilizar esas mismas técnicas en otros planetas y estrellas. Incluso se planteaba que pudieran llegar a utilizar la potencia de los agujeros negros super masivos que se encuentran en el centro de las galaxias.",[16,3961,3962],{},"También se planteaba la posibilidad de civilizaciones aún más avanzadas que pudieran llegar a dominar el universo pero creo que para empezar con estos tres primeros tipos os podéis hacer una idea de lo que se podría conseguir dominando la potencia energética de un sistema.",[11,3964,760],{"id":759},[16,3966,3967],{},"Si bien es verdad que es bonito imaginar el cómo serían otras civilizaciones muy avanzadas,  no podemos tomar esta escala como una referencia real porque al igual que no podríamos entender ni si quiera como pensaría ni razonaría nuestra civilización dentro de unos miles de años ni su tecnología, tampoco podemos entender cómo otras civilizaciones entenderían su existencia y el universo que las rodea. Tal vez ni si quiera sea posible expandirse tanto o una civilización muy avanzada no tenga interés en hacerlo, pero todo eso no quita que sigamos dando rienda suelta a nuestra imaginación y estudiando el universo para que tal vez un día podamos entender con mayor profundidad parte de los secretos que esconde.",[11,3969,787],{"id":786},[83,3971,3972,3980],{},[86,3973,3974,3975],{},"Wikipedia: ",[76,3976,3977],{"href":3977,"rel":3978,"title":3979},"https:\u002F\u002Fes.wikipedia.org\u002Fwiki\u002FEscala_de_Kardashov",[80],"La escala de Kardashov en Wikipedia",[86,3981,3974,3982],{},[76,3983,3986],{"href":3984,"rel":3985},"https:\u002F\u002Fes.wikipedia.org\u002Fwiki\u002FEsfera_de_Dyson",[80],"La esfera de Dyson",{"title":115,"searchDepth":128,"depth":134,"links":3988},[3989,3990,3991,3992],{"id":3899,"depth":128,"text":3900},{"id":3919,"depth":128,"text":3920},{"id":759,"depth":128,"text":760},{"id":786,"depth":128,"text":787},"2022-08-10","¿Sabías que existe una escala que clasifica tecnológicamente todas las civilizaciones según su dominio de la energía?","blog\u002Fdysonsphere",[3997,3998,3999,4000,4001],"escala kardashov","kardashov","escala civilizaciones","esfera de dyson","dyson",{},"\u002Fblog\u002Fla-escala-de-kardashov",{"title":3894,"description":3994},"blog\u002Fla-escala-de-kardashov",[4007],"Cosmología","Hace poco hablaba de la paradoja de Fermi y cómo la ciencia estudia la posibilidad que existe de que estemos solos en el universo. Si te gustó ese artículo seguramente este no te deje indiferente porque en el supuesto que no estuviéramos solos y hubiera civilizaciones por todo el universo ¿Cómo clasificaríamos su nivel tecnológico? ¿Nuestra civilización sería avanzada o aún estaríamos en pañales?",[4010],"Ciencia","-4LS8OsL48RQdtUrTv_xvs8vQ1y638pLnT_v2D0sQuc",{"id":4013,"title":4014,"body":4015,"date":4358,"description":4359,"extension":896,"headerImage":4360,"isActive":149,"keywords":4361,"meta":4369,"navigation":149,"path":4370,"seo":4371,"stem":4372,"subject":4373,"summary":4376,"tags":4377,"__hash__":4378},"blog\u002Fblog\u002Ftailwind-tu-nueva-libreria-de-css-favorita.md","Tailwind: Tu nueva librería de CSS favorita",{"type":8,"value":4016,"toc":4350},[4017,4019,4022,4028,4035,4039,4042,4048,4052,4055,4058,4061,4065,4071,4078,4081,4084,4096,4184,4204,4214,4218,4221,4224,4254,4262,4290,4297,4325,4329,4332,4337,4340,4347],[11,4018,14],{"id":13},[16,4020,4021],{},"Si llevas tiempo trabajando con CSS seguramente te has encontrado con alguno de estos problemas: Código espagueti, mucho código repetido, falta de organización de los recursos y hasta problemas de mantenimiento de tus hojas de estilo. Y es que, aunque es aparentemente sencillo empezar con CSS, no es intuitivo el cómo organizar tu código, tus hojas de estilo y para colmo, dependiendo de si utilizas algún pre compilador como SASS o LESS puede que te sea difícil reutilizar tus funciones y mixins en otros proyectos.",[16,4023,4024,4025,47],{},"Seguramente te has visto alguna vez empezando un proyecto y tratando de importar tus mixins antiguos o funciones para generar clases de ayuda para dar márgenes, rellenos, aplicar colores u otras utilidades, así como configurando tu pre compilador o pensando en la dichosa jerarquía de directorios para organizar tus ficheros. Al fin y al cabo ciertas ",[60,4026,4027],{},"acciones que no radican solo en una simple configuración y a la larga consumen mucho tiempo",[16,4029,4030,4031,4034],{},"A raíz de problemas como estos es por lo que empecé a fijarme más en librerías que te dieran todo este trabajo hecho, proporcionando directamente los ",[60,4032,4033],{},"helpers"," para con una simple importación o configuración base empezar a trabajar en mi proyecto.",[11,4036,4038],{"id":4037},"las-librerías-de-css","Las librerías de CSS",[16,4040,4041],{},"Realmente disponemos de grandes librerías que nos permiten hacer cosas grandiosas, modificarlas a nuestro gusto, extender su funcionalidad o incluso nos proveen de un sistema de componentes predefinidos para no tener que repetir el desarrollo de los componentes principales de nuestra aplicación, y dependiendo de cómo sea nuestro proyecto o las necesidades que tengamos pueden ser muy útiles, pero hay ciertos proyectos que no pueden usar elementos predefinidos porque el diseño que se va a aplicar  no concuerda. En estos casos es donde empieza a ser engorroso usar librerías con tantas funcionalidades ya predefinidas, porque inviertes más tiempo modificando lo que no necesitas o no está a tu gusto que si lo crearas desde cero.",[16,4043,4044,4047],{},[60,4045,4046],{},"Librerías como Bootstrap o Vuetify son verdaderas titanes en cuanto a las utilidades"," y facilidades que aportan. De hecho, he tenido la oportunidad de realizar proyectos con ambas, y por ejemplo Vuetify me parece increíblemente útil para construir rápidamente sitios funcionales, ya que te da tantos componentes y con tanta funcionalidad que es raro que necesites algo más, eso sí, como tengas que cambiar algo...",[11,4049,4051],{"id":4050},"las-metodologías","Las metodologías",[16,4053,4054],{},"Puede que estés pensando que tu código está muy bien organizado porque usas alguna metodología como BEM, y desde luego es algo básico a la hora de encarar un proyecto grande o mediano, ya que no queremos un caos de clases CSS sin organización y pisándose unas a otras.",[16,4056,4057],{},"El caso es que aunque siempre recomiendo utilizar algún tipo de metodología, esto no suele ser suficiente ya que todas tienen sus limitaciones y siempre acabas dando con el caso que no te cuadra y te toca hacer una pequeña chapuza para que todo encaje.",[16,4059,4060],{},"Además esto no necesariamente te quita el problema de código repetido, aunque siempre puedes extender clases y hacer algunas pericias para que tu código quede lo más pequeño y simple posible.",[11,4062,4064],{"id":4063},"por-qué-tailwind","¿Por qué Tailwind?",[16,4066,4067,4068,47],{},"A diferencia de otras librerías, Tailwind no proporciona mixins o funciones para que las uses en tus ficheros, se centra en darte todos los tipos de clases que vas a necesitar para modificar tus elementos HTML, casi como si hiciéramos ",[60,4069,4070],{},"una relación en la que hay una clase para cada propiedad CSS y en muchos casos propiedad-valor",[16,4072,4073,4074,4077],{},"¡Espera! No te vayas. Esto no quiere decir que vas a tener una hoja de estilos con miles de clases que nunca usarás, todo lo contrario. Gracias a un proceso llamado ",[60,4075,4076],{},"purge"," en el que se eliminan de tu hoja de estilos final todas las clases que no se usen en tu código, el resultado final será una hoja de estilos con unos pocos KBs. Es decir, una cosa es todo lo que te ofrece, y otra lo que subes a tu entorno de producción una vez has extraído lo que necesitas.",[16,4079,4080],{},"Y esto es solo el principio, porque si bien es el peso final de tus ficheros CSS es un buen punto a tener en cuenta, el desarrollo tiene que ser el segundo pilar fundamental, y es aquí donde empieza la verdadera magia.",[16,4082,4083],{},"Si trabajas con un sistema de diseño o en base a unas pautas, seguramente tendrás una guía de colores, tipografías, espaciados acordes a una unidad base, etc. Con Tailwind puedes aplicar toda esta configuración para que la librería se adapte a tus necesidades, generando todos los helpers con los parámetros que tú necesitas.",[16,4085,4086,4087,4090,4091,4095],{},"Esto se hace ",[60,4088,4089],{},"a través de un fichero de configuración en javascript, que le indicará a Tailwind cómo quieres que se genere"," definiendo un tema, y dentro de ese tema todas sus características. Por ejemplo si quisiéramos que Tailwind en lugar de usar sus colores por defecto únicamente aplicara un rojo y un azul a las clases de los helpers sería tan sencillo como crear un fichero con el nombre ",[20,4092,4094],{"className":4093},[23],"tailwind.config.js"," con el siguiente contenido:",[110,4097,4099],{"className":1253,"code":4098,"filename":4094,"language":1256,"meta":115,"style":115},"module.exports = {\n  theme: {\n    extend: {\n      colors: {\n        red: '#D7503C',\n        blue: '#3F82EF'\n      }\n    }\n  }\n}\n",[117,4100,4101,4110,4119,4128,4137,4153,4167,4172,4176,4180],{"__ignoreMap":115},[20,4102,4103,4106,4108],{"class":121,"line":122},[20,4104,4105],{"class":1270},"module.exports",[20,4107,1332],{"class":1270},[20,4109,1271],{"class":1270},[20,4111,4112,4115,4117],{"class":121,"line":128},[20,4113,4114],{"class":1276},"  theme",[20,4116,416],{"class":1270},[20,4118,1271],{"class":1270},[20,4120,4121,4124,4126],{"class":121,"line":134},[20,4122,4123],{"class":1276},"    extend",[20,4125,416],{"class":1270},[20,4127,1271],{"class":1270},[20,4129,4130,4133,4135],{"class":121,"line":140},[20,4131,4132],{"class":1276},"      colors",[20,4134,416],{"class":1270},[20,4136,1271],{"class":1270},[20,4138,4139,4142,4144,4146,4149,4151],{"class":121,"line":146},[20,4140,4141],{"class":1276},"        red",[20,4143,416],{"class":1270},[20,4145,1282],{"class":1270},[20,4147,4148],{"class":1285},"#D7503C",[20,4150,1289],{"class":1270},[20,4152,1292],{"class":1270},[20,4154,4155,4158,4160,4162,4165],{"class":121,"line":153},[20,4156,4157],{"class":1276},"        blue",[20,4159,416],{"class":1270},[20,4161,1282],{"class":1270},[20,4163,4164],{"class":1285},"#3F82EF",[20,4166,1365],{"class":1270},[20,4168,4169],{"class":121,"line":159},[20,4170,4171],{"class":1270},"      }\n",[20,4173,4174],{"class":121,"line":165},[20,4175,1804],{"class":1270},[20,4177,4178],{"class":121,"line":170},[20,4179,1370],{"class":1270},[20,4181,4182],{"class":121,"line":176},[20,4183,1375],{"class":1270},[16,4185,4186,4187,1480,4191,33,4195,42,4199,4203],{},"Lo que haría que tuviéramos disponibles las clases ",[20,4188,4190],{"className":4189},[406],"text-red",[20,4192,4194],{"className":4193},[406],"text-blue",[20,4196,4198],{"className":4197},[406],"bg-red",[20,4200,4202],{"className":4201},[406],"bg-blue"," para dar color a nuestros textos y color de fondo a nuestros elementos.",[16,4205,4206,4207,4210,4211,4213],{},"Esto ",[60,4208,4209],{},"puede aplicarse a cualquier helper que necesitemos configurar o añadir",". Y por si te lo preguntas, no es necesario eliminar lo que no se quiera utilizar porque el ",[60,4212,4076],{}," lo hará por ti.",[11,4215,4217],{"id":4216},"demasiadas-clases-en-mi-html","Demasiadas clases en mi HTML",[16,4219,4220],{},"Por otro lado es posible que pienses o que directamente no te guste tener en tu código HTML un montón de clases en cada elemento que vayas a modificar con Tailwind.",[16,4222,4223],{},"Imaginemos que quieres una caja con unas cuantas modificaciones de color, tamaño y cualquier otra cosa que se te ocurra, algo como esto:",[110,4225,4227],{"className":3445,"code":4226,"filename":3518,"language":3447,"meta":115,"style":115},"\u003Cdiv class=\"bg-red w-24 h-24 border-2 border-blue rounded p-4\">\u003C\u002Fdiv>\n",[117,4228,4229],{"__ignoreMap":115},[20,4230,4231,4233,4235,4238,4240,4242,4245,4247,4250,4252],{"class":121,"line":122},[20,4232,3454],{"class":1270},[20,4234,935],{"class":1276},[20,4236,4237],{"class":1318}," class",[20,4239,3462],{"class":1270},[20,4241,2608],{"class":1270},[20,4243,4244],{"class":1285},"bg-red w-24 h-24 border-2 border-blue rounded p-4",[20,4246,2608],{"class":1270},[20,4248,4249],{"class":1270},">\u003C\u002F",[20,4251,935],{"class":1276},[20,4253,137],{"class":1270},[16,4255,4256,4257,4261],{},"Si además vas a tener esta configuración de clases es posible que no quieras tener ese código repetido en tu HTML. Para solucionar esto Tailwind nos da la directiva ",[20,4258,4260],{"className":4259},[406],"@apply"," con la que podemos construir nuevas clases aplicando los estilos de otras, de modo que podríamos transformar el código anterior en un HTML más sencillo:",[110,4263,4265],{"className":3445,"code":4264,"filename":3518,"language":3447,"meta":115,"style":115},"\u003Cdiv class=\"box\">\u003C\u002Fdiv>\n",[117,4266,4267],{"__ignoreMap":115},[20,4268,4269,4271,4273,4275,4277,4279,4282,4284,4286,4288],{"class":121,"line":122},[20,4270,3454],{"class":1270},[20,4272,935],{"class":1276},[20,4274,4237],{"class":1318},[20,4276,3462],{"class":1270},[20,4278,2608],{"class":1270},[20,4280,4281],{"class":1285},"box",[20,4283,2608],{"class":1270},[20,4285,4249],{"class":1270},[20,4287,935],{"class":1276},[20,4289,137],{"class":1270},[16,4291,4292,4293,4296],{},"Y definiendo nuestra clase ",[20,4294,4281],{"className":4295},[406]," de la siguiente manera:",[110,4298,4303],{"className":4299,"code":4300,"filename":4301,"language":4302,"meta":115,"style":115},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".box {\n  @apply bg-red w-24 h-24 border-2 border-blue rounded p-4;\n}\n","tailwind.css","css",[117,4304,4305,4313,4321],{"__ignoreMap":115},[20,4306,4307,4309,4311],{"class":121,"line":122},[20,4308,47],{"class":1270},[20,4310,4281],{"class":1736},[20,4312,1271],{"class":1270},[20,4314,4315,4318],{"class":121,"line":128},[20,4316,4317],{"class":1325},"  @apply bg-red w-24 h-24 border-2 border-blue rounded p-4",[20,4319,4320],{"class":1270},";\n",[20,4322,4323],{"class":121,"line":134},[20,4324,1375],{"class":1270},[11,4326,4328],{"id":4327},"conclusiones","Conclusiones",[16,4330,4331],{},"Si no has probado nunca una librería de utilidades CSS es posible que todo esto te suene algo confuso o no termine de encajarte, pero respaldando lo que dice el creador de Tailwind:",[972,4333,4334],{},[975,4335,4336],{},"\nI’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it.\n",[16,4338,4339],{},"Es cierto, hasta que no lo pruebas y ves que realmente agiliza tu desarrollo una barbaridad, no terminas de creértelo.",[16,4341,4342,4343,4346],{},"Debido a su ",[60,4344,4345],{},"versatilidad y facilidad de adaptación a nuestras necesidades"," creo que es una opción perfecta para elegir entre la variedad de librerías que hay y es por eso que te animo a que si no la conoces aún, le des una oportunidad.",[865,4348,4349],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":115,"searchDepth":128,"depth":134,"links":4351},[4352,4353,4354,4355,4356,4357],{"id":13,"depth":128,"text":14},{"id":4037,"depth":128,"text":4038},{"id":4050,"depth":128,"text":4051},{"id":4063,"depth":128,"text":4064},{"id":4216,"depth":128,"text":4217},{"id":4327,"depth":128,"text":4328},"2022-08-07","Descubre todas las ventajas que la librería de utilidades CSS Tailwind te puede ofrecer y olvídate de repetir código.","blog\u002Ftailwind",[4362,4363,4364,4365,4366,4367,4368],"tailwind","thebyteland tailwind","byteland tailwind","libreria tailwind","aprender tailwind","talwind css","css tailwind",{},"\u002Fblog\u002Ftailwind-tu-nueva-libreria-de-css-favorita",{"title":4014,"description":4359},"blog\u002Ftailwind-tu-nueva-libreria-de-css-favorita",[4374,4375],"CSS","Tailwind","Con tantas librerías CSS, pre compiladores y utilidades en el mercado, puede ser abrumador elegir una para tu próximo proyecto, pero si ya tienes experiencia con CSS y estás buscando algo que te facilite la vida y sea potente te cuento más sobre Tailwind.",[912],"JzCwRjPEp0sHbBOPXeKfJLTwLIjEJP_-k0u8znWltN8",{"id":4380,"title":4381,"body":4382,"date":4549,"description":4550,"extension":896,"headerImage":4551,"isActive":149,"keywords":4552,"meta":4557,"navigation":149,"path":4558,"seo":4559,"stem":4560,"subject":4561,"summary":4562,"tags":4563,"__hash__":4564},"blog\u002Fblog\u002Ftu-galeria-de-componentes-con-storybook.md","Tu galería de componentes con StoryBook",{"type":8,"value":4383,"toc":4539},[4384,4386,4389,4392,4399,4406,4414,4418,4421,4424,4471,4475,4478,4482,4488,4491,4495,4504,4508,4511,4522,4524,4527,4532],[11,4385,14],{"id":13},[16,4387,4388],{},"He tenido la oportunidad de trabajar en varios proyectos donde un equipo de diseño trabaja antes del desarrollo para estudiar cómo debe construirse la aplicación de cara a la imagen de marca, usabilidad y experiencia de usuario entre otros aspectos.",[16,4390,4391],{},"Lo ideal es que el equipo técnico valide la viabilidad de las propuestas de diseño antes de empezar el desarrollo para evitar tener que rehacer trabajo o encontrarse con funcionalidades que no pueden llevarse a cabo cuando ya estás en pleno desarrollo. Pero la cosa no queda aquí, porque también es ideal que el equipo de desarrollo que se ocupa de hacer la parte front de la aplicación se apoye en el equipo de diseño para validar los desarrollos, cerrando una etapa del proyecto y asegurándose que todo queda como se tenía planeado.",[16,4393,4394,4395,4398],{},"Si además se usa una arquitectura basada en componentes o módulos, a medida que se van acabando se puede dar una entrega de valor al proyecto, ",[60,4396,4397],{},"cumpliendo con pequeños hitos que garantizan que el proyecto va viento en popa",". Y es por esto que seguramente te interesará tener una herramienta donde puedas compartir con tu equipo de diseño, managers o cualquier otra persona que vaya a participar el trabajo realizado.",[16,4400,4401,4402,4405],{},"El problema es que normalmente no interesa dedicar tiempo a desarrollar una herramienta de este estilo, ya que puede ser costoso y alargar mucho el tiempo del proyecto. Es aquí donde entra ",[60,4403,4404],{},"Storybook",", una herramienta que nos permite crear una interfaz de usuario donde incluir una galería de todos nuestros componentes con sus casos de uso, documentación así como integrarse con un montón de funcionalidades que pueden ser de mucha utilidad.",[16,4407,4408,4409],{},"Documentación de Storybook: ",[76,4410,4411],{"href":4411,"rel":4412,"title":4413},"https:\u002F\u002Fstorybook.js.org\u002F",[80],"Documentación oficial Storybook",[11,4415,4417],{"id":4416},"qué-ventajas-tiene-storybook","¿Qué ventajas tiene Storybook?",[16,4419,4420],{},"Ya sea Storybook u otra herramienta que nos ayude a crear una interfaz de usuario colaborativa nos aporta una serie de ventajas a la hora de agilizar el proyecto en el que trabajamos además de tener centralizada una buena documentación técnica, funcional y útil sobre los componentes de nuestro proyecto.",[16,4422,4423],{},"En concreto destacaría las siguientes ventajas de Storybook:",[83,4425,4426,4431,4436,4442,4448,4454,4460,4465],{},[86,4427,4428,47],{},[60,4429,4430],{},"Facilidad de implementación",[86,4432,4433,47],{},[60,4434,4435],{},"Provee una interfaz sencilla y útil",[86,4437,4438,4441],{},[60,4439,4440],{},"Ayuda a dar visibilidad del estado del proyecto",". Muy útil en las primeras semanas donde seguramente se está definiendo las bases del proyecto.",[86,4443,4444,4447],{},[60,4445,4446],{},"Ahorro de tiempo",": No tienes que invertir tiempo construyendo una interfaz donde poner una muestra de tus componentes y sus estados manualmente.",[86,4449,4450,4453],{},[60,4451,4452],{},"Es customizable",": Permitiendo configurar temas, addons y adaptar la interfaz a tu marca.",[86,4455,4456,4459],{},[60,4457,4458],{},"Se integra con la mayoría de frameworks y librerías de front",", como React, Vue o Angular",[86,4461,4462,47],{},[60,4463,4464],{},"Proceso de construcción sencillo para subirse a entornos de hosting estáticos",[86,4466,4467,4470],{},[60,4468,4469],{},"Desacoplada el entorno de desarrollo",": Alguien que no desarrolle no va a encontrar amigable el instalarse un repositorio y lanzar servidores locales para probar las funcionalidades de tu aplicación, por lo que tener un sitio a parte donde todo tu equipo pueda acceder en cualquier momento sin dependencia del equipo de desarrollo les hará muy felices.",[11,4472,4474],{"id":4473},"cómo-funciona","¿Cómo funciona?",[16,4476,4477],{},"Aunque puede usarse con una configuración básica y dedicarlo solo a crear una galería de componentes de nuestra aplicación, Storybook tiene un montón de funcionalidades que nos van a facilitar mucho la vida y vamos a agradecer. Si bien pueden configurarse addons y temas personalizados hay tres funcionalidades principales que son las que me gustaría destacar en este artículo.",[65,4479,4481],{"id":4480},"stories","Stories",[16,4483,4484,4487],{},[60,4485,4486],{},"Son ficheros en los que indicamos cómo funciona un componente o un conjunto de componentes",", de manera que cada story que indicamos en el fichero puede ser una implementación de un componente o conjunto.",[16,4489,4490],{},"Es habitual que nuestros componentes tengan parámetros de entrada que modifiquen su comportamiento y la información o aspecto que muestran, por lo que si en lugar de revisar todo el código tenemos en Storybook los casos de uso expuestos, nos puede ayudar mucho a refrescar la memoria y a otros equipos a entender cómo funciona un componente.",[65,4492,4494],{"id":4493},"docs","Docs",[16,4496,4497,4498,4500,4501,4503],{},"Estos ficheros nos dan la oportunidad de crear páginas de documentación en la que podemos usar ",[60,4499,4480],{},", incluir guías o explicaciones sobre cualquier aspecto de nuestra aplicación. En definitiva cualquier información que queramos explicar detalladamente podríamos hacerlo con los ",[60,4502,4493],{},". Éstos son especialmente útiles si queremos crear un sitio web para nuestro sistema de diseño.",[65,4505,4507],{"id":4506},"testing","Testing",[16,4509,4510],{},"Imagina que queremos rizar el rizo e ir un poco más allá, incluyendo testeo de nuestros componentes o integraciones. Pues también podemos hacerlo con Storybook y esto es especialmente útil para involucrar a otros equipos a asegurar la calidad de la aplicación que estamos construyendo.",[16,4512,4513,4514,4517,4518,4521],{},"A parte de venir con un ",[60,4515,4516],{},"test runner que puede ejecutar nuestros tests unitarios",", Storybook nos permite hacer ",[60,4519,4520],{},"validaciones de accesibilidad",", comprobación de snapshots que ayudan a verificar que si el código fuente de nuestros componentes ha cambiado (En ese caso debemos actualizarlos en Storybook, de lo contrario nos avisaría indicando los errores que se hayan producido), tests de interacción simulando el comportamiento de un usuario así como otras funcionalidades que harán que nuestra aplicación sea muy robusta reduciendo la posibilidad de errores.",[11,4523,4328],{"id":4327},[16,4525,4526],{},"Si has tenido que crear alguna vez una página para mostrar tus componentes a tu equipo de diseño o managers seguramente encontrarás interesante esta herramienta, así que anímate y la próxima vez, o si aún estás a tiempo, propón usar StoryBook y verás que los resultados hablan por sí solos.",[16,4528,4529,47],{},[60,4530,4531],{},"Es una herramienta sencilla, y podemos quedarnos con una implementación básica o ir escalando a medida que necesitemos o queramos implementar más funcionalidades",[16,4533,4534,4535,4538],{},"Al poderse publicar fácilmente en un entorno diferente al del proyecto ",[60,4536,4537],{},"facilita la colaboración del equipo"," y si se mantiene actualizada ahorrará mucho tiempo de resolución de dudas o incluso en el onboarding para nuevos integrantes del equipo.",{"title":115,"searchDepth":128,"depth":134,"links":4540},[4541,4542,4543,4548],{"id":13,"depth":128,"text":14},{"id":4416,"depth":128,"text":4417},{"id":4473,"depth":128,"text":4474,"children":4544},[4545,4546,4547],{"id":4480,"depth":134,"text":4481},{"id":4493,"depth":134,"text":4494},{"id":4506,"depth":134,"text":4507},{"id":4327,"depth":128,"text":4328},"2022-08-04","Storybook nos permite centralizar nuestra documentación y casos de uso mediante una interfaz de usuario.","blog\u002Fstorybook",[4553,4554,4555,4556],"storybook","nuxt storybook","byteland storybook","thebyteland storybook",{},"\u002Fblog\u002Ftu-galeria-de-componentes-con-storybook",{"title":4381,"description":4550},"blog\u002Ftu-galeria-de-componentes-con-storybook",[4404,2119],"Si trabajas en un proyecto en que haya un equipo de diseño, varios desarrolladores y tal vez otros roles que puedan validar tu trabajo puede que quieras tener un lugar donde todo el equipo pueda consultar los avances y tener una buena documentación. Storybook es una potente herramienta que te ayuda a configurar una galería de componentes.",[912],"EkGv6aOBwDVFDrGTrwu4fomd_Jh9mSjsLVeQPaYMGBk",{"id":4566,"title":4567,"body":4568,"date":4933,"description":4934,"extension":896,"headerImage":4935,"isActive":149,"keywords":4936,"meta":4944,"navigation":149,"path":4945,"seo":4946,"stem":4947,"subject":4948,"summary":4950,"tags":4951,"__hash__":4952},"blog\u002Fblog\u002Fanaliticas-web-anonimas-en-tu-proyecto-con-nuxt.md","Analíticas web anónimas en tu proyecto con Nuxt",{"type":8,"value":4569,"toc":4927},[4570,4574,4581,4584,4594,4601,4614,4620,4624,4627,4636,4639,4682,4689,4700,4704,4712,4718,4721,4727,4731,4740,4746,4765,4781,4793,4874,4877,4880,4921,4924],[11,4571,4573],{"id":4572},"el-problema-de-la-analítica-tradicional","El problema de la analítica tradicional",[16,4575,4576,4577,4580],{},"Hasta hace pocos años era normal que para medir el tráfico de nuestro sitio web utilizáramos ",[60,4578,4579],{},"Google Analytics",", ya que es una herramienta muy potente y completa que nos ayuda a conocer cómo las personas interactúan con nuestro sitio, y a través de los datos obtenidos saber qué páginas o contenido interesan más para tomar decisiones e ir mejorando el contenido.",[16,4582,4583],{},"Con la gran cantidad de datos que se recopilan podemos saber desde qué lugar del mundo entran a nuestro sitio web con mucha precisión, el tiempo que permanecen en el sitio, identificar qué paginas no son intuitivas para encontrar la información que se busca y muchas otras métricas.",[16,4585,4586,4587,4590,4591,47],{},"Pero la pregunta es: ",[60,4588,4589],{},"¿Cómo se obtienen estos datos?"," Básicamente cuando nuestra aplicación recibe una petición a una página estas herramientas de analíticas suelen enviar otra petición en paralelo con un conjunto de datos, los cuales podemos dividir en ",[60,4592,4593],{},"datos anónimos y datos identificativos",[16,4595,4596,4597,4600],{},"Los ",[60,4598,4599],{},"datos anónimos"," no permiten identificar a un usuario de ningún modo, estos son por ejemplo: El navegador que usa, el tipo de dispositivo desde el que se accede o por ejemplo la fecha en la que accede.",[16,4602,4596,4603,4606,4607,4610,4611],{},[60,4604,4605],{},"datos identificativos"," por el contrario pueden permitir identificar a una persona. Por ejemplo la ",[60,4608,4609],{},"dirección IP"," con la que accedió a la web puede ofrecer datos como su país, ciudad e incluso algo más preciso. Esto también ocurre con los datos que podemos introducir en formularios como nuestro ",[60,4612,4613],{},"nombre o dirección de correo electrónico.",[16,4615,4616,4617,47],{},"Sabiendo esto se entiende mejor por que estos servicios son \"gratuitos\": ",[60,4618,4619],{},"Los usuarios están pagando con su información personal",[11,4621,4623],{"id":4622},"alternativas-a-google-analytics","Alternativas a Google Analytics",[16,4625,4626],{},"Si mantener la privacidad de los usuarios que acceden a tus aplicaciones es algo importante para ti tal vez te hayas planteado el usar otra herramienta para medir el funcionamiento de tu contenido. Y es algo normal porque para saber si un contenido que acabas de publicar tiene buena acogida entre tu público, no necesitas saber dónde viven ni qué han comido hoy o qué estaban pensando comprar en Amazon.",[16,4628,4629,4630,47],{},"Pero tengo una buena noticia, hay varias alternativas y una bastante sencilla de implementar, que no usa cookies y te da una cantidad de datos decente para empezar a medir el tráfico de tu web es ",[76,4631,4635],{"href":4632,"rel":4633,"title":4634},"https:\u002F\u002Fchiffre.io\u002F",[80],"Página web de Chiffre","Chiffre.io",[16,4637,4638],{},"Esta herramienta tiene varios puntos interesantes:",[83,4640,4641,4654,4660,4665,4677],{},[86,4642,4643,4646,4647,47],{},[60,4644,4645],{},"Respeta la normativa"," ",[4648,4649,4651],"abbr",{"title":4650},"Reglamento General de Protección de datos",[60,4652,4653],{},"RGPD",[86,4655,4656,4659],{},[60,4657,4658],{},"Los datos viajan encriptados",": Desde Chiffre no acceden a los datos de tu sitio web ni tus usuarios.",[86,4661,4662],{},[60,4663,4664],{},"No obtienen datos identificativos de los usuarios.",[86,4666,4667,4670,4671],{},[60,4668,4669],{},"Es de código abierto",": Puedes consultar su repositorio en ",[76,4672,4676],{"href":4673,"rel":4674,"title":4675},"https:\u002F\u002Fgithub.com\u002Fchiffre-io",[80],"Repositorio de código fuente de Chiffre","Github",[86,4678,4679,47],{},[60,4680,4681],{},"Puede funcionar sin conexión",[16,4683,4684,4685,4688],{},"Además tiene una versión gratuita que nos permite registrar hasta ",[60,4686,4687],{},"3 sitios web y 200 eventos por sitio web al día",", por lo que si quieres echarle un vistazo y probarlo no va a costarte ni un céntimo.",[16,4690,4691,4692,4695,4696,4699],{},"Las versiones de pago ofrecen más funcionalidades y menos limitaciones, siendo estas la versión ",[60,4693,4694],{},"Personal con un coste de 12 euros al mes"," y la versión ",[60,4697,4698],{},"Business con un coste de 72 euros al mes",", siendo este tal vez un punto malo ya que actualmente no tienen un servicio de pago por uso en el que puedas ir pagando según tu sitio crezca, pero esperemos que lo añadan.",[11,4701,4703],{"id":4702},"registro-en-chiffreio","Registro en Chiffre.io",[16,4705,4706,4707,4711],{},"Antes de probarlo en nuestra aplicación lo primero de todo es registrarnos en el sitio web ",[76,4708,4632],{"href":4632,"rel":4709,"title":4710},[80],"Sitio web Chiffre"," seleccionando el plan gratuito, para lo que nos va a pedir únicamente una dirección de correo electrónico y que elijamos un nombre de usuario y contraseña.",[16,4713,4714],{},[2159,4715],{"alt":4716,"src":4717,"title":4716},"Formulario de registro en Chiffre.io","\u002Fimages\u002Fchiffreform.webp",[16,4719,4720],{},"Una vez completes el registro te facilitarán una clave de recuperación de cuenta, la cual debes guardar en un lugar seguro.",[16,4722,4723,4724,47],{},"El siguiente paso es crear un proyecto al que vamos a asociar nuestra aplicación con Nuxt, lo que nos va a generar un ",[60,4725,4726],{},"identificador de proyecto y una clave pública",[11,4728,4730],{"id":4729},"probando-chiffre-con-nuestra-aplicación-nuxt","Probando Chiffre con nuestra aplicación Nuxt",[16,4732,4733,4734,47],{},"Realmente esto era lo difícil porque como siempre, para las cosas más útiles ya tenemos un módulo de Nuxt que nos va a ayudar a instalar nuestra herramienta con un mínimo de configuración. Este módulo es ",[76,4735,4739],{"href":4736,"rel":4737,"title":4738},"https:\u002F\u002Fgithub.com\u002Fchiffre-io\u002Fnuxt-chiffre",[80],"Repositorio en Github de Nuxt Chiffre","nuxt-chiffre",[16,4741,4742,4743,416],{},"Para instalarlo podemos utilizar ",[60,4744,4745],{},"npm o yarn",[110,4747,4752],{"className":4748,"code":4749,"filename":4750,"language":4751,"meta":115,"style":115},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install nuxt-chiffre\n","NPM","bash",[117,4753,4754],{"__ignoreMap":115},[20,4755,4756,4759,4762],{"class":121,"line":122},[20,4757,4758],{"class":1736},"npm",[20,4760,4761],{"class":1285}," install",[20,4763,4764],{"class":1285}," nuxt-chiffre\n",[110,4766,4769],{"className":4748,"code":4767,"filename":4768,"language":4751,"meta":115,"style":115},"yarn add nuxt-chiffre\n","YARN",[117,4770,4771],{"__ignoreMap":115},[20,4772,4773,4776,4779],{"class":121,"line":122},[20,4774,4775],{"class":1736},"yarn",[20,4777,4778],{"class":1285}," add",[20,4780,4764],{"class":1285},[16,4782,4783,4784,4787,4788,4792],{},"Para terminar vamos a añadir en nuestro fichero ",[20,4785,1427],{"className":4786},[23]," el nombre del módulo dentro del listado de módulos y un nuevo atributo ",[20,4789,4791],{"className":4790},[406],"chiffre"," para configurar el módulo.",[110,4794,4796],{"className":1253,"code":4795,"filename":1427,"language":1256,"meta":115,"style":115},"export default {\n  modules: ['nuxt-chiffre'],\n  chiffre: {\n    projectId: 'PROJECT_ID_FROM_CHIFFRE',\n    publicKey: 'PUBLIC_KEY_CHIFFRE'\n  }\n}\n",[117,4797,4798,4806,4827,4836,4852,4866,4870],{"__ignoreMap":115},[20,4799,4800,4802,4804],{"class":121,"line":122},[20,4801,1264],{"class":1263},[20,4803,1267],{"class":1263},[20,4805,1271],{"class":1270},[20,4807,4808,4811,4813,4816,4818,4820,4822,4825],{"class":121,"line":128},[20,4809,4810],{"class":1276},"  modules",[20,4812,416],{"class":1270},[20,4814,4815],{"class":1325}," [",[20,4817,1289],{"class":1270},[20,4819,4739],{"class":1285},[20,4821,1289],{"class":1270},[20,4823,4824],{"class":1325},"]",[20,4826,1292],{"class":1270},[20,4828,4829,4832,4834],{"class":121,"line":134},[20,4830,4831],{"class":1276},"  chiffre",[20,4833,416],{"class":1270},[20,4835,1271],{"class":1270},[20,4837,4838,4841,4843,4845,4848,4850],{"class":121,"line":140},[20,4839,4840],{"class":1276},"    projectId",[20,4842,416],{"class":1270},[20,4844,1282],{"class":1270},[20,4846,4847],{"class":1285},"PROJECT_ID_FROM_CHIFFRE",[20,4849,1289],{"class":1270},[20,4851,1292],{"class":1270},[20,4853,4854,4857,4859,4861,4864],{"class":121,"line":146},[20,4855,4856],{"class":1276},"    publicKey",[20,4858,416],{"class":1270},[20,4860,1282],{"class":1270},[20,4862,4863],{"class":1285},"PUBLIC_KEY_CHIFFRE",[20,4865,1365],{"class":1270},[20,4867,4868],{"class":121,"line":153},[20,4869,1370],{"class":1270},[20,4871,4872],{"class":121,"line":159},[20,4873,1375],{"class":1270},[16,4875,4876],{},"Y con esto ya tenemos Chiffre funcionando en nuestra web, lo cual va a enviar un evento por cada cambio de página y podremos ver reflejado en la web de Chiffre accediendo al proyecto que hemos creado.",[16,4878,4879],{},"Una vez empecemos a recibir visitas en nuestra aplicación podremos ver los siguientes datos con el plan gratuito:",[83,4881,4882,4887,4893,4898,4903,4909,4915],{},[86,4883,4884],{},[60,4885,4886],{},"Direcciones de las páginas visitadas y número de visitas.",[86,4888,4889,4892],{},[60,4890,4891],{},"Referers",": Desde donde llegan a nuestras páginas, tráfico directo, redes sociales, otras webs, etc.",[86,4894,4895],{},[60,4896,4897],{},"Navegadores desde los que se accede.",[86,4899,4900,47],{},[60,4901,4902],{},"Sistemas operativos desde los que se accede",[86,4904,4905,4908],{},[60,4906,4907],{},"Tipo de dispositivo:"," PC, tablet, móvil u ordenador portátil.",[86,4910,4911,4914],{},[60,4912,4913],{},"Idioma",": Este dato parece ser el idioma en el que está configurado el navegador del usuario al acceder.",[86,4916,4917,4920],{},[60,4918,4919],{},"País",": Desde dónde se realiza el acceso. Aunque este dato por las pruebas que he hecho no parece ser muy preciso. Además hay que tener en cuenta conexiones por VPN.",[16,4922,4923],{},"Ya sólo falta empezar a juntar datos y trabajarlos. En caso que necesitaras un plan de pago porque el tráfico de tu web es muy elevado siempre puedes valorar uno de los dos planes que ofrecen.",[865,4925,4926],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":115,"searchDepth":128,"depth":134,"links":4928},[4929,4930,4931,4932],{"id":4572,"depth":128,"text":4573},{"id":4622,"depth":128,"text":4623},{"id":4702,"depth":128,"text":4703},{"id":4729,"depth":128,"text":4730},"2022-06-30","Si estabas buscando una herramienta para medir el tráfico de tu web de forma anónima tienes una buena opción: Chiffre.io.","blog\u002Fchiffreio",[4937,4938,4791,4939,4940,4941,4942,4943],"alternativa google analytics","alternativa ga","chiffreio","chiffre nuxt","chiffreio nuxt","analiticas anonimas","instalar chiffre nuxt",{},"\u002Fblog\u002Fanaliticas-web-anonimas-en-tu-proyecto-con-nuxt",{"title":4567,"description":4934},"blog\u002Fanaliticas-web-anonimas-en-tu-proyecto-con-nuxt",[2119,4949],"Analíticas","Con todas las regulaciones de protección de datos que existen actualmente es difícil encontrar una herramienta para medir el tráfico de tu sitio web de forma que tus usuarios no vean comprometida su información personal. Es por eso que estuve buscando algunas alternativas al conocidísimo Google Analytics y encontré una opción interesante: Chiffre.",[912],"aFz_hMAN45BpB98Bzp1Sbh6yg1OtFIPLEy0vS6aA53U",{"id":4954,"title":4955,"body":4956,"date":5186,"description":5187,"extension":896,"headerImage":5188,"isActive":149,"keywords":5189,"meta":5197,"navigation":149,"path":5198,"seo":5199,"stem":5200,"subject":5201,"summary":5203,"tags":5204,"__hash__":5206},"blog\u002Fblog\u002F20-barras.md","20 Barras",{"type":8,"value":4957,"toc":5178},[4958,4962,4968,4971,4974,4984,4990,4994,4997,5007,5010,5014,5020,5029,5032,5035,5044,5050,5054,5057,5064,5067,5073,5077,5088,5102,5106],[11,4959,4961],{"id":4960},"sobre-oz-beatmaker","Sobre Oz Beatmaker",[16,4963,4964,4965,47],{},"Algo importante sobre cualquier proyecto el el contexto, de dónde viene y a dónde va, y he tenido la oportunidad se conocerlo de primera mano gracias al creador y amigo ",[60,4966,4967],{},"Oz Beatmaker",[16,4969,4970],{},"Todo empezó por su pasión por la música. Desde que nos conocemos siempre está metido en alguna cosa relacionada con la música: Creando una base, haciendo un remix de alguna canción o video que le haya gustado, etc.",[16,4972,4973],{},"En nuestro grupo de amigos era normal que nos compartiera parte de su trabajo para que le diéramos nuestra opinión y la verdad es que a medida que iba haciendo bases se notaba que la calidad iba mejorando, por lo que se animaba a seguir creando más bases.",[16,4975,4976,4977,4980,4981,47],{},"Al poco tiempo decide abrir un canal de ",[60,4978,4979],{},"Youtube"," para compartir de forma pública sus creaciones y esto junta otra de sus pasiones: La edición de video. Es en este punto donde uno empieza a alegrarse por el progreso de sus amigos: Le invierten muchas horas y esfuerzo y poco a poco van saliendo cosas, como una de las primeras bases que publicó: ",[60,4982,4983],{},"Prisma",[935,4985,4986],{},[2191,4987],{"link":4988,"title":4989},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FMIGR9FCo9ro","Video embebido de Prisma por Oz Beatmaker",[11,4991,4993],{"id":4992},"el-nacimiento-de-20-barras","El nacimiento de 20 Barras",[16,4995,4996],{},"En este mismo grupo de amigos que comentaba antes existe un gusto por el rap siendo normal que compartamos canciones y hablemos de las que más nos gustan, pero además entre el grupo de amigos y conocidos se cuentan entre las filas algunos artistas (Dicho así suena como si nos viéramos a menudo con Kase 0 o Snoop Dogg) del mundo del rap.",[16,4998,4999,5000,5002,5003,5006],{},"El caso es que un buen día entró en la conversación una idea que ",[60,5001,4967],{}," llevaba pensando un tiempo: Quería crear una serie de bases para que diferentes raperos hicieran un tema sobre ellas. Pero había condiciones para hacerlo más interesante: ",[60,5004,5005],{},"Los temas tendrían solo 20 patrones"," (De ahí el nombre del proyecto), las bases estarían hechas para sacar al artista de su ritmo habitual y todos los temas tendrían videoclip.",[16,5008,5009],{},"Esto suena de lujo pero después me enteré del trabajo que implica todo esto que sobre el papel parece sencillo. Tanto crear la base como la letra del tema son los primeros pasos, pero luego viene el pensar todo el escenario del videoclip, grabaciones, repetir tomas, pensar en las luces, grabar el tema en un estudio (Cosa que no es barata), la postproducción, en fin una cantidad de pasos que hacen que realmente sea difícil llegar a tener el producto que esperas, pero que con dedicación y paciencia se logra.",[11,5011,5013],{"id":5012},"el-primer-20-barras","El primer 20 Barras",[16,5015,5016,5017,47],{},"En el primer video estuve bastante presente a parte de por lo que ya he contado, porque el primer rapero que se ofreció para empezar a tirar barras fue un amigo de muchos años atrás, que ya tiene unas cuantas maquetas y el culpable de que yo empezara a escuchar rap: ",[60,5018,5019],{},"Dvitto",[16,5021,5022,5023,5025,5026,5028],{},"Por un lado pude escuchar la base a medida que se iba terminando ya que ",[60,5024,4967],{}," nos iba compartiendo en privado los avances para que pudiéramos escucharlo, mientras que por el otro ",[60,5027,5019],{}," estaba cocinando la letra. He de decir que yo no tengo la más remota idea de música, por lo que yo estaba ahí como conejillo de Indias para escuchar el tema recién salido del horno. Parece una tontería pero es muy interesante como se van corrigiendo los sonidos: agudos, graves; y una vez está la letra con la base todo cuadra.",[16,5030,5031],{},"Y llega una de las partes difíciles, porque es algo agotador (Por suerte esta parte me la contaron): La grabación de las tomas para el video. No había un equipo de 40 personas trabajando en ello si no que eran las personas que buenamente podían ayudar y el equipo más de lo mismo, no hablamos de cámaras, focos de luces y escenarios de miles de euros, sino algo mucho más humilde.",[16,5033,5034],{},"Recuerdo que al final del día de la grabación estuvimos hablando y mientras me contaban cómo había ido se notaba la emoción y el entusiasmo: Esto iba a salir y pronto.",[16,5036,5037,5038,5040,5041,5043],{},"Una vez que ya estaba todo grabado le tocaba a ",[60,5039,4967],{}," encerrarse en casa a trabajar la postproducción y de igual manera que con la base y la canción, nos iba compartiendo los avances del video: Cambios de luces, animaciones, la introducción, los textos y finalmente tras un par de semanas estaba terminado. Se iba a publicar en ",[60,5042,4979],{}," y todos estábamos emocionados, llegaba el momento de compartir el trabajo al mundo y ver los resultados, mandarlo a amigos, familiares y a cualquiera que pudiera interesarle.",[935,5045,5046],{},[2191,5047],{"link":5048,"title":5049},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002F65-r8BYWSjU","Video embebido de 20 Barras por Oz Beatmaker y Dvitto",[11,5051,5053],{"id":5052},"el-segundo-tema","El segundo tema",[16,5055,5056],{},"El primer tema fue un éxito, buenas críticas y un buen sabor de boca. ¿Qué más se puede pedir cuando acabas de empezar? Pues otro tema. En este caso no estuve tan presente aunque si tuve mi papel de conejillo de Indias para escuchar la base y el tema.",[16,5058,5059,5060,5063],{},"Lo que me pareció más interesante de este segundo tema y el proceso de creación era la mejora, el como se aprende de las experiencias previas para superarse. Y eso es lo que creo que se ve en el segundo tema, en el cual participa el rapero ",[60,5061,5062],{},"Tito Sativo",", una mejora en la calidad del sonido y video el cual si me lo enseñaran diciendo que es de un productor famoso con mucho más dinero para invertirle al tema me lo creería sin problema.",[16,5065,5066],{},"No me quiero liar mucho más porque creo que el resultado habla por sí solo:",[935,5068,5069],{},[2191,5070],{"link":5071,"title":5072},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FSl3xiIlNY3s","Video embebido de 20 Barras por Oz Beatmaker y Tito Sativo",[11,5074,5076],{"id":5075},"estado-actual-del-proyecto","Estado actual del proyecto",[16,5078,5079,5080,5087],{},"El proyecto ha tenido un parón en el tiempo pero sé de buena fuente que hay carne en el asador así que si habéis escuchado los temas y os han gustado podéis apoyar ",[76,5081,5085],{"href":5082,"rel":5083,"title":5084},"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCYRWKT9jX2X3BVoI0fLlvZg",[80],"el canal de Youtube de Oz Beatmaker",[60,5086,5084],{},", que siempre viene bien saber que hay personas a las que les gusta lo que has creado.",[16,5089,5090,5091,4646,5094],{},"Yo desde este pequeño espacio quiero mandar mi apoyo al proyecto y espero ver el próximo tema pronto porque como ya le dije a ",[60,5092,5093],{},"Oz Beatmaker:",[5095,5096,5097,5098,5101],"em",{},"«",[5095,5099,5100],{},"No acepto menos de 20 temas en el proyecto","».",[11,5103,5105],{"id":5104},"redes-sociales-de-los-artistas","Redes sociales de los artistas",[83,5107,5108,5131,5152],{},[86,5109,5110,5112,5113],{},[60,5111,5019],{},":\n",[83,5114,5115,5123],{},[86,5116,5117,5118],{},"Soundcloud:  ",[76,5119,5120],{"href":5120,"rel":5121,"title":5122,":target":800},"https:\u002F\u002Fsoundcloud.com\u002Fdvitto",[80],"Canciones de Dvitto en Souncloud",[86,5124,5125,5126],{},"Youtube: ",[76,5127,5128],{"href":5128,"rel":5129,"title":5130,":target":800},"https:\u002F\u002Fwww.youtube.com\u002Fuser\u002Fdvitto",[80],"Canal de Youtube de Dvitto",[86,5132,5133,5112,5135],{},[60,5134,5062],{},[83,5136,5137,5145],{},[86,5138,5139,5140],{},"Soundcloud: ",[76,5141,5142],{"href":5142,"rel":5143,"title":5144,":target":800},"https:\u002F\u002Fsoundcloud.com\u002Ftitosativo",[80],"Canciones de Tito Sativo en Soundcloud",[86,5146,5125,5147],{},[76,5148,5149],{"href":5149,"rel":5150,"title":5151,":target":800},"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCUp6E-yt7adD0Y_HglpSScg",[80],"Canal de Youtube de Tito Sativo",[86,5153,5154,5112,5156],{},[60,5155,4967],{},[83,5157,5158,5163,5171],{},[86,5159,5125,5160],{},[76,5161,5082],{"href":5082,"rel":5162,"title":5082,":target":800},[80],[86,5164,5165,5166],{},"Instagram: ",[76,5167,5168],{"href":5168,"rel":5169,"title":5170,":target":800},"https:\u002F\u002Fwww.instagram.com\u002Fozbeatmaker\u002F",[80],"Oz beatmaker en Instagram",[86,5172,5139,5173],{},[76,5174,5175],{"href":5175,"rel":5176,"title":5177,":target":800},"https:\u002F\u002Fsoundcloud.com\u002Fozbeatmaker",[80],"Canciones de Oz Beatmaker en Instagram",{"title":115,"searchDepth":128,"depth":134,"links":5179},[5180,5181,5182,5183,5184,5185],{"id":4960,"depth":128,"text":4961},{"id":4992,"depth":128,"text":4993},{"id":5012,"depth":128,"text":5013},{"id":5052,"depth":128,"text":5053},{"id":5075,"depth":128,"text":5076},{"id":5104,"depth":128,"text":5105},"2022-06-29","Cómo nace un proyecto musical y se convierte en realidad: 20 Barras.","blog\u002Foz",[5190,5191,5192,5193,5194,5195,5196],"20 barras","20barras","ozbeatmaker","oz 20 barras","oz beatmaker","20 barras dvitto","20 barras tito",{},"\u002Fblog\u002F20-barras",{"title":4955,"description":5187},"blog\u002F20-barras",[5202],"rap","Estoy acostumbrado a meterme de lleno en proyectos tecnológicos como aplicaciones para móvil o websites y tras muchos años de experiencia es algo que comprendo y en lo que me siento cómodo, pero explorar otro tipo de proyectos pudiendo ver cómo nacen y finalmente salen a la luz es muy interesante ya que te aporta una visión distinta de cómo hacer las cosas. Y es precisamente de lo que quiero hablar hoy, un proyecto musical en el que tuve la oportunidad de conocer todos los detalles y aprender algo sobre cómo funcionan: 20 Barras.",[5205],"Música","Jnv0PZm0S3FdNSyZaEb8cCxT9j4hkSkc4GTrGking9A",{"id":5208,"title":5209,"body":5210,"date":5350,"description":5351,"extension":896,"headerImage":5352,"isActive":149,"keywords":5353,"meta":5361,"navigation":149,"path":5362,"seo":5363,"stem":5364,"subject":5365,"summary":5368,"tags":5369,"__hash__":5370},"blog\u002Fblog\u002Fla-paradoja-de-fermi.md","La paradoja de Fermi",{"type":8,"value":5211,"toc":5343},[5212,5216,5222,5225,5228,5235,5238,5242,5249,5252,5256,5259,5291,5295,5298,5301,5304,5307,5310,5313,5317],[11,5213,5215],{"id":5214},"qué-es-la-paradoja-de-fermi","¿Qué es la paradoja de Fermi?",[16,5217,5218,5219,47],{},"Como toda buena paradoja, la paradoja de Fermi nos muestra como partiendo de algunos razonamientos aparentemente válidos llegamos a contradicciones que nos dejan pensando por horas. En este caso la paradoja ",[60,5220,5221],{},"representa la lucha de la esperanza y el positivismo cuya campeona es la estadística, contra la dura y clara evidencia",[16,5223,5224],{},"Y es que, si nos paramos a pensar en el gran tamaño del Universo que conocemos, la cantidad de galaxias, estrellas y planetas que existen, se antoja egoísta pensar que realmente solo exista vida en nuestro planeta.",[16,5226,5227],{},"Gracias a la tecnología actual somos capaces de observar nuestro Sistema Solar, nuestra galaxia (la Vía Láctea) e incluso podemos ver más allá, llegando a rincones inhóspitos del Universo. Es por ello que comparando nuestro planeta con muchos otros, y teniendo en cuenta la ingente cantidad de ellos que hay solo en nuestra galaxia, se han encontrado algunos con condiciones aparentemente similares en sistemas \"vecinos\". Si además pensamos que hay millones de estrellas con planetas a su alrededor y algunos con condiciones aptas para que pueda formarse vida en ellos, la estadística parece estar a favor que no estemos solos.",[16,5229,5230,5231,5234],{},"Entonces ",[60,5232,5233],{},"¿Por qué no hemos contactado ni tenemos evidencias de que existan otras civilizaciones?"," Nuestro planeta es realmente joven con a penas unos 4.500 millones de años frente a los aproximadamente 14.000 millones de años del Universo. Si hubiera civilizaciones inteligentes que hayan prosperado y evolucionado más que la nuestra ¿Cómo es que no las vemos?",[16,5236,5237],{},"Lo bueno de la gran pregunta a si estamos solos o no es que solo hay dos posibles respuestas, aunque ambas son realmente desalentadoras. Por un lado si realmente estamos solos y la vida es algo tan extraordinario que solo se ha dado en nuestro planeta y no volverá a repetirse es algo muy triste, pero si hay otras civilizaciones incluso más avanzadas que la nuestra: ¿Dónde están? ¿Por qué no las vemos? ¿Existe acaso un problema para que las civilizaciones no puedan contactar o expandirse más allá de su planeta o sistema?",[11,5239,5241],{"id":5240},"el-gran-filtro","El Gran filtro",[16,5243,5244,5245,5248],{},"A raíz de preguntas como esta se planteó que ",[60,5246,5247],{},"tal vez exista un Gran filtro que impide que una civilización inteligente pueda prosperar más allá de su sistema planetario, su galaxia",". Puede que simplemente porque no sea físicamente posible llegar a un nivel tecnológico tal que permita expandirse más allá de estos límites o tal vez las civilizaciones tienen a la autodestrucción en su lucha por el avance tecnológico.",[16,5250,5251],{},"Esto plantearía dos nuevos escenarios: Hemos pasado el Gran filtro o aún no lo hemos pasado. Es decir, si el Gran filtro estaba marcado a la hora de evolucionar a una forma de vida inteligente y por lo tanto las formas de vida inteligentes son algo extraordinariamente inusual, ya lo habríamos superado. Por el contrario, si aún no hubiéramos superado ese Gran filtro, ya sea porque se requiere llegar a un nivel tecnológico más elevado o incluso porque nuestra especie no pueda superarlo biológicamente, estaríamos condenados a la extinción.",[11,5253,5255],{"id":5254},"soluciones-de-la-paradoja","Soluciones de la paradoja",[16,5257,5258],{},"Lo realmente interesante y bonito de una paradoja es que no tenga solución, pero en este caso, a lo largo de los años, numerosas aportaciones a la paradoja de Fermi han planteado posibles respuestas al por qué del silencio en el Universo. Estas son algunas de ellas:",[83,5260,5261,5267,5273,5279,5285],{},[86,5262,5263,5266],{},[60,5264,5265],{},"Somos únicos:"," Esta es una de las más simples, ya sea porque las condiciones de nuestro planeta ubicación en la galaxia y el universo son privilegiadas o por un golpe de suerte, estamos aquí y nunca antes ha existido otra civilización.",[86,5268,5269,5272],{},[60,5270,5271],{},"Desaparecieron",": Debido al Gran filtro o cualquier otro motivo que pueda escapar a nuestra imaginación ya no hay otras civilizaciones.",[86,5274,5275,5278],{},[60,5276,5277],{},"Hay vida, pero no inteligente",": Tal vez la inteligencia no es tan necesaria para la supervivencia como pensamos y es algo sumamente raro, un error que se ha dado solo en nuestra especie.",[86,5280,5281,5284],{},[60,5282,5283],{},"No les interesamos",": Si existen civilizaciones increíblemente evolucionadas y tecnológicamente avanzadas, tal vez no seamos de su interés o el coste de contactarnos no vale la pena. Podría ser incluso que sea peligroso comunicarse abiertamente debido a civilizaciones rivales.",[86,5286,5287,5290],{},[60,5288,5289],{},"Aún somos muy poco evolucionados",": Puede que grandes civilizaciones existan y no podamos unirnos a la fiesta simplemente porque nuestra tecnología aún no nos lo permite. Al igual que hace 200 años comunicarse por una aplicación móvil podría verse como algo ilógico tal vez estas civilizaciones cuenten con sistemas tan avanzados que escapan a nuestro entendimiento y por lo tanto aún no podemos oírlos.",[11,5292,5294],{"id":5293},"mi-opinión","Mi opinión",[16,5296,5297],{},"Esta paradoja me encanta porque pone a prueba no solo nuestra lógica si no nuestra capacidad creativa e imaginativa. Enfrentarnos a una pregunta así desde nuestra visión como humanos, nuestras limitaciones, creencias y culturas, nuestra forma de ver el mundo que nos rodea.",[16,5299,5300],{},"Un punto muy importante a tener en cuenta es que hace poco más de 100 años que nuestra tecnología nos ha permitido empezar a mirar más allá de nuestro planeta, por lo que acabamos de nacer para el Universo, somos un pequeño suspiro que está abriendo los ojos y empieza a mirar más allá sin saber muy bien dónde y qué buscar.",[16,5302,5303],{},"Si es cierto que la tecnología crece a gran velocidad pero intentar responder a estas cuestiones ahora es como empezar a ver una película de dos horas, y en el primer segundo querer saber el final. No obstante las respuestas que tiran más hacia esa visión de que somos especiales y únicos se me hacen un poco vagas, pensando un poco en la estadística de nuevo, seguramente, y dentro de lo poco común, somos lo más común. Pensar que somos la excepción de la excepción y que no hay ni habrá nunca otras formas de vida inteligentes se me hace difícil de imaginar.",[16,5305,5306],{},"Por otro lado, como especie nos pasa un poco como con la tecnología, somos los bebés de nuestro planeta, nuestra especie a penas tiene unos 350.000 años de edad. Tal vez otras civilizaciones ya han existido o están naciendo ahora mismo.",[16,5308,5309],{},"Si bien es cierto que no paramos de emitir ondas de radio al espacio exterior, estamos mandando sondas y nuestros telescopios cada vez pueden ver más lejos, no puedo evitar pensar en que si una civilización semejante a la nuestra estuviera haciendo lo mismo desde el otro lado de la Vía Láctea, que tiene unos 100.000 años luz de diámetro, o incluso hubiera emitido esas señales hace 10.000 años, aún tardaríamos 90.000 años en recibirlas, por lo que creo que nuestras generaciones no van a conocer la respuesta a esta paradoja.",[16,5311,5312],{},"Pero bueno, imaginar es gratis así que espero que si no conocías esta paradoja te dé un buen rato para pensar y tal vez encuentres alguna solución que nadie haya encontrado aún.",[11,5314,5316],{"id":5315},"enlaces-de-interés","Enlaces de interés",[83,5318,5319,5327,5335],{},[86,5320,5321,5322],{},"Enrico Fermi en Wikipedia: ",[76,5323,5324],{"href":5324,"rel":5325,"title":5326},"https:\u002F\u002Fes.wikipedia.org\u002Fwiki\u002FEnrico_Fermi",[80],"Ver página de Enrico Fermi en Wikipedia",[86,5328,5329,5330],{},"Más sobre la Paradoja de Fermi: ",[76,5331,5332],{"href":5332,"rel":5333,"title":5334},"https:\u002F\u002Fes.wikipedia.org\u002Fwiki\u002FParadoja_de_Fermi",[80],"La paradoja de Fermi en Wikipedia",[86,5336,5337,5338],{},"Astrobiología en Wikipedia: ",[76,5339,5340],{"href":5340,"rel":5341,"title":5342},"https:\u002F\u002Fes.wikipedia.org\u002Fwiki\u002FAstrobiolog%C3%ADa",[80],"Información sobre astrobiología en Wikipedia",{"title":115,"searchDepth":128,"depth":134,"links":5344},[5345,5346,5347,5348,5349],{"id":5214,"depth":128,"text":5215},{"id":5240,"depth":128,"text":5241},{"id":5254,"depth":128,"text":5255},{"id":5293,"depth":128,"text":5294},{"id":5315,"depth":128,"text":5316},"2022-06-21","¿Estamos solos en el Universo? La paradoja de Fermi nos ayuda a entender la complejidad de esta gran pregunta.","blog\u002Ffermi",[5354,5355,5356,5357,5358,5359,5360],"paradoja de fermi","paradoja fermi","fermi","paradoja","paradojas","astrobiologia","ciencia fermi",{},"\u002Fblog\u002Fla-paradoja-de-fermi",{"title":5209,"description":5351},"blog\u002Fla-paradoja-de-fermi",[5366,5367],"Paradojas","Astrobiología","Seguramente alguna vez te has preguntado si realmente estamos solos en el Universo y aunque aún no tenemos una respuesta, la ciencia lleva décadas intentando responder a esta gran pregunta, de hecho, el físico Enrico Fermi también quiso responder a esto, y fruto de sus reflexiones sobre este tema nace lo que hoy conocemos como la paradoja de Fermi.",[4010],"rdE80B4oWus6gOqe_r7oIDL6zvshvulrlW3vwkTMkQE",{"id":5372,"title":5373,"body":5374,"date":5745,"description":5746,"extension":896,"headerImage":5747,"isActive":149,"keywords":5748,"meta":5755,"navigation":149,"path":5756,"seo":5757,"stem":5758,"subject":5759,"summary":5760,"tags":5761,"__hash__":5762},"blog\u002Fblog\u002Fgestionar-redirecciones-permanentes-con-nuxt.md","Gestionar redirecciones permanentes con Nuxt",{"type":8,"value":5375,"toc":5738},[5376,5378,5395,5425,5428,5435,5440,5444,5451,5471,5474,5478,5496,5508,5518,5532,5545,5556,5583,5597,5682,5685,5689,5692,5703,5706,5730,5732,5735],[11,5377,14],{"id":13},[16,5379,5380,5381,5387,5390,5391,5394],{},"Antes de entrar a la solución es buena idea repasar bien el problema. Cuando hacemos una petición get por HTTP a una dirección web como ",[76,5382],{"href":5383,"rel":5384,"target":800},"https:\u002F\u002Fwww.example.com",[5385,5386],"noopener","noreferrer",[76,5388,5383],{"href":5383,"rel":5389},[80]," el protocolo va a buscar un fichero con nombre ",[60,5392,5393],{},"index"," para servirlo. Esta petición puede definirse de 3 formas:",[83,5396,5397,5406,5415],{},[86,5398,5399,5400,5403],{},"Petición a ",[76,5401],{"href":5383,"rel":5402,"target":800},[5385,5386],[76,5404,5383],{"href":5383,"rel":5405},[80],[86,5407,5399,5408,5412],{},[76,5409],{"href":5410,"rel":5411,"target":800},"https:\u002F\u002Fwww.example.com\u002F",[5385,5386],[76,5413,5410],{"href":5410,"rel":5414},[80],[86,5416,5399,5417,5421,5424],{},[76,5418],{"href":5419,"rel":5420,"target":800},"https:\u002F\u002Fwww.example.com\u002Findex.html",[5385,5386],[76,5422,5419],{"href":5419,"rel":5423},[80]," (U otra extensión)",[16,5426,5427],{},"Las 3 formas son perfectamente válidas y podemos utilizar cualquiera de ellas para servir el contenido de nuestra web (Está lógica aplica a cualquier otro directorio de la web).",[16,5429,5430,5431,5434],{},"El problema viene cuando empezamos a analizar el tráfico de nuestra web ya que ",[60,5432,5433],{},"encontraremos el tráfico segmentado"," en las peticiones posibles, lo que puede dificultar sacar las métricas. Pero algo más problemático es que en algunos casos podemos encontrarnos con que nuestras páginas sean consideradas como contenido duplicado por los buscadores, cosa que puede penalizarnos mucho.",[16,5436,5437,5438,47],{},"Por ello es importante definir una estrategia global en toda nuestra aplicación web para servir el contenido. Ahora vamos a ver cómo hacerlo de forma sencilla para tu aplicación de  ",[60,5439,2119],{},[11,5441,5443],{"id":5442},"definiendo-una-estrategia-de-urls","Definiendo una estrategia de urls",[16,5445,5446,5447,5450],{},"El primer paso es elegir cómo quieres que las urls estén disponibles en tu web. Por ejemplo vamos a suponer que quieres que todas terminen con la barra inclinada (",[60,5448,5449],{},"Slash",") final.",[16,5452,5453,5454,5457,5458,5461,5462,5466,5467,47],{},"Esto significará que todas tus urls ",[60,5455,5456],{},"canónicas"," van a estar definidas con la barra al final y tus enlaces internos deben incluir siempre el \"",[60,5459,5460],{},"\u002F","\". Por ejemplo un push a una url sería de la siguiente forma: ",[20,5463,5465],{"className":5464},[406],"$router.push('\u002Fsample-page\u002F')"," o de forma nativa ",[20,5468,5470],{"className":5469},[406],"window.location = '\u002Fsample-page\u002F'",[16,5472,5473],{},"Ahora que hemos definido cómo van a estar disponibles nuestras url pasamos a hacer las redirecciones automáticas.",[11,5475,5477],{"id":5476},"configurando-las-redirecciones","Configurando las redirecciones",[16,5479,5480,5481,5484,5485,5488,5489,5491,5492,5495],{},"Como vamos a querer que toda url que no acabe en ",[60,5482,5483],{},"slash"," sea redireccionada siempre a la url que sí lo tiene, vamos a configurar una ",[60,5486,5487],{},"redirección permanente",", de manera que nuestra aplicación al recibir peticiones en urls que no acaben en ",[60,5490,5483],{}," responderá con un código ",[60,5493,5494],{},"301"," y hará la redirección automática a la página con slash.",[16,5497,5498,5499,5502,5503,47],{},"Afortunadamente tenemos un ",[60,5500,5501],{},"módulo de Nuxt"," con el que podemos configurar de forma sencilla todo tipo de redirecciones: ",[76,5504,5505],{"href":5505,"rel":5506,"title":5507},"https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Fredirect-module#readme",[80],"Documentación del módulo redirect de Nuxt",[16,5509,5510,5511,5514,5515,416],{},"Lo podemos con ",[20,5512,4758],{"className":5513},[406]," o ",[20,5516,4775],{"className":5517},[406],[110,5519,5521],{"className":4748,"code":5520,"filename":4750,"language":4751,"meta":115,"style":115},"npm install @nuxtjs\u002Fredirect-module\n",[117,5522,5523],{"__ignoreMap":115},[20,5524,5525,5527,5529],{"class":121,"line":122},[20,5526,4758],{"class":1736},[20,5528,4761],{"class":1285},[20,5530,5531],{"class":1285}," @nuxtjs\u002Fredirect-module\n",[110,5533,5535],{"className":4748,"code":5534,"filename":4768,"language":4751,"meta":115,"style":115},"yarn add @nuxtjs\u002Fredirect-module\n",[117,5536,5537],{"__ignoreMap":115},[20,5538,5539,5541,5543],{"class":121,"line":122},[20,5540,4775],{"class":1736},[20,5542,4778],{"class":1285},[20,5544,5531],{"class":1285},[16,5546,5547,5548,5551,5552,416],{},"Una vez instalado el paquete añadimos el módulo a Nuxt. Dentro del fichero ",[20,5549,1427],{"className":5550},[23]," en el atributo ",[20,5553,5555],{"className":5554},[406],"modules",[110,5557,5559],{"className":1253,"code":5558,"filename":1427,"language":1256,"meta":115,"style":115},"modules: [\n  '@nuxtjs\u002Fredirect-module'\n]\n",[117,5560,5561,5570,5579],{"__ignoreMap":115},[20,5562,5563,5565,5567],{"class":121,"line":122},[20,5564,5555],{"class":1736},[20,5566,416],{"class":1270},[20,5568,5569],{"class":1325}," [\n",[20,5571,5572,5574,5577],{"class":121,"line":128},[20,5573,1684],{"class":1270},[20,5575,5576],{"class":1285},"@nuxtjs\u002Fredirect-module",[20,5578,1365],{"class":1270},[20,5580,5581],{"class":121,"line":134},[20,5582,1705],{"class":1325},[16,5584,5585,5586,5588,5589,5593,5594,5596],{},"Ya tenemos instalado el módulo por lo que vamos a aplicar la configuración para que todas las rutas acaben con ",[60,5587,5483],{},". Para ello creamos el atributo ",[20,5590,5592],{"className":5591},[406],"redirect"," dentro de la configuración de ",[60,5595,2119],{}," (Puedes ponerlo justo debajo de los módulos):",[110,5598,5600],{"className":1253,"code":5599,"filename":1427,"language":1256,"meta":115,"style":115},"redirect: [\n  { from: '^.*(?\u003C!\u002F)$', to: (from, req) => req.url + '\u002F', statusCode: 301 }\n]\n",[117,5601,5602,5610,5678],{"__ignoreMap":115},[20,5603,5604,5606,5608],{"class":121,"line":122},[20,5605,5592],{"class":1736},[20,5607,416],{"class":1270},[20,5609,5569],{"class":1325},[20,5611,5612,5615,5618,5620,5622,5625,5627,5629,5632,5634,5636,5639,5641,5644,5646,5648,5650,5652,5655,5658,5660,5662,5664,5666,5669,5671,5675],{"class":121,"line":128},[20,5613,5614],{"class":1270},"  {",[20,5616,5617],{"class":1276}," from",[20,5619,416],{"class":1270},[20,5621,1282],{"class":1270},[20,5623,5624],{"class":1285},"^.*(?\u003C!\u002F)$",[20,5626,1289],{"class":1270},[20,5628,1480],{"class":1270},[20,5630,5631],{"class":1445}," to",[20,5633,416],{"class":1270},[20,5635,1555],{"class":1270},[20,5637,5638],{"class":1307},"from",[20,5640,1480],{"class":1270},[20,5642,5643],{"class":1307}," req",[20,5645,1594],{"class":1270},[20,5647,1597],{"class":1318},[20,5649,5643],{"class":1325},[20,5651,47],{"class":1270},[20,5653,5654],{"class":1325},"url ",[20,5656,5657],{"class":1270},"+",[20,5659,1282],{"class":1270},[20,5661,5460],{"class":1285},[20,5663,1289],{"class":1270},[20,5665,1480],{"class":1270},[20,5667,5668],{"class":1276}," statusCode",[20,5670,416],{"class":1270},[20,5672,5674],{"class":5673},"sbssI"," 301",[20,5676,5677],{"class":1270}," }\n",[20,5679,5680],{"class":121,"line":134},[20,5681,1705],{"class":1325},[16,5683,5684],{},"Es importante que indiquemos que el código de redirección sea 301 ya que queremos que aparezca la redirección como permanente.",[11,5686,5688],{"id":5687},"probando-las-redirecciones","Probando las redirecciones",[16,5690,5691],{},"Tenemos todo listo y configurado por lo que vamos a probarlo. Al ejecutar nuestra aplicación en local y acceder a cualquier url, vamos a utilizar el inspector de nuestro navegador para comprobar que todo funciona como esperamos.",[16,5693,5694,5695,5698,5699,5702],{},"Para ello abrimos la pestaña ",[60,5696,5697],{},"Network"," y filtramos por peticiones a documentos (Subpestaña ",[60,5700,5701],{},"Doc","). De esta forma vemos las peticiones a los documentos HTML que sirven nuestras url.",[16,5704,5705],{},"Si inspeccionamos por ejemplo las peticiones de esta página podremos comprobar que hemos aplicado los cambios de la redirección mirando las cabeceras de las peticiones HTTP.",[83,5707,5708,5719],{},[86,5709,5710,5711,416,5713,5716],{},"Petición terminada en ",[60,5712,5483],{},[5714,5715],"br",{},[2159,5717],{"alt":115,"src":5718},"\u002Fimages\u002Fredirect-200.webp",[86,5720,5721,5722,416,5725,5727],{},"Petición sin ",[60,5723,5724],{},"slash redireccionada con 301",[5714,5726],{},[2159,5728],{"alt":115,"src":5729},"\u002Fimages\u002Fredirect-301.webp",[11,5731,3844],{"id":3843},[16,5733,5734],{},"Es muy sencillo gestionar las redirecciones permanentes con este módulo, pero igualmente te recomiendo echarle un vistazo porque tiene varias opciones interesantes y puedes configurar otro tipo de redirecciones como varias páginas a una sola u otros trucos más avanzados.",[865,5736,5737],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":115,"searchDepth":128,"depth":134,"links":5739},[5740,5741,5742,5743,5744],{"id":13,"depth":128,"text":14},{"id":5442,"depth":128,"text":5443},{"id":5476,"depth":128,"text":5477},{"id":5687,"depth":128,"text":5688},{"id":3843,"depth":128,"text":3844},"2022-06-07","Aprende a gestionar las redirecciones HTTP permanentes en tu sitio web con Nuxt.","blog\u002Fnuxt-redirect",[5749,5750,5751,5752,5753,5754],"nuxt redirect","redireccion 301 nuxt","301 nuxt","nuxt slash final","redireccion nuxt","nuxt",{},"\u002Fblog\u002Fgestionar-redirecciones-permanentes-con-nuxt",{"title":5373,"description":5746},"blog\u002Fgestionar-redirecciones-permanentes-con-nuxt",[2119,3877],"Si tienes problemas con las redirecciones en tu aplicación con Nuxt y quieres saber como unificar tus url y mantener una misma estructura de cara a optimizar tus urls para SEO y evitar contenido duplicado, te interesa este artículo.",[912],"TIBfFflSjcCzEc6KqBrJLnCyDPTGMsDp-UCEpIE_U6M",{"id":5764,"title":5765,"body":5766,"date":6034,"description":6035,"extension":896,"headerImage":6036,"isActive":149,"keywords":6037,"meta":6046,"navigation":149,"path":6047,"seo":6048,"stem":6049,"subject":6050,"summary":6052,"tags":6053,"__hash__":6054},"blog\u002Fblog\u002Fentrenar-en-casa-nivel-principiante.md","Entrenar en casa nivel principiante",{"type":8,"value":5767,"toc":6022},[5768,5772,5775,5790,5797,5803,5807,5813,5819,5822,5831,5835,5842,5848,5854,5858,5865,5870,5874,5877,5884,5890,5893,5899,5903,5906,5913,5919,5923,5929,5935,5939,5946,5952,5956,5962,5968,5972,5975,6013,6016],[11,5769,5771],{"id":5770},"de-qué-va-esto","¿De qué va esto?",[16,5773,5774],{},"Hace tiempo que quería volver a retomar el deporte y el ejercicio porque es algo que siempre ha estado presente en mi vida, pero por unas cosas u otras al final lo vas dejando y nunca sacas un rato para cuidarte un poco.",[16,5776,5777,5778,5780,5781,5789],{},"Como me daba muchísima pereza apuntarme a un gimnasio e ir después del trabajo empecé a buscar otras opciones y encontré que hay una persona (Hay muchas otras pero su estilo me llamó la atención desde el primer momento) que se dedica a subir videos de rutinas para entrenar en ",[60,5779,4979],{},". Estoy hablando de ",[76,5782,5786],{"href":5783,"rel":5784,"title":5785},"https:\u002F\u002Fwww.youtube.com\u002Fc\u002FChuyAlmada",[80],"Canal de Youtube de Chuy Almada",[60,5787,5788],{},"Chuy Almada"," y el motivo principal por el que me encantan sus rutinas es que las hace al momento contigo te anima cada segundo y sufre contigo, se centra mucho en motivarte y de verdad que te ayuda a no dejarlo a la mitad.",[16,5791,5792,5793,5796],{},"La principal diferencia con el entrenamiento al que estaba acostumbrado en el gimnasio de hacer ciertas repeticiones y tablas de ejercicios que al final me acababan aburriendo, es que estos ejercicios son muy variados y nunca buscas hacer un número de repeticiones si no que se trata ",[60,5794,5795],{},"de superarte cada día",". Nunca cuentas repeticiones, te esfuerzas al máximo en cada una y si en un ejercicio solo puedes hacer una repetición, no pasa nada al día siguiente podrás dos.",[16,5798,5799,5800,5802],{},"Al principio da muchísima pereza y tu mente te va a decir que no lo hagas, que no puedes y que cómo vas a hacer tú lo mismo que ",[60,5801,5788],{},". Pero de verdad que con este tipo de entrenamiento vas a notar una mejora cada día, pequeña pero se nota desde el primer día (además de las agujetas).",[11,5804,5806],{"id":5805},"plan-de-inicio","Plan de inicio",[16,5808,5809,5810,5812],{},"En su canal de Youtube ",[60,5811,5788],{}," una gran cantidad de rutinas de todo tipo para entrenar todo el cuerpo, algunas son realmente duras pero poco a poco si empiezas a entrenar vas a poder hacerlas todas.",[16,5814,5815,5818],{},[60,5816,5817],{},"En muchas rutinas no vas a necesitar material alguno",", pero muchas requieren unas mancuernas, lo cual considero una excelente inversión para tener un par en casa (A la larga es más barato que apuntarte al gimnasio y no ir). Y si no puedes comprar unas, empieza llenando dos botellas de agua de dos litros y te va a servir para empezar.",[16,5820,5821],{},"Otra cosa importante es que el objetivo de este plan no es estar super musculado en un mes, si no empezar a cuidar nuestra salud con un poco de ejercicio. Más adelante también hablaré de otras rutinas más avanzadas.",[16,5823,5824,5825,5827,5828],{},"Por todo ello vamos a empezar con las rutinas de ",[60,5826,5788],{}," que os propongo para empezar desde cero, sin ningún nivel previo. El primer paso es plantearse el cambio, aunque sea sólo mira el primer video y verás que es sencillo y corto. ",[60,5829,5830],{},"¡Anímate, puedes hacerlo!",[11,5832,5834],{"id":5833},"calentamiento","Calentamiento",[16,5836,5837,5838,5841],{},"Este primer video es un calentamiento de unos ",[60,5839,5840],{},"7 minutos"," es bastante fácil y te va a acelerar el corazón si llevas tiempo sin hacer ejercicio o empiezas hoy. Pero no le tengas miedo sólo es un calentamiento. Y si aún tienes pereza de hacer una rutina completa: Hoy es el primer día, haz sólo este calentamiento y vuelve mañana a repetirlo. Verás que puedes con ello y seguramente te animarás a hacer el siguiente.",[935,5843,5844],{},[2191,5845],{"link":5846,"title":5847},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FzykDJg8JA3Y","Video embebido de calentamiento con Chuy Almada",[16,5849,5850,5851],{},"Ahora que ya has hecho este calentamiento elige alguna de las siguientes rutinas y ",[60,5852,5853],{},"¡A por ella!",[11,5855,5857],{"id":5856},"rutina-de-cardio","Rutina de cardio",[16,5859,5860,5861,5864],{},"Esta rutina está muy bien para empezar a ganar resistencia y no ahogarnos hasta para ir a comprar el pan. Seguramente el primer día cuando la termines ya no quieras hacer nada más, pero ya has hecho una buenísima rutina de cardio, vas por el buen camino. Son sólo unos ",[60,5862,5863],{},"10 minutos"," en los que no vas a parar de hacer una buena variedad de ejercicios.",[935,5866,5867],{},[2191,5868],{"link":5869,"title":5847},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FYcbFnIoZfp8",[11,5871,5873],{"id":5872},"rutina-de-core","Rutina de core",[16,5875,5876],{},"Aquí puede empezar a complicarse la cosa, porque normalmente el core (Abdominales y lumbares) es lo que más flojo tenemos por pasar mucho tiempo sentados pero es muy importante porque una vez que empiezas a ganar fuerza en estas zonas, el resto de rutinas se te hacen más fáciles ya que tu cuerpo tiene más estabilidad. Ojo no hablo de sacar el six pack si no de ganar fuerza en la zona.",[16,5878,5879,5880,5883],{},"Hacer abdominales es odioso y cuesta mucho, pero inténtalo, recuerda que solo compites contra ti es una lucha por mejorarte cada día. Si solo puedes hacer 4 repeticiones de cada ejercicio céntrate en hacerlas bien, con buena técnica y verás que al siguiente día harás más. Esta rutina son unos ",[60,5881,5882],{},"15 minutos",", no necesita materiales pero si tienes una esterilla para tumbarte en el suelo será más cómodo.",[935,5885,5886],{},[2191,5887],{"link":5888,"title":5889},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002Fdg5NFMrqbqY","Video embebido de rutina de abdominales con Chuy Almada",[16,5891,5892],{},"Aún así esta puede ser muy dura al principio por lo que si crees que te va mejor una más sencilla te dejo esta que son ejercicios de abdominales de pie, sin tumbarse. De inicio me parece más sencilla aunque con la primera notas mucho más el trabajo de los músculos (Yo suelo alterar entre ellas según el ánimo que tenga ese día)",[935,5894,5895],{},[2191,5896],{"link":5897,"title":5898},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002F_9Db1ug1Of4","Video embebido de rutina de abdominales de pie con Chuy Almada",[11,5900,5902],{"id":5901},"rutina-de-brazos","Rutina de brazos",[16,5904,5905],{},"Aquí viene mi preferida, es dura pero me encanta porque de verdad te hace notar todos los músculos de los brazos cargados como nunca. Ni en mi época de ir al gimnasio 2 horas al día sentía tan cargados los músculos. Para esta rutina de brazos vas a necesitar unas mancuernas y con unas de 2 kilos vas a notar ardor en los músculos, pero si aunque no tengas buena forma eres una persona corpulenta seguramente quieras empezar con unas de 5 kilos.",[16,5907,5908,5909,5912],{},"No te rindas con esta rutina, te aseguro que vale mucho la pena, vas a ganar mucha fuerza en los brazos rápidamente. Son unos ",[60,5910,5911],{},"20 minutos"," en los que vas a sufrir mucho pero de verdad que vas a notar los resultados.",[935,5914,5915],{},[2191,5916],{"link":5917,"title":5918},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FXpPf0HJSEo4","Video embebido de entrenamiento de brazos con Chuy Almada",[11,5920,5922],{"id":5921},"rutina-de-hombros","Rutina de hombros",[16,5924,5925,5926,5928],{},"Para esta vas a necesitar unas mancuernas también pero es más sencilla que la anterior. Es pesada al principio pero en cuanto la hagas un par de veces le vas a pillar el truco. Dura unos ",[60,5927,5863],{}," y está enfocada a la zona de los hombros.",[935,5930,5931],{},[2191,5932],{"link":5933,"title":5934},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FezeZR-QgDSs","Video embebido de entrenamiento de hombros con Chuy Almada",[11,5936,5938],{"id":5937},"rutina-de-espalda","Rutina de espalda",[16,5940,5941,5942,5945],{},"En esta rutina pasa algo contrario a las demás, parece que va a ser muy sencilla pero si te la tomas en serio al final acaba siendo dura. Dura ",[60,5943,5944],{},"12 minutos"," y salvo una esterilla para el suelo y una toalla no vas a necesitar más material.",[935,5947,5948],{},[2191,5949],{"link":5950,"title":5951},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FNyRSsVb9ydg","Video embebido de entrenamiento de espalda con Chuy Almada",[11,5953,5955],{"id":5954},"rutina-de-pecho","Rutina de pecho",[16,5957,5958,5959,5961],{},"No podía faltar una rutina de pecho y esta es bastante completa, dura unos ",[60,5960,5911],{}," y aunque no es tan dura como la de brazos te hará sudar y sufrir. Esta te recomiendo que empieces a hacerla una vez que hayas hecho las demás para que tu cuerpo ya se haya adaptado al ejercicio.",[935,5963,5964],{},[2191,5965],{"link":5966,"title":5967},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002Fu9-UIGFrYq0","Video embebido de entrenamiento de pecho con Chuy Almada",[11,5969,5971],{"id":5970},"consejos","Consejos",[16,5973,5974],{},"Para terminar te dejo algunos consejos que debes tener en cuenta en todos los entrenamientos:",[83,5976,5977,5983,5986,5992,5998,6004],{},[86,5978,5979,5980,47],{},"Come bien durante el día para rendir bien. ",[60,5981,5982],{},"Cómete un plátano media hora antes de entrenar",[86,5984,5985],{},"Entrena siempre con una botella de agua cerca ya que necesitas tener una buena hidratación, y sudas mucho con estos entrenamientos.",[86,5987,5988,5991],{},[60,5989,5990],{},"Calidad mejor que cantidad",". No se trata de hacer muchas repeticiones si no de buena calidad, una repetición bien hecha es mejor que 10 mal hechas.",[86,5993,5994,5997],{},[60,5995,5996],{},"No te rindas",". Tal vez un día no tienes muchas ganas de entrenar o poco tal vez tengas tiempo. No importa haz sólo una rutina de 10 minutos, incluso el calentamiento, es mejor un poco de ejercicio que nada. Pero el día que te sientas a tope de energía, prueba a hacer varias rutinas seguidas.",[86,5999,6000,6003],{},[60,6001,6002],{},"Descansa",". Es importante dormir y descansar bien porque si no cuando nos ponemos a entrenar nos faltan las fuerzas y cuesta mucho más terminar las rutinas.",[86,6005,6006,6009,6010,47],{},[60,6007,6008],{},"No tienes que cambiar todo en un día",". No te enfoques en cambiar de dieta, hacer ejercicio, tener un horario estricto de entrenamiento y cualquier otra cosa que quieras cambiar a la vez. Hazlo poco a poco, para que tu cuerpo se adapte al cambio. Tal vez la primera semana con entrenar 3 días tu cuerpo no va a quejarse mucho, la siguiente semana puedes cambiar algo de tu alimentación, y la siguiente añadir una nueva rutina a tu entrenamiento. ",[60,6011,6012],{},"No tener prisa pero ser constante es la clave del éxito",[16,6014,6015],{},"Yo llevo unos meses haciendo estos cambios e incluyendo poco a poco más rutinas, mejor alimentación, mejor descanso y de verdad que se notan los cambios. Te sientes con más energía, de mejor humor he incluso notas tu cuerpo más saludable. Así que de verdad, te recomiendo que te animes a empezar con estas rutinas si te estás planteando un cambio.",[16,6017,6018,6019,6021],{},"Y por último si te has animado y te está gustando tanto como a mí, apoya a ",[60,6020,5788],{}," siguiéndole en sus redes porque creo que está haciendo un trabajo excelente y con un pequeño gesto se le puede ayudar mucho.",{"title":115,"searchDepth":128,"depth":134,"links":6023},[6024,6025,6026,6027,6028,6029,6030,6031,6032,6033],{"id":5770,"depth":128,"text":5771},{"id":5805,"depth":128,"text":5806},{"id":5833,"depth":128,"text":5834},{"id":5856,"depth":128,"text":5857},{"id":5872,"depth":128,"text":5873},{"id":5901,"depth":128,"text":5902},{"id":5921,"depth":128,"text":5922},{"id":5937,"depth":128,"text":5938},{"id":5954,"depth":128,"text":5955},{"id":5970,"depth":128,"text":5971},"2022-06-06","Empieza a entrenar desde nivel principiante y mejora tu salud y aspecto físico.","blog\u002Fworkout",[6038,6039,6040,6041,6042,6043,6044,6045],"chuy","chuyalmada","workout chuy","workout","entrenamiento chuy","chuy almada","entrenamiento thebyteland","entrenamiento",{},"\u002Fblog\u002Fentrenar-en-casa-nivel-principiante",{"title":5765,"description":6035},"blog\u002Fentrenar-en-casa-nivel-principiante",[6051],"Entrenamiento","Si estás pensando en empezar a entrenar o quieres volver a hacerlo pero no tienes tiempo para ir al gimnasio aquí tienes un plan que te va a cambiar la vida.",[2243],"Hj4-Zfd5dwfMbhy60qBDngMd1pQz55hGrZVzKKMyftM",{"id":6056,"title":6057,"body":6058,"date":6784,"description":6785,"extension":896,"headerImage":6786,"isActive":149,"keywords":6787,"meta":6793,"navigation":149,"path":3429,"seo":6794,"stem":6795,"subject":6796,"summary":6798,"tags":6799,"__hash__":6800},"blog\u002Fblog\u002Fcrea-un-componente-breadcrumb-optimizado-para-seo-con-vue.md","Crea un componente Breadcrumb optimizado para SEO con Vue",{"type":8,"value":6059,"toc":6777},[6060,6064,6071,6074,6080,6087,6091,6102,6268,6275,6391,6394,6398,6410,6426,6433,6687,6690,6726,6730,6740,6747,6752,6755,6760,6766,6768,6771,6774],[11,6061,6063],{"id":6062},"para-empezar-qué-es-un-breadcrumb","Para empezar: ¿Qué es un breadcrumb?",[16,6065,6066,6067,6070],{},"El término ",[60,6068,6069],{},"breadcrumb"," viene del inglés y hace referencia a un camino de migas que por ejemplo dejaron Hansel y Gretel al adentrarse en el bosque para saber cómo volver a casa.",[16,6072,6073],{},"Si lo aplicamos a nuestro sitio web y nuestros usuarios con Hansel y Gretel, queremos dejarles una buena guía para saber cómo moverse por nuestra web a medida que se adentren en ella, ya que una web grande con muchas páginas de contenido puede ser tan abrumadora como aquel bosque.",[16,6075,6076,6077,6079],{},"Por ello nuestro ",[60,6078,6069],{}," debe indicar de forma clara una serie de enlaces que indiquen la estructura de la web y a través de los cuales un usuario pueda navegar a otras secciones fácilmente.",[16,6081,6082,6083,6086],{},"Además si definimos una estructura acorde con el modelo de estructuras de ",[76,6084,2537],{"href":2537,"rel":6085,"title":2537},[80]," también ayudamos a los robots de los buscadores a entender cómo funciona nuestra web.",[11,6088,6090],{"id":6089},"creando-el-componente","Creando el componente",[16,6092,6093,6094,6096,6097,6101],{},"Ahora que sabemos un poco más de teoría, vamos a la práctica. Podemos empezar creando una estructura muy básica para la lógica del componente ",[60,6095,6069],{},". Creamos el fichero ",[20,6098,6100],{"className":6099},[23],"Breadcrumb.vue"," y añadimos una estructura básica de enlaces.",[110,6103,6106],{"className":1253,"code":6104,"filename":6105,"language":1256,"meta":115,"style":115},"export default {\n  name: 'Breadcrumb',\n\n  data() {\n    return {\n      list: [\n        { href: 'https:\u002F\u002Fwww.example.com', text: 'Home' },\n        { href: 'https:\u002F\u002Fwww.example.com\u002Fblog', text: 'Blog' },\n        { href: 'https:\u002F\u002Fwww.example.com\u002Fblog\u002Ffirst-post', text: 'First Post' }\n      ]\n    }\n  }\n}\n",".\u002Fcomponents\u002FBreadcrumb.vue",[117,6107,6108,6116,6131,6135,6144,6150,6159,6192,6221,6251,6256,6260,6264],{"__ignoreMap":115},[20,6109,6110,6112,6114],{"class":121,"line":122},[20,6111,1264],{"class":1263},[20,6113,1267],{"class":1263},[20,6115,1271],{"class":1270},[20,6117,6118,6120,6122,6124,6127,6129],{"class":121,"line":128},[20,6119,1277],{"class":1276},[20,6121,416],{"class":1270},[20,6123,1282],{"class":1270},[20,6125,6126],{"class":1285},"Breadcrumb",[20,6128,1289],{"class":1270},[20,6130,1292],{"class":1270},[20,6132,6133],{"class":121,"line":134},[20,6134,150],{"emptyLinePlaceholder":149},[20,6136,6137,6140,6142],{"class":121,"line":140},[20,6138,6139],{"class":1276},"  data",[20,6141,1449],{"class":1270},[20,6143,1271],{"class":1270},[20,6145,6146,6148],{"class":121,"line":146},[20,6147,1344],{"class":1263},[20,6149,1271],{"class":1270},[20,6151,6152,6155,6157],{"class":121,"line":153},[20,6153,6154],{"class":1276},"      list",[20,6156,416],{"class":1270},[20,6158,5569],{"class":1276},[20,6160,6161,6164,6167,6169,6171,6173,6175,6177,6180,6182,6184,6187,6189],{"class":121,"line":159},[20,6162,6163],{"class":1270},"        {",[20,6165,6166],{"class":1276}," href",[20,6168,416],{"class":1270},[20,6170,1282],{"class":1270},[20,6172,5383],{"class":1285},[20,6174,1289],{"class":1270},[20,6176,1480],{"class":1270},[20,6178,6179],{"class":1276}," text",[20,6181,416],{"class":1270},[20,6183,1282],{"class":1270},[20,6185,6186],{"class":1285},"Home",[20,6188,1289],{"class":1270},[20,6190,6191],{"class":1270}," },\n",[20,6193,6194,6196,6198,6200,6202,6205,6207,6209,6211,6213,6215,6217,6219],{"class":121,"line":165},[20,6195,6163],{"class":1270},[20,6197,6166],{"class":1276},[20,6199,416],{"class":1270},[20,6201,1282],{"class":1270},[20,6203,6204],{"class":1285},"https:\u002F\u002Fwww.example.com\u002Fblog",[20,6206,1289],{"class":1270},[20,6208,1480],{"class":1270},[20,6210,6179],{"class":1276},[20,6212,416],{"class":1270},[20,6214,1282],{"class":1270},[20,6216,2897],{"class":1285},[20,6218,1289],{"class":1270},[20,6220,6191],{"class":1270},[20,6222,6223,6225,6227,6229,6231,6234,6236,6238,6240,6242,6244,6247,6249],{"class":121,"line":170},[20,6224,6163],{"class":1270},[20,6226,6166],{"class":1276},[20,6228,416],{"class":1270},[20,6230,1282],{"class":1270},[20,6232,6233],{"class":1285},"https:\u002F\u002Fwww.example.com\u002Fblog\u002Ffirst-post",[20,6235,1289],{"class":1270},[20,6237,1480],{"class":1270},[20,6239,6179],{"class":1276},[20,6241,416],{"class":1270},[20,6243,1282],{"class":1270},[20,6245,6246],{"class":1285},"First Post",[20,6248,1289],{"class":1270},[20,6250,5677],{"class":1270},[20,6252,6253],{"class":121,"line":176},[20,6254,6255],{"class":1276},"      ]\n",[20,6257,6258],{"class":121,"line":182},[20,6259,1804],{"class":1270},[20,6261,6262],{"class":121,"line":188},[20,6263,1370],{"class":1270},[20,6265,6266],{"class":121,"line":194},[20,6267,1375],{"class":1270},[16,6269,6270,6271,6274],{},"Y para pintar los datos vamos a agregar una ",[20,6272,975],{"className":6273},[406]," que pinte todos estos enlaces.",[110,6276,6278],{"className":3445,"code":6277,"filename":6105,"language":3447,"meta":115,"style":115},"\u003Ctemplate>\n  \u003Col>\n    \u003Cli v-for=\"(item, index) in list\" :key=\"`breadcrumbItem${index}`\">\n      \u003Ca :href=\"item.href\">\n        {{ item.text }}\n      \u003C\u002Fa>\n    \u003C\u002Fli>\n  \u003C\u002Fol>\n\u003C\u002Ftemplate>\n",[117,6279,6280,6288,6297,6330,6351,6356,6365,6374,6383],{"__ignoreMap":115},[20,6281,6282,6284,6286],{"class":121,"line":122},[20,6283,3454],{"class":1270},[20,6285,975],{"class":1276},[20,6287,137],{"class":1270},[20,6289,6290,6293,6295],{"class":121,"line":128},[20,6291,6292],{"class":1270},"  \u003C",[20,6294,987],{"class":1276},[20,6296,137],{"class":1270},[20,6298,6299,6302,6304,6307,6309,6311,6314,6316,6319,6321,6323,6326,6328],{"class":121,"line":134},[20,6300,6301],{"class":1270},"    \u003C",[20,6303,86],{"class":1276},[20,6305,6306],{"class":1318}," v-for",[20,6308,3462],{"class":1270},[20,6310,2608],{"class":1270},[20,6312,6313],{"class":1285},"(item, index) in list",[20,6315,2608],{"class":1270},[20,6317,6318],{"class":1318}," :key",[20,6320,3462],{"class":1270},[20,6322,2608],{"class":1270},[20,6324,6325],{"class":1285},"`breadcrumbItem${index}`",[20,6327,2608],{"class":1270},[20,6329,137],{"class":1270},[20,6331,6332,6335,6337,6340,6342,6344,6347,6349],{"class":121,"line":140},[20,6333,6334],{"class":1270},"      \u003C",[20,6336,76],{"class":1276},[20,6338,6339],{"class":1318}," :href",[20,6341,3462],{"class":1270},[20,6343,2608],{"class":1270},[20,6345,6346],{"class":1285},"item.href",[20,6348,2608],{"class":1270},[20,6350,137],{"class":1270},[20,6352,6353],{"class":121,"line":146},[20,6354,6355],{"class":1325},"        {{ item.text }}\n",[20,6357,6358,6361,6363],{"class":121,"line":153},[20,6359,6360],{"class":1270},"      \u003C\u002F",[20,6362,76],{"class":1276},[20,6364,137],{"class":1270},[20,6366,6367,6370,6372],{"class":121,"line":159},[20,6368,6369],{"class":1270},"    \u003C\u002F",[20,6371,86],{"class":1276},[20,6373,137],{"class":1270},[20,6375,6376,6379,6381],{"class":121,"line":165},[20,6377,6378],{"class":1270},"  \u003C\u002F",[20,6380,987],{"class":1276},[20,6382,137],{"class":1270},[20,6384,6385,6387,6389],{"class":121,"line":170},[20,6386,3504],{"class":1270},[20,6388,975],{"class":1276},[20,6390,137],{"class":1270},[16,6392,6393],{},"Normalmente los breadcrumbs se suelen colocar al inicio de la página por lo que puedes importar y usar el nuevo componente en cualquiera de tus páginas (En la página principal no es necesario).",[11,6395,6397],{"id":6396},"optimizando-el-breadcrumb-para-seo","Optimizando el breadcrumb para SEO",[16,6399,6400,6401,6405,6406,47],{},"Existen diferentes tipos de estructuras de datos dentro del estándar, pero en este caso vamos a utilizar el de ",[20,6402,6404],{"className":6403},[406],"BreadcrumbList",", que podemos encontrar documentado con todos sus atributos en ",[76,6407,6408],{"href":6408,"rel":6409,"title":6408},"https:\u002F\u002Fschema.org\u002FBreadcrumbList",[80],[16,6411,6412,6413,1555,6416,6419,6420,5514,6423,47],{},"En este caso vamos a implementar la estructura con la notación ",[60,6414,6415],{},"RDFa",[5095,6417,6418],{},"Resource Description Framework in Attributes","), pero según tus preferencias o requerimientos puedes utilizar ",[60,6421,6422],{},"Microdata",[60,6424,6425],{},"JSON-LD",[16,6427,6428,6429,6432],{},"Para indicar en nuestro HTML que vamos a utilizar un modelo es necesario indicarlo en la etiqueta HTML que va a englobar el contenido donde pueden encontrarse los datos del modelo. Una vez hecho esto podemos definir los atributos del modelo, por lo que vamos a modificar un poco el ",[20,6430,975],{"className":6431},[406]," de nuestro componente.",[110,6434,6436],{"className":3445,"code":6435,"filename":6105,"language":3447,"meta":115,"style":115},"\u003Ctemplate>\n  \u003Col vocab=\"https:\u002F\u002Fschema.org\u002F\" typeof=\"BreadcrumbList\">\n    \u003Cli\n      v-for=\"(item, index) in list\"\n      :key=\"`breadcrumbItem${index}`\"\n      property=\"itemListElement\"\n      typeof=\"ListItem\"\n    >\n      \u003Cmeta property=\"position\" :content=\"index + 1\">\n      \u003Ca\n        :href=\"item.href\"\n        property=\"item\"\n        typeof=\"WebPage\"\n      >\n        \u003Cspan property=\"name\">{{ item.text }}\u003C\u002Fspan>\n      \u003C\u002Fa>\n    \u003C\u002Fli>\n  \u003C\u002Fol>\n\u003C\u002Ftemplate>\n",[117,6437,6438,6446,6475,6482,6495,6508,6522,6536,6541,6574,6581,6594,6607,6621,6626,6655,6663,6671,6679],{"__ignoreMap":115},[20,6439,6440,6442,6444],{"class":121,"line":122},[20,6441,3454],{"class":1270},[20,6443,975],{"class":1276},[20,6445,137],{"class":1270},[20,6447,6448,6450,6452,6455,6457,6459,6461,6463,6465,6467,6469,6471,6473],{"class":121,"line":128},[20,6449,6292],{"class":1270},[20,6451,987],{"class":1276},[20,6453,6454],{"class":1318}," vocab",[20,6456,3462],{"class":1270},[20,6458,2608],{"class":1270},[20,6460,2537],{"class":1285},[20,6462,2608],{"class":1270},[20,6464,1352],{"class":1318},[20,6466,3462],{"class":1270},[20,6468,2608],{"class":1270},[20,6470,6404],{"class":1285},[20,6472,2608],{"class":1270},[20,6474,137],{"class":1270},[20,6476,6477,6479],{"class":121,"line":134},[20,6478,6301],{"class":1270},[20,6480,6481],{"class":1276},"li\n",[20,6483,6484,6487,6489,6491,6493],{"class":121,"line":140},[20,6485,6486],{"class":1318},"      v-for",[20,6488,3462],{"class":1270},[20,6490,2608],{"class":1270},[20,6492,6313],{"class":1285},[20,6494,2679],{"class":1270},[20,6496,6497,6500,6502,6504,6506],{"class":121,"line":146},[20,6498,6499],{"class":1318},"      :key",[20,6501,3462],{"class":1270},[20,6503,2608],{"class":1270},[20,6505,6325],{"class":1285},[20,6507,2679],{"class":1270},[20,6509,6510,6513,6515,6517,6520],{"class":121,"line":153},[20,6511,6512],{"class":1318},"      property",[20,6514,3462],{"class":1270},[20,6516,2608],{"class":1270},[20,6518,6519],{"class":1285},"itemListElement",[20,6521,2679],{"class":1270},[20,6523,6524,6527,6529,6531,6534],{"class":121,"line":159},[20,6525,6526],{"class":1318},"      typeof",[20,6528,3462],{"class":1270},[20,6530,2608],{"class":1270},[20,6532,6533],{"class":1285},"ListItem",[20,6535,2679],{"class":1270},[20,6537,6538],{"class":121,"line":165},[20,6539,6540],{"class":1270},"    >\n",[20,6542,6543,6545,6548,6551,6553,6555,6558,6560,6563,6565,6567,6570,6572],{"class":121,"line":170},[20,6544,6334],{"class":1270},[20,6546,6547],{"class":1276},"meta",[20,6549,6550],{"class":1318}," property",[20,6552,3462],{"class":1270},[20,6554,2608],{"class":1270},[20,6556,6557],{"class":1285},"position",[20,6559,2608],{"class":1270},[20,6561,6562],{"class":1318}," :content",[20,6564,3462],{"class":1270},[20,6566,2608],{"class":1270},[20,6568,6569],{"class":1285},"index + 1",[20,6571,2608],{"class":1270},[20,6573,137],{"class":1270},[20,6575,6576,6578],{"class":121,"line":176},[20,6577,6334],{"class":1270},[20,6579,6580],{"class":1276},"a\n",[20,6582,6583,6586,6588,6590,6592],{"class":121,"line":182},[20,6584,6585],{"class":1318},"        :href",[20,6587,3462],{"class":1270},[20,6589,2608],{"class":1270},[20,6591,6346],{"class":1285},[20,6593,2679],{"class":1270},[20,6595,6596,6599,6601,6603,6605],{"class":121,"line":188},[20,6597,6598],{"class":1318},"        property",[20,6600,3462],{"class":1270},[20,6602,2608],{"class":1270},[20,6604,1947],{"class":1285},[20,6606,2679],{"class":1270},[20,6608,6609,6612,6614,6616,6619],{"class":121,"line":194},[20,6610,6611],{"class":1318},"        typeof",[20,6613,3462],{"class":1270},[20,6615,2608],{"class":1270},[20,6617,6618],{"class":1285},"WebPage",[20,6620,2679],{"class":1270},[20,6622,6623],{"class":121,"line":199},[20,6624,6625],{"class":1270},"      >\n",[20,6627,6628,6631,6633,6635,6637,6639,6641,6643,6646,6649,6651,6653],{"class":121,"line":205},[20,6629,6630],{"class":1270},"        \u003C",[20,6632,20],{"class":1276},[20,6634,6550],{"class":1318},[20,6636,3462],{"class":1270},[20,6638,2608],{"class":1270},[20,6640,2667],{"class":1285},[20,6642,2608],{"class":1270},[20,6644,6645],{"class":1270},">",[20,6647,6648],{"class":1325},"{{ item.text }}",[20,6650,3504],{"class":1270},[20,6652,20],{"class":1276},[20,6654,137],{"class":1270},[20,6656,6657,6659,6661],{"class":121,"line":211},[20,6658,6360],{"class":1270},[20,6660,76],{"class":1276},[20,6662,137],{"class":1270},[20,6664,6665,6667,6669],{"class":121,"line":217},[20,6666,6369],{"class":1270},[20,6668,86],{"class":1276},[20,6670,137],{"class":1270},[20,6672,6673,6675,6677],{"class":121,"line":3303},[20,6674,6378],{"class":1270},[20,6676,987],{"class":1276},[20,6678,137],{"class":1270},[20,6680,6681,6683,6685],{"class":121,"line":3324},[20,6682,3504],{"class":1270},[20,6684,975],{"class":1276},[20,6686,137],{"class":1270},[16,6688,6689],{},"Podemos resumir los cambios en estos puntos:",[83,6691,6692,6698,6713,6720],{},[86,6693,6694,6695,47],{},"Definimos el modelo de estructura de datos en la etiqueta padre ",[20,6696,987],{"className":6697},[406],[86,6699,6700,6701,6704,6705,42,6709,47],{},"Para cada ",[20,6702,86],{"className":6703},[406]," del listado indicamos que es un item del modelo con los atributos ",[20,6706,6708],{"className":6707},[406],"property",[20,6710,6712],{"className":6711},[406],"typeof",[86,6714,6715,6716,6719],{},"Indicamos la propiedad ",[20,6717,2667],{"className":6718},[406]," (obligatoria) que será el texto asociado al enlace.",[86,6721,6715,6722,6725],{},[20,6723,6557],{"className":6724},[406]," (obligatoria) que indicará la posición del elemento respecto al total de enlaces del breadcrumb, empezando por 1 (Aquí no se empieza por 0).",[11,6727,6729],{"id":6728},"validando-nuestro-modelo-de-datos","Validando nuestro modelo de datos",[16,6731,6732,6733,4646,6736,6739],{},"Una vez tengamos implementado nuestro componente podemos comprobar que la estructura de datos está bien implementada a través del validador de ",[60,6734,6735],{},"Google:",[76,6737,3826],{"href":3826,"rel":6738,"title":3826},[80],". Podemos utilizar una url donde tengamos el código desplegado o directamente poner un fragmento de código HTML.",[16,6741,6742,6743,6746],{},"En caso que hubiera algún error, por ejemplo que hubiéramos olvidado definir la propiedad ",[20,6744,6557],{"className":6745},[406],", el validador nos mostraría algo como esto:",[16,6748,6749],{},[2159,6750],{"alt":115,"src":6751},"\u002Fimages\u002Fbreadcrumb-validator-error.webp",[16,6753,6754],{},"Pero si el modelo es validado correctamente, veremos un resultado como este:",[16,6756,6757],{},[2159,6758],{"alt":115,"src":6759},"\u002Fimages\u002Fbreadcrumb-validator-ok.webp",[16,6761,6762,6763],{},"También disponemos el validador de datos del mismo sitio web que proporciona el estándar: ",[76,6764,3837],{"href":3837,"rel":6765,"title":3837},[80],[11,6767,4328],{"id":4327},[16,6769,6770],{},"Al añadir un esquema de modelo de datos al breadcrumb vamos a mejorar los resultados en el posicionamiento de nuestras páginas en los buscadores. Además podemos identificar otros contenidos de nuestra web que queramos optimizar de cara a mejorar los resultados que ofrecen los buscadores al mostrar nuestras páginas.",[16,6772,6773],{},"También ayudaremos a un usuario que aterrice en nuestra web a encontrar a qué sección de nuestra web pertenece el contenido que está viendo.",[865,6775,6776],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":115,"searchDepth":128,"depth":134,"links":6778},[6779,6780,6781,6782,6783],{"id":6062,"depth":128,"text":6063},{"id":6089,"depth":128,"text":6090},{"id":6396,"depth":128,"text":6397},{"id":6728,"depth":128,"text":6729},{"id":4327,"depth":128,"text":4328},"2022-06-03","Cómo crear un componente breadcrumb para tu página web optimizado para SEO con VueJS.","blog\u002Fbreadcrumb",[6788,6789,6790,6069,6791,6792],"seo breadcrumb","breadcrumb vue","breadcrumb nuxt","thebyteland breadcrumb","seo",{},{"title":6057,"description":6785},"blog\u002Fcrea-un-componente-breadcrumb-optimizado-para-seo-con-vue",[2119,6797,3877],"Vue","Si tu web ha empezado a crecer y tiene mucho contenido con páginas que tienen subpáginas anidadas, seguramente quieras dejar una pequeña guía de dónde está esa subpágina en tu web. Para ello es importante no solo poner un texto con el árbol de profundidad si no que es importante crear una buena estructura. Además si quieres que se indexe correctamente en los buscadores te cuento cómo hacerlo.",[912],"ryyxMCuWevMmQqX_tyXR2fHZwHpnF8geS-bZSO0n_HE",{"id":6802,"title":6803,"body":6804,"date":6918,"description":6919,"extension":896,"headerImage":6920,"isActive":149,"keywords":6921,"meta":6926,"navigation":149,"path":6927,"seo":6928,"stem":6929,"subject":6930,"summary":6931,"tags":6932,"__hash__":6934},"blog\u002Fblog\u002Fla-evolucion-de-las-cinematicas-de-lol.md","La evolución de las cinemáticas de LOL",{"type":8,"value":6805,"toc":6907},[6806,6810,6813,6816,6819,6822,6825,6828,6832,6838,6842,6848,6852,6858,6862,6868,6872,6877,6881,6887,6891,6897,6901],[11,6807,6809],{"id":6808},"el-salto-tecnológico","El salto tecnológico",[16,6811,6812],{},"Antes de ver las cinemáticas es importante destacar que estamos hablando de poco más de 10 años entre la primera y la última.",[16,6814,6815],{},"Pasamos de unos gráficos muy normales, que podíamos ver en juegos de gama baja o media a uno gráficos espectaculares, donde parece que estamos viendo una película de animación y en las que se nota una gran calidad y detalle.",[16,6817,6818],{},"Realmente las últimas cinemáticas generan esa curiosidad por saber más de la historia de los personajes y te invitan a sumergirte en el universo de League of Legends. Pero no es solo la parte visual la que impresiona, porque también vienen acompañadas de un sonido magnífico con canciones que aumentan su intensidad a medida que la historia de la cinemática avanza, adaptándose a los puntos altos y bajos.",[16,6820,6821],{},"Evidentemente esto implica que han invertido millones de dólares en crear estas cinemáticas pero nada de esto sería posible sin el nivel tecnológico al que se ha llegado, disponiendo cada día de mejores ordenadores con tarjetas gráficas y procesadores que hace 10 años eran prácticamente inimaginables.",[16,6823,6824],{},"Es esta parte precisamente la que me hace soñar, si en tan pocos años hemos tenido este salto y nos maravillamos de los resultados ¿Qué se logrará en otros 10 o 15 años?",[16,6826,6827],{},"Sin ir más lejos, os dejo un listado de estas cinemáticas para que podáis compararlas.",[11,6829,6831],{"id":6830},"la-llamada-temporada-2022","La llamada - Temporada 2022:",[935,6833,6834],{},[2191,6835],{"link":6836,"title":6837},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FmDYqT0_9VR4","Video embebido de La llamada - League of Legends",[11,6839,6841],{"id":6840},"la-ruina-temporada-2021","La Ruina - Temporada 2021:",[935,6843,6844],{},[2191,6845],{"link":6846,"title":6847},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002F8PbhGt8XxSM","Video embebido de La Ruina - League of Legends",[11,6849,6851],{"id":6850},"warriors-temporada-2020","Warriors - Temporada 2020:",[935,6853,6854],{},[2191,6855],{"link":6856,"title":6857},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FaR-KAldshAE","Video embebido de Warriors  - League of Legends",[11,6859,6861],{"id":6860},"awaken-temporada-2019","Awaken - Temporada 2019:",[935,6863,6864],{},[2191,6865],{"link":6866,"title":6867},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FzF5Ddo9JdpY","Video embebido de Awaken  - League of Legends",[11,6869,6871],{"id":6870},"the-climb-temporada-2018","The Climb - Temporada 2018:",[935,6873,6874],{},[2191,6875],{"link":6876,"title":6837},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002F3Eu7NzzHC84",[11,6878,6880],{"id":6879},"a-new-dawn-temporada-2014","A new dawn - Temporada 2014:",[935,6882,6883],{},[2191,6884],{"link":6885,"title":6886},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FvzHrjOMfHPY","Video embebido de The Climb - League of Legends",[11,6888,6890],{"id":6889},"a-twist-of-fate-temporada-2013","A Twist of Fate - Temporada 2013:",[935,6892,6893],{},[2191,6894],{"link":6895,"title":6896},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FtEnsqpThaFg","Video embebido de A Twist of Fate - League of Legends",[11,6898,6900],{"id":6899},"welcome-to-league-of-legends-2010","Welcome to League of Legends - 2010:",[935,6902,6903],{},[2191,6904],{"link":6905,"title":6906},"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FIzMnCv_lPxI","Video embebido de Welcome to Welcome to League of Legends",{"title":115,"searchDepth":128,"depth":134,"links":6908},[6909,6910,6911,6912,6913,6914,6915,6916,6917],{"id":6808,"depth":128,"text":6809},{"id":6830,"depth":128,"text":6831},{"id":6840,"depth":128,"text":6841},{"id":6850,"depth":128,"text":6851},{"id":6860,"depth":128,"text":6861},{"id":6870,"depth":128,"text":6871},{"id":6879,"depth":128,"text":6880},{"id":6889,"depth":128,"text":6890},{"id":6899,"depth":128,"text":6900},"2022-05-17","Todas las cinemáticas de League of Legends ordenadas por fecha de salida para asombrarse con el salto tecnológico","blog\u002Flolbanner",[6922,6923,6924,6925],"lol","league of legends","cinematias lol","cinematicas league of legends",{},"\u002Fblog\u002Fla-evolucion-de-las-cinematicas-de-lol",{"title":6803,"description":6919},"blog\u002Fla-evolucion-de-las-cinematicas-de-lol",[],"League of legends es uno de los juegos más jugados y conocidos del mundo, pero lejos de comentar el tema de la comunidad o el estado actual del juego, hace poco me puse a mirar la evolución tecnológica del juego y es realmente impresionante. Algo que podemos apreciar incluso en las cinemáticas, cómo han pasado de algo que ahora consideraríamos cutre a increíbles videos de grandísima calidad.",[6933],"Gaming","ssx_3PDoKt4A6zcRkKvBpgtGnRAPpbasPCX_xfpWZpk",{"id":6936,"title":6937,"body":6938,"date":7378,"description":7379,"extension":896,"headerImage":7380,"isActive":149,"keywords":7381,"meta":7389,"navigation":149,"path":7390,"seo":7391,"stem":7392,"subject":7393,"summary":7395,"tags":7396,"__hash__":7397},"blog\u002Fblog\u002Fcache-eficiente-de-ficheros-con-nuxt-y-firebase.md","Caché eficiente de ficheros con Nuxt y Firebase",{"type":8,"value":6939,"toc":7373},[6940,6944,6947,6950,6953,6957,6967,6974,7110,7129,7139,7354,7360,7364,7367,7370],[11,6941,6943],{"id":6942},"el-problema","El problema",[16,6945,6946],{},"Si has estado revisando la performance de tu sitio web y has encontrado problemas que te indican que no estás utilizando una caché eficiente de tus ficheros, tal vez te has preguntado como puedes solucionarlo.",[16,6948,6949],{},"Cuando alguien entra a tu web se realizan muchas peticiones de ficheros desde el navegador al servidor donde está alojada. Si estas peticiones tardan mucho en responder, la página tardará más en cargar y por lo tanto en estar disponible para el usuario final, y ¡El tiempo es muy importante!",[16,6951,6952],{},"Si ciertos ficheros que no vamos a cambiar (o no tenemos previsión de hacerlo a corto plazo) están almacenados en caché, las peticiones del navegador hacia éstos serán mucho más rápidas y el tiempo de respuesta de la web mejorará considerablemente.",[11,6954,6956],{"id":6955},"la-solución","La solución",[16,6958,6959,6960,6962,6963,6966],{},"Una vez que tenemos nuestra aplicación de ",[60,6961,2119],{}," generada correctamente y el hosting configurado en ",[60,6964,6965],{},"Firebase",", podemos también configurar cómo se va a realizar la caché de nuestros ficheros.",[16,6968,6969,6970,6973],{},"Para ello debemos localizar el fichero ",[60,6971,6972],{},"firebase.json"," en el directorio raíz de nuestro proyecto y lo editamos de la siguiente forma:",[110,6975,6977],{"className":2589,"code":6976,"filename":6972,"language":1528,"meta":115,"style":115},"{\n  \"hosting\": {\n    \"headers\": [ {\n      \"source\": \"**\u002F*.@(jpg|jpeg|gif|png|webp)\",\n      \"headers\": [ {\n        \"key\": \"Cache-Control\",\n        \"value\": \"max-age=2592000\"\n      } ]\n    }\n    ]\n  }\n}\n",[117,6978,6979,6983,6996,7011,7032,7046,7067,7085,7093,7097,7102,7106],{"__ignoreMap":115},[20,6980,6981],{"class":121,"line":122},[20,6982,1574],{"class":1270},[20,6984,6985,6987,6990,6992,6994],{"class":121,"line":128},[20,6986,2602],{"class":1270},[20,6988,6989],{"class":1318},"hosting",[20,6991,2608],{"class":1270},[20,6993,416],{"class":1270},[20,6995,1271],{"class":1270},[20,6997,6998,7000,7003,7005,7007,7009],{"class":121,"line":134},[20,6999,2821],{"class":1270},[20,7001,7002],{"class":1736},"headers",[20,7004,2608],{"class":1270},[20,7006,416],{"class":1270},[20,7008,4815],{"class":1270},[20,7010,1271],{"class":1270},[20,7012,7013,7016,7019,7021,7023,7025,7028,7030],{"class":121,"line":140},[20,7014,7015],{"class":1270},"      \"",[20,7017,7018],{"class":5673},"source",[20,7020,2608],{"class":1270},[20,7022,416],{"class":1270},[20,7024,2613],{"class":1270},[20,7026,7027],{"class":1285},"**\u002F*.@(jpg|jpeg|gif|png|webp)",[20,7029,2608],{"class":1270},[20,7031,1292],{"class":1270},[20,7033,7034,7036,7038,7040,7042,7044],{"class":121,"line":146},[20,7035,7015],{"class":1270},[20,7037,7002],{"class":5673},[20,7039,2608],{"class":1270},[20,7041,416],{"class":1270},[20,7043,4815],{"class":1270},[20,7045,1271],{"class":1270},[20,7047,7048,7051,7054,7056,7058,7060,7063,7065],{"class":121,"line":153},[20,7049,7050],{"class":1270},"        \"",[20,7052,7053],{"class":1276},"key",[20,7055,2608],{"class":1270},[20,7057,416],{"class":1270},[20,7059,2613],{"class":1270},[20,7061,7062],{"class":1285},"Cache-Control",[20,7064,2608],{"class":1270},[20,7066,1292],{"class":1270},[20,7068,7069,7071,7074,7076,7078,7080,7083],{"class":121,"line":159},[20,7070,7050],{"class":1270},[20,7072,7073],{"class":1276},"value",[20,7075,2608],{"class":1270},[20,7077,416],{"class":1270},[20,7079,2613],{"class":1270},[20,7081,7082],{"class":1285},"max-age=2592000",[20,7084,2679],{"class":1270},[20,7086,7087,7090],{"class":121,"line":165},[20,7088,7089],{"class":1270},"      }",[20,7091,7092],{"class":1270}," ]\n",[20,7094,7095],{"class":121,"line":170},[20,7096,1804],{"class":1270},[20,7098,7099],{"class":121,"line":176},[20,7100,7101],{"class":1270},"    ]\n",[20,7103,7104],{"class":121,"line":182},[20,7105,1370],{"class":1270},[20,7107,7108],{"class":121,"line":188},[20,7109,1375],{"class":1270},[16,7111,7112,7113,33,7116,33,7119,33,7122,33,7125,7128],{},"De esta forma estamos diciendo que todos los ficheros con alguno de estos formatos: ",[60,7114,7115],{},"jpg",[60,7117,7118],{},"jpeg",[60,7120,7121],{},"gif",[60,7123,7124],{},"png",[60,7126,7127],{},"webp",", estarán cacheados por un tiempo de 30 días (2.592.000 segundos).",[16,7130,7131,7132,33,7134,33,7136,7138],{},"También podemos cachear otro tipo de ficheros como ",[60,7133,4302],{},[60,7135,1256],{},[60,7137,3447],{}," o cualquier otro formato que necesitemos, además de definir distintos bloques de caché según el tipo de fichero o incluso su nombre.",[110,7140,7142],{"className":2589,"code":7141,"filename":6972,"language":1528,"meta":115,"style":115},"{\n  \"hosting\": {\n    \"headers\": [ \n      {\n        \"source\": \"**\u002F*.@(jpg|jpeg|gif|png|webp)\",\n        \"headers\": [ {\n          \"key\": \"Cache-Control\",\n          \"value\": \"max-age=5184000\"\n        } ]\n      },\n      {\n        \"source\": \"**\u002F*.@(json)\",\n        \"headers\": [ {\n          \"key\": \"Cache-Control\",\n          \"value\": \"max-age=2592000\"\n        } ]\n      }\n   ]\n  }\n}\n",[117,7143,7144,7148,7160,7175,7180,7198,7212,7231,7248,7255,7260,7264,7283,7297,7315,7331,7337,7341,7346,7350],{"__ignoreMap":115},[20,7145,7146],{"class":121,"line":122},[20,7147,1574],{"class":1270},[20,7149,7150,7152,7154,7156,7158],{"class":121,"line":128},[20,7151,2602],{"class":1270},[20,7153,6989],{"class":1318},[20,7155,2608],{"class":1270},[20,7157,416],{"class":1270},[20,7159,1271],{"class":1270},[20,7161,7162,7164,7166,7168,7170,7172],{"class":121,"line":134},[20,7163,2821],{"class":1270},[20,7165,7002],{"class":1736},[20,7167,2608],{"class":1270},[20,7169,416],{"class":1270},[20,7171,4815],{"class":1270},[20,7173,7174],{"class":1325}," \n",[20,7176,7177],{"class":121,"line":140},[20,7178,7179],{"class":1270},"      {\n",[20,7181,7182,7184,7186,7188,7190,7192,7194,7196],{"class":121,"line":146},[20,7183,7050],{"class":1270},[20,7185,7018],{"class":5673},[20,7187,2608],{"class":1270},[20,7189,416],{"class":1270},[20,7191,2613],{"class":1270},[20,7193,7027],{"class":1285},[20,7195,2608],{"class":1270},[20,7197,1292],{"class":1270},[20,7199,7200,7202,7204,7206,7208,7210],{"class":121,"line":153},[20,7201,7050],{"class":1270},[20,7203,7002],{"class":5673},[20,7205,2608],{"class":1270},[20,7207,416],{"class":1270},[20,7209,4815],{"class":1270},[20,7211,1271],{"class":1270},[20,7213,7214,7217,7219,7221,7223,7225,7227,7229],{"class":121,"line":159},[20,7215,7216],{"class":1270},"          \"",[20,7218,7053],{"class":1276},[20,7220,2608],{"class":1270},[20,7222,416],{"class":1270},[20,7224,2613],{"class":1270},[20,7226,7062],{"class":1285},[20,7228,2608],{"class":1270},[20,7230,1292],{"class":1270},[20,7232,7233,7235,7237,7239,7241,7243,7246],{"class":121,"line":165},[20,7234,7216],{"class":1270},[20,7236,7073],{"class":1276},[20,7238,2608],{"class":1270},[20,7240,416],{"class":1270},[20,7242,2613],{"class":1270},[20,7244,7245],{"class":1285},"max-age=5184000",[20,7247,2679],{"class":1270},[20,7249,7250,7253],{"class":121,"line":170},[20,7251,7252],{"class":1270},"        }",[20,7254,7092],{"class":1270},[20,7256,7257],{"class":121,"line":176},[20,7258,7259],{"class":1270},"      },\n",[20,7261,7262],{"class":121,"line":182},[20,7263,7179],{"class":1270},[20,7265,7266,7268,7270,7272,7274,7276,7279,7281],{"class":121,"line":188},[20,7267,7050],{"class":1270},[20,7269,7018],{"class":5673},[20,7271,2608],{"class":1270},[20,7273,416],{"class":1270},[20,7275,2613],{"class":1270},[20,7277,7278],{"class":1285},"**\u002F*.@(json)",[20,7280,2608],{"class":1270},[20,7282,1292],{"class":1270},[20,7284,7285,7287,7289,7291,7293,7295],{"class":121,"line":194},[20,7286,7050],{"class":1270},[20,7288,7002],{"class":5673},[20,7290,2608],{"class":1270},[20,7292,416],{"class":1270},[20,7294,4815],{"class":1270},[20,7296,1271],{"class":1270},[20,7298,7299,7301,7303,7305,7307,7309,7311,7313],{"class":121,"line":199},[20,7300,7216],{"class":1270},[20,7302,7053],{"class":1276},[20,7304,2608],{"class":1270},[20,7306,416],{"class":1270},[20,7308,2613],{"class":1270},[20,7310,7062],{"class":1285},[20,7312,2608],{"class":1270},[20,7314,1292],{"class":1270},[20,7316,7317,7319,7321,7323,7325,7327,7329],{"class":121,"line":205},[20,7318,7216],{"class":1270},[20,7320,7073],{"class":1276},[20,7322,2608],{"class":1270},[20,7324,416],{"class":1270},[20,7326,2613],{"class":1270},[20,7328,7082],{"class":1285},[20,7330,2679],{"class":1270},[20,7332,7333,7335],{"class":121,"line":211},[20,7334,7252],{"class":1270},[20,7336,7092],{"class":1270},[20,7338,7339],{"class":121,"line":217},[20,7340,4171],{"class":1270},[20,7342,7343],{"class":121,"line":3303},[20,7344,7345],{"class":1270},"   ]\n",[20,7347,7348],{"class":121,"line":3324},[20,7349,1370],{"class":1270},[20,7351,7352],{"class":121,"line":3342},[20,7353,1375],{"class":1270},[16,7355,7356,7357,7359],{},"Con este ejemplo definimos los ficheros de imágenes con una caché de 60 días (5.184.000 segundos) y los ficheros de tipo ",[60,7358,1528],{}," con una caché de 30 días.",[11,7361,7363],{"id":7362},"cuánto-tiempo-debo-cachear-mis-ficheros","¿Cuánto tiempo debo cachear mis ficheros?",[16,7365,7366],{},"Siempre va a depender el uso que tu web haga de los mismos y la frecuencia con que vas a modificarlos. Por ejemplo, si tienes un logo en tu web y no tienes previsión de cambiarlo puedes definir un tiempo de caché a partir de 1 año o incluso más, pero si tienes una imagen de portada que va a cambiar cada día no va a servir de nada que definas una caché de 1 mes.",[16,7368,7369],{},"Debes estudiar cada fichero o grupos de ficheros que generes en tu web y decidir el tiempo de caché que debería tener en base a las modificaciones que pueda sufrir.",[865,7371,7372],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":115,"searchDepth":128,"depth":134,"links":7374},[7375,7376,7377],{"id":6942,"depth":128,"text":6943},{"id":6955,"depth":128,"text":6956},{"id":7362,"depth":128,"text":7363},"2021-08-13","Aprende a generar tus ficheros con un tiempo de caché eficiente con Nuxt y Firebase hosting.","blog\u002Fclock",[7382,7383,7384,7385,7386,7387,7388,5754],"thebyteland nuxt firebase","thebyteland nuxt","nuxt firebase cache","nuxt cache files","nuxt cache ficheros","nuxt cache","nuxt firebase",{},"\u002Fblog\u002Fcache-eficiente-de-ficheros-con-nuxt-y-firebase",{"title":6937,"description":7379},"blog\u002Fcache-eficiente-de-ficheros-con-nuxt-y-firebase",[7394,2119],"VueJS","Aprende a generar tus ficheros estáticos con un tiempo de caché eficiente y así mejorar el rendimiento de tu web.",[912],"gwRPT1SXzFs586C9WadAjlzAR5ESIggEUhI3Jb5DbBk",{"id":7399,"title":7400,"body":7401,"date":7544,"description":7545,"extension":896,"headerImage":7546,"isActive":149,"keywords":7547,"meta":7551,"navigation":149,"path":7552,"seo":7553,"stem":7554,"subject":7555,"summary":7545,"tags":7556,"__hash__":7557},"blog\u002Fblog\u002Flos-modulos-de-nuxt.md","Los módulos de Nuxt",{"type":8,"value":7402,"toc":7533},[7403,7407,7410,7413,7417,7420,7423,7430,7438,7442,7445,7448,7452,7460,7463,7466,7470,7477,7480,7484,7491,7494,7501,7504,7511,7514,7517,7520,7523,7527,7530],[11,7404,7406],{"id":7405},"qué-es-un-módulo-de-nuxt","¿Qué es un módulo de Nuxt?",[16,7408,7409],{},"Son funcionalidades desacopladas que podemos añadir a nuestro proyecto de Nuxt que nos ahorran mucho tiempo en configuración y bastantes líneas de código.",[16,7411,7412],{},"La principal ventaja, en mi opinión, es que un módulo autogestiona sus dependencias y su mantenimiento está desligado de tu aplicación, lo que hace que no tengas que invertir tanto tiempo en revisar que todo funciona correctamente. Al final detrás de cada módulo hay una comunidad que se ocupa de que siga con vida, se vaya actualizando y se corrijan los posibles errores que tengan.",[11,7414,7416],{"id":7415},"dónde-puedo-consultar-los-módulos-disponibles","¿Dónde puedo consultar los módulos disponibles?",[16,7418,7419],{},"Poco a poco la comunidad de Nuxt va creciendo, y no son pocas las personas que se animan a crear nuevos módulos que nos facilitan mucho el desarrollo de nuestros proyectos.",[16,7421,7422],{},"Seguramente cuando has empezado a trastear con Nuxt te has preguntado si ya hay algún módulo que haga eso que tu quieres que tenga tu proyecto. Por suerte hay una web donde se pueden consultar los principales módulos oficiales de Nuxt:",[16,7424,7425],{},[76,7426,7427],{"href":7427,"rel":7428,"title":7429},"https:\u002F\u002Fmodules.nuxtjs.org\u002F",[80],"Página principal de los módulos de Nuxt",[16,7431,7432,7433,7435,7436,47],{},"En esta web puedes encontrar los módulos separados por categorías, consultar el total de módulos y para cada uno datos útiles como las descargas mensuales en ",[60,7434,4758],{}," o la popularidad del módulo. También dispone de un enlace a la página principal del módulo o el repositorio en ",[60,7437,4676],{},[11,7439,7441],{"id":7440},"qué-módulos-debería-integrar-en-mi-proyecto","¿Qué módulos debería integrar en mi proyecto?",[16,7443,7444],{},"Cada proyecto es un mundo y dependerá de las necesidades que tengas, pero sin duda hay ciertos módulos que te van a hacer la vida más sencilla y puede que te saquen de algún apuro.",[16,7446,7447],{},"A continuación te enseño cuales son los que no pueden faltar en mis aplicaciones de Nuxt y recomiendo encarecidamente:",[65,7449,7451],{"id":7450},"nuxtjseslint-module","@nuxtjs\u002Feslint-module",[16,7453,7454,7455],{},"Documentación: ",[76,7456,7457],{"href":7457,"rel":7458,"title":7459},"https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Feslint-module",[80],"Repositorio en Github del módulo eslint de Nuxt",[16,7461,7462],{},"Este módulo no va a afectar directamente en el resultado de tu aplicación pero te va a ayudar mucho en el desarrollo, ya que puedes establecer ciertas reglas de programación o quedarte con las que ya vienen por defecto para asegurarte que el código que vas creando no tiene errores.",[16,7464,7465],{},"Principalmente este módulo te va a ir diciendo dónde metes la pata en tiempo real, por ejemplo con esa típica variable a la que le asignamos un valor pero... Nunca hemos declarado.",[65,7467,7469],{"id":7468},"nuxtjshtml-validator","@nuxtjs\u002Fhtml-validator",[16,7471,7454,7472],{},[76,7473,7474],{"href":7474,"rel":7475,"title":7476},"https:\u002F\u002Fhtml-validator.nuxtjs.org\u002F",[80],"Página principal de la documentación del módulo html-validator",[16,7478,7479],{},"Siguiendo en la línea de prevenir errores, este módulo nos va a ayudar con el código HTML que se genera una vez nuestra página ha renderizado, revisando al estructura del mismo. Esto nos va a ayudar a depurar errores de hidratación (Muy en resumen, cuando el servidor renderiza algo que no coincide con lo que tenemos renderizado en el HTML del cliente) y a mejorar la accesibilidad de nuestra página.",[65,7481,7483],{"id":7482},"nuxtjspwa","@nuxtjs\u002Fpwa",[16,7485,7454,7486],{},[76,7487,7488],{"href":7488,"rel":7489,"title":7490},"https:\u002F\u002Fpwa.nuxtjs.org\u002F",[80],"Página principal del módulo PWA de Nuxt",[16,7492,7493],{},"¿Quieres configurar tu aplicación como una Progressive Web App sin mover un dedo? Instala este módulo y asunto solucionado.",[16,7495,7496,7497,7500],{},"Tiene muchos aspectos que puedes configurar a mano para definir el resultado de tu aplicación como el fichero ",[60,7498,7499],{},"manifest",", las meta tags con la información necesaria o los iconos necesarios para Android e iOS cuando se instale tu aplicación como una PWA. Y por supuesto un service worker para trabajar con los archivos de la aplicación cuando está offline.",[65,7502,2051],{"id":7503},"nuxtcontent",[16,7505,7454,7506],{},[76,7507,7508],{"href":7508,"rel":7509,"title":7510},"https:\u002F\u002Fcontent.nuxtjs.org\u002F",[80],"Página principal del módulo Content de Nuxt",[16,7512,7513],{},"Si necesitas trabajar con ficheros estáticos de los que leer información o necesitas mostrar esa información en tu aplicación, este es tu módulo. Trabaja con ficheros en formato Markdown, JSON, YAML, XML y CSV y permite la edición de estos documentos en vivo durante el desarrollo.",[16,7515,7516],{},"También tiene implementado un sistema de query builder para poder consultar y extraer información de los ficheros a nuestra conveniencia.",[16,7518,7519],{},"Sin duda para cualquier aplicación que gestione contenido vas a adorar usar este módulo.",[16,7521,7522],{},"Además en este quiero destacar que la documentación que han creado es super completa e intuitiva, lo que se agradece mucho cuando lo instalas por primera vez y necesitas aprender a usarlo.",[11,7524,7526],{"id":7525},"y-para-terminar","Y para terminar...",[16,7528,7529],{},"Espero haberte ayudado un poco a introducirte en el mundo de los módulos de Nuxt si no lo conocías, y si ya lo conocías espero que estas recomendaciones también te ayuden.",[16,7531,7532],{},"Hay muchos otros módulos importantes para usar en nuestras aplicaciones y te recomiendo que antes de empezar el desarrollo de tu nuevo proyecto en Nuxt, le eches un vistazo a los módulos porque siempre hay algo nuevo que vas a adorar tener instalado.",{"title":115,"searchDepth":128,"depth":134,"links":7534},[7535,7536,7537,7543],{"id":7405,"depth":128,"text":7406},{"id":7415,"depth":128,"text":7416},{"id":7440,"depth":128,"text":7441,"children":7538},[7539,7540,7541,7542],{"id":7450,"depth":134,"text":7451},{"id":7468,"depth":134,"text":7469},{"id":7482,"depth":134,"text":7483},{"id":7503,"depth":134,"text":2051},{"id":7525,"depth":128,"text":7526},"2021-08-12","Todo sobre los módulos de Nuxt y dónde encontrarlos así como los que no deben faltar en tu proyecto.","blog\u002Fnuxt-modules",[5754,7548,7549,7550],"modulos nuxt","nuxt modules","nuxt2",{},"\u002Fblog\u002Flos-modulos-de-nuxt",{"title":7400,"description":7545},"blog\u002Flos-modulos-de-nuxt",[2119],[912],"3pyJaydqHOXIBoU8bREOXTJpuHNCQVzrsiz0BEyya28",[7559,7561,7563,7565,7567,7569,7571,7573,7575,7577,7579,7581,7583,7585,7587,7589,7593,7595,7597,7599,7601,7603,7605],{"tags":7560},[5205],{"tags":7562},[913,4010],{"tags":7564},[912],{"tags":7566},[912],{"tags":7568},[4010],{"tags":7570},[912],{"tags":7572},[6933],{"tags":7574},[913],{"tags":7576},[2243],{"tags":7578},[912],{"tags":7580},[912],{"tags":7582},[6933],{"tags":7584},[913],{"tags":7586},[2243],{"tags":7588},[4010],{"tags":7590},[7591,7592],"Cultura","Comida",{"tags":7594},[6933],{"tags":7596},[4010],{"tags":7598},[912],{"tags":7600},[912],{"tags":7602},[912,913,914],{"tags":7604},[912],{"tags":7606},[912],1784660331490]