-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (132 loc) · 5.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LNU - Provföreläsning</title>
<link rel="stylesheet" href="style.css" />
<script type="module" async src="scripts/index.js"></script>
</head>
<body>
<section id="intro" class="splash">
<div class="container">
<h1>Webbutveckling<br /> på klientsidan</h1>
</div>
</section>
<section id="intro-agenda">
<div class="container animate">
<h1>Dagens agenda</h1>
<ol>
<li>Presentation av kursen</li>
<!-- för att kunna bygga webbsidor behöver vi veta vad en webbsida egentligen är.
Vad består den av? Hur fungerar den?
-->
<li>Vad är en webbsida, egentligen?</li>
</ol>
</div>
</section>
<section id="kursen-om" class="splash">
<div class="container">
<h1>Om kursen</h1>
<ul>
<!-- <li>Om mig</li> -->
<!-- har jobbat med systemutveckling de senaste 20 åren -->
<!-- nästan uteslutande webbutveckling de senaste 10 -->
<!-- <li>Utveckling är ett hantverk</li> -->
<!-- Det går att göra fungerande och användbara saker med små medel, lite kunskap. -->
<!-- Desto mer stort, komplex och bättre användarupplevelse kräver proportionellt mer kunskap och erfarenhet. -->
<!-- <li>
Transparens och autenticitet. Alla presentationer använder den
teknologi vi jobbar med. Ingen magi. Källkod på github.
</li> -->
</ul>
</div>
</section>
<section id="kursen-innehåll">
<div class="container animate">
<h1>Kursinnehåll</h1>
<ul>
<li><span>Kärnteknologier inom webbutveckling</span></li>
<li><span>Lite smått om programmering i allmänhet.</span></li>
<li><span>
Ordentligt om programmeringsspråket javascript i synnerhet.</span>
</li>
<li><span>Webbläsaren och dess APIer</span></li>
<!-- application programming interface -->
<li><span>Klient-server kommunikation</span</li>
<li><span>Verktyg för en god utvecklarupplevelse</span></li>
<li><span>Verktyg för en god användarupplevelse</span></li>
</ul>
</div>
</section>
<section id="webbutveckling" class="splash">
<div class="container">
<h1>Vad är en webbsida,<br />egentligen?</h1>
</div>
</section>
<section id="webbutveckling-html" class="hero">
<div class="container animate">
<h1>HTML</h1>
</div>
</section>
<section id="webbutveckling-om-html" class="two-columns">
<div class="container animate">
<h1>HTML</h1>
<ul>
<li><span>Märkspråk</span></li>
<li><span>Första versionen kom i början av 1990-talet</span></li>
<li><span>Bärare av struktur och innehåll</span></li>
</ul>
</div>
<img class="animate" src="images/html.png" alt="exempel på html">
</section>
<section id="webbutveckling-css" class="hero">
<div class="container animate">
<h1>CSS</h1>
</div>
</section>
<section id="webbutveckling-om-css" class="two-columns">
<div class="container animate">
<h1>CSS</h1>
<ul>
<li><span>Stilmallar</span></li>
<li><span>Enkelt språk, men många parametrar.</span></li>
<li><span>Första specifikationen kom i mitten av 1990-talet</span></li>
<!-- Fullt stöd, allmänt tillgängligt först 2000 -->
<li><span>Beskriver sådant som färg, form och layout</span></li>
</ul>
</div>
<img class="animate" src="images/css.png" alt="exempel på css">
</section>
<section id="webbutveckling-js" class="hero">
<div class="container animate">
<h1>Javascript</h1>
</div>
</section>
<section id="webbutveckling-om-js" class="two-columns">
<div class="container animate">
<h1>Javascript</h1>
<ul>
<li><span>Fullvärdigt programmeringsspråk</span></li>
<li><span>Första versionen kom 1995.</span></li>
<!-- Det moderna, standardiserade javascript vi har idag debuterade 2009 -->
<li><span>Ger möjlighet till interaktivitet, reaktivitet, funktionalitet etc</span></li>
</ul>
</div>
<img class="animate" src="images/javascript.png" alt="exempel på javascript">
</section>
<section id="webbutveckling-flow" class="two-columns">
<div class="container">
<h1>Inläsning av en webbsida:</h1>
</div>
<img class="animate" src="images/webbapp.png" alt="webbapp dokumentflöde">
</section>
<section id="slut" class="splash">
<div class="container">
<h6>Länk till presentationen:</h6>
<img class="animate" src="images/qr.png">
</div>
</section>
</body>
</html>