logongas

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 1. Diseño Web: Introducción ======
<blockquote column 30% >
Diseña el interfaz de usuario de forma que la decisión que debe de tomar el usuario sea la más fácil de tomar.

<cite>Un usuario frustrado</cite>
</blockquote>

===== Frameworks =====
Veamos la encuesta anual de frameworks más usados: [[https://2024.stateofcss.com/en-US/tools/#css_frameworks|State of CSS 2024: Libraries & Tools]].

{{:clase:daw:diw:css-frameworks.png?700|}}


{{:clase:daw:diw: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:sin_espacio.png|}}  |  {{:clase:daw:diw: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:lineas.png|}}  |  {{:clase:daw:diw: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).
  * Evita usar label o captions. Si ves "ventas@persianas.com" ya sabes que es un correo, no hace falta indicar que es el correo. Pero si usas un label que forme parte de una frase. "3 en stock" en vez de  "Stock:3". Y aun así, si las usas, que estén desenfatizadas
  * Los títulos <h1> no tienen porque destacar ya que a veces no son importantes ya que es obvio el título. <h1> es para que el buscador sepa que eso es importante.
  * Las esquinas cuadradas indican seriedad. Las Esquinas muy muy redondeadas son muy informales (''border-radius'').
  * Para enfatizar en vez de un mayor tamaño de letra, usa negrita. Pero para desenfatizar, usa un color de letra gris en vez del negro del texto.
  * Nunca usar un carrusel. [[https://shouldiuseacarousel.com/]]



¿En que se fija un diseñador? Haz el siguiente test y fíjate en los pequeños detalles: [[https://cantunsee.space/|Iniciar el test]]. Se debe elegir entre la imagen de la izquierda o de la derecha y luego se puede comparar para ver las diferencias.



<note tip>
El libro que se va a usar como ejemplo durante el curso es  [[https://refactoringui.com/book/|Refactoring UI: The Book]] {{ :clase:daw:diw:1eval:lib |l}}

Hay material sobre el libro en:
  * [[https://twitter.com/refactoringui|@refactoringui]]
  * [[https://twitter.com/steveschoger|@steveschoger]]
</note>

Mas información sobre el diseño:
  * [[https://www.creativebloq.com/features/ui-design|The ultimate UI design guide]]
  * [[https://learnui.design/blog/why-beginning-designers-dont-need-grids-type-scales-color-theory.html|Why Beginning Designers Don't Need to Learn Grids, Type Scales, or Color Theory (and other “Designer Dogma”)]]
  * [[https://digitalsynopsis.com/design/useful-ui-ux-design-tips/|Short, Useful Design Tips For UI/UX Designers]]: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior.
  * {{ :clase:daw:diw:the_7_most_common_ui_mistakes.pdf |The 7 most common UI mistakes}}: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior. [[https://ckarchive.com/b/v8u3hrhxdoqnx|ref]]
  * [[https://learnui.design/blog/color-in-ui-design-a-practical-framework.html|Color in UI Design: A (Practical) Framework]]
  * {{ :clase:daw:diw:color_cheatsheet_v1-3.pdf |UI Color Cheatsheet.pdf}}
  * [[https://www.indiehackers.com/post/send-me-your-landing-page-and-i-will-give-you-ui-ux-feedback-79752ca8f6|Send me your Landing Page and I will give you UI/UX Feedback]]: La gente envía su página web y un diseñador cuenta como mejorar el diseño. 
  * [[https://twitter.com/erikdkennedy/status/1328771593934290944|50+ practical UI/UX design tips (1 each weekday)]]
  * [[https://anthonyhobday.com/sideprojects/saferules/|Visual design rules you can safely follow every time]]
  * [[https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html|7 Rules for Creating Gorgeous UI (Updated for 2022)]]
  * [[https://www.learnui.design/blog/4-rules-intuitive-ux.html|4 Rules for Intuitive UX]]

  * Usabilidad en base a los estilos de los iconos:
    * {{ :clase:daw:diw:filled-in_vs._outline_icons_the_impact_of_icon_style_on_usability..pdf |Filled-in vs. Outline icons: The impact of icon style on usability}}
    * [[https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/|Solid Vs. Outline Icons: Which Are Faster to Recognize?]]
    * [[https://www.krishaweb.com/outline-icons-vs-solid-icons|Outline Icons vs. Solid Icons: Which are Faster to Recognize and When?]]


===== Colores =====
Los colores de pueden definir en CSS con formato RGB o HSL. Mas información de HSL en {{ :clase:daw:diw:color_hsl.pdf |Descripción del modelo de color HSL (Hue, Saturation, Ligthness)}}. Y aquí una herramienta para transformar de RGB a HSL: [[https://www.w3schools.com/colors/colors_converter.asp| Color Converter]]

Necesitas muchos colores:

{{:clase:daw:diw:paleta_de_colores.png|}}

Pero no para hacer cosas así:

{{:clase:daw:diw:colores_mal.png|}}


sino para hacer cosas así:

{{:clase:daw:diw:colores_bien.png|}}

La gama de blancos y grises la usas para hacer las cosas muy claras u oscuras. La gama del color principal obviamente la usas para casi todo, mientras que la gama del color alternativo la usas para destacar algo. Por último, los colores rojo, verde, amarillo, etc, son para cosas concretas que necesitan ese color. Por ejemplo para avisar del borrado de algo usar el rojo.

Para crear variaciones de un color usa:

  * [[https://learnui.design/tools/data-color-picker.html#single|Data Viz Color Palette Generator (for Charts & Dashboards)]]
  * [[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]]
    * [[https://logongas.github.io/color-schemes-generator/?p0=224-64-33&p1=226-71-40&p2=224-76-48&p3=221-83-53&p4=217-91-60&p5=213-94-68&p6=212-96-78&p7=213-97-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=164-86-16&p1=163-88-20&p2=163-94-24&p3=161-94-30&p4=160-84-39&p5=158-64-52&p6=156-72-67&p7=152-76-80&p8=149-80-90&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Verdes]]
    * [[https://logongas.github.io/color-schemes-generator/?p0=336-69-30&p1=336-74-35&p2=335-78-42&p3=333-71-51&p4=330-81-60&p5=329-86-70&p6=327-87-82&p7=326-85-90&p8=326-78-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Rosas]]
    * [[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:
  * [[https://colorschemedesigner.com/csd-3.5/|Color Scheme Designer 3]]

===== La luz viene del cielo =====
Las cosas que están "encima" debe ser más claras que las que están abajo.

{{:clase:daw:diw:luz-viene-del-cielo.png?direct&900|}}

Mas informacion:
  * [[https://learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html#rule-1-light-comes-from-the-sky|Rule 1: Light Comes From the Sky]]
  * {{:clase:daw:diw:la_luz_viene_del_cielo.pdf|}}

==== Sombras ====
Las sombras se usan para dar sensación de profundidad sin necesidad de bordes. Suponemos que la luz viene de arriba.

{{:clase:daw:diw:luz_y_sombras.png|}}




  * Ejemplo de sombras que cada vez están más arriba.

<sxh css>
.square {
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 6px;

}
</sxh>

<sxh html>
<div style="display: flex;gap: 40px;padding: 30px;background-color: #E1E6E6;">
    <div class="square" style="box-shadow: 0  1px  3px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0  4px  6px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0  5px 15px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0 10px 24px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0 15px 35px  rgb(0 0 0 / 20%);"></div>
</div> 
</sxh>

{{:clase:daw:diw:sombras_y_profundidad.png|}}


===== Contraste de colores =====
Al hacer un interfaz de usuario, jugar con dos colores que hagan contraste.

{{:clase:daw:diw:contraste_de_colores.jpg?direct|}}

  * En la siguiente imagen se pueden ver la rueda de colores que hacen contraste y se pueden generar en [[https://paletton.com/|Paletton - The Color Scheme Designer]]
{{:clase:daw:diw:contraste_de_colores-rueda.jpg?direct|}}


Más información:
  * {{:clase:daw:diw:contraste_de_color.pdf|}}
  * [[https://www.youtube.com/shorts/YLmAsDw44a8]]

===== Botones =====

Los botones tienen 2 características:
  * Importancia: Es si queremos o no que el usuario pulse ahí. A mayor importancia es que queremos que mas veces pulse en ese botón.
  * Función: Es para decir al usuario que tipo de acción está realizando. Por ejemplo , la función "Peligrosa" es roja y nos quiere decir que tengamos cuidado al pulsar ahí.

^   ^  Importancia  ^^^
^  Función  |  Primaria  |  Secundaria  |  Terciaria  |
|  Normal  |  {{:clase:daw:diw:primary.png|}}  |  {{:clase:daw:diw:secondary.png|}}  |  {{:clase:daw:diw:tertiary.png|}}  |
|  Alternativa  |  {{:clase:daw:diw:alt-primary.png|}}  |  {{:clase:daw:diw:alt-secondary.png|}}  |  {{:clase:daw:diw:alt-tertiary.png|}}  |
|  Peligrosa  |  {{:clase:daw:diw:rojo-primary.png|}}  |  {{:clase:daw:diw:rojo-secondary.png|}}  |  {{:clase:daw:diw:rojo-tertiary.png|}}  |
 
Veamos algunos ejemplos de varios botones juntos:


^  Pagar carrito  ^  Cancelar pago  ^

  * Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
  * Cancelar pago: Terciaria Normal .  Nunca queremos que pulse ahí y es una acción normal


----


^  Pagar carrito  ^  Vaciar carrito   ^

  * Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
  * Vaciar carrito: Terciaria Peligrosa . Nunca queremos que pulse ahí y ademas es peligroso porque se queda sin los productos del carrito

----


^  Actualizar a la nueva versión de Windows  ^  Mantener tu versión de Windows   ^

  * Actualizar a la nueva versión de Windows: Primaria Peligrosa . Queremos que pulse ahí y es una acción peligrosa
  * Mantener tu versión de Windows: Secundaria Normal . No queremos que pulse ahí y es una acción normal

----

^  Donar 20€ a Wikipedia  ^  Donar 5€ a Wikipedia   ^

  * Donar 20€ a Wikipedia: Primaria Normal . Queremos que pulse ahí y es una acción normal
  * Donar 5€ a Wikipedia: Secundaria Normal . No queremos que pulse ahí y es una acción normal


<note tip>
La diferencia entre normal y peligrosa está clara, pero la diferencia entre normal y alternativa es una cuestión de estética, para resaltar un tipo sobre otro pero los dos son similares.
</note>

==== Ejemplos ====

  * **Página de Login**

{{:clase:daw:diw: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: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: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:botones-expediente.jpg?400|}}

Le da la misma importancia a seguir con el trámite que cancelarlo.

  * **Diálogo**

{{:clase:daw:diw: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 =====
Al igual que en los colores nos ceñimos a un conjunto limitado de colores, se debe hacer lo mismo con los tamaños de margenes, fuentes, etc. 

{{:clase:daw:diw:espaciado.png|}}


Veamos algunos ejemplos.

Padding o Margin:
  0px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px

Tamaño de fuente:
  12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 64px
  
Border radius:
  0px, 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.




===== Experiencia de usuario =====
La experiencia de usuario es conseguir que el usuario se sienta cómodo usando la aplicación.



  * [[https://uxmyths.com/|UX Myths]]: Mitos en la experiencia de usuario
  * [[https://www.eniun.com/usabilidad-diseno-aplicaciones-reglas-principios/|Reglas y principios de usabilidad]]: Cosas a tener en cuenta al diseñar un interfaz de usuario
  * [[https://www.markarina.com/5-ejemplos-en-los-que-la-ley-de-hick-te-ayuda-a-disenar-tu-web/|5 ejemplos en los que la ley de Hick te ayuda a diseñar tu web]]: Minimiza el Nº de opciones para el usuario
  * [[https://www.checklist.design/|Checklist Design]]: Lista de cosas a incluir en cada tipo de página.
  * 2 artículos criticando los interfaces actuales:
    * [[https://datagubbe.se/decusab/|The Decline of Usability]]: 1º Parte (2020)
    * [[https://datagubbe.se/usab2/|The Decline of Usability: Revisited]]: 2º Parte (2023)

La siguiente web está hecha para conseguir la peor  experiencia de usuario posible: [[https://userinyerface.com/|User Inyerface - A worst-practice UI experiment]]


===== Tipografías =====
{{:clase:daw:diw:serif.png?400|}}

Para fuentes grandes (títulos) que sea menor la altura de las minúsculas (x-height) y menos espaciado entre letras.
Para fuentes pequeñas que sea mayor la altura de las minúsculas (x-height) y mas espaciado entre letras.
{{:clase:daw:diw:titulo.png |}}


  * Herramienta:
    * [[https://app.typeanything.io/|Type Anything]]: Herramienta para ver como queda una página según la tipografía
    * [[https://learnui.design/tools/typography-tutorial.html#|Interactive Typography Tutorial – Learn UI Design]]
  * Diseño
    * [[http://www.mitziweb.com/blog/eleccion-fuentes-diseno-pagina-web/|Elección de las fuentes para el diseño de una página web]]
    * [[https://samuparra.com/mi-metodo-para-elegir-y-combinar-tipografias/|Mi método para elegir y combinar tipografías]]
    * [[https://universalsans.com/|Universal Sans]]: Permite diseñar de forma exacta una fuente sin serif ((Es de pago)) . Pero vale como ejemplo para ver que se puede cambiar en una fuente.

  * Fuentes en la Web
    * [[http://fontawesome.io/|Font Awesome, the iconic font and CSS toolkit]]
    * [[https://www.whatfontis.com/|Indica la fuente a partir de una foto]]
    * [[http://www.creativosonline.org/blog/10-fuentes-gratuitas-enorme-calidad.html|10 fuentes gratuitas de 8 estilos distintos de enorme calidad]]
    * [[https://www.w3schools.com/css/css3_fonts.asp|Usando fuentes descargadas en una página Web]]
    * {{:clase:daw:diw:creating_and_implementing_your_own_icon_font_a_tutorial_-_the_media_temple_blog.pdf}}: Crear tu propia fuente de iconos (([[https://mediatemple.net/blog/tips/creating-implementing-icon-font-tutorial/|Creating and Implementing Your Own Icon Font – A Tutorial]]))
    * {{:clase:daw:diw:ejemplo_fuentes.zip|}}: Ejemplo de creación de fuente con iconos y uso de fuentes descargadas

{{:clase:daw:diw:ejemplo_de_fuente.png|}}

{{:clase:daw:diw:reglas-fuente-correcta.png?600|}}

  * El tipo de la letra "a" hace que sea más formal o informal.

{{:clase:daw:diw:letra_a_estilo.png|}}

==== Peso de las fuentes ====
Enfatizar algo no es solo hacer la letra más grande sino usar una fuente con más peso (Weight)


{{:clase:daw:diw:tipo_fuente_peso.jpeg|}}


Mas información:
  * [[https://designforhackers.com/blog/papyrus-font/|In Defense of Papyrus: Avatar Uses the World’s Second-Most-Hated Font to Signal the Downfall of Civilization]]: Artículo sobre Papyrus, la fuente del título de la película Avatar, y lo que transmite
  * [[https://www.youtube.com/watch?v=2UtD2j2aDdE|"Papyrus" Ryan Gosling en SNL (subtítulos en español)]]: Sketch de humor sobre la misma fuente de Avatar
  * [[https://youtube.com/shorts/dHJqKvBLqa8|Lo que dice tu logo]]: Vídeo corto sobre lo que transmite el diseño de un logo


===== Errores típicos de diseño =====

Vídeos de [[https://www.instagram.com/jiron.design/|Roberto Jiron]] sobre errores típicos de diseño:
  * [[https://www.instagram.com/jiron.design/reel/DefoWU9oUOK/|Deja de centrar todos tus textos]] \\ {{:clase:daw:diw:jiron_centrar_texto.png?300|}}
  * [[https://www.instagram.com/jiron.design/reel/DedHRaDMz7_/|No uses botones primarios para todo]] \\ {{:clase:daw:diw:jiron_botones_primarios.png?300|}}
  * [[https://www.instagram.com/jiron.design/reel/Dek1JXksFZd/|Deja de meter botones en tu barra]] \\ {{:clase:daw:diw:jiron_barra_navegacion.png?300|}}
  * [[https://www.instagram.com/jiron.design/reel/DeiNg0Hs8LP/|Deja de diseñar cards planas]] \\ {{:clase:daw:diw:jiron_cards.png?300|}}
  * [[https://www.instagram.com/jiron.design/reel/Deafv_IJdyC/|No diseñes modales de esta manera]] \\ {{:clase:daw:diw:jiron_modales.png?300|}}


===== Formatos de imagen, audio y vídeo =====

  * Formatos de Imagenes
    * [[https://www.sitepoint.com/gif-jpg-png-whats-difference/|GIF, JPG and PNG – What’s the Difference?]]
    * [[https://jakearchibald.com/2020/avif-has-landed/|AVIF has landed]]: Formatos de imágenes con compresión
  * Formatos de Audio
    * [[https://www.emezeta.com/articulos/formatos-de-audio-todo-lo-que-deberias-saber|Formatos de audio: Todo lo que deberías saber]]
    * [[https://www.w3schools.com/html/html5_audio.asp|HTML5 Audio]]
  * Formatos de Video
    * [[https://www.emezeta.com/articulos/formatos-de-video-todo-lo-que-deberias-saber|Formatos de video: Todo lo que deberías saber]]
    * [[https://www.w3schools.com/html/html5_video.asp|HTML5 Video]]


===== Ejercicios =====



==== Ejercicio 1 ====
Busca 2 Webs e indica cuál es el color principal y cuál el color alternativo.

Haz 2 capturas de pantalla del uso del color para cada web

==== Ejercicio 2 ====
Busca una Web y indica los tipos de botones que tienen según los tipos que hemos visto en el tema. 

Haz capturas de pantalla para cada uno de los tipos que haya


==== Ejercicio 3 ====
Inventa ventanas con botones e indica el texto de cada botón, la importancia y la función

^  ^  Botón 1  ^^^   Botón 2  ^^^  Botón 3  ^^^
^  Nº Botones  ^  Texto  ^  Importancia  ^  Función  ^   Texto  ^  Importancia  ^  Función  ^   Texto  ^  Importancia  ^  Función  ^ 
^  1  |  | | |  N/A  |  N/A  |  N/A  |  N/A  |  N/A  |  N/A  |    
^  1  |  | | |  N/A  |  N/A  |  N/A  |  N/A  |  N/A  |  N/A  |
^  2  |  | | |   |    |    |  N/A  |  N/A  |  N/A  |
^  2  |  | | |    |    |   |  N/A  |  N/A  |  N/A  |
^  3  |  | | |  | | | | | |
^  3  |  | | |  | | | | | |

==== Ejercicio 4 ====
Busca 2 Webs y para cada una ellas indica como usan los siguientes conceptos:
  * Uso del espacio en blanco (Separación entre componentes)
  * Uso de paletas de colores (Usar poco colores con muchas variaciones de ellos)
  * Ancho máximo de la página
  * Indica como resaltan los importante
  * Alineación de la página
  * Uso de Labels (si se usan , si forman parte de la frase, si están desenfatizadas, )

==== Ejercicio 5 ====
Mira el siguiente artículo [[https://graffica.info/un-cambio-de-imagen-para-la-formacion-profesional-en-la-comunitat-valenciana/|Un cambio de imagen para la Formación Profesional en la Comunitat Valenciana]] y la siguiente web [[https://portal.edu.gva.es/fpvalenciana/|FP Valenciana]].

Comenta lo siguiente:
  * ¿Resultan útiles las animaciones?
  * ¿Resultan útiles los colores?
  * ¿Que está mal en el buscador?
  * ¿Cuando se usan mayúsculas?¿Es necesario?


==== Ejercicio 6 ====
Busca en varias web e indica si algunas de ellas cumple o no cumple alguno de las reglas, principios o mitos de la usabilidad (experiencia de usuario).

==== Ejercicio 7 ====
Mira la web [[https://necesitountrastero.es/|https://necesitountrastero.es/]] y critica todas aquellas cosas relativas al diseño