Platzi
Platzi

LA EDUCACIÓN ES UN REGALO PARA SIEMPRE. ¡ACCEDE A UN PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 22D : 17H : 12M : 1S

Motores de render: de archivos a píxeles

3/23
Recursos

Aportes 38

Preguntas 7

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

🤯 ¿Cómo así? ¿Motores?.. ¡Sí! Todos nuestros navegadores cuando los instalamos traen consigo un motorcito que les ayuda a traducir cada archivo que nosotros generamos, por ejemplo:
.

.
Esto es un archivo HTML (no te preocupes si no lo entiendes todavía, es solo un ejemplo para que sepas cómo se ve 👀).
.
Todo eso que vemos ahí es código que llegaremos a entender muy bien porque seremos developers bien pros 💪. Pero el navegador no lo entiende 😔… Es aquí en donde ese motorcito interviene, básicamente él se pone en medio y empieza a traducir toooooodo a algo que el navegador entiende. Es como si el navegador se hubiese contratado a su traductor personal 😎.

les recomiendo el navegador Brave

Los 5 pasos de los motores:

  1. Pasa los archivos de HTML a objetos (El DOM). Esto para que el navegador pueda entenderlo.
  2. Calcula el estilo correspondiente a cada nodo en el DOM.
  3. Calcula las dimensiones de cada nodo y va a empezar a estructurar la página web.
  4. Pinta las diferentes cajas.
  5. Toma las capas y las convierte en una imagen, para finalmente mostrar esta imagen en la pantalla.

Brave también usa Blink como motor, está enfocado en la privacidad del usuario y te dan la criptomoneda BAT por ver publicidad voluntariamente (ya que el navegador las bloquea automáticamente). Y dato importante, uno de sus fundadores es Brendan Eich, creador de Javascript.

Que bien explica la profesora💖💖 me encanta!

Mi navegador favorito es OperaGX, este usa Blink como motor de renderizado

Les comparto mis apuntes. 😄

Motores de renderizado

Cuando escribimos nuestros archivos HTML y CSS con ciertas etiquetas, selectores, atributos, propiedades, etc, todo eso el navegador no lo entiende y para poder entenderlo cada navegador tiene un motor que le permite entender y hacer visible en pixeles lo que nosotros hemos escrito.

Navegadores y sus motores

Cada navegador tiene diferentes motores, pero realizan el mismo proceso.

Pasos de los motores en general

  1. Transforma el HTML en objetos que el navegador puede entender que lo conocemos como DOM (Document Object Model).
  2. Calcula cada uno delos estilos que tiene que ir en cada uno de los nodos (elementos HTML). Agarra cada uno de los estilos y los añade a cada uno de los elementos del DOM.
  3. Calcula la dimensión de cada nodo, es decir, su posición, tamaño, estructura toda la página web.
  4. Pinta las diferentes cajas, ya teniendo todo lo anterior lo que hace es pintarlas.
  5. Agarra cada una de las cosas que ya se pintaron, pueden en diferentes capas, realiza una captura y eso lo que va a renderizar en el navegador.

DOM

Es el mismo HTML que conocemos pero pasados o transformados a objetos que en navegador entiende.

Este va estructurada cada una de las etiquetas comenzando por la principal y siguiendo con las demás.

Hola, les comparto mis apuntes tomando como referencia este video y algunos otros apuntes del curso anterior a este ‘Curso de Frontend Developer 2019’.

P.D. Nunca pares de aprender.

Apuntes:

Recomiendo ampliamente la lectura recomendada de la clase para profundizar sobre el funcionamiento de los motores (y aprender un poco mas sobre CSS). Tambien sirve para entrenar la lectura en ingles. 2 x 1

es bueno saber de los motores y como funcionan ahora las extensiones te lo ponen fácil escribiendo el código, pero saber como funciona creo yo es mucho mejor para poder tener la adaptabilidad correcta.

