A la différence des autres générateurs, celui-ci ne génère pas une image gif mais du CSS3. Ce qui implique d’utiliser un navigateur compatible.

CSSLoad

Via

Article original écrit par Mr Xhark publié sur Blogmotion le 26/09/2011 | 5 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Le WoW n’est autre que du Wake On Lan à travers Internet au lieu d’un réseau local, je ne rentrerai pas dans les détails de la mise en place qui nécessiterait un billet à elle tout seule. Pour faire simple l’idée c’est d’allumer un PC depuis n’importe où dans le monde dans le but de se connecter à distance (bureau à distance, ssh, vnc, http, etc.).

De nombreux sites et logiciels permettent le réveil à distance via WoW, c’est à dire l’envoie de la trame magique, le plus connu étant Depicus qui fournit une interface web, SOAP, en ligne de commande, une application iPhone/Android et j’en passe. Si vous êtes en IP fixe le recourt à ce type de service extérieur peu s’avérer dangereux dans le cas où le site exploite votre IP et l’adresse mac de la ou les machines à réveiller… car vous ne pourrez pas en changer. Seul le port est parfois paramétrable, le port 7 et 9 étant les plus utilisés.

Si vous aimez faire votre tambouille vous pouvez déclencher le réveil via un simple script PHP. Libre à vous ensuite de vous faire une interface agréable et (surtout) protégée par un .htaccess ou tout autre moyen (soyez imaginatif). Il existe de nombreux scripts sur la toile pour envoyer le paquet magique mais certains nécessitent une configuration et/ou des autorisations particulières pour fonctionner. Dans le cas où vous utilisez un hébergeur mutualisé ces scripts sont inopérants. Le seul script efficace que j’ai trouvé sur un site américain fonctionne même sur les pages persos Free.fr, réputées pour être restrictive.

<?php
# Wake on LAN - (c) HotKey@spr.at, upgraded by Murzik
# Modified by Allan Barizo http://www.hackernotcracker.com
# Translated by Mr Xhark http://blogmotion.fr
flush();

// Numéro du port d'écoute de l'ordinateur cible. Habituellement tout port compris entre 1 et 50000 fonctionnera mais les ports 7 ou 9 sont à privilégier.
$socket_number = "9";
// Adresse MAC du périphérique réseau de l'ordinateur cible
$mac_addy = "aa:bb:cc:dd:ee:ff";
// Adresse IP de l'ordinateur cible (ip publique de votre routeur/modem). Entrez le nom de domaine si vous en utilisez-un (tel que Dynamic DNS/IP).
$ip_addy = gethostbyname("monpc.dyndns.org");

## fonction ##
function WakeOnLan($addr, $mac,$socket_number) {
  $addr_byte = explode(':', $mac);
  $hw_addr = '';
  for ($a=0; $a <6; $a++) $hw_addr .= chr(hexdec($addr_byte[$a]));
  $msg = chr(255).chr(255).chr(255).chr(255).chr(255).chr(255);
  for ($a = 1; $a <= 16; $a++) $msg .= $hw_addr;
  // send it to the broadcast address using UDP
  // SQL_BROADCAST option isn't help!!
  $s = socket_create(AF_INET, SOCK_DGRAM, SOL_UDP);
  if ($s == false) {
	echo "Erreur lors de la création du socket!\n";
	echo "Code d'erreur: '".socket_last_error($s)."' - " . socket_strerror(socket_last_error($s));
	return FALSE;
	}
  else {
	// setting a broadcast option to socket:
	$opt_ret = socket_set_option($s, 1, 6, TRUE);
	if($opt_ret <0) {
	  echo "setsockopt() a échoué, erreur: " . strerror($opt_ret) . "\n";
	  return FALSE;
	  }
	if(socket_sendto($s, $msg, strlen($msg), 0, $addr, $socket_number)) {
	  echo "Paquet magique émis avec succès!";
	  socket_close($s);
	  return TRUE;
	  }
	else {
	  echo "L'envoie du paquet magique a échoué!";
	  return FALSE;
	  }
	}
  }
# envoi du paquet magique
WakeOnLan($ip_addy, $mac_addy,$socket_number)
?>

En espérant que cela serve à quelqu’un. Si vous utilisez un firmware libre tel que Tomato voici la procédure pour activer le WoW à travers votre routeur.

Source du script original

Illustration CC

Article original écrit par Mr Xhark publié sur Blogmotion le 07/04/2011 | 12 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Je vous présente un script PHP permettant d’afficher les règles actives sur votre reverse proxy Apache.

Explication du schéma : les serveurs web 1 et 2 ainsi que le serveur SVN sont accessibles depuis l’intérieur du réseau de l’entreprise (LAN) ainsi que depuis l’extérieur (Internet). Plutôt que d’ouvrir un port différent pour que chaque serveur soit accessible depuis l’extérieur nous utilisons un reverse proxy avec une URL différente pour chaque serveur. Sur le principe le reverse proxy est situé comme dans une DMZ, sauf qu’un seul port est autorisé.

Seul le reverse proxy est autorisé à atteindre les serveurs depuis l’extérieur. Ce qui limite fortement le risque d’attaque et d’intrusions par un tiers. D’autre part le reverse proxy est capable de réaliser de la mise en cache ce qui économie de la bande passante. Plusieurs reverse proxy existent : Apache pour le plus connu, nginx ou encore Varnish (le plus efficace).

Aujourd’hui je vous parle d’Apache, car le plus simple à configurer si vous n’avez pas de besoin de performance particulières. Les règles du proxy inverse sont stockées dans le fichier :

/etc/apache2/mods-available/proxy.conf

Parce que ce fichier est souvent sujet à des modifications, il est préférable d’avoir une vue en temps réel sur les règles. J’ai développé un script PHP (simple) permettant cela.

<?php
# Auteur: Mr Xhark
# URL: http://blogmotion.fr
# Date: 25/11/2010
# Licence CC: http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
# Fonction : Affiche la correspondance des URL du reverse-proxy

echo '<html><meta><title>Correspondance des URL de la machine proxyrev</title></meta>';
echo '<body>';
echo '<h1>Correspondance des URL de la machine <em>' . $_SERVER['SERVER_NAME'] . '</em></h1>';

ob_start();

# fichier de configuration des URL (géré par apache2)
$fichierConf = '/etc/apache2/mods-available/proxy.conf';
$cmdOFF = "more $fichierConf | sed '/ *#/d; /^ *$/d'";  // sans comm
$cmdON  = "more $fichierConf";                          // avec comm

# récupération get
if ($_GET['c']) {
$c = $_GET['c'];
}
else $c = 1;

if ((int) $c == 1) {
$c = $cmdOFF;
$lien = '<a href="?c=2" title="avec commentaire">Voir le fichier avec les commentaires</a>';
}
else {
$c = $cmdON; // eviter toute tentative injection sql
$lien = '<a href="?c=1" title="sans commentaire">Voir le fichier sans les commentaires</a>';
}

passthru($c);

$result = ob_get_contents();
ob_end_clean();

echo $lien . '<hr />';
echo '<pre>' . $result . '</pre>';
echo '<hr />' . $lien;
echo "\n</body>\n</html>";
?>

En haut et en bas du script se trouve un lien pour afficher ou masquer les commentaires. C’est très pratique et rend le fichier de configuration plus lisible.

Le script est simple mais efficace et vous ferez gagner du temps si vous êtes administrateur réseau. Comme d’habitude, le code est sous licence Creative Commons, profitez-en pour l’utiliser et/ou l’améliorer!

Article original écrit par Mr Xhark publié sur Blogmotion le 25/11/2010 | Aucun commentaire |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Si vous utilisez une police qui n’est pas présente sur l’ordinateur de vos visiteurs elle sera remplacé par une autre (que l’on peut définir grâce au css), ce qui constitue une contrainte pour le webdesign.

Plusieurs solutions de contournement existent pour utiliser la police de votre choix, je vous en présente 7.

L’image statique de remplacement

Le remplacement de texte par une image est à bannir s’il ne s’agit pas d’élément de design tel que bannière, fonds, etc. Si cette méthode était largement utilisée à l’époque du « web 1.0″, ce n’est plus le cas aujourd’hui (trop lourd).

Typeface.js

Typeface (javascript) utilise un tracé vectoriel effectué avec les librairies respectives des moteurs de rendu : VML (IE) et SVG pour les autres. Si le JavaScript est désactivé sur le navigateur des les textes par défaut seront affiché dans la police par défaut.

Assez limité, problème si appelé depuis une page imbriquée.

sIFR 3

sIFR3 est une méthode basée sur Flash comportant une zone de texte dynamique. Le flash ne faisant pas nativement parti des navigateurs, cette méthode n’est pas parfaite et mal supportée sur certains périphériques propriétaires comme ceux d’Apple.

Voir démo, tutoriel ici ainsi que sIFR Lite

FLIR

FaceLift Image Replacement est une méthode qui combine PHP avec la libraire GD et JavaScript, très consommateur en ressource côté serveur.

Cufón

Cufon convertir une police (ttf, otf, pfb) en tracé vectoriel JavaScript à inclure dans votre site. Il suffit ensuite de télécharger et d’inclure la librairie Cufón après avoir sélectionné les caractères pouvant être utilisés (alphanumériques, latins, etc.) ce qui en influera directement sur la taille.

C’est une solution assez efficace si vous utilisez cette méthode à plusieurs reprises sur votre site, elle sera plus efficace qu’un remplacement d’images.

Google Font

Google Font Directory est un service sorti en mai 2010 assorti de Google Font API qui permet d’utiliser des polices hébergées par Google. Une solution propre et très bien supportée par les différents navigateur, à privilégier.

Css3

Le CSS3 s’impose tout doucement grâce à l’évolution des navigateurs mais il est encore trop tôt pour n’utiliser que la méthode @font-face

Conclusion

Ce billet comporte de nombreux liens, n’hésitez pas à visiter les différents sites pour apprécier chaque solution.
Enfin, ne perdez pas de vue la lisibilité, l’accessibilité et le référencement de votre site, quelle que soit la solution adoptée.

Article original écrit par Mr Xhark publié sur Blogmotion le 11/09/2010 | 7 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Une fois ce moteur ajouté il est possible pour l’utilisateur de rechercher rapidement sur votre blog WordPress, c’est le cas sur Blogmotion vous pouvez essayer.

Voici comment intégrer facilement OpenSearch à votre blog WordPress.

Installation

OpenSearch fonctionne grâce à un fichier XML décrivant le moteur de recherche. Vous pouvez l’appeler comme vous le souhaitez *.xml (search.xml chez moi) mais il faut toutefois respecter le modèle de base pour le contenu.

Les éléments en rouge doivent être personnalisés et adaptés à votre blog (nom de domaine) :

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>Blogmotion</ShortName>
<Description>Culture web et nouvelles technos</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">http://blogmotion.fr/favicon.ico</Image>
<Url type="text/html" method="get" template="http://blogmotion.fr/?s={searchTerms}">
</Url>
<Url type="application/x-suggestions+json" template="suggestionURL"/>
<moz:SearchForm>searchFormURL</moz:SearchForm>
</OpenSearchDescription>

Les spécifications sont à consulter ici.

Il ne vous reste plus qu’à insérer entre les balises <head></head> la ligne indiquant à Firefox que vous disposer d’un moteur OpenSearch. Sur WordPress ça se passe dans le fichier header.php de votre thème :

<link rel="search" type="application/opensearchdescription+xml" title="la recherche Blogmotion" href="http://blogmotion.fr/search.xml">

Conclusion

Cette solution est simple, efficace et basée sur un standard.

Et puis parce que tous les sites n’ont pas ce système de recherche, vous pouvez utiliser Add to Search Bar, une extension Firefox qui permet de recherche sur n’importer quel site (démo ici).

<link rel="search" type="application/opensearchdescription+xml" title="la recherche Blogmotion" href="http://blogmotion.fr/search.xml">

Article original écrit par Mr Xhark publié sur Blogmotion le 15/08/2010 | 15 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

La version finale de WordPress 3.0 « Thelonious » vient tout juste de sortir. Comme à chaque montée de version c’est la même corvée : migrer. D’autant qu’il s’agit là d’un changement majeur puisque WordPress passe de la version 2 à 3.

Voici comment migrer rapidement un blog vers WordPress 3.0 à partir de WordPress 2.9.x.

Avant tout, sauvegardez

L’étape première avant chaque mise à jour est de réaliser une sauvegarde complète de votre blog. Sauvegardez :

1. la base de données (tables concernant WordPress)
2. les données : tous les fichiers et répertoires (faites une archive 7z, zip ou rar)

Ces fichiers vous permettront de revenir en arrière en cas d’échec ou d’erreur fatale.

Avant tout, je vous recommande de tester cette mise à jour sur un serveur de test, de développement ou localement (XAMPP est multi-plateforme). En effet, thèmes et plugins risquent de ne pas être compatibles à 100% avec cette nouvelle mouture. Ne migrer pas directement WordPress sur un serveur en production sans être certain du résultat.

Il est également conseillé d’attendre quelques semaines avant de migrer afin que les bugs et problèmes remontent sur le web grâce à la communauté.

Migrer manuellement

Après avoir sauvegarder le blog, passons à la migration manuelle si la migration automatique ne vous convient pas ou ne fonctionne pas correctement.

1. Supprimer les répertoires /wp-admin wp-includes
2. Télécharger la version 3.0 FR de WordPress puis extraire le contenu à la racine de votre blog (Windows va fusionner les dossiers existants, vous pouvez valider sans crainte les avertissements de remplacement).
3. Accéder à l’interface admin du blog : http://votreblog.tld/wp-admin puis cliquer sur le bouton de mise à jour de la BDD :
   
4. Patientez quelques instants, et c’est terminé :
   

Vous pouvez maintenant profiter des nouveautés de WordPress 3.0. Merci à toute la communauté pour le travail fourni, une fois de plus !

Article original écrit par Mr Xhark publié sur Blogmotion le 18/06/2010 | 20 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Rien de sorcier, juste un peu de logique.

Premièrement on crée la nouvelle table (table_clonee) à partir de la table_source :

CREATE TABLE table_clonee LIKE table_source ;

Puis nous insérons les données dans la nouvelle table en « lisant » celles de la table_source

INSERT INTO table_clonee SELECT * FROM table_source ;

Simple et efficace.

Note : cela doit fonctionner également sur d’autres moteurs de bases de données, moyennant quelques adaptations syntaxiques

Article original écrit par Mr Xhark publié sur Blogmotion le 08/06/2010 | 6 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

En parcourant l’aide de la commande dir (pour directory), j’ai trouvé une petite astuce permettant de rechercher un fichier en invite de commande :

dir lettre:\*.ext /S

/S    Affiche les fichiers d’un répertoire et de ses sous-répertoires.

Exemple pour rechercher tous les MP3 d’un disque dur (sur C:) :

dir c:\*.mp3 /S
D:\>dir D:\*.dll  /s | more
 Le volume dans le lecteur D s'appelle DONNEES
 Le numéro de série du volume est 8C3B-CA0B

 Répertoire de C:\perso\musique
18/02/2007  00:24            35 328 piste_01.mp3
18/02/2007  00:24         1 631 744 piste02.mp3
18/02/2007  00:24            74 240 blogmotion.mp3

[...]

Répertoire de C:\backup\pop

8/03/2003  14:00            14 336 supergroupe.mp3
8/03/2003  14:00             7 680 popita.mp3

Comme les résultats sont souvent nombreux, je vous conseille de « piper » le résultat avec la commande more :

dir c:\*.mp3 /S | more

Il faut appuyer sur ENTREE pour faire défiler ligne par ligne et sur ESPACE pour faire défiler page par page.

C’est une méthode un peu à l’ancienne mais cela peut être utile pour réaliser des batch Windows. Sur environ 50 Go de données il ne faut que quelques secondes (3 secondes en vérité) pour que le script fasse le tour des données, plutôt efficace !

Article original écrit par Mr Xhark publié sur Blogmotion le 10/05/2010 | 4 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Afficher le compteur d’abonnés à votre flux RSS (feedcount) sur votre blog peut être favorable à une croissance du nombre d’abonnés. Je vous déconseille toutefois d’afficher votre compteur en dessous d’un minimum (100) car cela risque d’avoir l’effet l’inverse.

FeedBurner propose un compteur paramétrable au niveau des couleurs du fond, du texte et du choix du texte (rarement utilisé). Mais il faut bien dire que ce compteur est absolument moche et ne s’intègre que très mal dans un design… il fait très vite tâche, à tel point qu’il ne vaut finalement mieux pas l’afficher. Suite à plusieurs demandes de lecteurs de Blogmotion, voici comment récupérer une valeur brute du nombre d’abonnés.

Le fait de récupérer le compteur en variable va nous permettre de l’intégrer à un design, un bouton ou tout autre élément graphique (vous pourrez ensuite utiliser la librairie PHP GD2 par exemple). Avant tout vous devez avoir migré l’URL de votre flux RSS, suite au rachat du service par Google, si ce n’est pas le cas faites-le.

Nous allons implémenter une fonction de récupération de vos abonnés en PHP. Editez le fichier :

/wp-content/votre_theme/functions.php

