Traduction : Créer un sélecteur de polices pour votre site

Il s’agit d’une traduction un peu « souple » de l’article explicatif publié sur Accessites suite à leur premier billet parlant de leur sélecteur de police, et qui ont ainsi expliqué la marche à suivre suite aux demandes des visiteurs.
Il s’agit d’un sélecteur basé sur un script « côté serveur », autrement dit qui ne nécessite pas d’avoir javascript ou autre d’installé sur votre ordinateur pour pouvoir en profiter. Le code HTML qui sert à proposer le choix de polices sur le site est sémantique et standard. L’intégration de ce script est possible avec tout site en PHP, que ce soit un « développement maison » ou un Système de Gestion de Contenu (CMS), type blog ou autre…
Vous permettez ainsi à vos utilisateurs de changer la police de vos textes sur votre site pour une qui leur est plus confortable à lire, leur permettant alors d’améliorer encore l’accesibilité de votre site… et ce de manière accessible ! :)
Je me suis dit que cette idée était pour le moins fascinante et que vous seriez probablement intéressés par la méthode de mise en place…
Par traduction « souple » j’entends ici une traduction qui ne reprends pas la structure exacte du billet d’origine, afin de tâcher de lui rendre un aspect plus « tutoriel », un peu comme l’article sur le Remplacement Dynamique de Texte l’était (déjà dans sa version d’origine).
Comme d’habitude, vos commentaires, remarques et contributions seront les bienvenus !

