Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 15D : 9H : 38M : 5S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web4/43

DOM: Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.

CSSOM: así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.

Render Tree: es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.

Pasos que sigue el navegador para construir las páginas web:

  1. Procesa el HTML para construir el DOM.
  2. Procesa el CSS para construir el CSSOM.
  3. El DOM se une con el CSSOM para crear el Render Tree.
  4. Se aplican los estilos CSS en el Render Tree.
  5. Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

Podemos relacionarlo con el cuerpo humano, HTML representa las bases con las que se sostiene el cuerpo, como los huesos, CSS nos permite definir la impronta visual de la web, como la piel, la ropa y accesorios, y Javascript nos permite otorgarle a la web, dinamismo y movimiento, como los músculos del cuerpo humano.
HTMLCSSJAVASCRIPT.jpg

78.png79.png80.png81.png

5 AÑOS EN LA UNIVERSIDAD ESTUDIANDO SISTEMAS Y NO PUEDO CREER QUE RECIÉN ME HAYA QUEDADO EL 100% CLARO ESTOS CONCEPTOS TAN BÁSICOS EN EL MUNDO DEL DESARROLLO WEB. SHAME ON ME!!
PD: ME DECLARO PLATZILOVER

DOM
Document object model
El navegador transforma las etiquetas en objetos que son entendibles para el navegador.

CSSOM
Este mismo agarra el código de css y lo transforma en un lenguaje entendible para el navegador

RENDER TREE
Este mismo es un árbol en el que el DOM y el CSSOM juntos para renderizar el proceso que creamos en el codigo.

Como el navegador lee el código
1- El navegador transforma el código en bytes
2- teniendo el código en bytes este los transforma en caracteres y este se da cuenta leyendo el meta charset
3- Tokens, este los transforma en elementos html y los ordena
4- Transforma estos en Nodos y estos son los que entiende el.
y clasifica los objetos y los contenidos
5- El dom es el árbol de los elementos que se forma con todos estos pasos.

Sugerimos mas profesoras asi <B, explican muy bien y uno no se aburre nunca 😄

Segunda Clase (DOM, CSSOM. Render Tree).

  • Document Object Model: es la forma en la que el navegador transforma el código HTML que es escrito por los programadores y lo convierte en objetos que son entendibles por el navegador para poder representarlos y renderizarlos para el usuario.

El navegador hace 5 pasos para poder entender el código que hemos escrito en HTML

  1. convierte el código en Bytes para poderlo entender
  2. después lo convierte en caracteres dependiendo de la codificación que le dimos por ej: UTF-8.
  3. convierte los caracteres en tokens para ordenarlos, automaticamente detecta a que etuiqueta hace relación la agrupación de caracteres (W3C).
  4. hace una transformación a nodos u objetos.
  5. organiza los objetos en el DOM (DOcument Object Model), sigue una estructura de arbol, donde su raiz es la etiqueta principal <html> y de ahí empieza a bifurcarse de manera jerarquica.
  • *CSSOM: es la forma como el navegador procesa el lenguaje del CSS para insertarlo en la estructura previa del html y darle estilos a los objetos exitentes en el DOM.

El CSS hace una transformaciión individual pero se pega a la transformación hecha por el DOM, asignandole a cada objeto el CSS que le corresponde.

  • Render Tree: es donde se unen el DOM y el CSSOM en una estructura de arbol para poder ser renderizados para su presentación frente al usuario.

se realizan 5 pasos:

  1. se procesa el HTML y se construye el DOM
  2. Se procesa el CSS y se construye el CSSOM
  3. se unen el DOM y el CSSOM en el RENDER TREE
  4. Se ejecuta el render tree
  5. Se pinta sobre el Navegador.
DOM y CSSOM

El navegador no entiende nada de código, tiene que transformar el código en objetos que él entienda, pero debe tener un orden para eso es útil el DOM y el CSSOM que son como un árbol, ambos tienen su tronco (su estructura básica) y de ahí salen ramas (objetos) y hojas (el contenido de los objetos)

Render tree

Es un árbol nuevo que se crea combinando el DOM y el CSSOM donde a cada objeto se le asigna su estilo.

Así es como se hace el DOM y el CSSOM

1)Bytes: Con ellos se crean los lenguajes HTML y CSS
2) Characters: Son el lenguaje HTML y CSS, con ellos definimos la información, donde va a estar y el estilo que va a tener.
3)Tokens: Va a tomar los Characters y los va a procesar para saber qué información hay, donde comienza y dónde termina.
4)Nodes: Son la transformación de los tokens en objetos que entiende el navegador.
5) DOM y CSSOM: Se crean el COM y el CSSOM

Pasos que sigue el navegador

1)Procesa y estructura el DOM
2)Procesa y estructura el CSSOM
3)Crea el render tree
4)Ejecuta el Render tree
5)Muestra en pantalla el resultado

Están bien cool sus diapositivas 😄

Video corto, pero con muy buena info que nos ayudará a entender mejor esta clase.
https://www.youtube.com/watch?v=lvb06W_VKVE

DOM: Document Object Model. Es la transformación de HTML a objetos comprensibles por el Navegador.
CSSOM: CSS Object model: Es justamente el modelo de transformación de objetos de CSS a objetos comprensibles por el navegador.
Render tree: DOM y CSSOM juntos para mostrar el producto terminado.

Body: es la etiqueta dónde agregaremos todas las otras etiquetas que pintarán el resultado en el navegador.
Existen etiquetas de apertura y de cierre.
Proceso de transformación del HTML a DOM:
• El codigo se transforma en bytes
• Estos se transforman en caracteres dependiendo de la codificación dada. En nuestro ejemplo UTF8. Esto se encuentra en nuestra etiqueta head.
• Estos caracteres se transforman en tokens, es decir las etiquetas se organizan en tokens. La especificación imperante es la definida por el W3C.
• Los tokens se transforman en nodos, estos objetos son el producto de las etiquetas html.
• Los nodos se colocan en el arbol de renderizado generando el DOM
En la transformación del CSS sucede algo similar, dándo como resultado el CSSOM.
Agregar el css específico y únicamente el que se requiere para darle estilo a las etiquetas de html es crucial para la eficiencia del sitio web que vamos a crear. Esto porque el proceso para crear el CSSOM toma tiempo para ajustar las definiciones de las etiquetas de css, entonces cada etiqueta mal utilizada o utilizada de más implicará una consecuencia de rendimiento de carga de nuestro sitio.
Resumen
• Procesa HTML y construye el DOM
• Procesa CSS y construye el CSSOM
• Ejecuta el diseño en el render tree
• DOM + CSSOM = Render tree
• Pinta los nodos en pantalla.

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
DOM: Document Object Model, es una transformación del código HTML a objetos que son entendibles para el navegador.
CSSOM: Es una representación de objetos del código HTML.
Render Tree: Es un árbol en el cual se renderizan juntos el DOM y el CSSOM.
El navegador necesita realizar unos procesos para poder comprender el código que nosotros hemos escritos.

  1. Transforma el código en bytes
  2. Transforma los bytes en caracteres dependiendo de la codificación que hemos seleccionado (casi siempre es UTF-8).
  3. Transforma los caracteres en TOKENS y organiza en elementos HTML Analiza que cadena de caracteres corresponde a cuál etiqueta HTML.
  4. Transforma los TOKENS a los nodos que son los elementos que el navegador comprende.
  5. Para finalizar organiza todos los nodos en un árbol construyendo el DOM.
    El siguiente paso es realizar el proceso, pero con el CSS y construyendo finalmente el CSSOM y una vez ya elaborado ambos arboles estos se juntan y se le asigna el CSS a cada elemento del HTML que corresponde.
    Pasos que hace el navegador para procesar el código
  6. Procesa el HTML y construye el DOM
  7. Procesa el CSS y construye el CSSOM
  8. Une el DOM y el CSSOM formando el RENDER TREE
  9. Ejecuta el diseño en el RENDER TREE
  10. Pinta el nodo en la pantalla, es lo que finalmente termina viendo el usuario.

