What is diazo
-
Upload
meij200 -
Category
Technology
-
view
1.536 -
download
2
description
Transcript of What is diazo
![Page 1: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/1.jpg)
What is Diazo?
Douwe van der Meij
Goldmund, Wyldebeast & Wunderliebe
[email protected]@douwevandermeij
![Page 2: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/2.jpg)
Introduction
![Page 3: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/3.jpg)
● With Diazo you can theme websites○ Your own website○ Someone else's website○ Any website
■ On any technology
Diazo
![Page 4: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/4.jpg)
How?
![Page 5: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/5.jpg)
● Website HTML○ Content provider
● Design HTML○ Theme provider
● Together:○ Themed website
Diazo
![Page 6: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/6.jpg)
● All about merging (X)HTML○ In a convenient way
Diazo
![Page 7: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/7.jpg)
● Legacy websites● Legacy HTML templates● New era of front-end "frameworks"
○ Media queries■ Twitter Bootstrap■ Skeleton
● Improved MVC● Responsibility● Flexibility
Why (this presentation)?
![Page 8: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/8.jpg)
Background
![Page 9: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/9.jpg)
Diazo concept
http://docs.diazo.org/en/latest/index.html
![Page 10: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/10.jpg)
● Ever heard of MDE?
Model Driven Engineering
![Page 11: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/11.jpg)
● Meta Object Facility (MOF)○ Proposed by OMG
● MOF metamodeling stack
Metamodeling
Metametamodel level
Metamodel level
Model level
Real world
M3:
M2:
M1:
M0:
Object Management Group (OMG). (2002, april 3). Meta Object Facility (MOF) Specification.
![Page 12: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/12.jpg)
● Mappings
Metamodeling
XML
XML schema
XML document
Real world
M3:
M2:
M1:
M0:
EBNF
Programming language
Code
Real world
M3:
M2:
M1:
M0:
![Page 13: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/13.jpg)
Model transformations
Kurtev, 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.
input output
Transformation language
Transformation specification
Transformation engine
Metamodel A Metamodel B
written in
usesuses
executed by
Model A Model B
instance ofinstance of
source target
![Page 14: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/14.jpg)
Model transformations
Transformation language
Transformation specification
Transformation engine
Metamodel A Metamodel B
Model A Model B
M2:
M1:
M0:
![Page 15: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/15.jpg)
Model transformations
Transformation language
Transformation specification
Transformation engine
Metamodel A Metamodel B
Model A Model B
Metametamodel
conforms to
M3:
M2:
M1:
M0:
conforms to
conforms to
![Page 16: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/16.jpg)
Model transformations
XSL
Transformation specification
Transformation engine
HTML theme A HTML theme B
Website A Website B
XMLM3:
M2:
M1:
M0:
● Traditional XSLT
![Page 17: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/17.jpg)
Model transformations
XSL
Transformation specification
Transformation engine
HTML theme A HTML theme B
Website A Website B
XMLM3:
M2:
M1:
M0:
HTML theme A
Website A
![Page 18: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/18.jpg)
Diazo according to MDE
Diazo syntax
Diazo rules
Diazo
HTML theme BHTML theme B
Theme site BWebsite
XMLM3:
M2:
M1:
M0:
HTML theme A
Content site A
![Page 19: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/19.jpg)
● Two HTML sites○ A content system○ A theme
● One set of rules
● Regardless of pre-processors○ Underlying dynamic systems
Diazo explained
![Page 20: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/20.jpg)
Why should we use it?
![Page 21: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/21.jpg)
Case 1
![Page 22: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/22.jpg)
Designers vs. developers
![Page 23: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/23.jpg)
● At some point a designer delivers a design○ Drawing (PSD)○ Sliced / not sliced○ HTML + CSS + JS
Designers
![Page 24: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/24.jpg)
● Develop features● Minimal / functional design
● Integrate the design into the application○ Convert HTML pages into templates (Django)○ Alter existing CSS (Plone)
Developers
![Page 25: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/25.jpg)
● The designer delivers HTML + CSS
● Problem: Clearly in CSS○ Designer is responsible○ A developer will fix the problem
● Result:○ Developer is responsible
Responsibility
![Page 26: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/26.jpg)
Model View Controller
TemplatesView
Controller
Model
Code representation
![Page 27: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/27.jpg)
Model View Controller
View
Controller
Model
View
View
Diazo
application design
![Page 28: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/28.jpg)
● An extra level of abstraction
● Diazo offers an interface between designers and developers
Diazo stack
![Page 29: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/29.jpg)
Case 2
![Page 30: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/30.jpg)
● 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
Re-style an existing website
![Page 31: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/31.jpg)
● 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
Re-style an existing website
![Page 32: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/32.jpg)
Tooling
![Page 33: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/33.jpg)
● Download the example themes○ https://intranet.gw20e.com/diazo-themes○ https://intranet.gw20e.com/new-diazo-theme
Plone themes
![Page 34: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/34.jpg)
Plone
![Page 35: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/35.jpg)
Plone.app.theming
![Page 36: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/36.jpg)
Plone.app.theming
![Page 37: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/37.jpg)
Plone.app.theming
![Page 38: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/38.jpg)
Plone.app.theming
![Page 39: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/39.jpg)
Plone.app.theming
![Page 40: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/40.jpg)
Plone.app.theming
![Page 41: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/41.jpg)
Plone.app.theming
![Page 42: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/42.jpg)
Diazo replace rule
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
![Page 43: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/43.jpg)
Is it really that simple?
![Page 44: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/44.jpg)
Unfortunately not...
![Page 45: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/45.jpg)
● Be careful with your selectors
Advanced Diazo
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
![Page 46: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/46.jpg)
● Fine tune your rules
Advanced Diazo
<replacetheme-children="//div[@id='content']/div[1]/h2" content="//h1[@id='parent-fieldname-title']/text()"/>
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
![Page 47: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/47.jpg)
● Fine tune your rules
Advanced Diazo
<replacetheme-children="//div[@id='content']/div[1]/h2" content="//h1[@id='parent-fieldname-title']/text()"/>
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
![Page 48: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/48.jpg)
Advanced Diazo
![Page 49: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/49.jpg)
Changing the navigation tabs
![Page 50: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/50.jpg)
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>
![Page 51: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/51.jpg)
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>
![Page 52: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/52.jpg)
● The easy way
Advanced Diazo
<replacecss:theme="div#menu ul"css:content="ul#portal-globalnav"/>
● Add extra CSS (file)○ Class "selected" → "current_page_item"
![Page 53: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/53.jpg)
● The advanced way○ http://pastebin.com/4HaG3KRx
Advanced Diazo
<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
![Page 54: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/54.jpg)
Conclusion
![Page 55: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/55.jpg)
● 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
Conclusion
![Page 56: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/56.jpg)
Future work
![Page 57: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/57.jpg)
● 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> doesn't work in embedded
<rules>
● Sprints● Fork it
○ https://github.com/plone/diazo
Future work
![Page 58: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/58.jpg)
Additional workshop content
![Page 59: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/59.jpg)
Creating a new Diazo theme
![Page 60: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/60.jpg)
● Go to:○ http://www.freecsstemplates.org/
● Pick one!
Create a new Diazo theme
![Page 61: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/61.jpg)
● Unzip the file● Open the folder● Create the following files:
○ manifest.cfg○ rules.xml○ preview.png (optional)
Create a new Diazo theme
![Page 62: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/62.jpg)
● Zip the folder
Create a new Diazo theme
![Page 63: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/63.jpg)
Plone.app.theming
![Page 64: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/64.jpg)
● Download the new example theme○ https://intranet.gw20e.com/new-diazo-theme
Plone themes
![Page 65: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/65.jpg)
Mark's blog
![Page 66: What is diazo](https://reader034.fdocuments.net/reader034/viewer/2022052323/5589e4afd8b42a8e558b469b/html5/thumbnails/66.jpg)
● Mark van Lent wrote a blog article about the workshop○ http://www.vlent.nl/weblog/2012/12/14/workshop-
theming-with-diazo/
Blog article