Ajout base formation Javascript

2015-03-25 17:27:03 +01:00 · 2015-03-25 17:27:03 +01:00 · a2650f1ebd
commit a2650f1ebd
parent 72ba644959
31 changed files with 7362 additions and 0 deletions
--- a/javascript/.editorconfig
+++ b/javascript/.editorconfig
@ -0,0 +1,7 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
--- a/javascript/README.md
+++ b/javascript/README.md
@ -0,0 +1,16 @@
+# Formations Javascript
+
+Les formations Javascript sont au format HTML et utilisent la librairie [remark](https://github.com/gnab/remark).
+
+## Générer le PDF de la formation
+
+Utiliser le script `generate-pdf.sh`
+
+## Visualiser une des formations
+
+```
+cd formations
+python -m SimpleHTTPServer
+```
+
+Puis ouvrir votre navigateur sur l'adresse `http://localhost:8080/javascript/<formation>`
--- a/javascript/base/cover.md
+++ b/javascript/base/cover.md
@ -0,0 +1,6 @@
+# .cadoles-blue[Formation Javascript]
+
+## .cadoles-blue[EOLE]
+### William Petit
+<img style="height: 30px" src=../../beamer-skel/img/logo-cadoles-01.png />
+### 02 Avril 2015
--- a/javascript/base/fonctions-1.md
+++ b/javascript/base/fonctions-1.md
@ -0,0 +1,29 @@
+# .cadoles-slide-title[Fonctions (1/3)]
+.cadoles-clearfix[
+**Déclaration et invocation**
+]
+```js
+// Déclaration
+function myFunc() {
+  return 'Hello from myFunc';
+}
+
+var myFunc2 = function() {
+  return 'Hello from myFunc2';
+};
+
+// Invocation
+myFunc();  // -> 'Hello from myFunc'
+myFunc2(); // -> 'Hello from myFunc2'
+```
+**Arguments**
+
+Comme les variables, les arguments d'une fonction en Javascript ne sont pas typés, et leur nombre n'est pas fixe.
+```js
+function myFunc(arg1, arg2) {
+  console.log(arg1, arg2);
+}
+
+myFunc('foo', 'bar');         // -> affiche 'foo bar' dans la console;
+myFunc('foo', 'bar', 'baz');  // Pas d'erreur
+```
--- a/javascript/base/fonctions-2.md
+++ b/javascript/base/fonctions-2.md
@ -0,0 +1,18 @@
+# .cadoles-slide-title[Fonctions (2/3)]
+
+.cadoles-clearfix[
+**La variable `arguments`**
+]
+
+Dans le contexte d'exécution d'un fonction, la variable `arguments` permet de manipuler les arguments, même si ceux ci n'ont pas été déclarés par la fonction.
+```js
+function myFunc() {
+  console.log(arguments.length, arguments[0], arguments[1]);
+}
+
+myFunc('arg1', 'arg2');   // Affiche '2 "arg1" "arg2"' dans la console
+myFunc();                 // Affiche '0 undefined undefined' dans la console
+```
+**Contexte d'exécution et `this`**
+
+En Javascript, le mot clé `this` permet d'obtenir une référence vers le contexte d'exécution.
--- a/javascript/base/fonctions-3.md
+++ b/javascript/base/fonctions-3.md
@ -0,0 +1,8 @@
+# .cadoles-slide-title[Fonctions (3/3)]
+
+.cadoles-clearfix[
+**"Levage" de fonctions**
+]
+```js
+
+```
--- a/javascript/base/historique.md
+++ b/javascript/base/historique.md
@ -0,0 +1,16 @@
+# .cadoles-slide-title[Historique]
+
+.cadoles-list.cadoles-clearfix[
+
+- Créé en 1995 par [Brendan Eich](https://fr.wikipedia.org/wiki/Brendan_Eich) pour [Netscape](https://fr.wikipedia.org/wiki/Netscape_Communications);
+- Normalisé par le standard [ECMAScript](https://fr.wikipedia.org/wiki/ECMAScript) en juin 1997;
+- Actuellement en version 1.8.5, implémentant la version 5 de la norme ECMA-262;
+- La version 6 de la norme ECMA-262 devrait sortir à la mi 2015.
+
+]
+
+.cadoles-list[
+
+- Premier langage en terme de volume de dépôts créés sur [Github](https://github.com/) (d'après [Githut.info](http://githut.info/)).
+
+]
--- a/javascript/base/index.html
+++ b/javascript/base/index.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cadoles - Formation Javascript</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <style type="text/css">
+      @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
+      @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
+      @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
+
+      body {
+          font-family: 'Droid Sans';
+      }
+      h1, h2, h3 {
+        font-family: 'Caviar Dream', 'Droid Sans';
+        font-weight: normal;
+      }
+      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+    </style>
+    <link href="../cadoles-theme.css" rel="stylesheet">
+  </head>
+  <body>
+    <script src="../bower_components/remark/out/remark.js"></script>
+    <script src="../cadoles-remark-macros.js"></script>
+    <script type="text/javascript">
+      var slideshow = remark.create({
+        sourceUrl: 'index.md'
+      });
+    </script>
+  </body>
+</html>
--- a/javascript/base/index.md
+++ b/javascript/base/index.md
@ -0,0 +1,28 @@
+class: middle, center
+![:include](cover.md)
+---
+![:include](plan.md)
+---
+![:include](historique.md)
+---
+![:include](langage.md)
+---
+![:include](variables-1.md)
+---
+![:include](variables-2.md)
+---
+![:include](structures-1.md)
+---
+![:include](structures-2.md)
+---
+![:include](structures-3.md)
+---
+![:include](fonctions-1.md)
+---
+![:include](fonctions-2.md)
+---
+![:include](fonctions-3.md)
+---
+![:include](tableaux-1.md)
+---
+![:include](tableaux-2.md)
--- a/javascript/base/langage.md
+++ b/javascript/base/langage.md
@ -0,0 +1,9 @@
+# .cadoles-slide-title[Le langage]
+
+.cadoles-list.cadoles-clearfix[
+- Variables
+- Structures de contrôles
+- Fonctions
+- Tableaux
+- Objets
+]
--- a/javascript/base/plan.md
+++ b/javascript/base/plan.md
@ -0,0 +1,46 @@
+# .cadoles-slide-title[Plan]
+
+.cadoles-list.cadoles-clearfix[
+
+- Historique
+- Le langage
+- L'héritage prototypal
+- Modularisation
+- L'écosystème Javascript
+- Les alternatives
+
+]
+
+???
+
+## Plan complet
+
+- Historique
+- Le langage
+  - Variables
+  - Structures de contrôles
+  - Fonctions
+  - Tableaux
+  - Objets
+- L'héritage prototypal
+- Modularisation
+  - État des lieux
+  - Variable globale
+  - AMD
+  - CommonJS
+  - Modules ES6
+- L'écosystème Javascript
+  - Outils de debug
+    - Console de débogage
+    - Tests unitaires
+    - Linting
+    - `'use strict';`
+  - Gestionnaires de paquets
+  - Pipeline d'intégration
+    - Grunt
+    - Gulp
+- Les alternatives
+  - CoffeeScript
+  - Dart
+  - TypeScript
+  - Haxe
--- a/javascript/base/structures-1.md
+++ b/javascript/base/structures-1.md
@ -0,0 +1,31 @@
+# .cadoles-slide-title[ Structures de contrôle (1/3) ]
+
+.cadoles-clearfix[
+**Tests et conditions**
+]
+```js
+// Opérateurs de comparaison: <, >, >=, <=, ==, ===, !=, !==
+
+var test = 1;
+
+if(test < 1) {
+  console.log('test est strictement inférieur à 1');
+} else if(test > 1) {
+  console.log('test est strictement supérieur à 2');
+} else {
+  console.log('test est égal à 1');
+}
+
+test = 'foo';
+
+switch(test) {
+  case 'foo':
+    console.log('foo !');
+    break;
+  case 'bar':
+    console.log('bar !');
+    break;
+  default:
+    console.log('default !');
+}
+```
--- a/javascript/base/structures-2.md
+++ b/javascript/base/structures-2.md
@ -0,0 +1,27 @@
+# .cadoles-slide-title[Structures de contrôle (2/3)]
+
+.cadoles-clearfix[
+**Tests, transitivité, égalité stricte et petites subtilités**
+]
+```js
+var test;
+
+test = 1 == '1';            // -> true
+test = 1 === '1';           // -> false
+
+test = 0 == false;          // -> true
+test = 0 === false;         // -> false
+
+test = 1 == true;           // -> true
+test = 1 === true;          // -> false
+
+test = '' == false;         // -> true
+test = '' === false;        // -> false
+
+test = [] == false;         // -> true
+test = [] === false;        // -> false
+
+test = undefined == null;   // -> true
+test = undefined == false;  // -> false
+test = NaN == NaN;          // -> false
+```
--- a/javascript/base/structures-3.md
+++ b/javascript/base/structures-3.md
@ -0,0 +1,28 @@
+# .cadoles-slide-title[Structures de contrôle (3/3)]
+
+.cadoles-clearfix[
+**Itérations**
+]
+```js
+for(var i = 0; i < 5; i++) {
+  console.log(i);
+}
+
+var j = 5;
+
+while(j > 0) {
+  console.log('Loop:', j);
+  j -= 1;
+}
+
+j = 0;
+
+do {
+  console.log('Loop:', j);
+  j += 1;
+} while(j < 5);
+
+```
+** Instructions de contrôle des boucles **
+- `break;` Sort de la boucle
+- `continue;` Interromp la boucle et passe à l'itération suivante
--- a/javascript/base/tableaux-1.md
+++ b/javascript/base/tableaux-1.md
@ -0,0 +1,30 @@
+# .cadoles-slide-title[Tableaux (1/2)]
+
+.cadoles-clearfix[
+**Différentes notations**
+]
+```js
+var arr = [1, 2, 3]; // A préférer
+arr = new Array(1, 2, 3);
+
+// Attention !
+arr = new Array(3);   // -> [undefined, undefined, undefined]
+```
+**Manipulation d'un tableau**
+```js
+var arr = [1, 2, 3];
+
+// Propriétés
+arr.length          // -> 3
+arr[0]              // -> 1
+
+// Méthodes (liste non exhaustive)
+arr.push(4);        // -> [1, 2, 3, 4]
+arr.pop();          // -> [1, 2, 3]
+arr.unshift(0);     // -> [0, 1, 2, 3]
+arr.shift();        // -> [1, 2, 3]
+arr.indexOf(2)      // -> 1
+arr = [2, 3, 1];
+arr.sort();         // -> [1, 2, 3]
+arr.join(', ');     // -> '1, 2, 3'
+```
--- a/javascript/base/tableaux-2.md
+++ b/javascript/base/tableaux-2.md
@ -0,0 +1,48 @@
+# .cadoles-slide-title[Tableaux (2/2)]
+
+.cadoles-clearfix[
+**Méthodes de parcours et transformations**
+]
+```js
+var arr = [1, 2, 3];
+
+// Traverser le tableau
+arr.forEach(function(item, index) {
+  console.log('Item:', item, 'Index:', index);
+});
+
+// Transformer un tableau
+var square = arr.map(function(item, index) {
+  return item*item;
+}); // -> [1, 4, 9]
+
+// Réduire un tableau
+var sum = arr.reduce(function(memo, item, index) {
+  return memo+item;
+}, 0); // -> 6
+```
+**Exercice**
+```js
+var arr = [15, 20, 15, 16, -1, 4];
+
+var max = arr.??(function(??) {
+  ??
+}, ??);
+
+console.log(max);   // -> 20
+```
+???
+
+Solution Exo
+```js
+var arr = [15, 20, 15, 16, -1, 4];
+
+var max = arr.reduce(function(memo, item, index) {
+  if(!memo) {
+    memo = item;
+  } else if(item >= memo) {
+    memo = item;
+  }
+  return memo;
+});
+```
--- a/javascript/base/variables-1.md
+++ b/javascript/base/variables-1.md
@ -0,0 +1,33 @@
+# .cadoles-slide-title[Variables (1/2)]
+
+.cadoles-clearfix[
+Javascript est un langage **faiblement typé**.
+]
+```js
+var foo; // Une variable peut être déclarée, avec ou sans valeur
+var bar = 'hello world !';
+
+// Elle peut changer de type de valeur en cours d'exécution
+bar = 5
+
+// Incrémentation...
+
+bar += 1; // -> 6
+bar -= 2; // -> 4
+
+// ... ou concaténation
+bar = 'hello';
+bar += ' world !';
+console.log(bar); // -> 'hello world !'
+
+```
+**À votre avis ?**
+```js
+var foo = 'foo';
+foo += 1;
+console.log(foo)    // Résultat ?
+
+var bar = 'bar';
+bar -= 1;
+console.log(bar)    // Résultat ?
+```
--- a/javascript/base/variables-2.md
+++ b/javascript/base/variables-2.md
@ -0,0 +1,25 @@
+# .cadoles-slide-title[Variables (2/2)]
+
+.cadoles-clearfix[
+**Types**
+]
+```js
+var foo;
+
+// Types primaires
+
+foo = 0;      // Number, pas de distinction entre nombres flottants ou entiers
+foo = 'baz';  // String, peut être délimité par ' ou ", pas de signification particulière
+foo = true;   // Boolean
+
+// Types composites
+
+foo = { prop1: 'World' };   // Object
+foo = [1, 2, 3];            // Array
+
+// Types spéciaux
+
+foo = undefined;
+foo = null;
+foo = NaN;
+```
--- a/javascript/bower.json
+++ b/javascript/bower.json
@ -0,0 +1,20 @@
+{
+  "name": "javascript",
+  "version": "0.0.0",
+  "authors": [
+    "William Petit <wpetit@cadoles.com>"
+  ],
+  "license": "CC BY-NC-SA 2.0",
+  "homepage": "https://www.cadoles.com/wordpress/formations/",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "remark": "~0.10.2"
+  }
+}
--- a/javascript/bower_components/remark/.bower.json
+++ b/javascript/bower_components/remark/.bower.json
@ -0,0 +1,42 @@
+{
+  "name": "remark",
+  "homepage": "http://remarkjs.com/",
+  "authors": [
+    "Ole Petter Bang <olepbang@gmail.com>"
+  ],
+  "description": "A simple, in-browser, markdown-driven slideshow tool.",
+  "main": "out/remark.js",
+  "keywords": [
+    "Markdown",
+    "Slides"
+  ],
+  "license": "MIT",
+  "ignore": [
+    ".gitignore",
+    ".gitmodules",
+    ".jshintignore",
+    ".jshintrc",
+    "HISTORY.md",
+    "LICENSE",
+    "make.js",
+    "Makefile",
+    "package.json",
+    "bower_components",
+    "node_modules",
+    "src",
+    "test",
+    "vendor",
+    "out/tests.js"
+  ],
+  "version": "0.10.2",
+  "_release": "0.10.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.10.2",
+    "commit": "359f491fae0e53b2e8102b6a264a236fc28b5480"
+  },
+  "_source": "https://github.com/gnab/remark.git",
+  "_target": "~0.10.2",
+  "_originalSource": "remark",
+  "_direct": true
+}
--- a/javascript/bower_components/remark/.travis.yml
+++ b/javascript/bower_components/remark/.travis.yml
@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "0.10"
--- a/javascript/bower_components/remark/LICENCE
+++ b/javascript/bower_components/remark/LICENCE
@ -0,0 +1,20 @@
+Copyright (c) 2011-2013 Ole Petter Bang <olepbang@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/javascript/bower_components/remark/README.md
+++ b/javascript/bower_components/remark/README.md
@ -0,0 +1,116 @@
+# remark
+
+[![Build Status](https://travis-ci.org/gnab/remark.svg?branch=develop)](https://travis-ci.org/gnab/remark)
+
+A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:
+
+- Markdown formatting, with smart extensions
+- Presenter mode, with cloned slideshow view
+- Syntax highlighting, supporting a range of languages
+- Slide scaling, thus similar appearance on all devices / resolutions
+- Touch support for smart phones and pads, i.e. swipe to navigate slides
+
+Check out [this remark slideshow](http://gnab.github.com/remark) for a brief introduction.
+
+To render your Markdown-based slideshow on the fly, checkout [Remarkise](https://gnab.github.io/remark/remarkise).
+
+### Getting Started
+
+It takes only a few, simple steps to get up and running with remark:
+
+1. Create a HTML file to contain your slideshow (see below)
+2. Open the HTML file in a decent browser
+3. Edit the Markdown and/or CSS styles as needed, save and refresh!
+
+Below is a boilerplate HTML file to get you started:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Title</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <style type="text/css">
+      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
+      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
+      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
+
+      body { font-family: 'Droid Serif'; }
+      h1, h2, h3 {
+        font-family: 'Yanone Kaffeesatz';
+        font-weight: normal;
+      }
+      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+    </style>
+  </head>
+  <body>
+    <textarea id="source">
+
+class: center, middle
+
+# Title
+
+---
+
+# Agenda
+
+1. Introduction
+2. Deep-dive
+3. ...
+
+---
+
+# Introduction
+
+    </textarea>
+    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
+    </script>
+    <script>
+      var slideshow = remark.create();
+    </script>
+  </body>
+</html>
+```
+
+### Moving On
+
+For more information on using remark, please check out the [wiki](http://github.com/gnab/remark/wiki) pages.
+
+### Real-world remark slideshows
+
+On using remark:
+
+- [The Official remark Slideshow](http://gnab.github.com/remark)
+- [Coloured Terminal Listings in remark](http://joshbode.github.com/remark/ansi.html) by [joshbode](https://github.com/joshbode)
+
+Other interesting stuff:
+
+- [gnab.github.com/editorjs](http://gnab.github.com/editorjs)
+- [judoole.github.com/GroovyBDD](http://judoole.github.com/GroovyBDD)
+- [kjbekkelund.github.com/nith-coffeescript](http://kjbekkelund.github.com/nith-coffeescript)
+- [kjbekkelund.github.com/js-architecture-backbone](http://kjbekkelund.github.com/js-architecture-backbone)
+- [bekkopen.github.com/infrastruktur-som-kode](http://bekkopen.github.com/infrastruktur-som-kode)
+- [ivarconr.github.com/Test-Driven-Web-Development/slides](http://ivarconr.github.com/Test-Driven-Web-Development/slides)
+- [havard.github.com/node.js-intro-norwegian](http://havard.github.com/node.js-intro-norwegian)
+- [mobmad.github.com/js-tdd-erfaringer](http://mobmad.github.com/js-tdd-erfaringer)
+- [torgeir.github.com/busterjs-lightning-talk](http://torgeir.github.com/busterjs-lightning-talk)
+- [roberto.github.com/ruby-sinform-2012](http://roberto.github.com/ruby-sinform-2012)
+- [http://asmeurer.github.io/python3-presentation/slides.html](http://asmeurer.github.io/python3-presentation/slides.html)
+
+### Other systems integrating with remark
+
+- [http://platon.io](http://platon.io)
+- [http://markdowner.com](http://markdowner.com)
+- [http://remarks.sinaapp.com](http://remarks.sinaapp.com/)
+
+### Credits
+
+- [torgeir](http://github.com/torgeir), for invaluable advice and feedback.
+- [kjbekkelund](https://github.com/kjbekkelund), for numerous pull requests.
+- [gureckis](https://github.com/gureckis), for several pull requests.
+- [freakboy3742](https://github.com/freakboy3742), for several pull requests.
+
+### License
+
+remark is licensed under the MIT license. See LICENSE for further
+details.
--- a/javascript/bower_components/remark/boilerplate-local.html
+++ b/javascript/bower_components/remark/boilerplate-local.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Awesome Presentation</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <style type="text/css">
+      @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
+      @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
+      @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
+
+      body { font-family: 'Droid Serif'; }
+      h1, h2, h3 {
+        font-family: 'Yanone Kaffeesatz';
+        font-weight: normal;
+      }
+      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+    </style>
+  </head>
+  <body>
+    <textarea id="source">
+
+class: center, middle
+
+# My Awesome Presentation
+
+???
+
+Notes for the _first_ slide!
+
+---
+
+# Agenda
+
+1. Introduction
+2. Deep-dive
+3. ...
+
+[NOTE]: Note that you need remark.js alongside this html file, but no internet connection.
+---
+
+# Introduction
+
+    </textarea>
+    <script src="out/remark.js" type="text/javascript">
+    </script>
+    <script type="text/javascript">
+      var slideshow = remark.create();
+    </script>
+  </body>
+</html>
--- a/javascript/bower_components/remark/boilerplate-remote.html
+++ b/javascript/bower_components/remark/boilerplate-remote.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Awesome Presentation</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <style type="text/css">
+      @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
+      @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
+      @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
+
+      body { font-family: 'Droid Serif'; }
+      h1, h2, h3 {
+        font-family: 'Yanone Kaffeesatz';
+        font-weight: normal;
+      }
+      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+    </style>
+  </head>
+  <body>
+    <textarea id="source">
+
+class: center, middle
+
+# My Awesome Presentation
+
+---
+
+# Agenda
+
+1. Introduction
+2. Deep-dive
+3. ...
+
+[NOTE]: Note that you need active internet connection to access remark.js script file
+---
+
+# Introduction
+
+    </textarea>
+    <script src="http://gnab.github.io/remark/downloads/remark-0.5.9.min.js" type="text/javascript">
+    </script>
+    <script type="text/javascript">
+      var slideshow = remark.create();
+    </script>
+  </body>
+</html>
--- a/javascript/bower_components/remark/boilerplate-single.html
+++ b/javascript/bower_components/remark/boilerplate-single.html
--- a/javascript/bower_components/remark/bower.json
+++ b/javascript/bower_components/remark/bower.json
@ -0,0 +1,31 @@
+{
+  "name": "remark",
+  "homepage": "http://remarkjs.com/",
+  "authors": [
+    "Ole Petter Bang <olepbang@gmail.com>"
+  ],
+  "description": "A simple, in-browser, markdown-driven slideshow tool.",
+  "main": "out/remark.js",
+  "keywords": [
+    "Markdown",
+    "Slides"
+  ],
+  "license": "MIT",
+  "ignore": [
+    ".gitignore",
+    ".gitmodules",
+    ".jshintignore",
+    ".jshintrc",
+    "HISTORY.md",
+    "LICENSE",
+    "make.js",
+    "Makefile",
+    "package.json",
+    "bower_components",
+    "node_modules",
+    "src",
+    "test",
+    "vendor",
+    "out/tests.js"
+  ]
+}
--- a/javascript/bower_components/remark/out/remark.js
+++ b/javascript/bower_components/remark/out/remark.js
--- a/javascript/bower_components/remark/out/remark.min.js
+++ b/javascript/bower_components/remark/out/remark.min.js
--- a/javascript/cadoles-remark-macros.js
+++ b/javascript/cadoles-remark-macros.js
@ -0,0 +1,10 @@
+(function() {
+
+  remark.macros.include = function() {
+    var req = new XMLHttpRequest();
+    req.open('GET', this, false);
+    req.send();
+    return remark.convert(req.responseText.replace(/\r\n/g, '\n'));
+  };
+
+}());
--- a/javascript/cadoles-theme.css
+++ b/javascript/cadoles-theme.css
@ -0,0 +1,47 @@
+/* Thème Cadoles */
+
+ul     	     {
+  list-style: none;
+}
+
+ul li:before {
+  content: "\25B8 ";
+  color: #5379B4;
+  margin-right: 5px;
+}
+
+ul > li {
+  line-height: 1.5em;
+}
+
+.remark-slide-content {
+  background-image: url('../beamer-skel/img/banner01.png'), url('../beamer-skel/img/logo-cadoles-01.png');
+  background-position: top center, center 98% !important;
+  background-size: contain, 150px !important;
+}
+
+.remark-code-line {
+  font-size: 0.85em;
+}
+
+.cadoles-slide-title {
+  color: white;
+  float: left;
+  clear: right;
+  font-size: 50px;
+  margin-top: -40px;
+  margin-left: -50px;
+  margin-bottom: 50px;
+}
+
+.cadoles-slide-title:after {
+  content: '';
+  clear: both;
+}
+
+.cadoles-blue { color: #5379B4; }
+.cadoles-clearfix { clear: both; }
+.cadoles-list > ul { font-size: 1.5em; }
+.cadoles-list > ul ul { font-size: 1em; }
+.cadoles-small { font-size: 0.8em; }
+.cadoles-xs { font-size: 0.7em; }