SlideShare una empresa de Scribd logo
1 de 22
Descargar para leer sin conexión
Eclipse 4.0
Styling the UI with CSS
Kai Tödter
Siemens Corporate Technology
1/30/2015 1© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Who am I?
 Software Architect/Engineer at
Siemens Corporate Technology
 Eclipse RCP expert and OSGi enthusiast
 Open Source advocate
 Committer at e4 and Platform UI
 E-mail: kai.toedter@siemens.com
 Twitter: twitter.com/kaitoedter
 Blog: toedter.com/blog
1/30/2015 2© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
UI Styling
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3
Picture from
http://www.sxc.hu/photo/1089931
UI Styling
 In Eclipse 3.x, UI styling can be done using
 The Presentation API
 Custom Widgets
 These mechanisms are very limited
 It is not possible to implement a specific UI
design, created by a designer
 e4 provides a CSS based UI styling that
addresses many of the above issues
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 41/30/2015
Contacts Demo without CSS Styling
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 5
Dark CSS Styling with radial Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 61/30/2015
Gray CSS Styling with linear Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 71/30/2015
Blue CSS Styling with linear Gradients
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8
How does the CSS look like?
Label {
font: Verdana 8px;
color: rgb(240, 240, 240);
}
Table {
background-color: gradient radial #575757 #101010 100%;
color: rgb(240, 240, 240);
font: Verdana 8px;
}
.MTrimBar {
background-color: #777777 #373737 #202020 50% 50%;
color: white;
font: Verdana 8px;
}
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 91/30/2015
Some Things you cannot style (yet)
 Menu bar background
 Table headers
Partly implemented:
 Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 101/30/2015
How to enable CSS Styling (1)
Create a contribution to the extension point
org.eclipse.e4.ui.css.swt.theme
<extension
point="org.eclipse.e4.ui.css.swt.theme">
<theme
basestylesheeturi="css/blue.css"
id="org.eclipse.e4.tutorial.contacts.themes.blue"
label="Blue Theme">
</theme>
</extension>
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 111/30/2015
How to enable CSS Styling (2)
Create a contribution to the extension point
org.eclipse.core.runtime.products
<extension
id="product"
point="org.eclipse.core.runtime.products">
<product
application="org.eclipse.e4.ui.workbench.swt.application"
name="e4 Contacs">
<property
name="applicationCSS"
value="org.eclipse.e4.tutorial.contacts.themes.blue">
</property>
</product>
</extension>
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 121/30/2015
How to enable CSS Styling (3)
 Extension point
org.eclipse.ui.css.swt.theme
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 131/30/2015
How to use custom attributes?
 Java:
Label label = new Label(parent, SWT.NONE);
label.setData("org.eclipse.e4.ui.css.id", "SeparatorLabel");
 Workbench Model: Give the element an id
 CSS:
#SeparatorLabel {
color: #f08d00;
}
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 141/30/2015
e4 CSS Editors
 CSS has a well known syntax
 But which UI elements can be styled?
 Which CSS attributes does a specific element
support?
 The first approach for the above questions
might be an Xtext-based editor, with content
assist for both elements and attributes
 Join Sven’s and Sebastian’s talk on Thursday,
11:30
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 151/30/2015
Gradient Examples
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 161/30/2015
linear orange black linear orange black 60% linear orange black orange 50% 100%
radial orange black radial orange black 60% radial orange black orange 50% 100%
Dynamic Theme Switching
 It is possible to change the
CSS based theme at runtime
 Good for accessibility
 Good for user preferences
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 17
Picture from
http://www.sxc.hu/photo/823108
Theme Switching
 DI of IThemeEngine
 IThemeEngine provides API for applying styles
and theme management
@Execute
public void execute( IThemeEngine engine ) {
engine.setTheme(
"org.eclipse.e4.demo.contacts.themes.darkgradient");
}
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 181/30/2015
Using e4 CSS with RCP 3.x
 It is possible today…
 … but not as easy as it could be
 Read my blog about it
 http://www.toedter.com/blog/?p=295
 Demo: CSS RCP Mail
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 19
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20
Picture from
http://www.sxc.hu/photo/922004
License & Acknowledgements
 This work is licensed under the Creative Commons
