Guía 13

DAWM / Proyecto05

Actividades previas

Arma tu grupo (solo 2 o 3 personas) de trabajo.
Seleccionen un conjunto de datos de acceso público de Kaggle.
- Tomaremos como referencia el conjunto de datos World Happiness Report.
Seleccionen una plantilla gratuita, y que utilice Bootstrap, con múltiples páginas (HTML, CSS y JS). Puede considerar alguna de las siguientes fuentes: HTML Codex, Creative Tim, Templatemo, Theme Wagon, Start Bootstrap o BootstrapMade.
- Tomaremos como referencia la plantilla Hairnic – Single Product Website Template.
Diseñen la interfaz de la aplicación con las siguientes páginas y secciones:
- Página de Inicio con la descripción del sitio; resumen de las características del dataset; pie de página con enlaces a políticas de privacidad, términos de servicio, datos de copyright y atribuciones; y un menú de navegación para acceder rápidamente a diferentes páginas y secciones.
- Página de Visualización de Datos con una tabla (con opciones para ordenar y filtrar datos) y gráficos que resumen y visualizan datos importantes.
- Página de Contacto con la información de contacto y un formulario para enviar comentarios o preguntas.

Actividades

Github

Crea un repositorio vacío (sin README.md, ni .gitignore, ni licencia) en GitHub con el nombre mpa.

Angular - Proyecto Base

Cree un proyecto en Angular
- Siga las instrucciones de ChatGPT que se encuentran en línea o en la imagen.
- Utilice CSS como formato para las hojas de estilo
- No utilice Server-Side Rendering (SSR), ni Static Site Generation (SSG/Prerendering).
- Levante el proyecto, con:
```
ng serve --open
```

Angular - Bootstrap

Incluya bootstrap y sus dependencias siguiendo las instrucciones, hasta el paso 5, de ChatGPT que se encuentran en línea o en la imagen.

Angular - Recursos o assets

De la plantilla, copie todas las carpetas (img, js, css y lib) con los recursos de la plantilla.
En el proyecto de Angular, coloque las carpetas copiadas dentro de src/assets.

Angular - Referencias locales

De la plantilla, del archivo index.html copie las rutas a los recursos locales que se encuentran en las etiquetas <link> y <script>, p.e.:

  <html>
    <head>
    ...
        <!-- Libraries Stylesheet -->
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

        <!-- Customized Bootstrap Stylesheet -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
    ...
        <script src="lib/wow/wow.min.js"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/waypoints/waypoints.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>

        <!-- Template Javascript -->
        <script src="js/main.js"></script>
    </body>
  </html>

En el proyecto de Angular, modifique el archivo angular.json con la ruta relativa a los recursos locales. Considere el orden en el que aparecen los recursos en la plantilla, p.e.:

  "build": {
    ...
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/assets/lib/animate/animate.css",
      "src/assets/lib/owlcarousel/assets/owl.carousel.css",
      "src/assets/css/bootstrap.min.css",
      "src/assets/css/style.css",
      "src/styles.css"
    ],
    "scripts": [
      "node_modules/bootstrap/dist/js/bootstrap.min.js",
      "src/assets/lib/wow/wow.min.js",
      "src/assets/lib/easing/easing.min.js",
      "src/assets/lib/waypoints/waypoints.min.js",
      "src/assets/lib/owlcarousel/owl.carousel.min.js",
      "src/assets/js/main.js"
    ]
    ...
  }

Angular - Referencias externas

De la plantilla: Del archivo index.html, copie las referencias a URL externas, p.e.:

<html>
  <head>
    ...
    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Poppins:wght@200;600;700&display=swap"
        rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
    ...

  </head>
  <body>
    ...
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    ...
  </body>
</html>

En el proyecto de Angular: En el archivo index.html, coloque las referencias a URL externas, p.e.:

<html>
  <head>
    ...
    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Poppins:wght@200;600;700&display=swap"
        rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

  </head>
  <body>
    <app-root></app-root>
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
      
  </body>
</html>

Angular - Componente principal

De la plantilla: Del archivo index.html, copie todas las etiquetas dentro de la etiqueta <body>.
- Excepto la etiqueta <div id="spinner"> y las etiquetas <script>.
En el proyecto de Angular: En el componente principal src/app/app.component.html, reemplace el contenido por las etiquetas HTML previamente copiadas.
- Modifique los errores mostrados por la consola, como usar entidades HTML, p.e.: de info@example.com a info@example.com
- Modifique las referencias a las imágenes a la ruta relativa a los recursos, p.e. de img/user.svg a assets/img/user.svg
Reinicie el servidor y revise los cambios en el navegador.

Versionamiento

Versionen su proyecto en Github
- Siga las instrucciones de ChatGPT que se encuentran en línea o en la imagen
- Utilice la rama main en lugar de master.
Versionen local y remotamente el repositorio mpa.

Fundamental

Buenas prácticas de programación de Angular en X.

🅰️📰"@Angular Architecture Best Practices"
✍️ by Nisar Ahmedhttps://t.co/VRHqREToSj #angular #javascript #typescript #AngularAddicts
— Gergely Szerovay (@GergelySzerovay) November 15, 2023

Características de AngularV17 en X.

Think there's a lot going on in Angular 17? Well, I'll defer to you... 😉#DEVCommunity #Angular https://t.co/xkGzMAtX1A
— The Angular Dev (@TheAngularDev) November 19, 2023

Documentación

La documentación de angular.dev en su sitio oficial.
- Características: en línea o en la imagen.
- Estructura del proyecto: en línea o en la imagen.
- Patrones de diseño: en línea o en la imagen.

Términos

Librería, marco de trabajo, bootstrapping, spa, recursos o assets, entidades HTML

Referencias

(N.d.). Retrieved from https://angular.dev/
Introduction to Angular Components and How to Implement It? (20202) https://www.simplilearn.com/tutorials/angular-tutorial/angular-components
Guía de iniciación al data binding en Angular Qué es y cómo se utiliza. (2019). Retrieved 13 July 2022, from https://www.acontracorrientech.com/guia-practica-del-databinding-en-angular/
Dev, T. A. (2023). Effortlessly deploy your static websites to GitHub Pages with the gh-pages NPM package.{ author: @sean_coughlin_ } #DEVCommunity #Angularhttps://t.co/Ldk3cFxz5J. Retrieved from https://twitter.com/TheAngularDev/status/1712104014630834561