Diferencias

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

--- clase:daw:diw:sistema-diseno-bem [2026/10/23 22:55] – Reorganización del módulo: página nueva claude
+++ clase:daw:diw:sistema-diseno-bem [2026/10/24 00:10] (actual) – c-button -> c-boton, como en el resto de temas claude
@@ Línea 33: / Línea 33: @@
     * [[https://seesparkbox.com/foundry/bem_by_example|BEM by Example]]
     * [[https://en.bem.info/methodology/|BEM Methodology]]
-    * {{ :clase:daw:diw:1eval:css_beers.pdf |CSS and Beers is Awesome.Presentación}}
+    * {{ :clase:daw:diw:css_beers.pdf |CSS and Beers is Awesome.Presentación}}
     * [[https://youtu.be/qnSbqv6rqx4|Video:Buenas prácticas en arquitecturas CSS. Codemotion]]
     * [[https://youtu.be/07lk3GLKoa4|Vídeo:Guía rápida para escribir CSS mantenible y escalable. Codemotion]]
@@ Línea 54: / Línea 54: @@
 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.
-{{:clase:daw:diw:1eval:head-marked2.jpg?|}}
+{{:clase:daw:diw:head-marked2.jpg?|}}
-{{:clase:daw:diw:1eval:list-of-goods.jpg?|}}
+{{:clase:daw:diw:list-of-goods.jpg?|}}
 Vemos que un bloque puede o no tener dentro otro bloque. En bloque "head" tiene dentro muchos bloques.
@@ Línea 61: / Línea 61: @@
 Como los bloques pueden ser muy complejos, cada bloque puede tener si lo necesita de "elementos". Veamos un ejemplo:
-{{:clase:daw:diw:1eval:menu-items2.jpg?|}}
+{{:clase:daw:diw:menu-items2.jpg?|}}
 El componentes de "Tab" tiene 4 pestañas.
@@ Línea 76: / Línea 76: @@
 Imaginar el siguiente panel:
-{{:clase:daw:diw:1eval:panel.png|}}
+{{:clase:daw:diw:panel.png|}}
 Su HTML sería una cosa así:
@@ Línea 112: / Línea 112: @@
 Veamos otro ejemplo con un botón:
-{{:clase:daw:diw:1eval:primary.png|}}
+{{:clase:daw:diw:primary.png|}}
-Solo hay un bloque llamado "c-button" y no hay elementos.
+Solo hay un bloque llamado "c-boton" y no hay elementos.
 <sxh html>
-<div class="c-button">Mas información</div>
+<div class="c-boton">Mas información</div>
 </sxh>
 Por último nos faltan los modificadores. Imaginar que queremos que el panel pueda tener varios colores:
-{{:clase:daw:diw:1eval:paneles.png|}}
+{{:clase:daw:diw:paneles.png|}}
@@ Línea 146: / Línea 146: @@
   * Un elemento o un bloque puede tener mas clases CSS siempre que sean de tipo modificador y que sean modificadores del bloque o elemento al que pertenecen.
-{{ :clase:daw:diw:1eval:bem.svg |}} [[https://ray.so/?title=BEM&theme=candy&spacing=128&background=true&darkMode=false&code=PGRpdiBjbGFzcz0iYmxvY2siPjwvZGl2PgoKPGRpdiBjbGFzcz0iYmxvY2siPgogIDxkaXYgY2xhc3M9ImJsb2NrX19lbGVtZW50Ij4KICA8ZGl2IGNsYXNzPSJibG9ja19fZWxlbWVudCI-CjwvZGl2PgogCjxkaXYgY2xhc3M9ImJsb2NrIGJsb2NrLS1tb2RpZmllciI-CiAgPGRpdiBjbGFzcz0iYmxvY2tfX2VsZW1lbnQgYmxvY2tfX2VsZW1lbnQtLW1vZGlmaWVyIj4KICA8ZGl2IGNsYXNzPSJibG9ja19fZWxlbWVudCBibG9ja19fZWxlbWVudC0tbW9kaWZpZXIiPgo8L2Rpdj4KICAgIA&language=xml|source]]
+{{ :clase:daw:diw:bem.svg |}} [[https://ray.so/?title=BEM&theme=candy&spacing=128&background=true&darkMode=false&code=PGRpdiBjbGFzcz0iYmxvY2siPjwvZGl2PgoKPGRpdiBjbGFzcz0iYmxvY2siPgogIDxkaXYgY2xhc3M9ImJsb2NrX19lbGVtZW50Ij4KICA8ZGl2IGNsYXNzPSJibG9ja19fZWxlbWVudCI-CjwvZGl2PgogCjxkaXYgY2xhc3M9ImJsb2NrIGJsb2NrLS1tb2RpZmllciI-CiAgPGRpdiBjbGFzcz0iYmxvY2tfX2VsZW1lbnQgYmxvY2tfX2VsZW1lbnQtLW1vZGlmaWVyIj4KICA8ZGl2IGNsYXNzPSJibG9ja19fZWxlbWVudCBibG9ja19fZWxlbWVudC0tbW9kaWZpZXIiPgo8L2Rpdj4KICAgIA&language=xml|source]]
 Hemos visto que los bloques empiezan por "c-" , eso es porque son como componentes visuales. Veamos los prefijos que pueden haber:
@@ Línea 173: / Línea 173: @@
                 <input class="c-input" >
                 <input class="c-input" >
-                <button class="c-button c-button--primary c-button--normal">Guardar</button>
+                <button class="c-boton c-boton--primary c-boton--normal">Guardar</button>
             </form>
         </div>
@@ Línea 195: / Línea 195: @@
   * c-form
   * c-input
-  * c-button
+  * c-boton
   * c-social
@@ Línea 206: / Línea 206: @@
     * <nowiki>c-menu__item--active</nowiki>
     * <nowiki>c-menu__item--disable</nowiki>
-  * c-button
+  * c-boton
-    * c-button--primary
+    * c-boton--primary
-    * c-button--normal
+    * c-boton--normal
 Y por último están los modificadores globales:
@@ Línea 214: / Línea 214: @@
   * g--margin-bottom-6
-{{:clase:daw:diw:1eval:globales.jpg|}}
+{{:clase:daw:diw:globales.jpg|}}
 ===== Mejorando BEM con SASS =====
@@ Línea 290: / Línea 290: @@
 Crea un componente que tenga lo siguiente:
-{{:clase:daw:diw:1eval:articulo.png|}}
+{{:clase:daw:diw:articulo.png|}}
-La imagen es esta: [[https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:1eval:monitor.webp|monitor.webp]]
+La imagen es esta: [[https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:monitor.webp|monitor.webp]]
@@ Línea 304: / Línea 304: @@
 <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"
+urlImagen="https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:monitor.webp"
 [precioActual]="89.99"
 [precioAnterior]="99.99"
@@ Línea 448: / Línea 448: @@
   * Si no hay otras opciones disponibles que no muestre el texto
-{{:clase:daw:diw:1eval:articulo2.png|}}
+{{:clase:daw:diw:articulo2.png|}}