-
Notifications
You must be signed in to change notification settings - Fork 34
/
Copy pathindex.html
235 lines (193 loc) · 13.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>WBA1 Challenge // Web Development for Rookies</title>
<!-- Normalize und Milligram Framework -->
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="lib/milligram-1.3.0/dist/milligram.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="styles/010-resets.css">
<link rel="stylesheet" href="styles/020-base.css">
<link rel="stylesheet" href="styles/030-typography.css">
<link rel="stylesheet" href="styles/040-layout.css">
<link rel="stylesheet" href="styles/050-components.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header class="site-header">
<section class="site-header__content content">
<figure class="site-header__key-visual">
<img src="images/header-illustration.svg" alt="Web Developers Workspace" width="100">
</figure>
<a href="#main-content" class="no-button site-header__launch-button js-scrollto"><i class="material-icons md-48 md-light">keyboard_arrow_down</i></a>
</section>
</header>
<main id="main-content">
<!-- Intro -->
<section class="section content">
<h1 class="title">WBA1 Challenge Tipps</h1>
<h2 class="subtitle">Ein paar Gedanken, Ideen und Tools für einen entspannteren Tag.</h2>
<p class="section__content">Anbei ein paar Gedanken und Ideen zur WBA1 Challenge. Diese kleine Seite erhebt keinen Anspruch auf Vollständigkeit und die Herangehensweise, die Ideen und die vorgeschlagenen Tools und Frameworks sind mitunter sehr subjektiv. Wir hoffen es
hilft trotzdem. Außerdem haben uns einige gefragt, wie sie sich vorbereiten können. Auch dazu gibt es ein paar Tipps und Vorschläge.<br><br>Viel Spaß, Ihr WBA Team</p>
</section>
<!-- Worum geht es? -->
<section class="section content js-akkördion"><header class="section__header"><h2>
<i class="material-icons md-24 ">
directions_run</i> Worum geht es?</h2>
</header><div class="section__content"><p>Bei der Challenge geht es darum,
im Team eine Aufgabe oder ein Problem mit Hilfe einer web-basierten Anwendung zu lösen.
Dazu braucht man, wer hätte es gedacht,
Skills
bei
der
Entwicklung
web-basierter
Anwendungen.
Aber man braucht noch
ein wenig mehr, z.B. eine gute Idee, gute Organisation,
ein gutes Gefühl für Inhalt, gestalterische Grundkompetenz und Motivation.</p></div>
</section>
<!-- Organisation im Team? -->
<section class="section content js-akkördion">
<header class="section__header">
<h2><i class="material-icons md-24 ">people</i> Organisation im Team?</h2>
</header>
<div class="section__content">
<p>Sie werden im Team arbeiten. Hier ist es ganz vorteilhaft, wenn Sie und Ihr Team ein gewisses Maß an Organisationsstruktur etablieren. Dies hat im konkreten Kontext vor allem Auswirkungen auf drei Bereiche:</p>
<ul class="task-list grid grid-is-2 ">
<li class="task-list__item">
<h3>Arbeitsorganisation</h3>
<p>Wer macht was? Für die Challenge lohnt es sich, wenn sich die einzelnen Teammitglieder etwas spezialisieren. Vielleicht sind ein oder zwei Mitglieder besser in Javascript und andere wiederum besser in CSS und wieder andere haben
ein gutes Auge für Gestaltung oder sind gute Rechercheure. Dies sollten Sie frühzeitig evaluieren und regeln.</p>
</li>
<li class="task-list__item">
<h3>Codestruktur & -management</h3>
<p>Wer ist für welche Bereiche, Dateien & Komponenten zuständig. Wenn Sie schnell und mit möglichst wenigen Mergekonflikten durch den Tag kommen wollen, ist es ratsam sich hier ein Konzept zurecht zu legen und es entsprechend umzusetzen.
Teilen Sie den Code nach technischen (CSS, JS, HTML, etc.) oder inhaltlichen (Landigpage, Doku, etc.) Bereichen auf oder zerlegen Sie Ihr Projekt in Komponenten, die dann mit Zuständigkeiten versehen werden.</p>
</li>
</ul>
<h3>Nutzung von Github</h3>
<p> Viele organisatorische Aufgaben und vor allem das Code Management lässt sich mit Hilfe von Git und Github abbilden. Was das heißt und wie das geht, sehen sie im folgenden Video.</p>
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/OzRf45n1-GQ?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
<!-- Wie könnte man sich dem Problem nähern? -->
<section class="section content js-akkördion">
<header class="section__header">
<h2><i class="material-icons md-24 ">bubble_chart</i> Wie könnte man sich dem Problem nähern?</h2>
</header>
<div class="section__content">
<h3>Was ist das Problem?</h3>
<p>Heiteres Drauflos-coden ist selten ein guter Anfang. Auch wenn bei der Challenge wenig Zeit zur Verfügung steht, lohnt es sich am Anfang der Challenge, oder in Vorbereitung auf die Challenge eine genauere Betrachung des Problems. Was ist
eigentlich das Problem und welche Möglichkeiten gäbe es dies zu lösen?</p>
<p>Es empfiehlt sich verschiedene Lösungsstrategien zu entwickeln und gegeneinander abzuwägen. Bei der Erarbeitung von Lösungsansätzen können Kreativtätstechniken enorm helfen. Die bekannstete ist vermutlich das Brainstorming. Aber auch andere
Techniken, der <a href="http://www.ideenfindung.de/morphologischer-kasten.html">Morphologische Kasten</a>, die <a href="http://www.ideenfindung.de/6-3-5-Methode-Kreativit%C3%A4tstechnik-Brainstorming-Ideenfindung.html">6-3-5 Technik</a> oder das <a href="http://www.ideenfindung.de/meinungs-blitzlicht-brainstorming-kreativit%C3%A4tstechniken-ideenfindung.html">Meinungs-Blitzlicht</a> können enorm helfen, die Ideenphase zu verkürzen und zu besseren oder interessanteren
Lösungsstrategien beitragen.
</p>
<h3>Wie wählen wir die beste Variante?</h3>
<p>Grundsätzlich gilt: Sie sollten Varianten haben und Sie sollten Kritierien haben, mit deren Hilfe Sie die beste oder passenste Variante auswählen. Im Kontext der Challenge könnte es eine Reihe von sinnvollen Kriterien geben. Hier ein paar
Beispiele:
</p>
<ul>
<li>die Variante löst das beschriebene Problem gut</li>
<li>die Variante lässt sich gut erkären</li>
<li>die Variante lässt sich gut im gegebenen Zeitrahmen und Kontext umsetzen</li>
<li>die Variante lässt sich gut im Team arbeitsteilig umsetzen</li>
<li>bei der Umsetzung der Variante lassen sich gut die Kenntnisse von HTML, CSS und Javascript einsetzen</li>
</ul>
<h3>Time Boxing</h3>
<p>Wenn die Zeit knapp ist, könnte <a href="http://wirtrainieren.de/werkzeugkoffer/timeboxing/">Time Boxing</a> eine hilfreiche Technik sein. Hierbei werden für bestimmte (Teil-)aufgaben sinnvolle Zeitvorgaben gegeben, die absolut strikt
eingehalten werden. Sinnvoll heißt: der Task bekommt ein Zeitfenster, das der Relevanz des Tasks im Kontext der Gesamtaufgabe entspricht. Damit wird sichergestellt, dass alle für den Prozess notwendigen Aufgaben erledigt werden können,
also keine Aufgaben am Ende des Prozesses "herunter fallen". </p>
<h3>Zielbild aufbauen</h3>
<p>Eine kleine Skizze, Wireframe, eine Übersicht, all das hilft dem Team ein gemeinsames Bild zu geben und die Arbeit besser aufzuteilen. Nutzen Sie dererlei Techniken um im Team ein gemeinsames Bild zu haben.</p>
<figure>
<img src="https://c2.staticflickr.com/6/5608/15033569833_a327c79601_b.jpg" alt="Fubizz Wireframes">
<figcaption><a href="https://www.flickr.com/photos/interactivemark/15033569833">Time Bank Wireframe - iteration von Mark Congiusta</a></figcaption>
</figure>
</div>
</section>
<!-- Nutzung von Frameworks, Icons und anderen Ressourcen. -->
<section class="section content" id="frameworks">
<header class="section__header">
<h2><i class="material-icons md-24 ">web</i> Nutzung von Frameworks, Icons und anderen Ressourcen.</h2>
</header>
<p>Im Rahmen der Challenge ist im Grunde so gut wie alles erlaubt, was Ihnen hilft das Projekt so gut und professionel wie möglich zu realisieren. Nutzen Sie Frameworks, Iconsets und Tools. Aber Sie müssen auf Ihrer Dokumentations Seite darauf
hinweisen, welche Tools und Codesnippets Sie verwendet haben. Hier eine kleine Übersicht über mögliche Helferleins.</p>
</section>
<!-- Switch -->
<section class="section content clearfix">
<ul id="viewmodeSwitcher" class="button-group float-right">
<li class="button-group__item is-active"><i class="material-icons md-48 " data-element="#helferleins" data-viewmode="blockmode">view_module</i></li>
<li class="button-group__item"><i class="material-icons md-48 " data-element="#helferleins" data-viewmode="rowmode">view_stream</i></li>
</ul>
</section>
<!-- Framework Grid -->
<section class="section">
<div class="showcase" id="helferleins">
<div class="showcase__item">
<h3><a href="https://getbootstrap.com/">Twitter Bootstrap</a></h3>
<p>Eines der meinst genutzten CSS Frameworks.</p>
</div>
<div class="showcase__item">
<h3><a href="https://bulma.io/">BULMA</a></h3>
<p>Ein kleines, schönes CSS Framework.</p>
</div>
<div class="showcase__item">
<h3><a href="http://materializecss.com/">Materialize</a></h3>
<p>Ein responsives Front-End-Framework basierend auf Material Design</p>
</div>
<div class="showcase__item">
<h3><a href="https://foundation.zurb.com/">Foundation</a></h3>
<p>Sehr mächtiges und umfangreiches Front-End Framework.</p>
</div>
<div class="showcase__item">
<h3><a href="https://material.io/icons/">Material Icons</a></h3>
<p>Iconset aus der Google Material Design Linie.</p>
</div>
<div class="showcase__item">
<h3><a href="http://fontawesome.io/icons/">Font Awesome</a></h3>
<p>Sehr umfangreiches Iconset mit über 600 Icons.</p>
</div>
<div class="showcase__item">
<h3><a href="https://useiconic.com/open/">Open Iconic</a></h3>
<p>Open Source Iconset mit über 200 Icons.</p>
</div>
<div class="showcase__item">
<h3><a href="https://vuejs.org/">Vue.js</a></h3>
<p>Sehr schönes JavaScript-Webframework zum Erstellen von Single-Page-Webanwendungen.</p>
</div>
<div class="showcase__item">
<h3><a href="https://jquery.com/">jQuery</a></h3>
<p>Sehr beliebtes Javascript Framework, das gerade nicht mehr so en vouge ist.</p>
</div>
<div class="showcase__item">
<h3><a href="https://reactjs.org/">React</a></h3>
<p>JavaScript Bibliothek, die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten zur Verfügung stellt.</p>
</div>
</div>
</section>
</main>
<footer class="footer">
<section class="section content">
<h3>Für diese Seite wurden die folgenden Tools, Frameworks und Ressourcen genutzt:</h3>
<li>Farbpaletten mit <a href="https://color.adobe.com/">Adobe Color CC</a> </li>
<li>Icons von <a href="https://material.io/icons/">Material Design</a></li>
<li>CSS Framework <a href="https://milligram.io/">Milligram</a></li>
<li>Fluid Width Video Snippet <a href="https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php">CSS Tricks</a></li>
<li>Header Visual von <a href="https://de.fotolia.com/">Fotolia</a></li>
</section>
</footer>
</body>
<script src="scripts/eyecandy-scrolling.js"></script>
<script src="scripts/eyecandy-showcase.js"></script>
<script src="scripts/accordion.js"></script>
<script src="scripts/viewmode-showcase.js"></script>
</html>