Diferencias

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

--- clase:daw:diw:1eval:tema02 [2022/10/19 11:35]
admin [Ejercicios]
+++ clase:daw:diw:1eval:tema02 [2023/11/07 11:31] (actual)
admin [Estructura de ficheros]
@@ Línea 174: / Línea 174: @@
 <sxh sass>
-  @import "./_boton.scss";
+  @import "./_c-button.scss";
 </sxh>
@@ 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 382: / Línea 389: @@
   /scss
      /01_utilities
-         _variables.scss
+         _css-variables.scss
+         _sass-variables.scss
          _functions.scss
          _mixins.scss
@@ Línea 388: / Línea 396: @@
         _override.scss
         _reset.scss
+        _typography.scss
     /03_layout
         _cada_uno_de_los_layouts.scss
@@ Línea 400: / Línea 409: @@
   * /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
@@ Línea 406: / Línea 416: @@
     *  _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 416: / Línea 427: @@
   * 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 434: / Línea 444: @@
 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 648: / Línea 621: @@
-==== Ejercicio 8 ====
+==== Ejercicio 7 ====
 Crear un map con los tamaños de padding
@@ Línea 684: / Línea 657: @@
   ....
-==== 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 712: / Línea 685: @@
   * ''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