add slides / website
This commit is contained in:
parent
f4ae47a532
commit
067c91b624
5 changed files with 121 additions and 1 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,2 +1 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist
|
|
||||||
|
|
BIN
dist/slides.pdf
vendored
Normal file
BIN
dist/slides.pdf
vendored
Normal file
Binary file not shown.
70
dist/website/index.html
vendored
Normal file
70
dist/website/index.html
vendored
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>Coding Art - Workshop für die KEW 2022</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
span.underline{text-decoration: underline;}
|
||||||
|
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="title-block-header">
|
||||||
|
<h1 class="title">Coding Art - Workshop für die KEW 2022</h1>
|
||||||
|
</header>
|
||||||
|
<h2 id="ergebnisse-des-workshops">Ergebnisse des Workshops</h2>
|
||||||
|
<p><em>Hier ist noch nichts… wenn ihr mögt, können wir im Anschluss an
|
||||||
|
den Workshop eure Ergebnisse hier “ausstellen”!</em></p>
|
||||||
|
<h2 id="links">Links</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://openprocessing.org/sketch/1642700">Interaktives
|
||||||
|
Tutorial</a></li>
|
||||||
|
<li><a href="https://editor.p5js.org">p5-Editor</a></li>
|
||||||
|
<li><a href="https://bmoren.github.io/p5js-cheat-sheet/">p5-Cheatsheet
|
||||||
|
mit vielen wichtigen Kommandos auf einen Blick</a></li>
|
||||||
|
<li>Code-Beispiele
|
||||||
|
<ul>
|
||||||
|
<li>Beispiel 1 (Shapes)</li>
|
||||||
|
<li>Beispiel 2 (Color)</li>
|
||||||
|
<li>Beispiel 3 (Interaktion)</li>
|
||||||
|
</ul></li>
|
||||||
|
<li><a href="https://ag-link.xyz">Mehr Informationen über die AG
|
||||||
|
Link</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="editor">Editor</h2>
|
||||||
|
<iframe id="p5.js web editor embed" title="p5.js web editor embed" width="100%" height="700" src="https://editor.p5js.org/">
|
||||||
|
</iframe>
|
||||||
|
<h2 id="downloads">Downloads</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="slides.pdf">Vortragsslides</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="weiterführende-links">Weiterführende Links</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://p5js.org/reference/">p5
|
||||||
|
Bibliotheksreferenz</a><br />
|
||||||
|
Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js
|
||||||
|
bereitstellt.</li>
|
||||||
|
<li><a href="TODO">Interaktive Paramterübersicht</a></li>
|
||||||
|
<li><a href="https://thecodingtrain.com">Daniel Shiffman - The Coding
|
||||||
|
Train</a><br />
|
||||||
|
Viele Tutorials und Beispielvideos zu p5js die auf eine sehr
|
||||||
|
sympathische Art und Weise vorgestellt werden.</li>
|
||||||
|
<li><a href="openprocessing.org">OpenProcessing</a><br />
|
||||||
|
Erkundet Tausende Beispiele von p5js-Sketches</li>
|
||||||
|
</ul>
|
||||||
|
<footer>
|
||||||
|
<a href="https://ag-link.xyz/impressum/">Impressum / Datenschutz</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
dist/website/slides.pdf
vendored
Normal file
BIN
dist/website/slides.pdf
vendored
Normal file
Binary file not shown.
51
dist/website/style.css
vendored
Normal file
51
dist/website/style.css
vendored
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
:root {
|
||||||
|
--link-color: #00755e;
|
||||||
|
--visited-color: #00755e;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 80%;
|
||||||
|
max-width: 1024px;
|
||||||
|
margin: auto;
|
||||||
|
background-color: #fdf6e3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--link-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2:after {
|
||||||
|
content: "";
|
||||||
|
background-image: url("https://ag-link.xyz/assets/img/connection.png");
|
||||||
|
background-size: contain;
|
||||||
|
width: .75em;
|
||||||
|
height: .75em;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: .3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li li {
|
||||||
|
padding: 0;
|
||||||
|
}
|
Loading…
Reference in a new issue