Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa Próxima revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema02 [2022/10/17 22:11] admin [Ejercicios] |
clase:daw:diw:1eval:tema02 [2023/09/25 17:04] admin [Ejercicios] |
||
---|---|---|---|
Línea 190: | Línea 190: | ||
Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http:// | Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http:// | ||
+ | |||
+ | |||
+ | {{: | ||
+ | [[https:// | ||
Línea 350: | Línea 354: | ||
* g--margin-4 | * g--margin-4 | ||
* g--margin-bottom-6 | * g--margin-bottom-6 | ||
+ | |||
+ | {{: | ||
+ | |||
---- | ---- | ||
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. | * main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS. | ||
===== Ejercicios ===== | ===== Ejercicios ===== | ||
- | |||
==== Ejercicio 1 ==== | ==== 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 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 5 | Imagen 2 | | ||
| Imagen 2 | ::: | Imagen 2 | | | Imagen 2 | ::: | Imagen 2 | | ||
- | |||
==== Ejercicio 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 '' | Comprueba también si hay diferencias entre usar Chrome, Edge o Firefox al usar o no el '' | ||
+ | |||
==== Ejercicio 3 ==== | ==== Ejercicio 3 ==== | ||
Línea 450: | Línea 457: | ||
==== Ejercicio 4.A ==== | ==== 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, |
+ | |||
+ | {{: | ||
- | * Indica otra serie de propiedades visuales y sus posibles valores. | ||
- | * Indica que valores tendrían las propiedades por defecto. | ||
==== Ejercicio 4.B ==== | ==== Ejercicio 4.B ==== | ||
- | Mira el componente [[https:// | + | Modifica |
- | + | ||
- | + | ||
- | * Indica los elementos HTML que puede componer el componente " | + | |
- | * 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 ==== | + | |
- | Dado el ejercicio anterior, crea las clases CSS que implementen las propiedades | + | |
- | ==== Ejercicio 4.D ==== | + | Para aumentar o disminuir |
- | Dado el ejercicio anterior, imagina una nomenclatura para estandarizar los nombres | + | * El tamaño |
+ | * El padding | ||
- | ==== Ejercicio 4.E ==== | ||
- | Dado el ejercicio anterior, modifica el nombre de tus clases CSS para que sigan la nomenclatura de BEM | ||
- | ==== Ejercicio 5 ==== | ||
- | * Crea una clase CSS llamada '' | ||
- | * Cree un bóton del estilo '' | ||
- | * El padding horizontal sea de 12px | ||
- | * El padding vertical sea de 6px. | ||
- | * El tamaño de fuente de 16px | ||
- | * Crea una clase CSS llamada '' | ||
- | * El botón se vea como '' | ||
- | * Crea una clase CSS llamada '' | ||
- | * El padding horizontal sea de 20px | ||
- | * El padding vertical sea de 10px. | ||
- | * El tamaño de fuente de 20px | ||
- | * Crea una clase CSS llamada '' | ||
- | * El padding horizontal sea de 20px | ||
- | * Crea una clase CSS llamada '' | ||
- | * El padding vertical sea de 10px. | ||
- | * Crea una clase CSS llamada '' | ||
- | * El tamaño de fuente de 20px | ||
+ | ==== Ejercicio 5.A ==== | ||
+ | Usando BEM con modificadores, | ||
- | Crea en una página web los siguiente botones: | + | {{:clase: |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | ==== Ejercicio 6.A ==== | ||
- | Crea las clases CSS necesarias para crear el componente " | ||
- | Lo puedes ver en [[https:// | + | ==== Ejercicio 5.B ==== |
+ | Modifica el ejercicio anterior de forma que el badge pueda tener un número al estilo de una notificación | ||
- | ==== Ejercicio 6.B ==== | + | {{: |
- | Añade al ejercicio anterior los modificadores necesarios para que el panel pueda ser de " | + | |
- | Y crea un panel normal y otro de peligro | ||
- | ==== Ejercicio | + | ==== Ejercicio |
- | Transforma los siguientes códigos para que siga el estándar de BEM. | + | Transforma los siguientes códigos |
<sxh html> | <sxh html> | ||
Línea 684: | Línea 656: | ||
.... | .... | ||
+ | ==== Ejercicio 9 ==== | ||
+ | Repite el ejercicio anterior pero ahora con | ||
+ | * la propiedad '' | ||
+ | * La propiedad '' | ||
+ | ==== Ejercicio 10 ==== | ||
+ | Repite el ejercicio anterior pero ahora con los colores del tema 1. | ||
- | ==== Ejercicio | + | Para ello deberás crear un map dentro de un map: |
- | Mira la página de [[https:// | + | |
+ | <sxh base> | ||
+ | $colores: | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ) | ||
+ | </ | ||
+ | |||
+ | Las propiedades CSS serán: | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | |||
+ | Y al crear los globales tendrán la siguiente forma | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * etc. | ||
+ | |||
+ | |||
+ | |||
+ | ==== Ejercicio | ||
+ | Mira la página de [[https:// | ||
* Los componentes, | * Los componentes, | ||
* Los Layouts, 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 | Indica todas las clases CSS que deberia haber para todos los Bloques, Elementos y Modificadores | ||
Línea 697: | Línea 696: | ||
Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM | Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM | ||
- | ==== Ejercicio 10 ==== | ||
- | 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 | + | |