diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 97 |
1 files changed, 94 insertions, 3 deletions
@@ -6,17 +6,20 @@ <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="dep/material-icons.css"> <link rel="stylesheet" href="dep/material.deep_purple-blue.min.css"> + <link rel="stylesheet" href="dep/emojione.min.css"> </head> <body> <script src="dep/d3.js" type="text/javascript"></script> - <script src="dep/material.min.js"></script> - <script src="dep/impress.js"></script> + <script src="dep/material.min.js" type="text/javascript"></script> + <script src="dep/emojione.min.js" type="text/javascript"></script> + <script src="dep/impress.js" type="text/javascript"></script> <script src="code/weightvis.js" type="text/javascript"></script> <script src="code/weightviswrapper.js" type="text/javascript"></script> <script src="code/errorvis.js" type="text/javascript"></script> <script src="code/bostonset.js" type="text/javascript"></script> + <!-- TODO Lizenzen Emoji One, Wikimedia-Bilder --> <script type="text/javascript"> var weightsWrapper = new WeightVisWrapper(); var errorVis = new ErrorVis(); @@ -25,6 +28,15 @@ document.addEventListener("DOMContentLoaded", function() { impress().init(); + emojione.imageType = 'svg'; + emojione.sprites = true; + emojione.imagePathSVGSprites = 'dep/emojione.sprites.svg'; + /* emoji */ + d3.selectAll(".emoji").each(function() { + var me = d3.select(this); + me.html(emojione.toImage(me.html())); + }); + d3.selectAll(".visContainer")[0].forEach(function(el) { weightsWrapper.addPlaceholder(el.parentNode); }); @@ -58,11 +70,90 @@ </script> <div id="impress"> + <!-- TODO Fortschrittsbalken unten? --> <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="5000"> <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1> + <!-- TODO center oder Bild --> <h2>38 Gewichte in 20 Minuten</h2> </div> + <!-- TODO Inhaltsübersicht --> + <div class="mdl-layout mdl-js-layout step slide" data-x="2000" data-y="0" data-z="5000"> + <h1 class="mdl-layout__header">Von der Eingabe zur Ausgabe</h1> + <div class="innerStep stepped lastInnerstep emoji center" style="font-size: 3000%;"> + <h2>Das ist Kitty.</h2> + :smiley_cat: + </div> + <div class="innerStep emoji center" style="font-size: 3000%;"> + <h2>Kitty ist blöd.</h2> + :pouting_cat: + </div> + <div class="innerStep emoji center" style="font-size: 1500%;"> + <h2>Wenn Kitty Steves Hut sieht, schnurrt sie manchmal.</h2> + :man: :tophat: :heart_eyes_cat: + </div> + <div class="innerStep emoji center" style="font-size: 2000%;"> + <h2>Steve mag es, wenn Kitty schnurrt.</h2> + :yum: + </div> + <div class="innerStep emoji center" style="font-size: 1250%;"> + <h2>Steve trainiert Kitty.</h2> + <h3>Mit Keksen. (Kitty mag Kekse.)</h3> + :man: :tophat: :cookie: :smile_cat: + </div> + <div class="innerStep center emoji" style="font-size: 3000%;"> + <h2>Was passiert da?</h2> + <h3>Sehen wir uns Kitty einmal genauer an.</h3> + :smiley_cat: + </div> + </div> + + <div class="mdl-layout mdl-js-layout step slide" data-x="2000" data-y="2000" data-z="2500"> + <h1 class="mdl-layout__header">Die Informationsverarbeitung im Gehirn</h1> + <!-- TODO margins --> + <div class="emoji center" style="font-size: 750%;"> + <p style="font-size: inherit;">Eingabe (:tophat:)</p> + <p style="font-style: italic; font-size: 50%;">Rezeptor</p> + <br /> + <p style="font-size: inherit;">↓</p> + <br /> + <p style="font-size: inherit;">Gehirn (:sparkles:)</p> + <p style="font-style: italic; font-size: 50%;">neuronales Netz</p> + <br /> + <p style="font-size: inherit;">↓</p> + <br /> + <p style="font-size: inherit;">Ausgabe (:heart_eyes_cat:)</p> + <p style="font-style: italic; font-size: 50%;">Effektor</p> + </div> + </div> + + <div class="mdl-layout mdl-js-layout step slide" data-x="2000" data-y="4000" data-z="2500"> + <h1 class="mdl-layout__header">Neuronale Netze</h1> + <div class="innerStep stepped lastInnerstep center"> + <h2>Ein Neuron</h2> + <!-- TODO Beim ersten slide-in tauchen die Bilder nicht auf! --> + <img style="height: 80%; width: 80%;" src="img/neuron.svg" alt="Schema Neuron" /> + </div> + <div class="innerStep center"> + <h2>Ein Neuronales Netz</h2> + <img style="height: 60%; width: 60%;" src="img/neuronales-netz.jpg" alt="Foto Neuron" /> + </div> + </div> + + <div class="mdl-layout mdl-js-layout step slide" data-x="4000" data-y="0" data-z="2500"> + <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1> + <div class="innerStep stepped lastInnerstep center"> + <h2>Neuron - künstliches Neuron</h2> + <img style="height: 40%; width: 40%;" src="img/neuron.svg" alt="Schema Neuron" /> + <img style="height: 40%; width: 40%;" src="img/kuenstliches_neuron.svg" alt="Schema eines künstlichen Neurons" /> + </div> + <div class="innerStep center"> + <h2>Neuronales Netz - künstliches neuronales Netz</h2> + <img style="height: 40%; width: 40%;" src="img/neuronales-netz.jpg" alt="Foto Neuron" /> + <img style="height: 50%; width: 50%;" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" /> + </div> + </div> +<!-- <div class="mdl-layout mdl-js-layout step slide" data-x="-1000" data-y="0" data-z="1000"> <h1 class="mdl-layout__header">Biologie</h1> <div class="innerStep stepped lastInnerstep center"> @@ -104,7 +195,6 @@ </p> </div> - <!-- TODO x' besser verteilen --> <div class="mdl-layout mdl-js-layout step slide" data-x="1000" data-y="0" data-z="1000"> <h1 class="mdl-layout__header">Abstraktion der Ein- und Ausgabe</h1> </div> @@ -217,6 +307,7 @@ }, ".visContainer"); </script> </div> +--> </div> </body> </html> |