Début de la traduction (article d'origine ici)


Nous avons récemment créé un sélecteur de police pour ce site afin d’offrir aux visiteurs la possibilité de changer la typo pour une plus confortable pour eux. Ce sélecteur de police fut créé avec un script PHP qui, à l’inverse de JavaScript est un service “côté serveur”, ce qui veut dire que les utilisateurs n’ont pas besoin d’avoir une extension ou un plug-in installé sur leur navigateur pour l’utiliser. Nous avons pensé que vous aimeriez savoir comment nous l’avons au cas où vous voudriez l’implémenter sur votre site.

Mais pourquoi ?

Avant de vous montrer le script, discutons d’abord des raisons qui nous ont poussé à le créer. Vous voyez, certaines personnes suggèreraient que nous ne spécifions pas de police du tout, laissant les préférences utilisateurs du navigateur dicter la typo affichée sur le site – partant du principe que l’utilisateur a une préférence et sait comment la paramétrer. Il n’y a rien d’intrinsèquement mauvais à laisser une préférence utilisateur diriger. Il y a cependant le problème du design et des préférences du designer même. A nos yeux, comme vous le savez probablement, le design est une part importante d’un site web. Notre côté artistique sent qu’une typo est meilleure qu’une autre, et nous spécifions donc cette police dans notre feuille de style. En faisant cela, cependant, nous en retirons le contrôle des mains de l’utilisateur. Afin d’être juste à la fois envers l’utilisateur et le designer, un compromis est nécessaire, et offrir une solution scriptée telle que celle que nous proposons représente un tel compromis.
[NdT : De plus, comme nous le savons tous, les choses sont toujours moins simples, moins noir et blanc, dans un contexte de production réel (pour ne pas dire réaliste), où ce genre de considérations est souvent associé à des “demandes irréalistes d’ayatollahs des standards” (avec tous les apriori négatifs sur l’accessibilité et les standards) par ceux qui n’ont pas été sensibilisés… Il est impossible de ne pas spécifier de police, alors autant proposer des choix qui satisferont les clients et les visiteurs !]
Voici comment.

Comment nous l’avons fait

Le script est assez direct. Il est compose de 3 parties, comme suit.

Partie Un

Cette partie va avant le head de votre document, avant même la Déclaration de Type de Document (DTD). Elle doit être le premier élément de la page parce qu’un cookie doit être mis en place et négocié avant que quoi que ce soit d’autre n’arrive.

`<?php 
// Nous définissons d'abord les variables que nous allons utiliser 
$var_a=  "a"; 
$var_b=  "b"; 
$var_c=  "c"; 

// Ensuite nous définissons notre "police" par défaut $font = "$var_a"; 

// Nous vérifions si un cookie a été créé et nous récupérons les données, 

// si l’utilisateur n’a pas spécifié de préférence 
if( isset( $_COOKIE["cookiename"] ) &amp;&amp; !isset( $_GET["cookiename"]) ) { 
  $font = $_COOKIE["cookiename"]; 
}

// si l'utilisateur indique une préférence, nous mettons en place le cookie et redéfinissons la police selon ladite préférence 
if(isset( $_GET["cookiename"]) ) { 
@setcookie( "cookiename", "".$_GET["cookiename"]."", time()+60*60*24*30 ); 
$font = "".$_GET["cookiename"]."";
}

// Pour des raisons de sécurité, nous mettons les variables possibles dans un tableau 
$fonts = array( ''.$var_a.'',''.$var_b.'',''.$var_c.'' ); 

// Et si la variable n'est pas l'une des variables identifiées, nous revenons à la valeur par défaut 
if(!in_array($font, $fonts) ) { $font = $var_a; } 

// Puis en guise de sécurité supplémentaire, nous assainissons le contenu de la variable (un peu inutile) 
$font = stripslashes(strip_tags(trim("$font"))); 

// Maintenant nous négocions les variables possibles et définissons les valeurs 
if($font == "a") { 
$font = "100% 'century gothic', futura, sans-serif"; 
} else if($font == "b") { 
$font = "96% 'trebuchet ms', 'lucida grande', sans-serif";
} else if($font == "c") { 
$font = "92% verdana, tahoma, sans-serif"; 
} else { 
$font = "100% 'century gothic', futura, sans-serif";
} ?>`

`

Partie Deux

Maintenant, dans le head du document, nous plaçons la sortie du script. Dans cet exemple, nous spécifions la police utilisée dans le document entier, éléments de formulaires inclus. Ceci doit être placé après les appels normaux (<link> ou rêgle @import).

`<!—En se basant sur les données extraites, nous écrivons la préférence ou la valeur par défaut -->` 
`<style type="text/css" media="screen">` 
body, input, select, textarea { 
font : `<?php echo(''.$font.''); ?>`; } 
`</style>`

`

Partie Trois

Enfin, nous fournissons l’interface utilisateur. Nous avons place la nôtre dans notre barre latérale (sur la page d’accueil uniquement). Vous pouvez le styler comme vous le souhaitez selon vos besoins. Dans notre cas, nous avons utilisé une liste.

`<!—Ici nous offrons à l'utilisateur la possibilité de créer le cookie et sa valeur et ainsi choisir leur type de sortie (la police) -->`
`<h2 id="fonts">`Sélecteur de police`</h2>`
`<ul>`
`<li>``<a href="`<?php echo(''.htmlentities($_SERVER["PHP_SELF"]).'?cookiename='.$a.''); ?>`">`Century`</a>``</li>`
`<li>``<a href="`<?php echo(''.htmlentities($_SERVER["PHP_SELF"]).'?cookiename='.$b.''); ?>`">`Trebuchet`</a>``</li>`
`<li>``<a href="`<?php echo(''.htmlentities($_SERVER["PHP_SELF"]).'?cookiename='.$c.''); ?>`">`Verdana`</a>``</li>`
`</ul>`

`

Utilisation avec WordPress :

Puisque nous utilisons WordPress, qui a un entête global, nous avons placé la Partie Un dans un fichier à part et l’avons inclu où il doit se trouver. L’inclusion a l’apparence suivante :

`<?php include("font-selector.php"); ?>`

Nous avons aussi limité l’apparition de l’interface à la page d’accueil uniquement, et puisqu’il s’agit de WordPress, nous devons réinclure le fichier de script dans la page où se trouve l’interface, comme ceci (ceci est la Partie Trois, modifiée):

`<?php if(is_home() &amp;&amp; !is_paged()) { 
include("font-selector.php"); 
// La liste de liens et l’inclusion de script est seulement créée sur la page d’accueil ?>`
`<!-- Ici nous offrons à l'utilisateur la possibilité de créer le cookie et sa valeur et ainsi choisir leur type de sortie (la police) -->`
`<h2 id="fonts">`Sélecteur de police`</h2>`
`<ul>`
`<li>``<a href="`<?php echo(''.htmlentities($_SERVER["PHP_SELF"]).'?cookiename='.$a.''); ?>`">`Century`</a>``</li>`
`<li>``<a href="`<?php echo(''.htmlentities($_SERVER["PHP_SELF"]).'?cookiename='.$b.''); ?>`">`Trebuchet`</a>``</li>`
`<li>``<a href="`<?php echo(''.htmlentities($_SERVER["PHP_SELF"]).'?cookiename='.$c.''); ?>`">`Verdana`</a>``</li>` 
`</ul>` 
`<?php } // Fermeture de la sortie conditionnelle ?>`

`
C’est tout.

Fin de la traduction.


Conclusion

Voilà donc l’article en question, j’espère que vous l’avez trouvez utile et que vous pourrez l’utiliser sur votre site !

Si je trouve le temps (et le courage !), je ferai un topo sur la méthode pour Dotclear mais si l’un d’entre vous veut s’y atteler et partager la chose avec nous, au moins on sera sûrs que ce sera fait, et rapidement ! :)

De manière générale, n’hésitez pas à commenter, critiquer, encenser :) … et bien sûr à partager avec nous vos exemples d’applications réelles de ce script !

Commentaires