Cyril - Mes astuces http://blog.cyril.me Yet Another Wordpress Blog Fri, 30 Jul 2010 06:56:42 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Port forwarding avec iptables http://blog.cyril.me/2010/07/udp-tcp-port-forwarding-iptables/ http://blog.cyril.me/2010/07/udp-tcp-port-forwarding-iptables/#comments Fri, 30 Jul 2010 06:55:37 +0000 Cyril http://blog.cyril.me/?p=339 Ceci est un petit mémo sur la méthode pour transférer des paquets sous linux avec iptables.

1. Autoriser votre ordinateur à transférer des packets

Vous devez activer dans un premier temps le transfert de paquets par votre ordinateur. En root, exécutez la commande suivante :

# sysctl net.ipv4.ip_forward=1

Si vous souhaitez que ce paramètre soit activé par défaut au démarrage de votre ordinateur, éditez le fichier /etc/sysctl.conf, qui sera utilisé au boot pour remettre les paramètres à jour.

2. Faire du NAT avec iptables (translation d’adresse)

Le NAT consiste à autoriser qu’un ordinateur utilise le votre comme passerelle vers internet. Par exemple, vous avez une clé 3G ou un accès simple à Internet : mettez-vous en réseau avec l’autre ordinateur (avec des IPs fixes, un câble réseau ou un wifi en ad-hoc). Ensuite, autorisez le NAT de la manière suivante (remplacez eth0 par l’interface de votre connexion Internet).

# iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE

3. Forwarder des paquets

Pour forwarder les paquets qui arrivent sur un port vers un autre, utilisez iptables ! L’exemple suivant montre comment router les paquets UDP port 31234 vers une autre IP (on aurait aussi pu changer le port de destination pour en mettre un différent).

# iptables -t nat -A PREROUTING -p udp --dport 31234 -j DNAT --to 10.0.0.2:31234

Exemple d’utilisation : transférer des paquets RSTP (comme ceux de la TV Freebox) vers un autre ordinateur.

]]> http://blog.cyril.me/2010/07/udp-tcp-port-forwarding-iptables/feed/ 0 Guitar Hero 6 : Warriors of rock http://blog.cyril.me/2010/07/guitar-hero-6-warriors-of-rock/ http://blog.cyril.me/2010/07/guitar-hero-6-warriors-of-rock/#comments Mon, 26 Jul 2010 19:30:09 +0000 Cyril http://blog.cyril.me/?p=338 Ca y est, Guitar Hero 6 arrive ! Alors accordez vos guitares, ça va rocker ! Enfin accordez… prenez un chiffon et nettoyez-moi cette crasse qui s’accumule sur vos guitares, micro et batterie : ça se nettoie de temps en temps…

Et comme je suis sympa, voici un player deezer d’une partie de la tracklist de cet opus : Tracklist Guitar Hero 6 : Warriors of Rock. Ce jeu est plus ROCK, plus dans le style de Guitar Hero 3 : Lengends of Rock. Il est donc moins grand public, mais personnellement je préfère ! Y en a un peu marre des chansons à accords, surtout quand les accords sont plus difficiles que les solos : c’est le monde inversé !

Guitar Hero 6 : Warriors of rock est déjà disponible en précommande sur le site d’Amazon et le site de Fnac. Il sortira pour Nintendo Wii, Playstation PS3 et XBox 360, et ce le 24 septembre 2010 (d’après le site d’Amazon).

Les tarifs : comme d’habitude ! 70€ pour les version XBox et PS3, 60€ pour la version Wii. Les packs sont aussi disponibles : comptez 100€ pour Jeu + Guitare et 200€ pour le bundle complet avec la batterie. Mon astuce : utilisez iGraal ! Vous aurez une réduction Guitar Hero de 4%, soit le jeu Wii pour 58€. Utilisez les 2€ restant pour vous offrir des chansons dans la boutique en ligne ! (Disponible depuis le jeu, sur la console)

Autres mots clé : GH6 setlist, Warriors of Rock song list, Ecoutez la playlist Guitar Hero sur deezer
]]> http://blog.cyril.me/2010/07/guitar-hero-6-warriors-of-rock/feed/ 0 Notifications HTML5 : exemple et demo http://blog.cyril.me/2010/06/notifications-html5-exemple-demo/ http://blog.cyril.me/2010/06/notifications-html5-exemple-demo/#comments Tue, 22 Jun 2010 21:40:37 +0000 Cyril http://blog.cyril.me/?p=297 Consécutivement à l’article sur les notifications HTML 5, voici un article qui donne un exemple de fonctionnement des notifications.

La démo

Avant de pouvoir afficher une notification, vous devez autoriser le site à vous en présenter :
Il y a parfois des limitations qui empêchent le site de lancer une autorisation au chargement de la page : vous êtes parfois obligé de faire cliquer l’utilisateur sur un bouton pour voir apparaître l’avertissement d’autorisation.

Ensuite, vous pouvez afficher des notifications (avec ou sans bouton) :

Programmer une notification dans 3 secondes

Sources de l’exemple

Code HTML :

  1. <button onclick="showNotification()">Afficher la notification</button>
  2. <button onclick="p297_showNotification()">Afficher la notification</button>
  3. <a onclick="window.setTimeout(showNotification, 3000);" href="javascript:;">Programmer une notification dans 3 secondes</a>

Code javascript :

  1. <script type="text/javascript">
  2. /** Demande la permission d’afficher des notifications */
  3. function allowNotification()
  4. {
  5.   if("webkitNotifications" in window)
  6.   {
  7.     // Demande la permission. En cas de succès, afficher la notification
  8.     webkitNotifications.requestPermission(p297_showNotification);
  9.   }
  10. }
  11.  
  12. /** Affiche la notification */
  13. function showNotification()
  14. {
  15.   if("webkitNotifications" in window)
  16.   {
  17.     // Crée une notification à partir d’une image, d’un titre
  18.     // et d’une description (pas d’HTML possible).
  19.     // Pour créer une notification avec de l’HTML
  20.     // (pour le formatage), utiliser createHTMLNotification()
  21.     var notification = webkitNotifications.createNotification(
  22.       "http://www.google.fr/favicon.ico",
  23.       "Titre : cyril.me",
  24.       "Ceci est une notification"
  25.     );
  26.     // Afficher la notification
  27.     notification.show();
  28.     // N’afficher la notification que 5 secondes
  29.     window.setTimeout(function() {notification.cancel();}, 5000);
  30.   }
  31. }
  32. </script>
]]> http://blog.cyril.me/2010/06/notifications-html5-exemple-demo/feed/ 0 Expressions régulières : combiner match et non-match http://blog.cyril.me/2010/06/expressions-regulieres-combiner-match-non-match/ http://blog.cyril.me/2010/06/expressions-regulieres-combiner-match-non-match/#comments Sun, 13 Jun 2010 20:12:05 +0000 Cyril http://blog.cyril.me/?p=289 Match et non-match…

En cette période de coupe du monde de football 2010, quoi de plus naturel que de parler de match ? … Hum.

Problématique

Mon problème aujourd’hui, c’est de sélectionner les listes qui contiennent une certaines expression régulière, mais pas une autre. Plus exactement, et pour faire dans les anglicismes, je cherche « foo.* », mais pas « foobar ».

La solution

Il faut utiliser la forme suivante : (?!regexp) pour choisir quelque chose qui ne match pas la regexp en question.

Mon exemple en pratique :

$ echo -e 'foo\nfoobar\nfoofighting' | grep -P 'foo(?!bar)'
foo
foofighting

Plus d’informations disponible avec perldoc perlre, en particulier le chapitre sur les expressions régulières étendues (Extended Patterns)

]]> http://blog.cyril.me/2010/06/expressions-regulieres-combiner-match-non-match/feed/ 0 Conversion javascript http://blog.cyril.me/2010/05/conversion-json-text-xml-javascript/ http://blog.cyril.me/2010/05/conversion-json-text-xml-javascript/#comments Tue, 11 May 2010 19:22:10 +0000 Cyril http://blog.cyril.me/?p=282 Parce qu’on n’a pas toujours le document au format qui nous convient, ou parce qu’on a parfois besoin de repasser par des chaînes de caractères pour passer des arguments ou stocker des variables, différents outils de conversion sont mis à disposition du développeur.

Conversion en passant par JSON

Certains types peuvent être convertis en passant par JSON : le texte, les objets, les tableaux, les nombres…

Du type javascript au texte : il faut utiliser JSON.stringify
Exemple : JSON.stringify([1,2,3]) => « [1,2,3] »

Du texte vers un type javascript : il faut utiliser JSON.parse
Exemple : JSON.parse(« [1,2,3]« ) => [1,2,3] (où 1, 2 et 3 sont des entiers)

Conversion d’un document DOMDocument ou XMLDocument

Deux outils sont à disposition : XMLSerializer (du document vers string) et DOMParser (de string vers un document).

XMLSerializer : DOMDocument vers une chaîne de caractères
Exemple : s = new XMLSerializer(); var documentString = s.serializeToString(document);

DOMParser : Conversion d’une chaîne de caractères vers un objet DOMDocument
Exemple : p = new DOMParser(); var doc = p.parseFromString(‘<html><body>coucou</body></html>’, ‘text/xml’);

Compatibilité

Ces APIs sont compatibles avec, entre autres, Safari 4.0+, Chrome, Firefox 3.5+, et peut-être IE… ;)

]]> http://blog.cyril.me/2010/05/conversion-json-text-xml-javascript/feed/ 0 Communication avec une iframe : window postMessage http://blog.cyril.me/2010/05/html-5-dom-window-postmessage/ http://blog.cyril.me/2010/05/html-5-dom-window-postmessage/#comments Tue, 11 May 2010 06:07:27 +0000 Cyril http://blog.cyril.me/?p=266 Il peut être parfois nécessaire d’utiliser une iframe, pour accéder par exemple à des cookies sur un autre site, se logguer, etc. Le problème est que si vous utilisez une iframe sur un domaine différent, le navigateur va vous renvoyer une erreur.

iframe et sécurité

Lorsque les domaine ou port diffèrent entre les deux frames, le navigateur va refuser la communication. En effet, imaginez que vous puissiez afficher une iframe cachée dans votre page, pour ensuite y récupérer des informations sensibles.

Exemple : dans mon site example.org, je mets une iframe vers mabanque.com et je récupère les informations bancaires de l’utilisateur de mon site (si celui-ci est déjà loggué sur le site de la banque).

La solution

Pour autoriser la communication entre les frames, il faut utiliser le protocole de communication entre les fenêtres.

Cette communication se fait par évènement : une fenêtre envoie à l’autre un objet1, qui le reçoit en ajoutant un handler sur l’évènement « message ».

Exemple

Dans notre exemple, l’iframe enverra un message à la fenêtre principale.

Fenêtre principale :

  1. // On rajoute un handler d’évènement
  2. function onMessage(e)
  3. {
  4.   // Vous pouvez vérifier l’origine de la fenêtre avec e.origin
  5.   document.getElementById(‘div-test’).innerHTML = "Réception du message " + JSON.stringify(e.data);
  6. }
  7. window.addEventListener("message", onMessage, true);

Fenêtre iframe

  1. var dstWindow = window.parent;
  2. // Vous pouvez choisir le domaine vers lequel vous acceptez d’envoyer un message (ici, tous les domaines)
  3. dstWindow.postMessage([1,2,3], ‘*’);

div-test pour la réception du message


1 : en fonction du navigateur, vous ne pourrez passer que des chaînes de caractères (Firefox 3.6 par exemple – Chrome supportant les objets). Pour pallier ce défaut, vous pouvez utiliser JSON.stringify et JSON.parse pour passer des objets comme des chaines ou des variables. Pour tout ce qui est DOM, ce n’est pas possible de faire passer les handler d’évènement définis dans la fenêtre source.

]]> http://blog.cyril.me/2010/05/html-5-dom-window-postmessage/feed/ 0 HTML5 : copier avec chrome et DOM Selection http://blog.cyril.me/2010/05/html5-copier-chrome-dom-selection/ http://blog.cyril.me/2010/05/html5-copier-chrome-dom-selection/#comments Mon, 03 May 2010 20:35:50 +0000 Cyril http://blog.cyril.me/?p=251 La question du jour : comment copier du texte en javascript.

En théorie

On va utiliser les objets suivants : la sélection DOM, et un Range.

La sélection DOM consiste en un objet, présent dans HTML5, qui permet de gérer les sélections de texte à l’intérieur d’un document.

Le range est un intervalle, qui permet de définir une zone continue dans un document.

En pratique, mis bout à bout

En pratique : on crée un range, on fait pointer la sélection dessus (en veillant à supprimer la sélection actuelle), et on exécute la commande « copy » pour copier la sélection dans le presse-papier.

  1. var r = document.createRange();
  2. r.selectNode(mon_element_a_selectionner);
  3. var s = window.getSelection();
  4. s.empty();
  5. s.addRange(r);
  6. document.execCommand(‘Copy’);

Exemple : copier le code javascript (ne fonctionne qu’avec un navigateur compatible HTML5)

]]> http://blog.cyril.me/2010/05/html5-copier-chrome-dom-selection/feed/ 1 HTML5 : notifications et limites sur Chrome http://blog.cyril.me/2010/05/html5-chrome-notifications/ http://blog.cyril.me/2010/05/html5-chrome-notifications/#comments Mon, 03 May 2010 19:54:26 +0000 Cyril http://blog.cyril.me/?p=244 Les notifications

