{"id":83870,"date":"2022-08-10T18:16:16","date_gmt":"2022-08-10T16:16:16","guid":{"rendered":"https:\/\/rmarketingdigital.com\/como-construimos-el-sitio-y-usamos-los-componentes-web\/"},"modified":"2020-09-17T03:40:01","modified_gmt":"2020-09-17T06:40:01","slug":"como-construimos-el-sitio-y-usamos-los-componentes-web","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/","title":{"rendered":"Wie wir die Site erstellen und die Webkomponenten verwenden"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Introduccion\" >Introducci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Generacion-estatica\" >Generaci\u00f3n est\u00e1tica<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Colecciones\" >Colecciones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Limitaciones\" >Limitaciones<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Plantillas\" >Plantillas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Scripting\" >Scripting<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Componentes-Web\" >Componentes Web<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-construimos-el-sitio-y-usamos-los-componentes-web\/#Charlemos\" >Charlemos<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p>\n          <time>9 de abril de 2020<\/time><\/p>\n<\/header>\n<p>Esta es la primera publicaci\u00f3n en el blog de ingenier\u00eda de web.dev.  En los pr\u00f3ximos meses, esperamos compartir informaci\u00f3n \u00fatil de nuestro trabajo, \u00a1as\u00ed que est\u00e9 atento a las publicaciones con la etiqueta de Blog de ingenier\u00eda!  Aqu\u00ed cubriremos el proceso de construcci\u00f3n de nuestro sitio est\u00e1tico y el JavaScript (\u00a1opcional!) Detr\u00e1s de nuestros componentes web.<\/p>\n<p>web.dev proporciona contenido sobre la creaci\u00f3n de experiencias web modernas y le permite medir el rendimiento de su sitio.  Los usuarios inteligentes pueden haberse dado cuenta de que nuestra p\u00e1gina de medidas es solo una interfaz para <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Faro<\/a>, que tambi\u00e9n est\u00e1 disponible en DevTools de Chrome.  Iniciar sesi\u00f3n en web.dev le permite ejecutar auditor\u00edas Lighthouse regulares en su sitio para que pueda ver c\u00f3mo cambia su puntuaci\u00f3n con el tiempo.  Volver\u00e9 a visitar la p\u00e1gina de Medidas un poco m\u00e1s tarde, ya que creemos que es bastante especial.  \ud83c\udf8a<\/p>\n<h2 id=\"introduction\"><span class=\"ez-toc-section\" id=\"Introduccion\"><\/span>Introducci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>B\u00e1sicamente, web.dev es un sitio est\u00e1tico que se genera a partir de una colecci\u00f3n de archivos Markdown.  Hemos elegido usar <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.11ty.dev\/\">Once<\/a> porque es una herramienta pulida y extensible que facilita la conversi\u00f3n de Markdown en HTML.<\/p>\n<p>Tambi\u00e9n utilizamos paquetes de JavaScript modernos que solo servimos a navegadores compatibles <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medium.com\/dev-channel\/es6-modules-in-chrome-canary-m60-ba588dfb8ab7\"><code>type=\"module\"<\/code><\/a>, que incluye <code>async<\/code> y <code>await<\/code>.  Tambi\u00e9n usamos con gusto funciones que son compatibles con los navegadores perennes, pero no con una minor\u00eda de versiones anteriores.  Como somos un sitio est\u00e1tico, JavaScript es <em>simplemente no es necesario<\/em> para leer nuestro contenido.<\/p>\n<p>Una vez que se completa el proceso de compilaci\u00f3n, que implica generar HTML est\u00e1tico y empaquetar nuestro JavaScript con Rollup, web.dev se puede alojar con un servidor est\u00e1tico simple para realizar pruebas.  El sitio es <em>casi<\/em> completamente est\u00e1tico, pero tenemos algunas necesidades especiales que a\u00fan se benefician de un servidor Node.js personalizado.  Estos incluyen redireccionamientos para dominios no v\u00e1lidos, as\u00ed como c\u00f3digo para analizar el idioma preferido de un usuario para una pr\u00f3xima funci\u00f3n de internacionalizaci\u00f3n.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>A pesar de ser un producto de Google, web.dev no utiliza ninguna herramienta o proceso interno de Google.  Puede consultar nuestro repositorio.  Hacemos esto porque el equipo que crea y mantiene web.dev es responsable de abogar dentro de Google en nombre del ecosistema de desarrolladores web m\u00e1s amplio, por lo que tiene m\u00e1s sentido para nosotros tener las mismas herramientas que los desarrolladores web externos.<\/p>\n<\/div>\n<h2 id=\"static-generation\"><span class=\"ez-toc-section\" id=\"Generacion-estatica\"><\/span>Generaci\u00f3n est\u00e1tica <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cada p\u00e1gina de web.dev est\u00e1 escrita en Markdown.  Todas las p\u00e1ginas incluyen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.11ty.dev\/docs\/data-frontmatter\/\">asunto principal<\/a>, que describe los metadatos de cada publicaci\u00f3n.  Estos metadatos se incorporan al dise\u00f1o de cada p\u00e1gina, creando encabezados, etiquetas, etc.  He aqu\u00ed un ejemplo:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token hr punctuation\">---<\/span><br>layout: post<br>title: What is network reliability and how do you measure it?<br>authors:<br><span class=\"token list punctuation\">-<\/span> jeffposnick<br>date: 2018-11-05<br>description: |<br><span class=\"token title important\">The modern web is enjoyed by a wide swath of people\u2026<br><span class=\"token punctuation\">---<\/span><\/span><p>The modern web is enjoyed by a wide swath of <span class=\"token url\">[<span class=\"token content\">people<\/span>](https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ)<\/span>, using a range of different devices and types of network connections.<\/p><p>Your creations can reach users all across the world...<\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Este material preliminar nos permite definir propiedades arbitrarias como autor (es), fecha de publicaci\u00f3n y etiquetas.  Once expone convenientemente el asunto del frente como <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.11ty.dev\/docs\/data\/\">datos<\/a> en casi todos los complementos, plantillas u otros contextos en los que nos gustar\u00eda hacer algo inteligente.  El objeto de datos tambi\u00e9n contiene lo que Eleventy describe como el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.11ty.dev\/docs\/data-cascade\/\">cascada de datos<\/a>: Una variedad de datos extra\u00eddos de cada p\u00e1gina individual, del dise\u00f1o que utiliza la p\u00e1gina y de los datos que se encuentran en la estructura jer\u00e1rquica de carpetas.<\/p>\n<p>Cada dise\u00f1o \u00fanico describe un tipo diferente de contenido y puede <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.11ty.dev\/docs\/layout-chaining\/\">heredar<\/a> de <em>otro<\/em> dise\u00f1os.  En web.dev, usamos esta funci\u00f3n para enmarcar correctamente diferentes tipos de contenido (como publicaciones y laboratorios de c\u00f3digo) mientras compartimos un dise\u00f1o HTML de nivel superior.<\/p>\n<h3 id=\"collections\"><span class=\"ez-toc-section\" id=\"Colecciones\"><\/span>Colecciones <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Eleventy proporciona una forma program\u00e1tica de crear colecciones arbitrarias de contenido.  Esto nos ha permitido crear soporte de paginaci\u00f3n y generar p\u00e1ginas virtuales (p\u00e1ginas que no tienen un archivo Markdown coincidente en el disco) para los autores de publicaciones.  Por ejemplo, construimos las p\u00e1ginas de nuestros autores usando una plantilla que contiene una expresi\u00f3n para su enlace permanente (por lo que la plantilla se vuelve a representar para cada autor) y una colecci\u00f3n de respaldo.<\/p>\n<p>Esto da como resultado, por ejemplo, una p\u00e1gina simple que contiene todas las publicaciones de Addy.<\/p>\n<h3 id=\"limitations\"><span class=\"ez-toc-section\" id=\"Limitaciones\"><\/span>Limitaciones <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>En este momento no podemos conectarnos f\u00e1cilmente al proceso de construcci\u00f3n de Eleventy porque es <em>declarativo<\/em>, m\u00e1s bien que <em>imperativo<\/em>: describe lo que quiere, en lugar de c\u00f3mo lo quiere.  Es dif\u00edcil ejecutar Eleventy como parte de una herramienta de compilaci\u00f3n m\u00e1s grande, ya que solo se puede invocar a trav\u00e9s de su interfaz de l\u00ednea de comandos.<\/p>\n<h2 id=\"templating\"><span class=\"ez-toc-section\" id=\"Plantillas\"><\/span>Plantillas <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>web.dev utiliza el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mozilla.github.io\/nunjucks\/\">Nunjucks<\/a> sistema de plantillas desarrollado originalmente por Mozilla.  Nunjucks tiene las caracter\u00edsticas t\u00edpicas de las plantillas como bucles y condicionales, pero tambi\u00e9n nos permite definir <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.11ty.dev\/docs\/shortcodes\/\">c\u00f3digos cortos<\/a> que generan m\u00e1s HTML o invocan otra l\u00f3gica.<\/p>\n<p>Como la mayor\u00eda de los equipos que crean sitios de contenido est\u00e1tico, comenzamos con c\u00f3digos cortos peque\u00f1os y agregamos c\u00f3digos cortos con el tiempo, alrededor de 20 hasta ahora.  La mayor\u00eda de estos solo generan m\u00e1s HTML (incluidos nuestros componentes web personalizados).  He aqu\u00ed un ejemplo:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-text\"><code class=\"language-text\">{% Aside %}<br>[See how Asides work in the web.dev codebase](\/handbook\/web-dev-components\/#asides)<br>{% endAside %}<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Terminar\u00e1 luciendo as\u00ed:<\/p>\n<p>Pero en realidad est\u00e1 creando HTML que se ve as\u00ed:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>w-aside w-aside--note<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\/handbook\/web-dev-components\/#asides<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>See how Asides work in the web.dev codebase<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Si bien est\u00e1 fuera del alcance de esta publicaci\u00f3n, web.dev tambi\u00e9n usa c\u00f3digos cortos como un tipo de lenguaje de metaprogramaci\u00f3n.  Los c\u00f3digos cortos aceptan argumentos, uno de los cuales es el contenido contenido.  No es necesario que los c\u00f3digos cortos devuelvan nada, por lo que se pueden usar para generar un estado o activar alg\u00fan otro comportamiento.  \ud83e\udd14\ud83d\udcad<\/p>\n<h2 id=\"scripting\"><span class=\"ez-toc-section\" id=\"Scripting\"><\/span>Scripting <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Como se mencion\u00f3 anteriormente, debido a que web.dev es un sitio est\u00e1tico, se puede servir y usar sin JavaScript y con navegadores m\u00e1s antiguos que no admiten <code>type=\"module\"<\/code> o nuestro otro c\u00f3digo moderno.  Esta es una parte incre\u00edblemente importante de nuestro enfoque para hacer que web.dev sea accesible para todos.<\/p>\n<p>Sin embargo, nuestro c\u00f3digo para navegadores modernos consta de dos partes principales:<\/p>\n<ol>\n<li>C\u00f3digo Bootstrap, que incluye c\u00f3digo para el estado global, an\u00e1lisis y enrutamiento SPA<\/li>\n<li>C\u00f3digo y CSS para componentes web que mejoran progresivamente el sitio<\/li>\n<\/ol>\n<p>El c\u00f3digo de arranque es bastante sencillo: web.dev puede cargar nuevas p\u00e1ginas como una aplicaci\u00f3n de una sola p\u00e1gina (SPA), por lo que instalamos un oyente global que escucha los clics en local. <code>&lt;a href=\"...\"&gt;<\/code> elementos.  El modelo SPA nos ayuda a mantener el estado global sobre la sesi\u00f3n actual del usuario, ya que, de lo contrario, cada nueva carga de p\u00e1gina activar\u00eda llamadas a Firebase para acceder al estado de inicio de sesi\u00f3n de un usuario.<\/p>\n<p>Tambi\u00e9n especificamos un par de puntos de entrada diferentes a nuestro sitio en funci\u00f3n de la URL que haya accedido, y cargamos la correcta utilizando Dynamic <code>import()<\/code>.  Esto reduce la cantidad de bytes que necesitan nuestros usuarios antes de que el sitio se mejore con c\u00f3digo.<\/p>\n<h3 id=\"web-components\"><span class=\"ez-toc-section\" id=\"Componentes-Web\"><\/span>Componentes Web <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\">Componentes Web<\/a><br \/>\nson elementos personalizados que encapsulan la funcionalidad en tiempo de ejecuci\u00f3n proporcionada en JavaScript y se identifican mediante nombres personalizados como <code>&lt;web-codelab&gt;<\/code>.  El dise\u00f1o se presta bien a sitios en gran medida est\u00e1ticos como web.dev: su navegador gestiona el ciclo de vida de un elemento a medida que se actualiza el HTML de un sitio, informando correctamente cualquier elemento cuando se adjunta o desconecta de la p\u00e1gina.  Y los navegadores anticuados simplemente ignoran los componentes web por completo y renderizan lo que queda en el DOM.<\/p>\n<p>Cada componente web es una clase con m\u00e9todos que incluyen <code>connectedCallback()<\/code>, <code>disconnectedCallback()<\/code>y <code>attributeChangedCallback()<\/code>.  Los elementos personalizados de web.dev heredan principalmente de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/lit-element.polymer-project.org\/\">LitElement<\/a>, que proporciona una base simple para componentes complejos.<\/p>\n<p>Si bien web.dev utiliza componentes web en muchas p\u00e1ginas, en ninguna parte es m\u00e1s necesario que en la p\u00e1gina de medidas.  Dos elementos proporcionan la mayor parte de la funcionalidad que ve en esta p\u00e1gina:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>web-url-chooser-container<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>web-url-chooser-container<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>web-lighthouse-scores-container<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>web-lighthouse-scores-container<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Estos elementos crean otros elementos que proporcionan m\u00e1s funcionalidad.  Es importante destacar que estos elementos son solo parte de nuestro c\u00f3digo fuente regular de Markdown, y nuestro equipo de contenido puede agregar funcionalidad extendida a <em>alguna<\/em> p\u00e1gina, no solo el nodejs Medir.<\/p>\n<p>Nuestros componentes web utilizan m\u00e1s com\u00fanmente <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/flaviocopes.com\/react-presentational-vs-container-components\/\">Componente contenedor<\/a> modelo, popularizado por React, aunque este modelo <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medium.com\/@dan_abramov\/smart-and-dumb-components-7ca2f9a7c7d0\">ahora est\u00e1 un poco pasado de moda<\/a>.  Cada <code>-container<\/code> elemento se conecta a nuestro estado global (proporcionado por <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/developit\/unistore\">deshacer<\/a>) y luego renderiza un elemento visual, que a su vez pasa a renderizar nodos DOM reales que tienen estilo u otra funcionalidad incorporada.<\/p>\n<figure class=\"w-figure\">\n  <img alt='state-and-elements-1891992' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/state-and-elements-1891992.png' alt=\"Un diagrama que muestra la relaci\u00f3n entre el estado global y los elementos HTML que lo utilizan.\"><figcaption class=\"w-figcaption\">Estado global y un componente web<\/figcaption><\/figure>\n<p>Nuestros componentes web m\u00e1s complejos existen para visualizar acciones y estados globales.  Por ejemplo, web.dev le permite auditar su sitio favorito y luego navegar fuera de la p\u00e1gina Medir.  Si regresa, ver\u00e1 que la tarea a\u00fan est\u00e1 en curso.<\/p>\n<p>Nuestros componentes simples mejoran puramente el contenido est\u00e1tico o crean visualizaciones asombrosas (por ejemplo, cada gr\u00e1fico de l\u00edneas es propio <code>&lt;web-sparkline-chart&gt;<\/code>), que no tiene relaci\u00f3n con el estado global.<\/p>\n<h2 id=\"let's-chat\"><span class=\"ez-toc-section\" id=\"Charlemos\"><\/span>Charlemos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El equipo de ingenier\u00eda de web.dev (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/rob_dodson\">Robar<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/devnook\">Ewa<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/michaelsolati\">Miguel<\/a>y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/samthor\">Sam<\/a>) pronto continuar\u00e1 con inmersiones profundas m\u00e1s t\u00e9cnicas.<\/p>\n<p>Esperamos que escuchar c\u00f3mo hacemos las cosas te haya dado algunas ideas para tus propios proyectos.  \u00a1Cont\u00e1ctenos en Twitter si tiene preguntas o solicitudes de temas para este blog!<\/p>\n<p><!-- Test content change --> <\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>9 de abril de 2020 Esta es la primera publicaci\u00f3n en el blog de ingenier\u00eda de web.dev. En los pr\u00f3ximos meses, esperamos compartir informaci\u00f3n \u00fatil de nuestro trabajo, \u00a1as\u00ed que&#8230;<\/p>","protected":false},"author":1,"featured_media":83871,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83870","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo construimos el sitio y usamos los componentes web - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"9 de abril de 2020 Esta es la primera publicaci\u00f3n en el blog de ingenier\u00eda de web.dev. En los pr\u00f3ximos meses, esperamos compartir informaci\u00f3n \u00fatil de\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo construimos el sitio y usamos los componentes web\" \/>\n<meta property=\"og:description\" content=\"9 de abril de 2020 Esta es la primera publicaci\u00f3n en el blog de ingenier\u00eda de web.dev. En los pr\u00f3ximos meses, esperamos compartir informaci\u00f3n \u00fatil de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-10T16:16:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3447856.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"361\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"C\u00f3mo construimos el sitio y usamos los componentes web\",\"datePublished\":\"2022-08-10T16:16:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/\"},\"wordCount\":1594,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3447856.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/\",\"name\":\"C\u00f3mo construimos el sitio y usamos los componentes web - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3447856.jpg\",\"datePublished\":\"2022-08-10T16:16:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"9 de abril de 2020 Esta es la primera publicaci\u00f3n en el blog de ingenier\u00eda de web.dev. En los pr\u00f3ximos meses, esperamos compartir informaci\u00f3n \u00fatil de\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3447856.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3447856.jpg\",\"width\":1200,\"height\":361,\"caption\":\"hero-3447856-3212990-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo construimos el sitio y usamos los componentes web - R Marketing Digital","description":"9. April 2020 Dies ist der erste Beitrag im web.dev Engineering-Blog. In den kommenden Monaten freuen wir uns darauf, hilfreiche Informationen von zu teilen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/","og_locale":"de_DE","og_type":"article","og_title":"C\u00f3mo construimos el sitio y usamos los componentes web","og_description":"9 de abril de 2020 Esta es la primera publicaci\u00f3n en el blog de ingenier\u00eda de web.dev. En los pr\u00f3ximos meses, esperamos compartir informaci\u00f3n \u00fatil de","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-10T16:16:16+00:00","og_image":[{"width":1200,"height":361,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3447856.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"C\u00f3mo construimos el sitio y usamos los componentes web","datePublished":"2022-08-10T16:16:16+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/"},"wordCount":1594,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3447856.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/","name":"C\u00f3mo construimos el sitio y usamos los componentes web - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3447856.jpg","datePublished":"2022-08-10T16:16:16+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"9. April 2020 Dies ist der erste Beitrag im web.dev Engineering-Blog. In den kommenden Monaten freuen wir uns darauf, hilfreiche Informationen von zu teilen","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/wie-wir-die-site-erstellen-und-die-webkomponenten-verwenden\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3447856.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3447856.jpg","width":1200,"height":361,"caption":"hero-3447856-3212990-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83870"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83870\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83871"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}