Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diazo: Bridging Designers and Programmers


Published on

Talk at PyCon Taiwan 2013, 2013/05/25

Published in: Technology
  • Be the first to comment

Diazo: Bridging Designers and Programmers

  1. 1. Diazo:Bridging Designers and ProgrammersmarrBridgingDesignersProgrammersand
  2. 2. 進化中的程式猿
  3. 3. Which Group Do You Belong To?
  4. 4. Web Development Pipeline
  5. 5. Web Development Pipeline
  6. 6. Collaborationvs CrossOverFront-endHTMLJavaScriptDatabaseAPIsBack-endBusinessLogic
  7. 7. Task BoundaryO HTMLO CSSO MultimediaX Shell Commands? JavaScript? Version Control
  8. 8. Task BoundaryAnythingElse !O HTMLO CSSO MultimediaX Shell Commands? JavaScript? Version Control
  9. 9. CMS Wars
  10. 10. Plone Looks Not Sexy
  11. 11. Joo-Dru Skins, Plone Goodies
  12. 12. 豬皮 龍骨Joo-Dru Skins, Plone Goodies
  13. 13. Introducing Diazodi-az-o (also di-az-o-type)nouna copying or coloring process using adiazo compound decomposed byultraviolet light
  14. 14. How Diazo WorksHTMLMockupUnthemedContent
  15. 15. HTMLMockupUnthemedContentHow Diazo WorksXMLRules
  16. 16. How Diazo Works
  17. 17. How Diazo Works
  18. 18. How rules.xml Looks Like<?xml version="1.0" encoding="UTF-8"?><rulesxmlns=""xmlns:css=""xmlns:xsl=""><rules css:if-content="#visual-portal-wrapper"><theme href="theme.html" />…</rules></rules>
  19. 19. Theme Editor
  20. 20. Rule Directives<theme /><replace /><drop /><before /><after /><copy /><merge /><strip />
  21. 21. Compile and Deploy• With Theme HTML and Rule in hand, you cancompile these using the Diazo compiler into asingle XSLT file.• You can then deploy this XSLT file with yourapplication.• An XSLT processor (such as mod_transform inApache) will then transform the dynamic contentfrom your website into the themed content yourend users see.• The transformation takes place on-the-fly for eachrequest.
  22. 22. 先別管技術了…你聽過Ang Lee嗎?
  23. 23. Paint It Plone!
  24. 24. Replacing Page Titleand Main Content<replace css:theme="html head title"css:content="html head title"/><replace css:theme-children=".blog .content"css:content-children="#content"/>
  25. 25. Including Content’s Scriptsand 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. 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. 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. 28. Replacing Navigation Bar<replace css:theme-children=" ul"><xsl:for-each css:select="#portal-globalnav li"><li><span><xsl:copy-of css:select="a"/></span></li></xsl:for-each></replace>
  29. 29. Adding Login Button<before css:theme-children=bodycss:content=#portal-personaltools-wrapper /><drop css:content=".searchSection" />
  30. 30. Some Other Scenario• Management Interface UsuallyNeeds a Vanilla or Separate Face• Maintain and Serve Themes inVersion Control System• Keep Organization Themes LookingConsistent• 豬皮龍骨 Ya!
  31. 31. Conclusion• Make Use of the Unique CSS Bits• Use Example Codes / Recipes Firstfor Learning, then Use Editor ForObvious Tasks• Resource: QAs on StackOverflow<… css:if-content=“.template-controlpanel” />
  32. 32. CreditsDavid Bain