217 lines
7.4 KiB
HTML
217 lines
7.4 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<title>Utiliser ce site</title>
|
||
<link rel="stylesheet" href="../tuteurs.css" type="text/css" />
|
||
</head>
|
||
<body>
|
||
<div class="navigation">
|
||
<h1>Tuteurs informatique<br /><a href="../meta/contact.html">Nous contacter</a></h1>
|
||
<hr />
|
||
<ul class="menu">
|
||
<li>
|
||
<a href="../meta/charte_graphique.html">Utiliser ce site</a>
|
||
</li>
|
||
<li>
|
||
<a href="../actualite.html">Actu et stages</a>
|
||
</li>
|
||
<li>
|
||
<a href="../docs/">Docs à imprimer</a>
|
||
</li>
|
||
<li>
|
||
<a href="../meta/plan_site.html">Plan du site</a>
|
||
</li>
|
||
<li>
|
||
<a href="../search.html">Rechercher</a>
|
||
</li>
|
||
</ul>
|
||
<hr />
|
||
<ul class="arbre">
|
||
<li>
|
||
<a href="../">Les tuteurs</a>
|
||
<ul class="arbre">
|
||
<li>
|
||
<a href="./">Meta</a>
|
||
<ul class="arbre">
|
||
<li>
|
||
<a href="charte.html">La charte</a>
|
||
</li>
|
||
<li>
|
||
<a href="charte_graphique.html" class="actuel">Utiliser ce site</a>
|
||
</li>
|
||
<li>
|
||
<a href="conseils.html">Aide</a>
|
||
</li>
|
||
<li>
|
||
<a href="contact.html">Contact</a>
|
||
</li>
|
||
<li>
|
||
<a href="formations.html">Activités</a>
|
||
</li>
|
||
<li>
|
||
<a href="gourous.html">Gourous</a>
|
||
</li>
|
||
<li>
|
||
<a href="nouveau.html">Nouveautés</a>
|
||
</li>
|
||
<li>
|
||
<a href="plan_site.html">
|
||
Plan du site des tuteurs informatique
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="recrutement.html">Recrutement</a>
|
||
</li>
|
||
<li>
|
||
<a href="salles.html">Salles élèves</a>
|
||
</li>
|
||
<li>
|
||
<a href="trombi.html">Trombinoscope</a>
|
||
</li>
|
||
<li>
|
||
<a href="veritables_mobiles.html">Véritables mobiles</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<hr />
|
||
<ul class="menu">
|
||
<li>
|
||
<a href="http://www.eleves.ens.fr/">Serveur des élèves</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.ens.fr/">ENS</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.spi.ens.fr/">SPI</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="corps">
|
||
<h1>Charte graphique du site des tuteurs informatique</h1>
|
||
<div class="sommaire">
|
||
<ul>
|
||
<li>
|
||
<a href="#s1"> Présentation générale</a>
|
||
</li>
|
||
<li>
|
||
<a href="#s2">Repères visuels</a>
|
||
<ul>
|
||
<li>
|
||
<a href="#s2_1">Attention danger</a>
|
||
</li>
|
||
<li>
|
||
<a href="#s2_2">Encadrés</a>
|
||
</li>
|
||
<li>
|
||
<a href="#s2_3">Points spécifiques à l'ENS</a>
|
||
</li>
|
||
<li>
|
||
<a href="#s2_4">Commandes Unix</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<h2>
|
||
<a name="s1" id="s1"> Présentation générale</a>
|
||
</h2>
|
||
<p>
|
||
Les pages du site ont une présentation uniforme :
|
||
</p>
|
||
<ul>
|
||
<li>Sur la gauche de la page se trouve une liste de liens, avec notamment
|
||
une représentation de l'arborescence du site ;
|
||
</li>
|
||
<li>
|
||
Sur la partie droite, on trouve le contenu proprement dit de la page. De
|
||
plus, le plan de celle-ci est affiché en dessous du titre ce qui permet
|
||
d'accéder rapidement à une section précise ;
|
||
</li>
|
||
<li>
|
||
Le ou les auteurs de la page ainsi que la date de dernière modification
|
||
sont indiqués à la fin.
|
||
</li>
|
||
</ul>
|
||
<h2>
|
||
<a name="s2" id="s2">Repères visuels</a>
|
||
</h2>
|
||
<p>Pendant la lecture du site des tuteurs, différents repères visuels
|
||
peuvent vous guider.</p>
|
||
<h3>
|
||
<a name="s2_1" id="s2_1">Attention danger</a>
|
||
</h3>
|
||
<p>Quand nous voulons vous mettre en garde contre certains risques (par
|
||
exemple des erreurs d'étourderie pouvant conduire à la destruction
|
||
de vos fichiers). Nous utilisons un encadré rouge avec des panneaux
|
||
indiquant le danger : </p>
|
||
<div class="attention">
|
||
<h1><img src="../icones/panneau_attention.png" alt="/!\" /> Attention <img src="../icones/panneau_attention.png" alt="/!\" /></h1>
|
||
<ul>
|
||
<li>On a très vite fait de confondre <code>mv</code> et
|
||
<code>rm</code>. </li>
|
||
<li><code>rm</code> ne fonctionne pas sur le principe de la corbeille
|
||
des
|
||
Macs ou des PC Windows, il ne déplace pas les fichiers dans un «endroit»
|
||
de
|
||
stockage avant destruction. Un fichier effacé est <em>vraiment</em>
|
||
effacé (mais
|
||
le SPI fait des sauvegardes toutes les nuits, adressez-vous à eux si vous
|
||
effacez un fichier par mégarde: <code>spi@clipper</code>).</li>
|
||
<li>[...]</li>
|
||
</ul>
|
||
</div>
|
||
<h3>
|
||
<a name="s2_2" id="s2_2">Encadrés</a>
|
||
</h3>
|
||
<p>Quand nous voulons mettre en valeur un point particulier ou résumer
|
||
quelques points de manière concise, nous utilisons des
|
||
encadrés :</p>
|
||
<div class="encadre"> Un des avantages de Mozilla est
|
||
la possibilité d'utiliser des onglets : si vous
|
||
faites <code>Ctrl-T</code> ou sélectionnez <code>Navigator Tab</code>
|
||
dans le sous-menu <code>New</code> du menu <code>File</code>, vous
|
||
ouvrez une fenêtre de navigation à l'intérieur de votre navigateur qui
|
||
se superpose à la précédente. Vous pouvez passer de l'une à l'autre en
|
||
cliquant sur les différents onglets.
|
||
</div>
|
||
<h3>
|
||
<a name="s2_3" id="s2_3">Points spécifiques à l'ENS</a>
|
||
</h3>
|
||
<p> Si notre activité a principalement pour but d'aider les élèves de
|
||
l'ENS à appréhender les notions informatiques pour se servir des
|
||
ordinateurs mis à leur disposition dans les salles informatiques de
|
||
l'École, nous pensons que ce site peut servir à tout utilisateur d'un
|
||
système d'exploitation de type Unix (Solaris, GNU/Linux, *BSD...).
|
||
</p>
|
||
<p>
|
||
C'est pour cela que dans la mesure du possible, nous mettons en évidence
|
||
grâce à un rectangle bleu clair
|
||
les paragraphes spécifiques à l'installation informatique de l'ENS
|
||
(maintenue par le <a href="http://www.spi.ens.fr/">service de prestations
|
||
informatique</a>), comme le montre le paragraphe qui
|
||
suit :</p>
|
||
<div class="ens">
|
||
<p><code>pot</code> affiche le menu du pot du jour.
|
||
<code>pot</code> est une commande interne à l'École. Le menu est tapé en
|
||
début de semaine par un membre du SPI.
|
||
</p>
|
||
</div>
|
||
<h3>
|
||
<a name="s2_4" id="s2_4">Commandes Unix</a>
|
||
</h3>
|
||
<p>Quand nous donnons des commandes Unix, destinées à être tapées dans un
|
||
<a href="../jargon.html#xterm"><code>xterm</code></a>, nous utilisons un
|
||
encadré du type suivant :</p>
|
||
<pre><span class="prompt">bireme ~ $</span> ytalk toto@drakkar
|
||
</pre>
|
||
<div class="metainformation">
|
||
Auteur : Joël Riou. Dernière modification : 2009-10-04 par Marc Mezzarobba.
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|