focus on quality - inovex · 2019-03-13 · pulp fiction lorem ipsum dolor sit amet, ipsum sit orem...
Post on 10-Jul-2020
7 Views
Preview:
TRANSCRIPT
Focus on QualityBessere Webfrontends durch Web Components
Patrick Hillert, 03. November 2015
Patrick HillertM.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools
“Full-Stack”
@silentHoo
/silentHoo
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Agenda
</> Überblick
</> Web Components und Polymer
</> Ökosystem
</> Fazit
https://commons.wikimedia.org/wiki/File:Old_timer_structural_worker.jpg“Old-timer, keeping up with the boys…”, licensed under Public Domain. Photo taken by Lewis Hine.
Entwicklungen im Web heute
Spec-Developers
Comm-unities
Web-Developers
HTMLWeb-APIs
CSSJavaScript
jQueryAngularJSEmberJSBootstrap
FreelancerCompanies
https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2015 sollten für das Web einfach umzusetzen sein
Mikael Eidenberg@meidenberg
“It’s super-easy with Bootstrap”
Modaler Dialog
http://getbootstrap.com/javascript/#modals
“Just copy this simple html …”
http://getbootstrap.com/javascript/#modals
“... and this little script.”
“Isn’t that easy?”
http://getbootstrap.com/javascript/#modals
https://www.flickr.com/photos/122127718@N08/13579450523/“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #1:Boilerplate-Code
Kendo UI
Plain HTML
JavaScript
YUI
Template
JavaScript
AngularJS
JavaScript
Template
https://www.flickr.com/photos/122127718@N08/13579450523/“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #2:Unterschiedliche Frameworks,unterschiedliche Lösungswege
Welches Framework? Mischen möglich?
https://www.flickr.com/photos/122127718@N08/13579450523/“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #3:“Lock-In” vs. Komplexität
Anforderungen an einen Webentwickler
https://www.flickr.com/photos/122127718@N08/13579450523/“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #4:Frontends sind komplex
https://www.flickr.com/photos/122127718@N08/13579450523/“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #4:Frontends sind komplexsehr komplex
https://www.flickr.com/photos/122127718@N08/13579450523/“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #4:Frontends sind komplexsehr komplexrichtig komplex
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Wird es mitWeb Components einfacher?
<google-map latitude="49.0135165" longitude="8.4022463"></google-map>
<google-map latitude="49.0135165" longitude="8.4022463">
<google-map-marker latitude="49.0135165" longitude="8.4022463"> </google-map-marker>
</google-map>
<google-map map="{{map}}" latitude="49.0135165" longitude="8.4022463">
<google-map-marker latitude="49.0135165" longitude="8.4022463"> </google-map-marker>
</google-map>
<google-map-directions map="{{map}}" start-address="Karlsruhe" end-address="München"></google-map-directions>
<google-map map="{{map}}" latitude="49.0135165" longitude="8.4022463">
<google-map-marker latitude="49.0135165" longitude="8.4022463"> </google-map-marker>
</google-map>
<google-map-directions map="{{map}}" start-address="Karlsruhe" end-address="München"></google-map-directions>
http://jsfiddle.net/mprej0j4/67/
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“keep it simple”
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“divide & conquer”
“keep it simple”
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“think local”
“divide & conquer”
“keep it simple”
Historie
“Web Components”umfassen mehrere einzelne Spezifikationen
Web Components
Decorators Custom Elements Shadow DOM HTML Imports HTML Templates
HTML5
W3C Editor’s Draft
W3C Recomm. Track Process Maturity Levels
W3C Working Draft (WD)W3C Candidate Recommendation (CR)W3C Proposed Recommendation (PR)W3C Recommendation (REC)
W3C NoteNo Specification
moved to HTML5
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
Neue Browser-API:
HTML Imports
HTML Templates
● Beschreibt DOM
● Bleibt inaktiv, bis clone()
● Leichtgewichtig
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browsereingefügt
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browsereingefügt
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Ich möchte einen Videoplayer mit einer
Playlist”
Videoplayer mit Playlist
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Ohne Verwendung von Shadow DOM
Ohne Verwendung von Shadow DOM
div
Ohne Verwendung von Shadow DOMContainer für
Video + Playlistdiv
Ohne Verwendung von Shadow DOM
video
div
Ohne Verwendung von Shadow DOM
div
div
video
Ohne Verwendung von Shadow DOM
divdiv
div
video div
Ohne Verwendung von Shadow DOM
.. ..
..
.. ..
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
div
video div
divdiv
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Mit Verwendung von Shadow DOM
Mit Verwendung von Shadow DOM
div
Mit Verwendung von Shadow DOM
video
div
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
eNeue Browser-API:
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
Max. 1 Shadow-Tree pro Element
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
Max. 1 Shadow-Tree pro Element
Stylesheet wirkt sich nur innerhalb dieses
Sub-Trees aus
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
Max. 1 Shadow-Tree pro Element
Stylesheet wirkt sich nur innerhalb dieses
Sub-Trees aus
Events in Shadow Tree “wie gehabt”
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
Einfacher Markup,kein Boilerplate-Code
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
“Ripple-Effekt” +Animationen
Einfacher Markup,kein Boilerplate-Code
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Und Polymer?
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“The Polymer library is a lightweight sugaring layer on top of the web components
APIs [...]”https://github.com/Polymer/polymer
Polymer: Fakten
● Maintainer: Google● Start der Entwicklung: Oktober 2012, aktuelle Version: 1.2
● Ziele:○ Mobile + Modern Browsers First○ Mehr deklarativ, weniger imperativ○ Tooling Eco-System○ Interoperabilität
Produkte, die Polymer verwenden
YouTube Gaming:http://gaming.youtube.com
Chrome Platform Status:http://chromestatus.com
Google Zeitgeist 2013:http://zeitgeist-globe.appspot.com
Chrome Dev Editor:https://goo.gl/1ixIkA
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
“All in”: Für UI-zentrische Komponenten
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
“All in”: Für UI-zentrische Komponenten
Für Elemente mit wenig UI-Interaktion
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
“All in”: Für UI-zentrische Komponenten
Für Elemente mit wenig UI-Interaktion
Für Elemente ohne UI-Anteile, rein funktionale
Komponenten
Dateistruktur eines “Polymer-Elements”
<HTML-Imports>
<script>
<dom-module>
<dom-module id=”my-element”>
<template>
<style>
Dateistruktur eines “Polymer-Elements”<dom-module id=”my-element”>
<HTML-Imports>
<template>
<style>
<script>
<dom-module>
Ist selbst ein Custom-Element, das die Polymer-
Library mitbringt
https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Styling
Styling von “außen” / Theming
Styling von “außen” / Theming
Polymer liefert Shim für diesen Draft
Styling von “außen” / Theming
::shadow
Styling von “außen” / Theming
::shadow
Styling von “außen” / Theming
::shadow Färbt nur die Textfarbe der s von my-
element in rot.
Styling von “außen” / Theming
/deep/
Styling von “außen” / Theming
/deep/
Styling von “außen” / Theming
/deep/Färbt alle s des
gesamten Dokuments in rot.
Styling von “außen” / Theming
/deep/::shadow
Styling von “außen” / Theming
/deep/::shadow● “Consumer” muss interne Details der Komponenten kennen
Styling von “außen” / Theming
/deep/::shadow● “Consumer” muss interne Details der Komponenten kennen
Bei Änderungen an der Komponente, kann die CSS-
Regel evtl. nicht mehr greifen!
Styling von “außen” / Theming
/deep/::shadow● “Consumer” muss interne Details der Komponenten kennen
● Schlechte PerformanceBei Änderungen an der
Komponente, kann die CSS-Regel evtl. nicht mehr
greifen!
Styling von “außen” / Theming
/deep/::shadow● “Consumer” muss interne Details der Komponenten kennen
● Schlechte Performance
CSS-Regeln sind nicht mehr nur auf den Sub-Tree beschränkt
Bei Änderungen an der Komponente, kann die CSS-
Regel evtl. nicht mehr greifen!
Styling von “außen” / Theming
/deep/::shadow
https://www.polymer-project.org/1.0/docs/devguide/styling.html
Styling von “außen” / Theming
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Tooling Ökosystem
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
https://github.com/yeoman/generator-polymer
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-Starter-Kit
https://github.com/yeoman/generator-polymer
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-Starter-Kit
https://github.com/yeoman/generator-polymer
Generatoren
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
basiert auf Polymer-Starter-Kit
Erzeugt statische Doku auf <user.>.github.io
https://github.com/yeoman/generator-polymer
Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
Others
LOCAL TESTINGREMOTE TESTING
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
Mocha
Chai
Lodash
Async
Sinon
includes
WCT
Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
includes
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
Mocha
Chai
Lodash
Async
Sinon
Web Component Tester
https://github.com/Polymer/web-component-tester
● Black-Box-Tests sind möglich
● BDD ( ) + TDD ( )
● Komponente wird “als Ganzes” getestet
Web Component Tester
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Weitere Tools
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports kombinieren, JavaScript
minifizieren
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports kombinieren, JavaScript
minifizieren
Linter für Polymer
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports kombinieren, JavaScript
minifizieren
Linter für Polymer
cdn.rawgit.com-Proxy, HTML-Imports mit
Versionierung
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports kombinieren, JavaScript
minifizieren
Linter für Polymer
cdn.rawgit.com-Proxy, HTML-Imports mit
Versionierung
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wie groß sollte eine Komponente sein?”
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
Frameworks sinnvoll nutzen
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
Frameworks sinnvoll nutzen
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
Frameworks sinnvoll nutzen
Dann nicht mehr wiederverwendbar
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
● Neue Komponenten aus vorhandenen aufbauen
Frameworks sinnvoll nutzen
Dann nicht mehr wiederverwendbar
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
● Neue Komponenten aus vorhandenen aufbauen
Frameworks sinnvoll nutzen
Dann nicht mehr wiederverwendbar
Gibt’s hierfür bereits ein brauchbares Element?
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wie kann ich damit die Qualität verbessern?”
● z.B. für Kundenprojekte
○ dadurch inkrementelle Verbesserung der Qualität
○ ständig getestet
○ zentral verwaltet
○ Import in das aktuelle Projekt
Eigener Pool an Komponenten
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wo finde ich Komponenten?”
http://elements.polymer-project.org
http://customelements.io
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wie kann ich eine Komponente verwenden?”
1 Find/Install
1 Find/Install
1 Find/Install
1
2
Find/Install
Import
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
2
Find/Install
Import
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
3
2
Find/Install
Import
Use
<body> <div> <paper-button raised>BUTTON</paper-button> </div></body>
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
3
2
Find/Install
Import
Use
<body> <div> <paper-button raised>BUTTON</paper-button> </div></body>
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
3
2
Find/Install
Import
Use
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Browsersupport
MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
32+ 36+ 45+
4.4+7.1+26+22+ 8+
23+ 45+
29+ 35+
33+
45+
*
* Chrome for Android / Android Browser
Browser-Support (nativ)Herbst 2015
13+
Quelle: caniuse.com
MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
*
* Chrome for Android / Android Browser
10+ 10+7+7+
Browser-Support (polyfilled)Herbst 2015
Quelle: caniuse.com
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
● Standard / nativ implementiert
● Sehr viele Tools
● Komplexität + Styling wird gekapselt
● Interoperabilität mit anderen Frameworks
● Einfach testbar
Zusammenfassung
Weitere Ressourcen
Polymer Summit 2015 CodeLab Tutorialshttp://www.code-labs.io/polymer-summit
Web Components “Gold Standard” alias “Best Practices”https://github.com/webcomponents/gold-standard/wiki
Polycastshttps://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
Polymer Summit 2015https://www.youtube.com/playlist?list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J
Kontakt
Patrick Hillertpatrick.hillert@inovex.de
github.com/silentHootwitter.com/silentHooslideshare.net/PatrickHillert
Quellenverzeichnis / RechtlichesDie Quellen finden sich jeweils direkt an der entsprechenden Stelle des zitierten Werkes. / All sources are given appropriate credit at the place of their corresponding place on slide.
Die verwendeten Logos sind Eigentum der jeweiligen Inhaber. / All logos and trademarks are the property of their respective owners. If you are the owner and don’t want to show, please let me know.
Copyright by Last Call Media Inc., Free for Commercial Use, https://www.iconfinder.com/icons/296208/axe_configuration_gear_mining_pick_pickaxe_tool_tools_work_icon#size=128
Copyright by the gnome.org project, licensed under GPL, https://www.iconfinder.com/icons/55596/accept_check_ok_tick_icon#size=64
Copyright by Ionicicons.com, licensed under MIT, https://www.iconfinder.com/icons/211746/flag_outline_icon#size=64
top related