Couple of fixes + prez

.gitignore

@@ -6,3 +6,5 @@ node_modules/
 .sass-cache
 css/reveal.min.css
 js/reveal.min.js
+
+build/

Licence

@@ -0,0 +1 @@
+CC-BY Ants

README.md

@@ -1,9 +1,27 @@
-Slides from our training session.
+# Slides from our training session
 
-Summary:
+## Summary
 
 - intro and programm
 - git (day 1)
 - github (day 1)
 - html, css (day 2)
-- javascript (day 2)
+- javascript (day 2)
+
+## Building with prez
+
+`npm install prez -g`
+`prez --theme black -w`
+
+### Wishes
+
+* Per slide directory data- attributes
+* support for hljs
+* Adding custom CSS ?
+
+
+
+## Licence
+
+All the content is licenced CC-BY Ants
+Reveal.js is MIT-licenced

index.html

@@ -584,18 +584,15 @@ <h2>balises de méta-données</h2>
 					<section>
 						<h2>balises de méta-données</h2>
 						<ul>
-							<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/doctype"><code>!doctype</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head"><code>head</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title"><code>title</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><code>link</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta"><code>meta</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style"><code>style</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code>script</code></a></li>
-							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code>noscript</code></a></li>
 						</ul>
 					</section>
 
-
 					<section>
 						<h2>web sémantique</h2>
 						<p><strong>un type de balise = un rôle sémantique</strong></p>
@@ -628,7 +625,6 @@ <h3>Structure d'une page</h3>
 					<section>
 						<h2>balises de section</h2>
 						<ul>
-							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body"><code>body</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"><code>article</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav"><code>nav</code></a></li>
 							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"><code>aside</code></a></li>
@@ -814,21 +810,23 @@ <h3>Choisir sa balise :</h3>
 					<section>
 						<h3>Attributs globaux :</h3>
 						<ul>
-							<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/accesskey"><code>accesskey</code></a></li>
-							<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/class"><code>class</code></a></li>
-							<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/style"><code>style</code></a></li>
-							<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidden"><code>hidden</code></a></li>
-							<li>...</li>
+
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class"><code>class</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style"><code>style</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*"><code>data-*</code></a></li>
 						</ul>
 					</section>
 
 					<section>
 						<h3>Attributs spécifiques :</h3>
 						<ul>
-							<li><a href="https://developer.mozilla.org/fr/docs/XUL/Attribute/src"><code>src</code></a></li>
-							<li><a href="https://developer.mozilla.org/fr/docs/XUL/Attribute/alt"><code>alt</code></a></li>
-							<li><a href="https://developer.mozilla.org/fr/docs/XUL/Attribute/href"><code>href</code></a></li>
-							<li><a href="https://developer.mozilla.org/fr/docs/XUL/Attribute/target"><code>target</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes"><code>src</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes"><code>alt</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code>href</code></a></li>
+							<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code>target</code></a></li>
 							<li>...</li>
 						</ul>
 					</section>
@@ -847,21 +845,21 @@ <h3>CSS</h3>
 
 					<section>
 						<h3>CSS</h3>
-						<p>Anatomie d'un élément :</p>
+						<p>Anatomie d'un élément (<em>box model</em>) :</p>
 						<img width="600" data-src="img/element_anatomy.png">
 					</section>
 
 					<section>
 						<h3>3 façons de définir un style :</h3>
 						<pre><code class="html" data-trim contenteditable>
-// dans l'élément
-<element style="..."></element>
+// dans une stylesheet
+<link rel="stylesheet" href="main.css">
 
 // dans un bloc style
 <style type="text/css"></style>
 
-// dans une stylesheet
-<link rel="stylesheet" href="main.css">
+// dans l'élément
+<element style="..."></element>
 						</code></pre>
 					</section>
 
@@ -886,8 +884,8 @@ <h3>Exemples de sélécteurs d'attributs :</h3>
 div p a {...}
 div.maClasse {...}
 div a#monId {...}
