Faire un don

Index

On this page…

  1. Descriptif et fonctionnement de l’architecture de la Framakey 1.9
  2. Présentation générale
  3. Architecture globale de votre Framakey
  4. Que se passe-t-il à l’insertion de la clé ?
    1. 4.1  Autorun
    2. 4.2  Mot de passe à l’insertion de la clé
    3. 4.3  Start.exe
  5. FramaLauncher et FLTune
  6. L’interface FramaKiosk
    1. 6.1  Architecture et profil Firefox
    2. 6.2  Interface graphique
    3. 6.3  Fichiers .lch
  7. Résumé : ajouter une application au FramaKiosk
  8. Framasuite : ajouter des applications pour les nuls
  9. Conclusion

Descriptif et fonctionnement de l’architecture de la Framakey 1.9

Cette documentation à pour but de décrire le fonctionnement de la Framakey 1.9, et notamment :
- les actions effectuées suite à l’insertion de la clé
- les fichiers mis en oeuvre pour faire fonctionner la Framakey.
Après la leture de cette documentation, vous devriez donc être à même d’adapter le fonctionnement de la Framakey 1.9 à vos propres besoins.

Présentation générale

La Framakey est une compilation de logiciels libres pour Windows, destinée prioritairement aux clés USB mais pouvant fontionner sur tout type de périphériques (disque durs internes ou externes, par exemple).
Le principe est simple : on insère le périphérique, on lance la framakey, une interface apparait, et on utilise cette interface pour executer les logiciels, exactement comme s’ils étaient installés sur votre disque dur. Une fois la clé USB retirée, rien ne reste sur le disque dur de l’utilisateur.

Il existe déjà un tutoriel sur la personnalisation de la Framakey, mais adaptée aux versions qui précédaient la Framakey 1.9.

L’intérêt de la Framakey est qu’il s’agit d’un logiciel libre, et qu’il est donc possible de l’adapter à ses besoins. Nous allons donc essayer de regarder dans les entrailles de la bête pour voir -non pas l’avenir- mais ce qu’il s’y passe et comment vous pouvez l’adapter à vos besoins.

Les prérequis sont assez basiques : il faut connaître Windows, savoir éditer un fichier (par exemple avec Notepad++), et pour modifier l’interface graphique de la Framakey (appellée “FramaKiosk”) avoir de bonnes notions de HTML et CSS (bonnes les notions, mais juste des notions. Pas besoin d’être un expert à Miami).

Si vous ne connaissez rien au HTML, que vous ne voulez pas apprendre, que vous vous fichez d’avoir une belle interface et que vous souhaitez juste rajouter des applications accessibles via l’icone Framakey à côté de l’horloge, alors je vous conseille d’aller directement à la page “Ajouter des applications à sa Framakey pour les nuls” (sans passer par la case lecture, ni toucher La Connaissance du bout du doigt).

Architecture globale de votre Framakey

Commençons par une petite liste de dossiers :
<fk> - [racine de votre clé] 

