Wiki source code of ERDivaLook
Version 221.1 by Ravi Mendis on 2009/04/28 06:20
Hide last authors
author | version | line-number | content |
---|---|---|---|
![]() |
217.1 | 1 | == What is ERDivaLook? == |
![]() |
84.1 | 2 | |
3 | Much like ExcelLook, that vends excel pages, Diva look generates a Web 2.0 interface for DirectToWeb. | ||
4 | More specifically, it generates pages that are: | ||
5 | |||
6 | * Semantically-rich or **tables-less** | ||
![]() |
95.1 | 7 | * XHTML 1.0 strict compliant |
![]() |
84.1 | 8 | * Sans images, inline styles or presentation attributes |
![]() |
105.1 | 9 | |
![]() |
205.1 | 10 | They make use of: |
11 | |||
![]() |
221.1 | 12 | * A CSS **theme** |
![]() |
205.1 | 13 | * Scriptaculous **effects** |
![]() |
219.1 | 14 | * Ajax **widgets** |
![]() |
205.1 | 15 | |
![]() |
105.1 | 16 | = Why Table-less Markup? = |
17 | |||
18 | Scriptaculous, jQuery effects, etc work by manipulating CSS attributes. | ||
19 | Mostly they don't work very well on tables, if at all. | ||
20 | Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without. | ||
21 | |||
22 | This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite. | ||
23 | Like jQuery, which takes this a step further, by applying functionality via CSS selectors. | ||
24 | (So for jQuery it is an absolute requirement). | ||
![]() |
109.1 | 25 | |
26 | Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative. | ||
27 | |||
28 | === What is a Diva Theme? === | ||
29 | |||
![]() |
135.1 | 30 | In ERDivaLook, or Diva for short, your application is not complete without a CSS theme. |
![]() |
109.1 | 31 | All images, layout, colors and font information are maintained in the CSS. |
32 | |||
33 | All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules). | ||
34 | |||
![]() |
121.1 | 35 | ===== Example Diva Themes: ===== |
![]() |
109.1 | 36 | |
![]() |
123.1 | 37 | The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app. |
38 | |||
![]() |
119.1 | 39 | |= Neutral |= WebObjects |= Simple |= Organica |
![]() |
139.1 | 40 | | [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]] |
![]() |
109.1 | 41 | | D2W Neutral look reverse engineered |
42 | as a Diva Theme | D2W WebObjects look reverse engineered | ||
![]() |
119.1 | 43 | as a Diva Theme | [[//Simple//>>http://www.csszengarden.com/?cssfile=/174/174.css&page=2]] theme from css Zen Garden | [[//Organica//>>http://www.csszengarden.com/?cssfile=/188/188.css&page=0]] theme from css Zen Garden |
44 | | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]] | ||
![]() |
123.1 | 45 | |
46 | The graphics designer Eduardo Cesario wrote up his experience of developing his //Organica// design for an early prototype of ERDivaLook on his [[blog>>http://www.organicacreativa.com/organica-creativa.php?area=directtoweb&lang=en]]. | ||
![]() |
149.1 | 47 | |
![]() |
217.1 | 48 | = How to use ERDivaLook = |
![]() |
149.1 | 49 | |
![]() |
205.1 | 50 | {{children all="true"}}{{/children}} |