Diferencias

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

--- clase:daw:diw:1eval:tema02 [2023/09/25 22:29]
admin [Ejercicios]
+++ 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 386: / 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 407: / 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 426: / Línea 434: @@
 ==== Ejercicio 1 ====
-Haz una página web con 8 imágenes de forma que estén colocadas de la siguiente forma:
+Haz una página web con 8 divs de forma que estén colocados de la siguiente forma:
-|  Imagen 1  |||
+|  div 1  ||||
-|  Imagen 2  |  Imagen 3  ||
+|  div 2  |  div 3  |  div 4  ||
-|  Imagen 2  |  Imagen 5  |  Imagen 2  |
+|  :::  |  :::  |  div 6  |  div 7  |
-|  Imagen 2  | ::: |  Imagen 2  |
+|  div 5  |  :::  | ::: |  div 8  |
 ==== Ejercicio 2 ====
@@ Línea 441: / Línea 449: @@
-==== Ejercicio 3 ====
+==== Ejercicio 3.A ====
-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:
+Usando BEM con modificadores, haz el HTML y el CSS de los siguientes botones:
-^  Imagen  ^  Color  ^
+{{:clase:daw:diw:1eval:botones.png|}}
-|  1  |  #FF0000  |
-|  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.
-  * 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 3.B ====
+Modifica el ejercicio anterior de forma que haya botones de mayor y menor tamaño.
-==== Ejercicio 4.A ====
+{{:clase:daw:diw:1eval:botones_pequenyos.png|}}
-Usando BEM con modificadores, haz el HTML y el CSS de los siguientes botones:
-{{:clase:daw:diw:1eval:botones.png|}}
+{{:clase:daw:diw:1eval:botones_grandes.png|}}
-==== Ejercicio 4.B ====
-Modifica el ejercicio anterior de forma que haya botones de mayor y menos tamaño.
 Para aumentar o disminuir el tamaño deberás modificar:
@@ Línea 471: / Línea 468: @@
-==== Ejercicio 5.A ====
+==== Ejercicio 4.A ====
 Usando BEM con modificadores, haz el HTML y el CSS de los siguientes badges:
@@ Línea 477: / Línea 474: @@
-==== Ejercicio 5.B ====
+==== Ejercicio 4.B ====
 Modifica el ejercicio anterior de forma que el badge pueda tener un número al estilo de una notificación
@@ Línea 483: / Línea 480: @@
-==== Ejercicio 6 ====
+==== Ejercicio 5 ====
 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
@@ Línea 492: / Línea 489: @@
-==== Ejercicio 7 ====
+==== Ejercicio 6 ====
 Transforma los siguientes códigos sacados de bootstrap para que siga el estándar de BEM.
@@ Línea 628: / Línea 625: @@
-==== Ejercicio 8 ====
+==== Ejercicio 7 ====
 Crear un map con los tamaños de padding
@@ Línea 664: / 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 692: / Línea 689: @@
   * ''g--background-color-principal-1''
   * etc.

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página