Diferencias

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

--- clase:daw:diw:1eval:tema02 [2023/09/14 10:27]
admin [Arquitectura CSS]
+++ clase:daw:diw:1eval:tema02 [2025/03/24 12:54] (actual)
admin [Reset CSS]
@@ Línea 5: / Línea 5: @@
 Mas información:
-  * [[https://alligator.io/css/css-grid-layout-grid-areas/|CSS Grid Layout: Grid Areas]]
+  * [[https://css-tricks.com/almanac/properties/g/grid-template-areas/|grid-template-areas]]
+  * [[https://www.smashingmagazine.com/understanding-css-grid-template-areas/|Understanding CSS Grid: Grid Template Areas]]
 <sxh html>
@@ Línea 65: / Línea 66: @@
 Incluir en todos los proyectos los siguientes CSS:
-  * [[http://necolas.github.io/normalize.css/|Normalize.css]]
+  * [[https://github.com/sindresorhus/modern-normalize|Modern Normalize]]: Antes se usaba [[http://necolas.github.io/normalize.css/|Normalize.css]]
   * [[http://meyerweb.com/eric/tools/css/reset/|Eric Meyer’s “Reset CSS” 2.0]]
@@ Línea 164: / Línea 165: @@
   * Transformar de SASS a CSS
-  sass  -o ./main.css ./main.scss
+  sass  ./main.scss ./main.css
   * Transformas de SASS a CSS simpre que cambie el CSS
-  sass  --watch -o ./main.css ./main.scss
+  sass  --watch ./main.scss ./main.css
   * Se pueden juntar el SASS de un fichero en otro para así que se genere un único CSS con lo que se carga la página mas rápida.
 <sxh sass>
-  @import "./_boton.scss";
+  @import "./_c-button.scss";
 </sxh>
@@ Línea 193: / Línea 194: @@
 {{:clase:daw:diw:1eval:arquitectura_css.jpg?700|}}
+[[https://platzi.com/tutoriales/1640-frontend-developer-2019/9913-oocss-bem-smacss-itcss-y-atomic-design/|OOCSS, BEM, SMACSS, ITCSS y Atomic Design]]
 Lo primero es identificar los bloques de nuestra página. Esos bloque son como componentes u objetos que la página. En las siguientes imágenes podemos ver ejemplos de bloques.
@@ Línea 384: / Línea 387: @@
 ===== Estructura de ficheros =====
 Siguiente la metodología de BEM , se debe seguir la siguiente estructura de carpetas para almacenar el código SASS
+  /css
+     main.css
   /scss
      /01_utilities
-         _variables.scss
+         _css-variables.scss
+         _sass-variables.scss
          _functions.scss
          _mixins.scss
+         _animations.scss
     /02_base
         _override.scss
         _reset.scss
+        _typography.scss
     /03_layout
         _cada_uno_de_los_layouts.scss
@@ Línea 405: / Línea 412: @@
   * /01_utilities
-    * _variables.scss: Variables como por ejemplo los colores o tamaños de margen ,etc.
+    * _css-variables.scss: Variables **css** como por ejemplo los colores o tamaños de margen ,etc.
+    * _sass-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
+    * _animations.scss: Los Keyframes de las [[clase:daw:diw:2eval:tema08#animaciones1|animaciones]].
   * /02_base
     *  _override.scss: Es para sobreescribir CSS de alguna librería que se use
     * _reset.scss: El reset que usemos
+    * _typography.scss: Cosas relacionadas con la tipografía
   * /03_layout
     * _cada_uno_de_los_layouts.scss: Habrá un fichero por cada Bloque que sea de tipo layout. Por ejemplo ''_l-page.scss''
@@ Línea 421: / Línea 431: @@
   * main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS.
 ===== Ejercicios =====
 ==== Ejercicio 1 ====
-Haz una página web con 8 imágenes de forma que estén colocadas de la siguiente forma:
-|  Imagen 1  |||
+Haz una página web con 8 divs de forma que estén colocados de la siguiente forma:
-|  Imagen 2  |  Imagen 3  ||
-|  Imagen 2  |  Imagen 5  |  Imagen 2  |
-|  Imagen 2  | ::: |  Imagen 2  |
+|  div 1  ||||
+|  div 2  |  div 3  |  div 4  ||
+|  :::  |  :::  |  div 6  |  div 7  |
+|  div 5  |  :::  | ::: |  div 8  |
 ==== Ejercicio 2 ====
@@ Línea 439: / Línea 448: @@
 Comprueba también si hay diferencias entre usar Chrome, Edge o Firefox al usar o no el ''reset.css''
-==== Ejercicio 3 ====
-Modifica la página HTML del ejercicio 1 y haz que con CSS cada imagen tenga un borde. El color del borde será el siguiente:
-^  Imagen  ^  Color  ^
+==== Ejercicio 3.A ====
-|  1  |  #FF0000  |
+Usando BEM con modificadores, haz el HTML y el CSS de los siguientes botones:
-|  2  |  #00FF00  |
-|  3  |  #0000FF  |
-|  4  |  #FFFF00  |
-|  5  |  #00FFFF  |
-  * Cada uno de los colores deberá estar en una variable de SASS y al usar usar esas variables.
+{{:clase:daw:diw:1eval:botones.png|}}
-  * También deberá haber un fichero "reset.scss" con el código CSS del reset.
-  * Desde SASS se deberá generar un único fichero llamado "main.css".
-==== Ejercicio 4.A ====
+==== Ejercicio 3.B ====
-Imagina un botón en una aplicación Java. Ese botón tiene muchas propiedades visuales como el tamaño de fuente 12 o color de fondo rojo.
+Modifica el ejercicio anterior de forma que haya botones de mayor y menor tamaño.
-  * Indica otra serie de propiedades visuales y sus posibles valores.
+{{:clase:daw:diw:1eval:botones_pequenyos.png|}}
-  * Indica que valores tendrían las propiedades por defecto.
-==== Ejercicio 4.B ====
+{{:clase:daw:diw:1eval:botones_grandes.png|}}
-Mira el componente [[https://getbootstrap.com/docs/5.2/components/card/|tarjeta]] de bootstrap.
+Para aumentar o disminuir el tamaño deberás modificar:
+  * El tamaño de fuente
+  * El padding
-  * Indica los elementos HTML que puede componer el componente "tarjeta".
-  * Indica varias propiedades visuales que podría tener y sus posibles valores pero especifica cada propiedad para que elemento HTML se aplicaría.
-  * Indica que valores tendrían las propiedades por defecto.
-==== Ejercicio 4.C ====
+==== Ejercicio 4.A ====
-Dado el ejercicio anterior, crea las clases CSS que implementen las propiedades y valores que has indicado.
+Usando BEM con modificadores, haz el HTML y el CSS de los siguientes badges:
-==== Ejercicio 4.D ====
+{{:clase:daw:diw:1eval:badges.png|}}
-Dado el ejercicio anterior, imagina una nomenclatura para estandarizar los nombres de las clases CSS que has hecho en el ejercicio anterior
-==== Ejercicio 4.E ====
-Dado el ejercicio anterior, modifica el nombre de tus clases CSS para que sigan la nomenclatura de BEM
-==== Ejercicio 5 ====
+==== Ejercicio 4.B ====
-  * Crea una clase CSS llamada ''c-boton'' que :
+Modifica el ejercicio anterior de forma que el badge pueda tener un número al estilo de una notificación
-    * Cree un bóton del estilo ''Primario-Normal''
-    * El padding horizontal sea de 12px
-    * El padding vertical sea de 6px.
-    * El tamaño de fuente de 16px
-  * Crea una clase CSS llamada ''c-boton--secundario'' que si lo pones junto a ''c-boton'' haga que
-    * El botón se vea como ''Normal-Secundario''
-  * Crea una clase CSS llamada ''c-boton--size-lg'' que si lo pones junto a ''c-boton'' haga que:
-    * El padding horizontal sea de 20px
-    * El padding vertical sea de 10px.
-    * El tamaño de fuente de 20px
-  * Crea una clase CSS llamada ''g--padding-horizontal-8'' que:
-    * El padding horizontal sea de 20px
-  * Crea una clase CSS llamada ''g--padding-vertical-5'' que:
-    * El padding vertical sea de 10px.
-  * Crea una clase CSS llamada ''g--font-size-5'' que:
-    * El tamaño de fuente de 20px
+{{:clase:daw:diw:1eval:badges_numerico.png|}}
-Crea en una página web los siguiente botones:
-  * Botón ''Primario-Normal'' usando la clase CSS ''c-boton''
-  * Botón ''Primario-Normal'' usando la clase CSS ''c-boton'' que sea grande, usa ''c-boton--size-lg''
-  * Botón ''Primario-Normal'' usando la clase CSS ''c-boton'' que sea grande, usa ''g--padding-horizontal-8'', ''g--padding-vertical-5''   y ''g--font-size-5''
-  * Botón ''Normal-Secundario'' usando la clase CSS ''c-boton'' y ''c-boton--secundario''
-  * Botón ''Normal-Secundario'' usando la clase CSS ''c-boton'' y ''c-boton--secundario'' que sea grande, usa ''c-boton--size-lg''
-  * Botón ''Normal-Secundario'' usando la clase CSS ''c-boton'' y ''c-boton--secundario'' que sea grande, usa ''g--padding-horizontal-8'', ''g--padding-vertical-5''   y ''g--font-size-5''
-==== Ejercicio 6.A ====
+==== Ejercicio 5 ====
-Crea las clases CSS necesarias para crear el componente "c-panel" de bootstrap.
+Mira la página de [[https://www.caixabank.es/|Caixabank]] y según la metodología de BEM indica:
+  * Los componentes, elementos y modificadores que hay
-Lo puedes ver en [[https://getbootstrap.com/docs/3.3/components/#panels-basic|Panels]]
+Indica todas las clases CSS que deberia haber para todos los Bloques, Elementos y Modificadores
-==== Ejercicio 6.B ====
+Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM
-Añade al ejercicio anterior los modificadores necesarios para que el panel pueda ser de "peligro".
-Y crea un panel normal y otro de peligro
+==== Ejercicio 6 ====
-==== Ejercicio 7 ====
+Transforma los siguientes códigos sacados de bootstrap para que siga el estándar de BEM.
-Transforma los siguientes códigos para que siga el estándar de BEM.
 <sxh html>
@@ Línea 653: / Línea 625: @@
-==== Ejercicio 8 ====
+==== Ejercicio 7 ====
 Crear un map con los tamaños de padding
@@ Línea 689: / Línea 661: @@
   ....
-==== Ejercicio 9 ====
+==== Ejercicio 8 ====
 Repite el ejercicio anterior pero ahora con
   * la propiedad ''font-size''
   * La propiedad ''margin''
-==== Ejercicio 10 ====
+==== Ejercicio 9 ====
 Repite el ejercicio anterior pero ahora con los colores del tema 1.
@@ Línea 717: / Línea 689: @@
   * ''g--background-color-principal-1''
   * etc.
-==== Ejercicio 11 ====
-Mira la página de [[https://www.bankia.es/es/particulares|Bankia Particulares]] y según la metodología de BEM indica:
-  * Los componentes, elementos y modificadores que hay
-  * Los Layouts, elementos y modificadores que hay
-  * Los modificadores globales que hay
-  * Las variables que usarías
-Indica todas las clases CSS que deberia haber para todos los Bloques, Elementos y Modificadores
-Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM
-==== Ejercicio 12 ====
-Crea una página web que tenga lo siguiente:
-  * 3 componentes
-  * 2 Layouts
-  * Variables
-  * Márgenes globales.
-  * Que todo se organice según la estructura de ficheros de SASS

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página