Darklg Blog

D’Internet Explorer 6.0 à Firefox 3.6

En testant le mode intégré de VirtualBox, j’en ai profité pour faire une capture d’écran peu commune : mon site perso affiché sous Internet Explorer 6.0 à côté de la version sous Mozilla Firefox 3.6 (Version Mac).

On ne distingue en effet que trois grosses différences dans le design : Les bordures arrondies, la transparence et les polices. J’aurais pu évidemment faire un site au pixel près avec quelques astuces, mais en alourdissant le code (plugin jquery, png transparent supplémentaire…). Donc un grand merci à ie8.js de gérer la majorité des bugs : )

à titre informatif : mon compte Twitter est désormais en public, n’hésitez plus à me suivre

Groupe Facebook On peut tous aider Alain – Diffusion dans le 19/45 de M6

Le groupe Facebook On peut tous aider Alain a été mis en valeur dans le 19-45, émission d’informations de la chaîne M6.

Étant connecté au moment de la diffusion du sujet, j’ai pu observer en temps réel l’impact de cette mise en avant sur l’évolution du nombre de membres du groupe.

19h50 Le sujet est présenté parmi d’autres, on aperçoit le nom du groupe durant quelques secondes. Je m’y connecte et constate : 577 membres.

Le reportage commence à 20h00 : On compte désormais 642 membres.
20h01, le reportage se termine : 870 membres.
Jusqu’à 20h07, le compteur monte jusqu’à 1680 membres, à plus de 2 membres par seconde.
Par la suite, la vitesse d’augmentation des membres diminue peu à peu.
Le dernier comptage à 23h00 est de 2167 membres.
Pour un meilleur aperçu, voici un graphique représentant l’évolution du nombre d’abonnés au groupe Facebook depuis la présentation du sujet ( Origine : 0 secondes ).

On y distingue au début du reportage ( 646 secondes ) une explosion de la vitesse d’abonnement, vitesse qui faiblit à partir de 850 secondes ( 20h04 env.).

Qu’en conclure ?

Ces données laissent à penser qu’un faible pourcentage de téléspectateurs réagit sur Internet durant la diffusion d’un sujet. En effet, les audiences moyennes du 19/45 sur Janvier montraient une moyenne de 2.8 millions de téléspectateurs. Un gain d’environ 1500 followers, c’est moins de 0.05% de « taux de conversion ».

Les conséquences annexes

Le groupe est passé de 3 à 8 administrateurs, le mur est bourré de messages, dont ceux des spammeurs et opportuniste que les administrateurs réactifs ont fait disparaître très vite ( Merci @KyotoWeb pour l’info ).
Les farceurs n’ont pas mis longtemps à réagir :

C’était un article purement dataporn, et pour que vous puissez aussi faire votre orgie de données ( et principalement me donner vos conclusions sur la courbe ), voici le document Google Spreadsheets dont j’ai tiré les graphiques.

Compresser et ranger son CSS avec PHP.

Voici une méthode permettant de compresser des CSS, que j’utilise depuis quelques mois. Elle répond à plusieurs impératifs :

• Réduire le nombre de CSS chargés au minimum, pour économiser les requêtes HTTP.
• Permettre de créer des fichiers CSS à la volée, sans code php à l’interieur, et de les diviser le plus possible.
• Compresser le résultat.
• Mettre en cache la version compressée, qui sera servie au visiteur.

Cette méthode est grandement inspirée de l’article sur la compression des CSS chez CatsWhoCode, que j’ai décortiqué pendant un bout de temps

On fera donc appel à ces fichiers :

• style.php : appelé pour créer la page, mais qui transmet également les instructions CSS.
• style-min.css : Le CSS final, appelé par la version du site.
• style/ : Le sous dossier contenant tous vos CSS.

Les éventuelles images devront être dans le même répertoire que style.php.

Voici donc le code commenté de style.php :

On déclare le contenu comme étant du CSS, pour être sûr de son interpretation.

<?php
header("Content-type: text/css");

Ensuite, il faut inclure les CSS, que l’on va trier dans l’ordre alphabétique, pour permettre d’éventuels hacks, et surtout une idée de l’ordre des instructions.

// On cree une variable de retour pour contenir le CSS.
$retour_css = '';
 
// On parcourt le sous-dossier style/
$dir = opendir("style/");
$fichiers = array();
// On ajoute chaque fichier à un tableau 'fichiers'
while($fichier = readdir($dir))
	{if($fichier!="." && $fichier!="..") $fichiers[] = 'style/'.$fichier;}
closedir($dir);
 
// Tri par ordre alphabetique des fichiers
asort($fichiers);
 
// inclusion des fichiers ... dans l'ordre
foreach($fichiers as $fichier)
	$retour_css .= file_get_contents($fichier);

La fonction compress() va agir sur plusieurs points :

• Retirer les caractères « inutiles », comme les commentaires, tabulations, et transformer les espaces multiples en espaces simples, etc.
• Permettre la mise en place d’un léger système de variables. Utile si vous avez beaucoup de fichiers

function compress($buffer) {
$variables_css = array(
	'COULEUR1'=>'#003366',
	'COULEUR2'=>'#336699',
	'FONT1'=>'Georgia, serif'
	);
// On remplace les variables par leur valeur
foreach($variables_css as $code_variable => $valeur)
	$buffer = str_replace('{'.$code_variable.'}', $valeur, $buffer);
 
	// Suppression des commentaires
	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
 
	// Suppression des tabulations, espaces multiples, retours à la ligne, etc.
	$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '	 ', '	 '), '', $buffer);
 
// Suppression des derniers espaces inutiles
	$buffer = str_replace(array(' { ',' {','{ '), '{', $buffer);
	$buffer = str_replace(array(' } ',' }','} '), '}', $buffer);
	$buffer = str_replace(array(' : ',' :',': '), ':', $buffer);
 
	return $buffer;
}
 
// Compression du CSS
$retour_css = compress($retour_css);

Enfin, nous allons mettre en cache le contenu de la variable $retour_css, et l’afficher, pour les tests.

// Mise en cache du fichier style-min.css
file_put_contents('style-min.css',$retour_css);
// On affiche le contenu compressé
echo $retour_css;

Vous pouvez créer autant de fichiers CSS que vous le désirez dans le sous-dossier style/, afin de séparer couleurs, tailles, réglages de base, Reset CSS et autres grilles.

Vous m’avez lu jusqu’ici ? Woah Apprenez donc que ce code est sous licence WTFPL, qu’un lien vers cet article sera accueilli avec grand bonheur, et qu’un commentaire constructif le sera également