better <li>
[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
19 <section class=chapter>
20     <h1>Project Overview</h1>
21 </section>
22
23 <section>
24     <h2>Origins</h2>
25     <ul>
26         <li>lacie.com: non free hardware
27         <li>until 2009, no mainline support
28         <li>except for EDmini v2 (Linux patch)
29         <li>discussions patch authors
30         <li>a framework was needed...
31     </ul>
32 </section>
33
34 <section>
35     <h2>What is not lacie-nas.org ?</h2>
36     <ul>
37         <li>after sales service for LaCie
38         <li>hack host for LaCie firmwares
39     </ul>
40 </section>
41
42 <section class=chapter>
43     <h1>Projects and targets</h1>
44 </section>
45
46 <section>
47     <h2>Open/unlock hardware</h2>
48     <p>Provide boards specifications and pineout (JTAG, serial, GPIOS, etc...)</p>
49 </section>
50
51 <section>
52     <h2>Provide mainline support</h2>
53     <ul>
54         <li>openocd
55         <li>U-Boot
56         <li>Linux
57     </ul>
58 </section>
59
60 <section>
61     <h2>Provide NAS system tools</h2>
62     <p>Develop embedded generic modules for NASes:</p>
63     <ul>
64         <li>buttons: input_eventd
65         <li>GPIO LEDs: led_ctrl
66         <li>disk by slot: sd_alias
67         <li>GPIO debug: gpio_ctrl
68         <li>TODO: disk spin down utility
69         <li>TODO: FANs and hardware sensors (lm_sensor ?)
70         <li>TODO: provide a GNU/Debian package
71     </ul>
72 </section>
73
74 <section>
75     <h2>Provide development services</h2>
76     <ul>
77         <li><a href="http://lacie-nas.org">wiki</a>
78         <li><a href="http://git.lacie-nas.org">git repositories</a>
79         <li><a href="http://sequanux.org/cgi-bin/mailman/listinfo/lacie-nas">Mailing List</a>
80         <li>IRC channel <a href="irc://irc.freenode.net/lacie-nas">#lacie-nas</a> @freenode.net
81         <li><a href="ftp://lacie-nas.org/">ftp</a>
82     </ul>
83 </section>
84
85 <section>
86     <h2>Provide development/hacking tools</h2>
87     <ul>
88         <li><a href="http://lacie-nas.org/doku.php?id=clunc">clunc</a> (Client for LaCie U-Boot NetConsole)
89         <li><a href="http://git.lacie-nas.org/?p=miniroot.git;a=summary">miniroot</a>
90     </ul>
91 </section>
92
93 <section>
94     <h2>Roadmap</h2>
95     <q>No roadmap, no deadlines, but rather tasks and priorities</q>
96 </section>
97
98 <section class=chapter>
99     <h1>Free a NS2 demo !</h1>
100 </section>
101
102 <section>
103     <h2>Take board control with clunc</h2>
104 </section>
105
106 <section>
107     <h2>Install U-boot mainline</h2>
108 </section>
109
110 <section>
111     <h2>Startup an installation kernel+initramfs</h2>
112 </section>
113
114 <section>
115     <h2>Install GNU/Debian ARM</h2>
116 </section>
117
118 <section>
119     <h2>Use SSH and connect to the NS2 :)</h2>
120 </section>
121
122 <section class=chapter>
123     <h1>Perspectives</h1>
124 </section>
125
126 <section>
127     <h2>Network installation</h2>
128 </section>
129
130 <section>
131     <h2>Device Tree early adopter</h2>
132 </section>
133
134 <section>
135     <h2>Free distribution for NASes</h2>
136 </section>
137
138 <section class=chapter>
139     <h1>Questions ?</h1>
140 </section>
141
142 <section class=chapter>
143     <h1>Thanks</h1>
144 </section>
145
146 <!-- Your Style -->
147 <!-- Define the style of you presentation -->
148
149 <!-- Maybe a font from http://www.google.com/webfonts ? -->
150 <!-- link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'-->
151 <style>
152   html { background-color: black; }
153   a { color: #FF0066; } a:hover {text-decoration: underline;}
154   footer { position: absolute; bottom: 50px; right: 50px; }
155   strong {color: #FF0066}
156   body {
157       font-family: 'Oswald', arial, serif;
158       background-color: white;
159       color: white;
160       font-size: 2em;
161       background: #1C1C1C;
162       background-image: -moz-radial-gradient(center 45deg, #333 0%, #1C1C1C 50%);
163       background-image: -moz-radial-gradient(center 45deg, #333 0%, #1C1C1C 50%);
164   }
165
166   note { display: none; }
167
168   /* Transition effect */
169   section {
170       -moz-transition: left 400ms linear 0s;
171       -webkit-transition: left 400ms linear 0s;
172       -o-transition: left 400ms linear 0s;
173       -ms-transition: left 400ms linear 0s;
174       transition: left 400ms linear 0s;
175   }
176   section { left: -150%; }
177   section[aria-selected] { left: 0; }
178   section[aria-selected] ~ section { left: +150% }
179
180   .title { background-color: black; }
181   .title h1 {
182       vertical-align: middle; margin: 0; text-align: center; display: block;
183       line-height: 400px;
184       font-size: 70px;
185   }
186
187   .chapter { background-color: black;}
188   .chapter h1 {
189       font-size: 50px;
190       line-height: 600px;
191       vertical-align: middle; margin: 0; text-align: center; display: block
192   }
193
194   h1 {
195       margin: 10px;
196       text-align: left;
197       font-size: 25px;
198       text-shadow: 0px -1px 0px #000;
199   }
200   h2 {
201       color: #FAE50B;
202       margin: 70px 0 0 0;
203       font-size: 40px;
204       text-align: center;
205   }
206   ul {
207       margin-top: 70px;
208       font-size: 35px;
209       text-align: left;
210       border-left: 4px solid white;
211       padding-left: 40px;
212       min-width: 310px;
213       margin-left: 50px;
214       display: inline-block;
215   }
216   li {
217       margin-top: 10px;
218   }
219   ul > li:first-child {
220       margin-top: 0;
221   }
222   q, p {
223       margin: 50px auto 0 auto;
224       text-align: left;
225       margin-left: 50px;
226   }
227   q:after {content: ""}
228   q:before {content: ""}
229   q {
230       display: block;
231       margin-top: 140px;
232   }
233   li p {
234       margin-top: 0;
235       font-size: 20px;
236       font-style: italic;
237   }
238   video {
239       position: absolute;
240       top: 210px;
241       width: 260px;
242       left: 445px;
243       box-shadow: 0 0 10px black;
244   }
245   #arrow {
246       position: absolute;
247       top: 165px;
248       left: 460px;
249       font-size: 100px;
250       color: white;
251
252   }
253   li {list-style-type: none}
254
255 </style>
256
257 <!-- {{{{ *****************  DZSlides CORE 2.0b1 *************************** -->
258 <!-- *********************************************************************** -->
259 <!-- *********************************************************************** -->
260 <!-- *********************************************************************** -->
261 <!-- *********************************************************************** -->
262
263 <!-- 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 ;) -->
264
265 <!-- Default Style -->
266 <style>
267   * { margin: 0; padding: 0; }
268   details {display: none;}
269   body {
270     width: 800px; height: 600px;
271     margin-left: -400px; margin-top: -300px;
272     position: absolute; top: 50%; left: 50%;
273     overflow: hidden;
274   }
275   section {
276     position: absolute;
277     pointer-events: none;
278     width: 100%; height: 100%;
279   }
280   section[aria-selected] { pointer-events: auto;}
281   body {display: none}
282   body.loaded {display: block}
283 </style>
284
285 <script>
286   var friendWindows = [];
287   var idx = 1;
288   var slides;
289
290   /* main() */
291
292   window.onload = function() {
293     slides = document.querySelectorAll("body > section");
294     onhashchange();
295     setSlide();
296     document.body.className = "loaded";
297     onresize();
298   }
299
300   /* Handle keys */
301
302   window.onkeydown = function(e) {
303     // Don't intercept keyboard shortcuts
304     if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
305       return;
306     }
307     if ( e.keyCode == 37 // left arrow
308       || e.keyCode == 33 // page up
309     ) {
310       e.preventDefault();
311       back();
312     }
313     if ( e.keyCode == 39 // right arrow
314       || e.keyCode == 34 // page down
315     ) {
316       e.preventDefault();
317       forward();
318     }
319
320     if ( e.keyCode == 32) { // space
321         e.preventDefault();
322         toggleContent();
323     }
324   }
325
326   /* Adapt the size of the slides to the window */
327
328   window.onresize = function() {
329     var sx = document.body.clientWidth / window.innerWidth;
330     var sy = document.body.clientHeight / window.innerHeight;
331     var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
332     document.body.style.MozTransform = transform;
333     document.body.style.WebkitTransform = transform;
334     document.body.style.OTransform = transform;
335     document.body.style.msTransform = transform;
336     document.body.style.transform = transform;
337   }
338   function getDetails(idx) {
339     var s = document.querySelector("section:nth-of-type("+ idx +")");
340     var d = s.querySelector("details");
341     return d?d.innerHTML:"";
342   }
343   window.onmessage = function(e) {
344     msg = e.data;
345     win = e.source;
346     if (msg === "register") {
347       friendWindows.push(win);
348       win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), document.location);
349       win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
350       return;
351     }
352     if (msg === "back") back();
353     if (msg === "forward") forward();
354     if (msg === "toggleContent") toggleContent();
355     // setSlide(42)
356     var r = /setSlide\((\d+)\)/.exec(msg);
357     if (r) {
358         idx = r[1];
359         setSlide();
360     }
361   }
362
363   /* If a Video is present in this new slide, play it.
364      If a Video is present in the previous slide, stop it. */
365
366   function toggleContent() {
367     var s = document.querySelector("section[aria-selected]");
368     if (s) {
369         var video = s.querySelector("video");
370         if (video) {
371             if (video.ended || video.paused) {
372                 video.play();
373             } else {
374                 video.pause();
375             }
376         }
377     }
378   }
379
380   /* If the user change the slide number in the URL bar, jump
381      to this slide. */
382
383   window.onhashchange = function(e) {
384     var newidx = ~~window.location.hash.split("#")[1];
385     if (!newidx) newidx = 1;
386     if (newidx == idx) return;
387     idx = newidx;
388     setSlide();
389   }
390
391   /* Slide controls */
392
393   function back() {
394     if (idx == 1) return;
395     idx--;
396     setSlide();
397   }
398   function forward() {
399     if (idx >= slides.length) return;
400     idx++;
401     setSlide();
402   }
403   function setSlide() {
404     var old = document.querySelector("section[aria-selected]");
405     var next = document.querySelector("section:nth-of-type("+ idx +")");
406     if (old) {
407       old.removeAttribute("aria-selected");
408       var video = old.querySelector("video");
409       if (video) { video.pause(); }
410     }
411     if (next) {
412       next.setAttribute("aria-selected", "true");
413       var video = next.querySelector("video");
414       if (video) { video.play(); }
415     } else {
416       console.warn("No such slide: " + idx);
417       idx = 0;
418       for (var i = 0; i < slides.length; i++) {
419           if (slides[i].hasAttribute("aria-selected")) {
420               idx = i + 1;
421           }
422       }
423     }
424     window.location.hash = idx;
425     for (var i = 0; i < friendWindows.length; i++) {
426         friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
427     }
428   }
429 </script>
430 <!-- vim: set fdm=marker: }}} -->