- Revision
- 858
- Author
- mde
- Date
- 2006-07-18 17:18:02 -0700 (Tue, 18 Jul 2006)
Log Message
Added some graphics -- screenshots & diagrams. Began editing and wordsmithing.
Modified Paths
Added Paths
Diff
Added: trunk/docs/oscon2006/cosmoScooby/images/block_breakdown.gif
(Binary files differ)
Added: trunk/docs/oscon2006/cosmoScooby/images/ui_grab.jpg
(Binary files differ)
Added: trunk/docs/oscon2006/cosmoScooby/images/ui_grab_detail1.jpg
(Binary files differ)
Modified: trunk/docs/oscon2006/cosmoScooby/scooby1.html (857 => 858)
--- trunk/docs/oscon2006/cosmoScooby/scooby1.html 2006-07-18 02:47:56 UTC (rev 857) +++ trunk/docs/oscon2006/cosmoScooby/scooby1.html 2006-07-19 00:18:02 UTC (rev 858) @@ -4,7 +4,7 @@ <html xmlns="http://www.w3.org/1999/xhtml"> <head> -<title>S5: An Introduction</title> +<title>Everything I wanted to know about Cosmo and Scooby ...</title> <!-- metadata --> <meta name="generator" content="S5" /> <meta name="version" content="S5 1.1" /> @@ -29,8 +29,8 @@ <div id="currentSlide"><!-- DO NOT EDIT --></div> <div id="header"></div> <div id="footer"> -<h1>[location/date of presentation]</h1> -<h2>[slide show title here]</h2> +<h1>OSCON 2006</h1> +<h2>OSAF Cosmo/Scooby Presentation</h2> </div> </div> @@ -39,7 +39,7 @@ <div class="presentation"> <div class="slide"> -<h1>Everything I wanted to know about Cosmo and Scooby but was afraid to ask!</h1> +<h1>Everything I wanted to know about Cosmo and Scooby ... but was afraid to ask!</h1> <h2>Brian Moseley</h2> <h2>Matthew Eernisse</h2> <h2>Bobby Rullo</h2> @@ -62,6 +62,8 @@ <div class="slide"> <h1>UI Overview</h1> + <image src="" width="581" height="401" alt="" + style="display:block; width:581px; height:401px; float:right;"/> <ul> <li>Web Standards</li> <li>Interactivity</li> @@ -74,21 +76,17 @@ </div> <div class="slide"> - <h1>UI Breakdown: UI Elements</h1> + <h1>Breakdown: UI Elements, Current</h1> + <image src="" width="246" height="339" alt="" + style="display:block; width:246px; height:339px; float:right;"/> <ul> - <li>Current State</li> - <ul> <li>DOM elements, primarily divs</li> - <li>Absolute positioning in px. Pixel sizes and positions are - calculated based on viewport size as the UI loads.</li> - <li>Benefit: makes implementation of resizing and drag-drop very - straightforward</li> - <li>Problem: UI element sizes/positions must be recalculated - on window resize, which results in a very - non-application-like experience for the end-user. + <li>Absolute positioning, pixel widths</li> + <li>Benefit: resizing and drag-drop very straightforward</li> + <li>Problem: recalculating / repositioning UI elements on + window resize -- currently uses page reload </li> </ul> - </ul> <div class="handout"> [any material that should appear in print but not on the slide] @@ -96,23 +94,23 @@ </div> <div class="slide"> - <h1>UI Breakdown: UI Elements</h1> + <h1>Breakdown: UI Screenshot</h1> + <image src="" width="719" height="420" alt="" + style="display:block; width:719px; height:420px; margin:auto;"/> +</div> + +<div class="slide"> + <h1>Breakdown: UI Elements, Moving Forward</h1> <ul> - <li>Moving Forward</li> - <ul> - <li>DOM elements, refactoring to use a table-based layout</li> - <li>Positioning with be mostly relative, or absolute with - percents</li> - <li>Benefit: elements positions can be more easily maintained, - and entire layout can resize on the fly, for a truly - app-like experience for the end-user (no need to - recalc/redraw on window resize). + <li>Significant refactoring of UI-specific code for better + separation of loading / rendering concerns</li> + <li>Benefit: Will make it easier to size and place UI elements + when resizing window </li> - <li>Challenge: will require more browser-specific code</li> - <li>Challenge: drag-and-drop becomes significantly less - straightforward</li> + <li>Challenge: Creating a design which is flexible + enough to allow continued evolution of the + UI code, including (later) non-calendar collections</li> </ul> - </ul> <div class="handout"> [any material that should appear in print but not on the slide] @@ -120,16 +118,16 @@ </div> <div class="slide"> - <h1>UI Breakdown: Events</h1> + <h1>Breakdown: Events, Current State</h1> <ul> - <li>Current State</li> - <ul> <li>Primarily global event listeners with a dispatch system that calls the appropriate code based on the id of the manipulated elements.</li> <li>Benefit: Single channel of event flow is easy to debug.</li> <li>Benefit: Low memory footprint due to no creation of DOM-node - references XXX Not sure if this is accurate</li> + or handler references</li> + <li>Benefit: Less issues with loss of scope because events + are dispatched in window scope.</li> <li>Problem: Brittleness. Overloading the id property requires well-designed naming convention for elements, and tricky regex parsing of ids to dispatch events properly. @@ -137,17 +135,14 @@ <li>Problem: Unweildiness. Increasing UI complexity makes global dispatch code grow unacceptably large</li> </ul> - </ul> <div class="handout"> [any material that should appear in print but not on the slide] </div> </div> <div class="slide"> - <h1>UI Breakdown: Events</h1> + <h1>Breakdown: Events, Moving Forward</h1> <ul> - <li>Moving Forward</li> - <ul> <li>Increased use of Dojo's event.connect and hitch with 'topics' to assign event listeners programmatically</li> <li>Benefit: Allows more decentralized pub/sub model of @@ -158,10 +153,9 @@ make debugging very challenging -- no central 'clearing house' for user input.</li> <li>Challenge: More references to DOM nodes increases memory - usage and the potential for leaks. XXX referemces increase memory usage? That doesn't sound right. + usage and the potential for leaks. </li> </ul> - </ul> <div class="handout"> [any material that should appear in print but not on the slide] @@ -169,21 +163,19 @@ </div> <div class="slide"> - <h1>UI Breakdown: Asynchrous Code</h1> + <h1>Breakdown: Async. Code, Current State</h1> <ul> - <li>Current State</li> - <ul> <li>Loss of scope issues from callbacks solved with: <ul><li>Closures</li> <li>External registries with object ids</li> -<li>Singletons</li></ul> +<li>Singletons</li> +<li>Function.apply/Function.call</li></ul> </li> <li>Benefit: Well known solutions to a well known problem</li> <li>Problem: 'Patchwork' solution requires developer experience and understanding of why each approach is appropriate, and when</li> </ul> - </ul> <div class="handout"> [any material that should appear in print but not on the slide] @@ -191,16 +183,13 @@ </div> <div class="slide"> - <h1>UI Breakdown: Asynchrous Code</h1> + <h1>Breakdown: Async. Code, Moving Forward</h1> <ul> - <li>Moving Forward</li> - <ul> <li>Increased use of Dojo's event.connect and hitch.</li> <li>Benefit: 'Just works.'</li> <li>Challenge: Black-box approach can be confusing or difficult to debug when something goes wrong.</li> </ul> - </ul> <div class="handout"> [any material that should appear in print but not on the slide]
_______________________________________________ Commits mailing list [email protected] http://lists.osafoundation.org/mailman/listinfo/commits
