diff options
| -rw-r--r-- | index.html | 91 |
1 files changed, 46 insertions, 45 deletions
@@ -57,8 +57,13 @@ /* responsive deck */ function sizeSlides() { d3.selectAll(".slide") - .style("width", parseInt(window.innerWidth) * 0.9 + "px") - .style("height", parseInt(window.innerHeight) * 0.9 + "px"); + .style("width", (parseInt(window.innerWidth) * 0.9) + "px") + .style("height", (parseInt(window.innerHeight) * 0.9) + "px"); + d3.selectAll(".scale") + .style("font-size", function(d) { + var lines = d3.select(this).selectAll("p")[0].length; // TODO a bit specific, may not work in all cases + return Math.min(window.innerWidth/10, window.innerHeight/lines/2) + "px"; // TODO replace by line height? + }); }; window.addEventListener("resize", sizeSlides); @@ -71,84 +76,80 @@ <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> + <div class="step slide" data-x="0" data-y="0" data-z="5000"> + <h1>Künstliche neuronale Netze</h1> <!-- TODO center oder Bild --> - <h2>38 Gewichte in 20 Minuten</h2> + <h2>38 Gewichte in 15 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 class="step slide" data-x="2000" data-y="0" data-z="5000"> + <h1>Von der Eingabe zur Ausgabe</h1> + <div class="innerStep stepped lastInnerstep center"> + <h3>Das ist Kitty.</h3> + <p class="emoji scale">:smiley_cat:</p> </div> - <div class="innerStep emoji center" style="font-size: 3000%;"> - <h2>Kitty ist blöd.</h2> - :pouting_cat: + <div class="innerStep center"> + <h3>Kitty ist blöd.</h3> + <p class="emoji scale">:pouting_cat:</p> </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 class="innerStep center"> + <h3>Wenn Kitty Steves Hut sieht, schnurrt sie manchmal.</h3> + <p class="emoji scale">:man: :tophat: :heart_eyes_cat:</p> </div> - <div class="innerStep emoji center" style="font-size: 2000%;"> - <h2>Steve mag es, wenn Kitty schnurrt.</h2> - :yum: + <div class="innerStep center"> + <h3>Steve mag es, wenn Kitty schnurrt.</h3> + <p class="emoji scale">:yum:</p> </div> - <div class="innerStep emoji center" style="font-size: 1250%;"> - <h2>Steve trainiert Kitty.</h2> + <div class="innerStep center"> + <h3>Steve trainiert Kitty.</h3> <h3>Mit Keksen. (Kitty mag Kekse.)</h3> - :man: :tophat: :cookie: :smile_cat: + <p class="emoji scale">:man: :tophat: :cookie: :smile_cat:</p> </div> - <div class="innerStep center emoji" style="font-size: 3000%;"> - <h2>Was passiert da?</h2> + <div class="innerStep center"> + <h3>Was passiert da?</h3> <h3>Sehen wir uns Kitty einmal genauer an.</h3> - :smiley_cat: + <p class="emoji scale">:smiley_cat:</p> </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> + <div class="step slide" data-x="2000" data-y="2000" data-z="2500"> + <h1>Die Informationsverarbeitung im Gehirn</h1> <!-- TODO margins --> - <div class="emoji center" style="font-size: 750%;"> + <div class="emoji scale center"> <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="step slide" data-x="2000" data-y="4000" data-z="2500"> + <h1>Neuronale Netze</h1> <div class="innerStep stepped lastInnerstep center"> - <h2>Ein Neuron</h2> + <h3>Ein Neuron</h3> <!-- 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> + <h3>Ein Neuronales Netz</h3> <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="step slide" data-x="4000" data-y="0" data-z="2500"> + <h1>Künstliche neuronale Netze</h1> <div class="innerStep stepped lastInnerstep center"> - <h2>Neuron - künstliches Neuron</h2> + <h3>Neuron - künstliches Neuron</h3> <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> + <h3>Neuronales Netz - künstliches neuronales Netz</h3> <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> @@ -201,7 +202,7 @@ <div class="step slide mdl-layout mdl-js-layout" data-x="9500" data-y="0" data-z="1000"> <div class="mdl-layout__header"> - <h2>Ein leeres Netz</h2> + <h3>Ein leeres Netz</h3> </div> <div class="visContainer"></div> @@ -220,7 +221,7 @@ <div class="step slide mdl-layout mdl-js-layout" data-x="3000" data-y="0" data-z="1000"> <div class="mdl-layout__header"> - <h2>Aktivierungstest</h2> + <h3>Aktivierungstest</h3> </div> <div class="visContainer"></div> @@ -253,7 +254,7 @@ <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="0" data-z="1000"> <div class="mdl-layout__header"> - <h2>Der Fehler im Verlauf</h2> + <h3>Der Fehler im Verlauf</h3> </div> <div class="errorContainer"></div> @@ -272,7 +273,7 @@ <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000"> <div class="mdl-layout__header"> - <h2>Die Gewichte im Verlauf</h2> + <h3>Die Gewichte im Verlauf</h3> </div> <div class="visContainer"></div> @@ -291,7 +292,7 @@ <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="1000"> <div class="mdl-layout__header"> - <h2>Gewichte und Fehler</h2> + <h3>Gewichte und Fehler</h3> </div> <div class="visContainer"></div> |