Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Easier and faster Plone theming with Deliverance and xdv

on

  • 4,031 views

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 ...

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.

Statistics

Views

Total Views
4,031
Views on SlideShare
4,031
Embed Views
0

Actions

Likes
1
Downloads
58
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

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

    Easier and faster Plone theming with Deliverance and xdv Easier and faster Plone theming with Deliverance and xdv Presentation Transcript

    • Deliverance a compelling way to Plone sites Nate Aune (@natea) www.jazkarta.com Plone Conference 2010 1
    • Obstacles Plone theming has a high barrier to entry 2
    • 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 3
    • Knowledge needed • Buildout • Paster • Zope page templates (ZPT) • Python • ZCML • resource registry (for CSS and JS) • /skins vs. /browser jazkarta 4
    • Does your head hurt yet? jazkarta 5
    • What is Deliverance? • Middleware tool that serves as a proxy • Maps content HTML into design HTML • Keeps presentation separate from content jazkarta 6
    • Are you a f ’ender or a b’ender? 7
    • Who is it for? jazkarta 8
    • Who is it for? • Designers jazkarta 8
    • Who is it for? • Designers • Integrators jazkarta 8
    • Who is it for? • Designers • Integrators • Developers jazkarta 8
    • Who is it for? • Designers • Integrators • Developers • Customers jazkarta 8
    • The current compromise People competent at both People that People that have have design skills coding skills 9
    • The Deliverance Way Web Web Designers Developers People that know CSS 10
    • How does it work? jazkarta 11
    • How does it work? move elements from your content jazkarta 11
    • How does it work? move elements from your content jazkarta 11
    • How does it work? move elements from your content into placeholders in your theme jazkarta 11
    • How does it work? move elements from your content into placeholders in your theme jazkarta 11
    • How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content jazkarta 11
    • How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content jazkarta 11
    • Python is magical http://xkcd.com/353/ jazkarta 12
    • jazkarta 13
    • Deliverance jazkarta 13
    • Knowledge needed • HTML • CSS • Firebug • simple editing of XML file jazkarta 14
    • Four simple rules • drop • replace • prepend • append jazkarta 15
    • 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 16
    • Who is using Deliverance? jazkarta 17
    • Who is using Deliverance? • Harvard School of Engineering jazkarta 17
    • Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque jazkarta 17
    • Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque • HaiVision.com jazkarta 17
    • Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque • HaiVision.com • ploneconf2009.org (get the buildout!) jazkarta 17
    • Who is using Deliverance? • Harvard School of Engineering • City of Albuquerque • HaiVision.com • ploneconf2009.org (get the buildout!) • and many others... jazkarta 17
    • Case study A real world example of using Deliverance 18
    • jazkarta 19
    • jazkarta 20
    • jazkarta 21
    • jazkarta 22
    • "Replace our custom backend with Plone CMS." HaiVision jazkarta 22
    • "Replace our custom backend with Plone CMS." HaiVision "Sure, we can do that." Jazkarta jazkarta 22
    • "Replace our custom backend with Plone CMS." HaiVision "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision jazkarta 22
    • "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 22
    • "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 22
    • "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 22
    • Customers change their mind about their identity all the time. Don't make it painful than it already is for them. 23
    • "Oh, and we need this done HaiVision in two weeks." Jazkarta 24
    • "Oh, and we need this done HaiVision in two weeks." "WTF!?" Jazkarta 24
    • DELIVERANCE Deliverance to the rescue! 25
    • 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 26
    • 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 27
    • Seven Steps to Heaven jazkarta 28
    • Seven Steps to Heaven 1. Check out and run the Deliverance demo buildout jazkarta 28
    • 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 28
    • 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 28
    • jazkarta 29
    • 4. Identify the CSS selectors of the elements in the Plone site that we wish to map to the static theme. jazkarta 29
    • 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 29
    • 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 29
    • 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 29
    • Start your engines! jazkarta 30
    • 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 31
    • 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 32
    • jazkarta 33
    • 3. Stick them in a /static dir in your buildout jazkarta 34
    • 3. Stick them in a /static dir in your buildout jazkarta 34
    • 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 35
    • jazkarta 36
    • jazkarta 36
    • 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 37
    • jazkarta 38
    • jazkarta 38
    • 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 39
    • 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 39
    • The "plone" rule class <rule class="plone"> <!-- Theme --> <theme href="/static/index.html" /> <!-- Put your rules below this line --> </rule> </ruleset> jazkarta 40
    • Replace rule for page heading <replace content='children:_______________________' theme='children:_________________' /> jazkarta 41
    • Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:_________________' /> jazkarta 42
    • Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:span.sectionTitle' /> jazkarta 43
    • 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 44
    • 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 45
    • Go to http://localhost:5000 ... to see the Plone site themed with Deliverance 46
    • 47
    • 47
    • jazkarta 48
    • jazkarta 48
    • Replace navigation tree 49
    • Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> 49
    • Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> 49
    • Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> 49
    • Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree" 49
    • Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree" theme="children:#left-navigation" /> 49
    • 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
    • How do you theme the sections differently? 50
    • haivision.com/products jazkarta 51
    • Apply page class by path <match path="/" class="default" /> <match path="/applications" class="applications" /> <match path="exact:/" class="frontpage" /> jazkarta 52
    • haivision.com/applications jazkarta 53
    • haivision.com/applications jazkarta 53
    • Repurpose static portlet jazkarta 54
    • Repurpose static portlet jazkarta 54
    • Repurpose static portlet jazkarta 54
    • Each page class can have a separate theme & rules jazkarta 55
    • 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 55
    • frontpage: haivision.com/ jazkarta 56
    • frontpage: haivision.com/ jazkarta 56
    • Repurpose the news portlet jazkarta 57
    • Repurpose the news portlet jazkarta 57
    • Repurpose the news portlet jazkarta 57
    • 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 58
    • Serve up different web apps jazkarta 59
    • 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 59
    • 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 60
    • Where does Deliverance sit in the stack? Apache Deliverance jazkarta 61
    • Where does Deliverance sit in the stack? Apache Deliverance jazkarta 61
    • 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 62
    • Tips and Tricks From the many Plone sites we’ve themed with Deliverance 63
    • 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”> jazkarta 64
    • 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" /> jazkarta 65
    • jazkarta 66
    • jazkarta 66
    • 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> jazkarta 67
    • Embed Constant Contact subscribe form jazkarta 68
    • Embed Constant Contact subscribe form jazkarta 68
    • Embed Constant Contact subscribe form constant-contact.html <div id="constant-contact"> <form ...> ... </form> </div> jazkarta 68
    • Embed Constant Contact subscribe form constant-contact.html <div id="constant-contact"> <form ...> ... </form> </div> <append href="/static/forms/constant-contact.html" content="#constant-contact" theme="children:#leftboxgreen" /> jazkarta 68
    • 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. jazkarta 69
    • menu.html <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> jazkarta 70
    • One replace rule to embed the menubar <replace href="/static/menubar.html" content="children:#menu" theme="children:#menu" /> jazkarta 71
    • Copy the edit bar <prepend content='div.contentActions' theme='#body-content' /> <prepend content='#content-views' theme='#body-content' /> jazkarta 72
    • 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 jazkarta 73
    • <!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> jazkarta 74
    • Injects the Plone toolbar jazkarta 75
    • PyQuery for link in doc('#menu a'): li = doc('<li></li>') link.after(li) link.remove() li.append(link) jazkarta 76
    • 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 77
    • Deliverance vs XDV/Diazo jazkarta 78
    • Deliverance vs XDV/Diazo • Both use CSS selectors or XPath jazkarta 78
    • Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance jazkarta 78
    • Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance • <replace theme="#main" content="#portal-content > *" /> jazkarta 78
    • Deliverance vs XDV/Diazo • Both use CSS selectors or XPath • Deliverance • <replace theme="#main" content="#portal-content > *" /> • XDV jazkarta 78
    • 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 > *" /> jazkarta 78
    • 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 jazkarta 78
    • 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 jazkarta 79
    • Debugging console 80
    • Edit rules TTW http://codespeak.net/svn/z3/deliverance/trunk/deliverance/editor/ 81
    • 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> jazkarta 82
    • Go to Laurence’s XDV talk! 12:05 at Wessex on thursday http://laplone.org/presentations/deliverance-vs-xdv-wpd2010.pdf 83
    • 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
    • Thanks to... Paul Everitt 85
    • Thanks to... Paul Everitt 85
    • Thanks to... Paul Everitt Ian Bicking 85
    • Thanks to... Paul Everitt Ian Bicking 85
    • Thanks to... Paul Everitt Ian Bicking Aaron VanDerlip 85
    • deliveranceproject.org 86
    • 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 87
    • 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 88