Friday, September 12, 2008

Implementation of CruiseControl.rb and RCov

CruiseControl.rb is Ruby based continuous integration tool which is used for continuous build process including testing, email notification. Also provide the details of all build.

On the other hand, RCov is very well known code coverage tool for Ruby. It is used to get the information of test coverage.

These two tools are so good together and their implementation is incredibly simple which is describe below:

Download: Click here to download. After completing the download unpack it.

Add project: Go to the unpacked directory from command prompt and execute following command:
cruise add <project-name> --url <project-url>.
This will create a directory under cruise data, then checks out your project to ./cruise/projects/<project name>/work/

Start Cruise: Execute command: cruise start. It will run your CrouiseControl on port 3333. Browse - http://localhost:3333/. If everything is going well, you will see the the CruiseControl dashboard with project list. You can build your project and see the build report.

Create database: You have to create test database and edit database.yml to connect with database, performing rake RAILS_ENV=test db:migrate, running rake test and making sure that it passes.

Install rails_rcov: Install RCov gem to CruiseControl server by using gem install RCov and plugin to project folder by using following command:
 ruby script/plugin install http://svn.codahale.com/rails_rcov
Add rake task: If you installed the plugin into your project you have some useful rake tasks. Now you have to add “cruise.rake” task to the “lib/tasks” directory of your Ruby on Rails project with following:
desc 'Continuous build target'
task :cruise do
out = ENV['CC_BUILD_ARTIFACTS']
mkdir_p out unless File.directory? out if out

ENV['SHOW_ONLY'] = 'models,lib,helpers'
Rake::Task["test:units:rcov"].invoke
mv 'coverage/units', "#{out}/unit test coverage" if out

ENV['SHOW_ONLY'] = 'controllers'
Rake::Task["test:functionals:rcov"].invoke
mv 'coverage/functionals',"#{out}/functional test coverage" if out

Rake::Task["test:integration"].invoke
end
That’s all, now your project has code coverage. You can browse the source within the browser from dashboard and see which lines are covered and which are not. Enjoy!!

Update:
It was written on September 2008. Please click here to read documentation by thoughtworks.com

Thursday, September 11, 2008

Liquid design : Importance and Considerations

The term "liquid" implies that a Website should flow smoothly into whatever space it is given. If you use a high resolution monitor, this may mean that you need to re-size your browser a little, which most people in that situation do. If you have a low resolution monitor, you will still see the information, it will just be a little more compact.

If you do Liquid Design right, you should be able to make your pages display on almost anything and still make sense to the user.

Not everyone has perfect vision, and many of your potential customers may indeed be blind. If you build your site using relative font units and percentage based widths for common elements, you'll already be making life a lot easier for a portion of your visitors. Maybe even many of them.


Importance of 'liquid design' in creating web design
The goal of liquid design is providing similar experience to people and eliminate possible irritating design flaws such as too much white space, disappearance of certain sectors of information due to lack of space etc.

Resolution statistics and interpretation
A web designer's task is to predict the available space the web site can use to display. One must consider first of all what the web site's target audience is. For example, people who work with computers every day (programmers, other designers etc) often like to have a "bigger picture" of things hence they are more likely to have high resolutions - 1024x768 or even higher. People who access the Internet from universities or educational institutes are likely to use older computers and may use 480x640 or 600x800 resolutions.

Recent statistics show that most people use 1024x768 resolutions (nearly 44%) and 600x800 resolutions (50%). Until recently, the number of those who used 1024x768 resolutions was much lower, while 480x640 resolution was the preferred resolution by users. As technology evolves, the percentages change. Nowadays, web designers have started designing for the 600x800 and above.

The effective screen space is smaller than the actual number of pixels (e.g. width of 800 pixels and height of 600 pixels for 600x800 resolutions). The reason is that people use up space by adding toolbars and different additional buttons to their browser window. For example, when designing for a 600x800 resolution the web designer should in fact design for 409x741 (width of 741 pixels and height of 409 pixels) although this is not fail-proof for every situation.

The secret of liquid layouts
  • work out a basic layout grid before you begin coding
  • include gutters so that your columns will not spread too wide
  • use percentage units for widths of all containers and gutters
  • do not define containers that use the full width of a page - allow for browser rendering issues (such as percentage rounding)

Liquid Design: Can it be Done?
Yes, without a doubt! Fixed layouts are slowly becoming a thing of the past. And the principles and considerations involved in creating a liquid layout (rather than a fixed layout) are very easy to implement on your site.

However, the whole liquid idea does require a shift of focus. Stop thinking of the Web as a medium you can control, stop thinking for your users, and you'll be happier, your visitors will be happier, and the Web will be just a little more pleasant for everyone.

Is liquid design adequate for any web site?
In order to make a decision whether liquid design is suitable for a web site, factors such as type of content, structure, amount of information must be taken in consideration. Liquid design is ideal for sites with a lot of information. The elasticity of such sites increases readability.

Pros and Cons of Liquid design..
Pros: The major benefit of a liquid design is that the layout will adjust to fill a variety of resolutions. You can create a site that will work well at both low and high resolutions without all the empty space outside of the design. A liquid layout with it’s use of ‘em’ or percents instead of pixels will be more accessible to viewers with poor eyesight as they can more easily resize the text. It can also be easier to fit all of your content into the design for those viewers with higher resolution monitors.

Cons: A liquid design does have it’s drawbacks though .... It is time consuming. You do lose a certain amount of control over how everything will look and some of the empty space of a fixed design will work it’s way internally into the liquid design. There is also the issue of line length growing to wide which will make you text difficult to read. Using max-width is an option for browsers outside of Internet Explorer. IE will need it’s own workaround to keep your lines of text from becoming too wide. A liquid layout can often be more difficult and time consuming to develop and test.

Click here to download sample application on liquid design.