-ul > li {...} // all li directly child from ul
-div[class=”maClasse”] {...} // all div that have only this class
+ul > li {...} // all li directly children of ul
+div[class=”maClasse”] {...} // all div that only have this class
 div + span {...} // span that is adjacent to div
 a[class~=”plop”] {...} // all div that have at least this class
 						</code></pre>
@@ -919,15 +917,11 @@ <h3>Pseudo-éléments</h3>
 						</code></pre>
 					</section>
 
-					<section>
-						<h3>Poids des sélécteurs</h3>
-					</section>
-
 					<section>
 						<h3>display</h3>
-						<p>By default, block takes all the width it can independent of the content, whereas an inline will have a width that depend on the content.
-
-inline-block has both property.</p>
+						<p>Les éléments avec <strong>display: block</strong> forcent les éléménts suivant à aller à la ligne suivante. On peut choisir leur <em>width</em> et <em>height</em></p>
+						<p>Les éléments avec <strong>display: inline</strong> subissent le flux du texte (et vont à la ligne quand il n'y a plus de place sur la ligne actuelle)</p>
+						<p>Les éléments avec <strong>display: inline-block</strong> agissent comme des inline à l'extérieur et block à l'intérieur</p>
 					</section>
 
 					<section>
@@ -954,7 +948,7 @@ <h3>Arborescence d'un projet web :</h3>
 
 					<section>
 						<h3>Responsive web design</h3>
-						<img width="800" data-src="http://cdn2.hubspot.net/hubfs/477550/Blog/mars_2015/Content_is_like_water.png?t=1443798056161">
+						<img width="800" data-src="http://www.stephaniewalter.fr/wp-content/uploads/content-is-like-water-12402.jpg">
 					</section>
 
 					<section>
@@ -1023,15 +1017,25 @@ <h3>Types</h3>
 						</ul>
 
 					</section>
+
+                    <section>
+						<h3>Comparaison de valeur</h3>
+                        <ul>
+                            <li>Toujours utiliser === et !==
+                            <li>== "presque égal"
+                            <li>=== "strictement égal"
+                        </ul>
+					</section>
 
 					<section>
 						<h3>Number</h3>
+                        <p>Un seul type de nombre (pas de distinction int/float/double)</p>
 						<pre><code class="hsjs" data-trim contenteditable>
 parseInt("123", 10); // 123
 
 parseInt("010");  //  8
 
-isNaN(NaN); // true
+Number.isNaN(NaN); // true
 
 1 / 0; // Infinity
 

slides/01-index.md

@@ -0,0 +1,5 @@
+# Data-science
+
+### et méthodes de hackers
+
+<small>par [ants](http://ants.builders) / [@beingAnts](http://twitter.com/beingAnts)</small>

slides/02-introduction/01-objectfs.md

@@ -0,0 +1,7 @@
+## Objectif
+
+Vous rendre 
+<span class="fragment highlight-blue">organisés</span>, 
+<span class="fragment highlight-blue">armés</span> et
+<span class="fragment highlight-blue">autonomes</span>
+pour apprendre de la <span class="fragment highlight-red">data-science</span> par la pratique.

slides/02-introduction/02-programme.md

@@ -0,0 +1,7 @@
+## Programme
+
+1. travailler à plusieurs (git/github)
+1. les langages du web (html, css, javascript)
+1. dataviz: tableau de bord de consommation d'eau (3 jours)
+1. docker, déploiement ?
+1. ...

slides/02-introduction/03-spirit.md

@@ -0,0 +1,5 @@
+## Spirit
+
+1. NOS outils sur VOS projets avec VOS data
+1. on couvre large, vous hackez le reste
+1. support

slides/03-git-github/01-git.md

@@ -0,0 +1,7 @@
+$background:#4d7e65$
+$transition:slide$
+$background-transition:zoom$
+
+# Git
+
+### organiser son code et son travail

slides/03-git-github/02-git-github.md

@@ -0,0 +1,7 @@
+$background:#4d7e65$
+
+# Git / GitHub
+
+**Git** : gestionnaire de version (sur votre ordinateur)
+
+**GitHub** : plateforme de collaboration (sur le cloud)

slides/03-git-github/03-git-avantages.md

@@ -0,0 +1,5 @@
+$background:#4d7e65$
+
+Git évite de dupliquer du code pour le versioner, permet de revenir en arrière et surtout permet de toujours savoir où on en est.
+
+Outils indispensable pour organiser son travail sur un gros projet.

slides/03-git-github/04-github-avantages.md

@@ -0,0 +1,5 @@
+$background:#4d7e65$
+
+GitHub permet de s'échanger du code, de travailler à plusieurs sur un même projet et de communiquer sur les problèmes.
+
+GitHub permet en outre de déployer des services et de recruter.

slides/03-git-github/05-environement.md

@@ -0,0 +1,6 @@
+$background:#4d7e65$
+
+## Environnement de travail
+
+* **Editeur** : [Atom](https://atom.io/), [Sublime](http://www.sublimetext.com/3)
+* **Console** : iTerm2 (Mac), [ConEmu](https://conemu.github.io/)

slides/03-git-github/06-configurer-git.md

@@ -0,0 +1,19 @@
+$background:#4d7e65$
+
+## Configurer git
+
+<style>pre{background: #3f3f3f;}</style>
+
+````bash
+# dans le cas où vous êtes derrière un proxy
+git config --global http.proxy http://proxyuser:proxypwd@proxy.server.com:8080
+git config --global https.proxy https://proxyuser:proxypwd@proxy.server.com:8080
+
+# si vous ne l'avez jamais fait auparavant
+git config --global user.name "Your Name"
+git config --global user.email "your_email@whatever.com"
+
+# pour windows
+git config --global core.autocrlf true
+git config --global core.safecrlf true
+````

slides/03-git-github/07-init.md

@@ -0,0 +1,16 @@
+$background:#4d7e65$
+
+## Init
+
+<style>pre{background: #3f3f3f;}</style>
+
+````bash
+# créer un dossier
+mkdir testgit
+# s'y déplacer
+cd testgit
+# initialison git
+git init
+````
+
+ce qui crée un dossier `.git` contenant tout ce qui concerne git. C'est léger.

slides/03-git-github/08-status.md

@@ -0,0 +1,19 @@
+$background:#4d7e65$
+
+## Status
+
+<style>pre{background: #3f3f3f;}</style>
+
+````bash
+git status
+````
+
+donne:
+
+````bash
+On branch master
+
+Initial commit
+
+nothing to commit (create/copy files and use "git add" to track)
+````

slides/03-git-github/09-status-untracked.md

@@ -0,0 +1,18 @@
+$background:#4d7e65$
+
+## Status
+
+<style>pre{background: #3f3f3f;}</style>
+
+````bash
+touch testFile.txt
+````
+
+après ce fichier crée, `git status` donne:
+
+````bash
+Untracked files:
+(use "git add &lt;file>..." to include in what will be committed)
+
+	testFile.txt
+````

slides/03-git-github/10-git-add.md

@@ -0,0 +1,18 @@
+$background:#4d7e65$
+
+## git add
+
+<style>pre{background: #3f3f3f;}</style>
+
+````bash
+git add testFile.txt
+````
+
+indique a git qu'on veut le versioner
+
+````bash
+Changes to be committed:
+  (use "git rm --cached &lt;file>..." to unstage)
+
+	new file:   testFile.txt
+````

slides/03-git-github/11-git-commit.md

@@ -0,0 +1,19 @@
+$background:#4d7e65$
+
+## git commit
+
+<style>pre{background: #3f3f3f;}</style>
+
+````bash
+git commit
+````
+
+ouvre un éditeur (vim, nano) pour décrire le commit.
+
+Une alternative rapide:
+
+````bash
+git commit -m "added empty file to project"
+````
+
+faites un `git status` pour voir...