Easier and faster Plone theming with Deliverance and xdv

4,020

Published on

One of the first things that people want to do with their Plone site is customize the look-n-feel. This usually requires making a Plone theme product which is an involved process and demands someone with programming skills. The process to take an existing website design and implement it in Plone requires a good knowledge of Plone theming engine, and usually the ones most skilled to create the design are the least skilled to implement it in Plone.

But what if you could make your Plone look like any website design knowing only basic HTML/CSS skills? Well, there is a tool available that lets you do just that. Deliverance is a middleware service that sits in between your Plone site and your website design. The website design template can be any arbitrary HTML/CSS - there's nothing Plone specific about it. This talk will give clear examples of how to get started using Deliverance to cut down your Plone theming from days to hours.

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

No Downloads
Views
Total Views
4,020
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
60
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Easier and faster Plone theming with Deliverance and xdv

  1. 1. Nate Aune (@natea) www.jazkarta.com Plone Conference 2010 Deliverance a compelling way to Plone sites 1
  2. 2. Obstacles Plone theming has a high barrier to entry 2
  3. 3. jazkarta Theming in Plone an exercise in patience • Install dependencies (Python, XCode, GCC) • Create a theme egg using paster • Put your stylesheets and images in /browser • But override Plone assets in /skins • To turn off viewlets, must edit configure.zcml • To make new viewlets must code Python • Must learn ZPT to edit page templates 3
  4. 4. jazkarta Knowledge needed • Buildout • Paster • Zope page templates (ZPT) • Python • ZCML • resource registry (for CSS and JS) • /skins vs. /browser 4
  5. 5. jazkarta Does your head hurt yet? 5
  6. 6. jazkarta What is Deliverance? • Middleware tool that serves as a proxy • Maps content HTML into design HTML • Keeps presentation separate from content 6
  7. 7. Are you a f’ender or a b’ender? 7
  8. 8. jazkarta Who is it for? 8
  9. 9. jazkarta Who is it for? • Designers 8
  10. 10. jazkarta Who is it for? • Designers • Integrators 8
  11. 11. jazkarta Who is it for? • Designers • Integrators • Developers 8
  12. 12. jazkarta Who is it for? • Designers • Integrators • Developers • Customers 8
  13. 13. The current compromise People that have design skills People that have coding skills People competent at both 9
  14. 14. The Deliverance Way People that know CSS Web DesignersWeb Developers 10
  15. 15. jazkarta How does it work? 11
  16. 16. jazkarta How does it work? move elements from your content 11
  17. 17. jazkarta How does it work? move elements from your content 11
  18. 18. jazkarta How does it work? move elements from your content into placeholders in your theme 11
  19. 19. jazkarta How does it work? move elements from your content into placeholders in your theme 11
  20. 20. jazkarta How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content 11
  21. 21. jazkarta How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content 11
  22. 22. jazkarta Python is magical http://xkcd.com/353/ 12
  23. 23. jazkarta 13
  24. 24. jazkarta Deliverance 13
  25. 25. jazkarta Knowledge needed • HTML • CSS • Firebug • simple editing of XML file 14
  26. 26. jazkarta Four simple rules • drop • replace • prepend • append 15
  27. 27. jazkarta Deliverance benefits • web designer doesn't need to learn CMS templating • separation of concerns • theme multiple apps with one design (trac, wiki, blog, etc.) 16
  28. 28. jazkarta Who is using Deliverance? 17
  29. 29. jazkarta Who is using Deliverance? • Harvard School of Engineering 17
  30. 30. jazkarta Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque 17
  31. 31. jazkarta Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque • HaiVision.com 17
  32. 32. jazkarta Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque • HaiVision.com • ploneconf2009.org (get the buildout!) 17
  33. 33. jazkarta Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque • HaiVision.com • ploneconf2009.org (get the buildout!) • and many others... 17
  34. 34. Case study A real world example of using Deliverance 18
  35. 35. jazkarta 19
  36. 36. jazkarta 20
  37. 37. jazkarta 21
  38. 38. jazkarta 22
  39. 39. jazkarta HaiVision "Replace our custom backend with Plone CMS." 22
  40. 40. jazkarta HaiVision "Replace our custom backend with Plone CMS." "Sure, we can do that." Jazkarta 22
  41. 41. jazkarta HaiVision "Replace our custom backend with Plone CMS." "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision 22
  42. 42. jazkarta HaiVision "Replace our custom backend with Plone CMS." "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision "No problem." Jazkarta 22
  43. 43. jazkarta HaiVision "Replace our custom backend with Plone CMS." "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision "No problem." Jazkarta "We're going to change the design soon, and we want to be able to change the HTML/CSS ourselves." HaiVision 22
  44. 44. jazkarta HaiVision "Replace our custom backend with Plone CMS." "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision "No problem." Jazkarta "We're going to change the design soon, and we want to be able to change the HTML/CSS ourselves." HaiVision "Umm. Ok, you will be able to do that." Jazkarta 22
  45. 45. Customers change their mind about their identity all the time. Don't make it painful than it already is for them. 23
  46. 46. Jazkarta "Oh, and we need this done in two weeks."HaiVision 24
  47. 47. Jazkarta "Oh, and we need this done in two weeks."HaiVision "WTF!?" 24
  48. 48. Deliverance to the rescue! DELIVERANCE 25
  49. 49. jazkarta Why Deliverance? • They have three different sections of the site, each needing to be themed differently. • They want to change the design, but their staff only knows HTML/CSS. • They might want to theme another web app to have the same look-n-feel as their website. • Oh, and they want this done ASAP. 26
  50. 50. jazkarta Why not a Plone theme? • Significant man hours to make a pixel perfect Plone theme • Difficult to apply a different theme for different sections of the site • The customer should not have to learn Plone theming technology to make design changes. • One less piece of software that we have to maintain • Difficult to upgrade to newer versions of Plone when there are many theme customizations 27
  51. 51. jazkarta Seven Steps to Heaven 28
  52. 52. jazkarta Seven Steps to Heaven 1. Check out and run the Deliverance demo buildout 28
  53. 53. jazkarta Seven Steps to Heaven 1. Check out and run the Deliverance demo buildout 2. Prepare your HTML/CSS files (might need to do some cleanup) 28
  54. 54. jazkarta Seven Steps to Heaven 1. Check out and run the Deliverance demo buildout 2. Prepare your HTML/CSS files (might need to do some cleanup) 3. Stick the files in a /static folder in buildout dir 28
  55. 55. jazkarta 29
  56. 56. jazkarta 4. Identify the CSS selectors of the elements in the Plone site that we wish to map to the static theme. 29
  57. 57. jazkarta 4. Identify the CSS selectors of the elements in the Plone site that we wish to map to the static theme. 5. Identify the CSS selectors in the static theme that should serve as placeholders for the dynamic content coming from Plone. 29
  58. 58. jazkarta 4. Identify the CSS selectors of the elements in the Plone site that we wish to map to the static theme. 5. Identify the CSS selectors in the static theme that should serve as placeholders for the dynamic content coming from Plone. 6. Create a rules file that maps Plone content elements to placeholder elements in the theme 29
  59. 59. jazkarta 4. Identify the CSS selectors of the elements in the Plone site that we wish to map to the static theme. 5. Identify the CSS selectors in the static theme that should serve as placeholders for the dynamic content coming from Plone. 6. Create a rules file that maps Plone content elements to placeholder elements in the theme 7. Set up an Apache vhost to proxy to Deliverance 29
  60. 60. jazkartaStart your engines! 30
  61. 61. jazkarta 1. Check out and run the demo buildout svn co http://svn.plone.org/svn/collective/deliverancedemo/trunk/ dd cd dd python bootstrap.py bin/buildout -v Run the bootstrap command and run the buildout This will install Deliverance and it's dependencies (lxml) and install a Plone site at /Plone 31
  62. 62. jazkarta 2. Prepare your HTML/CSS • An HTML/CSS template that you downloaded from somewhere • Design assets that were given to you by a customer, design agency or your designer • A design from an existing website 32
  63. 63. jazkarta 33
  64. 64. jazkarta 3. Stick them in a /static dir in your buildout 34
  65. 65. jazkarta 3. Stick them in a /static dir in your buildout 34
  66. 66. jazkarta 4. Identify elements in Plone to map to design • Firebug is your friend (www.getfirebug.com) • Click on elements to get their class or id • Can also get XPath expression by right- clicking on element 35
  67. 67. jazkarta 36
  68. 68. jazkarta 36
  69. 69. jazkarta 5. Identify the corresponding element in the theme • You may need to add a class or ID to better identify the element. • You can use an absolute path to the element in the DOM, but if the element gets moved, the mapping rule will not work anymore. • So it's best to always use a class or ID to avoid breakage. 37
  70. 70. jazkarta 38
  71. 71. jazkarta 38
  72. 72. jazkarta rules-training.xml <?xml version="1.0" encoding="UTF-8"?> <ruleset> <server-settings> <server>0.0.0.0:5000</server> <execute-pyref>true</execute-pyref> <dev-allow>127.0.0.1</dev-allow> <dev-user username="guest" password="guest" /> </server-settings> <proxy path="/static" class="static" editable="1"> <dest href="{here}/static/" /> </proxy> <proxy path="/" class="plone"> <dest href="http://localhost:8080/VirtualHostBase/http/ localhost:5000/Plone/VirtualHostRoot/" /> </proxy> <rule class="static" /> 39
  73. 73. jazkarta rules-training.xml Open the rules-training.xml file in the buildout directory. <?xml version="1.0" encoding="UTF-8"?> <ruleset> <server-settings> <server>0.0.0.0:5000</server> <execute-pyref>true</execute-pyref> <dev-allow>127.0.0.1</dev-allow> <dev-user username="guest" password="guest" /> </server-settings> <proxy path="/static" class="static" editable="1"> <dest href="{here}/static/" /> </proxy> <proxy path="/" class="plone"> <dest href="http://localhost:8080/VirtualHostBase/http/ localhost:5000/Plone/VirtualHostRoot/" /> </proxy> <rule class="static" /> 39
  74. 74. jazkarta The "plone" rule class <rule class="plone"> <!-- Theme --> <theme href="/static/index.html" /> <!-- Put your rules below this line --> </rule> </ruleset> 40
  75. 75. jazkarta Replace rule for page heading <replace content='children:_______________________' theme='children:_________________' /> 41
  76. 76. jazkarta Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:_________________' /> 42
  77. 77. jazkarta Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:span.sectionTitle' /> 43
  78. 78. jazkarta 6. Insert our rule into the rules-training.xml file <rule class="plone"> <!-- Theme --> <theme href="/static/index.html" /> <!-- Put your rules below this line --> <replace content='children:h1.documentFirstHeading' theme='children:span.sectionTitle' /> </rule> </ruleset> 44
  79. 79. jazkarta Let's start up Zope and the Deliverance proxy $ cd dd $ bin/instance start . . daemon process started, pid=3556 $ bin/deliverance-proxy rules-training.xml To see logging, visit http://127.0.0.1:5000/.deliverance/login after login go to http://127.0.0.1:5000/?deliv_log serving on http://127.0.0.1:5000 45
  80. 80. Go to http://localhost:5000 ... to see the Plone site themed with Deliverance 46
  81. 81. 47
  82. 82. 47
  83. 83. jazkarta 48
  84. 84. jazkarta 48
  85. 85. Replace navigation tree 49
  86. 86. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> 49
  87. 87. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> 49
  88. 88. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> 49
  89. 89. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree" 49
  90. 90. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree" theme="children:#left-navigation" /> 49
  91. 91. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree" theme="children:#left-navigation" /> Must place drop rules before replace rule. 49
  92. 92. How do you theme the sections differently? 50
  93. 93. jazkarta haivision.com/products 51
  94. 94. jazkarta Apply page class by path <match path="/" class="default" /> <match path="/applications" class="applications" /> <match path="exact:/" class="frontpage" /> 52
  95. 95. jazkarta haivision.com/applications 53
  96. 96. jazkarta haivision.com/applications 53
  97. 97. jazkarta Repurpose static portlet 54
  98. 98. jazkarta Repurpose static portlet 54
  99. 99. jazkarta Repurpose static portlet 54
  100. 100. jazkarta Each page class can have a separate theme & rules 55
  101. 101. jazkarta Each page class can have a separate theme & rules <rule class="applications" suppress-standard="1"> <theme href="/static/applications.html" /> <replace content='children:p.documentDescription' theme='children:span.SectionSubtitle' /> <replace content='children:#portal-column-two' theme='children:#right-column' /> </rule> 55
  102. 102. jazkarta frontpage: haivision.com/ 56
  103. 103. jazkarta frontpage: haivision.com/ 56
  104. 104. jazkarta Repurpose the news portlet 57
  105. 105. jazkarta Repurpose the news portlet 57
  106. 106. jazkarta Repurpose the news portlet 57
  107. 107. jazkarta Frontpage has it's own theme and rules <rule class="frontpage"> <theme href="/static/frontpage.html"/> <drop content=".portletNews dt.portletHeader" /> <drop content='.portletNews dd.portletFooter' /> <drop content='.portletNews dd.portletItem img' /> <replace content='dl.portletNews' theme='children:#newsbox' /> </rule> 58
  108. 108. jazkarta Serve up different web apps 59
  109. 109. jazkarta Serve up different web apps <proxy path="/trac" class="trac"> <dest href="http://localhost:10002" /> </proxy> <proxy path="/blog" class="blog"> <dest href="http://localhost:10003" /> </proxy> <proxy path="/" class="plone"> <transform rewrite-links="1" keep-host="1" /> <dest href="http://localhost:8081/VirtualHostBase/http/ {HOST}/sites/haivision-manage/VirtualHostRoot/" /> </proxy> 59
  110. 110. jazkarta How do I deploy Deliverance into production? • Run as a proxy on port 5000.Apache or Nginx proxies to port 5000. • two separate python processes • Run as WSGI middleware. • only one python process running 60
  111. 111. jazkarta Where does Deliverance sit in the stack? Name Title Deliverance Apache 61
  112. 112. jazkarta Where does Deliverance sit in the stack? Name Title Deliverance Apache 61
  113. 113. jazkarta 7. Make the Apache vhost <VirtualHost *:80> ServerName www.haivision.com ProxyPreserveHost On RewriteEngine On RewriteRule ^/(.*) http://127.0.0.1:5000/$1 [L,P] </VirtualHost> The ProxyPreserveHost is very important. 62
  114. 114. Tips and Tricks From the many Plone sites we’ve themed with Deliverance 63
  115. 115. jazkarta Append the id/class attributes from the body tag <append content="attributes(id,class):/html/body" theme="attributes:/html/body" /> Here is an example from the Haivision site: <body class=”section-products template-document-view”> 64
  116. 116. jazkarta Drop the right column on pages with a particular template <drop if-content=".searchPage || .template-login_form || body.template-mail_password_form || .template-default_error_message" theme=".col2" /> 65
  117. 117. jazkarta 66
  118. 118. jazkarta 66
  119. 119. jazkarta Embed HTML forms from other sites into Plone <match path="/donate/in-honor-of" class="honorform" /> <match path="/donate/in-memory-of" class="memoryform" /> <match path="/donate/personal" class="personalform" /> Rule class for honor form. <rule class="honorform"> <theme href="/static/subpage.html" /> <prepend href='/static/forms/honor.html' content="#honorform" theme=".documentActions" /> </rule> 67
  120. 120. jazkarta Embed Constant Contact subscribe form 68
  121. 121. jazkarta Embed Constant Contact subscribe form 68
  122. 122. jazkarta Embed Constant Contact subscribe form constant-contact.html <div id="constant-contact"> <form ...> ... </form> </div> 68
  123. 123. jazkarta Embed Constant Contact subscribe form <append href="/static/forms/constant-contact.html" content="#constant-contact" theme="children:#leftboxgreen" /> constant-contact.html <div id="constant-contact"> <form ...> ... </form> </div> 68
  124. 124. jazkarta Place the portlets in order <replace content="children:/html/body/div/table/tbody/tr/td/div/div[1]/dl/dd" theme="children:#leftboxpink" /> <replace content="/html/body/div/table/tbody/tr/td/div/div[2]/dl" theme="children:#leftboxpurple" /> <replace content="/html/body/div/table/tbody/tr/td/div/div[3]/dl" theme="children:#leftboxgreen" /> We don’t know the name of the portlets, so we use XPath. 69
  125. 125. jazkarta <div id="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> ... <li><a class="MenuBarItemSubmenu" href="#">News &amp; Events</a> <ul> <li><a href="#">Events </a></li> <li><a href=”#”>Past Events</a></li> <li><a href="#">In the News</a></li> </ul> </li> ... </div> menu.html 70
  126. 126. jazkarta One replace rule to embed the menubar <replace href="/static/menubar.html" content="children:#menu" theme="children:#menu" /> 71
  127. 127. jazkarta Copy the edit bar <prepend content='div.contentActions' theme='#body-content' /> <prepend content='#content-views' theme='#body-content' /> 72
  128. 128. jazkarta Make sure all the proper CSS and Javascripts get imported <prepend content="link[href *= 'authoring']" theme="link[href *= 'style']" /> <append content="link[href *= 'public']" theme="children:/html/head" /> <prepend content="/html/head/style" theme="link[href *= 'style']" /> <append content="/html/head/script" theme="children:/html/head" /> CSS files need their settings change from the default 'import' to 'link' in order for the rules to work 73
  129. 129. jazkarta <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Deco Grid System</title> <link rel="stylesheet" href="css/decogrids-16.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="css/main.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="css/fixes.css" type="text/css" charset="utf-8" /> <script src="js/jquery.tools.min.js" /> <body> <div id="wrapper"> <div id="header"> <div class="row"> <div class ="cell width-13 position-0" id="logo"><a href="/"><img src="images/logo.png"/></a></div> <div class ="cell width-3 position-13" id="searchbox"><a id="contact" href="/contact">contact</a></div> </div> <div class="row" id="top-nav"> <div class ="cell width-15 position-0 navTabs"> <ul> <a id="home-tab"href="/">Home</a> <a id="services-tab" href="/services">Services</a> <a id="clients-tab" href="/clients">Clients</a> <a id="about-tab" href="/about">About</a> <li><a id="blog-tab" href="http://blog.jazkarta.com">Blog</a></li> </ul> </div> </div> </div> <div class="row"> <div class ="cell width-3 position-0" id="left-column">left column </div> <div class ="cell width-10 position-3" id="body-content">about</div> <div class ="cell width-3 position-13" id="right-column">right column</div> </div> <div class="row" id="footer"> </div> </div> </body> </html> 74
  130. 130. jazkarta Injects the Plone toolbar 75
  131. 131. jazkarta PyQuery for link in doc('#menu a'): li = doc('<li></li>') link.after(li) link.remove() li.append(link) 76
  132. 132. jazkarta What about performance? • Deliverance respects caching headers • Pages load fast because they don't have to load all of Plone's assets • Deliverance runs in small memory footprint and takes hardly any server resources 77
  133. 133. jazkarta Deliverance vs XDV/Diazo 78
  134. 134. jazkarta Deliverance vs XDV/Diazo • Both use CSS selectors or XPath 78
  135. 135. jazkarta Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance 78
  136. 136. jazkarta Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance • <replace theme="#main" content="#portal-content > *" /> 78
  137. 137. jazkarta Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance • <replace theme="#main" content="#portal-content > *" /> • XDV 78
  138. 138. jazkarta Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance • <replace theme="#main" content="#portal-content > *" /> • XDV • <copy css:theme="#main" css:content="#portal-content > *" /> 78
  139. 139. jazkarta Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance • <replace theme="#main" content="#portal-content > *" /> • XDV • <copy css:theme="#main" css:content="#portal-content > *" /> • Can combine multiple themes without Apache magic 78
  140. 140. jazkarta Deliverance advantages • Serves static resources directly from the file system. No need to make a skin or serve from Apache. • Deliverance has a very useful debugging console • Deliverance lets you edit files (HTML, CSS, rules.xml) through-the-web 79
  141. 141. Debugging console 80
  142. 142. Edit rules TTW http://codespeak.net/svn/z3/deliverance/trunk/deliverance/editor/ 81
  143. 143. jazkarta Enable TTW editing <server-settings> <dev-allow> 127.0.0.1 24.218.111.149 98.216.49.27 209.104.75.94 </dev-allow> <dev-user username="guest" password="guest" /> <edit-local-files>true</edit-local-files> </server-settings> 82
  144. 144. Go to Laurence’s XDV talk! 12:05 at Wessex on thursday http://laplone.org/presentations/deliverance-vs-xdv-wpd2010.pdf 83
  145. 145. Future • CSSZenGarden for Plone themes • theme1.demo.plone.org • theme2.demo.plone.org • ... Anyone want to sprint on this? Combine with one-click demo Plone sites on EC2 84
  146. 146. Thanks to... Paul Everitt 85
  147. 147. Thanks to... Paul Everitt 85
  148. 148. Thanks to... Paul Everitt Ian Bicking 85
  149. 149. Thanks to... Paul Everitt Ian Bicking 85
  150. 150. Thanks to... Paul Everitt Ian Bicking AaronVanDerlip 85
  151. 151. deliveranceproject.org 86
  152. 152. jazkarta http://coactivate.org/projects/deliverance/ http://coactivate.org/projects/banjo/ http://svn.plone.org/svn/collective/ploneconf/buildout/ploneconf/trunk/ http://svn.plone.org/svn/collective/deliverancedemo/trunk Sample Deliverance buildouts http://deliverance.openplans.org http://plone.org/docu Deliverance documentation and tutorial Project pages 87
  153. 153. jazkarta Photo credits • http://www.flickr.com/photos/sir_mervs/2697096089/ • http://www.flickr.com/photos/foxypar4/1004464889 • http://www.flickr.com/photos/pamilne/2271490945 • http://www.flickr.com/photos/motleye/1459699804 • http://www.flickr.com/photos/kaptainkobold/351967847 • http://www.flickr.com/photos/aldoaldoz/2332755401 • http://xkcd.com/353/ 88
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×