Je tiens au passage à remercier tous les étudiants de ce campus sur lequel je me suis bien amusé à donner cours, dans la joie et la bonne humeur ! Et ce, malgré la chaleur excessive pour un “nordiste”, même en février. ^^

A noter que pour une meilleur compréhension de l’utilité des moteurs de templates, je vous invite à (re)lire mon article “Création d’un moteur de templates en PHP 5 objet”.

La première partie de cette article comprendra la documentation de la classe, ainsi qu’un exemple d’utilisation. La deuxième, réservée aux développeurs souhaitant m’aider à optimiser cette classe, expliquera en détail l’intérieur des différentes méthodes. Elle ne sera en rien nécessaire à l’utilisation de ce framework.

Télécharger la classe TemplateEngine, moteur de templates du framework PEJO

Méthodes de la classe TemplateEngine

Cette classe contient différentes méthodes. Nous ne verrons ici, dans cette partie réservée aux utilisateurs du framework PEJO, uniquement les méthodes accessibles depuis l’extérieur, et requise pour la manipulation quotidienne de la classe.

Constructeur :

Tout d’abord, commençons à instancier notre moteur de template, dans le fichier index.php par exemple.

< ?php 

	require_once('templateEngine.php');

	$tpl = new TemplateEngine();

?>

Ce constructeur prend un paramètre booléen, $localization. Celui-ci permettra d’indiquer au moteur s’il doit internationaliser notre application en utilisant l’extension PHP gettext. Par défaut, il ne cherchera pas à le faire. Et nous non plus, pour simplifier les choses. :)

Affichage de sous-templates

Il est possible de séparer un fichier HTML en plusieurs sous parties. Ce que nous allons faire ici. Créons donc un fichier index.html, et insérons-y le code suivant :

<p>Bonjour le monde !</p>


Test du moteur de templates !

Ce fichier est séparé en une sous-partie d’identifiant bonjour et en une autre d’identifiant main. On remarque la syntaxe particulière de séparation des sous-parties :

A noter qu’il faut au minimum une sous-partie par fichier, afin de pouvoir l’utiliser.

Comment récupérer une sous-partie depuis notre moteur de templates ? C’est le rôle de la méthode GetHTMLCode.

< ?php 

	require_once('templateEngine.php');

	$tpl = new TemplateEngine();
	$buffer = $tpl->GetHTMLCode('index.html', 'bonjour');

?>

La méthode GetHTMLCode prend deux arguments. Le premier est le nom du fichier où aller récupérer la sous-partie, et le deuxième l’identifiant de la sous-partie. Dans ce cas, notre variable $buffer cmoprendra donc le paragraphe “Bonjour le monde !”.

On pourra constater que ce code n’affiche rien à l’heure actuel. Pour afficher quelque chose, il nous faudra passer par la méthode Output.

Affichage

La méthode Output va nous permettre d’afficher le contenu de la variable passée en argument.

TemplateEngine::Output($buffer);

Cette méthode peut-être utile au cas où vous auriez des problèmes d’affichage (problèmes d’encodage, d’échappement d’apostrophes, etc.). En effet, il vous suffira de mettre votre fonction de traitement à l’intérieur de cette méthode, sans avoir à manipuler les buffers.

Utilisation de variables

A présent, nous allons voir comment interfacer notre code PHP avec notre code HTML. Imaginons le code PHP suivant :

< ?php 

	require_once('templateEngine.php');

	$prenom = 'Jonathan';
	$nom = 'Petitcolas';

	$tpl = new TemplateEngine();
	$bonjour = $tpl->GetHTMLCode('index.html', 'bonjour');
	TemplateEngine::Output($tpl->GetHTMLCode('index.html', 'main'));

?>

Et effectuons quelques modifications à notre code HTML :

<p>Bonjour ${prenom} ${nom} !</p>


Test du moteur de templates !

${bonjour}

En observant le résultat, on aura le code source suivant :

Test du moteur de templates !

<p>Bonjour Jonathan Petitcolas !</p>

Que s’est-il passé ? A la ligne 9 du code PHP, nous avons récupéré le sous-template bonjour. A l’intérieur, nous avons deux variables, repérées par l’écriture ${VARIABLE}. Le moteur de templates s’est alors chargé de remplacer ces étiquettes par les valeurs des variables respectives, par l’intermédiaire de la méthode GetHTMLCode.

Après avoir placé ce code modifié dans une variable, nous l’avons affiché dans la partie main, avant de tout envoyer au navigateur, via la méthode statique Output. Rien de plus compliqué. :)

A présent, vous connaissez toute la théorie de niveau supérieur pour utiliser ce moteur de templates. Vous pourrez ainsi développer proprement, en séparant à la fois partie PHP et partie HTML. En effet, pour obtenir un taux de maintenabilité le plus élevé possible, il est important de séparer le code de votre application en ses différentes composantes : PHP, HTML, Javascript, CSS, etc… Tout doit être dans un fichier différent (idéalement). Nous veillerons particulièrement à cette best-pratice dans l’utilisation du framework PEJO.

Exemple d’utilisation

Nous allons voir ici un exemple d’utilisation de cette classe, exemple que nous aurons souvent besoin de retrouver dans la suite de nos développements, à savoir l’affichage d’un tableau (mais on pourrait aussi prendre l’affichage d’une liste, ou de tout autre élément).

Imaginons que nous récupérons un tableau de la couche métier de notre application. Ce tableau peut par exemple provenir d’une base de données. Pour des raisons de simplification, nous déclarerons ce tableau “en dur” dans le code.

