U Classroom

Lors de l'utilisation de postes dans un cadre d'entreprise, il est fréquent de vouloir reproduire la même configuration sur plusieurs postes. L'idéal est donc de configurer un premier ordinateur, puis de faire une image (appelée 'ghost') du disque pour la reproduire sur les autres ordinateurs. Voici donc un petit tutorial tout simple vous permettant de le faire :)

Prérequis

• Un ordinateur près à cloner
• Une distribution linux live

Environnement

Cette manipulation a été effectuée dans les conditions suivantes :

• Système Ubuntu feisty
• Live grml 1.0
• Répertoire de stockage de l'image sur serveur distant accessible via samba

Création de l'image

Bon voila, mon système est tout beau tout propre sur mon premier ordinateur, je veux donc créer une image.

1) Redémarrez sur la live 2) Avant toute manipulation, installez lzop sur le système live si ce n'est pas déjà fait (lzop est un utilitaire de compression plus rapide que gzip / bzip)

apt-get install lzop

3) Montez le répertoire devant contenir l'image finale

mkdir /mnt/smb && mount -t smbfs -o username=usersmb //<monserveur>/<monpartage> /mnt/smb

4) On va donc récupérer le contenu du disque à l'aide de l'utilitaire dd et le compresser via lzop. De plus, si le système de fichier qui va contenir l'image ne peut dépasser 2Go par fichier, il va falloir découper l'image à l'aide de l'utilitaire split . Je suppose que le disque devant être cloné est en /dev/sda . A vous d'adapter.

dd if=/dev/sda | lzop -5 | split -b 2000m - /mnt/smb/images/monimage_

Explications :

dd nous permet de récupérer le contenu du disque. Ensuite, on compresse ce contenu en l'envoyant à l'aide d'un pipe à la commande lzop. L'option -5 correspond, comme pour gzip, au taux de compression (-1 : peu compressé, -9 : compression maximum). Enfin, on envoi le contenu compressé à split, auquel on demande de découper ce qu'il reçoit sur l'entrée standard (via l'argument - ) en fichier de 2000m, soit 2Go. On donne à split le path de destination, il s'occupera de suffixer le nom du fichier donné par 'aa', 'ab' ...

Et voilà, le temps d'aller prendre un (voire deux ou trois) café(s), vous aurez votre disque en images compressées.

Réplication de l'image

Bon, on a notre image, maintenant on aimerait bien la copier sur les autres ordinateurs :) Rien de plus simple.

1) On commence par remonter notre système de fichier distant :

mkdir /mnt/smb && mount -t smbfs -o username=usersmb //<monserveur>/<monpartage> /mnt/smb

2)Ensuite, il faut concaténer les images, décompresser le fichier obtenu et le recopier sur le disque, ce qui donne :

cd /mnt/smb/images && cat monimage_aa monimage_bb monimage_cc | lzop -d | dd of=/dev/sda

Simple ... non ? cat concatène les différentes images < 2Go, passe l'image recomposée à lzop qui va la décompresser, et l'image une fois décompressée est passée à dd en lui demandant de l'écrire sur le disque /dev/sda .

Allez, un (deux, trois) autre(s) café(s), et votre clonage est fini. Il ne reste plus qu'à redémarrer sur votre nouveau système !

Avertissement :

Votre système cloné est parfaitement identique au premier. Pensez donc à changer les paramètres tels que l'IP si celle ci est configurée en statique, le nom d'host, etc ...

Avoir LE LiveCD qui va bien, celui qui fait juste ce qu'il vous faut, et rien d'autre, avaec votre propre thème graphique, votre fond d'écran, ça vous branche ? Tant mieux, car on en parlera Jeudi 05 Juillet sur freenode (canal #ubuntu-fr-classroom) à 20H00, heure Parisienne (18H00 UTC).

Une session en deux parties sera proposée. La première vous proposera une solution pour installer/desinstaller les paquets que vous voulez, et changer la configuration par défaut. La seconde, pour les utilisateurs un peu plus avancés, partira à la découverte de casper, logiciel qui gère le lancement du LiveCD.

Pour préparer la session, pensez juste à télécharger une iso Ubuntu Desktop quelconque (pour éviter des problèmes de compatibilité, récupérez la même version que votre système principal).

A jeudi !

Des semaines que vous en entendez parler, des jours que vous l'attendiez, mais ça y est, medibuntu.org est là !!!

Enfin prêt, le domaine medibuntu.org est maintenant le domaine officiel du projet MEDIBUNTU.

Vous êtes certainement très nombreux à utiliser les dépots Medibuntu sur votre distribution favorite. Rappelons que Medibuntu propose des paquets non disponibles sur les dépôts officiels essentiellement pour des raisons légales. Jusqu'à présent, il fallait se rendre sur http://medibuntu.sos-sts.com pour effectuer les modifications dans votre gestionnaire de paquets ou en éditant le fichier /etc/apt/sources.list.

En plus de la nouvelle adresse, la venue de medibuntu.org apporte un lot considérable de réorganisations.

1) Les dépôts sont maintenant découpés en 3 sous groupes :

• http://fr.packages.medibuntu.org : mirroirs français
• http://de.packages.medibuntu.org : mirroirs allemand
• http://packages.medibuntu.org : mirroirs généralistes

Ceci afin d'optimiser votre utilisation.

2) Les listes de diffusions sont maintenant :

• general@lists.medibuntu.org : Discussion généraliste
• bugs@lists.medibuntu.org : Rapports de bugs, utilisée lors d'un rapport sur Launchpad
• announce@lists.medibuntu.org : Liste permettant d'effectuer des annonces sur un changement dans Medibuntu
• servers@lists.medibuntu.org : Liste de discussion sur l'aspect technique de Medibuntu

Nous vous encourageons à vous inscrire aux listes pour nous faire part de vos avis et pour nous permettre de vous tenir facilement au courant. Vous trouverez une interface d'inscription ici

Bien évidemment, les anciennes adresses (medibuntu.sos-sts.com) resteront actives un certains temps, néanmoins, pensez à changer votre configuration dès que possible (cf le Wiki Ubuntu-fr)

Vous trouverez toutes les informations nécessaires à l'utilisation de Medibuntu sur le site officiel : http://www.medibuntu.org .

L'équipe Medibuntu vous souhaite une agréable utilisation de son service .

A la demande générale (les absents ont toujours tord), voici une reprise de mon billet qui va vous expliquer comment réaliser assez rapidement un système de menus déroulant grâce à Jquery, le tout de manière non obstrusive (un navigateur texte ou avec javascript désactivé doit pouvoir accéder à tous les éléments).

Je cherchais ici à réaliser une page d'accueil qui comprend plusieurs rubriques et sous-menus.
Le nombre d'éléments à présenter étant trop important il fallait cacher les sous-menus et les afficher à la demande.
Le tout devant être non obstrusif j'ai finalement décidé d'utiliser Jquery pour réaliser des menus déroulant.

La solution est ainsi très élégante et ne requiert que peu de Javascript. Le balisage HTML reste également très propre et valide même si on peut encore améliorer ce côté-ci.
Analysons ce dernier :

<div id="menus">
    <div id="enfants">
        <h2>Accueil d'enfants</h2>
        <ul>
            <li id="enfants_da">
                <a href="#">Déficients auditifs</a>
                <ul>
                    <li><a href="#">Centre 1</a></li>
                    <li><a href="#">Centre 2</a></li>
                    <li><a href="#">Centre 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Déficients visuels</a>
                <ul id="enfants_dv">
                    <li><a href="#">Centre 1b</a></li>
                    <li><a href="#">Centre 2b</a></li>
                    <li><a href="#">Centre 3b</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="adultes">
    <!-- Même balisage que pour les enfants -->
    </div>
</div>

Par défaut on doit voir uniquement le titre de la rubrique (le <h2>) ainsi que les liens.
Le tout doit également être visible avec un navigateur ayant le javascript désactivé mais utilisant les CSS, on ne va donc pas utiliser directement ceux-ci pour cacher le <ul> des sous-rubriques.

Voici le code javascript qui utilise donc Jquery.

<script type="text/javascript">
    $(document).ready(function(){

    $("#menus div ul ul").hide();
    $("#menus div ul ul ul").show(); //sous-sous-menus

    $("#menus div ul li a").click(function(){
        $(this).parent().parent().children("li").find("ul.montre").slideToggle("").removeClass("montre").addClass("matched");
        $(this).parent().children("ul").not(".matched").addClass("montre").slideToggle("slow");
        $(this).parent().parent().children("li").find("ul.matched").removeClass("matched");
        if ($(this).attr("href") == "#") {
            return false;
        }
    });

    }); //fin onready
</script>
    
Notez que ce code suffit pour _tous_ les menus (les <div id="enfants">, <div id="adultes"> etc).
Le tout est donc assez compact et élégant en plus d'être adaptable facilement.

Commencons par la fonction de base à utiliser : $(document).ready();
Le paramètre à passer à cette fonction est une fonction qui sera appelée lorsque le DOM sera prêt (entre le chargement du HTML et celui des éléments externes tels que les images).
Remarquez si vous ne le saviez pas que Javascript nous permet d'utiliser ici une fonction anonyme : function(){} en paramètre, ce qui évite de créer la fonction ailleurs.

