66
What is Diazo? Douwe van der Meij Goldmund, Wyldebeast & Wunderliebe [email protected] @douwevandermeij

What is diazo

  • Upload
    meij200

  • View
    1.534

  • Download
    2

Embed Size (px)

DESCRIPTION

Workshop slides

Citation preview

Page 1: What is diazo

What is Diazo?

Douwe van der Meij

Goldmund, Wyldebeast & Wunderliebe

[email protected]@douwevandermeij

Page 2: What is diazo

Introduction

Page 3: What is diazo

● With Diazo you can theme websites○ Your own website○ Someone else's website○ Any website

■ On any technology

Diazo

Page 4: What is diazo

How?

Page 5: What is diazo

● Website HTML○ Content provider

● Design HTML○ Theme provider

● Together:○ Themed website

Diazo

Page 6: What is diazo

● All about merging (X)HTML○ In a convenient way

Diazo

Page 7: What is diazo

● 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

Background

Page 9: What is diazo

Diazo concept

http://docs.diazo.org/en/latest/index.html

Page 10: What is diazo

● Ever heard of MDE?

Model Driven Engineering

Page 11: What is diazo

● 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

● 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

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

Model transformations

Transformation language

Transformation specification

Transformation engine

Metamodel A Metamodel B

Model A Model B

M2:

M1:

M0:

Page 15: What is diazo

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

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

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

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

● 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

Why should we use it?

Page 21: What is diazo

Case 1

Page 22: What is diazo

Designers vs. developers

Page 23: What is diazo

● At some point a designer delivers a design○ Drawing (PSD)○ Sliced / not sliced○ HTML + CSS + JS

Designers

Page 24: What is diazo

● 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

● 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

Model View Controller

TemplatesView

Controller

Model

Code representation

Page 27: What is diazo

Model View Controller

View

Controller

Model

View

View

Diazo

application design

Page 28: What is diazo

● An extra level of abstraction

● Diazo offers an interface between designers and developers

Diazo stack

Page 29: What is diazo

Case 2

Page 30: What is diazo

● 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

● 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

Tooling

Page 33: What is diazo

● Download the example themes○ https://intranet.gw20e.com/diazo-themes○ https://intranet.gw20e.com/new-diazo-theme

Plone themes

Page 34: What is diazo

Plone

Page 35: What is diazo

Plone.app.theming

Page 36: What is diazo

Plone.app.theming

Page 37: What is diazo

Plone.app.theming

Page 38: What is diazo

Plone.app.theming

Page 39: What is diazo

Plone.app.theming

Page 40: What is diazo

Plone.app.theming

Page 41: What is diazo

Plone.app.theming

Page 42: What is diazo

Diazo replace rule

<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>

Page 43: What is diazo

Is it really that simple?

Page 44: What is diazo

Unfortunately not...

Page 45: What is diazo

● 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

● 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

● 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

Advanced Diazo

Page 49: What is diazo

Changing the navigation tabs

Page 50: What is diazo

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

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

● 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

● 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

Conclusion

Page 55: What is diazo

● 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

Future work

Page 57: What is diazo

● 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

Additional workshop content

Page 59: What is diazo

Creating a new Diazo theme

Page 60: What is diazo

● Go to:○ http://www.freecsstemplates.org/

● Pick one!

Create a new Diazo theme

Page 61: What is diazo

● 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

● Zip the folder

Create a new Diazo theme

Page 63: What is diazo

Plone.app.theming

Page 64: What is diazo

● Download the new example theme○ https://intranet.gw20e.com/new-diazo-theme

Plone themes

Page 65: What is diazo

Mark's blog

Page 66: What is diazo

● Mark van Lent wrote a blog article about the workshop○ http://www.vlent.nl/weblog/2012/12/14/workshop-

theming-with-diazo/

Blog article