$datas[0]['titre'] = 'Les Misérables'; 	$datas[0]['auteur'] = 'Victor Hugo';
$datas[1]['titre'] = 'Candide'; 		$datas[1]['auteur'] = 'Voltaire';
$datas[2]['titre'] = 'Le Cid'; 			$datas[2]['auteur'] = 'Corneille';
$datas[2]['titre'] = 'L\'Avare'; 		$datas[3]['auteur'] = 'Molière';

A présent, nous voulons afficher le tout dans un tableau. Pour ce faire, modifions notre fichier HTML :

<!---===== tpl_name = main =====--->
<h1>Librairie</h1>
<table>
	<thead>
		<tr>
			<th>Titre</th>
			<th>Auteur</th>
		</tr>
	</thead>
	<tbody>
		${livres}
	</tbody>
</table>

<!---===== tpl_name = livre =====--->
<tr>
	<td>${titre}</td>
	<td>${auteur}</td>
</tr>

Rien qu’en voyant ce code, vous devriez être en mesure de deviner le cheminement. Nous allons concaténer dans une variable ${livres} le contenu du sous-template livre, en faisant varier ${titre} et ${auteur} grâce aux données de notre tableau.

Traduisons donc cela en PHP :

< ?php 

	require_once('templateEngine.php');

	$datas[0]['titre'] = 'Les Misérables'; 	$datas[0]['auteur'] = 'Victor Hugo';
	$datas[1]['titre'] = 'Candide'; 		$datas[1]['auteur'] = 'Voltaire';
	$datas[2]['titre'] = 'Le Cid'; 			$datas[2]['auteur'] = 'Corneille';
	$datas[2]['titre'] = 'L\'Avare'; 		$datas[3]['auteur'] = 'Molière';

	$tpl = new TemplateEngine();

	foreach($datas as $livre)
	{
		$titre 	= $livre['titre'];
		$auteur = $livre['auteur'];

		$livres .= $tpl->GetHTMLCode('index.html', 'livre');
	}

	TemplateEngine::Output($tpl->GetHTMLCode('index.html', 'main'));

?>

Je ne m’étendrais pas davantage dans les explications, étant donné que le paragraphe précédant est suffisamment explicite.

Une petite remarque cependant, destinée aux développeurs. De nombreux stagiaires ayant travaillé sur mon moteur de templates me posent la : pourquoi ne pas prévoir une méthode nous permettant d’écrire directement dans le HTML une variable sous la forme (par exemple) : ${livre['titre']}. Je refuse ce développement, et ce pour une simple raison.

Si nous insérons l’élément du tableau directement dans le HTML, cela nous fera perdre la possibilité d’effectuer une mise en forme sur l’élément avant de l’afficher. Par exemple, si notre tableau contient un élément de type timestamp (à savoir le nombre de secondes écoulées depuis le 1er janvier 1970), il est bien plus ergonomique d’afficher la date au format humain (par exemple 12/03/2008) plutôt que cet entier incompréhensible. La conversion se fait en PHP, et doit donc être dans le fichier index.php. Suivant cette logique, la question n’a plus lieu d’être.

Ainsi s’achève cet exemple. Ainsi que la partie “grand public” (bien que public très restreint) se termine. La suite est réservée aux développeurs souhaitant comprendre les fondations de ce framework, et pourquoi pas le faire évoluer. :)

Documentation technique

Si vous êtes encore là, c’est que vous n’avez pas peur de mettre les mains dans le cambouis. Bravo ! :)

Voici donc une petite documentation technique, qui vous permettra d’approfondir davantage le fonctionnement de la classe, au cas où certains commentaires vous sembleraient obscurs. Allons-y donc méthode par méthode. :)

Constructeur

/**
* Initializes all options of our templates engine.
* @param $localization		Will our application be internationalized (with PHP extension gettext)? Default: no.
* @return void
*/
public function __construct($localization = false)
{
	$this->files = array();
	$this->subtemplates = array();
	$this->localization = $localization;
}

Ici, rien de particulier à indiquer, si ce n’est l’utilité des variables. L’attribut $files contiendra les fichiers déjà parsés de notre moteur de templates, ce qui permettra une sorte de mise en cache, dans le but d’optimiser les performances. L’attribut subtemplates, quant à lui, permettra de stocker le contenu de chacune des parties, afin de faciliter les traitements ultérieurs internes au moteur. Quant à $localization, cela nous permettra de garder en mémoire si nous devons utiliser l’extension PHP gettext ou non, pour internationaliser notre application.

Méthode GetHTMLCode

/**
 * Transforms a sub-template to the HTML output.
 * @param $filename	File containing the used sub-template.
 * @param $subtemplate Name of the subtempalte to use.
 * @return string HTML code ready to be displayed.
 */
public function GetHTMLCode($filename, $subtemplate)
{
	$this->ParseFile($filename);					// Reads the sub-template
	return $this->Evaluate($filename, $subtemplate);	// Replaces all HTML variables.
}

Pas grand chose à dire sur cette fonction, les commentaires se suffisant à eux-mêmes. :)

Méthode ParseFile

/**
 * Reads the file and extracts all sub-templates.
 * @param $filename File to parse.
 * @return void
 */
private function ParseFile($filename)
{
	// If the file has already be parsed, we do not parse it again.
	if($this->files[$filename] !== true)
	{
		// Retrieving file content.
		$filename = addslashes($filename);
		if(!file_exists($filename))	throw new Exception('File '.$filename.' does not exist.');
		$this->files[$filename] = file_get_contents($filename);

		// Retrieving all sub-templates from file.
		$this->GetSubTemplates($filename);
	}
}

Ce code est légèrement plus complexe. Cette méthode va lire le contenu du fichier $filename, s’il n’a pas déjà été lu. En effet, si on a déjà parsé ce fichier dans le passé, l’attribut $this->files[$filename] vaudra true. Et ainsi, il sera inutile de relire ce fichier, étant donné que nous avons déjà ses sous-parties en mémoire dans l’attribut subtemplates. On ne rentrera pas dans la structure de contrôle.

Afin de simplifier la saisie de l’utilisateur, on échappe automatiquement les slashes. Sans cette ligne, le nom du fichier aurait dû, pour un maximum de compatibilité, contenir des doubles slashes, chose assez rébarbative, il faut bien l’avouer.

Le fichier est alors lu (s’il existe) et son contenu placé dans $this->files.

Méthode GetSubTemplates

Comme indiqué dans la documentation utilisateur un peu plus haut dans cet article, chaque fichier sera décomposé en plusieurs sous-parties, appelées sous-templates. Chaque sous-partie sera séparée par : , où TEMPLATE_NAME sera remplacé par un nom unique dans chaque fichier, identifiant de cette partie.

/**
 * Retrieving all sub-templates from a given file.
 * @param $filename	File from which to extract sub-templates.
 * @return void
 */
private function GetSubTemplates($filename)
{
	/**
	 * All sub-templates will look like the following:
	 *
	 * 		
	 * 		<h1>This is my sub-templates</h1>
	 *
	 * No closing tags are required.
	 */

	// Splitting the file in sub-templates.
	$explosion = explode('', $tmp);

		$subTemplateName	= $tmp[0];
		$subTemplateContent = $tmp[1];

		// If internationalized, we translate it now with gettext extension.
		$this->subtemplates[$filename][$subTemplateName] = ($this->localization ? $this->Localize($subTemplateContent) : $subTemplateContent);
	}

	// If the file is parsed, we replace the textual content heavy in memory by a single bit.
	$this->files[$filename] = true;
}

On découpe notre fichier en sous-templates ligne 18 grâce à la fonction explode. Nous aurons alors dans $explosion l’ensemble de nos sous-templates, contenant encore l’identifiant et le morceau parasite =====—>. Qu’à cela ne tienne, nous séparons le nom du contenu grâce à l’explosion de la ligne 23.

Pourquoi ne pas avoir pris une expression régulière pour effectuer cette découpe ? Pour des raisons de performances, un explode étant bien plus rapide qu’une REGEX. D’autre part, cela est bien plus simple à appréhender. Et comme le disait si justement mon prof de mécanique en hypotaupe : on va pas prendre un char d’assaut pour percer un trou de 8 !. Tout est dit. :p

On range alors le contenu de notre template (éventuellement internationalisé grâce à l’extension php_gettext grâce à la méthode Localize) dans le tableau associatif $subtemplates, classé par nom de fichier et nom de template.

Enfin, pour nous assurer que nous ne relirons pas le même fichier deux fois et donc mettre en place une mise en cache de base, nous remplaçons le contenu de notre fichier dans la variable $files relativement coûteux en mémoire par un simple true, codé sur un seul et simple bit.

Méthode Evaluate

Cette méthode va nous permettre de remplacer nos variables (de la forme ${VARIABLE}) par leur valeur dans notre code HTML.

/**
 * Replaces all variables by their content in the HTML file.
 * @param $filename File where to replace the variables.
 * @param $subtemplate Sub-template to use.
 * @return string HTML code ready to be displayed.
 */
private function Evaluate($filename, $subtemplate)
{
	/**
	 * All variables will be written in the HTML code with ${VARIABLE_NAME}.
	 */

	// Retrieving the localized (or not) HTML content, without replacing variables.
	$evaluatedCode = $this->subtemplates[$filename][$subtemplate];

	// Retrieving all variables names from the sub-template.
	preg_match_all('#\${(.*)}#U', $evaluatedCode, $variables);
	$variables = $variables[1];

	// Replacing the value of each variable.
	foreach ($variables as $variable)
	{
		global $$variable;
		$evaluatedCode = str_replace('${'.$variable.'}', $$variable, $evaluatedCode);
	}

	// Returns the code with variable values inside.
	return $evaluatedCode;
}

Nous récupérons d’abord tous les noms de variables grâce à l’expression régulière ligne 17.

Puis, pour chaque noms de variables contenus dans $variables, on travaille sur la variable $$variable. On va en fait utiliser une variable du nom la valeur contenue dans $variable. Petit exemple, qui sera sans doute bien plus explicite :

$a = 1;
$variable = 'a';
echo $$variable;

Ici, afficher $$variable est équivalent à afficher $a, donc 1. Pratique n’est-ce pas ? :p

On place donc notre variable en global, ce qui nous permettra de récupérer la valeur de celle-ci lors de son initialisation dans notre script PHP (nous évitant ainsi de devoir la passer en paramètre de notre méthode). Puis, nous remplaçons simplement l’écriture ${variable} dans notre code HTML avec la fonction str_replace, plus performant qu’une autre expression régulière.

Méthode Localize

