Sample _linux_pratique

58

Transcript of Sample _linux_pratique

Page 1: Sample _linux_pratique
Page 2: Sample _linux_pratique

Bonjour à vous ami(e)s lecteur(trice)s !

Au nom de toute l’équipe de Linux Pratique, je me permets de vous remercier de l’inté-rêt que vous portez à notre publication.

Depuis sa création, la devise de Linux Pratique a toujours été la suivante : « Découvrir, comprendre et utiliser Linux ». Au rythme de ses parutions, la publication a évolué pour fournir un rédactionnel adapté aussi bien aux professionnels qu’aux particuliers à la re-cherche de solutions open source répondant aux mieux à leurs attentes.

Dans le but de vous faire une meilleure idée du contenu de Linux Pratique, nous avons réuni au sein de ce « sample » une sélection d’articles parmi les plus représentatifs de ce que vous propose notre publication aujourd’hui.

Ces articles ont été précédemment publiés dans différents numéros de Linux Pratique. Certains d’entre eux sont également disponibles sur notre site rédactionnel www.unixgarden.com. Sur UnixGarden, vous pourrez également suivre l’actualité de nos parutions kiosque, lire et commenter plus de 1700 d’articles.

Si certains articles retiennent particulièrement votre attention, vous pourrez acquérir les anciens numéros dont ils sont issus, soit en version « papier » sur notre boutique www.ed-diamond.com soit en version PDF sur notre plateforme de vente diamond.izibookstore.com.

Bonne lecture ! Arnaud Metzler

Directeur de PublicationÉditions DIAMOND

Les Éditions Diamond Site institutionnel : http://www.editions-diamond.fr/Boutique : http://www.ed-diamond.com/Site rédactionnel : http://www.unixgarden.com/Suivez nos dernières actualités :- sur Twitter : https://twitter.com/#!/unixgarden - sur Google + : https://plus.google.com/103278016435676632910/posts

« Sample » 2012Linux Pratique

Page 3: Sample _linux_pratique

Traduire son Thème WordPressL’éventail de thèmes graphiques disponibles pour personnaliser votre site WordPress est très large. Pour sûr que chacun y trouve son bonheur, parfois même sans changer la moindre caractéristique du thème sélectionné. Oui mais voilà, la plupart des thèmes se trouvant sur le site officiel proposent une interface en anglais. Voici donc la marche à suivre pour traduire votre thème préféré...

1 Gérer les thèmes de votre site

C’est dans la section Apparence de l’interface d’administration que vous pourrez contrôler toute la partie graphique de votre site web. Le menu Thèmes permet notamment de gérer et d’activer les thèmes ou d’en installer de nouveaux (par défaut, seul le thème Twenty Ten est installé dans WordPress 3). Pour installer un nouveau thème, une interface de recherche très pratique est mise à votre disposition : vous pouvez ainsi rechercher un thème en fonction de la couleur, du nombre de colonnes, des fonctionnalités proposées, etc.

L’installation s’effectue ensuite très facilement en renseignant les para-mètres de connexion FTP à votre serveur web. Si vous récupérez un thème directement sur le site officiel, décompressez l’archive du thème, puis uploadez le répertoire correspon-dant dans le répertoire wp-content/themes/ de votre site.

Interface de gestion des thèmes de WordPress

2 Premier cas : votre thème est

prêt pour la traductionC’est le cas de figure le plus simple. Si le concepteur du thème a bien fait les choses, vous devriez trouver dans le répertoire du thème un sous-répertoire languages/ contenant des fichiers de langues, des fichiers d’extension .pot, .po ou .mo.

Un fichier .pot (pour Portable Object Template) contient l’ensemble des éléments textuels du thème gra-phique concerné, autrement dit, tous

Le répertoire d’un thème contient la plupart du temps les fichiers, scripts, feuilles de styles et images néces-saires, mais aussi un fichier README (ou équivalent), la licence d’utilisation et parfois, des consignes particu-lières pour l’installation. N’oubliez pas de jeter un œil à ces fichiers s’ils sont présents...

les éléments traduisibles ; le fichier .po comporte en plus la traduction de ces éléments ; le fichier .mo (pour Machine Object) enfin, est une version compilée du précédent.

Pour commencer, vous devrez vous doter d’un éditeur de fichier gettext ; Poedit (http://www.poedit.net/) est sans doute l’un des plus connus et se trouve packagé pour la plupart des distributions Linux. Ceci fait, copiez le fichier .po, puis renom-mez-le en fr_FR.po (si vous dis-posez simplement d’un fichier .pot, renommez-le de la même façon en fr_FR.po). Ouvrez ensuite le fichier fr_FR.po dans Poedit : vous n’avez plus qu’à renseigner les traductions françaises en vis-à-vis de chaque élément de la liste.

Quand tout est traduit, enregistrez votre document ; un fichier .mo est généré par la même occasion. À savoir que c’est celui-ci le plus impor-tant, car c’est celui qui va être utilisé par WordPress. Veillez à ce que ce fichier respecte les conventions de nommage (basées sur la langue

Traduction d’un thème avec Poedit

Web

Linux Pratique N°66 - Juillet/Août 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 4: Sample _linux_pratique

utilisée), dans notre cas : fr_FR.mo. Uploadez vos fichiers de traduction sur votre site (dans le répertoire du thème), puis rechargez la page : le changement devrait être immédiat.

Vérifiez par ailleurs que l’instruction suivante est bien présente dans votre fichier wp-config.php :

define(‘WPLANG’, ‘fr_FR’);

Elle permet d’indiquer à WordPress la langue à utiliser.

Note Encodage des caractèresÀ savoir que les sites propulsés par WordPress utilisent par défaut l’encodage UTF-8 pour le rendu des pages (ce que vous pouvez vérifier dans la section Réglages > Options de lecture de l’interface d’administra-tion). De ce fait, lors de la traduction du thème dans Poedit (ou tout autre éditeur utilisé), vérifiez bien que le même encodage est utilisé (menu Catalogue > Configuration) ! Dans le cas contraire, vous pourriez voir apparaître d’étranges caractères au sein de vos pages...

3 Second cas : votre thème n’est

pas « conforme »Si en revanche le répertoire du thème ne comporte aucun fichier de langue, la procédure à suivre s’avè-rera plus fastidieuse. Vous devrez passer par l’éditeur de thèmes de WordPress, examiner chaque fichier composant le thème, y repérer le contenu à traduire, puis effectuer les traductions « à la volée ».

Vous pouvez toutefois créer par vous-même le fichier .pot. Pour cela, on crée un nouveau catalogue dans Poedit de la façon suivante : on renseigne les différentes infor-mations, le chemin vers le répertoire du thème, puis dans l’onglet Mots clés, on ajoute les signes « _ _ » (2 underscores) et « _e » (unders-core e). Ceci fait, on valide et une nouvelle fenêtre de dialogue appa-raît : elle dresse la liste des chaînes de caractères qui ont été identifiées

POUr miEUx COmPrENDrE...

Liste des fichiers qui composent généralement un thème WordPress :

• modèle pour l’erreur 404 : 404.php• modèle d’archive : archive.php• Page d’index des archives : archives.php

• modèle des commentaires : comments.php

• modèle de pied de page : footer.php• modèle d’en-tête : header.php• Liens : links.php• modèle principal : index.php• modèle de page : page.php• modèle de fenêtre des commentaires : comments-popup.php

• modèle d’article : single.php• Formulaire de recherche : searchform.php

• modèle de page de résultat de recherche : search.php

• modèle de barre latérale : sidebar.php• Feuille de style : style.css

comme étant à traduire. il ne vous reste plus qu’à procéder comme expliqué ci-dessus.

mais, pas de chance, il se trouve que l’auteur du thème n’a pas pris la peine d’ajouter les marqueurs men-tionnés ci-dessus, autrement dit, il n’a pas transformé chaque portion de texte en fonction gettext et ce sera à vous de le faire.

Alors, comme expliqué à la page [1], il faut parcourir l’ensemble des fichiers du thème à la recherche de textes traduisibles ; ceux-ci peuvent se trouver entre des balises HTmL ou bien au sein du code PHP.

Par exemple, cette ligne :

<h2>Not Found</h2>

devra être transformée de la sorte :

<h2><?php _e(‘Not Found’); ?></h2>

Et ce type de code :

<?php comments_number(’No Responses’, ‘One Response’, ‘% Responses’ );?>

devient :

<?php comments_number(_ _(‘No Responses’), _ _(‘One Response’), _ _( ‘% Responses’) );?>

4 En résumé...La traduction d’un thème WordPress se résume à :

1) envelopper chaque texte dans une fonction gettext,

2) générer la liste des textes à traduire (ce qui peut déjà avoir été effectué par le concepteur du thème),

3) traduire la liste dans la langue souhaitée,

4) indiquer à WordPress d’utiliser la tra-duction adéquate.

Info[1] http://blog-en.icanlocalize.com/installing-

wordpress-for-multiple-language-blogs/how-to-localize-wordpress-themes-and-plugins-with-gettext/

I18n for WordPress Developers : http://codex.wordpress.org/i18n_for_WordPress_Developers.

Site officiel des thèmes pour WordPress : http://wordpress.org/extend/themes/

Translating WordPress : http://codex.wordpress.org/Translating_WordPress

Traduire son thème WordPress

Linux Pratique N°66 - Juillet/Août 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 5: Sample _linux_pratique

SyStème

Sudo et leS SudoerSFleur Brosseau

Comme vous le savez sûrement, la commande sudo permet à un utilisateur d’endosser le rôle d’administrateur ou d’un autre utilisateur pour activer une commande. Pour ce faire, l’administrateur doit spécifier dans le fichier /etc/sudoers du système quels rôles chaque utilisateur peut endosser, et quelle commande il peut exécuter. Nous abordons ici les possibilités offertes par ce fichier...

1 Pourquoi utiliser sudo ?Disponible sur la plupart des systèmes Unix (Linux, BSD, Solaris, etc.), sudo représente un moyen simple de per-mettre à certains utilisateurs d’effectuer des tâches d’ad-ministration, sans pour autant avoir à divulguer le mot de passe root du système...

Ainsi, par défaut, en précédant une commande de la com-mande sudo, on exécute cette commande en tant qu’ad-ministrateur du système. Par exemple :

~$ sudo adduser toto

Mais attention, pour que cela fonctionne, l’utilisateur courant doit faire partie du fichier /etc/sudoers. Sous certaines distributions (comme Ubuntu) c’est le cas par défaut pour le premier utilisateur du système. Il vous est alors demandé de saisir votre mot de passe utilisateur et vous pourrez exécuter des commandes nécessitant les droits d’administration pendant un certain laps de temps (15 minutes par défaut). Sous d’autres distributions (comme Debian), il est nécessaire d’ajouter au préalable l’utilisateur au fichier /etc/sudoers.

L’option -l permet d’obtenir la liste des droits sudo de l’utilisateur courant :

toto@mypc:~$ sudo -l [sudo] password for toto: Matching Defaults entries for toto on this host: env_reset

User toto may run the following commands on this host: (ALL : ALL) ALL

Ici, on voit par exemple que l’utilisateur toto peut exécuter toutes les commandes, en tant que n’importe quel utilisa-teur du système, sur n’importe quel hôte.

Comme vu plus haut, la commande sudo utilisée sans option permet de prendre l’identité du super utilisateur du système et donc d’acquérir ponctuellement davantage de

privilèges, mais via l’option -u suivie du nom d’un utilisateur on peut agir en tant que n’importe quel autre utilisateur :

toto@mypc:~$ sudo -u bob /sbin/service

Un autre avantage de la commande sudo réside dans sa traça-bilité : les messages de sudo sont transmis à syslog, qui pourra par exemple les rediriger dans un fichier (comme /var/log/auth.log sous Debian, selon ce qui est défini dans le fichier de configuration de syslog).

2 Les règles d’utilisation de sudo : le fichier /etc/sudoers

Pour l’éditer, on utilise la commande visudo, qui elle-même demande les droits d’administrateur... Si c’est possible (autrement dit, si vous faites déjà partie des sudoers), vous pouvez saisir :

~$ sudo visudo

Dans le cas contraire, on fait appel à la commande su (substi-tute user) sans option ni argument, qui contrairement à la com-mande sudo, octroie les droits d’administration à l’utilisateur sans limitation de durée, ou tout du moins, pendant toute la durée de la session.

toto@mypc:~$ su Mot de passe : root@mypc:/home/toto# visudo

Il est conseillé d’éditer le fichier sudoers avec visudo car cette dernière vérifie la syntaxe du fichier lors de sa sauvegarde. On s’assure ainsi de la cohérence du fichier. En outre, elle utilise un sys-tème de verrou pour éviter les accès concurrents à ce même fichier.

Le fichier /etc/sudoers contient des autorisations qui adop-tent la syntaxe suivante :

Utilisateur [,...] hôte [,...] = [(compte)] commande [,...]

L’utilisateur peut être un alias ; c’est à lui que s’applique la règle. L’hôte désigne la machine (ou un alias) où s’applique la règle. Le compte désigne l’identité sous laquelle la commande va être exécu-tée ; si aucun compte n’est précisé les commandes s’exécutent sous le compte root.

utilisée), dans notre cas : fr_FR.mo. Uploadez vos fichiers de traduction sur votre site (dans le répertoire du thème), puis rechargez la page : le changement devrait être immédiat.

Vérifiez par ailleurs que l’instruction suivante est bien présente dans votre fichier wp-config.php :

define(‘WPLANG’, ‘fr_FR’);

Elle permet d’indiquer à WordPress la langue à utiliser.

Note Encodage des caractèresÀ savoir que les sites propulsés par WordPress utilisent par défaut l’encodage UTF-8 pour le rendu des pages (ce que vous pouvez vérifier dans la section Réglages > Options de lecture de l’interface d’administra-tion). De ce fait, lors de la traduction du thème dans Poedit (ou tout autre éditeur utilisé), vérifiez bien que le même encodage est utilisé (menu Catalogue > Configuration) ! Dans le cas contraire, vous pourriez voir apparaître d’étranges caractères au sein de vos pages...

3 Second cas : votre thème n’est

pas « conforme »Si en revanche le répertoire du thème ne comporte aucun fichier de langue, la procédure à suivre s’avè-rera plus fastidieuse. Vous devrez passer par l’éditeur de thèmes de WordPress, examiner chaque fichier composant le thème, y repérer le contenu à traduire, puis effectuer les traductions « à la volée ».

Vous pouvez toutefois créer par vous-même le fichier .pot. Pour cela, on crée un nouveau catalogue dans Poedit de la façon suivante : on renseigne les différentes infor-mations, le chemin vers le répertoire du thème, puis dans l’onglet Mots clés, on ajoute les signes « _ _ » (2 underscores) et « _e » (unders-core e). Ceci fait, on valide et une nouvelle fenêtre de dialogue appa-raît : elle dresse la liste des chaînes de caractères qui ont été identifiées

POUr miEUx COmPrENDrE...

Liste des fichiers qui composent généralement un thème WordPress :

• modèle pour l’erreur 404 : 404.php• modèle d’archive : archive.php• Page d’index des archives : archives.php

• modèle des commentaires : comments.php

• modèle de pied de page : footer.php• modèle d’en-tête : header.php• Liens : links.php• modèle principal : index.php• modèle de page : page.php• modèle de fenêtre des commentaires : comments-popup.php

• modèle d’article : single.php• Formulaire de recherche : searchform.php

• modèle de page de résultat de recherche : search.php

• modèle de barre latérale : sidebar.php• Feuille de style : style.css

comme étant à traduire. il ne vous reste plus qu’à procéder comme expliqué ci-dessus.

mais, pas de chance, il se trouve que l’auteur du thème n’a pas pris la peine d’ajouter les marqueurs men-tionnés ci-dessus, autrement dit, il n’a pas transformé chaque portion de texte en fonction gettext et ce sera à vous de le faire.

Alors, comme expliqué à la page [1], il faut parcourir l’ensemble des fichiers du thème à la recherche de textes traduisibles ; ceux-ci peuvent se trouver entre des balises HTmL ou bien au sein du code PHP.

Par exemple, cette ligne :

<h2>Not Found</h2>

devra être transformée de la sorte :

<h2><?php _e(‘Not Found’); ?></h2>

Et ce type de code :

<?php comments_number(’No Responses’, ‘One Response’, ‘% Responses’ );?>

devient :

<?php comments_number(_ _(‘No Responses’), _ _(‘One Response’), _ _( ‘% Responses’) );?>

4 En résumé...La traduction d’un thème WordPress se résume à :

1) envelopper chaque texte dans une fonction gettext,

2) générer la liste des textes à traduire (ce qui peut déjà avoir été effectué par le concepteur du thème),

3) traduire la liste dans la langue souhaitée,

4) indiquer à WordPress d’utiliser la tra-duction adéquate.

Info[1] http://blog-en.icanlocalize.com/installing-

wordpress-for-multiple-language-blogs/how-to-localize-wordpress-themes-and-plugins-with-gettext/

I18n for WordPress Developers : http://codex.wordpress.org/i18n_for_WordPress_Developers.

Site officiel des thèmes pour WordPress : http://wordpress.org/extend/themes/

Translating WordPress : http://codex.wordpress.org/Translating_WordPress

Traduire son thème WordPress

Linux Pratique N°66 - Juillet/Août 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 6: Sample _linux_pratique

La valeur ALL, pour chaque champ, signifie « tous ». On peut spécifier un groupe d’utilisateurs en préfixant son nom du symbole %.

Dans votre fichier, vous trouverez certainement la section suivante :

# User privilege specificationroot ALL=(ALL) ALL

Cela signifie que l’utilisateur root, sur quelle que machine que ce soit (premier ALL), peut utiliser sudo pour lancer n’importe quel programme (troisième ALL), en tant que n’importe qui (deuxième ALL).

Le fichier /etc/sudoers peut également contenir des définitions d’alias (ou groupes) ; il en existe 4 types : User_Alias (alias d’utilisateurs), Host_Alias (alias d’hôtes), Run_Alias (alias de compte effectif) et Cmnd_Alias (alias de commandes). Ainsi, il est possible de créer des règles pour un groupe d’utilisateurs, de machines ou de commandes. Par exemple :

User_Alias ADMINS= kat, fab

3 Un fichier sudoers adaptéPour que l’utilisateur « toto » puisse utiliser la commande sudo, on ajoute la ligne :

toto ALL=(ALL) ALL

Pour exécuter une commande en tant qu’un autre utili-sateur que root, on n’écrira son nom entre parenthèses, comme ceci :

toto ALL=(bob) ALL /sbin/service

L’utilisateur toto pourra alors lancer la commande service en tant que bob (et il lui faudra saisir son mot de passe).

Si l’ensemble des admins doivent pouvoir utiliser la com-mande fsck, on aura :

ADMINS ALL=/sbin/fsck

Il est possible de spécifier plusieurs commandes, on les sépare dans ce cas par une virgule.

Sachez qu’il est également possible de forcer ou non l’uti-lisation d’un mot de passe et de forcer ou non l’exécution d’une commande sous un utilisateur autre que root. Ainsi, pour faire en sorte que la saisie de mot de passe ne soit pas requise, on utilisera l’option NOPASSWD comme suit :

ADMINS ALL=NOPASSWD: /sbin/fsck

Cette directive signifie que les utilisateurs inclus dans le groupe ADMINS n’auront plus besoin de saisir de mot de passe pour exécuter la commande fsck. Inversement, on pourra imposer la saisie d’un mot de passe via l’option PASSWD :

ADMINS ALL=NOPASSWD:/sbin/fsck, PASSWD:/sbin/tune2fs

À noter également l’utilisation du point d’exclamation, qui permet d’exclure un utilisateur, une machine ou une commande d’un groupe (d’un alias) ou d’une liste. Par exemple, l’instruction :

ADMINS ALL=NOPASSWD:ALL, !/sbin/fsck, PASSWD:/sbin/tune2fs

signifie que les admins peuvent exécuter toutes les com-mandes sans saisir de mot de passe, à l’exception de la commande tune2fs qui elle requiert un mot de passe et de la commande fsck qui est interdite.

Nous avons également évoqué dans le premier paragraphe de l’article la limitation des droits sudo (les droits sont acquis pour 15 minutes maximum, après quoi il sera néces-saire de ressaisir le mot de passe). Sachez qu’il est possible de modifier ce laps de temps, en ajoutant la ligne suivante dans le fichier /etc/sudoers :

timestamp_timeout=-1

Une valeur négative permet d’éviter de ressaisir le mot de passe pendant toute la session. Au contraire, avec la valeur 0 il vous sera demandé de saisir votre mot de passe à chaque commande sudo.

Si vous souhaitez au contraire que la session sudo se ter-mine avant la fin des 15 minutes, vous pouvez exécuter :

~$ sudo -k

4 Le cas des applications graphiques

Dans le cas où vous souhaitez lancer en ligne de commandes une application graphique nécessitant des privilèges d’admi-nistrateur (par exemple Synaptic, le visionneur de journaux système, le gestionnaire de dépôts de votre distribution, etc.), utilisez gksudo (sous GNOME) et kdesudo (sous KDE) de préférence à sudo.

À vrai dire, dans la plupart des cas, cela n’est pas forcément jus-tifié. Vous pouvez alors lancer de nombreuses applications avec sudo sans pour autant engendrer la moindre erreur sur votre système. Dans certains autres cas en revanche, vous pourriez être confronté à de sérieux problèmes, comme par exemple ne plus pouvoir vous logger à votre système pour cause de chan-gement de permissions sur le fichier ~/.ICEauthority.

En effet, il peut arriver que sudo lance une application avec les privilèges de root tout en utilisant le fichier de configuration de l’utilisateur courant ! Dès lors, si vous modifiez certains para-mètres de ladite application, certains fichiers seront désormais sous la propriété de root. Opter systématiquement pour gksudo (ou kdesudo) dans le cas d’applications graphiques vous permettra ainsi d’éviter à coup sûr de corrompre votre session graphique.

InfoSudoers Manual : http://www.sudo.ws/sudo/sudoers.man.html

Sudo et les sudoers

Linux Pratique N°66 - Juillet/Août 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 7: Sample _linux_pratique

Graphisme

RawTheRapee, l’auTRe logiciel de développemenT numéRique !Franck Barnier

RawTherapee fait partie des logiciels qui, dans le principe de fonctionnement, s’apparentent plus à une chambre noire numérique qu’à un logiciel de retouche photographique classique. Il vient donc concurrencer directement l’excellent Darktable présenté dans le numéro 65 de Linux Pratique.

Même si le logiciel reconnaît les images au format JPEG ou PNG, certains paramètres ne peuvent être ajustés que si les photographies sont sauvegardées par le boîtier numé-rique au format RAW.

1 Explorateur de fichiers

Cet onglet vous permet de naviguer parmi vos dossiers afin d’accéder à vos photographies. Vous pouvez y consul-ter les informations propres à la prise de vue, comme par exemple la vitesse d’obturation ou la longueur de la focale.

ensuite à d’autres. Le profil est la suc-cession des traitements que vous faites subir à une image. C’est également par ce menu que vous pourrez annuler les modifications appliquées en sélec-tionnant Remettre le profil à zéro. Sur chaque diapositive, des pictogrammes vous permettent de la supprimer ou de définir son rang (de une à cinq étoiles) afin de filtrer l’affichage. Le premier pictogramme, représentant des engre-nages, sert à placer la diapositive dans la file d’attente des traitements.

Via l’onglet Filtrer, RawTherapee vous permet d’utiliser les métadonnées des photographies numériques afin de filtrer leur affichage dans l’explorateur. Pour cela, il vous suffit de saisir les valeurs mini et maxi d’un des paramètres comme par exemple le nombre ISO. Le filtrage peut également être fait en pre-nant en compte plusieurs paramètres.

Il est possible de travailler sur les pho-tographies directement depuis l’explo-rateur de fichiers. C’est dans l’onglet Développer que vous trouverez toutes les fonctions de retouche. Lorsqu’un paramètre se trouve changé, toutes les diapositives sélectionnées dans l’explo-rateur sont modifiées en conséquence. Même si le principe est intéressant, il est assez difficile d’apprécier la qualité du résultat sur des réductions. Il vaut mieux travailler sur une photographie en plein écran et appliquer éventuellement par la suite le profil à d’autres diapositives.

2 Développez vos photographies

Un double-clic sur une diapositive permet de l’ouvrir dans un onglet. Chaque modification est systémati-quement indiquée dans l’historique (nom du paramètre et valeur appli-quée). En cliquant sur une des étapes de l’historique, vous verrez votre photographie affichée en fonction des paramètres modifiés en amont. Pour supprimer l’application de fonctions sur l’image, cliquez sur la dernière étape de l’historique que vous sou-haitez conserver, puis appliquez de nouveaux réglages. Tous ceux se trouvant en aval sont alors automati-quement supprimés. Tous les outils de traitement sont accessibles à droite de la photographie et sont classés par thème dans les onglets suivants :

Exposition : ici, les différentes rubriques permettent d’ajuster l’exposition de la photographie. En cas de manque d’exposition, il faut L’explorateur de fichiers de RawTherapee

Un clic droit sur une réduction et vous accédez à un menu vous proposant des fonctions d’édition de fichier. Il permet également de copier un profil appliqué à une image pour le coller

La valeur ALL, pour chaque champ, signifie « tous ». On peut spécifier un groupe d’utilisateurs en préfixant son nom du symbole %.

Dans votre fichier, vous trouverez certainement la section suivante :

# User privilege specificationroot ALL=(ALL) ALL

Cela signifie que l’utilisateur root, sur quelle que machine que ce soit (premier ALL), peut utiliser sudo pour lancer n’importe quel programme (troisième ALL), en tant que n’importe qui (deuxième ALL).

Le fichier /etc/sudoers peut également contenir des définitions d’alias (ou groupes) ; il en existe 4 types : User_Alias (alias d’utilisateurs), Host_Alias (alias d’hôtes), Run_Alias (alias de compte effectif) et Cmnd_Alias (alias de commandes). Ainsi, il est possible de créer des règles pour un groupe d’utilisateurs, de machines ou de commandes. Par exemple :

User_Alias ADMINS= kat, fab

3 Un fichier sudoers adaptéPour que l’utilisateur « toto » puisse utiliser la commande sudo, on ajoute la ligne :

toto ALL=(ALL) ALL

Pour exécuter une commande en tant qu’un autre utili-sateur que root, on n’écrira son nom entre parenthèses, comme ceci :

toto ALL=(bob) ALL /sbin/service

L’utilisateur toto pourra alors lancer la commande service en tant que bob (et il lui faudra saisir son mot de passe).

Si l’ensemble des admins doivent pouvoir utiliser la com-mande fsck, on aura :

ADMINS ALL=/sbin/fsck

Il est possible de spécifier plusieurs commandes, on les sépare dans ce cas par une virgule.

Sachez qu’il est également possible de forcer ou non l’uti-lisation d’un mot de passe et de forcer ou non l’exécution d’une commande sous un utilisateur autre que root. Ainsi, pour faire en sorte que la saisie de mot de passe ne soit pas requise, on utilisera l’option NOPASSWD comme suit :

ADMINS ALL=NOPASSWD: /sbin/fsck

Cette directive signifie que les utilisateurs inclus dans le groupe ADMINS n’auront plus besoin de saisir de mot de passe pour exécuter la commande fsck. Inversement, on pourra imposer la saisie d’un mot de passe via l’option PASSWD :

ADMINS ALL=NOPASSWD:/sbin/fsck, PASSWD:/sbin/tune2fs

À noter également l’utilisation du point d’exclamation, qui permet d’exclure un utilisateur, une machine ou une commande d’un groupe (d’un alias) ou d’une liste. Par exemple, l’instruction :

ADMINS ALL=NOPASSWD:ALL, !/sbin/fsck, PASSWD:/sbin/tune2fs

signifie que les admins peuvent exécuter toutes les com-mandes sans saisir de mot de passe, à l’exception de la commande tune2fs qui elle requiert un mot de passe et de la commande fsck qui est interdite.

Nous avons également évoqué dans le premier paragraphe de l’article la limitation des droits sudo (les droits sont acquis pour 15 minutes maximum, après quoi il sera néces-saire de ressaisir le mot de passe). Sachez qu’il est possible de modifier ce laps de temps, en ajoutant la ligne suivante dans le fichier /etc/sudoers :

timestamp_timeout=-1

Une valeur négative permet d’éviter de ressaisir le mot de passe pendant toute la session. Au contraire, avec la valeur 0 il vous sera demandé de saisir votre mot de passe à chaque commande sudo.

Si vous souhaitez au contraire que la session sudo se ter-mine avant la fin des 15 minutes, vous pouvez exécuter :

~$ sudo -k

4 Le cas des applications graphiques

Dans le cas où vous souhaitez lancer en ligne de commandes une application graphique nécessitant des privilèges d’admi-nistrateur (par exemple Synaptic, le visionneur de journaux système, le gestionnaire de dépôts de votre distribution, etc.), utilisez gksudo (sous GNOME) et kdesudo (sous KDE) de préférence à sudo.

À vrai dire, dans la plupart des cas, cela n’est pas forcément jus-tifié. Vous pouvez alors lancer de nombreuses applications avec sudo sans pour autant engendrer la moindre erreur sur votre système. Dans certains autres cas en revanche, vous pourriez être confronté à de sérieux problèmes, comme par exemple ne plus pouvoir vous logger à votre système pour cause de chan-gement de permissions sur le fichier ~/.ICEauthority.

En effet, il peut arriver que sudo lance une application avec les privilèges de root tout en utilisant le fichier de configuration de l’utilisateur courant ! Dès lors, si vous modifiez certains para-mètres de ladite application, certains fichiers seront désormais sous la propriété de root. Opter systématiquement pour gksudo (ou kdesudo) dans le cas d’applications graphiques vous permettra ainsi d’éviter à coup sûr de corrompre votre session graphique.

InfoSudoers Manual : http://www.sudo.ws/sudo/sudoers.man.html

Sudo et les sudoers

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 8: Sample _linux_pratique

Graphisme

commencer par augmenter la valeur de la compensation, puis régler la compression des hautes lumières afin de limiter la perte de détails dans les parties sur-exposées de la photographie. De même, la compression des ombres est disponible afin d’éclaircir les zones sombres pour en faire ressortir les détails en cas de réduction de l’exposition ou d’augmentation de la variable Noir. Luminosité, contraste, saturation et courbe tonale sont bien évidemment au rendez-vous.

La rubrique nommée Récupération des hautes lumières est accessible uniquement lors du traitement d’une photographie sauvegardée au format RAW. En l’activant, elle permet de faire ressortir les détails apparemment brûlés d’une photographie surexpo-sée. Il faudra ensuite jouer avec les autres paramètres d’exposition ainsi qu’avec les outils de l’onglet RAW pour tenter d’équilibrer l’image. C’est le cas typique d’une photographie prise avec le flash d’un sujet au premier plan qui se retrouve surexposé par rapport à l’arrière-plan. Il faut dans ce cas utili-ser cette fonction et choisir la méthode à mettre en œuvre (par exemple Propagation de la couleur), puis ajus-ter la compensation d’exposition, la luminosité et le contraste et enfin jouer avec les variables Hautes lumières, Ombres et Contraste local pour obtenir une image ré-équilibrée.

La rubrique Ombres/Hautes lumières permet d’équilibrer l’éclairage de la photographie. En effet, avec la variable Hautes lumières, vous pou-vez diminuer le niveau de luminosité des parties de la photographie étant sur-exposées sans influer sur les parties sombres, tandis que vous éclaircissez les zones sombres de l’image avec la variable Ombres. Le degré d’influence de ces deux fonc-tions se paramètre avec les variables d’amplitudes tonales respectives.

Le contraste local est un excel-lent outil qui sert à faire varier le contraste par petites zones en fonction de la valeur de la variable Rayon. Le résultat de ce traitement est une image donnant l’impression de plus de relief.

En haut, la photographie originale et en bas une fois modifiée avec les options des rubriques Exposition et Ombres/Hautes lumières.

Enfin, la rubrique Lab vous permet elle aussi de paramétrer la luminosité, le contraste et la saturation avec le modèle de représentation des couleurs créé par la Commission Internationale de l’Éclairage (CEI Lab). Vous pouvez également y ajuster les courbes de la clarté (courbe L) et les courbes des composantes a (plage de couleurs du rouge au vert) et b (plage du jaune au bleu). Le travail sur les photographies avec cette fonction donne d’assez bons résultats lorsque l’on prend l’habitude de l’utiliser.

Détail : c’est la boite à outils dédiée au déparasitage des photographies. Vous y trouverez donc les outils d’amélioration de la netteté, de réduction du bruit d’impulsion, de

Un soupçon de réduction du bruit d’impulsion, un zeste de netteté, une dose de réduction d’aberration chromatique et la photographie de nuit s’en trouve moins parasitée.

réduction du bruit préservant les bords et de réduction de l’aberration chromatique. Lors de l’utilisation de ces fonctions, il est impératif de zoomer dans l’image pour pouvoir observer leur efficacité. Elles sont par exemple particulièrement adaptées pour l’amélioration des photographies prises de nuit en pose longue. Ce type de prise de vue génère du bruit qui pourra, à défaut d’être totalement retiré, au moins atténué.

Couleur : vous trouverez ici les outils de réglage de la balance des blancs, de mixage des canaux de couleurs RVB, de modification des canaux TSV (Teinte, Saturation, Valeur) ou encore de gestion du profil ICM des couleurs. Les profils ICM présentent un intérêt pour ceux qui souhaitent par exemple imprimer leurs œuvres et ainsi obtenir des couleurs correspondant à celles de l’image originale.

Transformation : cet onglet regroupe une panoplie d’outils tels que les outils de recadrage, de redimensionnement, de rotation, de distorsion, d’application d’une perspective ou de correction de l’aberra-tion chromatique ou encore de réduction de l’effet de vignettage. Chaque outil est très complet. Ainsi par exemple, pour l’outil Recadrage, il est possible de sélec-tionner une zone librement ou suivant un ratio défini (4:3, 16:9, 5:4, etc.). Dans ce cas, vous pouvez choisir une orientation paysage ou portrait du recadrage. De plus, l’utilisation de guide (grille dans le cadre de la zone sélectionnée) vous aide à recadrer de manière parfaite vos photographies par exemple suivant la fameuse règle des trois tiers chère aux photographes et permettant d’obtenir des images bien proportionnées.

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 9: Sample _linux_pratique

Un outil nommé ligne d’horizon permet de redresser les prises de vue inclinées. Il vous faut pour cela tracer un segment sur l’image qui suit son horizon réel. Une fois le segment placé, relâchez le bouton de la souris pour que le logiciel ramène l’horizon de l’image à l’horizontal tout en zoomant afin d’éliminer les parties exté-rieures à la photographie.

L’outil de recadrage avec la règle des trois tiers activée

l’explorateur de fichiers, sélectionnez Mettre dans la file d’attente dans le menu déroulant accessible d’un clic droit sur la photographie à traiter. Par défaut, RawTherapee sauvegarde les photographies développées avec leur nom d’origine dans le répertoire converted/ qu’il crée dans le dossier contenant les images sources. Les formats de sauvegarde supportés sont le JPEG, le TIFF et le PNG. Si vous avez coché l’option Enregistrer les paramètres de développement avec l’image, un fichier texte portant le nom de l’image développée suivi de l’exten-sion .pp3 est créé dans le répertoire. Ce fichier est le profil de traitement de l’image. Vous pourrez par la suite l’ap-pliquer à d’autres photographies via la rubrique Profils de post-traitement pla-cée sous l’histogramme dans la fenêtre de développement.

Raw : seules les photographies sauvées au format RAW pourront être modifiées avec les fonctions regroupées dans cet onglet. La fonction de dématriçage vous permet par exemple de limiter les arte-facts grâce à l’utilisation de différents algorithmes (dcb, hphd, amaze, etc.). L’exposition et l’aberration chromatique peuvent également y être corrigées.

Métadonnées : en plus d’afficher toutes les métadonnées de vos photographies, vous pouvez ici en ajouter pour par exemple indiquer le nom de l’artiste ou encore pour intégrer une description de l’image. De plus, les informations IPTC (International Press Telecommunications Council) que l’on trouve par exemple dans les fichiers JPEG peuvent être complé-tées. Vous pourrez par exemple ajouter un titre, une légende, des mots clés, le nom de l’auteur, ou encore les droits de copie.

3 Traitez en gros !Option très intéressante lorsque vous avez plusieurs photographies à dévelop-per. Une fois que vous en avez terminé avec le réglage des paramètres pour obtenir l’image parfaite, vous pouvez fermer la fenêtre d’édition. Ensuite, dans

La file d’attente permet de lancer des développements tout en continuant à travailler sur d’autres photographies.

Chaque photographie ajoutée à la file d’attente est affichée sous forme de réduction. Les images peuvent être déplacées dans la file d’attente. À chaque fois que le développement de l’une d’elles est terminé, sa réduction disparaît de la file d’attente et un picto-gramme représentant une disquette est ajoutée sur la réduction de l’image dans l’explorateur de fichiers. Le traitement peut être lancé automatiquement lors de l’insertion des photographies dans la file d’attente.

ConclusionRawTherapee est un très bon logiciel de développement. Personne ne pourra nier sa ressemblance avec Darktable. Les habitués de ce dernier ne devraient effec-tivement pas être perdus trop longtemps. Son interface entièrement en français est facile d’utilisation. Moins complet que Darktable, il intègre malgré tout des fonctionnalités comme le traitement par lots depuis l’explorateur de fichiers ou le module File d’attente qui font son origina-lité. De plus, les traitements sont relative-ment rapides.

InfoSite du projet : http://rawtherapee.com/

Version présentée : 3.0B1.19 - Licence : GNU GPL 3 - Disponible pour GNU/Linux, Mac OS X et Windows.

RawTherapee, l'autre logiciel de développement numérique !Graphisme

commencer par augmenter la valeur de la compensation, puis régler la compression des hautes lumières afin de limiter la perte de détails dans les parties sur-exposées de la photographie. De même, la compression des ombres est disponible afin d’éclaircir les zones sombres pour en faire ressortir les détails en cas de réduction de l’exposition ou d’augmentation de la variable Noir. Luminosité, contraste, saturation et courbe tonale sont bien évidemment au rendez-vous.

La rubrique nommée Récupération des hautes lumières est accessible uniquement lors du traitement d’une photographie sauvegardée au format RAW. En l’activant, elle permet de faire ressortir les détails apparemment brûlés d’une photographie surexpo-sée. Il faudra ensuite jouer avec les autres paramètres d’exposition ainsi qu’avec les outils de l’onglet RAW pour tenter d’équilibrer l’image. C’est le cas typique d’une photographie prise avec le flash d’un sujet au premier plan qui se retrouve surexposé par rapport à l’arrière-plan. Il faut dans ce cas utili-ser cette fonction et choisir la méthode à mettre en œuvre (par exemple Propagation de la couleur), puis ajus-ter la compensation d’exposition, la luminosité et le contraste et enfin jouer avec les variables Hautes lumières, Ombres et Contraste local pour obtenir une image ré-équilibrée.

La rubrique Ombres/Hautes lumières permet d’équilibrer l’éclairage de la photographie. En effet, avec la variable Hautes lumières, vous pou-vez diminuer le niveau de luminosité des parties de la photographie étant sur-exposées sans influer sur les parties sombres, tandis que vous éclaircissez les zones sombres de l’image avec la variable Ombres. Le degré d’influence de ces deux fonc-tions se paramètre avec les variables d’amplitudes tonales respectives.

Le contraste local est un excel-lent outil qui sert à faire varier le contraste par petites zones en fonction de la valeur de la variable Rayon. Le résultat de ce traitement est une image donnant l’impression de plus de relief.

En haut, la photographie originale et en bas une fois modifiée avec les options des rubriques Exposition et Ombres/Hautes lumières.

Enfin, la rubrique Lab vous permet elle aussi de paramétrer la luminosité, le contraste et la saturation avec le modèle de représentation des couleurs créé par la Commission Internationale de l’Éclairage (CEI Lab). Vous pouvez également y ajuster les courbes de la clarté (courbe L) et les courbes des composantes a (plage de couleurs du rouge au vert) et b (plage du jaune au bleu). Le travail sur les photographies avec cette fonction donne d’assez bons résultats lorsque l’on prend l’habitude de l’utiliser.

Détail : c’est la boite à outils dédiée au déparasitage des photographies. Vous y trouverez donc les outils d’amélioration de la netteté, de réduction du bruit d’impulsion, de

Un soupçon de réduction du bruit d’impulsion, un zeste de netteté, une dose de réduction d’aberration chromatique et la photographie de nuit s’en trouve moins parasitée.

réduction du bruit préservant les bords et de réduction de l’aberration chromatique. Lors de l’utilisation de ces fonctions, il est impératif de zoomer dans l’image pour pouvoir observer leur efficacité. Elles sont par exemple particulièrement adaptées pour l’amélioration des photographies prises de nuit en pose longue. Ce type de prise de vue génère du bruit qui pourra, à défaut d’être totalement retiré, au moins atténué.

Couleur : vous trouverez ici les outils de réglage de la balance des blancs, de mixage des canaux de couleurs RVB, de modification des canaux TSV (Teinte, Saturation, Valeur) ou encore de gestion du profil ICM des couleurs. Les profils ICM présentent un intérêt pour ceux qui souhaitent par exemple imprimer leurs œuvres et ainsi obtenir des couleurs correspondant à celles de l’image originale.

Transformation : cet onglet regroupe une panoplie d’outils tels que les outils de recadrage, de redimensionnement, de rotation, de distorsion, d’application d’une perspective ou de correction de l’aberra-tion chromatique ou encore de réduction de l’effet de vignettage. Chaque outil est très complet. Ainsi par exemple, pour l’outil Recadrage, il est possible de sélec-tionner une zone librement ou suivant un ratio défini (4:3, 16:9, 5:4, etc.). Dans ce cas, vous pouvez choisir une orientation paysage ou portrait du recadrage. De plus, l’utilisation de guide (grille dans le cadre de la zone sélectionnée) vous aide à recadrer de manière parfaite vos photographies par exemple suivant la fameuse règle des trois tiers chère aux photographes et permettant d’obtenir des images bien proportionnées.

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 10: Sample _linux_pratique

Firebug, LA soLution de débogAge pour Les AppLicAtions webTristan Colombo

Vous insérez de plus en plus de Javascript dans vos applications web pour introduire des animations, une meilleure ergonomie, etc. Vos pages sont bien sûr plus agréables à lire et les utilisateurs sont ravis ! Par contre, de votre côté, le code est beaucoup plus difficile à maintenir, sans parler des bugs... L’utilisation de Firebug vous permettra de gagner beaucoup de temps grâce aux nombreux outils mis à votre disposition.

Firebug est une extension pour le navigateur Web Firefox dont la version 4 est sortie récemment. Elle a été déve-loppée par l’un des créateurs de Firefox, Joe Hewitt, dans le but de déboguer une page HTML entièrement (HTML, CSS et Javascript) depuis un seul outil.

Dans cet article nous allons découvrir quelles sont les possi-bilités offertes par cette extension. Nous verrons également que Firebug dispose d’un système d’extensions en interne (on peut ajouter des extensions à l’extension Firebug) et que certaines de ces extensions peuvent s’avérer très pratiques...

Fig. 2 : Interface de Firebug dans la même fenêtre que la page analysée

1 Présentation généraleFirebug étant une extension pour Firefox, elle s’installera comme à l’habitude : rendez-vous sur la page du projet (ici https://addons.mozilla.org/fr/firefox/addon/1843/), cliquez sur le bouton « Ajouter à Firefox », puis redémarrez Firefox. Vous obtiendrez alors une nouvelle icône dans la barre de statut de votre navigateur (Fig. 1). En cliquant sur cette icône vous activerez/désactiverez l’extension.

Fig. 1 : Icône d’activation de Firebug

Web

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 11: Sample _linux_pratique

L’icône en forme de cadre avec une flèche permet de passer en mode explora-tion de la page où chaque objet se trouvera entouré d’un cadre bleu. Nous ver-rons là encore cet outil plus en détail dans la suite.

Fig. 3 : Activation d’un onglet

Je vous propose de voir maintenant en détail le fonctionnement des différents onglets.

2 Au cœur des onglets2.1. L’onglet ConsolePour déboguer, il est essentiel d’avoir une liste des différentes erreurs rencon-trées. Cet affichage à lieu dans l’onglet Console. La sélection des différents types de messages d’erreur et d’avertissement se fera dans le menu contextuel de l’onglet. Quatre boutons sont disponibles :

• Arrêter à chaque erreur (icône contenant le symbole « pause » barré) : comme son nom l’indique, lorsque cette option est activée, à la moindre apparition d’une erreur, l’exécution du script sera interrompue ;

• Effacer : permet d’effacer les messages de la console ;• Persistant : empêche l’effacement des messages de la console lors du

rechargement d’une page ;• Profiler : permet d’activer l’analyse détaillée de code Javascript (profiling)

jusqu’au prochain clic sur ce bouton.

La ligne de commandes, au bas de l’onglet, permet d’exécuter du code Javascript (le bouton rouge au bout de la ligne permet de passer en mode d’édi-tion multi-lignes).

Firebug met également à disposition des fonctions spéciales facilitant le débogage. Ces fonctions pourront être utilisées en ligne de commandes (au bas de l’onglet Console) ou directement dans vos scripts Javascript. Si vous utilisez ces fonctions en interne dans un script, faites très attention et pensez à tester la présence de Firebug ! En effet, si vous laissez ces fonctions et qu’un utilisateur n’ayant pas ins-tallé Firebug tente d’exécuter votre code... il recevra une erreur alors que tout fonc-tionnait chez vous ! Pensez donc à tester la présence de Firebug par :

if (window.console && window.console.firebug){ // Firebug détecté, vous pouvez utiliser les fonctions // ...}

Lors de l’activation, Firebug apparaîtra en bas de la page que vous étiez en train de consulter (Fig. 2). Si vous le préférez, vous pouvez ouvrir Firebug dans une nouvelle fenêtre en cliquant sur l’icône avec le bouton droit de la souris et en sélectionnant « Ouvrir Firebug dans une nouvelle fenêtre ». Vous pouvez également réaliser cette opération après avoir ouvert Firebug dans la même fenêtre que la page analysée, en cliquant cette fois-ci sur la deuxième icône rouge à droite représentant deux carrés l’un sur l’autre (elle vous permettra d’alterner les deux modes d’affichage).

Le menu de Firebug se compose de deux icônes (un scarabée et un cadre avec une flèche), de six onglets (Console, HTML (affichage par défaut), CSS, Script, DOM, Réseau), et d’un champ de recherche que vous pouvez rendre sensible à la casse. Certains onglets sont désactivés par défaut pour des raisons de perfor-mance. Ainsi, les onglets Console, Script et Réseau devront être activés pour pouvoir être utilisés : cliquez sur l’onglet à activer puis sur la flèche de menu contextuel apparaissant à droite et sélectionnez l’entrée « Activé » (Fig. 3). Cette manipula-tion sera nécessaire pour chaque nouveau site analysé. Par exemple, si vous activez l’onglet Réseau sur http://www.monSite.org, il sera valide sur toutes les pages de ce site. Par contre, sur http://www.unAutreSite.org, il faudra activer à nouveau l’onglet. Cette restriction d’activation/désacti-vation des onglets est due au ralen-tissement de certaines pages induit par Firebug (si vous lancez Firebug sur une page GMail, vous aurez par exemple un message d’avertissement de Google vous signalant un mauvais fonctionnement possible à cause de Firebug).

L’icône représentant un scarabée ouvre un menu contextuel permet-tant essentiellement de configurer l’affichage et les raccourcis clavier, d’afficher de la documentation sur Firebug et d’activer le mode ligne de commandes que nous verrons dans la partie traitant de l’onglet Console.

Firebug, LA solution de débogage pour les applications web

Firebug, LA soLution de débogAge pour Les AppLicAtions webTristan Colombo

Vous insérez de plus en plus de Javascript dans vos applications web pour introduire des animations, une meilleure ergonomie, etc. Vos pages sont bien sûr plus agréables à lire et les utilisateurs sont ravis ! Par contre, de votre côté, le code est beaucoup plus difficile à maintenir, sans parler des bugs... L’utilisation de Firebug vous permettra de gagner beaucoup de temps grâce aux nombreux outils mis à votre disposition.

Firebug est une extension pour le navigateur Web Firefox dont la version 4 est sortie récemment. Elle a été déve-loppée par l’un des créateurs de Firefox, Joe Hewitt, dans le but de déboguer une page HTML entièrement (HTML, CSS et Javascript) depuis un seul outil.

Dans cet article nous allons découvrir quelles sont les possi-bilités offertes par cette extension. Nous verrons également que Firebug dispose d’un système d’extensions en interne (on peut ajouter des extensions à l’extension Firebug) et que certaines de ces extensions peuvent s’avérer très pratiques...

Fig. 2 : Interface de Firebug dans la même fenêtre que la page analysée

1 Présentation généraleFirebug étant une extension pour Firefox, elle s’installera comme à l’habitude : rendez-vous sur la page du projet (ici https://addons.mozilla.org/fr/firefox/addon/1843/), cliquez sur le bouton « Ajouter à Firefox », puis redémarrez Firefox. Vous obtiendrez alors une nouvelle icône dans la barre de statut de votre navigateur (Fig. 1). En cliquant sur cette icône vous activerez/désactiverez l’extension.

Fig. 1 : Icône d’activation de Firebug

Web

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 12: Sample _linux_pratique

Voyons maintenant en guise d’exemple les fonctions permettant d’afficher des messages dans cet onglet depuis Javascript. Ces fonctions admettent toutes les mêmes paramètres : une chaîne de caractères et/ou des variables. Pour affi-cher du texte et le contenu de variables, vous pouvez utiliser la concaténation classique du Javascript à l’aide de l’opérateur « + ».

Voici un exemple utilisant ces fonctions. Le résultat d’exécution de code est pré-senté en figure 4.

01: <script type=”text/javascript”> 02: var var1 = “Linux Pratique”; 03: var var2 = 66; 04: 05: if (window.console && window.console.firebug) 06: { 07: console.log(“Message de log - (var1=%s)”, var1); 08: console.debug(“Message de debug (var2=” + var2 + “)”); 09: console.info(“Message d’info”); 10: console.warn(“Message d’avertissement”); 11: console.error(“Message d’erreur”); 12: console.assert(var2 == 67, “Message d’assertion car var2 != 67”); 13: } 14: </script>

En ligne 5, après avoir initialisé deux variables, nous testons la présence de Firebug puis nous testons les différentes fonctions d’affichage. console.log() en ligne 7 ne fait qu’afficher un message dans la console. Les autres fonctions, dans les lignes 8 à 10 affichent toutes un message et un lien hypertexte permet-tant de visualiser dans l’onglet Script la ligne ayant appelé cette fonction. Seul le style d’affichage est différent (couleur, icône, etc.). Enfin, en ligne 12, la fonc-tion console.assert() permet d’afficher un message si une condition n’est pas vérifiée (ici on teste si var2 == 10).

Fig. 4 : Les différentes fonctions permettant d’afficher un message

Je n’ai présenté ici que les fonctions d’affichage qui seront, de loin, les plus employées ; pour plus d’informations sur les autres fonctions disponibles, vous pourrez consulter la documentation présente sur le site officiel [1][2].

2.2. L’onglet HTMLL’onglet HTML permet d’afficher le code source HTML de la page en cours de visualisation (il ne s’agit pas directement du code source : toute modification que vous effectuerez sur ce code ne sera pas sauvegardée). Le code est coloré en fonction de la syntaxe pour permettre une meilleur lisibilité et il est présenté sous la forme d’un arbre où les blocs correspondant à des nœuds peuvent être dépliés ou pliés en cliquant sur les icônes « + » et « - ». Par exemple, un bloc <div>...</div> sera fermé par défaut et pour voir son contenu, il faudra cli-quer sur l’icône « + ».

Afficher le code source de la page, même en couleur, c’est joli mais ça ne sert pas à grand-chose pour le débogage... c’est pourquoi Firebug propose également « l’inspection de code ». Cette inspection peut avoir lieu dans deux sens :

• le sens « visuel de la page » vers code : le bouton de la barre d’outils représentant un rectangle et une petite flèche permet de sélectionner graphi-quement des éléments de la page et retrouver leur code associé (Fig. 5).

• le sens code vers « visuel de la page » : cliquez sur une ligne et vous verrez apparaître une zone colorée correspondant au code sur la page.

Lors de l’exploration du code, vous avez peut-être pu vous rendre compte de certaines modifications que vous aimeriez mettre en place... mais com-ment être sûr que vos modifications ne vont pas détruire l’apparence de la page ? Il est possible de modifier le code de la page à la volée (localement bien sûr, en vue de tests). Une fois la ligne de code sélectionnée, en cli-quant sur un attribut de balise ou sur le contenu, vous pourrez modifier celui-ci. Si vos modifications sont plus impor-tantes, cliquez sur le bouton Éditer situé sous la barre de menu (il faut cliquer à nouveau sur ce bouton pour valider vos modifications).

Vous aurez sans doute également remarqué le petit cadre présent sur la droite de la fenêtre et comportant quatre onglets :

• Style : affiche les lignes de style CSS utilisées par le code sélectionné. Cet onglet réagit comme l’onglet CSS.

• Calculé : affiche les différentes valeurs de style calculées pour affi-cher le code sélectionné (il s’agit d’une représentation plus lisible des informations présentes dans l’onglet Style en tenant compte des héritages dus aux styles en cascades).

• Apparence : affiche de manière gra-phique les informations de marges, bordures et padding de l’élément sélectionné. Ces informations peu-vent être modifiées directement sur le graphique (toujours en vue de tests puisque les modifications ne sont naturellement pas persistantes).

Web

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 13: Sample _linux_pratique

Fig. 5 : Sélection d’un élément graphique pour visualiser son code HTML.

• « Afficher les scripts statiques et eval » : affiche les scripts statiques et les scripts exécutés à travers la fonction eval() (typiquement les scripts chargés par une requête XMLHttpRequest donc Ajax) ;

• « Afficher les scripts statiques et d’événements » : affiche les scripts statiques et les scripts générés par un événement ;

• « Afficher les scripts statiques et d’événements et les eval() » : affiche tous les scripts, ce qui constitue le choix par défaut.

J’ai dit en introduction que l’on pouvait naviguer dans le code en mode pas à pas. Une des premières opérations à réaliser pour effectuer ce type de débogage est d’insérer au moins un point d’arrêt : le code sera exécuté de manière ininterrompue jusqu’à une ligne que nous aurons marquée et qui deviendra donc un « point d’arrêt ». Pour ajouter un point d’arrêt, il faut cliquer sur le numéro de la ligne sur laquelle vous souhaitez arrêter l’exécution (vous verrez alors apparaître un rond rouge). Si vous souhaitez que votre point d’arrêt ne soit actif qu’à une certaine condition, cliquez sur le rond rouge avec le bouton droit de votre souris : une zone de texte vous demandant de saisir la condition apparaîtra. Pour utiliser les points d’arrêts définis, vous devrez recharger votre page. L’onglet Script n’affichera alors que les lignes de script précédant le premier point d’arrêt et comportera de nouveaux boutons permettant d’effectuer les actions classiques de débogage : continuer (exécution du

• DOM : affiche des informations sur le DOM (Document Object Model) de l’élément sélectionné. Cet onglet réagit comme l’onglet DOM.

2.3. L’onglet CSSToutes les feuilles de style relatives au document courant sont accessibles depuis l’onglet CSS. Pour changer de feuille, cliquez sur la flèche de menu contextuel située à droite du nom de la feuille en cours de visualisation (nom se trouvant lui-même à droite du bouton Éditer). L’édition de code à la volée s’effectue exactement comme avec le HTML. Une fonctionnalité très pratique vous permet de visualiser la couleur ou l’image définie par une règle en passant simplement la souris sur ladite règle.

2.4. L’onglet ScriptCet onglet représente l’outil fon-damental de débogage du code Javascript. C’est ici que l’on pourra faire afficher les différentes portions de code Javascript, naviguer dans le code en mode pas à pas, etc.

Comme il existe plusieurs façons d’inclure du code Javascript dans une page HTML, Firebug propose cinq filtres permettant d’effectuer un tri dans les différents scripts. Pour cela, il faut choisir le type de scripts que l’on sou-haite charger grâce au menu contex-tuel du bouton Tous qui est le choix par défaut. Les choix possibles sont :

• « Afficher les scripts statiques » : tous les scripts qui sont chargés dans la page à l’aide de la balise <script> ;

code jusqu’au prochain point d’arrêt), pas à pas détaillé (le code est exécuté ligne à ligne avec un arrêt après chaque ligne), pas à pas entrant et pas à pas sortant (lors d’un appel de fonction, le pas à pas entrant affiche le code de la fonction ligne à ligne alors que le pas à pas détaillé considère cet appel comme une simple commande).

D’autres outils sont disponibles dans la fenêtre de droite sous la forme de trois onglets :

• Espions : en cliquant sur cet onglet vous pourrez définir un nouvel espion. Un espion affiche la valeur d’une variable à tout moment, ce qui permet, en association avec le pas à pas, de suivre son évolution et de s’assurer que les valeurs sont correctes.

• Pile : la pile affiche la liste des fonctions appelées au cours d’une session de débogage (usage des points d’arrêt obligatoire).

• Points d’arrêt : cet onglet permet d’afficher la liste des points d’arrêts et de les activer, les désactiver ou les supprimer. La désactivation d’un point d’arrêt sans le suppri-mer n’est disponible qu’à travers cet onglet. Les autres opérations peuvent être réalisées directement dans la fenêtre de code.

2.5. L’onglet DOMDans cet onglet vous aurez accès à des informations sur les méthodes et propriétés du DOM. Cet onglet est un peu plus complexe et je ne le développerai pas dans cet article.

Firebug, LA solution de débogage pour les applications web

Voyons maintenant en guise d’exemple les fonctions permettant d’afficher des messages dans cet onglet depuis Javascript. Ces fonctions admettent toutes les mêmes paramètres : une chaîne de caractères et/ou des variables. Pour affi-cher du texte et le contenu de variables, vous pouvez utiliser la concaténation classique du Javascript à l’aide de l’opérateur « + ».

Voici un exemple utilisant ces fonctions. Le résultat d’exécution de code est pré-senté en figure 4.

01: <script type=”text/javascript”> 02: var var1 = “Linux Pratique”; 03: var var2 = 66; 04: 05: if (window.console && window.console.firebug) 06: { 07: console.log(“Message de log - (var1=%s)”, var1); 08: console.debug(“Message de debug (var2=” + var2 + “)”); 09: console.info(“Message d’info”); 10: console.warn(“Message d’avertissement”); 11: console.error(“Message d’erreur”); 12: console.assert(var2 == 67, “Message d’assertion car var2 != 67”); 13: } 14: </script>

En ligne 5, après avoir initialisé deux variables, nous testons la présence de Firebug puis nous testons les différentes fonctions d’affichage. console.log() en ligne 7 ne fait qu’afficher un message dans la console. Les autres fonctions, dans les lignes 8 à 10 affichent toutes un message et un lien hypertexte permet-tant de visualiser dans l’onglet Script la ligne ayant appelé cette fonction. Seul le style d’affichage est différent (couleur, icône, etc.). Enfin, en ligne 12, la fonc-tion console.assert() permet d’afficher un message si une condition n’est pas vérifiée (ici on teste si var2 == 10).

Fig. 4 : Les différentes fonctions permettant d’afficher un message

Je n’ai présenté ici que les fonctions d’affichage qui seront, de loin, les plus employées ; pour plus d’informations sur les autres fonctions disponibles, vous pourrez consulter la documentation présente sur le site officiel [1][2].

2.2. L’onglet HTMLL’onglet HTML permet d’afficher le code source HTML de la page en cours de visualisation (il ne s’agit pas directement du code source : toute modification que vous effectuerez sur ce code ne sera pas sauvegardée). Le code est coloré en fonction de la syntaxe pour permettre une meilleur lisibilité et il est présenté sous la forme d’un arbre où les blocs correspondant à des nœuds peuvent être dépliés ou pliés en cliquant sur les icônes « + » et « - ». Par exemple, un bloc <div>...</div> sera fermé par défaut et pour voir son contenu, il faudra cli-quer sur l’icône « + ».

Afficher le code source de la page, même en couleur, c’est joli mais ça ne sert pas à grand-chose pour le débogage... c’est pourquoi Firebug propose également « l’inspection de code ». Cette inspection peut avoir lieu dans deux sens :

• le sens « visuel de la page » vers code : le bouton de la barre d’outils représentant un rectangle et une petite flèche permet de sélectionner graphi-quement des éléments de la page et retrouver leur code associé (Fig. 5).

• le sens code vers « visuel de la page » : cliquez sur une ligne et vous verrez apparaître une zone colorée correspondant au code sur la page.

Lors de l’exploration du code, vous avez peut-être pu vous rendre compte de certaines modifications que vous aimeriez mettre en place... mais com-ment être sûr que vos modifications ne vont pas détruire l’apparence de la page ? Il est possible de modifier le code de la page à la volée (localement bien sûr, en vue de tests). Une fois la ligne de code sélectionnée, en cli-quant sur un attribut de balise ou sur le contenu, vous pourrez modifier celui-ci. Si vos modifications sont plus impor-tantes, cliquez sur le bouton Éditer situé sous la barre de menu (il faut cliquer à nouveau sur ce bouton pour valider vos modifications).

Vous aurez sans doute également remarqué le petit cadre présent sur la droite de la fenêtre et comportant quatre onglets :

• Style : affiche les lignes de style CSS utilisées par le code sélectionné. Cet onglet réagit comme l’onglet CSS.

• Calculé : affiche les différentes valeurs de style calculées pour affi-cher le code sélectionné (il s’agit d’une représentation plus lisible des informations présentes dans l’onglet Style en tenant compte des héritages dus aux styles en cascades).

• Apparence : affiche de manière gra-phique les informations de marges, bordures et padding de l’élément sélectionné. Ces informations peu-vent être modifiées directement sur le graphique (toujours en vue de tests puisque les modifications ne sont naturellement pas persistantes).

Web

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 14: Sample _linux_pratique

2.6. L’onglet RéseauSi vous souhaitez analyser le trafic réseau induit par vos pages, il vous faudra utiliser l’onglet Réseau. Dans cet onglet, vous aurez accès à la liste des ressources char-gées et quelle méthode a été utilisée (GET ou POST), l’URL, le statut de la requête (code de réponse HTTP), le domaine, le poids du fichier transféré, et la chronolo-gie contenant le temps de chargement (en plaçant votre souris sur le diagramme, vous obtiendrez une vue plus détaillée, comme le montre la figure 6).

3.1. Pour les développeurs PHP : FirePHPL’extension indispensable des développeurs PHP ! Elle vous évitera de dégrader l’affichage de vos pages en utilisant les sempiternels print_r() et var_dump(). FirePHP [4] est distribué sous licence BSD et vous devrez accepter le contrat de licence avant de pouvoir procéder à l’installation.

Au redémarrage de Firefox et de Firebug vous verrez appa-raître un nouveau scarabée bleu dans le menu de Firebug. Vous ne pourrez pas utiliser FirePHP immédiatement, il vous faudra au préalable installer une librairie supplémen-taire : la librairie FirePHPCore. Un appel à PEAR permet de faire tout cela simplement (si la commande pear n’est pas installée sur votre système, faites appel à votre ges-tionnaire de paquetages sur le paquet php-pear) :

sudo pear channel-discover pear.firephp.org sudo pear install firephp/FirePHPCore

Attention : notez que FirePHP peut permettre l’accès à des informations sensibles sur un projet en production. Lors de son utilisation il est activé par défaut, mais il est possible de le désactiver grâce à la méthode setEnabled() dont nous verrons un exemple d’application dans la suite.

Voici un exemple d’utilisation de FirePHP dans un code PHP :

require_once ‘FirePHPCore/FirePHP.class.php’;$firephp = FirePHP::getInstance(true);

// Penser à mettre à false en production !$firephp->setEnabled(true);

De nombreuses actions sont possibles, mais le plus inté-ressant est bien sûr l’affichage des variables à la manière d’un var_dump() sans dégrader l’affichage. Pour cela on utilise la méthode log() en ne lui passant qu’une variable ou une variable et une chaîne de caractères permettant d’identifier la variable :

$varComplexe = array( ‘cle_1’ => 66, ‘cle_2’ => array( ‘cle_2_1’ => ‘Linux’, ‘cle_2_2’ => ‘Pratique’ ) ); $firephp->log($varComplexe, ‘$varComplexe’);

Fig. 6 : Détail du temps de chargement d’un élément

En cas d’erreur lors du chargement d’un élément, ce dernier apparaîtra en rouge. Vous pouvez utiliser la barre de menu pour sélectionner les types de fichiers que vous souhaitez scruter (tous, HTML, CSS, etc.). Si le fichier est un fichier image et que vous placez votre souris dessus, une miniature de l’image ainsi que sa taille réelle en pixels seront affichées. En cliquant sur une requête vous obtiendrez le détail de son contenu via trois onglets :

• En-têtes : affiche les en-têtes de la requête du client (contenant la date, l’encodage, éventuellement les paramètres HTTP passés comme dans cet exemple en méthode GET : fichier.html?value=1, etc.) et les en-têtes de la réponse du serveur.

• Réponse : fichier constituant la réponse du serveur : le code HTML de la page, un code Javascript, une image, etc.

• Cache : informations du cache indiquant quand l’élé-ment a été chargé (notamment utile dans le cas d’un statut « 304 – Not Modified ».

Cet onglet est vraiment très utile dans le cadre d’un déve-loppement Ajax pour analyser les réponses des requêtes XMLHttpRequest.

3 Les extensions pour FirebugFirebug fonctionne comme Firefox : son fonctionnement peut être étendu par l’ajout d’extensions [3]. Il ne s’agit pas d’un système de gestion des extensions propre à Firebug et l’installation des deux extensions présen-tées dans la suite se fait donc par ajout d’extensions à Firefox.

Web

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 15: Sample _linux_pratique

En cliquant sur la ligne d’information sur la variable dans Firebug, vous ferez apparaître une fenêtre détaillant le contenu de la variable en indentant les différents niveaux (que vous pourrez maquer/afficher en cliquant dessus). La figure 7 illustre ce mécanisme à partir du code précédent.

Fig. 7 : Affichage d’informations sur une variable à la manière d’un var_dump()

Si vous utilisez des frameworks tels que ZendFramework, Symphony, etc., des modules sont disponibles pour pou-voir intégrer FirePHP [5]. En tout, 18 frameworks sont supportés.

Pour conclure, sachez que FirePHP, actuellement en ver-sion 0.5.0, continue d’évoluer. La version 1.0 est actuel-lement disponible en bêta et le projet devrait changer de nom et s’appeler FireConsole [6].

3.2. Analyse de performances avec YSlowYSlow va vous permettre d’analyser les performances de vos pages en se basant sur 35 règles (réparties en 6 catégories : Contenu, Cookie, CSS, Images, Javascript, et Serveur) auxquelles seront attribuées des notes allant de A à F (voire n/a lorsque le calcul est impossible). À partir de ces notes, une note globale sera attribuée à la page et vous sera présentée dans le rapport détaillé qui apparaîtra dans un nouvel onglet de Firebug. Dans ce rapport, en cliquant sur chaque règle, vous aurez accès à des indications vous permettant d’améliorer la note (et donc les performances), et un lien vous permettra d’obtenir une explication détaillée de la règle étudiée.

Notez bien que les informations données par YSlow sont des recommandations pour améliorer les performances

de vos pages et que cela n’affecte en rien la validité de votre code d’un point de vue des recommandation du W3C (même si la note globale de vos pages est F...).

ConclusionFirebug est une extension qui est maintenant bien connue des développeurs web... mais elle n’est pas toujours exploitée à son potentiel maximal par manque d’infor-mation. Cet article nous a permis de voir rapidement les fonctionnalités principales et vous pourrez donc les approfondir en fonction de vos besoins...

InfoVersion testée : Firebug 1.7.2

[1] Fonctions disponibles (API Console) : http://getfirebug.com/wiki/index.php/Console_API

[2] Fonctions disponibles (API Ligne de commandes) : http://getfirebug.com/wiki/index.php/Command_Line_API

[3] Liste d’extensions pour Firebug : http://getfirebug.com/wiki/index.php/Firebug_Extensions

[4] Extension FirePHP : https://addons.mozilla.org/en-US/firefox/addon/6149/

[5] Liste des modules disponibles pour une intégration de FirePHP avec un framework : http://www.firephp.org/Wiki/Reference/FAQ

[6] Site officiel de FireConsole : http://www.fireconsole.org/

Firebug, LA solution de débogage pour les applications web

2.6. L’onglet RéseauSi vous souhaitez analyser le trafic réseau induit par vos pages, il vous faudra utiliser l’onglet Réseau. Dans cet onglet, vous aurez accès à la liste des ressources char-gées et quelle méthode a été utilisée (GET ou POST), l’URL, le statut de la requête (code de réponse HTTP), le domaine, le poids du fichier transféré, et la chronolo-gie contenant le temps de chargement (en plaçant votre souris sur le diagramme, vous obtiendrez une vue plus détaillée, comme le montre la figure 6).

3.1. Pour les développeurs PHP : FirePHPL’extension indispensable des développeurs PHP ! Elle vous évitera de dégrader l’affichage de vos pages en utilisant les sempiternels print_r() et var_dump(). FirePHP [4] est distribué sous licence BSD et vous devrez accepter le contrat de licence avant de pouvoir procéder à l’installation.

Au redémarrage de Firefox et de Firebug vous verrez appa-raître un nouveau scarabée bleu dans le menu de Firebug. Vous ne pourrez pas utiliser FirePHP immédiatement, il vous faudra au préalable installer une librairie supplémen-taire : la librairie FirePHPCore. Un appel à PEAR permet de faire tout cela simplement (si la commande pear n’est pas installée sur votre système, faites appel à votre ges-tionnaire de paquetages sur le paquet php-pear) :

sudo pear channel-discover pear.firephp.org sudo pear install firephp/FirePHPCore

Attention : notez que FirePHP peut permettre l’accès à des informations sensibles sur un projet en production. Lors de son utilisation il est activé par défaut, mais il est possible de le désactiver grâce à la méthode setEnabled() dont nous verrons un exemple d’application dans la suite.

Voici un exemple d’utilisation de FirePHP dans un code PHP :

require_once ‘FirePHPCore/FirePHP.class.php’;$firephp = FirePHP::getInstance(true);

// Penser à mettre à false en production !$firephp->setEnabled(true);

De nombreuses actions sont possibles, mais le plus inté-ressant est bien sûr l’affichage des variables à la manière d’un var_dump() sans dégrader l’affichage. Pour cela on utilise la méthode log() en ne lui passant qu’une variable ou une variable et une chaîne de caractères permettant d’identifier la variable :

$varComplexe = array( ‘cle_1’ => 66, ‘cle_2’ => array( ‘cle_2_1’ => ‘Linux’, ‘cle_2_2’ => ‘Pratique’ ) ); $firephp->log($varComplexe, ‘$varComplexe’);

Fig. 6 : Détail du temps de chargement d’un élément

En cas d’erreur lors du chargement d’un élément, ce dernier apparaîtra en rouge. Vous pouvez utiliser la barre de menu pour sélectionner les types de fichiers que vous souhaitez scruter (tous, HTML, CSS, etc.). Si le fichier est un fichier image et que vous placez votre souris dessus, une miniature de l’image ainsi que sa taille réelle en pixels seront affichées. En cliquant sur une requête vous obtiendrez le détail de son contenu via trois onglets :

• En-têtes : affiche les en-têtes de la requête du client (contenant la date, l’encodage, éventuellement les paramètres HTTP passés comme dans cet exemple en méthode GET : fichier.html?value=1, etc.) et les en-têtes de la réponse du serveur.

• Réponse : fichier constituant la réponse du serveur : le code HTML de la page, un code Javascript, une image, etc.

• Cache : informations du cache indiquant quand l’élé-ment a été chargé (notamment utile dans le cas d’un statut « 304 – Not Modified ».

Cet onglet est vraiment très utile dans le cadre d’un déve-loppement Ajax pour analyser les réponses des requêtes XMLHttpRequest.

3 Les extensions pour FirebugFirebug fonctionne comme Firefox : son fonctionnement peut être étendu par l’ajout d’extensions [3]. Il ne s’agit pas d’un système de gestion des extensions propre à Firebug et l’installation des deux extensions présen-tées dans la suite se fait donc par ajout d’extensions à Firefox.

Web

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 16: Sample _linux_pratique

Réseau

Votre pingouin à distance en mode graphiqueBenoît Benedetti

Vous avez plusieurs machines physiques à gérer, ainsi que des machines virtuelles, chacune faisant tourner un système d’exploitation différent, sur des réseaux distants. Vous vous y connectez déjà en console avec SSH, mais le confort d’un environnement graphique vous manque parfois et vous trouvez VNC trop limité...

Préambule et pré-requis

Les différentes solutions abordées ici vous permettront le déport d’applications Linux, voire d’un bureau complet, sur le réseau (même sur des liens très lents), en mode multi-utilisateur. Vous aurez la possibilité de suspendre cette utilisation, puis de la reprendre depuis n’importe quel endroit. Vous aurez besoin de machines accessibles à distance bien sûr, avec SSH démarré et opérationnel.

Nous utiliserons des systèmes sous Debian 6 Squeeze et Fedora 15 Lovelock en tant que serveurs et clients, sous environnement GNOME. Un poste Windows Seven sera également utilisé comme client. La plupart des commandes d’ins-tallation et de configuration sont à exécuter en root, à vous d’utiliser sudo ou tout autre mécanisme adé-quat, ainsi que de vous assurer que les communications réseau entre les machines ne seront pas bloquées (pare-feu, routeur...).

1 FreeNXLa technologie NX, développée par NoMachine, est une suite d’outils qui permet de transformer une station Linux en Terminal Server [1] . Elle est basée sur le système X Window et SSH, sécurisée et rapide grâce à

la compression, la minimisation des échanges et un système de cache lors du transfert des sessions X [2]. Un serveur NX peut également jouer le rôle de ser-veur proxy pour des machines utilisant RDP ou VNC, pour apporter sécurité et compression à ces protocoles.

1.1 Partie serveurNoMachine publie les bibliothèques principales sous GPL. Sa solution serveur, très complète, est malheureusement propriétaire et payante. La version gratuite est limitée en fonctionnalités, notamment par le nombre d’utilisateurs simultanés (2 au maximum). C’est pourquoi nous allons utiliser dans cette partie FreeNX, une implémentation libre du serveur de NoMachine [3], utilisant les biblio-thèques sous GPL. Le projet FreeNX est laissé en friche actuellement, mais les paquetages sont fonctionnels et disponibles sur de nombreux systèmes.

1.1.1 InstallationSous Fedora, les binaires sont présents des les dépôts officiels par défaut :

$> yum install freenx-server

Aucun paquet n’est disponible par défaut sous Debian. Nous allons utiliser les dépôts FreeNX d’Ubuntu Karmic. Par expérience, cette version s’avère pleine-ment utilisable sous Squeeze :

$> cat > /etc/apt/sources.list.d/freenx.list << EOF> deb http://ppa.launchpad.net/freenx-team/ppa/ubuntu karmic main> deb-src http://ppa.launchpad.net/freenx-team/ppa/ubuntu karmic main> EOF$> gpg --keyserver pgpkeys.mit.edu --recv-key 2A8E3034D018A4CE$> gpg -a --export D018A4CE | apt-key add -$> aptitude update && aptitude install freenx-server

Pour compléter l’installation sous Debian, vous devrez exécuter :

$> /usr/libexec/nx/nxsetup --install

1.1.2 PrincipeLe serveur FreeNX n’est pas un service à l’écoute. Son principe de fonctionne-ment se décompose en deux étapes : le client NX distant se connecte en SSH au serveur avec l’utilisateur générique NX et sa clé SSH, générée à l’installation du serveur. Si validation de la première étape, la machine serveur démarre un shell avec l’utilisateur NX, qui va tunneliser et gérer les échanges futurs entre

En couverture

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 17: Sample _linux_pratique

Réseau

les deux machines. Le client distant fournit ensuite le couple identifiant/mot de passe d’un utilisateur existant du système hébergeant le serveur FreeNX. Si cette deuxième authentification se déroule correctement, le client affiche le bureau ou l’application distante demandée.

La clé publique utilisée par le serveur FreeNX se trouve dans /var/lib/nxserver/home/.ssh/. La clé privée, à renseigner dans le logiciel client, se trouve dans /var/lib/nxserver/home/default_keys/client.id_dsa.key sous Debian et dans /etc/nxserver/client.id_dsa.key sous Fedora.

Note

La paire de clés SSH sous Debian est la paire de base officielle de NoMachine, paramétrée par défaut dans les clients NX pour faciliter la configuration des connexions.

1.2 Partie clientPlusieurs clients NX existent. Le plus fonctionnel reste le client propriétaire de NoMachine, téléchargeable gratuite-ment sur leur site [4]. C’est le seul à proposer une version Windows. Il existe une alternative open source, Opennx [5], qui reprend l’interface et la syntaxe des fichiers de configuration. Malheureusement, il ne propose pas de ver-sion Windows.

1.2.1 InstallationInstallation d’Opennx sous Debian :

$> echo “deb http://download.opensuse.org/repositories/home:/felfert/Debian_6.0 ./” > /etc/apt/sources.list.d/opnennx.list$> wget http://download.opensuse.org/repositories/home:/felfert/Debian_5.0/Release.key -O - | apt-key add -$> aptitude update && aptitude install opennx

Installation d’Opennx sous Fedora :

$> wget http://opennx.sourceforge.net/static/opennx.repo -O /etc/yum.repos.d/ opennx.repo yum update && yum install opennx

Fig. 1 : Paramétrage de la session 

Renseignez ensuite les informations du bureau distant (Fig. 2). Vous pouvez lancer une application ou une com-mande à la place d’un bureau complet. Choisissez l’option Custom dans le menu déroulant, puis cliquez sur Settings.

1.2.2 Configuration et création de connexionNous allons voir comment configurer une connexion NX vers un serveur Linux, depuis un poste Windows avec le client NoMachine. L’interface étant la même entre les logiciels quelque soit la plateforme, vous pourrez vous baser sur les instructions et captures d’écran qui suivent pour la configu-ration d’une connexion depuis Linux avec le client Opennx. Depuis le menu Applications, lancez le Connection Wizard.

Donnez un nom à la connexion que vous êtes en train de paramétrer (champ Session), le nom ou l’adresse IP du serveur auquel vous voulez vous connecter (Host), le port sur lequel écoute son serveur SSH et le type de connexion Internet séparant votre client et le serveur (Fig. 1).

Fig. 2 : Paramétrage du bureau 

Les options de base sont configurées, cochez la case pour créer un raccourci bureau pour cette connexion, ainsi que la case pour afficher la boîte de dialogue de configura-tion avancée ; vous avez accès à tous les paramètres de connexion à partir de cette interface (Fig. 3).

Fig. 3 : Boîte de dialogue d’une connexion configurée

Le plus important est de paramétrer sa clé SSH, en cli-quant le bouton Key de l’onglet General. Si vous utilisez les clés officielles de NoMachine, cliquez simplement sur Default, sinon rentrez la clé privée personnelle indiquée précédemment. Sauvegardez la clé entrée avec le bouton Save. N’oubliez pas de cliquer sur Save pour sauvegarder vos modifications, avant de cliquer sur Ok pour arriver sur la boîte de dialogue de lancement de la connexion.

Cette dernière apparaît lorsque vous lancez l’autre binaire ins-tallé, appelé « Client » tout court dans le menu Applications. Vous pouvez sélectionner les différentes connexions enregis-trées via le menu déroulant, ou encore apporter des modifi-cations en cliquant sur Configure. Le raccourci de connexion rapide, créé à la fin de l’assistant, affiche la même boîte de dialogue, allégée du menu déroulant et du bouton Configure. Il ne vous reste plus qu’à rentrer le login et le mot de passe d’un utilisateur du serveur cible ; cliquez sur Login et vous voilà sur un bureau GNOME depuis Windows (Fig. 4) !

Réseau

Votre pingouin à distance en mode graphiqueBenoît Benedetti

Vous avez plusieurs machines physiques à gérer, ainsi que des machines virtuelles, chacune faisant tourner un système d’exploitation différent, sur des réseaux distants. Vous vous y connectez déjà en console avec SSH, mais le confort d’un environnement graphique vous manque parfois et vous trouvez VNC trop limité...

Préambule et pré-requis

Les différentes solutions abordées ici vous permettront le déport d’applications Linux, voire d’un bureau complet, sur le réseau (même sur des liens très lents), en mode multi-utilisateur. Vous aurez la possibilité de suspendre cette utilisation, puis de la reprendre depuis n’importe quel endroit. Vous aurez besoin de machines accessibles à distance bien sûr, avec SSH démarré et opérationnel.

Nous utiliserons des systèmes sous Debian 6 Squeeze et Fedora 15 Lovelock en tant que serveurs et clients, sous environnement GNOME. Un poste Windows Seven sera également utilisé comme client. La plupart des commandes d’ins-tallation et de configuration sont à exécuter en root, à vous d’utiliser sudo ou tout autre mécanisme adé-quat, ainsi que de vous assurer que les communications réseau entre les machines ne seront pas bloquées (pare-feu, routeur...).

1 FreeNXLa technologie NX, développée par NoMachine, est une suite d’outils qui permet de transformer une station Linux en Terminal Server [1] . Elle est basée sur le système X Window et SSH, sécurisée et rapide grâce à

la compression, la minimisation des échanges et un système de cache lors du transfert des sessions X [2]. Un serveur NX peut également jouer le rôle de ser-veur proxy pour des machines utilisant RDP ou VNC, pour apporter sécurité et compression à ces protocoles.

1.1 Partie serveurNoMachine publie les bibliothèques principales sous GPL. Sa solution serveur, très complète, est malheureusement propriétaire et payante. La version gratuite est limitée en fonctionnalités, notamment par le nombre d’utilisateurs simultanés (2 au maximum). C’est pourquoi nous allons utiliser dans cette partie FreeNX, une implémentation libre du serveur de NoMachine [3], utilisant les biblio-thèques sous GPL. Le projet FreeNX est laissé en friche actuellement, mais les paquetages sont fonctionnels et disponibles sur de nombreux systèmes.

1.1.1 InstallationSous Fedora, les binaires sont présents des les dépôts officiels par défaut :

$> yum install freenx-server

Aucun paquet n’est disponible par défaut sous Debian. Nous allons utiliser les dépôts FreeNX d’Ubuntu Karmic. Par expérience, cette version s’avère pleine-ment utilisable sous Squeeze :

$> cat > /etc/apt/sources.list.d/freenx.list << EOF> deb http://ppa.launchpad.net/freenx-team/ppa/ubuntu karmic main> deb-src http://ppa.launchpad.net/freenx-team/ppa/ubuntu karmic main> EOF$> gpg --keyserver pgpkeys.mit.edu --recv-key 2A8E3034D018A4CE$> gpg -a --export D018A4CE | apt-key add -$> aptitude update && aptitude install freenx-server

Pour compléter l’installation sous Debian, vous devrez exécuter :

$> /usr/libexec/nx/nxsetup --install

1.1.2 PrincipeLe serveur FreeNX n’est pas un service à l’écoute. Son principe de fonctionne-ment se décompose en deux étapes : le client NX distant se connecte en SSH au serveur avec l’utilisateur générique NX et sa clé SSH, générée à l’installation du serveur. Si validation de la première étape, la machine serveur démarre un shell avec l’utilisateur NX, qui va tunneliser et gérer les échanges futurs entre

En couverture

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 18: Sample _linux_pratique

Fig. 4 : Un bureau GNOME depuis Windows !

Avec l’utilitaire Session Administrator (Fig. 5), disponible dans le menu Applications, vous pourrez afficher des sta-tistiques sur vos sessions, reprendre des sessions inter-rompues, etc.

Fig. 5 :  Le gestionnaire de sessions

Nous avons seulement abordé en surface le logiciel client. Si vous voulez pleinement profiter des fonctionnalités de partage d’imprimantes, de dossiers, il faudra que vous utilisiez le serveur propriétaire de NoMachine. Ce sera au détriment du nombre d’utilisateurs simultanés... à moins que vous ne cassiez votre tirelire.

2 x2goX2go [6] est un projet open source similaire au pro-jet de NoMachine, dont il reprend la technologie NX. Prometteur, beaucoup plus actif que FreeNX, Il veut détrô-ner NoMachine au sein des entreprises : authentification via SmartCard, LDAP, stockage de profils dans une base Postgres,... Le projet est récent, le support pour les diffé-rentes plateformes se développe, mais il est plus abouti sous Debian, distribution de développement utilisée par les développeurs.

2.1 Partie serveurL’installation sous Debian nécessite d’activer les dépôts x2go et d’installer la clé associée :

$> gpg --keyserver keys.gnupg.net --recv-keys E1F958385BFE2B6E$> gpg -a --export E1F958385BFE2B6E | apt-key add -$> cat > /etc/apt/sources.list.d/x2go.list << EOF> deb http://packages.x2go.org/debian squeeze main> deb-src http://packages.x2go.org/debian squeeze main> EOF$> aptitude update && aptitude install x2go-keyring$> aptitude install x2goserver x2gognomebindings

Le paquetage x2gognomebindings permet un meilleur confort d’utilisation dans l’environnement GNOME (possibi-lité de monter les systèmes de fichiers distants, pause des sessions en cours...). Un paquetage similaire est disponible pour les environnements de bureau les plus populaires.

2.2 Partie clienteLe projet x2go met à disposition 2 clients : x2go-client (Qt4) et pyhoca-gui (Python).Sous Windows, seule la version Python est disponible, sous la forme d’un instal-lateur récupérable sur le site du projet [7]. Sous Debian, vous pouvez installer l’un et/ou l’autre des exécutables, après avoir activé les dépôts précédents (le support d’autres systèmes s’étoffe doucement) :

$> aptitude install x2goclient pyhoca-gui

2.2.1 ParamétragesAu lancement de pyhoca-gui, une icône apparaît dans la barre des tâches, sous Windows comme sous Debian (Fig. 6). Vous devrez faire un clic droit dessus, puis Profiles pour ajouter ou modifier des profils de connexions.

Fig. 6 : Menu contextuel de gestion des profils de Pyhoca-gui (l’icône X grise)

La fenêtre de configuration d’une connexion est similaire au client x2go-client. Celui-ci se trouve simplement dans le menu Applications > Internet et vous affiche auto-matiquement la fenêtre de configuration d’une connexion si aucune n’est encore configurée (Fig. 7).

Fig. 7 : Fenêtre de paramétrage d’une connexion

Votre pingouin à distance en mode graphique

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 19: Sample _linux_pratique

Réseau

On retrouve des options équiva-lentes au client NX de la partie pré-cédente, via les différents onglets. Il ne reste plus qu’à se connecter à une machine : clic droit sur l’icône de pyhoca-gui, puis allez dans le menu Connect Server. Sous x2goclient, double cliquez sur une connexion.

Fig. 8 : Une connexion depuis une Debian vers une Debian avec x2goclient (à gauche) et une session depuis Windows vers une Debian sous Pyhoca (à droite).

3 WindowSwitchPour finir, je vais vous présenter Xpra [8], une technologie concur-rente à NX, qui se focalise sur l’exécution d’applications à distance. Nous allons voir plus particulière-ment le logiciel WindowSwitch [9], qui est un frontend à Xpra, ainsi qu’à d’autres protocoles (VNC, NX, SSH) pour le déport d’applications et de bureau [10]. Il permet entre autres, grâce à mDNS, de détecter automa-tiquement les serveurs disponibles sur votre réseau. C’est une alterna-tive intéressante, facile à installer et permettant de tester simplement les différentes solutions citées. Vous trouverez des exemples de cas pra-tiques sur le site du projet [11].

3.1 InstallationSous Debian, il existe un dépôt pour installer facilement le logiciel et ses dépendances :

$> wget -O - http://winswitch.org/gpg.asc | apt-key add -$> echo “deb http://winswitch.org/ squeeze main” > /etc/apt/sources.list.d/winswitch.list$> aptitude update && aptitude install winswitch

Sous Fedora, pas de dépôt disponible, on récupère les paquetages RPM :

$> wget http://winswitch.org/dists/Fedora/15/x86_64/winswitch-0.12.3-1.x86_64.rpm$> wget http://winswitch.org/dists/Fedora/15/x86_64/xpra-0.0.7.22-1.x86_64.rpm$> yum install winswitch-0.12.3-1.x86_64.rpm xpra-0.0.7.22-1.x86_64.rpm

Sous Windows, seul le client WindowSwitch est disponible [12], pas l’implémen-tation serveur de Xpra.

3.2 UtilisationUne fois installé, vous pouvez lancer le programme via le menu Internet, l’icône de WindowSwitch fera son apparition dans la zone de notification (l’application est démarrée dès la fin de l’installation sous Windows).

L’affichage du menu contextuel est séparé en plusieurs parties. La partie supérieure, présente par défaut, permet de configurer le logiciel, de lister les autres serveurs du réseau auxquels cette machine est connectée... Également affichée par défaut, la partie inférieure, qui vous permet d’arrêter WindowSwitch ou bien de vous connecter manuellement à un serveur WindowSwitch distant. Pratique si votre machine n’a pas automatiquement détecté les serveurs disponibles sur votre réseau.

Fig. 9 : Connexion manuelle à un serveur WS.

Entre ces deux parties s’affiche un menu pour chaque serveur WindowSwitch distant auquel votre machine est connectée (WindowSwitch crée automatique-ment une entrée pour la machine locale). Ce menu dédié permet de configurer les options propres au serveur en question et d’exécuter, relancer ou transférer rapidement une application ou un bureau de ce serveur.

Fig. 10 : Lancement d’une application à distance depuis le menu principal

Une fois des bureaux ou applications lancés, vous pouvez les exécuter sur votre machine cliente, ou les trans-férer vers un autre poste, au gré de vos déplacements ou des besoins d’un collaborateur utilisant une autre machine. Sur la figure 11, un client Windows exécute un bureau GNOME d’une Debian distante et s’apprête à transférer l’exécution d’un client graphique Synaptic, s’exécu-tant sur cette même Debian, vers une Fedora distante.

Fig. 11 : Bureau et application à distance depuis Windows

Fig. 4 : Un bureau GNOME depuis Windows !

Avec l’utilitaire Session Administrator (Fig. 5), disponible dans le menu Applications, vous pourrez afficher des sta-tistiques sur vos sessions, reprendre des sessions inter-rompues, etc.

Fig. 5 :  Le gestionnaire de sessions

Nous avons seulement abordé en surface le logiciel client. Si vous voulez pleinement profiter des fonctionnalités de partage d’imprimantes, de dossiers, il faudra que vous utilisiez le serveur propriétaire de NoMachine. Ce sera au détriment du nombre d’utilisateurs simultanés... à moins que vous ne cassiez votre tirelire.

2 x2goX2go [6] est un projet open source similaire au pro-jet de NoMachine, dont il reprend la technologie NX. Prometteur, beaucoup plus actif que FreeNX, Il veut détrô-ner NoMachine au sein des entreprises : authentification via SmartCard, LDAP, stockage de profils dans une base Postgres,... Le projet est récent, le support pour les diffé-rentes plateformes se développe, mais il est plus abouti sous Debian, distribution de développement utilisée par les développeurs.

2.1 Partie serveurL’installation sous Debian nécessite d’activer les dépôts x2go et d’installer la clé associée :

$> gpg --keyserver keys.gnupg.net --recv-keys E1F958385BFE2B6E$> gpg -a --export E1F958385BFE2B6E | apt-key add -$> cat > /etc/apt/sources.list.d/x2go.list << EOF> deb http://packages.x2go.org/debian squeeze main> deb-src http://packages.x2go.org/debian squeeze main> EOF$> aptitude update && aptitude install x2go-keyring$> aptitude install x2goserver x2gognomebindings

Le paquetage x2gognomebindings permet un meilleur confort d’utilisation dans l’environnement GNOME (possibi-lité de monter les systèmes de fichiers distants, pause des sessions en cours...). Un paquetage similaire est disponible pour les environnements de bureau les plus populaires.

2.2 Partie clienteLe projet x2go met à disposition 2 clients : x2go-client (Qt4) et pyhoca-gui (Python).Sous Windows, seule la version Python est disponible, sous la forme d’un instal-lateur récupérable sur le site du projet [7]. Sous Debian, vous pouvez installer l’un et/ou l’autre des exécutables, après avoir activé les dépôts précédents (le support d’autres systèmes s’étoffe doucement) :

$> aptitude install x2goclient pyhoca-gui

2.2.1 ParamétragesAu lancement de pyhoca-gui, une icône apparaît dans la barre des tâches, sous Windows comme sous Debian (Fig. 6). Vous devrez faire un clic droit dessus, puis Profiles pour ajouter ou modifier des profils de connexions.

Fig. 6 : Menu contextuel de gestion des profils de Pyhoca-gui (l’icône X grise)

La fenêtre de configuration d’une connexion est similaire au client x2go-client. Celui-ci se trouve simplement dans le menu Applications > Internet et vous affiche auto-matiquement la fenêtre de configuration d’une connexion si aucune n’est encore configurée (Fig. 7).

Fig. 7 : Fenêtre de paramétrage d’une connexion

Votre pingouin à distance en mode graphique

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 20: Sample _linux_pratique

Pour FinirComme vous voyez, la possibilité d’exé-cuter des applications ou bureaux gra-phiques Linux distants ne se limite pas à VNC. Plusieurs possibilités s’offrent à vous et nous n’avons pas parlé de NeatNX [13], l’implémentation serveur NX de Google, le projet n’ayant pas encore atteint une version définitive. Personnellement, étant sous Debian, j’utilise x2go, le projet semblant plus prometteur. Lorsque je n’ai pas la maîtrise du système d’exploitation sur lequel est installé le client, je m’oriente plus vers FreeNX : son développement est en standby, mais son interopérabilité joue en sa faveur. Pour une personne moins à l’aise techniquement cherchant une solution simple à déployer et à prendre en main, je conseillerais plutôt WindowSwitch. À vous de faire votre choix...

Références[1] http://nomachine.com/documen-

tation/html/intr-technology.html

[2] http://openfacts2.berlios.de/wikien/index.php/BerliosProject:FreeNX_-_NX_Components

[3] http://fedoranews.org/contribu-tors/rick_stout/freenx/freenx.txt

[4] http://www.nomachine.com/download.php

[5] http://opennx.net/download.html

[6] http://www.x2go.org

[7] http://code.x2go.org/releases/binary-win32/pyhoca-gui/

[8] http://en.wikipedia.org/wiki/Xpra

[9] http://winswitch.org

[10] http://winswitch.org/documenta-tion/protocols/choose.html

[11] http://winswitch.org/about/use-cases.html

[12] http://winswitch.org/downloads/

[13] http://code.google.com/p/neatx/

[14] http://remmina.sourceforge.net

RemminaUne parenthèse pour parler de Remmina [14], un visionneur de bureau à distance de l’environnement GNOME. C’est le successeur de feu Grdc, avec un nouveau design et plus de fonctionnalités :

• création de profils, de groupes,..

• très bonne gestion des résolutions, du plein écran,

• support de nombreuses technologies via un système de plugins : RDP, VNC, NX, XDMCP, SSH, Telepathy,

• création de tunnels SSH,

• affichage des connexions actives par onglet,

• une barre de commandes supérieure (à la VirtualBox) pour une meilleure utilisation en plein écran.

Création d’une connexion NX

Plusieurs connexions, mais une instance de Remmina grâce aux onglets, depuis un client Linux.

Les paquetages nécessaires sont présents dans les dépôts officiels des distributions majeures. Ils permettent d’installer Remmina rapidement, aussi bien sous Fedora par exemple :

$> yum install remmina remmina-plugins-nx

Que sous Debian :

$> aptitude install remmina remmina-gnome remmina-plugin-nx

D’autres plugins sont à installer pour le support de protocoles supplémen-taires (remmina-plugin-rdp,...). remmina-gnome est une applet pour l’environnement GNOME propre à Debian, vous permettant d’accéder rapidement à vos connexions paramétrées. Pour l’activer, allez dans le menu Éditions > Préférences de Remmina, puis dans l’onglet Applet. Faites ensuite un clic droit sur le tableau de bord supérieur de votre bureau GNOME, Ajouter au tableau de bord et cliquez sur l’applet vision-neur de bureau à distance Remmina.

L’ensemble de vos préférences personnelles et connexions configurées sont contenues dans ~/.remmina/, pour une sauvegarde et la création de connexions par script facilitées. Le logiciel Remmina est vraiment ergonomique, complet et bien pensé, surtout comparé aux autres clients disponibles et je vous invite vraiment à l’adopter si vous vous connectez régulièrement à des machines distantes, quelque système que ce soit. Il n’a pas toutes les options d’un client NX,RDP,... mais c’est un excellent visionneur (presque) tout-en-un.

Votre pingouin à distance en mode graphique

Linux Pratique N°67 - Septembre/Octobre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 21: Sample _linux_pratique

B ureautique & entreprises

Partage de documents : FileZ Pour les gros Fichiers et dmanager comme Porte-documentsYann Morère

Qui n’a jamais reçu par mail un fichier attaché de plus de 10Mo ? (et là je suis gentil, car j’en connais qui envoient des images ISO par mail !!!). Un RSSI[*] que je connais bien m’a dit un jour : « Utiliser le mail comme ceci, c’est un peu comme attacher un colis de 10kg à une carte postale » ;-). Eh oui, charger le vélo de votre facteur de cette manière risque fort de l’énerver un peu non ? Et puis il y a des services spéciaux prévus pour l’envoi de colis. Donc, vu sous cet angle, on comprend mieux les directives de la Netiquette relatives à l’utilisation du mail...* Responsable de la sécurité des systèmes d’information

1 IntroductionUn palliatif à l’utilisation du mail est bien sûr la mise en place d’un ser-veur FTP, ou encore la mise à dis-position dans le « cloud » à travers les nombreux services de stockage existants. Ceux qui ont déjà lu mes articles connaissent mes réticences vis-à-vis des données stockées dans le cloud (cf. l’article sur Etherpad dans Linux Pratique n°66). L’actualité m’a d’ailleurs donné plutôt raison avec l’annonce de DropBox de s’ar-roger le droit d’utiliser les données que vous avez stockées [1-2]. Vous pensiez raisonnablement pouvoir profiter gratuitement d’un espace disque conséquent sans contre-partie ? Si oui, vous êtes bien naïf : « tout se paie de nos jours ma p’tite dame ! ». Je vous propose donc ici deux petits outils web en PHP, qui permettent de partager facilement des données à travers le Web. Le premier FileZ [3], bien connu des universitaires, puisque déve-loppé par l’université d’Avignon et Dmanager [4], un porte-documents, qui nous permettra de réaliser une GED (Gestion Électronique des Documents) très simpliste.

2 FileZ« FileZ est une application web qui permet de déposer et gérer des fichiers destinés à être partagés grâce à une URL unique, sur le prin-cipe de l’application perl/mod_perl filex » [3]. Je pense que tout est dit si l’on connaît le fonctionnement de FileX ;-). Ce dernier a été conçu pour faciliter l’échange de gros fichiers (la taille maximale est réglable) d’une manière simplifiée (par rapport à l’utilisation d’un client/serveur FTP) à partir d’un navigateur.

Les fonctionnalités sont les suivantes (reprises sur [3]) :

• PHP/MySQL – Framework Limonade PHP ;

• Authentification modulaire : CAS+LDAP, LDAP seulement, base de données, ou vos propres classes PHP ;

• URL courtes (ex : filez.univ-avignon.fr/x42ni1) ;

• Barre de progression de « téléver-sement » (utilisation non obstruc-tive du Javascript) ;

• Formulaire d’installation ;

• Internationalisation ;

• Protection des fichiers par mot de passe ;

• Envoi d’emails ;

• Tâches cron ;

• Gestion des quotas.

FileZ permet aussi de limiter la durée de disponibilité des fichiers ainsi déposés, comme le dit la page d’ac-cueil d’un FileZ fraîchement installé : « FileZ, distribuez vos fichiers pour une durée limitée ».

2.1 Installation et configurationFileZ étant issu du monde universi-taire, il est prévu pour fonctionner dans un système d’information utilisant les poncifs d’authentifica-tion : CAS (Central Authentification Service via SSO ou Single Sign On) + LDAP. Cependant, dans mon université, si on peut avoir facile-ment accès au CAS, l’accès au LDAP, lui, est strictement réservé aux applications issues du Centre de Ressources Informatiques. On pourrait aussi utiliser LDAP seul, pour cela je vous renvoie au très bon article « Construisez votre

Pour FinirComme vous voyez, la possibilité d’exé-cuter des applications ou bureaux gra-phiques Linux distants ne se limite pas à VNC. Plusieurs possibilités s’offrent à vous et nous n’avons pas parlé de NeatNX [13], l’implémentation serveur NX de Google, le projet n’ayant pas encore atteint une version définitive. Personnellement, étant sous Debian, j’utilise x2go, le projet semblant plus prometteur. Lorsque je n’ai pas la maîtrise du système d’exploitation sur lequel est installé le client, je m’oriente plus vers FreeNX : son développement est en standby, mais son interopérabilité joue en sa faveur. Pour une personne moins à l’aise techniquement cherchant une solution simple à déployer et à prendre en main, je conseillerais plutôt WindowSwitch. À vous de faire votre choix...

Références[1] http://nomachine.com/documen-

tation/html/intr-technology.html

[2] http://openfacts2.berlios.de/wikien/index.php/BerliosProject:FreeNX_-_NX_Components

[3] http://fedoranews.org/contribu-tors/rick_stout/freenx/freenx.txt

[4] http://www.nomachine.com/download.php

[5] http://opennx.net/download.html

[6] http://www.x2go.org

[7] http://code.x2go.org/releases/binary-win32/pyhoca-gui/

[8] http://en.wikipedia.org/wiki/Xpra

[9] http://winswitch.org

[10] http://winswitch.org/documenta-tion/protocols/choose.html

[11] http://winswitch.org/about/use-cases.html

[12] http://winswitch.org/downloads/

[13] http://code.google.com/p/neatx/

[14] http://remmina.sourceforge.net

RemminaUne parenthèse pour parler de Remmina [14], un visionneur de bureau à distance de l’environnement GNOME. C’est le successeur de feu Grdc, avec un nouveau design et plus de fonctionnalités :

• création de profils, de groupes,..

• très bonne gestion des résolutions, du plein écran,

• support de nombreuses technologies via un système de plugins : RDP, VNC, NX, XDMCP, SSH, Telepathy,

• création de tunnels SSH,

• affichage des connexions actives par onglet,

• une barre de commandes supérieure (à la VirtualBox) pour une meilleure utilisation en plein écran.

Création d’une connexion NX

Plusieurs connexions, mais une instance de Remmina grâce aux onglets, depuis un client Linux.

Les paquetages nécessaires sont présents dans les dépôts officiels des distributions majeures. Ils permettent d’installer Remmina rapidement, aussi bien sous Fedora par exemple :

$> yum install remmina remmina-plugins-nx

Que sous Debian :

$> aptitude install remmina remmina-gnome remmina-plugin-nx

D’autres plugins sont à installer pour le support de protocoles supplémen-taires (remmina-plugin-rdp,...). remmina-gnome est une applet pour l’environnement GNOME propre à Debian, vous permettant d’accéder rapidement à vos connexions paramétrées. Pour l’activer, allez dans le menu Éditions > Préférences de Remmina, puis dans l’onglet Applet. Faites ensuite un clic droit sur le tableau de bord supérieur de votre bureau GNOME, Ajouter au tableau de bord et cliquez sur l’applet vision-neur de bureau à distance Remmina.

L’ensemble de vos préférences personnelles et connexions configurées sont contenues dans ~/.remmina/, pour une sauvegarde et la création de connexions par script facilitées. Le logiciel Remmina est vraiment ergonomique, complet et bien pensé, surtout comparé aux autres clients disponibles et je vous invite vraiment à l’adopter si vous vous connectez régulièrement à des machines distantes, quelque système que ce soit. Il n’a pas toutes les options d’un client NX,RDP,... mais c’est un excellent visionneur (presque) tout-en-un.

Votre pingouin à distance en mode graphique

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 22: Sample _linux_pratique

annuaire d’entreprise à l’aide d’OpenLDAP » paru dans Linux Pratique n°66. J’utiliserai ici la solution consistant à stocker les utilisateurs dans une base de données pour l’authentification (méthode la plus simple pour un petit groupe de travail).

L’installation est décrite de manière succincte dans les pages du projet [5]. Une version plus détaillée est dispo-nible en [6].

Nous l’installerons à partir du dépôt Git. Il faut bien sûr que vous ayez installé les utilitaires « git ». En mode adminis-trateur, on effectue les commandes suivantes :

$ sudo -s [sudo] password for yann: # cd /var/www/ # git clone git://github.com/UAPV/FileZ.git filez_web_root # mv filez_web_root/ filez # chown -R www-data:www-data filez/

Ceci nous permet de récupérer les sources de FileZ, puis de renommer le répertoire à notre guise.

Afin de disposer de la barre de progression lors du « télé-versement » de votre fichier, il faut aussi installer l’un des deux systèmes suivants :

• APC : Alternative PHP Cache, sous la forme du paquet php-apc,

• PECL::UploadProgress qui est une classe de PEAR (PHP Extension and Application Repository).

Nous allons ici utiliser APC :

# aptitude install php-apc# echo «apc.rfc1867 = On» >> /etc/php5/apache2/conf.d/apc.ini# apache2ctl restart

Avant l’installation de FileZ, il nous faut préparer la base de données qui servira à l’authentification de nos utilisa-teurs. Nous utiliserons une seule base de données pour FileZ et l’authentification. On y installera la table contenant les utilisateurs et leurs identifiants.

Tout ceci doit être prêt avant l’installation de FileZ, qui demandera toutes ces informations. Je suppose ici que votre serveur LAMP est correctement installé et configuré. Le cas échéant, je vous renvoie à l’article sur Etherpad dans Linux Pratique n°66 qui vous donnera la méthode.

On commence donc par créer la base de données et l’utili-sateur « filez » qui accédera à cette base :

# mysql -u root -p Enter password: Welcome TO the MySQL monitor. Commands end WITH ; OR \g. Your MySQL connection id IS 553 Server version: 5.1.41-3ubuntu12.10 (Ubuntu) Type ‘help;’ OR ‘\h’ FOR help. Type ‘\c’ TO clear the current input statement. mysql> CREATE DATABASE filez; Query OK, 1 row affected (0.03 sec)

mysql> GRANT ALL PRIVILEGES ON filez.* TO ‘filez’@localhost IDENTIFIED BY ‘motdepasse’;

Query OK, 0 rows affected (0.06 sec) mysql> FLUSH privileges; Query OK, 0 rows affected (0.00 sec) mysql> quit Bye #

Les lignes de commandes SQL (Structured Query Language) permettent de créer la base de données, puis l’utilisateur de cette dernière (filez). Normalement, à ce stade, notre utilisateur « filez » possède les pleins droits sur la base de données du même nom.

On se connecte ensuite sur notre base pour y ajouter la nouvelle table, qui contiendra les données utilisateurs :

$ mysql -u filez -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 1100 Server version: 5.1.41-3ubuntu12.10 (Ubuntu) Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the current input statement. mysql> \u filez Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Database changed mysql> CREATE TABLE `filez . test ( `UserID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `UserName VARCHAR( 255 ) NOT NULL , `UserFirstName VARCHAR( 255 ) NOT NULL, `UserLastName VARCHAR( 255 ) NOT NULL , `UserMail` VARCHAR( 255 ) NOT NULL , `UserPassword` VARCHAR( 255 ) NOT NULL ) ENGINE = MYISAM; Query OK, 0 rows affected (0.02 sec)

Ensuite, on insère un utilisateur à l’aide de la commande SQL suivante :

INSERT INTO `filez . Users (`UserID , `UserName , `UserFirstName , `UserLastName , `UserMail , `UserPassword ) VALUES (NULL, ‘yann’, ‘Yann’, ‘MORERE’, ‘[email protected]’, SHA1(‘motdepasse’));

Note

L’encryptage choisi pour le mot de passe est SHA1. C’est l’un des algorithmes reconnus nativement par FileZ pour l’authentification. Pour l’insertion multiple de vos utilisateurs dans la table, je vous conseille l’utilisation de la directive MySQL « LOAD DATA LOCAL INFILE » : LOAD DATA LOCAL INFILE «utilisateur.txt» INTO TABLE Users, en ayant pris soin de mettre dans le fichier texte toutes les données séparées par des tabulations. Il est bien sûr possible de réaliser toutes ces manipulations à l’aide de PHPMyAdmin.

Notre utilitaire de partage est intéressant parce qu’il per-met de déposer des fichiers très volumineux. Mais par défaut, la configuration de votre serveur LAMP ne vous

Partage de documents : FileZ pour les gros fichiers et Dmanager comme porte-documents

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 23: Sample _linux_pratique

B ureautique & entreprises

permet la dépose que de fichiers de 2Mo. Pour permettre la dépose de fichiers plus volumineux, il faut modifier la configuration de PHP dans Apache. Cela passe par l’édi-tion du fichier /etc/php5/apache2/php.ini et la modi-fication des variables suivantes :

upload_max_filesize = 1024M post_max_size = 1024M max_execution_time = 1200 upload_tmp_dir = «/media/data/tmp»

On fixe la taille maximale du fichier « téléversable » à 1Go, on augmente le temps maximum de requête (et oui, 1Go ça met du temps à traverser l’Internet), puis finalement, on indique le répertoire temporaire de dépose.

Note

L’étape précédente est a priori superflue, puisque FileZ utilise un fichier .htaccess à la racine du répertoire d’installation pour passer outre la configuration d’Apache.

La configuration précédente, pour être effective, doit être reportée dans le fichier .htaccess du répertoire racine de FileZ qui reconfigure les directives par défaut d’Apache.

<IfModule mod_rewrite.c> Options +FollowSymlinks Options +Indexes RewriteEngine on # RewriteBase /my_app/ # if your app is in a subfolder # RewriteBase /web/ RewriteCond %{REQUEST_URI} !favicon.ico RewriteCond %{REQUEST_URI} !doc/user/(.*)\. RewriteCond %{REQUEST_URI} !resources/(.*)\. RewriteRule ^(.*)$ index.php [QSA,L] </IfModule> <IfModule mod_php5.c> php_value file_uploads On php_value upload_max_filesize 1024M php_value post_max_size 1024M php_value max_input_time 1200 php_value max_execution_time 1200 </IfModule>

On crée ensuite le répertoire temporaire de dépose sur le serveur et on rend l’utilisateur « www-data » propriétaire.

# mkdir -p /media/data/tmp # chown www-data:www-data /media/data/tmp

On n’oublie pas de relancer Apache avant de lancer l’installation :

# apachectl restart

Voilà, tout est prêt, il ne reste plus qu’à installer à travers un navigateur via l’adresse http://machine_d_installation/filez. Si tout se passe bien, vous obtenez un récapitulatif

des pré-requis nécessaires à l’installation. Vous retrouvez normalement les valeurs précédemment configurées. On passe alors à la suite de la configuration à l’aide du bouton continue. On obtient alors la première page de configuration.

On y renseigne les informations de connexion à la base de données, le quota des utilisateurs, le type de barre de progression (APC dans notre cas), le mode de connexion HTTP (il est possible de tout réaliser en mode HTTPS, si votre serveur Apache est configuré pour utiliser le mode sécurisé). Pour les besoins du test, j’ai mis cette option à « Off ». Si vous désirez utiliser le mode sécurisé je vous renvoie à l’adresse [7]. Cette page permet aussi de fixer les propriétés des fichiers téléversés (durée de vie, taille des mini URL, durée d’extension possible).

La suite de la configuration concerne la méthode d’au-thentification. Comme nous avons choisi le mode « Database », il faut indiquer à FileZ où se trouvent les données d’authentification. Comme nous utilisons la même base que FileZ, on coche l’option « Use the same configuration as FileZ ». Ensuite, on indique à FileZ la table et les colonnes contenant les données d’authentifica-tion, ainsi que la méthode de cryptage du mot de passe.

Si tout est correct, on obtient un message indiquant que le fichier /var/www/filez/config/filez.ini a bien été créé, la base de données configurée et que l’on peut commencer à utiliser FileZ. Voici mon fichier filez.ini fonctionnel :

[app] use_url_rewriting = 1 log_dir = «/var/www/filez/log» upload_dir = «/var/www/filez/uploads» max_file_lifetime = 20 default_file_lifetime = 10 max_extend_count = 7 min_hash_size = 4 max_hash_size = 8 default_locale = «fr» auth_handler_class = «Fz_Controller_Security_Internal» user_factory_class = «Fz_User_Factory_Database» user_quota = «2G» https = «off» progress_monitor = «Fz_UploadMonitor_Apc» admin_email = «[email protected]» [db] dsn = «mysql:host=localhost;dbname=filez» user = «filez» password = «mot de passe» [cron] days_before_expiration_mail = 2 [email] from_name = «Filez Personnal Sharing» host = «smtp.univ-metz.fr» from_email = «[email protected]»name = «Filez Personnal Sharing»

annuaire d’entreprise à l’aide d’OpenLDAP » paru dans Linux Pratique n°66. J’utiliserai ici la solution consistant à stocker les utilisateurs dans une base de données pour l’authentification (méthode la plus simple pour un petit groupe de travail).

L’installation est décrite de manière succincte dans les pages du projet [5]. Une version plus détaillée est dispo-nible en [6].

Nous l’installerons à partir du dépôt Git. Il faut bien sûr que vous ayez installé les utilitaires « git ». En mode adminis-trateur, on effectue les commandes suivantes :

$ sudo -s [sudo] password for yann: # cd /var/www/ # git clone git://github.com/UAPV/FileZ.git filez_web_root # mv filez_web_root/ filez # chown -R www-data:www-data filez/

Ceci nous permet de récupérer les sources de FileZ, puis de renommer le répertoire à notre guise.

Afin de disposer de la barre de progression lors du « télé-versement » de votre fichier, il faut aussi installer l’un des deux systèmes suivants :

• APC : Alternative PHP Cache, sous la forme du paquet php-apc,

• PECL::UploadProgress qui est une classe de PEAR (PHP Extension and Application Repository).

Nous allons ici utiliser APC :

# aptitude install php-apc# echo «apc.rfc1867 = On» >> /etc/php5/apache2/conf.d/apc.ini# apache2ctl restart

Avant l’installation de FileZ, il nous faut préparer la base de données qui servira à l’authentification de nos utilisa-teurs. Nous utiliserons une seule base de données pour FileZ et l’authentification. On y installera la table contenant les utilisateurs et leurs identifiants.

Tout ceci doit être prêt avant l’installation de FileZ, qui demandera toutes ces informations. Je suppose ici que votre serveur LAMP est correctement installé et configuré. Le cas échéant, je vous renvoie à l’article sur Etherpad dans Linux Pratique n°66 qui vous donnera la méthode.

On commence donc par créer la base de données et l’utili-sateur « filez » qui accédera à cette base :

# mysql -u root -p Enter password: Welcome TO the MySQL monitor. Commands end WITH ; OR \g. Your MySQL connection id IS 553 Server version: 5.1.41-3ubuntu12.10 (Ubuntu) Type ‘help;’ OR ‘\h’ FOR help. Type ‘\c’ TO clear the current input statement. mysql> CREATE DATABASE filez; Query OK, 1 row affected (0.03 sec)

mysql> GRANT ALL PRIVILEGES ON filez.* TO ‘filez’@localhost IDENTIFIED BY ‘motdepasse’;

Query OK, 0 rows affected (0.06 sec) mysql> FLUSH privileges; Query OK, 0 rows affected (0.00 sec) mysql> quit Bye #

Les lignes de commandes SQL (Structured Query Language) permettent de créer la base de données, puis l’utilisateur de cette dernière (filez). Normalement, à ce stade, notre utilisateur « filez » possède les pleins droits sur la base de données du même nom.

On se connecte ensuite sur notre base pour y ajouter la nouvelle table, qui contiendra les données utilisateurs :

$ mysql -u filez -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 1100 Server version: 5.1.41-3ubuntu12.10 (Ubuntu) Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the current input statement. mysql> \u filez Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Database changed mysql> CREATE TABLE `filez . test ( `UserID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `UserName VARCHAR( 255 ) NOT NULL , `UserFirstName VARCHAR( 255 ) NOT NULL, `UserLastName VARCHAR( 255 ) NOT NULL , `UserMail` VARCHAR( 255 ) NOT NULL , `UserPassword` VARCHAR( 255 ) NOT NULL ) ENGINE = MYISAM; Query OK, 0 rows affected (0.02 sec)

Ensuite, on insère un utilisateur à l’aide de la commande SQL suivante :

INSERT INTO `filez . Users (`UserID , `UserName , `UserFirstName , `UserLastName , `UserMail , `UserPassword ) VALUES (NULL, ‘yann’, ‘Yann’, ‘MORERE’, ‘[email protected]’, SHA1(‘motdepasse’));

Note

L’encryptage choisi pour le mot de passe est SHA1. C’est l’un des algorithmes reconnus nativement par FileZ pour l’authentification. Pour l’insertion multiple de vos utilisateurs dans la table, je vous conseille l’utilisation de la directive MySQL « LOAD DATA LOCAL INFILE » : LOAD DATA LOCAL INFILE «utilisateur.txt» INTO TABLE Users, en ayant pris soin de mettre dans le fichier texte toutes les données séparées par des tabulations. Il est bien sûr possible de réaliser toutes ces manipulations à l’aide de PHPMyAdmin.

Notre utilitaire de partage est intéressant parce qu’il per-met de déposer des fichiers très volumineux. Mais par défaut, la configuration de votre serveur LAMP ne vous

Partage de documents : FileZ pour les gros fichiers et Dmanager comme porte-documents

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 24: Sample _linux_pratique

[user_factory_options] db_use_global_conf = 1 db_table = «Users» db_username_field = «UserName» db_password_field = «UserPassword» db_password_algorithm = «SHA1» [user_attributes_translation] firstname = «UserFirstName» lastname = «UserLastName» email = «UserMail» id = «UserName» [looknfeel] show_credit = 1 help_url = «help»

2.2 UtilisationFileZ se veut simple et intuitif dans son utilisation. L’adresse http://machine_d_installation/filez nous fournit la page d’authentification. Une fois connecté, le bouton Envoyer un nouveau fichier vous permet de sélectionner le fichier à téléverser, ainsi que la date de début et la durée de mise à disposition. On peut aussi ajouter une petite description du fichier.

Il est possible de verrouiller l’accès au fichier par un mot de passe. Vous devrez alors le fournir à vos collaborateurs.

Figure 1

L’option « M’envoyer des emails de notification » permet d’être tenu informé des opérations sur ce fichier. Ensuite le bouton Envoyer permet de téléverser le fichier. Une jolie barre de progression vous indique alors le pourcentage de données envoyées.

Finalement, votre fichier est correc-tement déposé sur le serveur FileZ. En positionnant la souris sur le nom de fichier, vous obtenez le lien sous la forme d’une « tiny URL ». Il vous est alors possible de supprimer ce fichier, d’allonger la durée de mise à disposi-tion ou encore d’envoyer le lien à des contacts par l’intermédiaire d’un mail. Tout ceci est résumé dans la figure 1.

Lorsque votre collaborateur se connecte à l’URL transmise, il se retrouve sur une page de téléchargement automatique de fichier (Fig. 2).

Figure 2

Je pense qu’il est difficile de faire plus simple pour partager un fichier à travers l’Internet de manière sure. Il faut bien sûr dimensionner votre espace de stockage en fonction des quotas et du nombre d’uti-lisateurs qui accéderont à ce service.

3 DmanagerDmanager est une application web qui permet à quiconque possédant un compte et les droits adéquats sur l’application de consulter, de gérer et de partager en ligne des documents. L’interface se veut simple et configurable. L’administrateur de Dmanager crée des comptes utilisateurs et leur donne des droits sur les docu-ments. Il existe deux versions du logiciel, la version 2.0 qui n’utilise pas de base de données mais des fichiers textes, et la version 4.0 qui utilise MySQL pour stocker les informations.

Le projet est assez dynamique, puisque la dernière mise à jour (version 4.1) date de juin 2011. Ce logiciel est multilingue (français, anglais, espagnol, portugais, brésilien, catalan, italien, hollandais et allemand).

Dans ces pages, nous utiliserons la ver-sion 4, qui possède, grâce à l’utilisation de la base de données, un module de recherche.

Dmanager ne permet pas d’utiliser un LDAP ; pour authentifier les utilisateurs, il faut nécessairement passer par sa gestion des utilisateurs. On réservera donc cet outil à de petits groupes de travail.

Partage de documents : FileZ pour les gros fichiers et Dmanager comme porte-documents

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 25: Sample _linux_pratique

B ureautique & entreprises

3.1 Installation et configurationL’installation se déroule en 2 phases. On commence par créer la base de don-nées et l’utilisateur de cette base de données :

root@kenobi:/var/www# mysql -u root -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 1142 Server version: 5.1.41-3ubuntu12.10 (Ubuntu) Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the current input statement. mysql> CREATE DATABASE dmanager; Query OK, 1 row affected (0.02 sec) mysql> GRANT ALL PRIVILEGES ON dmanager.* TO ‘dmanager’@localhost IDENTIFIED BY ‘motdepasse’; Query OK, 0 rows affected (0.00 sec) mysql> flush privileges; Query OK, 0 rows affected (0.02 sec) mysql>

En tant qu’administrateur, on télécharge l’archive de Dmanager que l’on décom-presse ensuite dans /var/www :

# cd /var/www# wget http://www.dmanager.org/download/dmanager_4.1.tar.gz # tar xzf dmanager_4.1.tar.gz # chown -R www-data:www-data dmanager

Puis, dans un navigateur, on se rend à l’adresse http://machine_d_installation/dmanager. Vous obtenez le formulaire d’installation, que vous remplissez avec les données de connexion à la base :

• nom du serveur (le plus souvent « localhost »),

• le nom de la base de données (« dmanager » dans notre cas),

• le nom de l’utilisateur qui possède les droits sur cette base (ici « dmanager »),

• le mot de passe de connexion à la base de données.

Puis, on indique le login de l’administrateur, ainsi que son mot de passe. Si tout se passe bien vous obtenez un message vous indiquant que vous pouvez vous connecter.

Figure 3

3.2 UtilisationÀ la première connexion (forcément en tant qu’administrateur) vous voici face à l’interface très simple de Dmanager, illustrée par la figure 3. Elle se décompose en 5 parties :

• Le menu général, qui permet d’ad-ministrer les utilisateurs et le porte-documents, de changer son mot de passe, de montrer/cacher les com-mentaires associés aux fichiers, d’accéder à l’aide et finalement de se déconnecter. Le lien Recalculer ce répertoire sera expliqué dans le paragraphe « Bonus » ;

• Le menu « Fichier », qui affiche le contenu du porte-documents pour le répertoire courant. Ce tableau com-porte 5 colonnes relatives aux diffé-rentes informations stockées pour chaque item (nom, taille, type, ...) ;

• Un formulaire d’envoi de fichier dans le porte-documents (documents et commentaires). Si vous cochez l’option « Envoyer un mail pour cet envoi », les destinataires que vous aurez indiqués dans la configuration du porte-documents seront avertis de l’arrivée de ce nouveau fichier.

• Un formulaire de création de réper-toire dans la zone courante du porte-documents ;

• Un moteur de recherche, qui utilise les noms de fichiers et/ou les com-mentaires pour réaliser la recherche.

La légende vous indique les actions réalisables sur chaque document : modifier un commentaire, supprimer, renommer, déplacer un répertoire ou un fichier.

Avant de poursuivre, passons à la configuration de notre porte-docu-ments. Nous allons aussi ajouter quelques utilisateurs.

On clique sur Administrer qui donne accès directement à la ges-tion des utilisateurs, nous verrons cela plus tard. On clique alors sur Configuration principale et l’on accède à la configuration de la lan-gue par défaut, de l’email de l’admi-nistrateur et du style graphique de l’application. Le style de l’application peut être modifié manuellement par l’intermédiaire du fichier style.css.

[user_factory_options] db_use_global_conf = 1 db_table = «Users» db_username_field = «UserName» db_password_field = «UserPassword» db_password_algorithm = «SHA1» [user_attributes_translation] firstname = «UserFirstName» lastname = «UserLastName» email = «UserMail» id = «UserName» [looknfeel] show_credit = 1 help_url = «help»

2.2 UtilisationFileZ se veut simple et intuitif dans son utilisation. L’adresse http://machine_d_installation/filez nous fournit la page d’authentification. Une fois connecté, le bouton Envoyer un nouveau fichier vous permet de sélectionner le fichier à téléverser, ainsi que la date de début et la durée de mise à disposition. On peut aussi ajouter une petite description du fichier.

Il est possible de verrouiller l’accès au fichier par un mot de passe. Vous devrez alors le fournir à vos collaborateurs.

Figure 1

L’option « M’envoyer des emails de notification » permet d’être tenu informé des opérations sur ce fichier. Ensuite le bouton Envoyer permet de téléverser le fichier. Une jolie barre de progression vous indique alors le pourcentage de données envoyées.

Finalement, votre fichier est correc-tement déposé sur le serveur FileZ. En positionnant la souris sur le nom de fichier, vous obtenez le lien sous la forme d’une « tiny URL ». Il vous est alors possible de supprimer ce fichier, d’allonger la durée de mise à disposi-tion ou encore d’envoyer le lien à des contacts par l’intermédiaire d’un mail. Tout ceci est résumé dans la figure 1.

Lorsque votre collaborateur se connecte à l’URL transmise, il se retrouve sur une page de téléchargement automatique de fichier (Fig. 2).

Figure 2

Je pense qu’il est difficile de faire plus simple pour partager un fichier à travers l’Internet de manière sure. Il faut bien sûr dimensionner votre espace de stockage en fonction des quotas et du nombre d’uti-lisateurs qui accéderont à ce service.

3 DmanagerDmanager est une application web qui permet à quiconque possédant un compte et les droits adéquats sur l’application de consulter, de gérer et de partager en ligne des documents. L’interface se veut simple et configurable. L’administrateur de Dmanager crée des comptes utilisateurs et leur donne des droits sur les docu-ments. Il existe deux versions du logiciel, la version 2.0 qui n’utilise pas de base de données mais des fichiers textes, et la version 4.0 qui utilise MySQL pour stocker les informations.

Le projet est assez dynamique, puisque la dernière mise à jour (version 4.1) date de juin 2011. Ce logiciel est multilingue (français, anglais, espagnol, portugais, brésilien, catalan, italien, hollandais et allemand).

Dans ces pages, nous utiliserons la ver-sion 4, qui possède, grâce à l’utilisation de la base de données, un module de recherche.

Dmanager ne permet pas d’utiliser un LDAP ; pour authentifier les utilisateurs, il faut nécessairement passer par sa gestion des utilisateurs. On réservera donc cet outil à de petits groupes de travail.

Partage de documents : FileZ pour les gros fichiers et Dmanager comme porte-documents

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 26: Sample _linux_pratique

Le principe du porte-documents est de pouvoir donner des droits différents (lecture/écriture/pas de droit) aux différents utilisateurs de Dmanager, sur de multiples répertoires. Donc, avant d’ajouter des utilisateurs, nous allons créer une arbo-rescence dans le porte-documents, afin de pouvoir afficher des données différentes aux utilisateurs qui se connectent.

Dans mon cas, j’ai créé deux répertoires à la racine, « Enseignement » et « Recherche ». Je donnerai les droits sur ces répertoires en fonction de la personne qui se connecte. Comme pour d’autres porte-documents, la gestion des droits se fait au niveau du répertoire et non au niveau du fichier. Cette manipulation est résumée dans la figure 4.

Figure 4

On commence par ajouter l’utilisateur, en laissant « Aucun droit » par défaut. On configure ses accès par la suite, en cliquant sur le petit bouton en forme de clés. On configure des droits sur certains des répertoires de notre porte-documents et c’est terminé. Notre nouvel utilisateur n’aura accès qu’aux données et fonctionnalités décrites par ses droits, qui sont bien sûr modifiables a posteriori.

Note

Si vous devez gérer des groupes d’utilisateurs identiques, commencez par configurer un utilisateur de ce groupe et ensuite, lors de la création des autres utilisateurs, utiliser l’option « Droits par défaut sur les répertoires : Pareil que l’utilisateur » et choisissez l’utilisateur modèle.

3.3 BonusPour configurer un accès public à certaines parties de votre porte-documents, il suffit de configurer un compte « public » avec le mot de passe « public », de mettre ces informations sur la page d’accueil de Dmanager, et de configurer des droits de lecture uniquement sur les répertoires désirés.

Si vous désirez ajouter massivement des fichiers à votre porte-documents, il vous faudra un accès FTP au répertoire

« file » dans l’arborescence de Dmanager. Une fois les fichiers téléversés, connectez-vous en administrateur au porte-documents et cliquez sur Recalculer ce répertoire. Les données seront intégrées au porte-documents (sans commentaires bien évidemment).

ConclusionNous avons vu dans cet article deux outils de partage de documents avec tout de même des buts différents. Le premier, FileZ, permettant la mise à disposition de fichiers volumineux à travers le Web et Dmanager, qui permet une gestion élec-tronique très simple de fichiers sous la forme d’un porte-docu-ments. A titre d’exemple, j’utilise le dernier depuis plusieurs années pour stocker d’une part, les différents rapports de pro-jets et stages de nos étudiants (pour la partie enseignement) et d’autre part, les publications de notre laboratoire pour la partie recherche. L’utilisation des commentaires, conjointement au moteur de recherche, permet de retrouver rapidement un document (si l’on a bien sûr indiqué les bons mots-clés dans la partie commentaires :-)).

Références[1] http://www.lesnumeriques.com/dropbox-arroge-

droit-utiliser-vos-donnees-news-20003.html

[2] http://blog.dropbox.com/?p=846

[3] http://gpl.univ-avignon.fr/filez/

[4] http://www.dmanager.org/

[5] https://github.com/UAPV/FileZ/blob/master/README.mkd

[6] https://github.com/UAPV/FileZ/blob/master/doc/INSTALL.markdown

[7] http://doc.ubuntu-fr.org/tutoriel/securiser_apache2_avec_ssl

Partage de documents : FileZ pour les gros fichiers et Dmanager comme porte-documents

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 27: Sample _linux_pratique

HTML5, Le fuTur du Web ?Tristan Colombo

Les navigateurs interprètent de plus en plus de balises HTML5, mais qu’est-ce que ces balises apportent au développement de pages web ? Faisons un point sur les nouveautés disponibles et celles à venir.

HTML5 représente la future évolution de la norme HTML. Vous vous posez peut-être la question : « Pourquoi future » ? Tout simplement parce que cette norme (ou spécification) est encore à l’état de brouillon (draft) et que des modifications peuvent y être apportées avant son adoption définitive. Au moment où cet article est écrit, la dernière version des spécifications HTML5 date du 25 mai 2011 [1]. La précédente norme HTML est bien ancienne, il s’agit de HTML 4.01 et elle date de 1999... soit il y a plus de dix ans ! On peut bien sûr arguer du fait que la norme XHTML est légèrement plus récente (elle apparaît courant 2000). Mais XHTML n’est qu’une sorte de sur-couche à HTML, une façon plus propre de déve-lopper. Elle n’apporte aucune balise et donc aucune pos-sibilité supplémentaire.

De facto, ces normes n’étant pas de première jeunesse, le choix des développeurs s’est porté sur la norme la plus à jour, à savoir XHTML 1.1. En effet, la dernière spécification publiée pour HTML 4.01 date du 24 décembre 1999 [2] et la dernière version de XHTML, la version 1.1, date du 23 novembre 2010 [3]. La tentative d’émergence de la spécification XHTML 2.0 a été stoppée l’année dernière (dernière version du 16 décembre 2010) [4].

Alors, que va apporter HTML5 ? Tout d’abord, la sépa-ration entre le contenu et la présentation a été renforcée en supprimant de nombreux attributs permettant de définir du style en ligne. Un exemple parmi d’autres : l’attribut cellspacing de la balise <table> n’est plus supporté [5]. Il s’agit donc de forcer les développeurs à respecter les bonnes pratiques (un peu comme l’utilisa-tion de l’indentation en Python oblige les développeurs à indenter correctement leur code).

Autre objectif visé, la limitation de l’usage des plugins de lecture de contenu. Le HTML5 se veut indépendant et ne nécessite plus l’usage de Flash pour lire des fichiers audio ou vidéo. On peut même imaginer à terme la mort de Flash et Adobe s’en est visiblement aperçu, puisqu’ils expéri-mentent un produit permettant de traduire directement du Flash en HTML5 et qui leur permettrait donc de continuer à vendre tous leurs produits gravitant autour de cette techno-logie en y enfermant les webdesigners adeptes de Flash. L’existence même de ce projet du nom de Wallaby [6] est un signe fort des craintes inspirées par HTML5 et donc par là-même de son potentiel avéré ou à venir...

Enfin, HTML5 introduit des fonctionnalités « complexes » telles que la géolocalisation, la gestion du glisser/déposer (drag and drop), la persistance des données, etc. Ces fonctionnalités permettent d’envisager plus simplement les développements web d’applicatifs, sans que cela ne signe pour autant l’arrêt de mort des frameworks Javascript.

Je vais vous présenter dans cet article comment créer un document HTML5 et quelles sont les principales nouveau-tés qui ont été introduites par cette nouvelle norme.

1 HTML5 : le document de base

Le document de base HTML5 a été volontairement très simplifié. Vous vous souvenez de la déclaration de la grammaire du document définie dans la balise <!DOCTYPE> ? Cette ligne monstrueusement longue, qu’il fallait enregistrer en tant que modèle d’un éditeur de code ou bien aller rechercher à chaque nouvelle création de fichier ? Eh bien vous pouvez oublier tout ça ! Désormais ce sera <!DOCTYPE html> et vous serez en HTML5. Il vous faudra ensuite déterminer la langue du document grâce à l’attribut lang de la balise <html> et spécifier l’encodage de votre page grâce à une balise <meta> simplifiée. Voici un exemple de document de base où les parties importantes apparaissent en rouge :

01: <!DOCTYPE html>02: 03: <html lang=”fr”>04: 05: <head> 06: <title>Page HTML 5</title> 07: <meta charset=”UTF-8” />08: </head> 09: 10: <body> 11: </body> 12: </html>

On retrouve bien la déclaration de grammaire en ligne 1, la spécification de la langue en ligne 3 et en lignes 6 et 7 les deux balises obligatoires de la section

Web

Le principe du porte-documents est de pouvoir donner des droits différents (lecture/écriture/pas de droit) aux différents utilisateurs de Dmanager, sur de multiples répertoires. Donc, avant d’ajouter des utilisateurs, nous allons créer une arbo-rescence dans le porte-documents, afin de pouvoir afficher des données différentes aux utilisateurs qui se connectent.

Dans mon cas, j’ai créé deux répertoires à la racine, « Enseignement » et « Recherche ». Je donnerai les droits sur ces répertoires en fonction de la personne qui se connecte. Comme pour d’autres porte-documents, la gestion des droits se fait au niveau du répertoire et non au niveau du fichier. Cette manipulation est résumée dans la figure 4.

Figure 4

On commence par ajouter l’utilisateur, en laissant « Aucun droit » par défaut. On configure ses accès par la suite, en cliquant sur le petit bouton en forme de clés. On configure des droits sur certains des répertoires de notre porte-documents et c’est terminé. Notre nouvel utilisateur n’aura accès qu’aux données et fonctionnalités décrites par ses droits, qui sont bien sûr modifiables a posteriori.

Note

Si vous devez gérer des groupes d’utilisateurs identiques, commencez par configurer un utilisateur de ce groupe et ensuite, lors de la création des autres utilisateurs, utiliser l’option « Droits par défaut sur les répertoires : Pareil que l’utilisateur » et choisissez l’utilisateur modèle.

3.3 BonusPour configurer un accès public à certaines parties de votre porte-documents, il suffit de configurer un compte « public » avec le mot de passe « public », de mettre ces informations sur la page d’accueil de Dmanager, et de configurer des droits de lecture uniquement sur les répertoires désirés.

Si vous désirez ajouter massivement des fichiers à votre porte-documents, il vous faudra un accès FTP au répertoire

« file » dans l’arborescence de Dmanager. Une fois les fichiers téléversés, connectez-vous en administrateur au porte-documents et cliquez sur Recalculer ce répertoire. Les données seront intégrées au porte-documents (sans commentaires bien évidemment).

ConclusionNous avons vu dans cet article deux outils de partage de documents avec tout de même des buts différents. Le premier, FileZ, permettant la mise à disposition de fichiers volumineux à travers le Web et Dmanager, qui permet une gestion élec-tronique très simple de fichiers sous la forme d’un porte-docu-ments. A titre d’exemple, j’utilise le dernier depuis plusieurs années pour stocker d’une part, les différents rapports de pro-jets et stages de nos étudiants (pour la partie enseignement) et d’autre part, les publications de notre laboratoire pour la partie recherche. L’utilisation des commentaires, conjointement au moteur de recherche, permet de retrouver rapidement un document (si l’on a bien sûr indiqué les bons mots-clés dans la partie commentaires :-)).

Références[1] http://www.lesnumeriques.com/dropbox-arroge-

droit-utiliser-vos-donnees-news-20003.html

[2] http://blog.dropbox.com/?p=846

[3] http://gpl.univ-avignon.fr/filez/

[4] http://www.dmanager.org/

[5] https://github.com/UAPV/FileZ/blob/master/README.mkd

[6] https://github.com/UAPV/FileZ/blob/master/doc/INSTALL.markdown

[7] http://doc.ubuntu-fr.org/tutoriel/securiser_apache2_avec_ssl

Partage de documents : FileZ pour les gros fichiers et Dmanager comme porte-documents

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 28: Sample _linux_pratique

<head> : le titre de la page et l’encodage de la page qui est nettement moins long que l’ancien <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>.

Ces modifications sont pour l’instant intéressantes pour le développeur, mais n’apportent rien en termes de fonction-nalités. Passons donc aux nouvelles balises.

2 Quelques nouveautésDans cette partie, je vais vous présenter les principales nouveautés introduites par HTML5. Je ne pourrai pas ren-trer dans le détail, mais je vous proposerai pour chaque nouveauté un petit exemple de code.

Les navigateurs intégrant progressivement les nouvelles balises, leur niveau d’intégration est assez disparate. Je me baserai ici sur le navigateur libre le plus employé et loué par les développeurs web : Mozilla Firefox en version 5.

2.1. Les balises multimédias HTML5 permet, via deux nouvelles balises, d’introduire du son ou des vidéos dans les pages web. Plusieurs formats sont autorisés du point de vue des recommandations mais, bien sûr, les navigateurs n’implémentent pas tous les mêmes formats... Pour l’audio quatre formats sont acceptés :

• le format OGG qui est un format libre et donc à privilégier ;• les formats MP3 et ACC (Advanced Audio Coding,

meilleure compression que le MP3 ou le OGG), qui sont des formats propriétaires ;

• et enfin le format WAV... qui est trop lourd pour du Web !

Au niveau de la vidéo, le choix se restreint à trois formats :

• les formats OGV (OGG pour la vidéo) et WebM (sou-tenu par Google) qui sont des formats libres ;

• le format H.264, format propriétaire soutenu par Apple.

Les balises audio et vidéo fonctionnent sur le même modèle, seul leur nom change. Pour l’audio se sera <audio> et pour la vidéo... <video> ! Voici un exemple simple d’utilisation de la balise <audio> :

01: <audio src=”ding.ogg” controls preload> 02: Votre navigateur ne reconnaît pas les balises audio HTML5 03: </audio>

Si la balise <audio> n’est pas reconnue par le naviga-teur, la ligne 2 sera affichée. Sinon, le fichier son ding.ogg sera chargé en mémoire (attribut preload) et une barre de contrôle sera affichée (attribut controls). Les attributs ne sont bien sûr pas obligatoires et si vous souhaitez contrôler la lecture du son depuis Javascript, il vous suffira d’ajouter un identifiant à votre balise audio (<audio id=”mon_son” ...>) et d’invoquer la méthode play() :

document.getElementById(“mon_son”).play();

Enfin, si vous voulez vous assurer que la lecture de votre page entraînera le même comportement dans la majo-rité des navigateurs web, vous devrez spécifier plusieurs sources, dans différents formats, de votre fichier de son. Les navigateurs utiliseront alors le format qu’ils reconnaissent :

<audio id=”mon_son”> <source src=”ding.ogg” /> <source src=”ding.mp3” /> <source src=”ding.acc” /></audio>

Pour adapter ces exemples à l’usage de la vidéo, il suffit de remplacer <audio> par <video> et de remplacer les formats audio par des formats vidéo...

2.2. La structuration sémantiqueLes balises sémantiques n’ont pas d’influence sur l’aspect visuel de la page (à moins que vous n’en ayez décidé autrement à l’aide de règles CSS). Elles servent à struc-turer de manière logique le contenu de vos pages dans le but d’aider les automates à récupérer des informations. Ces automates peuvent être des scripts d’utilisateurs désirant récupérer des informations pour les utiliser dans un enchaînement de scripts/programmes, ou bien des robots de moteurs de recherche.

La structuration sémantique proposée par HTML5 corres-pond au schéma présenté dans la figure 1. Les balises sont présentées sur la figure. Il faudra faire attention ici à ne pas confondre la balise <header> de la structuration sémantique avec la balise <head> de l’en-tête du docu-ment HTML...

Fig. 1 : Structuration sémantique d’une page web

2.3. Les formulairesLes formulaires permettent de récolter des informations en vue d’un traitement côté client ou côté serveur. HTML5 propose de nouveaux attributs pour les champs existants ou de nouveaux champs.

HTML5, le futur du Web ?

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 29: Sample _linux_pratique

Tout d’abord, au niveau des champs de texte (<input type=”text” ... />), les attributs suivants ont été ajoutés (entre parenthèses sont indiquées les valeurs possibles de l’attribut) :

• autofocus : donne le focus au champ... plus besoin de faire appel à Javascript !

• autocomplete (on ou off) : active ou désactive l’affi-chage d’une liste de propositions calculées en fonction du nom du champ ;

• placeholder (texte) : affiche un message d’aide dans le champ. Ce message disparaît lors de la prise de focus et lorsque le champ n’est plus vide ;

• required : le champ doit obligatoirement être com-plété. À la perte du focus, si le champ est vide, il appa-raîtra encadré de rouge (dans Firefox) et lors de la validation, une bulle d’aide indiquera que le champ ne peut être vide ;

• pattern (chaîne contenant une expression régulière) : cet attribut permet de donner une expression régulière qui doit être vérifiée par le contenu du champ pour que le formulaire puisse être validé. Par exemple, pour saisir un code de quatre chiffres, on utilisera : pattern=”[0-9]{4}”.

Deux nouveaux champs texte sont apparus : url et email. Ces champs vérifient automatiquement que la sai-sie corresponde bien à une URL ou à une adresse mail :

Votre mail : <input type=”email” name=”mail” />

D’autres champs sont présents dans les spécifications et devraient donc apparaître prochainement : les champs de saisie d’une date (affichage d’un calendrier), saisie des heures, d’une couleur (diagramme de sélection d’une cou-leur), saisie de mots-clés pour effectuer une recherche et sélection d’une valeur par curseur. Mais pour ceux-là il faut attendre un peu...

2.4. Le dessinLa balise <canvas> permet d’insérer une zone de dessin dans les pages et cette zone sera ensuite utilisée depuis Javascript pour dessiner. Par défaut, la zone de dessin mesure 300px par 150px et n’a pas de bordure (elle est donc invisible). Pour la déclarer on utilise la syntaxe suivante :

<canvas id=”dessin”> Votre navigateur ne supporte pas la balise canvas de HTML5</canvas>

On récupère ensuite depuis Javascript un objet permet-tant de dessiner sur cette zone :

var canvas = document.getElementById(“dessin”).getContext(“2d”);

À ce point, je dois vous mettre en garde de ne pas tom-ber dans l’erreur classique consistant à penser que tous les objets d’une page sont disponibles à n’importe quel moment... ils sont en fait disponibles une fois que la page

est chargée et c’est seulement à ce moment-là que vous y aurez accès. Pour utiliser la balise <canvas> votre page aura alors la structure suivante :

<!DOCTYPE html>

<html lang=”fr”>

<head> <title>Dessin</title> <meta charset=”UTF-8” /> <script> function dessiner() { var canvas = document.getElementById(“dessin”).getContext(“2d”); // Fonctions de dessin // ... } </script> </head>

<body onload=”dessiner();”> <canvas id=”dessin”> Votre navigateur ne supporte pas la balise canvas de HTML5 </canvas> </body></html>

En ce qui concerne les fonctions de dessin, elles utili-seront un système de coordonnées cartésiennes, dont l’origine est située en haut à gauche de l’élément canvas (plus x est élevé, plus on se situe à droite de la zone de dessin et plus y est élevé, plus on se situe en bas de la zone de dessin). Voici quelques actions de dessin qui peuvent être effectuées :

• dessiner un rectangle plein : canvas.fillRect(x, y, longueur, hauteur) ;

• dessiner la bordure d’un rectangle : canvas.storkeRect(x, y, longueur, hauteur) ;

• changer la couleur de dessin : canvas.strokeStyle = “#rgb” (la couleur est au format RGB, comme dans les règles CSS) ;

• changer la couleur de remplissage : canvas.fillStyle = “#rgb” ;

• changer l’épaisseur du trait : canvas.lineWidth = n ;

• dessiner des lignes à la façon de Logo :

1. commencer un chemin : canvas.beginPath()

2. aller au point (x1, y1) : canvas.moveTo(x1, y1)

3. tracer un trait jusqu’au point (x2, y2) depuis la position courante : canvas.lineTo(x2, y2)

4. recommencer les étapes 2 et 3 pour finir le dessin

5. afficher le dessin : canvas.stroke()

• insérer du texte, ajouter des ombres, effectuer des transformations (transition, rotation et mise à l’échelle), etc.

Web

<head> : le titre de la page et l’encodage de la page qui est nettement moins long que l’ancien <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>.

Ces modifications sont pour l’instant intéressantes pour le développeur, mais n’apportent rien en termes de fonction-nalités. Passons donc aux nouvelles balises.

2 Quelques nouveautésDans cette partie, je vais vous présenter les principales nouveautés introduites par HTML5. Je ne pourrai pas ren-trer dans le détail, mais je vous proposerai pour chaque nouveauté un petit exemple de code.

Les navigateurs intégrant progressivement les nouvelles balises, leur niveau d’intégration est assez disparate. Je me baserai ici sur le navigateur libre le plus employé et loué par les développeurs web : Mozilla Firefox en version 5.

2.1. Les balises multimédias HTML5 permet, via deux nouvelles balises, d’introduire du son ou des vidéos dans les pages web. Plusieurs formats sont autorisés du point de vue des recommandations mais, bien sûr, les navigateurs n’implémentent pas tous les mêmes formats... Pour l’audio quatre formats sont acceptés :

• le format OGG qui est un format libre et donc à privilégier ;• les formats MP3 et ACC (Advanced Audio Coding,

meilleure compression que le MP3 ou le OGG), qui sont des formats propriétaires ;

• et enfin le format WAV... qui est trop lourd pour du Web !

Au niveau de la vidéo, le choix se restreint à trois formats :

• les formats OGV (OGG pour la vidéo) et WebM (sou-tenu par Google) qui sont des formats libres ;

• le format H.264, format propriétaire soutenu par Apple.

Les balises audio et vidéo fonctionnent sur le même modèle, seul leur nom change. Pour l’audio se sera <audio> et pour la vidéo... <video> ! Voici un exemple simple d’utilisation de la balise <audio> :

01: <audio src=”ding.ogg” controls preload> 02: Votre navigateur ne reconnaît pas les balises audio HTML5 03: </audio>

Si la balise <audio> n’est pas reconnue par le naviga-teur, la ligne 2 sera affichée. Sinon, le fichier son ding.ogg sera chargé en mémoire (attribut preload) et une barre de contrôle sera affichée (attribut controls). Les attributs ne sont bien sûr pas obligatoires et si vous souhaitez contrôler la lecture du son depuis Javascript, il vous suffira d’ajouter un identifiant à votre balise audio (<audio id=”mon_son” ...>) et d’invoquer la méthode play() :

document.getElementById(“mon_son”).play();

Enfin, si vous voulez vous assurer que la lecture de votre page entraînera le même comportement dans la majo-rité des navigateurs web, vous devrez spécifier plusieurs sources, dans différents formats, de votre fichier de son. Les navigateurs utiliseront alors le format qu’ils reconnaissent :

<audio id=”mon_son”> <source src=”ding.ogg” /> <source src=”ding.mp3” /> <source src=”ding.acc” /></audio>

Pour adapter ces exemples à l’usage de la vidéo, il suffit de remplacer <audio> par <video> et de remplacer les formats audio par des formats vidéo...

2.2. La structuration sémantiqueLes balises sémantiques n’ont pas d’influence sur l’aspect visuel de la page (à moins que vous n’en ayez décidé autrement à l’aide de règles CSS). Elles servent à struc-turer de manière logique le contenu de vos pages dans le but d’aider les automates à récupérer des informations. Ces automates peuvent être des scripts d’utilisateurs désirant récupérer des informations pour les utiliser dans un enchaînement de scripts/programmes, ou bien des robots de moteurs de recherche.

La structuration sémantique proposée par HTML5 corres-pond au schéma présenté dans la figure 1. Les balises sont présentées sur la figure. Il faudra faire attention ici à ne pas confondre la balise <header> de la structuration sémantique avec la balise <head> de l’en-tête du docu-ment HTML...

Fig. 1 : Structuration sémantique d’une page web

2.3. Les formulairesLes formulaires permettent de récolter des informations en vue d’un traitement côté client ou côté serveur. HTML5 propose de nouveaux attributs pour les champs existants ou de nouveaux champs.

HTML5, le futur du Web ?

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 30: Sample _linux_pratique

On peut ainsi réaliser des dessins plus ou moins complexes (Fig. 2). Pour plus d’informations sur le des-sin dans la balise <canvas>, je vous invite à consulter la page qui y est consacrée sur le site developper.mozilla.org [7].

Fig. 2 : Image réalisée en Javascript dans une balise <canvas>.

2.5. Le glisser/déposer ou drag and dropLe glisser/déposer est la faculté de pouvoir cliquer sur des éléments de vos pages web pour les déposer dans une zone prévue à cet effet. HTML5 introduit de nouveaux événe-ments, dont trois nous intéresseront particulièrement ici :

• ondragstart : événement déclenché lorsque l’on clique sur un objet et que l’on commence à le déplacer. Pour pouvoir être déplacé, un objet doit avoir été identifié comme élément pouvant participer au glisser/déposer grâce à l’attribut draggable=”true”.

• ondragover : événement déclen-ché lorsqu’un élément en cours de déplacement passe au-dessus d’une zone sur laquelle on peut le déposer.

• ondrop : événement déclenché lorsque l’on lâche l’élément dans une zone pouvant l’accueillir.

Pouvoir gérer les événements liés au glisser/déposer ne suffit pas. Il faut également pouvoir transférer des informations de la zone de départ à la zone cible. Pour cela HTML5 nous permet d’utiliser event.dataTransfer. Cet objet permet de spécifier le type de déplacement (copie, déplacement, lien, etc.) par l’intermédiaire de l’attribut effectAllowed et, grâce à la

méthode setData(), nous pouvons transmettre des données. setData() requiert deux paramètres : le type de données qui est transmis (“Text” pour une chaîne de caractères), puis la donnée proprement dite.

Voici un petit exemple mettant en œuvre ces différentes notions :

01: <!DOCTYPE html> 02: 03: <html lang=”fr”> 04: <head> 05: <style> 06: .cible 07: { 08: float: left; 09: width: 200px; 10: height: 200px; 11: margin: 5px; 12: border: 2px solid #aaa; 13: } 14: 15: .element 16: { 17: width: 100px; 18: height: 100px; 19: margin: 10px; 20: padding: 5px; 21: background-color: #aaa; 22: } 23: </style> 24: 25: <script> 26: function dragStart(event) 27: { 28: console.log(‘Detection de debut de drag and drop’); 29: event.dataTransfer.effectAllowed = ‘move’; 30: event.dataTransfer.setData(“Text”, event.target.getAttribute(‘id’)); 31: }; 32: 33: function dragOver(event) 34: { 35: console.log(‘Zone de larguage “’ + event.target.getAttribute(‘id’) +’” detectee’); 36: return false; 37: }; 38: 39: function drop(event) 40: { 41: var element = event.dataTransfer.getData(“Text”); 42: var cible_id = event.target.getAttribute(‘id’); 43: console.log(‘Larguage de l\’element sur “’ + cible_id +’”’); 44: if (cible_id == ‘elt’) 45: { 46: console.log(‘Interdiction de larguer l\’element sur lui-meme’); 47: } 48: else 49: { 50: event.target.appendChild(document.getElementById(element)); 51: event.stopPropagation(); 52: } 53: return false; 54: }; 55: </script>56: </head> 57:

HTML5, le futur du Web ?

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 31: Sample _linux_pratique

58: <body> 59: 60: <div class=”cible” id=”cible_1” ondragstart=”dragStart(event);” ondragover=”return 61: dragOver(event);” ondrop=”return drop(event);”> 62: <div id=”elt” class=”element” draggable=”true”> 63: Linux Pratique 64: </div> 65: </div> 66: <div class=”cible” id=”cible_2” ondragstart=”dragStart(event);” ondragover=”return 67: dragOver(event);” ondrop=”return drop(event);”> 68: </div> 69: </body> 70: </html>

Vous remarquerez tout d’abord que j’ai inséré les règles CSS et le Javascript directement dans la page web dans la partie <head>... en dehors d’un exemple, il est préférable de transférer le code de ces balises dans des fichiers .css et .js indépendants. Vous pouvez voir également que je n’ai pas précisé le type des informations de mes balises <style> (en ligne 5) et <script> (en ligne 25). En HTML5, la valeur par défaut de l’attribut type a été fixée à “text/css” pour la balise <style> et à “text/javascript” pour la balise <script>... donc inutile de les préciser !

J’ai utilisé l’extension Firebug pour afficher des messages à l’aide de la commande console.log(). Je pense ce code compréhensible avec les indications données précédemment mises à part, peut-être, les lignes 50 et 51. Ces lignes permettent d’ancrer physiquement l’élément déplacé à la cible et de stopper la propagation des événements.

2.6. La géolocalisationLa géolocalisation permet l’adaptation du contenu à la position de l’internaute. Du point de vue du respect de la vie privée, le partage de cette information n’est pas automatique et c’est à l’internaute, lors de la navigation, de spécifier s’il accepte ou non de révéler son emplacement. La localisation est obtenue, en fonction des accès, soit par GPS, soit par triangulation Wifi, soit à partir de l’adresse IP.

L’API Javascript va nous permettre de connaître la position (longitude, latitude), l’altitude, la précision de la mesure (en fonction du mode de calcul) et la vitesse de déplacement (pour les mobiles bien sûr... ne partez pas avec votre unité cen-trale sous le bras...).

L’objet permettant de manipuler ces données s’appelle navigator.geolocation. Voici un exemple d’application :

01: if (navigator.geolocation) 02: { 03: navigator.geolocation.getCurrentPosition( 04: function (position) 05: { 06: var latitude = position.coords.latitude ; 07: var longitude = position.coords.longitude ; 08: // Utilisation des données 09: console.log(‘Position : lat=’ + latitude + ‘, long=’ + longitude; 10: }11: ); 12: } 13: else 14: { 15: alert(‘pas de support...’); 16: }

La méthode navigator.geolocation.getCurrentPosition() requiert une fonction anonyme en tant que paramètre et c’est cette fonction (lignes 4 à 10) qui va utiliser les données transmises.

2.7. Persistance des donnéesAvant HTML5, pour stocker des données chez le client, il fallait utili-ser les cookies... mais le problème des cookies c’est que c’est tout petit (maximum 4Ko) ! En HTML5, on vous permet de réaliser une sorte de session, mais côté client et de stoc-ker jusqu’à 10Mo de données par domaine. Ces données sont bien sûr accessibles hors connexion.

Pour stocker des données, nous utiliserons un objet de type storage (localStorage, valable indéfini-ment ou sessionStorage, valable jusqu’à la fermeture du navigateur). Les données y seront stockées sous forme de tableau associatif : à une clé correspond une valeur. Le stoc-kage d’une valeur se fera alors par :

sessionStorage[‘cle’]=’valeur’;

Pour accéder à une valeur, il faut connaître le nom de la clé (ici par exemple : alert(sessionStorage[‘cle’]);) et pour supprimer un élément on utilise sessionStorage.removeItem(‘cle’). L’extension Firebug peut-être ici encore très utile puisqu’elle permet d’afficher le contenu des objets storage dans la console de log.

Attention, pour pouvoir utiliser la persistance de données sous Firefox, la variable dom.storage.enabled doit être à true (tapez about:config dans la barre d’adresse pour accéder à la configu-ration de Firefox).

2.8. Les WebSocketsLe protocole HTTP n’est pas prévu pour des interactions en temps réel avec un serveur : à chaque requête, on doit ouvrir une nouvelle connexion. Les WebSockets constituent un nouveau protocole permettant d’envoyer et de

Web

On peut ainsi réaliser des dessins plus ou moins complexes (Fig. 2). Pour plus d’informations sur le des-sin dans la balise <canvas>, je vous invite à consulter la page qui y est consacrée sur le site developper.mozilla.org [7].

Fig. 2 : Image réalisée en Javascript dans une balise <canvas>.

2.5. Le glisser/déposer ou drag and dropLe glisser/déposer est la faculté de pouvoir cliquer sur des éléments de vos pages web pour les déposer dans une zone prévue à cet effet. HTML5 introduit de nouveaux événe-ments, dont trois nous intéresseront particulièrement ici :

• ondragstart : événement déclenché lorsque l’on clique sur un objet et que l’on commence à le déplacer. Pour pouvoir être déplacé, un objet doit avoir été identifié comme élément pouvant participer au glisser/déposer grâce à l’attribut draggable=”true”.

• ondragover : événement déclen-ché lorsqu’un élément en cours de déplacement passe au-dessus d’une zone sur laquelle on peut le déposer.

• ondrop : événement déclenché lorsque l’on lâche l’élément dans une zone pouvant l’accueillir.

Pouvoir gérer les événements liés au glisser/déposer ne suffit pas. Il faut également pouvoir transférer des informations de la zone de départ à la zone cible. Pour cela HTML5 nous permet d’utiliser event.dataTransfer. Cet objet permet de spécifier le type de déplacement (copie, déplacement, lien, etc.) par l’intermédiaire de l’attribut effectAllowed et, grâce à la

méthode setData(), nous pouvons transmettre des données. setData() requiert deux paramètres : le type de données qui est transmis (“Text” pour une chaîne de caractères), puis la donnée proprement dite.

Voici un petit exemple mettant en œuvre ces différentes notions :

01: <!DOCTYPE html> 02: 03: <html lang=”fr”> 04: <head> 05: <style> 06: .cible 07: { 08: float: left; 09: width: 200px; 10: height: 200px; 11: margin: 5px; 12: border: 2px solid #aaa; 13: } 14: 15: .element 16: { 17: width: 100px; 18: height: 100px; 19: margin: 10px; 20: padding: 5px; 21: background-color: #aaa; 22: } 23: </style> 24: 25: <script> 26: function dragStart(event) 27: { 28: console.log(‘Detection de debut de drag and drop’); 29: event.dataTransfer.effectAllowed = ‘move’; 30: event.dataTransfer.setData(“Text”, event.target.getAttribute(‘id’)); 31: }; 32: 33: function dragOver(event) 34: { 35: console.log(‘Zone de larguage “’ + event.target.getAttribute(‘id’) +’” detectee’); 36: return false; 37: }; 38: 39: function drop(event) 40: { 41: var element = event.dataTransfer.getData(“Text”); 42: var cible_id = event.target.getAttribute(‘id’); 43: console.log(‘Larguage de l\’element sur “’ + cible_id +’”’); 44: if (cible_id == ‘elt’) 45: { 46: console.log(‘Interdiction de larguer l\’element sur lui-meme’); 47: } 48: else 49: { 50: event.target.appendChild(document.getElementById(element)); 51: event.stopPropagation(); 52: } 53: return false; 54: }; 55: </script>56: </head> 57:

HTML5, le futur du Web ?

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 32: Sample _linux_pratique

recevoir des données en continu. On peut ainsi voir Ajax comme une « bidouille » basée sur l’objet XMLHTTPRequest et les WebSockets comme un protocole standardisé.

Les WebSockets en sont actuellement à leurs balbutiements et souffrent de graves failles de sécurité. Firefox a d’ailleurs désactivé le support des WebSockets par défaut.

Ce protocole nécessite l’utilisation d’un serveur WebSockets. Il en existe de très nombreux et tous en sont au stade du développement. Je ne m’attar-derai donc pas sur ce protocole, mais il représente une des avancées fondamentales proposées par HTML5... quand il sera opérationnel...

ConclusionCet article nous a permis d’avoir un aperçu rapide des principales nouveautés introduites par HTML5. Devant l’ampleur de la tâche qui attend les éditeurs de navigateurs pour intégrer les der-nières spécifications et sachant que la version « release candidate » de la norme HTML5 est prévue pour 2012 et que donc la version finale ne devrait arriver qu’en 2013/2014, la prise en charge totale de la norme HTML5 n’est pas pour demain. Mais d’ici là, rien ne vous empêche d’utiliser les notions que les navigateurs inté-greront au fur et à mesure et de suivre le projet HTML5Rocks [8] qui est une mine d’informations et d’exemples sur HTML5.

Références[1] Spécification HTML 5 :

http://www.w3.org/TR/html5/

[2] Spécification HTML 4.01 : http://www.w3.org/TR/html401/

[3] Spécification XHTML 1.1 : http://www.w3.org/TR/xhtml1.1/

[4] Spécification XHTML 2.0 : http://www.w3.org/TR/xhtml2/

[5] Attributs HTML5 de la balise <table> : http://www.w3schools.com/html5/tag_table.asp

[6] Projet Wallaby de traduction Flash/HTML5 : http://labs.adobe.com/technologies/wallaby/

[7] Utilisation de la balise <canvas> : https://developer.mozilla.org/en/canvas_tutorial

[8] Site du projet HTML5Rocks : http://www.html5rocks.com/en/

Tips

AdApTez voTre signATure à vos différenTs cercLes Avec WisesTAMp !Lorsque vous rédigez un e-mail à différents moments de la journée, vous êtes tour-à-tour parent, ami, collègue, membre d’une associa-tion, blogueur, vendeur en ligne... Que vous ayez une ou plusieurs adresse(s) électronique(s), que vous ayez fait le choix ou non de cen-traliser toutes vos adresses e-mail sur une seule boîte, l’extension WiseStamp (http://www.wisestamp.com), disponible pour Firefox, Chrome et Safari, vous sera d’une grande aide pour rédiger en un même lieu toutes vos signatures afin de les utiliser facilement dans toutes vos applications compatibles (AOL, Gmail, Hotmail, Yahoo! Mail...) et ce, quelque soit vos différents espaces numériques à condi-tion bien sûr d’avoir opté pour un compte gratuit en ligne.

WiseStamp ne se contente pas de vous proposer un traitement de texte et de créer autant de signatures que nécessaire - fonction limitée toute-fois à deux paraphes dans sa version gratuite - WiseStamp offre aussi la possibilité de mettre en valeur votre vie numérique à la suite de votre signature. Si vous avez par exemple un site WordPress, un compte Twitter, Google Plus, eBay ou encore un fil RSS, vous pouvez mettre en avant vos dernières publications à la fin de votre e-mail pour en faire la promotion !

Afin que votre présence sur les différents réseaux sociaux soit enfin connue de tous vos correspondants, WiseStamp permet de les ajouter à votre signature avec ou sans leur logo (Twitter, Facebook, Google +, LinkedIn, YouTube, Flickr, MySpace, Last.fm, etc.). Si vous aimez être joignable en toutes circonstances et surtout vous adapter à vos correspondants, il est fort probable que vous utilisiez de nombreuses messageries instantanées (AIM, BlackBerry, Google Talk, Y! Messenger, ICQ, MSN, Skype, QQ) ; WiseStamp permet aussi d’en faire la promotion !

Bien évidemment, si lors de la rédaction d’un courriel vous ne souhaitez pas voir figurer à la fin de celui-ci votre signature WiseStamp, il suffit de cliquer sur le logo de cette extension dans votre boîte e-mail et de choisir None.

WiseStamp, une solution pour faire votre promotion et garder le contact en toute simplicité !

Sarah Vert

HTML5, le futur du Web ?

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 33: Sample _linux_pratique

Décryptage

Le mécanisme d’auto-compLétion du sheLLFleur Brosseau

Les interpréteurs de commandes proposent généralement une fonctionnalité de complétion automatique, une fonctionnalité vraiment pratique qui permet de saisir moins d’informations au clavier (et d’éviter les fautes de frappe !) et surtout, qui permet de gagner en rapidité. Magique ? Pas vraiment...

Note

Il paraît que le terme « auto-complétion » est un anglicisme que l’on devrait remplacer par « complètement automatique ». Mais 1) je trouve ce terme vraiment trop bizarre, et 2) je n’ai pas l’impression qu’il soit véritablement utilisé... Je m’en tiendrai donc au premier, au risque de déplaire aux amoureux de la langue française.

1 L’auto-complétion sous Bash

Dans votre émulateur de terminal, il vous suffit de com-mencer à saisir une commande ou un nom de fichier, puis d’appuyer sur la touche [Tab] pour que le shell complète automatiquement votre saisie, ou affiche - avec 2 tabula-tions - la liste des possibilités.

Si vous obtenez un « bip » pour tout résultat, c’est qu’au-cun fichier ni aucune commande commençant par les caractères saisis n’existe (mais cela peut également signi-fier que vous tentez d’exécuter une commande qui néces-site les droits d’administrateur du système, alors que vous êtes connecté en tant qu’utilisateur normal, attention...).

La fonctionnalité d’auto-complétion de votre shell Bash est possible grâce à cette instruction du fichier ~/.bashrc :

if [ -f /etc/bash_completion ]; then . /etc/bash_completion fi

En effet, le fichier /etc/bash_completion, fourni par le paquet bash-completion (installé par défaut sur toutes les distributions Linux) comporte l’ensemble des règles d’auto-complétion et c’est grâce à lui que vous pouvez compléter un nom de commande, de paquet, de fichier, un nom d’hôte, etc.

En voici un (tout petit) extrait :

complete -f -X ‘!*.?(t)bz?(2)’ bunzip2 bzcat pbunzip2 pbzcat complete -f -X ‘!*.@(zip|[ejw]ar|exe|pk3|wsz|zargo|xpi|sxw|o[tx]t| od[fgpst]|epub|apk)’ unzip zipinfo complete -f -X ‘*.Z’ compress znew [...]

Note

La version de Bash utilisée dans le cadre de cet article est la version 4.1.5 ; la version de bash-completion est la version 1.3.

Le principe est le suivant : à chaque demande d’auto-complétion (initiée par la touche [Tab]), une fonction Bash, déterminée par la commande complete, est exécutée. Cette fonction va traiter l’auto-complétion en fonction du contexte (nombre d’arguments attendus par la commande, caractères déjà saisis, etc.).

Le répertoire /etc/bash_completion.d/ comporte lui aussi des règles d’auto-complétion, plus complexes, propres à certaines commandes (aptitude, configure, gpg, mount, ssh, etc.). Ainsi, vous pouvez par exemple taper ssh puis [Tab] et automatiquement c’est la liste des hôtes conte-nus dans le fichier ~/.ssh/known_hosts qui apparaît.

Pour obtenir la liste des commandes supportant la com-plétion automatique, vous pouvez saisir :

~$ completecomplete -F _kill kill complete -F _renice renice complete -F _update_alternatives alternatives complete -F _smbpasswd smbpasswd complete -o filenames -F _reportbug reportbug [...]

Les commandes complete et compgen (voir plus bas) sont les deux commandes internes de Bash qui permet-tent de manipuler les fonctions d’auto-complétion [1].

recevoir des données en continu. On peut ainsi voir Ajax comme une « bidouille » basée sur l’objet XMLHTTPRequest et les WebSockets comme un protocole standardisé.

Les WebSockets en sont actuellement à leurs balbutiements et souffrent de graves failles de sécurité. Firefox a d’ailleurs désactivé le support des WebSockets par défaut.

Ce protocole nécessite l’utilisation d’un serveur WebSockets. Il en existe de très nombreux et tous en sont au stade du développement. Je ne m’attar-derai donc pas sur ce protocole, mais il représente une des avancées fondamentales proposées par HTML5... quand il sera opérationnel...

ConclusionCet article nous a permis d’avoir un aperçu rapide des principales nouveautés introduites par HTML5. Devant l’ampleur de la tâche qui attend les éditeurs de navigateurs pour intégrer les der-nières spécifications et sachant que la version « release candidate » de la norme HTML5 est prévue pour 2012 et que donc la version finale ne devrait arriver qu’en 2013/2014, la prise en charge totale de la norme HTML5 n’est pas pour demain. Mais d’ici là, rien ne vous empêche d’utiliser les notions que les navigateurs inté-greront au fur et à mesure et de suivre le projet HTML5Rocks [8] qui est une mine d’informations et d’exemples sur HTML5.

Références[1] Spécification HTML 5 :

http://www.w3.org/TR/html5/

[2] Spécification HTML 4.01 : http://www.w3.org/TR/html401/

[3] Spécification XHTML 1.1 : http://www.w3.org/TR/xhtml1.1/

[4] Spécification XHTML 2.0 : http://www.w3.org/TR/xhtml2/

[5] Attributs HTML5 de la balise <table> : http://www.w3schools.com/html5/tag_table.asp

[6] Projet Wallaby de traduction Flash/HTML5 : http://labs.adobe.com/technologies/wallaby/

[7] Utilisation de la balise <canvas> : https://developer.mozilla.org/en/canvas_tutorial

[8] Site du projet HTML5Rocks : http://www.html5rocks.com/en/

Tips

AdApTez voTre signATure à vos différenTs cercLes Avec WisesTAMp !Lorsque vous rédigez un e-mail à différents moments de la journée, vous êtes tour-à-tour parent, ami, collègue, membre d’une associa-tion, blogueur, vendeur en ligne... Que vous ayez une ou plusieurs adresse(s) électronique(s), que vous ayez fait le choix ou non de cen-traliser toutes vos adresses e-mail sur une seule boîte, l’extension WiseStamp (http://www.wisestamp.com), disponible pour Firefox, Chrome et Safari, vous sera d’une grande aide pour rédiger en un même lieu toutes vos signatures afin de les utiliser facilement dans toutes vos applications compatibles (AOL, Gmail, Hotmail, Yahoo! Mail...) et ce, quelque soit vos différents espaces numériques à condi-tion bien sûr d’avoir opté pour un compte gratuit en ligne.

WiseStamp ne se contente pas de vous proposer un traitement de texte et de créer autant de signatures que nécessaire - fonction limitée toute-fois à deux paraphes dans sa version gratuite - WiseStamp offre aussi la possibilité de mettre en valeur votre vie numérique à la suite de votre signature. Si vous avez par exemple un site WordPress, un compte Twitter, Google Plus, eBay ou encore un fil RSS, vous pouvez mettre en avant vos dernières publications à la fin de votre e-mail pour en faire la promotion !

Afin que votre présence sur les différents réseaux sociaux soit enfin connue de tous vos correspondants, WiseStamp permet de les ajouter à votre signature avec ou sans leur logo (Twitter, Facebook, Google +, LinkedIn, YouTube, Flickr, MySpace, Last.fm, etc.). Si vous aimez être joignable en toutes circonstances et surtout vous adapter à vos correspondants, il est fort probable que vous utilisiez de nombreuses messageries instantanées (AIM, BlackBerry, Google Talk, Y! Messenger, ICQ, MSN, Skype, QQ) ; WiseStamp permet aussi d’en faire la promotion !

Bien évidemment, si lors de la rédaction d’un courriel vous ne souhaitez pas voir figurer à la fin de celui-ci votre signature WiseStamp, il suffit de cliquer sur le logo de cette extension dans votre boîte e-mail et de choisir None.

WiseStamp, une solution pour faire votre promotion et garder le contact en toute simplicité !

Sarah Vert

HTML5, le futur du Web ?

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 34: Sample _linux_pratique

On visualise ici à quoi se rapporte l’auto-complétion (noms de fichiers, options, ...). L’option -F introduit le nom de la fonction à exécuter ; l’option -o introduit le type d’option d’auto-complétion ; -A introduit une action pour générer une liste de possibles : cela peut être alias (noms d’alias), builtin (ou -b, correspond aux noms de commandes internes du shell), command (noms de com-mandes), directory (noms de répertoires), file (noms de fichiers), hostname (noms d’hôtes), shopt (noms des options du shell), etc. Les options -P et -S introduisent respectivement un préfixe et un suffixe à chaque complé-tion possible. L’ensemble des options sont détaillées dans le manuel de Bash [1].

1.1 Écrire ses propres fonctionsUne fois qu’on s’habitue à la magie de l’auto-complétion, on est plus que dépité lorsque la touche [Tab] ne retourne rien (et non, ça ne sert à rien de vous acharner dessus en râlant...). Heureusement, il est possible de créer ses propres règles d’auto-complétion et de les ajouter dans le répertoire /etc/bash_completion.d/, ou bien dans un fichier ~/.bash_completion.

On peut commencer par quelque chose d’assez simple en utilisant une fonction prédéfinie ; sur le même modèle que la commande ssh, on peut exécuter :

complete -F _known_hosts xvncviewer

afin de pouvoir bénéficier de l’auto-complétion des noms d’hôte lorsque l’on lance le visionneur de bureau à distance. Ici, on informe Bash que la fonction _known_hosts doit être utilisée pour compléter les arguments de la commande xvncviewer. On considère bien entendu que cette fonction _known_hosts est déjà définie dans /etc/bash_completion.

Continuons avec un exemple basique. On souhaite cette fois-ci bénéficier de l’auto-complétion pour une commande foo. On imagine que cette commande admet trois arguments : --alpha, --beta et --gamma. Nous allons donc créer un nouveau fichier /etc/bash_completion.d/foo ; ce dernier contiendra les instructions suivantes :

_foo() { local cur prev opts COMPREPLY=() cur=»${COMP_WORDS[COMP_CWORD]}» prev=»${COMP_WORDS[COMP_CWORD-1]}» opts=»--alpha --beta --gamma»

if [[ ${cur} == -* ]] ; then COMPREPLY=( $(compgen -W «${opts}» -- ${cur}) ) return 0 fi}complete -F _foo foo

On vérifie le bon comportement de tout cela (en commen-çant par charger le fichier de fonction que nous venons de créer) :

~$ . /etc/bash_completion.d/foo~$ foo -- [Tab] [Tab]--alpha --beta --gamma ~$ foo --g[Tab]amma

Un appui répété sur la touche [Tab] permet de lister l’en-semble des options disponibles ; si vous commencez à saisir l’une des options, la touche [Tab] permet de com-pléter le mot.

Étudions à présent notre fonction d’un peu plus près.

On commence par déclarer trois variables : cur (qui désigne le mot qui est en train d’être saisi), prev (qui désigne le mot précédent) et opts (qui contient la liste des options disponibles). COMP_WORDS est une variable de type tableau correspondant aux mots individuels se trouvant dans la ligne de commandes courante ; COMP_CWORD correspond à un indice dans ${COMP_WORDS} du mot contenant la position courante du curseur.

Intervient ensuite la commande compgen (une com-mande interne au shell), qui permet de générer les différentes complétions possibles pour le mot saisi par l’utilisateur (${cur}), selon les options passées en argu-ment (en l’occurrence ici, il s’agit d’une liste de mots).

La commande complete indique enfin (et c’est finale-ment cette ligne la plus importante) comment la com-mande foo doit être complétée, en l’occurrence ici, à l’aide de la fonction _foo.

Ceci est un exemple très simple, qui nous a permis de comprendre la fonction d’auto-complétion. À titre de com-paraison, voici un extrait de la fonction d’auto-complétion correspondant à la commande aptitude :

_aptitude() { local cur dashoptions prev special i

COMPREPLY=() _get_comp_words_by_ref cur prev

dashoptions=’-S -u -i -h --help --version -s --simulate -d \ --download-only -P --prompt -y --assume-yes -F \ --display-format -O --sort -w --width -f -r -g \ --with-recommends -R -G --without-recommends -t \ --target-release -V --show-versions -D --show-deps\ -Z -v --verbose --purge-unused --schedule-only’

for (( i=0; i < ${#COMP_WORDS[@]}-1; i++ )); do if [[ ${COMP_WORDS[i]} == @(@(|re)install|@(|un)hold|@(|un)markauto|@(dist|full)-upgrade|download|show|forbid-version|purge|remove|changelog|why@(|-not)|keep@(|-all)|build-dep|@(add|remove)-user-tag) ]]; then special=${COMP_WORDS[i]} fi

Le mécanisme d'auto-complétion du shell

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 35: Sample _linux_pratique

Décryptage

#exclude some mutually exclusive options [[ ${COMP_WORDS[i]} == ‘-u’ ]] && dashoptions=${dashoptions/-i} [[ ${COMP_WORDS[i]} == ‘-i’ ]] && dashoptions=${dashoptions/-u} done

if [[ -n «$special» ]]; then [...]} complete -F _aptitude -o default aptitude }[...]

Cette commande admet en effet autrement plus d’options que notre hypothétique commande foo...

1.2 Quelques réglages supplémentairesLa bibliothèque GNU Readline [2] fournit des possibilités d’historique et d’édition en ligne à des programmes inte-ractifs dotés d’une CLI tel que Bash. C’est elle qui rend possible la fonction d’auto-complétion de votre terminal.

Pour personnaliser le comportement des programmes utilisant la libreadline, il est possible d’ajouter des com-mandes dans le fichier /etc/inputrc (ou ~/.inputrc de préférence). Ce dernier contient principalement des raccourcis clavier, mais on pourra également y définir cer-taines variables en respectant la syntaxe :

set <variable> <valeur>

Parmi les variables liées à la complétion automatique que l’on peut modifier selon ses besoins, on retiendra les sui-vantes (entre parenthèses figure leur valeur par défaut) [3] :

• completion-display-width (-1) : le nombre de colonnes de l’écran utilisées pour l’affichage des valeurs possibles lors de la complétion. Une valeur de 0 affiche une valeur par ligne ; une valeur négative n’est pas prise en compte.

• completion-ignore-case (Off) : fixée à « On », cette variable permet de rendre la complétion des noms de fichiers insensible à la casse.

• completion-map-case (Off) : si fixée à « On », et si la variable completion-ignore-case est activée, les tirets et underscores sont considérés comme équiva-lents lors de la complétion.

• completion-query-items (100) : désigne le nombre maximal de résultats possibles à afficher ; si les résul-tats sont plus nombreux que la valeur indiquée, l’utili-sateur doit confirmer si oui ou non il souhaite les voir s’afficher à l’écran. Une valeur négative permet de s’af-franchir de cette demande de confirmation.

• disable-completion (Off) : fixée à « On » annule la complétion automatique des mots.

• page-completions (On) : active la pagination (more) de la liste des possibles.

• match-hidden-files (On) : permet d’inclure les fichiers cachés (dont le nom commence par un point) dans la liste des possibles ; si cette variable est fixée à « Off », l’utilisateur devra saisir le point pour visualiser l’ensemble des fichiers cachés possibles.

• show-all-if-ambiguous (Off) : on modifie ici le comportement par défaut de la fonction d’auto-complé-tion ; si cette variable est fixée à « On », dans le cas d’une saisie qui admet plusieurs complétions possibles, la liste des possibles apparaît de suite au lieu du bip système habituel.

On pourra par exemple ajouter dans inputrc :

set show-all-if-ambiguous on set page-completions off

Note

Le prompt de votre console se fait attendre ?

Si vous trouvez que le prompt met un peu trop de temps à se charger, sachez que le responsable pourrait bien être bash-completion. En effet, le fichier /etc/bash_completion et les fichiers de /etc/bash_completion.d sont chargés dans le bashrc, qui lui-même est chargé avant que le prompt ne s’affiche. De ce fait, il suffirait de ne charger les fonctions d’auto-com-plétion qu’au moment où l’on en a besoin (un chargement « à la demande »).

Une complétion dynamique, c’est justement ce que propose le script (pour Debian) que vous trouverez à l’adresse [4] ; il déplace automatiquement les fonctions de complétions dans un répertoire séparé. Notez que ce script devra être exécuté à chaque fois qu’une nouvelle complétion est ajoutée dans /etc/bash_completion ou dans /etc/bash_completion.d/.

À la même adresse [4], on apprend que la complétion dynamique pourrait être intégrée à une future version de bash-completion.

2 L’auto-complétion sous Zsh

Bien que Bash soit le shell par défaut de bon nombre de distributions Linux, beaucoup d’utilisateurs se tournent finalement vers Zsh, séduits par l’éventail des possibilités offertes. Ses compétences en termes d’auto-complé-tion sont notamment très appréciées des utilisateurs. Globalement cette fonctionnalité est bien plus rapide que sous Bash, notamment dans le cas d’un nombre impor-tant de possibles.

Non seulement Zsh s’avère plus rapide, mais nous allons voir ici que ses capacités sont bien plus étendues que sous Bash.

On visualise ici à quoi se rapporte l’auto-complétion (noms de fichiers, options, ...). L’option -F introduit le nom de la fonction à exécuter ; l’option -o introduit le type d’option d’auto-complétion ; -A introduit une action pour générer une liste de possibles : cela peut être alias (noms d’alias), builtin (ou -b, correspond aux noms de commandes internes du shell), command (noms de com-mandes), directory (noms de répertoires), file (noms de fichiers), hostname (noms d’hôtes), shopt (noms des options du shell), etc. Les options -P et -S introduisent respectivement un préfixe et un suffixe à chaque complé-tion possible. L’ensemble des options sont détaillées dans le manuel de Bash [1].

1.1 Écrire ses propres fonctionsUne fois qu’on s’habitue à la magie de l’auto-complétion, on est plus que dépité lorsque la touche [Tab] ne retourne rien (et non, ça ne sert à rien de vous acharner dessus en râlant...). Heureusement, il est possible de créer ses propres règles d’auto-complétion et de les ajouter dans le répertoire /etc/bash_completion.d/, ou bien dans un fichier ~/.bash_completion.

On peut commencer par quelque chose d’assez simple en utilisant une fonction prédéfinie ; sur le même modèle que la commande ssh, on peut exécuter :

complete -F _known_hosts xvncviewer

afin de pouvoir bénéficier de l’auto-complétion des noms d’hôte lorsque l’on lance le visionneur de bureau à distance. Ici, on informe Bash que la fonction _known_hosts doit être utilisée pour compléter les arguments de la commande xvncviewer. On considère bien entendu que cette fonction _known_hosts est déjà définie dans /etc/bash_completion.

Continuons avec un exemple basique. On souhaite cette fois-ci bénéficier de l’auto-complétion pour une commande foo. On imagine que cette commande admet trois arguments : --alpha, --beta et --gamma. Nous allons donc créer un nouveau fichier /etc/bash_completion.d/foo ; ce dernier contiendra les instructions suivantes :

_foo() { local cur prev opts COMPREPLY=() cur=»${COMP_WORDS[COMP_CWORD]}» prev=»${COMP_WORDS[COMP_CWORD-1]}» opts=»--alpha --beta --gamma»

if [[ ${cur} == -* ]] ; then COMPREPLY=( $(compgen -W «${opts}» -- ${cur}) ) return 0 fi}complete -F _foo foo

On vérifie le bon comportement de tout cela (en commen-çant par charger le fichier de fonction que nous venons de créer) :

~$ . /etc/bash_completion.d/foo~$ foo -- [Tab] [Tab]--alpha --beta --gamma ~$ foo --g[Tab]amma

Un appui répété sur la touche [Tab] permet de lister l’en-semble des options disponibles ; si vous commencez à saisir l’une des options, la touche [Tab] permet de com-pléter le mot.

Étudions à présent notre fonction d’un peu plus près.

On commence par déclarer trois variables : cur (qui désigne le mot qui est en train d’être saisi), prev (qui désigne le mot précédent) et opts (qui contient la liste des options disponibles). COMP_WORDS est une variable de type tableau correspondant aux mots individuels se trouvant dans la ligne de commandes courante ; COMP_CWORD correspond à un indice dans ${COMP_WORDS} du mot contenant la position courante du curseur.

Intervient ensuite la commande compgen (une com-mande interne au shell), qui permet de générer les différentes complétions possibles pour le mot saisi par l’utilisateur (${cur}), selon les options passées en argu-ment (en l’occurrence ici, il s’agit d’une liste de mots).

La commande complete indique enfin (et c’est finale-ment cette ligne la plus importante) comment la com-mande foo doit être complétée, en l’occurrence ici, à l’aide de la fonction _foo.

Ceci est un exemple très simple, qui nous a permis de comprendre la fonction d’auto-complétion. À titre de com-paraison, voici un extrait de la fonction d’auto-complétion correspondant à la commande aptitude :

_aptitude() { local cur dashoptions prev special i

COMPREPLY=() _get_comp_words_by_ref cur prev

dashoptions=’-S -u -i -h --help --version -s --simulate -d \ --download-only -P --prompt -y --assume-yes -F \ --display-format -O --sort -w --width -f -r -g \ --with-recommends -R -G --without-recommends -t \ --target-release -V --show-versions -D --show-deps\ -Z -v --verbose --purge-unused --schedule-only’

for (( i=0; i < ${#COMP_WORDS[@]}-1; i++ )); do if [[ ${COMP_WORDS[i]} == @(@(|re)install|@(|un)hold|@(|un)markauto|@(dist|full)-upgrade|download|show|forbid-version|purge|remove|changelog|why@(|-not)|keep@(|-all)|build-dep|@(add|remove)-user-tag) ]]; then special=${COMP_WORDS[i]} fi

Le mécanisme d'auto-complétion du shell

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 36: Sample _linux_pratique

Note

Pour utiliser Zsh, on exécutera tout simplement la commande zsh. On pourra également faire de Zsh notre interpréteur par défaut via la commande chsh (changement pris en compte dès la connexion suivante).

Tout d’abord, on commence par créer - si ça n’est déjà fait - un fichier ~/.zshrc. Pour cela, on pourra copier le fichier /etc/zsh/newuser.zshrc.recommended (ou s’en inspirer) dans son répertoire personnel et le renom-mer en .zshrc. On constate que le fichier comporte par défaut la section suivante :

# Use modern completion system autoload -Uz compinit compinit zstyle ‘:completion:*’ auto-description ‘specify: %d’ zstyle ‘:completion:*’ completer _expand _complete _correct _approximate [...]

Les deux premières instructions, vous l’aurez compris, permettent d’activer l’auto-complétion.

Note

Parallèlement à l’auto-complétion, on appréciera la fonctionnalité d’auto-correction des commandes intégrée à Zsh, que l’on active en ajoutant l’option :

setopt correctall

Et on pourra ajouter l’instruction suivante pour bénéficier de la coloration des fichiers et répertoires en fonction de leur nature :

autoload -U colors

2.1 Plus performant que Bash ? Et pourquoi ?Considérons de suite un exemple pour découvrir les pos-sibilités de Zsh :

~ % aptitude [Tab]Completing aptitude command autoclean -- erase old downloaded package files. build-dep -- install the build-dependencies of packages. changelog -- view a package’s changelog. clean -- erase downloaded package files. download -- download the .deb file for a package. forbid-version -- forbid aptitude from upgrading to a

specific package version. forget-new -- forget what packages are «new».

full-upgrade -- perform an upgrade, possibly installing and removing packages.

hold -- place packages on hold. install -- install/upgrade packages. [...]

Première différence avec Bash : on obtient ici non seulement la liste des commandes disponibles, mais aussi leur rôle ! Idem avec les options de n’importe quelle commande :

~ % import -p[Tab] Completing option -page -- specify: geometry of image canvas

(<width>x<height>{+-}<x>{+-}<y>{%%}{!}{<}{>}) -pause -- specify: delay (seconds) -pointsize -- specify: Postscript font size -ping

Ceci est dû à la présence de l’instruction suivante dans le fichier .zshrc :

zstyle ‘:completion:*’ auto-description ‘specify: %d’

Vous pouvez également tenter un :

~ % sudo aptitude purge[Tab]

qui va renvoyer la liste de tous les paquets installés sur le système !

Enfin, dernier exemple qui fait en général son petit effet, l’auto-complétion de la commande kill vous dresse une liste de tous les processus en cours :

~ % kill [Tab]Completing process ID

2266 0.0 ? 00:00:00 /usr/bin/gnome-keyring-daemon --daemonize --login

2286 0.0 ? 00:00:00 x-session-manager

2319 0.0 ? 00:00:00 /usr/bin/ssh-agent /usr/bin/dbus-launch --exit-with-session x-session-manager

2322 0.0 ? 00:00:00 /usr/bin/dbus-launch --exit-with-session x-session-manager

[...]

C’est un fait, Zsh fait preuve de plus de discernement. En effet, il intègre par défaut bien plus de fonctions prédéfinies d’auto-complétion que son homologue (localisées dans /usr/share/zsh/functions/Completion/). On remarquera d’ailleurs au passage que Zsh prévoit des fonctions d’auto-complétion pour plusieurs systèmes et distributions (AIX, BSD, Debian, Mandriva, Red Hat, etc.).

Le mécanisme d'auto-complétion du shell

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 37: Sample _linux_pratique

Décryptage

2.2 Créer sa méthode de complétionComme sous Bash, il est possible de personnaliser l’auto-complétion [5]. Pour ajouter vos propres règles, vous n’avez qu’à éditer le fichier .zshrc et y ajouter des ins-tructions complémentaires ou bien modifier celles qui s’y trouvent déjà.

Plusieurs cas de figure peuvent se présenter :

• si le nouvel outil pour lequel vous souhaitez bénéficier de l’auto-complétion respecte les conventions GNU, Zsh peut analyser la sortie de --help (afin d’obtenir la liste des options existantes). Et dans ce cas, il suffira d’ajouter dans .zshrc la ligne :

compdef _gnu_generic foo

• si l’outil est susceptible d’utiliser une fonction existante, on pourra tout à fait la réutiliser. Par exemple, on sait que la commande xvncviewer attend un nom d’hôte, on pourra donc ajouter la ligne :

compdef _hosts xvncviewer

_hosts étant une fonction que l’on trouve dans /usr/share/zsh/functions/Completion/Unix (mais ceci est un mauvais exemple car la complétion de xvncviewer est déjà prise en charge par défaut par Zsh:) ).

• et parfois, pour des besoins très particuliers, il faut écrire sa propre complétion. Par convention, la fonction que vous aller créer doit porter le même nom que la commande concernée, préfixé d’un underscore.

Note

Retenez que vous pourrez prendre connaissance de l’ensemble des conventions d’écriture à respecter dans le fichier /usr/share/doc/zsh/completion-style-guide.gz installé conjointement avec le paquet zsh.

On prendra soin de stocker ses fonctions dans un répertoire local, dans ~/.zshfunc par exemple. Et on n’oubliera pas d’ajouter ce nouveau répertoire à la variable $fpath (qui correspond à la liste des répertoires contenant les fonctions d’auto-complétion de Zsh), de façon à ce que vos nouvelles fonctions soient chargées automatiquement :

fpath=(~/.zshfunc $fpath)

Note

Notez au passage qu’au contraire de Bash, les fichiers de fonctions ne sont pas chargés directement au démarrage du shell, mais automatiquement dès qu’une fonction est demandée.

Le fichier de complétion devra débuter par cette ligne précise :

#compdef <commande>

Il s’agit d’un commentaire permettant de spécifier à Zsh 1) que le fichier contient une règle de complétion et 2) la commande en question. Ensuite, on pourra écrire la fonction en elle-même :

_<commande> () {...}_<commande> «$@»

Il vous faudra étudier les fonctions prédéfinies de Zsh ainsi que le manuel utilisateur pour concevoir sans trop de difficultés les fonctions dont vous avez besoin.

Pour finir, sachez que le style de complétion peut être paramétré dans le fichier .zshrc, via la commande zstyle, qui prend en argument un contexte de la syntaxe suivante :

:completion:<func>:<completer>:<command>:<argument>:<tag>

où :

• completion est un élément fixe, commun à tous les contextes ;

• <func> est le nom de la fonction concernée ;

• <completer> est le type de complément à utiliser ; dans la plupart des cas, il s’agira de complete qui correspond à la complétion classique ;

• <command> est le nom d’une commande dans le contexte ;

• <argument> représente les arguments de la commande ;

• <tag> décrit la complétion.

Références

[1] http://www.gnu.org/s/bash/manual/bash.html#Programmable-Completion-Builtins

[2] http://www.gnu.org/s/readline/

[3] http://cnswww.cns.cwru.edu/php/chet/readline/readline.html#SEC10

[4] http://bugs.debian.org/cgi-bin/bugreport.cgi?bug=467231

[5] http://zsh.sourceforge.net/Doc/Release/Completion-System.html#Completion-System

Le mécanisme d'auto-complétion du shell

Note

Pour utiliser Zsh, on exécutera tout simplement la commande zsh. On pourra également faire de Zsh notre interpréteur par défaut via la commande chsh (changement pris en compte dès la connexion suivante).

Tout d’abord, on commence par créer - si ça n’est déjà fait - un fichier ~/.zshrc. Pour cela, on pourra copier le fichier /etc/zsh/newuser.zshrc.recommended (ou s’en inspirer) dans son répertoire personnel et le renom-mer en .zshrc. On constate que le fichier comporte par défaut la section suivante :

# Use modern completion system autoload -Uz compinit compinit zstyle ‘:completion:*’ auto-description ‘specify: %d’ zstyle ‘:completion:*’ completer _expand _complete _correct _approximate [...]

Les deux premières instructions, vous l’aurez compris, permettent d’activer l’auto-complétion.

Note

Parallèlement à l’auto-complétion, on appréciera la fonctionnalité d’auto-correction des commandes intégrée à Zsh, que l’on active en ajoutant l’option :

setopt correctall

Et on pourra ajouter l’instruction suivante pour bénéficier de la coloration des fichiers et répertoires en fonction de leur nature :

autoload -U colors

2.1 Plus performant que Bash ? Et pourquoi ?Considérons de suite un exemple pour découvrir les pos-sibilités de Zsh :

~ % aptitude [Tab]Completing aptitude command autoclean -- erase old downloaded package files. build-dep -- install the build-dependencies of packages. changelog -- view a package’s changelog. clean -- erase downloaded package files. download -- download the .deb file for a package. forbid-version -- forbid aptitude from upgrading to a

specific package version. forget-new -- forget what packages are «new».

full-upgrade -- perform an upgrade, possibly installing and removing packages.

hold -- place packages on hold. install -- install/upgrade packages. [...]

Première différence avec Bash : on obtient ici non seulement la liste des commandes disponibles, mais aussi leur rôle ! Idem avec les options de n’importe quelle commande :

~ % import -p[Tab] Completing option -page -- specify: geometry of image canvas

(<width>x<height>{+-}<x>{+-}<y>{%%}{!}{<}{>}) -pause -- specify: delay (seconds) -pointsize -- specify: Postscript font size -ping

Ceci est dû à la présence de l’instruction suivante dans le fichier .zshrc :

zstyle ‘:completion:*’ auto-description ‘specify: %d’

Vous pouvez également tenter un :

~ % sudo aptitude purge[Tab]

qui va renvoyer la liste de tous les paquets installés sur le système !

Enfin, dernier exemple qui fait en général son petit effet, l’auto-complétion de la commande kill vous dresse une liste de tous les processus en cours :

~ % kill [Tab]Completing process ID

2266 0.0 ? 00:00:00 /usr/bin/gnome-keyring-daemon --daemonize --login

2286 0.0 ? 00:00:00 x-session-manager

2319 0.0 ? 00:00:00 /usr/bin/ssh-agent /usr/bin/dbus-launch --exit-with-session x-session-manager

2322 0.0 ? 00:00:00 /usr/bin/dbus-launch --exit-with-session x-session-manager

[...]

C’est un fait, Zsh fait preuve de plus de discernement. En effet, il intègre par défaut bien plus de fonctions prédéfinies d’auto-complétion que son homologue (localisées dans /usr/share/zsh/functions/Completion/). On remarquera d’ailleurs au passage que Zsh prévoit des fonctions d’auto-complétion pour plusieurs systèmes et distributions (AIX, BSD, Debian, Mandriva, Red Hat, etc.).

Le mécanisme d'auto-complétion du shell

Linux Pratique N°68 - Novembre/Décembre 2011 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 38: Sample _linux_pratique

ScienceS

Réalisation de caRtogRammes avec scapetoadStéphane Blondon

Qui n’a jamais vu une carte déformée en fonction d’une statistique pour mieux la mettre en évidence ? On pense typiquement aux cartes montrant la sous-nutrition ou le P.I.B par pays. Ces cartes volontairement déformées s’appellent des cartogrammes. Cet article montre comment il est possible d’en réaliser sous Linux. Pour cela, nous allons utiliser ScapeToad [ST], un logiciel libre, écrit en Java. Pour illustrer cette possibilité, nous allons représenter le pourcentage d’utilisateurs d’Internet par pays en 2010.

1 PréparationScapeToad n’est pas fourni direc-tement comme paquet par les dis-tributions, mais il est simple de le faire fonctionner. Il faut que Java soit installé sur votre ordinateur, ce qui est probablement déjà le cas. Pour vérifier ce pré-requis, lancez votre gestion-naire de paquets préféré (Synaptic, Yum, Drakrpm, etc.). Selon la distri-bution, le nom du paquet pourra être légèrement différent, mais doit faire référence à Java JRE. Pour Ubuntu, cela équivaut à vérifier que le paquet openjdk-6-jre soit installé. Si ce n’est pas le cas, installez le paquet et ses dépendances selon la méthode préconisée par votre distribution.

Téléchargez ScapeToad [TLC] sur le site web dédié au logiciel. Plusieurs versions sont disponibles sur la page de télé-chargement. Nous utiliserons la version portable (le fichier .tgz). C’est un format d’archive (comme les fichiers zip par exemple). Ouvrez l’archive avec le logiciel fourni par votre distribution (File Roller par exemple) et enregistrez le répertoire qui est à l’intérieur dans votre répertoire per-sonnel. À l’intérieur du répertoire se trouve en particulier un fichier ScapeToad.jar qui est le logiciel proprement dit et un fichier ScapeToad.sh qui servira à exé-cuter le logiciel. Il faut rendre ScapeToad.sh exécutable (Fig. 1). Dans un environ-nement GNOME, il suffit de faire un clic droit sur le fichier, puis d’aller dans l’onglet Permissions et cocher « Autoriser l’exécu-tion du fichier comme un programme ».

ScapeToad est fourni uniquement avec une carte d’exemple sur la Suisse. Nous allons en télécharger une décrivant le monde entier sur le site thematicmapping.org [CART]. Elle existe en deux versions : une version simplifiée et une version plus détaillée. La version plus détaillée prendra plus de temps pour calculer la carte finale. Il s’agit d’un fichier .zip à décompresser de la même manière que ScapeToad (je vous conseille de les extraire dans un répertoire spécifique pour mieux vous repérer par la suite). Il est possible de créer ses propres cartes, mais c’est une tâche beaucoup plus complexe et qui sort largement de cet article.

Nous avons maintenant tous les éléments pour pouvoir créer notre carte. Pour cela, nous allons d’abord insérer les statis-tiques de la carte, puis utiliser vraiment ScapeToad pour produire la carte.

Figure 1 Figure 2

Linux Pratique N°69 - Janvier/Février 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 39: Sample _linux_pratique

ScienceS

choisir le champ de données qui va permettre la transfor-mation de la carte. Il faut donc choisir le titre de la colonne dans le fichier DBF (NETPRCENT dans notre cas).

Il est nécessaire de choisir le type des données : soit « mass » pour les valeurs absolues, ou « density » pour les valeurs relatives à la surface (utile pour les données comme le nombre d’habitants au km2). Ici, il faut choisir « mass » et confirmer.

Nous ne nous servirons pas des possibilités de la qua-trième étape, donc nous confirmons directement pour arriver à la cinquième et dernière étape de paramétrage (Fig. 4). Cette étape permet de choisir le niveau de pré-cision du rendu final. Plus la qualité sera faible et plus le rendu pourra être faussé (non proportionnel), mais sera plus rapidement calculé. Réciproquement, une plus grande qualité impliquera une quantité de calcul plus grande à réaliser et donc plus de temps d’attente avant d’avoir l’image. Selon la précision et la puissance de l’or-dinateur, cela peut prendre plusieurs heures. Les options avancées permettent de définir plus précisément certains paramètres de calculs. En cliquant sur Compute, l’étape 6 s’affiche et le traitement commence.

Figure 3

2 Insérer les statistiques dans le fichier DBF

Dans le répertoire contenant la carte se trouve un fichier DBF. C’est ce fichier qui contient les statistiques permet-tant de déformer la carte.

Note

Bien que les géographes parlent de « shapefile » pour une carte, la carte utilise plusieurs fichiers. Le format shapefile a été créé par l’entreprise Esri et a pour nom d’extension SHP. Cependant, d’autres fichiers permettent d’ajouter des données supplémentaires, non prises en compte par le format SHP. C’est pourquoi il y a d’autres fichiers à l’intérieur du répertoire de la carte. On y trouve en particulier un fichier SHX, qui optimise les accès aux coordonnées géographiques, ainsi que le fichier DBF qui est un vieux format de la base de données dBase. Ces trois fichiers (SHP, SHX, DBF) sont obligatoires pour une carte shapefile.

Calc de LibreOffice (ou anciennement OpenOffice.org) peut modifier les fichiers DBF. Un simple double-clic et l’utilisation de l’encodage par défaut suffisent. Les trois premières colonnes sont des codes identifiant chaque pays. Le nom du pays est en quatrième colonne (et en anglais). Nous allons remplacer les données de la cin-quième colonne par les nôtres (Fig. 2). La première étant le titre de la colonne, nous allons aussi le remplacer par NETPRCENT dans le but d’être cohérent.

Les statistiques [STAT] proviennent du site de l’ONU, qui fournit un export CSV, ODT et XLS. Chacun de ces for-mats peut aussi être ouvert avec OpenOffice.org. Il faut ensuite recopier les statistiques de l’ONU dans le fichier DBF. Cette tâche est plus ou moins laborieuse selon votre maîtrise d’un tableur... La liste des pays n’étant pas exactement la même, ni dans le même ordre, il est néces-saire de faire attention dans les correspondances entre les statistiques et les pays. Il suffit ensuite d’enregistrer la nouvelle version du fichier en gardant le format DBF. LibreOffice ne nous servira plus pour la suite.

3 Produire l’anamorphose Lancer ScapeToad en double-cliquant dessus. Si nécessaire, confirmer le choix « Lancer ». La fenêtre du logiciel s’affiche. Commençons par ajouter la carte : cliquez sur Add layer et naviguez dans le sélecteur de fichiers pour sélectionner la carte et confirmez en cliquant sur le bouton OK tout en bas à gauche. La carte s’affiche automatiquement.

Ajoutons maintenant les données. Cliquez sur Create car-togram puis suivant. L’étape suivante a déjà sélectionnée notre carte, nous pouvons donc de nouveau confirmer et arriver sur la troisième étape de la création (Fig. 3). Il faut

Figure 4

Une fois le calcul de rendu lancé, n’appuyez pas sur « annuler » ou n’arrêtez pas ScapeToad, les calculs seraient repris depuis le début !

Lorsque le calcul est terminé, la fenêtre qui montrait les étapes affiche le résumé de l’opération (Fig. 5). Fermez-la. La fenêtre principale montre le rendu (Fig. 6). En cochant (ou non) les options dans la partie gauche de la fenêtre, vous pouvez visualiser les différences avec la carte d’ori-gine ou voir la déformation obtenue sur une grille. En cli-quant sur l’icône Export to SVG, enregistrez le résultat.

À titre personnel, j’ai essayé de modifier la carte avec Inkscape (un logiciel de dessin vectoriel, donc adapté au

ScienceS

Réalisation de caRtogRammes avec scapetoadStéphane Blondon

Qui n’a jamais vu une carte déformée en fonction d’une statistique pour mieux la mettre en évidence ? On pense typiquement aux cartes montrant la sous-nutrition ou le P.I.B par pays. Ces cartes volontairement déformées s’appellent des cartogrammes. Cet article montre comment il est possible d’en réaliser sous Linux. Pour cela, nous allons utiliser ScapeToad [ST], un logiciel libre, écrit en Java. Pour illustrer cette possibilité, nous allons représenter le pourcentage d’utilisateurs d’Internet par pays en 2010.

1 PréparationScapeToad n’est pas fourni direc-tement comme paquet par les dis-tributions, mais il est simple de le faire fonctionner. Il faut que Java soit installé sur votre ordinateur, ce qui est probablement déjà le cas. Pour vérifier ce pré-requis, lancez votre gestion-naire de paquets préféré (Synaptic, Yum, Drakrpm, etc.). Selon la distri-bution, le nom du paquet pourra être légèrement différent, mais doit faire référence à Java JRE. Pour Ubuntu, cela équivaut à vérifier que le paquet openjdk-6-jre soit installé. Si ce n’est pas le cas, installez le paquet et ses dépendances selon la méthode préconisée par votre distribution.

Téléchargez ScapeToad [TLC] sur le site web dédié au logiciel. Plusieurs versions sont disponibles sur la page de télé-chargement. Nous utiliserons la version portable (le fichier .tgz). C’est un format d’archive (comme les fichiers zip par exemple). Ouvrez l’archive avec le logiciel fourni par votre distribution (File Roller par exemple) et enregistrez le répertoire qui est à l’intérieur dans votre répertoire per-sonnel. À l’intérieur du répertoire se trouve en particulier un fichier ScapeToad.jar qui est le logiciel proprement dit et un fichier ScapeToad.sh qui servira à exé-cuter le logiciel. Il faut rendre ScapeToad.sh exécutable (Fig. 1). Dans un environ-nement GNOME, il suffit de faire un clic droit sur le fichier, puis d’aller dans l’onglet Permissions et cocher « Autoriser l’exécu-tion du fichier comme un programme ».

ScapeToad est fourni uniquement avec une carte d’exemple sur la Suisse. Nous allons en télécharger une décrivant le monde entier sur le site thematicmapping.org [CART]. Elle existe en deux versions : une version simplifiée et une version plus détaillée. La version plus détaillée prendra plus de temps pour calculer la carte finale. Il s’agit d’un fichier .zip à décompresser de la même manière que ScapeToad (je vous conseille de les extraire dans un répertoire spécifique pour mieux vous repérer par la suite). Il est possible de créer ses propres cartes, mais c’est une tâche beaucoup plus complexe et qui sort largement de cet article.

Nous avons maintenant tous les éléments pour pouvoir créer notre carte. Pour cela, nous allons d’abord insérer les statis-tiques de la carte, puis utiliser vraiment ScapeToad pour produire la carte.

Figure 1 Figure 2

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Linux Pratique N°69 - Janvier/Février 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 40: Sample _linux_pratique

Figure 5Figure 6

format SVG), mais il a planté plusieurs fois. Je ne sais pas quelle est la véritable raison (un problème dû à la carte ? Un fichier trop gros pour ma machine ?). C’est pourquoi je suis passé à GIMP (qui permet aussi d’ouvrir des images SVG). Malheureusement, le résultat est un peu moins beau pour faire du remplissage, car les frontières des pays pixelisent un peu. :-( (Fig. 7)

Figure 7

Nous nous contenterons ici d’ajouter un calque sous la carte et de le colorer en bleu pour représenter les océans. Pour faire joli, il y a juste un effet de « Brouillage uni », filtré pour être bleu (Fig. 8), mais ce n’est vraiment pas nécessaire...

Figure 8

4 Limites de ScapeToadScapeToad nous a bien permis d’obtenir le cartogramme voulu. Est-il pour autant parfait ? Non, voici quelques limites :

• La documentation sur le site précise que le logiciel n’est pas adapté pour réaliser des cartes de distances (typiquement les cartogrammes mettant en évidence le temps mis pour rejoindre certaines villes à partir d’une autre).

• Le logiciel est facile à prendre en main, mais il n’est pas possible d’automatiser la génération des cartes en utili-sant un script. De même, il n’est pas conçu pour que l’on puisse y ajouter des greffons.

• Il n’est pas possible de définir les couleurs pour chaque pays ou d’exporter celles produites par ScapeToad (taille de l’erreur pour chaque pays). On aurait pu imaginer ajouter les couleurs souhaitées dans le fichier DBF et que l’image finale les prenne en compte par exemple. C’est l’absence d’une telle fonctionnalité qui m’a poussé à utiliser GIMP sur le cartogramme.

Références[ST] ScapeToad : http://scapetoad.choros.ch/ (site en anglais) ; la dernière version du logiciel est la 1.1, publiée en mai 2008. Il n’existe pas de paquets spéci-fiques, que ce soit pour Debian, Ubuntu ou Mandriva. Des versions Mac et Windows sont aussi disponibles.

[TLC] Page de téléchargement de ScapeToad : http://scapetoad.choros.ch/download.php

[CART] Page de téléchargement de la carte du monde : http://thematicmapping.org/downloads/world_borders.php

[STAT] Statistiques d’accès à Internet compilées par les Nations Unies : http://data.un.org/Data.aspx?d=ITU&f=ind1Code%3aI99H

Réalisation de cartogrammes avec ScapeToad

Linux Pratique N°69 - Janvier/Février 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 41: Sample _linux_pratique

Décryptage

Panorama des licences libresLa licence GPL, de même que l’ensemble des licences CC (Creative Commons) sont maintenant bien connues, du moins parmi les utilisateurs de Linux et/ou de logiciels libres. D’autres licences basées elles aussi sur la notion de copyleft sont quant à elles moins célèbres. En outre, en poussant plus avant certains principes fondateurs de ces différents textes, d’autres licences ont vu le jour proposant par la même occasion de nouveaux modèles économiques...

1 Au fait, c’est quoi une licence libre ?

Une licence libre s’applique aux « œuvres de l’esprit ». Elle implique que l’auteur permette à tout un chacun de modifier, rediffuser, réutiliser sa créa-tion. Comme évoqué en introduction, il existe tout un éventail de licences libres ; la plupart sont basées sur les principes du copyleft (voir encadré), d’autres non (licence Apache, licence BSD, ...). Nous effectuerons dans cet article un tour d’horizon des licences libres qui existent aujourd’hui.

poUr miEUx ComprENDrE...

Le copyleft est la possibilité concédée par l’auteur d’une création soumise au droit d’auteur (œuvre d’art, texte, programme informatique, etc.) de copier, d’utiliser, d’étu-dier, de modifier et/ou de distribuer sa création, sous réserve que l’ensemble de ces possibilités soient préservées à chaque nouvelle version/diffusion de la création.

À l’origine, la notion de copyleft est à la base de la licence publique générale GNU qui régit les logiciels libres, mais aujourd’hui, de nombreuses licences peuvent être considérées comme licences copyleft et ce, dans d’autres domaines que l’informatique : GFDL, CeCiLL, les CC, la LAL, etc.

À savoir qu’on distingue en réalité deux types de copyleft, selon la manière dont les conditions de la licence sont étendues aux créations dérivées de la création initiale :• on parle de « copyleft fort » (strong copyleft) lorsque les redistributions du

logiciel ou de l’œuvre en question, modifiés ou non, ainsi que de tous les composants ajoutés, ne peuvent se faire que sous la licence initiale. La licence GNU GpL est l’incarnation même de ce type de copyleft.

• on parle de « copyleft faible» (weak copyleft) lorsque les redistributions du logiciel ou de l’œuvre en question, modifiés ou non, se font sous la licence initiale mais que de nouveaux composants peuvent être ajoutés sous d’autres licences. Ce type de licence est typiquement utilisé pour les bibliothèques logicielles, afin de permettre à d’autres logiciels s’appuyant sur ces bibliothèques d’être redistribués sans forcément adopter la licence copyleft qui régit lesdites bibliothèques. Les licences GNU Lesser General Public License (LGpL) et Mozilla Public License sont des exemples de copyleft faible.

retenons également que toutes les licences de logiciels libres ne sont pas for-cément basées sur le principe du copyleft : certaines permettent par exemple d’élargir leur exploitation en autorisant le basculement vers une licence pro-priétaire suite à des modifications.

2 Les licences copyleft

2.1 La Licence de Documentation Libre GNU (GFDL)La GNU Free Documentation Licence (GFDL) est une licence produite par la Free Software Foundation, qui permet de rendre tout support écrit (manuel, livre ou tout autre document) libre, dans le sens où tout le monde pourra copier, diffuser ledit support, avec ou sans modification et en tirer ou non une exploitation commerciale.

Fondée sur la notion de copyleft qui se trouve à la base de la licence GNU GpL, elle a été conçue à l’origine pour fixer les conditions d’utilisation de la documentation pouvant accompagner les logiciels libres.

Toutefois, on retiendra que la GFDL a essuyé plusieurs critiques, car elle entre en conflit avec la licence GNU GpL elle-même.

En effet, on lui reproche notamment ses « sections invariantes » : selon la licence GFDL, un auteur peut spécifier des sections invariantes dans son œuvre, autrement dit des éléments qui ne pourront être modifiés ou omis lors de sa rediffusion/ré-utilisation.

2.2 La Licence Art LibreNée en juillet 2000, sous l’impulsion du mouvement Copyleft Attitude, cette licence s’applique à la création artis-tique (musique, roman, site web, etc.). Fortement inspirée de la GNU GpL, la Licence Art Libre (http://artlibre.org/)

Figure 5Figure 6

format SVG), mais il a planté plusieurs fois. Je ne sais pas quelle est la véritable raison (un problème dû à la carte ? Un fichier trop gros pour ma machine ?). C’est pourquoi je suis passé à GIMP (qui permet aussi d’ouvrir des images SVG). Malheureusement, le résultat est un peu moins beau pour faire du remplissage, car les frontières des pays pixelisent un peu. :-( (Fig. 7)

Figure 7

Nous nous contenterons ici d’ajouter un calque sous la carte et de le colorer en bleu pour représenter les océans. Pour faire joli, il y a juste un effet de « Brouillage uni », filtré pour être bleu (Fig. 8), mais ce n’est vraiment pas nécessaire...

Figure 8

4 Limites de ScapeToadScapeToad nous a bien permis d’obtenir le cartogramme voulu. Est-il pour autant parfait ? Non, voici quelques limites :

• La documentation sur le site précise que le logiciel n’est pas adapté pour réaliser des cartes de distances (typiquement les cartogrammes mettant en évidence le temps mis pour rejoindre certaines villes à partir d’une autre).

• Le logiciel est facile à prendre en main, mais il n’est pas possible d’automatiser la génération des cartes en utili-sant un script. De même, il n’est pas conçu pour que l’on puisse y ajouter des greffons.

• Il n’est pas possible de définir les couleurs pour chaque pays ou d’exporter celles produites par ScapeToad (taille de l’erreur pour chaque pays). On aurait pu imaginer ajouter les couleurs souhaitées dans le fichier DBF et que l’image finale les prenne en compte par exemple. C’est l’absence d’une telle fonctionnalité qui m’a poussé à utiliser GIMP sur le cartogramme.

Références[ST] ScapeToad : http://scapetoad.choros.ch/ (site en anglais) ; la dernière version du logiciel est la 1.1, publiée en mai 2008. Il n’existe pas de paquets spéci-fiques, que ce soit pour Debian, Ubuntu ou Mandriva. Des versions Mac et Windows sont aussi disponibles.

[TLC] Page de téléchargement de ScapeToad : http://scapetoad.choros.ch/download.php

[CART] Page de téléchargement de la carte du monde : http://thematicmapping.org/downloads/world_borders.php

[STAT] Statistiques d’accès à Internet compilées par les Nations Unies : http://data.un.org/Data.aspx?d=ITU&f=ind1Code%3aI99H

Réalisation de cartogrammes avec ScapeToad

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Linux Pratique N°69 - Janvier/Février 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 42: Sample _linux_pratique

Panorama des licences libres

autorise toute personne à copier, diffuser, transformer une œuvre, mais permet également son exploitation gratuite ou commerciale, à condition de diffuser l’œuvre sous cette même licence, d’indi-quer le nom de chaque auteur de l’œuvre originale, puis d’indiquer où trouver l’œuvre originale non modifiée.

Au final, cette licence est équivalente à la licence CC BY-SA (voir encadré sur les licences Creative Commons). Elle est valide dans tous les pays ayant signé la Convention de Berne pour la protection des œuvres littéraires et artistiques et de ce fait, est parfois mieux reconnue que les licences CC (en France tout du moins...).

poUr miEUx ComprENDrE...

pour rappel, les licences Creative Commons sont au nombre de 7 :

• CC0 (domaine public) ;• CC BY (paternité) : précisons ici

que l’auteur initial, de même que les suivants, doivent être cités ;

• CC BY-SA (paternité, partage à l’identique) : notez au passage qu’il s’agit de la licence qui régit aujourd’hui les articles de l’en-cyclopédie Wikipédia (à ses débuts, celle-ci était sous GFDL, la seule licence libre adaptée à la publication d’un texte qui exis-tait alors), ou encore l’ensemble des données ouvertes du projet openStreetmap ;

• CC BY-ND (paternité, pas de modification) ;

• CC BY-NC (paternité, pas d’uti-lisation commerciale) ;

• CC BY-NC-SA (paternité, pas d’utilisation commerciale, par-tage à l’identique) ;

• CC BY-NC-ND (paternité, pas d’utilisation commerciale, pas de modification).

Les licences CC peuvent s’appli-quer à tout type de projet, comme en atteste la plateforme améri-caine Kickstarter [4], un portail mis en place pour que tout créateur (cinéaste, musicien, développeur, designer, etc.) puisse présenter son projet et espérer obtenir l’aide financière de tous ceux qui le sou-haitent. Certains de ces projets sont couverts par une licence CC.

2.5 La Licence Ouverte / Open LicenceDans le cadre de la politique du Gouvernement en faveur de l’ouverture des données publiques (l’open Data), Etalab (http://www.etalab.gouv.fr/) - l’en-tité chargée de l’ouverture des données publiques - a publié récemment (au mois d’octobre 2011) la Licence ouverte. Cette licence prévoit les conditions de réutilisation des données publiques mises à disposition gratuitement sur la plateforme data.gouv.fr depuis le mois de décembre 2011. Cette dernière mettra progressivement à disposition l’ensemble des données publiques gra-tuites de l’État et de ses établissements publics.

Selon ses termes, la Licence ouverte permet :

• de reproduire, copier, publier et transmettre l’information ;

• de diffuser et redistribuer l’information ;• d’adapter, modifier, extraire et

transformer à partir de l’information, notamment pour créer des informa-tions dérivées ;

• d’exploiter l’information à titre com-mercial, par exemple en la combi-nant avec d’autres informations, ou en l’incluant dans son propre produit ou application.

Le tout sous réserve de mentionner la paternité de l’information (sa source et la date de sa dernière mise à jour).

Cette licence vient s’inscrire également dans un contexte international, car elle est compatible avec les standards des licences open Data développées à l’étranger ; elle est notamment compa-tible avec l’Open Government Licence (oGL) du royaume-Uni, avec la licence Creative Commons Attribution (CC-BY) et l’Open Data Commons Attribution (oDC-BY) de l’open Knowledge Foundation.

2.3 La Licence CeCILLCréée en 2004 par trois organismes de recherche français - le CEA, le CNrS et l’iNriA - cette licence a vocation à être utilisée par les sociétés, les organismes de recherche et établissements publics - notamment français - et plus générale-ment par toute entité ou individu désirant diffuser ses résultats sous licence de logi-ciel libre, en toute sécurité juridique. Elle garantit ainsi le respect du droit français en matière de responsabilité civile, de droit à la propriété intellectuelle, tout en garantissant les principes du logiciel libre.

Le logiciel Scilab fait notamment partie des logiciels régis par cette licence.

2.4 L’Open Database LicenseNée en décembre 2007, l’Open Database License est une licence de diffusion libre conçue par l’Open Knowledge Foundation, qui permet à tout utilisateur d’exploiter publiquement, commercia-lement ou non, la base de données concernée. Concrètement, il est possible de copier, de redistribuer la base de données, ou de produire des créations à partir de ces données.

La rediffusion devra néanmoins s’ef-fectuer sous cette même licence (y compris pour les modifications qui sont éventuellement apportées à la base) et il est obligatoire de mentionner la source de la base de données pour toute utilisation publique. En résumé, nous sommes en présence de l’équiva-lent d’une licence CC BY-SA spécifique aux bases de données...

parmi les institutions ayant recours à cette licence, on pourra citer la ville de paris qui depuis début 2011 met cer-taines données publiques à disposition des citoyens [1] ; pêle-mêle on peut y trouver la liste des jardins partagés, les arbres remarquables, la liste des kiosques de presse, les sanisettes, les poteaux divers, etc. précisons toute-fois qu’il s’agit d’une version adaptée de la licence odbL (la licence a été adaptée au droit français, notamment vis-à-vis du droit d’auteur sur la struc-ture des données).

3 Les licences non-copyleft

Contrairement à celles qui reposent sur le copyleft, ces licences logicielles n’imposent pas de distribuer les versions modifiées d’un code sous la même

Linux Pratique N°69 - Janvier/Février 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 43: Sample _linux_pratique

Décryptage

poUr miEUx ComprENDrE...

L’open Data (littéralement, « don-née ouverte ») est une information publique brute, qui a vocation à être librement accessible. La philoso-phie qui accompagne ce concept préconise une libre disponibilité pour tout un chacun, sans aucune restriction.

À savoir que depuis 2005, il existe en France un droit pour toute per-sonne physique ou morale de réu-tiliser les informations publiques produites ou reçues par les admi-nistrations dans le cadre de leur mission de service public [5]. Les informations publiques désignent toutes les informations contenues dans les documents administratifs de l’État, des collectivités territo-riales ou des personnes publiques ou privées chargées d’une mission de service public, produits ou reçus dans le cadre de leur mission de service public.

Chacun peut réutiliser ces infor-mations à d’autres fins que celles de la mission de service public pour laquelle elles ont été pro-duites. Les réutilisations peuvent être commerciales ou non.

licence que le code initial. En résumé, ces licences - très similaires dans les grandes lignes - autorisent la modifi-cation et la distribution du code sous n’importe quelle forme (libre ou proprié-taire, gratuit ou payant) mais imposent le maintien du copyright lors de toute modification. parmi les plus répandues on retiendra :

• la licence Apache : conçue par l’Apache Software Foundation, elle s’applique à l’ensemble des logi-ciels qu’elle publie (dont le célèbre serveur web éponyme). Elle est également utilisée par des projets tiers, non issus de l’ASF.

• la licence BSD (Berkeley Software Distribution),

• la licence x11 ou licence miT, origi-naire du Massachusetts Institute of Technology.

Cette licence a en effet vu le jour partant du constat suivant : « si une informatique libre peut être économi-quement viable grâce au service, il n’en va pas forcément de même pour les biens culturels » [3]

Ainsi, cette licence s’applique à tout type de création intellectuelle, aussi bien dans le domaine industriel que littéraire ou artistique. par ailleurs, cette licence attribue également des droits économiques : tout un chacun peut accéder librement à la comptabilité de chaque distribution commerciale de la création ! En outre, la gestion économique de la création appartient à ceux qui la financent par leurs dons, achats ou investissements. De ce fait, chaque personne contribuant à un projet créatif ou économique basé sur la création a la possibilité de participer aux décisions concernant ce projet.

même si ce modèle économique d’un nouveau genre peut paraître tout à fait viable en théorie, on pourra s’interroger sur la manière dont peut évoluer un projet auquel chacun pourra apporter « son grain de sel »...

Références[1] parisData :

http://opendata.paris.fr/

[2] http://blog.ninapaley.com/2010/10/20/creative-commons-branding-confusion/

[3] propos de patrick Godeau recueillis par philippe Scoffoni le 29 sept. 2011 : http://philippe.scoffoni.net/rencontre-createur-licence-iang-libre-equitable/

[4] http://www.kickstarter.com/pages/creativecommons

[5] ordonnance 2005-650 du 6 juin 2005 et décret n° 2005-1755 du 30/12/2005 relatifs à la liberté d’accès aux documents administratifs et à la réutilisation des informations publiques

4 Des licences d’un nouveau genre...

4.1 Le CopyheartJe ne surprendrai personne en affir-mant que l’on ne souhaite partager avec autrui que ce que l’on aime (ou alors, on envisage de faire un cadeau empoisonné à quelqu’un qu’on n’apprécie guère, mais je ne considère pas ce cas de figure ici...). C’est sur ce constat que se base le Copyheart (http://copyheart.org/), une licence initiée par la dessinatrice américaine Nina paley, également activiste de la culture libre.

« Copying is an act of love. Please copy and share. »

Ainsi, partant de ce principe, plus une production est copiée, plus est a de la valeur (car elle est appréciée par énormément de gens). Chaque copie supplémentaire ajoute de la valeur à l’œuvre.

Vous l’aurez compris, aucune restriction ne s’applique ici. La simplification à outrance des termes de cette licence vient justement contrebalancer le mauvaise compréhension de certaines licences CC, souvent mal utilisées [2]. En effet, selon Nina, les termes Creative Commons impliquent forcément une utilisation non-commerciale pour la plupart des gens, ce qui est totalement faux...

Le Copyheart est une initiative très intéressante, mais encore peu mise en pratique à ce jour...

4.2 La licence IANG« IANG Ain’t No GNU »

La licence iANG (http://iang.info/fr/license.html) est une licence libre, créée par patrick Godeau en 2004. Elle se définit comme « une licence de création équitable ». Comme cer-taines licences CC, elle permet aux usagers d’utiliser, de modifier et de redistribuer la création à laquelle elle s’applique. Toutefois, elle présente également quelques spécificités.

Panorama des licences libresPanorama des licences libres

autorise toute personne à copier, diffuser, transformer une œuvre, mais permet également son exploitation gratuite ou commerciale, à condition de diffuser l’œuvre sous cette même licence, d’indi-quer le nom de chaque auteur de l’œuvre originale, puis d’indiquer où trouver l’œuvre originale non modifiée.

Au final, cette licence est équivalente à la licence CC BY-SA (voir encadré sur les licences Creative Commons). Elle est valide dans tous les pays ayant signé la Convention de Berne pour la protection des œuvres littéraires et artistiques et de ce fait, est parfois mieux reconnue que les licences CC (en France tout du moins...).

poUr miEUx ComprENDrE...

pour rappel, les licences Creative Commons sont au nombre de 7 :

• CC0 (domaine public) ;• CC BY (paternité) : précisons ici

que l’auteur initial, de même que les suivants, doivent être cités ;

• CC BY-SA (paternité, partage à l’identique) : notez au passage qu’il s’agit de la licence qui régit aujourd’hui les articles de l’en-cyclopédie Wikipédia (à ses débuts, celle-ci était sous GFDL, la seule licence libre adaptée à la publication d’un texte qui exis-tait alors), ou encore l’ensemble des données ouvertes du projet openStreetmap ;

• CC BY-ND (paternité, pas de modification) ;

• CC BY-NC (paternité, pas d’uti-lisation commerciale) ;

• CC BY-NC-SA (paternité, pas d’utilisation commerciale, par-tage à l’identique) ;

• CC BY-NC-ND (paternité, pas d’utilisation commerciale, pas de modification).

Les licences CC peuvent s’appli-quer à tout type de projet, comme en atteste la plateforme améri-caine Kickstarter [4], un portail mis en place pour que tout créateur (cinéaste, musicien, développeur, designer, etc.) puisse présenter son projet et espérer obtenir l’aide financière de tous ceux qui le sou-haitent. Certains de ces projets sont couverts par une licence CC.

2.5 La Licence Ouverte / Open LicenceDans le cadre de la politique du Gouvernement en faveur de l’ouverture des données publiques (l’open Data), Etalab (http://www.etalab.gouv.fr/) - l’en-tité chargée de l’ouverture des données publiques - a publié récemment (au mois d’octobre 2011) la Licence ouverte. Cette licence prévoit les conditions de réutilisation des données publiques mises à disposition gratuitement sur la plateforme data.gouv.fr depuis le mois de décembre 2011. Cette dernière mettra progressivement à disposition l’ensemble des données publiques gra-tuites de l’État et de ses établissements publics.

Selon ses termes, la Licence ouverte permet :

• de reproduire, copier, publier et transmettre l’information ;

• de diffuser et redistribuer l’information ;• d’adapter, modifier, extraire et

transformer à partir de l’information, notamment pour créer des informa-tions dérivées ;

• d’exploiter l’information à titre com-mercial, par exemple en la combi-nant avec d’autres informations, ou en l’incluant dans son propre produit ou application.

Le tout sous réserve de mentionner la paternité de l’information (sa source et la date de sa dernière mise à jour).

Cette licence vient s’inscrire également dans un contexte international, car elle est compatible avec les standards des licences open Data développées à l’étranger ; elle est notamment compa-tible avec l’Open Government Licence (oGL) du royaume-Uni, avec la licence Creative Commons Attribution (CC-BY) et l’Open Data Commons Attribution (oDC-BY) de l’open Knowledge Foundation.

2.3 La Licence CeCILLCréée en 2004 par trois organismes de recherche français - le CEA, le CNrS et l’iNriA - cette licence a vocation à être utilisée par les sociétés, les organismes de recherche et établissements publics - notamment français - et plus générale-ment par toute entité ou individu désirant diffuser ses résultats sous licence de logi-ciel libre, en toute sécurité juridique. Elle garantit ainsi le respect du droit français en matière de responsabilité civile, de droit à la propriété intellectuelle, tout en garantissant les principes du logiciel libre.

Le logiciel Scilab fait notamment partie des logiciels régis par cette licence.

2.4 L’Open Database LicenseNée en décembre 2007, l’Open Database License est une licence de diffusion libre conçue par l’Open Knowledge Foundation, qui permet à tout utilisateur d’exploiter publiquement, commercia-lement ou non, la base de données concernée. Concrètement, il est possible de copier, de redistribuer la base de données, ou de produire des créations à partir de ces données.

La rediffusion devra néanmoins s’ef-fectuer sous cette même licence (y compris pour les modifications qui sont éventuellement apportées à la base) et il est obligatoire de mentionner la source de la base de données pour toute utilisation publique. En résumé, nous sommes en présence de l’équiva-lent d’une licence CC BY-SA spécifique aux bases de données...

parmi les institutions ayant recours à cette licence, on pourra citer la ville de paris qui depuis début 2011 met cer-taines données publiques à disposition des citoyens [1] ; pêle-mêle on peut y trouver la liste des jardins partagés, les arbres remarquables, la liste des kiosques de presse, les sanisettes, les poteaux divers, etc. précisons toute-fois qu’il s’agit d’une version adaptée de la licence odbL (la licence a été adaptée au droit français, notamment vis-à-vis du droit d’auteur sur la struc-ture des données).

3 Les licences non-copyleft

Contrairement à celles qui reposent sur le copyleft, ces licences logicielles n’imposent pas de distribuer les versions modifiées d’un code sous la même

Linux Pratique N°69 - Janvier/Février 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 44: Sample _linux_pratique

AUDIO/VIDéO

Des Diaporamas toujours plus beaux avec ffDiaporama !Franck Barnier

Ce n’est pas le premier logiciel de diaporama qui vous soit présenté dans les colonnes de votre magazine préféré. Mais, comme vous allez pouvoir le découvrir, celui-ci se démarque de tous les autres par les options de création qu’il dispose.

1 Un peu de vocabulaire

Avant de commencer, les éclaircis-sements qui suivent sont néces-saires. Comme tout logiciel de ce type, ffDiaporama travaille avec des diapositives. Chacune d’elles est composée d’une image et d’une durée, mais pas seulement. En effet, le contenu d’une diapo-sitive peut être animé. Pour cela, celle-ci doit être composée de plusieurs plans. Les plans contien-nent l’image d’origine (un bloc) et peuvent tous avoir une durée différente ; la durée totale de la dia-positive sera égale à la somme des durées des plans qui la composent. C’est pendant le temps d’affichage des plans que sont réalisées les animations permettant de passer de l’agencement du contenu d’un plan à celui du plan suivant.

Chaque plan peut contenir plu-sieurs images ou même pourquoi pas plusieurs vidéos. On parle ici de Blocs qui viennent se super-poser un peu comme les calques sous GIMP par exemple. Et ces blocs peuvent également être ani-més ! Enfin, chaque diapositive est pourvue d’un arrière-plan, qui peut être unique ou commun à toutes les diapositives. Un arrière-plan peut être composé d’une couleur unie, d’un dégradé, ou même d’une image. Dans le cas d’un arrière-plan différent entre deux diapo-sitives, un fondu enchaîné sera automatiquement généré.

2 Configurer ffDiaporama

C’est par le bouton Options de l’onglet Fichier que vous accéde-rez à l’interface de configuration. Celle-ci contient quatre onglets. Le premier, Options de l’application, vous permettra de définir le nombre d’images par seconde affichées lors de la pré-visualisation du pro-jet, d’activer le lissage des images, de choisir entre le pixel ou le pour-centage pour l’unité des coordon-nées. Vous réglerez la géométrie du format de l’image, la durée d’af-fichage des diapositives par défaut (premier plan et plans suivants), la courbe de vitesse des transitions et animations, ainsi que le type de transition par défaut (aucune, aléatoire ou fondu enchaîné) et sa durée dans l’onglet Options des projets.

Ce n’est pas tout, puisqu’il y est également possible de paramétrer les styles des textes, ainsi que leurs coordonnées en fonction du ratio de sortie du projet, mais aussi la géométrie des images et vidéos ajoutées lors de la création des dia-positives ou depuis l’interface des Propriétés de la diapositive.

Cette interface propose également l’onglet Gérer les équipements par lequel vous pourrez définir de nou-veaux profils de sortie en fonction de matériel qui lira votre diaporama (console de jeux portable, centre multimédia ou autre).

Fig. 1 : Création d’un nouveau profil de sortie via l’onglet « Gérer les équipements »

3 Créez votre projetC’est dans l’onglet Projet que tout débute. Le bouton Ajouter titre intègre une diapositive vierge dans laquelle on pourra saisir le texte de son choix. Vous pourrez sélectionner les images et vidéos du projet soit en cliquant sur le bouton Ajouter fichiers, soit en faisant glisser dans la piste de montage une sélection d’images depuis le gestionnaire de fichiers de votre environne-ment graphique.

Vos photographies étant intégrées à votre dia-porama, il vous reste à le rendre attrayant. Pour cela, vous allez devoir animer vos diapositives. Deux méthodes sont disponibles et permettent de générer des effets différents. L’animation plan par plan et l’animation à l’aide des blocs.

3.1 Créez un titre animéC’est avec la méthode d’animation plan par plan que vous allez réaliser un beau titre animé pour votre diaporama. Pour ce faire, double-cliquez sur la diapositive à animer afin d’ouvrir l’interface

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 45: Sample _linux_pratique

Des diaporamas toujours plus beaux avec ffDiaporama !

de Propriétés de la diapositive. Vous retrouverez dans celle-ci l’image de votre diapositive avec au-dessus la piste de montage et à droite les différents paramètres disponibles. Par défaut, les diapositives ne contiennent qu’un seul plan. Pour en ajouter un nouveau, il vous faut cliquer sur le bouton [+] en haut de la piste de montage. Le nouveau plan est la copie conforme du premier, à ceci près que sa durée d’affichage est différente.

Pour notre exemple, l’animation va être composée de la mise en valeur de différentes zones, puis du dépla-cement linéaire du titre du diaporama. La préparation va être réalisée dans le premier plan. En haut à droite est indi-qué le nom du fichier image (le bloc) contenu dans le plan. Copiez ce bloc dans le presse-papier et collez-le dans le plan à l’aide des boutons placés sous la liste des blocs de la diaposi-tive. Ainsi, un second bloc portant le même nom a été créé. Double-cliquez sur ce dernier dans la liste pour ouvrir l’interface de Recadrage et correction d’image. Cet outil permet de modifier les taux de luminosité, de contraste ou de gamma et d’ajuster les canaux RVB de l’image. Vous pouvez également faire tourner l’image, la flouter, amélio-rer sa netteté ou encore lui appliquer un filtre (égalisation, dépoussiérage, niveau de gris, etc.). Enfin, le recadrage de l’image peut y être retouché.

Fig. 2 : L’interface de recadrage et de correction de l’image... un micro-GIMP intégré ! Fig. 3 : Animez votre diaporama plan par plan avec l’interface de

propriétés de la diapositive.

Ici, nous allons d’abord abaisser la valeur des canaux rouge et vert afin d’obtenir une image monochrome rouge. Validez la modification, puis dans l’interface de propriétés de la dia-positive, ajoutez un nouveau plan. Dans ce dernier, double-cliquez à nouveau

sur le bloc retouché pour modifier cette fois-ci le cadrage de l’image. Vous allez créer une bande verticale resserrée sur le détail de l’image que vous sou-haitez mettre en valeur. Pour ce faire, déverrouillez la géométrie du bloc en sélectionnant Pas de contrainte dans le menu déroulant. Sur la pré-visualisation de l’image, déplacez les côtés droit et gauche du cadre pour ne garder que la partie qui vous intéresse, puis validez.

Le bloc ainsi recadré est sur le côté gauche de la diapositive. Passez son opacité à 25%, puis déplacez-le afin de parfaitement superposer son contenu avec celui du bloc en arrière-plan. Une fois fait, repassez l’opacité à 100% et fixez la durée du plan à 0,5 seconde. Ainsi, l’animation, très rapide, se fera durant ce laps de temps. Activez le premier plan, puis rendez invisible ce bloc en cliquant sur le bouton qui représente un œil avec une croix rouge en premier plan. Vous pouvez, en opérant de façon identique, dupliquer le second plan et y créer une bande horizontale mono-chrome sur un ton jaune par exemple.

L’étape suivante consiste à faire apparaître un texte en premier plan. Pour cela, activez le premier plan, puis sous la liste des blocs, cliquez sur le premier bouton afin d’ajouter un bloc de type titre. Double-cliquez sur le bloc correspondant dans la liste, puis sai-sissez et mettez en forme le texte de votre choix dans l’interface d’édition.

Dans l’interface de propriété de la diaposi-tive, saisissez une valeur de coordonnée sur l’axe X permettant de faire sortir le texte de l’écran. Activez le plan sur lequel vous sou-haitez voir le texte en place sur la diapositive et faites glisser le texte jusqu’à sa position finale. C’est terminé ! Il ne vous reste plus qu’à valider, puis à lancer la lecture du diapo-rama pour admirer le résultat.

3.2 Zoom d’un détail de la diapositiveUne partie de l’image affichée à l’écran qui sort de la diapositive et qui vient se placer en premier plan... Voilà un effet complè-tement bluffant dans un diaporama ! Voici comment procéder pour réaliser un tel effet. Tout d’abord, choisissez l’image du diapo-rama que vous souhaitez animer et ouvrez l’interface de Propriétés de la diapositive.

Fig. 4 : Quelques images de l'animation d'une diapositive à l'aide de blocs successifs

AUDIO/VIDéO

Des Diaporamas toujours plus beaux avec ffDiaporama !Franck Barnier

Ce n’est pas le premier logiciel de diaporama qui vous soit présenté dans les colonnes de votre magazine préféré. Mais, comme vous allez pouvoir le découvrir, celui-ci se démarque de tous les autres par les options de création qu’il dispose.

1 Un peu de vocabulaire

Avant de commencer, les éclaircis-sements qui suivent sont néces-saires. Comme tout logiciel de ce type, ffDiaporama travaille avec des diapositives. Chacune d’elles est composée d’une image et d’une durée, mais pas seulement. En effet, le contenu d’une diapo-sitive peut être animé. Pour cela, celle-ci doit être composée de plusieurs plans. Les plans contien-nent l’image d’origine (un bloc) et peuvent tous avoir une durée différente ; la durée totale de la dia-positive sera égale à la somme des durées des plans qui la composent. C’est pendant le temps d’affichage des plans que sont réalisées les animations permettant de passer de l’agencement du contenu d’un plan à celui du plan suivant.

Chaque plan peut contenir plu-sieurs images ou même pourquoi pas plusieurs vidéos. On parle ici de Blocs qui viennent se super-poser un peu comme les calques sous GIMP par exemple. Et ces blocs peuvent également être ani-més ! Enfin, chaque diapositive est pourvue d’un arrière-plan, qui peut être unique ou commun à toutes les diapositives. Un arrière-plan peut être composé d’une couleur unie, d’un dégradé, ou même d’une image. Dans le cas d’un arrière-plan différent entre deux diapo-sitives, un fondu enchaîné sera automatiquement généré.

2 Configurer ffDiaporama

C’est par le bouton Options de l’onglet Fichier que vous accéde-rez à l’interface de configuration. Celle-ci contient quatre onglets. Le premier, Options de l’application, vous permettra de définir le nombre d’images par seconde affichées lors de la pré-visualisation du pro-jet, d’activer le lissage des images, de choisir entre le pixel ou le pour-centage pour l’unité des coordon-nées. Vous réglerez la géométrie du format de l’image, la durée d’af-fichage des diapositives par défaut (premier plan et plans suivants), la courbe de vitesse des transitions et animations, ainsi que le type de transition par défaut (aucune, aléatoire ou fondu enchaîné) et sa durée dans l’onglet Options des projets.

Ce n’est pas tout, puisqu’il y est également possible de paramétrer les styles des textes, ainsi que leurs coordonnées en fonction du ratio de sortie du projet, mais aussi la géométrie des images et vidéos ajoutées lors de la création des dia-positives ou depuis l’interface des Propriétés de la diapositive.

Cette interface propose également l’onglet Gérer les équipements par lequel vous pourrez définir de nou-veaux profils de sortie en fonction de matériel qui lira votre diaporama (console de jeux portable, centre multimédia ou autre).

Fig. 1 : Création d’un nouveau profil de sortie via l’onglet « Gérer les équipements »

3 Créez votre projetC’est dans l’onglet Projet que tout débute. Le bouton Ajouter titre intègre une diapositive vierge dans laquelle on pourra saisir le texte de son choix. Vous pourrez sélectionner les images et vidéos du projet soit en cliquant sur le bouton Ajouter fichiers, soit en faisant glisser dans la piste de montage une sélection d’images depuis le gestionnaire de fichiers de votre environne-ment graphique.

Vos photographies étant intégrées à votre dia-porama, il vous reste à le rendre attrayant. Pour cela, vous allez devoir animer vos diapositives. Deux méthodes sont disponibles et permettent de générer des effets différents. L’animation plan par plan et l’animation à l’aide des blocs.

3.1 Créez un titre animéC’est avec la méthode d’animation plan par plan que vous allez réaliser un beau titre animé pour votre diaporama. Pour ce faire, double-cliquez sur la diapositive à animer afin d’ouvrir l’interface

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 46: Sample _linux_pratique

AUDIO/VIDéO

Votre diapositive ne contenant qu’un seul plan, faites un copier/coller du bloc. Double-cliquez sur le nouveau bloc, puis déverrouillez la géométrie (pas de contraintes). Placez le cadre autour du détail de l’image sur lequel vous voulez zoomer et validez. De retour dans l’interface de propriétés de la diapositive, le nouveau bloc ne représente plus que le contenu du cadre zoomé sur l’image. Dupliquez le plan tel quel, puis modifiez la taille et la position du bloc à votre conve-nance. Attribuez-lui une forme, un cadre avec une couleur et une épaisseur à l’aide des options de l’onglet Bloc/Objet.

Activez à nouveau le premier plan, puis sélectionnez le bloc zoomé. Réduisez sa taille et placez le bloc au centre de la zone correspondante dans l’image principale. Enfin, rendez le bloc invisible sur le premier plan. Il ne vous reste plus qu’à valider et à lancer la lecture de la diapositive dans l’interface principale ! Dans notre exemple, nous avons utilisé une image fixe, mais nous aurions pu prendre un film. La procédure est strictement identique. Nous aurions pu également au lieu de faire un simple zoom, faire apparaître le bloc en petit sur la gauche de l’écran avec une position angulaire sur l’axe vertical de -50 degrés, puis le faire glisser vers la droite de l’écran tout en augmentant sa taille et en le faisant tourner jusqu’à obtenir une position angulaire de +50 degrés. Vous pouvez tester, c’est très facile à mettre en œuvre et le résultat est superbe !

Fig. 5 : Quelques images d’un zoom d’une zone de l’image

Fig. 7 : Ici, vous pouvez couper vos séquences vidéos intégrées dans les diapositives sous forme de blocs.

3.3 Éditez les transitionsLe passage d’une diapositive à une autre s’effectue à l’aide d’une transition. Par défaut, le logiciel est paramétré pour attribuer les transitions aléatoirement lors de l’intégration des diapositives dans le projet. Pour ma part, dans la majorité des

Fig. 6 : Le choix des transitions est facilité par une présentation animée avec les diapositives concernées.

Fig. 8 : Vous pouvez voir ici un diaporama comportant plusieurs bandes audio à différents niveaux sonores, ainsi que l’interface des propriétés de la musique.

cas, le fondu enchaîné est celui que je préfère car le change-ment de diapositive se fait en douceur et l’on obtient ainsi un diaporama plus agréable à regarder. Le logiciel est donc réglé pour que cette transition soit systématiquement utilisée. Dans certains contextes, il se peut qu’une autre transition puisse mieux mettre en valeur le diaporama. Il suffit alors de double-cliquer sur la transition à modifier pour accéder à l’interface de Propriétés de la transition. Par défaut, celle-ci affiche les transitions disponibles dans la même famille que celle appli-quée actuellement. De nombreuses autres sont accessibles via le bouton déroulant type de transition. La sélection d’une transition est facilitée par la présentation animée avec les dia-positives du projet. Vous avez aussi la possibilité de modifier la durée de la transition et de constater directement de l’effet sur celle-ci.

3.4 Édition des vidéosVous pouvez accéder à l’interface d’édition des vidéos inté-grées au projet en cliquant sur le bouton qui représente une pellicule sous la liste des blocs. Celle-ci vous permet de cou-per en début et en fin de la séquence afin de ne garder que la partie du film qui vous intéresse. Le niveau sonore peut égale-ment y être modifié.

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 47: Sample _linux_pratique

Des diaporamas toujours plus beaux...

3.5 Sonorisez votre diaporamaPour ajouter des pistes audio, double-cliquez simplement sous les diapositives dans la piste de montage. Cela a pour effet d’ouvrir l’interface des Propriétés de la musique. Via cette dernière, vous pourrez définir de mettre le son en pause, de modifier son volume ou de sélectionner une nouvelle musique qui démarrera à partir de la diapositive sélectionnée. Dans ce cas, le passage d’une bande son à l’autre se fera en douceur avec un fondu enchaîné.

4 Générez votre projetPlusieurs boutons sont disponibles dans l’onglet Générer le film. Alors qu’avec les trois premiers, le standard du film est défini en fonction du matériel que vous aurez sélectionné (smartphone, tablette tactile, console de jeux portable, disque dur multimédia, lecteur de salon, box ADSL, etc.), le

dernier bouton quant à lui, vous permet-tra d’accéder à une interface avancée, où vous pourrez choisir le format vidéo et le stan-dard (PAL ou NTSC), la définition (jusqu’au 1080p) ainsi que les codecs et les taux de compression de la vidéo et de l’audio.Fig. 9 : Interface avancée de

définition des paramètres de génération du film

ConclusionGrâce aux nombreuses fonctionnalités de ffDiaporama, vous pourrez réaliser des projets vraiment uniques et adaptés aux thèmes de vos diaporamas. L’interface classique est bien pensée et disponible en plusieurs langues, dont le français. Il aurait été intéressant que l’animation des diapositives puisse être jouée directement dans l’interface de Propriété de la diapositive. Cela permettrait d’éviter de zapper entre celle-ci et l’interface principale lors des mises au point des animations. Le nombre de formats de sortie et la possibilité d’en définir de nouveaux permettent de générer des fichiers pour tous les lecteurs existants. Stable et complet, ce programme se doit d’être installé impérativement... Et utilisé sans modération !

InfosSite du projet : http://ffdiaporama.tuxfamily.org/

Licence GNU GPLv2 - Disponible pour GNU/Linux et Windows - Version présentée : 1.1

AUDIO/VIDéO

Votre diapositive ne contenant qu’un seul plan, faites un copier/coller du bloc. Double-cliquez sur le nouveau bloc, puis déverrouillez la géométrie (pas de contraintes). Placez le cadre autour du détail de l’image sur lequel vous voulez zoomer et validez. De retour dans l’interface de propriétés de la diapositive, le nouveau bloc ne représente plus que le contenu du cadre zoomé sur l’image. Dupliquez le plan tel quel, puis modifiez la taille et la position du bloc à votre conve-nance. Attribuez-lui une forme, un cadre avec une couleur et une épaisseur à l’aide des options de l’onglet Bloc/Objet.

Activez à nouveau le premier plan, puis sélectionnez le bloc zoomé. Réduisez sa taille et placez le bloc au centre de la zone correspondante dans l’image principale. Enfin, rendez le bloc invisible sur le premier plan. Il ne vous reste plus qu’à valider et à lancer la lecture de la diapositive dans l’interface principale ! Dans notre exemple, nous avons utilisé une image fixe, mais nous aurions pu prendre un film. La procédure est strictement identique. Nous aurions pu également au lieu de faire un simple zoom, faire apparaître le bloc en petit sur la gauche de l’écran avec une position angulaire sur l’axe vertical de -50 degrés, puis le faire glisser vers la droite de l’écran tout en augmentant sa taille et en le faisant tourner jusqu’à obtenir une position angulaire de +50 degrés. Vous pouvez tester, c’est très facile à mettre en œuvre et le résultat est superbe !

Fig. 5 : Quelques images d’un zoom d’une zone de l’image

Fig. 7 : Ici, vous pouvez couper vos séquences vidéos intégrées dans les diapositives sous forme de blocs.

3.3 Éditez les transitionsLe passage d’une diapositive à une autre s’effectue à l’aide d’une transition. Par défaut, le logiciel est paramétré pour attribuer les transitions aléatoirement lors de l’intégration des diapositives dans le projet. Pour ma part, dans la majorité des

Fig. 6 : Le choix des transitions est facilité par une présentation animée avec les diapositives concernées.

Fig. 8 : Vous pouvez voir ici un diaporama comportant plusieurs bandes audio à différents niveaux sonores, ainsi que l’interface des propriétés de la musique.

cas, le fondu enchaîné est celui que je préfère car le change-ment de diapositive se fait en douceur et l’on obtient ainsi un diaporama plus agréable à regarder. Le logiciel est donc réglé pour que cette transition soit systématiquement utilisée. Dans certains contextes, il se peut qu’une autre transition puisse mieux mettre en valeur le diaporama. Il suffit alors de double-cliquer sur la transition à modifier pour accéder à l’interface de Propriétés de la transition. Par défaut, celle-ci affiche les transitions disponibles dans la même famille que celle appli-quée actuellement. De nombreuses autres sont accessibles via le bouton déroulant type de transition. La sélection d’une transition est facilitée par la présentation animée avec les dia-positives du projet. Vous avez aussi la possibilité de modifier la durée de la transition et de constater directement de l’effet sur celle-ci.

3.4 Édition des vidéosVous pouvez accéder à l’interface d’édition des vidéos inté-grées au projet en cliquant sur le bouton qui représente une pellicule sous la liste des blocs. Celle-ci vous permet de cou-per en début et en fin de la séquence afin de ne garder que la partie du film qui vous intéresse. Le niveau sonore peut égale-ment y être modifié.

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Page 48: Sample _linux_pratique

B ureautique & entreprises

CuteFlow est une application destinée à gérer un circuit de validation de documents et/ou un processus dématérialisé. L’outil est à la fois souple, simple à mettre en œuvre et ergonomique. La conception de workflows peut être aisément réalisée par des utilisateurs sans compétences techniques.

Fig. 1 : CuteFlow est un logiciel de workflow simple qui permet de gérer la dématérialisation d’une procédure ou une circulation documentaire entre plusieurs utilisateurs.

1 CuteFlow, pour quoi faire ?

Toute organisation professionnelle repose sur un certain nombre de procédures et de routines qui per-mettent de structurer le partage des responsabilités et la communication entre plusieurs de ses composantes.

Par exemple, l’accueil d’une nou-velle recrue au service commercial nécessite l’ouverture d’un compte de messagerie et fait intervenir au minimum deux interlocuteurs : le ser-vice demandeur et la direction des systèmes d’information qui procé-dera à la création du compte. Afin de rendre cet exemple plus intéressant, imaginons que dans notre organisa-tion fictive, il appartient à la direction

des ressources humaines de faire la demande de compte de messagerie, que l’assistant du directeur com-mercial puis ce dernier puissent la valider et y ajouter un commentaire avant que la direction des systèmes d’information ne crée le compte. Par ailleurs, le responsable « qualité des procédures » doit pouvoir visualiser les différents éléments sans pour autant intervenir.

Cette procédure peut être gérée par la circulation d’un document « papier » mis en parapheur (circu-lation lente et plus coûteuse), par échanges de courriels entre les intervenants (rapide mais difficulté d’archiver correctement et de tracer simplement les échanges) ou en utili-sant CuteFlow !

2 Procédure d’installation

La procédure d’installation de CuteFlow est relativement simple et semblable à celles de nombreuses applications développées sur une base PHP/MySQL.

2.1 Pré-requisUn serveur HTTP fonctionnel est nécessaire, peu importe qu’il s’agisse d’Apache ou d’un autre logiciel de ser-veur web du moment qu’il supporte au minimum la version 5 de PHP.

S’agissant du serveur de bases de don-nées, seul le moteur MySQL est supporté par la dernière version de CuteFlow publiée au moment de la rédaction de l’article (v2.11.2) mais les futures versions devraient pouvoir s’appuyer sur d’autres moteurs. L’archive n’étant disponible qu’au format .zip, un utilitaire capable d’exploiter ce type de fichier est nécessaire, comme 7-Zip.

Enfin, il est préférable d’avoir accès à un serveur SMTP afin de pouvoir utili-ser les notifications par courriel.

2.2 Préparation des fichiers et de l’arborescenceLa première étape consiste en la récu-pération puis la décompression de l’archive qui peut être obtenue sur le site officiel de CuteFlow [1] ou directement sur SourceForge [2]. Une fois extrait, le répertoire doit être déplacé à la racine du serveur web grâce à un client FTP. Avant l’installation proprement dite, il est nécessaire de modifier les permissions du serveur (utilisateur et groupe www-data dans la plupart des cas) sur le fichier ~/install/install_cuteflow.php en ajoutant un accès en écriture, sinon l’installation ne pourra pas s’effectuer. En outre, il est indispensable d’avoir à sa dis-position les paramètres de connexion à la base de données fournie par l’hébergeur.

Il suffit enfin de se connecter à l’adresse http://votre_serveur/répertoire_cuteflow avec un navigateur web.

ParaPheur électronique et dématérialisation de Procédures avec cuteFlowFabrice Arzul

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 49: Sample _linux_pratique

Parapheur électronique et dématérialisation de procédures avec CuteFlow

2.3 Configuration et exécution des scripts d’installationLa première page de configuration de l’installation permet de sélectionner la langue de l’utilisateur. Bonne nouvelle : le français est disponible. Après avoir sélectionné la lan-gue d’installation et validé cette première étape, le script vérifie les permissions accordées au serveur web et les modules installés.

Fig. 2 : Vérification des permissions accordées : dans l’exemple ci-dessus, le module PHP LDAP n’est pas installé ; il n’est pas indispensable au bon déroulement de l’opération, mais est bien sûr nécessaire si l’identification interfacée avec un annuaire LDAP est souhaitée.

3.1 Gestion des utilisateursLa priorité est de sécuriser le compte administrateur en allant changer ses identifiants. Il suf-fit pour cela, dans le menu de gauche, de sélectionner l’entrée Utilisateurs, puis de cliquer sur l’icône en forme de crayon face à l’utilisateur dont les pro-priétés doivent être modifiées. La page qui s’affiche alors propose 3 onglets. Le premier permet de modifier les don-nées « techniques » relatives à l’utilisateur ; c’est ici que le mot de passe de l’utilisateur admin peut être changé.

Le deuxième onglet fixe les droits individuels de l’utilisateur.

À l’étape suivante, le processus d’installation présente un formulaire relatif aux informations de connexion à la base de données. Vient ensuite une page permettant de charger des données fictives afin de tester plus rapide-ment le produit. L’avant-dernier écran est destiné à entrer la configuration du serveur SMTP utilisé. Ce dernier n’est pas indispensable, mais nécessaire si l’on souhaite pou-voir utiliser les fonctionnalités mail du produit (notification des utilisateurs à chaque fois qu’une action est requise, mailing à tous les utilisateurs...). La dernière page valide le bon déroulement de l’installation.

Fig. 4 : Un seul menu commun à tous les groupes d’utilisateurs et permettant d’accéder à toutes les fonctionnalités de CuteFlow

Fig. 3 : Page d’administration des paramètres de l’utilisateur sélectionné

Fonctionnalité Lisible seulement Destinataire Expéditeur Administrateur

Consultation des circulations en cours et des circulations archivées O O O OIntervention sur une circulation N O O OCréation et paramétrage des champs d’option N N O OCréation et paramétrage de modèles de documents N N O OCréation et paramétrage de listes d’abonnés N N O OAdministration des utilisateurs N N N OParamétrage système N N N ONotification de mails à tous les utilisateurs N N N O

3 AdministrationConnectez-vous à l’application (http://votre_serveur/répertoire_cuteflow si vous n’avez pas para-métré d’hôtes virtuels). Le couple identifiant/mot de passe à utiliser pour la première connexion est admin/admin.

B ureautique & entreprises

CuteFlow est une application destinée à gérer un circuit de validation de documents et/ou un processus dématérialisé. L’outil est à la fois souple, simple à mettre en œuvre et ergonomique. La conception de workflows peut être aisément réalisée par des utilisateurs sans compétences techniques.

Fig. 1 : CuteFlow est un logiciel de workflow simple qui permet de gérer la dématérialisation d’une procédure ou une circulation documentaire entre plusieurs utilisateurs.

1 CuteFlow, pour quoi faire ?

Toute organisation professionnelle repose sur un certain nombre de procédures et de routines qui per-mettent de structurer le partage des responsabilités et la communication entre plusieurs de ses composantes.

Par exemple, l’accueil d’une nou-velle recrue au service commercial nécessite l’ouverture d’un compte de messagerie et fait intervenir au minimum deux interlocuteurs : le ser-vice demandeur et la direction des systèmes d’information qui procé-dera à la création du compte. Afin de rendre cet exemple plus intéressant, imaginons que dans notre organisa-tion fictive, il appartient à la direction

des ressources humaines de faire la demande de compte de messagerie, que l’assistant du directeur com-mercial puis ce dernier puissent la valider et y ajouter un commentaire avant que la direction des systèmes d’information ne crée le compte. Par ailleurs, le responsable « qualité des procédures » doit pouvoir visualiser les différents éléments sans pour autant intervenir.

Cette procédure peut être gérée par la circulation d’un document « papier » mis en parapheur (circu-lation lente et plus coûteuse), par échanges de courriels entre les intervenants (rapide mais difficulté d’archiver correctement et de tracer simplement les échanges) ou en utili-sant CuteFlow !

2 Procédure d’installation

La procédure d’installation de CuteFlow est relativement simple et semblable à celles de nombreuses applications développées sur une base PHP/MySQL.

2.1 Pré-requisUn serveur HTTP fonctionnel est nécessaire, peu importe qu’il s’agisse d’Apache ou d’un autre logiciel de ser-veur web du moment qu’il supporte au minimum la version 5 de PHP.

S’agissant du serveur de bases de don-nées, seul le moteur MySQL est supporté par la dernière version de CuteFlow publiée au moment de la rédaction de l’article (v2.11.2) mais les futures versions devraient pouvoir s’appuyer sur d’autres moteurs. L’archive n’étant disponible qu’au format .zip, un utilitaire capable d’exploiter ce type de fichier est nécessaire, comme 7-Zip.

Enfin, il est préférable d’avoir accès à un serveur SMTP afin de pouvoir utili-ser les notifications par courriel.

2.2 Préparation des fichiers et de l’arborescenceLa première étape consiste en la récu-pération puis la décompression de l’archive qui peut être obtenue sur le site officiel de CuteFlow [1] ou directement sur SourceForge [2]. Une fois extrait, le répertoire doit être déplacé à la racine du serveur web grâce à un client FTP. Avant l’installation proprement dite, il est nécessaire de modifier les permissions du serveur (utilisateur et groupe www-data dans la plupart des cas) sur le fichier ~/install/install_cuteflow.php en ajoutant un accès en écriture, sinon l’installation ne pourra pas s’effectuer. En outre, il est indispensable d’avoir à sa dis-position les paramètres de connexion à la base de données fournie par l’hébergeur.

Il suffit enfin de se connecter à l’adresse http://votre_serveur/répertoire_cuteflow avec un navigateur web.

ParaPheur électronique et dématérialisation de Procédures avec cuteFlowFabrice Arzul

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 50: Sample _linux_pratique

B ureautique & entreprises

3.2 Autres actions d’administrationL’entrée Paramètres du menu est utile pour revenir sur la configuration de la base de données, de l’annuaire LDAP et du serveur SMTP et permet en outre de régler finement le com-portement de l’application, comme le seuil d’alerte en cas de blocage du workflow à une même étape après un nombre déterminé de jours.

Le page Notification, qui est la troi-sième et dernière entrée accessible à l’administrateur seulement, est très utile en production puisqu’elle permet à l’administrateur de faire un mailing à tous les utilisateurs de l’ou-til, aux « expéditeurs » seulement, ou à toutes les personnes connectées.

4 CuteFlow pas à pas...

4.1 Les concepts générauxL’utilisation de CuteFlow repose sur un modèle conceptuel dont il est nécessaire de connaître les rouages afin d’utiliser au mieux l’outil.

À chaque fois qu’une procédure dématérialisée est utilisée dans CuteFlow, il faut créer une circu-lation. Un message de circulation peut avoir deux types de contenus : un document attaché (par exemple, pour illustrer ou apporter un complé-ment au reste du message) ou des champs d’information renseignés par les participants.

Ces champs d’options peuvent être de différents types (case à cocher, boutons radio, date, texte...) et sont envoyés dans le corps du message. Le receveur peut y entrer des infor-mations et voir celles saisies par les participants précédents.

À chaque procédure dématérialisée correspond un modèle, de docu-ment structuré en services. A cha-cun de ces services sont assignés

des utilisateurs et des champs d’op-tions. La relation entre les utilisateurs et les services est définie à travers une liste d’abonnés.

Fig. 5 : Concepts généraux de CuteFlow associés au cas d’école sur lequel s’appuie le tutoriel

Les informations « fonctionnelles » de l’utilisateur (service, coordonnées...) sont à renseigner dans le troisième onglet, Détails de l’utilisateur.

4.2 Gestion des utilisateursPour créer un nouvel utilisateur, il suffit de cliquer sur le bouton épo-nyme après avoir sélectionné le menu Utilisateurs. Outre l’adminis-trateur qui existe déjà, nous devons créer 4 utilisateurs en réglant leurs droits sur « expéditeurs » et 1 utili-sateur (Claude) qui a un accès en lecture seulement. Les droits de l’uti-lisateur ne sont pas liés à une circu-lation ou à un modèle de document particulier, mais sont valables pour l’ensemble de l’application.

Après avoir créé vos utilisateurs, reconnectez-vous à l’application en utilisant l’utilisateur « Julie ».

Fig. 6 : Liste des utilisateurs

4.3 Paramétrage des champs d’optionsLes champs d’options sont utilisés pour entrer de l’information à chaque étape d’une circulation, mais doivent d’abord être définis. Ils ne le sont pas pour une circulation ou un modèle de document en particulier et peuvent

être utilisés pour chaque circulation qui nécessite un champ similaire avec le même paramétrage. Pour créer les champs d’options nécessaires, il faut sélectionner l’entrée Champs d’op-tions du menu latéral, puis cliquer sur le bouton [Nouveau Champ].

Nous devons créer un champ « Prénom » (type texte), un champ « Nom » (texte), un champ « Date de recrutement » (date), un champ « Commentaire » (zone de texte) et un champ « Adresse mail » (texte).

Fig. 7 : Paramétrage d’un champ d’options

4.4 Création du modèle de documentUn modèle de document est utilisé pour indiquer quels champs d’options doi-vent être affichés et renseignés par les

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 51: Sample _linux_pratique

utilisateurs vers lesquels le message de circulation est routé. Les champs d’options sont créés et il faut désormais les positionner dans un modèle de document qui va les regrouper.

Pour cela, il faut cliquer sur l’entrée Modèles de documents du menu latéral et sur le bouton [Nouveau modèle de document]. La première étape est destinée à l’enregistre-ment du nom du modèle. À l’étape suivante, nous devons définir les services. Rappelons-nous que ces services contrôlent la manière dont la circulation est routée et quels champs d’options sont activés et modifiables par les utilisateurs.

Fig. 8 : Pour assigner un champ d’option à un service, il suffit de le sélectionner puis de cliquer sur le bouton « Ajouter » du service concerné. Un même champ d’options peut être présent dans plusieurs services, les utilisateurs des services suivants pourront alors modifier les éléments saisis par ceux du service précédent...

Fig. 9 : Interface de paramétrage des relations entre utilisateurs et services du modèle de document

4.5 Gestion des listes d’abonnésUne liste d’abonnés est utilisée pour assigner des utilisateurs à chaque service lors du routage d’une circula-tion. Pour créer une liste d’abonnés, il faut comme précédemment faire appel au menu latéral en cliquant sur l’entrée Liste d’abonnés puis sur le bouton [Nouvelle liste d’abonnés].

Le premier écran est destiné à enre-gistrer le nom de la liste d’abonnés et le modèle de document auquel elle est associée. Nous choisissons bien sûr le modèle créé précédemment. L’étape suivante a pour vocation de permettre au créateur de la liste d’assigner les utilisateurs à chaque

service du modèle de document sélectionné. Le fonctionnement de l’interface est le même que lors de l’association des champs d’options aux services. De la même manière, plusieurs utilisateurs peuvent être associés à un même ser-vice et/ou intervenir sur plusieurs services.

5 Exploitation des circulationsPour gérer les circulations, il faut utiliser l’entrée Circulations du menu de gauche. La création d’une circulation est accessible par le bouton [Nouvelle circulation]. Pour la première étape, seuls deux champs doivent être obligatoirement renseignés : Nom de la circulation et Liste d’abonnés. Les autres champs sont optionnels. À l’étape suivante, l’utilisateur qui crée la circulation va pouvoir si nécessaire adapter la liste d’abonnés choisie à la première étape. N’utilisons pas cette possibilité dans notre cas. La dernière étape permet à l’utilisateur de modifier les champs d’options. Là encore, nous laissons le choix par défaut.

Fig. 10 : Renseignement des champs du service « DRH » par l’utilisatrice « Julie » : nom, prénom et date d’entrée de la nouvelle recrue.

Parapheur électronique et dématérialisation de procédures avec CuteFlowB ureautique & entreprises

3.2 Autres actions d’administrationL’entrée Paramètres du menu est utile pour revenir sur la configuration de la base de données, de l’annuaire LDAP et du serveur SMTP et permet en outre de régler finement le com-portement de l’application, comme le seuil d’alerte en cas de blocage du workflow à une même étape après un nombre déterminé de jours.

Le page Notification, qui est la troi-sième et dernière entrée accessible à l’administrateur seulement, est très utile en production puisqu’elle permet à l’administrateur de faire un mailing à tous les utilisateurs de l’ou-til, aux « expéditeurs » seulement, ou à toutes les personnes connectées.

4 CuteFlow pas à pas...

4.1 Les concepts générauxL’utilisation de CuteFlow repose sur un modèle conceptuel dont il est nécessaire de connaître les rouages afin d’utiliser au mieux l’outil.

À chaque fois qu’une procédure dématérialisée est utilisée dans CuteFlow, il faut créer une circu-lation. Un message de circulation peut avoir deux types de contenus : un document attaché (par exemple, pour illustrer ou apporter un complé-ment au reste du message) ou des champs d’information renseignés par les participants.

Ces champs d’options peuvent être de différents types (case à cocher, boutons radio, date, texte...) et sont envoyés dans le corps du message. Le receveur peut y entrer des infor-mations et voir celles saisies par les participants précédents.

À chaque procédure dématérialisée correspond un modèle, de docu-ment structuré en services. A cha-cun de ces services sont assignés

des utilisateurs et des champs d’op-tions. La relation entre les utilisateurs et les services est définie à travers une liste d’abonnés.

Fig. 5 : Concepts généraux de CuteFlow associés au cas d’école sur lequel s’appuie le tutoriel

Les informations « fonctionnelles » de l’utilisateur (service, coordonnées...) sont à renseigner dans le troisième onglet, Détails de l’utilisateur.

4.2 Gestion des utilisateursPour créer un nouvel utilisateur, il suffit de cliquer sur le bouton épo-nyme après avoir sélectionné le menu Utilisateurs. Outre l’adminis-trateur qui existe déjà, nous devons créer 4 utilisateurs en réglant leurs droits sur « expéditeurs » et 1 utili-sateur (Claude) qui a un accès en lecture seulement. Les droits de l’uti-lisateur ne sont pas liés à une circu-lation ou à un modèle de document particulier, mais sont valables pour l’ensemble de l’application.

Après avoir créé vos utilisateurs, reconnectez-vous à l’application en utilisant l’utilisateur « Julie ».

Fig. 6 : Liste des utilisateurs

4.3 Paramétrage des champs d’optionsLes champs d’options sont utilisés pour entrer de l’information à chaque étape d’une circulation, mais doivent d’abord être définis. Ils ne le sont pas pour une circulation ou un modèle de document en particulier et peuvent

être utilisés pour chaque circulation qui nécessite un champ similaire avec le même paramétrage. Pour créer les champs d’options nécessaires, il faut sélectionner l’entrée Champs d’op-tions du menu latéral, puis cliquer sur le bouton [Nouveau Champ].

Nous devons créer un champ « Prénom » (type texte), un champ « Nom » (texte), un champ « Date de recrutement » (date), un champ « Commentaire » (zone de texte) et un champ « Adresse mail » (texte).

Fig. 7 : Paramétrage d’un champ d’options

4.4 Création du modèle de documentUn modèle de document est utilisé pour indiquer quels champs d’options doi-vent être affichés et renseignés par les

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 52: Sample _linux_pratique

B ureautique & entreprises

Toujours sous l’utilisateur Julie, en cliquant sur l’entrée A faire du menu, nous voyons apparaître la liste des circulations sur lesquelles une action de Julie est nécessaire. En cliquant au bout de la ligne sur l’icône en forme de crayon Modifier la circulation, nous allons pouvoir renseigner les champs d’options associés au service « DRH » de la circulation.

L’utilisateur Martin est le suivant à devoir intervenir dans la circulation, comme en témoigne l’indication portée sur la circulation dans la liste. Reconnectons-nous donc à l’application en utilisant l’identifiant et le mot de passe que nous avons paramétrés, puis validons les éléments de la circulation qui apparaît à l’ouverture de l’application. Faisons de même avec les utilisateurs Nicolas et Gilbert, ce dernier étant l’ultime destinataire de la circulation.

Connectez-vous maintenant avec l’utilisateur Claude pour voir comment un utilisateur qui a des permissions paramétrées en « lisible seulement » peut agir dans CuteFlow.

Fig. 11 : Julie peut, en revenant à la liste des circulations, visualiser l’état d’avancement des procédures sur lesquelles elle intervient.

Fig. 12 : En cliquant sur l’icône « loupe » d’une des circulations listées, chaque utilisateur peut en visualiser l’état, les dates d’intervention de chaque participant et les valeurs des champs d’options.

Pour conclure....CuteFlow est certes moins performant que d’autres logiciels de gestion de pro-cessus, mais se veut être particulièrement attractif pour des organisations qui n’ont pas les moyens ou le besoin de disposer de fonctionnalités très étendues.

Le modèle conceptuel, robuste et simple, et les outils permettant une réelle exploitation en milieu professionnel, comme la possibilité de faire des mailings globaux, de créer des délégations utilisateurs, d’envoyer un mail de notification aux utilisateurs lorsqu’ils doivent intervenir, ou de régler des seuils d’alerte, placent CuteFlow comme une alternative crédible pour toute organisation dési-reuse de dématérialiser certaines de ses procédures.

Enfin, le projet bénéficie d’un développement actif et devrait donc évoluer tout en restant sur ce créneau particulier qui privilégie la simplicité, l’ergonomie et l’autonomie des utilisateurs à l’éventail de fonctionnalités complexes.

Liens[1] http://www.cuteflow.org/

[2] http://sourceforge.net/projects/cuteflow/files/cuteflow/

Maintenant que la circulation est créée, Julie doit la renseigner, car dans la liste d’abonnés, elle est paramétrée comme étant la première participante de la circulation.

Parapheur électronique...

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 53: Sample _linux_pratique

Réseau

IdentIfIez les vulnérabIlItés de vos systèmes avec openvasRexy et Yohan Dubanchet

Les menaces visant les systèmes d’information sont permanentes, multiformes, internes, externes et très évolutives. Parmi ces menaces, l’exploitation de vulnérabilités logicielles peut être considérée comme l’une des plus exploitées par les attaquants. Pour tenter de lutter efficacement contre cette menace, les moyens à déployer sont conséquents et souvent incompatibles avec les ressources que l’on peut consentir (inventaire exhaustif de ses systèmes d’exploitation et de ses logiciels, veille permanente sur les sites centralisant les vulnérabilités connues, personnel capable d’évaluer l’impact d’une vulnérabilité sur son S.I., plate-forme de validation des correctifs, etc.). Dans ces conditions, il peut être avantageux de déléguer certaines tâches à un outil dédié pouvant ainsi répondre davantage aux besoins d’automatisation, de rigueur et d’évolutivité. Cet outil est le scanner de vulnérabilités.

1 IntroductionUn scanner de vulnérabilités est un outil logiciel qui permet d’identifier rapidement la présence de vulnérabi-lités de sécurité sur les équipements d’un réseau. Ces vulnérabilités correspondent à des failles (trous de sécurité) contenues dans les systèmes d’exploitation et les appli-cations que des pirates pourraient exploiter pour s’introduire dans un réseau ou dans un système.

Utilisés lors d’audits ou de contrôles de sécurité, les scanners permettent de couvrir une partie de l’évalua-tion technique globale du site. Pour mener son investigation, le scanner teste les équipements d’un réseau afin d’établir un inventaire des menaces potentielles auxquelles ceux-ci sont exposés. Il fournit également sous forme d’un rapport les informations détaillées sur les failles découvertes et parfois, une indication concernant le remède à appliquer. Dans ce rapport, les failles découvertes sont généralement clas-sées par degré de gravité.

Afin d’être le plus exhaustif possible, le scanner s’appuie sur une base de données contenant la description et les caractéristiques techniques des vulnérabilités qu’il peut détecter. Cette base doit naturellement être mise à jour régulièrement afin de tenir compte des dernières failles découvertes. Certains scanners de vulnérabilités peuvent être utilisés de manière automatique. Dans ce cas, ils testent périodiquement et réguliè-rement les équipements à surveiller et dressent pour chaque équipement un inventaire des vulnérabilités résiduelles. Ces inventaires sont mis à jour préalablement à chaque test. Dans tous les cas, le scanner de vulnérabilités n’a pas vocation à remplacer l’administrateur. Ses rapports doivent être analysés avec discernement.

Avant d’utiliser un tel outil, il est néces-saire de bien prendre conscience que celui-ci peut être exploité de manière offensive par un pirate ou défensive par un spécialiste de la sécurité infor-matique. Un parallèle avec l’utilisation d’une arme peut être envisagé dans ce cas. En effet, les armes à feu sont utili-sées aussi bien par les malfaiteurs que

par les services de sécurité. Seules les règles comportementales et les procédures diffèrent. Ainsi, l’usage d’un scanner de vulnérabilités pré-sente un risque qui doit être mesuré. Ceci impose d’encadrer de façon stricte cette pratique. En particulier, l’usage d’un scanner sur un réseau en production doit être mûrement réfléchi. Il en ressort que :• la décision d’utiliser un scanner,• les conditions de mise en service,• les formations des spécialistes,• les protocoles de tests

doivent être définis de manière for-melle, uniforme, voire centralisée. Il ne faut pas perdre de vue que cet outil a été développé dans un but de sécurité, si bien que son exploitation pour un autre objectif n’est pas adaptée.

2 openvasOpenVAS signifie Open Vulnerability Assessment System, que l’on peut traduire par « Système libre d’évalua-tion de vulnérabilités ». Il s’agit d’une suite logicielle très complète, dis-ponible sous licence GNU (General

B ureautique & entreprises

Toujours sous l’utilisateur Julie, en cliquant sur l’entrée A faire du menu, nous voyons apparaître la liste des circulations sur lesquelles une action de Julie est nécessaire. En cliquant au bout de la ligne sur l’icône en forme de crayon Modifier la circulation, nous allons pouvoir renseigner les champs d’options associés au service « DRH » de la circulation.

L’utilisateur Martin est le suivant à devoir intervenir dans la circulation, comme en témoigne l’indication portée sur la circulation dans la liste. Reconnectons-nous donc à l’application en utilisant l’identifiant et le mot de passe que nous avons paramétrés, puis validons les éléments de la circulation qui apparaît à l’ouverture de l’application. Faisons de même avec les utilisateurs Nicolas et Gilbert, ce dernier étant l’ultime destinataire de la circulation.

Connectez-vous maintenant avec l’utilisateur Claude pour voir comment un utilisateur qui a des permissions paramétrées en « lisible seulement » peut agir dans CuteFlow.

Fig. 11 : Julie peut, en revenant à la liste des circulations, visualiser l’état d’avancement des procédures sur lesquelles elle intervient.

Fig. 12 : En cliquant sur l’icône « loupe » d’une des circulations listées, chaque utilisateur peut en visualiser l’état, les dates d’intervention de chaque participant et les valeurs des champs d’options.

Pour conclure....CuteFlow est certes moins performant que d’autres logiciels de gestion de pro-cessus, mais se veut être particulièrement attractif pour des organisations qui n’ont pas les moyens ou le besoin de disposer de fonctionnalités très étendues.

Le modèle conceptuel, robuste et simple, et les outils permettant une réelle exploitation en milieu professionnel, comme la possibilité de faire des mailings globaux, de créer des délégations utilisateurs, d’envoyer un mail de notification aux utilisateurs lorsqu’ils doivent intervenir, ou de régler des seuils d’alerte, placent CuteFlow comme une alternative crédible pour toute organisation dési-reuse de dématérialiser certaines de ses procédures.

Enfin, le projet bénéficie d’un développement actif et devrait donc évoluer tout en restant sur ce créneau particulier qui privilégie la simplicité, l’ergonomie et l’autonomie des utilisateurs à l’éventail de fonctionnalités complexes.

Liens[1] http://www.cuteflow.org/

[2] http://sourceforge.net/projects/cuteflow/files/cuteflow/

Maintenant que la circulation est créée, Julie doit la renseigner, car dans la liste d’abonnés, elle est paramétrée comme étant la première participante de la circulation.

Parapheur électronique...

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 54: Sample _linux_pratique

Réseau

Public Licence). L’objectif de cet article est de vous guider dans l’installation de cette suite logicielle. La distribution support est Linux Mandriva 2010.2, mais les manipulations sont compatibles avec toutes les autres.

OpenVAS permet, à travers l’exploitation de différents éléments, d’apprécier les fragilités connues des systèmes d’exploitation et des services qu’ils hébergent. Une fois l’évaluation réalisée, il génère un dossier documentaire complet reprenant l’ensemble des failles constatées.

OpenVAS fonctionne sur une architecture client/serveur comprenant les éléments suivants :• libraries : il s’agit des bibliothèques de fonctions com-

munes à tous les composants de la suite logicielle ;• scanner : il s’agit du service qui évalue techniquement les

vulnérabilités. Il est positionné entre les équipements du réseau à contrôler et du service de pilotage (manager) ;

• manager : ce service est le cerveau de la suite. Il contrôle le scanner. Il récupère, agrège, stocke et inter-prète les résultats. Il est ainsi connecté d’un côté au scanner et de l’autre aux différentes interfaces homme/machine. Il est capable de contrôler plusieurs scanners.

• administrator : ce service permet d’administrer les comptes utilisés pour exploiter la suite logicielle. Il permet aussi d’administrer la mise à jour de la base des vulnérabilités.

Trois interfaces utilisateurs sont proposées : un client web graphique (GSA), un client lourd (GSD) et une interface en ligne de commandes (CLI).

L’organisation des différents éléments (Fig. 1) est dispo-nible sur le site officiel d’OpenVAS.

Figure 1

3 InstallationDans notre exemple, nous utiliserons seulement le client web comme interface. Récupérez la dernière version des 4 archives compressées (tarballs) des sources d’OpenVAS.

3.1 pré-requisVérifiez que votre système possède l’infrastructure de compilation adéquate (bibliothèques, compilateur...). Pour cela, assurez-vous de la présence de la dernière version des bibliothèques et logiciels suivants :

libglib2.0-devel libxslt-devel gcc

libgnutls-devel libmicrohttpd-devel cmake

libpcap-devel libsqlite3-devel make

libgpgme-devel pkgconfig bison

libuuid-devel xsltproc doxygen (générateur de doc)

libxml2-devel flex openvas-check-setup

3.2 compilation et installationDécompressez les 4 archives :

$ tar -xvf openvas-libraries-x.x.x$ tar -xvf openvas-scanner-x,x,x$ tar -xvf openvas-manager-x.x.x$ tar -xvf openvas-administrator-x.x.x

Positionnez-vous dans le répertoire des bibliothèques (openvas-libraries-...). Lancez la compilation et l’installation de celles-ci via les commandes cmake . et make install.

[root@localhost openvas-librariesx.x.x] $ cmake ....Build files have been writen to : /tmp/openvas-libraries-x.x.x...[root@localhost openvas-librariesx.x.x] $ make install

Il est nécessaire à ce niveau d’actualiser la variable défi-nissant le chemin des bibliothèques pour la compilation des autres modules :

$ export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/votre_chemin/openvas-libraries-4.0.6/

Comme pour les bibliothèques, vous pouvez maintenant procéder à la compilation et à l’installation du scanner, puis des autres composants en procédant de la même façon (cmake . et make install).

Une fois compilés, tous les composants d’OpenVAS sont copiés dans les sous-répertoires de /usr/local/. Ajoutez le répertoire /usr/local/lib/ dans le fichier /etc/ld.so.conf et lancez la commande ldconfig. Cela permet à votre système de prendre en compte l’em-placement des bibliothèques d’OpenVAS.

3.3 mise à jour de la base de tests de vulnérabilitésLa base de connaissance de vulnérabilités est constituée de modules NVT (Network Vulnerability Tests) stockés dans le répertoire /usr/local/var/lib/openvas/plugins. La méthode suivante permet de tenir à jour cette base :

Téléchargez la dernière archive située à l’URL suivante : http://www.openvas.org/openvas-nvt-feed-current.tar.bz2, puis décompressez-la dans le répertoire /usr/local/var/lib/openvas/plugins. Lancez la commande

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 55: Sample _linux_pratique

openvas-nvt-sync qui permet d’actualiser le contenu du répertoire. Cette dernière commande n’est pas à lancer si la station hébergeant le ser-veur n’est pas connectée à Internet.

D’une manière générale, une mise à jour de la base est à effectuer préa-lablement à chaque contrôle.

3.4 vérification de l’installation et du paramétrageL’installation des modules terminée, il est possible de vérifier le paramétrage d’OpenVAS. Lancez le script openvas-check-setup en vous assurant qu’il soit exécutable. Le script va vérifier l’installation des modules et fournir les actions correctives le cas échéant. Il est possible de spécifier le paramètre --server de façon à ne vérifier que la partie serveur d’OpenVAS (sans les clients graphiques).

Exemple : si l’autorité de certifi-cation n’est pas installée, le script indique « lancer la commande openvas-mkcert ». Attention, à la fin de l’exécution, le script ferme la console ou quitte le mode sudo.

3.5 configuration du managerLe manager doit s’authentifier auprès du scanner pour pouvoir le piloter. Cette authentification est réalisée exclusivement via le certificat d’un utilisateur nommé « om ». Vous devez donc créer cet utilisateur, générer son certificat et fournir ces éléments au manager. Utilisez pour cela le script suivant :

$ openvas-mkcert-client -n om -i

3.6 Gestion des comptes openvas 3.6.1 Compte d’administrationOpenVAS intègre une base interne d’usagers différente de la base des usagers Linux. Pour exploiter le client web graphique, il est nécessaire d’être authentifié avec un nom d’usager ayant un rôle d’administrateur.

La commande permettant de créer cet administrateur est la suivante (remplacez « nom_usager » et « pass_usager » par vos identifiants) :

$ openvasad -c add_user –name=nom_usagers –password=pass_usager --role=Admin

3.6.2 Compte utilisateurChaque usager possède des attributs permettant de différencier ses droits sur le scanner (exemple : un usager ne peut scanner que le réseau 192.168.0.0/24, alors qu’un autre n’a pas de limite). Pour utiliser le serveur OpenVAS au moyen d’un client graphique, il est nécessaire d’être authentifié en tant qu’utilisateur OpenVAS.

La commande permettant de créer un utilisateur est openvas-adduser.

4 exploitation4.1 lancement des différents composantsLes différents composants d’OpenVAS étant dépendants les uns des autres, lancez-les dans l’ordre suivant :

Tout d’abord le scanner : openvassd, puis actualisez son interface openvasmd --rebuild, lancez l’interface openvasmd (le compte client « om » doit être créé). Enfin, lancez l’outil d’administration openvasad et le serveur de l’interface d’exploitation web gsad.

Les ports utilisés par les différents composants sont présentés dans le schéma suivant (Fig. 2) ; ce schéma est disponible sur le site officiel d’OpenVAS.

Figure 2

Vous pouvez vérifier que tous ces composants sont bien lancés à l’aide de la commande netstat -ntaup :

Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program nametcp 0 0 0.0.0.0:9390 0.0.0.0:* LISTEN 9716/openvasmdtcp 0 0 0.0.0.0:9391 0.0.0.0:* LISTEN 7101/openvassdtcp 0 0 0.0.0.0:9393 0.0.0.0:* LISTEN 5241/openvasadtcp 0 0 0.0.0.0:443 0.0.0.0:* LISTEN 10697/gsad

Pour vous connecter à l’interface du scanner, lancez votre navigateur et connec-tez-vous en HTTPS à votre poste local (Fig. 3). Vous pouvez exploiter le client lourd après l’avoir récupéré, compilé et installé (Fig. 4), cependant son installa-tion n’est pas présentée dans cet article.

Identifiez les vulnérabilités de vos systèmes avec OpenVASRéseau

Public Licence). L’objectif de cet article est de vous guider dans l’installation de cette suite logicielle. La distribution support est Linux Mandriva 2010.2, mais les manipulations sont compatibles avec toutes les autres.

OpenVAS permet, à travers l’exploitation de différents éléments, d’apprécier les fragilités connues des systèmes d’exploitation et des services qu’ils hébergent. Une fois l’évaluation réalisée, il génère un dossier documentaire complet reprenant l’ensemble des failles constatées.

OpenVAS fonctionne sur une architecture client/serveur comprenant les éléments suivants :• libraries : il s’agit des bibliothèques de fonctions com-

munes à tous les composants de la suite logicielle ;• scanner : il s’agit du service qui évalue techniquement les

vulnérabilités. Il est positionné entre les équipements du réseau à contrôler et du service de pilotage (manager) ;

• manager : ce service est le cerveau de la suite. Il contrôle le scanner. Il récupère, agrège, stocke et inter-prète les résultats. Il est ainsi connecté d’un côté au scanner et de l’autre aux différentes interfaces homme/machine. Il est capable de contrôler plusieurs scanners.

• administrator : ce service permet d’administrer les comptes utilisés pour exploiter la suite logicielle. Il permet aussi d’administrer la mise à jour de la base des vulnérabilités.

Trois interfaces utilisateurs sont proposées : un client web graphique (GSA), un client lourd (GSD) et une interface en ligne de commandes (CLI).

L’organisation des différents éléments (Fig. 1) est dispo-nible sur le site officiel d’OpenVAS.

Figure 1

3 InstallationDans notre exemple, nous utiliserons seulement le client web comme interface. Récupérez la dernière version des 4 archives compressées (tarballs) des sources d’OpenVAS.

3.1 pré-requisVérifiez que votre système possède l’infrastructure de compilation adéquate (bibliothèques, compilateur...). Pour cela, assurez-vous de la présence de la dernière version des bibliothèques et logiciels suivants :

libglib2.0-devel libxslt-devel gcc

libgnutls-devel libmicrohttpd-devel cmake

libpcap-devel libsqlite3-devel make

libgpgme-devel pkgconfig bison

libuuid-devel xsltproc doxygen (générateur de doc)

libxml2-devel flex openvas-check-setup

3.2 compilation et installationDécompressez les 4 archives :

$ tar -xvf openvas-libraries-x.x.x$ tar -xvf openvas-scanner-x,x,x$ tar -xvf openvas-manager-x.x.x$ tar -xvf openvas-administrator-x.x.x

Positionnez-vous dans le répertoire des bibliothèques (openvas-libraries-...). Lancez la compilation et l’installation de celles-ci via les commandes cmake . et make install.

[root@localhost openvas-librariesx.x.x] $ cmake ....Build files have been writen to : /tmp/openvas-libraries-x.x.x...[root@localhost openvas-librariesx.x.x] $ make install

Il est nécessaire à ce niveau d’actualiser la variable défi-nissant le chemin des bibliothèques pour la compilation des autres modules :

$ export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/votre_chemin/openvas-libraries-4.0.6/

Comme pour les bibliothèques, vous pouvez maintenant procéder à la compilation et à l’installation du scanner, puis des autres composants en procédant de la même façon (cmake . et make install).

Une fois compilés, tous les composants d’OpenVAS sont copiés dans les sous-répertoires de /usr/local/. Ajoutez le répertoire /usr/local/lib/ dans le fichier /etc/ld.so.conf et lancez la commande ldconfig. Cela permet à votre système de prendre en compte l’em-placement des bibliothèques d’OpenVAS.

3.3 mise à jour de la base de tests de vulnérabilitésLa base de connaissance de vulnérabilités est constituée de modules NVT (Network Vulnerability Tests) stockés dans le répertoire /usr/local/var/lib/openvas/plugins. La méthode suivante permet de tenir à jour cette base :

Téléchargez la dernière archive située à l’URL suivante : http://www.openvas.org/openvas-nvt-feed-current.tar.bz2, puis décompressez-la dans le répertoire /usr/local/var/lib/openvas/plugins. Lancez la commande

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 56: Sample _linux_pratique

Réseau

Figure 3

Figure 4

4.2 création du compte utilisateurÀ partir du menu Administration > Users, vous créez le compte de l’utilisateur qui supervisera les actions du scanner (Fig. 5). Les règles à préciser correspondent aux restrictions affectées à chaque utilisateur. La syntaxe est la suivante :

accept|deny ip/mask et default accept|deny.

Exemple 1 : l’utilisateur ne peut évaluer que le réseau 192.168.0

allow 192.168.0.0/24

Exemple 2 : l’utilisateur peut évaluer l’ensemble des réseaux sauf 192.168.1.0/24

deny 192.168.1.0/24

Figure 5

4.3 configuration du scannerLes modules externes sont directement pris en compte par OpenVAS, dès lors que ces derniers sont disponibles sur le poste et que vous choisissez le scénario qui les contient (Fig. 6).

Figure 6

4.3.1 Définition des ciblesD’une manière générale, vos cibles sont issues d’une étude préalable du réseau. Cette étude est nécessaire afin d’éviter de scanner plusieurs postes identiques dans

le cas d’un parc d’équipements dont la configuration est homogène. Par exemple, vous pouvez définir les 4 groupes de cibles suivants : matériels actifs, imprimantes, serveurs et stations.

Voici des exemples pour la saisie des adresses ou groupes d’adresses :

• adresse IPv4 : 192.168.13.1

• hostname : myhost1.domain

• plage d’adresses IPv4 format long : 192.168.1.116-192.168.1.124

• plage d’adresses IPv4 format court : 192.168.1.116-124

• plage d’adresses IPv4 format CIDR : 192.168.13.0/24

• adresse IPv4 : fe80::222:64ff:fe76:4cea/64

Vous pouvez cumuler les informations : 192.168.13.1, myhost2.domain, 192.168.13.0/24.

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr

Page 57: Sample _linux_pratique

Identifiez les vulnérabilités de vos systèmes avec OpenVAS

Pour créer une nouvelle cible, remplissez les champs et cliquez sur le bou-ton Create Target. La liste des cibles sera automatiquement mise à jour (Fig. 7).

Vérifiez que l’adresse du poste de l’auditeur ne fait pas partie des cibles. Il n’est, en effet, pas souhaitable de faire apparaître dans le rapport, des vul-nérabilités d’équipements n’appartenant pas à l’organisme contrôlé.

4.4 rapportLe résultat d’une campagne de détection de vulnérabilités se conclut par l’édition d’un rapport. Ce dernier rend compte des vulnérabilités détectées et des réponses à leur apporter. OpenVAS gère plusieurs formats de rapport (CSV, XML, LaTeX, HTML, PDF...). Le format préconisé est HTML de par la possibilité d’extraction après édition qu’il permet. La qualité des rapports générés permet pratiquement à l’administrateur de sécurité du site audité de les exploiter « en l’état ». En effet, OpenVAS tente de fournir des pistes de solution pour la plupart des vulnérabilités qu’il a détectées.

conclusionVous voici équipé d’un outil qui permet d’évaluer l’état des vulnérabilités de vos systèmes. L’étape suivante est de comprendre et personnaliser cet outil. En effet, exploiter cet outil sans en comprendre les caractéristiques et les dangers risquerait de rendre vos systèmes instables, voire inexploitables. Il vous appartient maintenant d’exploiter ce fabuleux (mais dangereux) outil dans un bac à sable comprenant divers systèmes et divers services serveur. Une fois que cette phase d’appropriation sera passée, vous pourrez intégrer vos propres règles de sécurité. En ajoutant, par exemple, les préconisations issues de votre politique de sécurité ou des recommandations d’organisme étatiques (CERTA, ANSSI, etc.).

L’étape suivante consiste à mettre jour vos plates-formes afin de corri-ger les vulnérabilités présentes. La mise en place des correctifs est à faire avec les mêmes précautions d’usage, car il arrive que les solu-tions aient des effets de bord qui ne sont pas acceptables sur un système en production. L’exploitation des rap-ports d’audit pourra sans doute faire l’objet d’un article suivant.

Figure 7

4.3.2 Création et lancement d’une nouvelle tâcheVous pouvez maintenant créer une nouvelle tâche en sélectionnant la cible et les règles précédemment configurées (Fig. 8).

Figure 8

Réseau

Figure 3

Figure 4

4.2 création du compte utilisateurÀ partir du menu Administration > Users, vous créez le compte de l’utilisateur qui supervisera les actions du scanner (Fig. 5). Les règles à préciser correspondent aux restrictions affectées à chaque utilisateur. La syntaxe est la suivante :

accept|deny ip/mask et default accept|deny.

Exemple 1 : l’utilisateur ne peut évaluer que le réseau 192.168.0

allow 192.168.0.0/24

Exemple 2 : l’utilisateur peut évaluer l’ensemble des réseaux sauf 192.168.1.0/24

deny 192.168.1.0/24

Figure 5

4.3 configuration du scannerLes modules externes sont directement pris en compte par OpenVAS, dès lors que ces derniers sont disponibles sur le poste et que vous choisissez le scénario qui les contient (Fig. 6).

Figure 6

4.3.1 Définition des ciblesD’une manière générale, vos cibles sont issues d’une étude préalable du réseau. Cette étude est nécessaire afin d’éviter de scanner plusieurs postes identiques dans

le cas d’un parc d’équipements dont la configuration est homogène. Par exemple, vous pouvez définir les 4 groupes de cibles suivants : matériels actifs, imprimantes, serveurs et stations.

Voici des exemples pour la saisie des adresses ou groupes d’adresses :

• adresse IPv4 : 192.168.13.1

• hostname : myhost1.domain

• plage d’adresses IPv4 format long : 192.168.1.116-192.168.1.124

• plage d’adresses IPv4 format court : 192.168.1.116-124

• plage d’adresses IPv4 format CIDR : 192.168.13.0/24

• adresse IPv4 : fe80::222:64ff:fe76:4cea/64

Vous pouvez cumuler les informations : 192.168.13.1, myhost2.domain, 192.168.13.0/24.

Linux Pratique N°70 - Mars/Avril 2012 Achetez ce magazine

Les Éditions Diamond http://www.ed-diamond.com http://www.unixgarden.com http://www.editions-diamond.fr