Notas de la clase:
El navegador no entiende el código HTML y CSS escrito en nuestro editor de texto.
Los navegadores poseen un motor el cual transforma el código HTML y CSS en algo que el navegador entienda y pueda pintarlo en pixeles para ser visualizados.
Cada navegador tiene su propio motor pero todos ellos hacen el mismo proceso.
Los motores realizan los siguientes 5 pasos

  1. Pasar los archivos HTML a objetos (DOM)
  2. Calcular los estilos que deben ir en los objetos del DOM.
  3. Calcular dimensión y posición de los objetos o nodos, estructurara la página.
  4. Pintar las diferentes cajas.
  5. Toma las diferentes capas y las convierte en un imagen para mostrar en la pantalla

Cada navegador implementa su propio motor de renderizado.
Todos cumplemn con los pasos de :

  1. Pasar los archivos a objectos en el DOM
  2. Calcular el estilo correspondiente a cada nodo del DOM
  3. Calcular las dimensiones de cada nodo y donde va en la pantalla.
  4. Pinta las cajitas!
  5. Toma fotos y convierte en imagenes que son las que se muestran en la pantalla para el usuario.

Estoy seguro que e hecho este curso 3 veces en 2 años. a alguien le a pasado?

Y pos esto es que es importante la semántica. Ya que al calcular los estilos para colocarlos en el DOM, le ayudamos al navegador a entender un poco más nuestro código, y a su vez a google le gustará esto y nos posicionará. xD

Wow, yo los conocía como motor de navegación, ahora sé que son lo mismo!

MOTORES DE RENDER DE ARCHIVOS A PIXELES

El trabajo que hace el navegador cuando esta trabajando con nuestros archivos convierte nuestros archivos a un lenguaje que entienda la maquina para poder visualizarlo

Navegadores

chrome - blink

edge - edge html

safari - webkit

firefox - gecko

estos motores son los encargados de interpretar nuestro código para ser representado

este es el proceso de conversión

  1. Pasa los archivos a objetos
  2. Calcula el estilo correspondiente a cada nodo
  3. calcula las dimensiones de cada nodo y donde va en la pantalla
  4. pinta las diferentes cajas
  5. toma las capas y las convierte en una imagen para la pantalla

Personalmente me gusta bastante el navegador Edge Chromium 🙂, solo por las opciones que brida de las pestañas verticales, las colecciones y como es la interfaz de cómoda🌟🌟, que te hace la vida más fácil, pero al momento de DevOps o inspeccionar prefiero Google Chrome😄.

Este es el Critical Rendering Path

Los nombres de los 5 pasos descritos en la clase son:

  1. DOM (Document Object Model).
  2. CSSOM (CSS Object Model).
  3. Render Tree.
  4. Layout.
  5. Paint.

La función principal de un motor de navegación es transformar los documentos HTML y otros recursos de una página web en una representación visual interactiva en el dispositivo del usuario (esta función se denomina renderización).
El motor de renderizado es software que toma contenido marcado (como HTML, XML, archivos de imágenes, etc.) e información de formateo (como CSS, XSL, etc.) y luego muestra el contenido ya formateado en la pantalla de aplicaciones.

super bien, conceptos que se me había olvidado

Les recomiendo el navegador Google Chrome por las DevTools, me parece que son muy buenas, pero claro, lo mejor es que cada uno de nosotros vayamos descubriendo que navegador nos gusta más así como cuál nos conviene más

Yo uso Cent, porque si uso google se me quema la pc.

Como dato curioso, varios navegadores estan basados en Chromium, que no es nada mas que un navegador open-source soportado por Google. Brave, Vivaldi, Edge e incluso Coogle Chrome estan basados en Chromium

Increíble todo lo que va detrás y uno ni se entera

Les dejo este artículo para ampliar el conocimiento 😄

Ya había tomado un curso de frontend pero no conocía nada de este tema. Gracias Platzi

los 5 pasos derl navegador
1 pasa los arhivos y los convierte en doom
2 calcula y el estilo
3 calcula las dimensiones que lo diste
4 pinta la pagina web
5 toma las capas y las convierte en imagenes

Esto es nuevo para mí!.
Tendré que hacer mis notas, aunque esto ya está en el manual del inicio, cierto?

Últimamente utilizo el navegador Brave, pero de vez en cuando el chrome dev tools para desarrollar.

Todos los motores funcionan de una forma parecida y todos siguen los siguientes pasos:

*Transformar el HTML en objetos que el navegador pueda entender, a este proceso se le conoce como DOM (Document Object Modele) que es basicamente ese HTML pero convertido en objetos que el navegador pueda entender
*Calcula cada uno de sus estilos que tiene que ir en cada uno de los nodos, el DOM va estructurando cada una de esas etiquetas
*Calcula las dimensiones de cada uno de esos nodos, va a decir en donde van, que tamaño tendrán y empezará a estructurar toda esa pagina web
*Pintar todas las diferentes cajas
*Tomar cada una de esas cosas que ya pintó, tomar una foto de esa información, y renderizarlo hacía el navegador para que así quedé mostrada en la pantalla

Apuntes de la clase:

  • Los motores de renderizado son los que convierten los archivos a pixeles, y son diferentes dependiento del tipo de navegador que se este utilizando
  • El navegador realiza 5 pasos esenciales al momento de mostrar los archivos: (1) Pasa los archivos a objetos,
    (2, 3) Calcula el estilo, dimension y posicion de cada nodo, (4) Aplica los estilos siguiendo la jerarquia. (5) Toma todos los objetos con los estilos ya aplicados y convierte todo a una imagen que es la que se muestra.
    Si entendemos el archivo como una estructura de arbol, los nodos se pueden entender como contenedores. Nodos inferiores son contenidos en otros (nodos intemedios) y la raiz del arbol seria el contenedor universal del archivo, que contiene a todos. Se aplican los estilos por orden de jerarquia.

Acá les dejo un resumen de este módulo llamado > Introdución

HTML:
- Es un lenguaje de marcado de hipertexto.
- Su función es estucturar nuestro sitio web, como un esqueleto.
CSS:
- Hoja de estilo en cascada.
- Permite generar estilo a nuestro sitio, ya sea a imágenes, botones, texto, etc.

Ambas tecnologías son importantes ya que nos permiten crear sitios modernos y estáticos.

Motores de renderización:
- Se encargan de decirle al navegador como mostrar el contenido de HTML y CSS dentro de una ventana. Los navegadores web no comprenden la sintáxis de estas dos tecnologías.

    * Tipos de motores:
            - chrome --> Blink.
            - Edge --> Edge HTML.
            - Safari --> Webkit.
            - Firefox --> Gecko.

    * Realizan los siguientes pasos:
            1) Tranforma el documento HTML en objetos, esto es conocido como DOM y permite al navegador poder entender el contenido de un HTML.
            2) En este paso, toma el CSS y lo implementa en los diferentes objetos del DOM.
            3) Cálcula el tamaño de cada objeto y lo pinta en pantalla.
            4) Pinta cada caja implementada en el paso anterior.
            5) Tras el paso anterior es momento de mostrarselas al usuario.

    * Conceptos:
            - DOM --> Document Objet Model. En simples palabras tranforma el documento HTML en ua estructura de árbol y ordenada de forma jerárquicamente. Para acceder al DOM lo haremos utilizando el lenguaje de programaciópn Javascript.

Al momento de que comencemos a programar en Javascript (En esta escuela evidentemente te vas a convertir en un experto). Conocerán que tenemos un motor V8 en nuestro navegador de Google Chrome 😱.

Para saber mas, te recomiendo el curso de JavaScript Engine (V8) y el Navegador

Es un curso bastante bueno y corto. Te lo recomiendo muchísimo. Una vez que realices el curso comparte con nosotros tu certificado aquí abajo.

Y recuerdo, NEVER STOP LEARNING 💚

Safari es el nuevo Internet Explorer