Skip to Content

Changes for page ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
From version 92.1
edited by Ravi Mendis
on 2009/10/03 20:18
Change comment: There is no comment for this version
To version 103.1
edited by Ravi Mendis
on 2009/04/23 02:22
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,4 +1,4 @@
1 -== What is Div#a Look? ==
1 +=== What is ERDivaLook? ===
2 2  
3 3  Much like ExcelLook, that vends excel pages, Diva look generates a Web 2.0 interface for DirectToWeb.
4 4  More specifically, it generates pages that are:
... ... @@ -6,85 +6,4 @@
6 6  * Semantically-rich or **tables-less**
7 7  * XHTML 1.0 strict compliant
8 8  * Sans images, inline styles or presentation attributes
9 -
10 -They make use of:
11 -
12 -* CSS **themes**
13 -* Scriptaculous **effects**
14 -* Javascript **widgets**
15 -* **Ajax**
16 -
17 -== Why Table-less Markup? ==
18 -
19 -Scriptaculous, jQuery effects, etc work by manipulating CSS attributes.
20 -Mostly they don't work very well on tables, if at all.
21 -Furthermore, the more sophisticated widgets (like accordions) make use of effects and so don't function as they should without.
22 -
23 -This is even more true for unobtrusive javascript for which table-less markup is usually a prerequisite.
24 -Like jQuery, which takes this a step further, by applying functionality via CSS selectors.
25 -(So for jQuery it is an absolute requirement).
26 -
27 -Therefore, if you are developing a Web 2.0/Ajax UI, the transition to table-less markup is an imperative.
28 -
29 -=== What is a Diva Theme? ===
30 -
31 -In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
32 -All images, layout, colors and font information are maintained in the CSS.
33 -
34 -All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
35 -
36 -**Examples:**
37 -
38 -|= Neutral |= WebObjects |= Simple |= Organica
39 -| [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
40 -| D2W Neutral look reverse engineered
41 -as a Diva Theme | D2W WebObjects look reverse engineered
42 -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
43 -| //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
44 -
45 -The above are a sample of themes for Diva look. The first two are included in the ##Wonder/Examples/Ajax/ERDivaLookExample## app.
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/directtoweb-mutation/]].
47 -
48 -== HowTos ==
49 -
50 -{{children all="true"}}{{/children}}
51 -
52 -== Features ==
53 -
54 -=== 1. CSS Themes ===
55 -
56 -CSS theme you give your application is **fully-customizable**.
57 -However, Diva lacks CSS theming tools (such as jQuery ThemeRoller).
58 -
59 -Instead, the CSS themes need to be hand-rolled.
60 -
61 -=== 2. Scriptaculous Effects ===
62 -
63 -The effects library used for ERDivaLook is Wonder's choice - Scriptaculous.
64 -
65 -=== 3. Javascript Widgets ===
66 -
67 -The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family.
68 -
69 -=== 4. Well-Formed Semantic Markup ===
70 -
71 -The pages produced by Diva look will validate as (almost) XHTML strict. Features of the DOM:
72 -
73 -* Unique IDs for elements
74 -* Unique form control names
75 -* Use of multiple CSS classes
76 -* Table-less markup (except for tabular data)
77 -
78 -=== 5. Ajax Page Configurations ===
79 -
80 -Prototype provides the Ajax functionality in Diva in the form of [[ERPrototaculous>>ERPrototaculous]].
81 -Diva look introduces the concept of **Ajax pageConfigs**.
82 -Example page configurations:
83 -
84 -* ##AjaxQueryMovie##
85 -* ##AjaxEditStudio##
86 -* ##AjaxListTalent##
87 -
88 -=== 6. Dynamic D2W ===
89 -
90 -Ajax + //delayed// D2W rules = [[dynamic D2W>>How to use Dynamic D2W]].
9 +* Require a CSS **theme**