Resync

Resynchronisation avec le projet original
e-books · Dec 2, 2013 · 6826954 · 6826954
2 parents 93017f6 + d86cb76
commit 6826954
Show file tree

Hide file tree

Showing 16 changed files with 2,086 additions and 56 deletions.
diff --git a/.02-MAINS-DANS-LE-CAMBOUIS.md.swp b/.02-MAINS-DANS-LE-CAMBOUIS.md.swp
diff --git a/00-PREAMBULE.md b/00-PREAMBULE.md
@@ -29,6 +29,7 @@ Remerciements aussi pour :
 - [FlorianBruniaux ](https://github.com/FlorianBruniaux) : update versions, Twitter Bootstrap etc.
 - [htulipe](https://github.com/htulipe) : correctifs
 - [cedricmessiant](https://github.com/cedricmessiant) : routeur et fixes
+- [AlainGourves](https://github.com/AlainGourves) : correctifs
 
 
 ##Avertissement

diff --git a/02-MAINS-DANS-LE-CAMBOUIS.md b/02-MAINS-DANS-LE-CAMBOUIS.md
@@ -77,11 +77,12 @@ Nous allons aussi récupérer le framework CSS **Twitter Bootstrap** qui nous pe
   <head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 		<title>Backbone</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 		<!-- === Styles Twitter Bootstrap -->
 		<!--V 3.0.1 ...-->
 		<link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
-        	<link href="libs/vendors/css/bootstrap-theme.css" rel="stylesheet">
+		<link href="libs/vendors/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
   </head>
 
   <!-- === ici votre IHM === -->
@@ -119,11 +120,12 @@ Dans notre toute nouvelle page `index.html`, préparons un peu notre bac à sabl
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 		<title>Backbone</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 		<!-- === Styles Twitter Bootstrap -->
 		<!--V 3.0.1 ...-->
 		<link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
-        	<link href="libs/vendors/css/bootstrap-theme.css" rel="stylesheet">
+		<link href="libs/vendors/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
 
 		<!-- === à insérer entre les 2 <link> === -->
 		<style>

diff --git a/02-MAINS-DANS-LE-CAMBOUIS.md.BACKUP.12448.md b/02-MAINS-DANS-LE-CAMBOUIS.md.BACKUP.12448.md
diff --git a/02-MAINS-DANS-LE-CAMBOUIS.md.BASE.12448.md b/02-MAINS-DANS-LE-CAMBOUIS.md.BASE.12448.md
diff --git a/02-MAINS-DANS-LE-CAMBOUIS.md.LOCAL.12448.md b/02-MAINS-DANS-LE-CAMBOUIS.md.LOCAL.12448.md
diff --git a/02-MAINS-DANS-LE-CAMBOUIS.md.REMOTE.12448.md b/02-MAINS-DANS-LE-CAMBOUIS.md.REMOTE.12448.md
diff --git a/02-MAINS-DANS-LE-CAMBOUIS.md.orig b/02-MAINS-DANS-LE-CAMBOUIS.md.orig
diff --git a/03-1ERS-CONTACTS-AVEC-BACKBONE.md b/03-1ERS-CONTACTS-AVEC-BACKBONE.md
@@ -25,9 +25,10 @@ Nous allons utiliser notre même page `index.html`, mais faisons un peu de ména
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Backbone</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--V 3.0.1 ...-->
     <link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
-    <link href="libs/vendors/css/bootstrap-theme.css" rel="stylesheet">
+    <link href="libs/vendors/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
 
     <style>
       body {
@@ -358,9 +359,10 @@ Le code final de votre page devrait ressembler à ceci :
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Backbone</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--V 3.0.1 ...-->
     <link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
-    <link href="libs/vendors/css/bootstrap-theme.css" rel="stylesheet">
+    <link href="libs/vendors/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
 
     <style>
       body {

diff --git a/04-LE-MODELE-OBJET-DE-BACKBONE.md b/04-LE-MODELE-OBJET-DE-BACKBONE.md
@@ -82,17 +82,22 @@ Nous obtiendrons à l’exécution :
 
 ###Des propriétés
 
-Les propriétés se déclarent dans le constructeur (elles sont générées à l’exécution), et vous pouvez déclarer les valeurs par défaut à l’extérieur du constructeur :
+Les propriétés se déclarent dans le constructeur (elles sont générées à l’exécution)
 
 Ajout de propriétés
 
 ```javascript
 var Personne = Kind.extend({
-  prenom: "John",
-  nom: "Doe",
+
   constructor: function(prenom, nom) {
-    if (prenom) this.prenom = prenom;
-    if (nom) this.nom = nom;
+  	this.prenom = "John";
+  	this.nom = "Doe";
+    if (prenom) { 
+    	this.prenom = prenom; 
+    } 
+    if (nom) {
+    	this.nom = nom;
+    }
 
     console.log("Bonjour, je suis ", this.prenom, this.nom);
   }
@@ -102,6 +107,9 @@ var john = new Personne();
 var bob = new Personne("Bob", "Morane");
 ```
 
+**Warning:** ne jamais définir les propriétés en dehors du `constructor`
+
+
 Nous obtiendrons à l’éxécution :
 
   Bonjour, je suis  John Doe
@@ -116,11 +124,16 @@ Ajout d’une méthode
 
 ```javascript
 var Personne = Kind.extend({
-  prenom: "John",
-  nom: "Doe",
+
   constructor: function(prenom, nom) {
-    if (prenom) this.prenom = prenom;
-    if (nom) this.nom = nom;
+  	this.prenom = "John";
+  	this.nom = "Doe";
+    if (prenom) { 
+    	this.prenom = prenom; 
+    } 
+    if (nom) {
+    	this.nom = nom;
+    }
   },
   bonjour: function() {
     console.log("Bonjour, je suis ", this.prenom, this.nom);
@@ -148,11 +161,16 @@ Ajout & utilisation de membres statiques
 
 ```javascript
 var Personne = Kind.extend({
-  prenom: "John",
-  nom: "Doe",
+
   constructor: function(prenom, nom) {
-    if (prenom) this.prenom = prenom;
-    if (nom) this.nom = nom;
+  	this.prenom = "John";
+  	this.nom = "Doe";
+    if (prenom) { 
+    	this.prenom = prenom; 
+    } 
+    if (nom) {
+    	this.nom = nom;
+    }
 
     //Utilisation de la propriété statique
     Personne.compteur += 1;
@@ -188,23 +206,16 @@ Donc `Personne` hérite de `Kind`. Mais essayons un exemple plus complet pour bi
 
 ```javascript
 var Homme = Personne.extend({
-  sexe: "male"
+  getSexe: function() { return "male"; }
 });
 
 var Femme = Personne.extend({
-  prenom: "Jane",
-  sexe: "femelle"
+  getSexe: function() { return "femelle"; }
 });
 
-var jane = new Femme();
-var john = new Homme();
-
 var angelina = new Femme("Angelina", "Jolie");
 var bob = new Homme("Bob", "Morane");
 
-jane.bonjour();
-john.bonjour();
-
 angelina.bonjour();
 bob.bonjour();
 
@@ -213,11 +224,9 @@ console.log("Il y a ", Personne.combien(), " personnes");
 
 A l’exécution nous obtiendrons ceci :
 
-  Bonjour, je suis  Jane Doe
-  Bonjour, je suis  John Doe
   Bonjour, je suis  Angelina Jolie
   Bonjour, je suis  Bob Morane
-  Il y a  4  personnes
+  Il y a  2  personnes
 
 Nous pouvons donc vérifier que l’on a bien hérité de la méthode `bonjour()`, du constructeur `constructor()` et de `nom` et `prenom` (ainsi que de leurs valeurs par défaut). Nous remarquons aussi que l’incrémentation des “personnes” continue puisque `Homme` et `Femme` héritent de `Personne`.
 Voyons maintenant, comment surcharger les méthodes du parent et continuer à appeler les méthodes du parent.
@@ -231,12 +240,12 @@ Surcharge et utilisation de `super()`
 
 ```javascript
 var Homme = Personne.extend({
-  sexe: "male",
+    getSexe: function() { return "male"; },
   //surcharge du constructeur
   constructor: function(prenom, nom) {
     //appeler le constructeur de Personne
     Homme.__super__.constructor.call(this, prenom, nom);
-    console.log("Hello, je suis un ", this.sexe);
+    console.log("Hello, je suis un ", this.getSexe());
   },
   bonjour: function() {
     //appeler la methode bonjour() du parent
@@ -246,13 +255,12 @@ var Homme = Personne.extend({
 });
 
 var Femme = Personne.extend({
-  prenom: "Jane",
-  sexe: "femelle",
+  getSexe: function() { return "femelle"; },
   //surcharge du constructeur
   constructor: function(prenom, nom) {
     //appeler le constructeur de Personne
     Femme.__super__.constructor.call(this, prenom, nom);
-    console.log("Hello, je suis une ", this.sexe);
+    console.log("Hello, je suis une ", this.getSexe());
   },
   bonjour: function() {
     //appeler la methode bonjour() du parent

diff --git a/05-IL-NOUS-FAUT-UN-SERVEUR.md b/05-IL-NOUS-FAUT-UN-SERVEUR.md
@@ -92,9 +92,10 @@ Et copiez aussi le répertoire `bootstrap` de notre exemple. Ensuite, préparez
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Backbone</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--V 3.0.1 ...-->
     <link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
-    <link href="libs/vendors/css/bootstrap-theme.css" rel="stylesheet">
+    <link href="libs/vendors/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
     <style>
       body {
         padding-top: 60px;

diff --git a/07-VUES-ET-TEMPLATING.md b/07-VUES-ET-TEMPLATING.md
@@ -598,11 +598,11 @@ Modifions notre code html de la manière suivante :
     </div>
 </div>
 
-<div class="container-fluid">
+<div class="container">
 
-  <div class="row-fluid">
+  <div class="row">
 
-    <div class="span3">
+    <div class="col-md-3">
       <script type="text/template" id="blog_sidebar_template">
         <h2>Les 3 derniers :</h2>
         <ul>
@@ -616,7 +616,7 @@ Modifions notre code html de la manière suivante :
       </div>
     </div>
 
-    <div class="span9">
+    <div class="col-md-9">
       <div class="jumbotron">
         <h1>Backbone rocks !!!</h1>
       </div>
@@ -631,7 +631,7 @@ Modifions notre code html de la manière suivante :
         <% }); %>
 
       </script>
-      <div class="row-fluid" id="posts_list"></div>
+      <div id="posts_list"></div>
     </div>
   </div>
 </div>
@@ -1493,7 +1493,7 @@ Nous allons donc commencer par créer le template du formulaire d’authentifica
   <input name="email" type="text" placeholder="email"/><br>
   <input name="password" type="password" placeholder="password"/><br>
   <a href="#" class="btn btn-primary">Login</a>
-  <a href="#" class="btn btn-inverse">Logoff</a><br>
+  <a href="#" class="btn btn-default">Logoff</a><br>
   <b>{{message}} {{firstName}} {{lastName}}</b>
 
 </script>
@@ -1567,7 +1567,7 @@ Une propriété de l’objet `Backbone.View` permet de gérer les événements s
   <input name="email" type="text" placeholder="email"/><br>
   <input name="password" type="password" placeholder="password"/><br>
   <a href="#" class="btn btn-primary">Login</a>
-  <a href="#" class="btn btn-inverse">Logoff</a><br>
+  <a href="#" class="btn btn-default">Logoff</a><br>
   <b>{{message}} {{firstName}} {{lastName}}</b>
 </script>
 ```
@@ -1577,17 +1577,17 @@ Je souhaite pouvoir déclencher des événements lorsque je clique sur les bouto
 ```javascript
 events: {
   "click  .btn-primary": "onClickBtnLogin",
-  "click  .btn-inverse": "onClickBtnLogoff"
+  "click  .btn-default": "onClickBtnLogoff"
 },
 ```
 
-En fait je demande à mon objet `Backbone.View` d’intercepter tous les événements de type click sur les éléments html (de la vue considérée) dont la classe `css` est `.btn-primary` ou `.btn-inverse` et de déclencher respectivement les méthodes `onClickBtnLogin` ou `onClickBtnLogoff`.
+En fait je demande à mon objet `Backbone.View` d’intercepter tous les événements de type click sur les éléments html (de la vue considérée) dont la classe `css` est `.btn-primary` ou `.btn-default` et de déclencher respectivement les méthodes `onClickBtnLogin` ou `onClickBtnLogoff`.
 
 >>**Remarque** : nous aurions très bien pu affecter des id aux boutons :
 
 ```html
 <a href="#" id="btnLogIn" class="btn btn-primary">Login</a>
-<a href="#" id="btnLogOff" class="btn btn-inverse">Logoff</a><br>
+<a href="#" id="btnLogOff" class="btn btn-default">Logoff</a><br>
 ```
 
 et relier les événements aux ids :

diff --git a/09-ORGANISATION-CODE.md b/09-ORGANISATION-CODE.md
@@ -403,7 +403,7 @@ var Blog = (function(blog) {
     },
     events: {
       "click  .btn-primary": "onClickBtnLogin",
-      "click  .btn-inverse": "onClickBtnLogoff"
+      "click  .btn-default": "onClickBtnLogoff"
     },
     onClickBtnLogin: function(domEvent) {
 

diff --git a/10-SECURISATION.md b/10-SECURISATION.md
@@ -18,7 +18,7 @@ Je retourne donc dans le code html de ma page `index.html`. Ajoutons ceci juste
 *Template de l’écran d’administration :*
 
 ```html
-<div class="span9">
+<div class="col-md-9">
   <div class="jumbotron">
       <h1>Backbone rocks !!!</h1>
   </div>
@@ -236,7 +236,7 @@ Nous allons modifier `LoginView.js` pour prendre en compte l’ajout de notre fo
   <input name="email" type="text" placeholder="email"/><br>
   <input name="password" type="password" placeholder="password"/><br>
   <a href="#" class="btn btn-primary">Login</a>
-  <a href="#" class="btn btn-inverse">Logoff</a><br>
+  <a href="#" class="btn btn-default">Logoff</a><br>
   <b>{{message}} {{firstName}} {{lastName}} </b>
   <br><a id="adminbtn" href="#">{{adminLinkLabel}}</a>
 </script>
@@ -297,7 +297,7 @@ var Blog = (function(blog) {
     },
     events: {
       "click  .btn-primary": "onClickBtnLogin",
-      "click  .btn-inverse": "onClickBtnLogoff",
+      "click  .btn-default": "onClickBtnLogoff",
       "click #adminbtn": "displayAdminPanel"
     },
 

diff --git a/12-BB-COFFEESCRIPT.md b/12-BB-COFFEESCRIPT.md
@@ -550,7 +550,7 @@ render: (message, user) ->
 
 events:
   "click  .btn-primary": "onClickBtnLogin"
-  "click  .btn-inverse": "onClickBtnLogoff"
+  "click  .btn-default": "onClickBtnLogoff"
   "click #adminbtn": "displayAdminPanel"
 
 displayAdminPanel: ->

diff --git a/13-AUTRES-FWKS-MVC.md b/13-AUTRES-FWKS-MVC.md
@@ -65,9 +65,10 @@ Dans notre répertoire public (à la racine), créez une page `index.canjs.html`
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>CanJS</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--V 3.0.1 ...-->
   <link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
-  <link href="libs/vendors/css/bootstrap-theme.css" rel="stylesheet">
+  <link href="libs/vendors/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
 
   <style>
     body {
@@ -88,9 +89,9 @@ Dans notre répertoire public (à la racine), créez une page `index.canjs.html`
     </div>
   </div>
 
-  <div class="container-fluid">
+  <div class="container">
 
-    <div class="row-fluid">
+    <div class="row">
 
       <script type="text/ejs" id="myposts_template">
         <% for( var i = 0; i < this.length; i++ ) { %>
@@ -237,9 +238,10 @@ A nouveau, dans notre répertoire `public` (à la racine), créez une page `inde
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Spine</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--V 3.0.1 ...-->
     <link href="libs/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
-    <link href="libs/vendors/css/bootstrap-theme.css" rel="stylesheet">
+    <link href="libs/vendors/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
 
     <style>
       body {
@@ -260,9 +262,9 @@ A nouveau, dans notre répertoire `public` (à la racine), créez une page `inde
         </div>
     </div>
 
-    <div class="container-fluid">
+    <div class="container">
 
-      <div class="row-fluid">
+      <div class="row">
 
         <script type="text/template" id="myposts_template">
           {{#posts}}