Wie wir die Site erstellen und die Webkomponenten verwenden

Esta es la primera publicación en el BlogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra Plus de ingeniería de web.dev. En los próximos meses, esperamos compartir información útil de nuestro trabajo, ¡así que esté atento a las publicaciones con la etiqueta de Blog de ingeniería! Aquí cubriremos el proceso de construcción de nuestro sitio estático y el JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus (¡opcional!) Detrás de nuestros componentes web.

web.dev proporciona InhaltEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, Plus sobre la creación de experiencias web modernas y le permite medir el rendimiento de su sitio. Los usuarios inteligentes pueden haberse dado cuenta de que nuestra página de medidas es solo una interfaz para Leuchtturm, das auch in den DevTools von Chrome verfügbar ist. Wenn Sie sich bei web.dev anmelden, können Sie regelmäßige Lighthouse-Audits auf Ihrer Website durchführen, um zu sehen, wie sich Ihre Punktzahl im Laufe der Zeit ändert. Ich werde die Seite "Messungen" etwas später erneut besuchen, da wir der Meinung sind, dass dies etwas ganz Besonderes ist. 🎊

Einführung

Grundsätzlich ist web.dev eine statische Site, die aus einer Sammlung von Markdown-Dateien generiert wird. Wir haben uns für die Verwendung entschieden Elf porque es una herramienta pulida y extensible que facilita la UmwandlungConversión es una acción precisa que lleva a cabo un usuario al visitar un portal web. Algunas formas clásica de conversión son, por ejemplo, una compra, una descarga o una suscripción a la newsletter. Un parte del SEO o del Marketing Online es la Optimización de Ratio de Conversión (CRO). En el Marketing de afiliación se usa para la conversión de los editores. Información general Hay diferentes indicadores para medir Plus de Markdown en HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las Plus.

También utilizamos paquetes de JavaScript modernos que solo servimos a BrowserConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Plus compatibles Typ = "Modul", was beinhaltet asynchron y erwarten. Gerne verwenden wir auch Funktionen, die mit mehrjährigen Browsern kompatibel sind, jedoch nicht mit einer Minderheit älterer Versionen. Da wir eine statische Site sind, ist JavaScript einfach nicht nötig um unseren Inhalt zu lesen.

Una vez que se completa el proceso de compilación, que implica generar HTML estático y empaquetar nuestro JavaScript con Rollup, web.dev se puede alojar con un ServerLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Plus estático simple para realizar pruebas. El sitio es fast vollständig statisch, aber wir haben einige spezielle Anforderungen, die immer noch von einem benutzerdefinierten Node.js-Server profitieren. Dazu gehören Weiterleitungen für ungültige Domänen sowie Code zum Analysieren der bevorzugten Sprache eines Benutzers für eine bevorstehende Internationalisierungsfunktion.

Statische Erzeugung

Jede Seite auf web.dev ist in Markdown geschrieben. Alle Seiten enthalten Hauptproblem, que describe los MetadatenLos metadatos son datos estructurados que contienen información sobre una fuente como, por ejemplo, un libro o un documento web. Gracias a los metadatos resulta mucho más fácil hallar la fuente de información dado que contienen datos sobre el título, el autor, la fecha de publicación, la descripción, etc. Se utilizan en librerías pero además para la estadística y la ingeniería de software. Metadatos en WWW Los metadatos se utilizan Plus de cada publicación. Estos metadatos se incorporan al diseño de cada página, creando ÜberschriftenConcepto de Encabezados¿Qué son los Encabezados?Los Encabezados, además conocidos como headers en inglés, son una parte fundamental del diseño de cualquier web, dado que consiste en la parte principal que se ve de esta al acceder, la parte de arriba de cualquier página. El lugar más visible y al que todos los usuarios que visitan un lugar de Internet acceden cuando entran en él, pudiendo tener así una imagen rápida Plus, etiquetas, etc. He aquí un ejemplo:

