Gandi lance son offre d’hébergement !

Après 9 mois de beta test, Gandi, le célèbre registar qui a démocratisé l’achat de noms de domaines sur Internet, lance son offre d’hébergement extensible et à bas prix.

Pour 10€ HT par mois vous obtenez une “part” sur un serveur virtualisé (la techonologie sous jacente est Xen) ce qui équivaut à un serveur avec processeur Intel Celeron, 256Mo de mémoire vive (et 512Mo de SWAP) et 5 Go de disque dur. Si le besoin sans fait sentir, vous pouvez très simplement ajouter d’autre “parts” à votre serveur via une interface web et augmenter ainsi ses capacités sans avoir besoin de modifier la configuration de votre serveur.

Le traffic est illimité et l’offre inclus un système d’installation de services simplifiés (web, mail, …). Vous avez totalement la main sur votre serveur (shell root) et vous pouvez le configurer comme bon vous semble, comme si vous étiez sur un véritable serveur dédié.

Ce blog est hébergé sur des serveurs Gandi depuis quelques temps et je peux dire que j’en suis très conten, un nouveau concurrent de taille pour les Dedibox d’Illiad et l’offre Kimsufi d’OVH est né.

Faire fonctionner Google Notifier pour Mac en mode sécurisé

Peut-être utilisez-vous Google Notifier pour OS X ? Cet un utilitaire permet d’avertir en temps réel lors de la réception d’un messages sur Gmail, de rappeler les rendez-vous Calendar et d’intégrer ces services au système d’Apple.

Le problème, c’est que par défaut il fait transiter vos identifiants en clair sur le réseau. Si vous vous connectez à un réseau sans fil partagé tel que le réseau Wi-Fi de votre université ou d’une gare, c’est le vol de compte assuré.

Heureusement, une option cachée permet de forcer l’utilisation d’une connexion sécurisée via HTTPS, pour l’activer déployer le menu déroulant en cliquant sur l’icône de Google Notifier, appuyez simultanément sur commande (Pomme) et option (alt) puis sélectionnez l’entrée Preferences....

Dans la fenêtre qui apparait entrez SecureAlways pour Key et 1 pour Value.

Cliquez sur Set pour valider et fermez la fenêtre. C’est fait !

Que vous utilisiez un Mac ou non, c’est toujours une bonne idée de vous connecter à Gmail via https://gmail.com afin de ne pas vous faire voler vos mots de passe. Pour éviter les dangereux oublis il existe une option intitulée Toujours utiliser le protocole https activable depuis les paramètres de l’application web.

Astuce originalement trouvée par Highplace.

Changer le message d’accueil de votre terminal

Lorsque vous lancez un shell sous votre Unix préféré (que ce soit GNU/Linux ou un BSD ou OS X), un petit texte est affiché avant le prompt, c’est le MOTD (Message Of The Day). Ils sont souvent austère, comme c’est le cas sur les serveurs d’hébergement Gandi :

Pour le changer pour quelque chose de plus joyeux il suffit de modifier le fichier /etc/motd en tant que root !

Petite astuce, vous pouvez utiliser un FIGlet-like pour créer un logo en art ASCII !

Ajax Syntax Highlighter 1.0 beta 1 released

Yeah, it’s the first public release of the new syntax highlighter announced in my previous post !

Ajax Syntax Highlighter is a small Javascript utility designed to highlight code embed in a web page in a semantic and standard compliant way.
It automatically looks for source code in the page, send it to a server-side highlighter and display the highlighted code. It also has a “view as plain text” feature and internationalization (French translation available).

Ajax Syntax Highlighter is built with Yahoo! UI and uses JSON for serialization.
It currently includes GeSHi as server-side (PHP required) highlighter but it can be easily used with others such as Pygments.

As you can see, the current graphics come from SyntaxHighlighter and are not so good. If you have some webdesign skills and can help me to enhance it, please contact me !

Du code dans vos pages web !

Sur ce blog comme c’est le cas sur beaucoup d’autres sites traitant de programmation, je suis souvent amené à publié des snippets de code source ou des dialogues homme – machine (des successions de commandes). HTML et XHTML disposent de balises dédiées à cette tache particulière qui sont malheureusement trop souvent ignorées alors qu’elles ont une forte valeur sémantique. Elles sont vieilles comme le web et supportées par tous les navigateurs les plus populaires.

Quels avantages ?

Structurer correctement l’information contenu dans les pages internet permet aux logiciels (robots des moteurs de recherches, …) de plus facilement lui donner un sens et déterminer sa nature. Une application concrète pourrait être la création d’un moteur de recherche de code source et de snippets à la Google Code utilisant les balises présentées ci-dessous pour déterminer le type d’articles et le langage utilisé. A l’échelle d’un blog comme le mien, on pourrait aisément mettre en place un système de coloration syntaxique (qui est en fait déjà développé) ou encore un agrégateur de snippets.

De manière plus pragmatique, utiliser le bon élément associé au type de donnée à représenter (code source, saisie clavier, sortie d’un programme, …) permet de simplement styler la page via les CSS pour en facilité la lecture (exemple : les entrées utilisateur en bleu, les sorties système en vert, …).

