Siguiente elemento en el proceso de diseño web 'animaciones'.
Es importante que las animaciones las hagas en este punto, una vez que tú ya tienes definido los contenedores globales, los elementos más pequeños
y los tipos de fuente, elementos más pequeños y los tipos de fuente, que ya sabes qué espacio ocupa absolutamente cada cosa que va a tener tu sitio web
porque llegado a este punto que ya si tienes todo, desde lo más grande hasta lo más pequeño, ya sabes dónde va a estar todo, con cuanta anchura, con cuanta altura.
Bueno, pues una vez que ya tienes bien definido todo el espacio que va a ocupar cada elemento, ahora tienes que diseñar las animaciones. Y ¿por qué ahora?
Porque si esto tú lo hubieras hecho antes, imaginate que antes que aparezca una cosa que se mueva y después pones el texto
y resulta que hay un texto principal que esa cosa que se mueve lo va a tapar y eso no conviene.
Entonces, las animaciones son lo último. ¿Por qué? Porque primero viene la parte funcional, la parte práctica y la parte efectiva
y después viene el hacerlo bonito y vistoso, porque si no te puedes cargar cosas que son muy importantes de la página.
Así que primero lo funcional, y ahora vienen las animaciones, las animaciones tienen varios factores como por ejemplo el tamaño de la animación,
cuando se va a producir, con cuanta velocidad, si estás haciendo una página de deportes que sea algo dinámico, algo rápido,
la animación conviene que sea así, rápida, no va a ser una animación lenta para hablar de atletismo, así que eso tienes que hacerlo con criterio.
Si es otro tipo de cosas, quizás conviene algo que sea muy suave para el usuario, para que no incomode, que sea algo transitorio
y que se note hacia donde tú quieres ir dirigiendo la atención del usuario, que sea algo intuitivo.
Puedes utilizar las animaciones para llevar a la gente a donde tu quieras, esto en código, suele utilizarse mucho con la pseudo-clase 'hover'.
Esta pseudo-clase se activa cuando el ratón se posa sobre algún elemento, ahí si van abriéndose cosas y nuevas opciones.
Te recomiendo que tengas cuidado con esta pseudo-clase. En escritorios es muy fácil porque tienes un ratón, pero en una tablet o un teléfono no se activan
por tener ratón sino hasta que tu tocas con el click, tocas con el dedo, de forma que no son tan intuitivas
porque cuando yo estoy navegando con la tablet no tengo un ratón que lo voy moviendo, lo que muevo son mis ojos
y las animaciones no se van a activar con mi movimiento ocular. Así que si tu quieres que al hacer un 'hover' aparezca algo importante, no lo hagas con el 'hover',
porque solo aparecerá en un escritorio, en tablets y teléfonos no. Seria mucha suerte que el usuario diera con el dedo justo ahí
para que se activara algo y que le diera más información, así que eso tienes que ponerlo pues 'pincha aquí si quieres más información', y de ahí se despliega
una ventana con más información, sin cambiar de ventana, sino simplemente dentro de la misma página hay más información o si quieres un movimiento eso ya es cosa tuya.
En cuanto al audio, las animaciones con audio, procura no utilizarlas porque molesta, la gente si visita a veces páginas
y aparece audio molesta, a no ser que sea algo necesario pero por norma general no pongas audio de fondo en tu página web porque te va a dar malos resultados.
En casos muy excepcionales, no se me ocurre ninguno, pues pudiera ser y si pones algún audio que sea algo muy pequeño, 2 segundos, 3 segundos, algo suave,
algo que no moleste, música así relajada muy breve de pocos segundo, sino no pongas.
Bueno pues vistas las animaciones, pasamos al siguiente punto que son los test de usabilidad.
