Change many things

css/style.css

@@ -23,6 +23,9 @@ body {
   min-height: 100%;
   overflow: hidden;
 }
+a {
+  color: #00897b;
+}
 
 /* Columns */
 .col-1-2 {
@@ -153,7 +156,7 @@ span.breadcrumb::before {
   margin-bottom: 6px;
 }
 .page blockquote {
-  border-left: 5px solid #ffb74d;
+  border-left: 5px solid #8d6e63;
 }
 .page img {
   max-width: 100%;

react-tuto/src/components/Home.js

@@ -19,10 +19,10 @@ class Home extends React.Component {
     return (
       <div className="page">
         <div className="breadcrumb-wrapper">
-          <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
+          <span className="breadcrumb teal-text"><i className="material-icons">home</i></span>
           <span className="breadcrumb grey-text">Accueil</span>
         </div>
-        <h4 className="header orange-text">Accueil</h4>
+        <h4 className="header brown-text">Accueil</h4>
         <ReactMarkdown source={intro} />
         {getSectionLinks()}
       </div>

react-tuto/src/components/Navbar.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 class Navbar extends React.Component {
   render() {
     return (
-      <nav className="light-blue lighten-1" role="navigation">
+      <nav className="teal lighten-1" role="navigation">
         <div className="nav-wrapper"><Link id="logo-container" to="/" className="brand-logo">
           <img src="img/logo-ipi.png" alt="logo IPI" />
           <img src="img/logo-python.png" alt="logo Python" />

react-tuto/src/components/Page.js

@@ -41,12 +41,12 @@ class Page extends React.Component {
     return (
       <div className="page">
         <div className="breadcrumb-wrapper">
-          <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
-          <Link to={section.path} className="breadcrumb light-blue-text">{section.title}</Link>
+          <Link to='/' className="breadcrumb teal-text"><i className="material-icons">home</i></Link>
+          <Link to={section.path} className="breadcrumb teal-text">{section.title}</Link>
           <span className="breadcrumb grey-text">{title}</span>
         </div>
 
-        <h4 className="header orange-text">{title}</h4>
+        <h4 className="header brown-text">{title}</h4>
         <ReactMarkdown source={content} escapeHtml={false} />
       </div>
     );

react-tuto/src/index.js

@@ -20,10 +20,10 @@ function getSection(sectionIndex) {
   return () => (
     <div>
       <div className="breadcrumb-wrapper">
-        <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
+        <Link to='/' className="breadcrumb teal-text"><i className="material-icons">home</i></Link>
         <span className="breadcrumb grey-text">{section.title}</span>
       </div>
-      <h4 className="header orange-text">{section.title}</h4>
+      <h4 className="header brown-text">{section.title}</h4>
       {getSectionPageLinks(section)}
     </div>
   );
@@ -43,7 +43,7 @@ function getSectionPagination(section, activeIndex) {
         </li>
         {
           section.items.map((page, pIndex) => (
-            <li key={pIndex} className={ activeIndex === pIndex ? "active orange": "waves-effect"}>
+            <li key={pIndex} className={ activeIndex === pIndex ? "active brown": "waves-effect"}>
               <Link to={section.path + page.path}>{pIndex + 1}</Link>
             </li>
           ))

react-tuto/src/markdown/1. Setup Windows/05. Pour terminer.md

@@ -6,4 +6,4 @@ Pour terminer, deux points importants :
     - NotePad++
 - Contrairement aux "malheureux" sous OS X ou Linux qui doivent utiliser `python3`, tu utiliseras tout simplement `python` pour invoquer le Python tout-puissant.
 
-<img alt="python" src="img/tuto/python.gif" />
+<img alt="python" src="img/tuto/python.gif" />

react-tuto/src/markdown/2. Setup OS X/01. Python 3.md

@@ -19,4 +19,4 @@ Ce fichier peut être vide. Il permet de modifier les variables d'environnement.
 
     export PATH=/usr/local/bin:/usr/local/sbin:$PATH
 
-Puis sauvegarde (Ctrl+O normalement).
+Puis sauvegarde (Ctrl+O normalement). Tu peux avoir besoin de quitter ce terminal et d'en redémarrer un pour que ces modifs prennent effet.

react-tuto/src/markdown/2. Setup OS X/05. Pour terminer.md

@@ -5,4 +5,4 @@ Pour terminer, deux points importants :
     - Sublime Text
 - Contrairement aux "heureux" utilisateurs de Windows qui peuvent juste utiliser `python`, tu devras utiliser `python3` pour invoquer le Python tout-puissant. Sinon le système va confondre avec Python 2 qui est installé en standard sous OS X. Et je te le dis tout de suite, ça serait fâcheux !
 
-<img alt="python" src="img/tuto/python.gif" />
+<img alt="python" src="img/tuto/python.gif" />

react-tuto/src/markdown/3. Setup Linux/01. Python 3.md

@@ -0,0 +1,29 @@
+<blockquote>
+<strong>Très important</strong>, on va utiliser <strong>Python 3</strong> et non pas Python 2.
+</blockquote>
+
+En février 2018, on en est à la version 3.6.4 de Python. Mais n'importe quelle version supérieure à 3 devrait suffire, et les distributions récentes intègrent la 3.5.
+
+D'abord ouvre un terminal, et fais une première vérification en tapant `python -v`.
+    
+
+Il y a de **très fortes chances** pour que tu voies apparaître quelque chose comme "Python 2.7.x", car Python 2 est encore installé par défaut sur de nombreuses distros.
+
+Essaie donc `python3 -v`. Si tu n'as pas une erreur du style "Command not found", tu dois avoir un affichage contenant "Python 3.y.z", par exemple 3.5.4.
+
+Si la commande est introuvable, il faut l'installer :
+
+- Ubuntu / Debian : `sudo apt-get install python3 python3-pip`
+- Autre : me demander !!
+
+Ensuite, tu dois pouvoir refaire `python3 -v` et obtenir l'affichage attendu.
+
+Si ce n'est pas le cas, lance l'éditeur Nano pour éditer le fichier `.profile` à la racine de ton dossier utilisateur, en tapant :
+
+    nano ~/.profile
+
+Ce fichier peut être vide. Il permet de modifier les variables d'environnement. Ajoutes-y :
+
+    export PATH=/usr/local/bin:/usr/local/sbin:$PATH
+
+Puis sauvegarde (Ctrl+O normalement). Tu peux avoir besoin de quitter ce terminal et d'en redémarrer un pour que ces modifs prennent effet.

react-tuto/src/markdown/3. Setup Linux/02. Git.md

@@ -0,0 +1,7 @@
+<blockquote>
+Normalement, on a <strong>déjà installé Git ensemble.</strong>
+</blockquote>
+
+Pour télécharger Git, le lien est disponible sur [la page d'accueil de Git](https://git-scm.com/).
+
+Sinon, sous Ubuntu / Debian, un `sudo apt-get install git` doit suffire.

react-tuto/src/markdown/3. Setup Linux/03. Django et Selenium.md

@@ -0,0 +1,11 @@
+<blockquote>
+On va maintenant installer des <strong>dépendances</strong> pour Git : <strong>Django</strong> et <strong>Selenium</strong>
+</blockquote>
+
+On a déjà testé l'installation correcte de Python 3 en tapant `python3 -v`dans le terminal. Restes-y ou retournes-y, et tape :
+
+    pip3 install Django selenium
+
+**Normalement** ça prend un peu de temps, mais il ne devrait pas trop broncher.
+
+**Pour info**, pip est le "gestionnaire de packages" de Python. Il permet d'installer, via le shell, des librairies, frameworks, ou programmes, qui ne sont pas livrés avec Python en standard.

react-tuto/src/markdown/3. Setup Linux/04. geckodriver.md

@@ -0,0 +1,14 @@
+Quelques explications, car tu te demandes sûrement pourquoi on installe tout ça.
+
+Python et Git, ça semble évident. Mais le reste ?
+- Django est un "framework web" écrit en Python. Il permet de créer des **applications web** dans ce langage.
+- Selenium est un outil qui permet de lancer un navigateur comme Firefox, et de le piloter par un programme. À quoi ça sert ? Cela va nous permettre de lancer des "tests automatisés", pour vérifier que notre appli se comporte comme on l'attend.
+- geckodriver est une "interface" entre Selenium et le navigateur **Firefox** (dont le moteur s'appelle Gecko, et que tu dois **installer** si ce n'est déjà fait).
+
+geckodriver peut être téléchargé sur [la page "releases" du GitHub](https://github.com/mozilla/geckodriver/releases).
+
+Il existe des versions Linux 32 et 64 bits, c'ets probablement cette dernière qu'il te faut. Voici son lien direct : [geckodriver-v0.19.1-linux64.tar.gz](https://github.com/mozilla/geckodriver/releases/download/v0.19.1/geckodriver-v0.19.1-linux64.tar.gz).
+
+Décompresse cette archive et tu obtiendras un fichier `geckodriver` (exécutable). On va le garder bien au chaud pour la suite !
+
+Déplace `geckodriver` dans le répertoire `python-tdd`, que tu as du créer avant, et dans lequel tu as mis `python-web-tutorial` après décompression. 

react-tuto/src/markdown/3. Setup Linux/05. Pour terminer.md

@@ -0,0 +1,8 @@
+Pour terminer, deux points importants :
+- Utilise un éditeur correct, capable de **coloration syntaxique** pour les programmes Python. Tu te rendras vite compte si ce n'est pas le cas. Parmi les bons candidats :
+    - Atom
+    - Brackets
+    - Sublime Text
+- Contrairement aux "heureux" utilisateurs de Windows qui peuvent juste utiliser `python`, tu devras utiliser `python3` pour invoquer le Python tout-puissant. Sinon le système va confondre avec Python 2 qui est installé en standard sous Linux. Et je te le dis tout de suite, ça serait fâcheux !
+
+<img alt="python" src="img/tuto/python.gif" />

react-tuto/src/markdown/4. Bases de Python/01. Premier programme.md

@@ -0,0 +1,21 @@
+Jeune padawan, prépare-toi à devenir un Jedi du Python !
+
+Pour cela, dégaîne tes armes l'éditeur de texte, et le terminal.
+
+Dans ton dossier `python-tdd/bases`, crée le fichier `01-premier.py`, avec le contenu suivant :
+
+```python
+message = "Hello galaxy"
+print(message)
+```
+
+Puis dans le terminal (marche sous OS X, Linux *et* Windows/PowerShell) :
+
+    cd ~/CHEMIN/VERS/python-tdd/bases
+    python 01-premier.py
+
+Cela produit l'affichage de `Hello galaxy` dans le terminal. Ce petit programme nous permet déjà de faire trois constats.
+
+> Python est un langage de script, et n'a pas besoin de passer par une phase de compilation.
+> Contrairement à JavaScript (lui aussi un langage de script), on **ne déclare pas** les variables en Python, on les affecte directement (souviens-toi du <code><strong>var</strong> variable</code> en JS)
+> Il n

react-tuto/src/resources/const.js

@@ -3,7 +3,8 @@ Cette appli est une intro au **développement web en Python**, qui s'adresse à
 qui connaissent déjà d'autres langages - Java et JavaScript en l'occurence.
 
 On va aborder :
-- Les bases *minimales* nécessaires de Python, et notamment sa syntaxe particulière
-- Le framework Django qui permet d'écrire des applications professionnelles en Python
-- La méthode appelée TDD pour "Test-Driven Développement", en français "Développement piloté par les tests". Sous cet acronyme barbare se cache une méthodologie efficace pour coder **proprement** des applications **fiables**.
+> Les bases *minimales* de Python
+> Les bases du protocole HTTP
+> Le framework web Django
+> Le TDD ou "Test-Driven Développement" (fr: "Développement piloté par les tests"), une méthodologie efficace pour coder des applications **fiables** et **maintenables**.
 `;