Search

Deliverance: Plone theming without the learning curve from Plone Symposium East 2009

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.

2 comments

Comments 1 - 2 of 2 previous next Post a comment

  • + bwangman Brett Wangman 5 months ago
    Great work Nate.

    I couldn’t attend the conference but our main Plone development partner had great things to say about Deliverance. While some of the technical details are beyond me, the practical applications are not. We are working on launching a new technology platform for one of our association clients that will require 3 different applications (including Plone) to share the same theme. Deliverance may be the perfect answer.

    Thanks for your hard work (and to those who helped you!). This is very important if we are going to continue to compete with other CMS’s where theming is a little easier.

    Brett
  • + guestbaa70d guestbaa70d 5 months ago
    very useful
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1



































Designers - \"for people who think Photoshop is lickable\" as Paul Everitt says)
Integrators (\"People who's job it is to make Plone work for other people\")
Customers (who already have and manage a corporate identity)
First-timers (who want a quick win without too many new concepts)

Consulting projects (where \"branding\" is already managed by non-developer)
Heterogenous environment where the same theme must be shared across multiple applications (wiki, blog, mailman, bug tracker)
Designers are not familiar with Plone and you need to iterate rapidly with design


- Performance and flexibility (designers' css, js, images can be served up from disk, rather than plone)
- Works with Python (and non-Python) \"we catch the markup on the way out the door and modify it\"

- I'm both the developer and UI person (separation of concerns is overhead)












blog using pyblogsom

roundup for bug tracking

Mailman for mailing lists





































































































































9 Favorites

Deliverance: Plone theming without the learning curve from Plone Symposium East 2009 - Presentation Transcript

  1. Deliverance Deliverance Plone theming without the learning curve Plone Symposium East 2009 State College, PA May 29, 2009 Nate Aune www.jazkarta.com
  2. Who am I? • Using Plone since 2002 • Founder/President of Jazkarta since 2004 • Not a designer but work with many designers
  3. Put this nav and content...
  4. Put this nav and content...
  5. Put this nav and content...
  6. ...into this website design.
  7. ...into this website design.
  8. ...into this website design.
  9. Voila!
  10. Voila!
  11. Voila!
  12. How long did this take?
  13. 2 minutes
  14. How many lines of code?
  15. 2 rules
  16. And I didn't touch www.psu.edu (honest)
  17. Agenda • What is the problem with Plone theming? • What is Deliverance? • Who is it for? • When might you consider using Deliverance? • Who is using it? • How do you use it? • Q&A
  18. 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
  19. Knowledge needed • Buildout • Paster • Zope page templates (ZPT) • Python • ZCML • resource registry (for CSS and JS) • /skins vs. /browser
  20. Designers are not coders \"It is a significant disadvantage if the designers and HTML/CSS coders are not familiar with Plone, but it's incredibly difficult to find top designers who have even heard of Plone.\" - Scott Paley (Abstract Edge)
  21. Who is it for? • Designers • Integrators • Customers • First-timers
  22. When you might consider using Deliverance? • Consulting projects • Heterogenous environment • Designers are not familiar with Plone
  23. Why use it? • Designers don't want to learn unusual stuff • Sometimes the design already exists • Reduce size of stuff-unique-to-Plone • Performance and flexibility • Works with Python (and non-Python)
  24. Why not? • Plone 2.5/3.0 is easy enough to theme • Might be hard, but worth it • I'm both the developer and UI person • I'll need to stray over the line anyway • Plone needs to stop changing
  25. Who is using it? • The Open Planning Project • repoze.org • plone.tv • plone.org
  26. TOPP • Many different systems • All being themed using Deliverance • topp.openplans.org
  27. TOPP One Deliverance theme for: • Plone site • Wordpress site • Task tracker
  28. repoze.org nginx Deliverance proxy proxy
  29. Home page
  30. Blog
  31. Issue tracker
  32. Mailing lists
  33. plone.tv uses Deliverance
  34. plone.org uses Deliverance
  35. How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content
  36. Black magic? (well, not really) • uses a rule file to govern the merging • rules are verbs of common actions • use CSS selectors or XPath to identify elements to act on
  37. What are the verbs? • drop • append • prepend • replace Rules documentation: http://deliverance.openplans.org/configuration.html
  38. Let's look at an example
  39. How do I make this...
  40. ...look like this? http://www.oswd.org/design/preview/id/3293
  41. With Deliverance! Deliverance
  42. Replace the logo • Replace the logo in the theme with the logo in the Plone site. • Use Firebug to identify the CSS selectors • Use the <replace> verb since we only want one logo.
  43. #portal-logo img
  44. #logo h1
  45. Rule to replace logo <replace content=\"____________\" theme=\"_______\" />
  46. Rule to replace logo <replace content=\"#portal-logo img\" theme=\"________\" />
  47. Rule to replace logo <replace content=\"#portal-logo img\" theme=\"#logo h1\" />
  48. Logo placeholder is replaced with real logo
  49. Slightly more complex example • Replace horizontal navigation tabs with Plone's portal_tabs • Uses children: to select the children elements • Keeps parent which has the proper CSS attributes for the theme style.
  50. children:#portal-globalnav
  51. children:#links ul
  52. Rule to replace navigation <replace content=\"__________________\" theme=\"____________\" />
  53. Rule to replace navigation <replace content=\"children:#portal-globalnav\" theme=\"____________\" />
  54. Rule to replace navigation <replace content=\"children:#portal-globalnav\" theme=\"children:#links ul\" />
  55. Dummy text for top navigation is replaced
  56. Introducing XPath • Replace page title and description and body text • Theme doesn't have explicit identifiers for the description and body text fields • We can use Firebug to tell us the XPath expression for these elements.
  57. children:#parent-fieldname-title
  58. children:div#leftbar h2
  59. Rule to replace heading <replace content=\"children:#parent-fieldname-title\" theme=\"children:div#leftbar h2\" />
  60. p.documentDescription
  61. No class or id for this
  62. Use XPath to get the element identifier
  63. XPath • The XPath expression that Firebug gives us: • /html/body/div/div/div[3]/div[2]/p • since the <div> above the <p> has an ID, we can use this shorthand notation: • //*[@id=\"leftbar\"]/p
  64. Replace the first paragraph with the document description <replace content=\"p.documentDescription\" theme=\"//*[@id=\"leftbar\"]/p\" />
  65. children:#parent-fieldname-text
  66. What is the XPath for the 2nd paragraph?
  67. What is the XPath for the 2nd paragraph? • children://*[@id=\"leftbar\"]/p[2]
  68. Map body text to 2nd paragraph <replace content=\"children:#parent-fieldname-text\" theme=\"children://*[@id=\"leftbar\"]/p[2]\" />
  69. Logo, nav, heading, description, body text
  70. Logo, nav, heading, description, body text
  71. XPath of more link
  72. Remove the more link with drop <drop theme='/html/body/div/div/div[3]/div/a' />
  73. Other cool features of Deliverance 0.3 • modify attributes • drop a particular CSS file • conditionals (when logged in, when not) • load content from external sources • rewriting - don't need a local dev environment • debugging console
  74. Modify attributes Replace tags
  75. Debugging console
  76. Edit rules TTW
  77. Ways to run deliverance • proxy • WSGI middleware using repoze • xdv (using Martin's collective.xdv)
  78. Proxy • Deliverance runs on port 5000 and forwards requests on to port 8080 • Two separate Python processes
  79. WSGI Middleware • Deliverances runs as WSGI middleware • Only one Python process • Example showing Zope and Zine running in same process
  80. Make your blog look like your Plone site
  81. Zine - python blogging tool
  82. paste.ini [pipeline:zope] [filter:deliverance] pipeline = egg:Paste#cgitb use = egg:deliverance#main egg:Paste#httpexceptions rule_filename = %(here)s/rules.xml egg:repoze.retry#retry egg:repoze.tm#tm [server:main] egg:repoze.vhm#vhm_xheaders use = egg:repoze.zope2#zserver errorlog host = localhost zope2 port = 8080cat [pipeline:blog] [composite:main] pipeline = egg:Paste#cgitb use = egg:Paste#urlmap egg:Paste#httpexceptions /blog = blog errorlog /zope = zope deliverance zine
  83. rules.xml <ruleset> <theme href=\"/zope/Plone/main_template\" /> <rule> <prepend theme=\"//head\" content=\"//head/link\" nocontent=\"ignore\" /> <prepend theme=\"//head\" content=\"//head/style\" nocontent=\"ignore\" /> <append theme=\"//head\" content=\"//head/script\" nocontent=\"ignore\" /> <append theme=\"//head\" content=\"//head/meta\" nocontent=\"ignore\" /> <replace theme=\"//head/title\" content=\"//head/title\" nocontent=\"ignore\" /> <!-- we don't need the reddit zine links --> <drop content=\"//div[@class='reddit']\"/> <!-- let's drop the breadcrumbs from the plone theme --> <drop theme=\"#portal-breadcrumbs\"/> <!-- let's drop the plone login box --> <drop theme=\"//td[@id='portal-column-one']/div/div\"/> <!-- put the zine portlets in column one --> <append theme=\"//td[@id='portal-column-one']/div\" content=\"//div[@class='sidebar']/*\" nocontent=\"ignore\"/> <!-- put the body of the zine in the content region --> <append theme=\"children:#region-content\" content=\"children://div[@class='contents']\" nocontent=\"ignore\" /> <!-- put the administrative links in column two --> <prepend theme=\"children:#portal-column-two\" content=\"//div[@class='body']/ul\" nocontent=\"ignore\"/> <!-- make sure the login box has a spot when we need it --> <append theme=\"#viewlet-above-content\" content=\"//div[@class='login-box']\" nocontent=\"ignore\"/> </rule> </ruleset>
  84. Zine themed as Plone
  85. collective.xdv • tightly integration solution with Plone • applies a transformation to Plone's HTML output, using the XDV compiler • XDV is an implementation of Deliverance, specifically the original Deliverance XML- based syntax • Compiles the theme (an HTML file) and rules (an XML file) into a single XSLT file, which is then applied to Plone's HTML on render.
  86. collective.xdv
  87. xdv vs. Deliverance 0.3 Pros and Cons
  88. Pros for xdv • Deployment is simpler, as pure XSLT • No runtime overhead of another long- running Python process
  89. Cons for xdv • Somewhat less natural selectors/rules (i.e. you can't use CSS selectors, at least not directly) • Less momentum • The dv.xdvproxy that lets you use xdv on- the-fly with WSGI has some issues and is not intended for production use.
  90. Pros for Deliverance 0.3 • Has a dedicated maintainer • More powerful - can combine multiple themes without requiring Apache magic, for example • CSS selectors
  91. Cons for Deliverance 0.3 • More power means people will start doing crazy things • Makes most sense (for Plone) in a WSGI pipeline, but that aspect is not quite as developed yet, and Plone is not WSGI-ified until 4.0. • Requires a long-running process until we're talking about a full WSGI stack or mod_wsgi
  92. Thanks to... Paul Everitt
  93. Thanks to... Paul Everitt
  94. Thanks to... Paul Everitt Ian Bicking
  95. Thanks to... Paul Everitt Ian Bicking
  96. Thanks to... Paul Everitt Ian Bicking Aaron VanDerlip
  97. Your chance to contribute and learn! Deliverance documentation sprint • produce the Definitive Deliverance tutorial • help promote and disseminate information about Deliverance • make Plone theming easier for all!
  98. Your chance to contribute and learn! Deliverance documentation sprint • produce the Definitive • learn the easiest way to theme your Plone Deliverance tutorial sites • help promote and • learn hands-on how disseminate information Deliverance works about Deliverance • make Plone theming • get all your Deliverance questions easier for all! answered
  99. More info • http://svn.plone.org/svn/collective/deliverancedemo/ • http://www.openplans.org/projects/deliverance/ introduction • http://deliverance.openplans.org/configuration.html • http://plone.tv/media/1884178516/view (Ian's talk) • http://plone.tv/media/1099397680/view (Paul's talk) • http://pypi.python.org/pypi/collective.xdv/ • http://www.sixfeetup.com/blog/2009/4/27/deploying- plone-and-zine-together-with-deliverance-using- repoze
  100. Photo credits • http://www.flickr.com/photos/sir_mervs/ 2697096089/

+ Jazkarta, Inc.Jazkarta, Inc., 5 months ago

custom

3399 views, 9 favs, 3 embeds more stats

This talk describes how to theme a Plone site using more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 3399
    • 3303 on SlideShare
    • 96 from embeds
  • Comments 2
  • Favorites 9
  • Downloads 87
Most viewed embeds
  • 94 views on http://blogs.onenw.org
  • 1 views on http://www.tcag.com
  • 1 views on http://jstahl.org

more

All embeds
  • 94 views on http://blogs.onenw.org
  • 1 views on http://www.tcag.com
  • 1 views on http://jstahl.org

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

-->
Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved