Diferencias

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

--- clase:daw:diw:1eval:tema02 [2022/10/04 18:44]
admin [Ejercicios]
+++ clase:daw:diw:1eval:tema02 [2023/09/25 22:29]
admin [Ejercicios]
@@ Línea 190: / Línea 190: @@
 Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http://getbem.com/|BEM]].
+{{: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]]
@@ Línea 350: / Línea 354: @@
   * g--margin-4
   * g--margin-bottom-6
+{{:clase:daw:diw:1eval:globales.jpg|}}
 ----
@@ Línea 416: / Línea 423: @@
   * 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:
@@ Línea 425: / Línea 432: @@
 |  Imagen 2  |  Imagen 5  |  Imagen 2  |
 |  Imagen 2  | ::: |  Imagen 2  |
 ==== Ejercicio 2 ====
@@ Línea 433: / Línea 439: @@
 Comprueba también si hay diferencias entre usar Chrome, Edge o Firefox al usar o no el ''reset.css''
 ==== Ejercicio 3 ====
@@ Línea 450: / Línea 457: @@
 ==== Ejercicio 4.A ====
-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.
+Usando BEM con modificadores, haz el HTML y el CSS de los siguientes botones:
+{{:clase:daw:diw:1eval:botones.png|}}
-  * Indica otra serie de propiedades visuales y sus posibles valores.
-  * Indica que valores tendrían las propiedades por defecto.
 ==== Ejercicio 4.B ====
-Mira el componente [[https://getbootstrap.com/docs/5.2/components/card/|tarjeta]] de bootstrap.
+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:
+  * 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 5.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.B ====
+Modifica el ejercicio anterior de forma que el badge pueda tener un número al estilo de una notificación
+{{:clase:daw:diw:1eval:badges_numerico.png|}}
+==== Ejercicio 6 ====
+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
+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 5.A ====
-Transforma los siguientes códigos para que siga el estándar de BEM.
+==== Ejercicio 7 ====
+Transforma los siguientes códigos sacados de bootstrap para que siga el estándar de BEM.
 <sxh html>
@@ Línea 552: / Línea 569: @@
 <sxh html>
 <div class="progress">
-  <div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-info"  style="width: 50%" ></div>
 </div>
 <div class="progress">
-  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-warning"  style="width: 75%" ></div>
 </div>
 </sxh>
@@ Línea 561: / Línea 578: @@
 <sxh html>
 <div class="progress">
-  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar w-75"  ></div>
 </div>
 </sxh>
@@ Línea 567: / Línea 584: @@
 <sxh html>
 <div class="progress">
-  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar progress-bar-striped bg-success"  style="width: 25%" ></div>
 </div>
 </sxh>
@@ Línea 610: / Línea 627: @@
 </sxh>
+==== Ejercicio 8 ====
+Crear un map con los tamaños de padding
+  $padding-values {
+    "0":0px,
+    "1":4px,
+    "2":6px,
+    ......
+  }
+Pero usando los valores del array de paddings del tema 1.
+Crea los siguientes globales
+  g--padding-0
+  g--padding-1
+  ....
+  g--padding-left-0
+  g--padding-left-1
+  ....
+  g--padding-right-0
+  g--padding-right-1
+  ....
+  g--padding-top-0
+  g--padding-top-1
+  ....
+  g--padding-bottom-0
+  g--padding-bottom-1
+  ....
+  g--padding-vertical-0
+  g--padding-vertical-1
+  ....
+  g--padding-horizontal-0
+  g--padding-horizontal-1
+  ....
+==== Ejercicio 9 ====
+Repite el ejercicio anterior pero ahora con
+  * la propiedad ''font-size''
+  * La propiedad ''margin''
+==== Ejercicio 10 ====
+Repite el ejercicio anterior pero ahora con los colores del tema 1.
+Para ello deberás crear un map dentro de un map:
+<sxh base>
+$colores:(
+  "principal":("1":#DCEBFE, "2":#BEDBFE, "3":#91C3FD, "4":#61A6FA, "5":#3C83F6, "6":#2463EB, "7":#1D4FD7, "8":#1E3FAE, "9":#1E3B8A)
+  "laternativo":("1":#FEF3C8, "2":#FDE68B, "3":#FCD44F, "4":#FBBD23, "5":#F59F0A, "6":#DB7706, "7":#B35309, "8":#91400D, "9":#76350F)
+  "rojo":.....
+)
+</sxh>
+Las propiedades CSS serán:
+  * ''color''
+  * ''background-color''
+Y al crear los globales tendrán la siguiente forma
+  * ''g--color-rojo-4''
+  * ''g--background-color-principal-1''
+  * etc.
@@ Línea 615: / Línea 697: @@
-==== Ejercicio 6 ====
-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 6 ====
-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