download (3).png
download (4).png
download (5).png

1- procesa HTML y construye el DOM.
2- Procesa CSS y construye CSSOM
3- DOM + CSSOM = Render Tree
4- Ejecuta el diseño. Aplica los estilos CSS a las etiquetas HTML.
5- Pinta en la pantalla.

DOM (document object model): es la transformación de nuestro html en objetos entendibles para el navegador.
CSSOM (css object model): es la transformación de nuestro css en objetos entendibles para el navegador.
Render Tree: es la suma del DOM + CSSOM renderizado por nuestro navegador

La profesora que me dieron sobre HTML y CSS, debería tomar los cursos de platzi ya que nos enseñaba de mala gana, por suerte soy como muchos de la comunidad de Platzi que tiene hambre de mas y no se queda conforme con lo que le enseñan.

Si recién comienzan recomiendo escribir a lo loco y equivocarse mucho. Después optimizar. Si lo hace al revez es mas probable que aprendan lento.

Si les interesa saber qué son los nodos y árboles pueden ir al curso de “Matemáticas discretas”, ahí pueden aprenderán sobre los fundamentos.
Observación: el curso es de matemáticas por ende los ejemplos serás a través de modelos matemáticos o analíticos, pero es lo que se aplica a nivel de programación. Los árboles son una estructura de datos muy potente y utilizada en el mundo de la programación.
Curso: https://platzi.com/cursos/discretas/

en los otros cursos de desarrollo web no habían abarcado los conceptos, este curso va bien para aprender los conceptos y teoría

Vengo de ver el lanzamiento de la Crew Dragon de Spacex por platzi live

Hola muchachos
les dejo un link donde podemos reforzar estos conceptos si no quedaron completamente claros
http://gperezcaviglia.com.uy/2018/04/07/dom-y-cssom/

DOM = para html.
CSSOM = para css
RENDER TREE = union de los anteriores

Recomiendo mucho la explicación de Fredy del curso gratuito de programación de platzy, complementa mucho los conceptos del Documento, DOM y otras cosas.

EXPLICA MUY BIEN.

Proceso de renderizado de la Web

  1. Procesa el HTML y lo construye en el DOM.
  2. Procesa CSS y construye el CSSOM
  3. DOM + CSSOM = Render Tree (Crea un solo árbol)
  4. Ejecuta el diseño en el Render tree.
  5. Pinta el Nodo en la pantalla.
carbon (4).png

Pasos que sigue el navegador para construir las páginas web:

1.- Procesa el HTML para construir el DOM.
2.- Procesa el CSS para construir el CSSOM.
3.- El DOM se une con el CSSOM para crear el Render Tree.
4.- Se aplican los estilos CSS en el Render Tree.
5.- Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

Al menos yo que comienzo casi desde cero… me pareció genial esta clase!
Muy entusiasmado por seguir

De acuerdo con https://es.ryte.com/wiki/Meta_Etiqueta

Las meta etiquetas (también llamadas: meta tags) se utilizan al crear páginas en HTML o XHTML. Estas etiquetas pueden describir el contenido de un sitio web con precisión. Este elemento te permite transmitir metadatos estructurados a través de la página web. Los metadatos pueden variar dependiendo de la descripción de los atributos deseados. Las meta etiquetas se pueden utilizar para describir una página con más detalle.

Un meta elemento puede utilizarse para imitar la respuesta HTTP de un encabezado o para anclar meta información adicional en el documento HTML, como el autor de un texto con una etiqueta de autor, o la forma en que los caracteres se mostrarán a través de la etiqueta de tipo de contenido.

En HTML5 hay un total de cinco atributos válidos que están disponibles para la etiqueta meta: charset, http-equiv, nombre, esquema y contenido. El http-equiv se usa para imitar la respuesta HTTP del encabezado.

Me gusta desde la introducción (los cubos amarillos, el logotipo) a la combinación de colores que usó el equipo de producción de Platzi. Ojalá los videos no fueran tan comprimidos para disfrutarlos más, pero muy bonito todo. Platzi, haz cursos de medicina o genética. ❤️ Los amo.

Proceso de renderizado de la Web

  • Procesa el HTML y lo construye en el DOM.
  • Procesa CSS y construye el CSSOM
  • DOM + CSSOM = Render Tree (Crea un solo árbol)
  • Ejecuta el diseño en el Render tree.
  • Pinta el Nodo en la pantalla.

DOM: Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.

CSSOM: así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.

Render Tree: es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.

Pasos que sigue el navegador para construir las páginas web:

Procesa el HTML para construir el DOM.
Procesa el CSS para construir el CSSOM.
El DOM se une con el CSSOM para crear el Render Tree.
Se aplican los estilos CSS en el Render Tree.
Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

Para los hackers curiosos que les interesa saber mas como funciona los navegadores por dentro: howbrowserswork

Pasos del Navegador:

  1. Procesar HTML, Construir DOM
  2. Procesar CSS, Construir CSSOM
  3. Union de DOM + CSSSOM, Resultado RENDER TREE
  4. Ejecutar Diseño en RENDER TREE
  5. Pintar el Nodo en Pantalla.

Estoy ansioso por ver el contenido de este curso. ¡Vamos a darle!

Programe por toda la prepa páginas web y hasta ahora vengo a enterarme de estos términos, buen comienzo

DOM Document Object Model, el navegador transforma el código a objetos entendibles para el Navegador.

CSSOM Representación de Objetos entendibles para el Navegador.

Render Tree Es el árbol de Objetos de CSS y HTML para representarlo/renderizarlo en el Navegador.

Que bueno es aprender desde la raíz 💚

Excelente vídeo me agrado como explico el funcionamiento que realiza por detrás el navegador.

Tokens: Verifica dónde abre y dónde cierra cada etiqueta. Les da jerarquía a las etiquetas dentro de las ya verificadas y ve dónde son cerradas.

Nodos: Con la información de los tokens de cómo están organizadas las etiquetas, se crean objetos (como en los archivos json) que contienen más objetos o contenido.

DOM: A partir de estos nodos de objetos y contenidos se crea el árbol donde se representa de manera mas gráfica la organización.

DOM => Document Object Model. El navegador transforma los “tag” en objetos que son entendibles para el navegador ( transformación del código que escribimos a objetos).
CSSOM =>Representacion de objetos del CSS. (similar al DOM)
Render Tree => DOM + CSSOM - Renderiza el código de nuestra página.

El navegador realiza 5 pasos para hacer la transformación

1- Transforma el código a bytes
2-Transforma los bytes en characters
3-Transforma los caracteres a tokens (Organiza los caracteres transformado en elementos HTML - Identificar que etiquete se relaciona con los caracteres)
4- Tranformación a Nodes (Objetos entendibles para el browser).
5- Todo los Nodes se le organiza en un árbol de representación de HTML.

/*
DOM (Document Object Model) = Se refiere a la transformación de nuestras etiquetas HTML a objetos que el navegador entienda.

También el DOM es el encargado de brindarnos una representación estructurada del documento, permitiéndonos modificar su contenido y su representación visual.

CSSOM (CSS Object Model) = Al igual que el DOM, el CSSOM realiza una transformación de código CSS a objetos que el navegador entienda.

Otra de las diferencias entre el DOM y el CSSOM, es que el CSSOM nos permite modificar los estilos CSS de manera dinámica, a diferencia del DOM, que sus estilos son de manera inline.

Y el Render Tree es simplemente el renderizado de la unión del DOM y el CSSOM.
*/

Uff está clase estuvo super , tantos cursos que he visto sobre Html y Css pero todo el mundo habla del DOM, nunca había escuchado el CSSOM y el Render Tree. Muy buena explicación. Realmente aprenderé mucho de este curso 🤯

Buena @teffcode no había visto una explicación tan buena de un proceso como este.

Me parece excelente esta explicación de la profesora 👩🏼‍🏫, te deja mas claro los conceptos de DOM, CSSOM y Render Tree 🖥, entender los conceptos desde lo fundamental de su funcionamiento te hace ser mejor desarrollador. 👍

mi amor por el desarrollo Web regreso <9/3

•DOM: Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.
•CSSOM: así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.
•Render Tree: es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.

Todas páginas web están formadas por html, css y Javascript e independienemente de la cantidad de cada uno de ellos, los navegadores siempre siguen el mismo proceso para conseguir tanto el contenido como la manera en que éste se ha de mostrar al usuario:

|
🔸 Generar el árbol DOM a partir del html.
🔸 Generar el CSSOM Tree a partir del css.
🔸 Generar el Render Tree con la combinación del DOM y 🔸 CSSOM
🔸 Calcular la disposición o layout de todos los nodos.
🔸 Pintar los nodos del Render Tree.

|
5-pasos-que-siguen-los-navegadores-para-pintar.png
|
**El DOM **
Es el árbol de nodos que representa los contenidos de la página o aplicación web. Estos contenidos están determinados por el HTML y, aunque se parezca bastante al DOM, no són lo mismo.

|
¿Cómo se genera el árbol DOM?
El DOM se genera a partir del fichero con extensión .html y sigue distintos pasos para generarse:

|
🔹 Convertir los bytes a carácteres.
🔹 Pasar de carácteres a tokens.
🔹 Generar los nodos.
🔹 Construir el árbol DOM.

|
El CSSOM
es el árbol de nodos que indicará al navegador cómo se debe pintar el DOM (el contenido que tenemos para pintar) dadas las distintas reglas que tengamos de CSS.
|
¿Cómo se genera el árbol CSSOM?
El CSSOM se genera a partir del fichero con extensión .css y sigue exactamente los mismos pasos que el DOM para generarse:
|
🔹 Convertir los bytes a carácteres.
🔹 Pasar de carácteres a tokens.
🔹 Generar los nodos.
🔹 Construir el árbol CSSOM.
|
La construcción del DOM y del CSSOM se hacen de manera asíncrona/paralela. Eso significa que el proceso de generar el CSSOM no es bloqueante para poder generar el DOM pero, si que lo es para renderizarlo.
|
RENDER TREE
Toda la información que el usuario ve a través de su pantalla y la manera en que ésta se presenta, viene dada por el render tree. Éste, no es más que un conjunto de nodos que tienen la información a mostrar y unos estilos atribuidos (sean los que por defectos cada buscador le atribuye a los elementos o los que nosotros hayamos querido añadirles).
|
¿Cómo se genera el render tree?
El render tree es la combinación de dos árboles de nodos llamados DOM y CSSOM, recordemos que:
|
Calcular el layout o disposición de los nodos
La fase o paso de cálculo de la disposición de los nodos sirve para calcular que geometría tendrá cada uno de los nodos como también para saber su distribución en la pantalla respecto al orígen.
|
Layout o plantilla es un esquema de la distribución de los elementos dentro de una página web. Se compone de una serie de bloques de ciertas dimensiones en los que se colocará el contenido. Estos bloques suelen trazarse a través de etiquetas HTML comunes, como div, o semánticas, como header, nav, section, article, aside y footer, incorporadas en HTML5.
|
Pintar
En esta fase el navegador convierte al árbol de representación o Render Tree en píxeles en la pantalla.
|
Es curioso saber que las distintas propiedades de CSS cuestan más o menos de pintar dependiendo de como estén combinadas.
|
Supongamos el hipotético caso que se tardara 1 segundo en pintar un box-shadow. Si éste es combinado con una propiedad border, ésta, haría que tardase 1.5 segundos en vez de 1 segundo.
|

a.png
render-tree-construction.png

Les recomiendo este Curso de Introducción a la Web: Historia y Funcionamiento de Internet donde explican de manera detallada los códigos binarios y porque todo es 0 y 1 😉

4. DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
El navegador por lo general no entiende de manera directa la sintaxis que escribimos tanto en html como css, para entender el código que escribimos el navegador transforma las etiquetas html y las reglas de css en objetos entendibles para el navegador. Cabe añadir que el orden de nuestra estructura html es igual al orden de los objetos que el navegador crea.
Tres conceptos fundamentales para entender el renderizado de la web

  • DOM
    Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.

  • CSSOM
    Así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.

  • Render Tree
    Es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.

Los pasos que el navegador realiza para transformar el código en algo que este entienda.

Pasos que ocurre en el DOM

  1. El código lo transforma una serie de Bytes el código escrito en el lenguaje
  2. Transformar los bytes en unos caracteres esto lo realiza tomando en cuenta la codificación que le indiquemos en la etiqueta chartset=utf-8.
  3. Luego transforma esos caracteres en unos tokens. Que son unos elementos html que él entiende, en este punto el navegador identifica que etiqueta abre y que etiqueta cierra. Esto lo especifica la w3c.
  4. Luego realiza una transformación de tokens a nodos y estos nodos son los objetos que entiende el navegador
  5. Luego el DOM sería tomar todos esos elementos (nodos) y ponerlos en un árbol y ese árbol va a tener una estructura que depende de la organización que tenemos en nuestro sitio web.

Pasos que ocurre en el CSSOM

  1. CSSOM lo que va a hacer es la transformación individual a cada una de su sintaxis y la va a pegar por decirlo así de forma individual en cada nodo del árbol del DOM.
  2. Es importante recalcar que si escribimos reglas de manera no estandarizada y con buenas prácticas se verá afectado el rendimiento de la rendermerización de nuestra página web y esto se conoce como performance o rendimiento

** Y finalmente el Render TREE ,Pasos que sigue el navegador para construir las páginas web**

  1. Procesa el HTML para construir el DOM.
  2. Procesa el CSS para construir el CSSOM.
  3. El DOM se une con el CSSOM para crear el Render Tree.
    Se aplican los estilos CSS en el Render Tree.
    Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

