grids and pieces by alvin chao
DESCRIPTION
This session will explore several tips and tricks to aid developers with load time of index blocks via RSS feed published index blocks, increase accessibility and responsive design flexibility of WYSIWYG regions through use of YUI 3 CSS Grids templates and explore some tricks to help with velocity format testing.TRANSCRIPT
![Page 1: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/1.jpg)
Alvin Chao - @chaoaj
Grids & Pieces: Minimize Load Time & Increase Accessibility with RSS
& CSS
<presentation>
![Page 2: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/2.jpg)
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
![Page 3: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/3.jpg)
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: • <xhtml-block><system-region
name="DEFAULT"/></xhtml-block>• 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 4: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/4.jpg)
Page Load times:News: 1251 news items
Events: 1504 events
Index Type Combo Page Load Time (sec)
News Block Load Time (sec)
Event Block Load Time (sec)
6.10.9 Folder 40.043 16.267 22.269
7.0.1 Folder 14.354 5.582 7.434
6.10.9 CT Index 26.628 12.351 13.015
7.0.1 CT Index 1.563 0.172 0.171
6.10.9 Folder RSS
3.224 0.565 0.419
7.0.1 Folder RSS 1.886 0.328 0.346
![Page 5: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/5.jpg)
  The Final Frontier
![Page 6: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/6.jpg)
Velocity Showcase app
• Go to http://velocity.apache.org/download.cgi• 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
http://<yourserver>/showcase/
![Page 7: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/7.jpg)
Load Showcase in Eclipse
• Install eclipse from http://eclipse.org• Start Eclipse and go to Java EE perspective • File – Import – Web- War file set runtime to
Apache Tomcat 6• Run using a Tomcat Configuration
![Page 8: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/8.jpg)
Velocity Showcase examples
• Date Tool:• Can use this to test formatting a date
• Escape Tool:• <p> This is an example − we ate at a café.</p>
• LoopTool• Can use a lot of basic Velocity script in this example to
test looping and comparison tests
![Page 9: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/9.jpg)
Give me a <br />
![Page 10: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/10.jpg)
YUI3 CSS GrIDS
• A W3C Compliant CSS Grid system • Allows for dynamic regions for Responsive Design and
also changing dynamic data
• The Documentation: http://yuilibrary.com/yui/docs/cssgrids/• The Tools: Grid Builder:
http://developer.yahoo.com/yui/grids/builder/• The Bottom line – one line to add to an existing
page:• <link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.6.0/build/cssgrids/grids-min.css">
![Page 11: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/11.jpg)
YUI Layouts: 24,12,8,6,5,4,3,2,1
.yui3-u-1-12.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
![Page 12: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/12.jpg)
The Markup
<body> <div class="yui3-g">
<div class="yui3-u-5-24"> First Section
</div> <div class="yui3-u-19-24">
Second Section<div class="yui3-g">
<div class=“yui3-u-1-2”>1st Half</div><div class=“yui3-u-1-2”>2nd Half</div>
</div></div>
</div> </body>
![Page 13: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/13.jpg)
Grid Examples
• Hannon Hill page: • http://www.hannonhill.com• http://educ.jmu.edu/~chaoaj/csuc12/hh
• Jeopardy• Demo Responsive Page Grid• Local file
![Page 14: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/14.jpg)
## No Comment
![Page 15: Grids and Pieces by Alvin Chao](https://reader034.vdocuments.site/reader034/viewer/2022042606/548d49adb4795940158b46c4/html5/thumbnails/15.jpg)
Thank you – Questions?
</presentation>
Alvin ChaoE-mail: [email protected]
Twitter: @chaoajWeb: http://about.me/alvinchao