No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
5H
40M
4S

CSS Triggers: layout, paint y composite

9/13
Recursos

En esta articlase, hablaremos de todo el trabajo de renderizado de la web. Que ser铆a b谩sicamente unos procesos, como lo vemos a continuaci贸n:

馃惐鈥嶐煆 JavaScript 馃惐鈥嶐煆峉tyle 馃惐鈥嶐煆 Layout 馃惐鈥嶐煆 Paint 馃惐鈥嶐煆 Composite

El d铆a de hoy, hablaremos de estas 煤ltimas tres, estos son los procesos que tienen que hacer algunas de nuestras propiedades para poder renderizarse en la web 馃捇. Sucede en cuesti贸n de milisegundos.

  • Composite: Ordena las partes de la p谩gina. Propiedades como opacity y transform.
  • Paint: Rellena p铆xeles. Implica colores, im谩genes, textos, sombras, etc.
  • Layout: Dise帽o de la p谩gina. Ancho, margin, padding, border, etc.

Si nos dirigimos a csstriggers.com{target="_blank"}, podremos ver todas las propiedades de CSS que utilizamos y c贸mo act煤an en los diferentes navegadores y motores. A continuaci贸n veremos una vista previa 馃憞.

P谩gina csstriggers.jpeg

Resumen de la articlase 馃幆

Existen algunas propiedades en css que hacen que las paginas tarden mas en cargar. Esto se debe a que tienen que pasar por ciertas 鈥渃apas鈥 de renderizado hasta que se pinten en la pantalla.

En pocas palabras, las propiedades que tengan relacion con una gran cantidad de pixeles nos van a afectar en el performance de la pagina web. Por eso el background afecta al desempe帽o de la pagina web 鈱.

Contribuci贸n creada con los aportes de: Joseph Darwin Carhuaz Villagomez, Irving Ju谩rez y Angel David Osorio Leyva.

Aportes 13

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Este curso es lo m谩ximo. Lo 煤nico malo es que si no viste la peli te comes spoilers 馃槃

  • Composite: Ordena las partes de la p谩gina. Propiedades como opacity y transform.

  • Paint: Rellena p铆xeles. Implica colores, im谩genes, textos, sombras鈥

  • Layout: Dise帽o de la p谩gina. Ancho, margin, padding, border鈥

Hay una extensi贸n de VSCode donde te muestra su procesamiento que debe utilizar el navegador para que se ejecute en nuestra pantalla. La extensi贸n se llama CSS Triggers

Aqu铆 la pagina que la profe usa
馃憞
CSS Triggers

Notas de la clase

Recomiendo ver esta lectura, cuenta con GIF y ilustraciones que te permitir谩n entender mejor como funcionan los procesos.
link: https://developers.google.com/web/updates/2018/09/inside-browser-part3

Resumen de la clase

Existen algunas propiedades en css que hacen que las paginas tarden mas en cargar. Esto se debe a que tienen que pasar por ciertas 鈥渃apas鈥 de renderizado hasta que se pinten en la pantalla.
.
En pocas palabras, las propiedades que tengan relacion con una gran cantidad de pixeles nos van a afectar en el performance de la pagina web. Por eso el background afecta al desempe帽o de la pagina web.
.
Este tema tambi茅n se ve en el curso pasado, aunque no se toca muy a fondo.

CSS Triggers

Estos son los procesos que influyen en el renderizado de la web, podemos centrarnos principalmente en:

  • Layout 鈫 Este se encarga del dise帽o de nuestra pagina, sus dimensiones y organizacion.
  • Paint 鈫 Se encarga de rellenar todos los pixeles, entra en juego el tema de colores, imagenes, sombras y mas.
  • Composite 鈫 Este se encarga de ordenar todas las partes de nuestra pagina, podemos relacionarlo con propiedades como transform u opacity

El LCP (Largest Contentful Paint) mide la velocidad de despliegue del contenido m谩s extenso de una p谩gina web. Es decir, marca el tiempo que tarda en renderizar la imagen o el bloque de texto m谩s grande con relaci贸n al momento en que comenz贸 a cargarse la p谩gina

驴Qu茅 es CLS? # CLS es una medida de la r谩faga m谩s grande de las puntuaciones de cambio de dise帽o para cada cambio de dise帽o inesperado que se produce durante toda la vida 煤til de una p谩gina. Se produce un cambio de dise帽o cada vez que un elemento visible cambia su posici贸n de un fotograma renderizado al siguiente

  • Layout: Es el proceso de determinar la posici贸n y tama帽o de los elementos en la p谩gina web, as铆 como su relaci贸n entre ellos. Este proceso es importante para definir la estructura de la p谩gina y se realiza mediante propiedades CSS como聽display,聽position,聽float,聽flexbox聽y聽grid.
  • Paint: Es el proceso de dibujar los p铆xeles en la pantalla bas谩ndose en el dise帽o establecido en el proceso de layout. En esta etapa se aplica el color, sombras, bordes, entre otros estilos a los elementos. Este proceso puede ser costoso en t茅rminos de rendimiento, por lo que es importante tener en cuenta las propiedades CSS que influyen en esta etapa, como聽background-color,聽box-shadow,聽border聽y聽transform.
  • Composite: Es el proceso de combinar todos los elementos de la p谩gina en una sola imagen para mostrarla en la pantalla. En esta etapa se determina el orden en que se superponen los elementos, se aplican las transparencias y se muestran los elementos que est谩n en la misma capa. En este proceso se utilizan propiedades CSS como聽z-index,聽opacity聽y聽transform.

Les comparto mi proyecto, lo 煤nico es que no s茅 por qu茅 en celular el score no funciona, como deber铆a, solo aparece la cuenta si cambio de pantalla y luego vuelvo al navegador.
Si alguien sabe que pasa se lo agradezco.
Proyecto: https://mateorol9.github.io/bunny-game/

Y los spoilers 馃 , alguien quiere pensar en los spoilers 馃槬

no se si a todos les pasa pero no me deja reproducir la clase numero 9 y 10 馃槙

siempre veo mis clsases en el ordenador, lo intente ver por la APP y nada 馃槮