| Name | Rosaria |
| Last Name | Marraffino |
| Exercise n° | 6 |
| Date | 26/01/2020 |
| Volée | Zelda |
The application is inscribed in the same theme I chose to develop for all my previous exercises. The page is therefore aimed at people interested in knowing more abour UX design and ergonomics, and especially for those interested in designing for colour-blind people. The "Glossary" application serves therefore as an introduction to the subjects of UX design and ergonomics and it lays the basis for the others concepts, accessible through tabs on the same page. This helps them to easily find (or come back to) the information their more interested in.
The page is composed of two sections: a brief introductions and the glossary, where the definitions are accessible by hovering with the mouse over the images. The single images are part of a larger image that has been cropped in 9 parts. At the bottom of the page, a button allows to go back to top. This is mainly useful in the third tab ("Bonnes pratiques"), as the text is quite long.
I chose to use the imagehover animation because it seemed to me the best and more elegant solution for a glossary page, instead of having a simple list of terms.
The structure of the page is relatively simple and the application is responsive, as it is developed using Bootstrap.
I had gathered the conceptual information and also crated or modified the images for the previous exercises.For the code I followed the explanation on the EduTech Wiki pages for the exercise and the libraries websites. The development of the application was easy enough, and I spent most of the time for the page layout.
A link to the js code and the CSS are available above in this page.
The application does what is supposed to do and that is a strong point. I didn’t have particular problems in developing the application.
I chose to use Boostrap mainly because for my previous exercises I struggled to make responsive pages and I was therefore interested in learning how to use this framework. Due to the fact that Bootstrap is a well known and largely used library, the documentation available was very rich and exaustive.
For the CSS animation I used imagehover.css because it seemed well mantained and up-to-date. I wasn't sure which Javascript animation to use so as to have it consistent with the style of the page, therefore I used a simple "Back to top" option.