Deblan blog

Développement

Python et Pastebin me voila !

Chez Debian, et surement sur d'autres distributions, existe un paquet nommé « pastebinit ». Ce soft permet de poster du code sur le site pastebin.com afin de le colorer et de le partager facilement avec du monde. Petite note, j'ai sur mon serveur un service de colorisation disponible à l'adresse wall.deblan.fr.

Pastebin a été remis à neuf il y a quelques semaines et le paquet « pastebinit » ne fonctionnait plus. En fait, en plus d'avoir été modifié le front office, l'API a aussi changé.

Bref, c'était assez pénible de ne pas avoir de quoi "paster" (coller) facilement du code en mode console alors j'ai décidé de coder un script qui remplacera pastebinit. Pour ce faire, j'ai eu envie d'utiliser Python.

Licence : BSD.

Pour utiliser le script, il y a deux manières :

1. Si on veut paster (ou "waller") un fichier :

simon@anna:~/python$ cat /mon/fichier/a/paster | ./pastebinit.py

2. Si on veut paster du code qu'on va taper :

simon@anna:~/python$ ./pastebinit.py
vous taper
votre code
et pour arrêter : ctrl+D

Il est évident qu'il faut avoir python d'installé sur sa machine. Pour les debianneux :

# aptitude update && aptitude install python