Nous n’allons pas nous étendre très profondément sur cette méthode, un futur article traitant de l’internationalisation de nos applications (prévue par le framework : je vous avais dit que c’était un truc sympa ! (-:) étant prévu.

/**
 * Translates the content of a sub-template thanks to gettext PHP extension.
 * @param $content Content of the sub-template to translate.
 * @return string Translated content.
 */
private function Localize($content)
{
	/**
	 * All texts to internationalize will be written like the following: _("Text to translate.").
	 */

	// Retrieving text to internationalize.
	preg_match_all('#_\(\"(.+)\"\)#Us', $content, $unlocalizedTexts);
	$unlocalizedTexts = $unlocalizedTexts[1];

	// Translating all pieces of text.
	foreach($unlocalizedTexts as $unlocalizedText)
	{
		$content = preg_replace('#_\(\"'.$unlocalizedText.'\"\)#Us', gettext($unlocalizedText), $content);
	}

	// Returns the translated text.
	return $content;
}

Dans notre template, il est possible d’internationaliser du texte. Celui-ci devra être compris entre les chaînes de caractères : _(”Texte à traduire”). Il s’agit de la syntaxe la plus proche de l’extension gettext, d’où ce choix. Cependant, étant donné que la traduction passe par le moteur de templates, vous pouvez modifier celle-ci si elle ne vous plaît pas.

Nous récupérons donc tous les textes à traduire ligne ligne 13, et nous les remplaçons par leurs versions traduites à la ligne 19, en utilisant la méthode gettext, qui cherchera des correspondances dans notre fichier de langue.

Ainsi s’achève les méthodes plutôt techniques. Voyons donc les deux dernières, qui reposeront le cerveau.

Méthode Output

Cette méthode va permettre d’afficher le contenu d’une variable, en lui appliquant éventuellement un ou plusieurs traitements.

/**
 * Writes a buffer, results of some templates engine treatments. Static function for better performances.
 * @param $buffer Text to write.
 * @return void
 */
public static function Output($buffer)
{
	// You will be able to use here some display functions depending your configuration, as the following:

	// $buffer = utf8_encode($buffer);
	// $buffer = strip_slashes($buffer);

	echo $buffer;
}

Tout d’abord, on remarque que cette méthode est statique. Et pour cause, une méthode statique est 4 fois plus efficace (environ) qu’une méthode non statique (dynamique ?).

Cette fonction affiche simplement notre variable. C’est une sur-couche de echo en quelques sortes. Pourquoi avoir fait cela ? Simplement pour vous permettre d’encoder en UTF-8, de retirer des slashes en trop, ou que sais-je encore… avant l’affichage. Un comportement un peu similaire aux filtres WordPress pour les connaisseurs. Cela vous évitera donc de manipuler les buffers, à la documentation plutôt énigmatique et à l’utilité contestable, si on pense bien son code. ;)

Méthode Debug

Cette méthode se retrouve dans toutes les classes du framework PEJO, et permet d’afficher à l’instant t le contenu de notre classe.

/**
 * Used to print the content of our template engine. For debug purposes.
 * @return void
 */
public function Debug()
{
	echo '<pre>';
	print_r($this);
	die('</pre>');
}

Cela se passe de commentaires.

Télécharger la classe TemplateEngine, moteur de templates du framework PEJO

Ainsi s’achève cet article sur le moteur de templates du framework PEJO. N’hésitez surtout pas à me faire part de vos remarques (c’est après tout le but de la publicisation de ce framework) ou de vos questions. Les commentaires sont faits pour ça après tout. ;)

Prochaine étape dans notre découverte de ce framework : l’arborescence normalisée et le routeur de navigation. Patience… :)

Le Conseil Constitutionnel a rendu avant-hier (mercredi 10 juin) sa décision concernant la loi “Création et Internet”, aussi connue sous projet HADOPI. Que dit cette décision, très simple à lire au demeurant (les juristes ont fait de grands efforts au niveau de la vulgarisation des documents) ? Que du bon amis technophiles, que du bon !

Comme indiqué maintes et maintes fois par l’opposition, par la communauté des bloggueurs, par différents médias, par différentes groupes et collectifs indépendants tels que la Quadrature du Net, le Conseil Constitutionel s’est prononcé à l’encontre de cette loi liberticide. Ainsi, cette décision rappelle la déclaration des droits de l’homme et du citoyen de 1789, qui a été oubliée par notre ministre, Christine Albanel.

Tout d’abord, la liberté d’expression :

La liberté de communication et d’expression, énoncée à l’article 11 de la Déclaration des droits de l’homme et du citoyen de 1789, fait l’objet d’une constante jurisprudence protectrice par le Conseil constitutionnel (voir dernièrement décision n °2009-577 DC du 3 mars 2009). Cette liberté implique aujourd’hui, eu égard au développement généralisé d’internet et à son importance pour la participation à la vie démocratique et à l’expression des idées et des opinions, la liberté d’accéder à ces services de communication au public en ligne.

Or les articles 5 et 11 de la loi déférée confiaient à la commission de protection des droits de la HADOPI des pouvoirs de sanction l’habilitant à restreindre ou à empêcher l’accès à Internet à des titulaires d’abonnement. Ces pouvoirs pouvaient donc conduire à restreindre l’exercice, par toute personne, de son droit de s’exprimer et de communiquer librement. Dans ces conditions, le législateur ne pouvait, quelles que soient les garanties encadrant le prononcé des sanctions, confier de tels pouvoirs à une autorité administrative dans le but de protéger les titulaires du droit d’auteur. Ces pouvoirs ne peuvent incomber qu’au juge.