---
layout: PostConcepto de Post¿Qué es un Post?Un Post es todo aquel contenido, sea post, opinión, noticia u otro género, que un autor publica en un blog. Este puede ser de carácter corporativo o meramente ocioso; pero siempre tiene como meta arrojar información o reflejar una idea, al mismo tiempo de facilitar que los usuarios encuentren la web donde se recoge por medio de de buscadores y demás plataformas online.Generalmente, se han Plus
title: What is network reliability and how do you measure it?
authors:
- jeffposnick
date: 2018-11-05
description: |
The modern web is enjoyed by a wide swath of people…
---
The modern web is enjoyed by a wide swath of [people](httpsHTTPS (protocolo de Transferencia de Hiper-Texto) es un protocolo que permite determinar una conexión segura entre el servidor y el cliente, que no puede ser interceptada por personas no autorizadas. En resumidas cuentas, es la versión segura de el http (Hyper Text Transfer Protocol) Cómo funciona Una conexión HTTP estándar en Internet puede ser fácilmente secuestrada por partes no autorizadas. El propósito de una conexión HTTPS es evitar esto: encriptar Plus://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.
Your creations can reach users all across the world...

Mit diesem vorläufigen Material können wir beliebige Eigenschaften wie Autor (en), Veröffentlichungsdatum und Tags definieren. Elf legt die vordere Ausgabe bequem als dar Daten In fast allen Plugins, Vorlagen oder anderen Kontexten, in denen wir etwas Kluges tun möchten. Das Datenobjekt enthält auch das, was Eleventy als das beschreibt Datenkaskade: Eine Vielzahl von Daten, die aus jeder einzelnen Seite extrahiert wurden, das Layout, das die Seite verwendet, und die Daten, die in der hierarchischen Ordnerstruktur gefunden wurden.

Jedes einzigartige Design beschreibt eine andere Art von Inhalt und kann erben von andere Designs. Bei web.dev verwenden wir diese Funktion, um verschiedene Arten von Inhalten (z. B. Posts und Codelabors) ordnungsgemäß einzurahmen und gleichzeitig ein HTML-Layout der obersten Ebene freizugeben.

Sammlungen

Eleventy proporciona una forma programática de crear colecciones arbitrarias de contenido. Esto nos ha permitido crear soporte de paginación y generar páginas virtuales (páginas que no tienen un archivo Markdown coincidente en el disco) para los autores de publicaciones. Por ejemplo, construimos las páginas de nuestros autores usando una plantilla que contiene una expresión para su enlace permanenteUn link permanente (abreviado permalink), se refiere a un recurso especial que hace que un link esté permanentemente disponible. Los Permalinks son identificadores únicos en forma de URLs que se crean con el propósito de poder alcanzar siempre el contenido designado mediante de esa URL. Información general El contenido de la web está en constante cambio. En particular, los blogs, wikis, directorios web y revistas de noticias habitualmente se cambian Plus (por lo que la plantilla se vuelve a representar para cada autor) y una colección de respaldo.

Dies führt beispielsweise zu einer einfachen Seite, die alle Beiträge von Addy enthält.

Einschränkungen

Im Moment können wir uns nicht einfach mit dem Eleventy-Bauprozess verbinden, weil es so ist deklarativ, lieber als Imperativ- Beschreibt, was Sie wollen, anstatt wie Sie es wollen. Es ist schwierig, Eleventy als Teil eines größeren Build-Tools auszuführen, da es nur über die Befehlszeilenschnittstelle aufgerufen werden kann.

Vorlagen

web.dev verwendet die Nunjucks Vorlagensystem ursprünglich von Mozilla entwickelt. Nunjucks hat die typischen Merkmale von Vorlagen wie Schleifen und Bedingungen, aber es ermöglicht uns auch zu definieren Shortcodes die mehr HTML generieren oder andere Logik aufrufen.

Wie die meisten Teams, die Websites mit statischen Inhalten erstellen, haben wir mit kleinen Shortcodes begonnen und im Laufe der Zeit Shortcodes hinzugefügt - bisher etwa 20. Die meisten davon generieren nur mehr HTML (einschließlich unserer benutzerdefinierten Webkomponenten). Hier ist ein Beispiel:

{% Aside %}
[See how Asides work in the web.dev codebase](/handbook/web-dev-components/#asides)
{% endAside %}

Es wird am Ende so aussehen:

Aber Sie erstellen tatsächlich HTML, das so aussieht:

<div Klasse="w-aside w-aside--note">
<p><zu href="/handbook/web-dev-components/#asides">See how Asides work in the web.dev codebase</zu></p>
</div>

Während es außerhalb des Rahmens dieses Beitrags liegt, verwendet web.dev auch Shortcodes als eine Art Metaprogrammiersprache. Shortcodes akzeptieren Argumente, von denen eines der enthaltene Inhalt ist. Die Shortcodes müssen nichts zurückgeben, sodass sie verwendet werden können, um einen Status zu generieren oder ein anderes Verhalten auszulösen. 🤔💭

Skripting

Wie oben erwähnt, kann web.dev, da es sich um eine statische Site handelt, ohne JavaScript und mit älteren Browsern, die dies nicht unterstützen, bereitgestellt und verwendet werden Typ = "Modul" oder unser anderer moderner Code. Dies ist ein unglaublich wichtiger Teil unseres Ansatzes, web.dev für alle zugänglich zu machen.

Unser Code für moderne Browser besteht jedoch aus zwei Hauptteilen:

1. Bootstrap-Code, einschließlich Code für den globalen SPA-Status, das Parsen und das Routing
2. Código y CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Plus para componentes web que mejoran progresivamente el sitio

Der Bootstrap-Code ist ziemlich einfach: web.dev kann neue Seiten als Single-Page-Anwendung (SPA) laden. Daher haben wir einen globalen Listener installiert, der lokal auf Klicks wartet. <a href="/de/.../"> Elemente. Das SPA-Modell hilft uns dabei, den globalen Status während der aktuellen Benutzersitzung beizubehalten. Andernfalls würde jede neue Seitenladung Aufrufe an Firebase auslösen, um auf den Anmeldestatus eines Benutzers zuzugreifen.

También especificamos un par de puntos de entrada diferentes a nuestro sitio en función de la UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo Plus que haya accedido, y cargamos la correcta utilizando Dynamic importieren (). Dies reduziert die Anzahl der Bytes, die unsere Benutzer benötigen, bevor die Site mit Code erweitert wird.

Webkomponenten

Webkomponenten
sind benutzerdefinierte Elemente, die die in JavaScript bereitgestellten Laufzeitfunktionen kapseln und durch benutzerdefinierte Namen wie gekennzeichnet sind . El diseño se presta bien a sitios en gran medida estáticos como web.dev: su BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus 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ágina. Y los navegadores anticuados simplemente ignoran los componentes web por completo y renderizan lo que queda en el DOM.

Jede Webkomponente ist eine Klasse mit folgenden Methoden ConnectedCallback (), connectedCallback ()y attributeChangedCallback (). Die benutzerdefinierten Elemente von web.dev erben hauptsächlich von LitElement, die eine einfache Basis für komplexe Komponenten bietet.

Während web.dev auf vielen Seiten Webkomponenten verwendet, ist dies nirgendwo notwendiger als auf der Messseite. Zwei Elemente bieten die meisten Funktionen, die Sie auf dieser Seite sehen:

<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>

Estos elementos crean otros elementos que proporcionan más funcionalidad. Es importante destacar que estos elementos son solo parte de nuestro QuellcodeEl código fuente es un programa de PC o página web que se convierte en un lenguaje que es leído por una máquina y se recoge en imagen y función. El código fuente es una parte importante del SEO porque determina la correcta ejecución de una página web. La optimización del código fuente es por ende parte del SEO técnico. Código fuente para páginas web Mientras que el código fuente Plus regular de Markdown, y nuestro equipo de contenido puede agregar funcionalidad extendida a etwas Seite, nicht nur die nodejs Measure.

Unsere Webkomponenten werden am häufigsten verwendet Containerkomponente Modell, von React populär gemacht, obwohl dieses Modell jetzt ist es ein bisschen altmodisch. Jeder -Container Element verbindet sich mit unserem globalen Zustand (bereitgestellt von rückgängig machen) und rendert dann ein visuelles Element, das wiederum tatsächliche DOM-Knoten mit Stil oder anderen integrierten Funktionen rendert.

Unsere komplexesten Webkomponenten dienen zur Visualisierung globaler Aktionen und Zustände. Mit web.dev können Sie beispielsweise Ihre Lieblingssite prüfen und dann von der Seite "Messen" weg navigieren. Wenn Sie zurückgehen, werden Sie feststellen, dass die Aufgabe noch ausgeführt wird.

Unsere einfachen Komponenten verbessern lediglich den statischen Inhalt oder erstellen beeindruckende Visualisierungen (zum Beispiel ist jedes Liniendiagramm ein eigenes ), die keine Beziehung zum globalen Staat hat.

Lass uns schreiben

Das Engineering-Team von web.dev (Stehlen, Ewa, Michaely Sam) wird bald mit mehr technischen Tieftauchgängen fortfahren.

Esperamos que escuchar cómo hacemos las cosas te haya dado algunas ideas para tus propios proyectos. ¡Contáctenos en TwitterTwitter es una red social en Internet que permite a los usuarios difundir información en tiempo real. La característica más notable de twitter solía ser su limitación de tweets a 140 caracteres, pero en septiembre de 2017 se incrementó a 280 caracteres. El único requerimiento para utilizar Twitter es la creación de una cuenta gratuita. Tweets Twitter contiene pequeñas piezas de información llamada tweets. Se puede escribir un máximo de Plus si tiene preguntas o solicitudes de temas para este blog!