|→ autorun.inf - [autorun de la clé, lance start.exe]
|→ start.exe - [charge start.ini]
|→ start.ini - [défini les programmes executés à l’insertion de la clé]
|→ <Apps› - [dossier des applis portables]
|      |→ <PortableFirefox› - [portableFirefox]
|      |      |→ <firefox› - [dossier contenant les executables firefox, et notamment Launch.exe]
|      |      |→ <profile› - [dossier de profil “standard” de firefox]
|      |→ <PortableFramakeyApps› - [applications spécifiques Framakey]
|      |      |→ <autoIt_launcher›
|      |      |→ <ejectusb›
|      |      |→ <interface›
|      |      |→ <maximize›
|      |      |→ <PortableFLTune›
|→ <Data› - [dossier utilisateur de la Framakey]
|      |→ <Documents›
|      |      |→ <pdf›
|      |→ <Images›
|      |→ <Music›
|      |→ <Videos›
|→ <Framakey› - [dossier “interne”, moteur de la Framakey]
|      |→ <asuite› - [dossier de la Framasuite]
|      |→ <Framakey Scripts› - [scripts .vbs pour par exemple éteindre la machine]
|      |→ <FramaKiosk› - [interface principale de la Framakey]
|      |→ FramaKiosk.exe - [charge FramaKiosk.ini]
|      |→ FramaKiosk.ini - [lance portableFirfox, mais avec Kioskprofile et en chargeant FramaKioskPages\index.html]
|      |      |→ <FramaKioskPages› - [fichiers de l’interface FramaKiosk]
|      |      |→ index.html - [accueil du FramaKiosk]
|      |      |→ jeux.html, etc. - [contenu des onglets du FramaKiosk]
|      |      |      |→ <articles›
|      |      |      |→ <backup›
|      |      |      |→ <css› - [contient index.css, mise en forme de l’interface
|      |      |      |→ <img› - [images du FramaKiosk]
|      |      |      |→ <js›	- [Javascript utilisé par le Kiosk, notamment jQuery]
|      |      |      |→ <lch› - [fichiers .lch utilisés par les fichiers .html des onglets de l’interface]
|      |      |             |→ <apps›
|      |      |             |→ <articles›
|      |      |             |→ <interface›
|      |      |             |→ <links›
|      |      |             |→ <music›
|      |      |             |→ <pdf›
|      |      |→ <kioskprofile› - [profil Firefox modifié pour le FramaKiosk]
|      |      |      |→ <chrome›
|      |      |→ <PortableKioskCode›
|      |→ <FramaLauncher› - [AeTrayMenu, menu affiché à côté de l’horloge Windows]

Puis un petit schéma (rapide) du processus d’éxecution :

(version OpenOffice.org)

Que se passe-t-il à l’insertion de la clé ?

Vous avez téléchargé la Framakey, et vous l’avez inséré dans un port USB ? Bien ! Prenons les choses dans l’ordre chronologique.

Autorun

D’abord, Windows vous ouvre une fenêtre vous demandant ce que vous souhaitez faire avec ce périphérique.
“Mais pourquoi me poser la question avec une clé USB, alors qu’avec un CD ça se lance tout seul ?”
Ca, c’est la faute à Microsoft, pas la nôtre. Pour des raisons de sécurité (pas complètement idiotes quand on y réfléchit), Microsoft a décrété que tout périphérique amovible inscriptible *doit* demander à l’utilisateur ce qu’il souhaite faire et *interdit* de lancer un programme automatiquement. Imaginez ce que cela pourrait poser comme problème si un virus se mettait sur une clé USB, et qu’il s’executait de façon cachée à chaque insertion de la clé.

Donc, c’est un choix du système d’exploitation, et Framakey ne touche à rien sur la machine hote, donc elle doit subir ce comportement.

“mais j’ai déjà vu des clés avec Autorun !”
Oui, mais en réalité ces clés ont été modifiées matériellement pour se faire passer pour des CD-ROM ! Elles font croire à windows qu’elles sont un CD, et du coup Windows autorise l’autorun directement, sans la fenêtre intermédiaire.
Par contre, la modification est matérielle (= électronique = pas logicielle = pas possible si vous avez une clé USB standard), donc si c’est vraiment le comportement que vous souhaitez, il vous faudra acheter une “clé usb autorun” (un coup de Google devrait vous mettre sur la piste).

Donc, la petite fenêtre window vous demande ce que vous voulez faire, et présentent dans le menu une entrée “Framakey” avec le logo Framakey. Si vous cliquez dessus, l’interface Framakey se lance.
Magique ? Non, pas du touthappy smiley

Cela est dû au fichier autorun.inf situé à la racine de votre clé, qui se présente ainsi

[autorun]
open=start.exe
icon=start.exe
label=Framakey
shell=Framakey
shell\FramaKey=FramaKey
shell\FramaKey\command=start.exe

Ce fichier indique donc à la fenêtre itérmédiaire ce qui doit être éxecuté (start.exe) et avec quelle icone (celle inclue dans le start.exe).
La partie “shell”, c’est ce qui apparait lorsqu’on regarde le volume au travers du poste de travail Windows (la liste des lecteurs affiche pour “E:\” (par exemple) la petite grenouille Framakey et le mot “FramaKey”.

Mot de passe à l’insertion de la clé

Faisons ici un petit apparté. Il nous est souvent demandé “Comment protéger ma framakey par mot de passe, par exemple au cas où je la perdrais et ne voudrais pas qu’on récupère mes données dessus ?”
Sortons donc une seconde du cadre de ce tutoriel et donnons plusieurs pistes de réponses.

D’abord, si vous voulez protégez uniquement quelques fichiers sur votre clé (c’est la même chose pour un disque dur)., ponctuellement.
La solution recommandée est d’utiliser 7zip (un winzip libre, et plus performant, présent sur votre framakey).
Lancez simplement portable7zip, et compressez les fichiers à protéger en prenant soin d’indiquer un mot de passe dans la partie “cryptage”.
Lorsque vous voudrez de nouveau accéder à vos fichiers, il vous suffira de les décompresser avec 7zip, et d’indiquer le mot de passe. Simple, rapide, efficace, mais ça nécessite quelques clics.

Si vous souhaitez créer une partition protégée, la Framakey embarque portableTrueCrypt. Sans rentrer dans les détails de ce logiciel libre, il vous permet de créer un “volume protégé” dans lequel vous pourrez placer vos fichiers à protéger. Cette solution est presque parfaite, mais (il y a toujours un mais !) ne fonctionne bien que sur les machines sur lesquelles vous aurez des droits administrateurs (parce qu’il faut être administrateur d’une machine Windows pour créer un volume, c’est comme ça).

Enfin, la dernière solution , celle que nous recommandons le plus souvent, est d’acheter une clé qui propose matériellement ce type de fonctionnalité. C’est en effet bien plus sécurisée, et une bien meilleure manière de protéger ses données. Certes il y a un surcoût de quelques euros, mais franchement vos données le valent bien, non ?
Vous pouvez donc vous orienter vers l’achat :

La première solution étant presque aussi efficace que la seconde, mais de prix inférieur, n’hésitez pas trop.
NB : Framakey n’est affilié à aucun constructeur ou revendeur, le choix de la clé vous revient onc entièrement.

Start.exe

“Donc on insère notre clé, ce qui nous permet de lancer start.exe. Et ensuite ?”

Start.exe, est un petit logiciel développé par l’équipe Framakey permettant de choisir les programmes que l’on veut lancer. Le code est bien évidemment libre, en langage NSIS, et trouvable dans \Framakey\src\FramaStarter\Start.nsi

Que fait start.exe ?
Il lit tout simplement le fichier start.ini, qui se présente ainsi :

[SplashScreen]
DisableSplashScreen=false
SplashScreenDir=Framakey\splash.jpg
;
[ConfigurationFile]
path=I:\framakey_work\1800\fk\Start.ini
;
[Starter]
; ExecuteProgn= le nom du programme à lancer
; ExecuteProgToStopn= le nom du programme à stopper
; exemple 1: si vous lancez PortableFirefox.exe, le programme à stopper est firefox.exe
; exemple 2: pour le kiosk vous lancez FramaKiosk.exe et il faut fermer k-meleon.exe
; WorkDirn= le chemin vers le programme à lancer
; Parametern= permet de passer un paramètre: commande ou chemin au logiciel à lancer.
; AskForItn= sert à afficher une fenêtre de dialogue pour demander si on veut lancer l'application en question.
;    Les commandes valides sont true pour affiche la boite, false pour ne rien afficher, tout autre chose affiche un message d'erreur.
; MessageToShown= ici vous pouvez choisir le message à afficher dans le boite de dialogue, si vide la boite affiche le message par défaut.
ExecuteProg1=FramaLauncher.exe
LaunchIt1=true
WorkDir1=Framakey\FramaLauncher
Parameter1=
AskForIt1=false
MessageToShow1=
;
ExecuteProg2=FramaKiosk.exe
LaunchIt2=true
;ExecuteProgToStop2=k-meleon.exe
WorkDir2=Framakey\FramaKiosk
;Parameter2=
AskForIt2=false
;MessageToShow2=
;
ExecuteProg3=cafe.exe
LaunchIt3=true
;ExecuteProgToStop3=cafe.exe
WorkDir3=Apps\PortableFramakeyApps
Parameter3=
AskForIt3=false
MessageToShow3=

Bon, c’est assez parlant : on décide si on veut ou pas afficher un splashcreen ou pas (et lequel).
NB: le “path=“ n’a pas d’incidence et sert à débogguer. Ne vous inquiétez pas s’il contient un chemin absolu, donc.
Ensuite, start.ini propose de lancer jusqu’à 5 programmes à la suite. Ici, seules 3 entrées sont indiquées, mais si vous voulez en rajouter (par exemple pour lancer un autre logiciel de votre cru), vous aurez compris le principe.
Là, on voit qu’il est demandé à start.exe, via start.ini, de lancer :
1- Framakey\FramaLauncher\FramaLauncher.exe
2- Framakey\FramaKiosk\FramaKiosk.exe
3- Apps\PortableFramakeyApps\cafe.exe

FramaLauncher, c’est le menu à côté de l’horloge.
FramaKiosk, c’est l’interface toute jolie en HTML+CSS. Et c’est surement pour personnaliser cette interface que vous lisez cette documentation !
CAFE, c’est le logiciel qui associe les double clics sur les fichiers avec les applis Framakey (par exemple, tant que CAFE est lancé, un double clic sur un fichier PDF fera que ce fichier PDF s’ouvrira avec le logiciel portableSumatraPDF présent sur la clé). CAFE ne sera pas traité dans ce tutoriel.

FramaLauncher et FLTune

Commençons par le FramaLauncher.
Il s’agit à la base d’un logiciel du domaine public nommé AeTrayMenu. Ici, les entrées de ce menu (= quand vous faites un clic gauche ou droit sur l’icône Framakey présente à côté de l’horloge Windows) sont personnalisées et permettent de lancer les applications présentes sur la clé.
Je ne détaillerai pas la personnalisation de ce menu pour deux raisons :
1- cela a été traité dans le précédent tutoriel
2- un sympathique développeur Framakey, Mouss, vous a concocté le logiciel “FLTune” qui permet de personnaliser ce menu sans être informaticien (elle est pas belle, la vie ? Merci Mouss !)

L’interface FramaKiosk

Voilà probablement la partie que vous êtes venue chercher : “Comment je personnalise le Kiosk Framakey, moi ?”
Attachez vos ceintures, ce n’est pas bien compliqué, mais quand même relativement rock’n roll.

Architecture et profil Firefox

D’abord, sachez que le FramaKiosk n’est rien d’autre qu’un profil Firefox.
“Un quoi ?”
Firefox est un navigateur web (j’enfonce des portes ouvertes). Ce navigateur, lorsqu’il se lance, stocke sa configuration dans un “profil”. Un profil, c’est un dossier qui contient donc tout ce qui fait “votre” Firefox : les extensions, les marque-pages, les thèmes, l’agencement des boutons, les mots de passes enregistrés, les sites visités… Bref, toute la configuration de Firefox qui fait que votre navigateur est différent de celui du voisin.
Si vous êtes perdu, un coup de Google (pas sur la tête, ça pèse lourd) vous donnera tout plein d’infos.

Donc le FramaKiosk est un profil Firefox, que l’équipe Framakey à modifié pour dire :

  • ne t’ouvre pas en plein écran
  • ouvre toi en 700 pixels sur 500
  • n’affiche pas de menus
  • n’affiche pas de boutons ou de barre de navigation
  • n’affiche rien au clic-droit
  • etc…

Et dans ce FramaKiosk, on va charger une bête page web, si ce n’est que cette dernière, au lieu de se trouver sur le web, va se trouver sur la clé. C’est cette page que vous voyez quand le FramaKiosk est lancé.

“Comment ça marche ?”
On en était à lancer Framakey\FramaKiosk\FramaKiosk.exe (grâce au start.ini, suivez un peu !)
Vous trouverez le code source dans Framakey\FramaKiosk\PortableKioskCode\FramaKiosk.nsi
En gros FramaKiosk.exe va lancer Firefox + un profil + une page web présente sur la clé.

Pour cela, il utilise le fichier Framakey\FramaKiosk\FramaKiosk.ini, qui se présente ainsi :

[FramaKiosk]
FirefoxDirectory=../../Apps/PortableFirefox/firefox
ProfileDirectory=kioskprofile
PluginsDirectory=plugins
UserProfileDirectory=userprofile
AdditionalParameters="FramaKioskPages/index.html"
AllowMultipleInstances=true
SkipChromeFix=false
SkipCompregFix=false
WaitForFirefox=false
FirefoxExecutable=firefox.exe
DisableSplashScreen=false

Ainsi, FramaKiosk comprend qu’il doit aller lancer “firefox.exe” qui se trouve dans “../../Apps/PortableFirefox/firefox” mais en utilisant le profil “kioskprofile”, puis lancer la page “FramaKioskPages/index.html”.
La directive “AllowMultipleInstances=true” permet d’indiquer qu’on pourra lancer 2 processus Firefox simultanément (un pour le FramaKiosk, et un pour le firefox “normal”)

Je vous avais prévenu : c’est un peu rock’n rollhappy smiley

Retenez donc qu’en fait, grâce au lancement en cascade du start.exe et de son fichier start.ini, on lance automatiquement une instance de Firefox, mais avec un profil modifié (qui se trouve dans Framakey\FramaKiosk\kioskprofile) et une page donnée : Framakey\FramaKiosk\FramaKioskPages\index.html
C’est cette page là qui est affichée à l’utilisateur et que vous voulez probablement modifier !

“Pas si vite, et si je veux afficher un FramaKiosk de plus grande taille ? ou y remettre des boutons ?”
C’est très simple, mais comme ce n’est pas le sujet central de cette doc je vous renverrai vers les documentations prééxistantes en ligne, bien plus complètes.
En résumé, si vous souhaitez :
- modifier la taille à l’ouverture du Kiosk, ouvrez Framakey\FramaKiosk\kioskprofil\localstore.rdf

<RDF:Description RDF:about="chrome://browser/content/browser.xul#main-window"
                   sizemode="normal"
                   screenX="308"
                   screenY="103"
                   width="750"
                   height="547" />

screenX et screenY indiquent le décalage en pixel depuis le coin en haut à gauche de l’écran (0 à ces 2 valeurs indiquerait que le Kiosk doit s’afficher tout à fait en haut à gauche). width et height indiquent la largeur et la hauteur de la fenêtre.

- modifier les préférences du navigateur, c’est dans Framakey\FramaKiosk\kioskprofil\prefs.js
Par exemple pour demander au Kiosk de ne pas chercher automatiquement de nouvelles versions de Firefox (ça perturberait l’utilisateur) on indique dans ce fichier :

  1. user_pref("app.update.auto", false);

- modifier l’apparence du navigateur, c’est dans Framakey\FramaKiosk\kioskprofil\chrome\ et les deux fichiers CSS qu’il contient.
Ainsi, pour masquer le menu et la barre de navigation, nous avons mis dans Framakey\FramaKiosk\kioskprofil\chrome\userChrome.css

toolbar {
 display: none;
}
statusbar {
 display: none;
}
toolbarbutton.bookmark-item > .toolbarbutton-icon {
  display: none;
}

Voilà, la doc en ligne sur la modification des profils firefox est prolifique, alors à vous de choisir les adaptations qui vous conviennent.

Maintenant, le coeur du centre du sujet : comment faire sa propre charte graphique plutôt que d’utiliser la charte Framakey ?

Interface graphique

Nous y voilà.

Si vous avez tout suivi, vous savez maintenant que l’interface du FramaKiosk est en fait le fichier Framakey\FramaKiosk\FramaKioskPages\index.html !

A partir de là, c’est du HTML+Javascript+CSS, donc faites vous chauffer un thé (ou sortez une bière du frigo) et lancez vous.

index.html est d’un aspect plutôt classique et - laissons de côté l’humilité - assez bien documenté.

Architecture

Commençons par l’interface générale.
Elle utilise le fichier CSS

<link rel="stylesheet" href="css/index.css" />

Ce fichier contient tout ce qui concerne l’interface générale, y compris le lien vers l’image de fond et le positionnement des calques <div>.

La page est aussi constituée :

- d’un entête affichant le logo FK

<!-- ************ Entete *************** -->
                <div id="header">
                        <img src="img/interface/entete.png" alt="" />
                </div>
<!-- ************ Fin entete *************** -->

- d’un corps de page affichant les onglets (cf plus loin)

<!-- ************ Corps de page *************** -->
                <div id="content" class="clic">
                   <div id="tabscontainer" class="flora">
                                <ul class="ui-tabs-nav">
                                        <li class="ui-tabs-selected"><a href="basic.html"><span>Basiques</span></a></li>
                                        <li><a href="advanced.html"><span>Avancés</span></a></li>
                                        <li><a href="jeux.html"><span>Jeux</span></a></li>
                                        <li><a href="contenus.html"><span>Contenus</span></a></li>
                                        <!-- <li><a href="#fragment-3"><span>A propos</span></a></li> -->
                                        <li><a href="about.html"><span>A propos</span></a></li>
                                </ul>
                        </div>
                </div>
<!-- ************ Fin corps de page *************** -->

- d’une barre latérale à droite affichant l’image de l’utilisateur et certains raccourcis

- d’un calque affichant la version et la possibilité de changer d’interface

<!-- ************ Information de version *****************-->
                <div id="info_version">
                        <a href="lch/interface/interface.lch">Interface</a> - Framakey v1.8.1.2
                </div>
<!-- ********* Fin d'information de version **************-->

- de boutons de contrôles en haut à droite

<!-- ************ Boutons de controle *****************-->
                <div id="buttons_control_framakey" class="clic">
                        &nbsp;&nbsp;<a href="lch/links/framakey.lch"><img src="img/interface/globe.png" title="www.framakey.org" width="32px" height="32px" /></a>&nbsp;&nbsp;&nbsp;
                        <a href="lch/interface/ejection.lch" title="Ejecter la Framakey"><img src="img/interface/extinction.png" alt="Ejecter la Framakey" width="32px" height="32px" onclick="alert('Vous allez ejecter la Framakey.\n\nSi vous souhaitez juste fermer le Kiosk,cliquez sur la croix en haut à droite');"/></a>
                </div>
                <div id="buttons_control_computer" class="clic">
                        &nbsp;&nbsp;<a href="lch/interface/ordinateur.lch"><img src="img/interface/ordinateur.png" title="Poste de travail" width="32px" height="32px" /></a>&nbsp;&nbsp;&nbsp;
                        <a href="lch/interface/bureau.lch"><img src="img/interface/bureau.png" title="Montrer le bureau" width="32px" height="32px" /></a>
                </div>
<!-- ************ Fin boutons de controle ************* -->

- de la possibilité d’afficher le flux RSS du site Framakey (si on est connecté à internet, sinon affiche le contenu du fichier noflux.html)

<!-- ************ Flux *****************-->
                <div id="flux"><div id="plus_infos" style="float:right; font-size:9px;"></div>
<:vspace>
                <iframe frameborder="no" name="iframe_flux" id="iframe_flux" src="noflux.html">
                </div>
<!-- ********* Fin Flux **************-->

Onglets

Depuis la version 1.8, la Framakey utilise le framework javascript jQuery pour afficher une navigation par onglets.
Notons :

<script src="js/jquery-latest.js"></script>
          <link rel="stylesheet" href="js/tabs3.css" type="text/css" media="screen" title="Flora (Default)" />
          <script type="text/javascript" src="js/ui.core.js"></script>
          <script type="text/javascript" src="js/ui.tabs.js"></script>

index.html utilise donc :
- js/tabs3.css comme fichier javascript pour les onglets
- 3 fichiers javascript, pour la gestion des onglets, basé sur jQuery ( http://www.jquery.org )

Pour initialiser les onglets au chargement :

$(document).ready(function(){
            $("#tabscontainer ul").tabs();
                $('#tabscontainer ul').tabs({ fx: { height: 'toggle'} });

C’est ce code qui va indiquer a jQuery “quand la page sera chargée, transforme les éléments ‘ul’ ayant pour id ‘tabscontainer’ en onglets”.

STOP ! Vous êtes perdu ? vous ne savez pas ce qu’est javascript et encore moins un framework ?
Pas de souci, vous n’avez pas réellement besoin de le comprendre pour le modifierhappy smiley
Lisez la suite .

jQuery va donc trouver le code que l’on a déjà vu plus haut :

<!-- ************ Corps de page *************** -->
                <div id="content" class="clic">
                   <div id="tabscontainer" class="flora">
                                <ul class="ui-tabs-nav">
                                        <li class="ui-tabs-selected"><a href="basic.html"><span>Basiques</span></a></li>
                                        <li><a href="advanced.html"><span>Avancés</span></a></li>
                                        <li><a href="jeux.html"><span>Jeux</span></a></li>
                                        <li><a href="contenus.html"><span>Contenus</span></a></li>
                                        <!-- <li><a href="#fragment-3"><span>A propos</span></a></li> -->
                                        <li><a href="about.html"><span>A propos</span></a></li>
                                </ul>
                        </div>
                </div>
<!-- ************ Fin corps de page *************** -->

Le principe est en fait très simple :
jQuery trouve une balise div avec un id “tabscontainer” (vous la voyez ? c’est la 3eme ligne). Il sait donc qu’il va devoir transformer la liste à puces… en onglets (pour faire une liste à puce en HTML, on utilise les balises <ul> et <li>winking smiley.
Ainsi chaque “puce” se verra transformée en onglet.

Ici, on en compte 5, dont le titre est affiché entre les balises <span> : Basiques, Avancés, Jeux, Contenus et A propos. La puce qui suit la puce Contenus n’est pas affichée, car entourée des commentaires HTML (“<!--“ et “-->”)

“J’ai rien compris.”
Faites un effort ! winking smiley
Si vous ajouter une nouvelle puce entre la puce Jeux et la puce Contenus :

<li><a href="jeux.html"><span>Jeux</span></a></li>
<li><a href="nouvellepage.html"><span>Nouvel onglet</span></a></li>
<li><a href="contenus.html"><span>Contenus</span></a></li>

Alors vous aurez un nouvel onglet intitulé “Nouvel onglet” qui chargera le contenu de la page “nouvellepage.html” si on clique dessus.

Si vous ne comprenez toujours rien, c’est que vous ne connaissez pas le HTML, et vous pouvez tout de suite laisser tomber et passer au chapitre “pour les nuls” situés plus bas. Allez zou, revenez plus tard !

Bon, une partie de mon (fabuleux, vous ai-je dit que vous étiez géniaux ?) public est toujours là. Alors, pour toi public, je continue.

Maintenant, on a compris : le CSS place les blocs et définis les couleurs, le HTML structure la page, et jQuery transforme la liste à puces en onglets, chaque clic sur un onglet chargeant la page HTML indiquée le lien “href” de la puce en question.
C’est pas si compliqué, non ?

Voyons voir à quoi ressemble lesdites pages en ouvrant, par exemple Framakey\FramaKiosk\FramaKioskPages\jeux.html :

<ul>
  <li><img src="img\apps\icons\sudoku.bmp" /> - <a href="lch\apps\sudoku.lch">Sudoku</a> : le célèbre
casse tête mathématique</li>
  <li><img src="img\apps\icons\puzzles.bmp" /> - <a href="lch\apps\puzzles.lch">Puzzles</a> : une trentaine
de jeux sans prétention, mais carrément addictifs !</li>
  <li><img src="img\apps\icons\pengupop.bmp" /> - <a href="lch\apps\pengupop.lch">PenguPop</a> : un clone de Puzzle Bubble</li>
  <li><img src="img\apps\icons\pokerth.bmp" /> - <a href="lch\apps\pokerth.lch">PokerTH</a> : "Tu bluffes,
Martoni !"</li>
</ul>

C’est très simple, non ? On a de nouveau une liste à puces, qui affiche cette fois les applications à lancer.
Ainsi :
- “<img src=“img\apps\icons\sudoku.bmp” />” représente l’icône de l’application
- “<a href=“lch\apps\sudoku.lch”>Sudoku</a>” représente le lien qui lancera l’application
- “le célèbre casse tête mathématique” représente la description de l’application.

A partir de là, vous devriez pouvoir personnaliser largement l’interface du FramaKiosk en manipulant
- soit les fichiers CSS (dans css\index.css)
- soit le fichier HTML de départ (index.html) et notamment la liste des onglets présents dans la liste à puces.
- soit les fichiers ouverts par les onglets, affichant les applications à lancer.

Je vous laisse jouer avec cette structure, je fini mon thé et je reviens.

(...)

Je sens poindre des milliers de questions, mais je vais en choisir une au hasard… Vous, au fond, oui, vous là.
“Euh, c’est quoi le fichier LCH qui est dans le ‘href’ ?”

Excellente question ! Voyons cela…

Fichiers .lch

On l’a vu (et ce n’est pas faute de l’avoir répété, le FramaKiosk est basé sur Firefox, donc un navigateur web.
Or un navigateur n’a pas le droit, c’est même carrément tabou, d’éxecuter un fichier executable sur le disque de l’utilisateur. Heureusement : imaginez vous sur une page web, vous cliquez sur un lien et hop, votre Windows s’éteint. Ce type de chose serait possible si le navigateur pouvait intéragir avec les logiciels installés localement sur votre machine sans vous prévenir. C’est pour cela que si vous faites un lien vers un programme executable, une fenêtre d’alerte se lance et vous dit quelque chose du genre “Firefox tente de lancer l’application C:\Windows\Calculatrice.exe - Êtes-vous sûr de vouloir effectuer cette opération ?”. Il est décidemment poli et bien élevé, ce Firefox ! (contrairement à Internet Explorer qui, avant la version 6 ne vous posait pas forcément la question, ce qui posait de groooos soucis de sécurité)

Le souci, c’est que nous, on ne veut pas aller sur le web avec notre FramaKiosk, on veut rester en local, et on ne veut pas de ses fenêtres d’alerte, puisque le but c’est justement de lancer des logiciels…

Alors que faire ?
En fait, l’astuce revient à utiliser les mimetypes du navigateur. Par exemple, lorsque vous cliquez sur un fichier .mp3 sur une page web, vous avez bien votre lecteur MP3 qui se lance ? ou quand vous cliquez sur un fichier PDF, il lance votre visionneuse PDF ? Le type mime, c’est - en gros - de dire au navigateur “Si ton utilisateur clique sur un lien avec l’extension .truc, alors utilise le programme “C:\bidule\machin.exe” pour lire ce fichier .truc”.
Donc, dans le profil de notre FramaKiosk, on trouve Framakey\FramaKiosk\kioskprofil\mimeTypes.rdf, avec notamment :

<RDF:Description RDF:about="urn:mimetype:application/launcher"
                   NC:value="application/launcher"
                   NC:editable="true"
                   NC:fileExtensions="lch"
                   NC:description="">
    <NC:handlerProp RDF:resource="urn:mimetype:handler:application/launcher"/>
  <RDF:Description RDF:about="urn:mimetype:externalApplication:application/launcher"
                   NC:prettyName="Launcher"
                   NC:path="Launch.exe" />
  <RDF:Description RDF:about="urn:mimetype:handler:application/launcher"
                   NC:alwaysAsk="false"
                   NC:saveToDisk="false">
    <NC:externalApplication RDF:resource="urn:mimetype:externalApplication:application/launcher"/>
  </RDF:Description>

En résumé, ça dit : “Si tu trouve un fichier .lch, c’est un fichier qui va fonctionner avec le logiciel ‘Launcher’. Et le programme ‘Launcher’ s’appelle en réalité ‘Launch.exe’. Et tant que tu y es, lorsque tu donnes un fichier .lch à manger à Launch.exe, pas la peine de poser une alerte avant de l’ouvrir”.
C’est sympatique, non ?

Pour info, pour pouvoir fonctionner avec des chemins relatifs, Launch.exe se trouve dans /Apps/PortableFirefox/firefox/Launch.exe

Bon, la bonne nouvelle, c’est que tout ça, ça ne vous servira probablement pas. La mauvaise, c’est qu’on ne peut pas passer directement le chemin de l’application à lancer, il faut passer par un fichier intermédiaire : le fameux fichier .lch.

Comment se présente se fichier ?
Tout simplement comme ça :

[Launch]
ExecuteFile=${cwd}\..\..\..\Apps\Portable7-Zip\Portable7-Zip.exe
ExecuteDirectory=${cwd}\..\..\..\Apps\Portable7-Zip\

“${cwd}” indique le “current working directory”, c’est à dire l’emplacement de Launch.exe
En indiquant “${cwd}\..\..\..\”, on remonte donc à la racine de la Framakey, et en ajoutant “Apps\Portable7-Zip\Portable7-Zip.exe” on indique le fichier à lancer.
La variable “ExecuteDirectory=${cwd}\..\..\..\Apps\Portable7-Zip\” indique le dossier de l’application dans lequel on veut se placer. Ce n’est pas obligatoire, mais si on ne l’indique pas, certaines applications ne savent plus où elles se trouvent et perdent un peu les pédales.

Mieux, on peut aussi passer des paramètres ! Ainsi :

[Launch]
ExecuteFile=${cwd}\..\..\..\Apps\PortableFirefox\PortableFirefox.exe
ExecuteParameters=http://www.framasoft.net/

indique par exemple de lancer PortableFirefox avec en paramètre une adresse web. Si on clique sur ce fichier .lch depuis le FramaKiosk, on lance donc Firefox avec Framasoft.net en page d’accueil.

Autre exemple :

[Launch]
ExecuteFile=${cwd}\..\..\..\Apps\PortableSumatraPDF\PortableSumatraPDF.exe
ExecuteParameters=${cwd}\..\..\..\Data\Documents\pdf\livret_libre_a4_lecture-ed3.pdf

indique par exemple de lancer SumatraPDF avec en paramètre un fichier PDF. Si on clique sur ce fichier .lch depuis le FramaKiosk, on lance donc l’ouverture du “livret du libre” dans la visionneuse PDF.

Donc, si je reviens à l’interface, et à ma page jeux, j’avais un lien

<li><img src="img\apps\icons\sudoku.bmp" /> - <a href="lch\apps\sudoku.lch">Sudoku</a> : le célèbre casse tête mathématique</li>

Le fichier Framakey\FramaKiosk\FramaKioskPages\lch\apps\sudoku.lch contient :

[Launch]
ExecuteFile=${cwd}\..\..\..\Apps\SudokuPortable\SudokuPortable.exe
ExecuteDirectory=${cwd}\..\..\..\Apps\SudokuPortable\

Donc, on y est : si je clique sur ce lien .lch, l’application SudokuPortable sera lancée !

Résumé : ajouter une application au FramaKiosk

Bon, on reprends et on synthétise.
Pour ajouter une application au FramaKiosk, il suffit d’ajouter une puce HTML dans l’onglet de votre choix.

Commencez par placer vos applications portables, récupérées par exemple depuis http://framakey.org/Portables/Index, et placez-les (une fois dézipées) dans le dossier /Apps de votre Framakey (par exemple /Apps/mon_soft/, puis :

1. choisissez l’onglet (par exemple, le contenu de l’onglet Jeux se trouve dans “Framakey\FramaKiosk\FramaKioskPages\jeux.html”
2. éditez ce fichier (par exemple avec notepad++, mais le bon vieux notepad classique fait l’affaire
3. ajoutez

<div class="application">
      <div class="icone"><a href="lch/Apps/mon_soft.lch" title="Mon_Soft - est sa description."><img alt="MonSoft" src="img\Apps\Ma_superbe_icone.png" /></a></div>
      <div class="description">Description simple du programme</div>
   </div>

avant le dernier “</div>
4. créez un fichier texte (avec notepad) “Framakey\FramaKiosk\FramaKioskPages\lch\apps\mon_soft.lch” et mettez comme contenu :

[Launch]
ExecuteFile=${cwd}\..\..\..\Apps\mon_soft\mon_soft.exe
ExecuteDirectory=${cwd}\..\..\..\mon_soft\mon_soft\

Voilà. Relancez le FramaKiosk et votre nouvelle appli devrait apparaîtrehappy smiley

Framasuite : ajouter des applications pour les nuls

Tout cela vous parait bien compliqué ?
Il est vrai que cela n’est pas bien simple, mais c’est le prix à payer si vous voulez une interface aux petits oignons.

Maintenant, si vous ne voulez que rajouter des applications et que vous êtes prêts à faire une croix sur la belle interface graphique du FramaKiosk, voilà un mini-tutoriel utilisant la FramaSuite, une alternative beaucoup plus légère, mais beaucoup moins crispy-flashy-bumpy…

Commencez par placer vos applications portables, récupérées par exemple depuis http://framakey.org/Portables/Index, et placez-les (une fois dézipées) dans le dossier /Apps de votre Framakey.

1. Lancez votre Framakey normalement.
2. Dans la fenêtre principale, regardez en bas à droite, à côté du numéro de version de la Framakey, il y a un lien “interface”. Cliquez dessus.
3. choisissez l’option “Framasuite” et validez.
4. Ejectez votre Framakey. Puis réinsérez là.
5. A côté de l’horloge, cliquez gauche sur l’icône Framakey et, dans la fenêtre Framasuite, choisissez “Editer” → “Ajouter un logiciel” et indiquez le chemin de vos nouvelles applications. Rensignez les champs que vous souhaitez et validez.
6. “Fichier” > “Sauvegarder” la liste.

C’est tout !

Conclusion

Voilà, avec ça vous devriez capable d’adapter votre Framakey à vos besoins.
Que se soit en terme de charte graphique, ou bien en terme d’ajouts d’applications.

Si jamais ce n’était pas le cas, ou si vous aviez des questions, posez-les sur le forum Framakey, de façon 1) à ce que tout le monde profite des réponses, 2) que nous puissions enrichir cette documentation.

Si vous souhaitez réaliser une Framakey à vos couleurs (personnalisation des logos, charte graphique, ajout/suppression d’applications, etc.) mais que vous n’avez pas le temps ou pas le compétences pour le faire, vous pouvez éventuellement nous sous-traiter cette opération contre rémunération.
Envoyez alors un mail décrivant votre projet (type de personnalisation, volume de clés, délais, etc.) à : contact (arobase) framasoft (point) net

« | Index | »

Fil RSS