Add title reminders (top left corner) for all chapters
[rmll_2011.git] / slides.html
1 <!DOCTYPE html>
2
3 <meta charset="utf-8">
4 <title>lacie-nas.org RMLL 2011</title>
5
6 <!-- Your Slides -->
7 <!-- One section is one slide -->
8
9 <section class=title>
10     <!-- This is the first slide -->
11     <h1>lacie-nas.org</h1>
12     <footer>by Simon and Thomas <a href="http://lacie-nas.org">@lacie-nas.org</a></footer>
13 </section>
14
15 <section class=chapter>
16     <h1>What is a NAS ?</h1>
17 </section>
18 <section>
19     <h1>What is a NAS ?</h1>
20     <h2>A kind of desktop</h2>
21     <ul>
22         <li>without monitor
23         <li>without keyboard
24         <li>like a server in a tiny package
25     </ul>
26 </section>
27 <section>
28     <h1>What is a NAS ?</h1>
29     <h2>A remote storage</h2>
30     <ul>
31         <li>available through network protocols
32             <p>(NFS, Samba, Netatalk, DLNA, etc)
33         <li>additional services more or less useful
34             <p>(BitTorrent, web hosting, etc)
35     </ul>
36 </section>
37 <section>
38     <h1>What is a NAS ?</h1>
39     <h2>Cool devices for hardware user interface</h2>
40     <h2>(instead of keyboard / monitor)</h2>
41     <ul>
42         <li>buttons
43         <li>LEDs
44         <li>LCD
45     </ul>
46 </section>
47 <section>
48     <h1>What is a NAS ?</h1>
49     <h2>Various architectures</h2>
50     <ul>
51         <li>ARM
52         <li>MIPS
53         <li>PPC
54         <li>x86 more recently
55     </ul>
56 </section>
57 <section>
58     <h1>What is a NAS ?</h1>
59     <h2>Low cost</h2>
60     <ul>
61         <li>cheap hardware
62         <li>low power consumption
63         <li>firmwares are largely based on free software
64     </ul>
65 </section>
66
67 <section class=chapter>
68     <h1>Project Overview</h1>
69 </section>
70
71 <section>
72     <h1>Project Overview</h1>
73     <h2>Origins</h2>
74     <ul>
75         <li>lacie.com: non free hardware
76         <li>until 2009, no mainline support
77         <li>except for EDmini v2 (2008 Linux patch)
78             <p>by hobbyists: Albert Aribaud and Christopher Moore
79             <p>signed off by Marvell guys: Lennert Buytenhek and Nicolas Pitre
80         <li>discussions patch authors
81         <li>a framework was needed...
82     </ul>
83 </section>
84
85 <note>
86 == lacie.com ==
87 - non free hardware
88 - very limited sponsoring
89 </note>
90
91 <section>
92     <h1>Project Overview</h1>
93     <h2>What is not lacie-nas.org ?</h2>
94     <ul>
95         <li>after sales service for LaCie
96         <li>hack host for LaCie firmwares
97         <p>Some other projects (like nas-central.org) already does it well.
98     </ul>
99     <note>Often people comes and ask how to hack a LaCie NAS</note>
100 </section>
101
102 <section class=chapter>
103     <h1>Projects and targets</h1>
104 </section>
105
106 <section>
107     <h1>Projects and targets</h1>
108     <h2>Open/unlock hardware</h2>
109     <p>Provide boards specifications and pinout (JTAG, serial, GPIOS, etc...)</p>
110 </section>
111
112 <section>
113     <h1>Projects and targets</h1>
114     <h2>Provide mainline support</h2>
115     <ul>
116         <li>openocd
117         <li>U-Boot
118         <li>Linux
119     </ul>
120 </section>
121
122 <section>
123     <h1>Projects and targets</h1>
124     <h2>Provide NAS system tools</h2>
125     <p>Develop embedded generic modules for NASes:</p>
126     <ul>
127         <li>buttons: input_eventd
128         <li>GPIO LEDs: led_ctrl
129         <li>disk by slot: sd_alias
130         <li>buttons: ?
131         <li>GPIO debug: gpio_ctrl
132         <li>TODO: disk spin down utility
133         <li>TODO: FANs and hardware sensors (lm_sensor ?)
134         <li>TODO: provide a GNU/Debian package
135     </ul>
136 </section>
137
138 <section>
139     <h1>Projects and targets</h1>
140     <h2>Provide development services</h2>
141     <ul>
142         <li><a href="http://lacie-nas.org">wiki</a>
143         <li><a href="http://git.lacie-nas.org">git repositories</a>
144         <li><a href="http://sequanux.org/cgi-bin/mailman/listinfo/lacie-nas">Mailing List</a>
145         <li>IRC channel <a href="irc://irc.freenode.net/lacie-nas">#lacie-nas</a> @freenode.net
146         <li><a href="ftp://lacie-nas.org/">ftp</a>
147     </ul>
148 </section>
149
150 <section>
151     <h1>Projects and targets</h1>
152     <h2>Provide development/hacking tools</h2>
153     <ul>
154         <li><a href="http://lacie-nas.org/doku.php?id=clunc">clunc</a> (Client for LaCie U-Boot NetConsole)
155         <li><a href="http://git.lacie-nas.org/?p=miniroot.git;a=summary">miniroot</a>
156     </ul>
157 </section>
158
159 <section>
160     <h1>Projects and targets</h1>
161     <h2>Roadmap</h2>
162     <q>No roadmap, no deadlines, but rather tasks and priorities
163     <p>priorities: Linux (almost complete), U-Boot, Debian installer, 
164 </section>
165
166 <section class=chapter>
167     <h1>Free a NS2 demo !</h1>
168 </section>
169
170 <section>
171     <h1>Free a NS2 demo !</h1>
172     <h2>Take board control with clunc</h2>
173 </section>
174
175 <section>
176     <h1>Free a NS2 demo !</h1>
177     <h2>Install U-boot mainline</h2>
178     <p>LaCie U-Boot stock limitations (no saveenv)
179 </section>
180
181 <note>
182 Linux mainline submission
183   [ Free software and enterprise ]
184 </note>
185
186 <section>
187     <h1>Free a NS2 demo !</h1>
188     <h2>Startup an installation kernel+initramfs</h2>
189 </section>
190
191 <section>
192     <h1>Free a NS2 demo !</h1>
193     <h2>Install GNU/Debian ARM</h2>
194 </section>
195
196 <section>
197     <h1>Free a NS2 demo !</h1>
198     <h2>Use SSH and connect to the NS2 :)</h2>
199 </section>
200
201 <section class=chapter>
202     <h1>Perspectives</h1>
203 </section>
204
205 <section>
206     <h1>Perspectives</h1>
207     <h2>Network installation</h2>
208 </section>
209
210 <section>
211     <h1>Perspectives</h1>
212     <h2>Device Tree early adopter</h2>
213 </section>
214
215 <section>
216     <h1>Perspectives</h1>
217     <h2>Free distribution for NASes</h2>
218 <note>
219 - why Debian ?
220 - openwrt ?
221 - two ways: miniroot and rootfs copy or Debian way (Luc)
222 </note>
223 </section>
224
225 <section class=chapter>
226     <h1>Questions ?</h1>
227 </section>
228
229 <section class=chapter>
230     <h1>Thanks</h1>
231 </section>
232
233 <!-- Your Style -->
234 <!-- Define the style of you presentation -->
235
236 <!-- Maybe a font from http://www.google.com/webfonts ? -->
237 <!-- link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'-->
238 <style>
239   html { background-color: black; }
240   a { color: #FF0066; } a:hover {text-decoration: underline;}
241   footer { position: absolute; bottom: 50px; right: 50px; }
242   strong {color: #FF0066}
243   body {
244       font-family: 'Oswald', arial, serif;
245       background-color: white;
246       color: white;
247       font-size: 2em;
248       background: #1C1C1C;
249       background-image: -moz-radial-gradient(center 45deg, #333 0%, #1C1C1C 50%);
250       background-image: -moz-radial-gradient(center 45deg, #333 0%, #1C1C1C 50%);
251   }
252
253   note { display: none; }
254
255   /* Transition effect */
256   section {
257       -moz-transition: left 400ms linear 0s;
258       -webkit-transition: left 400ms linear 0s;
259       -o-transition: left 400ms linear 0s;
260       -ms-transition: left 400ms linear 0s;
261       transition: left 400ms linear 0s;
262   }
263   section { left: -150%; }
264   section[aria-selected] { left: 0; }
265   section[aria-selected] ~ section { left: +150% }
266
267   .title { background-color: black; }
268   .title h1 {
269       vertical-align: middle; margin: 0; text-align: center; display: block;
270       line-height: 400px;
271       font-size: 70px;
272   }
273
274   .chapter { background-color: black;}
275   .chapter h1 {
276       font-size: 50px;
277       line-height: 600px;
278       vertical-align: middle; margin: 0; text-align: center; display: block
279   }
280
281   h1 {
282       margin: 10px;
283       text-align: left;
284       font-size: 25px;
285       text-shadow: 0px -1px 0px #000;
286   }
287   h2 {
288       color: #FAE50B;
289       margin: 70px 0 0 0;
290       font-size: 40px;
291       text-align: center;
292   }
293   ul {
294       margin-top: 70px;
295       font-size: 35px;
296       text-align: left;
297       border-left: 4px solid white;
298       padding-left: 40px;
299       min-width: 310px;
300       margin-left: 50px;
301       display: inline-block;
302   }
303   li {
304       margin-top: 10px;
305   }
306   ul > li:first-child {
307       margin-top: 0;
308   }
309   q, p {
310       margin: 50px auto 0 auto;
311       text-align: left;
312       margin-left: 50px;
313   }
314   q:after {content: ""}
315   q:before {content: ""}
316   q {
317       display: block;
318       margin-top: 140px;
319   }
320   li p {
321       margin-top: 0;
322       font-size: 20px;
323       font-style: italic;
324   }
325   video {
326       position: absolute;
327       top: 210px;
328       width: 260px;
329       left: 445px;
330       box-shadow: 0 0 10px black;
331   }
332   #arrow {
333       position: absolute;
334       top: 165px;
335       left: 460px;
336       font-size: 100px;
337       color: white;
338
339   }
340   li {list-style-type: none}
341
342 </style>
343
344 <!-- {{{{ *****************  DZSlides CORE 2.0b1 *************************** -->
345 <!-- *********************************************************************** -->
346 <!-- *********************************************************************** -->
347 <!-- *********************************************************************** -->
348 <!-- *********************************************************************** -->
349
350 <!-- This block of code is not supposed to be edited, but if you want to change the behavior of the slides, feel free to hack it ;) -->
351
352 <!-- Default Style -->
353 <style>
354   * { margin: 0; padding: 0; }
355   details {display: none;}
356   body {
357     width: 800px; height: 600px;
358     margin-left: -400px; margin-top: -300px;
359     position: absolute; top: 50%; left: 50%;
360     overflow: hidden;
361   }
362   section {
363     position: absolute;
364     pointer-events: none;
365     width: 100%; height: 100%;
366   }
367   section[aria-selected] { pointer-events: auto;}
368   body {display: none}
369   body.loaded {display: block}
370 </style>
371
372 <script>
373   var friendWindows = [];
374   var idx = 1;
375   var slides;
376
377   /* main() */
378
379   window.onload = function() {
380     slides = document.querySelectorAll("body > section");
381     onhashchange();
382     setSlide();
383     document.body.className = "loaded";
384     onresize();
385   }
386
387   /* Handle keys */
388
389   window.onkeydown = function(e) {
390     // Don't intercept keyboard shortcuts
391     if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
392       return;
393     }
394     if ( e.keyCode == 37 // left arrow
395       || e.keyCode == 33 // page up
396     ) {
397       e.preventDefault();
398       back();
399     }
400     if ( e.keyCode == 39 // right arrow
401       || e.keyCode == 34 // page down
402     ) {
403       e.preventDefault();
404       forward();
405     }
406
407     if ( e.keyCode == 32) { // space
408         e.preventDefault();
409         toggleContent();
410     }
411   }
412
413   /* Adapt the size of the slides to the window */
414
415   window.onresize = function() {
416     var sx = document.body.clientWidth / window.innerWidth;
417     var sy = document.body.clientHeight / window.innerHeight;
418     var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
419     document.body.style.MozTransform = transform;
420     document.body.style.WebkitTransform = transform;
421     document.body.style.OTransform = transform;
422     document.body.style.msTransform = transform;
423     document.body.style.transform = transform;
424   }
425   function getDetails(idx) {
426     var s = document.querySelector("section:nth-of-type("+ idx +")");
427     var d = s.querySelector("details");
428     return d?d.innerHTML:"";
429   }
430   window.onmessage = function(e) {
431     msg = e.data;
432     win = e.source;
433     if (msg === "register") {
434       friendWindows.push(win);
435       win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), document.location);
436       win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
437       return;
438     }
439     if (msg === "back") back();
440     if (msg === "forward") forward();
441     if (msg === "toggleContent") toggleContent();
442     // setSlide(42)
443     var r = /setSlide\((\d+)\)/.exec(msg);
444     if (r) {
445         idx = r[1];
446         setSlide();
447     }
448   }
449
450   /* If a Video is present in this new slide, play it.
451      If a Video is present in the previous slide, stop it. */
452
453   function toggleContent() {
454     var s = document.querySelector("section[aria-selected]");
455     if (s) {
456         var video = s.querySelector("video");
457         if (video) {
458             if (video.ended || video.paused) {
459                 video.play();
460             } else {
461                 video.pause();
462             }
463         }
464     }
465   }
466
467   /* If the user change the slide number in the URL bar, jump
468      to this slide. */
469
470   window.onhashchange = function(e) {
471     var newidx = ~~window.location.hash.split("#")[1];
472     if (!newidx) newidx = 1;
473     if (newidx == idx) return;
474     idx = newidx;
475     setSlide();
476   }
477
478   /* Slide controls */
479
480   function back() {
481     if (idx == 1) return;
482     idx--;
483     setSlide();
484   }
485   function forward() {
486     if (idx >= slides.length) return;
487     idx++;
488     setSlide();
489   }
490   function setSlide() {
491     var old = document.querySelector("section[aria-selected]");
492     var next = document.querySelector("section:nth-of-type("+ idx +")");
493     if (old) {
494       old.removeAttribute("aria-selected");
495       var video = old.querySelector("video");
496       if (video) { video.pause(); }
497     }
498     if (next) {
499       next.setAttribute("aria-selected", "true");
500       var video = next.querySelector("video");
501       if (video) { video.play(); }
502     } else {
503       console.warn("No such slide: " + idx);
504       idx = 0;
505       for (var i = 0; i < slides.length; i++) {
506           if (slides[i].hasAttribute("aria-selected")) {
507               idx = i + 1;
508           }
509       }
510     }
511     window.location.hash = idx;
512     for (var i = 0; i < friendWindows.length; i++) {
513         friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
514     }
515   }
516 </script>
517 <!-- vim: set fdm=marker: }}} -->