Docker for electrical engineers - Meetup Ljubljana
view | history | commit | commitdiff
Samo Penic
2018-12-01 f3a7e0f6dd31d45c36f20a413cbfb74dc9cd3ac2
commit | author | age
e78ca8 1 <html lang="en">
SP 2 <head>
3     <meta charset="utf-8" />
4     <meta name="viewport" content="width=1024" />
5     <meta name="apple-mobile-web-app-capable" content="yes" />
6     <title>Hardware Meetup :: Sputnik, 29.11.2018</title>
7     
8     <meta name="description" content="Short presentation of Docker.io for electrical engineers. This presentation is based on impress.js default demo presentation" />
9     <meta name="author" content="Samo Penic" />
10
11     <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" />
12
13     <link href="impress.js/css/impress-demo.css" rel="stylesheet" />
14     
15     <link rel="shortcut icon" href="favicon.png" />
16     <link rel="apple-touch-icon" href="apple-touch-icon.png" />
17 </head>
18
19 <body class="impress-not-supported">
20
21 <div class="fallback-message">
22     <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>
23     <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
24 </div>
25
26 <div id="impress">
27
28     <!--
29         
30         Here is where interesting thing start to happen.
31         
32         Each step of the presentation should be an element inside the `#impress` with a class name
33         of `step`. These step elements are positioned, rotated and scaled by impress.js, and
34         the 'camera' shows them on each step of the presentation.
35         
36         Positioning information is passed through data attributes.
37         
38         In the example below we only specify x and y position of the step element with `data-x="-1000"`
39         and `data-y="-1500"` attributes. This means that **the center** of the element (yes, the center)
40         will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
41         
42         It will not be rotated or scaled.
43         
44         --------
45         Plugins: For first slide, set the autoplay time to a custom 10 seconds.
46         
47     -->
48     <div id="naslovnica" class="step slide" data-x="-1000" data-y="-1500">
49     <h1>Hardware Meetup - Sputnik, 29. november 2018</h1>
50         <q><b>Docker</b> v elektrotehniški delavnici</q><br />
51
52     <p class="center"> Kaj so "kontejnerji" in kako jih uporabimo...</p><br />
53
54     <img src="images/docker-logo.png" style="width:800px;">
55     <p class="footnote">Samo Penič</p>
56     </div>
57
58     <!--
59         
60         The `id` attribute of the step element is used to identify it in the URL, but it's optional.
61         If it is not defined, it will get a default value of `step-N` where N is a number of slide.
62         
63         So in the example below it'll be `step-2`.
64         
65         The hash part of the url when this step is active will be `#/step-2`.
66         
67         You can also use `#step-2` in a link, to point directly to this particular step.
68         
69         Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
70         Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
71         
72     -->
73     <div class="step slide vsebina" data-x="-250" data-y="-1250" data-z="1500">
74     <h1 class="naslov">O meni...</h1>
75     <img class="samo" src="images/Samo1.png">
76     
77     <ul>
78     <li> Elektronik in "ljubiteljski" odprtokodnik</li>
79     <li> Asistent na Fakulteti za elektrotehniko vodim vaje iz predmetov OET</li>
80     <li> Od leta 2016 sodelujem pri izvajanju obštudijske dejavnosti <b>Praktični primeri uporabe odprte kode</b></li>
81     <li> Programer entuzijast </li>
82     </ul>
83     
84     </div>
85
86     <div class="step slide vsebina" data-x="0" data-y="-1500" data-z="0">
87         <h1 class="naslov">Kaj so kontejnerji?</h1>
88
89     <p class="">Kontejner (vsebnik, zabojnik) je oblika enkapsulacije aplikacij</p>
90     
91     <img src="images/container-app.jpg" style="width:800px;">    
92         
93     <p>Zapiranje applikacij v kontejnerje je nekje med popolno virtualizacijo in zagonom aplikacije v gostiteljevem okolju.</p>
94     </div>
95
96     <div class="step slide vsebina" data-x="1000" data-y="-750" data-rotate="90">
97         <h1 >Razlika med kontejnerizacijo in virtualizacijo (1)</h1>
98
99     <p class="center" style="margin-top:20px;">Virtualizacija
100     
101     <img src="images/virtualization.png" style="width:600px;"></p>    
102         
103     </div>
104
105
106     <div class="step slide vsebina" data-x="0" data-y="0" data-rotate="180">
107         <h1 >Razlika med kontejnerizacijo in virtualizacijo (2)</h1>
108
109     <p class="center" style="margin-top:20px;">Kontejnerizacija
110     
111     <img src="images/containerization.png" style="width:600px;"></p>    
112         
113     </div>
114
115     <div class="step slide" data-x="-1000" data-y="0" data-rotate="180">
116         <h1 >Primerjava kontejnerizacije in virtualizacije</h1>
117
118  <table style="width:100%; margin-top:100px;">
119   <tr>
120     <th style="border-bottom: 3px solid #000; padding-bottom:5px;"><b>Zagon v gostitelju<b></th>
121     <th style="border-bottom: 3px solid #000;padding-bottom:5px;"><b>Zagon v kontejnerju<b></th>
122     <th style="border-bottom: 3px solid #000; padding-bottom:5px;"><b>Zagon v VM<b></th>
123   </tr>
124   <tr style="border-bottom: 1px solid #000; padding-bottom:5px;">
125     <td>Ločitev spominskega prostora</td>
126     <td>Ločitev spominskega prostora</td>
127     <td>Ločitev spominskega prostora</td>
128   </tr>
129   <tr style="border-bottom: 1px solid #000; padding-top:15px;">
130     <td>Ni ločitve datotečnega prostora</td>
131     <td>Ločitev datotečnega prostora</td>
132     <td>Ločitev datotečnega prostora</td>
133   </tr>
134  <tr style="border-bottom: 1px solid #000; padding-bottom:5px;">
135     <td>Skupen operacijski sistem</td>
136     <td>Skupen operacijski sistem</td>
137     <td>Ločen operacijski sistem</td>
138   </tr>
139 </table> 
140     </div>
141
4ecb3e 142
SP 143     <div class="step" data-x="-1000" data-y="0" data-z="-500" data-rotate="180" data-scale="1" data-autoplay="1">
144         <p class="center"><img src="images/container-open.jpeg" style="width:800px;"></p>
145
146     </div>
147
e78ca8 148     <div class="step" data-x="-1000" data-y="0" data-z="-1500" data-rotate="180" data-scale="1">
SP 149         <h1>Samo ločitev datotečnega sistema?</h1>
150
151     <div class="tiny">
152     <p>debbootstrap stable containerfs/ http://deb.debian.org/debian</p>
153     <p>mount --bind containerfs containerfs</p>
154     <p>mount --make-private containderfs</p>
155     <p>cd containerfs</p>
156     <p>mount -t proc none proc</p>
157     <p>mount -t sysfs none sysfs</p>
158     <p>mount -t tmpfs none tmpfs</p>
159     <p>mount -t tmpfs none ram</p>
160     <p>pivot_root . mnt</p>
161     <p>umount -l mnt</p>
162     <p>exec bash</p>
163     </div>
164     </div>
165
166
167     <div class="step slide" data-x="-1000" data-y="-750" data-z="0" data-rotate="360">
4ecb3e 168         <h1 style="padding-left:50px;padding-bottom:100px;">Kako uporabljamo Docker?</h1>
e78ca8 169         <p class="center"><img src="images/architecture.svg.png" style="width:800px;"></p>
SP 170         
171     </div>
172
173     <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">
4ecb3e 174     <h1>Datotečni sistem AuFS v plasteh</h1>
e78ca8 175         <p class="center"><img src="images/layers.png" class="center" style="width:600px;"></p>
SP 176     </div>
4ecb3e 177
e78ca8 178     
SP 179
180     <div class="step slide vsebina" data-x="0" data-y="-750" data-z="0" data-rotate="360">
181         <h1>Prvi (p)okus Dockerja</h1>
182
183     <q class="center">Demo ?</q>
184         <p class="center"><img src="images/broken.jpg" class="center"></p>
185         
186     </div>
187
188         <div class="step slide vsebina" data-x="-1500" data-y="-1000" data-z="1400" data-rotate="360">
189         <h1>Kje uporabiti Docker v elektroniki?</h1>
190
191     
192         <ul style="padding-top:100px;">
193     <li> Namestitev "cross-compiler"-jev</li>
194     <li> Distribucija namenskih aplikacij za komunikacijo s strojno opremo</li>
195     <li> Distribucija zapletenih orodij za razvoj strojne opreme (Problem: GUI)</li>
196     <li> Distribucija spletnih orodij </li>
197     <li> Upravljanje z verzijami orodij</li>
198     <li> Docker v vgrajenih sistemih (???)</li>
199     </ul>
200     
c49abf 201     <img style="position:relative;right:-500px;top:-150px;width:400px;" src="images/container-3d.png">
SP 202         
e78ca8 203     </div>
SP 204
205     <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"> -->
206     <h1>Distribucija slik na https://hub.docker.com</h1>
207          <p class="center" style="padding-top:100px;"><img src="images/hub.png" class="center" style="width:800px;"></p>
208
209     </div>
210
211
212         <div class="step slide vsebina" data-x="-1500" data-y="500" data-z="1400" data-rotate="360">
213         <h1>Kako naprej?</h1>
214
215     
216         <ul style="padding-top:100px;">
217     <li> docker-compose: orodje za upravljanje s kontejnerji</li>
218     <li> Kubernetes: automatizacija, upravljanje aplikacij v kontejnerjih</li>
219     <li> Integracija Dockerja v obstoječa IDE orodja (primer PyCharm)</li>
220     </ul>
4ecb3e 221          <p class="center" style="padding-top:10px;"><img src="images/1*k8n7Jx9UaLRAxum9HMp8nQ.png" class="center" style="width:500px;"></p>
e78ca8 222     
SP 223     </div>
224
225
226     <div id="title" class="step" data-x="0" data-y="0" data-z="5500" data-scale="2">
4ecb3e 227         <span class="try">hvala Aljažu in Andreju ter  </span>
f3a7e0 228         <h1>1ozfactory</h1>
4ecb3e 229             <span class="footnote" style="position:relative;left:-80px;top:60px">za povabilo in organizacijo</span>
e78ca8 230     </div>
SP 231
232     <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
233     </div>
234
235 </div>
236
237 <div id="impress-toolbar"></div>
238
239 <div class="hint">
240     <p>Use a spacebar or arrow keys to navigate. <br/>
241        Press 'P' to launch speaker console.</p>
242 </div>
243 <script>
244 if ("ontouchstart" in document.documentElement) { 
245     document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
246 }
247 </script>
248
249 <script src="impress.js/js/impress.js"></script>
250 <script>impress().init();</script>
251
252
253 </body>
254 </html>
255