Wiki source code of ERDivaLook
Version 264.1 by Ravi Mendis on 2010/09/10 01:14
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
227.1 | 1 | == What is Div#a Look? == |
| |
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 | |||
| |
264.1 | 6 | * **Tablesless** or use [[Semantic markup>>http://en.wikipedia.org/wiki/Semantic_HTML]] |
| |
261.1 | 7 | * (x)HTML5 compliant |
| |
84.1 | 8 | * Sans images, inline styles or presentation attributes |
| |
105.1 | 9 | |
| |
205.1 | 10 | They make use of: |
| 11 | |||
| |
227.1 | 12 | * CSS **themes** |
| |
205.1 | 13 | * Scriptaculous **effects** |
| |
227.1 | 14 | * Javascript **widgets** |
| |
261.1 | 15 | * **Ajax** |
| |
205.1 | 16 | |
| |
261.1 | 17 | == Why Table-less Markup? == |
| |
105.1 | 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). | ||
| |
109.1 | 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 | |||
| |
135.1 | 31 | In ERDivaLook, or Diva for short, your application is not complete without a CSS theme. |
| |
109.1 | 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 | |||
| |
261.1 | 36 | **Examples:** |
| |
109.1 | 37 | |
| |
263.1 | 38 | |= Neutral |= WebObjects |= Simple |= Organica Creativa |
| 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 Creativa//>>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]] | ||
| |
253.1 | 44 | |
| |
261.1 | 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 Creativa// design for an early prototype of ERDivaLook on his [[blog>>http://www.organicacreativa.com/directtoweb-mutation/]]. | ||
| |
123.1 | 47 | |
| |
227.1 | 48 | == HowTos == |
| |
149.1 | 49 | |
| |
227.1 | 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 | |||
| |
255.1 | 67 | The [[widgets>>ERPrototaculous]] are all in the Prototype+Scriptaculous family. |
| |
227.1 | 68 | |
| |
229.1 | 69 | === 4. Well-Formed Semantic Markup === |
| |
227.1 | 70 | |
| |
261.1 | 71 | The pages produced by Diva look will pretty much validate as (x)HTML5. Features of the DOM: |
| |
227.1 | 72 | |
| |
229.1 | 73 | * Unique IDs for elements |
| 74 | * Unique form control names | ||
| 75 | * Use of multiple CSS classes | ||
| |
261.1 | 76 | * Table-less markup (except for tabular data) |
| |
227.1 | 77 | |
| |
257.1 | 78 | === 5. Ajax Page Configurations === |
| |
229.1 | 79 | |
| |
261.1 | 80 | Prototype provides the Ajax functionality in Diva in the form of [[ERPrototaculous>>ERPrototaculous]]. |
| |
257.1 | 81 | Diva look introduces the concept of **Ajax pageConfigs**. |
| 82 | Example page configurations: | ||
| 83 | |||
| 84 | * ##AjaxQueryMovie## | ||
| 85 | * ##AjaxEditStudio## | ||
| 86 | * ##AjaxListTalent## | ||
| 87 | |||
| |
261.1 | 88 | === 6. Dynamic D2W === |
| 89 | |||
| 90 | Ajax + //delayed// D2W rules = [[dynamic D2W>>How to use Dynamic D2W]]. | ||
| |
264.1 | 91 | |
| 92 | == External Links == | ||
| 93 | |||
| 94 | WOWODC 10' - [[DirecToWeb 2.0>>http://www.wocommunity.org/wowodc10/slides/D2W2.pdf]] |