Theming websites effortlessly with Deliverance (CMSExpo 2010)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Theming websites effortlessly with Deliverance (CMSExpo 2010)

on

  • 3,066 views

Learn how to theme any CMS in 5 minutes with Deliverance, a tool that makes theming easy. It takes content from a CMS and inserts it into placeholders in a theme destination.

Learn how to theme any CMS in 5 minutes with Deliverance, a tool that makes theming easy. It takes content from a CMS and inserts it into placeholders in a theme destination.

Statistics

Views

Total Views
3,066
Views on SlideShare
2,786
Embed Views
280

Actions

Likes
2
Downloads
14
Comments
0

4 Embeds 280

http://blog.jazkarta.com 254
http://www.slideshare.net 13
http://feeds.jazkarta.com 12
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • All platforms try to solve the this. The great battle between design minded folks and development minded folks. <br />
  • <br />
  • sample template <br />
  • <br />
  • typical code, you get distracted <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • We create all sorts of extra infrastructure to account for the above, each solution is different. <br /> <br />
  • <br />
  • <br />
  • Deliverance is a piece of software that proxies the incoming request from a browser, based on the request, it finds the content and the theme that most closely matches the request and returns it to the browser. <br />
  • <br />
  • These rules apply to matched CSS selectors (or Xpath)s <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • the is the routing <br />
  • <br />
  • <br />
  • Marketing dept wants to make a landing page. <br />
  • <br />
  • <br />
  • <br />

Theming websites effortlessly with Deliverance (CMSExpo 2010) Presentation Transcript

  • 1. Deliverance Theming websites effortlessly Nate Aune (@natea) www.jazkarta.com CMSExpo 2010 - Chicago
  • 2. There are obstacles, regardless of platform
  • 3. Example Apply a design to a WordPress site
  • 4. <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ? >/"><?php bloginfo('name'); ?></a></h1> <div class="description"><?php bloginfo('description'); ?></div>
  • 5. <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ? >/"><?php bloginfo('name'); ?></a></h1> <div class="description"><?php bloginfo('description'); ?></div>
  • 6. HTML is forgiving <h1><a href="<?php echo get_option('home'); ?>/"><? php bloginfo('name'); ?></a></h1>
  • 7. Application code is not <h1><a href="<?php echo et_option('home'); ?>/"><? php bloginfo('name'); ?></a></h1>
  • 8. Are you a f ’ender or a b’ender?
  • 9. The current compromise People competent at both People that People that have have design skills coding skills
  • 10. The Deliverance Way Web Web Designers Developers People that know CSS
  • 11. Secret Sauce
  • 12. Where does Deliverance sit in the stack? Apache Deliverance
  • 13. Where does Deliverance sit in the stack? Apache Deliverance
  • 14. Deliverance is a tool for moving content into a theme using CSS selectors and a few rules. The only requirements is that the theme and content source supply HTML. A typical configuration consists of a static HTML file as the theme resource and an application as the content provider.
  • 15. The rules replace append prepend drop
  • 16. Content #content Theme #page .floatRight
  • 17. <theme href="/static/lazydays/index.html" /> <replace content="children:#content" theme="children:#page .floatRight" />
  • 18. #content
  • 19. #header h1 #page .leftColumn #page .floatRight
  • 20. <theme href="/static/lazydays/index.html" /> <replace content="children:#content" theme="children:#page .floatRight" />
  • 21. Talk is cheap
  • 22. #content
  • 23. #header h1 #page .leftColumn #page .floatRight
  • 24. Proxy rule <proxy path="/blog" class="blogtheme" > <response rewrite-links="1" /> <dest href="http://blog.localhost" /> </proxy>
  • 25. <replace content="children:#content" theme="children:#page .floatRight" />
  • 26. Let’s get to work
  • 27. Special pages
  • 28. Benefits • Use any design with any CMS, without touching either one. • Designer and developer can work in parallel without stepping on each others toes. • Designer doesn’t need to know anything about the CMS. Can use their design as is. Less custom theme code to maintain. • Theme multiple applications using a single theme. Makes changes in only one place.
  • 29. Credits • Aaron VanDerlip for the slides • Ian Bicking for making Deliverance Photo credits • http://www.flickr.com/photos/21896484@N02/2726201320 • http://www.flickr.com/photos/disownedlight/3268752278/sizes/l/
  • 30. Find out more • http://deliveranceproject.org/ • http://blog.jazkarta.com