Conocimientos y habilidades que adquieres realizando este curso

  • Especificaciones del estándar Web Component
  • Crear componentes reutilizables con LitElement
  • Comunicar diferentes componentes entre sí.
  • Construir y publicar componentes siguiendo las especificaciones de Open-WC

Temario

Introducción 15m

  • Presentación

    3m
  • ¿Qué son Web Components?

    6m
  • ¿Qué es LitElement?

    4m
  • Requisitos previos

    2m
  • Versiones, Starter Kit y Open WC

    7m
  • Creando el primer componente

    10m
  • Lit-HTML: Motor de templates usado por LitElement

    5m
  • Usando propiedades en el template

    3m
  • Bucles

    3m
  • Render condicional

    3m
  • Bindeo de propiedades en elementos

    6m
  • Slots

    7m
  • Composición de plantillas

    4m
  • Directivas de Lit-HTML

    4m
  • Propiedad Styles

    7m
  • Reutilizar y compartir estilos

    4m
  • Estilos y Shadow DOM

    5m
  • Usando variables CSS con Shadow DOM

    6m
  • Declaración e inicialización de propiedades

    9m
  • Tipado y conversión de tipos

    6m
  • EventListeners

    5m
  • DispatchEvent y CustomEvent

    7m
  • Ciclos de vida del estándar Web Component

    7m
  • Ciclos de vida propios de LitElement

    5m
  • Render

    3m
  • FirstUpdated

    4m
  • Publicar un componente

    5m
  • Usar componentes

    4m
  • Construcción de un componente con Rollup

    4m
  • Creación del scaffolding del componente

    5m
  • Definiendo el template

    5m
  • Aplicando estilos

    5m
  • Agregando una imagen

    5m
  • Botón de acción

    7m
  • Testear un componente

    9m

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Fundamentos de Service Workers

Fundamentos de Service Workers

curso

Con este curso aprenderás:

  • Conocerás que es un service worker.
  • Aprenderás a programar Service Workers..
  • Serás capaz de programar aplicaciones web que funcionen offline.

Duración: 1 hora y 52 minutos

Web Components con StencilJS

Web Components con StencilJS

taller

Con este taller aprenderás:

  • ¿Qué son los Web Components?
  • ¿Por qué ahora es el momento?
  • ¿Por qué incluirlos como herramienta fundamental de trabajo?

Duración: 48 minutos y 10 segundos

La transformación del frontend con Web Components

La transformación del frontend con Web Components

taller

Con este taller aprenderás:

  • La evolución de las interfaces de usuario.
  • La evolución de la arquitectura utilizada para crear interfaces de usuario.
  • Qué son los Web Components.

Duración: 37 minutos y 49 segundos

Preguntas Frecuentes

En OpenWebinars los cursos no tienen fecha de inicio y de final.

Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.

En OpenWebinars no vendemos cursos, talleres o laboratorios unitarios.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todos los cursos de la plataforma y a los nuevos que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).

¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.

Efectivamente, una vez superado cada curso podrás descargarte el diploma acreditativo de cada uno de ellos. Añade estos cursos a tu CV y mejora tu perfil para las empresas. También podrás obtener un diploma de nivel superior al superar todos los cursos de la carrera.

Descripción

Los alumnos objetivo de este curso son aquellos desarrolladores web que estén interesados en conocer el estándar Web Component y aprender a crear componentes fácilmente utilizando la librería LitElement.

Para realizar este curso es imprescindible tener una buena base en HTML, CSS y JavaScript, preferiblemente de la versión ES6 en adelante, o, en su lugar, conocer cualquier otro framework o librería que permita un desarrollo por componentes (Angular, React, Vue...). Si no fuera así, es recomendable realizar el Curso de ECMAScript 6 que tenemos disponible en la plataforma.

Iniciamos este curso de LitElement realizando una introducción tanto al profesor que lo imparte como al temario que se verá a lo largo del mismo. Además, se explicará qué son los Web Components, sus características y sus pilares fundamentales (Custom Elements, Shadow Dom, HTML Templates, ES Modules), así como qué es LitElement y qué nos aporta al desarrollo con Web Components.

Finalizada la introducción pasamos al bloque dedicado a comenzar a trabajar con LitElement, en el que conocerás los requisitos necesarios para ello. Posteriormente se explicarán las diferentes versiones existentes de esta librería, además de los diferentes Starter-Kits existentes y qué es Open-WC, que utilizaremos de forma conjunta. Para acabar este bloque crearemos, de forma práctica, nuestro primer componente paso a paso.

En el segmento posterior continuamos desarrollando nuestro componente con LitElement, centrándonos en todo lo que tiene que ver con templates y slots. Sobre templates aprenderás cómo utilizar el motor de templates Lit-HTML, además de usar en el template propiedades, bucles, render condicional y cómo bindear propiedades en elementos. En cuanto a slots, además de aprender qué son y qué funcionalidades aportan en el desarrollo de componentes. Y para acabar esta parte, aprenderás cómo trabajar con composición de plantillas y las directivas que nos ofrece Lit-HTML.

Seguimos avanzando al siguiente apartado dedicado a los estilos, en el que se explicará todo lo referente a la propiedad Styles, además de cómo reutilizar y compartir estilos entre diferentes componentes. También se explicarán las particularidades de los estilos y Shadow DOM, así como del uso de variables CSS con Shadow DOM.

En los posteriores apartados del curso veremos cómo trabajar con propiedades y eventos. Sobre las primeras aprenderás a declarar e inicializar las propiedades en LitElement, además de su tipado y conversión de tipos. Dentro de los eventos te mostraremos cómo utilizar los mismos dentro de LitElement, a través del uso de EventListeners, DispatchEvent y CustomEvent.

A continuación, pasamos a desarrollar la teoría sobre los ciclos de vida, explicando los ciclos de vida que ofrece el estándar Web Components, así como los ciclos de vida que nos ofrece LitElement. Dentro de este apartado también profundizaremos un poco más en el ciclo render y el ciclo FirstUpdated.

La penúltima sección del curso servirá para aprender sobre la construcción y publicación de componentes. En las clases en las que se divide la misma, se explicará cómo publicar un componente, cómo usar otros componentes propios o de terceros, además de cómo construir un componente con la aplicación Rollup.

El cierre del curso de LitElement llega con el apartado enfocado en la creación de un componente, pero de forma práctica, en la que se hará un completo repaso de todo lo anterior, pero aplicando toda la teoría, lo que te permitirá ver de forma más visual todo lo explicado por el profesor en las diferentes secciones del curso.

Al finalizar este completo curso, que te permitirá aprender de una forma teórica en combinación con la práctica, habrás aprendido las especificaciones del estándar Web Component, a crear componentes reutilizables con LitElement, a comunicar diferentes componentes entre sí y también a construir y publicar componentes siguiendo las especificaciones de Open-WC.

* Requisitos del Curso

Para realizar este curso se debe tener una base en HTML, CSS y Javascript, preferiblemente de la versión ES6 en adelante, o conocer cualquier otro framework o librería que permita un desarrollo por componentes (Angular, React, Vue...). Si no fuera así recomiendo realizar el curso de ECMAScript 6 que tenemos disponible en la plataforma.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars