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
|
||||
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