Docker for electrical engineers - Meetup Ljubljana
Samo Penic
2018-12-01 7cf51b48e409bd667bfbacd996ae35e256b22c47
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
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Hardware Meetup :: Sputnik, 29.11.2018</title>
    
    <meta name="description" content="Short presentation of Docker.io for electrical engineers. This presentation is based on impress.js default demo presentation" />
    <meta name="author" content="Samo Penic" />
 
    <link href="//fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
 
    <link href="impress.js/css/impress-demo.css" rel="stylesheet" />
    
    <link rel="shortcut icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
 
<body class="impress-not-supported">
 
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
 
<div id="impress">
 
    <!--
        
        Here is where interesting thing start to happen.
        
        Each step of the presentation should be an element inside the `#impress` with a class name
        of `step`. These step elements are positioned, rotated and scaled by impress.js, and
        the 'camera' shows them on each step of the presentation.
        
        Positioning information is passed through data attributes.
        
        In the example below we only specify x and y position of the step element with `data-x="-1000"`
        and `data-y="-1500"` attributes. This means that **the center** of the element (yes, the center)
        will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
        
        It will not be rotated or scaled.
        
        --------
        Plugins: For first slide, set the autoplay time to a custom 10 seconds.
        
    -->
    <div id="naslovnica" class="step slide" data-x="-1000" data-y="-1500">
    <h1>Hardware Meetup - Sputnik, 29. november 2018</h1>
        <q><b>Docker</b> v elektrotehniški delavnici</q><br />
 
    <p class="center"> Kaj so "kontejnerji" in kako jih uporabimo...</p><br />
 
    <img src="images/docker-logo.png" style="width:800px;">
    <p class="footnote">Samo Penič</p>
    </div>
 
    <!--
        
        The `id` attribute of the step element is used to identify it in the URL, but it's optional.
        If it is not defined, it will get a default value of `step-N` where N is a number of slide.
        
        So in the example below it'll be `step-2`.
        
        The hash part of the url when this step is active will be `#/step-2`.
        
        You can also use `#step-2` in a link, to point directly to this particular step.
        
        Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
        Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
        
    -->
    <div class="step slide vsebina" data-x="-250" data-y="-1250" data-z="1500">
    <h1 class="naslov">O meni...</h1>
    <img class="samo" src="images/Samo1.png">
    
    <ul>
    <li> Elektronik in "ljubiteljski" odprtokodnik</li>
    <li> Asistent na Fakulteti za elektrotehniko vodim vaje iz predmetov OET</li>
    <li> Od leta 2016 sodelujem pri izvajanju obštudijske dejavnosti <b>Praktični primeri uporabe odprte kode</b></li>
    <li> Programer entuzijast </li>
    </ul>
    
    </div>
 
    <div class="step slide vsebina" data-x="0" data-y="-1500" data-z="0">
        <h1 class="naslov">Kaj so kontejnerji?</h1>
 
    <p class="">Kontejner (vsebnik, zabojnik) je oblika enkapsulacije aplikacij</p>
    
    <img src="images/container-app.jpg" style="width:800px;">    
        
    <p>Zapiranje applikacij v kontejnerje je nekje med popolno virtualizacijo in zagonom aplikacije v gostiteljevem okolju.</p>
    </div>
 
    <div class="step slide vsebina" data-x="1000" data-y="-750" data-rotate="90">
        <h1 >Razlika med kontejnerizacijo in virtualizacijo (1)</h1>
 
    <p class="center" style="margin-top:20px;">Virtualizacija
    
    <img src="images/virtualization.png" style="width:600px;"></p>    
        
    </div>
 
 
    <div class="step slide vsebina" data-x="0" data-y="0" data-rotate="180">
        <h1 >Razlika med kontejnerizacijo in virtualizacijo (2)</h1>
 
    <p class="center" style="margin-top:20px;">Kontejnerizacija
    
    <img src="images/containerization.png" style="width:600px;"></p>    
        
    </div>
 
    <div class="step slide" data-x="-1000" data-y="0" data-rotate="180">
        <h1 >Primerjava kontejnerizacije in virtualizacije</h1>
 
 <table style="width:100%; margin-top:100px;">
  <tr>
    <th style="border-bottom: 3px solid #000; padding-bottom:5px;"><b>Zagon v gostitelju<b></th>
    <th style="border-bottom: 3px solid #000;padding-bottom:5px;"><b>Zagon v kontejnerju<b></th>
    <th style="border-bottom: 3px solid #000; padding-bottom:5px;"><b>Zagon v VM<b></th>
  </tr>
  <tr style="border-bottom: 1px solid #000; padding-bottom:5px;">
    <td>Ločitev spominskega prostora</td>
    <td>Ločitev spominskega prostora</td>
    <td>Ločitev spominskega prostora</td>
  </tr>
  <tr style="border-bottom: 1px solid #000; padding-top:15px;">
    <td>Ni ločitve datotečnega prostora</td>
    <td>Ločitev datotečnega prostora</td>
    <td>Ločitev datotečnega prostora</td>
  </tr>
 <tr style="border-bottom: 1px solid #000; padding-bottom:5px;">
    <td>Skupen operacijski sistem</td>
    <td>Skupen operacijski sistem</td>
    <td>Ločen operacijski sistem</td>
  </tr>
