Diferencias

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

--- clase:daw:diw:start [2026/10/23 22:55] – Reorganización del módulo: índice con los temas nuevos claude
+++ clase:daw:diw:start [2026/10/30 09:31] (actual) – [Objetivo del módulo] claude
@@ Línea 1: / Línea 1: @@
 ====== Diseño de interfaces Web ======
 Apuntes del módulo de Diseño de interfaces Web
+===== 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.
+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]]
+==== ¿Qué es un sistema de diseño? ====
+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:
+  * **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 =====