Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema07 [2025/11/12 07:47] – [Usar Angular Material] Lorenzo
+++ clase:daw:diw:1eval:tema07 [2026/10/23 23:04] (actual) – Reorganización del módulo: contenido movido a las páginas nuevas de clase:daw:diw claude
@@ Línea 1: / Línea 1: @@
-======  7. Arquitectura  ======
-Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase.
-Para crear una buena arquitectura vamos a hacer lo siguiente:
-  * [[#Indicar a Angular que el proyecto es en Español]]
-  * [[#Añadir Angular Material]]
-  * [[#Crear el CSS común a todo el proyecto]]
-  * [[#Crear los Componentes reusables de Angular]]
-  * [[#Crear las páginas del proyecto.]]
-===== Indicar a Angular que el proyecto es en Español =====
-Véase: [[clase:daw:diw:1eval:tema02#establecer_el_idioma_y_moneda]]
-===== Usar Angular Material =====
-Véase: [[clase:daw:diw:1eval:tema02#anadir_angular_material]]
-<sxh gutter:false>
-src/app/scss
-    /01_utilities
-    /02_base
-    /03_global
-    /04_components
-    main.scss
-src/app/components/ui
-    /c-button
-    /c-panel
-src/app/components/paginas
-   /main
-   /productos
-   /login
-</sxh>
-===== Crear el CSS común a todo el proyecto =====
-Se tiene que crear la carpeta ''src/app/scss'' donde irá todo nuestro SASS. El fichero que contendrá todo el SASS es ''src/app/scss/main.scss''
-En el fichero ''styles.scss'' añadir la linea siguiente para que Angular sepa donde está nuestro SASS:
-<sxh sass;title:styles.scss>
-@use './app/scss/main.scss' as *;
-</sxh>
-Dentro de la carpeta ''src/app/scss'' , habrá la siguiente estructura de ficheros:
-<sxh gutter:false>
-  src/app/scss
-     /01_utilities
-        _variables.scss
-        _functions.scss
-        _mixins.scss
-        _index.scss
-    /02_base
-        _reset.scss
-        _typography.scss
-        _index.scss
-    /03_components
-        _cada_uno_de_los_componentes.scss
-        _index.scss
-    /04_global
-        _cada_una_de_los_modificadores_globales.scss
-        _index.scss
-    main.scss
-</sxh>
-La explicación de cada carpeta es la siguiente:
-  * /01_utilities
-    * _variables.scss: Variables de **SASS** como por ejemplo los colores o tamaños de margen ,etc
-    * _functions.scss: Funciones de SASS
-    * _mixins.scss: Mixins de SASS
-    * _index.scss: Los //imports// de cada fichero de esta carpeta.
-<sxh sass>
-@forward "./_variables.scss";
-@forward "./_functions.scss";
-@forward "./_mixins.scss";
-</sxh>
-  * /02_base
-    * _reset.scss: El reset que usemos
-    * _typography.scss: Para importar tipos de letra
-    * _index.scss: Los //imports// de cada fichero de esta carpeta.
-<sxh sass>
-@forward "./_reset.scss";
-@forward "./_typography.scss";
-</sxh>
-  * /03_components
-    * _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que **NO sean de Angular**. Por ejemplo ''_c-button.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:1eval:tema03.c]] , [[[clase:daw:diw:1eval:tema04]], [[clase:daw:diw:1eval:tema05]], [[clase:daw:diw:1eval:tema06]]
-    * _index.scss: Los //imports// de cada fichero de esta carpeta.
-<sxh sass>
-@forward "./_c-button.scss";
-@forward "./_c-panel.scss";
-@forward "./_l-columns.scss";
-@forward "./_l-flex.scss";
-</sxh>
-  * /04_global
-    * _cada_una_de_los_modificadores globales.scss: Habrá un fichero por cada tipo de modificador que haya. Por ejemplo ''_g--margin.scss'', ''_g--padding.scss'', ''_font-size.scss'' o ''_color.scss''. Más información en [[clase:daw:diw:1eval:tema03.c]] , [[[clase:daw:diw:1eval:tema04]], [[clase:daw:diw:1eval:tema05]]
-    * _index.scss: Los //imports// de cada fichero de esta carpeta.
-<sxh sass>
-@forward "./color";
-@forward "./font-size";
-@forward "./margin";
-@forward "./padding";
-</sxh>
-  * main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS.
-<sxh sass;title:main.scss>
-@forward "./02_base";
-@forward "./03_components";
-@forward "./04_global";
-</sxh>
-Dentro de cada fichero ''.scss'' que use algo de las utilidaes (como variables, SASS, funciones o utilidades) se añadirá la referencia a las utilidades con la siguiente linea:
-<sxh sass>
-@use "../01_utilidades/index" as utilidades;
-</sxh>
-<note warning>
-Al crear el CSS/SASS es importante seguir las directrices de:
-  * BEM: [[clase:daw:diw:1eval:tema03.c]]
-  * Variables: [[clase:daw:diw:1eval:tema04#variables_css]]
-</note>
-===== Crear los Componentes reusables de Angular =====
-Ahora hay que crear la carpeta donde estarán nuestros componentes de Angular. Para ello crearemos la carpeta ''src/app/components/ui''.
-En esta carpeta deben estar todos los componentes **reusables** por toda la aplicación.
-<sxh gutter:false>
-  src/app/components/ui
-     /c-button
-        c-button.ts
-        c-button.html
-        c-button.scss
-    /c-panel
-        c-panel.ts
-        c-panel.html
-        c-panel.scss
-    /l-flex
-        l-flex.ts
-        l-flex.html
-        l-flex.scss
-</sxh>
-Para crear el SCSS se seguirán las mismas normas que al crear el SCSS común a todo el proyecto.
-Más información en:
-  * [[clase:daw:diw:1eval:tema03]]
-  * [[clase:daw:diw:1eval:tema03.b]]
-  * [[clase:daw:diw:1eval:tema03.c]]
-  * [[[clase:daw:diw:1eval:tema04]]
-  * [[clase:daw:diw:1eval:tema05]]
-  * [[clase:daw:diw:1eval:tema06]]
-<note important>
-Notar la diferencia por ejemplo entre el fichero ''src/app/scss/03_components/l-flex'' y la carpeta ''src/app/components/ui/l-flex''
-  * ''src/app/scss/03_components/l-flex'': Estamos creando clases CSS para flex
-  * ''src/app/components/ui/l-flex'': Estamos creando componentes o atributos Angular para flex
-Lo normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-button''.
-</note>
-===== Crear las páginas del proyecto. =====
-Finalmente en la carpeta ''src/app/components/paginas'', añadiremos todos los componentes específicos de la aplicación. Aquí es donde se hace uso de los distintos elementos reusables que creamos en ''src/app/components/ui''
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-<nodisp 2>
-===== CSS linters =====
-Angular incluye de serie una herramienta de procesamiento CSS llamada [[https://postcss.org/|PostCSS]]. Esta herramienta lee el CSS y permite analizarlo o hacer modificaciones.
-PostCSS está basado en plugins que permiten extender PostCSS con nuevos análisis o modificaciones.A las herramientas que analizan el código para ver si tiene "problemas" se le llaman //linters//.
-Nosotros vamos a usar PostCSS para analizar nuestro CSS y ver si cumple las normas de SUIT CSS. El plugin o linter que vamos a usar es [[https://github.com/postcss/postcss-bem-linter|postcss-bem-linter]].
-Los pasos para instalarlo son
-  * Descargar el linter
-<sxh bash>
-npm install --save-dev postcss-bem-linter
-</sxh>
-  * Crear/modificar el fichero ''.postcssrc.json''. Debe estar en el raíz del proyecto.
-<sxh json; highlight: [4]>
-{
-  "plugins": {
-    "postcss-bem-linter": {
-      "preset": "bem"
-    }
-  }
-}
-</sxh>
-===== UIFactory =====
-<note tip>
-Para evitar el warning:
-  ▲ [WARNING] NG8113: Boton is not used within the template of App [plugin angular-compiler]
-Hay que añadir lo siguiente en el fichero ''tsconfig.json''
-<sxh json; highlight: [5]>
-{
-  "angularCompilerOptions": {
-    "extendedDiagnostics": {
-      "checks": {
-        "unusedStandaloneImports": "suppress"
-      }
-    }
-  }
-}
-</sxh>
-Más informnación:
-  * [[https://angular.dev/extended-diagnostics/NG8113#what-if-i-cant-avoid-this|NG8113: Unused Standalone Imports. What if I can't avoid this?]]
-</note>
-</nodisp>