<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>
<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>
<img class="mr-3" src="/images/Beispiel-pygame.png" alt="Beispiel-Ergebnis pygame-Workshop" id="bsp-pygame">
</div>
</div>
</div>
</div>
</div>
<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>
