start by something not too bad
This commit is contained in:
Yann Esposito (Yogsototh)
parent
f72bc38b8e
commit
868ae24936
BIN
img/Benoit-Mandelbrot.jpg
Normal file
BIN
img/Benoit-Mandelbrot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
img/Shells.jpg
Normal file
BIN
img/Shells.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
BIN
img/bretagne.jpg
Normal file
BIN
img/bretagne.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
img/bretagne01.jpeg
Normal file
BIN
img/bretagne01.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
img/bretagne02.jpeg
Normal file
BIN
img/bretagne02.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
img/broccoli.jpg
Normal file
BIN
img/broccoli.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 474 KiB |
BIN
img/choux.jpg
Normal file
BIN
img/choux.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
img/fractal-cat.jpg
Normal file
BIN
img/fractal-cat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
img/fractal-gorilla.jpg
Normal file
BIN
img/fractal-gorilla.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
img/franklin-letters.jpg
Normal file
BIN
img/franklin-letters.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
img/franklin.jpg
Normal file
BIN
img/franklin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
img/lsystem.png
Normal file
BIN
img/lsystem.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
img/lsystemOnline.png
Normal file
BIN
img/lsystemOnline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/romanesco.jpg
Normal file
BIN
img/romanesco.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
329
index.html
329
index.html
|
|
@ -22,6 +22,10 @@
|
|||
<!--[if lt IE 9]>
|
||||
<script src="lib/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<style>
|
||||
.red { color: #DC322F; }
|
||||
.yellow { color: #B58900; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
|
|
@ -31,14 +35,26 @@
|
|||
<section>
|
||||
<h1>Les Fractales</h1>
|
||||
<h3>Les maths cachées dans ton chat</h3>
|
||||
<img src="img/fractal-cat.jpg" alt="fractal cat"/>
|
||||
<p>
|
||||
<small>Par <a href="http://yannesposito.com">Yann Esposito</a></small>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Les fractales c'est beau</h2>
|
||||
<iframe src="http://player.vimeo.com/video/61190538"
|
||||
<h2>Moi</h2>
|
||||
<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"
|
||||
height="500"
|
||||
frameborder="0"
|
||||
|
|
@ -47,76 +63,114 @@
|
|||
allowFullScreen></iframe>
|
||||
</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>
|
||||
<h2>Vertical Slides</h2>
|
||||
<p>
|
||||
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>
|
||||
<h2>Les fractales ça existe dans la vie</h2>
|
||||
<img src="img/choux.jpg" alt="Choux"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Basement Level 1</h2>
|
||||
<p>Press down or up to navigate.</p>
|
||||
<h2>Les broccolis</h2>
|
||||
<img src="img/broccoli.jpg" alt="Broccolis"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Basement Level 2</h2>
|
||||
<p>Cornify</p>
|
||||
<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>
|
||||
<h2>Le choux romanesco</h2>
|
||||
<img src="img/romanesco.jpg" alt="Choux Romanesco"/>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Point of View</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<section>
|
||||
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||
<img src="img/bretagne.jpg" alt="La bretagne"/>
|
||||
</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>
|
||||
<h2>rvl.io</h2>
|
||||
<p>
|
||||
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>.
|
||||
</p>
|
||||
<section>
|
||||
<h2>L-Systems</h2>
|
||||
<img src="img/franklin.jpg" alt="Franklin"/>
|
||||
</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>
|
||||
<h2>Works in Mobile Safari</h2>
|
||||
<p>
|
||||
Try it out! You can swipe through the slides and pinch your way to the overview.
|
||||
</p>
|
||||
<h2>Longueur ?</h2>
|
||||
A chaque iteration la longueur double!
|
||||
La longeur de la forme est donc?
|
||||
|
||||
<b>∞</b>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Marvelous Unordered List</h2>
|
||||
<ul>
|
||||
<li>No order here</li>
|
||||
<li>Or here</li>
|
||||
<li>Or here</li>
|
||||
<li>Or here</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Fantastic Ordered List</h2>
|
||||
<ol>
|
||||
<li>One is smaller than...</li>
|
||||
<li>Two is smaller than...</li>
|
||||
<li>Three!</li>
|
||||
</ol>
|
||||
<h2>Ensemble de Mandelbrot</h2>
|
||||
<section>
|
||||
<h2>Auto référentes</h2>
|
||||
<iframe src="http://player.vimeo.com/video/61190538"
|
||||
width="800"
|
||||
height="500"
|
||||
frameborder="0"
|
||||
webkitAllowFullScreen
|
||||
mozallowfullscreen
|
||||
allowFullScreen></iframe>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Les fractales ça peut faire tourner la tête</h2>
|
||||
<iframe src="http://player.vimeo.com/video/12185093"
|
||||
width="800"
|
||||
height="500"
|
||||
frameborder="0"
|
||||
webkitAllowFullScreen
|
||||
mozallowfullscreen
|
||||
allowFullScreen></iframe>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-markdown>
|
||||
|
|
@ -134,39 +188,6 @@
|
|||
</script>
|
||||
</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 data-state="alert">
|
||||
<h2>Global State</h2>
|
||||
|
|
@ -193,136 +214,10 @@
|
|||
</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>
|
||||
<h1>THE END</h1>
|
||||
<h3>BY Hakim El Hattab / hakim.se</h3>
|
||||
<h3>BY Yann Esposito</h3>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
@ -343,7 +238,7 @@ function linkify( selector ) {
|
|||
center: true,
|
||||
|
||||
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
|
||||
dependencies: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue