What is Diazo?            Douwe van der Meij   Goldmund, Wyldebeast & Wunderliebevandermeij@gw20e.com@douwevandermeij
Introduction
Diazo● With Diazo you can theme websites  ○ Your own website  ○ Someone elses website  ○ Any website    ■ On any technology
How?
Diazo● Website HTML  ○ Content provider● Design HTML  ○ Theme provider● Together:  ○ Themed website
Diazo● All about merging (X)HTML  ○ In a convenient way
Why (this presentation)?● Legacy websites● Legacy HTML templates● New era of front-end "frameworks"  ○ Media queries    ■ ...
Background
Diazo concept                http://docs.diazo.org/en/latest/index.html
Model Driven Engineering● Ever heard of MDE?
Metamodeling● Meta Object Facility (MOF)  ○ Proposed by OMG                                              Metametamodel    ...
Metamodeling● Mappings      M3:      EBNF       M3:       XML      M2:   Programming   M2:   XML schema              langu...
Model transformations                                                  Transformation                                     ...
Model transformationsM2:                 Transformation      Metamodel A                    Metamodel B                   ...
Model transformationsM3:                             Metametamodel                  conforms to                        con...
Model transformationsM3:                      XML          ● Traditional XSLTM2:   HTML theme A        XSL            HTML...
Model transformationsM3:                       XML      HTML theme AM2:    HTML theme A        XSL         HTML theme B   ...
Diazo according to MDEM3:                       XML      HTML theme AM2:                    Diazo syntax   HTML theme B   ...
Diazo explained● Two HTML sites  ○ A content system  ○ A theme● One set of rules● Regardless of pre-processors  ○ Underlyi...
Why should we use it?
Case 1
Designers vs. developers
Designers● At some point a designer delivers a design  ○ Drawing (PSD)  ○ Sliced / not sliced  ○ HTML + CSS + JS
Developers● Develop features● Minimal / functional design● Integrate the design into the application   ○ Convert HTML page...
Responsibility● The designer delivers HTML + CSS● Problem: Clearly in CSS  ○ Designer is responsible  ○ A developer will f...
Model View Controller                         Templates        View                            Code                       ...
Model View Controller                        View                        Diazo   application                         desig...
Diazo stack● An extra level of abstraction● Diazo offers an interface between designers  and developers
Case 2
Re-style an existing website● The existing website works perfectly● Possible problems when re-styling (the old  way):  ○ R...
Re-style an existing website● Diazo only needs the HTML output of the  existing website● The existing website remains avai...
Tooling
Plone themes● Download the example themes  ○ https://intranet.gw20e.com/diazo-themes  ○ https://intranet.gw20e.com/new-dia...
Plone
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Diazo replace rule  <replace     theme="//div[@id=content]/div[1]/h2/a"     css:content="h1#parent-fieldname-title"     />
Is it really that simple?
Unfortunately not...
Advanced Diazo● Be careful with your selectors     <replace        theme="//div[@id=content]/div[1]/h2/a"        css:conte...
Advanced Diazo● Fine tune your rules  <replace     theme="//div[@id=content]/div[1]/h2/a"     css:content="h1#parent-field...
Advanced Diazo● Fine tune your rules  <replace     theme="//div[@id=content]/div[1]/h2/a"     css:content="h1#parent-field...
Advanced Diazo
Changing the navigation         tabs
Advanced Diazo<ul>   <li   class="current_page_item"><a href="#">Homepage</a></li>   <li   class=""><a href="#">Services</...
Advanced Diazo  <ul>     <li   class="selected"><a href="#">Home</a></li>     <li   class="plain"><a href="#">News</a></li...
Advanced Diazo● The easy way     <replace        css:theme="div#menu ul"        css:content="ul#portal-globalnav"        /...
Advanced Diazo● The advanced way   ○ http://pastebin.com/4HaG3KRx<replace css:theme-children="div#menu ul">   <xsl:for-eac...
Conclusion
Conclusion● XSLT wrapper   ○ XSLT reborn● Seamless integration   ○ Proxy all your websites● Higher level of abstraction● F...
Future work
Future work● Feature requests / bugs  ○ Filter out comments in XSL  ○ Easier replace rules for dynamic elements while    p...
Additional workshop       content
Creating a new Diazo       theme
Create a new Diazo theme● Go to:  ○ http://www.freecsstemplates.org/● Pick one!
Create a new Diazo theme● Unzip the file● Open the folder● Create the following files:   ○ manifest.cfg   ○ rules.xml   ○ ...
Create a new Diazo theme● Zip the folder
Plone.app.theming
Plone themes● Download the new example theme  ○ https://intranet.gw20e.com/new-diazo-theme
Marks blog
Blog article● Mark van Lent wrote a blog article about the  workshop  ○ http://www.vlent.nl/weblog/2012/12/14/workshop-   ...
Upcoming SlideShare
Loading in …5
×

What is diazo

2,031 views

Published on

Workshop slides

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

No Downloads
Views
Total views
2,031
On SlideShare
0
From Embeds
0
Number of Embeds
809
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

What is diazo

  1. 1. What is Diazo? Douwe van der Meij Goldmund, Wyldebeast & Wunderliebevandermeij@gw20e.com@douwevandermeij
  2. 2. Introduction
  3. 3. Diazo● With Diazo you can theme websites ○ Your own website ○ Someone elses website ○ Any website ■ On any technology
  4. 4. How?
  5. 5. Diazo● Website HTML ○ Content provider● Design HTML ○ Theme provider● Together: ○ Themed website
  6. 6. Diazo● All about merging (X)HTML ○ In a convenient way
  7. 7. Why (this presentation)?● Legacy websites● Legacy HTML templates● New era of front-end "frameworks" ○ Media queries ■ Twitter Bootstrap ■ Skeleton● Improved MVC● Responsibility● Flexibility
  8. 8. Background
  9. 9. Diazo concept http://docs.diazo.org/en/latest/index.html
  10. 10. Model Driven Engineering● Ever heard of MDE?
  11. 11. Metamodeling● Meta Object Facility (MOF) ○ Proposed by OMG Metametamodel M3:● MOF metamodeling stack level M2: Metamodel level M1: Model level M0: Real world Object Management Group (OMG). (2002, april 3). Meta Object Facility (MOF) Specification.
  12. 12. Metamodeling● Mappings M3: EBNF M3: XML M2: Programming M2: XML schema language M1: Code M1: XML document M0: Real world M0: Real world
  13. 13. Model transformations Transformation language written in uses Transformation uses Metamodel A Metamodel B specification instance of executed by instance of Transformation Model A Model B input engine output source targetKurtev, I. (2008). State of the Art of QVT: A Model Transformation Language Standard. In Applications of Graph Transformations with Industrial Relevance (Vol. 5088/2008, pp. 377‐393). Springer Berlin / Heidelberg.
  14. 14. Model transformationsM2: Transformation Metamodel A Metamodel B languageM1: Transformation Model A specification Model BM0: Transformation engine
  15. 15. Model transformationsM3: Metametamodel conforms to conforms to conforms toM2: Transformation Metamodel A Metamodel B languageM1: Transformation Model A specification Model BM0: Transformation engine
  16. 16. Model transformationsM3: XML ● Traditional XSLTM2: HTML theme A XSL HTML theme BM1: Transformation Website A specification Website BM0: Transformation engine
  17. 17. Model transformationsM3: XML HTML theme AM2: HTML theme A XSL HTML theme B Website A TransformationM1: Website A Website B specificationM0: Transformation engine
  18. 18. Diazo according to MDEM3: XML HTML theme AM2: Diazo syntax HTML theme B HTML theme B Content site AM1: Diazo rules Website Theme site BM0: Diazo
  19. 19. Diazo explained● Two HTML sites ○ A content system ○ A theme● One set of rules● Regardless of pre-processors ○ Underlying dynamic systems
  20. 20. Why should we use it?
  21. 21. Case 1
  22. 22. Designers vs. developers
  23. 23. Designers● At some point a designer delivers a design ○ Drawing (PSD) ○ Sliced / not sliced ○ HTML + CSS + JS
  24. 24. Developers● Develop features● Minimal / functional design● Integrate the design into the application ○ Convert HTML pages into templates (Django) ○ Alter existing CSS (Plone)
  25. 25. Responsibility● The designer delivers HTML + CSS● Problem: Clearly in CSS ○ Designer is responsible ○ A developer will fix the problem● Result: ○ Developer is responsible
  26. 26. Model View Controller Templates View Code representation Controller Model
  27. 27. Model View Controller View Diazo application design View View Controller Model
  28. 28. Diazo stack● An extra level of abstraction● Diazo offers an interface between designers and developers
  29. 29. Case 2
  30. 30. Re-style an existing website● The existing website works perfectly● Possible problems when re-styling (the old way): ○ Risk in losing functionality ○ Website is written in another language ○ No templates
  31. 31. Re-style an existing website● Diazo only needs the HTML output of the existing website● The existing website remains available● Easy re-style again with Diazo● Multiple designs for a single website, at the same time
  32. 32. Tooling
  33. 33. Plone themes● Download the example themes ○ https://intranet.gw20e.com/diazo-themes ○ https://intranet.gw20e.com/new-diazo-theme
  34. 34. Plone
  35. 35. Plone.app.theming
  36. 36. Plone.app.theming
  37. 37. Plone.app.theming
  38. 38. Plone.app.theming
  39. 39. Plone.app.theming
  40. 40. Plone.app.theming
  41. 41. Plone.app.theming
  42. 42. Diazo replace rule <replace theme="//div[@id=content]/div[1]/h2/a" css:content="h1#parent-fieldname-title" />
  43. 43. Is it really that simple?
  44. 44. Unfortunately not...
  45. 45. Advanced Diazo● Be careful with your selectors <replace theme="//div[@id=content]/div[1]/h2/a" css:content="h1#parent-fieldname-title" />
  46. 46. Advanced Diazo● Fine tune your rules <replace theme="//div[@id=content]/div[1]/h2/a" css:content="h1#parent-fieldname-title" /> <replace theme-children="//div[@id=content]/div[1]/h2" content="//h1[@id=parent-fieldname-title]/text()" />
  47. 47. Advanced Diazo● Fine tune your rules <replace theme="//div[@id=content]/div[1]/h2/a" css:content="h1#parent-fieldname-title" /> <replace theme-children="//div[@id=content]/div[1]/h2" content="//h1[@id=parent-fieldname-title]/text()" />
  48. 48. Advanced Diazo
  49. 49. Changing the navigation tabs
  50. 50. Advanced Diazo<ul> <li class="current_page_item"><a href="#">Homepage</a></li> <li class=""><a href="#">Services</a></li> <li class=""><a href="#">Portfolio</a></li> <li class=""><a href="#">About</a></li> <li class=""><a href="#">Contact</a></li></ul>
  51. 51. Advanced Diazo <ul> <li class="selected"><a href="#">Home</a></li> <li class="plain"><a href="#">News</a></li> <li class="plain"><a href="#">Events</a></li> <li class="plain"><a href="#">Users</a></li> </ul>
  52. 52. Advanced Diazo● The easy way <replace css:theme="div#menu ul" css:content="ul#portal-globalnav" />● Add extra CSS (file) ○ Class "selected" → "current_page_item"
  53. 53. Advanced Diazo● The advanced way ○ http://pastebin.com/4HaG3KRx<replace css:theme-children="div#menu ul"> <xsl:for-each select="//ul[@id=portal-globalnav]/li"> <xsl:element name="li"> <xsl:if test="./@class = selected"> <xsl:attribute name="class"> current_page_item </xsl:attribute> </xsl:if> <xsl:copy-of select="./a" /> </xsl:element> </xsl:for-each></replace> ● No extra CSS needed
  54. 54. Conclusion
  55. 55. Conclusion● XSLT wrapper ○ XSLT reborn● Seamless integration ○ Proxy all your websites● Higher level of abstraction● Fallback to regular XSLT ○ If all else fails● State-of-the-art technology ○ Lack of tooling ○ Widely adopted in the Plone community
  56. 56. Future work
  57. 57. Future work● Feature requests / bugs ○ Filter out comments in XSL ○ Easier replace rules for dynamic elements while preserving theme attributes ○ More visual way to create rules ■ Also apart from Plone.app.theming ○ <xsl:template> doesnt work in embedded <rules>● Sprints● Fork it ○ https://github.com/plone/diazo
  58. 58. Additional workshop content
  59. 59. Creating a new Diazo theme
  60. 60. Create a new Diazo theme● Go to: ○ http://www.freecsstemplates.org/● Pick one!
  61. 61. Create a new Diazo theme● Unzip the file● Open the folder● Create the following files: ○ manifest.cfg ○ rules.xml ○ preview.png (optional)
  62. 62. Create a new Diazo theme● Zip the folder
  63. 63. Plone.app.theming
  64. 64. Plone themes● Download the new example theme ○ https://intranet.gw20e.com/new-diazo-theme
  65. 65. Marks blog
  66. 66. Blog article● Mark van Lent wrote a blog article about the workshop ○ http://www.vlent.nl/weblog/2012/12/14/workshop- theming-with-diazo/

×