©2025 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Accede al curso completo
Estás visualizando el contenido gratuito de uno de nuestros cursos. Para poder ver el curso completo, puedes comprarlo o suscribirte a nuestro catálogo completo.
Materiales de la clase
Preguntas
Nombre de importación de "dile-selector"
Hola Miguel, continuando con la Clase 3 , he notado lo siguiente.
Puedes revisar el tema de la importación de los componentes "dile-selector", la documentación, indica un nombre de importación, pero el nombre dentro del node_modules no hace match.
te comparto capturas de pantalla, muchas gracias como siempre. = ) Saludos desde México.
Que maravilla de Curso, salen estas cosillas, pero vamos avanzando.
Gracias Miguel = )
Prefiero compartir lo observado, para aquellos que se quejan de todo jajajaja, y que al primer error salen corriendo, naa, broma, pero me gusta generar buenos lazos y apoyar con lo que pueda, aquí en el equipo y comunidad de EscuelaIT.
Saludos.
Hola Luis,
Pues muchas gracias por avisarme de este error en la documentación de dile-components, porque no me había dado cuenta.
Es que hace relativamente poco cambié la estructura de carpetas y nombres de archivos de los componentes, para que no fuera tan verboso hacer los imports y algunas cosas en la documentación veo que me quedaron sin actualizar bien.
Ahora ya he subido los cambios y he probado los imports y funciona todo perfectamente.
Me alegro que te esté gustando el curso... en adelante seguramente te guste más porque esta clase es solo una especie de presentación. Si tienes cualquier otra duda o encuentras otro fallo en la documentación, por favor, avísame.
Que tal Miguel.
He creado un momento aproximadamente en el minuto 34 con 29 segundos de esta clase "Usando componentes Lit en proyectos HTML", hablas de import/export dentro de un mismo archivo "de manera unitaria", y el uso de webpack, esto dentro del curso de Lit en que clase se retoma??, sé que del curso de web pack dentro de Escuela IT, pero quiero saber si se atienda esto que comentas dentro del mismo "Curso de Lit", muchas gracias.
Con respecto a lo otro de los nombres de los dile-components o algo que brinque por ahí, seguro, si encuentro algo que ayuda a solventar o mejorar, con gusto te escribo. Gracias Miguel.
Hola, te he respondido a este tema en la respuesta de otra pregunta que has publicado. Pero te refieres al tema de compilar un proyecto con una herramienta frontend que cree los bundles. Mira este vídeo a ver si te aclara.
Import/Export "manera unitaria"
Miguel en que clase, atienden esto que comentas, de tener la importación/exportación de una manera más optima.
Por favor Luis, menciona el minuto del vídeo donde dije eso porque fuera de contexto no soy capaz de acordarme a qué me referí.
Gracias!!
Hola! Ya sé a qué me refería.
Es el tema de producir los archivos para conseguir que todo el javascript se agrupe en un único fichero, lo que llamamos el "bundle".
Este tema lo haces con herramientas como Webpack pero ahora se usa más que nada Vite.
No sé si en este curso se ve, ya que realmente en este curso aprendemos la librería Lit y esto es un tema más de desarrollo de proyectos y aplicaciones.
Donde lo puedes ver en todo detalle es en el Curso de Vite. Y donde también lo vimos es en el curso de aplicaciones con Lit.
En este curso hay una clase final donde se usa un proyecto en el que Vite está configurado: montar una spa con lit.
Ah!! acabo de ver que tengo esta clase extra en este mismo curso: Usar Vite como herramienta de desarrollo. Seguro que te aclara cosas.
FALTA INFORMACION
En este video por lo que veo , crea unos nuevos archivos en el mismo proyecto anterior con el componente del mensaje. Ahora esos archivos son app.html , app.css y app.js , el caso es que en el index.js y en el index.html no dice que modificaciones hay que hacer para que estos sean los nuevos archivos. Yo he creado un proyecto nuevo desde cero, pero no se como importar un app.html o un app.css en mi archivo index.js como hacíamos en la clase anterior. Se han hecho cosas fuera de camara que no soy capaz en principio de recrear.
Hola Carlos,
Gracias por tu pregunta y tu feedback que siempre ayuda a mejorar el curso.
Primero quiero aclarar que este vídeo es más bien un "demo" sobre qué se puede hacer usando componentes ya hechos por la comunidad, sin necesidad de programar siquiera. En principio no forma parte del flujo del curso "paso a paso", sino que que se grabó para demostrar las "bondades" del desarrollo basado en componentes. En la sección titulada "CONTENIDO COMPLETO DEL CURSO DE LIT" es cuando empiezan las clases en directo y se puede ver todo más paso a paso.
De todos modos, es verdad que el ejemplo empieza con una base de código ya montado que puede resultar confuso si estamos queriendo reproducir los pasos.
De todos modos, son archivos HTML básicos que puedes crear tú mismo fácilmente. Son archivos independientes que no necesitas importar desde los anteriores. El modelo es como si fuera un sitio de muchas páginas. Es decir, app.html es una nueva página del proyecto a la que accedes idependientemente de el archivo index.html. Por eso cuando se abre el ejemplo desarrollado en el navegador se usa la url
http://localhost:8000/app.html
Por si no queda claro, en el video anterior el ejemplo corría sobre el index.html y para verlo accedíamos a http://localhost:8000 y en este vídeo es un ejemplo independiente que se abre desde http://localhost:8000/app.html
Por tanto, los pasos que se han hecho fuera de vídeo son simplemente:
- Crear un archivo llamado app.html
- Crear un archivo llamado app.js
- Crear un archivo llamado app.css
Estos archivs se han colocado en la carpeta raíz, como puedes ver en el listado de archivos del editor.
Los códigos de esos archivos se pueden ver en el mismo vídeo, pero están prácticamente vacíos, por lo que crearlos te resultará muy sencillo.
Si todavía tienes dudas después de este comentario, por favor, crea otra pregunta y con gusto te ayudaré a montar el ejemplo. También, si lo deseas, puedes saltar directamente a la sección titulada "CONTENIDO COMPLETO DEL CURSO DE LIT", porque todo lo que verás en los vídeos cortos del principio lo vas va ver también en las clases paso a paso.
Saludos
ok, no me había fijado que estaba accediendo a localhost:8000/app.html, lo que he hecho para poder seguir el video es recrear todo en el index.html que si lo sirve, como bien me dices, el web dev server en la direccion localhost:8000. Muchas gracias por la rápida respuesta !!!! Probablemente tenga que hacer alguna pregunta más, no me cojas mucha manía por favor.
Q va Carlos, al contrario, para mi son excelentes todas las preguntas porque me ayudan a detectar posibles lagunas del curso y mejorarlo.
De hecho acabo de grabar un vídeo que creo que puede cubrir la duda que te has encontrado y a agregar otra herramienta de utilidad para los primeros pasos con Lit, que es "Vite".
Así q enseguida vas a ver un nuevo vídeo que espero que te pueda ayudar a verlo todo desde cero y paso a paso, o al menos enriquecer con una nueva herramientas de desarrollo que puedes usar.
Solo para avisar que he publicado la clase nueva en la que se muestra el desarrollo con Lit usando la herramienta frontend Vite, que es actualmente la mejor alternativa y más sencilla para trabajar las aplicaciones frontend y es compatible con la mayoría de los stack tecnológicos para desarrollo web.
Primeros pasos con Lit usando Vite como herramienta de desarrollo
Duda en el tiempo 11:00 CSS Variables (Custom Properties)
Miguel, Coloca dentro del body --dile-app-drawer-content-width: 250px;
¿Cómo entiende o comunica al componente esa variable, me resulta "mágico" o no transparente que el custom element o componente personalizado entienda dicha variable?
Hola, jejeje no es magia es css estándar.
El código de este componente lo tienes aquí.
No es el código más sencillo para aprender a usar variables CSS o desarrollar componentes Lit, pero te lo muestro porque preguntas específicamente por estas variables CSS.
En las líneas donde se declara el css puedes ver esto:
:host([direction="top"]) .menu {
top: var(--dile-app-drawer-closed-top, -100vh);
left: var(--dile-app-drawer-closed-left, 0);
height: var(--dile-app-drawer-content-height, auto);
width: var(--dile-app-drawer-content-width, 100vw);
box-shadow: var(--dile-app-drawer-box-shadow, 0 1px 8px #000);
}
Simplemente se usa la variable css en este punto width: var(--dile-app-drawer-content-width, 100vw);
Como ves, usamos una especie de función que nos aporta el lenguaje CSS que tiene el nombre de la variable que quieres usar y una medida predeterminada, que se usa si nadie ha seteado la variable.
Es muy sencillo en realidad. Espero que lo entiendas, si no es así puedes consultar el manual de lit o preguntarme en otra pregunta.
Miguel, cada día más feliz de haber encontrado este sitio, me la puedo jugar que es uno de los mejores en Español, sino, que el mejor. Ahora como paréntesis hice la inversión de la suscripción anual = ). Regresando al tema de Custom Properties, precisamente a la par de hacerte la pregunta, busqué en la documentación oficial de Lit, y creo que ahora es más claro lo que estás haciendo, lo voy a parafrasear por fa, me dices si estoy al menos medianamente bien. Seré breve, al componente lo preparas, dentro del host { aquí defines y dejas listo para que desde "a fuera" se pueda tocar a la variable css y la entienda, esto ahora ya no es magia es código jaja }, creo que ese sería el concepto general, dentro del componente defines una variable css y la dejas como un puente de comunicación para que desde fuera sirva de enlance. Gracias Miguel!!
Usando componentes Lit en proyectos HTML
Esta es una introducción práctica del uso de componentes Lit en proyectos para la web. La idea es mostrar la experiencia de desarrollo de un proyecto HTML normal, en el que usamos custom elements (componentes estándar) desarrollados con Lit, lo que nos permite realizar con rapidez interfaces con avanzados comportamientos dinámicos.
Momentos de la clase
Aquí puedes consultar los momentos de la clase que se han destacado por su interés. De esta manera puedes acceder más rápidamente a aquellas partes que te interesen más.
Tú también puedes generar tus momentos y ayudar al resto de los estudiantes desde el reproductor.
Accede al curso completo
Estás visualizando el contenido gratuito de uno de nuestros cursos. Para poder ver el curso completo, puedes comprarlo o suscribirte a nuestro catálogo completo.
Descripción
Esta es una introducción práctica del uso de componentes Lit en proyectos para la web. La idea es mostrar la experiencia de desarrollo de un proyecto HTML normal, en el que usamos custom elements (componentes estándar) desarrollados con Lit, lo que nos permite realizar con rapidez interfaces con avanzados comportamientos dinámicos.
Materiales de la clase
Momentos de la clase
Aquí puedes consultar los momentos de la clase que se han destacado por su interés. De esta manera puedes acceder más rápidamente a aquellas partes que te interesen más.
Tú también puedes generar tus momentos y ayudar al resto de los estudiantes desde el reproductor.
Preguntas
Nombre de importación de "dile-selector"
Hola Miguel, continuando con la Clase 3 , he notado lo siguiente.
Puedes revisar el tema de la importación de los componentes "dile-selector", la documentación, indica un nombre de importación, pero el nombre dentro del node_modules no hace match.
te comparto capturas de pantalla, muchas gracias como siempre. = ) Saludos desde México.
Que maravilla de Curso, salen estas cosillas, pero vamos avanzando.
Gracias Miguel = )
Prefiero compartir lo observado, para aquellos que se quejan de todo jajajaja, y que al primer error salen corriendo, naa, broma, pero me gusta generar buenos lazos y apoyar con lo que pueda, aquí en el equipo y comunidad de EscuelaIT.
Saludos.
Hola Luis,
Pues muchas gracias por avisarme de este error en la documentación de dile-components, porque no me había dado cuenta.
Es que hace relativamente poco cambié la estructura de carpetas y nombres de archivos de los componentes, para que no fuera tan verboso hacer los imports y algunas cosas en la documentación veo que me quedaron sin actualizar bien.
Ahora ya he subido los cambios y he probado los imports y funciona todo perfectamente.
Me alegro que te esté gustando el curso... en adelante seguramente te guste más porque esta clase es solo una especie de presentación. Si tienes cualquier otra duda o encuentras otro fallo en la documentación, por favor, avísame.
Que tal Miguel.
He creado un momento aproximadamente en el minuto 34 con 29 segundos de esta clase "Usando componentes Lit en proyectos HTML", hablas de import/export dentro de un mismo archivo "de manera unitaria", y el uso de webpack, esto dentro del curso de Lit en que clase se retoma??, sé que del curso de web pack dentro de Escuela IT, pero quiero saber si se atienda esto que comentas dentro del mismo "Curso de Lit", muchas gracias.
Con respecto a lo otro de los nombres de los dile-components o algo que brinque por ahí, seguro, si encuentro algo que ayuda a solventar o mejorar, con gusto te escribo. Gracias Miguel.
Hola, te he respondido a este tema en la respuesta de otra pregunta que has publicado. Pero te refieres al tema de compilar un proyecto con una herramienta frontend que cree los bundles. Mira este vídeo a ver si te aclara.
Import/Export "manera unitaria"
Miguel en que clase, atienden esto que comentas, de tener la importación/exportación de una manera más optima.
Por favor Luis, menciona el minuto del vídeo donde dije eso porque fuera de contexto no soy capaz de acordarme a qué me referí.
Gracias!!
Hola! Ya sé a qué me refería.
Es el tema de producir los archivos para conseguir que todo el javascript se agrupe en un único fichero, lo que llamamos el "bundle".
Este tema lo haces con herramientas como Webpack pero ahora se usa más que nada Vite.
No sé si en este curso se ve, ya que realmente en este curso aprendemos la librería Lit y esto es un tema más de desarrollo de proyectos y aplicaciones.
Donde lo puedes ver en todo detalle es en el Curso de Vite. Y donde también lo vimos es en el curso de aplicaciones con Lit.
En este curso hay una clase final donde se usa un proyecto en el que Vite está configurado: montar una spa con lit.
Ah!! acabo de ver que tengo esta clase extra en este mismo curso: Usar Vite como herramienta de desarrollo. Seguro que te aclara cosas.
FALTA INFORMACION
En este video por lo que veo , crea unos nuevos archivos en el mismo proyecto anterior con el componente del mensaje. Ahora esos archivos son app.html , app.css y app.js , el caso es que en el index.js y en el index.html no dice que modificaciones hay que hacer para que estos sean los nuevos archivos. Yo he creado un proyecto nuevo desde cero, pero no se como importar un app.html o un app.css en mi archivo index.js como hacíamos en la clase anterior. Se han hecho cosas fuera de camara que no soy capaz en principio de recrear.
Hola Carlos,
Gracias por tu pregunta y tu feedback que siempre ayuda a mejorar el curso.
Primero quiero aclarar que este vídeo es más bien un "demo" sobre qué se puede hacer usando componentes ya hechos por la comunidad, sin necesidad de programar siquiera. En principio no forma parte del flujo del curso "paso a paso", sino que que se grabó para demostrar las "bondades" del desarrollo basado en componentes. En la sección titulada "CONTENIDO COMPLETO DEL CURSO DE LIT" es cuando empiezan las clases en directo y se puede ver todo más paso a paso.
De todos modos, es verdad que el ejemplo empieza con una base de código ya montado que puede resultar confuso si estamos queriendo reproducir los pasos.
De todos modos, son archivos HTML básicos que puedes crear tú mismo fácilmente. Son archivos independientes que no necesitas importar desde los anteriores. El modelo es como si fuera un sitio de muchas páginas. Es decir, app.html es una nueva página del proyecto a la que accedes idependientemente de el archivo index.html. Por eso cuando se abre el ejemplo desarrollado en el navegador se usa la url
http://localhost:8000/app.html
Por si no queda claro, en el video anterior el ejemplo corría sobre el index.html y para verlo accedíamos a http://localhost:8000 y en este vídeo es un ejemplo independiente que se abre desde http://localhost:8000/app.html
Por tanto, los pasos que se han hecho fuera de vídeo son simplemente:
- Crear un archivo llamado app.html
- Crear un archivo llamado app.js
- Crear un archivo llamado app.css
Estos archivs se han colocado en la carpeta raíz, como puedes ver en el listado de archivos del editor.
Los códigos de esos archivos se pueden ver en el mismo vídeo, pero están prácticamente vacíos, por lo que crearlos te resultará muy sencillo.
Si todavía tienes dudas después de este comentario, por favor, crea otra pregunta y con gusto te ayudaré a montar el ejemplo. También, si lo deseas, puedes saltar directamente a la sección titulada "CONTENIDO COMPLETO DEL CURSO DE LIT", porque todo lo que verás en los vídeos cortos del principio lo vas va ver también en las clases paso a paso.
Saludos
ok, no me había fijado que estaba accediendo a localhost:8000/app.html, lo que he hecho para poder seguir el video es recrear todo en el index.html que si lo sirve, como bien me dices, el web dev server en la direccion localhost:8000. Muchas gracias por la rápida respuesta !!!! Probablemente tenga que hacer alguna pregunta más, no me cojas mucha manía por favor.
Q va Carlos, al contrario, para mi son excelentes todas las preguntas porque me ayudan a detectar posibles lagunas del curso y mejorarlo.
De hecho acabo de grabar un vídeo que creo que puede cubrir la duda que te has encontrado y a agregar otra herramienta de utilidad para los primeros pasos con Lit, que es "Vite".
Así q enseguida vas a ver un nuevo vídeo que espero que te pueda ayudar a verlo todo desde cero y paso a paso, o al menos enriquecer con una nueva herramientas de desarrollo que puedes usar.
Solo para avisar que he publicado la clase nueva en la que se muestra el desarrollo con Lit usando la herramienta frontend Vite, que es actualmente la mejor alternativa y más sencilla para trabajar las aplicaciones frontend y es compatible con la mayoría de los stack tecnológicos para desarrollo web.
Primeros pasos con Lit usando Vite como herramienta de desarrollo
Duda en el tiempo 11:00 CSS Variables (Custom Properties)
Miguel, Coloca dentro del body --dile-app-drawer-content-width: 250px;
¿Cómo entiende o comunica al componente esa variable, me resulta "mágico" o no transparente que el custom element o componente personalizado entienda dicha variable?
Hola, jejeje no es magia es css estándar.
El código de este componente lo tienes aquí.
No es el código más sencillo para aprender a usar variables CSS o desarrollar componentes Lit, pero te lo muestro porque preguntas específicamente por estas variables CSS.
En las líneas donde se declara el css puedes ver esto:
:host([direction="top"]) .menu {
top: var(--dile-app-drawer-closed-top, -100vh);
left: var(--dile-app-drawer-closed-left, 0);
height: var(--dile-app-drawer-content-height, auto);
width: var(--dile-app-drawer-content-width, 100vw);
box-shadow: var(--dile-app-drawer-box-shadow, 0 1px 8px #000);
}
Simplemente se usa la variable css en este punto width: var(--dile-app-drawer-content-width, 100vw);
Como ves, usamos una especie de función que nos aporta el lenguaje CSS que tiene el nombre de la variable que quieres usar y una medida predeterminada, que se usa si nadie ha seteado la variable.
Es muy sencillo en realidad. Espero que lo entiendas, si no es así puedes consultar el manual de lit o preguntarme en otra pregunta.
Miguel, cada día más feliz de haber encontrado este sitio, me la puedo jugar que es uno de los mejores en Español, sino, que el mejor. Ahora como paréntesis hice la inversión de la suscripción anual = ). Regresando al tema de Custom Properties, precisamente a la par de hacerte la pregunta, busqué en la documentación oficial de Lit, y creo que ahora es más claro lo que estás haciendo, lo voy a parafrasear por fa, me dices si estoy al menos medianamente bien. Seré breve, al componente lo preparas, dentro del host { aquí defines y dejas listo para que desde "a fuera" se pueda tocar a la variable css y la entienda, esto ahora ya no es magia es código jaja }, creo que ese sería el concepto general, dentro del componente defines una variable css y la dejas como un puente de comunicación para que desde fuera sirva de enlance. Gracias Miguel!!