©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
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
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!!