ERDivaLook

Version 123.1 by Ravi Mendis on 2009/04/23 06:17

What is ERDivaLook?

Much like ExcelLook, that vends excel pages, Diva look generates a Web 2.0 interface for DirectToWeb.
More specifically, it generates pages that are:

  • Semantically-rich or tables-less
  • XHTML 1.0 strict compliant
  • Sans images, inline styles or presentation attributes
  • Use a CSS theme
  • Incorporates Ajax widgets & effects

Why Table-less Markup?

Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
Mostly they don't work very well on tables, if at all.
Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without.

This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite.
Like jQuery, which takes this a step further, by applying functionality via CSS selectors.
(So for jQuery it is an absolute requirement).

Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative.

What is a Diva Theme?

In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
All images, layout, colors and font information are maintained in the CSS.

All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).

Example Diva Themes:

The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.

         Neutral                                              WebObjects                                               Simple                                                                                              Organica                                                                        
           Picture 1.jpg                                Picture 2.jpg                                Picture 3.jpg                                                                     slides_directtoweb_04.jpg.jpeg                                          
 D2W Neutral look reverse engineered
as a Diva Theme 
 D2W WebObjects look reverse engineered
as a Diva Theme 
 Simple theme from css Zen Garden  Organica theme from css Zen Garden 
 Included in ERDivaLookExample                       Included in ERDivaLookExample                          Shawn Chin schin@shawnchin.net                                                        Eduardo Cesario design@criaturacreativa.com.ar                                         

The graphics designer Eduardo Cesario wrote up his experience of developing his Organica design for an early prototype of ERDivaLook on his blog.