Le code commence donc réellement à l'intérieur de cette fonction.
La première ligne permet de cacher les sous-menus. La fonction $() retourne les éléments Jquery qui correspondent aux sélecteurs demandés en paramètre. On peut utiliser comme ici du CSS mais aussi Xpath par exemple.
Cette fonction est comparable à la fonction $$() de Prototype.
On applique donc ici la méthode hide() à tous ces éléments. Tous les sous-menus seront ainsi cachés (facile non ? :) ).
La deuxième ligne est nécessaire pour éviter aux sous-sous-menus (des <ul> dans les <ul> des centres, ici cela peut-être des services internes d'un centre) de rester constamment cachés à cause de la première règle.

Passons donc au coeur de la technique avec la fonction suivante. Ici on applique à tous les liens une méthode qui permet de leur associer une action lors d'un clic (au lieu d'utiliser onclick directement dans le HTML).
Comme pour le $(document).ready(); on passe une fonction anonyme en paramètre qui représentera l'action à effectuer.

La première ligne de cette fonction montre la particularité de Jquery qui est le chaînage des méthodes. Chaque méthode renvoie en effet l'élément sur lequel il agit.
Le $(this) représente ici l'élément sur lequel on greffe l'évènement, c'est donc la balise <a> dans notre cas.
Les deux parent() permettent de remonter dans le DOM : on se retrouve donc à agir sur la balise (on devrait parler de noeud plus exactement) <ul>.
Avec children("li") on peut voir que Jquery va gérer sans problème le fait que l'on se retrouve avec plusieurs éléments.
find() permet ensuite de 'trier' les éléments trouvés, ici un <ul> qui possède la classe montre.
On applique ensuite la méthode slideToggle() qui est celle qui permet d'obtenir l'effet de menu déroulant (voir la démo sur le site de Jquery).
On enlève ensuite la classe "montre" avec une simple méthode.

La deuxième ligne est celle qui va montrer le sous-menu demandé (le <ul> présent dans le même <li> que le lien) et y ajouter la classe montre.
La troisième enlève la classe "matched" à tous les éléments qui la possédaient auparavant.

Un peu d'explications : les éléments montrés se voient ici appliqués la classe "montre" ce qui permet de savoir quels éléments sont affichés ou non.
En effet on souhaite n'afficher qu'un seul sous-menu à la fois, il faut donc cacher les sous-menus déjà montrés (ceux qui possèdent la classe montre).
La classe matched permet d'éviter de cacher puis remontrer directement un sous-menu sur lequel on a cliqué deux fois :
en effet, on peut imaginer que si l'utilisateur clique sur un sous-menu une deuxième fois ce sera pour le cacher.
On trie donc dans la règle d'affichage les éléments matched car on sait que ceux-ci ont déjà été cachés. On enlève ensuite cette classe pour éviter des problèmes à la prochaine utilisation.

Le dernier test permet de renvoyer false si le lien a pour cible '#'. Cela permet de ne pas remonter en haut de la page, mais laisse la possibilité d'utiliser de vrais liens dans le menus (si l'on ne souhaite pas de sous-menus dans une partie précise).

C'est tout ! Je ne propose pas de capture d'écran ou de démo, mais voici une partie du CSS que j'utilise :

#menus {
margin-left: 20px;
overflow-y: auto;
overflow-x: hidden;
font-size: 14px;
font-family: Verdana, sans-serif;
font-weight: bold;
color: #456b90;
height: 700px;
}
#menus a {
text-decoration: none;
}
#menus div {
position: absolute;
margin-top: 10px;
}
#menus div ul {
width: 150px;
margin-top: 0px;
margin-left: 0;
padding-left: 20px;
background-color: #FFFFFF;
}
#menus div h2 {
font-size: 19px;
font-family: "Trebuchet MS", sans-serif;
margin-bottom: 7px;
}
#menus div ul li p {
margin: 1px;
padding: 4px;
}
#menus div ul li ul {
background-color: #75b9e4;
padding: 4px;
font-size: 12px;
font-weight: normal;
list-style-type: none;
margin: 0;
}

#enfants {
left: 700px;
top: 30px;
}
#enfants h2 {
color: #6be32f;
}

Chaque sous-partie (enfants, adultes etc) est positionnée de manière absolue dans la page avec left et top.

On peut donc conclure en affirmant sans problèmes que Jquery permet de réaliser plusieurs effets graphiques dans la page, de manière assez simple et surtout en restant accessible et non obstrusif :)

J'ai peu parlé de Jquery, on aurait pourtant pu dire que la lib est légère (une version compressée étant de plus disponible), rapide, bref un bon candidat au remplacement de Prototype. Voici quelques liens pour en savoir plus :

• Le site de Jquery
• Les docs, assez complètes
  
• Le site francophone de Jquery

Chez Ubuntu on aime bien python, et on aime bien faire des petits scripts qui génèrent des pages web (pour des stats par exemple). Et on a même la chance de pouvoir créer des pages dynamiques avec python !

J'ai eu un peu de mal à trouver une documentation pas trop mal faite qui donne les bases de l'utilisation de mod_python de manière simple et efficace. Essayons de remédier à ça.

Notes à propos de ce document

• Mieux vaut connaître un minimum python pour le suivre ;
• pour faciliter les choses, on suppose que les fichiers créés le sont à la racine du serveur web.

Si vous aussi vous trouvez un peu triste les listings par défaut que produit apache pour les répertoires web, j'ai peut-être une solution qui va vous intéresser.
Pour la mise en œuvre, il faut que votre hébergeur active l' option AllowOverride All et autorise les .htacess.

Pour obtenir un résultat un peu plus attrayant, vous pouvez, grâce à un fichier .htaccess bien senti, ajouter des informations de mise en page, ainsi que un header et un footer.

Comme un exemple vaut mieux qu'un long discours, voici le .htaccess que j'utilise:

AddIcon (DIR,/.iconsfoldergray.gif) ^^DIRECTORY^^      ### toutes les lignes qui commencent par
AddIcon (FOLDER,/.backarrow.gif) ..                    ### addIcon servent a attribuer des icônes
AddIcon (DEB,/.iconsdebian.jpg) .deb .DEB              ### à des type de fichiers prédéfinies
AddIcon (RAR,/icons/compressed.gif) .rar .RAR .zip .ZIP .ZiP .zIP .ziP .ZIp .Zip
AddIcon (RAR,/icons/compressed.gif) .bz2 .BZ2 .tbz2 .tgz .tbz .TGZ .TBZ2 .TBZ .tb2 .TB2
AddIcon (TXT,/.iconstext.gif) .txt .htm .HTM .html .HTML .htmL .xml .XML .TXT .RTF .rtf
AddIcon (IMG,/.iconsimage.gif) .jpg .JPG .jpeg .JPEG .gif .GIF .png .PNG
AddAlt "pic" .gif .GIF .jpg .JPG .png .PNG .bmp .BMP .png .PNG             ### les lignes commençant par
AddAlt "snd" .mp3 .MP3 .mP3 .Mp3 .s3m                                      ### AddAlt prévoit un text de 
AddAlt "txt" .txt .pdf .html .htm .ps                                      ### remplacement si il n'y a pas d'icon
AddAlt "PHP" .PHP3 .php .PHP .php3 .php4 .phps .inc .class
AddAlt "Zip" .zip .ZIP .gz .GZ 

IndexOptions FancyIndexing FoldersFirst                       ### active le "fancy index" et liste les folders en 1°
IndexIgnore favicon.ico .??*                                  ### les fichiers qui ne seront pas listés
HeaderName .header.html                                       ### le nom du header
ReadmeName .pied.txt                                          ### le nom du footer

J'imagine que la documentation d'apache fourmille d'autres options disponibles, mais celle là me suffisent amplement!

Notez que vous pouvez définir des éléments html et CSS dans les header et footer, et c'est essentiellement ça qui va vous permettre de faire de la mise en page.

Si vous avez la flemme de partir de zero, vous pouvez récupérer l'archive de mes fichiers, et partir de là pour décorer vos propres répertoires. Il faut copier .htacess, .header.html et .footer.txt dans tout les répertoires que vous voulez décorer, et les icônes à la racine du serveur web.

Amusez vous bien!

Effraie l'a annoncé, une nouvelle session de cours packaging aura lieu ce jeudi 17 Mai sur #ubuntu-fr-classroom.

Cette session – planifiée depuis longtemps – s'attachera à des cas particuliers d'empaquetage :

• logiciels en python ;
• logiciels ne nécessitant pas de compilation ;
• mise à jour de paquets ;
• patcher des sources.

Même si je suis un fan et fervent utilisateur de CDBS, le cours tiendra compte des utilisateurs de debhelper only – mais franchement, CDBS c'est le bien.

A jeudi sur IRC !

U-Classroom n'a qu'un objectif: dominer la blogosphére, de très très haut...

Bon, plus sérieusement, ce blog est une initiative collective des habitués du chan #ubuntu-fr-classroom, afin de diffuser des techniques, plus ou moins avancés, dans différents domaines se rapportant aux UNIX libres.

Si cette initiative est née au sein de la communauté Ubuntu francophone, et que plusieurs d'entre nous sont impliqués dans le développement et la communauté d'Ubuntu, nous n'avons pas nécessairement la volonté de nous y limiter.

Si nous somme aujourd'hui 7 rédacteurs, c'est que nous en avons oublié :) . Il est probable que nous soyons plus nombreux prochainement.

Pour conclure ce billet pratiquement inutile, voici une photo prise de certains d'entre nous à la toute récente Feisty-party parisienne: