SlideShare une entreprise Scribd logo
1  sur  39
Deliverance
Theming websites effortlessly
Aaron VanDerlip
www.jazkarta.com
World Plone Day 2010
There are obstacles, regardless of platform
Example
Apply a design to a
 WordPress site
<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>
<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>
HTML is forgiving
<h1><a href="<?php echo get_option('home'); ?>/"><?
php bloginfo('name'); ?></a></h1>
Application code is not
<h1><a href="<?php echo et_option('home'); ?>/"><?
php bloginfo('name'); ?></a></h1>
The current
  compromise
     People competent at both




People that          People that have
have design skills       coding skills
The Deliverance Way


  Web             Web Designers
  Developers



           People that know CSS
Secret Sauce
Where does Deliverance
   sit in the stack?


          Apache



       Deliverance
Where does Deliverance
   sit in the stack?


          Apache



       Deliverance
Deliverance is a tool for moving content 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 as the them resource and an application as the
content provider.
The rules
replace
append
prepend
drop
Content
#content




     Theme
 #page .floatRight
<theme href="/static/lazydays/
index.html" />


<replace
content="children:#content"
theme="children:#page
.floatRight" />
#content
#page .floatRight
<theme href="/static/lazydays/
index.html" />


<replace
content="children:#content"
theme="children:#page
.floatRight" />
Talk is cheap
#content
#page .floatRight
Proxy rule
<proxy path="/blog" class="blogtheme" >
  <response rewrite-links="1" />
<dest href="http://blog.localhost" />
 </proxy>
<replace
content="children:#content"
theme="children:#page
.floatRight" />
Let’s get to work
Special pages
Photo credits

• http://www.flickr.com/photos/
  21896484@N02/2726201320
• http://www.flickr.com/photos/
  disownedlight/3268752278/sizes/l/
Find out more


• http://blog.jazkarta.com
• http://deliverance.openplans.org/

Contenu connexe

Tendances

Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers Jessica C. Gardner
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basicsJames VanDyke
 
Trends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for EmailTrends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for EmailSparkPost
 
Theming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesTheming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesJun Hu
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
JavaScript Introduction
JavaScript IntroductionJavaScript Introduction
JavaScript IntroductionJainul Musani
 
Custom Menu Support for WordPress Themes
Custom Menu Support for WordPress ThemesCustom Menu Support for WordPress Themes
Custom Menu Support for WordPress ThemesDaisyOlsen
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXStoian Dipchikov
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LABHTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LABpriya Nithya
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short introjeiseman
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQueryDanWooster1
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 

Tendances (20)

Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basics
 
Trends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for EmailTrends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for Email
 
Theming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesTheming Wordpress for Your Showcases
Theming Wordpress for Your Showcases
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
JavaScript Introduction
JavaScript IntroductionJavaScript Introduction
JavaScript Introduction
 
HTML5
HTML5 HTML5
HTML5
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
Css multi background
Css   multi backgroundCss   multi background
Css multi background
 
Custom Menu Support for WordPress Themes
Custom Menu Support for WordPress ThemesCustom Menu Support for WordPress Themes
Custom Menu Support for WordPress Themes
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LABHTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
HTTP REQUEST RESPONSE OBJECT - WEB APPLICATION USING C# LAB
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short intro
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 

Similaire à Deliverance talk at plone meetup

Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Jazkarta, Inc.
 
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...Shift Conference
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
Getting to know perch — and perch runway!
Getting to know perch — and perch runway!Getting to know perch — and perch runway!
Getting to know perch — and perch runway!Abigail Larsen
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateLaura Scott
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)christopherfross
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
DRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersDRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersJames Gray
 
Wordpress: A Tool for online Earning
Wordpress: A Tool for online EarningWordpress: A Tool for online Earning
Wordpress: A Tool for online Earningmarpasha
 
The Users are Restless
The Users are RestlessThe Users are Restless
The Users are RestlessTerry Ryan
 

Similaire à Deliverance talk at plone meetup (20)

Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
 
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
Getting to know perch — and perch runway!
Getting to know perch — and perch runway!Getting to know perch — and perch runway!
Getting to know perch — and perch runway!
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
Seo Cheat Sheet
Seo Cheat SheetSeo Cheat Sheet
Seo Cheat Sheet
 
Seo cheat-sheet
Seo cheat-sheetSeo cheat-sheet
Seo cheat-sheet
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
Css
CssCss
Css
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
DRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersDRYing Up Rails Views and Controllers
DRYing Up Rails Views and Controllers
 
Wordpress: A Tool for online Earning
Wordpress: A Tool for online EarningWordpress: A Tool for online Earning
Wordpress: A Tool for online Earning
 
Html intro
Html introHtml intro
Html intro
 
The Users are Restless
The Users are RestlessThe Users are Restless
The Users are Restless
 

Plus de Jazkarta, Inc.

Traveling through time and place with Plone
Traveling through time and place with PloneTraveling through time and place with Plone
Traveling through time and place with PloneJazkarta, Inc.
 
Questions: A Form Library for Python with SurveyJS Frontend
Questions: A Form Library for Python with SurveyJS FrontendQuestions: A Form Library for Python with SurveyJS Frontend
Questions: A Form Library for Python with SurveyJS FrontendJazkarta, Inc.
 
The User Experience: Editing Composite Pages in Plone 6 and Beyond
The User Experience: Editing Composite Pages in Plone 6 and BeyondThe User Experience: Editing Composite Pages in Plone 6 and Beyond
The User Experience: Editing Composite Pages in Plone 6 and BeyondJazkarta, Inc.
 
WTA and Plone After 13 Years
WTA and Plone After 13 YearsWTA and Plone After 13 Years
WTA and Plone After 13 YearsJazkarta, Inc.
 
Collaborating With Orchid Data
Collaborating With Orchid DataCollaborating With Orchid Data
Collaborating With Orchid DataJazkarta, Inc.
 
Spend a Week Hacking in Sorrento!
Spend a Week Hacking in Sorrento!Spend a Week Hacking in Sorrento!
Spend a Week Hacking in Sorrento!Jazkarta, Inc.
 
Plone 5 Upgrades In Real Life
Plone 5 Upgrades In Real LifePlone 5 Upgrades In Real Life
Plone 5 Upgrades In Real LifeJazkarta, Inc.
 
Accessibility in Plone: The Good, the Bad, and the Ugly
Accessibility in Plone: The Good, the Bad, and the UglyAccessibility in Plone: The Good, the Bad, and the Ugly
Accessibility in Plone: The Good, the Bad, and the UglyJazkarta, Inc.
 
Getting Paid Without GetPaid
Getting Paid Without GetPaidGetting Paid Without GetPaid
Getting Paid Without GetPaidJazkarta, Inc.
 
An Open Source Platform for Social Science Research
An Open Source Platform for Social Science ResearchAn Open Source Platform for Social Science Research
An Open Source Platform for Social Science ResearchJazkarta, Inc.
 
For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...
For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...
For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...Jazkarta, Inc.
 
Anatomy of a Large Website Project
Anatomy of a Large Website ProjectAnatomy of a Large Website Project
Anatomy of a Large Website ProjectJazkarta, Inc.
 
Anatomy of a Large Website Project - With Presenter Notes
Anatomy of a Large Website Project - With Presenter NotesAnatomy of a Large Website Project - With Presenter Notes
Anatomy of a Large Website Project - With Presenter NotesJazkarta, Inc.
 
The Mountaineers: Scaling the Heights with Plone
The Mountaineers: Scaling the Heights with PloneThe Mountaineers: Scaling the Heights with Plone
The Mountaineers: Scaling the Heights with PloneJazkarta, Inc.
 
Plone Hosting: A Panel Discussion
Plone Hosting: A Panel DiscussionPlone Hosting: A Panel Discussion
Plone Hosting: A Panel DiscussionJazkarta, Inc.
 
Academic Websites in Plone
Academic Websites in PloneAcademic Websites in Plone
Academic Websites in PloneJazkarta, Inc.
 
Online Exhibits in Plone
Online Exhibits in PloneOnline Exhibits in Plone
Online Exhibits in PloneJazkarta, Inc.
 
Online exhibits in Plone
Online exhibits in PloneOnline exhibits in Plone
Online exhibits in PloneJazkarta, Inc.
 

Plus de Jazkarta, Inc. (20)

Traveling through time and place with Plone
Traveling through time and place with PloneTraveling through time and place with Plone
Traveling through time and place with Plone
 
Questions: A Form Library for Python with SurveyJS Frontend
Questions: A Form Library for Python with SurveyJS FrontendQuestions: A Form Library for Python with SurveyJS Frontend
Questions: A Form Library for Python with SurveyJS Frontend
 
The User Experience: Editing Composite Pages in Plone 6 and Beyond
The User Experience: Editing Composite Pages in Plone 6 and BeyondThe User Experience: Editing Composite Pages in Plone 6 and Beyond
The User Experience: Editing Composite Pages in Plone 6 and Beyond
 
WTA and Plone After 13 Years
WTA and Plone After 13 YearsWTA and Plone After 13 Years
WTA and Plone After 13 Years
 
Collaborating With Orchid Data
Collaborating With Orchid DataCollaborating With Orchid Data
Collaborating With Orchid Data
 
Spend a Week Hacking in Sorrento!
Spend a Week Hacking in Sorrento!Spend a Week Hacking in Sorrento!
Spend a Week Hacking in Sorrento!
 
Plone 5 Upgrades In Real Life
Plone 5 Upgrades In Real LifePlone 5 Upgrades In Real Life
Plone 5 Upgrades In Real Life
 
Accessibility in Plone: The Good, the Bad, and the Ugly
Accessibility in Plone: The Good, the Bad, and the UglyAccessibility in Plone: The Good, the Bad, and the Ugly
Accessibility in Plone: The Good, the Bad, and the Ugly
 
Getting Paid Without GetPaid
Getting Paid Without GetPaidGetting Paid Without GetPaid
Getting Paid Without GetPaid
 
An Open Source Platform for Social Science Research
An Open Source Platform for Social Science ResearchAn Open Source Platform for Social Science Research
An Open Source Platform for Social Science Research
 
For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...
For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...
For the Love of Volunteers! How Do You Choose the Right Technology to Manage ...
 
Anatomy of a Large Website Project
Anatomy of a Large Website ProjectAnatomy of a Large Website Project
Anatomy of a Large Website Project
 
Anatomy of a Large Website Project - With Presenter Notes
Anatomy of a Large Website Project - With Presenter NotesAnatomy of a Large Website Project - With Presenter Notes
Anatomy of a Large Website Project - With Presenter Notes
 
The Mountaineers: Scaling the Heights with Plone
The Mountaineers: Scaling the Heights with PloneThe Mountaineers: Scaling the Heights with Plone
The Mountaineers: Scaling the Heights with Plone
 
Plone Hosting: A Panel Discussion
Plone Hosting: A Panel DiscussionPlone Hosting: A Panel Discussion
Plone Hosting: A Panel Discussion
 
Plone+Salesforce
Plone+SalesforcePlone+Salesforce
Plone+Salesforce
 
Academic Websites in Plone
Academic Websites in PloneAcademic Websites in Plone
Academic Websites in Plone
 
Plone
PlonePlone
Plone
 
Online Exhibits in Plone
Online Exhibits in PloneOnline Exhibits in Plone
Online Exhibits in Plone
 
Online exhibits in Plone
Online exhibits in PloneOnline exhibits in Plone
Online exhibits in Plone
 

Deliverance talk at plone meetup

Notes de l'éditeur

  1. All platforms try to solve the this. The great battle between design minded folks and development minded folks.
  2. sample template
  3. typical code, you get distracted
  4. We create all sorts of extra infrastructure to account for the above, each solution is different.
  5. 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.
  6. These rules apply to matched CSS selectors (or Xpath)s
  7. the is the routing