For the web project, I want to focus on the theme “health”. Because I feel the schedule of the campus life is always disturbed by project deadlines or friends hanging out. The erratic hours and poor diet is hurting the body of mine and other students. Thus, I made this web to warn people the importance of health and also encourage myself to do so with videos and functions to show the current status.
I start with making a video to explain why health is important. Since I am working on my own, i use the online resources to form a video. I also put a movie cut in it to add humor elements. I made the background music with the remixed music and my voice to explain the topic.
At first, i made a home page with four pics linked to four webs. I linked the first page to the web with the videos. The second page was linked to a web with the body mass index calculator in it. It ask the user to type in current weight and height and will return BMI number with the status, underweight, normal, underweight. The third one was about food calories. I put six photos to represent five different food types and the calorie consumption. I set a calorie number and a flag number to each pics, when the function is called it generates the calorie and use if condition to choose which content to add the calorie to. There is also a var to sum all the calorie numbers and show it on the last pic. The last pic’s function will fresh everything when called. Finally, I used <form> to build a user feedback web. Unfortunately the <mailto> code does not work.
However, this design is just simply a simple website. Suggested in the last class, I put all the webs in one and use the tabs to control my them. I use the function to hide the contents whose tabs are not selected. So it looks the tabs on the tops are presenting different contents when being clicked, like a button. The trick is that the fourth tab contains nothing, so it looks like closing the window with the content in it. I make the video as the background video, a button is put on every tab content to pause the video.
there are other suggestions, such as making the mouse into an animation. It is a pity I don’t have enough time to achieve them. What I learned from the project is that, when designing a web art, it is unwiser to focus only on the functions of the webs or even the CSS. Simple java code on making animations on the web can make it more interactive to users. Also, if I have time to improve the project, I want to change the background video according to the BMI result calculated on the web. On the whole, I am glad I can add more interactive elements before the deadline and I hope you will enjoy it.