Diferencias

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

--- clase:daw:diw:1eval:tema07 [2025/11/10 13:55] – [Crear los Componentes reusables de Angular] 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 los Componentes reusables de Angular
+  * [[#Crear los Componentes reusables de Angular]]
-  * Crear los Layouts reusables de Angular
+  * [[#Crear las páginas del proyecto.]]
-  * Crear las páginas del proyecto.
 ===== Indicar a Angular que el proyecto es en Español =====
@@ Línea 17: / 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 41: / 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 50: / Línea 66: @@
         _index.scss
-    /05_global
-        _cada_una_de_los_modificadores_globales.scss
-        _index.scss
     main.scss
@@ Línea 67: / 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 80: / 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 103: / 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 117: / 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>
@@ Línea 129: / Línea 144: @@
         c-button.ts
         c-button.html
-        c-button.css
+        c-button.scss
     /c-panel
         c-panel.ts
         c-panel.html
-        c-panel.css
+        c-panel.scss
     /l-flex
         l-flex.ts
         l-flex.html
-        l-flex.css
+        l-flex.scss
 </sxh>
@@ Línea 155: / Línea 171: @@
 <note important>
-Notar la diferencia entre el fichero ''src/app/scss/03_layout/l-flex'' y la carpeta ''src/app/components/ui/l-flex''
+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_layout/l-flex'': Estamos creando clases CSS para 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 normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-button''.
-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''
-===== Crear las páginas del proyecto. =====
-<nodisp 2>
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 ===== CSS linters =====
@@ Línea 208: / Línea 253: @@
+<nodisp 2>
 ===== UIFactory =====