+++ /dev/null
-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- >
-<html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Fête de la science</title>
-
- <meta http-equiv="Content-Type"
- content="text/html; charset=utf-8" />
- <meta name="copyright"
- content="Copyright © 2013 Kim Nguyễn" />
-
- <!-- Load jQuery -->
- <script src="../jquery-2.1.4.min.js" type="text/javascript" ></script>
- <!-- Load the library -->
- <script src="../simpleWebSlides.js" type="text/javascript" ></script>
-
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
- <!-- Load a custom Theme, the class-element marks this style-sheet
- a "theme" that can be swtiched dynamicaly -->
- <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
-
- <!-- Customize some templates and initialize -->
-
- <script type="text/javascript">
- SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
- SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
- SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
-
- //Ensures that we load SWS at the very end, after MathJax has
- //been initialized
-
- var toggle_circuit = function (id) {
- var v = $("#" + id).text();
- var nv = "0";
- if (v == "0") { nv = "1"; };
- $("#" + id).text(nv);
- draw_circuit();
- };
-
- var draw_circuit = function() {
- var i0 = parseInt($("#input0").text());
- var i1 = parseInt($("#input1").text());
- var r = (i0 + i1) % 2;
- var c = (Math.floor((i0 + i1) / 2)) %2;
- $("#result").text(r)
- $("#carry").text(c)
- $(".num").each(function (i, e) {
- var txt = parseInt($(e).text());
- if (txt == 0) {
- $(e).css( 'background', '#aaaaff');
- } else {
- $(e).css( 'background', '#aaffaa');
- }
- });
-
- };
-
-
-
- $(window).load(SWS.Presentation.init);
- </script>
- <style>
- .num { display:inline-block;
- width: 5em;
- font-size: 150%;
- }
- </style>
- </head>
- <body>
-
- <div class="sws-slide sws-cover sws-option-nofooter">
- <h1 style="font-size:250%;" ><b>Le binaire</b></h1>
- <h4>Kim Nguyễn</h4>
- <h4>Enseignant-chercheur</h4>
- <h4>en</h4>
- <h4>Informatique</h4>
- <img style="position:absolute; right: 0pt; bottom: 0pt;" src="logoFDS.jpg" />
- </div>
-
- <div class="sws-slide">
- <h1> Comment fonctionne un ordinateur ? </h1>
- <div style="text-align:center;vertical-align:center">
- <img id="id_eniac" style="width:70%" src="Eniac.jpg"
- />
- </div>
- </div>
- <div class="sws-slide">
- <h1> Comment fonctionne un ordinateur ? </h1>
- <div style="text-align:center;vertical-align:center">
- <img style="width:25%"
- src="vacuum-tube.jpg"
- />
- <svg width="100%" height="15%" xmlns="http://www.w3.org/2000/svg"
- version="1.1">
- <g id="cin">
- <line x1="25%" y1="50%" x2="48%" y2="50%"
- style="stroke:rgb(250,200,10);stroke-width:1%"/>
- <line x1="48%" y1="50%" x2="48%" y2="1%"
- style="stroke:rgb(250,200,10);stroke-width:1%"/>
- </g>
- <g id="cout">
- <line x1="52%" y1="50%" x2="75%" y2="50%"
- style="stroke:rgb(250,200,10);stroke-width:1%"/>
- <line x1="52%" y1="50%" x2="52%" y2="1%"
- style="stroke:rgb(250,200,10);stroke-width:1%"/>
- </g>
- <g id="ctrans">
- <line x1="50%" y1="80%" x2="50%" y2="1%"
- style="stroke:rgb(0,100,250);stroke-width:1%"/>
- </g>
- </svg>
- <p style="text-align:center;" class="sws-onframe-6">
- Le courant passe ou ne passe pas, c'est tout !
- </p>
- <script type="text/javascript">
- SWS.Presentation.registerCallback(0, function (c) {
- $("#cin").hide();
- $("#cout").hide();
- $("#ctrans").hide();
- });
- SWS.Presentation.registerCallback(1, function (c) {
- $("#cin").show()
- $("#cout").hide();
- $("#ctrans").hide();
- });
- SWS.Presentation.registerCallback(2, function (c) {
- $("#cin").show()
- $("#cout").show();
- $("#ctrans").hide();
- });
- SWS.Presentation.registerCallback(3, function (c) {
- $("#cin").show()
- $("#cout").show();
- $("#ctrans").show();
- });
- SWS.Presentation.registerCallback(4, function (c) {
- $("#cin").show()
- $("#cout").hide();
- $("#ctrans").show();
- });
- </script>
- </div>
- </div>
- <div class="sws-slide">
- <h1> Comment fonctionne un ordinateur aujourd'hui ? </h1>
- <div class="sws-onframe-0" style="position:absolute; bottom:10%; width:100%; text-align:center;vertical-align:center">
- <img style="width:75%"
- src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Transbauformen.jpg"
- />
- </div>
- <div class="sws-onframe-1" style="position:absolute; bottom:15%; width:100%; text-align:center;vertical-align:center">
- <img style="width:55%"
- src="http://img.tomshardware.com/us/2006/12/04/multigatefinfet_425.jpg"
- />
- </div>
- <div class="sws-onframe-2_3" style="position:absolute; bottom:15%; width:100%; text-align:center;vertical-align:center">
- <img style="width:55%"
- src="http://zapt2.staticworld.net/images/article/2013/05/haswell_pkg_1160-100039981-large.png"
- />
- </div>
- <p class="sws-onframe-3" style="text-align:center; position:absolute;bottom:7%">De la même manière ! Le courant
- passe (1) ou ne passe pas (0)</p>
- </div>
- <div class="sws-slide">
- <h1> Représenter tous les nombres des 0 et des 1 ? </h1>
- <iframe class="sws-onframe-0_1" src="anim/cartes.html"
- style="padding-left:5%;width:90%; height:50vh;border-width:0;" />
- <p class="sws-onframe-1" >
- On groupe les <i>bits</i> par paquets de 8 qu'on appelle des <em>octets</em>!
- </p>
- </div>
- <div class="sws-slide">
- <h1>Compter avec du courant électrique ?</h1>
- <div style="text-align:center;">
- <div style=";display:inline-block;">
- <span class="num" id="input0" onclick="toggle_circuit('input0');">0</span><br/>
- <span class="num" id="input1" onclick="toggle_circuit('input1');">0</span>
- </div>
- <img style="vertical-align:top;border:width:300px;height:200px" src="Half_Adder.svg" />
- <div style=";display:inline-block;vertical-align:top;"><br/>
- <span class="num" id="result">0</span><br/><br/><br/>
- <span class="num" id="carry">0</span>
- </div>
- <p><img style="vertical-align:middle;" src="xor.svg" /> renvoie un 1 si les deux valeurs sont
- différentes <br/><br/>
-<img style="vertical-align:middle;" src="and.svg" /> renvoie un 1 si les deux valeurs sont
- à 1
- </p>
- <script type="text/javascript">
- SWS.Presentation.registerCallback(0, function (c) {
- draw_circuit(); });
- </script>
- </div>
- </div>
- <div class="sws-slide">
- <h1>Et ensuite ?</h1>
- <div style="position:relative;text-align:center;">
- <img src="mb_adder.png" style="left:0pt;top:0pt;width:600px"
- />
-
- </div>
- </div>
- <div class="sws-slide">
- <h1>Et ensuite ?</h1>
- <div style="position:relative;text-align:center;">
- <img src="pentium_internal_detail.jpg" style="left:0pt;top:0pt;height:300px"
- />
-
- </div>
- </div>
- <div class="sws-slide">
- <h1> Écrire (des lettres) avec des 0 et des 1 ? </h1>
- <form>
- <select id="range_selection">
- <option value="32:126" selected="selected" >Latins</option>
- <option value="1536:1630">Arabes</option>
- <option value="19968:20062">Chinois</option>
- </select>
- </form>
- <div id="letters" style="text-align:justify">
- </div>
- <script type="text/javascript">
- <![CDATA[
- var display_letters = function (from, to) {
- $("#letters").children().remove();
- for (var i = from; i <= to ; i++)
- {
- var l =
- $("<div style='font-family:sans;display:inline-block;font-size:5vh;width:4vh;margin-left:1vh;'/>");
- l.text(String.fromCharCode(i));
- l.hover(function (x) {
- $("#zoom_letter").children().remove();
- var txt = $(this).text();
- $("#zoom_letter").text(txt + " = " + txt.charCodeAt(0));
- });
- $("#letters").append(l);
- };
- };
-
- var val_selected = function () {
- var s = $("#range_selection").val();
- var n = s.split(":");
- display_letters(parseInt(n[0]), parseInt(n[1]));
- };
-
- SWS.Presentation.registerCallback("0_1", function (c) {
- $("#letters").children().remove();
- $("#range_selection").change(val_selected);
- val_selected();
- });
-
- ]]>
- </script>
- <div id="zoom_letter" style="width:100%;direction:ltr;
- text-align:center;margin-top:8vh;font-size:8vh;
- font-family:Arial">=
- </div>
- <div class="sws-onframe-1">
- On peut s'envoyer des messages par Internet ! L'ordinateur
- envoie des 1 et des 0 sur le fil (éléctrique) du téléphone…
- </div>
- </div>
-
- <div class="sws-slide">
- <h1> Du plat (1) et des bosses (0) </h1>
- <p class="sws-onframe-0">On sait maintenant compter et parler avec des suites de 1 et
- de 0 ! Mais est-ce qu'on est obligé d'utiliser de l'électricité ?
- </p>
- <div class="sws-onframe-1" style="position:absolute; bottom:10%;
- width:100%; text-align:center;vertical-align:middle" >
- <img style="width:50%" src="http://www.tescan.com/sites/default/files/styles/colorbox_img/public/img/content/appgal/layerofadvd.png?itok=on_sUJkx" />
- </div>
- <div class="sws-onframe-2" style="position:absolute; bottom:10%;
- width:100%; text-align:center;vertical-align:middle" >
- <img style="width:50%" src="http://upload.wikimedia.org/wikipedia/commons/d/d3/DVD-R_bottom-side.jpg" />
- </div>
- <div class="sws-onframe-3" style="position:absolute; bottom:10%;
- width:100%; text-align:center;vertical-align:middle" >
- <img style="width:50%" src="http://www.bigbrownboxblog.com.au/wp-content/uploads/2012/09/Blu-Ray-Laser-Disc3.jpg" />
- </div>
-
- </div>
-
- <div class="sws-slide">
- <h1> Le nord (1) et le sud (0) </h1>
-
- <div class="sws-onframe-1" style="position:absolute; bottom:10%;
- width:100%; text-align:center;vertical-align:middle" >
- <img style="width:50%" src="http://assets.vr-zone.net/7413/DS7K2000_angle_HR.jpg" />
- </div>
- <div class="sws-onframe-2" style="position:absolute; bottom:10%;
- width:100%; text-align:center;vertical-align:middle" >
- <img style="width:40%" src="http://www.camelcitydispatch.com/wp-content/uploads/2013/01/horseshoe-magnet.jpg" />
- </div>
- </div>
-
- <div class="sws-slide">
- <h1> Et les images ?</h1>
- <div style="position:relative;top:50vh">
- <div class="sws-onframe-1" style="position:absolute; bottom:0%;
- width:100%; text-align:center;vertical-align:middle" >
- <img style="width:50%" src="http://www.androidheadlines.com/wp-content/uploads/2013/02/pentile.png" />
- </div>
- <div class="sws-onframe-2-3" style="position:absolute; bottom:0%;
- width:100%; text-align:center;vertical-align:middle" >
- <img style="width:50%" src="http://www.nptechnologies.ca/wp-content/uploads/2012/04/Monitor.jpg" />
- </div>
- </div>
- <div style="position:relative;top:55vh;padding-left:5%">
- <div class="sws-onframe-3" >
- Encore une fois des 0 et des 1 ! avec un 1 le <em>pixel</em>
- est allumé, avec un 0 il est éteint!
- </div>
- </div>
- </div>
- <div class="sws-slide">
- <h1> Dessiner avec des 0 et des 1 ? </h1>
- <iframe class="sws-onframe-0_1" src="anim/dessin.html"
- style="padding-left:5%;width:90%; height:75vh;border-width:0;" />
- </div>
- </body>
-</html>
projects / hacks / simpleWebSlides.git / blobdiff