Pour éviter de solliciter FeedBurner à chaque visite (ce qui ralentirait trop le blog) j’ai implémenté un système de cache. A l’époque où je n’utilisais pas WP-Super-Cache ce système de cache était indispensable… maintenant il ajoute une couche supplémentaire de cache (pas forcément utile).

A l’endroit ou vous souhaitez insérer le compte d’abonnés il suffira d’utiliser notre nouvelle fonction (header.php chez moi) :

<?php if (function_exists('nbAboFeed')) echo nbAboFeed(); ?> abonnés

Passons maintenant au coeur du code PHP avec la fonction nbAboFeed :

function nbAboFeed($feedUri = 'login_feedburner', $feedFile = 'nbfeed.txt') {
 # Licence : Creative Commons
 # Author : Xhark, http://blogmotion.fr
 # en secondes
 $duree_cache = 3600;

 //si le fichier n'existe pas dans le cache (ou trop vieux)
 if (@filemtime($feedFile) < time()-($duree_cache) ) {

 $ch = curl_init();
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch, CURLOPT_URL, 'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=' . $feedUri);
 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);  // necessaire pour windows
 curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);      // necessaire pour windows
 $data = curl_exec($ch);
 curl_close($ch);

 $xml = new SimpleXMLElement($data);
 $nbAbo = (int) $xml->feed->entry['circulation'];

 # nbAbo correctement récupéré, écriture dans cache
 if ( $nbAbo > 0 )
 writeFeedFile($feedFile, $nbAbo);
 # si feedburner indisponible
 else
 # si fichier cache existe, renvoit de la valeur
 if(file_exists($feedFile)) return file_get_contents($feedFile);
 # si fichier cache jamais crée et feedburner indispo, msg erreur
 else return 'Erreur, feedburner indispo';
 }

 # déjà dans le cache
 else
 $nbAbo = file_get_contents($feedFile);

 return $nbAbo;
}

function writeFeedFile($feedFile, $nbAbo) {
 $ret = file_put_contents($feedFile, $nbAbo);
 if (!$ret)
 echo 'Erreur ecriture feed';
 return;
}

J’ai jugé bon de séparer la fonction d’écriture du cache, c’est pour cette raison qu’elle n’est pas intégrée à la fonction nbAboFeed. Ce code est fonctionnel mais pas forcément optimisé. Vos propositions d’améliorations sont les bienvenues puisque, comme tout le contenu du blog, ce code source est sous licence Creative Commons.

Le cache est positionné par défaut à 3600 secondes (1 heure), ce qui est amplement suffisant pour suivre l’évolution des abonnés. Évitez toutefois de définir un temps de cache trop élevé, sinon vos visiteurs auront l’impression que votre nombre d’abonnés stagne.

Documentation Awareness API

Article original écrit par Mr Xhark publié sur Blogmotion le 02/05/2010 | 19 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Une page comportant un nombre important d’image est longue à charger et c’est d’autant plus vraie sur les configurations légères (ultra-portable et mobiles). La raison est simple : toutes les images sont chargées d’un coup d’un seul.

La solution : le lazy load

Lazy signifie paresseux (ça y est vous comprenez l’image d’illustration:) ).

Le principe est simple et efficace : les images sont chargées au scroll, c’est à dire que toutes les images que vous ne voyez pas ne sont pas chargées. Cela soulage à la fois votre serveur mais également le pauvre navigateur des visiteurs.

Si vous avez du mal à comprendre, voyez par vous même cet exemple chez Designrfix en descendant rapidement en milieu de page.

LazyLoad est un plugin jQuery capable de réaliser ce retardement de chargement. Vous pouvez l’intégrer très facilement dans un n’importe quel site, voir la documentation à ce sujet.

Si vous utilisez WordPress, il existe l’équivalent en plugin : jQuery Image Lazy Load WP crée par AYN. Il vous suffit de l’activer pour qu’il s’occupe de retarder le chargement de vos images.

Conclusion

Cette astuce permet de réduire drastiquement la bande passante consommée dans le cas où de nombreuses images sont présentes dans vos billets, qui plus est si votre taux de rebond est important (les images ne seront pas chargées pour rien).

Rien ne vous empêche cependant d’utilisation en parallèle un frontal de cache tel que nginx, lighttpd ou varnish qui soulagera votre serveur Apache et l’interpréteur PHP (je vous en reparlerai).

Crédit photo CC

Article original écrit par Mr Xhark publié sur Blogmotion le 17/04/2010 | 20 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons