Diferencias

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

--- clase:daw:diw:1eval:tema02 [2022/10/06 20:25]
admin [Ejercicios]
+++ clase:daw:diw:1eval:tema02 [2023/09/14 22:29]
admin [Arquitectura CSS]
@@ 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 480: / Línea 487: @@
     * 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 ''Primario-Secundario''
+    * 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
@@ Línea 497: / Línea 504: @@
   * 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 ''Primario-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''
-  * Botón ''Primario-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 ''c-boton--size-lg''
-  * Botón ''Primario-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''
+  * 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 ====
+==== Ejercicio 6.A ====
 Crea las clases CSS necesarias para crear el componente "c-panel" de bootstrap.
 Lo puedes ver en [[https://getbootstrap.com/docs/3.3/components/#panels-basic|Panels]]
+==== Ejercicio 6.B ====
+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
@@ Línea 643: / Línea 655: @@
+==== 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 8 ====
+==== 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.
+==== 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
@@ Línea 658: / Línea 733: @@
 Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM
-==== Ejercicio 9 ====
+==== Ejercicio 12 ====
 Crea una página web que tenga lo siguiente:

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página