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       $(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> Compter avec des 0 et des 1 ? </h1>
 135       <iframe class="sws-onframe-0_1" src="http://www.lri.fr/~kn/fds/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> Écrire (des lettres) avec des 0 et des 1 ? </h1>
 143       <form>
 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>
 148         </select>
 149       </form>
 150       <div id="letters" style="text-align:justify">
 151       </div>
 152       <script type="text/javascript">
 153         <![CDATA[
 154         var display_letters = function (from, to) {
 155           $("#letters").children().remove();
 156         for (var i = from; i <= to ; i++)
 157         {
 158            var l =
 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));
 165           });
 166             $("#letters").append(l);
 167         };
 168         };
 169
 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]));
 174         };
 175
 176         SWS.Presentation.registerCallback("0_1", function (c) {
 177           $("#letters").children().remove();
 178           $("#range_selection").change(val_selected);
 179           val_selected();
 180         });
 181
 182         ]]>
 183       </script>
 184       <div id="zoom_letter" style="width:100%;direction:ltr;
 185         text-align:center;margin-top:8vh;font-size:8vh;
 186         font-family:Arial">=
 187         </div>
 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…
 191       </div>
 192     </div>
 193
 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é ?
 198       </p>
 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" />
 202       </div>
 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" />
 206       </div>
 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" />
 210       </div>
 211
 212     </div>
 213
 214     <div class="sws-slide">
 215       <h1> Le nord (1) et le sud (0) </h1>
 216
 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" />
 220       </div>
 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" />
 224       </div>
 225     </div>
 226
 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" />
 233       </div>
 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" />
 237       </div>
 238       </div>
 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!
 243       </div>
 244       </div>
 245     </div>
 246     <div class="sws-slide">
 247       <h1> Dessiner avec des 0 et des 1 ? </h1>
 248       <iframe class="sws-onframe-0_1" src="http://www.lri.fr/~kn/fds/dessin.html"
 249       style="padding-left:5%;width:90%; height:75vh;border-width:0;"  />
 250     </div>
 251   </body>
 252 </html>