Herramientas de usuario
clase:daw:diw:1eval:tema01
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
clase:daw:diw:1eval:tema01 [2022/01/09 18:13] admin [Contraste de colores] |
clase:daw:diw:1eval:tema01 [2024/02/04 23:04] (actual) admin [Colores] |
||
|---|---|---|---|
| Línea 9: | Línea 9: | ||
| * Haz que las cosas estén alineadas a una recta imaginaria que va de arriba a abajo. | * Haz que las cosas estén alineadas a una recta imaginaria que va de arriba a abajo. | ||
| * Resalta lo importante | * 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 " | * Evita usar label o captions. Si ves " | ||
| * 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. | * 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-radious) | * Las esquinas cuadradas indican seriedad. Las Esquinas muy muy redondeadas son muy informales.(border-radious) | ||
| - | * Para enfatizar en vez de un mayor tamaño de letra, usa negrita. Pero para desenfatizar, | + | * Para enfatizar en vez de un mayor tamaño de letra, usa negrita. Pero para desenfatizar, |
| * Nunca usar un carrusel. [[https:// | * Nunca usar un carrusel. [[https:// | ||
| Línea 25: | Línea 26: | ||
| * [[https:// | * [[https:// | ||
| * [[https:// | * [[https:// | ||
| + | * {{ : | ||
| * [[https:// | * [[https:// | ||
| * {{ : | * {{ : | ||
| * [[https:// | * [[https:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | |||
| * Usabilidad en base a los estilos de los iconos: | * Usabilidad en base a los estilos de los iconos: | ||
| * {{ : | * {{ : | ||
| Línea 60: | Línea 67: | ||
| Para crear variaciones de un color usa: | Para crear variaciones de un color usa: | ||
| + | |||
| + | * [[https:// | ||
| + | * [[https:// | ||
| * [[https:// | * [[https:// | ||
| - | * [[https://logongas.github.io/color-schemes-generator|Color Scheme Generator]] | + | * [[https://colorcolor.in/|colorxcolor]]:Permite ajustar las curvas de saturación y luminosidad. |
| * Paletas de colores de [[https:// | * Paletas de colores de [[https:// | ||
| * [[https:// | * [[https:// | ||
| Línea 143: | Línea 153: | ||
| ===== Sistema de tamaños ===== | ===== 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. Veamos algunos ejemplos. | + | 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. |
| + | |||
| + | {{: | ||
| + | |||
| + | |||
| + | Veamos algunos ejemplos. | ||
| Padding o Margin: | Padding o Margin: | ||
| - | 0px, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px | + | 0px, 4px, 6x, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px |
| Tamaño de fuente: | Tamaño de fuente: | ||
| Línea 168: | Línea 183: | ||
| * [[https:// | * [[https:// | ||
| * [[https:// | * [[https:// | ||
| + | * 2 artículos criticando los interfaces actuales: | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| La siguiente web está hecha para conseguir la peor experiencia de usuario posible: [[https:// | La siguiente web está hecha para conseguir la peor experiencia de usuario posible: [[https:// | ||
| + | |||
| + | ===== IA y diseño ===== | ||
| + | |||
| + | * [[https:// | ||
| + | |||
| ===== Ejercicios ===== | ===== Ejercicios ===== | ||
| Línea 208: | Línea 231: | ||
| ==== Ejercicio 5 ==== | ==== Ejercicio 5 ==== | ||
| + | Mira el siguiente artículo [[https:// | ||
| + | |||
| + | Comenta lo siguiente: | ||
| + | * ¿Resultan útiles las animaciones? | ||
| + | * ¿Resultan útiles los colores? | ||
| + | * ¿Que está mal en el buscador? | ||
| + | * ¿Cuando se usan mayúsculas? | ||
| + | |||
| + | |||
| + | ==== Ejercicio 6 ==== | ||
| Crea un sistema de tamaños creando varias clases CSS para las siguientes propiedades: | Crea un sistema de tamaños creando varias clases CSS para las siguientes propiedades: | ||
| * margin-top | * margin-top | ||
| Línea 226: | Línea 259: | ||
| * color | * color | ||
| * background-color | * background-color | ||
| - | ==== Ejercicio | + | ==== Ejercicio |
| 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). | 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 | + | ==== Ejercicio |
| Crea la siguiente página web [[https:// | Crea la siguiente página web [[https:// | ||
clase/daw/diw/1eval/tema01.1641748412.txt.gz · Última modificación: 2022/01/09 18:13 por admin
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
