Diferencias

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

--- clase:daw:diw:1eval:tema03.c [2025/11/03 11:37] – creado - editor externo 127.0.0.1
+++ clase:daw:diw:1eval:tema03.c [2025/11/10 11:52] (actual) – [Ejercicios] Lorenzo
@@ Línea 2: / Línea 2: @@
 Vamos ahora a ver lo mas importante de todo el módulo. ¡Como organizar nuestras clases CSS!. Antes de empezar puede leer este artículo que habla sobre la importancia de una arquitectura CSS: [[https://www.paradigmadigital.com/techbiz/por-que-nos-olvidamos-de-arquitectura-css/|¿Por qué nos olvidamos de la Arquitectura CSS?]]
-Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http://getbem.com/|BEM]].
+===== Arquitectura CSS =====
+Cuando nos enfrentamos a proyectos grandes, puede que nuestros compañeros no entiendan nuestras líneas de código, para eso se crearon las arquitecturas de CSS.
+Los objetivos son:
+  * Predecible: Escribir reglas claras.
+  * Reutilizable: No escribir código redundante.
+  * Mantenible: Que sea fácil de leer y adaptarnos a los estándares.
+  * Escalable: Que pueda crecer fácilmente pero sin afectar el rendimiento.
+Buenas prácticas
+  * Establecer reglas para que el equipo se entienda.
+  * Explicar la estructura base o dar los fundamentos del proyecto a un nuevo integrante.
+  * Evitar hojas de estilo muy extensas.
+  * Tener una buena documentación explicando ciertos aspectos del código.
+===== 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]]
+===== Bloques y Elementos =====
 Lo primero es identificar los bloques de nuestra página. Esos bloque son como componentes u objetos que la página. En las siguientes imágenes podemos ver ejemplos de bloques.
@@ Línea 80: / Línea 99: @@
 {{:clase:daw:diw:1eval:paneles.png|}}
+===== Modificadores =====
 ¿Como modificamos el CSS para incluir esos nuevos colores? Pues con un modificador.
@@ Línea 196: / Línea 218: @@
     * [[https://philipwalton.com/articles/css-architecture/|CSS Architecture]]
     * [[https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/|ITCSS: Scalable and Maintainable CSS Architecture]]
+===== Ejercicios =====
+==== Ejercicio 1.A ====
+Crea un componente que tenga lo siguiente:
+{{:clase:daw:diw:1eval:articulo.png|}}
+La imagen es esta: [[https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:1eval:monitor.webp|monitor.webp]]
+Los caracteres de la estrella y el camión son:
+  * ⭐
+  * 🚚
+<sxh ts>
+<c-articulo
+  nombre="Monitor Acer Nitro KG241YX3BIP 23.8' FHD 200Hz VA FreeSync Premium HDR10"
+urlImagen="https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:1eval:monitor.webp"
+[precioActual]="89.99"
+[precioAnterior]="99.99"
+[valoracion]="4.6"
+[numeroOpiniones]="1472"
+[fechaEntrega]="fechaEntrega"
+[precioEnvio]="0.00"
+[otrosEnvios]="true"
+/>
+</sxh>
+<sxh ts;title:c-articulo.ts>
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+@Component({
+  selector: 'c-articulo',
+  imports: [CommonModule],
+  templateUrl: './c-articulo.html',
+  styleUrl: './c-articulo.scss'
+})
+export class CArticulo  {
+  @Input() nombre:string="";
+  @Input() urlImagen:string="";
+  @Input() precioActual:number=0;
+  @Input() precioAnterior:number=0;
+  @Input() valoracion:number=0;
+  @Input() numeroOpiniones:number=0;
+  @Input() fechaEntrega:Date=new Date();
+  @Input() precioEnvio:number=0;
+  @Input() otrosEnvios:boolean=false;
+}
+</sxh>
+<sxh ts;title:c-articulo.html>
+<div class="c-articulo">
+  <img class="c-articulo__image" src="{{urlImagen}}" >
+  <h3 class="c-articulo__title">{{nombre}}</h3>
+  <p class="g--margin-vertical-2">
+    <span class="c-articulo__precio c-articulo__precio--actual">{{precioActual | currency}}</span>
+    &nbsp;
+    <span class="c-articulo__precio c-articulo__precio--anterior">{{precioAnterior | currency}}</span>
+  </p>
+  <p>
+    <span class="c-articulo__valoracion">{{valoracion}}/5</span>&nbsp;
+    <span class="g--font-size-4">⭐</span>&nbsp;
+    <span class="c-articulo__opiniones">{{numeroOpiniones}} opiniones</span>
+  </p>
+  <p class="">
+    🚚&nbsp;
+    <span class="c-articulo__entrega c-articulo__entrega--positivo">{{precioEnvio | currency}}</span>&nbsp;
+    <span class="c-articulo__entrega c-articulo__entrega--negativo">{{fechaEntrega| date:'shortDate'}}</span>
+  </p>
+  <p class="c-articulo__otras-opciones g--margin-top-2">
+    Otras opciones disponibles
+  </p>
+</div>
+</sxh>
+<sxh sass;title:c-articulo.scss>
+.c-articulo {
+  font-family: "Open Sans", Arial, sans-serif;
+  width: 197px;
+  color: #333;
+  &__title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+  &__precio {
+    &--actual {
+      font-size: 17px;
+      font-weight: 700;
+      color: #bf0019;
+    }
+    &--anterior {
+      font-size: 14px;
+      color: #6e6e6e;
+      text-decoration: line-through;
+    }
+    &-envio {
+      color: #ff7a00;
+      font-weight: 600;
+    }
+  }
+  &__valoracion {
+    font-size: 13px;
+    font-weight: 600;
+    color: #333;
+  }
+  &__opiniones {
+    color: #333333;
+    font-size: 13px;
+  }
+  &__entrega {
+    font-size: 13px;
+    font-weight: 700;
+    &--positivo {
+      color: #008000;
+    }
+    &--negativo {
+      color: #333333;
+    }
+  }
+  &__otras-opciones {
+    font-size: 13px;
+    color: #777;
+    font-weight: 600;
+  }
+}
+</sxh>
+==== Ejercicio 1.B ====
+Modifica ahora el componente para que
+  * Si los gastos de envío
+    * Son 0€ se muestre "Entrega gratis." de color verde
+    * Sino que no es muestre nada.
+  * Si la fecha de entrega es
+    * Mañana que muestre  "Recíbelo mañana" en color verde
+    * Sino mostrara "Recíbelo a partir del jueves 13 de noviembre" en color negro. (Obviamente hay que poner la fecha de entrega en letras)
+  * Si no hay precio anterior que no lo muestre
+  * Si no hay otras opciones disponibles que no muestre el texto
+{{:clase:daw:diw:1eval:articulo2.png|}}