Brief.
The brief for this project was to create a flashy website utilising many of the new features available in html5. In order to achieve this we have created a child’s dinosaur information website with a ‘top trumps’ style interactive experience, and other fun activities, that are flashy, fun and meaningful.
Introduction.
It was after heavily researching all the available elements new in html 5 we decided that making a fun interactive website aimed at children would be the best way to incorporate as many elements as possible. We picked the theme of dinosaurs, as its topic children are generally interested in at that age.
We mocked up the example below to illustrate the overall look and feel we hoped to accomplish with the final product.
How we went about it.
With a concept image of our idea to work from, it made it easier to focus on what elements of HTML 5 we were going to need.
In relation to the brief and the target audience of which we chose children, the website was to be made as ‘flashy’ as possible.
To start with we used Adobe illustrator to create background and dinosaur images that appeal to children. The main background image is simply set as this simply in the document.
HTML5 allows for audio and video to be incorporated in a much easier fashion.
The background music is played using the new ‘audio’ tag which is auto played when the website first loads up, and the 3D video is played using the ‘video’ tag and styled using JavaScript.
To give the user a more personal experience we included the use of local storage, so that the website would remember the users name and how many times they had visited the site to create a basic user profile.
We have used the new canvas elements to display graphics multiple times. First of all to create the top trumps at the bottom, to draw the Dino cards to the page. Secondly we used it to draw the dinosaur stickers to the scene creation game. The images are scalable and moveable due to JavaScript.
We have used time and date time tags in the basic information about dinosaurs to create a site that is in tune with the idea of the semantic web. By giving certain parts of the information e.g. 100 million years ago, these tags it allows the text to conform to the ideologies of the semantic web.
Finally we used meter tags to provide a rating system for each dinosaur card. Aside from the aesthetic purpose we included meter tags due to the fact it enables the data to be semantic.
Final product.
Our final product demonstrates a wide variety of elements available with the release of html5. The information on the website could be further expanded but this is a good example of how the site works. There is an ever-growing list of elements available in html5, but if we were to utilise them all, it would be to the final sites detriment.
Link to project
www.busy-signal.co.uk/DinoData.html
Our final product is available by clicking here. While it can be viewed in safari it is best viewed in Google chrome so that all the elements can be utilised.
