"The Hunger Games" Website Showcases HTML5 Potential
Microsoft recently partnered with independent film studio Lionsgate to launch a Website promoting "The Hunger Games," a movie based on a book series of a post-apocalyptic North America that has sold millions of copies. The Website www.thecapitoltour.pn in Internet Explorer 9 showcases the possibilities of a World Wide Web powered by HTML5 and CSS3 by letting fans explore the Capitol, the central metropolis mentioned in the movie.
With HTML5, developers can create Websites with rich graphics, audio, and video, without requiring users to install different plugins for each type of media. This is evident instantly on The Capitol Tour, as all the animations and sounds are instantaneous. Fans can walk around the Capitol, visit the Avenue of Tributes, meet some of the characters from the book and movie, and hear a speech by President Snow.
Visitors browsing to the Website arrive just in time to see young contestants, or “tributes,” arriving to the Games on a train pulling into a futuristic station. There is smoke coming out of the train’s chimney as it pulls into the station, and sun spots appear on the screen – thanks to sun’s glare through the station’s glass ceiling. There are other touches, like a woman holding a bird cage, which is rocking back and forth, and being able to see the clouds drifting over the city’s iconic skyline.
Visitors can also enter the “control room” to view exclusive videos on the site, link their Facebook page to interact with their friends, and to view the map of the games arena that appears in the movie. When they visit the Avenue of the Tributes, they see the crowds cheering as the young contestants are sent to the arena to start the deadly game. The stars in the night sky twinkle, and discerning users will notice a constellation shaped like a giant ‘e’ for Internet Explorer.
Microsoft plans to add new features to the site, such as a training center where visitors can see competitors exercising, and a memorabilia center where artifacts and weapons mentioned in the books are on display. Site visitors will be able to view the items, rotate them, and see more information about them.
The Internet Explorer team built the site using HTML5 to show other developers what is already possible, and to encourage them to start using the Web standard instead of Flash to build the next generation of Websites. Internet Explorer 9 is designed to take advantage of new chip technologies better than the previous version of Microsoft’s Web browser, which is why these HTML5 experiments are currently limited to just IE9. Internet Explorer 10, expected with the new Windows 8 operating system, is also HTML5-compliant.
Earlier this year at the Consumer Electronics Show, Microsoft worked with ZeptoLab to create an HTML5-based desktop version of the Cut the Rope game. The game can be played for free on IE9 or any other HTML5-compatible browser at http://www.cuttherope.ie/ and has several levels not included in previous iOS or Android versions of the game. Microsoft also worked with teen star Jasmine Villegas to create an HTML5 Website which allowed fans to view her “Just a Friend” video and to interact with the video via mini-games.
Fahmida Y. Rashid is a contributing editor for Slashdot and SourceForge.
A Lap Around HTML5: HTML5 Graphics