diff --git a/content/images/Beispiel-pygame.png b/content/images/Beispiel-pygame.png new file mode 100644 index 0000000000000000000000000000000000000000..79c1fcdf257ca0705fcf4c43a07eb2cb610749a4 Binary files /dev/null and b/content/images/Beispiel-pygame.png differ diff --git a/content/pages/de/informationen/freizeiten.md b/content/pages/de/informationen/freizeiten.md index 71fa689dd2a113e775ddb26abdb521b8c0b35ad2..d7cd8639a9786f500e1d93eb90f9a876f523e9d8 100644 --- a/content/pages/de/informationen/freizeiten.md +++ b/content/pages/de/informationen/freizeiten.md @@ -15,5 +15,6 @@ Die Frobglabs sind Begleitveranstaltungen zu Konferenzen, die sich mit freier So Zusätzlich zu den Froglabs gibt es noch Fahrten zu Konferenzen, bei denen wir keine eigenen Workshops anbieten, sondern die besuchte Konferenz im Vordergrund steht. Ein Beispiel dafür ist die Hack'n'Fun XMas Edition. ## Termine und Anmeldung -Aktuell gibt es keine angekündigten Veranstaltungen. +Informationen zur Hack'n'Sun finden sie hier: +<a class="btn btn-primary" href="hacknsun.html" role="button">Hack'n'Sun</a> </div> diff --git a/content/pages/de/informationen/hacknsun.md b/content/pages/de/informationen/hacknsun.md new file mode 100644 index 0000000000000000000000000000000000000000..7b3c96ee0ed7f37bf88cf1b69ff6f3951a5d977e --- /dev/null +++ b/content/pages/de/informationen/hacknsun.md @@ -0,0 +1,79 @@ +title: Hack'n'Sun +date: 2021-04-28 +lang: de +template: page_text + +<div class="carousel slide" data-ride="carousel" id="index-carousel"> + <ol class="carousel-indicators"> + <li data-target="#index-carousel" data-slide-to="0" class="active"></li> + <li data-target="#index-carousel" data-slide-to="1"></li> + <li data-target="#index-carousel" data-slide-to="2"></li> + <li data-target="#index-carousel" data-slide-to="3"></li> + </ol> + <div class="carousel-inner"> + <div class="carousel-item active"> + <img class="d-block w-100" src="/images/carousel/kinder-auf-wiese.jpg" /> + <div class="carousel-caption d-none d-md-block"> + <h5>Von Kindern, für Kinder</h5> + <p>Unsere jungen Tutoren zwischen 9 und 16 Jahren arbeiten regelmäßig gemeinsam an ihren Workshops, die sie dann für gleichaltrige Kinder und Jugendliche leiten.</p> + </div> + </div> + <div class="carousel-item"> + <img class="d-block w-100" src="/images/carousel/kinder-lego.png" /> + <div class="carousel-caption d-none d-md-block"> + <h5>Kreativität und Technik</h5> + <p>Nicht nur Programmieren bietet einen Einstieg in die Informatik!</p> + </div> + </div> + <div class="carousel-item"> + <img class="d-block w-100" src="/images/carousel/lagerfeuer.jpg" /> + <div class="carousel-caption d-none d-md-block"> + <h5>Stockbrot, Sport und Spiele</h5> + <p>Am Abend wird es auf dem Jugendzeltplatz gemütlich</p> + </div> + </div> + <div class="carousel-item"> + <img class="d-block w-100" src="/images/carousel/kinder-elektronik.jpg" /> + <div class="carousel-caption d-none d-md-block"> + <h5>Mehr als Informatik</h5> + <p>In unseren Projekten kombinieren wir Informatik mit vielen anderen Elementen, wie Elektronik, Grafik, uvm.</p> + </div> + </div> + <a class="carousel-control-prev" href="#index-carousel" role="button" data-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> + <span class="sr-only">Previous</span> + </a> + <a class="carousel-control-next" href="#index-carousel" role="button" data-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="sr-only">Next</span> + </a> + </div> +</div> +<div markdown="1" class="ul-columns col-sm-12 col-md-12"> + <div class="container" id="project-columns"> + <div class="row"> + <div class="col"> +<div class="jumbotron"> + <h1 class="display-4">Hack'n'Sun</h1> + <p class="lead">Die Hack‘n‘Sun ist eine Kinder- und Jugendveranstaltung, die auf dem Jugendzeltplatz in Bonn stattfindet. 2½ Tage lang, vom 7. bis 10. Juli und vom 10. bis 13. Juli, finden Workshops zu "Elektronik" und "Spieleprogrammieren mit pygame" statt, und es gibt ein umfangreiches Rahmenprogramm mit Übernachtungen und Aktivitäten.</p> + <hr class="my-4"> + <p>Hier geht's zur Anmeldung.</p> + <p class="lead"> + <a class="btn btn-primary btn-lg" href="https://www.teckids.org/de/veranstaltungen/nachste-veranstaltungen/" role="button">Anmeldung</a> + </p> + </div> + <div class="row"> + <div class="col"> +<h3> Elektronik </h3> +Der Workshop Elektronik befasst sich mit dem Thema Messung von Umweltdaten und deren elektronischen Verarbeitung. Ihr lernt das Programmieren eines Mikrocontrollers. Mit diesem könnt ihr dann verschiedene Sensoren ansprechen. Die gemessenen Daten können dann über das Matrix-Protokoll an euer Handy geschickt werden. Damit könnt ihr dann z.B. die Temperatur und Luftfeuchtigkeit in einem Raum messen und auf eurem Handy anzeigen lassen oder ihr baut einen Seonsor in euren Briefkasten, der euch informiert, wenn Briefe eingeworfen werden. +</div> +<div class="col"> +<h3>Spieleprogrammieren mit pygame</h3> +<img class="mr-3" src="/images/Beispiel-pygame.png" alt="Beispiel-Ergebnis pygame-Workshop" id="bsp-pygame"> +<p>In diesem Workhsop lernen die Teilnehmer die Programmiersprache Python. Mithilfe von pygame können die Teilnehmer dann eigene 2D-Spiele programmieren und in diesem dann eine mit Tiled erstellte Karte als Spielumgebung einbinden. Die erstellten Spiele können die Teilnehmer dann auch Zuhause selber spielen und auch daran weiterarbeiten. +</p> +</div> +</div> +</div> +</div> +</div> diff --git a/content/static/css/custom.css b/content/static/css/custom.css index 242dfa9cb0cebafe8ac0a83a1a5da1556a946e46..df2737cd03bbef382708371a8a03e6bc0efcb58b 100644 --- a/content/static/css/custom.css +++ b/content/static/css/custom.css @@ -26,3 +26,7 @@ a.btn-fullwidth { width: 100%; } + +#bsp-pygame { + max-width: 300px; +}