Pour des besoins professionnels, j’ai réécrit l’algorithme de Steven Fortune permettant d’obtenir un diagramme de Voronoï à partir de points connus, en transformant la librairie JavaScript de gorhill.

Vous pouvez trouver les fichiers sources (en PHP 5) sur ce dépôt GitHub:

• https://github.com/sroze/PHP-Voronoi-algorithm

Exemple d’utilisation

Voici un exemple d’utilisation, qui permet de générer un diagramme de Voronoï (ou autrement dit des polygones de Thyssen) à partir de points générés automatiquement:

<?php 
require_once '../library/Nurbs/Voronoi.php';
require_once '../library/Nurbs/Point.php';
 
$bbox = new stdClass();
$bbox->xl = 0;
$bbox->xr = 400;
$bbox->yt = 0;
$bbox->yb = 400;
 
$xo = 0;
$dx = $width = 400;
$yo = 0;
$dy = $height = 400;
$n = 20;
$sites = array();
 
// On créé l'image
$im = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($im, 255, 255, 255);
$red = imagecolorallocate($im, 255, 0, 0);
$green = imagecolorallocate($im, 0, 100, 0);
$black = imagecolorallocate($im, 0, 0, 0);
imagefill($im, 0, 0, $white);
//imageantialias($im, true);
 
// On créé des points aléatoires que l'on dessine
for ($i=0; $i < $n; $i++) {
	$point = new Nurbs_Point(rand($xo, $dx), rand($yo, $dy));
	$sites[] = $point;
 
	imagerectangle($im, $point->x - 2, $point->y - 2, $point->x + 2, $point->y + 2, $black);
}
 
$voronoi = new Voronoi();
$diagram = $voronoi->compute($sites, $bbox);
//var_dump($diagram);
 
//var_dump('sites', $sites, 'diagram', $diagram, 'cells', $diagram['cells']);//, 'voronoi', $voronoi);
$j = 0;
foreach ($diagram['cells'] as $cell) {
	// On va agreger les points du polygone.
	$points = array();
 
	if (count($cell->_halfedges) > 0) {
		$v = $cell->_halfedges[0]->getStartPoint();
		if ($v) {
			$points[] = $v->x;
			$points[] = $v->y;
		} else {
			var_dump($j.': no start point');
		}
 
		for ($i = 0; $i < count($cell->_halfedges); $i++) {
			$halfedge = $cell->_halfedges[$i];
			$edge = $halfedge->edge;
 
			if ($edge->va && $edge->vb) {
				imageline($im, $edge->va->x, $edge->va->y, $edge->vb->x, $edge->vb->y, $red);
			}
 
			$v = $halfedge->getEndPoint();
			if ($v) {
				$points[] = $v->x;
				$points[] = $v->y;
			} else {
				var_dump($j.': no end point #'.$i);
			}
		}
	}
 
	// On construit le polygone
	$color = imagecolorallocatealpha($im, rand(0, 255), rand(0, 255), rand(0, 255), 50);
	imagefilledpolygon($im, $points, count($points) / 2, $color);
	$j++;
}
 
// On affiche l'image
imagepng($im, 'voronoi.png');

Voici un exemple d’image:

Les pages Web contenant des publicités Google Adsense sont nettement plus lentes à charger que les pages qui n’en contiennent pas: c’est à cause de la méthode de chargement des publicités et de leur place dans la page. En général, les publicités se trouvent dans l’en-tête et/ou dans le menu vertical, elles sont donc chargées avant le corps de page.

Le problème

Le code fourni par Google pour afficher ses publicités est le suivant (avec des variables différentes):

<script type="text/javascript">
google_ad_client = "ca-pub-7282418192222825";
/* Nom de la bannière */
google_ad_slot = "4287714958";
google_ad_width = 468;
google_ad_height = 60;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Or, lors du chargement d’un fichier JavaScript, le moteur de rendu du navigateur est arrêté et le chargement de tous les éléments autres est suspendu. Par conséquent, le navigateur doit attendre que la page externe finisse de charger avant même de continuer à charger les autres éléments internes de la page Web. Ainsi, la page est nettement plus longue à charger et le ressenti utilisateur est plus mauvais…

La solution

La solution est très simple: on charge la publicité dans un div en bas de page – ici le moteur de rendu a déjà modéliser la page – et à un nouveau grâce à du JavaScript, de replace la publicité à l’endroit prévu.

Plus concrètement, à l’endroit où vous souhaitez intégrer la publicité Google Adsense, créez un div vide, d’un id spécial en spécifiant bien les tailles. Par exemple:

<div id="adsense-head" style="width: 468px; height: 60px;"></div>

Ensuite, avant la balise de fin de page </body>, créez un div d’un id particulier contenant le code JavaScript de Google Adsense, comme ceci:

<div id="adsense-loader-head" style="display: block;">
<script type="text/javascript">
google_ad_client = "ca-pub-7282418192222825";
/* Nom de la bannière */
google_ad_slot = "4287714958";
google_ad_width = 468;
google_ad_height = 60;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

Pour finir, en bas de page, ajoutez ce simple code JavaScript pour placer la publicité au bon endroit:

<script type="text/javascript">
var loader = document.getElementById('adsense-loader-head');
document.getElementById('adsense-head').appendChild(loader);
</script>

Note: il est important de préciser le display: block; dans le loader et le height dans le div qui contiendra la publicité pour permettre au moteur de rendu de pré-charger la page.

La solution n’est donc pas vraiment une solution de code JavaScript non-bloquant, mais tout simplement de mettre le JavaScript en fin de page, permettant le rendu simple. Voici une preuve vous permettant de vous rendre compte, nombres à l’appui, que cette technique marche effectivement.

Si vous ne connaissez pas, FancyBox est une petite librairie jQuery permettant de mettre en place de manière très simple de petites nouvelles petites sur-fenêtres, ou popup au sein de votre page Web. Le problème de FancyBox, en tous les cas pour la version actuelle, la 1.2.6, c’est qu’il est impossible de créer deux popups en même temps, par exemple on ouvre une popup “inline”, puis dans celle-ci on a par exemple une nouvelle popup, qui affiche des photos, hé bien c’est impossible…

Pour ça, j’ai donc développé une version “multiple” de FancyBox 1.2.6, dont le fichier JavaScript (et CSS) se nomment jquery.fancybox-1.2.6.multiple.js et .css. Vous pouvez les télécharger à ces adresses:

• http://www.d-sites.com/wp-content/uploads/2010/01/jquery.fancybox-1.2.6.multiple.js
• http://www.d-sites.com/wp-content/uploads/2010/01/jquery.fancybox-1.2.6.multiple.css

L’utilisation est quasi identique, sauf qu’un nouvel argument est possible lors de l’appel de la méthode fancybox sur un élément. Le deuxième argument attendu est le parent de la fancybox, ce qui permet ainsi de les différencier (un parent par fancybox), qui est par défaut $('body').

$('a#i2').fancybox(
	{
		hideOnContentClick: false
	}, 
	$('div#inline')
);

N’hésitez pas à me faire des retours.

La version de débugage de Flash Player 10 est uniquement disponible pour les architectures x86 (32 bits) sous linux. Si vous essayer néanmoins l’installation vous aurez un magnifique “l’architecture ‘x86_64′ n’est pas supportée”. Pour l’installer sous un Ubuntu x86_64 (64 bits) il faut utiliser nspluginwrapper.

Avant toute chose, fermez firefox.

Dans un premier temps, nous allons nous assurer qu’aucun autre plug-in flash n’est installé sur votre système:

# apt-get remove -y --purge flashplugin-nonfree gnash gnash-common mozilla-plugin-gnash swfdec-mozilla libflashsupport nspluginwrapper

Note: $ signifie que la ligne doit être exécutée en tant qu’utilisateur normal et # en tant que super-utilisateur (root)

Afin de supprimer toute trace d’anciens plug-ins, exécutez ces quelques commandes:

# rm -f /usr/lib/mozilla/plugins/*flash*
# rm -f ~/.mozilla/plugins/*flash*
# rm -f /usr/lib/firefox/plugins/*flash*
# rm -rfd /usr/lib/nspluginwrapper

Nous allons maintenant (ré)installer les librairies dont nous avons besoin pour faire fonctionner cette librairie:

# apt-get install ia32-libs nspluginwrapper

Puis, téléchargeons et décompressons la version de débugage de Flash depuis le site officiel:

$ wget http://download.macromedia.com/pub/flashplayer/updaters/10/flash_player_10_linux_dev.tar.gz
$ tar -xf flash_player_10_linux_dev.tar.gz

Maintenant, il nous faut décompresser l’archive contenue dans la précédente contenant le fichier .so du flash player à installer, puis le stocker dans le répertoire des plug-ins de firefox:

$ tar -xf flash_player_10_linux_dev/plugin/debugger/libflashplayer.so.tar.gz
# cp libflashplayer.so /usr/lib/mozilla/plugins/
$ rm -rf flash_player_10_linux_dev libflashplayer.so

Maintenant, grâce à nspluginwrapper nous allons pouvoir installer la librairie et la lier à firefox:

# nspluginwrapper -i /usr/lib/mozilla/plugins/libflashplayer.so
# ln -sf /usr/lib/nspluginwrapper/plugins/npwrapper.libflashplayer.so /usr/lib/mozilla/plugins/
# ln -sf /usr/lib/nspluginwrapper/plugins/npwrapper.libflashplayer.so /usr/lib/firefox-addons/plugins/
# ln -sf /usr/lib/nspluginwrapper/plugins/npwrapper.libflashplayer.so /usr/lib/xulrunner-addons/plugins/

A présent, le plug-in est installé, vous pouvez vérifier la version de votre Flash Player avec le fichier flash suivant:

Attention, ne marche qu’avec la version 1 de GRUB – c’est-à-dire pour les versions d’Ubuntu antérieures à la 9.10.

Avoir un petit ordinateur annexe qui sert de serveur c’est bien, ne pas en avoir – ou vouloir utiliser des solutions plus portables – c’est moins pratique. Pour ça, on peut utiliser des Debian virtualisés avec VirtualBox par exemple. Néanmoins, on ne peut pas se connecter à distance sur les consoles de ces machines virtualisées depuis l’hôte. On est donc obligés d’utiliser le système d’exploitation, sans interface graphique, en mode console. Seulement, la console est parfois très petite, on peut donc facilement changer la résolution de celle-ci.
La problème: Le gros problème, c’est que le pilote graphique VESA ne permet d’utiliser des résolutions pré-configurées, en petit nombre…

Changer la résolution dans les paramètres de démarrage GRUB

Pour changer la résolution de la console, il faut ajouter l’option vga dans la ligne kernel du groupe de lignes correspondant au système à utiliser. Ainsi, voilà la ligne de départ:

kernel        /boot/vmlinuz-2.6.26-2-686 root=/dev/hda1 ro quiet

Avec la ligne vga, la voici:

kernel        /boot/vmlinuz-2.6.26-2-686 root=/dev/hda1 ro quiet vga=790

Valeur de vga

La valeur de VGA correspond à la résolution, issue du tableau ci-dessous:

Color depth	640x480	800x600	1024x768  1280x1024
---------------------------------------------------------
  8bit		769	771	773	775
 15bit		784	787	790	793
 16bit		785	788	791	794
 24bit		786	789	792	795

Développé par D-Sites, Print-Site est un service qui vous propose de transformer un site en une image de différentes tailles (taille réelle, miniature de 100×100 à 500×500) de manière instantanée et illimitée.

Il repose sur Webkit, le moteur de rendu le plus respectueux des standards (100% à tous les Acid Test !).

Pour plus d’informations, visitez la page dédiée au projet Print-Site.

Si pour une raison ou une autre, vous avez besoin d’éxécuter des programmes avec un serveur X (graphique), vous pouvez utiliser xvfb (X Virtual Frame Buffer) – comme vu dans l’article présentant les copies d’écrans à la volée depuis votre serveur – avec ses temps de latence important ou installer tout simplement un serveur X.

Vous pensez peut-être que vous allons installer un serveur X avec toute la panoplie de différents services, puis Gnome, etc… Oh non ! Il nous faut uniquement (et obligatoirement) un serveur X virtuel pour pouvoir le démarrer sans clavier, sans souris et sans écran. C’est ainsi que Xvfb nous est à nouveau utile !

Installation de Xvfb

Nous allons l’installer tout simplement depuis les dépôts :

apt-get install xvfb

Démarrage de Xvfb

Pour démarrer Xvfb, c’est très simple, il vous suffit d’éxécuter cette commande:

Xvfb :1 -screen 0 1024x768x24

Ainsi, Xvfb est démarré:

• :1 – Sur l’écran virtuel numéro 1
• 0 – Avec un indice X à 0
• 1024x768x24 – Une résolution de 1024×768 avec 24 de color depth

C’est aussi simple. Néanmoins, il faut savoir que la plupart des applications utilisant un serveur X font appelle à la variable DISPLAY. Elle contient le numéro d’écran ainsi que l’indice X sous la forme: [numéro écran]:[indice X]. Il vous faut donc exporter cette variable pour qu’elle soit utilisée par ces programmes :

