Diazo:Bridging Designers and ProgrammersmarrBridgingDesignersProgrammersand
進化中的程式猿
Which Group Do You Belong To?
Web Development Pipeline
Web Development Pipeline
Collaborationvs CrossOverFront-endHTMLJavaScriptDatabaseAPIsBack-endBusinessLogic
Task BoundaryO HTMLO CSSO MultimediaX Shell Commands? JavaScript? Version Control
Task BoundaryAnythingElse !O HTMLO CSSO MultimediaX Shell Commands? JavaScript? Version Control
CMS Wars
Plone Looks Not Sexy
Joo-Dru Skins, Plone Goodies
豬皮 龍骨Joo-Dru Skins, Plone Goodies
Introducing Diazodi-az-o (also di-az-o-type)nouna copying or coloring process using adiazo compound decomposed byultraviol...
How Diazo WorksHTMLMockupUnthemedContent
HTMLMockupUnthemedContentHow Diazo WorksXMLRules
How Diazo Works
How Diazo Works
How rules.xml Looks Like<?xml version="1.0" encoding="UTF-8"?><rulesxmlns="http://namespaces.plone.org/diazo"xmlns:css="ht...
Theme Editor
Rule Directives<theme /><replace /><drop /><before /><after /><copy /><merge /><strip />
Compile and Deploy• With Theme HTML and Rule in hand, you cancompile these using the Diazo compiler into asingle XSLT file...
先別管技術了…你聽過Ang Lee嗎?
Paint It Plone!
Replacing Page Titleand Main Content<replace css:theme="html head title"css:content="html head title"/><replace css:theme-...
Including Content’s Scriptsand Meta Data<before css:theme-children="html head"css:content="html head script" /><before css...
Content’s Navigation Bar<ul id="portal-globalnav"><li id="portaltab-index_html" class="selected"><a href="http://..." titl...
Theme’s Navigation Bar<nav class ="top-nav"><div class="shell"><a href="#" class="nav-btn">HOMEPAGE<span></span></a><span ...
Replacing Navigation Bar<replace css:theme-children="nav.top-nav ul"><xsl:for-each css:select="#portal-globalnav li"><li><...
Adding Login Button<before css:theme-children=bodycss:content=#portal-personaltools-wrapper /><drop css:content=".searchSe...
Some Other Scenario• Management Interface UsuallyNeeds a Vanilla or Separate Face• Maintain and Serve Themes inVersion Con...
Conclusion• Make Use of the Unique CSS Bits• Use Example Codes / Recipes Firstfor Learning, then Use Editor ForObvious Tas...
CreditsDavid Bainhttps://docs.google.com/document/d/11OUaVbk2cJ7dH127wXat-S4yqHGJb3CUNKT2HAidVso
Upcoming SlideShare
Loading in...5
×

Diazo: Bridging Designers and Programmers

349

Published on

Talk at PyCon Taiwan 2013, 2013/05/25

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
349
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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="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. 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="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. 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 Bainhttps://docs.google.com/document/d/11OUaVbk2cJ7dH127wXat-S4yqHGJb3CUNKT2HAidVso

×