Building an information radiator: Part II - Front end development

<header>

 <hgroup>

 <h1>nagios</h1>

 <h2>server statuses</h2>

 </hgroup>

 <div id="nagios-box-status"></div>

</header>

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

 

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

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!