Allez hop, aussitôt dit, (presque) aussitôt fait :
http://download.framakey.org/dev/framak ... ioskPages/Je ne suis pas peu fier du résultat en qq heures de boulot...
A télécharger ici
http://download.framakey.org/dev/framak ... e_skin.zip pour tester en live...
Le principe, c'est donc de mettre des grosses icones au lieu des petites, et de nommer les usages ("lire mes vidéos") plutôt que les noms de logiciels ("VLC")
Là, le contenu n'est évidemment pas du tout travailler, mais c'est à la portée de quiconque de l'améliorer :
- le fichier index.html charge les pages à l'aide de jQuery :
- Code: Tout sélectionner
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="internet.html"><span><img class="chtiticone" src="img/apps/icons/kompozer.bmp"/>Internet</span></a></li>
<li><a href="travailler.html"><span><img class="chtiticone" src="img/apps/icons/kompozer.bmp"/>Travailler</span></a></li>
<li><a href="jouer.html"><span><img class="chtiticone" src="img/apps/icons/kompozer.bmp"/>Jouer</span></a></li>
<li><a href="multimedia.html"><span><img class="chtiticone" src="img/apps/icons/kompozer.bmp"/>Multimédia</span></a></li>
<li><a href="outils.html"><span><img class="chtiticone" src="img/apps/icons/kompozer.bmp"/>Outils</span></a></li>
<li><a href="contenus.html"><span><img class="chtiticone" src="img/apps/icons/kompozer.bmp"/>Contenus</span></a></li>
</ul>
(chaque élément donne un onglet, qui chargera le fichier indiqué dans le href)
Ensuite, pour la page "internet.html", par exemple, on a juste :
- Code: Tout sélectionner
<script type="text/javascript">
$(function() {
$('#apps *').tooltip({
track: true,
delay: 700,
showBody: " - ",
showURL: false
});
});
</script>
<div id="apps" class="applications">
<div class="application">
<div class="icone"><a href="lch\apps\firefox.lch" title="Firefox - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableFirefox.png" /></a></div>
<div class="description">Navigateur web</div>
</div>
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
</div>
Le script du début, c'est pour gérer les tooltips
Ensuite, chaque
- Code: Tout sélectionner
<div class="application">
<div class="icone"><a href="lch\apps\openoffice.lch" title="Nom du logiciel - Description du logiciel. Cette description peut être un peu plus longue, mais il ne faut pas abuser, hein, non plus. Sinon c'est pas beau..."><img alt="portableOpenOffice.org" src="img/apps/PortableOpenOffice.png" /></a></div>
<div class="description">Suite bureautique</div>
</div>
correspond à un logiciel (icone + description)
Franchement, je pense qu'avec le Framakiosk, on ne pourra pas faire plus simple, comme code...
Alors, un chti gars motivé pour trouver le bon ordonnancement et les bonnes icones ?
)