CSS Blue prints

Today let's talk about something lighter than code, numbers, database. Let's talk about CSS and page layout.

The page layout normally is a pain even to web designers with a lot of experience, imagine for the poor developers worried about their code. But there is some CSS frameworks around the web that could be used to reduce quite a lot the effort to create a prototype or even the final page layout.

As you need to have a good foundation at Java to use any Web framework around, you should have a good foundation at CSS and page layout to use those kinds of framework. The good point is that even if it is not your case you can still use those frameworks as a start point to learn about it.

One of those CSS frameworks is the Blueprintcss:

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

First we need to understand what is a CSS framework. Let me say that it is not: it is not a magic box that everything renders magically, it is not a code generator for CSS, it is not a component that you plug into you HTML page and the page is rendered automatically. A CSS framework is just a pattern that you should follow to develop your web page, elements and CSS styles, and provide the foundation for a fine and consistent layout.

The first step of those CSS frameworks is to define how the elements will be displayed into the page. Blueprint, as many other CSS frameworks, divides the page in fix size columns which are used to place the component elements. For an example: imagine that you divide your page in 24 columns of 10 pixels each. You can say like, my header will be a box that will take over 24 columns, my left menu is a box that takes over 10 columns and at the side of it my body will take over 14 columns. So basically with this kind of layout style you just need to create boxes and say how much columns does it takes.

As this column division is not produced using tables but using divs and styles to make it as big and the amount of columns that you expect, you will end up with a tableless layout too.

The second characteristic of the Blueprint is to define the fonts, there is a basic set of fonts to guarantee that you page looks like the same in all the browsers. Not that it is not just the font familt, but also the size, space and etc.
And finally it provides you with a set of other styles that can be applied to your forms, tables and so on.

There is much more there so far I recommend you to take a look at this example (you will understand much better how the column layouts work): A Closer Look At the Blueprint CSS Framework.

Using those kinds of frameworks (Blueprint is not the only one) is a good step to simplify the page layout, but it for sure do not replace a good layout and user interface analysis. Take a look, you may not use the framework, but I am quite sure that you can take some ideas over there.

For those that wants to go further the project wiki page as really good material: http://wiki.github.com/joshuaclayton/blueprint-css/.

And as usual the sidekick, today I recomend the song Ya no sé qué hacer conmigo, from the Uruguayan band Cuarteto de Nos.

Let's calculate

Everyone knows that float point numbers are far from been precise. In fact they are as precise as any other number, the problem is that they work in a different base (2 instead of 10).

Let's take an example to illustrate that: the number 0.01, it is a quite simple and clear number in base 10 notation. Now let's add to it 0.09, which is the expected result? 0.1 right? Well doing it using floating point numbers we will get: 0.09999999999999999.

But why? We it is because altough 0.01 and 0.09 can be easily represented in a base 10 notation it doesn't have a real representation in the base 2 notation. It is something like 1/3 it is 0.3333334, the same with those number. What we have at the end is a periodic number, which is rounded to provided the expected number, but when we do a calculation this number cannot be rounded anymore.

Basic stuff, and I guess everyone faced it before, expecting the right result is the same of someone (yes it is a true story) that wants to divide the 100% by 3 and sum it back and expect to have 100%. Well it is not going to happen, 100% by 3 is 33,333333% and it sum back is 99,99999999%.

Sure that there is nice ways to work around this problem, in most of the languages. But all this introduction is to say about this ways, it is just to present a really nice calculation component/program that you can use in your Java programs: Frink.

"Frink is a practical calculating tool and programming language designed to make physical calculations simple, to help ensure that answers come out right, and to make a tool that's really useful in the real world. It tracks units of measure (feet, meters, kilograms, watts, etc.) through all calculations, allowing you to mix units of measure transparently, and helps you easily verify that your answers make sense. It also contains a large data file of physical quantities, freeing you from having to look them up, and freeing you to make effortless calculations without getting bogged down in the mechanics."

You can use it to calculation with the right precision your nice mathematical stuffs (no more error in 0.01 + 0.09), but you can do even more with that. You can virtually convert any unit to any unit.
The possible calculations goes from the normal phisical stuffs like, energy to temperature to crazy examples like how much time Superman should recharge his energies at the Sun to save Lois Lane and some kids, or even further how much weight Lois should loose to help Superman saving some kids (check the examples here).

Take a look at the main website, it worths and can be really helpfull for you, when you need to do some nice calculation in your application.

And finally for those that want to go further in floating point theory: What Every Computer Scientist Should Know About Floating-Point Arithmetic.


A good sidekick for this post is The Magic Numbers - Forever Lost.

Enjoy it ;-)

Apache Pivot and news

It has been a while since the last post. Unfortunetely the time is still short to continues with the DOD posts, in this meanwhile I will talk with a relatively new Apache project: Pivot.

As stated in the project main page the purpose of Pivot is to:

Building rich internet applications (RIA) in Java by combining the enhanced productivity and usability features of a modern RIA toolkit with the robustness of the Java platform.

The first issue that should be clarified, it is not a HTML+CSS+Javascript solution like ExtJs or JQueryUI or any other framework around. It is in fact a framework for build application in the old and good JVM.
It means that to run this RIA application you still need the Applet (or webstart), a JVM in client and all the stuff for this kind of application.

The first question is: so not why Swing? First of all the Pivot UI classes provide a lighter implementation than Swing, something like Thinlet. All the UI elements are rendered using Java2D and it also provide some nice effects (over the tradicional Swing).

On the top of it the interface can be created with a declarative language, so you don't need to use that huge amount of code. They have choosen to use the WTKX, which is a XML that you can specify the interface (acording to the project website: "A nice and open XML for declaring graphical user interfaces in Java"). This fact is already a great advantage over Swing.

And finally why RIA? Is it not just another UI framework. Well in fact no, it also comes with a set of classes and libraries that makes the comunication with a webserver much easier, thinks like http calls, web service integration and so on.

I think it as a good alternative for traditional Swing app, maybe not just for RIA application, even for your Java desktop app. Such kind of integration with the webservices is really usefull.

What I still miss there is a better way to deploy your application over the web. Using applets and webstart is still a pain.

By the way, before saying see you next time, I would like to introduce a new session in the posts, a part that can be used even if the post is really boring or not usefull at all. For example, tip for a song, movie, a cake receipt, a joke, whatever. Today I will go for a music, so...

A good sidekick for this post is Dropkick Murphys - Johnny, I Hardly Knew Ya.