start by something not too bad
BIN
img/Benoit-Mandelbrot.jpg
Normal file
After Width: | Height: | Size: 203 KiB |
BIN
img/Shells.jpg
Normal file
After Width: | Height: | Size: 3.3 MiB |
BIN
img/bretagne.jpg
Normal file
After Width: | Height: | Size: 95 KiB |
BIN
img/bretagne01.jpeg
Normal file
After Width: | Height: | Size: 189 KiB |
BIN
img/bretagne02.jpeg
Normal file
After Width: | Height: | Size: 196 KiB |
BIN
img/broccoli.jpg
Normal file
After Width: | Height: | Size: 474 KiB |
BIN
img/choux.jpg
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
img/fractal-cat.jpg
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
img/fractal-gorilla.jpg
Normal file
After Width: | Height: | Size: 128 KiB |
BIN
img/franklin-letters.jpg
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
img/franklin.jpg
Normal file
After Width: | Height: | Size: 43 KiB |
BIN
img/lsystem.png
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
img/lsystemOnline.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
img/romanesco.jpg
Normal file
After Width: | Height: | Size: 379 KiB |
329
index.html
|
@ -22,6 +22,10 @@
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
<script src="lib/js/html5shiv.js"></script>
|
<script src="lib/js/html5shiv.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
<style>
|
||||||
|
.red { color: #DC322F; }
|
||||||
|
.yellow { color: #B58900; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
|
@ -31,14 +35,26 @@
|
||||||
<section>
|
<section>
|
||||||
<h1>Les Fractales</h1>
|
<h1>Les Fractales</h1>
|
||||||
<h3>Les maths cachées dans ton chat</h3>
|
<h3>Les maths cachées dans ton chat</h3>
|
||||||
|
<img src="img/fractal-cat.jpg" alt="fractal cat"/>
|
||||||
<p>
|
<p>
|
||||||
<small>Par <a href="http://yannesposito.com">Yann Esposito</a></small>
|
<small>Par <a href="http://yannesposito.com">Yann Esposito</a></small>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Les fractales c'est beau</h2>
|
<h2>Moi</h2>
|
||||||
<iframe src="http://player.vimeo.com/video/61190538"
|
<ul>
|
||||||
|
<li>Section Générale au Lycée</li>
|
||||||
|
<li>Bac S option Math</li>
|
||||||
|
<li>Licence Math/Informatique</li>
|
||||||
|
<li>Master Recherche Informatique</li>
|
||||||
|
<li>Doctorat Informatique (Intelligence Artificielle)</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Les fractales ça peut être très beau</h2>
|
||||||
|
<iframe src="http://player.vimeo.com/video/8601479"
|
||||||
width="800"
|
width="800"
|
||||||
height="500"
|
height="500"
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
|
@ -47,76 +63,114 @@
|
||||||
allowFullScreen></iframe>
|
allowFullScreen></iframe>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Example of nested vertical slides -->
|
<section>
|
||||||
|
<h2>Les fractales ça peut être très étrange</h2>
|
||||||
|
<img src="img/fractal-gorilla.jpg" alt="gorilla fractal"/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Les fractales ça peut ressembler à la réalité</h2>
|
||||||
|
<img src="img/Shells.jpg" alt="Shells"/>
|
||||||
|
<a class="small" href="http://www.deviantart.com/art/Rotbox-Beach-337639948">Author</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Vertical Slides</h2>
|
<h2>Les fractales ça existe dans la vie</h2>
|
||||||
<p>
|
<img src="img/choux.jpg" alt="Choux"/>
|
||||||
Slides can be nested inside of other slides,
|
|
||||||
try pressing <a href="#" class="navigate-down">down</a>.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="image navigate-down">
|
|
||||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
|
||||||
</a>
|
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Basement Level 1</h2>
|
<h2>Les broccolis</h2>
|
||||||
<p>Press down or up to navigate.</p>
|
<img src="img/broccoli.jpg" alt="Broccolis"/>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Basement Level 2</h2>
|
<h2>Le choux romanesco</h2>
|
||||||
<p>Cornify</p>
|
<img src="img/romanesco.jpg" alt="Choux Romanesco"/>
|
||||||
<a class="test" href="http://cornify.com">
|
|
||||||
<img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2>Basement Level 3</h2>
|
|
||||||
<p>That's it, time to go back up.</p>
|
|
||||||
<a href="#/2" class="image">
|
|
||||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
|
|
||||||
</a>
|
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Point of View</h2>
|
<section>
|
||||||
<p>
|
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||||
Press <strong>ESC</strong> to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
|
<img src="img/bretagne.jpg" alt="La bretagne"/>
|
||||||
</p>
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||||
|
<img src="img/bretagne01.jpeg" alt="La bretagne"/>
|
||||||
|
<p>1000km?</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||||
|
<img src="img/bretagne02.jpeg" alt="La bretagne"/>
|
||||||
|
<p>2000km?</p>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>rvl.io</h2>
|
<section>
|
||||||
<p>
|
<h2>L-Systems</h2>
|
||||||
If you don't like writing slides in HTML you can use the online editor <a href="http://www.rvl.io" target="_blank">rvl.io</a>.
|
<img src="img/franklin.jpg" alt="Franklin"/>
|
||||||
</p>
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>L-Systems</h2>
|
||||||
|
<ul><li>Règles de réécritures
|
||||||
|
</li><li><span style="border:solid;border-color:#DC322F;">F → <span class="red">F+F-F</span></span>
|
||||||
|
</li><li>F → F+F-F → <span class="red">F+F-F</span> + <span class="red">F+F-F</span> - <span class="red">F+F-F</span>
|
||||||
|
</li><li>F+F-F+F+F-F-F+F-F →
|
||||||
|
<span class="red">F+F-F</span> + <span class="red">F+F-F</span> -<span class="red">F+F-F</span> + <span class="red">F+F-F</span> + <span class="red">F+F-F</span> -<span class="red">F+F-F</span> -<span class="red">F+F-F</span> + <span class="red">F+F-F</span> -<span class="red">F+F-F</span>
|
||||||
|
|
||||||
|
</li><li> 1 → 3 → 9 → 27 → 81 → 243 ...
|
||||||
|
</li></ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>L-Systems</h2>
|
||||||
|
<img src="img/franklin-letters.jpg" alt="Franklin letters"/>
|
||||||
|
<ul><li>Tortue avec un crayon
|
||||||
|
</li><li>F → Avance
|
||||||
|
</li><li>+ → Tourne à gauche
|
||||||
|
</li><li>- → Tourne à droite
|
||||||
|
</li></ul>
|
||||||
|
<p>Inventé par un biologiste (algues)</p>
|
||||||
|
<a href="http://www.kevs3d.co.uk/dev/lsystems/">TEST sur <code>http://www.kevs3d.co.uk/dev/lsystems/</code></a>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>L-Systems</h2>
|
||||||
|
<img src="img/lsystemOnline.png" alt="L-System parameters"/>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>L-Systems</h2>
|
||||||
|
<p>12 fois → 3<sup>12</sup> = 531441</p>
|
||||||
|
<img src="img/lsystem.png" alt="an L-System fractal"/>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Works in Mobile Safari</h2>
|
<h2>Longueur ?</h2>
|
||||||
<p>
|
A chaque iteration la longueur double!
|
||||||
Try it out! You can swipe through the slides and pinch your way to the overview.
|
La longeur de la forme est donc?
|
||||||
</p>
|
|
||||||
|
<b>∞</b>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Marvelous Unordered List</h2>
|
<h2>Ensemble de Mandelbrot</h2>
|
||||||
<ul>
|
<section>
|
||||||
<li>No order here</li>
|
<h2>Auto référentes</h2>
|
||||||
<li>Or here</li>
|
<iframe src="http://player.vimeo.com/video/61190538"
|
||||||
<li>Or here</li>
|
width="800"
|
||||||
<li>Or here</li>
|
height="500"
|
||||||
</ul>
|
frameborder="0"
|
||||||
</section>
|
webkitAllowFullScreen
|
||||||
|
mozallowfullscreen
|
||||||
<section>
|
allowFullScreen></iframe>
|
||||||
<h2>Fantastic Ordered List</h2>
|
</section>
|
||||||
<ol>
|
<section>
|
||||||
<li>One is smaller than...</li>
|
<h2>Les fractales ça peut faire tourner la tête</h2>
|
||||||
<li>Two is smaller than...</li>
|
<iframe src="http://player.vimeo.com/video/12185093"
|
||||||
<li>Three!</li>
|
width="800"
|
||||||
</ol>
|
height="500"
|
||||||
|
frameborder="0"
|
||||||
|
webkitAllowFullScreen
|
||||||
|
mozallowfullscreen
|
||||||
|
allowFullScreen></iframe>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-markdown>
|
<section data-markdown>
|
||||||
|
@ -134,39 +188,6 @@
|
||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="transitions">
|
|
||||||
<h2>Transition Styles</h2>
|
|
||||||
<p>
|
|
||||||
You can select from different transitions, like: <br>
|
|
||||||
<a href="?transition=cube#/transitions">Cube</a> -
|
|
||||||
<a href="?transition=page#/transitions">Page</a> -
|
|
||||||
<a href="?transition=concave#/transitions">Concave</a> -
|
|
||||||
<a href="?transition=zoom#/transitions">Zoom</a> -
|
|
||||||
<a href="?transition=linear#/transitions">Linear</a> -
|
|
||||||
<a href="?transition=fade#/transitions">Fade</a> -
|
|
||||||
<a href="?transition=none#/transitions">None</a> -
|
|
||||||
<a href="?#/transitions">Default</a>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="themes">
|
|
||||||
<h2>Themes</h2>
|
|
||||||
<p>
|
|
||||||
Reveal.js comes with a few themes built in: <br>
|
|
||||||
<a href="?theme=sky#/themes">Sky</a> -
|
|
||||||
<a href="?theme=beige#/themes">Beige</a> -
|
|
||||||
<a href="?theme=simple#/themes">Simple</a> -
|
|
||||||
<a href="?theme=serif#/themes">Serif</a> -
|
|
||||||
<a href="?theme=night#/themes">Night</a> -
|
|
||||||
<a href="?#/themes">Default</a>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<small>
|
|
||||||
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code><head></code> using a <code><link></code>.
|
|
||||||
</small>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section data-state="alert">
|
<section data-state="alert">
|
||||||
<h2>Global State</h2>
|
<h2>Global State</h2>
|
||||||
|
@ -193,136 +214,10 @@
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-state="customevent">
|
|
||||||
<h2>Custom Events</h2>
|
|
||||||
<p>
|
|
||||||
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
|
||||||
</p>
|
|
||||||
<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
|
|
||||||
console.log( '"customevent" has fired' );
|
|
||||||
} );
|
|
||||||
</code></pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Clever Quotes</h2>
|
|
||||||
<p>
|
|
||||||
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
|
||||||
The nice thing about standards is that there are so many to choose from</q> and block:
|
|
||||||
</p>
|
|
||||||
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
|
||||||
For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
|
||||||
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
|
|
||||||
</blockquote>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Pretty Code</h2>
|
|
||||||
<pre><code contenteditable>
|
|
||||||
function linkify( selector ) {
|
|
||||||
if( supports3DTransforms ) {
|
|
||||||
|
|
||||||
var nodes = document.querySelectorAll( selector );
|
|
||||||
|
|
||||||
for( var i = 0, len = nodes.length; i < len; i++ ) {
|
|
||||||
var node = nodes[i];
|
|
||||||
|
|
||||||
if( !node.className ) ) {
|
|
||||||
node.className += ' roll';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Intergalactic Interconnections</h2>
|
|
||||||
<p>
|
|
||||||
You can link between slides internally,
|
|
||||||
<a href="#/2/3">like this</a>.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<section>
|
|
||||||
<h2>Fragmented Views</h2>
|
|
||||||
<p>Hit the next arrow...</p>
|
|
||||||
<p class="fragment">... to step through ...</p>
|
|
||||||
<ol>
|
|
||||||
<li class="fragment"><code>any type</code></li>
|
|
||||||
<li class="fragment"><em>of view</em></li>
|
|
||||||
<li class="fragment"><strong>fragments</strong></li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<aside class="notes">
|
|
||||||
This slide has fragments which are also stepped through in the notes window.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2>Fragment Styles</h2>
|
|
||||||
<p>There's a few styles of fragments, like:</p>
|
|
||||||
<p class="fragment grow">grow</p>
|
|
||||||
<p class="fragment shrink">shrink</p>
|
|
||||||
<p class="fragment roll-in">roll-in</p>
|
|
||||||
<p class="fragment fade-out">fade-out</p>
|
|
||||||
<p class="fragment highlight-red">highlight-red</p>
|
|
||||||
<p class="fragment highlight-green">highlight-green</p>
|
|
||||||
<p class="fragment highlight-blue">highlight-blue</p>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Spectacular image!</h2>
|
|
||||||
<a class="image" href="http://lab.hakim.se/meny/" target="_blank">
|
|
||||||
<img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Export to PDF</h2>
|
|
||||||
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Take a Moment</h2>
|
|
||||||
<p>
|
|
||||||
Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
|
|
||||||
during a presentation.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Stellar Links</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
|
|
||||||
<li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
|
|
||||||
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>It's free</h2>
|
|
||||||
<p>
|
|
||||||
reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
|
|
||||||
Donations will go towards hosting and domain costs.
|
|
||||||
</p>
|
|
||||||
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
|
|
||||||
<input type="hidden" name="cmd" value="_donations">
|
|
||||||
<input type="hidden" name="business" value="hakim.elhattab@gmail.com">
|
|
||||||
<input type="hidden" name="lc" value="US">
|
|
||||||
<input type="hidden" name="item_name" value="reveal.js / rvl.io">
|
|
||||||
<input type="hidden" name="no_note" value="0">
|
|
||||||
<input type="hidden" name="currency_code" value="USD">
|
|
||||||
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
|
|
||||||
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h1>THE END</h1>
|
<h1>THE END</h1>
|
||||||
<h3>BY Hakim El Hattab / hakim.se</h3>
|
<h3>BY Yann Esposito</h3>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -343,7 +238,7 @@ function linkify( selector ) {
|
||||||
center: true,
|
center: true,
|
||||||
|
|
||||||
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
|
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
|
||||||
transition: Reveal.getQueryHash().transition || 'fade', // default/cube/page/concave/zoom/linear/fade/none
|
transition: Reveal.getQueryHash().transition || 'zoom', // default/cube/page/concave/zoom/linear/fade/none
|
||||||
|
|
||||||
// Optional libraries used to extend on reveal.js
|
// Optional libraries used to extend on reveal.js
|
||||||
dependencies: [
|
dependencies: [
|
||||||
|
|