| 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 | ||
| 142 | <div class="step" data-x="-1000" data-y="0" data-z="-1500" data-rotate="180" data-scale="1"> | |
| 143 | <h1>Samo ločitev datotečnega sistema?</h1> | |
| 144 | ||
| 145 | <div class="tiny"> | |
| 146 | <p>debbootstrap stable containerfs/ http://deb.debian.org/debian</p> | |
| 147 | <p>mount --bind containerfs containerfs</p> | |
| 148 | <p>mount --make-private containderfs</p> | |
| 149 | <p>cd containerfs</p> | |
| 150 | <p>mount -t proc none proc</p> | |
| 151 | <p>mount -t sysfs none sysfs</p> | |
| 152 | <p>mount -t tmpfs none tmpfs</p> | |
| 153 | <p>mount -t tmpfs none ram</p> | |
| 154 | <p>pivot_root . mnt</p> | |
| 155 | <p>umount -l mnt</p> | |
| 156 | <p>exec bash</p> | |
| 157 | </div> | |
| 158 | </div> | |
| 159 | ||
| 160 | ||
| 161 | <div class="step slide" data-x="-1000" data-y="-750" data-z="0" data-rotate="360"> | |
| 162 | <h1 style="padding-left:50px;padding-bottom:100px;">Kako deluje Docker?</h1> | |
| 163 | <p class="center"><img src="images/architecture.svg.png" style="width:800px;"></p> | |
| 164 | ||
| 165 | </div> | |
| 166 | ||
| 167 | <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"> | |
| 168 | <h1>Datotečni sistem v plasteh</h1> | |
| 169 | <p class="center"><img src="images/layers.png" class="center" style="width:600px;"></p> | |
| 170 | ||
| 171 | </div> | |
| 172 | ||
| 173 | ||
| 174 | <div class="step slide vsebina" data-x="0" data-y="-750" data-z="0" data-rotate="360"> | |
| 175 | <h1>Prvi (p)okus Dockerja</h1> | |
| 176 | ||
| 177 | <q class="center">Demo ?</q> | |
| 178 | <p class="center"><img src="images/broken.jpg" class="center"></p> | |
| 179 | ||
| 180 | </div> | |
| 181 | ||
| 182 | <div class="step slide vsebina" data-x="-1500" data-y="-1000" data-z="1400" data-rotate="360"> | |
| 183 | <h1>Kje uporabiti Docker v elektroniki?</h1> | |
| 184 | ||
| 185 | ||
| 186 | <ul style="padding-top:100px;"> | |
| 187 | <li> Namestitev "cross-compiler"-jev</li> | |
| 188 | <li> Distribucija namenskih aplikacij za komunikacijo s strojno opremo</li> | |
| 189 | <li> Distribucija zapletenih orodij za razvoj strojne opreme (Problem: GUI)</li> | |
| 190 | <li> Distribucija spletnih orodij </li> | |
| 191 | <li> Upravljanje z verzijami orodij</li> | |
| 192 | <li> Docker v vgrajenih sistemih (???)</li> | |
| 193 | </ul> | |
| 194 | ||
| 195 | </div> | |
| 196 | ||
| 197 | <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"> --> | |
| 198 | <h1>Distribucija slik na https://hub.docker.com</h1> | |
| 199 | <p class="center" style="padding-top:100px;"><img src="images/hub.png" class="center" style="width:800px;"></p> | |
| 200 | ||
| 201 | </div> | |
| 202 | ||
| 203 | ||
| 204 | <div class="step slide vsebina" data-x="-1500" data-y="500" data-z="1400" data-rotate="360"> | |
| 205 | <h1>Kako naprej?</h1> | |
| 206 | ||
| 207 | ||
| 208 | <ul style="padding-top:100px;"> | |
| 209 | <li> docker-compose: orodje za upravljanje s kontejnerji</li> | |
| 210 | <li> Kubernetes: automatizacija, upravljanje aplikacij v kontejnerjih</li> | |
| 211 | <li> Integracija Dockerja v obstoječa IDE orodja (primer PyCharm)</li> | |
| 212 | </ul> | |
| 213 | ||
| 214 | </div> | |
| 215 | ||
| 216 | ||
| 217 | <div id="title" class="step" data-x="0" data-y="0" data-z="5500" data-scale="2"> | |
| 218 | <span class="try">hvala organizatorjema Aljažu ter </span> | |
| 219 | <h1>1oz Factory</h1> | |
| 220 | <span class="footnote">za organizacijo in povabilo</span> | |
| 221 | </div> | |
| 222 | ||
| 223 | <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10"> | |
| 224 | </div> | |
| 225 | ||
| 226 | </div> | |
| 227 | ||
| 228 | <div id="impress-toolbar"></div> | |
| 229 | ||
| 230 | <div class="hint"> | |
| 231 | <p>Use a spacebar or arrow keys to navigate. <br/> | |
| 232 | Press 'P' to launch speaker console.</p> | |
| 233 | </div> | |
| 234 | <script> | |
| 235 | if ("ontouchstart" in document.documentElement) { | |
| 236 | document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>"; | |
| 237 | } | |
| 238 | </script> | |
| 239 | ||
| 240 | <script src="impress.js/js/impress.js"></script> | |
| 241 | <script>impress().init();</script> | |
| 242 | ||
| 243 | ||
| 244 | </body> | |
| 245 | </html> | |
| 246 | ||