Introduit parmi les nouvelles fonctionnalités de l’HTML5, les notifications permettent aux sites web (que vous autorisez) de vous informer d’une activité sur un site. C’est comme les notifications de MSN messenger, quand une fenêtre apparaît en bas à droite de l’écran.

L’API supporte deux fonctions pour créer des notifications : soit à partir d’une URL, soit à partir d’une icône, d’un titre et d’une description. Utiliser une URL d’un fichier HTML permet d’avoir beaucoup plus de possibilités, au niveau de l’interaction comme au niveau de l’affichage (gras, images, liens, etc).

Utilisation dans chrome

Pour l’instant, chrome est le seul navigateur à supporter ce standard (sous Linux, hein !).

Voici un petit exemple de script (plus de détails dans la doc de chrome) :

  1. function showNotification()
  2. {
  3.   // Création de l’objet, puis affichage
  4.   var notification = webkitNotifications.createHTMLNotification(‘http://monurldenotification.com/’);
  5.   notification.show();
  6. }
  7.  
  8. function sendNotification()
  9. {
  10.   var auth = webkitNotifications.checkPermission();
  11.   if (auth == 0) showNotification(); // Autorisé
  12.   else if(auth == 1) webkitNotifications.requestPermission(sendNotification); // Demande la permission
  13.   else { } // Refusé
  14. }
  15.  

Les limites

Malheureusement, il n’est pas possible de faire tout ce qu’on veut . Voici quelques limitations encore valables à ce jour :

  • Impossible de dialoguer entre la desktop notification et le script qui l’a ouverte ;
  • Impossible de spécifier une adresse du type data:text/html,<h1>test</h1>

A améliorer donc, afin d’avoir une réelle possibilité d’intégration dans des applications (type chat, …).

]]> http://blog.cyril.me/2010/05/html5-chrome-notifications/feed/ 1 Concatener des pdfs avec pdftk http://blog.cyril.me/2010/04/concatener-combiner-pdfs-pdftk/ http://blog.cyril.me/2010/04/concatener-combiner-pdfs-pdftk/#comments Thu, 29 Apr 2010 06:39:12 +0000 Cyril http://blog.cyril.me/?p=238 Manipuler des PDFs

Admettons que vous ayez deux fichiers PDF que vous souhaitiez regrouper en un seul fichier (par exemple les recto et verso de votre carte d’identité). Pour ce faire, voici un petit outil bien pratique : pdftk.

Bien que l’utilisation de ce programme est un peu compliquée, il n’en reste pas moins bien pratique !
$ pdftk recto.pdf verso.pdf cat output combine.pdf

Convertir des JPG en PDF

Je me suis mis à scanner ce matin un document, directement sur une clé USB (c’est plus pratique avec Linux que de commencer à chercher comment installer les drivers de scan ;) ). Je me suis récupéré, à ma grande surprise, des fichiers JPEG au lieu d’un PDF tant attendu !

Pas de soucis : avec convert de imagemagick, vous pouvez convertir chaque JPG en PDF :
$ for f in *.jpg; do echo Converting $f; convert $f $f.pdf; done

Ensuite, utilisez pdftk pour concaténer les fichiers PDF ainsi créés.

Installation des outils : les outils présentés ici sont disponibles dans la majorité des distributions (ubuntu, gentoo, …)

]]> http://blog.cyril.me/2010/04/concatener-combiner-pdfs-pdftk/feed/ 0 Synchronisation du calendrier Funambol sur iPhone http://blog.cyril.me/2010/04/synchroniser-calendrier-funambol-iphone/ http://blog.cyril.me/2010/04/synchroniser-calendrier-funambol-iphone/#comments Mon, 12 Apr 2010 20:28:37 +0000 Cyril http://blog.cyril.me/?p=231 Jusqu’à présent, il n’était pas possible de synchroniser ses évènements avec Funambol sans jailbreaker son iPhone. Aujourd’hui ? Ce n’est toujours pas possible ;) Mais ça va le devenir.

L’API de calendrier iPhone dans le nouveau SDK

Auparavant, Apple ne proposait pas dans son SDK d’API permettant d’accéder au calendrier. C’est désormais chose possible ! Il ne reste plus qu’à attendre d’une part la sortie du nouveau Firmware 4 iPhone (prévu cet été), et d’autre part la mise à jour de l’application Funambol.

Il sera alors possible de synchroniser non seulement ses contacts (comme maintenant), mais aussi tout son calendrier et ses évènements.

Télécharger Funambol

]]> http://blog.cyril.me/2010/04/synchroniser-calendrier-funambol-iphone/feed/ 0