les dejo los 5 pasos
procesa de html y construye el dom
procesa css y contriye el cssom
ejecuta el diseño render tree
pinta el nodo en la pantalla

DOM: Al escribir al código HTML en el editor, lo pasamos al navegador, pero el navegador no entiende lo que escribimos, por lo que transforma ese texto para pasarlo a unos objetos que son entendibles para el navegador.
CSSOM: Es una representación de objetos de CSS, también convierte objetos entendibles para el navegador.
RENDER TREE: Es un árbol que une al DOM y CSSOM para poder renderizar todo el proceso que hemos hecho en el código.

Los pasos principales se resumen en 5 palabras

DOM
Forma un arbol con todo el html

CSSOM
Forma un arbol con todo el css

RENDER TREE
Une los dos arboles y crea uno solo

LAYOUT 
Al formar el render tree forma la base del diseño sin color

PAINT
Y en este pinta todo el layout para poder visualizar nuestra pagina completa

En resumen entendí que el html se engloba en el DOM dentro de una estructura de árbol que lleva cada elemento del marcado y el contenido representando los elementos en el navegador y CSS DOM representando cada uno de los estilos personalizados a nuestra pagina web

Muy buena explicación!!!

Excelente cátedra!

Me encanta poder aprender siempre algo nuevo pero sobre todo me encanta cuando vemos lo profundo para comprender su comportamiento, aunque ya luego no lo pensamos y solo lo hacemos de manera practica!

Alguien sabe que tipo de fuente usa en su codigo en el minuto 2:00 ? Se ve hermosa 😄

excelente curso…

Gracias profe esos gráficos ayudan bastante

Yo solo conocía el DOM, pero investigando he llegado a la conclusión de que CSSOM y RenderTree son aspectos que no deben dejarse de lado.
Es lo malo de los resúmenes.

Muy buena explicación de como es el proceso hay por debajo para poder mostrar el contenido de la pagina.

pokitico en pokitico, voy aprendiendo … este tema es la organizacion de los elementos de HTML Y CSS

Increíble clase, había escuchado sobre esos conceptos pero nunca había profundizado en ellos, ahora lo tengo claro, ¡este curso se ve prometedor!

Excelente metodología para enseñar, me gusta como empezó dando sus clases, vamos bien, estoy impaciente por ver exactamente la funcionalidades

Muy buena clase. Necesitaba esta información, para complementar lo aprendido en otros cursos. Gracias. Comenzó muy interesante el curso.

¡La primera vez que oigo CSSOM!

Buena clase, en el punto 5 el termino apropiado es imprimir:
Se imprimen los nodos en la pantalla para que los usuarios vean el contenido de la página web.

Bytes -> Characters -> Tokens -> Nodes -> DOM -> CSSOM -> DOM + CSSOM = Render tree -> Ejecutar diseño al Render Tree -> Mostrar Nodos en la pantalla

html => (browser) => DOM
css => (browser) => CSSOM

DOM + CSSOM => (browser) => Render

parami es mas fasil que noseque i tengo 11 años

  • DOM es el árbol de representación de nuestro HTML.
  • CSSOM se encarga de asignar el CSS que le corresponde a nuestros objetos.
  • DOM +CSSOM = RENDER TREE.

**5 pasos para transformación de lectura del código. **

  1. Bytes.
  2. Caracteres. <META> utf-8 Codificación que estamos trabajando.
  3. Tokens. Organizar elementos HTML W3C. identificar etiquetas
  4. Nodos. Tag´s y contenido.
  5. DOM. Todos esos elementos en un árbol. Seguir una estructura.

Performance => rendimiento de la aplicación.
Es mejorar nuestro código CSS llevar un orden para tener una fluidez en el proceso de lectura a nuestro sitio web.

Despues de hacer la carrera de Front end… ver este curso no tiene pierde como repaso. Eres muy buena explicando.!! ❤️

El Navegador:

  1. Procesa HTML y construye el DOM
  2. Procesa el CSS y construye el CSSOM
  3. DOM + CSSOM = Generan el Render Tree
  4. Se ejecuta el diseño en el render Tree
  5. Pinta el nodo en la pantalla

Me gusta mucho la forma clara de explicar de esta profe 😃

Muy buena explicación!

No conocía todo el proceso de creación del DOM, sobre todo la parte de TOKENS, solemos dar por hecho que todo es simple aunque haya por detrás algo mucho más complejo. Aprendemos a hacer magia pero es muy recomendable saber que pasa por “debajo”

Profunda y entendible explicación
Con una profe así. Me animo

buena explicacion, no tenia claro lo que era el dom

Esto quiere decir que en react componente tiene este este proceso al entrar?

Pasos que hace el navegador:

  1. Procesa HTML y construye el DOM
  2. Procesa el CSS y construye el CSSOM
  3. DOM + CSSOM = Render tree
  4. Ejecuta el diseño en el render tree
  5. Pinta el nodo en la pantalla 😃

No tenia idea del Render Tree!
Excelente video

📓**Notas **📓
DOM = Docuement Object Model -> Transorma las etiquetas a objectos para que el navegador entienda
CSSOM = Representacion de objectos de las reglas css
RENDER TREE = Arbol de la union del DOM y CSSOM
**PASOS PARA LA TRANSFORMACION ** 🛠➡🖥

  1. Construccion del DOM = BYTES -> CHARACTERS (utf-8) -> TOKENS -> NODES (Objects) -> DOM (Union de los nodos)
  2. CSSOM -> Convierte las reglas a objetos
  3. Render Tree = DOM + CSSOM -> linkea los objetos del dom con los del cssom para darle estilos a los objectos del dom
  4. Ejecuta y pinta en la pantalla del render tree

que bien explica esta profesora!!!

En solo una clase entendi tres conceptos fundamentales para la construcción de una página web.

Eso, no lo sabia, que el navegador no entiendo html exactamente, y lo que ocurre es una transformacion de nuestro HTML por parte del navegador a un objeto llamado DOM. WOW ! Brutal! jajaja

Todo este proceso de html hasta la representacion es pesado, por eso es que React con su virtual DOM es mas eficiente a la hora de renderizar.

interesante, aprender como procesa el navegador lo que nosotros escribimos

DOM: (Document Object Model) Es la transformación del código HTML que nosotros escribimos a objetos que son entendibles por el navegador.

CSSOM: Es una representación de objetos de CSS también toma el codigo y lo convierte en objetos que son entendibles para el.

RENDER TREE: Es el DOM y el CSSOM juntos para renderisar ese código.

1. Bytes: Coger el código que escribimos y los transforma en bytes

2. Caracteres: Son precisamente esa transformación de bytes a esos caracteres, dependiendo de esa codificación que nosotros le hemos dicho (Ejemplo: el UTF-8)

3. Tokens: Transformación de los caracteres en unos tokens (etiqueta principal, etiqueta que cierra, que abre, etc), organizará todo eso que se ya se transformó en caracteres y pasa a convertir a elementos HTML

4. Nodos: Son objetos que entiende el computador (elementos)

5. DOM: Coger todos esos elementos y ponerlos en un tree, ese árbol tendrá una estructura dependiendo de la organización que tenga en el código

Reforzando conocimientos

Pasos del navegador para mostrar una pagina

