Diferencias

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

--- clase:daw:diw:1eval:tema02 [2022/10/04 10:53]
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 417: / Línea 424: @@
 ===== Ejercicios =====
+==== Ejercicio 1 ====
-==== 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
-==== Ejercicio 5 ====
+{{:clase:daw:diw:1eval:badges_numerico.png|}}
-Mira la página de [[https://www.bankia.es/es/particulares|Bankia Particulares]] y según la metodología de BEM indica:
+==== 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
-  * 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
@@ Línea 485: / Línea 491: @@
 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
+==== Ejercicio 7 ====
-  * 2 Layouts
+Transforma los siguientes códigos sacados de bootstrap para que siga el estándar de BEM.
-  * Variables
-  * Márgenes globales.
+<sxh html>
-  * Que todo se organice según la estructura de ficheros de SASS
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+</sxh>
+<sxh html>
+<div class="alert alert-primary" role="alert">
+  A simple primary alert—check it out!
+</div>
+</sxh>
+<sxh html>
+<div class="alert alert-primary" role="alert">
+  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+</sxh>
+<sxh html>
+<div class="alert alert-success" >
+  <h4 class="alert-heading">Well done!</h4>
+  <p>Hola</p>
+  <hr>
+  <p class="mb-0">Hola</p>
+</div>
+</sxh>
+<sxh html>
+<h1>Example heading <span class="badge bg-secondary">New</span></h1>
+<button type="button" class="btn btn-primary">
+  Notifications <span class="badge text-bg-secondary">4</span>
+</button>
+</sxh>
+<sxh html>
+<button type="button" class="btn btn-primary position-relative">
+  Inbox
+  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
++
+    <span class="visually-hidden">unread messages</span>
+  </span>
+</button>
+</sxh>
+<sxh html>
+<span class="badge rounded-pill text-bg-primary">Primary</span>
+<span class="badge rounded-pill text-bg-secondary">Secondary</span>
+</sxh>
+<sxh html>
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item"><a href="#">Library</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Data</li>
+  </ol>
+</sxh>
+<sxh html>
+<div class="card" style="width: 18rem;">
+  <img src="" class="card-img-top" >
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <p class="card-text">Hola</p>
+    <a href="#" class="btn btn-primary">OK</a>
+  </div>
+</div>
+</sxh>
+<sxh html>
+<div class="progress">
+  <div class="progress-bar bg-info"  style="width: 50%" ></div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-warning"  style="width: 75%" ></div>
+</div>
+</sxh>
+<sxh html>
+<div class="progress">
+  <div class="progress-bar w-75"  ></div>
+</div>
+</sxh>
+<sxh html>
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-success"  style="width: 25%" ></div>
+</div>
+</sxh>
+<sxh html>
+  <ul class="pagination">
+    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">Next</a></li>
+  </ul>
+</sxh>
+<sxh html>
+  <ul class="pagination">
+    <li class="page-item disabled">
+      <a class="page-link">Previous</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item active" aria-current="page">
+      <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</sxh>
+<sxh html>
+  <ul class="pagination pagination-lg">
+    <li class="page-item active" aria-current="page">
+      <span class="page-link">1</span>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+  </ul>
+</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.

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página