1 <?xml version="1.0" encoding="utf-8" ?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
5 <html xmlns="http://www.w3.org/1999/xhtml" >
7 <title>Fête de la science</title>
9 <meta http-equiv="Content-Type"
10 content="text/html; charset=utf-8" />
11 <meta name="copyright"
12 content="Copyright © 2013 Kim Nguyễn" />
15 <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
16 <!-- Load the library -->
17 <script src="../simpleWebSlides.js" type="text/javascript" ></script>
19 <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
20 <!-- Load a custom Theme, the class-element marks this style-sheet
21 a "theme" that can be swtiched dynamicaly -->
22 <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
24 <!-- Customize some templates and initialize -->
26 <script type="text/javascript">
27 SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
28 SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
29 SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
31 //Ensures that we load SWS at the very end, after MathJax has
34 $(window).load(SWS.Presentation.init);
39 <div class="sws-slide sws-cover sws-option-nofooter">
40 <h1 style="font-size:250%;" ><b>Le binaire</b></h1>
42 <h4>Enseignant-chercheur</h4>
45 <img style="position:absolute; right: 0pt; bottom: 0pt;" src="logoFDS.jpg" />
48 <div class="sws-slide">
49 <h1> Comment fonctionne un ordinateur ? </h1>
50 <div style="text-align:left;vertical-align:center">
51 <img id="id_eniac" style="margin-left:10pt;width:70%"
52 src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Eniac.jpg"
56 <div class="sws-slide">
57 <h1> Comment fonctionne un ordinateur ? </h1>
58 <div style="text-align:center;vertical-align:center">
59 <img style="width:25%"
60 src="http://www.resistors-and-diodes-and-picchips-oh-my.co.uk/wp-content/uploads/2011/03/vacuum-tube.jpg"
62 <svg width="100%" height="15%" xmlns="http://www.w3.org/2000/svg"
65 <line x1="25%" y1="50%" x2="48%" y2="50%"
66 style="stroke:rgb(250,200,10);stroke-width:1%"/>
67 <line x1="48%" y1="50%" x2="48%" y2="1%"
68 style="stroke:rgb(250,200,10);stroke-width:1%"/>
71 <line x1="52%" y1="50%" x2="75%" y2="50%"
72 style="stroke:rgb(250,200,10);stroke-width:1%"/>
73 <line x1="52%" y1="50%" x2="52%" y2="1%"
74 style="stroke:rgb(250,200,10);stroke-width:1%"/>
77 <line x1="50%" y1="80%" x2="50%" y2="1%"
78 style="stroke:rgb(0,100,250);stroke-width:1%"/>
81 <p style="text-align:center;" class="sws-onframe-6">
82 Le courant passe ou ne passe pas, c'est tout !
84 <script type="text/javascript">
85 SWS.Presentation.registerCallback(0, function (c) {
90 SWS.Presentation.registerCallback(1, function (c) {
95 SWS.Presentation.registerCallback(2, function (c) {
100 SWS.Presentation.registerCallback(3, function (c) {
105 SWS.Presentation.registerCallback(4, function (c) {
113 <div class="sws-slide">
114 <h1> Comment fonctionne un ordinateur aujourd'hui ? </h1>
115 <div class="sws-onframe-0" style="position:absolute; bottom:10%; width:100%; text-align:center;vertical-align:center">
116 <img style="width:75%"
117 src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Transbauformen.jpg"
120 <div class="sws-onframe-1" style="position:absolute; bottom:15%; width:100%; text-align:center;vertical-align:center">
121 <img style="width:55%"
122 src="http://img.tomshardware.com/us/2006/12/04/multigatefinfet_425.jpg"
125 <div class="sws-onframe-2_3" style="position:absolute; bottom:15%; width:100%; text-align:center;vertical-align:center">
126 <img style="width:55%"
127 src="http://zapt2.staticworld.net/images/article/2013/05/haswell_pkg_1160-100039981-large.png"
130 <p class="sws-onframe-3" style="text-align:center; position:absolute;bottom:7%">De la même manière ! Le courant
131 passe (1) ou ne passe pas (0)</p>
133 <div class="sws-slide">
134 <h1> Compter avec des 0 et des 1 ? </h1>
135 <iframe class="sws-onframe-0_1" src="anim/cartes.html"
136 style="padding-left:5%;width:90%; height:50vh;border-width:0;" />
137 <p class="sws-onframe-1" >
138 On groupe les <i>bits</i> par paquets de 8 qu'on appelle des <em>octets</em>!
141 <div class="sws-slide">
142 <h1> Écrire (des lettres) avec des 0 et des 1 ? </h1>
144 <select id="range_selection">
145 <option value="32:126" selected="selected" >Latins</option>
146 <option value="1536:1630">Arabes</option>
147 <option value="19968:20062">Chinois</option>
150 <div id="letters" style="text-align:justify">
152 <script type="text/javascript">
154 var display_letters = function (from, to) {
155 $("#letters").children().remove();
156 for (var i = from; i <= to ; i++)
159 $("<div style='font-family:sans;display:inline-block;font-size:5vh;width:4vh;margin-left:1vh;'/>");
160 l.text(String.fromCharCode(i));
161 l.hover(function (x) {
162 $("#zoom_letter").children().remove();
163 var txt = $(this).text();
164 $("#zoom_letter").text(txt + " = " + txt.charCodeAt(0));
166 $("#letters").append(l);
170 var val_selected = function () {
171 var s = $("#range_selection").val();
172 var n = s.split(":");
173 display_letters(parseInt(n[0]), parseInt(n[1]));
176 SWS.Presentation.registerCallback("0_1", function (c) {
177 $("#letters").children().remove();
178 $("#range_selection").change(val_selected);
184 <div id="zoom_letter" style="width:100%;direction:ltr;
185 text-align:center;margin-top:8vh;font-size:8vh;
188 <div class="sws-onframe-1">
189 On peut s'envoyer des messages par Internet ! L'ordinateur
190 envoie des 1 et des 0 sur le fil (éléctrique) du téléphone…
194 <div class="sws-slide">
195 <h1> Du plat (1) et des bosses (0) </h1>
196 <p class="sws-onframe-0">On sait maintenant compter et parler avec des suites de 1 et
197 de 0 ! Mais est-ce qu'on est obligé d'utiliser de l'électricité ?
199 <div class="sws-onframe-1" style="position:absolute; bottom:10%;
200 width:100%; text-align:center;vertical-align:middle" >
201 <img style="width:50%" src="http://www.tescan.com/sites/default/files/styles/colorbox_img/public/img/content/appgal/layerofadvd.png?itok=on_sUJkx" />
203 <div class="sws-onframe-2" style="position:absolute; bottom:10%;
204 width:100%; text-align:center;vertical-align:middle" >
205 <img style="width:50%" src="http://upload.wikimedia.org/wikipedia/commons/d/d3/DVD-R_bottom-side.jpg" />
207 <div class="sws-onframe-3" style="position:absolute; bottom:10%;
208 width:100%; text-align:center;vertical-align:middle" >
209 <img style="width:50%" src="http://www.bigbrownboxblog.com.au/wp-content/uploads/2012/09/Blu-Ray-Laser-Disc3.jpg" />
214 <div class="sws-slide">
215 <h1> Le nord (1) et le sud (0) </h1>
217 <div class="sws-onframe-1" style="position:absolute; bottom:10%;
218 width:100%; text-align:center;vertical-align:middle" >
219 <img style="width:50%" src="http://assets.vr-zone.net/7413/DS7K2000_angle_HR.jpg" />
221 <div class="sws-onframe-2" style="position:absolute; bottom:10%;
222 width:100%; text-align:center;vertical-align:middle" >
223 <img style="width:40%" src="http://www.camelcitydispatch.com/wp-content/uploads/2013/01/horseshoe-magnet.jpg" />
227 <div class="sws-slide">
228 <h1> Et les images ?</h1>
229 <div style="position:relative;top:20vh">
230 <div class="sws-onframe-1" style="position:absolute; bottom:0%;
231 width:100%; text-align:center;vertical-align:middle" >
232 <img style="width:50%" src="http://www.androidheadlines.com/wp-content/uploads/2013/02/pentile.png" />
234 <div class="sws-onframe-2-3" style="position:absolute; bottom:0%;
235 width:100%; text-align:center;vertical-align:middle" >
236 <img style="width:50%" src="http://www.nptechnologies.ca/wp-content/uploads/2012/04/Monitor.jpg" />
239 <div style="position:relative;top:20vh;padding-left:5%">
240 <div class="sws-onframe-3" >
241 Encore une fois des 0 et des 1 ! avec un 1 le <em>pixel</em>
242 est allumé, avec un 0 il est éteint!
246 <div class="sws-slide">
247 <h1> Dessiner avec des 0 et des 1 ? </h1>
248 <iframe class="sws-onframe-0_1" src="anim/dessin.html"
249 style="padding-left:5%;width:90%; height:75vh;border-width:0;" />