Kennis Blogs Building an information radiator: Part II - Front end development

Building an information radiator: Part II - Front end development

In my previous post I gave an introduction to Walle, Avisi's information radiator. After making some high-level design decisions we started focussing on developing the front-end. When we got the final version of the visual design, it appeared that HTML5, CSS3, jQuery and websockets could make it work. This post shows some highlights of the HTML5 and CSS3 features we used.


The new HTML specification has several advantages, amongst which the improved semantics, so we used some of the new tags:

<h2>server statuses</h2>
<div id="nagios-box-status"></div>

<time id="calendar-header">
<span id="current-week">...</span>
<span id="current-date">...</span>


Improved semantics means that tags actually do what their name says. Instead of having several nested div elements we used the new header and hgroup tags to say that this specific div element is in fact a header. We also used the new time tag to say that a specific value in fact is a time, which can offer user agents to add birthday reminders or scheduled events to the calendar.



CSS3 supports Open Type Fonts (OTF). Using a few lines you can use other fonts than Arial and Verdana for a change:

@font-face { font-family: kozuma; font-weight: 900; src: url("../../../fonts/KozGoPro-Bold.otf"); }
@font-face { font-family: kozuma; font-weight: bold; src: url("../../../fonts/KozGoPro-Medium.otf"); }
@font-face { font-family: kozuma; font-weight: normal; src: url("../../../fonts/KozGoPro-Regular.otf"); }

We also stopped using pictures for rounded corners and added some shadowing:

.box {
float: left;

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

border: 1px solid #2F2F2F;
-moz-box-shadow: inset -1px -1px 10px 1px #000;
-webkit-box-shadow: inset -1px -1px 10px 1px #000;
box-shadow: inset -1px -1px 10px 1px #000;

So far for using these new web standards (or wanna-be standards), the next part (Part III - Back end development: Spring Roo and WebSockets) will focus on the back end (built with Spring Roo) and communication with the back end using websockets.
Stay tuned for the upcoming post about websockets!