Attribution-Noncommercial-No Derivative Works 3.0
Germany License
 See http://creativecommons.org/licenses/by-nc-
nd/3.0/de/deed.en_US
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 21
Picture Index
 http://www.sxc.hu/photo/1089931
 http://www.sxc.hu/photo/823108
 http://www.sxc.hu/photo/922004
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 22
Many thanks to the authors of the following pictures:

Más contenido relacionado

La actualidad más candente

Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the FutureEclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the FutureTonny Madsen
 
Developing a Google Wave Extension
Developing a Google Wave ExtensionDeveloping a Google Wave Extension
Developing a Google Wave ExtensionBrian Kennish
 
Eclipse 2011 Hot Topics
Eclipse 2011 Hot TopicsEclipse 2011 Hot Topics
Eclipse 2011 Hot TopicsLars Vogel
 
Getting started with code composer studio v4 for tms320 f2812
Getting started with code composer studio v4 for tms320 f2812Getting started with code composer studio v4 for tms320 f2812
Getting started with code composer studio v4 for tms320 f2812Pantech ProLabs India Pvt Ltd
 
Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022 Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022 Moon Technolabs Pvt. Ltd.
 
Getting started with code composer studio v3.3 for tms320 f2812
Getting started with code composer studio v3.3 for tms320 f2812Getting started with code composer studio v3.3 for tms320 f2812
Getting started with code composer studio v3.3 for tms320 f2812Pantech ProLabs India Pvt Ltd
 
What do you need to know about g rpc on .net
What do you need to know about g rpc on .net What do you need to know about g rpc on .net
What do you need to know about g rpc on .net Moon Technolabs Pvt. Ltd.
 

La actualidad más candente (7)

Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the FutureEclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
 
Developing a Google Wave Extension
Developing a Google Wave ExtensionDeveloping a Google Wave Extension
Developing a Google Wave Extension
 
Eclipse 2011 Hot Topics
Eclipse 2011 Hot TopicsEclipse 2011 Hot Topics
Eclipse 2011 Hot Topics
 
Getting started with code composer studio v4 for tms320 f2812
Getting started with code composer studio v4 for tms320 f2812Getting started with code composer studio v4 for tms320 f2812
Getting started with code composer studio v4 for tms320 f2812
 
Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022 Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022
 
Getting started with code composer studio v3.3 for tms320 f2812
Getting started with code composer studio v3.3 for tms320 f2812Getting started with code composer studio v3.3 for tms320 f2812
Getting started with code composer studio v3.3 for tms320 f2812
 
What do you need to know about g rpc on .net
What do you need to know about g rpc on .net What do you need to know about g rpc on .net
What do you need to know about g rpc on .net
 

Similar a E4 css

Highway to heaven - Microservices Meetup Berlin
Highway to heaven - Microservices Meetup BerlinHighway to heaven - Microservices Meetup Berlin
Highway to heaven - Microservices Meetup BerlinChristian Deger
 
ALM on the shoulders of Giants - Visual Studio Online
ALM on the shoulders of Giants - Visual Studio OnlineALM on the shoulders of Giants - Visual Studio Online
ALM on the shoulders of Giants - Visual Studio OnlineFlavius-Radu Demian
 
Tizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK OverviewTizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK OverviewRyo Jin
 
ASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big DealASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big DealJim Duffy
 
VS Code and Modern Development Environment Preview
VS Code and Modern Development Environment PreviewVS Code and Modern Development Environment Preview
VS Code and Modern Development Environment PreviewRoberto Stefanetti
 
Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24Christian Deger
 
Model Driven Applications Using Visual Studio Code Name Rosario
Model Driven Applications Using Visual Studio Code Name RosarioModel Driven Applications Using Visual Studio Code Name Rosario
Model Driven Applications Using Visual Studio Code Name RosarioClint Edmonson
 
CheConf 2018 - Building Extensibility and Community for Che
CheConf 2018 - Building Extensibility and Community for CheCheConf 2018 - Building Extensibility and Community for Che
CheConf 2018 - Building Extensibility and Community for Chemelbats
 
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...STEAMism.com
 
Debunking Myths About Cloud Portability
Debunking Myths About Cloud PortabilityDebunking Myths About Cloud Portability
Debunking Myths About Cloud PortabilityVMware Tanzu
 
Benefits of cello framework
Benefits of cello frameworkBenefits of cello framework
Benefits of cello frameworkTechcello
 
TFS 2013 Care and Feeding
TFS 2013 Care and FeedingTFS 2013 Care and Feeding
TFS 2013 Care and FeedingAngela Dugan
 
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8Shige Fukushima
 
Visual Studio Automation Object Model. EnvDTE interfaces
Visual Studio Automation Object Model. EnvDTE interfacesVisual Studio Automation Object Model. EnvDTE interfaces
Visual Studio Automation Object Model. EnvDTE interfacesPVS-Studio
 
Azure Media Services Step-by-Step Tutorial Docs Series - Agenda
Azure Media Services   Step-by-Step Tutorial Docs Series - AgendaAzure Media Services   Step-by-Step Tutorial Docs Series - Agenda
Azure Media Services Step-by-Step Tutorial Docs Series - AgendaShige Fukushima
 

Similar a E4 css (20)

Highway to heaven - Microservices Meetup Berlin
Highway to heaven - Microservices Meetup BerlinHighway to heaven - Microservices Meetup Berlin
Highway to heaven - Microservices Meetup Berlin
 
ALM on the shoulders of Giants - Visual Studio Online
ALM on the shoulders of Giants - Visual Studio OnlineALM on the shoulders of Giants - Visual Studio Online
ALM on the shoulders of Giants - Visual Studio Online
 
Dev340 Thake Coates
Dev340 Thake CoatesDev340 Thake Coates
Dev340 Thake Coates
 
Tizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK OverviewTizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK Overview
 
ASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big DealASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big Deal
 
VS Code and Modern Development Environment Preview
VS Code and Modern Development Environment PreviewVS Code and Modern Development Environment Preview
VS Code and Modern Development Environment Preview
 
Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24
 
TopicHero Descriptions Tutorial
TopicHero Descriptions TutorialTopicHero Descriptions Tutorial
TopicHero Descriptions Tutorial
 
Java fx ap is
Java fx ap isJava fx ap is
Java fx ap is
 
Model Driven Applications Using Visual Studio Code Name Rosario
Model Driven Applications Using Visual Studio Code Name RosarioModel Driven Applications Using Visual Studio Code Name Rosario
Model Driven Applications Using Visual Studio Code Name Rosario
 
Ppt0000000
Ppt0000000Ppt0000000
Ppt0000000
 
Overview
OverviewOverview
Overview
 
CheConf 2018 - Building Extensibility and Community for Che
CheConf 2018 - Building Extensibility and Community for CheCheConf 2018 - Building Extensibility and Community for Che
CheConf 2018 - Building Extensibility and Community for Che
 
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
 
Debunking Myths About Cloud Portability
Debunking Myths About Cloud PortabilityDebunking Myths About Cloud Portability
Debunking Myths About Cloud Portability
 
Benefits of cello framework
Benefits of cello frameworkBenefits of cello framework
Benefits of cello framework
 
TFS 2013 Care and Feeding
TFS 2013 Care and FeedingTFS 2013 Care and Feeding
TFS 2013 Care and Feeding
 
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
 
Visual Studio Automation Object Model. EnvDTE interfaces
Visual Studio Automation Object Model. EnvDTE interfacesVisual Studio Automation Object Model. EnvDTE interfaces
Visual Studio Automation Object Model. EnvDTE interfaces
 
Azure Media Services Step-by-Step Tutorial Docs Series - Agenda
Azure Media Services   Step-by-Step Tutorial Docs Series - AgendaAzure Media Services   Step-by-Step Tutorial Docs Series - Agenda
Azure Media Services Step-by-Step Tutorial Docs Series - Agenda
 

E4 css

  • 1. Eclipse 4.0 Styling the UI with CSS Kai Tödter Siemens Corporate Technology 1/30/2015 1© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
  • 2. Who am I?  Software Architect/Engineer at Siemens Corporate Technology  Eclipse RCP expert and OSGi enthusiast  Open Source advocate  Committer at e4 and Platform UI  E-mail: kai.toedter@siemens.com  Twitter: twitter.com/kaitoedter  Blog: toedter.com/blog 1/30/2015 2© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
  • 3. UI Styling 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3 Picture from http://www.sxc.hu/photo/1089931
  • 4. UI Styling  In Eclipse 3.x, UI styling can be done using  The Presentation API  Custom Widgets  These mechanisms are very limited  It is not possible to implement a specific UI design, created by a designer  e4 provides a CSS based UI styling that addresses many of the above issues © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 41/30/2015
  • 5. Contacts Demo without CSS Styling 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 5
  • 6. Dark CSS Styling with radial Gradients © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 61/30/2015
  • 7. Gray CSS Styling with linear Gradients © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 71/30/2015
  • 8. Blue CSS Styling with linear Gradients 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8
  • 9. How does the CSS look like? Label { font: Verdana 8px; color: rgb(240, 240, 240); } Table { background-color: gradient radial #575757 #101010 100%; color: rgb(240, 240, 240); font: Verdana 8px; } .MTrimBar { background-color: #777777 #373737 #202020 50% 50%; color: white; font: Verdana 8px; } © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 91/30/2015
  • 10. Some Things you cannot style (yet)  Menu bar background  Table headers Partly implemented:  Gradients © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 101/30/2015
  • 11. How to enable CSS Styling (1) Create a contribution to the extension point org.eclipse.e4.ui.css.swt.theme <extension point="org.eclipse.e4.ui.css.swt.theme"> <theme basestylesheeturi="css/blue.css" id="org.eclipse.e4.tutorial.contacts.themes.blue" label="Blue Theme"> </theme> </extension> © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 111/30/2015
  • 12. How to enable CSS Styling (2) Create a contribution to the extension point org.eclipse.core.runtime.products <extension id="product" point="org.eclipse.core.runtime.products"> <product application="org.eclipse.e4.ui.workbench.swt.application" name="e4 Contacs"> <property name="applicationCSS" value="org.eclipse.e4.tutorial.contacts.themes.blue"> </property> </product> </extension> © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 121/30/2015
  • 13. How to enable CSS Styling (3)  Extension point org.eclipse.ui.css.swt.theme © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 131/30/2015
  • 14. How to use custom attributes?  Java: Label label = new Label(parent, SWT.NONE); label.setData("org.eclipse.e4.ui.css.id", "SeparatorLabel");  Workbench Model: Give the element an id  CSS: #SeparatorLabel { color: #f08d00; } © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 141/30/2015
  • 15. e4 CSS Editors  CSS has a well known syntax  But which UI elements can be styled?  Which CSS attributes does a specific element support?  The first approach for the above questions might be an Xtext-based editor, with content assist for both elements and attributes  Join Sven’s and Sebastian’s talk on Thursday, 11:30 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 151/30/2015
  • 16. Gradient Examples © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 161/30/2015 linear orange black linear orange black 60% linear orange black orange 50% 100% radial orange black radial orange black 60% radial orange black orange 50% 100%
  • 17. Dynamic Theme Switching  It is possible to change the CSS based theme at runtime  Good for accessibility  Good for user preferences 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 17 Picture from http://www.sxc.hu/photo/823108
  • 18. Theme Switching  DI of IThemeEngine  IThemeEngine provides API for applying styles and theme management @Execute public void execute( IThemeEngine engine ) { engine.setTheme( "org.eclipse.e4.demo.contacts.themes.darkgradient"); } © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 181/30/2015
  • 19. Using e4 CSS with RCP 3.x  It is possible today…  … but not as easy as it could be  Read my blog about it  http://www.toedter.com/blog/?p=295  Demo: CSS RCP Mail 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 19
  • 20. 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20 Picture from http://www.sxc.hu/photo/922004
  • 21. License & Acknowledgements  This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License  See http://creativecommons.org/licenses/by-nc- nd/3.0/de/deed.en_US 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 21
  • 22. Picture Index  http://www.sxc.hu/photo/1089931  http://www.sxc.hu/photo/823108  http://www.sxc.hu/photo/922004 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 22 Many thanks to the authors of the following pictures: