Modifier la police d'affichage de votre CMS ou de votre site Internet
Que l'on utilise un système de gestion de contenu (CMS) tel que WordPress, Drupal, Spip, Dotclear, etc. ou que l'on monte soi-même ses pages Internet, la typographie utilisée a toujours son importance. D'ailleurs, on peut remarquer qu'il s'agit très souvent des quelques mêmes polices qui sont utilisées par l'écrasante majorité des sites Web (je ne parle pas, bien sûr, des sites utilisant un alphabet différent du nôtre qui disposent de leurs propres polices) : ??les familles Trebuchet, Trebuchet MS, Tahoma, Lucida Grande, Lucida Sans Unicode, Arial et Verdana de la faille générique sans-serif.
La large utilisation de ces polices provient d'un projet de Microsoft appelé « Core fonts for the Web » initié en 1996 et visant à standardiser l'utilisation des polices de caractères sur Internet, avec des familles de polices répondant à trois critères importants :
- être facilement lisibles sur un écran
- offrir une large gamme de caractères avec un nombre de familles de polices restreint
- supporter une internalisation exhaustive
Trois critères effectivement très importants pour assurer une lisibilité optimale et une large compatibilité.
De nos jours, il existe plusieurs solutions pour forcer l'utilisation d'une police donnée sur son site Web. Il est par ailleurs possible dans tout navigateur Internet digne de ce nom de choisir une police locale pour afficher tout site Internet ne faisant pas mention explicite de la police qu'il utilise, mais ce n'est pas ce qui nous intéresse ici.
Le nombre de sites Web utilisant une police disons inhabituelle va croissant. On peut d'ailleurs remarquer que certains font de mauvais choix, rendant la lecture et même parfois la navigation vectrices de sérieux maux de tête : ce n'est pas parce qu'une police est jolie qu'elle est lisible, et selon la méthode utilisée le navigateur de l'utilisateur qui vient se balader sur votre site peut ne pas l'afficher correctement.
Comment utiliser une police donnée de façon à ce que ça marche pour tous les utilisateurs (ou presque) alors ? Eh bien, il existe principalement deux méthodes :
– la méthode cufón : basée sur Javascript/JSON, je dirais que son plus gros avantage est aussi son plus gros inconvénient, car elle repose sur Javascript. D'un côté, cela assure une très grande compatibilité avec les différents navigateurs, d'un autre côté il est bien évident qu'il faut que le navigateur supporte le Javascript pour qu'elle fonctionne. Or, bien que cela soit le cas par défaut dans la grande majorité des cas, on peut très bien avoir envie ou besoin de désactiver cette fonctionnalité intégrée et là, adieu le support des polices ! Par ailleurs, selon le type de police utilisé, le nombre de glyphes voulu, etc. on peut vite se retrouver avec un script assez lourd à charger. Ce n'est pas la méthode que je vais aborder ici.
– la méthode CSS : là, pas de Javascript, il s'agit de spécifier dans ses feuilles de style la faille de police à utiliser. Seule contrainte : il faut lier la police à son site, que ce soit localement ou en utilisant un répertoire de polices disponible sur Internet. Cette méthode, qui est selon moi celle à privilégier est plus légère, plus simple à mettre ne place et plus flexible que la précédente. Par contre, d'aucuns navigateurs peu civilisés se font un malin plaisir de mal interpréter certaines propriétés CSS, voire de les zapper purement et simplement (suivez mon regard…). Malgré cela, et parce que c'est au navigateur de s'adapter à Internet et pas l'inverse, voici comment spécifier l'utilisation d'une police de caractères donnée dans votre CMS ou sur votre site :
Sur beaucoup de CMS, le thème utilisé peut permettre de spécifier une police particulière. Par exemple, il en va ainsi du thème Suffusion que j'utilise sur mon installation WordPress :
Si vous ne disposez pas de ce type de réglage ou si comme moi vous ne trouvez pas votre bonheur dans la liste proposée, sachez qu'il existe des répertoires de polices en ligne tels que Font Squirrel ou le tout récent Google Font Directory que nous pouvons utiliser pour ajouter la définition de notre police au thème de notre CMS ou à notre site Web :
Pour les CMS, il s'agit d'éditer le fichier d'en-tête du thème : header.php pour Worpress, head.html pour Spip, ?_head.html pour Dotclear, etc. et d'ajouter la ligne suivante :
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold' rel='stylesheet' type='text/css'>
Ici, j'utilise la police Ubuntu du répertoire de Google. Imaginons que je préfère faire appel à ma police localement et que j'utilise l'un des merveilleux kits @font-face fournis par Font Squirrel :
<link rel="stylesheet" href="ubuntustyle.css" type="text/css" charset="utf-8">
et le fichier ubuntustyle.css contiendra ceci :
@font-face {
font-family: 'UbuntuRegular';
src: url('Ubuntu-R-webfont.eot');
src: local('?'), url('Ubuntu-R-webfont.woff') format('woff'), url('Ubuntu-R-webfont.ttf') format('truetype'), url('Ubuntu-R-webfont.svg#webfont5QrTZHwg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuItalic';
src: url('Ubuntu-I-webfont.eot');
src: local('?'), url('Ubuntu-I-webfont.woff') format('woff'), url('Ubuntu-I-webfont.ttf') format('truetype'), url('Ubuntu-I-webfont.svg#webfontwdgWd3TL') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuBold';
src: url('Ubuntu-B-webfont.eot');
src: local('?'), url('Ubuntu-B-webfont.woff') format('woff'), url('Ubuntu-B-webfont.ttf') format('truetype'), url('Ubuntu-B-webfont.svg#webfontCKhwRblf') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UbuntuBoldItalic';
src: url('Ubuntu-BI-webfont.eot');
src: local('?'), url('Ubuntu-BI-webfont.woff') format('woff'), url('Ubuntu-BI-webfont.ttf') format('truetype'), url('Ubuntu-BI-webfont.svg#webfontLmVyebAO') format('svg');
font-weight: normal;
font-style: normal;
}
Maintenant, il va falloir éditer les styles de notre CMS, c'est à dire très souvent le fichier style.css (WordPress et Dotclear) ou habillage.css (Spip), bref, le fichier de styles correspondant. Il va s'agir d'appliquer la nouvelle police aux éléments voulus, comme par exemple :
h1, h2, h3, h4, h5, h6 {
font-family: Ubuntu, Tahoma, Verdana, Arial, sans-serif;
line-height:130%;
}
body {
font-family: Ubuntu, Tahoma, Verdana, Arial, sans-serif;
line-height:130%;
}
ou encore
h1.fontface {
font: 60px/68px 'UbuntuRegular', Arial, sans-serif;
letter-spacing: 0;
}
p.style1 {
font: 18px/27px 'UbuntuRegular', Arial, sans-serif;
}
p.style2 {
font: 18px/27px 'UbuntuItalic', Arial, sans-serif;
}
p.style3 {
font: 18px/27px 'UbuntuBold', Arial, sans-serif;
}
p.style4 {
font: 18px/27px 'UbuntuBoldItalic', Arial, sans-serif;
}
Et voilà ! Il vous suffit de recharger vos pages pour apprécier la différence (et éventuellement de vider le cache si vous utilisez un système de cache).
Dans le cas où vous voulez appliquer cela à votre site web, la technique est la même. Si vous disposez d'un fichier d'en-tête qui s'applique à toutes les pages c'est exactement la même démarche. Si vous n'avez pas d'en-tête commun à toutes vos pages, voici un exemple de modèle de page intégrant votre police :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Font Face Demo</title>
<link rel="stylesheet" href="ubuntustyle.css" type="text/css" charset="utf-8">
<style type="text/css" media="screen">
h1.fontface {
font: 60px/68px 'UbuntuRegular', Arial, sans-serif;
letter-spacing: 0;
}
p.style1 {
font: 18px/27px 'UbuntuRegular', Arial, sans-serif;
}
p.style2 {
font: 18px/27px 'UbuntuItalic', Arial, sans-serif;
}
p.style3 {
font: 18px/27px 'UbuntuBold', Arial, sans-serif;
}
p.style4 {
font: 18px/27px 'UbuntuBoldItalic', Arial, sans-serif;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
Le contenu du fichier ubuntustyle.css sera le même que présenté plus haut.
Vous pouvez bien sûr utiliser le répertoire de polices de Google par exemple si vous ne voulez ou pouvez pas accéder à des copies locales de la police choisie. La ligne 6 est dans ce cas
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold' rel='stylesheet' type='text/css'>
Voici en substance comment intégrer une police de votre choix dans votre site Web ou votre CMS. Gardez quand même à l'esprit que la typographie du Web est un sujet vaste et complexe et que le choix d'une police d'affichage ne doit en aucun cas se faire à la légère. Évitez d'utiliser des familles de polices trop exotiques qui risqueraient de rendre votre site inintelligible, une police se doit d'être lisible avant d'être jolie, les deux n'allant pas toujours de pair, loin s'en faut !
Sources
Utiliser YOURLS avec un nom de domaine internationalisé, WordPress et un client Identi.ca ou Twitter
YOURLS (Your Own URL Shortener) est un script PHP de raccourcissement d'URL, c'est à dire qu'il fait exactement la même chose que bit.ly ou goo.gl, pour ne citer qu'eux. Il permet de créer son propre service de raccourcissement d'URL à usage public ou privé, et ainsi de se dédouaner des fournisseurs de services tiers pour bénéficier de cette fonctionnalité bien pratique pour poster une adresse Internet sur divers supports tels que les réseaux sociaux tout en bénéficiant d'un système de statistiques sur l'utilisation des adresses réduites créées. Vous pouvez choisir la séquence de caractères utilisés pour réduire une URL donnée, un système pratique de plugins articulé autour de l'API de YOURLS, bref, de toutes les fonctionnalités dont vous pouvez avoir besoin dans le cadre de la mise en place d'un tel service.
Il y a une foultitude de raisons qui peuvent amener quelqu'un à désirer maîtriser le service de raccourcissement d'URL qu'il utilise, mais le but de cet article n'est pas d'exposer celles qui m'ont poussé à mettre en place cette solution pour mon usage personnel. Toujours est-il que j'ai récemment acquis le nom de domaine caï.eu afin de l'utiliser en tant que service privé avec YOURLS. Très facile, l'installation s'est déroulée sans aucun problème mais mes premières tentatives d'utilisation se sont soldées par une série d'échecs cuisants. En cause ? Le nom de domaine choisi.
En effet, caï.eu présente la particularité subtile mais qui ne vous aura pas échappée de contenir un caractère habituellement absent des noms de domaines car non défini par le standard ASCII : le i tréma, « ï ». Il s'agit d'un IDN, ou Nom de Domaine Internationalisé, tel que défini par le standard RFC 3490. Comme le standard définissant les noms de machines (RFC 1123) n'autorise pas de tels caractères, le protocole IDNA convertit les IDN en noms de domaines conformes au standard ASCII, sous un format appelé PUNYCODE. Pour faire court, caï.eu est transformé par ce procédé en xn--ca-uja.eu. C'est transparent pour les utilisateurs (tant que l'on dispose d'un navigateur Internet un tant soit peu civilisé) mais YOURLS, lui, n'aime pas ça. Mais alors, pas du tout.
Si la création des URL courtes se passe sans problème, leur utilisation est, elle, impossible en l'état. Le système fait une boucle et finit par renvoyer une erreur 404, avouez que ce n'est pas l'idéal ! Il existe d'ailleurs un rapport de bug à ce propos, mais le développeur de YOURLS a clairement fait savoir que l'ajout de la prise en charge native des IDN ne faisait pas du tout partie de ses priorités, bien que prévue à terme. Heureusement, il y a une solution. Elle n'est pas ce qu'il y a de plus propre, mais elle fonctionne :
NET_IDNA requiert PHP >= 4.3.0
PHP >= 5.3.0 avec PECL intl >= 1.0.2 ne requiert pas l'utilisation de NET_IDNA/2 car il contient deux fonctions IDNA natives : idn_to_ascii et idn_to_utf8 (alias : idn_to_unicode).
Il faut tout d'abord télécharger le package NET_IDNA2 ici : http://pear.php.net/package/Net_IDNA2/. Ceci fait, décompressez-le et copiez le fichier ??/Net_IDNA2-0.1.1/Net/IDNA2.php qu'il contient dans le dossier /includes/ de votre installation YOURLS. Maintenant, il va falloir effectuer quelques modifications :
– Éditez votre fichier config.php (qui se trouve dans /user/ ou /includes/ selon votre version de YOURLS). Il s'agit de remplacer
/** YOURLS installation URL, no trailing slash */
define('YOURLS_SITE', 'http://caï.eu');
par
/** YOURLS installation URL, no trailing slash */
/* IDNA support */
$idn = Net_IDNA2::getInstance();
$idn->setParams('utf8', true);
$idn->setParams('strict', false);
$location = $idn->encode($location);
/* End IDNA support */
define('YOURLS_SITE', 'http://xn--ca-uja.eu');
– Maintenant, il faut éditer le fichier /includes/load_yourls.php, et remplacer
// Include settings
if(file_exists(dirname(__FILE__).'/config.php') ) {
[...]
par
// Include settings
// IDNA support
require_once (dirname(__FILE__).'/IDNA2.php');
// End IDNA support
if(file_exists(dirname(__FILE__).'/config.php') ) {
[...]
Une fois ces modifications effectuées et dûment enregistrées, vous pourrez constater que la résolution de vos URL raccourcies est maintenant pleinement fonctionnelle. C'est déjà très bien, mais il subsiste un petit problème.
En effet, s'il vous prend l'envie d'utiliser des logiciels tiers faisant appel à YOURLS directement ou via son API, comme par exemple Chromed Bird (extension de Chromium pour Identi.ca/Twitter) ou le plugin WordPress WP-To-Twitter ou l'autre plugin YOURLS: WordPress to Twitter, ou que sais-je encore, vous pourrez vous rendre compte que l'URL retournée dans votre message est sous sa forme PUNYCODE. Pas cool du tout, ça…
Voici un hack encore plus sale que le précédent mais qui permettra aux logiciels tiers de récupérer la bonne adresse :
– Reprenez votre fichier config.php et ajoutez à la suite des précédentes modifications :
/* IDNA support : YOURLS installation URL alias for IDNA cases, should be the same as YOURLS installation URL above in most cases. No trailing slash. */
/* IDNA support : third-party clients (like ChromedBird, WP-to-Twitter, etc.) retrieve the UTF-8 URL instead of the punycode */
define('YOURLS_SITE_IDNA', 'http://caï.eu')
C'est assez évident : on ajoute une définition d'URL alternative pour le cas d'un nom de domaine IDN. Cela va nous permettre d'utiliser directement notre IDN dans la fonction qui renvoie l'URL raccourcie au client. Pour cela, il faut apporter une petite modification au fichier /includes/functions.php :
– trouvez le morceau de code suivant :
// Custom keyword provided
if ( $keyword ) {
$keyword = yourls_escape( yourls_sanitize_string($keyword) );
$keyword = yourls_apply_filter( 'custom_keyword', $keyword );
if ( !yourls_keyword_is_free($keyword) ) {
// This shorturl either reserved or taken already
$return['status'] = 'fail';
$return['code'] = 'error:keyword';
$return['message'] = 'Short URL '.$keyword.' already exists in database or is reserved';
} else {
// all clear, store !
yourls_insert_link_in_db( $url, $keyword, $title );
$return['url'] = array('keyword' => $keyword, 'url' => $strip_url, 'title' => $title, 'date' => date('Y-m-d H:i:s'), 'ip' => $ip );
$return['status'] = 'success';
$return['message'] = yourls_trim_long_string( $strip_url ).' added to database';
$return['title'] = $title;
$return['html'] = yourls_table_add_row( $keyword, $url, $title, $ip, 0, time() );
$return['shorturl'] = YOURLS_SITE .'/'. $keyword;
}
// Create random keyword
} else {
$timestamp = date('Y-m-d H:i:s');
$id = yourls_get_next_decimal();
$ok = false;
do {
$keyword = yourls_int2string( $id );
$keyword = yourls_apply_filter( 'random_keyword', $keyword );
$free = yourls_keyword_is_free($keyword);
$add_url = @yourls_insert_link_in_db( $url, $keyword, $title );
$ok = ($free && $add_url);
if ( $ok === false && $add_url === 1 ) {
// we stored something, but shouldn't have (ie reserved id)
$delete = yourls_delete_link_by_keyword( $keyword );
$return['extra_info'] .= '(deleted '.$keyword.')';
} else {
// everything ok, populate needed vars
$return['url'] = array('keyword' => $keyword, 'url' => $strip_url, 'title' => $title, 'date' => $timestamp, 'ip' => $ip );
$return['status'] = 'success';
$return['message'] = yourls_trim_long_string( $strip_url ).' added to database';
$return['title'] = $title;
$return['html'] = yourls_table_add_row( $keyword, $url, $title, $ip, 0, time() );
$return['shorturl'] = YOURLS_SITE .'/'. $keyword;
}
$id++;
} while (!$ok);
@yourls_update_next_decimal($id);
}
Pour info, ce bloc commence à la ligne 389 dans mon fichier, il devrait en être à peu près pareil pour vous. Remarquez les lignes n° 18 et 43 dans le bloc de code ci-dessus : ce sont celles-ci que nous allons modifier. Pas grand chose à faire, d'ailleurs, il suffit de remplacer chacune de ces deux lignes par ceci :
/* IDNA support : let third-party clients (like ChromedBird, WP-to-Twitter, etc.) retrieve the UTF-8 URL, not the punycode one */ $return['shorturl'] = YOURLS_SITE_IDNA .'/'. $keyword;
Une petite modification donc qui consiste simplement à changer YOURLS_SITE en YOURLS_SITE_IDNA, mais une petite modifications qui fait toute la différence : vos clients récupéreront désormais votre URL raccourcie dans le bon format. Ça y est, YOURLS est prêt à être utilisé au maximum de ses possibilités !
Voilà, en attendant que le développeur de YOURLS ait le temps et l'envie de se pencher sur ce problème, ça permet d'utiliser de manière pleinement fonctionnelle cet excellent URL Shortener sur vos noms de domaines exotiques et avec les clients de votre choix.
Raccourcissez-bien !
Read MoreInsérer des iframes dans ses pages sous WordPress
Bien que les iframes soient de très mauvaises solutions en termes de SEO, il existe autant de comportements que d'utilisateurs et d'aucun utilisant WordPress pourrait éprouver le besoin d'en utiliser dans ses pages ou ses articles afin d'y inclure tout type de contenu.
Le problème, c'est que si vous passez en mode d'édition HTML et y entrez vos tags <iframe>, ceux-ci seront exfiltrés par le processeur de texte lors de la publication de l'article, et vous ne pourrez pas afficher correctement le contenu de l'iframe.
Embêtant, hein ?
Voilà la solution : à l'aide de votre éditeur préféré, éditez le fichier functions.php de votre thème (généralement /wp-content/themes/votre-thème/functions.php)et ajoutez-y, par exemple à la fin, avant « ?> » :
// Fonction pour initialiser les iframes
function add_iframe($initArray) {
$initArray['extended_valid_elements'] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]";
return $initArray;
}
// Ajoute la fonction aux filtres de l'éditeur de texte de WordPress
add_filter('tiny_mce_before_init', 'add_iframe');
Sauvegardez, et voilà ! Vous pouvez maintenant utiliser les balises <iframe> dans vos articles sans qu'elles ne soient éliminées.
Read MoreSortie de Django 1.2
Yo !
Un petit billet rapide pour vous annoncer qu'après des mois de travail, le framework web en python qu'on ne présente plus sort enfin en version 1.2 !
À noter que ceci est la première version officielle qui ne supporte pas python 2.3 : python 2.4 est désormais requis, ou alors il vous faudra rester à la version 1.1 de Django (qui reste supportée jusqu'à la réalisation de la 1.3) et ce serait dommage car Django 1.2 apporte son lot de nouveautés dont :
- Support de bases de données multiples dans une seule instance de Django.
- Validation des modèles inspirée de la validation de formulaires de Django.
- Grande amélioration de la protection contre les CSRF.
- Un nouveau framework de messages utilisateur avec support des messages basés sur cookie ou session, que ce soit pour les utilisateurs anonymes ou authentifiés.
- Définition des niveaux de permissions objet et des permissions des utilisateurs anonymes, conditions allégées pour les noms d'utilisateurs.
- Personnalisation de l'envoi d'email.
- Nouvelle balise if intelligente supportant les opérateurs de comparaison.
Ça, c'est pour les changements les plus importants.
Pour le reste, je vous invite à lire les notes de version[en] puis à télécharger Django 1.2.
