Uploaded byTsungWei Hu
Diazo: Bridging Designers and Programmers
This document introduces Diazo, an open source theme engine for bridging web designers and developers. It discusses how Diazo works by using XML rules and XSLT to transform unthemed HTML content into themed content. It provides examples of common rules for replacing elements, including and dropping content, and merging navigation. Diazo allows maintaining design templates separately from dynamic content and deploying transformed content through an XSLT processor. The conclusion recommends starting with example codes, using the editor for common tasks, and keeping organizational themes consistent.
More Related Content
Diazo: Bridging Designers and Programmers
- 1. Diazo: Bridging Designers andProgrammers marr Bridging Designers Programmers and
- 2.
- 3. Which Group DoYou Belong To?
- 4.
- 5.
- 6.
- 7. Task Boundary O HTML OCSS O Multimedia X Shell Commands ? JavaScript ? Version Control
- 8. Task Boundary Anything Else ! OHTML O CSS O Multimedia X Shell Commands ? JavaScript ? Version Control
- 9.
- 10. Plone Looks NotSexy
- 11. Joo-Dru Skins, PloneGoodies
- 12. 豬皮 龍骨 Joo-Dru Skins,Plone Goodies
- 13. Introducing Diazo di-az-o (alsodi-az-o-type) noun a copying or coloring process using a diazo compound decomposed by ultraviolet light
- 14.
- 15.
- 16.
- 17.
- 18. How rules.xml LooksLike <?xml version="1.0" encoding="UTF-8"?> <rules xmlns="http://namespaces.plone.org/diazo" xmlns:css="http://namespaces.plone.org/diazo/css" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <rules css:if-content="#visual-portal-wrapper"> <theme href="theme.html" /> … </rules> </rules>
- 19.
- 20. Rule Directives <theme /> <replace/> <drop /> <before /> <after /> <copy /> <merge /> <strip />
- 21. Compile and Deploy •With Theme HTML and Rule in hand, you can compile these using the Diazo compiler into a single XSLT file. • You can then deploy this XSLT file with your application. • An XSLT processor (such as mod_transform in Apache) will then transform the dynamic content from your website into the themed content your end users see. • The transformation takes place on-the-fly for each request.
- 22.
- 23.
- 24. Replacing Page Title andMain Content <replace css:theme="html head title" css:content="html head title"/> <replace css:theme-children=".blog .content" css:content-children="#content"/>
- 25. Including Content’s Scripts andMeta Data <before css:theme-children="html head" css:content="html head script" /> <before css:theme-children="html head“ css:content="html head meta" />
- 26. Content’s Navigation Bar <ulid="portal-globalnav"> <li id="portaltab-index_html" class="selected"> <a href="http://..." title="">Home</a> </li> <li id="portaltab-news" class="plain"> <a href="http://..." title="Site News">News</a> </li> ... </ul>
- 27. Theme’s Navigation Bar <navclass ="top-nav"> <div class="shell"> <a href="#" class="nav-btn">HOMEPAGE<span></span></a> <span class="top-nav-shadow"></span> <ul> <li class="active first"> <span><a href="#">home</a></span></li> <li><span><a href="#">services</a></span></li> ... <li class="last"> <span><a href="#">contacts</a></span></li> </ul> </div> </nav>
- 28. Replacing Navigation Bar <replacecss:theme-children="nav.top-nav ul"> <xsl:for-each css:select="#portal-globalnav li"> <li><span><xsl:copy-of css:select="a"/> </span></li> </xsl:for-each> </replace>
- 29. Adding Login Button <beforecss:theme-children='body' css:content='#portal-personaltools- wrapper' /> <drop css:content=".searchSection" />
- 30. Some Other Scenario •Management Interface Usually Needs a Vanilla or Separate Face • Maintain and Serve Themes in Version Control System • Keep Organization Themes Looking Consistent • 豬皮龍骨 Ya!
- 31. Conclusion • Make Useof the Unique CSS Bits • Use Example Codes / Recipes First for Learning, then Use Editor For Obvious Tasks • Resource: QAs on StackOverflow <… css:if-content=“.template-controlpanel” />
- 32.