export DISPLAY = "1:0"

Note: Cette commande sera à exécuter à chaque fois que vous aurez une erreur du type “Impossible de se connecter au serveur X”

Pour que Xvfb soit démarré à chaque fois…

Pour que Xvfb soit démarré à chaque démarrage, il faut le mettre en tant que “service”. Pour cela, créez un petit script de démarrage ou téléchargez celui-ci. Placez-le dans /etc/init.d/. Puis, nous allons lui ajouter les droits d’éxecution puis le faire démarrer par defaut :

chmod +x /etc/init.d/xvfb
update-rc.d xvfb defaults

Si votre script est correct, Xvfb devrait démarrer à chaque fois.

Générer des miniatures (ou copies d’écran) de n’importe quel site pour en faire une page de présentation ou pour aider les visiteurs à mieux se repérer dans votre index est quelque chose de plutôt fastidieux si l’on doit le faire soit-même à la main. C’est pourquoi, il existe des solutions pour faire ceci depuis votre ordinateur personnel (sous Debian et ses dérivées – Ubuntu, Xubuntu, etc…) avec (ou sans, avec xvfb) serveur X (graphique).

Information: D-Sites a créer un service nommé Print-Site qui vous permet de créer ces images de sites gratuitement sans aucune installation. Les serveurs de D-Sites s’occupent de tout ! Visitez l’annonce ou la page du projet Print-Site.

CutyCapt, un programme tout fait

Nous n’allons pas ré-inventer la roue, il existe des logiciels tous fait pour faire ça. C’est le cas de CutyCapt qui est une solution utilisant Qt4 et Webkit, que nous allons utiliser. Avant toute chose, nous allons installer Qt4 et tous les paquets relatifs nécessaires à l’exécution de CutyCapt :

apt-get install libqt4-webkit libqt4-dev g++

Ces paquets font environ 20Mo à télécharger puis prennent près de 50Mo une fois installés. Lorsqu’ils sont installés, nous allons télécharger CutyCapt depuis une archive hébergée par Mes-Stats  :

wget http://sources.mes-stats.fr/cutycapt/cutycapt-r2.tar.gz

Vous pouvez aussi télécharger la dernière version de CutyCapt depuis les dépots SVN, afin d’être sur d’avoir la dernière version. Néanmoins, il se peux qu’il y ait certains bugs ou certaines fonctionnalités de changées…

svn co http://cutycapt.svn.sourceforge.net/svnroot/cutycapt

Puis nous allons décompresser

tar -xzf cutycapt-r2.tar.gz
cd cutycapt

Nous allons ensuite compiler ce programme Qt4 en exécutant ces deux commandes:

qmake
make

Note: Si lors de la compilation (make) il y a un grand nombre d’erreurs, ré-essayez en remplacant qmake par qmake-qt4. En effet, sur certaines distributions, Qt est déjà installée en sa version 3 et qmake correspond à cette version.

Exécuter CutyCapt

Avec un serveur X

Si vous utilisez une machine qui a un serveur X installé, vous pourrez dès à présent utiliser CutyCapt en une seule commande:

./CutyCapt --url=http://www.d-sites.com --out=d-sites.png

Ce qui vous produit une image contenant une capture d’écran de D-Sites nommée “d-sites.png” encodée en… PNG !

Note: CutyCapt vous permet d’exporter des images sous les formes svg, ps, pdf, itext, html, rtree, png, jpeg, mng, tiff, gif, bmp, ppm, xbm et xpm. Bien entendu, les rendus sous forme d’images fixes (png, gif, etc…) sont beaucoup plus surs que les rendus sous forme de PDF, SVG et autres.

Sans serveur X

Si vous n’avez pas de serveur X, en installer un prendrait trop de ressources par rapport à l’utilisation (probable) qu’il en serait fait. Pour ça, il existe Xvfb (X Virtual Frame Buffer) qui vous permet de simuler un serveur X le temps d’une requête. Il faut donc l’installer avant tout:

apt-get install xvfb

Ensuite, nous allons exécuter CutyCapt dans un serveur X virtuel de cette manière:

xvfb-run --server-args="-screen 0, 1024x768x24" ./CutyCapt --url=http://www.d-sites.com --out=d-sites.png

CutyCapt s’éxécutera ainsi dans une fenêtre de résolution 1024×768, ce qui n’a en réalité aucune importance. Pour spécifier la largeur de la page, utilisez l’option “–max-width=[...]” avec une valeur en pixels.

