Travvik Web App example video
I wrote a web application that predicts when the next bus is coming in Ottawa.
I wanted to record how the web application works in Chrome. It uses HTML5 tags for the content, CSS3 for the style and animations, and Javascript for the countdown behaviour and GPS locator. When a bus departs, that particular bus card will disappear as the data is old. When your press "I'm feelin' lucky", the web app will query your device's GPS location and attempt to find the nearest buses within 100m of your location.
I also use CSS3 to control the layout depending on the window's resolution. That way, my HTML content remains the same and all I have to do is change the style to support mobile devices.
Unfortunately, I'm currently hot linking Google Maps images which is why the maps aren't shown.
You can see a production version of the application at http://ottawa.travvik.com