-
Notifications
You must be signed in to change notification settings - Fork 51
/
Copy pathdesign-objectives.html
411 lines (329 loc) · 18.2 KB
/
design-objectives.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
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prinzipien des Software Engineerings</title>
<link rel="stylesheet" href="../../slides/css/reveal.css">
<link rel="stylesheet" href="../../slides/css/theme/unibas.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="../../slides/lib/css/zenburn.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? '../../slides/css/print/pdf.css' : '../../slides/css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="center">
<div class="titleblock">
<p>
<img class="plain" src="../../slides/images/uni-basel-logo.png" style="width:15%;float:left;display:block" />
</p>
<h1 style="clear:both;margin-top:20%">
Einführung in das Softwaredesign
</h1>
<h3>
Marcel Lüthi <br> Departement Mathematik und Informatik
</h3>
</div>
<!--
Herzlich Willkommen zu diesem Screencast. Dieser wird uns in das Thema Softwaredesign einführen, welches uns
die nächsten Wochen beschäftigen wird.
-->
</section>
<section>
<h1> Was ist Design?</h1>
Ästhetik ist nicht primär erste Aufgabe!
<figure>
<img src="../../slides/images/rex.jpg" style="width:50%" class="plain"/>
<figcaption style="font-size:xx-small">By Original: Peter Wiegel Cropped by Philipp.b, CC BY-SA 3.0</figcaption>
</figure>
<!--
Die erste Frage die wir uns stellen ist, was ist denn überhaupt ein Design.
Häufig denkt man bei design zuerst an Ästhetik. Die Ästhetik ist aber nicht das wichtigste
Ziel. Es geht beim Design vor allem darum, dass das Produkt die funktionale Anforderung
gut erfüllt. Was zum Beispiel diesen Sparschäler zu einem schweizer Designklassiker gemacht hat, ist nicht
unbedingt das Aussehen, sondern das er einfach seine Aufgabe, nämlich Kartoffeln zu schälen, unglaublich gut löst.
-->
</section>
<section>
<h1> Was ist Design? </h1>
<blockquote>Formgebende und funktionale Gestaltgebung eines Produkts.</blockquote>
<ul>
<li>Strukturiert ein Artefakt</li>
<li>Zerlegen eines Systems in (einfachere) Komponenten</li>
<ul>
<li> Zuweisen von Verantwortlichkeiten </li>
<li> Sicherstellen, dass Gesamtsystem Anforderungen erfüllt </li>
</ul>
</ul>
<!--
Design kann man ganz allgemein als Formgebende und funktionale Gestaltung eines Produkts definieren.
Entsprechend dem Prinzip der Trennung der Verantwortlichkeiten, soll das design
einem Artefakt struktur geben und das ganze System es in sinnvolle Teile zerlegen.
Es sollte dann möglich sein, jedem der Teile eine Verantwortlichkeit zuzuweisen.
Wir müssen aber dabei sicherstellen, dass nicht nur die Teile, sondern vor allem auch das Gesamtsystem die Anforderungen
erfüllt.
-->
</section>
<section>
<h1> Designbeispiel Architektur</h1>
Entwurf eines Einkaufszentrums
<p style="margin-top:1cm "></p>
<div style="float:left; width:50%">
<ul>
Teile:
<ul>
<li> Verkaufsfläche</li>
<li> Heizungs- und Lüftungssystem </li>
<li> Verkabelung </li>
<li> Parkplatz </li>
<li> ... </li>
</ul>
</ul>
</div>
<div style="float:right; width:50%">
<figure>
<img src="../../slides/images/mall.jpg" style="width:100%" class="plain"/>
<figcaption style="font-size:xx-small">By Citymalljo - Own work, CC BY-SA 4.0 <br/> https://commons.wikimedia.org/w/index.php?curid=38147686</figcaption>
</figure>
</div>
<!--
Jedes Produkt, egal ob einfach oder kompliziert, muss designed werden. Als erstes Beispiel schauen wir uns den
Entwurf eines Einkaufszentrum an. Eine möglich Aufteilung wäre hier zum Beispiel die Trennung in Verkaufsfläche,
Heizungs und Lüftungssystem, die Verkabelung, der Parkplatz. Wir sehen, dass es für jeden dieser Teile Spezialisten
gibt, die diese Verantwortung übernehmen können. Aber nur wenn die Teile richtig zusammenspielen, wird am Ende ein
erfolgreiches Einkaufszentrum entstehen, in dem die Kunden gerne einkaufen.
-->
</section>
<section>
<h1> Designbeispiel Lehre</h1>
Entwurf einer Vorlesung
<p style="margin-top:1cm "></p>
<div style="float:left; width:50%">
<ul>
Teile:
<ul>
<li> Vorlesungen</li>
<li> Übungen </li>
<li> Leistungsnachweise </li>
<li> ... </li>
</ul>
</ul>
</div>
<div style="float:right; width:50%">
<figure>
<img src="../../slides/images/advance-organizer-1.png" style="width:100%" class="plain"/>
</figure>
</div>
<!--
Auch eine Lehrveranstaltung muss Designed werden. Die Teile sind ziemlich offensichtlich. Wir können zum Beispiel die
Vorlesung, Übung und die Prüfung als Teil der Vorlesung anschauen, die sich natürlich trennen lassen.
Jedoch ist es auch hier so, dass die Teile natürlich aufeinander abgestimmt werden müssen, damit am Ende eine
erfolgreiche Vorlesung entsteht.
Wir sehen aber auch, dass dies nicht die einzige Aufteilung ist. Zum Beispiel können wir die Vorlesung auch in
verschiedene Themengebiete unterteilen, wie in unserem Beispiel das Produkt Software und
der Softwareentwicklungsprozess.
Die vielen Möglichkeiten ein Artefakt zu strukturieren, machen das Design zu einem sehr kreativen aber auch
schwierigen Prozess.
-->
</section>
<section>
<h1> Design in Software Engineering </h1>
<div style="text-align:left">
<p> Zwei Bedeutungen: </p>
<ol>
<li> Schritt zwischen Anforderungsanalyse und Implementation </li>
<ul> Erstellen der Softwarearchitektur / Design </ul>
<li> Strukturierung eines Artefakts </li>
<ul>
<li> Design einer Klasse in einem OO-System </li>
<li> Design des Anforderungsdokuments </li>
<li> ... </li>
</ul>
</ol>
</div>
<blockquote> Jedes Artefakt muss strukturiert werden </blockquote>
<!--
Wenn wir in Software Engineering über Design sprechen, können wir damit zwei verwandte, aber doch unterschiedliche
Dinge meinen. Zum einen ist der Designschritt der Schritt, den wir im Entwicklungsprozess nachdem wir die
Anforderungen erhoben haben, und bevor wir mit der Implementation beginnen machen.
Die Zweite Bedeutung ist die Aktivität, ein Artefakt zu strukturieren. Zum Beispiel muss in der OO Programmierung
die Funktionalität in Klassen eingeteilt werden. Aber es sind nicht nur die Software, die strukturiert werden muss,
sondern auch zum Beispiel das Anforderungsdokument. Jedes Artefakt, dass wir produzieren muss strukturiert werden.
-->
</section>
<section>
<h1>Module</h1>
<blockquote>
Modul: Wohldefinierter Teil einer Software
</blockquote>
<img src="../../slides/images/modul.png" style="width:60%" class="plain">
<!--
Bei Softwaredesign sprechen wir häufig von Modulen. Damit meinen wir einfach einen wohldefinierten Teil einer
Software. Der Begriff Modul kann zum Beispiel eine Funktion, eine Klasse oder
auch eine grössere Einheiten von Software wie zum Beispiel ein Paket (in Java) bezeichnen.
Das Modul selbst kann man sich als Black Box vorstellen, welches verschiedene Funktionalitäten via einer wohldefinierten Schnittstelle
zur Verfügung stellt. Das hier gezeichnete Modul X, stellt die Funktionalität A, B, und C zur Verfügung.
-->
</section>
<section>
<h1> Softwaredesign </h1>
<blockquote> Softwaredesign: Aufteilung eines Systems in Module</blockquote>
<img src="../../slides/images/modul-graph-1.png" style="width:80%" class="plain">
<!--
<ul>
<li>Ouput: Designdokument </li>
<ul>
<li>Beschreibt einzelne Module </li>
<li> Definiert und beschreibt Schnittstellen </li>
</ul>
</ul>
-->
<!--
Beim Softwaredesign geht es also um die Aufteilung eines Systems in Module.
In diesem Beispiel hier haben wir ein Modul X, welches die Funktionalität A und B zur Verfügung stellt,
sowie ein Modul Y und Z, welches die Funktionalität C respektive D zur Verfügung stellt.
Das Modul X, verwendet hierbei die Funktionalität von Y und Z. Das wird in dieser einfachen Notation durch
die Pfeile dargestellt.
-->
</section>
<section>
<h1>Softwarearchitektur und Softwaredesign</h1>
<ul>
<li><mark class="highlight">Softwarearchitektur: </mark>Struktur der Module</li>
<li><mark class="highlight">Moduldesign: </mark>Entwurf individueller Module </li>
</ul>
<div class="fragment" >
<img src="../../slides/images/modul-graph-2.png" style="width:50%" class="plain">
<div class="framebox">
Strikte Trennung Design/Architektur nicht möglich.
<ul><li>Module können selbst aus Modulen bestehen.</li></ul>
</div>
</div>
<!--
Es ist üblich, dass man zwischen zwei Arten von Design unterscheidet. Einerseits designed man die
grobe Struktur der Module. Das wird dann als die Softwarearchitektur bezeichnet.
Das Design der individuellen Module nennt man dann Moduldesign, und manchmal auch einfach Design.
Es ist aber wichtig sich klar zu machen, dass eine strikte Trennung in Architektur und Design nicht möglich ist.
So können Beispielsweise Module selbst wieder aus Modulen bestehen.
-->
</section>
<section>
<h1>Ziel eines Designs </h1>
<ul>
<li>Struktur so festzulegen, dass hohe Software-qualität erreicht werden kann.</li>
</ul>
<div style="text-align:left;margin-top:1cm" class="framebox">
<p style="text-align:left">Wichtigster Grundsatz: <mark class="highlight"> Design for change </mark></p>
<ul><li> Wahrscheinliche Änderungen sollten einfach zu implementieren sein. </li></ul>
</div>
<!--
Das primäre Ziel eines Designs in Software Engineering, ist, dass man eine Struktur für das
System schafft, so dass eine möglichst hohe Softwarequalität erreicht werden kann. Insbesondere sollte man
bei der Aufteilung darauf achten, dass das System wartbar bleibt, d.h. dass die Änderungen, die man in
Zukunft wahrscheinlich vornehmen muss, auch einfach zu implementieren sind.
-->
</section>
</section>
<section>
<blockquote>
<p style="text-align:left">
"There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies,
and the other way is to make it so complicated that there are no obvious deficiencies. The first
method is far more difficult."</p>
<footer> Tony Hoare - 1980</footer>
</blockquote>
<!--
Ich möchte diese Einführung mit einem Zitat eines Berühmten Softwareingeneurs, nämlich Tony Hoare abschliessen,
was Sie nun selbst kurz lesen können.
Im Kern sagt dieses Zitat, dass wir ein möglichst einfaches Design finden sollten, so dass man
direkt beurteilen kann, ob es im Design Fehler hat. Diese Einfachheit hinzubekommen ist die grosse Kunst beim
Software Design und sollte immer das Ziel sein, auch wenn wir es selten in perfektion erreichen können.
-->
</section>
<!--
<section>
<h3> Unit tests </h3>
<ul>
<li>Was ist ein Software Design?</li>
<li>Was ist das Ziel eines Software Designs?</li>
<li>Was ist eine Softwarearchitektur?</li>
<li>Weshalb lässt sich Architektur und Moduldesign nicht strikt trennen?</li>
<li>Was sind typische Gründe für Änderungen?</li>
</ul>
</section>
-->
</div>
</div>
<script src="../../slides/lib/js/head.min.js"></script>
<script src="../../slides/js/reveal.js"></script>
<script>
file: ///home/luetma00/documents/teaching/sweng/theory/lecture1/admin.html#/1
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
center: false,
/*chalkboard: {
src: "chalkboard.json",
readOnly: undefined,
transition: 800,
theme: "whiteboard",
//toggleChalkboardButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
//toggleNotesButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
// configuration options for notes canvas and chalkboard
color: ['rgba(0,0,255,1)', 'rgba(255,255,255,0.5)'],
background: ['rgba(127,127,127,.1)', '../../slides/plugin/chalkboard/img/whiteboard.png'],
pen: ['url(../../slides/plugin/chalkboard/img/boardmarker.png), auto', 'url(../../slides/plugin/chalkboard/img/boardmarker.png), auto'],
},*/
dependencies: [{
src: '../../slides/plugin/markdown/marked.js'
},
{ src: '../../slides/plugin/mouse-pointer/mouse-pointer.js', async: true },
{
src: '../../slides/plugin/markdown/markdown.js'
},
{
src: '../../slides/plugin/notes/notes.js',
async: true
},
/* {
src: '../../slides/plugin/chalkboard/chalkboard.js'
},*/
{
src: '../../slides/plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
}
],
keyboard: {
67: function () {
RevealChalkboard.toggleNotesCanvas()
}, // toggle notes canvas when 'c' is pressed
66: function () {
RevealChalkboard.toggleChalkboard()
}, // toggle chalkboard when 'b' is pressed
46: function () {
RevealChalkboard.clear()
}, // clear chalkboard when 'DEL' is pressed
8: function () {
RevealChalkboard.reset()
}, // reset chalkboard data on current slide when 'BACKSPACE' is pressed
68: function () {
RevealChalkboard.download()
}, // downlad recorded chalkboard drawing when 'd' is pressed
},
});
</script>
</body>
</html>