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 Próxima revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema01 [2021/09/21 17:49] admin [Normas y estilos de diseño] |
clase:daw:diw:1eval:tema01 [2023/01/19 13:22] admin [Normas y estilos de diseño] |
||
---|---|---|---|
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:// | ||
* Usabilidad en base a los estilos de los iconos: | * Usabilidad en base a los estilos de los iconos: | ||
* {{ : | * {{ : | ||
Línea 60: | Línea 63: | ||
Para crear variaciones de un color usa: | Para crear variaciones de un color usa: | ||
+ | |||
+ | * [[https:// | ||
+ | * [[https:// | ||
* [[https:// | * [[https:// | ||
- | * [[https:// | ||
* Paletas de colores de [[https:// | * Paletas de colores de [[https:// | ||
* [[https:// | * [[https:// | ||
Línea 72: | Línea 77: | ||
Para crear el color alternativo usa: | Para crear el color alternativo usa: | ||
* [[https:// | * [[https:// | ||
+ | |||
+ | ===== La luz viene del cielo ===== | ||
+ | Las cosas que están " | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Mas informacion: | ||
+ | * [[https:// | ||
+ | * {{: | ||
+ | |||
+ | ===== Contraste de colores ===== | ||
+ | Al hacer un interfaz de usuario, jugar con dos colores que hagan contraste. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | * En la siguiente imagen se pueden ver la rueda de colores que hacen contraste y se pueden generar en [[https:// | ||
+ | {{: | ||
+ | Más información: | ||
+ | * {{: | ||
===== Botones ===== | ===== Botones ===== | ||
Línea 127: | Línea 151: | ||
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 189: | Línea 213: | ||
==== 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 207: | Línea 241: | ||
* 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:// | ||