DEPARTAMENTO DE CIENCIAS DE LA COMPUTACIÓN

CARRERA DE TI

PROGRAMACIÓN INTEGRATIVA DE COMPONENTES

“Ejemplo 02 con la librería Stencil JS”

Manual de interfaz de usuario LOGIN

AUTOR:
MARCELO ARIAS

TUTOR:
Ing. José Alberto Sancho Arias

Sangolquí, 30 de agosto del 2022

Período Académico:

MARZO 2022 – SEPTIEMBRE 2022

STENCIL JS
StencilJS es una herramienta de los creadores de Ionic, que definen como «El
generador mágico de web components reusables». Es decir, StencilJS permite
crear de forma sencilla y sin grandes esfuerzos web components nativos.

PROGRAMACIÓN FORMULARIO
1. Mi proyecto consta de lo siguiente:

2. En el Index.html tenemos los siguientes estilos

3. Nuestro menú principal

4. Y diferentes secciones para nuestro formulario

5. Con los diferentes funciones de los estilos en css

6. Con formularios de contacto

7. Con el formulario del Login

8. Con el formulario de producto

9. Con el formulario de registro

10. Y para correr ponemos el siguiente código que es npm start

11. Y no bota a nuestra pagina web, en el localhost:3333

Esa sería nuestra primera página web con Stencil JS.
CONCLUSIONES:
• Con este sencillo ejemplo has podido ver y probar el potencial que nos
ofrece Stencil y las posibilidades que nos brinda. Podemos crear
componentes rápidamente y completamente reutilizables en cualquier tipo
de aplicación ya sea de una u otra tecnología, o incluso sin que tengan
uns framework JavaScript por detrás como hemos hecho.

BIBLIOGRAFÍA:
• Tomás, A. (2021, 15 febrero). Crear WebComponents con StencilJS y reutilizar-
los en diferentes proyectos. DEV Community . https://dev.to/alexto-
mas80/crear-webcomponents-con-stenciljs-y-reutilizarlos-en-diferentes-proyec-
tos-49m8
• Jimenez, A., Oriol, E., D., Oriol, E., D., M., Mendoza, J. P. S., M., & L. (2017,
25 octubre). Aprende a usar componentes web StencilJS desde Angular. Enrique
Oriol. http://blog.enriqueoriol.com/2017/10/stenciljs-desde-angular.html
• Reyes, F. A. F. (2021, 17 julio). Crear un Nuevo Proyecto Angular – Primeros
Pasos con Angular I. Dev1992. https://dev1992.com/in-
dex.php/2021/07/17/crear-un-nuevo-proyecto-angular-primeros-pasos-con-angu-
lar-i/
• Sánchez, A. (2022, 8 julio). APRENDE Cómo Instalar Ionic en [2022]. Como-
Programar.net, el sitio donde aprenderas programación. https://como-progra-
mar.net/blog/como-instalar-ionic/