logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:1eval:tema02

Diferencias

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

Enlace a la vista de comparación

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/19 11:35]
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://getbem.com/|BEM]]. 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-4 
   * g--margin-bottom-6   * g--margin-bottom-6
 +
 +{{:clase:daw:diw:1eval:globales.jpg|}}
 +
  
 ---- ----
Línea 417: Línea 424:
 ===== 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 ''reset.css'' Comprueba también si hay diferencias entre usar Chrome, Edge o Firefox al usar o no el ''reset.css''
 +
  
 ==== 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, 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 ==== ==== 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.
- +
- +
-  * 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 ==== +
-Dado el ejercicio anterior, crea las clases CSS que implementen las propiedades y valores que has indicado.+
  
-==== Ejercicio 4.D ==== +Para aumentar o disminuir el tamaño deberás modificar: 
-Dado el ejercicio anterior, imagina una nomenclatura para estandarizar los nombres de las clases CSS que has hecho en el ejercicio anterior+  * El tamaño de fuente 
 +  * 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 ''c-boton'' que : 
-    * 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 
  
 +==== Ejercicio 5.A ====
 +Usando BEM con modificadores, haz el HTML y el CSS de los siguientes badges:
  
-Crea en una página web los siguiente botones: +{{:clase:daw:diw:1eval:badges.png|}}
-  * 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 ==== 
-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 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 ==== +{{:clase:daw:diw:1eval:badges_numerico.png|}}
-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 7 ==== +==== Ejercicio 6 ==== 
-Transforma los siguientes códigos para que siga el estándar de BEM.+Transforma los siguientes códigos sacados de bootstrap para que siga el estándar de BEM.
  
 <sxh html> <sxh html>
Línea 716: Línea 688:
  
 ==== Ejercicio 11 ==== ==== Ejercicio 11 ====
-Mira la página de [[https://www.bankia.es/es/particulares|Bankia Particulares]] y según la metodología de BEM indica:+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 componentes, elementos y modificadores que hay 
   * 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 726: 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 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+
  
  
  
  
clase/daw/diw/1eval/tema02.txt · Última modificación: 2024/05/17 18:43 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki