fds/fds.xhtml

   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"
   4           >
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6   <head>
   7     <title>Fête de la science</title>
   8
   9     <meta http-equiv="Content-Type"
  10           content="text/html; charset=utf-8" />
  11     <meta name="copyright"
  12           content="Copyright &#169; 2013 Kim Nguyễn" />
  13
  14     <!-- Load jQuery -->
  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>
  18
  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" />
  23
  24     <!-- Customize some templates and initialize -->
  25
  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;
  30
  31       //Ensures that we load SWS at the very end, after MathJax has
  32       //been initialized
  33
  34       var toggle_circuit  = function (id) {
  35       var v = $("#" + id).text();
  36       var nv = "0";
  37       if (v == "0") { nv = "1"; };
  38       $("#" + id).text(nv);
  39       draw_circuit();
  40       };
  41
  42       var draw_circuit = function() {
  43       var i0 = parseInt($("#input0").text());
  44       var i1 = parseInt($("#input1").text());
  45       var r = (i0 + i1) % 2;
  46       var c = (Math.floor((i0 + i1) / 2)) %2;
  47       $("#result").text(r)
  48       $("#carry").text(c)
  49       $(".num").each(function (i, e) {
  50        var txt = parseInt($(e).text());
  51       if (txt == 0) {
  52       $(e).css( 'background', '#aaaaff');
  53       } else {
  54       $(e).css( 'background', '#aaffaa');
  55       }
  56       });
  57
  58       };
  59
  60
  61
  62       $(window).load(SWS.Presentation.init);
  63     </script>
  64     <style>
  65       .num { display:inline-block;
  66              width: 5em;
  67              font-size: 150%;
  68            }
  69     </style>
  70   </head>
  71   <body>
  72
  73     <div class="sws-slide sws-cover sws-option-nofooter">
  74       <h1 style="font-size:250%;" ><b>Le binaire</b></h1>
  75       <h4>Kim Nguyễn</h4>
  76       <h4>Enseignant-chercheur</h4>
  77       <h4>en</h4>
  78       <h4>Informatique</h4>
  79       <img style="position:absolute; right: 0pt; bottom: 0pt;" src="logoFDS.jpg" />
  80     </div>
  81
  82     <div class="sws-slide">
  83       <h1> Comment fonctionne un ordinateur ? </h1>
  84       <div style="text-align:center;vertical-align:center">
  85       <img id="id_eniac" style="width:70%" src="Eniac.jpg"
  86       />
  87       </div>
  88     </div>
  89     <div class="sws-slide">
  90       <h1> Comment fonctionne un ordinateur ? </h1>
  91       <div style="text-align:center;vertical-align:center">
  92       <img style="width:25%"
  93       src="vacuum-tube.jpg"
  94       />
  95       <svg width="100%" height="15%"  xmlns="http://www.w3.org/2000/svg"
  96       version="1.1">
  97         <g  id="cin">
  98         <line x1="25%" y1="50%" x2="48%" y2="50%"
  99               style="stroke:rgb(250,200,10);stroke-width:1%"/>
 100         <line x1="48%" y1="50%" x2="48%" y2="1%"
 101               style="stroke:rgb(250,200,10);stroke-width:1%"/>
 102         </g>
 103         <g id="cout">
 104         <line x1="52%" y1="50%" x2="75%" y2="50%"
 105               style="stroke:rgb(250,200,10);stroke-width:1%"/>
 106         <line x1="52%" y1="50%" x2="52%" y2="1%"
 107               style="stroke:rgb(250,200,10);stroke-width:1%"/>
 108         </g>
 109         <g id="ctrans">
 110         <line x1="50%" y1="80%" x2="50%" y2="1%"
 111               style="stroke:rgb(0,100,250);stroke-width:1%"/>
 112         </g>
 113       </svg>
 114       <p style="text-align:center;" class="sws-onframe-6">
 115         Le courant passe ou ne passe pas, c'est tout !
 116       </p>
 117       <script type="text/javascript">
 118         SWS.Presentation.registerCallback(0, function (c) {
 119         $("#cin").hide();
 120         $("#cout").hide();
 121         $("#ctrans").hide();
 122         });
 123         SWS.Presentation.registerCallback(1, function (c) {
 124         $("#cin").show()
 125         $("#cout").hide();
 126         $("#ctrans").hide();
 127         });
 128         SWS.Presentation.registerCallback(2, function (c) {
 129         $("#cin").show()
 130         $("#cout").show();
 131         $("#ctrans").hide();
 132         });
 133         SWS.Presentation.registerCallback(3, function (c) {
 134         $("#cin").show()
 135         $("#cout").show();
 136         $("#ctrans").show();
 137         });
 138         SWS.Presentation.registerCallback(4, function (c) {
 139         $("#cin").show()
 140         $("#cout").hide();
 141         $("#ctrans").show();
 142         });
 143       </script>
 144       </div>
 145     </div>
 146     <div class="sws-slide">
 147       <h1> Comment fonctionne un ordinateur aujourd'hui ? </h1>
 148       <div class="sws-onframe-0" style="position:absolute; bottom:10%; width:100%; text-align:center;vertical-align:center">
 149       <img  style="width:75%"
 150            src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Transbauformen.jpg"
 151            />
 152       </div>
 153       <div class="sws-onframe-1" style="position:absolute; bottom:15%; width:100%; text-align:center;vertical-align:center">
 154       <img  style="width:55%"
 155            src="http://img.tomshardware.com/us/2006/12/04/multigatefinfet_425.jpg"
 156            />
 157       </div>
 158       <div class="sws-onframe-2_3" style="position:absolute; bottom:15%; width:100%; text-align:center;vertical-align:center">
 159       <img  style="width:55%"
 160            src="http://zapt2.staticworld.net/images/article/2013/05/haswell_pkg_1160-100039981-large.png"
 161            />
 162       </div>
 163       <p class="sws-onframe-3" style="text-align:center; position:absolute;bottom:7%">De la même manière ! Le courant
 164       passe (1) ou ne passe pas (0)</p>
 165     </div>
 166     <div class="sws-slide">
 167       <h1> Représenter tous les nombres des 0 et des 1 ? </h1>
 168       <iframe class="sws-onframe-0_1" src="anim/cartes.html"
 169       style="padding-left:5%;width:90%; height:50vh;border-width:0;"  />
 170       <p class="sws-onframe-1" >
 171         On groupe les <i>bits</i> par paquets de 8 qu'on appelle des <em>octets</em>!
 172       </p>
 173     </div>
 174     <div class="sws-slide">
 175       <h1>Compter avec du courant électrique ?</h1>
 176       <div style="text-align:center;">
 177         <div style=";display:inline-block;">
 178           <span class="num" id="input0" onclick="toggle_circuit('input0');">0</span><br/>
 179           <span class="num" id="input1" onclick="toggle_circuit('input1');">0</span>
 180         </div>
 181         <img style="vertical-align:top;border:width:300px;height:200px" src="Half_Adder.svg" />
 182         <div style=";display:inline-block;vertical-align:top;"><br/>
 183           <span class="num" id="result">0</span><br/><br/><br/>
 184           <span class="num" id="carry">0</span>
 185         </div>
 186         <p><img style="vertical-align:middle;" src="xor.svg" /> renvoie un 1 si les deux valeurs sont
 187         différentes <br/><br/>
 188 <img style="vertical-align:middle;"  src="and.svg" /> renvoie un 1 si les deux valeurs sont
 189         à 1
 190         </p>
 191         <script type="text/javascript">
 192           SWS.Presentation.registerCallback(0, function (c) {
 193           draw_circuit(); });
 194         </script>
 195       </div>
 196     </div>
 197     <div class="sws-slide">
 198       <h1>Et ensuite ?</h1>
 199       <div style="position:relative;text-align:center;">
 200         <img  src="mb_adder.png" style="left:0pt;top:0pt;width:600px"
 201         />
 202
 203       </div>
 204     </div>
 205     <div class="sws-slide">
 206       <h1>Et ensuite ?</h1>
 207       <div style="position:relative;text-align:center;">
 208         <img  src="pentium_internal_detail.jpg" style="left:0pt;top:0pt;height:300px"
 209         />
 210
 211       </div>
 212     </div>
 213     <div class="sws-slide">
 214       <h1> Écrire (des lettres) avec des 0 et des 1 ? </h1>
 215       <form>
 216         <select id="range_selection">
 217           <option value="32:126" selected="selected" >Latins</option>
 218           <option value="1536:1630">Arabes</option>
 219           <option value="19968:20062">Chinois</option>
 220         </select>
 221       </form>
 222       <div id="letters" style="text-align:justify">
 223       </div>
 224       <script type="text/javascript">
 225         <![CDATA[
 226         var display_letters = function (from, to) {
 227           $("#letters").children().remove();
 228         for (var i = from; i <= to ; i++)
 229         {
 230            var l =
 231         $("<div style='font-family:sans;display:inline-block;font-size:5vh;width:4vh;margin-left:1vh;'/>");
 232           l.text(String.fromCharCode(i));
 233           l.hover(function (x) {
 234               $("#zoom_letter").children().remove();
 235               var txt = $(this).text();
 236               $("#zoom_letter").text(txt + " = " + txt.charCodeAt(0));
 237           });
 238             $("#letters").append(l);
 239         };
 240         };
 241
 242         var val_selected = function () {
 243             var s = $("#range_selection").val();
 244             var n = s.split(":");
 245             display_letters(parseInt(n[0]), parseInt(n[1]));
 246         };
 247
 248         SWS.Presentation.registerCallback("0_1", function (c) {
 249           $("#letters").children().remove();
 250           $("#range_selection").change(val_selected);
 251           val_selected();
 252         });
 253
 254         ]]>
 255       </script>
 256       <div id="zoom_letter" style="width:100%;direction:ltr;
 257         text-align:center;margin-top:8vh;font-size:8vh;
 258         font-family:Arial">=
 259         </div>
 260       <div class="sws-onframe-1">
 261         On peut s'envoyer des messages par Internet ! L'ordinateur
 262         envoie des 1 et des 0 sur le fil (éléctrique) du téléphone…
 263       </div>
 264     </div>
 265
 266     <div class="sws-slide">
 267       <h1> Du plat (1) et des bosses (0) </h1>
 268       <p class="sws-onframe-0">On sait maintenant compter et parler avec des suites de 1 et
 269       de 0 ! Mais est-ce qu'on est obligé d'utiliser de l'électricité ?
 270       </p>
 271       <div class="sws-onframe-1" style="position:absolute; bottom:10%;
 272       width:100%; text-align:center;vertical-align:middle" >
 273         <img style="width:50%" src="http://www.tescan.com/sites/default/files/styles/colorbox_img/public/img/content/appgal/layerofadvd.png?itok=on_sUJkx" />
 274       </div>
 275       <div class="sws-onframe-2" style="position:absolute; bottom:10%;
 276       width:100%; text-align:center;vertical-align:middle" >
 277         <img style="width:50%" src="http://upload.wikimedia.org/wikipedia/commons/d/d3/DVD-R_bottom-side.jpg" />
 278       </div>
 279       <div class="sws-onframe-3" style="position:absolute; bottom:10%;
 280       width:100%; text-align:center;vertical-align:middle" >
 281         <img style="width:50%" src="http://www.bigbrownboxblog.com.au/wp-content/uploads/2012/09/Blu-Ray-Laser-Disc3.jpg" />
 282       </div>
 283
 284     </div>
 285
 286     <div class="sws-slide">
 287       <h1> Le nord (1) et le sud (0) </h1>
 288
 289       <div class="sws-onframe-1" style="position:absolute; bottom:10%;
 290       width:100%; text-align:center;vertical-align:middle" >
 291         <img style="width:50%" src="http://assets.vr-zone.net/7413/DS7K2000_angle_HR.jpg" />
 292       </div>
 293       <div class="sws-onframe-2" style="position:absolute; bottom:10%;
 294       width:100%; text-align:center;vertical-align:middle" >
 295         <img style="width:40%" src="http://www.camelcitydispatch.com/wp-content/uploads/2013/01/horseshoe-magnet.jpg" />
 296       </div>
 297     </div>
 298
 299     <div class="sws-slide">
 300       <h1> Et les images ?</h1>
 301       <div style="position:relative;top:20vh">
 302       <div class="sws-onframe-1" style="position:absolute; bottom:0%;
 303       width:100%; text-align:center;vertical-align:middle" >
 304         <img style="width:50%" src="http://www.androidheadlines.com/wp-content/uploads/2013/02/pentile.png" />
 305       </div>
 306       <div class="sws-onframe-2-3" style="position:absolute; bottom:0%;
 307       width:100%; text-align:center;vertical-align:middle" >
 308         <img style="width:50%" src="http://www.nptechnologies.ca/wp-content/uploads/2012/04/Monitor.jpg" />
 309       </div>
 310       </div>
 311       <div style="position:relative;top:20vh;padding-left:5%">
 312         <div   class="sws-onframe-3" >
 313         Encore une fois des 0 et des 1 ! avec un 1 le <em>pixel</em>
 314         est allumé, avec un 0 il est éteint!
 315       </div>
 316       </div>
 317     </div>
 318     <div class="sws-slide">
 319       <h1> Dessiner avec des 0 et des 1 ? </h1>
 320       <iframe class="sws-onframe-0_1" src="anim/dessin.html"
 321       style="padding-left:5%;width:90%; height:75vh;border-width:0;"  />
 322     </div>
 323   </body>
 324 </html>