fds/fds_old.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       $(window).load(SWS.Presentation.init);
  35     </script>
  36   </head>
  37   <body>
  38
  39     <div class="sws-slide sws-cover sws-option-nofooter">
  40       <h1 style="font-size:250%;" ><b>Le binaire</b></h1>
  41       <h4>Kim Nguyễn</h4>
  42       <h4>Enseignant-chercheur</h4>
  43       <h4>en</h4>
  44       <h4>Informatique</h4>
  45       <img style="position:absolute; right: 0pt; bottom: 0pt;" src="logoFDS.jpg" />
  46     </div>
  47
  48     <div class="sws-slide">
  49       <h1> Comment fonctionne un ordinateur ? </h1>
  50       <div style="text-align:center;vertical-align:center">
  51       <img id="id_eniac" style="width:75%"
  52       src="http://www.fi.edu/learn/case-files/eckertmauchly/ENIAC_Image_2.jpg"
  53       />
  54       </div>
  55     </div>
  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"
  61       />
  62       <svg width="100%" height="15%"  xmlns="http://www.w3.org/2000/svg"
  63       version="1.1">
  64         <g  id="cin">
  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%"/>
  69         </g>
  70         <g id="cout">
  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%"/>
  75         </g>
  76         <g id="ctrans">
  77         <line x1="50%" y1="80%" x2="50%" y2="1%"
  78               style="stroke:rgb(0,100,250);stroke-width:1%"/>
  79         </g>
  80       </svg>
  81       <p style="text-align:center;" class="sws-onframe-6">
  82         Le courant passe ou ne passe pas, c'est tout !
  83       </p>
  84       <script type="text/javascript">
  85         SWS.Presentation.registerCallback(0, function (c) {
  86         $("#cin").hide();
  87         $("#cout").hide();
  88         $("#ctrans").hide();
  89         });
  90         SWS.Presentation.registerCallback(1, function (c) {
  91         $("#cin").show()
  92         $("#cout").hide();
  93         $("#ctrans").hide();
  94         });
  95         SWS.Presentation.registerCallback(2, function (c) {
  96         $("#cin").show()
  97         $("#cout").show();
  98         $("#ctrans").hide();
  99         });
 100         SWS.Presentation.registerCallback(3, function (c) {
 101         $("#cin").show()
 102         $("#cout").show();
 103         $("#ctrans").show();
 104         });
 105         SWS.Presentation.registerCallback(4, function (c) {
 106         $("#cin").show()
 107         $("#cout").hide();
 108         $("#ctrans").show();
 109         });
 110       </script>
 111       </div>
 112     </div>
 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"
 118            />
 119       </div>
 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"
 123            />
 124       </div>
 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"
 128            />
 129       </div>
 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>
 132     </div>
 133     <div class="sws-slide">
 134       <h1> Représenter tous les nombres avec 0 et 1 ? </h1>
 135       <iframe class="sws-onframe-0_1" src="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>!
 139       </p>
 140     </div>
 141     <div class="sws-slide">
 142       <h1>Compter avec du courant ? </h1>
 143       <div>
 144       <img style="width:360;height=200" src="fds/Half_Adder.svg" alt="hd" />
 145            </div>
 146     </div>
 147     <div class="sws-slide">
 148       <h1> Écrire (des lettres) avec des 0 et des 1 ? </h1>
 149       <form>
 150         <select id="range_selection">
 151           <option value="32:126" selected="selected" >Latins</option>
 152           <option value="1536:1630">Arabes</option>
 153           <option value="19968:20062">Chinois</option>
 154         </select>
 155       </form>
 156       <div id="letters" style="text-align:justify">
 157       </div>
 158       <script type="text/javascript">
 159         <![CDATA[
 160         var display_letters = function (from, to) {
 161           $("#letters").children().remove();
 162         for (var i = from; i <= to ; i++)
 163         {
 164            var l =
 165         $("<div style='font-family:sans;display:inline-block;font-size:5vh;width:4vh;margin-left:1vh;'/>");
 166           l.text(String.fromCharCode(i));
 167           l.hover(function (x) {
 168               $("#zoom_letter").children().remove();
 169               var txt = $(this).text();
 170               $("#zoom_letter").text(txt + " = " + txt.charCodeAt(0));
 171           });
 172             $("#letters").append(l);
 173         };
 174         };
 175
 176         var val_selected = function () {
 177             var s = $("#range_selection").val();
 178             var n = s.split(":");
 179             display_letters(parseInt(n[0]), parseInt(n[1]));
 180         };
 181
 182         SWS.Presentation.registerCallback("0_1", function (c) {
 183           $("#letters").children().remove();
 184           $("#range_selection").change(val_selected);
 185           val_selected();
 186         });
 187
 188         ]]>
 189       </script>
 190       <div id="zoom_letter" style="width:100%;direction:ltr;
 191         text-align:center;margin-top:8vh;font-size:8vh;
 192         font-family:Arial">=
 193         </div>
 194       <div class="sws-onframe-1">
 195         On peut s'envoyer des messages par Internet ! L'ordinateur
 196         envoie des 1 et des 0 sur le fil (éléctrique) du téléphone…
 197       </div>
 198     </div>
 199
 200     <div class="sws-slide">
 201       <h1> Du plat (1) et des bosses (0) </h1>
 202       <p class="sws-onframe-0">On sait maintenant compter et parler avec des suites de 1 et
 203       de 0 ! Mais est-ce qu'on est obligé d'utiliser de l'électricité ?
 204       </p>
 205       <div class="sws-onframe-1" style="position:absolute; bottom:10%;
 206       width:100%; text-align:center;vertical-align:middle" >
 207         <img style="width:50%" src="http://www.tescan.com/sites/default/files/styles/colorbox_img/public/img/content/appgal/layerofadvd.png?itok=on_sUJkx" />
 208       </div>
 209       <div class="sws-onframe-2" style="position:absolute; bottom:10%;
 210       width:100%; text-align:center;vertical-align:middle" >
 211         <img style="width:50%" src="http://upload.wikimedia.org/wikipedia/commons/d/d3/DVD-R_bottom-side.jpg" />
 212       </div>
 213       <div class="sws-onframe-3" style="position:absolute; bottom:10%;
 214       width:100%; text-align:center;vertical-align:middle" >
 215         <img style="width:50%" src="http://www.bigbrownboxblog.com.au/wp-content/uploads/2012/09/Blu-Ray-Laser-Disc3.jpg" />
 216       </div>
 217
 218     </div>
 219
 220     <div class="sws-slide">
 221       <h1> Le nord (1) et le sud (0) </h1>
 222
 223       <div class="sws-onframe-1" style="position:absolute; bottom:10%;
 224       width:100%; text-align:center;vertical-align:middle" >
 225         <img style="width:50%" src="http://assets.vr-zone.net/7413/DS7K2000_angle_HR.jpg" />
 226       </div>
 227       <div class="sws-onframe-2" style="position:absolute; bottom:10%;
 228       width:100%; text-align:center;vertical-align:middle" >
 229         <img style="width:40%" src="http://www.camelcitydispatch.com/wp-content/uploads/2013/01/horseshoe-magnet.jpg" />
 230       </div>
 231     </div>
 232
 233     <div class="sws-slide">
 234       <h1> Et les images ?</h1>
 235       <div style="position:relative;top:20vh">
 236       <div class="sws-onframe-1" style="position:absolute; bottom:0%;
 237       width:100%; text-align:center;vertical-align:middle" >
 238         <img style="width:50%" src="http://www.androidheadlines.com/wp-content/uploads/2013/02/pentile.png" />
 239       </div>
 240       <div class="sws-onframe-2-3" style="position:absolute; bottom:0%;
 241       width:100%; text-align:center;vertical-align:middle" >
 242         <img style="width:50%" src="http://www.nptechnologies.ca/wp-content/uploads/2012/04/Monitor.jpg" />
 243       </div>
 244       </div>
 245       <div style="position:relative;top:20vh;padding-left:5%">
 246         <div   class="sws-onframe-3" >
 247         Encore une fois des 0 et des 1 ! avec un 1 le <em>pixel</em>
 248         est allumé, avec un 0 il est éteint!
 249       </div>
 250       </div>
 251     </div>
 252     <div class="sws-slide">
 253       <h1> Dessiner avec des 0 et des 1 ? </h1>
 254       <iframe class="sws-onframe-0_1" src="dessin.html"
 255       style="padding-left:5%;width:90%; height:75vh;border-width:0;"  />
 256     </div>
 257   </body>
 258 </html>