From 2fd00de2170fcb16b5214c7839c18f0dacab8cdb Mon Sep 17 00:00:00 2001
From: tof <>
Date: Fri, 31 Aug 2007 09:58:35 +0000
Subject: Full translation of Blog Tutorial in French. Thanks to Eric.M !

---
 .../protected/pages/Day5/fr/ErrorLogging.page      | 158 +++++++++++++++++++++
 .../protected/pages/Day5/fr/Performance.page       |  66 +++++++++
 .../protected/pages/Day5/fr/Summary.page           |  41 ++++++
 .../protected/pages/Day5/fr/UseTheme.page          | 138 ++++++++++++++++++
 .../protected/pages/Day5/fr/output.gif             | Bin 0 -> 4282 bytes
 .../protected/pages/Day5/fr/output2.gif            | Bin 0 -> 7798 bytes
 .../protected/pages/Day5/fr/output3.gif            | Bin 0 -> 5190 bytes
 7 files changed, 403 insertions(+)
 create mode 100755 demos/blog-tutorial/protected/pages/Day5/fr/ErrorLogging.page
 create mode 100755 demos/blog-tutorial/protected/pages/Day5/fr/Performance.page
 create mode 100755 demos/blog-tutorial/protected/pages/Day5/fr/Summary.page
 create mode 100755 demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page
 create mode 100755 demos/blog-tutorial/protected/pages/Day5/fr/output.gif
 create mode 100755 demos/blog-tutorial/protected/pages/Day5/fr/output2.gif
 create mode 100755 demos/blog-tutorial/protected/pages/Day5/fr/output3.gif

(limited to 'demos/blog-tutorial/protected/pages/Day5')

diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/ErrorLogging.page b/demos/blog-tutorial/protected/pages/Day5/fr/ErrorLogging.page
new file mode 100755
index 00000000..8e7c77e6
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/fr/ErrorLogging.page
@@ -0,0 +1,158 @@
+<com:TContent ID="Main">
+
+<h1>Gestion et journalisation d'erreur</h1>
+
+<p>
+Si vous tentez de naviguez à l'URL <tt>http://hostname/blog/index.php?page=EditPost&id=100</tt>, vous verrez la page d'erreur suivante parce que le message avec l'ID 100 n'existe pas pour le moment. Nous voudrions personnaliser cette page d'erreur de manière à ce qu'elle garde la présentation générale du site. Nous voudrions aussi journaliser cette erreur pour étudier le comportement des utilisateurs. Dans cette section, nous allons mettre en place ces deux fonctionnalités.
+</p>
+
+<img src="<%~ output2.gif %>" class="output" />
+
+<com:InfoBox>
+Une des tâches importantes dans les applications Web est la <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Error">gestion des erreurs</a> ainsi que leurs <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Logging">journalisation</a>. Il y a deux types d'erreurs qui peuvent se produire dans une application PRADO : celles provenant des développeurs et celles des utilisateurs. Les premières doivent être résolues avant que l'application ne soit en production, tandis que les deuxièmes sont généralement un problème de prise en charge au niveau du design et doivent être gérées proprement (ie: journaliser cette erreur et indiquer à l'utilisateur que faire après). PRADO fournit un ensemble de fonctionnalités très utiles pour gérer et journaliser les erreurs.
+</com:InfoBox>
+
+
+<h2>Personnalisation de la gestion d'erreur</h2>
+
+<p>
+PRADO charge de manière implicite un module de gestion d'erreurs. Nous voulons personnaliser ce module pour qu'il affiche une page spécifique pour les erreurs causées par les utilisateurs. Nous modifions donc notre application comme ci-dessous :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+<modules>
+    ......
+    <module class="Application.BlogErrorHandler" />
+    ......
+</modules>
+......
+</com:TTextHighlighter>
+
+<p>
+La classe <tt>BlogErrorHandler</tt> comme spécifiée ci-dessus est un nouveau gestionnaire d'erreur que nous allons créer après. Il étend et remplace le module par défaut <tt>TErrorHandler</tt>.
+</p>
+
+<p>
+Nous créons un fichier nommé <tt>protected/BlogErrorHandler.php</tt> avec le contenu suivant. La classe <tt>BlogErrorHandler</tt> surcharge deux méthodes de <tt>TErrorHandler</tt> :
+</p>
+<ul>
+  <li><tt>getErrorTemplate()</tt> - cette méthode renvoie le gabarit utilisé pour afficher un message d'erreur utilisateur.</li>
+  <li><tt>handleExternalError()</tt> - cette méthode est appelée lorsqu'une erreur utilisateur se produit et elle affiche l'erreur.</li>
+</ul>
+<com:TTextHighlighter CssClass="source" Language="php">
+Prado::using('System.Exceptions.TErrorHandler');
+Prado::using('Application.BlogException');
+
+class BlogErrorHandler extends TErrorHandler
+{
+	/**
+	 * Renvoi le fichier gabarit utilisé pour afficher l'erreur.
+	 * Cette méthode surcharge la méthode originale.
+	 */
+	protected function getErrorTemplate($statusCode,$exception)
+	{
+		// on utilise notre propre gabarit pour BlogException
+		if($exception instanceof BlogException)
+		{
+			// récupère le chemin du fichier de gabarit : protected/error.html
+			$templateFile=Prado::getPathOfNamespace('Application.error','.html');
+			return file_get_contents($templateFile);
+		}
+		else // sinon on utilise le gabarit par défaut.
+			return parent::getErrorTemplate($statusCode,$exception);
+	}
+
+	/**
+	 * Gère les erreurs causées par les utilisateurs.
+	 * Cette méthode surcharge la méthode originale.
+	 * Elle est appelée lorsqu'une exception utilisateur est générée.
+	 */
+	protected function handleExternalError($statusCode,$exception)
+	{
+		// Journaliser l'erreur (seulement pour BlogException)
+		if($exception instanceof BlogException)
+			Prado::log($exception->getErrorMessage(),TLogger::ERROR,'BlogApplication');
+		// appelle l'implémentation de la classe parente
+		parent::handleExternalError($statusCode,$exception);
+	}
+}
+</com:TTextHighlighter>
+
+<p>
+Dans le code précédent, nous spécifions que lorsqu'une exception de type <tt>BlogException</tt> est générée, nous utilisons le gabarit <tt>protected/error.html</tt> pour afficher l'erreur. Par ailleurs, nous devons créer la classe <tt>BlogException</tt> et remplacer toutes les occurrences de <tt>THttpException</tt> dans notre code (par exemple dans les pages <a href="?page=Day3.CreateEditUser">EditUser</a> et <a href="?page=Day4.CreateReadPost">ReadPost</a>). Nous devons aussi créer le gabarit <tt>protected/error.html</tt>. La classe <tt>BlogException</tt> hérite de <tt>THttpException</tt> et est vide. Le fichier de classe est enregistré sous <tt>protected/BlogException.php</tt>.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+class BlogException extends THttpException
+{
+}
+</com:TTextHighlighter>
+
+<p>
+Ci-dessous le contenu du gabarit <tt>protected/error.html</tt>. Remarquez que ce gabarit n'est pas un gabarit PRADO, ceci parce qu'il ne reconnait qu'un nombre limité de mots clés, par exemple <tt>%%ErrorMessage%%</tt>, <tt>%%ServerAdmin%%</tt>.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<html>
+<head>
+<title>%%ErrorMessage%%</title>
+</head>
+<body>
+<div id="page">
+<div id="header">
+<h1>Mon Blog</h1>
+</div>
+<div id="main">
+<p style="color:red">%%ErrorMessage%%</p>
+<p>
+Une erreur est apparue lors du traitement de votre demande.
+</p>
+<p>
+Si vous pensez que c'est une erreur de notre serveur, veuillez contacter <a href="mailto:%%ServerAdmin%%">webmaster</a>.
+</p>
+</div>
+</body>
+</html>
+</com:TTextHighlighter>
+
+
+<h2>Journalisation des erreurs</h2>
+
+<p>
+Dans la méthode <tt>handleExternalError()</tt> de <tt>BlogErrorHandler</tt>, nous appelons <tt>Prado::log()</tt> pour journaliser l'erreur si elle est de type <tt>BlogException</tt>. L'erreur est stockée en mémoire. Pour enregistrer le journal d'erreur sur un support non volatil, tel que le disque dur ou une base de données, nous devons indiquer à PRADO comment procéder. Ceci est fait par la configuration d'application suivante :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+<modules>
+    ......
+    <module id="log" class="System.Util.TLogRouter">
+        <route class="TFileLogRoute" Categories="BlogApplication" />
+    </module>
+    ......
+</modules>
+......
+</com:TTextHighlighter>
+
+<p>
+Dans le code ci-dessus, nous ajoutons une "route" pour enregistrer le journal d'erreur dans un fichier. Nous spécifions aussi le filtre de catégorie <tt>BlogApplication</tt>, de manière à ce que seules les erreurs de type <tt>BlogApplication</tt> soient sauvegardées. Cette possibilité permet de réduire la taille du journal et d'en améliorer la lisibilité.
+</p>
+
+<h2>Test</h2>
+<p>
+Pour voir comme notre blog se comporte suite à une demande invalide, nous naviguons à l'URL <tt>http://hostname/blog/index.php?page=posts.ReadPost&id=100</tt>. Nous devrions voir la page suivante qui est différente de celle vue précédemment.
+</p>
+
+<img src="<%~ output3.gif %>" class="output" />
+
+<p>
+Si nous regardons dans le dossier <tt>protected/runtime</tt>, nous devrions y trouver un fichier nommé <tt>prado.log</tt>. C'est le journal d'erreur que nous venons juste de paramétrer. Le fichier pourrait contenir quelque chose comme :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="text">
+Jun 28 22:15:27 [Error] [BlogApplication] Unable to find the specified post.
+Jun 29 08:42:57 [Error] [BlogApplication] Unable to find the specified post.
+</com:TTextHighlighter>
+
+</com:TContent>
\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/Performance.page b/demos/blog-tutorial/protected/pages/Day5/fr/Performance.page
new file mode 100755
index 00000000..59eee1b0
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/fr/Performance.page
@@ -0,0 +1,66 @@
+<com:TContent ID="Main">
+
+<h1>Amélioration des performances</h1>
+
+<p>
+Avant le déploiement de notre blog, nous voudrions améliorer les performances.
+</p>
+
+<h2>Changer le mode de fonctionnement de l'application</h2>
+
+<p>
+Une application PRADO peut-être configurée pour fonctionner suivant différents modes. Par défaut, elle fonctionne en mode <tt>Debug</tt>, mode qui génère beaucoup de message de journalisation et qui, en cas d'erreurs, affiche la pile des appels et l'emplacement de l'erreur. Ce comportement est préférable en cours de développement, mais pas en production. Pour changer le mode de fonctionnement de <tt>Debug</tt> à <tt>Normal</tt> ( qui signifie "en production"), nous devons modifier le fichier de configuration de l'application comme ci-dessous :
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<application id="blog" mode="Normal">
+    ......
+</application>
+</com:TTextHighlighter>
+
+<h2>Enabling Caching</h2>
+
+<p>
+There are a lot of parsing work involved in a PRADO application: configuration XMLs, templates, theme skins, etc. For every user request, PRADO needs to redo the parsing. To save this effort, we can enable caching. To do so, we modify the application configuration as follows,
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+<modules>
+    ......
+    <module id="cache" class="System.Caching.TDbCache" />
+    ......
+</modules>
+......
+</com:TTextHighlighter>
+
+<p>
+Maintenant, après avoir requis n'importe quelle page de notre blog, nous devrions trouver un fichier nommé <tt>sqlite3.cache</tt>. C'est un fichier de base de données qui mémorise les éléments analysés : gabarits, configurations, etc.
+</p>
+
+<com:InfoBox>
+Le module de <tt>cache</tt> que nous venons d'activer utilise une base de données comme support d'enregistrement. PRADO propose d'autres modules de <tt>cache</tt> plus rapide, tels que <tt>TMemCache</tt>, <tt>TAPCCache</tt>. Ces modules requièrent les extensions PHP correspondantes.
+</com:InfoBox>
+
+
+<h2>Utilisation de <tt>pradolite.php</tt></h2>
+
+<p>
+Afficher une page PRADO requiert des dizaines de fichiers PHP, ce qui est une cause de perte de temps. Ces fichiers comportent aussi beaucoup de commentaires qui permettent de générer la documentation des API. Dans le but de réduire ce coût, nous modifions notre fichier <tt>index.php</tt> et remplaçons <tt>prado.php</tt> par <tt>pradolite.php</tt>. Ce dernier est un gros fichier incluant les fichiers PHP nécessaires et dont on a retiré les commentaires.
+</p>
+
+<h2>Autres techniques</h2>
+
+<p>
+D'autres techniques sont disponibles pour améliorer les performances d'une application PRADO. D'après notre expérience, un des goulets d'étranglement dans une application Web, est l'accès aux bases de données. Les requêtes en base de données prennent souvent du temps, ce qui dégrade le temps d'affichage d'une page. Le <tt>cache</tt> est la principale solution à ce problème. Le module de <tt>cache</tt> activé dans notre fichier de configuration d'application peut aussi être utilisé dans ce but.
+</p>
+<p>
+Pour une page relativement stable et souvent consultée, le <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.OutputCache">cache de sortie</a> doit être envisagé. Le <tt>cache de sortie</tt> met en <tt>cache</tt> les parties sélectionnées d'une page. Ceci peut améliorer les performances des pages mises en <tt>cache</tt> de manière significative.
+</p>
+
+<p>
+Il a été prouvé que les solutions de <tt>cache</tt> côté serveur étaient très efficaces pour améliorer les performances d'une application PRADO. Par exemple, nous avons observé qu'en utilisant le <tt>Zend Optimizer</tt>, le RPS (requêtes par seconde) peut être multiplié par 10. Bien sûr, ceci au risque d'avoir des pages périmées, tandis que les solutions de <tt>cache</tt> de PRADO garantissent la validité des pages fournies.
+</p>
+
+</com:TContent>
\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/Summary.page b/demos/blog-tutorial/protected/pages/Day5/fr/Summary.page
new file mode 100755
index 00000000..1472c934
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/fr/Summary.page
@@ -0,0 +1,41 @@
+<com:TContent ID="Main">
+
+<h1>Résumé</h1>
+
+<p>
+Nous pouvons finalement déployer notre blog. Pour cela, nous devons juste copier le dossier <tt>blog</tt> complet vers le dossier du serveur Web. Nous pourrions avoir besoin de modifier <tt>index.php</tt> pour qu'il puisse trouver le chemin vers l'emplacement où a été installé le framework PRADO.
+</p>
+
+<p>
+Nous avons donc fini notre blog. Le processus peut paraitre complexe vu que nous avons passé pas loin de cinq jours pour y arriver. Toutefois, comme nous l'avions dit au début, le but de ce tutoriel est d'aider les développeurs PRADO à appréhender les principales techniques de PRADO.Le tutoriel n'avais pas pour but de finir un blog en cinq minutes, sinon nous n'aurions rien appris.
+</p>
+
+<p>
+En résumé, développer une application de gestion de base de données PRADO nécessite les étapes suivantes :
+</p>
+<ol>
+  <li>Analyse et création de la base de données</li>
+  <li>Créer le squelette de l'application avec <tt>prado-cli</tt></li>
+  <li>Mise en place de la gestion d'erreur pour gérer les erreurs d'utilisations</li>
+  <li>Création et mise en place du thème</li>
+  <li>Création et mise en place des gabarits principaux</li>
+  <li>Création de la connexion et des classes d'accès aux données</li>
+  <li>Création des différentes pages</li>
+  <li>Test et amélioration des performances/li>
+  <li>Déploiement</li>
+</ol>
+
+<p>
+Contrairement à l'ordre de notre tutoriel, la gestion d'erreur et la création des thèmes sont placées au début du processus. Ceci est dû au fait que des changements d'ordre généraux sont la plupart du temps requis. Par exemple, nous avons dû remplacer <tt>THttpException</tt> par <tt>BlogException</tt> dans notre tutoriel. Si vous définissez vos feuilles de styles plus tôt, vous pourrez plus facilement les utiliser au cours de la création des gabarits de pages.
+</p>
+
+<p>
+Un dernier conseil, essayez de penser orienté objet pendant la phase d'analyse et d'implémentation. Utilisez l'héritage le plus souvent, et vous trouverez que le projet est plus facile à développer en équipe. Il vous sera aussi plus facile de réutiliser votre code et ainsi vos futurs projets seront finis plus rapidement.
+</p>
+
+
+
+
+<hr />
+<p>Traduction (laborieuse) par Eric.M, nous pouvez me contacter par message privé ou par email sur le <a href="http://www.pradosoft.com/forum/index.php">forum PRADO</a>.</p>
+</com:TContent>
\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page b/demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page
new file mode 100755
index 00000000..840a26b0
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/fr/UseTheme.page
@@ -0,0 +1,138 @@
+<com:TContent ID="Main">
+
+<h1>Utilisation des Thèmes et des Skins</h1>
+
+<p>
+PRADO propose un support intrinsèque des <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Themes">thèmes</a>. En utilisant les thèmes, nous pouvons mieux séparer la logique applicative de la présentation et nous pouvons aussi changer facilement la présentation générale de notre blog.
+</p>
+
+<h2>Création des thèmes</h2>
+
+<p>
+Nous devons auparavant créer un dossier <tt>themes</tt>. C'est le dossier parent de tous les thèmes pour une application de PRADO. Chaque sous-dossier devient ainsi un thème dont le nom est le nom du sous-dossier.
+</p>
+
+<p>
+Pour créer un thème nommé <tt>Basic</tt>, nous créons un sous-dossier <tt>theme/Basic</tt>. Dans ce dossier, nous pouvons mettre des feuilles de styles dépendantes du thème, des fichiers Javascript, des images et des fichiers skins.
+</p>
+
+<com:InfoBox>
+Le dossier <tt>themes</tt> doit être accessible de l'extérieur. Ne mettez pas de données sensibles dans ce dossier. Nous pouvons changer l'emplacement de ce dossier en configurant le module <a href="http://www.pradosoft.com/docs/classdoc/TThemeManager">TThemeManager</a> dans le fichier de configuration de l'application.
+</com:InfoBox>
+
+
+<h3>Création de la feuille de style</h2>
+
+<p>
+Dans le dossier <tt>themes/Basic</tt>, nous créons un fichier CSS nommé <tt>style.css</tt>. Quand une page utilise ce thème, PRADO importe automatiquement la feuille de style dans cette page. Le même traitement est appliqué aux fichiers Javascript.
+</p>
+
+<p>
+Le contenu du fichier CSS est le suivant :
+</p>
+
+<com:TTextHighlighter CssClass="source">
+body {
+	font-family: verdana, 'trebuchet ms', sans-serif;
+	font-size: 10pt;
+	background: white;
+}
+#page {
+	margin: 0 auto 0 auto;
+	width: 600px;
+}
+#footer {
+	text-align: center;
+	margin-top: 10px;
+	padding: 10px;
+	border-top: 1px solid silver;
+}
+.post-box {
+	margin-bottom: 10px;
+	padding: 5px;
+}
+.post-box h3 {
+	padding: 5px;
+	font-size: 13pt;
+	background: lightgray;
+}
+.post-box a {
+	color: black;
+	text-decoration: none;
+}
+.post-box a:hover {
+	color: red;
+}
+</com:TTextHighlighter>
+
+
+<h3>Création du fichier de Skin</h2>
+
+<p>
+Nous utilisons des <tt>skin</tt> pour initialiser les propriétés des contrôles PRADO. Les fichiers <tt>skin</tt> sont enregistrés avec une extension <tt>.skin</tt> dans le dossier du thème. Chaque fichier <tt>skin</tt> peut contenir plusieurs modèles pour un ou plusieurs types de contrôles.
+</p>
+
+<p>
+Pour notre test, nous allons créer un fichier <tt>skin</tt> qui changera la couleur de fond de nos liens dans le pied de page. Nous créons un fichier nommé <tt>button.skin</tt> dans le dossier du thème <tt>themes/Basic</tt>.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+&lt;com:THyperLink SkinID="MainMenu" BackColor="lightgreen" />
+</com:TTextHighlighter>
+
+<p>
+Le fichier <tt>button.skin</tt> contient une seule définition pour les contrôles de type <tt>THyperLink</tt> dont la propriété <tt>SkinID</tt> est <tt>MainMenu</tt>. La définition applique une couleur vert-clair comme couleur de fond du contrôle.
+</p>
+
+<p>
+En accord avec cette définition, nous modifions notre fichier <tt>protected/common/MainLayout.tpl</tt> pour appliquer aux liens du pied de page la valeur <tt>MainMenu</tt> à la propriété <tt>SkinID</tt>.
+</p>
+<com:TTextHighlighter CssClass="source" Language="prado">
+......
+<div id="footer">
+......
+&lt;com:THyperLink Text="Home" SkinID="MainMenu"
+	NavigateUrl="&lt;%= $this->Service->DefaultPageUrl %>" />
+
+&lt;com:THyperLink Text="New Post" SkinID="MainMenu"
+	NavigateUrl="&lt;%= $this->Service->constructUrl('posts.NewPost') %>"
+	Visible="&lt;%= !$this->User->IsGuest %>" />
+......
+</div>
+......
+</com:TTextHighlighter>
+
+<com:InfoBox>
+La syntaxe des fichiers <tt>skin</tt> est très proche de celle des gabarits. Chaque balise <tt>&lt;com:&gt;</tt> définit la présentation d'un type de contrôle. PRADO concatène automatiquement les fichiers <tt>skin</tt> pour un thème et applique le tout lorsque la page est affichée.
+</com:InfoBox>
+
+
+<h2>Utilisation du thème</h2>
+
+<p>
+Pour utiliser le thème que nous venons juste de créer, nous modifions notre fichier de configuration de l'application comme ci-après. Comme vous pouvez le voir, nous affectons la valeur <tt>Basic</tt> (le nom du thème) à la priorité <tt>Theme</tt> pour toutes les pages.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+  <services>
+    <service id="page" class="TPageService" DefaultPage="posts.ListPost">
+      <pages MasterClass="Application.layouts.MainLayout" Theme="Basic" />
+    </service>
+  </services>
+......
+</com:TTextHighlighter>
+
+<com:InfoBox>
+Il est possible de préciser différents thèmes pour différentes pages, et ceci peut-être faits soit en modifiant le fichier de configuration de page soit par programmation (propriété <tt>Theme</tt>). En dernier recours, on peut le faire dans la méthode <tt>onPreInit()</tt> de la page, ceci parce que PRADO applique le thème au début du cycle de vie de la page.
+</com:InfoBox>
+
+
+<h2>Test</h2>
+<p>
+Pour voir la nouvelle présentation de notre site, allons à l'URL <tt>http://hostname/blog/index.php</tt>. Nous pouvons constater que la mise en page, les polices, les bordures sont modifiées. De même, la couleur de fond des liens en pied de page est vert-clair.
+</p>
+
+<img src="<%~ output.gif %>" class="output" />
+
+</com:TContent>
\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/output.gif b/demos/blog-tutorial/protected/pages/Day5/fr/output.gif
new file mode 100755
index 00000000..67bd18a3
Binary files /dev/null and b/demos/blog-tutorial/protected/pages/Day5/fr/output.gif differ
diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/output2.gif b/demos/blog-tutorial/protected/pages/Day5/fr/output2.gif
new file mode 100755
index 00000000..16c81704
Binary files /dev/null and b/demos/blog-tutorial/protected/pages/Day5/fr/output2.gif differ
diff --git a/demos/blog-tutorial/protected/pages/Day5/fr/output3.gif b/demos/blog-tutorial/protected/pages/Day5/fr/output3.gif
new file mode 100755
index 00000000..6879bbdf
Binary files /dev/null and b/demos/blog-tutorial/protected/pages/Day5/fr/output3.gif differ
-- 
cgit v1.2.3