THON 2011 Live Feed & Timeline
For The Daily Collegian
Published: February 18, 2011
Hours: 36
Technologies Used:
- AJAX
- ASP.NET/C#
- Javascript
- Mootools
- SVG (via Raphael)
- SQL
This piece represents my first significant non-Flash effort, and it turned out very well. For THON 2011, an 46-hour event which we cover live, we needed a way to display all of our content (articles, blogs, photos, multimedia, twitter) in a manageable fashion. I proposed a facebook-style news feed, pulling in all of our content and labeling it with icons, combined with a timeline which allowed readers to scroll back through our content. In addition, I really wanted to use AJAX to allow users to simply leave our homepage up and receive updates. To reduce the delay between posting content and it appearing in the user's feed, I opted for very frequent updates, which required an extensive amount of back-end optimization to keep the server's speed under control. Every ten seconds, the server pulls in content from three databases and generates HTML code, then stores it in another database. The user's live-feed component then polls a lightweight handler every 10 seconds, which simply spits out the content of this intermediate database. The performance ended up being very reasonable.
For the timeline, I wanted to avoid using Flash, simply because I'm trying to keep Flash off of our index pages whenever possible. I settled upon using a library known as Raphael, which is a wrapper for SVG and VML, dynamically rendering your content in one or the other depending on which browser you are using.