Ainsi, il est naturellement hors de question de conférer à une autorité indépendante le pouvoir d’un juge, seul apôtre de la justice capable de punir le citoyen, déjà en temps normal, mais encore plus lorsqu’il s’agit d’un vecteur d’information et d’éducation tel qu’Internet.

Autre point que le gouvernement semble remettre en question, la présomption d’innocence.

L’article 9 de la Déclaration de 1789 pose le principe de la présomption d’innocence duquel il résulte que la loi ne saurait, en principe, instituer de présomption de culpabilité en matière répressive (n° 99-411 DC du 16 juin 1999). Or, aux termes de la loi déférée, seul le titulaire du contrat d’abonnement à internet pouvait faire l’objet des sanctions instituées. Pour s’exonérer, il lui incombait de produire des éléments de nature à établir que l’atteinte portée au droit d’auteur procède de la fraude d’un tiers. En méconnaissance de l’article 9 de la Déclaration de 1789, la loi instituait ainsi, en opérant un renversement de la charge de la preuve, une présomption de culpabilité pouvant conduire à prononcer contre l’abonné des sanctions privatives ou restrictives du droit.

Et en effet… Si votre IP est découverte comme adresse source de téléchargements illégaux (ou même du téléchargement de distributions Linux via peer-to-peer : comment différencier les deux flux, l’un tout à fait légal l’autre non ? d’autant plus quand on voit l’incompétence complète de la majeure partie de nos politiciens vis à vis des nouvelles technologies !), vous deviez, avec cette loi incohérente, prouver d’une part que ce n’était pas vous qui téléchargiez ainsi et que vous étiez simplement la victime d’un méchant pirate ; d’autre part que vous aviez assuré un niveau de sécurité “maximal” (comprendre l’installation d’un mouchard) pour vous prémunir de toute attaque. Délires ministériels sans doute. Quoiqu’il en soit, le Conseil Constitutionnel a réprimé cet aspect de la loi.

Mais ce n’est pas fini. Autre point fondamental que cette loi voulait tout simplement supprimer : le respect de la vie privée.

Considérant que, selon les requérants, la loi déférée opère une conciliation manifestement déséquilibrée entre la protection des droits d’auteur et le droit au respect de la vie privée ; que l’objectif poursuivi par le législateur nécessiterait la mise en oeuvre de mesures de surveillance des citoyens et l’instauration d’un ” contrôle généralisé des communications électroniques ” incompatibles avec l’exigence constitutionnelle du droit au respect de la vie privée ; que les requérants font valoir que les pouvoirs reconnus aux agents privés, habilités à collecter les adresses des abonnés suspectés d’avoir partagé un fichier d’oeuvre protégée, ne sont pas encadrés par des garanties suffisantes ;

Ainsi, au revoir récolte des adresses IP, mouchard et surveillances des communications électroniques ! Ouf ! Seul bémol : que va-t-il arriver à Jérome Bourreau-Guggenheim, licencié par TF1 pour son opinion anti-HADOPI, déclarée par email ? Mystère…

Bref, des avancées qui vont bien plus dans le sens démocratique que les lois édictées par nos dirigeants. Mais il est vrai que contrôler Internet n’est pas chose facile, tant la liberté est un principe fondamental de l’Homme.

Cette loi est donc vidée de son contenu, et ne reste plus qu’une vulgaire machine d’envoi d’emails. Mais aussi, tout comme l’indique très ironiquement maître Eolas :

La HADOPI se contentera donc de délivrer son label “ ici, on télécharge légalement, lol ” à qui en fera la demande, et remplira ses autres missions, purement consultatives.

Je n’en reste pas moins dégoûté quant à la France :

• Être obligé d’aller jusqu’au Conseil Constitutionnel pour respecter la liberté d’expression et la présomption d’innocence, deux principes clefs de la déclaration des droits de l’homme et du citoyen,
• Rester aussi insensible à l’opposition, qui elle au moins, apporte des faits et des arguments concrets et valables,
• Laisser des dirigeants aussi éloignés de la sphère technologique édicter des lois régulant le monde virtuel,
• Organiser des lois pour assurer la survie d’industries incapables de s’adapter à leurs modèles économiques : sont-ce les citoyens ou les lobbies qui établissent indirectement (ou pas) la loi ?

Mais, bien qu’HADOPI étant une vulgaire coquille vide, il ne faut pas baisser les bras pour autant, étant donné la présence imminente de la loi LOPPSI, cette fois-ci pour assurer la “sécurité intérieure” (comprendre la légalisation de l’espionnage du citoyen lambda). Bref, “la France, tu l’aimes ou tu la quittes”… Je dois avouer que j’envisage de plus en plus la seconde solution. Et je ne suis pas le seul…

Enfin, pour clore cet article, une petite piqûre de rappel à notre amie Christine : le talk Orange-Le Figaro effectué le 29 avril dernier, concernant cette même loi.

Aura-t-elle le bon sens courage de démissionner ? Rien n’est moins sûr, étant donné que, preuve de son entêtement démentiel, elle s’est elle-même “félicité que le principe d’un dispositif pédagogique de prévention du piratage ait été validé par le Conseil constitutionnel”. Oui, vous avez bien lu… C’est beau n’est-ce pas, autant de mauvaise foi ? >_< ]]> http://www.jonathan-petitcolas.com/hadopi-demolie-conseil-constitutionnel/feed/ http://www.jonathan-petitcolas.com/hadopi-demolie-conseil-constitutionnel/ http://feedproxy.google.com/~r/jonathan-petitcolas/~3/lFLRxgVNQO8/ http://www.jonathan-petitcolas.com/hacks-css-et-commentaires-conditionnels/#comments Sat, 06 Jun 2009 16:00:11 +0000 Jonathan Petitcolas http://www.jonathan-petitcolas.com/?p=1041 Tout développeur Web est un jour confronté à la dure réalité des différents navigateurs. En effet, que ce soit en Javascript ou en CSS, chacun se permet quelques libertés par rapport aux normes du W3C. Outre le fait que cela soit totalement aberrant (des normes ne sont-elle pas faîtes pour être suivies et faciliter l’interopérabilité ?), cela a de lourdes répercussions en terme de développement.

La solution pour pallier à tous ces problèmes de compatibilité en Javascript est l’utilisation d’un framework, qui a l’avantage d’être compatible avec de nombreux navigateurs et qui vous simplifie par la même occasion grandement le code. Nous pouvons par exemple citer le framework MooTools.

En CSS en revanche, les choses sont un peu plus difficiles. En effet, il n’existe pas réellement de framework (si ce n’est pour mettre grossièrement en page votre site). Et il arrive très souvent de déceler des écarts importants, des chevauchements inesthétiques, des couleurs qui varient (si, si, ça arrive !), etc. Comment faire ? Eh bien, il existe essentiellement 2 méthodes.

Hacks CSS

Cette technique consiste à jouer sur les différences d’interprétation des navigateurs. Ainsi, il sera possible de donner une règle pour un navigateur uniquement (par exemple IE7), sans que les autres n’arrivent à la comprendre. Ainsi, seul le navigateur concerné l’appliquera.

Souvent, les développeurs considèrent cette méthode comme “sale”. Et pour cause, jouer avec les libertés très particulières offertes par rapport aux normes est plutôt dangereux. Imaginez une mise à jour qui modifie ce comportement. Outre le fait que vous ne serez pas forcément prévenu dès le départ (la veille technologique ayant ses limites), il va falloir répondre très rapidement à ce changement, afin que celui-ci soit le moins visible pour vos visiteurs.

Voici une liste de hacks pour les navigateurs les plus courants. Ici, on appliquera une couleur de fond différente pour chaque navigateur. Par défaut, elle est argentée.

body { background-color: silver; }

Hack IE6 :

Pour tous ceux qui développeraient encore sur navigateur déprécié (même par Microsoft), voici le très célèbre hack :

* html body { background-color: red; }

A noter que je ne développe plus, aussi bien à titre personnel que professionnel, pour ce navigateur. Il est temps d’évoluer un peu, sans quoi nous serions encore à réaliser des sites optimisés pour du 680×460. :o

Hack IE7 :

IE7 est relativement incontournable, étant donné qu’il s’agit de la version la plus répandue. On le CSS-hacke avec :

*+html body { background-color: green; }

Hack IE8 :

Pensons à l’avenir, et préparons immédiatement notre site pour IE8, qui commence tout doucement à être adopté.

body { background-color/*\**/: blue\9 }

Petite remarque ici : vous serez obligé de répéter le sélecteur autant de fois que d’attributs modifiés. Cela peut vite s’avérer relativement lourd, mais c’est, à ma connaissance, la seule solution.

Hack Firefox :

Un hack Firefox est une chose plutôt étrange, étant donné que ce navigateur est le plus répandu pour le développement Web, en raison notamment de son respect des normes et de la diversité de ses plug-ins. Il est donc logique de développer et d’optimiser pour ce navigateur, faisant de petites adaptations pour les autres. Mais, sait-on jamais, ce hack pourrait peut-être vous servir…

html>/**/body, x:-moz-any-link, x:default { background-color: yellow;}

Hack Safari / Chrome :

A présent, une propriété CSS que je ne connaissais même pas avant d’apprendre ce hack :

body:nth-of-type(1) { background-color: red; }

Je pense avoir fait le tour de tous les principaux navigateurs. A noter que, comme expliqué précédemment, ces morceaux de code sont susceptibles d’être rendus caducs par une mise à jour de ces navigateurs. A consommer avec modération donc. ;)

Quant à Opera, je ne l’ai pas oublié, mais n’ai pas réussi à lui trouver de hacks exclusifs. Si vous en avez, n’hésitez pas à les partager en commentaires. :)

Commentaires conditionnels

Les commentaires conditionnels sont une caractéristique spécifique à Internet Explorer. Cet écart par rapport aux normes permet aux intégrateurs CSS de se simplifier grandement la vie en jouant sur la propriété de cascade des feuilles de style : toute propriété définit une seconde (ou plus) fois écrase la valeur précédente.

Ainsi, le développeur mettra en place une feuille de style pour les navigateurs “normaux”. Généralement, Firefox, les autres tels que Safari n’ayant pas de grandes différences d’interprétation par rapport au renard orange. Puis, il mettra en place d’autres feuilles de style venant surcharger les propriétés posant problèmes sous IE. Ces feuilles de style ne seront chargées QUE par le produit de la firme de Redmond.

Voici la syntaxe des commentaires conditionnels :

<!--[if IE]>
<![endif]-->

Mais, encore plus intéressant, nous pouvons choisir la bonne feuille de style en fonction de la version d’Internet Explorer. Par exemple :

<!--[if IE 8]>
<![endif]-->
<!--[if IE 7]>
<![endif]-->
<!--[if IE 6]>
<![endif]-->

Ainsi, pour chaque version, vous pourrez appliquer une feuille de style particulière. Je vous conseille vivement de respecter cet ordre : du navigateur respectant le plus les normes à celui qui les respectent le moins. Ainsi, on pourra procéder par ajustements successifs, s’éloignant petit à petit des normes.

Hacks et commentaires conditionnels : c’est quoi le mieux ?

Dans l’absolu, aucun des deux. Dans un monde parfait, il ne faudrait pas avoir à utiliser ce genre de contournement des normes. Si le W3C édicte des normes, ce n’est pas seulement pour 5 gus dans un garage (petite dédicace à Cricri !), mais bel et bien pour harmoniser tous ces comportements. Mais cela relèverait presque de la science-fiction.

Personellement, ma préférence se porte pour les hacks. Et ce pour la simple raison que le navigateur n’aura à récupérer qu’un seul fichier, et non pas plusieurs, ce qui optimisera légèrement (mais toute optimisation est bonne à prendre) le chargement de la page. Qui plus est, il sera plus facile de se repérer dans vos feuilles de style. Lire du code centralisé dans un seul fichier est toujours plus simple que de changer régulièrement de sources. ;)

Et enfin, pour se détendre un peu après cet article technique, une dernière explication CSS :

Qui a dit que le métier d’infographiste était pénible ? :p

Afin de remplir mon quota de vie sociale mensuelle, je me suis rendu, hier soir, au théâtre Akteon afin de voir une représentation tragi-comique de la Comedia dell Arte. Une interprétation originale de “Roméo et Juliette”, réalisée par 5 acteurs jeunes et dynamiques, le tout dans un petit théâtre sympathique d’une soixantaine de places.

Une ambiance musicale plutôt réussie, des références discrètes à différentes oeuvres (de Hamlet à la petite vendeuse d’allumettes en passant par le petit chaperon rouge), des effets spéciaux hors du commun (ou pas), on passe un excellent moment. Et, le point le plus frappant est sans aucun doute le dynamisme et l’inventivité des comédiens, bien loin de la pièce originale de Shakespeare. Ce qui est relativement rare dans ce genre de petites salles privées parisiennes. Du grand art donc. :)

Comme vous l’aurez sans doute compris, je vous recommande vivement cette pièce. Dépêchez-vous, il vous reste encore deux semaines, à raison de deux représentations par semaine (samedi et dimanche, à 18h). :)

Réserver sur BilletReduc.com »

Après deux semaines d’inactivités sur ce blog, dû à un agenda des plus remplis, et ce tant d’un point de vue personnel que professionnel, me revoilà qui reprend la plume le clavier afin de vous tenir au courant de la HADOPI, et plus particulièrement de l’affaire qui cause énormément de remous ces temps-ci : le licenciement par TF1 de son responsable Innovation et Internet, à savoir Jérôme Bourreau-Guggenheim.

Que s’est-il passé exactement ? M. Bourreau-Guggenheim (que nous appellerons désormais JBG) a simplement décidé de faire partager, de manière privée (donc sans aucune implication de TF1), son point de vue à Françoise de Panafieu, sa députée (UMP), concernant le projet de loi “Création et Internet”. Bien évidemment, comme toute personne intéressée un minimum aux nouvelles technologies, JBG était opposée à cette loi liberticide.

Une quinzaine de jours plus tard, et après un entretien auprès de sa direction où son courrier privé (encore une fois mis en gras, mais cela semble avoir échappé aux yeux de la chaîne), TF1 lui envoie une lettre de licenciement, sous motif que “cette prise de position est un acte d’opposition à la stratégie du groupe TF1 pour qui l’adoption de ce projet de loi est un enjeu fort” (d’après le journal Libération). Comment une lettre alors initialement destinée à Mme de Panafieu s’est-elle retrouvée dans les mains de la direction de TF1 ? Explications dans la lettre de licenciement : “Cette correspondance nous est parvenue via le cabinet du ministre de la Culture qui l’a adressé le jour même à TF1″. Tiens, tiens… Revoilà notre chère amie Christine !

Au niveau communication, il y a eu quelques couacs du côté du ministère de la Culture. Ainsi, Mme Albanel indique dans un communiqué qu’elle “trouve absurde les accusations et affirme n’avoir jamais contacté TF1 pour s’immiscer dans la politique de gestion de la chaîne“. Problème, le site Le Point a mis en ligne dans le même temps une citation d’un des conseillers du Ministère : “Nous avons fait une erreur en transférant ce mail”. Cette citation est désormais effacée. Etrange, non ? ;)

Bien entendu, JBG va faire défendre ses droits. Notamment au niveau du respect de la correspondance privée et de la liberté d’opinion politique. Espérons que celui-ci emportera la victoire aux Prud’hommes. Après tout, il me semble qu’un texte finalement assez connu, répondant au doux nom de “Déclaration Universelle des Droits de l’Homme et du Citoyen”, indique, article 19 :

Tout individu a droit à la liberté d’opinion et d’expression, ce qui implique le droit de ne pas être inquiété pour ses opinions et celui de chercher, de recevoir et de répandre, sans considérations de frontières, les informations et les idées par quelque moyen d’expression que ce soit.

Etrange que ce précepte ne soit pas respecté. Surtout sachant que ce texte a été écrit par nos ancêtres réolutionnaires. Alors, quand il s’agit de rappeller à l’ordre la Chine à propos de ce même traité, soudainement, il prend plus d’importance. Bref, on assiste à un magnifique “fais comme je dis, mais pas comme je fais”. Déjà avec le paquet Télécom européen et HADOPI. Bref…

