Computing stuff tied to the physical world

Dabbling in HTML5 + CSS3

In Software on Oct 3, 2011 at 00:01

(Small change of plans, the continuation of yesterday’s post has been postponed to tomorrow)

I’ve been tipping my toes a bit in the waters of HTML5 + CSS3. Nothing spectacular, but here’s what came out:

Screen Shot 2011 10 02 at 22 59 24

Small “widgets” to display home readings on a web page (it’s in Dutch… but you can probably guess most of it).

There are no colors in here yet, but hey… just visit a site such as the Color Scheme Designer to fix that.

Here are the CSS styles I used:

Screen Shot 2011 10 02 at 22 20 27

And here is the funky code I used to generate the HTML for this in JeeMon:

Screen Shot 2011 10 02 at 22 20 59

It’s still a bit awkward to generate elements which need to be combined inline, i.e. <span> elements.

To see the actual generated HTML, use your browser to check the page source of the new Widgets page at http://jeelabs.org/tools/. To examine the entire file needed to generate this from JeeMon, click on this link.

For actual use, all I’ll need to change is: 1) generate the HTML with $blah Tcl variables, or 2) use JavaScript on the browser to fill in the values (driven by Server Sent Events, for example). The latter avoids page refreshes.

The separation of content, structure, and style has come a long way since the early days of HTML. It just feels right, the way this works out. Applications can be written with nearly complete independence between, eh… “looks” and “guts”. Even complete page make-overs which are well beyond the positioning capabilities of CSS can be taken care of with basic templating on the server side. It’s interesting that the elaborate and efficient templating “engines” which used to drive dynamic websites and which are still used in many frameworks are becoming irrelevant. With a bit of JavaScript smarts on the client side, the server now only needs to serve static files plus JSON data for REST-style Ajax calls. The good news for embedded home automation systems, is that very low-end servers may well turn out to be sufficient, even for sophisticated web presentations.

As I said, nothing spectacular, but I’m delighted to see how simple and cleanly-structured all this has become.

  1. Nice Widgets. I like the spacing of the information, a whole art for itself.

    To give the widgets some notion of time I propose to add Sparklines as described by Edward Tufte! And therefore I had already some experiences with http://omnipotent.net/jquery.sparkline/ …

    loomi 3 October 2011 at 11am

  2. Nice. But i must have missed something central. You say you generate server side code with Tcl. Huh? I used to write Tcl for a living a bunch of yesteryears ago, and i totally fell in love with the Tcl web server (http://www.tcl.tk/software/tclhttpd/) which we unfortunately didn’t use at work.

    Oh this brings back fond memories. I feel the strange urge to code Tcl again!

    llaurén 3 October 2011 at 1pm

  3. Good lord! There’s anotehr Tcl person in this universe! I was not expecting that :)

    And i shall have a look at Wibble. Any quick thoughts on why Wibble is good/fun/useful? I remember that TclHttpd was fun because you could code responses in pure Tcl instead of just serving HTML pages with bits of Tcl thrown in. That combined with some html package made TclHttpd a fun little puppy to play with.

    llaurén 4 October 2011 at 1pm

Comments are closed.