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 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]]. 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.
  
 +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 ==== +==== Ejercicio 5.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 6 ==== 
-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 7 ==== ==== Ejercicio 7 ====
-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 715: Línea 695:
  
  
-==== 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+
  
  
  
  
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