Das Web ist sowohl von seiner Entstehungsgeschichte, als auch von seinem Einfluß auf Technologie, Wirtschaft, Wissen, Politik und Gesellschaft einzigartig und nach wie vor absolut faszinierend. Das aktuelle Buzzword “Digitalisierung” und der damit verbundene Hype wäre ohne das Web und dessen Grundsätze und Wirkprinzipien nicht existent.
-
-
“The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy. The ultimate goal of the Web is to support and improve our weblike existence in the world. We clump into families, associations, and companies. We develop trust across the miles and distrust around the corner.” Diese Beschreibung von Tim Berners-Lee aus seinem Buch “Weaving the Web” zeigt, dass das Web deutlich mehr ist, als eine Sammlung von Technologien.
-
-
Und genau dieser Gedanke wird innerhalb des Schwerpunkts verfolgt, es wird mehr erkundet als interessante und erfolgversprechende Web-Technologien; und mehr vermittelt als zeitgemäßes Web-Development, denn die Leitfrage die dem Schwerpunkt zugrunde liegt, lautet:
-
-
Wie können wir das Web weiter spinnen?
-
-
Oder anders formuliert: wie konzipieren, entwickeln, verbreiten und evaluieren wir Produkte, Dienste und Services im Web, die das Leben und Arbeiten von Individuen, Gruppen und Organisationen vereinfachen als auch bereichern und somit verbessern. Das Phänomen “Web” wird möglichst umfassend betrachtet, denn Anwendungen im Web sind immer mehr durch die Vernetzung von Diensten, Daten und Prozessen gekennzeichnet. Klingt kompliziert. Ist es irgendwie auch. Und genau darin liegt der Reiz und die Herausforderung.
-
-
Der Schwerpunkt richtet sich an Studierende mit großem Interesse am Web und den damit verbundenen Technologien, mit einschlägigen Erfahrungen im Bereich Web-Anwendungen und dem Wunsch und Willen echte Produkte und Services in den Markt und die Community zu bringen.
-
-
Berufsfelder für Absolventinnen und Absolventen sind
-
-
Entwickler und Entwicklerin von Web Anwendungen z.B. in Web Agenturen oder Softwarehäusern
-
Architekt oder Architektin für Web Projekte in größeren Unternehmen oder Organisationen
-
Gründer oder Gründerin von Start Ups im innovativen Web Umfeld
-
Berater oder Beraterin für die Integration von Prozessen mit dem Web
-
Web Enthusiast oder Web Enthusiastin
-
-
-
Was sollten Sie mitbringen?
-
Für den Schwerpunkt werden einschlägige Kenntnisse und Fertigkeiten im Bereich Web-Technologien und Web-Development vorausgesetzt. Nähere Informationen finden Sie unter Empfohlene Voraussetzungen, Kenntnisse und Fertigkeiten.
-
-
Schwerpunktspezifische Pflichtmodule
-
-
Innerhalb des Schwerpunkts müssen die folgenden Module als Pflichtmodule belegt werden:
Markdown ist eine vereinfachte Auszeichnungssprache die schon in ihrer Ausgangsform ohne weitere Konvertierung leicht lesbar ist. Das ist schön, praktisch und eine gute Voraussetzung für Dokumente, die ggf. in verschiedene Formate umgewandelt werden sollen. Außerdem haben die Dokumente eine gute Struktur und lassen sich schnell editieren. Viele Static Page Generatoren unterstützen Markdown, oder verwenden es gar als Standard Formatierung, so auch Jekyll. Leider wird Markdown hier jedoch nur in *.md Dokumenten unterstützt, nicht jedoch in *.html Dokumenten, diese sind jedoch häufig praktisch, wenn man komplexere Inhalte aufbauen möchte.
-
-
-
Aufgabe
-
Entwicklen Sie eine oder mehrere Möglichkeiten, um auch in *.html Dokumenten Markdown Support zu ermöglichen und wägen Sie ab, welche bezogen auf die Qualitätskriterien am sinnvollsten ist.
-
-
Ansätze
-
Es gäbe eine Reihe von Ansätzen, um dies zu realisieren:
-
-
Nutzung eines Jekyll Plugins
-
Konvertierung im parallelen Build Prozess
-
Konvertierung im Client via Javascript
-
…
-
-
-
Qualitätskriterien
-
Folgende Kriterien sollten berücksichtigt werden:
-
-
Lösung konvertiert automatisch (muss nicht händisch getriggert werden)
-
Lösung ist performant
-
Nice to have: Lösung funktioniert in anderen Kontexten, also außerhalb von Jekyll
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/_site/web-technologien/index.html b/_site/web-technologien/index.html
deleted file mode 100755
index f1bc7783..00000000
--- a/_site/web-technologien/index.html
+++ /dev/null
@@ -1,231 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- Web Technologien // Weaving the Web Schwerpunkt im Medieninformatik Master
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Dem Modul liegt folgende Modulbeschreibung zugrunde.
-
-
-
-
-
-
-
-
-
-
-
-
-
Die Veranstaltung zielt zusammengefasst auf die Erweiterung der Kompetenzen in folgenden Bereichen:
-
-
Verbesserung der individuellen Web-Coding Skills
-
Ermächtigung für professionelle Technologieentscheidungen und Entscheidungsdokumentation
-
Verbesserungen der Kommunkations- und Diskussionsfähigkeit
-
Ermächtigung zu nachhaltigen technischen Ausrichtung eines Web-Projekts
-
Ermächtigung zu nachhaltiger Entwicklung web-basierter Systeme
-
Verbesserung der eigenständigen Erarbeitung in neue Technologien
-
Verbesserung die individuellen Coaching Skills
-
-
-
-
-
-
-
-
-
-
Empfohlene Voraussetzungen/ Kenntnisse und Fertigkeiten
-
-
In diesem Modul werden einschlägige Kenntnisse und Fertigkeiten im Bereich Web-Technologien und Web-Development vorausgesetzt. Nähere Informationen finden Sie unter Empfohlene Voraussetzungen, Kenntnisse und Fertigkeiten.
-
-
-
-
-
-
-
-
-
Prüfung/ Bewertung
-
-
Die Prüfungsleistung besteht aus einem (Online-)Workshop und einem fortlaufenden Projekt (Beiboot) zu je 50%.
-
-
Dabei werden folgende Bewertungskriterien angelegt:
In diesem Workshop befassen wir uns mit CSS Grids und Custom Properties. Beides sind Features, die CSS mit deutlich mehr Kraft ausstatten und das Front-End Development im Web enorm bereichern. Darüber hinaus werden wir die Methode Expressive CSS kurz anreißen und befassen uns kurz mit dem Style Dictionary von Amazon.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis error quos!
-
Maxime eligendi doloribus laborum aspernatur harum maiores voluptatem repellat adipisci molestiae eius.
-
-
-
Consectetur adipisicing elit. Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est sit itaque delectus asperiores, ducimus, dolore nobis expedita minus labore!
-
Facilis possimus sed, iusto, praesentium, ratione eligendi itaque ex minima alias inventore maiores. Provident quod accusamus, nisi quisquam, beatae eius.
-
Iure ratione commodi beatae nobis accusamus impedit numquam architecto dolorum sunt cumque perferendis consequuntur distinctio, magnam aliquid eaque cupiditate nihil!
-
Dignissimos voluptatem culpa repellat asperiores iste voluptatum a consequuntur eveniet aperiam quam laudantium cumque adipisci, ex error earum, voluptates est.
-
Itaque, ducimus quos saepe dignissimos quas maiores enim aliquid numquam, nesciunt in, quia, nihil obcaecati voluptatibus earum officiis distinctio doloremque?
-
Alias consequuntur dolorum, minus. Adipisci, omnis esse dolorem nam aliquam, laudantium praesentium excepturi pariatur in magni, consequuntur earum. Harum, laborum.
-
Officia consequuntur beatae facilis. Asperiores, beatae corporis quae similique sint, amet quidem repudiandae cum repellendus rem, veritatis impedit error molestiae!
-
Sint a repudiandae tempora enim magnam! Aliquam provident iste ea, ducimus mollitia officiis, commodi eligendi labore temporibus, dolorum enim praesentium.
-
Dignissimos sequi illo doloremque rerum maiores consequatur veritatis minima possimus nam tempora impedit consequuntur quasi vitae ullam similique, enim, necessitatibus.
-
Eum similique eveniet dolor repellat aliquid vero ab, nostrum corporis, odit odio tempore voluptates sapiente animi praesentium at numquam pariatur?
-
-
-
-
-
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-020-advanced-usage.html b/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-020-advanced-usage.html
deleted file mode 100755
index 3fa056d0..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-020-advanced-usage.html
+++ /dev/null
@@ -1,67 +0,0 @@
-
-
-
-
-
- Advanced Usage of CSS Grid
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis error quos!
-
Maxime eligendi doloribus laborum aspernatur harum maiores voluptatem repellat adipisci molestiae eius.
-
-
-
Consectetur adipisicing elit. Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est sit itaque delectus asperiores, ducimus, dolore nobis expedita minus labore!
-
Facilis possimus sed, iusto, praesentium, ratione eligendi itaque ex minima alias inventore maiores. Provident quod accusamus, nisi quisquam, beatae eius.
-
Iure ratione commodi beatae nobis accusamus impedit numquam architecto dolorum sunt cumque perferendis consequuntur distinctio, magnam aliquid eaque cupiditate nihil!
-
Dignissimos voluptatem culpa repellat asperiores iste voluptatum a consequuntur eveniet aperiam quam laudantium cumque adipisci, ex error earum, voluptates est.
-
Itaque, ducimus quos saepe dignissimos quas maiores enim aliquid numquam, nesciunt in, quia, nihil obcaecati voluptatibus earum officiis distinctio doloremque?
-
Alias consequuntur dolorum, minus. Adipisci, omnis esse dolorem nam aliquam, laudantium praesentium excepturi pariatur in magni, consequuntur earum. Harum, laborum.
-
Officia consequuntur beatae facilis. Asperiores, beatae corporis quae similique sint, amet quidem repudiandae cum repellendus rem, veritatis impedit error molestiae!
-
Sint a repudiandae tempora enim magnam! Aliquam provident iste ea, ducimus mollitia officiis, commodi eligendi labore temporibus, dolorum enim praesentium.
-
Dignissimos sequi illo doloremque rerum maiores consequatur veritatis minima possimus nam tempora impedit consequuntur quasi vitae ullam similique, enim, necessitatibus.
-
Eum similique eveniet dolor repellat aliquid vero ab, nostrum corporis, odit odio tempore voluptates sapiente animi praesentium at numquam pariatur?
-
-
-
-
-
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-030-lines.html b/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-030-lines.html
deleted file mode 100755
index 94f30412..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-030-lines.html
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-
-
-
- Using Grid Lines
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis error quos!
-
Maxime eligendi doloribus laborum aspernatur harum maiores voluptatem repellat adipisci molestiae eius.
-
-
-
Content right: Consectetur adipisicing elit. Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Content left: Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est sit itaque delectus asperiores, ducimus, dolore nobis expedita minus labore!
-
Facilis possimus sed, iusto, praesentium, ratione eligendi itaque ex minima alias inventore maiores. Provident quod accusamus, nisi quisquam, beatae eius.
-
Iure ratione commodi beatae nobis accusamus impedit numquam architecto dolorum sunt cumque perferendis consequuntur distinctio, magnam aliquid eaque cupiditate nihil!
-
Dignissimos voluptatem culpa repellat asperiores iste voluptatum a consequuntur eveniet aperiam quam laudantium cumque adipisci, ex error earum, voluptates est.
-
-
-
-
-
-
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-040-named-lines.html b/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-040-named-lines.html
deleted file mode 100755
index 11630a59..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-040-named-lines.html
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
-
-
- Using Named Grid Lines
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis error quos!
-
Maxime eligendi doloribus laborum aspernatur harum maiores voluptatem repellat adipisci molestiae eius.
-
-
-
Content right: Consectetur adipisicing elit. Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Content left: Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est sit itaque delectus asperiores, ducimus, dolore nobis expedita minus labore!
-
Facilis possimus sed, iusto, praesentium, ratione eligendi itaque ex minima alias inventore maiores. Provident quod accusamus, nisi quisquam, beatae eius.
-
Iure ratione commodi beatae nobis accusamus impedit numquam architecto dolorum sunt cumque perferendis consequuntur distinctio, magnam aliquid eaque cupiditate nihil!
-
Dignissimos voluptatem culpa repellat asperiores iste voluptatum a consequuntur eveniet aperiam quam laudantium cumque adipisci, ex error earum, voluptates est.
-
-
-
-
-
-
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-050-areas.html b/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-050-areas.html
deleted file mode 100755
index 430ad045..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-050-areas.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
-
- Using Grid Areas
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis error quos!
-
Maxime eligendi doloribus laborum aspernatur harum maiores voluptatem repellat adipisci molestiae eius.
-
-
-
Content right: Consectetur adipisicing elit. Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Content left: Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est sit itaque delectus asperiores, ducimus, dolore nobis expedita minus labore!
-
Facilis possimus sed, iusto, praesentium, ratione eligendi itaque ex minima alias inventore maiores. Provident quod accusamus, nisi quisquam, beatae eius.
-
Iure ratione commodi beatae nobis accusamus impedit numquam architecto dolorum sunt cumque perferendis consequuntur distinctio, magnam aliquid eaque cupiditate nihil!
-
Dignissimos voluptatem culpa repellat asperiores iste voluptatum a consequuntur eveniet aperiam quam laudantium cumque adipisci, ex error earum, voluptates est.
-
-
-
-
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-060-fallbacks.html b/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-060-fallbacks.html
deleted file mode 100755
index b9cb89c9..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/css-grid/grid-060-fallbacks.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
-
- CSS Grid in Production Environment
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis error quos!
-
Maxime eligendi doloribus laborum aspernatur harum maiores voluptatem repellat adipisci molestiae eius.
-
-
-
Content right: Consectetur adipisicing elit. Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Content left: Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est sit itaque delectus asperiores, ducimus, dolore nobis expedita minus labore!
-
Facilis possimus sed, iusto, praesentium, ratione eligendi itaque ex minima alias inventore maiores. Provident quod accusamus, nisi quisquam, beatae eius.
-
Iure ratione commodi beatae nobis accusamus impedit numquam architecto dolorum sunt cumque perferendis consequuntur distinctio, magnam aliquid eaque cupiditate nihil!
-
Dignissimos voluptatem culpa repellat asperiores iste voluptatum a consequuntur eveniet aperiam quam laudantium cumque adipisci, ex error earum, voluptates est.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis error quos!
-
Maxime eligendi doloribus laborum aspernatur harum maiores voluptatem repellat adipisci molestiae eius.
-
-
-
Consectetur adipisicing elit. Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
Fugiat officia officiis quae sit, quis nobis doloribus nisi, quaerat aliquid aperiam.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam consequatur ullam recusandae mollitia id, dolore nam vero omnis voluptatem, minus rerum maiores commodi exercitationem ipsam perferendis debitis, blanditiis sint! Ipsam.
-
Necessitatibus quo, atque eveniet minus dolorum aliquam, autem saepe quisquam recusandae vero nemo, beatae corporis. Iure ratione fuga soluta neque molestias, esse? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
-
-
-
-
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/index.html b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/index.html
deleted file mode 100755
index 34bb012f..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
-
-
-
-
-
-
- More Complex Setup with CSS Properties
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
WBA1 Challenge Tipps
-
Ein paar Gedanken, Ideen und Tools für einen entspannteren Tag.
Anbei ein paar Gedanken und Ideen zur WBA1 Challenge. Diese kleine Seite erhebt keinen Anspruch auf Vollständigkeit und die Herangehensweise, die Ideen und die vorgeschlagenen Tools und Frameworks sind mitunter sehr subjektiv. Wir hoffen es hilft trotzdem. Außerdem haben uns einige gefragt, wie sie sich vorbereiten können. Auch dazu gibt es ein paar Tipps und Vorschläge.
-
- Viel Spaß, Ihr WBA Team
-
-
-
-
directions_run Worum geht es?
-
-
-
Bei der Challenge geht es darum, im Team eine Aufgabe oder ein Problem mit Hilfe einer web-basierten Anwendung zu lösen. Dazu braucht man, wer hätte es gedacht, Skills bei der Entwicklung web-basierter Anwendungen. Aber man braucht noch ein wenig mehr, z.B. eine gute Idee, gute Organisation, ein gutes Gefühl für Inhalt, gestalterische Grundkompetenz und Motivation.
-
-
-
-
-
people Organisation im Team?
-
-
-
Sie werden im Team arbeiten. Hier ist es ganz vorteilhaft, wenn Sie und Ihr Team ein gewisses Maß an Organisationsstruktur etablieren. Dies hat im konkreten Kontext vor allem Auswirkungen auf drei Bereiche:
-
-
-
Arbeitsorganisation
-
Wer macht was? Für die Challenge lohnt es sich, wenn sich die einzelnen Teammitglieder etwas spezialisieren. Vielleicht sind ein oder zwei Mitglieder besser in Javascript und andere wiederum besser in CSS und wieder andere haben ein gutes Auge für Gestaltung oder sind gute Rechercheure. Dies sollten Sie frühzeitig evaluieren und regeln.
-
-
-
Codestruktur & -management
-
Wer ist für welche Bereiche, Dateien & Komponenten zuständig. Wenn Sie schnell und mit möglichst wenigen Mergekonflikten durch den Tag kommen wollen, ist es ratsam sich hier ein Konzept zurecht zu legen und es entsprechend umzusetzen. Teilen Sie den Code nach technischen (CSS, JS, HTML, etc.) oder inhaltlichen (Landigpage, Doku, etc.) Bereichen auf oder zerlegen Sie Ihr Projekt in Komponenten, die dann mit Zuständigkeiten versehen werden.
-
-
-
-
-
-
-
bubble_chart Wie könnte man sich dem Problem nähern?
-
-
-
Was ist das Problem?
-
Heiteres Drauflos-coden ist selten ein guter Anfang. Auch wenn bei der Challenge wenig Zeit zur Verfügung steht, lohnt es sich am Anfang der Challenge, oder in Vorbereitung auf die Challenge eine genauere Betrachung des Problems. Was ist eigentlich das Problem und welche Möglichkeiten gäbe es dies zu lösen?
-
Es empfiehlt sich verschiedene Lösungsstrategien zu entwickeln und gegeneinander abzuwägen. Bei der Erarbeitung von Lösungsansätzen können Kreativtätstechniken enorm helfen. Die bekannstete ist vermutlich das Brainstorming. Aber auch andere Techniken, der Morphologische Kasten, die 6-3-5 Technik oder das Meinungs-Blitzlicht können enorm helfen, die Ideenphase zu verkürzen und zu besseren oder interessanteren Lösungsstrategien beitragen.
-
-
Wie wählen wir die beste Variante?
-
Grundsätzlich gilt: Sie sollten Varianten haben und Sie sollten Kritierien haben, mit deren Hilfe Sie die beste oder passenste Variante auswählen. Im Kontext der Challenge könnte es eine Reihe von sinnvollen Kriterien geben. Hier ein paar Beispiele:
-
-
-
die Variante löst das beschriebene Problem gut
-
die Variante lässt sich gut erkären
-
die Variante lässt sich gut im gegebenen Zeitrahmen und Kontext umsetzen
-
die Variante lässt sich gut im Team arbeitsteilig umsetzen
-
bei der Umsetzung der Variante lassen sich gut die Kenntnisse von HTML, CSS und Javascript einsetzen
-
-
Time Boxing
-
Wenn die Zeit knapp ist, könnte Time Boxing eine hilfreiche Technik sein. Hierbei werden für bestimmte (Teil-)aufgaben sinnvolle Zeitvorgaben gegeben, die absolut strikt eingehalten werden. Sinnvoll heißt: der Task bekommt ein Zeitfenster, das der Relevanz des Tasks im Kontext der Gesamtaufgabe entspricht. Damit wird sichergestellt, dass alle für den Prozess notwendigen Aufgaben erledigt werden können, also keine Aufgaben am Ende des Prozesses "herunter fallen".
-
Zielbild aufbauen
-
Eine kleine Skizze, Wireframe, eine Übersicht, all das hilft dem Team ein gemeinsames Bild zu geben und die Arbeit besser aufzuteilen. Nutzen Sie dererlei Techniken um im Team ein gemeinsames Bild zu haben.
-
-
-
-
-
-
-
web Nutzung von Frameworks, Icons und anderen Ressourcen.
-
-
Im Rahmen der Challenge ist im Grunde so gut wie alles erlaubt, was Ihnen hilft das Projekt so gut und professionel wie möglich zu realisieren. Nutzen Sie Frameworks, Iconsets und Tools. Aber Sie müssen auf Ihrer Dokumentations Seite darauf hinweisen, welche Tools und Codesnippets Sie verwendet haben. Hier eine kleine Übersicht über mögliche Helferleins.
JavaScript Bibliothek, die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten zur Verfügung stellt.
-
-
-
-
-
-
mode_edit Konzeptsite & Dokumentation
-
-
Wie immer im akademischen Kontext, sollten Sie Ihre Arbeit undIhr Vorgehen dokumentieren. Im Rahmen der WBA1 Challenge geht es nicht darum in alle Arbeitsschritte, Abwägungen und Entscheidungsprzesse in aller Ausführlichkeit zu beschreiben und zu erklären, aber folgende Punkte sollten festhalten:
-
Für die Konzeptsite
-
Hier geht es darum, Ihre Idee oder Ihr Feature möglichst prägnant, interessant und anschaulich zu erklären. Dabei sollten z.B. die folgenden Fragen beantwortet werden:
-
-
Was ist das Feature?
-
Wie kann es genutzt werden?
-
Warum ist es im automobilen Kontext sinnvoll oder interessant?
-
Welche Vorraussetzungen sind erforderlich, z.B. externe Services wie Google Maps?
-
Welches Nutzungserlebnis bringt das Feature.
-
-
Ziehen Sie für die Konzeptsite alle Register: gute Grafiken, gute Texte, Filme, interaktive Elememte, etc.
-
Für die Dokumentation
-
Hier beschreiben Sie bitte kurz Ihr Vorgehen, die Aufteilung im Team, die größte Herausforderung und idealerweise den Grad Ihrer Zielerreichung, bzw. was noch verbessert werden könnte. Dokumentieren Sie bitte auch, was Sie an externen Tools, Bibliotheken und Codesnippets Sie verwendet haben. Wenn Sie noch Code in Branches haben, der nicht mehr in die finale Version integriert werden könnten, dann lassen uns das wissen. Beschreiben Sie kurz, welche Funktion der entsprechende Code übernehmen sollte und was zu seiner Implementierung noch fehlt.
-
Die Dokumentation darf knapp formuliert und in Stichworten sein.
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/accordion.js b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/accordion.js
deleted file mode 100755
index 78f7b309..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/accordion.js
+++ /dev/null
@@ -1,18 +0,0 @@
-document.addEventListener("DOMContentLoaded", function(event) {
-
- // Alle Elemente mit der Klasse js-accordion sammeln …
- var accordions = document.querySelectorAll('.js-accordion'),
- i;
-
- // Über die Elemente interieren …
- for (i = 0; i < accordions.length; ++i) {
-
- // Klick Listener anheften
- accordions[i].addEventListener("click", function(e) {
-
- // Beim Klick Klasse togglen
- this.classList.toggle("active");
- });
- }
-
-});
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/eyecandy-scrolling.js b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/eyecandy-scrolling.js
deleted file mode 100755
index 42eff808..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/eyecandy-scrolling.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* Smooth Scrolling
-BY CHRIS COYIER LAST UPDATED ON APRIL 23, 2017
-https://css-tricks.com/snippets/jquery/smooth-scrolling/
-############################################################################ */
-
-// Scroll to a certain element
-document.querySelector('.js-scrollto').addEventListener("click", function(e) {
- var target = this.getAttribute("href");
- e.preventDefault();
- document.querySelector(target).scrollIntoView({
- behavior: 'smooth'
- });
-}, false);
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/eyecandy-showcase.js b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/eyecandy-showcase.js
deleted file mode 100755
index 3025b001..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/eyecandy-showcase.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/* Eyecandy Showcase
-
-Färbt die Showcase Items hübsch ein
-############################################################################ */
-
-
-var eyecandyShowcase = {};
-eyecandyShowcase.basecolor = [147, 19, 206];
-eyecandyShowcase.colors = [
- [147, 19, 206],
- [221, 17, 102],
- [73, 82, 225]
-];
-eyecandyShowcase.lastAdd = 0;
-
-eyecandyShowcase.getOpacity = function() {
- return (Math.floor(Math.random() * 4) + 6) / 10;
-}
-
-eyecandyShowcase.getColor = function(mode) {
- if (mode === "single") {
- return eyecandyShowcase.basecolor;
- } else {
- var rand = Math.floor(Math.random() * eyecandyShowcase.colors.length);
- return eyecandyShowcase.colors[rand];
- }
-}
-
-eyecandyShowcase.getRGBA = function() {
- var a = eyecandyShowcase.getOpacity();
- while (Math.abs(eyecandyShowcase.lastAdd - a) < 0.1) { a = eyecandyShowcase.getOpacity(); }
- eyecandyShowcase.lastAdd = a;
- var color = eyecandyShowcase.getColor();
- return color.join(",") + "," + a;
-}
-
-document.addEventListener("DOMContentLoaded", function(event) {
-
- // Alle Elemente mit der Klasse showcase__item sammeln …
- var showcase__items = document.querySelectorAll('.showcase__item'),
- i;
-
- // Über die Elemente interieren …
- for (i = 0; i < showcase__items.length; i++) {
- var rgba = eyecandyShowcase.getRGBA();
- showcase__items[i].style.backgroundColor = "rgba(" + rgba + ")";
- }
-});
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/viewmode-showcase.js b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/viewmode-showcase.js
deleted file mode 100755
index 68c802df..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/scripts/viewmode-showcase.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* Viewmode Showcase
-
-Ändert die Anordnung der Showcase Items
-############################################################################ */
-
-
-var viewmodeShowcase = {};
-viewmodeShowcase.activeMode = false;
-viewmodeShowcase.lastButton = false;
-
-document.addEventListener("DOMContentLoaded", function(event) {
-
- var activeElement = document.querySelector("#viewmodeSwitcher .is-active");
- viewmodeShowcase.lastButton = activeElement;
-
- document.querySelector("#viewmodeSwitcher").addEventListener("click", function(ev) {
- var zielElementId = ev.target.dataset.element;
- var viewmode = ev.target.dataset.viewmode;
- var ele = document.querySelector(zielElementId);
-
- if (viewmodeShowcase.activeMode) {
- ele.classList.remove(viewmodeShowcase.activeMode);
- }
- ele.classList.add(viewmode);
- viewmodeShowcase.activeMode = viewmode;
-
- if (viewmodeShowcase.lastButton) {
- viewmodeShowcase.lastButton.classList.remove("is-active");
- }
- ev.target.parentNode.classList.add("is-active");
- viewmodeShowcase.lastButton = ev.target.parentNode;
- });
-
-});
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/000-resets.css b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/000-resets.css
deleted file mode 100755
index 7c033a07..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/000-resets.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/*----------------------------------------------------------------------------
-reset.css
-Enthält alle projektspezifischen Resets.
-
-Wer es noch schöner möchte, möge sich mal https://cssguidelin.es/ anschauen.
-----------------------------------------------------------------------------*/
-
-
-/* Basic Resets
------------------------------------------------------------------------------*/
-
-h1,
-h2,
-h3,
-h4 {
- letter-spacing: normal;
-}
-
-h1 {
- font-size: var(--fontsize-xxl);
-}
-
-h2 {
- font-size: var(--fontsize-xl);
-}
-
-h3 {
- font-size: var(--fontsize-l);
-}
-
-h4,
-h5,
-h6 {
- font-size: var(--fontsize);
- font-weight: bold;
-}
-
-
-/* Figure Reset
------------------------------------------------------------------------------*/
-
-figure {
- margin: 0;
-}
-
-
-/* Image Reset
------------------------------------------------------------------------------*/
-
-img {
- width: 100%;
-}
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/010-variables.css b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/010-variables.css
deleted file mode 100755
index ed982ea5..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/010-variables.css
+++ /dev/null
@@ -1,69 +0,0 @@
-/*-----------------------------------------------------------------------------
-variables.css
-Enthält alle CSS Variabeln.
-
-Wer es noch schöner möchte, möge sich mal https://cssguidelin.es/ anschauen.
-----------------------------------------------------------------------------*/
-
-
-:root {
-
- /* Basisgröße
- ----------------------------------------*/
- --base: 1em;
-
- /*
- Farben
- ----------------------------------------*/
- --color-mi-blau: rgb(73, 82, 225);
- --color-mi-pink: #dd1166;
- --color-mi-gruen: #00AD2F;
- --color-mi-lila: #9313ce;
- --color-mi-lila-light: #C8BBCE;
- --color-mi-black: #231f20;
- --color-mi-grau: #aaaaaa;
- --color-text: #000;
- --color-headlines: #666;
- --color-backgrounds: #efefef;
- --color-borders: rgba(0, 0, 0, 0.3);
- /*
- Abstände. Hierzu gibt es auch ein schönes Konzept
- https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62 */
- --content-width: 960px;
- /*
- Innenabstände umlaufend, z.B. für Buttons.
- ----------------------------------------*/
- --space-inset: var(--base);
- --space-inset-s: calc(var(--base) * 0.5);
- --space-inset-l: calc(var(--base) * 1.5);
- --space-inset-xl: calc(var(--base) * 1.5);
- /*
- Vertikale Abstände von Stapeln, also
- Elementen, die untereinander angeordnet
- werden.
- ----------------------------------------*/
- --space-stack: var(--base);
- --space-stack-xs: calc(var(--base) * 0.25);
- --space-stack-s: calc(var(--base) * 0.5);
- --space-stack-l: calc(var(--base) * 1.5);
- --space-stack-xl: calc(var(--base) * 2);
- --space-stack-xxl: calc(var(--base) * 4);
- /*
- Horizontale Abstände von Reihen, also
- Elementen, die nebeneinander angeordnet
- werden.
- ----------------------------------------*/
- --space-inline: var(--base);
- --space-inline-xs: calc(var(--base) * 0.25);
- --space-inline-s: calc(var(--base) * 0.5);
- --space-inline-l: calc(var(--base) * 1.5);
- --space-inline-xl: calc(var(--base) * 2);
- /*
- Schrift
- ----------------------------------------*/
- --fontsize: var(--base);
- --fontsize-s: calc(var(--base) * 0.75);
- --fontsize-l: calc(var(--base) * 1.25);
- --fontsize-xl: calc(var(--base) * 1.5);
- --fontsize-xxl: calc(var(--base) * 2.5);
-}
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/020-base.css b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/020-base.css
deleted file mode 100755
index 0f9af104..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/020-base.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/*-----------------------------------------------------------------------------
-base.css
-Enthält alle grundlegenden Regeln sowie zentrale helper.
-
-Wer es noch schöner möchte, möge sich mal https://cssguidelin.es/ anschauen.
-----------------------------------------------------------------------------*/
-
-
-/* Basic Styles
------------------------------------------------------------------------------*/
-
-body {
- font-size: 1.8rem;
- color: var(--color-text);
-}
-
-li,
-a,
-p,
-td,
-th {
- hyphens: auto;
- -webkit-hyphens: auto;
-}
-
-
-/* helper
------------------------------------------------------------------------------*/
-
-.hidden {
- display: none !important;
-}
-
-
-/* Material Design Icons
-http://google.github.io/material-design-icons/
------------------------------------------------------------------------------*/
-
-.material-icons {
- padding-right: var(--space-inline-s);
-}
-
-/* Rules for sizing the icon. */
-
-.material-icons.md-18 {
- font-size: 18px;
-}
-
-.material-icons.md-24 {
- font-size: 24px;
-}
-
-.material-icons.md-36 {
- font-size: 36px;
-}
-
-.material-icons.md-48 {
- font-size: 48px;
-}
-
-
-/* Rules for using icons as black on a light background. */
-
-.material-icons.md-dark {
- color: rgba(0, 0, 0, 0.54);
-}
-
-.material-icons.md-dark.md-inactive {
- color: rgba(0, 0, 0, 0.26);
-}
-
-
-/* Rules for using icons as white on a dark background. */
-
-.material-icons.md-light {
- color: rgba(255, 255, 255, 1);
-}
-
-.material-icons.md-light.md-inactive {
- color: rgba(255, 255, 255, 0.3);
-}
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/030-typography.css b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/030-typography.css
deleted file mode 100755
index c612405d..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/030-typography.css
+++ /dev/null
@@ -1,50 +0,0 @@
-/*----------------------------------------------------------------------------
-typography.css
-Enthält alle übergreifenden typographischen Regeln.
-
-Wer es noch schöner möchte, möge sich mal https://cssguidelin.es/ anschauen.
-----------------------------------------------------------------------------*/
-
-
-/* Headlines
-----------------------------------------------------------------------------*/
-
-h2 {
- color: var(--color-mi-pink);
- margin-bottom: var(--space-stack-l);
-}
-
-h3,
-h4 {
- color: var(--color-headlines);
-}
-
-h3 {
- padding-top: var(--space-stack);
-}
-
-h2+h3,
-h3:first-of-type {
- padding-top: 0;
-}
-
-.title {}
-
-.subtitle {}
-
-.title,
-.subtitle {
- margin-bottom: var(--space-stack);
-}
-
-.title+.subtitle {
- margin-top: calc(var(--space-stack-s) - var(--space-stack));
-}
-
-
-/* Mengentexte
-----------------------------------------------------------------------------*/
-
-.is-big {
- font-size: 130%;
-}
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/040-layout.css b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/040-layout.css
deleted file mode 100755
index 8c79babd..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/040-layout.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/*----------------------------------------------------------------------------
-layout.css
-Enthält alle übergreifenden typographischen Regeln.
-
-Wer es noch schöner möchte, möge sich mal https://cssguidelin.es/ anschauen.
-----------------------------------------------------------------------------*/
-
-
-/* Content
------------------------------------------------------------------------------*/
-
-.content {
- padding: var(--space-inset-l);
- margin: 0 auto;
- max-width: var(--content-width);
-}
-
-
-/* Section
------------------------------------------------------------------------------*/
-
-.section {
- padding-bottom: var(--space-stack-l);
-}
-
-.section__header {
- border-top: var(--color-borders) 1px dotted;
- padding-top: var(--space-stack);
-}
-
-
-/* Grid
------------------------------------------------------------------------------*/
-
-.grid {
- display: grid;
- grid-column-gap: var(--space-inset);
-}
-
-.grid-is-3 {
- grid-template-columns: 1fr 1fr 1fr;
-}
-
-.grid-is-2 {
- grid-template-columns: 1fr 1fr;
-}
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/050-components.css b/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/050-components.css
deleted file mode 100755
index 5b721a62..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/examples/custom-properties/custom-properties-020-complex-setup/styles/050-components.css
+++ /dev/null
@@ -1,222 +0,0 @@
-/* ----------------------------------------------------------------------------
-components.css
-Enthält alle Regeln zu Komponenten.
-
-Wer es noch schöner möchte, möge sich mal https://cssguidelin.es/ anschauen.
-----------------------------------------------------------------------------*/
-
-
-/* Site Header
------------------------------------------------------------------------------*/
-
-.site-header {
- margin-bottom: var(--space-stack-xxl);
- height: 99vh;
- background-color: var(--color-mi-lila);
- /* zur Zentrierung des Contents */
- display: flex;
- align-items: center;
- justify-content: center;
- /* Damit der Button unten und zentriert sitzt */
- position: relative;
-}
-
-.site-header__key-visual {
- background-image: url("../images/header-illustration.svg");
- background-size: contain;
- background-position: center center;
- background-repeat: no-repeat;
- margin-bottom: var(--space-stack-xl);
-}
-
-.site-header__content {
- flex: 1;
- text-align: center;
-}
-
-.site-header__content .title {
- color: #fff;
-}
-
-.site-header__content .subtitle {
- font-size: var(--fontsize-l);
- color: #fff;
-}
-
-.site-header__launch-button {
- background-color: var(--color-mi-lila);
- border: none;
- position: absolute;
- padding-bottom: var(--space-stack-xxl);
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
-}
-
-
-/* Task List
------------------------------------------------------------------------------*/
-
-.task-list__item {
- display: block;
- background-color: var(--color-backgrounds);
- padding: var(--space-inset-xl);
- border-left: var(--space-inline-xs) solid var(--color-mi-pink);
-}
-
-
-/* Footer
------------------------------------------------------------------------------*/
-
-.footer {
- margin-top: var(--space-stack-xxl);
- padding-top: var(--space-stack-xl);
- padding-bottom: var(--space-stack-xxl);
- background-color: var(--color-backgrounds);
- border-top: solid 1px var(--color-mi-lila);
-}
-
-
-/* Video
------------------------------------------------------------------------------*/
-
-.video-wrapper {
- position: relative;
- padding-bottom: 56.25%;
- /* 16:9 */
- padding-top: 25px;
- height: 0;
-}
-
-.video-wrapper iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
-
-/* Accordion
------------------------------------------------------------------------------*/
-
-.section.js-accordion:hover {
- cursor: pointer;
-}
-
-.section.js-accordion .section__content {
- max-height: 0;
- transition: all 1s;
- overflow: hidden;
-}
-
-.section.js-accordion.active .section__content {
- max-height: 2000px;
- height: auto;
-}
-
-
-/* Showcase
------------------------------------------------------------------------------*/
-
-.showcase {
- display: grid;
- margin-left: var(--space-inline);
- margin-right: var(--space-inline);
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- background-color: #efefef;
-}
-
-.showcase.rowmode {
- grid-template-columns: 1fr;
-}
-
-@media (max-width: 90rem) {
- .showcase {
- grid-template-columns: 1fr 1fr 1fr 1fr;
- }
-}
-
-@media (max-width: 70rem) {
- .showcase {
- grid-template-columns: 1fr 1fr 1fr;
- }
-}
-
-@media (max-width: 50rem) {
- .showcase {
- grid-template-columns: 1fr 1fr;
- }
-}
-
-@media (max-width: 30rem) {
- .showcase {
- m grid-template-columns: 1fr;
- }
-}
-
-.showcase__item {
- padding: var(--space-inset-l) !important;
- background-color: rgba(147, 19, 2, 0.5);
- background-size: cover;
- border-top: solid 1px rgba(255, 255, 255, 0.5);
- border-left: solid 1px rgba(255, 255, 255, 0.5);
- min-height: 20rem;
- background-size: cover;
- background-repeat: no-repeat;
-}
-
-.showcase__item h3 {
- margin-bottom: var(--space-stack-xxl);
-}
-
-.showcase__item p {
- margin-bottom: var(--space-stack-s);
- line-height: 130%;
-}
-
-.showcase__item a,
-.showcase__item p {
- color: #fff;
-}
-
-
-/* Button Group
------------------------------------------------------------------------------*/
-
-.button-group {
- padding: 0;
- margin: 0;
- display: grid;
- grid-template-columns: 48px 48px;
-}
-
-.button-group__item {
- display: inline-block;
- border: solid 1px var(--color-borders);
- padding: 0;
- width: 48px;
- height: 48px;
- transition: background-color 0.5s;
-}
-
-.button-group__item:hover {
- background-color: var(--color-mi-lila-light);
- cursor: pointer;
-}
-
-.button-group__item.is-active {
- background-color: var(--color-mi-lila-light);
-}
-
-.button-group__item+.button-group__item {
- border-left: none;
-}
-
-.button-group__item i {
- display: block;
- width: 100%;
- height: 100%;
- margin-left: -2px;
-}
\ No newline at end of file
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/can-i-use-css-grid.png b/_site/workshops/2018/css-grids-custom-properties/material/images/can-i-use-css-grid.png
deleted file mode 100755
index 76c5349d..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/can-i-use-css-grid.png and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/can-i-use-custom-properties.png b/_site/workshops/2018/css-grids-custom-properties/material/images/can-i-use-custom-properties.png
deleted file mode 100755
index b1fb7362..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/can-i-use-custom-properties.png and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/flexbox.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/flexbox.jpeg
deleted file mode 100755
index 209e4ead..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/flexbox.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/grid-flexbox.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/grid-flexbox.jpeg
deleted file mode 100755
index 682ff1b3..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/grid-flexbox.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/grid-lines.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/grid-lines.jpeg
deleted file mode 100755
index 88ac2e38..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/grid-lines.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/grid.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/grid.jpeg
deleted file mode 100755
index 45e53179..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/grid.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations.key b/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations.key
deleted file mode 100755
index 864b806d..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations.key and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.001.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.001.jpeg
deleted file mode 100755
index 0a32f808..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.001.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.002.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.002.jpeg
deleted file mode 100755
index 682ff1b3..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.002.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.003.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.003.jpeg
deleted file mode 100755
index 45e53179..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.003.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.004.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.004.jpeg
deleted file mode 100755
index 88ac2e38..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.004.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.005.jpeg b/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.005.jpeg
deleted file mode 100755
index 209e4ead..00000000
Binary files a/_site/workshops/2018/css-grids-custom-properties/material/images/illustrations/illustrations.005.jpeg and /dev/null differ
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/index.html b/_site/workshops/2018/css-grids-custom-properties/material/index.html
deleted file mode 100755
index 0f0c746c..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/index.html
+++ /dev/null
@@ -1,493 +0,0 @@
-
-
-
-
-
-
- CSS Grids, Custom Properties und ein bisschen Kleinkram
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/_site/workshops/2018/css-grids-custom-properties/material/js/reveal.js b/_site/workshops/2018/css-grids-custom-properties/material/js/reveal.js
deleted file mode 100755
index f125c555..00000000
--- a/_site/workshops/2018/css-grids-custom-properties/material/js/reveal.js
+++ /dev/null
@@ -1,5239 +0,0 @@
-/*!
- * reveal.js
- * http://revealjs.com
- * MIT licensed
- *
- * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
- */
-(function( root, factory ) {
- if( typeof define === 'function' && define.amd ) {
- // AMD. Register as an anonymous module.
- define( function() {
- root.Reveal = factory();
- return root.Reveal;
- } );
- } else if( typeof exports === 'object' ) {
- // Node. Does not work with strict CommonJS.
- module.exports = factory();
- } else {
- // Browser globals.
- root.Reveal = factory();
- }
-}( this, function() {
-
- 'use strict';
-
- var Reveal;
-
- // The reveal.js version
- var VERSION = '3.6.0';
-
- var SLIDES_SELECTOR = '.slides section',
- HORIZONTAL_SLIDES_SELECTOR = '.slides>section',
- VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section',
- HOME_SLIDE_SELECTOR = '.slides>section:first-of-type',
- UA = navigator.userAgent,
-
- // Configuration defaults, can be overridden at initialization time
- config = {
-
- // The "normal" size of the presentation, aspect ratio will be preserved
- // when the presentation is scaled to fit different resolutions
- width: 960,
- height: 700,
-
- // Factor of the display size that should remain empty around the content
- margin: 0.04,
-
- // Bounds for smallest/largest possible scale to apply to content
- minScale: 0.2,
- maxScale: 2.0,
-
- // Display presentation control arrows
- controls: true,
-
- // Help the user learn the controls by providing hints, for example by
- // bouncing the down arrow when they first encounter a vertical slide
- controlsTutorial: true,
-
- // Determines where controls appear, "edges" or "bottom-right"
- controlsLayout: 'bottom-right',
-
- // Visibility rule for backwards navigation arrows; "faded", "hidden"
- // or "visible"
- controlsBackArrows: 'faded',
-
- // Display a presentation progress bar
- progress: true,
-
- // Display the page number of the current slide
- slideNumber: false,
-
- // Determine which displays to show the slide number on
- showSlideNumber: 'all',
-
- // Push each slide change to the browser history
- history: false,
-
- // Enable keyboard shortcuts for navigation
- keyboard: true,
-
- // Optional function that blocks keyboard events when retuning false
- keyboardCondition: null,
-
- // Enable the slide overview mode
- overview: true,
-
- // Vertical centering of slides
- center: true,
-
- // Enables touch navigation on devices with touch input
- touch: true,
-
- // Loop the presentation
- loop: false,
-
- // Change the presentation direction to be RTL
- rtl: false,
-
- // Randomizes the order of slides each time the presentation loads
- shuffle: false,
-
- // Turns fragments on and off globally
- fragments: true,
-
- // Flags if the presentation is running in an embedded mode,
- // i.e. contained within a limited portion of the screen
- embedded: false,
-
- // Flags if we should show a help overlay when the question-mark
- // key is pressed
- help: true,
-
- // Flags if it should be possible to pause the presentation (blackout)
- pause: true,
-
- // Flags if speaker notes should be visible to all viewers
- showNotes: false,
-
- // Global override for autolaying embedded media (video/audio/iframe)
- // - null: Media will only autoplay if data-autoplay is present
- // - true: All media will autoplay, regardless of individual setting
- // - false: No media will autoplay, regardless of individual setting
- autoPlayMedia: null,
-
- // Controls automatic progression to the next slide
- // - 0: Auto-sliding only happens if the data-autoslide HTML attribute
- // is present on the current slide or fragment
- // - 1+: All slides will progress automatically at the given interval
- // - false: No auto-sliding, even if data-autoslide is present
- autoSlide: 0,
-
- // Stop auto-sliding after user input
- autoSlideStoppable: true,
-
- // Use this method for navigation when auto-sliding (defaults to navigateNext)
- autoSlideMethod: null,
-
- // Enable slide navigation via mouse wheel
- mouseWheel: false,
-
- // Apply a 3D roll to links on hover
- rollingLinks: false,
-
- // Hides the address bar on mobile devices
- hideAddressBar: true,
-
- // Opens links in an iframe preview overlay
- previewLinks: false,
-
- // Exposes the reveal.js API through window.postMessage
- postMessage: true,
-
- // Dispatches all reveal.js events to the parent window through postMessage
- postMessageEvents: false,
-
- // Focuses body when page changes visibility to ensure keyboard shortcuts work
- focusBodyOnPageVisibilityChange: true,
-
- // Transition style
- transition: 'slide', // none/fade/slide/convex/concave/zoom
-
- // Transition speed
- transitionSpeed: 'default', // default/fast/slow
-
- // Transition style for full page slide backgrounds
- backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
-
- // Parallax background image
- parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"
-
- // Parallax background size
- parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
-
- // Amount of pixels to move the parallax background per slide step
- parallaxBackgroundHorizontal: null,
- parallaxBackgroundVertical: null,
-
- // The maximum number of pages a single slide can expand onto when printing
- // to PDF, unlimited by default
- pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
-
- // Offset used to reduce the height of content within exported PDF pages.
- // This exists to account for environment differences based on how you
- // print to PDF. CLI printing options, like phantomjs and wkpdf, can end
- // on precisely the total height of the document whereas in-browser
- // printing has to end one pixel before.
- pdfPageHeightOffset: -1,
-
- // Number of slides away from the current that are visible
- viewDistance: 3,
-
- // The display mode that will be used to show slides
- display: 'block',
-
- // Script dependencies to load
- dependencies: []
-
- },
-
- // Flags if Reveal.initialize() has been called
- initialized = false,
-
- // Flags if reveal.js is loaded (has dispatched the 'ready' event)
- loaded = false,
-
- // Flags if the overview mode is currently active
- overview = false,
-
- // Holds the dimensions of our overview slides, including margins
- overviewSlideWidth = null,
- overviewSlideHeight = null,
-
- // The horizontal and vertical index of the currently active slide
- indexh,
- indexv,
-
- // The previous and current slide HTML elements
- previousSlide,
- currentSlide,
-
- previousBackground,
-
- // Remember which directions that the user has navigated towards
- hasNavigatedRight = false,
- hasNavigatedDown = false,
-
- // Slides may hold a data-state attribute which we pick up and apply
- // as a class to the body. This list contains the combined state of
- // all current slides.
- state = [],
-
- // The current scale of the presentation (see width/height config)
- scale = 1,
-
- // CSS transform that is currently applied to the slides container,
- // split into two groups
- slidesTransform = { layout: '', overview: '' },
-
- // Cached references to DOM elements
- dom = {},
-
- // Features supported by the browser, see #checkCapabilities()
- features = {},
-
- // Client is a mobile device, see #checkCapabilities()
- isMobileDevice,
-
- // Client is a desktop Chrome, see #checkCapabilities()
- isChrome,
-
- // Throttles mouse wheel navigation
- lastMouseWheelStep = 0,
-
- // Delays updates to the URL due to a Chrome thumbnailer bug
- writeURLTimeout = 0,
-
- // Flags if the interaction event listeners are bound
- eventsAreBound = false,
-
- // The current auto-slide duration
- autoSlide = 0,
-
- // Auto slide properties
- autoSlidePlayer,
- autoSlideTimeout = 0,
- autoSlideStartTime = -1,
- autoSlidePaused = false,
-
- // Holds information about the currently ongoing touch input
- touch = {
- startX: 0,
- startY: 0,
- startSpan: 0,
- startCount: 0,
- captured: false,
- threshold: 40
- },
-
- // Holds information about the keyboard shortcuts
- keyboardShortcuts = {
- 'N , SPACE': 'Next slide',
- 'P': 'Previous slide',
- '← , H': 'Navigate left',
- '→ , L': 'Navigate right',
- '↑ , K': 'Navigate up',
- '↓ , J': 'Navigate down',
- 'Home': 'First slide',
- 'End': 'Last slide',
- 'B , .': 'Pause',
- 'F': 'Fullscreen',
- 'ESC, O': 'Slide overview'
- };
-
- /**
- * Starts up the presentation if the client is capable.
- */
- function initialize( options ) {
-
- // Make sure we only initialize once
- if( initialized === true ) return;
-
- initialized = true;
-
- checkCapabilities();
-
- if( !features.transforms2d && !features.transforms3d ) {
- document.body.setAttribute( 'class', 'no-transforms' );
-
- // Since JS won't be running any further, we load all lazy
- // loading elements upfront
- var images = toArray( document.getElementsByTagName( 'img' ) ),
- iframes = toArray( document.getElementsByTagName( 'iframe' ) );
-
- var lazyLoadable = images.concat( iframes );
-
- for( var i = 0, len = lazyLoadable.length; i < len; i++ ) {
- var element = lazyLoadable[i];
- if( element.getAttribute( 'data-src' ) ) {
- element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
- element.removeAttribute( 'data-src' );
- }
- }
-
- // If the browser doesn't support core features we won't be
- // using JavaScript to control the presentation
- return;
- }
-
- // Cache references to key DOM elements
- dom.wrapper = document.querySelector( '.reveal' );
- dom.slides = document.querySelector( '.reveal .slides' );
-
- // Force a layout when the whole page, incl fonts, has loaded
- window.addEventListener( 'load', layout, false );
-
- var query = Reveal.getQueryHash();
-
- // Do not accept new dependencies via query config to avoid
- // the potential of malicious script injection
- if( typeof query['dependencies'] !== 'undefined' ) delete query['dependencies'];
-
- // Copy options over to our config object
- extend( config, options );
- extend( config, query );
-
- // Hide the address bar in mobile browsers
- hideAddressBar();
-
- // Loads the dependencies and continues to #start() once done
- load();
-
- }
-
- /**
- * Inspect the client to see what it's capable of, this
- * should only happens once per runtime.
- */
- function checkCapabilities() {
-
- isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( UA );
- isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );
-
- var testElement = document.createElement( 'div' );
-
- features.transforms3d = 'WebkitPerspective' in testElement.style ||
- 'MozPerspective' in testElement.style ||
- 'msPerspective' in testElement.style ||
- 'OPerspective' in testElement.style ||
- 'perspective' in testElement.style;
-
- features.transforms2d = 'WebkitTransform' in testElement.style ||
- 'MozTransform' in testElement.style ||
- 'msTransform' in testElement.style ||
- 'OTransform' in testElement.style ||
- 'transform' in testElement.style;
-
- features.requestAnimationFrameMethod = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
- features.requestAnimationFrame = typeof features.requestAnimationFrameMethod === 'function';
-
- features.canvas = !!document.createElement( 'canvas' ).getContext;
-
- // Transitions in the overview are disabled in desktop and
- // Safari due to lag
- features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( UA );
-
- // Flags if we should use zoom instead of transform to scale
- // up slides. Zoom produces crisper results but has a lot of
- // xbrowser quirks so we only use it in whitelsited browsers.
- features.zoom = 'zoom' in testElement.style && !isMobileDevice &&
- ( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );
-
- }
-
- /**
- * Loads the dependencies of reveal.js. Dependencies are
- * defined via the configuration option 'dependencies'
- * and will be loaded prior to starting/binding reveal.js.
- * Some dependencies may have an 'async' flag, if so they
- * will load after reveal.js has been started up.
- */
- function load() {
-
- var scripts = [],
- scriptsAsync = [],
- scriptsToPreload = 0;
-
- // Called once synchronous scripts finish loading
- function proceed() {
- if( scriptsAsync.length ) {
- // Load asynchronous scripts
- head.js.apply( null, scriptsAsync );
- }
-
- start();
- }
-
- function loadScript( s ) {
- head.ready( s.src.match( /([\w\d_\-]*)\.?js$|[^\\\/]*$/i )[0], function() {
- // Extension may contain callback functions
- if( typeof s.callback === 'function' ) {
- s.callback.apply( this );
- }
-
- if( --scriptsToPreload === 0 ) {
- proceed();
- }
- });
- }
-
- for( var i = 0, len = config.dependencies.length; i < len; i++ ) {
- var s = config.dependencies[i];
-
- // Load if there's no condition or the condition is truthy
- if( !s.condition || s.condition() ) {
- if( s.async ) {
- scriptsAsync.push( s.src );
- }
- else {
- scripts.push( s.src );
- }
-
- loadScript( s );
- }
- }
-
- if( scripts.length ) {
- scriptsToPreload = scripts.length;
-
- // Load synchronous scripts
- head.js.apply( null, scripts );
- }
- else {
- proceed();
- }
-
- }
-
- /**
- * Starts up reveal.js by binding input events and navigating
- * to the current URL deeplink if there is one.
- */
- function start() {
-
- loaded = true;
-
- // Make sure we've got all the DOM elements we need
- setupDOM();
-
- // Listen to messages posted to this window
- setupPostMessage();
-
- // Prevent the slides from being scrolled out of view
- setupScrollPrevention();
-
- // Resets all vertical slides so that only the first is visible
- resetVerticalSlides();
-
- // Updates the presentation to match the current configuration values
- configure();
-
- // Read the initial hash
- readURL();
-
- // Update all backgrounds
- updateBackground( true );
-
- // Notify listeners that the presentation is ready but use a 1ms
- // timeout to ensure it's not fired synchronously after #initialize()
- setTimeout( function() {
- // Enable transitions now that we're loaded
- dom.slides.classList.remove( 'no-transition' );
-
- dom.wrapper.classList.add( 'ready' );
-
- dispatchEvent( 'ready', {
- 'indexh': indexh,
- 'indexv': indexv,
- 'currentSlide': currentSlide
- } );
- }, 1 );
-
- // Special setup and config is required when printing to PDF
- if( isPrintingPDF() ) {
- removeEventListeners();
-
- // The document needs to have loaded for the PDF layout
- // measurements to be accurate
- if( document.readyState === 'complete' ) {
- setupPDF();
- }
- else {
- window.addEventListener( 'load', setupPDF );
- }
- }
-
- }
-
- /**
- * Finds and stores references to DOM elements which are
- * required by the presentation. If a required element is
- * not found, it is created.
- */
- function setupDOM() {
-
- // Prevent transitions while we're loading
- dom.slides.classList.add( 'no-transition' );
-
- if( isMobileDevice ) {
- dom.wrapper.classList.add( 'no-hover' );
- }
- else {
- dom.wrapper.classList.remove( 'no-hover' );
- }
-
- if( /iphone/gi.test( UA ) ) {
- dom.wrapper.classList.add( 'ua-iphone' );
- }
- else {
- dom.wrapper.classList.remove( 'ua-iphone' );
- }
-
- // Background element
- dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );
-
- // Progress bar
- dom.progress = createSingletonNode( dom.wrapper, 'div', 'progress', '' );
- dom.progressbar = dom.progress.querySelector( 'span' );
-
- // Arrow controls
- dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
- '' +
- '' +
- '' +
- '' );
-
- // Slide number
- dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
-
- // Element containing notes that are visible to the audience
- dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null );
- dom.speakerNotes.setAttribute( 'data-prevent-swipe', '' );
- dom.speakerNotes.setAttribute( 'tabindex', '0' );
-
- // Overlay graphic which is displayed during the paused mode
- createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
-
- dom.wrapper.setAttribute( 'role', 'application' );
-
- // There can be multiple instances of controls throughout the page
- dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) );
- dom.controlsRight = toArray( document.querySelectorAll( '.navigate-right' ) );
- dom.controlsUp = toArray( document.querySelectorAll( '.navigate-up' ) );
- dom.controlsDown = toArray( document.querySelectorAll( '.navigate-down' ) );
- dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
- dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
-
- // The right and down arrows in the standard reveal.js controls
- dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' );
- dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' );
-
- dom.statusDiv = createStatusDiv();
- }
-
- /**
- * Creates a hidden div with role aria-live to announce the
- * current slide content. Hide the div off-screen to make it
- * available only to Assistive Technologies.
- *
- * @return {HTMLElement}
- */
- function createStatusDiv() {
-
- var statusDiv = document.getElementById( 'aria-status-div' );
- if( !statusDiv ) {
- statusDiv = document.createElement( 'div' );
- statusDiv.style.position = 'absolute';
- statusDiv.style.height = '1px';
- statusDiv.style.width = '1px';
- statusDiv.style.overflow = 'hidden';
- statusDiv.style.clip = 'rect( 1px, 1px, 1px, 1px )';
- statusDiv.setAttribute( 'id', 'aria-status-div' );
- statusDiv.setAttribute( 'aria-live', 'polite' );
- statusDiv.setAttribute( 'aria-atomic','true' );
- dom.wrapper.appendChild( statusDiv );
- }
- return statusDiv;
-
- }
-
- /**
- * Converts the given HTML element into a string of text
- * that can be announced to a screen reader. Hidden
- * elements are excluded.
- */
- function getStatusText( node ) {
-
- var text = '';
-
- // Text node
- if( node.nodeType === 3 ) {
- text += node.textContent;
- }
- // Element node
- else if( node.nodeType === 1 ) {
-
- var isAriaHidden = node.getAttribute( 'aria-hidden' );
- var isDisplayHidden = window.getComputedStyle( node )['display'] === 'none';
- if( isAriaHidden !== 'true' && !isDisplayHidden ) {
-
- toArray( node.childNodes ).forEach( function( child ) {
- text += getStatusText( child );
- } );
-
- }
-
- }
-
- return text;
-
- }
-
- /**
- * Configures the presentation for printing to a static
- * PDF.
- */
- function setupPDF() {
-
- var slideSize = getComputedSlideSize( window.innerWidth, window.innerHeight );
-
- // Dimensions of the PDF pages
- var pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
- pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
-
- // Dimensions of slides within the pages
- var slideWidth = slideSize.width,
- slideHeight = slideSize.height;
-
- // Let the browser know what page size we want to print
- injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );
-
- // Limit the size of certain elements to the dimensions of the slide
- injectStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
-
- document.body.classList.add( 'print-pdf' );
- document.body.style.width = pageWidth + 'px';
- document.body.style.height = pageHeight + 'px';
-
- // Make sure stretch elements fit on slide
- layoutSlideContents( slideWidth, slideHeight );
-
- // Add each slide's index as attributes on itself, we need these
- // indices to generate slide numbers below
- toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
- hslide.setAttribute( 'data-index-h', h );
-
- if( hslide.classList.contains( 'stack' ) ) {
- toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
- vslide.setAttribute( 'data-index-h', h );
- vslide.setAttribute( 'data-index-v', v );
- } );
- }
- } );
-
- // Slide and slide background layout
- toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
-
- // Vertical stacks are not centred since their section
- // children will be
- if( slide.classList.contains( 'stack' ) === false ) {
- // Center the slide inside of the page, giving the slide some margin
- var left = ( pageWidth - slideWidth ) / 2,
- top = ( pageHeight - slideHeight ) / 2;
-
- var contentHeight = slide.scrollHeight;
- var numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
-
- // Adhere to configured pages per slide limit
- numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
-
- // Center slides vertically
- if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
- top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
- }
-
- // Wrap the slide in a page element and hide its overflow
- // so that no page ever flows onto another
- var page = document.createElement( 'div' );
- page.className = 'pdf-page';
- page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
- slide.parentNode.insertBefore( page, slide );
- page.appendChild( slide );
-
- // Position the slide inside of the page
- slide.style.left = left + 'px';
- slide.style.top = top + 'px';
- slide.style.width = slideWidth + 'px';
-
- if( slide.slideBackgroundElement ) {
- page.insertBefore( slide.slideBackgroundElement, slide );
- }
-
- // Inject notes if `showNotes` is enabled
- if( config.showNotes ) {
-
- // Are there notes for this slide?
- var notes = getSlideNotes( slide );
- if( notes ) {
-
- var notesSpacing = 8;
- var notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
- var notesElement = document.createElement( 'div' );
- notesElement.classList.add( 'speaker-notes' );
- notesElement.classList.add( 'speaker-notes-pdf' );
- notesElement.setAttribute( 'data-layout', notesLayout );
- notesElement.innerHTML = notes;
-
- if( notesLayout === 'separate-page' ) {
- page.parentNode.insertBefore( notesElement, page.nextSibling );
- }
- else {
- notesElement.style.left = notesSpacing + 'px';
- notesElement.style.bottom = notesSpacing + 'px';
- notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
- page.appendChild( notesElement );
- }
-
- }
-
- }
-
- // Inject slide numbers if `slideNumbers` are enabled
- if( config.slideNumber && /all|print/i.test( config.showSlideNumber ) ) {
- var slideNumberH = parseInt( slide.getAttribute( 'data-index-h' ), 10 ) + 1,
- slideNumberV = parseInt( slide.getAttribute( 'data-index-v' ), 10 ) + 1;
-
- var numberElement = document.createElement( 'div' );
- numberElement.classList.add( 'slide-number' );
- numberElement.classList.add( 'slide-number-pdf' );
- numberElement.innerHTML = formatSlideNumber( slideNumberH, '.', slideNumberV );
- page.appendChild( numberElement );
- }
- }
-
- } );
-
- // Show all fragments
- toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' .fragment' ) ).forEach( function( fragment ) {
- fragment.classList.add( 'visible' );
- } );
-
- // Notify subscribers that the PDF layout is good to go
- dispatchEvent( 'pdf-ready' );
-
- }
-
- /**
- * This is an unfortunate necessity. Some actions – such as
- * an input field being focused in an iframe or using the
- * keyboard to expand text selection beyond the bounds of
- * a slide – can trigger our content to be pushed out of view.
- * This scrolling can not be prevented by hiding overflow in
- * CSS (we already do) so we have to resort to repeatedly
- * checking if the slides have been offset :(
- */
- function setupScrollPrevention() {
-
- setInterval( function() {
- if( dom.wrapper.scrollTop !== 0 || dom.wrapper.scrollLeft !== 0 ) {
- dom.wrapper.scrollTop = 0;
- dom.wrapper.scrollLeft = 0;
- }
- }, 1000 );
-
- }
-
- /**
- * Creates an HTML element and returns a reference to it.
- * If the element already exists the existing instance will
- * be returned.
- *
- * @param {HTMLElement} container
- * @param {string} tagname
- * @param {string} classname
- * @param {string} innerHTML
- *
- * @return {HTMLElement}
- */
- function createSingletonNode( container, tagname, classname, innerHTML ) {
-
- // Find all nodes matching the description
- var nodes = container.querySelectorAll( '.' + classname );
-
- // Check all matches to find one which is a direct child of
- // the specified container
- for( var i = 0; i < nodes.length; i++ ) {
- var testNode = nodes[i];
- if( testNode.parentNode === container ) {
- return testNode;
- }
- }
-
- // If no node was found, create it now
- var node = document.createElement( tagname );
- node.className = classname;
- if( typeof innerHTML === 'string' ) {
- node.innerHTML = innerHTML;
- }
- container.appendChild( node );
-
- return node;
-
- }
-
- /**
- * Creates the slide background elements and appends them
- * to the background container. One element is created per
- * slide no matter if the given slide has visible background.
- */
- function createBackgrounds() {
-
- var printMode = isPrintingPDF();
-
- // Clear prior backgrounds
- dom.background.innerHTML = '';
- dom.background.classList.add( 'no-transition' );
-
- // Iterate over all horizontal slides
- toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
-
- var backgroundStack = createBackground( slideh, dom.background );
-
- // Iterate over all vertical slides
- toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
-
- createBackground( slidev, backgroundStack );
-
- backgroundStack.classList.add( 'stack' );
-
- } );
-
- } );
-
- // Add parallax background if specified
- if( config.parallaxBackgroundImage ) {
-
- dom.background.style.backgroundImage = 'url("' + config.parallaxBackgroundImage + '")';
- dom.background.style.backgroundSize = config.parallaxBackgroundSize;
-
- // Make sure the below properties are set on the element - these properties are
- // needed for proper transitions to be set on the element via CSS. To remove
- // annoying background slide-in effect when the presentation starts, apply
- // these properties after short time delay
- setTimeout( function() {
- dom.wrapper.classList.add( 'has-parallax-background' );
- }, 1 );
-
- }
- else {
-
- dom.background.style.backgroundImage = '';
- dom.wrapper.classList.remove( 'has-parallax-background' );
-
- }
-
- }
-
- /**
- * Creates a background for the given slide.
- *
- * @param {HTMLElement} slide
- * @param {HTMLElement} container The element that the background
- * should be appended to
- * @return {HTMLElement} New background div
- */
- function createBackground( slide, container ) {
-
- var data = {
- background: slide.getAttribute( 'data-background' ),
- backgroundSize: slide.getAttribute( 'data-background-size' ),
- backgroundImage: slide.getAttribute( 'data-background-image' ),
- backgroundVideo: slide.getAttribute( 'data-background-video' ),
- backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
- backgroundColor: slide.getAttribute( 'data-background-color' ),
- backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
- backgroundPosition: slide.getAttribute( 'data-background-position' ),
- backgroundTransition: slide.getAttribute( 'data-background-transition' )
- };
-
- var element = document.createElement( 'div' );
-
- // Carry over custom classes from the slide to the background
- element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
-
- if( data.background ) {
- // Auto-wrap image urls in url(...)
- if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#]|$)/gi.test( data.background ) ) {
- slide.setAttribute( 'data-background-image', data.background );
- }
- else {
- element.style.background = data.background;
- }
- }
-
- // Create a hash for this combination of background settings.
- // This is used to determine when two slide backgrounds are
- // the same.
- if( data.background || data.backgroundColor || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {
- element.setAttribute( 'data-background-hash', data.background +
- data.backgroundSize +
- data.backgroundImage +
- data.backgroundVideo +
- data.backgroundIframe +
- data.backgroundColor +
- data.backgroundRepeat +
- data.backgroundPosition +
- data.backgroundTransition );
- }
-
- // Additional and optional background properties
- if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
- if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
- if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
- if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
- if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
- if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
-
- container.appendChild( element );
-
- // If backgrounds are being recreated, clear old classes
- slide.classList.remove( 'has-dark-background' );
- slide.classList.remove( 'has-light-background' );
-
- slide.slideBackgroundElement = element;
-
- // If this slide has a background color, add a class that
- // signals if it is light or dark. If the slide has no background
- // color, no class will be set
- var computedBackgroundStyle = window.getComputedStyle( element );
- if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
- var rgb = colorToRgb( computedBackgroundStyle.backgroundColor );
-
- // Ignore fully transparent backgrounds. Some browsers return
- // rgba(0,0,0,0) when reading the computed background color of
- // an element with no background
- if( rgb && rgb.a !== 0 ) {
- if( colorBrightness( computedBackgroundStyle.backgroundColor ) < 128 ) {
- slide.classList.add( 'has-dark-background' );
- }
- else {
- slide.classList.add( 'has-light-background' );
- }
- }
- }
-
- return element;
-
- }
-
- /**
- * Registers a listener to postMessage events, this makes it
- * possible to call all reveal.js API methods from another
- * window. For example:
- *
- * revealWindow.postMessage( JSON.stringify({
- * method: 'slide',
- * args: [ 2 ]
- * }), '*' );
- */
- function setupPostMessage() {
-
- if( config.postMessage ) {
- window.addEventListener( 'message', function ( event ) {
- var data = event.data;
-
- // Make sure we're dealing with JSON
- if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
- data = JSON.parse( data );
-
- // Check if the requested method can be found
- if( data.method && typeof Reveal[data.method] === 'function' ) {
- Reveal[data.method].apply( Reveal, data.args );
- }
- }
- }, false );
- }
-
- }
-
- /**
- * Applies the configuration settings from the config
- * object. May be called multiple times.
- *
- * @param {object} options
- */
- function configure( options ) {
-
- var oldTransition = config.transition;
-
- // New config options may be passed when this method
- // is invoked through the API after initialization
- if( typeof options === 'object' ) extend( config, options );
-
- // Abort if reveal.js hasn't finished loading, config
- // changes will be applied automatically once loading
- // finishes
- if( loaded === false ) return;
-
- var numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;
-
- // Remove the previously configured transition class
- dom.wrapper.classList.remove( oldTransition );
-
- // Force linear transition based on browser capabilities
- if( features.transforms3d === false ) config.transition = 'linear';
-
- dom.wrapper.classList.add( config.transition );
-
- dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
- dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
-
- dom.controls.style.display = config.controls ? 'block' : 'none';
- dom.progress.style.display = config.progress ? 'block' : 'none';
-
- dom.controls.setAttribute( 'data-controls-layout', config.controlsLayout );
- dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
-
- if( config.shuffle ) {
- shuffle();
- }
-
- if( config.rtl ) {
- dom.wrapper.classList.add( 'rtl' );
- }
- else {
- dom.wrapper.classList.remove( 'rtl' );
- }
-
- if( config.center ) {
- dom.wrapper.classList.add( 'center' );
- }
- else {
- dom.wrapper.classList.remove( 'center' );
- }
-
- // Exit the paused mode if it was configured off
- if( config.pause === false ) {
- resume();
- }
-
- if( config.showNotes ) {
- dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
- }
-
- if( config.mouseWheel ) {
- document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
- document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
- }
- else {
- document.removeEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
- document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false );
- }
-
- // Rolling 3D links
- if( config.rollingLinks ) {
- enableRollingLinks();
- }
- else {
- disableRollingLinks();
- }
-
- // Iframe link previews
- if( config.previewLinks ) {
- enablePreviewLinks();
- disablePreviewLinks( '[data-preview-link=false]' );
- }
- else {
- disablePreviewLinks();
- enablePreviewLinks( '[data-preview-link]:not([data-preview-link=false])' );
- }
-
- // Remove existing auto-slide controls
- if( autoSlidePlayer ) {
- autoSlidePlayer.destroy();
- autoSlidePlayer = null;
- }
-
- // Generate auto-slide controls if needed
- if( numberOfSlides > 1 && config.autoSlide && config.autoSlideStoppable && features.canvas && features.requestAnimationFrame ) {
- autoSlidePlayer = new Playback( dom.wrapper, function() {
- return Math.min( Math.max( ( Date.now() - autoSlideStartTime ) / autoSlide, 0 ), 1 );
- } );
-
- autoSlidePlayer.on( 'click', onAutoSlidePlayerClick );
- autoSlidePaused = false;
- }
-
- // When fragments are turned off they should be visible
- if( config.fragments === false ) {
- toArray( dom.slides.querySelectorAll( '.fragment' ) ).forEach( function( element ) {
- element.classList.add( 'visible' );
- element.classList.remove( 'current-fragment' );
- } );
- }
-
- // Slide numbers
- var slideNumberDisplay = 'none';
- if( config.slideNumber && !isPrintingPDF() ) {
- if( config.showSlideNumber === 'all' ) {
- slideNumberDisplay = 'block';
- }
- else if( config.showSlideNumber === 'speaker' && isSpeakerNotes() ) {
- slideNumberDisplay = 'block';
- }
- }
-
- dom.slideNumber.style.display = slideNumberDisplay;
-
- sync();
-
- }
-
- /**
- * Binds all event listeners.
- */
- function addEventListeners() {
-
- eventsAreBound = true;
-
- window.addEventListener( 'hashchange', onWindowHashChange, false );
- window.addEventListener( 'resize', onWindowResize, false );
-
- if( config.touch ) {
- dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );
- dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );
- dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );
-
- // Support pointer-style touch interaction as well
- if( window.navigator.pointerEnabled ) {
- // IE 11 uses un-prefixed version of pointer events
- dom.wrapper.addEventListener( 'pointerdown', onPointerDown, false );
- dom.wrapper.addEventListener( 'pointermove', onPointerMove, false );
- dom.wrapper.addEventListener( 'pointerup', onPointerUp, false );
- }
- else if( window.navigator.msPointerEnabled ) {
- // IE 10 uses prefixed version of pointer events
- dom.wrapper.addEventListener( 'MSPointerDown', onPointerDown, false );
- dom.wrapper.addEventListener( 'MSPointerMove', onPointerMove, false );
- dom.wrapper.addEventListener( 'MSPointerUp', onPointerUp, false );
- }
- }
-
- if( config.keyboard ) {
- document.addEventListener( 'keydown', onDocumentKeyDown, false );
- document.addEventListener( 'keypress', onDocumentKeyPress, false );
- }
-
- if( config.progress && dom.progress ) {
- dom.progress.addEventListener( 'click', onProgressClicked, false );
- }
-
- if( config.focusBodyOnPageVisibilityChange ) {
- var visibilityChange;
-
- if( 'hidden' in document ) {
- visibilityChange = 'visibilitychange';
- }
- else if( 'msHidden' in document ) {
- visibilityChange = 'msvisibilitychange';
- }
- else if( 'webkitHidden' in document ) {
- visibilityChange = 'webkitvisibilitychange';
- }
-
- if( visibilityChange ) {
- document.addEventListener( visibilityChange, onPageVisibilityChange, false );
- }
- }
-
- // Listen to both touch and click events, in case the device
- // supports both
- var pointerEvents = [ 'touchstart', 'click' ];
-
- // Only support touch for Android, fixes double navigations in
- // stock browser
- if( UA.match( /android/gi ) ) {
- pointerEvents = [ 'touchstart' ];
- }
-
- pointerEvents.forEach( function( eventName ) {
- dom.controlsLeft.forEach( function( el ) { el.addEventListener( eventName, onNavigateLeftClicked, false ); } );
- dom.controlsRight.forEach( function( el ) { el.addEventListener( eventName, onNavigateRightClicked, false ); } );
- dom.controlsUp.forEach( function( el ) { el.addEventListener( eventName, onNavigateUpClicked, false ); } );
- dom.controlsDown.forEach( function( el ) { el.addEventListener( eventName, onNavigateDownClicked, false ); } );
- dom.controlsPrev.forEach( function( el ) { el.addEventListener( eventName, onNavigatePrevClicked, false ); } );
- dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );
- } );
-
- }
-
- /**
- * Unbinds all event listeners.
- */
- function removeEventListeners() {
-
- eventsAreBound = false;
-
- document.removeEventListener( 'keydown', onDocumentKeyDown, false );
- document.removeEventListener( 'keypress', onDocumentKeyPress, false );
- window.removeEventListener( 'hashchange', onWindowHashChange, false );
- window.removeEventListener( 'resize', onWindowResize, false );
-
- dom.wrapper.removeEventListener( 'touchstart', onTouchStart, false );
- dom.wrapper.removeEventListener( 'touchmove', onTouchMove, false );
- dom.wrapper.removeEventListener( 'touchend', onTouchEnd, false );
-
- // IE11
- if( window.navigator.pointerEnabled ) {
- dom.wrapper.removeEventListener( 'pointerdown', onPointerDown, false );
- dom.wrapper.removeEventListener( 'pointermove', onPointerMove, false );
- dom.wrapper.removeEventListener( 'pointerup', onPointerUp, false );
- }
- // IE10
- else if( window.navigator.msPointerEnabled ) {
- dom.wrapper.removeEventListener( 'MSPointerDown', onPointerDown, false );
- dom.wrapper.removeEventListener( 'MSPointerMove', onPointerMove, false );
- dom.wrapper.removeEventListener( 'MSPointerUp', onPointerUp, false );
- }
-
- if ( config.progress && dom.progress ) {
- dom.progress.removeEventListener( 'click', onProgressClicked, false );
- }
-
- [ 'touchstart', 'click' ].forEach( function( eventName ) {
- dom.controlsLeft.forEach( function( el ) { el.removeEventListener( eventName, onNavigateLeftClicked, false ); } );
- dom.controlsRight.forEach( function( el ) { el.removeEventListener( eventName, onNavigateRightClicked, false ); } );
- dom.controlsUp.forEach( function( el ) { el.removeEventListener( eventName, onNavigateUpClicked, false ); } );
- dom.controlsDown.forEach( function( el ) { el.removeEventListener( eventName, onNavigateDownClicked, false ); } );
- dom.controlsPrev.forEach( function( el ) { el.removeEventListener( eventName, onNavigatePrevClicked, false ); } );
- dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );
- } );
-
- }
-
- /**
- * Extend object a with the properties of object b.
- * If there's a conflict, object b takes precedence.
- *
- * @param {object} a
- * @param {object} b
- */
- function extend( a, b ) {
-
- for( var i in b ) {
- a[ i ] = b[ i ];
- }
-
- return a;
-
- }
-
- /**
- * Converts the target object to an array.
- *
- * @param {object} o
- * @return {object[]}
- */
- function toArray( o ) {
-
- return Array.prototype.slice.call( o );
-
- }
-
- /**
- * Utility for deserializing a value.
- *
- * @param {*} value
- * @return {*}
- */
- function deserialize( value ) {
-
- if( typeof value === 'string' ) {
- if( value === 'null' ) return null;
- else if( value === 'true' ) return true;
- else if( value === 'false' ) return false;
- else if( value.match( /^-?[\d\.]+$/ ) ) return parseFloat( value );
- }
-
- return value;
-
- }
-
- /**
- * Measures the distance in pixels between point a
- * and point b.
- *
- * @param {object} a point with x/y properties
- * @param {object} b point with x/y properties
- *
- * @return {number}
- */
- function distanceBetween( a, b ) {
-
- var dx = a.x - b.x,
- dy = a.y - b.y;
-
- return Math.sqrt( dx*dx + dy*dy );
-
- }
-
- /**
- * Applies a CSS transform to the target element.
- *
- * @param {HTMLElement} element
- * @param {string} transform
- */
- function transformElement( element, transform ) {
-
- element.style.WebkitTransform = transform;
- element.style.MozTransform = transform;
- element.style.msTransform = transform;
- element.style.transform = transform;
-
- }
-
- /**
- * Applies CSS transforms to the slides container. The container
- * is transformed from two separate sources: layout and the overview
- * mode.
- *
- * @param {object} transforms
- */
- function transformSlides( transforms ) {
-
- // Pick up new transforms from arguments
- if( typeof transforms.layout === 'string' ) slidesTransform.layout = transforms.layout;
- if( typeof transforms.overview === 'string' ) slidesTransform.overview = transforms.overview;
-
- // Apply the transforms to the slides container
- if( slidesTransform.layout ) {
- transformElement( dom.slides, slidesTransform.layout + ' ' + slidesTransform.overview );
- }
- else {
- transformElement( dom.slides, slidesTransform.overview );
- }
-
- }
-
- /**
- * Injects the given CSS styles into the DOM.
- *
- * @param {string} value
- */
- function injectStyleSheet( value ) {
-
- var tag = document.createElement( 'style' );
- tag.type = 'text/css';
- if( tag.styleSheet ) {
- tag.styleSheet.cssText = value;
- }
- else {
- tag.appendChild( document.createTextNode( value ) );
- }
- document.getElementsByTagName( 'head' )[0].appendChild( tag );
-
- }
-
- /**
- * Find the closest parent that matches the given
- * selector.
- *
- * @param {HTMLElement} target The child element
- * @param {String} selector The CSS selector to match
- * the parents against
- *
- * @return {HTMLElement} The matched parent or null
- * if no matching parent was found
- */
- function closestParent( target, selector ) {
-
- var parent = target.parentNode;
-
- while( parent ) {
-
- // There's some overhead doing this each time, we don't
- // want to rewrite the element prototype but should still
- // be enough to feature detect once at startup...
- var matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector;
-
- // If we find a match, we're all set
- if( matchesMethod && matchesMethod.call( parent, selector ) ) {
- return parent;
- }
-
- // Keep searching
- parent = parent.parentNode;
-
- }
-
- return null;
-
- }
-
- /**
- * Converts various color input formats to an {r:0,g:0,b:0} object.
- *
- * @param {string} color The string representation of a color
- * @example
- * colorToRgb('#000');
- * @example
- * colorToRgb('#000000');
- * @example
- * colorToRgb('rgb(0,0,0)');
- * @example
- * colorToRgb('rgba(0,0,0)');
- *
- * @return {{r: number, g: number, b: number, [a]: number}|null}
- */
- function colorToRgb( color ) {
-
- var hex3 = color.match( /^#([0-9a-f]{3})$/i );
- if( hex3 && hex3[1] ) {
- hex3 = hex3[1];
- return {
- r: parseInt( hex3.charAt( 0 ), 16 ) * 0x11,
- g: parseInt( hex3.charAt( 1 ), 16 ) * 0x11,
- b: parseInt( hex3.charAt( 2 ), 16 ) * 0x11
- };
- }
-
- var hex6 = color.match( /^#([0-9a-f]{6})$/i );
- if( hex6 && hex6[1] ) {
- hex6 = hex6[1];
- return {
- r: parseInt( hex6.substr( 0, 2 ), 16 ),
- g: parseInt( hex6.substr( 2, 2 ), 16 ),
- b: parseInt( hex6.substr( 4, 2 ), 16 )
- };
- }
-
- var rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i );
- if( rgb ) {
- return {
- r: parseInt( rgb[1], 10 ),
- g: parseInt( rgb[2], 10 ),
- b: parseInt( rgb[3], 10 )
- };
- }
-
- var rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
- if( rgba ) {
- return {
- r: parseInt( rgba[1], 10 ),
- g: parseInt( rgba[2], 10 ),
- b: parseInt( rgba[3], 10 ),
- a: parseFloat( rgba[4] )
- };
- }
-
- return null;
-
- }
-
- /**
- * Calculates brightness on a scale of 0-255.
- *
- * @param {string} color See colorToRgb for supported formats.
- * @see {@link colorToRgb}
- */
- function colorBrightness( color ) {
-
- if( typeof color === 'string' ) color = colorToRgb( color );
-
- if( color ) {
- return ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000;
- }
-
- return null;
-
- }
-
- /**
- * Returns the remaining height within the parent of the
- * target element.
- *
- * remaining height = [ configured parent height ] - [ current parent height ]
- *
- * @param {HTMLElement} element
- * @param {number} [height]
- */
- function getRemainingHeight( element, height ) {
-
- height = height || 0;
-
- if( element ) {
- var newHeight, oldHeight = element.style.height;
-
- // Change the .stretch element height to 0 in order find the height of all
- // the other elements
- element.style.height = '0px';
- newHeight = height - element.parentNode.offsetHeight;
-
- // Restore the old height, just in case
- element.style.height = oldHeight + 'px';
-
- return newHeight;
- }
-
- return height;
-
- }
-
- /**
- * Checks if this instance is being used to print a PDF.
- */
- function isPrintingPDF() {
-
- return ( /print-pdf/gi ).test( window.location.search );
-
- }
-
- /**
- * Hides the address bar if we're on a mobile device.
- */
- function hideAddressBar() {
-
- if( config.hideAddressBar && isMobileDevice ) {
- // Events that should trigger the address bar to hide
- window.addEventListener( 'load', removeAddressBar, false );
- window.addEventListener( 'orientationchange', removeAddressBar, false );
- }
-
- }
-
- /**
- * Causes the address bar to hide on mobile devices,
- * more vertical space ftw.
- */
- function removeAddressBar() {
-
- setTimeout( function() {
- window.scrollTo( 0, 1 );
- }, 10 );
-
- }
-
- /**
- * Dispatches an event of the specified type from the
- * reveal DOM element.
- */
- function dispatchEvent( type, args ) {
-
- var event = document.createEvent( 'HTMLEvents', 1, 2 );
- event.initEvent( type, true, true );
- extend( event, args );
- dom.wrapper.dispatchEvent( event );
-
- // If we're in an iframe, post each reveal.js event to the
- // parent window. Used by the notes plugin
- if( config.postMessageEvents && window.parent !== window.self ) {
- window.parent.postMessage( JSON.stringify({ namespace: 'reveal', eventName: type, state: getState() }), '*' );
- }
-
- }
-
- /**
- * Wrap all links in 3D goodness.
- */
- function enableRollingLinks() {
-
- if( features.transforms3d && !( 'msPerspective' in document.body.style ) ) {
- var anchors = dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' a' );
-
- for( var i = 0, len = anchors.length; i < len; i++ ) {
- var anchor = anchors[i];
-
- if( anchor.textContent && !anchor.querySelector( '*' ) && ( !anchor.className || !anchor.classList.contains( anchor, 'roll' ) ) ) {
- var span = document.createElement('span');
- span.setAttribute('data-title', anchor.text);
- span.innerHTML = anchor.innerHTML;
-
- anchor.classList.add( 'roll' );
- anchor.innerHTML = '';
- anchor.appendChild(span);
- }
- }
- }
-
- }
-
- /**
- * Unwrap all 3D links.
- */
- function disableRollingLinks() {
-
- var anchors = dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' a.roll' );
-
- for( var i = 0, len = anchors.length; i < len; i++ ) {
- var anchor = anchors[i];
- var span = anchor.querySelector( 'span' );
-
- if( span ) {
- anchor.classList.remove( 'roll' );
- anchor.innerHTML = span.innerHTML;
- }
- }
-
- }
-
- /**
- * Bind preview frame links.
- *
- * @param {string} [selector=a] - selector for anchors
- */
- function enablePreviewLinks( selector ) {
-
- var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) );
-
- anchors.forEach( function( element ) {
- if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
- element.addEventListener( 'click', onPreviewLinkClicked, false );
- }
- } );
-
- }
-
- /**
- * Unbind preview frame links.
- */
- function disablePreviewLinks( selector ) {
-
- var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) );
-
- anchors.forEach( function( element ) {
- if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
- element.removeEventListener( 'click', onPreviewLinkClicked, false );
- }
- } );
-
- }
-
- /**
- * Opens a preview window for the target URL.
- *
- * @param {string} url - url for preview iframe src
- */
- function showPreview( url ) {
-
- closeOverlay();
-
- dom.overlay = document.createElement( 'div' );
- dom.overlay.classList.add( 'overlay' );
- dom.overlay.classList.add( 'overlay-preview' );
- dom.wrapper.appendChild( dom.overlay );
-
- dom.overlay.innerHTML = [
- '',
- '',
- '',
- '',
- '',
- '
',
- '',
- '',
- 'Unable to load iframe. This is likely due to the site\'s policy (x-frame-options).',
- '',
- '