Diazo: Bridging Designers and Programmers
2 likes1,059 views
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.
Diazo: Bridging Designers and Programmers
- 1. Diazo: Bridging Designers and Programmers marr Bridging Designers Programmers and
- 2. 進化中的程式猿
- 3. Which Group Do You Belong To?
- 7. Task Boundary O HTML O CSS O Multimedia X Shell Commands ? JavaScript ? Version Control
- 8. Task Boundary Anything Else ! O HTML O CSS O Multimedia X Shell Commands ? JavaScript ? Version Control
- 9. CMS Wars
- 10. Plone Looks Not Sexy
- 11. Joo-Dru Skins, Plone Goodies
- 12. 豬皮 龍骨 Joo-Dru Skins, Plone Goodies
- 13. Introducing Diazo di-az-o (also di-az-o-type) noun a copying or coloring process using a diazo compound decomposed by ultraviolet light
- 16. How Diazo Works
- 17. How Diazo Works
- 18. How rules.xml Looks Like <?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. Theme Editor
- 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.
- 23. Paint It Plone!
- 24. Replacing Page Title and Main 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 and Meta 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 <ul id="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 <nav class ="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 <replace css: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 <before css: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 Use of 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” />