Attention: Malgré le fait que cette méthode est très attractive, elle n’est vraiment pas très performante. En effet, rien que pour s’initialiser, xvfb-run peut mettre jusqu’à 3 secondes ! Installer un serveur X n’est donc en fait pas une mauvaise alternative…

Parfois, dans n’importe quel programme, il y a des bugs, qui sont corrigés dans des futures versions. Si vous êtes confronté à un bug, il faut donc mettre à jour le logiciel. Nous allons voir comment mettre à jour Apache vers une version mineure plus récente. C’est-à-dire par exemple de la version 2.2.9 à la version 2.2.13. Mais pas de la 2.0 à la 2.2, encore moins de la 1 à la 2 !

Nous allons prendre des valeurs pour tout l’article, qui sont:

• Répertoire de l’ancienne version d’Apache: /etc/apache-2.2.9
• Répertoire de la nouvelle version d’Apache: /etc/apache-2.2.13

Installation de la nouvelle version dans un autre dossier

Nous allons commencer à installer la nouvelle version d’Apache dans un autre dossier, en utilisant la directive prefix lors du configure. Pour compiler et installer Apache, direction cet article.

Note: Allez toujours voir sur la page des téléchargements de Apache pour savoir s’il n’y a pas de nouvelle version mineure. S’il y en a, utilisez l’archive correspondante.
Attention: Faites bien attention au chemin du fichier de configuration !
Note: Si vous l’utilisez, installez PHP maintenant.

Copie de la configuration

Nous allons copier les paramètres de configuration de l’ancienne configuration vers la nouvelle:

cd /etc/apache-2.2.9 && cp conf /etc/apache-2.2.13 -rf

Attention: Valable uniquement pour les configuration d’Apache compilé. Toutes les installations faites via apt-get et autres sont beaucoup plus compliquées à mettre à jour en compilant un nouveau Apache…

Effectuons des tests

Nous allons effectuer des tests en utilisant la nouvelle version d’Apache sur un autre port, le port 81 par exemple. Pour cela, nous allons modifier le fichier la valeur de Listen de 80 à 81.

Maintenant, accèdez à votre site en utilisant le port 81: http://www.example.com:81/index.php. Il faut que tous vos domaines/sous-domaines/scripts soient accessibles en utilisant le port 81.

Attention: Si vous utilisez les VirtualHosts de Apache 2, NameVirtualHost doit avoir pour valeur *:81 ou plus simplement *. Et les doivent être définis avec cette valeur.

Si tout marche bien, nous allons arrêter puis supprimer l’ancienne version et passer la nouvelle en production…

Arrêt de l’ancienne version et démarrage de la nouvelle

Afin d’éviter le maximum de temps d’inaccessibilité, nous allons arrêter l’ancienne et démarrer la nouvelle version d’Apache de manière quasi-simultanée.

Dans un premier temps, il faut arrêter la nouvelle version d’Apache (/etc/apache-2.2.13/bin/apachectl stop) et la configurer pour s’exécuter sur le port 80 (modifiez la propriété Listen dans httpd.conf ou ports.conf).

Ensuite, dans une même traite, nous allons arrête l’ancienne version et démarrer la nouvelle :

/etc/apache-2.2.9/bin/apachectl stop
/etc/apache-2.2.13/bin/apachectl start

Ainsi, en toute logique, votre serveur Apache utilise maintenant la nouvelle version. Si vous avez installer une nouvelle version de PHP, il l’utilise aussi…

Si vous utilisez un hébergement mutualisé pour quelconque site ou service, lors du développement, tout doit être encodé de la même manière. Comme je le conseil dans l’article concernant les problèmes d’encodage, utiliser UTF-8 avec PHP n’est pas toujours facile, surtout quand c’est PHP lui-même qui vous transforme vos chaines de caractère UTF-8 en ISO-8859-1 (si c’est l’encodage de caractère utilisé sur le serveur…).

C’est en effet le cas de la fonction substr qui converti les chaines de caractères. Comprendre d’où vient l’erreur d’encodage sans penser que ça pourrait être PHP lui-même, c’est dur… Donc, pour spécifier l’encodage à utiliser pour substr, il faut utiliser la fonction mb_substr et lui ajouter un argument comme ceci:

$new_string = mb_substr($string, $start, $end, 'UTF-8');

Que cet article aide de nombreuses personnes à ne pas chercher pendant des heures un problème qui n’est pas réellement de le ressort…