--- /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-1.9.1.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
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </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:75%"
+ src="http://www.fi.edu/learn/case-files/eckertmauchly/ENIAC_Image_2.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="http://www.resistors-and-diodes-and-picchips-oh-my.co.uk/wp-content/uploads/2011/03/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> Compter avec des 0 et des 1 ? </h1>
+ <iframe class="sws-onframe-0_1" src="http://www.lri.fr/~kn/fds/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> É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:20vh">
+ <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:20vh;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="http://www.lri.fr/~kn/fds/dessin.html"
+ style="padding-left:5%;width:90%; height:75vh;border-width:0;" />
+ </div>
+ </body>
+</html>
projects / hacks / simpleWebSlides.git / commitdiff
