Deliverance - a compelling way to theme Plone sites
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Deliverance - a compelling way to theme Plone sites

on

  • 5,298 views

This talk gives an overview of Deliverance, a middleware tool that makes it easy to theme any website. In particular, we discuss how to make it work with the Plone, open source CMS.

This talk gives an overview of Deliverance, a middleware tool that makes it easy to theme any website. In particular, we discuss how to make it work with the Plone, open source CMS.

Statistics

Views

Total Views
5,298
Views on SlideShare
5,244
Embed Views
54

Actions

Likes
4
Downloads
102
Comments
0

3 Embeds 54

http://www.slideshare.net 49
http://jazkarta.com 4
http://wcm01.dsaw.unibo.it 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • One of the first things people want to do with their web site is change the look-n-feel. Unfortunately, with Plone this is a time consuming and frustrating experience for most people.
  • If you've ever tried to theme a Plone site, you know that there are a lot of concepts to wrap your head around before you start seeing results. The learning curve is simply to steep for most people.
  • Poll the audience to see who represents each role.
  • Poll the audience to see who represents each role.
  • Poll the audience to see who represents each role.
  • Poll the audience to see who represents each role.
  • If you know this one from XKCD, it says "You're flying! How?" and the guy up in the sky says, "Python!"
  • plone.org is actually using xdv, but same underlying technology <br /> plone.tv was one of the first sites to adopt it in production (currently down), SEAS was our first customer project.
  • plone.org is actually using xdv, but same underlying technology <br /> plone.tv was one of the first sites to adopt it in production (currently down), SEAS was our first customer project.
  • plone.org is actually using xdv, but same underlying technology <br /> plone.tv was one of the first sites to adopt it in production (currently down), SEAS was our first customer project.
  • plone.org is actually using xdv, but same underlying technology <br /> plone.tv was one of the first sites to adopt it in production (currently down), SEAS was our first customer project.
  • plone.org is actually using xdv, but same underlying technology <br /> plone.tv was one of the first sites to adopt it in production (currently down), SEAS was our first customer project.
  • plone.org is actually using xdv, but same underlying technology <br /> plone.tv was one of the first sites to adopt it in production (currently down), SEAS was our first customer project.
  • HaiVision approached us and said that they wanted to use Plone as the CMS for their website, that was currently powered by an inflexible custom Cold Fusion app.
  • Significant # of man hours required to make a pixel perfect theme that fits within Plone&apos;s templating structure.
  • After 2) we did some clean-up of the HTML, mostly changing the GIF images that were used as navigation to text. 3) Obviously need to run buildout to build Deliverance and its dependencies.
  • After 2) we did some clean-up of the HTML, mostly changing the GIF images that were used as navigation to text. 3) Obviously need to run buildout to build Deliverance and its dependencies.
  • After 2) we did some clean-up of the HTML, mostly changing the GIF images that were used as navigation to text. 3) Obviously need to run buildout to build Deliverance and its dependencies.
  • For those of you who like to follow along, now you can fire up your terminal and do some Deliverance theming.
  • Rename to index.html and images. Change all references to "products_files" in index.html to "images"
  • The only thing dynamic on this page is the news box. Every thing else is static that the customer manages in the HTML.
  • By Nathan Van Gheem

Deliverance - a compelling way to theme Plone sites Presentation Transcript

  • 1. Deliverance a compelling way to Plone sites Nate Aune www.jazkarta.com Plone Conference 2009
  • 2. Slides to add • if-content • used to match certain templates • proxy to live site • jquery.com example - show theme= • how to handle theming of elements inside the HTML that Plone generates in the static theme • does the XML file need to be well-formed? what about the HTML? does it need to be valid XHTML. • can Plone's authoring interface be themed to look like the Deliverance-themed site? jazkarta
  • 3. Obstacles Plone theming has a high barrier to entry
  • 4. 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 jazkarta
  • 5. Knowledge needed • Buildout • Paster • Zope page templates (ZPT) • Python • ZCML • resource registry (for CSS and JS) • /skins vs. /browser jazkarta
  • 6. Does your head hurt yet? jazkarta
  • 7. What is Deliverance? • Middleware tool that serves as a proxy • Maps content HTML into design HTML • Keeps presentation separate from content jazkarta
  • 8. Who is it for? jazkarta
  • 9. Who is it for? • Designers jazkarta
  • 10. Who is it for? • Designers • Integrators jazkarta
  • 11. Who is it for? • Designers • Integrators • Developers jazkarta
  • 12. Who is it for? • Designers • Integrators • Developers • Customers jazkarta
  • 13. How does it work? jazkarta
  • 14. How does it work? move elements from your content jazkarta
  • 15. How does it work? move elements from your content jazkarta
  • 16. How does it work? move elements from your content into placeholders in your theme jazkarta
  • 17. How does it work? move elements from your content into placeholders in your theme jazkarta
  • 18. How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content jazkarta
  • 19. How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content jazkarta
  • 20. Python is magical http://xkcd.com/353/ jazkarta
  • 21. jazkarta
  • 22. Deliverance jazkarta
  • 23. Knowledge needed • HTML • CSS • Firebug • simple editing of XML file jazkarta
  • 24. Four simple rules • drop • replace • prepend • append jazkarta
  • 25. Deliverance benefits • web designer doesn't need to learn CMS templating • separation of concerns • theme multiple apps with one design (trac, wiki, blog, etc.) jazkarta
  • 26. Who is using Deliverance? jazkarta
  • 27. Who is using Deliverance? • plone.org jazkarta
  • 28. Who is using Deliverance? • plone.org • plone.tv jazkarta
  • 29. Who is using Deliverance? • plone.org • plone.tv • Harvard School of Engineering (subsites) jazkarta
  • 30. Who is using Deliverance? • plone.org • plone.tv • Harvard School of Engineering (subsites) • ploneconf2009.org (get the buildout!) jazkarta
  • 31. Who is using Deliverance? • plone.org • plone.tv • Harvard School of Engineering (subsites) • ploneconf2009.org (get the buildout!) • repoze.org (multi-app theming) jazkarta
  • 32. Who is using Deliverance? • plone.org • plone.tv • Harvard School of Engineering (subsites) • ploneconf2009.org (get the buildout!) • repoze.org (multi-app theming) • and many others... jazkarta
  • 33. Case study A real world example of using Deliverance
  • 34. jazkarta
  • 35. jazkarta
  • 36. jazkarta
  • 37. jazkarta
  • 38. "Replace our custom backend with Plone CMS." HaiVision jazkarta
  • 39. "Replace our custom backend with Plone CMS." HaiVision "Sure, we can do that." Jazkarta jazkarta
  • 40. "Replace our custom backend with Plone CMS." HaiVision "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision jazkarta
  • 41. "Replace our custom backend with Plone CMS." HaiVision "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision "No problem." Jazkarta jazkarta
  • 42. "Replace our custom backend with Plone CMS." HaiVision "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 HaiVision ourselves." jazkarta
  • 43. "Replace our custom backend with Plone CMS." HaiVision "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 HaiVision ourselves." "Umm. Ok, you will be able to do that." Jazkarta jazkarta
  • 44. Customers change their mind about their identity all the time. Don't make it painful than it already is for them.
  • 45. "Oh, and we need this done HaiVision in two weeks." Jazkarta
  • 46. "Oh, and we need this done HaiVision in two weeks." "WTF!?" Jazkarta
  • 47. DELIVERANCE Deliverance to the rescue!
  • 48. 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. jazkarta
  • 49. 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 jazkarta
  • 50. Seven Steps to Heaven jazkarta
  • 51. Seven Steps to Heaven 1. Check out and run the Deliverance demo buildout jazkarta
  • 52. 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) jazkarta
  • 53. 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 jazkarta
  • 54. jazkarta
  • 55. 4. Identify the CSS selectors of the elements in the Plone site that we wish to map to the static theme. jazkarta
  • 56. 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. jazkarta
  • 57. 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 jazkarta
  • 58. 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 jazkarta
  • 59. Start your engines! jazkarta
  • 60. 1. Check out and run the demo buildout svn co http://svn.plone.org/svn/collective/deliverancedemo/trunk/ dd Run the bootstrap command and run the buildout cd dd python bootstrap.py bin/buildout -v This will install Deliverance and it's dependencies (lxml) and install a Plone site at /Plone jazkarta
  • 61. 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 jazkarta
  • 62. jazkarta
  • 63. 3. Stick them in a /static dir in your buildout jazkarta
  • 64. 3. Stick them in a /static dir in your buildout jazkarta
  • 65. 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 jazkarta
  • 66. jazkarta
  • 67. jazkarta
  • 68. 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. jazkarta
  • 69. jazkarta
  • 70. jazkarta
  • 71. 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" /> jazkarta
  • 72. rules-training.xml <?xml version="1.0" encoding="UTF-8"?> <ruleset> Open the rules-training.xml file <server-settings> in the buildout directory. <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" /> jazkarta
  • 73. The "plone" rule class <rule class="plone"> <!-- Theme --> <theme href="/static/index.html" /> <!-- Put your rules below this line --> </rule> </ruleset> jazkarta
  • 74. Replace rule for page heading <replace content='children:_______________________' theme='children:_________________' /> jazkarta
  • 75. Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:_________________' /> jazkarta
  • 76. Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:span.sectionTitle' /> jazkarta
  • 77. 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> jazkarta
  • 78. 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 jazkarta
  • 79. Go to http://localhost:5000 ... to see the Plone site themed with Deliverance
  • 80. jazkarta
  • 81. jazkarta
  • 82. Replace navigation tree
  • 83. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' />
  • 84. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' />
  • 85. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' />
  • 86. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree"
  • 87. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree" theme="children:#left-navigation" />
  • 88. 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.
  • 89. How do you theme the sections differently?
  • 90. haivision.com/products jazkarta
  • 91. Apply page class by path <match path="/" class="default" /> <match path="/applications" class="applications" /> <match path="exact:/" class="frontpage" /> jazkarta
  • 92. haivision.com/applications jazkarta
  • 93. haivision.com/applications jazkarta
  • 94. Repurpose static portlet jazkarta
  • 95. Repurpose static portlet jazkarta
  • 96. Repurpose static portlet jazkarta
  • 97. Each page class can have a separate theme & rules jazkarta
  • 98. 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> jazkarta
  • 99. frontpage: haivision.com/ jazkarta
  • 100. frontpage: haivision.com/ jazkarta
  • 101. Repurpose the news portlet jazkarta
  • 102. Repurpose the news portlet jazkarta
  • 103. Repurpose the news portlet jazkarta
  • 104. 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> jazkarta
  • 105. Serve up different web apps jazkarta
  • 106. 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> jazkarta
  • 107. 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 jazkarta
  • 108. Where does Deliverance sit in the stack? Apache Deliverance !"#$ %&'($ jazkarta
  • 109. Where does Deliverance sit in the stack? Apache Deliverance !"#$ %&'($ jazkarta
  • 110. 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. jazkarta
  • 111. 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 jazkarta
  • 112. How is Deliverance better than xdv? jazkarta
  • 113. How is Deliverance better than xdv? • Has a dedicated maintainer jazkarta
  • 114. How is Deliverance better than xdv? • Has a dedicated maintainer • Use CSS selectors instead of only XPath jazkarta
  • 115. How is Deliverance better than xdv? • Has a dedicated maintainer • Use CSS selectors instead of only XPath • Can combine multiple themes without Apache magic jazkarta
  • 116. More 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 through-the-web jazkarta
  • 117. Debugging console
  • 118. Edit rules TTW http://codespeak.net/svn/z3/deliverance/trunk/deliverance/editor/
  • 119. dvsites - wsgi middleware Map domains to different rules files [sites] domains = *.mysite %(here)s/rules/mysite.xml anothersite.com %(here)s/rules/anothersite.xml http://svn.plone.org/svn/collective/dvsites/
  • 120. Future • CSSZenGarden for Plone themes • theme1.demo.plone.org • theme2.demo.plone.org • ...
  • 121. Banjo • jQuery-powered frontend to rules creation • Make rules by point-n-click • Still in proof-of-concept stage jazkarta
  • 122. Banjo demo http://localhost:5000/banjo/
  • 123. Thanks to... Paul Everitt Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
  • 124. Thanks to... Paul Everitt Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
  • 125. Thanks to... Paul Everitt Ian Bicking Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
  • 126. Thanks to... Paul Everitt Ian Bicking Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
  • 127. Thanks to... Paul Everitt Ian Bicking Aaron VanDerlip Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
  • 128. Project pages http://coactivate.org/projects/deliverance/ http://coactivate.org/projects/banjo/ Deliverance documentation and tutorial http://deliverance.openplans.org http://plone.org/docu Sample Deliverance buildouts http://svn.plone.org/svn/collective/ploneconf/buildout/ploneconf/trunk/ http://svn.plone.org/svn/collective/deliverancedemo/trunk jazkarta
  • 129. Banjo sprint this wkend? • jQuery help needed • Python programmers wanted • User interface gurus Put your name on the interest list at: http://www.coactivate.org/projects/banjo/plone-conference-banjo-sprint jazkarta
  • 130. 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/ jazkarta