ALVIN CHAO GRIDS & PIECES : MINIMIZE LOAD TIME & INCREASE ACCESSIBILITY WITH RSS & CSS

PIECES + GRIDS Optimizing Feed blocks: Folder vs. Content Type index blocks in 6.x and 7.x RSS feed based index blocks Installing Velocity showcase app to aid in testing formats Offline testing of certain Velocity Formats / Tools YUI3 CSS Grids Overview Technical details Examples

RSS CONTENT INDEX BLOCKS Create a page of xml type output and use a folder index block as the default region and use a pass- through template(similar to an SSI include template) like this: Publish this out to your test server Create a new Block of type Feed in Cascade, set the Feed Url to the url of the block you just published above and you now have an rss feed of your content type for your internal use or to allow for external consumption

PAGE LOAD TIMES: NEWS: 1251 NEWS ITEMS EVENTS: 1504 EVENTS Index TypeCombo Page Load Time (sec) News Block Load Time (sec) Event Block Load Time (sec) Folder Folder CT Index CT Index Folder RSS Folder RSS

  The Final Frontier

VELOCITY SHOWCASE APP Go to Download the Velocity-tools 2.0 and Extract Find the /examples/showcase.war Move this war file into the tomcat deployment folder for your test Cascade instance and restart the server / Cascade Your new app is deployed to /showcase/

LOAD SHOWCASE IN ECLIPSE Install eclipse from Start Eclipse and go to Java EE perspective File – Import – Web- War file set runtime to Apache Tomcat 6 Run using a Tomcat Configuration

VELOCITY SHOWCASE EXAMPLES Date Tool: Can use this to test formatting a date Escape Tool: This is an example − we ate at a café. LoopTool Can use a lot of basic Velocity script in this example to test looping and comparison tests

Give me a

YUI3 CSS GRIDS A W3C Compliant CSS Grid system Allows for dynamic regions for Responsive Design and also changing dynamic data The Documentation: The Tools: Grid Builder: The Bottom line – one line to add to an existing page:

YUI LAYOUTS: 24,12,8,6,5,4,3,2,1.yui 3- u yui3-u- 1-8.yui3-u-1-6.yui3-u-1-5.yui3-u-1-4.yui3-u-1-3.yui3-u-1-2.yui3-u-1 = Fills 100% of available width or.yui3-u Shrinks to fit unless width is applied

THE MARKUP First Section Second Section 1 st Half 2 nd Half

GRID EXAMPLES Hannon Hill page: Jeopardy Demo Responsive Page Grid Local file

## No Comment

Thank you – Questions? Alvin Chao Web: