Deliverance
a compelling way to Plone sites
Nate Aune
www.jazkarta.com
Plone Conference 2009
Slides to add
•   if-content

    •   used to match certain templates
•   proxy to live site

    •   jquery.com example -...
Obstacles
Plone theming has a
high barrier to entry
Theming in Plone
         an exercise in patience
•   Install dependencies (Python, XCode, GCC)
•   Create a theme egg usi...
Knowledge needed
•   Buildout
•   Paster
•   Zope page templates (ZPT)
•   Python
•   ZCML
•   resource registry (for CSS ...
Does your head   hurt yet?
                     jazkarta
What is Deliverance?


•   Middleware tool that serves as a proxy
•   Maps content HTML into design HTML
•   Keeps present...
Who is it for?




                 jazkarta
Who is it for?

•   Designers




                         jazkarta
Who is it for?

•   Designers
•   Integrators




                          jazkarta
Who is it for?

•   Designers
•   Integrators
•   Developers




                          jazkarta
Who is it for?

•   Designers
•   Integrators
•   Developers
•   Customers



                          jazkarta
How does it work?




                    jazkarta
How does it work?
move elements from your content




                                  jazkarta
How does it work?
move elements from your content




                                  jazkarta
How does it work?
move elements from your content


into placeholders in your theme




                                  ...
How does it work?
move elements from your content


into placeholders in your theme




                                  ...
How does it work?
move elements from your content


into placeholders in your theme


... without touching the theme or co...
How does it work?
move elements from your content


into placeholders in your theme


... without touching the theme or co...
Python
  is
magical




http://xkcd.com/353/   jazkarta
jazkarta
Deliverance




              jazkarta
Knowledge needed

•   HTML
•   CSS
•   Firebug
•   simple editing of XML file



                                jazkarta
Four simple rules

•   drop
•   replace
•   prepend
•   append



                         jazkarta
Deliverance benefits


•   web designer doesn't need to learn CMS templating
•   separation of concerns
•   theme multiple ...
Who is using Deliverance?




                      jazkarta
Who is using Deliverance?

•   plone.org




                      jazkarta
Who is using Deliverance?

•   plone.org
•   plone.tv




                      jazkarta
Who is using Deliverance?

•   plone.org
•   plone.tv
•   Harvard School of Engineering (subsites)




                   ...
Who is using Deliverance?

•   plone.org
•   plone.tv
•   Harvard School of Engineering (subsites)
•   ploneconf2009.org (...
Who is using Deliverance?

•   plone.org
•   plone.tv
•   Harvard School of Engineering (subsites)
•   ploneconf2009.org (...
Who is using Deliverance?

•   plone.org
•   plone.tv
•   Harvard School of Engineering (subsites)
•   ploneconf2009.org (...
Case study
A real world example of using Deliverance
jazkarta
jazkarta
jazkarta
jazkarta
"Replace our custom backend with Plone CMS."
HaiVision




                                                   jazkarta
"Replace our custom backend with Plone CMS."
HaiVision


                             "Sure, we can do that."
            ...
"Replace our custom backend with Plone CMS."
HaiVision


                              "Sure, we can do that."
           ...
"Replace our custom backend with Plone CMS."
HaiVision


                              "Sure, we can do that."
           ...
"Replace our custom backend with Plone CMS."
HaiVision


                              "Sure, we can do that."
           ...
"Replace our custom backend with Plone CMS."
HaiVision


                              "Sure, we can do that."
           ...
Customers
change their
 mind about
their identity
 all the time.
Don't make it painful than
 it already is for them.
"Oh, and we need this done
HaiVision   in two weeks."




                                  Jazkarta
"Oh, and we need this done
HaiVision   in two weeks."




                      "WTF!?"     Jazkarta
DELIVERANCE




               Deliverance
              to the rescue!
Why Deliverance?
•   They have three different sections of the
    site, each needing to be themed differently.
•   They w...
Why not a Plone theme?
•   Significant man hours to make a pixel perfect Plone
    theme
•   Difficult to apply a different ...
Seven Steps to Heaven




                    jazkarta
Seven Steps to Heaven

1. Check out and run the Deliverance demo buildout




                                           j...
Seven Steps to Heaven

1. Check out and run the Deliverance demo buildout
2. Prepare your HTML/CSS files (might need to do
...
Seven Steps to Heaven

1. Check out and run the Deliverance demo buildout
2. Prepare your HTML/CSS files (might need to do
...
jazkarta
4. Identify the CSS selectors of the elements in the
   Plone site that we wish to map to the static
   theme.




       ...
4. Identify the CSS selectors of the elements in the
   Plone site that we wish to map to the static
   theme.
5. Identify...
4. Identify the CSS selectors of the elements in the
   Plone site that we wish to map to the static
   theme.
5. Identify...
4. Identify the CSS selectors of the elements in the
   Plone site that we wish to map to the static
   theme.
5. Identify...
Start your engines!   jazkarta
1. Check out and run
          the demo buildout
svn co http://svn.plone.org/svn/collective/deliverancedemo/trunk/ dd



R...
2. Prepare your HTML/CSS

•   An HTML/CSS template that you downloaded
    from somewhere
•   Design assets that were give...
jazkarta
3. Stick them in a /static
   dir in your buildout




                        jazkarta
3. Stick them in a /static
   dir in your buildout




                        jazkarta
4. Identify elements in
Plone to map to design

•   Firebug is your friend (www.getfirebug.com)
•   Click on elements to ge...
jazkarta
jazkarta
5. Identify the corresponding
     element in the theme
  •   You may need to add a class or ID to better
      identify t...
jazkarta
jazkarta
rules-training.xml
<?xml version="1.0" encoding="UTF-8"?>
<ruleset>

  <server-settings>
    <server>0.0.0.0:5000</server>...
rules-training.xml
<?xml version="1.0" encoding="UTF-8"?>
<ruleset>

                Open the rules-training.xml file
  <se...
The "plone" rule class
<rule class="plone">

   <!-- Theme -->
   <theme href="/static/index.html" />

   <!-- Put your ru...
Replace rule
            for page heading

<replace content='children:_______________________'

           theme='children...
Replace rule
            for page heading

<replace content='children:h1.documentFirstHeading'

           theme='children...
Replace rule
            for page heading

<replace content='children:h1.documentFirstHeading'

           theme='children...
6. Insert our rule into the
      rules-training.xml file
<rule class="plone">

   <!-- Theme -->
   <theme href="/static/i...
Let's start up Zope and
          the Deliverance proxy
$ cd dd

$ bin/instance start
. . daemon process started, pid=3556...
Go to
http://localhost:5000
... to see the Plone site themed with Deliverance
jazkarta
jazkarta
Replace navigation tree
Replace navigation tree

<drop content='.portletNavigationTree dt.portletHeader' />
Replace navigation tree

<drop content='.portletNavigationTree dt.portletHeader' />

<drop content='li.navTreeItem img' />
Replace navigation tree

<drop content='.portletNavigationTree dt.portletHeader' />

<drop content='li.navTreeItem img' />
Replace navigation tree

<drop content='.portletNavigationTree dt.portletHeader' />

<drop content='li.navTreeItem img' />...
Replace navigation tree

<drop content='.portletNavigationTree dt.portletHeader' />

<drop content='li.navTreeItem img' />...
Replace navigation tree

<drop content='.portletNavigationTree dt.portletHeader' />

<drop content='li.navTreeItem img' />...
How do you theme the
 sections differently?
haivision.com/products




                     jazkarta
Apply page class by path

<match path="/" class="default" />



<match path="/applications" class="applications" />



<ma...
haivision.com/applications




                       jazkarta
haivision.com/applications




                       jazkarta
Repurpose static portlet




                      jazkarta
Repurpose static portlet




                      jazkarta
Repurpose static portlet




                      jazkarta
Each page class can have
a separate theme & rules




                      jazkarta
Each page class can have
 a separate theme & rules
<rule class="applications" suppress-standard="1">

    <theme href="/st...
frontpage: haivision.com/




                       jazkarta
frontpage: haivision.com/




                       jazkarta
Repurpose the news portlet




                      jazkarta
Repurpose the news portlet




                      jazkarta
Repurpose the news portlet




                      jazkarta
Frontpage has it's own
       theme and rules
<rule class="frontpage">

    <theme href="/static/frontpage.html"/>

    <d...
Serve up different web apps




                       jazkarta
Serve up different web apps
<proxy path="/trac" class="trac">
  <dest href="http://localhost:10002" />
</proxy>


<proxy p...
How do I deploy Deliverance
     into production?
   •   Run as a proxy on port 5000. Apache or
       Nginx proxies to po...
Where does Deliverance
   sit in the stack?

                Apache




        Deliverance

        !"#$
        %&'($


...
Where does Deliverance
   sit in the stack?

                Apache




        Deliverance

        !"#$
        %&'($


...
7. Make the Apache vhost
<VirtualHost *:80>

    ServerName www.haivision.com

    ProxyPreserveHost On

    RewriteEngine...
What about
         performance?
•   Deliverance respects caching headers
•   Pages load fast because they don't have to
 ...
How is Deliverance
 better than xdv?




                     jazkarta
How is Deliverance
         better than xdv?

•   Has a dedicated maintainer




                                 jazkarta
How is Deliverance
         better than xdv?

•   Has a dedicated maintainer
•   Use CSS selectors instead of only XPath

...
How is Deliverance
         better than xdv?

•   Has a dedicated maintainer
•   Use CSS selectors instead of only XPath
•...
More Deliverance advantages

•   Serves static resources directly from the file system.
    No need to make a skin or serve...
Debugging console
Edit rules TTW




http://codespeak.net/svn/z3/deliverance/trunk/deliverance/editor/
dvsites - wsgi middleware
          Map domains to different rules files

[sites]

domains =

   *.mysite            %(here...
Future

•   CSSZenGarden for Plone themes

    •   theme1.demo.plone.org
    •   theme2.demo.plone.org
    •   ...
Banjo

•   jQuery-powered frontend to rules creation
•   Make rules by point-n-click
•   Still in proof-of-concept stage

...
Banjo demo
http://localhost:5000/banjo/
Thanks to...


Paul Everitt




                               Fred van Dijk
                               Reinout van Re...
Thanks to...


Paul Everitt




                               Fred van Dijk
                               Reinout van Re...
Thanks to...


Paul Everitt     Ian Bicking




                               Fred van Dijk
                             ...
Thanks to...


Paul Everitt     Ian Bicking




                               Fred van Dijk
                             ...
Thanks to...


Paul Everitt     Ian Bicking   Aaron VanDerlip




                                Fred van Dijk
          ...
Project pages
http://coactivate.org/projects/deliverance/
http://coactivate.org/projects/banjo/


Deliverance documentatio...
Banjo sprint this wkend?

       •   jQuery help needed
       •   Python programmers wanted
       •   User interface gur...
Photo credits
•   http://www.flickr.com/photos/sir_mervs/2697096089/
•   http://www.flickr.com/photos/foxypar4/1004464889
• ...
Deliverance - a compelling way to theme Plone sites
Deliverance - a compelling way to theme Plone sites
Deliverance - a compelling way to theme Plone sites
Deliverance - a compelling way to theme Plone sites
Deliverance - a compelling way to theme Plone sites
Deliverance - a compelling way to theme Plone sites
Deliverance - a compelling way to theme Plone sites
Deliverance - a compelling way to theme Plone sites
Upcoming SlideShare
Loading in...5
×

Deliverance - a compelling way to theme Plone sites

4,989

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,989
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
103
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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&apos;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 &quot;You&apos;re flying! How?&quot; and the guy up in the sky says, &quot;Python!&quot;
  • plone.org is actually using xdv, but same underlying technology
    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
    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
    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
    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
    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
    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 &quot;products_files&quot; in index.html to &quot;images&quot;
  • 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

    1. 1. Deliverance a compelling way to Plone sites Nate Aune www.jazkarta.com Plone Conference 2009
    2. 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. 3. Obstacles Plone theming has a high barrier to entry
    4. 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. 5. Knowledge needed • Buildout • Paster • Zope page templates (ZPT) • Python • ZCML • resource registry (for CSS and JS) • /skins vs. /browser jazkarta
    6. 6. Does your head hurt yet? jazkarta
    7. 7. What is Deliverance? • Middleware tool that serves as a proxy • Maps content HTML into design HTML • Keeps presentation separate from content jazkarta
    8. 8. Who is it for? jazkarta
    9. 9. Who is it for? • Designers jazkarta
    10. 10. Who is it for? • Designers • Integrators jazkarta
    11. 11. Who is it for? • Designers • Integrators • Developers jazkarta
    12. 12. Who is it for? • Designers • Integrators • Developers • Customers jazkarta
    13. 13. How does it work? jazkarta
    14. 14. How does it work? move elements from your content jazkarta
    15. 15. How does it work? move elements from your content jazkarta
    16. 16. How does it work? move elements from your content into placeholders in your theme jazkarta
    17. 17. How does it work? move elements from your content into placeholders in your theme jazkarta
    18. 18. How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content jazkarta
    19. 19. How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content jazkarta
    20. 20. Python is magical http://xkcd.com/353/ jazkarta
    21. 21. jazkarta
    22. 22. Deliverance jazkarta
    23. 23. Knowledge needed • HTML • CSS • Firebug • simple editing of XML file jazkarta
    24. 24. Four simple rules • drop • replace • prepend • append jazkarta
    25. 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. 26. Who is using Deliverance? jazkarta
    27. 27. Who is using Deliverance? • plone.org jazkarta
    28. 28. Who is using Deliverance? • plone.org • plone.tv jazkarta
    29. 29. Who is using Deliverance? • plone.org • plone.tv • Harvard School of Engineering (subsites) jazkarta
    30. 30. Who is using Deliverance? • plone.org • plone.tv • Harvard School of Engineering (subsites) • ploneconf2009.org (get the buildout!) jazkarta
    31. 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. 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. 33. Case study A real world example of using Deliverance
    34. 34. jazkarta
    35. 35. jazkarta
    36. 36. jazkarta
    37. 37. jazkarta
    38. 38. "Replace our custom backend with Plone CMS." HaiVision jazkarta
    39. 39. "Replace our custom backend with Plone CMS." HaiVision "Sure, we can do that." Jazkarta jazkarta
    40. 40. "Replace our custom backend with Plone CMS." HaiVision "Sure, we can do that." Jazkarta "Keep the frontend design the same." HaiVision jazkarta
    41. 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. 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. 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. 44. Customers change their mind about their identity all the time. Don't make it painful than it already is for them.
    45. 45. "Oh, and we need this done HaiVision in two weeks." Jazkarta
    46. 46. "Oh, and we need this done HaiVision in two weeks." "WTF!?" Jazkarta
    47. 47. DELIVERANCE Deliverance to the rescue!
    48. 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. 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. 50. Seven Steps to Heaven jazkarta
    51. 51. Seven Steps to Heaven 1. Check out and run the Deliverance demo buildout jazkarta
    52. 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. 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. 54. jazkarta
    55. 55. 4. Identify the CSS selectors of the elements in the Plone site that we wish to map to the static theme. jazkarta
    56. 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. 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. 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. 59. Start your engines! jazkarta
    60. 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. 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. 62. jazkarta
    63. 63. 3. Stick them in a /static dir in your buildout jazkarta
    64. 64. 3. Stick them in a /static dir in your buildout jazkarta
    65. 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. 66. jazkarta
    67. 67. jazkarta
    68. 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. 69. jazkarta
    70. 70. jazkarta
    71. 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. 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. 73. The "plone" rule class <rule class="plone"> <!-- Theme --> <theme href="/static/index.html" /> <!-- Put your rules below this line --> </rule> </ruleset> jazkarta
    74. 74. Replace rule for page heading <replace content='children:_______________________' theme='children:_________________' /> jazkarta
    75. 75. Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:_________________' /> jazkarta
    76. 76. Replace rule for page heading <replace content='children:h1.documentFirstHeading' theme='children:span.sectionTitle' /> jazkarta
    77. 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. 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. 79. Go to http://localhost:5000 ... to see the Plone site themed with Deliverance
    80. 80. jazkarta
    81. 81. jazkarta
    82. 82. Replace navigation tree
    83. 83. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' />
    84. 84. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' />
    85. 85. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' />
    86. 86. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree"
    87. 87. Replace navigation tree <drop content='.portletNavigationTree dt.portletHeader' /> <drop content='li.navTreeItem img' /> <replace content="dl.portletNavigationTree" theme="children:#left-navigation" />
    88. 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. 89. How do you theme the sections differently?
    90. 90. haivision.com/products jazkarta
    91. 91. Apply page class by path <match path="/" class="default" /> <match path="/applications" class="applications" /> <match path="exact:/" class="frontpage" /> jazkarta
    92. 92. haivision.com/applications jazkarta
    93. 93. haivision.com/applications jazkarta
    94. 94. Repurpose static portlet jazkarta
    95. 95. Repurpose static portlet jazkarta
    96. 96. Repurpose static portlet jazkarta
    97. 97. Each page class can have a separate theme & rules jazkarta
    98. 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. 99. frontpage: haivision.com/ jazkarta
    100. 100. frontpage: haivision.com/ jazkarta
    101. 101. Repurpose the news portlet jazkarta
    102. 102. Repurpose the news portlet jazkarta
    103. 103. Repurpose the news portlet jazkarta
    104. 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. 105. Serve up different web apps jazkarta
    106. 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. 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. 108. Where does Deliverance sit in the stack? Apache Deliverance !"#$ %&'($ jazkarta
    109. 109. Where does Deliverance sit in the stack? Apache Deliverance !"#$ %&'($ jazkarta
    110. 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. 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. 112. How is Deliverance better than xdv? jazkarta
    113. 113. How is Deliverance better than xdv? • Has a dedicated maintainer jazkarta
    114. 114. How is Deliverance better than xdv? • Has a dedicated maintainer • Use CSS selectors instead of only XPath jazkarta
    115. 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. 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. 117. Debugging console
    118. 118. Edit rules TTW http://codespeak.net/svn/z3/deliverance/trunk/deliverance/editor/
    119. 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. 120. Future • CSSZenGarden for Plone themes • theme1.demo.plone.org • theme2.demo.plone.org • ...
    121. 121. Banjo • jQuery-powered frontend to rules creation • Make rules by point-n-click • Still in proof-of-concept stage jazkarta
    122. 122. Banjo demo http://localhost:5000/banjo/
    123. 123. Thanks to... Paul Everitt Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
    124. 124. Thanks to... Paul Everitt Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
    125. 125. Thanks to... Paul Everitt Ian Bicking Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
    126. 126. Thanks to... Paul Everitt Ian Bicking Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
    127. 127. Thanks to... Paul Everitt Ian Bicking Aaron VanDerlip Fred van Dijk Reinout van Rees Jordan Baker Eric Steele
    128. 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. 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. 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
    1. Gostou de algum slide específico?

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

    ×