7 files changed, 546 insertions, 0 deletions
diff --git a/demos/blog-tutorial/protected/pages/Day1/fr/CreateContact.page b/demos/blog-tutorial/protected/pages/Day1/fr/CreateContact.page
new file mode 100755
index 00000000..e85d8bfe
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/fr/CreateContact.page
@@ -0,0 +1,203 @@
+<com:TContent ID="Main">
+
+<h1>Création de la page Contact</h1>
+
+<p>
+Nous avons créé une page par défaut <tt>Home.page</tt> en utilisant les <a href="http://www.pradosoft.com/demos/quickstart/?page=GettingStarted.CommandLine">outils en ligne de commande de PRADO</a>. Cette page est relativement statique parce qu'elle ne contient que du contenu HTML. Dans cette session, nous allons créer une page dynamique dénommée <tt>Contact</tt>.
+</p>
+
+<p>
+Le but de cette page est de collecter les retours d'informations des utilisateurs Web concernant notre outil de blog. Pour atteindre ce but, nous envisageons d'utiliser un formulaire qui sera à remplir. Dans ce formulaire, nous demanderons le nom de l'utilisateur, son adresse email et son commentaire. Après que le formulaire ai été rempli et envoyé, un email avec le commentaire sera envoyé à l'administrateur.
+</p>
+
+<p>
+Pour créer la page <tt>Contact</tt>, nous avons besoin de 2 fichiers dans le dossier <tt>pages</tt> : le fichier de gabarit <tt>Contact.page</tt> et le fichier de classe PHP <tt>Contact.PHP</tt>.
+</p>
+
+<img src="<%~ directories2.gif %>" class="output" />
+
+<com:InfoBox>
+Une <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">page</a> doit avoir un fichier de <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">gabarit</a> (extension <tt>.page</tt>) ou un fichier de classe PHP, ou les deux :
+</p>
+
+<ul>
+<li>Une page avec seulement un gabarit est généralement une page statique, comme la page d'accueil que nous avons déjà créée ;</li>
+<li>Une page avec seulement un fichier de classe PHP produit le code HTML directement à partir de l'exécution du script.
+<li>Une page avec un gabarit et un fichier de classe PHP combine les avantages des deux : un gabarit pour facilement organiser la présentation de la page et un fichier de classe PHP pour produire le contenu dynamique.</li>
+</ul>
+</com:InfoBox>
+
+
+<h2>Création de la page gabarit</h2>
+
+<p>
+Nous allons premièrement créer le fichier gabarit de la page <tt>Contact</tt>.
+</p>
+
+<p>
+Nous utilisons un fichier gabarit pour organiser la présentation de notre formulaire. Dans notre gabarit, nous utilisons des <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.TextBox">champs de saisie</a> pour collecter le nom de l'utilisateur, son email et son commentaire. D'autre part, nous utilisons des <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Validation">validateurs</a> pour nous assurer que l'utilisateur a bien fourni les éléments avant d'envoyer le formulaire. Le contenu complet du gabarit est le suivant,
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<html>
+<head><title>Mon Blog - Contact</title></head>
+<body>
+<h1>Contact</h1>
+<p>Veuillez remplir le formulaire suivant pour me laisser vos impressions au sujet de mon blog. Merci !</p>
+
+&lt;com:TForm> 
+
+<span>Votre nom:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Name"
+    ErrorMessage="Veuillez indiquer votre nom." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Name" />
+
+<br/>
+<span>Votre email:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Email"
+    ErrorMessage="Veuillez indiquer votre email." 
+    Display="Dynamic" />
+&lt;com:TEmailAddressValidator ControlToValidate="Email"
+    ErrorMessage="Vous avez saisi un email invalide." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Email" />
+
+<br/>
+<span>Commentaires:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Feedback"
+    ErrorMessage="Veuillez saisir un commentaire." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Feedback" 
+    TextMode="MultiLine" 
+    Rows="10"
+    Columns="40" />
+
+<br/>
+&lt;com:TButton Text="Envoyer" OnClick="submitButtonClicked" />
+
+&lt;/com:TForm>
+
+</body>
+</html>
+</com:TTextHighlighter>
+
+<p>
+Comme vous pouvez le voir, un fichier gabarit ressemble énormément à un fichier HTML classique. La principale différence concerne le fichier gabarit qui contient quelques balises <tt>&lt;com:&gt;</tt>. Chaque balise <tt>&lt;com:&gt;</tt> fait référence à un <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Controls">contrôle</a> dont les propriétés sont initialisées grâce aux paires nom-valeur de la balise. Par exemple, la balise <tt>&lt;com:TButton&gt;</tt> fait référence au contrôle <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Button">TButton</a> qui affiche un bouton permettant à l'utilisateur de soumettre le formulaire. Pour une syntaxe complète, veuillez vous référer au <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">Tutoriel de démarrage rapide</a>.
+
+<com:InfoBox>
+PRADO fournit un contrôle pour chaque type de balise HTML. Par exemple, <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.TextBox">TTextBox</a> affiche un champ de saisie, <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.List">TDropDownList</a> affiche une liste déroulante. Chaque contrôle est un composant auquel on peut accéder par code et dont les propriétés sont modifiables.
+</com:InfoBox>
+
+
+<p>
+Avant le contrôle <tt>TTextBox</tt>, le gabarit utilise aussi plusieurs validateurs qui permettent de s'assurer que les données saisies sont bien conformes à notre attente. Par exemple, pour nous assurer que l'adresse email est valide, nous utilisons les deux validateurs suivants,
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<span>Your Email:</span>
+&lt;com:TRequiredFieldValidator 
+    ControlToValidate="Email"
+    ErrorMessage="Veuillez indiquer votre email." 
+    Display="Dynamic" />
+&lt;com:TEmailAddressValidator 
+    ControlToValidate="Email"
+    ErrorMessage="Vous avez saisi un email invalide." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Email" />
+<br/>
+</com:TTextHighlighter>
+
+<p>
+Ci-dessous, un résumé des contrôles utilisés dans le gabarit :
+</p>
+
+<ul>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TForm">TForm</a> affiche un formulaire HTML. Chaque contrôle de saisie doit être au sein d'un TForm. Et le plus important, au plus un <tt>TForm</tt> peut apparaitre dans une page.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TTextBox">TTextBox</a> affiche un champ de saisie utilisateur.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TRequiredFieldValidator">TRequiredFieldValidator</a> s'assure que le contrôle de saisie associé n'est pas vide quand le formulaire est envoyé.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TEmailAddressValidator">TEmailAddressValidator</a> s'assure que le champ de saisie contient une adresse email <i>valide</i> quand le formulaire est envoyé.</li>
+</ul>
+
+<com:TipBox>
+Ecrire des gabarits seulement avec un éditeur de texte peut être pénible et pas vraiment intuitif pour les designers. Pour faciliter ceci, PRADO inclus dans cette version, une extension pour Dreamweaver qui permet la complétion automatique des balises PRADO (ceci inclut le nom des balises, le nom des propriétés, le nom des évènements, etc.).
+</com:TipBox>
+
+<h2>Création du fichier de classe PHP</h2>
+
+<p>
+Nous allons maintenant créer le fichier de classe PHP <tt>Contact.PHP</tt>. Ce fichier est nécessaire parce que nous devons agir après la soumission du formulaire.
+</p>
+
+<p>
+Notez les lignes dans le fichier gabarit. Elles indiquent que lorsque l'utilisateur soumet le formulaire, la méthode <tt>submitButtonClicked()</tt> doit être appelé. Ici, <tt>OnClick</tt> est le nom de l'évènement et la méthode correspondante doit être défini dans le fichier de classe PHP.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+  &lt;com:TButton Text="Submit" OnClick="submitButtonClicked" />
+</com:TTextHighlighter>
+
+<p>
+Nous écrirons donc le fichier de classe suivant :
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?PHP
+class Contact extends TPage
+{
+    /**
+     * Gestionnaire d'évènement pour OnClick (bouton submit).
+     * @param TButton le bouton qui a générer l'évènement
+     * @param TEventParameter les paramètres de l'évènement (null dans ce cas)    
+     */
+    public function submitButtonClicked($sender, $param)
+    {
+        if ($this->IsValid)  // vérifie que les validations sont Ok
+        {
+            // récupère le nom de l'utilisateur, son email et son commentaire
+            $name = $this->Name->Text;  
+            $email = $this->Email->Text;
+            $feedback = $this->Feedback->Text;
+            
+            // envoie un email à l'administrateur avec les informations 
+            $this->mailFeedback($name, $email, $feedback);
+        }
+    }
+    
+    protected function mailFeedback($name, $email, $feedback)
+    {
+        // implémentation de l'envoi de l'email
+    }
+}
+?>
+</com:TTextHighlighter>
+
+<p>
+Le code précédent est largement explicite. En fait, nous avons juste montré le principe d'un gestionnaire d'évènement. Dans le gestionnaire d'évènement <tt>submitButtonClicked()</tt>, nous récupérons les éléments saisies par l'utilisateur. Par exemple, <tt>$this->Name->Text</tt> retourne la valeur de la propriété <tt>Text</tt> du contrôle <tt>Name</tt> qui est un contrôle permettant la saisie du nom de l'utilisateur.
+</p>
+
+<com:InfoBox>
+Le nom de la classe héritant de TPage doit être le même que le nom du fichier. C'est aussi une nécessité pour écrire n'importe quelle classe de composant PRADO.
+</com:InfoBox>
+
+<h2>Test</h2>
+
+<p>
+Notre nouvelle page <tt>Contact</tt> peut être testée en naviguant à l'URL <tt>http://hostname/blog/index.PHP?page=Contact</tt>. Si vous cliquez sur le bouton "envoyer" sans avoir saisi de données, vous verrez apparaitre des messages d'erreurs à côté des champs de saisie. Si vous entrez toutes les informations nécessaires, la méthode <tt>mailFeedback()</tt> sera appelée.
+</p>
+
+<img src="<%~ output.gif %>" class="output" />
+
+<p>
+Une amélioration possible à notre page serait d'afficher un message de confirmation après que l'utilisateur ai envoyé le formulaire. Il serait aussi envisageable de rediriger le navigateur vers une adresse différente si toutes les informations ont été saisies correctement. Nous laisserons aux lecteurs la mise en place de ces fonctionnalités.
+</p>
+
+<com:InfoBox>
+Chaque validateur représente une règle de validation. Un champ de saisie unique peut être associé à un ou plusieurs validateurs. Les validateurs effectuent les vérifications aussi bien du côté client que du côté serveur. Côté client (navigateur), les validations sont effectuées grâce à du javascript, côté serveur, elles sont effectuées en PHP. Les validations côté client peuvent être désactivées tandis que celles côté serveur ne peuvent l'être. Ceci permet de s'assurer que les règles de validation sont toujours appliquées.
+</com:InfoBox>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day1/fr/Setup.page b/demos/blog-tutorial/protected/pages/Day1/fr/Setup.page
new file mode 100755
index 00000000..22a7891c
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/fr/Setup.page
@@ -0,0 +1,161 @@
+<com:TContent ID="Main">
+
+<h1>Installation</h1>
+
+<p>
+Nous commencerons par la mise en place de la structure des dossiers et fichiers requis par la plupart des applications développées avec PRADO. Nous allons utiliser <a href="http://www.pradosoft.com/demos/quickstart/?page=GettingStarted.CommandLine">les outils en ligne de commande</a> pour atteindre ce but.
+</p>
+
+<p>Nous partons du principe que le nom du dossier qui contiendra l'application est <tt>blog</tt> et que l'URL qui permet d'accéder à ce dossier est : <tt>http://hostname/blog/</tt> (remplacer <tt>hostname</tt> par le nom de votre serveur).
+</p>
+
+<p>A l'intérieur du dossier blog, nous utilisons <a href="http://www.pradosoft.com/demos/quickstart/?page=GettingStarted.CommandLine">les outils en ligne de commande</a> avec comme commande (remplacer <tt>path/to</tt> par le chemin d'installation du framework PRADO):
+</p>
+<com:TTextHighlighter CssClass="source cli">
+php path/to/prado-cli.php -c .
+</com:TTextHighlighter>
+
+<p>
+L'utilisation de cette commande permet de créer la structure de dossier et fichiers suivante:
+</p>
+
+<img src="<%~ directories.gif %>" class="output" />
+
+<p>
+Nous avons dorénavant, un squellette d'application PRADO accessible par l'URL <tt>http://hostname/blog/index.php</tt> et qui affiche une page contenant le message "Welcome to PRADO".
+</p>
+
+<p>
+Il est de notre intérêt d'en apprendre plus à propos des dossiers et fichiers que nous venons de créer.
+</p>
+
+<h2>Les fichiers initiaux</h2>
+
+<h3>Le script principal de l'application</h3>
+
+<p>
+Toutes les applications PRADO ont un point d'entrée, habituellement nommé <tt>index.php</tt>. Dans la plupart des cas, c'est le seul script qui est directement accessible par les utilisateurs. Cela réduit les risques que les utilisateurs puissent lancer des scripts serveur auquels ils ne devraient pas avoir accès.
+</p>
+
+<p>
+Le but principal de ce script est d'initialiser l'environnement PRADO et de gérer toutes les requêtes utilisateurs. Ce script contient habituellement les commandes PHP suivantes,
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?php
+// include prado.php which contains basic PRADO classes
+require_once('path/to/prado.php');
+// create a PRADO application instance
+$application = new TApplication;
+// run the application and handle user requests
+$application->run();
+?>
+</com:TTextHighlighter>
+
+<com:InfoBox>
+Le nom du script ne doit pas être obligatoirement <tt>index.php</tt>. Il peut porter n'importe quel nom à partir du moment ou le serveur peut l'interpréter comme étant un script PHP5. Par exemple, sur certains hébergements mutualisés, le script devra porter le nom <tt>index.php5</tt>, ce qui permettra au serveur Web de le traiter correctement. 
+</com:InfoBox>
+
+<h3>Le fichier de configuration de l'application</h3>
+<p>
+Le fichier optionnel XML <tt>application.xml</tt> contient la <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.AppConfig">configuration de l'application</a>. Son but principal est de permettre de configurer l'application qui sera créée par le script principal. Par exemple, nous pouvons activer le système de <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Logging">log</a> pour notre application par le biais du fichier de configuration.
+</p>
+
+<p>
+Le fichier <tt>application.xml</tt> est pour le moment presque vide. De ce fait, nous pouvons le supprimer parce que l'application n'utilise pour le moment que des fonctionnalités de base. Au fur et à mesure que nous avancerons, nous ferons référence régulièrement au fichier <tt>application.xml</tt> et vous expliquerons comment configurer l'application.
+</p>
+
+
+<h3>La page d'accueil</h3>
+
+<p>
+La page d'accueil <tt>Home.page</tt> (aussi dénommée page par défaut) est la seule <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">page</a> créée par les outils en ligne de commande de PRADO. C'est le contenu de ce fichier qui est affiché quand l'utilisateur navigue à l'adresse  <tt>http://hostname/blog/index.php</tt>.
+</p>
+
+<p>
+Le contenu du fichier <tt>Home.page</tt> respecte le <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">format de template</a> qui pour la plupart du temps est du code HTML agrémenté de quelques balises spécifiques à PRADO. Par exemple, dans <tt>Home.page</tt> nous voyons du code HTML pur :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<html>
+<head>
+  <title>Welcome to PRADO</title>
+</head>
+<body>
+<h1>Welcome to PRADO!</h1>
+</body>
+</html>
+</com:TTextHighlighter>
+
+
+<h2>Les dossiers initiaux</h2>
+
+<h3>Le dossier <tt>protected</tt></h3>
+
+<p>
+Le dossier <tt>protected</tt>, aussi connu sous le nom <i>chemin de base de l'application</i>, est le dossier racine qui contient les pages, les gabarits, les fichiers de configuration, les données, etc. Le nom <tt>protected</tt> indique que ce dossier doit être masqué des personnes qui consultent le site, ceci parce que les fichiers dans ce dossier contiennent la plupart du temps des données sensibles.
+</p>
+
+<p>
+Les différents serveurs Web ont différents moyens de "protéger" un dossier. Pour Apache, le moyen le plus simple est de créer dans le dossier un fichier nommé .htaccess avec le contenu <tt>deny from all</tt>.
+</p>
+
+
+<h3>Les dossiers <tt>protected/runtime</tt> et <tt>assets</tt></h3>
+
+<p>
+Les dossiers <tt>protected/runtime</tt> et <tt>assets</tt> sont deux dossiers qui doivent avoir l'autorisation "en écriture" pour le serveur Web. Le dossier <tt>runtime</tt> contient des données sensibles (ie: fichier de configuration déjà analysé) générées à l'exécution de PRADO tandis que le dossier <tt>assets</tt> contient les ressources qui doivent être publiques (ie: les images, les fichiers javascript).
+</p>
+
+<com:InfoBox>
+Il n'y a aucun souci à supprimer les dossiers et les fichiers contenus dans <tt>protected/runtime</tt> et <tt>assets</tt>. Il est recommandé aux développeurs de nettoyer ces dossiers lors d'une mise à jour de PRADO.
+</com:InfoBox>
+
+
+<h3>Le dossier <tt>pages</tt></h3>
+
+<p>
+The <tt>pages</tt> directory is the <i>root page directory</i> holding all <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">pages</a> in a PRADO application. It bears an analogy to the <tt>htdocs</tt> directory for the Apache httpd Web server.
+</p>
+
+<p>
+Nous avons déjà vu comment accéder la page d'accueil. Pour accéder à n'importe quelle page situé dans le dossier <tt>pages</tt>, il faut utiliser l'URL suivante <tt>http://hostname/blog/index.php?page=chemin.vers.NomdelaPage</tt>. En fonction de cette URL, PRADO recherche une page dénommée <tt>NomdelaPage</tt> dans le dossier <tt>pages/chemin/vers</tt>. L'URL que nous avons utilisée précédemment pour accéder à la page d'accueil correspond à <tt>http://hostname/blog/index.php?page=Home</tt>.
+
+
+<h2>Personnalisation</h2>
+
+<p>
+Il est tout à fait possible de personnaliser le nom et l'emplacement des fichiers et dossiers décrit précédemment.
+</p>
+
+<p>
+Par exemple, pour améliorer la sécurité, certains pourraient désirer déplacer la totalité du dossier <tt>protected</tt> à un emplacement inaccessible par le Web. Pour faire cela, utilisez la commande PHP suivante pour initialiser l'instance de l'application PRADO dans le script principal :
+</p>
+
+<com:TTextHighlighter CssClass="source">
+$application = new TApplication( 'path/to/protected' );
+</com:TTextHighlighter>
+
+<p>
+Pour changer l'emplacement du dossier racine des pages et le nom de la page d'accueil, il est possible de modifier le fichier de configuration <tt>application.xml</tt> de cette manière :
+</p>
+
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<application id="blog" mode="Debug">
+  <services>
+    <service id="page" 
+           class="TPageService" 
+           BasePath="path.to.pages"
+           DefaultPage="NewHome"
+           />
+  </services>
+</application>
+</com:TTextHighlighter>
+
+<p>
+En avançant dans l'apprentissage de PRADO, vous verrez que PRADO est très souple et qu'il est possible de personnaliser la plupart des comportements de base. Nous décrirons d'autres techniques au fur et à mesure de ce tutoriel.
+</p>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day1/fr/ShareLayout.page b/demos/blog-tutorial/protected/pages/Day1/fr/ShareLayout.page
new file mode 100755
index 00000000..cefff770
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/fr/ShareLayout.page
@@ -0,0 +1,182 @@
+<com:TContent ID="Main">
+
+<h1>Partager les modèles de gabarit</h1>
+
+<p>
+Dans cette section, nous allons utiliser la fonctionnalité <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.MasterContent">gabarit principal/contenu</a> de PRADO pour partager une mise en page commune sur tout notre site. Les mises en page communes font référence aux parties qui sont identiques ou presque pour un ensemble de pages. Par exemple, dans notre outil de blog, toutes les pages partagent le même entête, pied de page et la même barre latérale contenant les liens. La solution la plus radicale est de répéter sur chaque page les parties communes. Par contre, cette approche est une source d'erreurs et difficile à maintenir. La fonctionnalité <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.MasterContent">gabarit principal/contenu</a> nous permets de traiter les parties communes comme un contrôle qui centralise la logique applicative et la présentation de chaque page.
+</p>
+
+<com:InfoBox>
+Il est aussi possible de partager les parties communes grâce à <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">l'inclusion de gabarits</a>, un peu comme l'inclusion de fichier php. L'inconvénient de l'inclusion de gabarits est que l'on ne peut pas partager la logique applicative.
+</com:InfoBox>
+
+
+<h2>Création du gabarit principal</h2>
+
+<p>
+Nous allons maintenant créer le gabarit principal <tt>MainLayout</tt> qui représente les parties communes partagées par toutes nos pages. Le contrôle <tt>MainLayout</tt> est un contrôle de gabarit qui hérite de <tt>TTemplateControl</tt>. Il a besoin d'un fichier de gabarit <tt>MainLayout.tpl</tt> et d'un fichier de classe <tt>MainLayout.php</tt> situés dans le même dossier. Pour faciliter la maintenance, nous allons créer le nouveau dossier <tt>protected/layouts</tt> pour les accueillir.
+</p>
+
+<img src="<%~ directories3.gif %>" class="output" />
+
+<p>
+Pour le moment, <tt>MainLayout</tt> contient seulement un entête simple et un pied de page, comme décrit ci-après. Plus tard, nous ajouterons une barre latérale. Les lecteurs sont encouragés à ajouter des fonctionnalités.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<html>
+&lt;com:THead />
+<body>
+&lt;com:TForm>
+<div id="page">
+
+<div id="header">
+<h1>Mon blog PRADO</h1>
+</div>
+
+<div id="main">
+&lt;com:TContentPlaceHolder ID="Main" />
+</div>
+
+<div id="footer">
+&lt;%= PRADO::poweredByPrado() %>
+</div>
+
+</div>
+&lt;/com:TForm>
+</body>
+</html>
+</com:TTextHighlighter>
+
+<p>
+Ci-dessus, le contenu du fichier de gabarit <tt>MainLayout.tpl</tt>. Trois nouvelles balises sont utilisées.
+</p>
+
+<ul>
+<li><tt>&lt;com:TContentPlaceHolder&gt;</tt> represente un contrôle <a href="http://www.pradosoft.com/docs/classdoc/TContentPlaceHolder">TContentPlaceHolder</a>. Il définit l'emplacement dans le gabarit où le contenu sera inséré. Dans notre cas, le contenu proviendra des pages qui utiliseront notre gabarit principal.</li>
+<li><tt>&lt;com:THead&gt;</tt> représente un contrôle <a href="http://www.pradosoft.com/docs/classdoc/THead">THead</a> qui correspond à la balise &lt;head&gt; d'un document HTML. Ceci permet à PRADO de manipuler la balise &lt;head&gt; comme un composant (ie: définir le titre de la page, ajouter des feuilles de styles CSS.)</li>
+<li><tt>&lt;%= %&gt;</tt> est une <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates2#et">balise de configuration</a>. Elle affiche le résultat de l'évaluation de l'expression à l'endroit où elle se situe.</li>
+</ul>
+
+
+<p>
+Le fichier de classe  <tt>MainLayout.php</tt> est très simple :
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?php
+class MainLayout extends TTemplateControl
+{
+}
+?>
+</com:TTextHighlighter>
+
+<com:InfoBox>
+L'extension des fichiers de gabarit est <tt>.page</tt>, tandis que pour les gabarits autres que les pages c'est <tt>.tpl</tt>. Ceci permet de différencier les pages des autres contrôles. Les deux utilisent la même <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">syntaxe de gabarit</a>. Pour les pages, le fichier de classe est optionnel (par défaut hérite de <tt>TPage</tt>), tandis que pour les contrôles, les fichiers de classes sont obligatoires. Comme pour Java, le nom de la classe doit être le même que le nom du fichier de classe. Faites attention à la casse sur les systèmes Linux/Unix.
+</com:InfoBox>
+
+<h2>Utilisation du gabarit principal</h2>
+<p>
+Pour utiliser notre gabarit principal nouvellement créé, nous allons modifier nos fichiers <tt>Home.page</tt> et <tt>Contact.page</tt>. En particulier, nous devons supprimer les entêtes et pied de page parce que le gabarit principal a la responsabilité de les afficher ; par ailleurs, nous devons indiquer aux deux pages que leur gabarit principal est <tt>MainLayout</tt>.
+</p>
+
+<p>
+Ci-dessous, le contenu de <tt>Contact.page</tt> après les modifications :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+&lt;%@ MasterClass="Application.layouts.MainLayout" Title="Mon blog - Contact" %>
+
+&lt;com:TContent ID="Main">
+
+<h1>Contact</h1>
+<p>Veuillez remplir le formulaire suivant pour me laisser vos impressions au sujet de mon blog. Merci !</p>
+
+...champs de saisie et validateurs pour le nom d'utilisateur...
+
+...champs de saisie et validateurs pour l'email...
+
+...champs de saisie et validateurs pour le commentaire...
+
+&lt;com:TButton Text="Envoyer" OnClick="submitButtonClicked" />
+
+&lt;/com:TContent>
+</com:TTextHighlighter>
+
+<p>
+Le contenu entre les balises <tt>&lt;com:TContent&gt;</tt> sera inséré dans l'emplacement réservé par <tt>&lt;com:TContentPlaceHolder&gt;</tt> dans le gabarit principal.
+</p>
+
+<com:InfoBox>
+Il est possible d'avoir plusieurs <tt>TContentPlaceHolder</tt> dans un gabarit principal et plusieurs <tt>TContent</tt> dans un fichier de contenu. Ils sont associés par leurs propriétés <tt>ID</tt>. Il est aussi possible de définir un contenu comme étant le gabarit principal d'un autre contenu, ceci en plaçant une balise <tt>TContentPlaceHolder</tt> à l'endroit désiré. Ceci est appelé <i>gabarits principaux imbriqués</i>
+</com:InfoBox>
+
+<p>
+A côté de la balise <tt>&lt;com:TContent&gt;</tt>, nous avons vu une nouvelle balise <tt>&lt;%@ %&gt;</tt>, qui est dénommé une <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1#tct">balise de contrôle de gabarit</a>. Elle contient des paires nom-valeur utilisées pour initialiser les propriétés correspondantes du propriétaire de gabarit, dans notre cas, la page <tt>Contact</tt>.
+</p>
+
+<p>
+En définissant la propriété <tt>MasterClass</tt> comme étant de type <tt>Application.layouts.MainLayout</tt>, nous avons indiqué à la page <tt>Contact</tt> d'utiliser <tt>MainLayout</tt> comme gabarit principal. Ici, nous avons utilisé un <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Components">espace de noms</a> pour nous référer à la classe <tt>MainLayout</tt>.
+</p>
+
+<com:InfoBox>
+Les espaces de noms sont largement utilisés en programmation PRADO. Ils sont utilisés conjointement avec les <a href="http://www.pradosoft.com/demos/quickstart/index.php?page=Fundamentals.Components">alias de chemins</a>. PRADO définit deux alias de chemins: <tt>System</tt> fait référence au dossier <tt>framework</tt> de l'installation PRADO, et <tt>Application</tt> fait référence au dossier <tt>protected</tt>.
+L'espace de noms <tt>Application.layouts.MainLayout</tt> peut ainsi être traduit par <tt>protected/layouts/MainLayout</tt> ce qui est précisément le nom du fichier (sans l'extension <tt>.php</tt>) de la classe <tt>MainLayout</tt>.
+</com:InfoBox>
+
+
+<h2>Autres possibilités pour spécifier le gabarit principal</h2>
+
+<p>
+Il y a plusieurs alternatives pour spécifier le gabarit principal.
+</p>
+
+<p>
+Vous pouvez définir le gabarit principal comme ci-dessous pour pouvoir en changer dynamiquement.
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?php
+class Contact extends TPage
+{
+    public function onPreInit($param)
+    {
+        parent::onPreInit($param);
+        $this->MasterClass='Path.To.NewLayout';
+    }
+
+    // ...
+}
+?>
+</com:TTextHighlighter>
+
+<p>
+Ci-dessus, nous indiquons d'utiliser le gabarit principal <tt>MasterClass</tt> dans la méthode <tt>onPreInit()</tt> qui est héritée de <tt>TPage</tt>. Cette méthode est appelé par PRADO juste après que l'instance de la page soit créée. Nous pouvons ainsi déclarer au moment où la page est requise quel gabarit principal utiliser. Par exemple, quand la page est requise par un utilisateur enregistré, nous pouvons utiliser le gabarit A, et le gabarit B si l'utilisateur qui demande la page est un invité.
+</p>
+
+<p>
+Nous pouvons aussi spécifier quel gabarit principal utiliser dans le fichier de <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.AppConfig">configuration de l'application</a> ou encore dans le fichier de <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.PageConfig">configuration de la page</a>. Ci-dessous, le fichier de configuration de l'application modifié pour notre blog.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<application id="blog" mode="Debug">
+  <!-- configuration for available services -->
+  <services>
+    <service id="page" class="TPageService" DefaultPage="Home">
+      <!-- initial properties set for all pages -->
+      <pages MasterClass="Application.layouts.MainLayout" />
+    </service>
+  </services>
+</application>
+</com:TTextHighlighter>
+
+<p>
+En faisant cela, nous évitons de définir le gabarit principal dans chaque page. Si nous décidons d'utiliser un autre gabarit principal, il nous suffit de changer le fichier de configuration de l'application. Pour cette raison, dans notre blog, nous utiliserons cette approche.
+</p>
+
+<com:InfoBox>
+Il y a un ordre qui permet de savoir quel fichier gabarit principal utiliser s'il est spécifié à plusieurs endroits. En particulier <tt>onPreInit()</tt> est prioritaire au fichier de configuration de la page qui est lui même prioritaire au fichier de configuration de l'application. Ainsi, si vous spécifiez <tt>MainLayout</tt> dans le fichier de configuration de l'application/page et que vous spécifiez <tt>SpecialLayout</tt> dans <tt>Contact.page</tt>, ce sera le dernier qui sera pris en compte.
+</com:InfoBox>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day1/fr/directories.gif b/demos/blog-tutorial/protected/pages/Day1/fr/directories.gif
new file mode 100755
index 00000000..884e15bc
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/fr/directories.gif
diff --git a/demos/blog-tutorial/protected/pages/Day1/fr/directories2.gif b/demos/blog-tutorial/protected/pages/Day1/fr/directories2.gif
new file mode 100755
index 00000000..edf264d0
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/fr/directories2.gif
diff --git a/demos/blog-tutorial/protected/pages/Day1/fr/directories3.gif b/demos/blog-tutorial/protected/pages/Day1/fr/directories3.gif
new file mode 100755
index 00000000..3451935f
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/fr/directories3.gif
diff --git a/demos/blog-tutorial/protected/pages/Day1/fr/output.gif b/demos/blog-tutorial/protected/pages/Day1/fr/output.gif
new file mode 100755
index 00000000..9ad2bfb8
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/fr/output.gif