Nous entrons petit à petit dans un état totalitarisme. Oui, totalitarisme. Ce mot est souvent associé à des périodes sombres de l’Histoire, mais je l’emploie sciemment. Celui-ci est définit comme l’interdiction de toute opposition au gouvernement, comme l’adhésion à une seule idéologie. Or, vers quoi allons-nous tout doucement ? Ce n’est pas la liberté totale d’expression en tout cas.

Bref, le débat initié il y a plusieurs semaines avec la loi “Création et Internet” ne cesse de s’envenimer, à juste titre. La chaîne TF1 est désormais submergée de commentaires très incisifs, dénonçant ce licenciement abusif. Etant donné qu’une “modération” a lieue sur le site de TF1, voici la liste des commentaires un maximum tenue à jour. Elle n’est pas de moi, mais merci à ses auteurs. En cherchant bien, il est toutefois possible de retrouver certains passages dans le forum ou sur le billet concerné.

Petit point des plus drôles : il semblerait que les webmasters de TF1 n’aient pas prévu ce genre de buzz négatif, et qu’aucune fonctionnalité de fermeture de commentaires n’ait été prévue. Bientôt une offre de stage chez TF1 ? Attention, il vous faudra votre carte UMP ! ;)

Il y a fort à parier que TF1 ait quelques difficultés à s’extirper de cette affaire. De plus en plus d’internautes suivent ce débat qu’est HADOPI, et celui-ci se généralise petit à petit à la population lambda. Et, ce délicat remerciement à son collaborateur ne va pas arranger les choses. Il y a fort à parier que TF1 subisse une baisse d’audience cruciale ces prochains mois. Plutôt gênant quand on sait que ce groupe a dégagé en 2008 un “bénéfice net en recul de 28%, pour un chiffre d’affaires en repli de 5,3%” (source : Jean-Marc Morandini).

Jérôme, tu as mon soutien ! Certes, ce n’est pas grand chose, mais c’est déjà ça ! ;)

Edit : Une petite chanson sympathique par Camille et Jean-Marie : “Qui a tué Bourreau-Guggenheim ?”.

M’étant fait volé mon téléphone portable dans la nuit de vendredi à samedi dernier, alors que je rentrais tard du bureau (eh oui… un travail de folie en ce moment, ce qui explique le peu d’actualités sur ce blog). Que faire alors en de pareil cas ? Tout est relativement rapide, et une demi-journée (sic… vive la bureaucratie) suffit pour effectuer toutes les démarches.

1. Vous procurer le numéro IMEI de votre téléphone. Ce numéro est un identifiant de votre mobile, et permettra de bloquer celui-ci, en plus de la carte SIM. Il se trouve généralement sous la batterie de votre portable… que vous ne devez plus avoir si vous êtes en pareil situation. Pas de panique, il est aussi présent sur le coffret d’emballage (vous l’avez gardé, hein ? :s)
2. Appeler votre opérateur pour lui signaler le vol, en lui indiquant le numéro de la ligne et l’IMEI. Il bloquera ainsi et votre ligne, et votre téléphone.
3. Vous rendre dans le commissariat le plus proche et déposer plainte (ne toujours pas oublier l’IMEI).
4. Contacter éventuellement votre assurance afin de vous faire renvoyer un autre appareil, dans un délai de 15 jours, moyennant le respect de certains critères.

Je suis actuellement en attente du dossier à renvoyer à l’assurance (on me l’envoie par mail… mais il faut compter un délai de 3 jours… o_0). Mais il y a fort à parier que des renseignements alambiqués seront demandés. Cela serait bien trop facile autrement.

Enfin, petit message personnel aux contacts dont j’avais le numéro sur mon téléphone et donc dont je n’ai plus les coordonnées : n’hésitez pas à me recontacter par mail, réseaux sociaux, MSN, Skype, pigeons voyageurs, signaux de fumée, etc. afin de me renvoyer tout ça ! :)

Pas si inutile que cela, car la réponse sur les steaks hachés a changé ma vision de la vie. A présent, je sais comment les faire cuire de manière optimisée ! Merci beaucoup à toute l’équipe donc ! :)

Ayant eu un gros souci avec différentes applications (souci dont la raison reste toujours obscure), j’ai installé KDE, un autre environnement graphique, et là, victoire ! Tout fonctionne de nouveau. Or, ce nouvel environnement, KDE, a quelques soucis avec les applications GTK (propre à Gnome). En effet, les tailles de police sont tout simplement énormes, et la configuration via le Settings Manager de KDE n’a aucun effet. Et pour cause : les applications GTK ne sont pas impactées par ces changements, propres aux librairies QT (propre, elles, à KDE).

Comment faire ? Eh bien, il suffit de modifier le fichier ~/.gtkrc-2.0-kde4, et d’y insérer le contenu suivant :

# This file was written by KDE
# You can edit it in the KDE control center, under “GTK Styles and Fonts”

include “/usr/share/themes/Qt4/gtk-2.0/gtkrc”

style “user-font”
{
font_name=”Sans Serif”
}
widget_class “*” style “user-font”

gtk-theme-name=”Qt4″
gtk-font-name=”Sans Serif 6″

C’est la dernière ligne qui nous intéresse. Il s’agira de la police utilisée, ainsi que sa taille (ici, 6 pixels, qui correspond à un affichage correct sur ma machine). Une fois ce fichier modifié, il ne vous reste plus qu’à redémarrer votre application GTK, et le tour est joué ! :)