Diferencias

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

--- clase:daw:diw:1eval:tema07 [2025/11/10 13:41] – [Crear el CSS común a todo el proyecto] Lorenzo
+++ clase:daw:diw:1eval:tema07 [2025/11/13 09:52] (actual) – [Crear las páginas del proyecto.] Lorenzo
@@ Línea 3: / Línea 3: @@
 Para crear una buena arquitectura vamos a hacer lo siguiente:
-  * Indicar a Angular que el proyecto es en Español
+  * [[#Indicar a Angular que el proyecto es en Español]]
-  * Añadir Angular Material
+  * [[#Añadir Angular Material]]
-  * Crear el CSS común a todo el proyecto
+  * [[#Crear el CSS común a todo el proyecto]]
-    * Crear las variables SASS
+  * [[#Crear los Componentes reusables de Angular]]
-    * Crear el reset CSS
+  * [[#Crear las páginas del proyecto.]]
-    * Crear los Componentes con BEM que no tienen relación con Angular
-    * Crear los Layouts con BEM que no tienen relación con Angular
-    * Crear globales junto con las variables CSS
-  * Crear los Componentes reusables de Angular
-  * Crear los Layouts reusables de Angular
-  * Crear las páginas del proyecto.
 ===== Indicar a Angular que el proyecto es en Español =====
@@ Línea 22: / Línea 16: @@
 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 =====
@@ Línea 46: / Línea 55: @@
         _typography.scss
         _index.scss
-    /03_layout
-        _cada_uno_de_los_layouts.scss
+    /03_global
+        _cada_una_de_los_modificadores_globales.scss
         _index.scss
     /04_components
@@ Línea 55: / Línea 66: @@
         _index.scss
-    /05_global
-        _cada_una_de_los_modificadores_globales.scss
-        _index.scss
     main.scss
@@ Línea 72: / Línea 80: @@
     * _index.scss: Los //imports// de cada fichero de esta carpeta.
 <sxh sass>
-@forward "./_sass-variables.scss";
+@forward "./_variables.scss";
 @forward "./_functions.scss";
 @forward "./_mixins.scss";
@@ Línea 85: / Línea 93: @@
 @forward "./_typography.scss";
 </sxh>
-  * /03_layout
+  * /03_global
-    * _cada_uno_de_los_layouts.scss: Habrá un fichero por cada Bloque que sea de tipo layout. Por ejemplo ''_l-flex.scss'' y ''_l-columns.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 "./_l-columns.scss";
-@forward "./_l-flex.scss";
-</sxh>
-  * /04_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'' 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]]
-    * _index.scss: Los //imports// de cada fichero de esta carpeta.
-<sxh sass>
-@forward "./_c-button.scss";
-@forward "./_c-panel.scss";
-</sxh>
-  * /05_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.
@@ Línea 108: / Línea 102: @@
 @forward "./padding";
 </sxh>
+  * /04_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>
   * 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_layouts";
+@forward "./03_components";
-@forward "./04_components";
+@forward "./04_global";
-@forward "./05_global";
 </sxh>
@@ Línea 122: / Línea 125: @@
 @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 los Layouts reusables de Angular =====
 ===== 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 =====
@@ Línea 165: / Línea 253: @@
+<nodisp 2>
 ===== UIFactory =====