<commit_before><!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <!-- Title of presentation -->
    <title>Challenge Training</title>
    <!-- Short description of presentation -->
    <meta name="description" content="Challenge Training Web-basierte Anwendungen 1">
    <!-- Author of presentation -->
    <meta name="author" content="<NAME>">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="../../src/reveal-js/css/reveal.min.css">
    <link rel="stylesheet" href="../../src/reveal-js/css/theme/medieninformatik.css" id="theme">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="../../src/reveal-js/lib/css/solarized_light.css">

    <!-- If the query includes 'print-pdf', use the PDF print sheet -->
    <script>
        document.write('<link rel="stylesheet" href="../../src/reveal-js/css/print/' + (window.location.search.match(/print-pdf/gi) ? 'pdf' : 'paper') + '.css" type="text/css" media="print">');
    </script>

    <!--[if lt IE 9]>
		<script src="../../src/reveal-js/lib/js/html5shiv.js"></script>
		<![endif]-->
</head>

<body>
<div class="reveal">
<div class="slides">
	
<!-- Beginn of Content
################################################################################ -->	
            
<!--section>
<h2 class="pink u">Grundlagen der visuellen Kommunikation <strong>Review</strong></h2>
<ul>
<li class="frag">… viele gute Ergebnisse</li>
<li class="frag">… Problem: Software</li>
<li class="frag">… Problem: falsche Daten</li>
<li class="frag">… Problem: zu wenig Freiheitsgrade </li>
</ul>
</section-->

<section>
	<h1 class="u">Web-basierte Anwendungen 1</h1>
	<h2>Challenge Training</h2>
	<p>November 2017</p>
	<p>Studiengang Medieninformatik an der TH Köln
	<br>Camp<NAME></p>
	<p style="margin-top:10%">M.Sc. <NAME></p>
</section>

<section>
	<h2 class="pink u">Warum dieses Challenge-Training?</h2>
	<ul>
	<li class="frag">Um ein Gespür für die finale Challenge zu bekommen</li>
	<li class="frag">Um im Team zu arbeiten und kollaborativ an einer Seite zu arbeiten </li>
	<li class="frag">Um im Team gemeinsam Github zu benutzen</li>
	<li class="frag">Um den Mentoren Fragen stellen zu können</li>
	<li class="frag">Und damit Unklarheiten zu beseitigen</li>
	</ul>
</section>

<section>
	<h2 class="u">Warum geht es in der finalen Challenge</h2>
	<ul>
	<li class="frag">Eigenverantwortliche Anwendung der gelernten Inhalte</li>
	<li class="frag">Offene und kreative Arbeitsweise</li>
	<li class="frag">Teamwork</li>                    
	<li class="frag">Eigene Soft- und Hard-Skills challengen</li>
	<li class="frag">Um selbständig Lösungsansätze im Web zu recherchieren</li>
	</ul>
</section>

<section>
	<h2 class="u menu">Das Training...</h2>
	<ul>
	<li class="frag">... ist freiwillig</li>
	<li class="frag">aber empfehlenswert</li>
	</ul>

	<h2 class="u menu">Nutzen Sie das Training...</h2>
	<ul>
		<li>...um mal eine freie Aufgabe im WBA Kontext zu bearbeiten</li>
		<li>...um im Training als Team zu agieren und die Stärken und Schwächen des Teams kennen zu lernen</li>
		<li>...um GIT und GitHub zu nutzen, damit Sie hier Ihre Skills vertiefen können. In der finalen Challenge ist der Einsatz von GitHub erforderlich</li>
	</ul>
</section>

<section>
	<h2 class="u menu">Ein paar weitere Hinweise</h2>
	<ul>
	<li class="frag">Legen Sie sich ein Github Repository an (wenn schon nicht passiert)</li>
	<li class="frag">Fügen Sie Collaborators hinzu</li>
	<li class="frag">Richten Sie sich Ssh und Github ein, damit sie sich nicht bei jedem Push und Pull gegenüber Github authentifizieren müssen</li>
	<li class="frag">Üben sie das publishen des Ergebnisses des Trainings via Github-Pages</li>
	</ul>
	<iframe width="1000" height="315" src="https://www.youtube.com/embed/OzRf45n1-GQ" frameborder="0" allowfullscreen></iframe>
</section>

<section>
	<h2 class="u">Und das <strong>wichtigste</strong></h2>
	<ul>
	<li class="frag">Nutzen Sie das Internet (z.B.: Stackoverflow)</li>
	<li class="frag">Fragen Sie uns</li>
	<li class="frag">Seien Sie experementierfreudig</li>
	<li class="frag">Es gibt nicht die eine richtige Lösung</li>
	<li class="frag">Es gibt keine falsche Lösung</li>
	<li class="frag">Seien Sie kreativ</li>
	</ul>
</section>

<section>
	<h2 class="u">Die <strong>Aufgabe</strong></h2>
	<p>Die Trainingsaufgabe besteht darin, eine Team bzw. Employer Branding Seite für ein bestehendes oder fiktives Unternehmen zu erstellen. Die Seite kann sowohl statische als auch dynamische Inhalte beinhalten, z.B.:</p>
	<ul>
	<li class="frag">interaktive Inhalte die über eine API via Javascript eingebunden werden (z.B. Twitter)</li>
	<li>statische Inhalte in Form von Bildern und Texten</li>
	<li>eine Kombination aus beidem</li>
	</ul>
	<p>Wie schon erwähnt, kann es eine fiktive Seite sein, oder sie benutzen eine bestehende Team-Page eines Unternehmens, programmieren diese nach und erweitern die Seite anschließend sinnvoll. Der reverse-engenieering Ansatz ist ein Skillset, dass im späteren Berufsbild oftmals gebraucht wird. Nutzen Sie z.B. Tools wie den Inspector im Browser.</p>
	<p>Beispielseiten finden sie hier: <a href="https://th-koeln.github.io/mi-bachelor-wba1/lehrveranstaltungen/challenge-training-info/">https://th-koeln.github.io/mi-bachelor-wba1/lehrveranstaltungen/challenge-training-info/#die-aufgabe</a></p>
</section>

<section>
	<h1 class="inverse">Wie könnte so eine Seite aussehen?</h1>
	<img src="images/IMG_3605.JPG" width="100%" />
</section>

<section>
	<h2 class="u">Ein paar Hinweise zur Umsetzung</h2>
	<ul>
	<li class="frag">Nutzen sie z.B.: die Twitter API</li>
	<li class="frag">Oder ein statisches fikitves JSON</li>
	<li class="frag">Weitere Infos dazu finden sie <a href="https://th-koeln.github.io/mi-bachelor-wba1/lehrveranstaltungen/challenge-training-info/hinweise-zum-einbinden-von-interaktiven-inhalten">hier</a></li>
	<li class="frag">Graphen kann man z.B.: mit CSS erstellen: <a href="https://css-tricks.com/making-charts-with-css/">https://css-tricks.com/making-charts-with-css/</a></li>
	<li class="frag">Nutzen sie unser Template: <a href="https://th-koeln.github.io/mi-bachelor-wba1/links/">https://th-koeln.github.io/mi-bachelor-wba1/links/ unter "Helper"</a></li>
	</ul>
</section>

<section class="center _center" data-background="#9313c3" data-background-transition="zoom">
	<h1 class="inverse">Fragen?</h1>
</section>

<section>
	<h2 class="u">Auf was werden wir achten?</h2>
	<p>Ein paar Hinweise auf was wir bei der finalen Challenge achten werden:</p>
	<ul>
	<li class="frag">Commited das ganze Team in Github? Das können wir mittels Github Insights nachvollziehen</li>
	<li>Commited das ganze Team oft genug?</li>
	<li>Gibt es eine Dokumentation (oder die Seite Dokumentiert) die mittels Github-Pages online gestellt wurde. Mehr zu Github Pages finden sie im <a href="https://www.youtube.com/embed/OzRf45n1-GQ">kurzen Video-Tutorial</a></li>
	<li>Sind die erlernten WBA Skills angewand worden: semantisch reichhaltiges Markup, CSS, Javascript, usw.</li>
	</ul>
</section>

<section class="center _center" data-background="#dd1166" data-background-transition="zoom">
<h1 class="_is-white">Have fun!</h1>
</section>
            
<!-- End of Content<commit_msg>changed order<commit_after><!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <!-- Title of presentation -->
    <title>Challenge Training</title>
    <!-- Short description of presentation -->
    <meta name="description" content="Challenge Training Web-basierte Anwendungen 1">
    <!-- Author of presentation -->
    <meta name="author" content="<NAME>">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="../../src/reveal-js/css/reveal.min.css">
    <link rel="stylesheet" href="../../src/reveal-js/css/theme/medieninformatik.css" id="theme">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="../../src/reveal-js/lib/css/solarized_light.css">

    <!-- If the query includes 'print-pdf', use the PDF print sheet -->
    <script>
        document.write('<link rel="stylesheet" href="../../src/reveal-js/css/print/' + (window.location.search.match(/print-pdf/gi) ? 'pdf' : 'paper') + '.css" type="text/css" media="print">');
    </script>

    <!--[if lt IE 9]>
		<script src="../../src/reveal-js/lib/js/html5shiv.js"></script>
		<![endif]-->
</head>

<body>
<div class="reveal">
<div class="slides">
	
<!-- Beginn of Content
################################################################################ -->	
            
<!--section>
<h2 class="pink u">Grundlagen der visuellen Kommunikation <strong>Review</strong></h2>
<ul>
<li class="frag">… viele gute Ergebnisse</li>
<li class="frag">… Problem: Software</li>
<li class="frag">… Problem: falsche Daten</li>
<li class="frag">… Problem: zu wenig Freiheitsgrade </li>
</ul>
</section-->

<section>
	<h1 class="u">Web-basierte Anwendungen 1</h1>
	<h2>Challenge Training</h2>
	<p>November 2017</p>
	<p>Studiengang Medieninformatik an der TH Köln
	<br>Camp<NAME></p>
	<p style="margin-top:10%">M.Sc. <NAME></p>
</section>

<section>
	<h2 class="pink u">Warum dieses Challenge-Training?</h2>
	<ul>
	<li class="frag">Um ein Gespür für die finale Challenge zu bekommen</li>
	<li class="frag">Um im Team zu arbeiten und kollaborativ an einer Seite zu arbeiten </li>
	<li class="frag">Um im Team gemeinsam Github zu benutzen</li>
	<li class="frag">Um den Mentoren Fragen stellen zu können</li>
	<li class="frag">Und damit Unklarheiten zu beseitigen</li>
	</ul>
</section>

<section>
	<h2 class="u">Warum geht es in der finalen Challenge</h2>
	<ul>
	<li class="frag">Eigenverantwortliche Anwendung der gelernten Inhalte</li>
	<li class="frag">Offene und kreative Arbeitsweise</li>
	<li class="frag">Teamwork</li>                    
	<li class="frag">Eigene Soft- und Hard-Skills challengen</li>
	<li class="frag">Um selbständig Lösungsansätze im Web zu recherchieren</li>
	</ul>
</section>

<section>
	<h2 class="u menu">Das Training...</h2>
	<ul>
	<li class="frag">... ist freiwillig</li>
	<li class="frag">aber empfehlenswert</li>
	</ul>

	<h2 class="u menu">Nutzen Sie das Training...</h2>
	<ul>
		<li>...um mal eine freie Aufgabe im WBA Kontext zu bearbeiten</li>
		<li>...um im Training als Team zu agieren und die Stärken und Schwächen des Teams kennen zu lernen</li>
		<li>...um GIT und GitHub zu nutzen, damit Sie hier Ihre Skills vertiefen können. In der finalen Challenge ist der Einsatz von GitHub erforderlich</li>
	</ul>
</section>

<section>
	<h2 class="u menu">Ein paar weitere Hinweise</h2>
	<ul>
	<li class="frag">Legen Sie sich ein Github Repository an (wenn schon nicht passiert)</li>
	<li class="frag">Fügen Sie Collaborators hinzu</li>
	<li class="frag">Richten Sie sich Ssh und Github ein, damit sie sich nicht bei jedem Push und Pull gegenüber Github authentifizieren müssen</li>
	<li class="frag">Üben sie das publishen des Ergebnisses des Trainings via Github-Pages</li>
	</ul>
	<iframe width="1000" height="315" src="https://www.youtube.com/embed/OzRf45n1-GQ" frameborder="0" allowfullscreen></iframe>
</section>

<section>
	<h2 class="u">Und das <strong>wichtigste</strong></h2>
	<ul>
	<li class="frag">Nutzen Sie das Internet (z.B.: Stackoverflow)</li>
	<li class="frag">Fragen Sie uns</li>
	<li class="frag">Seien Sie experementierfreudig</li>
	<li class="frag">Es gibt nicht die eine richtige Lösung</li>
	<li class="frag">Es gibt keine falsche Lösung</li>
	<li class="frag">Seien Sie kreativ</li>
	</ul>
</section>

<section>
	<h2 class="u">Die <strong>Aufgabe</strong></h2>
	<p>Die Trainingsaufgabe besteht darin, eine Team bzw. Employer Branding Seite für ein bestehendes oder fiktives Unternehmen zu erstellen. Die Seite kann sowohl statische als auch dynamische Inhalte beinhalten, z.B.:</p>
	<ul>
	<li class="frag">interaktive Inhalte die über eine API via Javascript eingebunden werden (z.B. Twitter)</li>
	<li>statische Inhalte in Form von Bildern und Texten</li>
	<li>eine Kombination aus beidem</li>
	</ul>
	<p>Wie schon erwähnt, kann es eine fiktive Seite sein, oder sie benutzen eine bestehende Team-Page eines Unternehmens, programmieren diese nach und erweitern die Seite anschließend sinnvoll. Der reverse-engenieering Ansatz ist ein Skillset, dass im späteren Berufsbild oftmals gebraucht wird. Nutzen Sie z.B. Tools wie den Inspector im Browser.</p>
	<p>Beispielseiten finden sie hier: <a href="https://th-koeln.github.io/mi-bachelor-wba1/lehrveranstaltungen/challenge-training-info/">https://th-koeln.github.io/mi-bachelor-wba1/lehrveranstaltungen/challenge-training-info/#die-aufgabe</a></p>
</section>

<section>
	<h1 class="inverse">Wie könnte so eine Seite aussehen?</h1>
	<img src="images/IMG_3605.JPG" width="100%" />
</section>

<section>
	<h2 class="u">Ein paar Hinweise zur Umsetzung</h2>
	<ul>
	<li class="frag">Nutzen sie z.B.: die Twitter API</li>
	<li class="frag">Oder ein statisches fikitves JSON</li>
	<li class="frag">Weitere Infos dazu finden sie <a href="https://th-koeln.github.io/mi-bachelor-wba1/lehrveranstaltungen/challenge-training-info/hinweise-zum-einbinden-von-interaktiven-inhalten">hier</a></li>
	<li class="frag">Graphen kann man z.B.: mit CSS erstellen: <a href="https://css-tricks.com/making-charts-with-css/">https://css-tricks.com/making-charts-with-css/</a></li>
	<li class="frag">Nutzen sie unser Template: <a href="https://th-koeln.github.io/mi-bachelor-wba1/links/">https://th-koeln.github.io/mi-bachelor-wba1/links/ unter "Helper"</a></li>
	</ul>
</section>

<section>
	<h2 class="u">Auf was werden wir achten?</h2>
	<p>Ein paar Hinweise auf was wir bei der finalen Challenge achten werden:</p>
	<ul>
	<li class="frag">Commited das ganze Team in Github? Das können wir mittels Github Insights nachvollziehen</li>
	<li>Commited das ganze Team oft genug?</li>
	<li>Gibt es eine Dokumentation (oder die Seite Dokumentiert) die mittels Github-Pages online gestellt wurde. Mehr zu Github Pages finden sie im <a href="https://www.youtube.com/embed/OzRf45n1-GQ">kurzen Video-Tutorial</a></li>
	<li>Sind die erlernten WBA Skills angewand worden: semantisch reichhaltiges Markup, CSS, Javascript, usw.</li>
	</ul>
</section>

<section class="center _center" data-background="#9313c3" data-background-transition="zoom">
	<h1 class="inverse">Fragen?</h1>
</section>

<section class="center _center" data-background="#dd1166" data-background-transition="zoom">
<h1 class="_is-white">Have fun!</h1>
</section>
            
<!-- End of Content
{'fraction_non_alphanumeric': 0.1733065057008719, 'fraction_numerical': 0.010731052984574111, 'mean_word_length': 4.609857035364936, 'pattern_counts': {'":': 0, '<': 457, '<?xml version=': 0, '>': 455, 'https://': 18, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3381996', 'n_tokens_mistral': 5534, 'n_tokens_neox': 5419, 'n_words': 1384}