Diferencias

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

--- clase:daw:diw:diseno-web-sistema-diseno [2026/10/24 17:23] – Tema 2 nuevo: sistema de diseño (colores, sombras, tamaños y botones sacados del tema 1) claude
+++ clase:daw:diw:diseno-web-sistema-diseno [2026/10/24 17:30] (actual) – Colores: añadida la gama de naranjas (la que usa el semántico alternativo) a la imagen y a los enlaces claude
@@ Línea 37: / Línea 37: @@
 {{:clase:daw:diw:paleta_de_colores_tailwind4.png|}}
-En el generador: [[https://logongas.github.io/color-schemes-generator/?p0=0-0-9&p1=0-0-15&p2=0-0-25&p3=0-0-32&p4=0-0-45&p5=0-0-63&p6=0-0-83&p7=0-0-90&p8=0-0-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Grises]], [[https://logongas.github.io/color-schemes-generator/?p0=0-0-92&p1=0-0-93&p2=0-0-94&p3=0-0-95&p4=0-0-96&p5=0-0-97&p6=0-0-98&p7=0-0-99&p8=0-0-100&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Blancos]], [[https://logongas.github.io/color-schemes-generator/?p0=359-69-30&p1=356-92-33&p2=358-100-38&p3=357-100-45&p4=357-96-58&p5=359-100-70&p6=0-100-82&p7=0-100-89&p8=0-100-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Rojos]], [[https://logongas.github.io/color-schemes-generator/?p0=145-73-19&p1=148-98-20&p2=145-100-25&p3=142-100-33&p4=144-100-39&p5=150-96-45&p6=143-81-71&p7=141-82-85&p8=141-84-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Verdes]], [[https://logongas.github.io/color-schemes-generator/?p0=225-67-33&p1=227-76-41&p2=225-84-49&p3=221-97-54&p4=216-100-58&p5=212-100-66&p6=211-100-78&p7=213-100-87&p8=214-95-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Azules]], [[https://logongas.github.io/color-schemes-generator/?p0=30-84-25&p1=33-100-27&p2=34-100-33&p3=39-100-41&p4=44-100-47&p5=47-100-50&p6=51-100-56&p7=53-100-76&p8=55-97-88&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Amarillos]].
+En el generador: [[https://logongas.github.io/color-schemes-generator/?p0=0-0-9&p1=0-0-15&p2=0-0-25&p3=0-0-32&p4=0-0-45&p5=0-0-63&p6=0-0-83&p7=0-0-90&p8=0-0-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Grises]], [[https://logongas.github.io/color-schemes-generator/?p0=0-0-92&p1=0-0-93&p2=0-0-94&p3=0-0-95&p4=0-0-96&p5=0-0-97&p6=0-0-98&p7=0-0-99&p8=0-0-100&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Blancos]], [[https://logongas.github.io/color-schemes-generator/?p0=359-69-30&p1=356-92-33&p2=358-100-38&p3=357-100-45&p4=357-96-58&p5=359-100-70&p6=0-100-82&p7=0-100-89&p8=0-100-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Rojos]], [[https://logongas.github.io/color-schemes-generator/?p0=16-83-27&p1=17-100-31&p2=16-100-40&p3=18-100-48&p4=25-100-50&p5=32-100-51&p6=31-100-71&p7=32-100-83&p8=35-100-92&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Naranjas]], [[https://logongas.github.io/color-schemes-generator/?p0=145-73-19&p1=148-98-20&p2=145-100-25&p3=142-100-33&p4=144-100-39&p5=150-96-45&p6=143-81-71&p7=141-82-85&p8=141-84-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Verdes]], [[https://logongas.github.io/color-schemes-generator/?p0=225-67-33&p1=227-76-41&p2=225-84-49&p3=221-97-54&p4=216-100-58&p5=212-100-66&p6=211-100-78&p7=213-100-87&p8=214-95-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Azules]], [[https://logongas.github.io/color-schemes-generator/?p0=30-84-25&p1=33-100-27&p2=34-100-33&p3=39-100-41&p4=44-100-47&p5=47-100-50&p6=51-100-56&p7=53-100-76&p8=55-97-88&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Amarillos]].
 Los colores semánticos:
@@ Línea 164: / Línea 164: @@
 {{:clase:daw:diw:espaciado.png|}}
+En el ejemplo mal cada separación tiene un valor distinto (10, 11, 13, 15, 17, 19, 21, 22 y 25 píxeles) y tan parecidos que no se distinguen: parecen descuidos, no decisiones. En el bien solo hay tres valores: ''8px'' entre lo que va junto, ''12px'' entre un título y lo suyo y ''24px'' entre bloques.
+^  Mal  ^  Bien  ^
+|  {{:clase:daw:diw:bienmal_espaciado_mal.png?400|}}  |  {{:clase:daw:diw:bienmal_espaciado_bien.png?400|}}  |