Desarrollar aplicaciones en módulos porque es la manera en que programarás en aplicaciones grandes en el campo laboral.
En este tema aprenderás qué es un gestor de dependencias y cuáles son los más populares para el lenguaje Javascript y, a su vez, conocerás la estructura moderna de una aplicación web, como se empaqueta y es interpretada por los navegadores de Internet.
Los siguientes enlaces son externos a la Universidad Tecmilenio, al acceder a ellos considera que debes apegarte a sus términos y condiciones.
Para conocer más sobre Manejador de paquetes y empaquetador de módulos, revisa el siguiente video:
Fazt Code. (2022, marzo 28). Import y Export en Javascript (ES Modules) – Explicación [Archivo de video]. Recuperado de https://youtu.be/0t-Le4kdaMg?si=VvBCr6v533tXKGz6
Para conocer más sobre Manejador de paquetes y empaquetador de módulos, te recomendamos leer:
Deymar, A. (2023). ¿Qué es npm? Una introducción básica para principiantes. Recuperado de https://www.hostinger.es/tutoriales/que-es-npm
Aplicar los conocimientos de cómo hacer una aplicación en módulos, minificado y transpilación en el lenguaje Javascript.
Para realizar este programa en Javascript es necesario que utilizar Visual Studio Code e instalar el complemento "Live Server", además de instalar el complemento ES7 React del desarrollador dsznajde para que se te facilite el desarrollo de tu código. Este complemento lo podrás instalar desde la sección de extensiones dentro de Visual Studio Code.
Asegúrate de que esté corriendo el servidor web; de lo contrario, no podrás ejecutar correctamente tu aplicación con el protocolo file.
Ejercicio1.
Utiliza como base la plantilla base:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Hamburguesa</title>
<!--link de hojas de estilo-->
</head>
<body>
<!--header-->
<!--boton-->
<!--aside-->
<!--nav-->
<!--a-->
<!--main-->
<!--section-->
<!--h2-->
<!--script-->
</body>
</html>
Para esta aplicación web se utilizará una librería para la creación de menú hamburguesa.
Agrega en la cabecera el enlace para el uso de la hoja de estilo del menú de hamburguesa. Puedes usar la versión minificada desde el servidor CDN https://cdnjs.com/libraries/hamburgers Nota: No es necesario descargar el css.
Revisa la documentación de esta librería en el sitio https://jonsuh.com/hamburgers/
En tu espacio de trabajo, crea una carpeta llamada css y coloca el archivo menu_hamburguesa.css
Crea una carpeta js, donde colocaras los módulos de la aplicación
En el DOM de esta HTML crea una etiqueta header con la clase header y asígnale un título.
Posteriormente coloca un botón con la clase hamburger con el siguiente código:
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
Si se requiere, agregue al botón alguna clase para poder manejar los eventos con Javascript.
El parámetro collapse cámbialo al efecto que más te guste de entre las opciones que existen en el sitio de Jonathan Suh.
Agrega una sección aside con la clase panel.
Dentro del panel, internamente, crea una etiqueta nav con la clase menú, y dentro de la etiqueta nav, coloca 5 enlaces que en la referencia apunten a 5secciones que tendrá la página.
Ahora crea una sección de contenido principal (main) y coloca dentro de ella las cinco secciones con cada uno de los id que creaste anteriormente y con clase section, dentro de cada sección, deberás poner una etiqueta h2 con el nombre de la sección.
Finalmente, invoca el script principal que deberá estar colocado en el directorio js que creaste previamente. Como vas a trabajar con módulos, recuerda que tienes que especificar el atributo type="module".
Crea al menos dos módulos de Javascript para que realicen la siguiente funcionalidad:
El menú deberá aparecer desde la parte superior si se hace clic en botón de hamburguesa.
El menú desaparecerá en alguno de los siguientes casos:
Se hizo clic nuevamente en el botón de hamburguesa.
Se hizo clic sobre alguna opción de menú.
Utiliza en los módulos el elemento del dom querySelector y addEventListener
Al hacer clic, sobre alguna opción del menú, la aplicación deberá redirigir hacia la sección seleccionada y mostrar la información perteneciente a ese apartado.
Toma la dirección ip de tu equipo y visualiza tu aplicación desde otro dispositivo móvil (tableta o celular) conectado a la misma red.
Ejercicio 2.
Realiza las modificaciones pertinentes para que en la sección 1 se visualice el resultado del ejercicio 1 del Tema 3. Recuerda que lo deberás agregar como un módulo más de tu código.
Realiza las adecuaciones necesarias para que cuando el usuario haga clic en la sección 2 se visualice el resultado del ejercicio 2 realizado en el tema 4.
Ejercicio 3.
Transpila y minifica tu código de los dos ejercicios anteriores.
Asegúrate de: