Kukui Cup Billboard: Frame up, visuals in, a step up from mockup!

After drawing up the mock-ups for the Kukui cup billboard, we are now ready to implement our design ideas. There were some changes regarding the mock-ups such as combining the core visualizations into one page and to have them update on top of each other instead of showing three tables which then transitions to the other visualizations.

A screen shot of our new visualization design.

For this week, I played around with css. I have not used css since learning it from ICS 101 so I did some research since I felt a little rusty. Nevertheless, my goal was to implement the rounded corners look for the visualizations. After reviewing css from w3cSchools and researching some example implementations, I felt ready to tackle this goal. My initial research yielded different approaches. Some used images of rounded corners and then render the four corners through html/css and on some with javascript. But after researching some more I learned that the css3 implemented a 'border-radius' property, that does exactly what I intend to do which is easier to implement and customize than the previous method. This was done through css via -moz-border-radius property. Since, as a group, we decided to use Firefox with the kiosk plug-in as the browser to display the billboard, this accounts to the -moz in front of the property which will only render to a Firefox browser. There is another property, -webkit-border-radius, which does the same rounded corners for Safari browsers.

Here is a screen-shot of the rounded corners implementation with some gradient added to the header.

Lastly, I also tried to implement the ticker tape. The ticker tape is fed from the updates students submit such as commitments. Since Ed found a very good implementation of this function, http://www.mioplanet.com/rsc/newsticker_javascript.htm, I simply implemented their script to our billboard. What I like about this implementation besides its simplicity is that I can use css to apply the appropriate styles it requires to suit the look of our billboard.

To see my implementation of the rounded corners, ticker tape and Jarret's updating visualization, click here.
Our project hosting site can be accessed here.