Si tout ce passe bien, vous devriez recevoir une url (exemple : http://pastebin.com/XdXRMTzZ). Dans le cas contraire, un message d'erreur apparaîtra.


Greasemonkey, l'extension du webuser developpeur

Cette extension qui fonctionne sur pas mal de navigateurs (je met IE dans le tas) permet d'ajouter des scripts Javascript sur tout les sites qu'on visite.

Une fois qu'on a installé et configuré un script, il s'exécute une fois que le DOM de la page est complétement chargé.

Pour la télécharger, c'est du coté du site officiel que ça se passe.

L'intérêt de cette extension est majeur quand on en a marre de voir des fonctionnalités inexistantes sur nos sites préférés.
L'ensemble des outils proposés par Greasemonkey ont été soigneusement implémentés pour permettent de développer facilement des scripts complets.

Basiquement, pour créer un script il faut lui donner un nom, une description, un espace de nom et les pages sur lesquels il s'exécutera.

De ces 4 informations, seule la description n'est pas essentielle. Le nom et aussi celui du fichier javascript généré sur la machine du client (vous). Si 2 scripts ont le même nom, alors le namespace (espace de nom) permettra de les différencier car plus tard, on verra que chaque script peut enregistrer des informations indépendamment. Les url à inclures sont évidement un point clé pour que les scripts soit exécutés.

Si je veux ajouter un script pour mon blog, je ferai :

// ==UserScript==
// @name  Mon script
// @namespace Mon script
// @include https://www.deblan.io/*
// ==/UserScript==

Le caractère « * » indique "tous les caractères possibles". Ainsi, toutes les pages de mon blog seront cibles.

Le reste de la manoeuvre demande simplement de savoir écrire du javascript.

Le meilleur ami de l'Homme 2.0 est la console d'erreur. Vous pouvez interfacer Greasemonkey avec la console Firebug mais vous pouvez également loguer des données (le alert() du riche en gros ^^) :

GM_log("Ceci est un log =)");
console.log("Ceci est un message qui sera affiché dans la console de Firebug");

Par défaut, on ne peut pas interagir avec les scripts originaux des pages cibles, donc par défaut, si JQuery ou Mootools sont présents, vous ne pourrez par les utiliser. Forte heureusement, on peut palier au problème en utilisant une des fonctionnalité très intéressante de Greasemonkey : unsafeWindow.

Pour donner un exemple concret, en développant un script pour Facebook, j'ai eu besoin d'avoir accès à l'objet "window.presenceNotifications". Pour pouvoir l'utiliser, voila le code utilisé :

var w = unsafeWindow;
var foo = w.presenceNotifications;
// A noter que c'est un poil plus complexe pour une bibliothèque

En javascript, on utilise les cookie pour enregistrer des données (dans le cas où on n'a pas de langage type Php pour le faire à sa place).
Avec Greasemonkey, 4 fonctions nous sont accessibles :

// http://wiki.greasespot.net/GM_setValue
// GM_setValue : enregistre une donnée
GM_setValue('Nom', 'Valeur');

// http://wiki.greasespot.net/GM_getValue
// GM_getValue : retourne une donnée enregistrée
GM_getValue('Nom');

// http://wiki.greasespot.net/GM_deleteValue
// GM_deleteValue : supprime une donnée enregistrée
GM_deleteValue('Nom');

// http://wiki.greasespot.net/GM_listValues
// GM_listValues : retourne toutes les données enregistrées
GM_listValues();

Bien sûr, entre 2 espaces de noms différents, impossible d'interagir avec les données.

Un tas d'autres fonctions sont présentes, en voici une liste :

  • GM_addStyle() : ajoute du CSS à la page
  • GM_xmlhttpRequest() : permet de faire des requêtes asynchrones
  • GM_getResourceText() : permet de télécharger une ressource textuelle
  • GM_getResourceURL() : télécharge une ressource (une image par exemple)

La documentation complète de Greasemonkey est disponible sur le wiki.

Pour donner des exemples, voila quelques-uns des scripts que j'ai développé :

Userscripts recense des milliers de scripts Greasemonkey pour une tripoté de sites web.

Si j'ai un conseil à donner avant d'écrire du code, c'est de savoir parcourir et modifier le DOM Html d'une page proprement, sans quoi vous allez avoir des problèmes.

A utiliser !


HTML 5, éclaircissements

Il y a pas mal de choses qui se disent sur l'HTML 5 mais on se retrouve souvent au devant d'incertitudes ou de problèmes de compréhension. Cet article n'est pas là pour vous apprendre à utiliser cette nouvelle version d'HTML mais contribuera à expliquer un peu mieux ses concepts.

Pour revenir un peu aux sources de l'HTML 5, c'est le W3C (World Wide Web Consortium), organisme qui n'est là que pour gérer la standardisation de plusieurs langages (HTML, CSS, SVG et bien d'autres encore), qui l'a mis au monde.

Les modifications apportées à HTML au travers de cette nouvelle version reposent surtout sur la sémantique des pages web. Pour expliquer de façon brève « la sémantique », c'est le sens donné à quelque chose. En HTML, ce sont l'ensemble des balises qui permettent de distinguer (en terme de sens) les contenus d'une page.

Dans un premier temps, le Doctype prends une autre forme. C'est à dire qu'on a simplement à indique que le document est du HTML. Il n'est plus nécessaire de spécifier un DTD (Définition de Type de Document) qui décrit le modèle d'un document (XML ou SGML).

<!DOCTYPE html>

Cette "sémantisation" poussée dans l'HTML 5 fait disparaître les balises qui ne joue que sur le visuel. Ainsi, les balises telles que <center>, <u>, <s>, etc ont disparues. La raison est simple : c'est le rôle du CSS de gérer le rendu visuel d'un élément.

Un grand nombre de balises ont été créées pour décrire plus précisement le contenu affiché. Pour donner quelques exemples, on peut maintenant distinguer l'entête d'une page web avec la balise <header> de son pied de page (<footer>) . On est aussi capable de définir le menu de navigation avec la balise <nav>. Si on se trouve sur un blog, on pourra utiliser la balise <article> pour englober un article, avec une balise <section> destinée au contenu.

Code tiré de Wikipédia :

<header class="ma-class-en-css">
  <!-- menu du haut -->
  <nav class="ma-class-en-css">
    <ul>
        <li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
        <li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
        <li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
    </ul>
  </nav>
</header>

<article class="ma-class-en-css">
  <h1>titre de mon article</h1>
  <p>texte de mon article</p>
  <section class="ma-class-en-css">
    <h2>sous-titre mon article</h2>
    <p>texte de mon sous-titre</p>
    <figure class="ma-class-en-css"> 
      <a href="mon url"><img src="url de mon image" alt="nom de mon image"></a> 
    </figure> 
  </section>
</article>

On notera la création de balises telle que <video> qui permettra de prendre en charge l'affichage d'une vidéo sans passer par une panoplie de lecteurs et de formats (petite pensée pour FLV), mais ça ne sera sans aucun débat.

En plus de ces balises, de nouveaux attributs font leur apparition. Quelques uns d'entres doivent permettent de faciliter l'écriture de scripts Javascript. Par exemple, la gestion du drag&drop avec des évènements générés par le DOM nous rendra la vie beaucoup plus simple.

Finalement il suffira de connaitre le sens des nouvelles balises et d'attendre que nos merveilleux navigateurs en tiennent compte pour utiliser HTML 5.

Sur html5demos.com sont disponibles des exemples.


Site web multilangues

J'ai trouvé aujourd'hui un bout de code javascript qui permet de traduire instantanément un site web dans plusieurs dizaines de langues.

C'est Translateth qui propose ce service à travers un bouton qui s'insère très simplement :

Voila le résultat :


L'heure, un passe temps

Cette nuit, même si j'étais complétement HS, je n'avais vraiment pas envie de dormir, alors après avoir regardé quelques épisodes de « How I Met Your Mother », j'ai réfléchie à ce que je pourrais faire pour m'occuper. Là m'est venu en tête le temps que je passais sur facebook et j'ai mixé ça avec le sujet de conversation qui revient souvent dans mon stage : la typographie. Voila ce que ça donne (cliquez sur l'image ^^) :