Introducci贸n al curso

1

Presentaci贸n y bienvenida al curso de Frontend Developer

2

HTML y CSS: definici贸n y usos

3

驴Qu茅 son y para qu茅 nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatom铆a de un Elemento HTML: Atributos, Anidamiento y Elementos vac铆os

7

Anatom铆a de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML m谩s importantes

9

La importancia del c贸digo sem谩ntico

10

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

11

Reto 1: Organiza el siguiente bloque de c贸digo de forma sem谩ntica

Conceptos iniciales de CSS

12

Anatom铆a de una declaraci贸n CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS m谩s usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

驴Qu茅 son y para qu茅 nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de c贸digo

Construcci贸n de componentes

22

驴Qu茅 es un componente? Analicemos nuestros dise帽os

23

Estructura con HTML y BEM de un men煤 desplegable

24

Estilizando nuestro men煤 desplegable con CSS

25

Creaci贸n de un buscador

26

Creaci贸n de un carousel de im谩genes con CSS: Estructura principal

27

Creaci贸n de un carousel de im谩genes con CSS: Detalle de cada item

Maquetaci贸n y dise帽o responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetaci贸n de la pantalla de login: Estructura HTML

31

Maquetaci贸n de la pantalla de login: Estilizaci贸n con CSS

32

Estilizaci贸n de inputs y footer en la pantalla de login

33

Media queries

34

Maquetaci贸n de la pantalla principal

35

Reto 3: Maquetaci贸n de la pantalla de Not Found

Preprocesadores

36

驴Qu茅 es un preprocesador, cu谩les existen y cu谩les son sus diferencias?

37

Instalaci贸n de SASS y configuraci贸n inicial

38

Hablemos de variables, herencia, anidamiento, operadores y m谩s

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra p谩gina de inicio

Conclusi贸n

41

Conclusi贸n del curso y paso siguiente

Bonus

42

Visualizaci贸n de un bot贸n usando storybook para HTML

43

Flexbox

Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

4/43
Recursos

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 鈥溾減intan鈥濃 los nodos en la pantalla para que los usuarios vean el contenido de la p谩gina web.

Aportes 415

Preguntas 20

Ordenar por:

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

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.

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.

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.

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

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

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

Est谩n bien cool sus diapositivas 馃槃

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.

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.



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.

Y uno del DOM. Ambos creados personalmente.

Si les interesa saber qu茅 son los nodos y 谩rboles pueden ir al curso de 鈥淢atem谩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/

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

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.

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.

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

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/

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.
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.

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

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.

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.

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

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 鈥溾減intan鈥濃 los nodos en la pantalla para que los usuarios vean el contenido de la p谩gina web.

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

EXPLICA MUY BIEN.

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

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.

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

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 鈥溾減intan鈥濃 los nodos en la pantalla para que los usuarios vean el contenido de la p谩gina web.

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.

Les dejo un resumen del CSSOM

Renderizar = Representaci贸n gr谩fica

Renderizaci贸n: Es el proceso de generar una imagen desde un modelo. Este t茅rmino t茅cnico es utilizado por los animadores o productores audiovisuales y en Software de dise帽o en 3D. Los medios por los que se puede hacer un renderizado van desde l谩piz, pluma, plumones o pastel, hasta medios digitales en dos y tres dimensiones. (tomado de https://www.ecured.cu/Renderizaci贸n)

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

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 鈥渢ag鈥 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

鈥OM: Document Object Model. Es una transformaci贸n del c贸digo HTML escrito por nosotros a objetos entendibles para el navegador.
鈥SSOM: as铆 como el DOM para el HTML, EL CSSOM es una representaci贸n de objetos de nuestros estilos en CSS.
鈥ender 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.

|

|
**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.
|

El DOM es fuerte, pero nada es tan fuerte como DOMINIC TORETTO y su FAMILIA!!!

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

驴Qui茅n est谩 aqu铆 por el Js Challenge?

Hace tiempo estudi茅 HTML y CSS pero lo dej茅 de practicar. Este curso me ayuda a repasar!

Me atrever铆a a decir que este curso deber铆a estar primero que el Definitivo de Html y Css. En esta clase hice muchos clics que no entend铆a antes.

Que es Render Tree?

UTF-8聽(8-bit聽Unicode Transformation Format) es un formato de codificaci贸n de caracteres聽Unicode聽e聽ISO 10646聽que utiliza s铆mbolos de longitud variable

5 pasos fundamentales para hacer la transformaci贸n:

  1. Byte: trasforma el c贸digo en bytes,
  2. los va a transformar en unos caracteres dependiendo de la codificaci贸n que nosotros le digamos.
    Utf-8: codificaci贸n con la que estamos trabajando.
  3. Tokens: son los html, tags del body, del h1, o lo que ya tenemos. Esto quiere decir que va a organizar todos los bytes que ya sabe que son caracteres pero los va a transformar en elementos html.
  4. Nodes: son objetos y estos objetos son los que el entiende.
  5. Dom: coger todos los elementos y ponerlos en un 谩rbol, el 谩rbol va a tener una estructura dependiendo la organizaci贸n que tenga el c贸digo.

Buena explicaci贸n, 隆gracias Estefany!

UTF - 8 : Pensaba antes que este caracter funcionaba para activar las tildes y 帽 en mi codigo html a la hora de poner tittulos etc鈥 Me aclaro muchas dudas y mas cosas nuevas esta clase

El 4 paso donde se ejecuta el disenio del Render Tree tambien se conoce como Layout

He hechos varios cursos en platzi de CSS y HTML y estos conceptos no los hab铆a entendido as铆 de bien

Excelente clase, no sab铆a todo este proceso para transformar el HTML y CSS.

Genial!!

CSSOM


PASOS QUE HACE EL NAVEGADOR

Deber铆an implementar una opci贸n para dar like a las secciones 馃槂

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 鈥溾減intan鈥濃 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.