Intégrer le code source d’un programme

Comme son l’indique, la balise code permet d’afficher du code source. Combinée à la balise pre qui permet d’afficher du texte préformaté, elle est tout à fait adapté à des blocs de code :

Ce qui donnera :

La spécification HTML actuelle ne précise aucun moyen d’indiquer le langage de programmation dans lequel est écrit le code. Nous utilisons ici la convention présente dans le brouillon de HTML 5 (qui reste tout à fait valide en HTML 4.01 et XHTML 1.1) qui consiste à ajouter à la balise code un attribut class dont la valeur commence par language- et se termine par le nom du langage de programmation utilisé en toutes lettres : par exemple pour du C# nous utiliserons language-c-sharp. Comme nous le verrons plus bas, cette convention pourra être utilisée pour activer la coloration syntaxique.

Une autre balise peut être utile, plus spécifiquement lors de la publication de formules mathématiques ou d’algorithmes : il s’agit de var qui permet de représenter une variable.

Ce qui donne : Tant que la variable x vaut vrai, on boucle.

Représenter un dialogue homme – machine

Dans des tutoriels comme celui présentant l’installation d’une solution LAMP sur un serveur Gandi, il est nécessaire de retranscrire un grand nombre d’interactions avec le système. Généralement la saisie de commandes et la sélection d’items dans les menus.

Deux balises sont prévues à cet effet : samp et kbd. Le premier (issue de sample) représente la sortie d’un programme tandis que le second (pour keyboard) spécifie les entrées utilisateurs.

Un petit exemple de leur utilisation avec la saisie de la commande uname dans le terminal de Mac OS X :

Ce qui rendra :

Comme vous pouvez le voir, nous utilisons des balises samp et kbd au sein d'une balise samp ce qui nous permettra de le styler simplement à l'aide de CSS et rendre la lecture de cette interaction beaucoup plus claire pour l'utilisateur (par exemple à l'aide d'un code couleur pour les entrées/sorties).

Le brouillon de la spécification de HTML 5 définie plusieurs sortes d’agencement possibles pour les balises samp et kbd :

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

En voici une libre traduction :

L’élément kbd représente une entrée utilisateur (généralement une saisie clavier, bien qu’il puisse représenter d’autres entrées, tels que des commandes vocales).

Quand l’élément kbd est imbriqué dans un élément samp, il représente la saisie telle qu’elle a été affichée par le système.

Quand l’élément kbd contient un élément samp, il représente une entrée basé sur une sortie du système, par exemple pour appeler un item de menu.

Quand l’élément kbd est imbriqué dans un autre élément kbd, il représente la touche ou unité d’entrée équivalente utilisable avec le mécanisme d’entré.

La coloration syntaxique

Nous l’avons vu, styler via CSS les éléments présentés précédemment permet de simplifier la lecture de nos articles. Concernant les codes sources publiés, n’importe quel développeur ayant utilisé autre chose que notepad.exe comme éditeur de texte vous le confessera : la coloration syntaxique est un plus indéniable pour la lecture et la compréhension.

Plusieurs logiciels permettent d’activer la coloration syntaxique sur vos pages webs :

  • GeSHi est l’un des plus populaires et performant. Écrit en PHP, il supporte de nombreux langages mais à la désavantage de coloré le code coté serveur et de détruire à la conversion tous le soin que vous aurez apporté au balisage de votre page web…
  • SyntaxHiglighter est lui un script JavaScript qui colorera le code à sa manière pour les lecteurs humains mais le préservera dans sa forme originelle pour tous les robots et autres terminaux ne supportant pas JavaScript. J’ai créé un tout petit patch afin de le rendre plus ou moins compatible avec les standards présentés dans cette article. (C’est celui qui est utilisé sur ce blog actuellement).
  • Ajax Syntax Highlighter est la solution hybride que je développe. Un script JavaScript côté client détecte les snippets inclus dans la page et les envoi côté serveur pour être colorés (pour l’instant à l’aide de GeSHi). Comme SyntaxHighlighter (dont il reprend une partie de la CSS), il dispose d’une fonction “voir comme texte”. (Ce projet n’est pas encore publié, il le sera d’ici très peu de temps).

Ce billet s’inspire en parti de l’article Lesser-know semantic elements disponible sur l’excellent centre de ressource Opera Web Standard Curriculum.

Amateurs de Punk lillois, ne manquez pas Oi Polloi jeudi

Oi Polloi, le mythique groupe anarcho-punk écossais se produira jeudi à La Rumeur à Lille. C’est 6€, début des hostilités prévu à 20h30.

Pour ceux qui sont intéressés à venir de loin, sachez que la tout aussi mythique braderie de Lille (mais peut-être un peu moins punk) se tiendra samedi et dimanche dans toute la ville. Au programme puces bien sûr, bières, concerts, free party, moules-frites et, et surtout bière en fait !

Ecouter quelques morceaux de Oi Polloi.