1.- Procesa el HTML y construye DOM 2.- Procesa el CSS y construye el CSSOM 3.- DOM+CSSOM = RENDER TREE 4.- Ejecuta el diseño en el Rebder Tree 5.- Pinta el nodoen la pantalla

Bytes => Characters => Tokens => Nodes => DOM

Podemos relacionarlo con el cuerpo humano, HTML representa las bases con las que se sostiene el cuerpo, como los huesos, CSS nos permite definir la impronta visual de la web, como la piel, la ropa y accesorios, y Javascript nos permite otorgarle a la web, dinamismo y movimiento, como los músculos del cuerpo humano.
HTMLCSSJAVASCRIPT.jpg

78.png79.png80.png81.png

5 AÑOS EN LA UNIVERSIDAD ESTUDIANDO SISTEMAS Y NO PUEDO CREER QUE RECIÉN ME HAYA QUEDADO EL 100% CLARO ESTOS CONCEPTOS TAN BÁSICOS EN EL MUNDO DEL DESARROLLO WEB. SHAME ON ME!!
PD: ME DECLARO PLATZILOVER

DOM
Document object model
El navegador transforma las etiquetas en objetos que son entendibles para el navegador.

CSSOM
Este mismo agarra el código de css y lo transforma en un lenguaje entendible para el navegador

RENDER TREE
Este mismo es un árbol en el que el DOM y el CSSOM juntos para renderizar el proceso que creamos en el codigo.

Como el navegador lee el código
1- El navegador transforma el código en bytes
2- teniendo el código en bytes este los transforma en caracteres y este se da cuenta leyendo el meta charset
3- Tokens, este los transforma en elementos html y los ordena
4- Transforma estos en Nodos y estos son los que entiende el.
y clasifica los objetos y los contenidos
5- El dom es el árbol de los elementos que se forma con todos estos pasos.

Sugerimos mas profesoras asi <B, explican muy bien y uno no se aburre nunca 😄

Segunda Clase (DOM, CSSOM. Render Tree).

  • Document Object Model: es la forma en la que el navegador transforma el código HTML que es escrito por los programadores y lo convierte en objetos que son entendibles por el navegador para poder representarlos y renderizarlos para el usuario.

El navegador hace 5 pasos para poder entender el código que hemos escrito en HTML

  1. convierte el código en Bytes para poderlo entender
  2. después lo convierte en caracteres dependiendo de la codificación que le dimos por ej: UTF-8.
  3. convierte los caracteres en tokens para ordenarlos, automaticamente detecta a que etuiqueta hace relación la agrupación de caracteres (W3C).
  4. hace una transformación a nodos u objetos.
  5. organiza los objetos en el DOM (DOcument Object Model), sigue una estructura de arbol, donde su raiz es la etiqueta principal <html> y de ahí empieza a bifurcarse de manera jerarquica.
  • *CSSOM: es la forma como el navegador procesa el lenguaje del CSS para insertarlo en la estructura previa del html y darle estilos a los objetos exitentes en el DOM.

El CSS hace una transformaciión individual pero se pega a la transformación hecha por el DOM, asignandole a cada objeto el CSS que le corresponde.

  • Render Tree: es donde se unen el DOM y el CSSOM en una estructura de arbol para poder ser renderizados para su presentación frente al usuario.

se realizan 5 pasos:

  1. se procesa el HTML y se construye el DOM
  2. Se procesa el CSS y se construye el CSSOM
  3. se unen el DOM y el CSSOM en el RENDER TREE
  4. Se ejecuta el render tree
  5. Se pinta sobre el Navegador.
DOM y CSSOM

El navegador no entiende nada de código, tiene que transformar el código en objetos que él entienda, pero debe tener un orden para eso es útil el DOM y el CSSOM que son como un árbol, ambos tienen su tronco (su estructura básica) y de ahí salen ramas (objetos) y hojas (el contenido de los objetos)

Render tree

Es un árbol nuevo que se crea combinando el DOM y el CSSOM donde a cada objeto se le asigna su estilo.

Así es como se hace el DOM y el CSSOM

1)Bytes: Con ellos se crean los lenguajes HTML y CSS
2) Characters: Son el lenguaje HTML y CSS, con ellos definimos la información, donde va a estar y el estilo que va a tener.
3)Tokens: Va a tomar los Characters y los va a procesar para saber qué información hay, donde comienza y dónde termina.
4)Nodes: Son la transformación de los tokens en objetos que entiende el navegador.
5) DOM y CSSOM: Se crean el COM y el CSSOM

Pasos que sigue el navegador

1)Procesa y estructura el DOM
2)Procesa y estructura el CSSOM
3)Crea el render tree
4)Ejecuta el Render tree
5)Muestra en pantalla el resultado

Están bien cool sus diapositivas 😄

Video corto, pero con muy buena info que nos ayudará a entender mejor esta clase.
https://www.youtube.com/watch?v=lvb06W_VKVE

DOM: Document Object Model. Es la transformación de HTML a objetos comprensibles por el Navegador.
CSSOM: CSS Object model: Es justamente el modelo de transformación de objetos de CSS a objetos comprensibles por el navegador.
Render tree: DOM y CSSOM juntos para mostrar el producto terminado.

Body: es la etiqueta dónde agregaremos todas las otras etiquetas que pintarán el resultado en el navegador.
Existen etiquetas de apertura y de cierre.
Proceso de transformación del HTML a DOM:
• El codigo se transforma en bytes
• Estos se transforman en caracteres dependiendo de la codificación dada. En nuestro ejemplo UTF8. Esto se encuentra en nuestra etiqueta head.
• Estos caracteres se transforman en tokens, es decir las etiquetas se organizan en tokens. La especificación imperante es la definida por el W3C.
• Los tokens se transforman en nodos, estos objetos son el producto de las etiquetas html.
• Los nodos se colocan en el arbol de renderizado generando el DOM
En la transformación del CSS sucede algo similar, dándo como resultado el CSSOM.
Agregar el css específico y únicamente el que se requiere para darle estilo a las etiquetas de html es crucial para la eficiencia del sitio web que vamos a crear. Esto porque el proceso para crear el CSSOM toma tiempo para ajustar las definiciones de las etiquetas de css, entonces cada etiqueta mal utilizada o utilizada de más implicará una consecuencia de rendimiento de carga de nuestro sitio.
Resumen
• Procesa HTML y construye el DOM
• Procesa CSS y construye el CSSOM
• Ejecuta el diseño en el render tree
• DOM + CSSOM = Render tree
• Pinta los nodos en pantalla.

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
DOM: Document Object Model, es una transformación del código HTML a objetos que son entendibles para el navegador.
CSSOM: Es una representación de objetos del código HTML.
Render Tree: Es un árbol en el cual se renderizan juntos el DOM y el CSSOM.
El navegador necesita realizar unos procesos para poder comprender el código que nosotros hemos escritos.

  1. Transforma el código en bytes
  2. Transforma los bytes en caracteres dependiendo de la codificación que hemos seleccionado (casi siempre es UTF-8).
  3. Transforma los caracteres en TOKENS y organiza en elementos HTML Analiza que cadena de caracteres corresponde a cuál etiqueta HTML.
  4. Transforma los TOKENS a los nodos que son los elementos que el navegador comprende.
  5. Para finalizar organiza todos los nodos en un árbol construyendo el DOM.
    El siguiente paso es realizar el proceso, pero con el CSS y construyendo finalmente el CSSOM y una vez ya elaborado ambos arboles estos se juntan y se le asigna el CSS a cada elemento del HTML que corresponde.
    Pasos que hace el navegador para procesar el código
  6. Procesa el HTML y construye el DOM
  7. Procesa el CSS y construye el CSSOM
  8. Une el DOM y el CSSOM formando el RENDER TREE
  9. Ejecuta el diseño en el RENDER TREE
  10. Pinta el nodo en la pantalla, es lo que finalmente termina viendo el usuario.

download (3).png
download (4).png
download (5).png

1- procesa HTML y construye el DOM.
2- Procesa CSS y construye CSSOM
3- DOM + CSSOM = Render Tree
4- Ejecuta el diseño. Aplica los estilos CSS a las etiquetas HTML.
5- Pinta en la pantalla.

DOM (document object model): es la transformación de nuestro html en objetos entendibles para el navegador.
CSSOM (css object model): es la transformación de nuestro css en objetos entendibles para el navegador.
Render Tree: es la suma del DOM + CSSOM renderizado por nuestro navegador

La profesora que me dieron sobre HTML y CSS, debería tomar los cursos de platzi ya que nos enseñaba de mala gana, por suerte soy como muchos de la comunidad de Platzi que tiene hambre de mas y no se queda conforme con lo que le enseñan.

Si recién comienzan recomiendo escribir a lo loco y equivocarse mucho. Después optimizar. Si lo hace al revez es mas probable que aprendan lento.

Si les interesa saber qué son los nodos y árboles pueden ir al curso de “Matemáticas discretas”, ahí pueden aprenderán sobre los fundamentos.
Observación: el curso es de matemáticas por ende los ejemplos serás a través de modelos matemáticos o analíticos, pero es lo que se aplica a nivel de programación. Los árboles son una estructura de datos muy potente y utilizada en el mundo de la programación.
Curso: https://platzi.com/cursos/discretas/

en los otros cursos de desarrollo web no habían abarcado los conceptos, este curso va bien para aprender los conceptos y teoría

Vengo de ver el lanzamiento de la Crew Dragon de Spacex por platzi live

Hola muchachos
les dejo un link donde podemos reforzar estos conceptos si no quedaron completamente claros
http://gperezcaviglia.com.uy/2018/04/07/dom-y-cssom/

DOM = para html.
CSSOM = para css
RENDER TREE = union de los anteriores

Recomiendo mucho la explicación de Fredy del curso gratuito de programación de platzy, complementa mucho los conceptos del Documento, DOM y otras cosas.

EXPLICA MUY BIEN.

Proceso de renderizado de la Web

  1. Procesa el HTML y lo construye en el DOM.
  2. Procesa CSS y construye el CSSOM
  3. DOM + CSSOM = Render Tree (Crea un solo árbol)
  4. Ejecuta el diseño en el Render tree.
  5. Pinta el Nodo en la pantalla.
carbon (4).png

Pasos que sigue el navegador para construir las páginas web:

1.- Procesa el HTML para construir el DOM.
2.- Procesa el CSS para construir el CSSOM.
3.- El DOM se une con el CSSOM para crear el Render Tree.
4.- Se aplican los estilos CSS en el Render Tree.
5.- Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

Al menos yo que comienzo casi desde cero… me pareció genial esta clase!
Muy entusiasmado por seguir

De acuerdo con https://es.ryte.com/wiki/Meta_Etiqueta

Las meta etiquetas (también llamadas: meta tags) se utilizan al crear páginas en HTML o XHTML. Estas etiquetas pueden describir el contenido de un sitio web con precisión. Este elemento te permite transmitir metadatos estructurados a través de la página web. Los metadatos pueden variar dependiendo de la descripción de los atributos deseados. Las meta etiquetas se pueden utilizar para describir una página con más detalle.

Un meta elemento puede utilizarse para imitar la respuesta HTTP de un encabezado o para anclar meta información adicional en el documento HTML, como el autor de un texto con una etiqueta de autor, o la forma en que los caracteres se mostrarán a través de la etiqueta de tipo de contenido.

En HTML5 hay un total de cinco atributos válidos que están disponibles para la etiqueta meta: charset, http-equiv, nombre, esquema y contenido. El http-equiv se usa para imitar la respuesta HTTP del encabezado.

Me gusta desde la introducción (los cubos amarillos, el logotipo) a la combinación de colores que usó el equipo de producción de Platzi. Ojalá los videos no fueran tan comprimidos para disfrutarlos más, pero muy bonito todo. Platzi, haz cursos de medicina o genética. ❤️ Los amo.

Proceso de renderizado de la Web

  • Procesa el HTML y lo construye en el DOM.
  • Procesa CSS y construye el CSSOM
  • DOM + CSSOM = Render Tree (Crea un solo árbol)
  • Ejecuta el diseño en el Render tree.
  • Pinta el Nodo en la pantalla.

DOM: Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.

CSSOM: así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.

Render Tree: es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.

Pasos que sigue el navegador para construir las páginas web:

Procesa el HTML para construir el DOM.
Procesa el CSS para construir el CSSOM.
El DOM se une con el CSSOM para crear el Render Tree.
Se aplican los estilos CSS en el Render Tree.
Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

Para los hackers curiosos que les interesa saber mas como funciona los navegadores por dentro: howbrowserswork

Pasos del Navegador:

  1. Procesar HTML, Construir DOM
  2. Procesar CSS, Construir CSSOM
  3. Union de DOM + CSSSOM, Resultado RENDER TREE
  4. Ejecutar Diseño en RENDER TREE
  5. Pintar el Nodo en Pantalla.

Estoy ansioso por ver el contenido de este curso. ¡Vamos a darle!

Programe por toda la prepa páginas web y hasta ahora vengo a enterarme de estos términos, buen comienzo

DOM Document Object Model, el navegador transforma el código a objetos entendibles para el Navegador.

CSSOM Representación de Objetos entendibles para el Navegador.

Render Tree Es el árbol de Objetos de CSS y HTML para representarlo/renderizarlo en el Navegador.

Que bueno es aprender desde la raíz 💚

Excelente vídeo me agrado como explico el funcionamiento que realiza por detrás el navegador.

Tokens: Verifica dónde abre y dónde cierra cada etiqueta. Les da jerarquía a las etiquetas dentro de las ya verificadas y ve dónde son cerradas.

Nodos: Con la información de los tokens de cómo están organizadas las etiquetas, se crean objetos (como en los archivos json) que contienen más objetos o contenido.

DOM: A partir de estos nodos de objetos y contenidos se crea el árbol donde se representa de manera mas gráfica la organización.

DOM => Document Object Model. El navegador transforma los “tag” en objetos que son entendibles para el navegador ( transformación del código que escribimos a objetos).
CSSOM =>Representacion de objetos del CSS. (similar al DOM)
Render Tree => DOM + CSSOM - Renderiza el código de nuestra página.

El navegador realiza 5 pasos para hacer la transformación

1- Transforma el código a bytes
2-Transforma los bytes en characters
3-Transforma los caracteres a tokens (Organiza los caracteres transformado en elementos HTML - Identificar que etiquete se relaciona con los caracteres)
4- Tranformación a Nodes (Objetos entendibles para el browser).
5- Todo los Nodes se le organiza en un árbol de representación de HTML.

/*
DOM (Document Object Model) = Se refiere a la transformación de nuestras etiquetas HTML a objetos que el navegador entienda.

También el DOM es el encargado de brindarnos una representación estructurada del documento, permitiéndonos modificar su contenido y su representación visual.

CSSOM (CSS Object Model) = Al igual que el DOM, el CSSOM realiza una transformación de código CSS a objetos que el navegador entienda.

Otra de las diferencias entre el DOM y el CSSOM, es que el CSSOM nos permite modificar los estilos CSS de manera dinámica, a diferencia del DOM, que sus estilos son de manera inline.

Y el Render Tree es simplemente el renderizado de la unión del DOM y el CSSOM.
*/

Uff está clase estuvo super , tantos cursos que he visto sobre Html y Css pero todo el mundo habla del DOM, nunca había escuchado el CSSOM y el Render Tree. Muy buena explicación. Realmente aprenderé mucho de este curso 🤯

Buena @teffcode no había visto una explicación tan buena de un proceso como este.

Me parece excelente esta explicación de la profesora 👩🏼‍🏫, te deja mas claro los conceptos de DOM, CSSOM y Render Tree 🖥, entender los conceptos desde lo fundamental de su funcionamiento te hace ser mejor desarrollador. 👍

mi amor por el desarrollo Web regreso <9/3

•DOM: Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.
•CSSOM: así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.
•Render Tree: es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.

Todas páginas web están formadas por html, css y Javascript e independienemente de la cantidad de cada uno de ellos, los navegadores siempre siguen el mismo proceso para conseguir tanto el contenido como la manera en que éste se ha de mostrar al usuario:

|
🔸 Generar el árbol DOM a partir del html.
🔸 Generar el CSSOM Tree a partir del css.
🔸 Generar el Render Tree con la combinación del DOM y 🔸 CSSOM
🔸 Calcular la disposición o layout de todos los nodos.
🔸 Pintar los nodos del Render Tree.

|
5-pasos-que-siguen-los-navegadores-para-pintar.png
|
**El DOM **
Es el árbol de nodos que representa los contenidos de la página o aplicación web. Estos contenidos están determinados por el HTML y, aunque se parezca bastante al DOM, no són lo mismo.

|
¿Cómo se genera el árbol DOM?
El DOM se genera a partir del fichero con extensión .html y sigue distintos pasos para generarse:

|
🔹 Convertir los bytes a carácteres.
🔹 Pasar de carácteres a tokens.
🔹 Generar los nodos.
🔹 Construir el árbol DOM.

|
El CSSOM
es el árbol de nodos que indicará al navegador cómo se debe pintar el DOM (el contenido que tenemos para pintar) dadas las distintas reglas que tengamos de CSS.
|
¿Cómo se genera el árbol CSSOM?
El CSSOM se genera a partir del fichero con extensión .css y sigue exactamente los mismos pasos que el DOM para generarse:
|
🔹 Convertir los bytes a carácteres.
🔹 Pasar de carácteres a tokens.
🔹 Generar los nodos.
🔹 Construir el árbol CSSOM.
|
La construcción del DOM y del CSSOM se hacen de manera asíncrona/paralela. Eso significa que el proceso de generar el CSSOM no es bloqueante para poder generar el DOM pero, si que lo es para renderizarlo.
|
RENDER TREE
Toda la información que el usuario ve a través de su pantalla y la manera en que ésta se presenta, viene dada por el render tree. Éste, no es más que un conjunto de nodos que tienen la información a mostrar y unos estilos atribuidos (sean los que por defectos cada buscador le atribuye a los elementos o los que nosotros hayamos querido añadirles).
|
¿Cómo se genera el render tree?
El render tree es la combinación de dos árboles de nodos llamados DOM y CSSOM, recordemos que:
|
Calcular el layout o disposición de los nodos
La fase o paso de cálculo de la disposición de los nodos sirve para calcular que geometría tendrá cada uno de los nodos como también para saber su distribución en la pantalla respecto al orígen.
|
Layout o plantilla es un esquema de la distribución de los elementos dentro de una página web. Se compone de una serie de bloques de ciertas dimensiones en los que se colocará el contenido. Estos bloques suelen trazarse a través de etiquetas HTML comunes, como div, o semánticas, como header, nav, section, article, aside y footer, incorporadas en HTML5.
|
Pintar
En esta fase el navegador convierte al árbol de representación o Render Tree en píxeles en la pantalla.
|
Es curioso saber que las distintas propiedades de CSS cuestan más o menos de pintar dependiendo de como estén combinadas.
|
Supongamos el hipotético caso que se tardara 1 segundo en pintar un box-shadow. Si éste es combinado con una propiedad border, ésta, haría que tardase 1.5 segundos en vez de 1 segundo.
|

a.png
render-tree-construction.png

Les recomiendo este Curso de Introducción a la Web: Historia y Funcionamiento de Internet donde explican de manera detallada los códigos binarios y porque todo es 0 y 1 😉

4. DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
El navegador por lo general no entiende de manera directa la sintaxis que escribimos tanto en html como css, para entender el código que escribimos el navegador transforma las etiquetas html y las reglas de css en objetos entendibles para el navegador. Cabe añadir que el orden de nuestra estructura html es igual al orden de los objetos que el navegador crea.
Tres conceptos fundamentales para entender el renderizado de la web

  • DOM
    Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.

  • CSSOM
    Así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.

  • Render Tree
    Es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.

Los pasos que el navegador realiza para transformar el código en algo que este entienda.

Pasos que ocurre en el DOM

  1. El código lo transforma una serie de Bytes el código escrito en el lenguaje
  2. Transformar los bytes en unos caracteres esto lo realiza tomando en cuenta la codificación que le indiquemos en la etiqueta chartset=utf-8.
  3. Luego transforma esos caracteres en unos tokens. Que son unos elementos html que él entiende, en este punto el navegador identifica que etiqueta abre y que etiqueta cierra. Esto lo especifica la w3c.
  4. Luego realiza una transformación de tokens a nodos y estos nodos son los objetos que entiende el navegador
  5. Luego el DOM sería tomar todos esos elementos (nodos) y ponerlos en un árbol y ese árbol va a tener una estructura que depende de la organización que tenemos en nuestro sitio web.

Pasos que ocurre en el CSSOM

  1. CSSOM lo que va a hacer es la transformación individual a cada una de su sintaxis y la va a pegar por decirlo así de forma individual en cada nodo del árbol del DOM.
  2. Es importante recalcar que si escribimos reglas de manera no estandarizada y con buenas prácticas se verá afectado el rendimiento de la rendermerización de nuestra página web y esto se conoce como performance o rendimiento

** Y finalmente el Render TREE ,Pasos que sigue el navegador para construir las páginas web**

  1. Procesa el HTML para construir el DOM.
  2. Procesa el CSS para construir el CSSOM.
  3. El DOM se une con el CSSOM para crear el Render Tree.
    Se aplican los estilos CSS en el Render Tree.
    Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

les dejo los 5 pasos
procesa de html y construye el dom
procesa css y contriye el cssom
ejecuta el diseño render tree
pinta el nodo en la pantalla

DOM: Al escribir al código HTML en el editor, lo pasamos al navegador, pero el navegador no entiende lo que escribimos, por lo que transforma ese texto para pasarlo a unos objetos que son entendibles para el navegador.
CSSOM: Es una representación de objetos de CSS, también convierte objetos entendibles para el navegador.
RENDER TREE: Es un árbol que une al DOM y CSSOM para poder renderizar todo el proceso que hemos hecho en el código.

Los pasos principales se resumen en 5 palabras

DOM
Forma un arbol con todo el html

CSSOM
Forma un arbol con todo el css

RENDER TREE
Une los dos arboles y crea uno solo

LAYOUT 
Al formar el render tree forma la base del diseño sin color

PAINT
Y en este pinta todo el layout para poder visualizar nuestra pagina completa

En resumen entendí que el html se engloba en el DOM dentro de una estructura de árbol que lleva cada elemento del marcado y el contenido representando los elementos en el navegador y CSS DOM representando cada uno de los estilos personalizados a nuestra pagina web

Muy buena explicación!!!

Excelente cátedra!

Me encanta poder aprender siempre algo nuevo pero sobre todo me encanta cuando vemos lo profundo para comprender su comportamiento, aunque ya luego no lo pensamos y solo lo hacemos de manera practica!

Alguien sabe que tipo de fuente usa en su codigo en el minuto 2:00 ? Se ve hermosa 😄

excelente curso…

Gracias profe esos gráficos ayudan bastante

Yo solo conocía el DOM, pero investigando he llegado a la conclusión de que CSSOM y RenderTree son aspectos que no deben dejarse de lado.
Es lo malo de los resúmenes.

Muy buena explicación de como es el proceso hay por debajo para poder mostrar el contenido de la pagina.

pokitico en pokitico, voy aprendiendo … este tema es la organizacion de los elementos de HTML Y CSS

Increíble clase, había escuchado sobre esos conceptos pero nunca había profundizado en ellos, ahora lo tengo claro, ¡este curso se ve prometedor!

Excelente metodología para enseñar, me gusta como empezó dando sus clases, vamos bien, estoy impaciente por ver exactamente la funcionalidades

Muy buena clase. Necesitaba esta información, para complementar lo aprendido en otros cursos. Gracias. Comenzó muy interesante el curso.

¡La primera vez que oigo CSSOM!

Buena clase, en el punto 5 el termino apropiado es imprimir:
Se imprimen los nodos en la pantalla para que los usuarios vean el contenido de la página web.

Bytes -> Characters -> Tokens -> Nodes -> DOM -> CSSOM -> DOM + CSSOM = Render tree -> Ejecutar diseño al Render Tree -> Mostrar Nodos en la pantalla

html => (browser) => DOM
css => (browser) => CSSOM

DOM + CSSOM => (browser) => Render

parami es mas fasil que noseque i tengo 11 años

  • DOM es el árbol de representación de nuestro HTML.
  • CSSOM se encarga de asignar el CSS que le corresponde a nuestros objetos.
  • DOM +CSSOM = RENDER TREE.

**5 pasos para transformación de lectura del código. **

  1. Bytes.
  2. Caracteres. <META> utf-8 Codificación que estamos trabajando.
  3. Tokens. Organizar elementos HTML W3C. identificar etiquetas
  4. Nodos. Tag´s y contenido.
  5. DOM. Todos esos elementos en un árbol. Seguir una estructura.

Performance => rendimiento de la aplicación.
Es mejorar nuestro código CSS llevar un orden para tener una fluidez en el proceso de lectura a nuestro sitio web.

Despues de hacer la carrera de Front end… ver este curso no tiene pierde como repaso. Eres muy buena explicando.!! ❤️

El Navegador:

  1. Procesa HTML y construye el DOM
  2. Procesa el CSS y construye el CSSOM
  3. DOM + CSSOM = Generan el Render Tree
  4. Se ejecuta el diseño en el render Tree
  5. Pinta el nodo en la pantalla

Me gusta mucho la forma clara de explicar de esta profe 😃

Muy buena explicación!

No conocía todo el proceso de creación del DOM, sobre todo la parte de TOKENS, solemos dar por hecho que todo es simple aunque haya por detrás algo mucho más complejo. Aprendemos a hacer magia pero es muy recomendable saber que pasa por “debajo”

Profunda y entendible explicación
Con una profe así. Me animo

buena explicacion, no tenia claro lo que era el dom

Esto quiere decir que en react componente tiene este este proceso al entrar?

Pasos que hace el navegador:

  1. Procesa HTML y construye el DOM
  2. Procesa el CSS y construye el CSSOM
  3. DOM + CSSOM = Render tree
  4. Ejecuta el diseño en el render tree
  5. Pinta el nodo en la pantalla 😃

No tenia idea del Render Tree!
Excelente video

📓**Notas **📓
DOM = Docuement Object Model -> Transorma las etiquetas a objectos para que el navegador entienda
CSSOM = Representacion de objectos de las reglas css
RENDER TREE = Arbol de la union del DOM y CSSOM
**PASOS PARA LA TRANSFORMACION ** 🛠➡🖥

  1. Construccion del DOM = BYTES -> CHARACTERS (utf-8) -> TOKENS -> NODES (Objects) -> DOM (Union de los nodos)
  2. CSSOM -> Convierte las reglas a objetos
  3. Render Tree = DOM + CSSOM -> linkea los objetos del dom con los del cssom para darle estilos a los objectos del dom
  4. Ejecuta y pinta en la pantalla del render tree

que bien explica esta profesora!!!

En solo una clase entendi tres conceptos fundamentales para la construcción de una página web.

Eso, no lo sabia, que el navegador no entiendo html exactamente, y lo que ocurre es una transformacion de nuestro HTML por parte del navegador a un objeto llamado DOM. WOW ! Brutal! jajaja

Todo este proceso de html hasta la representacion es pesado, por eso es que React con su virtual DOM es mas eficiente a la hora de renderizar.

interesante, aprender como procesa el navegador lo que nosotros escribimos

DOM: (Document Object Model) Es la transformación del código HTML que nosotros escribimos a objetos que son entendibles por el navegador.

CSSOM: Es una representación de objetos de CSS también toma el codigo y lo convierte en objetos que son entendibles para el.

RENDER TREE: Es el DOM y el CSSOM juntos para renderisar ese código.

1. Bytes: Coger el código que escribimos y los transforma en bytes

2. Caracteres: Son precisamente esa transformación de bytes a esos caracteres, dependiendo de esa codificación que nosotros le hemos dicho (Ejemplo: el UTF-8)

3. Tokens: Transformación de los caracteres en unos tokens (etiqueta principal, etiqueta que cierra, que abre, etc), organizará todo eso que se ya se transformó en caracteres y pasa a convertir a elementos HTML

4. Nodos: Son objetos que entiende el computador (elementos)

5. DOM: Coger todos esos elementos y ponerlos en un tree, ese árbol tendrá una estructura dependiendo de la organización que tenga en el código

Reforzando conocimientos

Pasos del navegador para mostrar una pagina

1.- Procesa el HTML y construye DOM 2.- Procesa el CSS y construye el CSSOM 3.- DOM+CSSOM = RENDER TREE 4.- Ejecuta el diseño en el Rebder Tree 5.- Pinta el nodoen la pantalla

Bytes => Characters => Tokens => Nodes => DOM