</table> 
    </div>
 
 
    <div class="step" data-x="-1000" data-y="0" data-z="-500" data-rotate="180" data-scale="1" data-autoplay="1">
        <p class="center"><img src="images/container-open.jpeg" style="width:800px;"></p>
 
    </div>
 
    <div class="step" data-x="-1000" data-y="0" data-z="-1500" data-rotate="180" data-scale="1">
        <h1>Samo ločitev datotečnega sistema?</h1>
 
    <div class="tiny">
    <p>debbootstrap stable containerfs/ http://deb.debian.org/debian</p>
    <p>mount --bind containerfs containerfs</p>
    <p>mount --make-private containderfs</p>
    <p>cd containerfs</p>
    <p>mount -t proc none proc</p>
    <p>mount -t sysfs none sysfs</p>
    <p>mount -t tmpfs none tmpfs</p>
    <p>mount -t tmpfs none ram</p>
    <p>pivot_root . mnt</p>
    <p>umount -l mnt</p>
    <p>exec bash</p>
    </div>
    </div>
 
 
    <div class="step slide" data-x="-1000" data-y="-750" data-z="0" data-rotate="360">
        <h1 style="padding-left:50px;padding-bottom:100px;">Kako uporabljamo Docker?</h1>
        <p class="center"><img src="images/architecture.svg.png" style="width:800px;"></p>
        
    </div>
 
    <div class="step slide" data-x="-1000" data-y="500" data-z="250" data-rotate="360" data-rotate-x="-90" data-rotate-y="0" data-scale="1">
    <h1>Datotečni sistem AuFS v plasteh</h1>
        <p class="center"><img src="images/layers.png" class="center" style="width:600px;"></p>
    </div>
 
    
 
    <div class="step slide vsebina" data-x="0" data-y="-750" data-z="0" data-rotate="360">
        <h1>Prvi (p)okus Dockerja</h1>
 
    <q class="center">Demo ?</q>
        <p class="center"><img src="images/broken.jpg" class="center"></p>
        
    </div>
 
        <div class="step slide vsebina" data-x="-1500" data-y="-1000" data-z="1400" data-rotate="360">
        <h1>Kje uporabiti Docker v elektroniki?</h1>
 
    
        <ul style="padding-top:100px;">
    <li> Namestitev "cross-compiler"-jev</li>
    <li> Distribucija namenskih aplikacij za komunikacijo s strojno opremo</li>
    <li> Distribucija zapletenih orodij za razvoj strojne opreme (Problem: GUI)</li>
    <li> Distribucija spletnih orodij </li>
    <li> Upravljanje z verzijami orodij</li>
    <li> Docker v vgrajenih sistemih (???)</li>
    </ul>
    
    <img style="position:relative;right:-500px;top:-150px;width:400px;" src="images/container-3d.png">
        
    </div>
 
    <div class="step slide" data-x="-1500" data-y="-250" data-rotate="360" > <!-- data-rotate-x="-90" data-rotate-y="0" data-z="1400" data-scale="1"> -->
    <h1>Distribucija slik na https://hub.docker.com</h1>
         <p class="center" style="padding-top:100px;"><img src="images/hub.png" class="center" style="width:800px;"></p>
 
    </div>
 
 
        <div class="step slide vsebina" data-x="-1500" data-y="500" data-z="1400" data-rotate="360">
        <h1>Kako naprej?</h1>
 
    
        <ul style="padding-top:100px;">
    <li> docker-compose: orodje za upravljanje s kontejnerji</li>
    <li> Kubernetes: automatizacija, upravljanje aplikacij v kontejnerjih</li>
    <li> Integracija Dockerja v obstoječa IDE orodja (primer PyCharm)</li>
    </ul>
         <p class="center" style="padding-top:10px;"><img src="images/1*k8n7Jx9UaLRAxum9HMp8nQ.png" class="center" style="width:500px;"></p>
    
    </div>
 
 
    <div id="title" class="step" data-x="0" data-y="0" data-z="5500" data-scale="2">
        <span class="try">hvala Aljažu in Andreju ter  </span>
        <h1>1ozfactory</h1>
            <span class="footnote" style="position:relative;left:-80px;top:60px">za povabilo in organizacijo</span>
    </div>
 
    <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
    </div>
 
</div>
 
<div id="impress-toolbar"></div>
 
<div class="hint">
    <p>Use a spacebar or arrow keys to navigate. <br/>
       Press 'P' to launch speaker console.</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
}
</script>
 
<script src="impress.js/js/impress.js"></script>
<script>impress().init();</script>
 
 
</body>
</html>