-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathpage2_de.html
387 lines (284 loc) · 13.4 KB
/
page2_de.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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!doctype html>
<head>
<title>Kursmaterial: Seite 2</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<h1>Kursmaterial: Seite 2, Erstellen deiner Slideshow</h1>
<p>Wir werden erfahren, wie wir eine Slideshow in HTML bauen, und anschließend
lernen, wie wir den Inhalt mittels JavaScript dynamisch und interaktiv
gestalten.</p>
<p>Für dieses Projekt werden wir eine Slideshow aus Fotos erstellen. Du wirst
mehr Spaß haben, wenn deine Slideshow aus deinen eigenen Fotos besteht, oder
zumindest aus Fotos, die dir gefallen. Daher ist der erste Schritt:</p>
<h2 class="step">Fotos von Flickr oder Instagram herunterladen</h2>
<h3 class=goal>Ziel</h3>
<p>Suche dir ein paar schöne Fotos, um sie in deiner Slideshow zu verwenden.</p>
<h3 class=inst>Anweisungen</h3>
<p>Erzeuge ein neues Verzeichnis (Ordner) für das ganze Projekt und benenne es
„slideshow“.</p>
<p>Lade drei Fotos aus dem Internet und speichere sie in deinem
<span class="filename">slideshow</span>-Ordner.</p>
<p>Die Fotos müssen:</p>
<ul>
<li>vom Dateityp .jpg, .gif oder .png sein,</li>
<li>eine Breite von ungefähr 500 bis 600 Pixeln haben,</li>
<li><strong>alle eine gleiche Pixel-Breite haben,</strong></li>
<li><strong>alle eine gleiche Pixel-Höhe haben und</strong></li>
<li>dir gut gefallen. Denn du wirst sie den ganzen Tag lang betrachten!</li>
</ul>
<p>Wenn du beim Herunterladen von Fotos Hilfe brauchst, frage einfach einen
Coach.</p>
<h4>Flickr verwenden</h4>
<p>Klicke beim Ansehen einer Fotoseite mit der rechten Maustaste auf das Bild
und wähle die Größe “Medium 500” oder “Medium 640”. Lade dir auf der nächsten
Seite das Bild herunter und speichere es in deinem
<span class="filename">slideshow</span>-Verzeichnis.</p>
<h4>Instagram verwenden</h4>
<p>Öffne
<a href="http://web.stagram.com/n/DEIN_NAME" target="_blank">http://web.stagram.com/n/DEIN_NAME</a>
und lade dir drei Fotos im Format “L” herunter. (Sie sind alle 612 Pixel breit
und 612 Pixel hoch.)</p>
<h4>Hast du keinen Flickr- oder Instagram-Account?</h4>
<p>Dann benutze einfach diese Fotos:</p>
<ul>
<li><a href="http://distilleryimage8.s3.amazonaws.com/24259794d05911e1abd612313810100a_7.jpg" target="_blank">Spree bei Nacht</a></li>
<li><a href="http://distilleryimage11.s3.amazonaws.com/ac587510a27211e1a92a1231381b6f02_7.jpg" target="_blank">Der Himmel über dem Volkspark Friedrichshain</a></li>
<li><a href="http://distilleryimage2.s3.amazonaws.com/d9f9d1a0b52611e1abd612313810100a_7.jpg" target="_blank">Der Fernsehturm im Nebel</a></li>
</ul>
<h3 class=ex>Erklärung</h3>
<p>Wir werden unsere Slideshow mit nur drei Fotos bestücken. Der Einfachheit
halber sollen sie nicht zu groß sein und ein übliches Format besitzen.</p>
<h2 class="step">HTML schreiben, um die Fotos anzuzeigen</h2>
<h3 class=goal>Ziel</h3>
<p>Verstehen wie statische Inhalte angezeigt werden können durch das Schreiben von HTML.
(Mit „statisch“ ist hier „sich nicht bewegend“ und „ohne Interaktion“ gemeint.)</p>
<h3 class=inst>Anweisungen</h3>
<p>Öffne eine neue Datei in deinem Editor.</p>
<p>Speichere die Datei mit dem Namen „index.html“ in deinem
<span class="filename">slideshow</span>-Verzeichnis.</p>
<p>Binde the Fotos im HTML ein, indem du drei Zeilen wie diese hinzufügst:</p>
<pre>
<img src="DATEINAME_DES_ERSTEN_FOTOS">
<img src="DATEINAME_DES_ZWEITEN_FOTOS">
<img src="DATEINAME_DES_DRITTEN_FOTOS">
</pre>
<p>Du musst den kompletten Dateinamen samt Erweiterung angeben, also
inklusive .jpg, .gif oder .png.</p>
<p>In Chrome, öffne das Menü <code>Datei</code> (oder <code>Ablage</code>) und
wähle dann <code>Datei öffnen…</code>. Suche darin nach der Datei
<span class="filename">slideshow/index.html</span> und öffne sie.</p>
<p>Wechsle in deinen Texteditor. Füge folgendes am Anfang der Datei
<span class="filename">index.html</span> ein, direkt vor den
<code><img></code>-Tags:</p>
<pre>
<!doctype html>
<head>
<title>I ♥ Coding</title>
</head>
</pre>
<p>Zurück in Chrome, lade die Datei neu und schau dir den Titel des Tabs
an.</p>
<p>Füge im Texteditor eine weitere Zeile zum Kopf (<code><head></code>)
hinzu, welche die Zeichenkodierung UTF-8 angibt:</p>
<pre>
<!doctype html>
<head>
<title>I ♥ Coding</title>
<strong><meta charset="utf-8"></strong>
</head>
</pre>
<p>Lade die Seite in Chrome neu und schaue dir erneut den Titel des Tabs an.</p>
<h3 class=ex>Erklärung</h3>
<p>Du hast ein bisschen HTML geschrieben und schaust es dir in deinem Browser
an!</p>
<p>Du hast auch einen Titel hinzugefügt, und eine Zeichenkodierung angegeben,
damit Sonderzeichen korrekt dargestellt werden. (Die UTF-8-Kodierung ist nicht
nur für Herzchen wichtig, sondern auch beispielsweise für Umlaute.)</p>
<p>Die erste Zeile, die <code>doctype</code>-Deklaration, ist aus ähnlichen
Gründen wichtig wie die Angabe der Zeichenkodierung. Diese einfache Zeile
teilt dem Broser mit, welche Art von HTML wir schreiben, damit er es in einer
vorhersehbaren Weise verarbeitet.</p>
<h2 class="step">Erstelle einen Film mit deinen Fotos</h2>
<h3 class=goal>Ziel</h3>
<p>Sehen, dass CSS zum Positionieren der Inhalte verwendet werden kann.</p>
<h3 class=inst>Anweisungen</h3>
<p>Erzeuge in deinem Editor eine neue Datei namens „style.css“ und speichere sie
im <span class="filename">slideshow</span>-Verzeichnis.</p>
<p>Öffne die Datei <span class="filename">style.css</span> und füge folgende
CSS-Regeln hinzu:</p>
<pre>
.picture-frame {
height: 344px; /* Höhe eines einzelnen Bildes */
width: 500px; /* Breite eines einzelnen Bildes */
overflow: hidden;
margin: 50px auto;
position: relative;
}
.film-roll {
width: 1500px; /* Die Breite eines Bildes mal 3 */
position: absolute;
left: 0px;
top: 0px;
}
img {
float: left;
}
</pre>
<p>Passe die Werte für die Höhe und Breite so an, dass sie der Höhe und Breite
deiner Fotos in Pixeln entsprechen. Du musst ingesamt drei Werte anpassen.</p>
<p>Erweitere die Datei <span class="filename">index.html</span>, indem du einen
Verweis auf das Stylesheet <span class="filename">style.css</span> in den
<code>head</code> einfügst. Umschließe dann die drei <code><img></code>-Tags
in zwei <code><div></code>-Container mit den Klassen „picture-frame“ und
„film-roll“.</p>
<pre>
<!doctype html>
<head>
<title>I ♥ Coding</title>
<meta charset="utf-8">
<strong><link rel="stylesheet" href="style.css"></strong>
</head>
<strong><div class="picture-frame"></strong>
<strong> <div class="film-roll"></strong>
<img src="…">
<img src="…">
<img src="…">
<strong> </div></strong>
<strong></div></strong>
</pre>
<p>Zurück im Chrome, lade die Seite neu.</p>
<p>Während du in Chrome bist, öffne die Konsole.</p>
<aside>
<p>Gestern haben wir gelernt, wie wir auf die Konsole von Chrome zugreifen:
Unter Windows oder Linux, drücke die Tastenkombination Ctrl+Shift+J,
unter Mac OS X, drücke Command+Option+J.
Alternativ kannst du auf das Schraubenschlüssel-Menü in der rechten oberen
Ecke des Fensters klicken, und darin <code>Tools</code> ▸
<code>Entwicklertools</code> wählen</p>
</aside>
<p>In der Konsole, gehe zum äußersten linken Tab mit dem Namen „Elements“.
Klicke auf die Pfeile (▸), um in das Element <code><body>…</body></code>
zu sehen. Schaue dich darin ein wenig um, bis du deine
<code><img></code>-Tags findest. Das sieht dann ungefähr so aus:</p>
<img src="inspecting-film-roll.png" class="figure">
<p>Schaue dir die rechte Spalte etwas genauer an. Du wirst dort die CSS-Regeln
vorfinden, die du in der <span class="filename">style.css</span>-Datei
definiert hast.</p>
<p>Nachdem du <code><div class="film-roll"></code> ausgewählt hast, editiere
die <code>left</code>-Eigenschaft in der rechten Spalte. Ändere sie von 0px auf
50px. Danach versuche den Wert -50px. Benutze die Hoch- und Runter-Taste,
während du den Wert der <code>left</code>-Eigenschaft veränderst.</p>
<p>Lade die Seite neu, um alle Formatierungen zurückzusetzen.</p>
<p>Spiele mit weiteren CSS-Werten in anderen Regeln herum, die andere Elemente
betreffen. Schalte sie an und aus mithilfe der Checkboxen. Was machen diese
Eigenschaften, wie wirken sie sich aus?</p>
<h3 class=ex>Erklärung</h3>
<p>Vorher haben wir gesehen, dass eine Regel nach dem Schema
<code>p { … }</code> Absätze formatiert. Regeln, die mit einem Punkt beginnen,
z.B. <code>.klassenname { … }</code>, zielen auf Elemente, deren
<code>class</code>-Attribut <code>klassenname</code> lautet.</p>
<p>Mithilfe von Klassennamen können wir zwei <code><div></code>-Tags
ganz unterschiedlich formatieren. Wie wir sehen, lässt sich auf diese Weise
auch die Position mit CSS kontrollieren.</p>
<p>Mit einer ausgeklügelten Technik zur Positionierung haben wir einen
„Bilderrahmen“ gebaut, der auf der Seite zentriert ist. Höhe und Breite
entsprechen genau der Größe eines Fotos:</p>
<pre>
.picture-frame {
<strong>height: 334px;</strong>
<strong>width: 500px;</strong>
…
}
</pre>
<p>Innerhalb des Bilderrahmens haben wir einen „Film“ mit all unseren
Fotos erzeugt:</p>
<pre>
.film-roll {
<strong>width: 1500px;</strong>
left: 0px;
…
}
</pre>
<p>Indem wir dessen Position verändern (über die <code>left</code>-Eigenschaft),
können wir zwischen den Fotos wie bei Dias hin- und herschalten. Der Film hat
eine Startposition von „0“. (Das ist, was <code>left: 0px;</code> bewirkt.)</p>
<!-- an illustration would help -->
<aside>
<p>Details für Nerds: CSS-Positionierung ist ein weiterführendes Thema.
Hoffentlich reicht diese Erklärung aus:</p>
<ul>
<li><code>margin: 50px auto;</code> zentriert den Rahmen horizontal</li>
<li><code>overflow: hidden;</code> versteckt alle Inhalte, die nicht in den Rahmen passen</li>
<li><code>position: relative;</code> erzeugt einen Referenzrahmen, für die Positionierung der Inhalte darin</li>
<li><code>position: absolute;</code> ermöglicht es, die Position zu setzen</li>
</ul>
</aside>
<p>Wir können das CSS im Stylesheet verändern, oder wir ändern es von Hand in
den Developer-Tools. Aber (viel spannender!) wir können CSS auch
mithilfe von JavaScript ändern. Bist du bereit, es auszuprobieren?
Legen wir los!</p>
<!-- an illustration would help -->
<h2 class="step">Erzeugen einer Referenz auf den Film</h2>
<h3 class=goal>Ziel</h3>
<p>Sehen, dass du ein HTML-Element referenzieren kannst und dir dessen
Eigenschaften in der Konsole ansehen kannst.</p>
<h3 class=inst>Anweisungen</h3>
<p>In der Datei <span class="filename">index.html</span>, füge die ID
<code>the-film-roll</code> zu dem <code><div></code>-Element hinzu, das
bereits die Klasse <code>film-roll</code> hat:</p>
<pre>
<div class="film-roll" <strong>id="the-film-roll"</strong>>
</pre>
<p>Zurück im Konsole-Tab der Developer-Tools, tippe folgendes ein:</p>
<pre>
var filmroll = document.getElementById('the-film-roll');
</pre>
<p>Dann gib folgendes nacheinander ein, Zeile für Zeile. Einige Zeilen haben
einen unerwarteten Effekt (oder unerwartet keinen Effekt).</p>
<pre>
filmroll;
filmroll.offsetLeft;
filmroll.offsetLeft = -100;
filmroll.offsetLeft;
filmroll.style.left = '-100px';
filmroll.offsetLeft;
filmroll.style.top = '50px';
</pre>
<p>Versuche nun, <code>filmroll</code> um 700 Pixel <em>nach links</em> zu
verschieben.</p>
<p>Probiere auch die Werte von anderen Style-Eigenschaften zu ändern.</p>
<p>Lade die Seite neu. Gib folgendes in die Konsole ein:</p>
<pre>
filmroll.style.left = '-100px';
</pre>
<p>Was ist nun mit unserem Freund <code>filmroll</code> passiert?</p>
<h3 class=ex>Erklärung</h3>
<p>Wenn JavaScript im Browser läuft, erzeugt der Browser eine
<em>Umgebungsvariable</em> namens <code>document</code>. Diese hat viele
nützliche Eigenschaften, mit denen wir auf die Elemente der Seite zugreifen
können. Wir können etwa die Methode <code>getElementById</code> verwenden,
um ums eine Referenz auf ein Element anhand einer ID unserer Wahl zu holen.</p>
<p>Oben haben wir dem Element des Filmes eine ID zugewiesen, um mithilfe der ID
eine Referenz zu erzeugen, die wir mit JavaScript kontrollieren können.</p>
<p>Wenn wir erst einmal eine Referenz auf das <code><div></code> mit der ID
<code>the-film-roll</code> haben, so können wir auch auf dessen Egenschaften
zugreifen. Denn es handelt sich um ein Objekt, wie wir sie gestern
kennengelernt haben. Einige der Eigenschaften (wie <code>offsetLeft</code>)
sind <em>nur lesbar</em>, das heißt wir können ihren Wert nicht verändern.
Andere hingegen können geändert werden, vielleicht hast du sie gefunden.
Manche Egenschaft wie <code>style</code> haben selbst noch weitere
Eigenschaften.</p>
<p>Die <code>style</code>-Eigenschaft erlaubt es uns, die CSS-Eigenschaften
eines Elements zu beeinflussen. Mithilfe einer Referenz auf ein HTML-Element
können wir also sein Aussehen und seine Position verändern (indem wir die
CSS-Eigenschaften setzen).</p>
<p>In dem Moment, wo wir die Seite neu laden, bekommen wir eine komplett neue
JavaScript-Umgebung und alle erzeugten Variablen sind verloren. Wie können wir
also Variablen erzeugen, ohne sie jedes Mal in die Konsole zu tippen? Es muss
einen Weg geben!</p>
<h2>Bringen wir alles zusammen</h2>
<p>HTML in der Seite, CSS im Stylesheet, aber wie können wir
JavaScript-Programme laden. Lass es uns herausfinden!</p>
<p><a href="page3_de.html">→ Zur dritten Seite</a>.</p>