Diferencias

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

--- clase:daw:diw:start [2025/11/03 11:36] – creado - editor externo 127.0.0.1
+++ clase:daw:diw:start [2026/10/30 09:31] (actual) – [Objetivo del módulo] claude
@@ Línea 2: / Línea 2: @@
 Apuntes del módulo de Diseño de interfaces Web
-===== 1º Evaluación =====
+===== Objetivo del módulo =====
+El objetivo del módulo es **crear un sistema de diseño**. Cómo se hace uno de verdad lo cuenta Claudia Anaut con Genuine, el sistema de diseño de Veridas:
+  * [[https://www.youtube.com/watch?v=O1bOo44ql_U|Vídeo: Cómo montar un Sistema de Diseño/UI Kit desde cero]]: la charla en la Commit Conf.
+  * {{:clase:daw:diw:de_cero_a_sistema.pdf|Transparencias en PDF}}: las diapositivas de la charla.
+  * [[https://gamma.app/docs/Copy-of-De-cero-a-sistema-lecciones-reales-de-la-creacion-de-un-s-zcwjokbpzuivcnq?mode=present|Transparencias en Gamma]]: la presentación original, con el vídeo de ejemplo y los apartados desplegables.
-  * [[.:1eval:tema01]]
-  * [[.:1eval:tema02]]
-  * [[.:1eval:tema03]]
-  * [[.:1eval:tema03.b]]
-  * [[.:1eval:tema03.c]]
-  * [[.:1eval:tema04]]
-  * [[.:1eval:tema05]]
-  * [[.:1eval:tema06]]
-  * [[.:1eval:tema07]]
-  * [[.:1eval:tema08]]
-===== 2º Evaluación =====
+Aqui hay otro video de como un yotuber nos vende su app para hacer un sistema de diseño. Lo interesante es que explica lo mismo que vamos a ver en clase: [[https://www.youtube.com/watch?v=Y0GxR37RvyI|Mi herramienta para que la IA respete tu sistema de diseño]]
-  * [[.2eval:tema09]]
+==== ¿Qué es un sistema de diseño? ====
-  * [[.2eval:tema10]]
+Es el conjunto de **decisiones de diseño, componentes y normas** que comparten todas las aplicaciones de una empresa para que se vean y funcionen igual. Tiene tres partes:
-  * [[.2eval:tema11]]
+  * **Tokens**: los valores de diseño (colores, tipografía, espaciado...) como variables con nombre.
+  * **Componentes**: botones, campos, tarjetas... hechos una sola vez con esos tokens y reutilizados en todas las pantallas.
+  * **Documentación**: cómo y cuándo se usa cada componente, por ejemplo con Storybook.
+Sus ventajas:
+  * **Coherencia**: todas las pantallas y todos los productos se ven y se comportan igual.
+  * **Rapidez**: una pantalla nueva se monta con piezas que ya existen.
+  * **Mantenimiento**: cambiar un token, como el color principal, cambia todas las aplicaciones a la vez.
+  * **Lenguaje común**: diseñadores y programadores llaman igual a las mismas cosas.
+  * **Accesibilidad**: se resuelve una vez en cada componente y la heredan todas las pantallas.
+En el módulo lo construimos paso a paso en los temas de [[#sistema_de_diseno|Sistema de diseño]].
+===== Diseño =====
+  * [[.:diseno-web-introduccion]]
+  * [[.:diseno-web-sistema-diseno]]
+===== CSS =====
+  * [[.:css-basico]]
+  * [[.:css-flex-grid]]
+  * [[.:css-responsivo]]
+  * [[.:css-animaciones]]
+  * [[.:css-drag-drop]]
+===== SASS =====
+  * [[.:sass]]
+===== Angular =====
+  * [[.:angular-material]]
+  * [[.:angular-material-tokens]]
+  * [[.:angular-creacion-componentes]]
+  * [[.:angular-atributos-componentes]]
+===== Sistema de diseño =====
+  * [[.:sistema-diseno-bem]]
+  * [[.:sistema-diseno-tokens]]
+  * [[.:sistema-diseno-globales]]
+  * [[.:sistema-diseno-layout]]
+  * [[.:sistema-diseno-estructura-carpetas]]