Diferencias

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

--- clase:daw:diw:1eval:tema01 [2023/11/20 21:06]
admin [Experiencia de usuario]
+++ clase:daw:diw:1eval:tema01 [2025/04/14 19:33] (actual)
admin [Botones]
@@ Línea 2: / Línea 2: @@
+====== Frameworks ======
+Veamos la encuesta anual de framewoks más usados: [[https://2024.stateofcss.com/en-US/tools/#css_frameworks|State of CSS 2024: Libraries & Tools]]
+{{:clase:daw:diw:1eval:css-frameworks.png?700|}}
+{{:clase:daw:diw:1eval:css-preprocesors.png?700|}}
 ===== Normas y estilos de diseño =====
   * Haz que las cosas que no están relacionadas estén muy separadas entre si. Es decir que haya mucho espacio en blanco. Y luego ya veremos si los juntas un poco.
+|  {{:clase:daw:diw:1eval:sin_espacio.png|}}  |  {{:clase:daw:diw:1eval:con_espacio.png|}}  |
   * Los diseño no tienen que ocupar el 100% de la pantalla ya que en pantallas muy grandes queda mal
   * Haz que las cosas estén alineadas a una recta imaginaria que va de arriba a abajo.
+|  {{:clase:daw:diw:1eval:lineas.png|}}  |  {{:clase:daw:diw:1eval:lineas_visibles.png|}}  |
   * Resalta lo importante
   * Repele la atención de lo que no es importante (más pequeño, más espacioso, de menor contraste).
@@ Línea 42: / Línea 59: @@
 <note tip>
-El libro que se va a usar como ejemplo dirante el curso es  [[https://refactoringui.com/book/|Refactoring UI: The Book]] {{ :clase:daw:diw:1eval:libro |l}}
+El libro que se va a usar como ejemplo dirante el curso es  [[https://refactoringui.com/book/|Refactoring UI: The Book]] {{ :clase:daw:diw:1eval:lib |l}}
 Hay material sobre el libro en:
@@ Línea 71: / Línea 88: @@
   * [[https://logongas.github.io/color-schemes-generator|Color Scheme Generator]]: Mi generador
   * [[https://palettte.app/|Palettte App]]
+  * [[https://colorcolor.in/|colorxcolor]]:Permite ajustar las curvas de saturación y luminosidad.
   * Paletas de colores de [[https://tailwindcss.com/|Tailwind CSS]]
     * [[https://logongas.github.io//color-schemes-generator/index.html?p0=0-63-31&p1=0-70-35&p2=0-74-42&p3=0-72-51&p4=0-84-60&p5=0-91-71&p6=0-94-82&p7=0-96-89&p8=0-93-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Rojos]]
@@ Línea 78: / Línea 96: @@
     * [[https://logongas.github.io/color-schemes-generator/?p0=22-78-26&p1=23-83-31&p2=26-90-37&p3=32-95-44&p4=38-92-50&p5=43-96-56&p6=46-97-65&p7=48-97-77&p8=48-96-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Amarillos]]
     * [[https://logongas.github.io/color-schemes-generator/?p0=264-67-35&p1=263-69-42&p2=263-70-50&p3=262-83-58&p4=258-90-66&p5=255-92-76&p6=252-95-85&p7=251-95-92&p8=251-91-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Morados]]
+    * [[https://logongas.github.io//color-schemes-generator/index.html?p0=217-33-17&p1=215-25-27&p2=215-19-35&p3=215-16-47&p4=215-20-65&p5=213-27-84&p6=214-32-91&p7=210-40-96&p8=210-40-98&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Gris pizarra]]
 Para crear el color alternativo usa:
@@ Línea 150: / Línea 169: @@
 </note>
+==== Ejemplos ====
+  * **Página de Login**
+{{:clase:daw:diw:1eval:botones-itaca.png|}}
+Los 2 botones son iguales, cuando realmente queremos que pulsen "Entrar", así que uno debería ser primario y el otro secundario.
+  * **Página de cookies de una web.**
+{{:clase:daw:diw:1eval:botones-valencia-bonita.png|}}
+Ahora si que está claro cual quiere que pulsemos pero el botón de "Más información" nunca interesa que lo aprieten, así que debería ser terciario. Por otro lado ¿Realmente les interesa que pulsemos en el de "Rechazar y Subscribirme por 0,75€ Por mes"?
+  * **Abrir un enlace en WhatsApp.**
+{{:clase:daw:diw:1eval:botones-whassapp.jpeg|}}
+Aquí está bien porque hace uso de la función peligrosa, además que no quiere influir sobre que botón deberías pulsar.
+  * **Iniciar un trámite en una administración pública.**
+{{:clase:daw:diw:1eval:botones-expediente.jpg?400|}}
+Le da la misma importancia a seguir con el trámite que cancelarlo.
+  * **Diálogo**
+{{:clase:daw:diw:1eval:boton-sino.png|}}
+Tienen la misma función el "Si" y "No", cuando el "Si" debería ser peligroso ( ya que es borrar el trámite).
 ===== Sistema de tamaños =====
@@ Línea 166: / Línea 217: @@
 Border radious:
-px, 2px, 4px, 6px, 8px, 16px
+px, 2px, 4px, 6px, 8px, 12px, 16px
 Obviamente se puede elegir los tamaños que se deseen pero se tiene que tener en cuenta que a mayor tamaño , mas debe ser el incremento entre uno y otro.
@@ Línea 265: / Línea 316: @@
 Si quieres variar el fondo, puedes obtener  imágenes de [[https://pngtree.com/free-backgrounds-photos/|Background Photos, Vectors and PSD Files for Free Download | Pngtree]]
+==== Ejercicio 9 ====
+Mira la web [[https://necesitountrastero.es/|https://necesitountrastero.es/]] y critica todas aquellas cosas relativas al diseño

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página