-
Notifications
You must be signed in to change notification settings - Fork 12
/
tutoriel.html
492 lines (352 loc) · 21.4 KB
/
tutoriel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutoriel édition CMS Translucide</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="theme/default/style.min.css">
<style>
@font-face {
font-family: 'FontAwesome';
src: url('api/icons/icons.eot?');
src:
url('api/icons/icons.eot?#iefix') format('embedded-opentype'),
url('api/icons/icons.woff2?') format('woff2'),
url('api/icons/icons.woff?') format('woff'),
url('api/icons/icons.ttf?') format('truetype'),
url('api/icons/icons.svg?#icons') format('svg');
font-weight: normal;
font-style: normal;
}
header nav li {
float: inherit;
}
</style>
</head>
<body>
<header role="banner" class="pam">
<nav role="navigation" aria-label="Accès rapide" class="inline">
<ul>
<li><a href="#main">Aller au contenu</a></li>
</ul>
</nav>
<h1>Tutoriel édition CMS Translucide</h1>
<nav role="navigation" aria-label="Sommaire">
<h2>Sommaire du tutoriel</h2>
<ol id="sommaire" class="unstyled"></ol>
</nav>
</header>
<main id="main" role="main" tabindex="-1" class="content">
<section class="mw960p mod center mbl">
<article>
<h2>Ce site pollue</h2>
<p>De par son existence et sa consultation, ce site impacte l’environnement. Par l’énergie qu'il consomme, mais surtout par la fabrication de tous les périphériques utilisés pour sa consultation (ordinateur, téléphone portable, tablette...).</p>
<p>Pour réduire l'impact de vos pages, il faut minimiser la sollicitation de votre hébergement web, du réseau internet et enfin des périphériques de vos visiteurs.</p>
<p>Pour cela, nous pouvons optimiser trois axes :</p>
<ul>
<li>Limiter le poids global de votre page (le poids des fichiers téléchargés pour afficher votre page).</li>
<li>Limiter le nombre de fichiers qui transitent sur le réseau (images, textes, interfaces, codes pour des fonctionnalités).</li>
<li>Enfin limiter la complexité de la page pour qu'elle s'affiche rapidement, même sur de vieux périphériques.</li>
</ul>
<h3>Comment faire ?</h3>
<p>Pour en minimiser son impact et économiser notre attention, il est préférable de minimiser le temps que vos visiteurs passeront sur votre site pour venir chercher l'information dont ils ont besoin.</p>
<ul>
<li>Nous vous invitons à minimiser la taille des images. Pour cela vous pouvez réduire la taille des images (maximum 960 pixels de largeur/hauteur), leur poids en évitant les images de plus de 200 kilos octets, en choisissant le format le plus adapté (jpg ou webp pour les photos, avec une compression jusqu'à 80 % par exemple) et leur nombre (éviter plus de 3 ou 4 images par page). Plus il y a d'images, plus le réseau entre votre hébergeur et vos visiteurs est sollicité.</li>
<li>Ne chargez pas trop vos pages. Soyez le plus succinct et concis possible. Plus vos textes seront courts, plus ils auront de chances d'être lus.</li>
<li>Privilégiez la stabilité de votre site en l'améliorant avec le temps. Essayez de ne pas avoir trop de pages, affinez leur contenu. N'hésitez pas à remiser les contenus qui ne sont plus d'actualité. Privilégions la clarté et la pertinence, pour moins d'obsolescence.</li>
</ul>
<h2>Mode édition</h2>
<h3>Se connecter en mode édition</h3>
<ul>
<li> Cliquer sur l'icône "clé" <i class="fa" aria-hidden="true"></i> en bas de l'écran.</li>
<li>Rentrer l'adresse email et le mot de passe transmis par votre webmaster.</li>
</ul>
<h3>Quitter le mode édition</h3>
<p>Pour quitter le mode édition afin d'avoir un aperçu des ajouts, modifications, suppressions, cliquer sur l'icône "croix" <i class="fa" aria-hidden="true"></i> en haut à droite.</p>
<h3>Se déconnecter</h3>
<p>Pour se déconnecter, afin par exemple de se connecter avec un autre utilisateur, se positionner sur l'icône "utilisateur" <i class="fa" aria-hidden="true"></i> puis cliquer sur l'icône "se déconnecter" <i class="fa" aria-hidden="true"></i>.</p>
<h2>Gérer du contenu</h2>
<h3>Ajouter un événement/article/annuaire/page</h3>
<ul>
<li> Cliquer sur l'icône "plus" <i class="fa" aria-hidden="true"></i> en bas à gauche (apparaît au survol). Un popup apparaît. </li>
<li>Cliquer sur l'onglet du type de contenu souhaité.</li>
<li>Ajouter un titre.</li>
<li>Choisir le modèle de page correspondant dans la liste déroulante : <br>
</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
<li>Penser à passer la page/article en mode "visible" en cliquant sur l'icône "oeil barré" <i class="fa" aria-hidden="true"></i> quand le contenu est prêt à être publié.</li>
</ul>
<h3>Saisir les données de la page (pour le référencement)</h3>
<ul>
<li> Passer en mode édition en cliquant sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> en bas à gauche (apparaît au survol).</li>
<li>Survoler le titre de la page tout en haut afin de voir apparaître les données de la page.</li>
<li>Saisir le titre de la page : il s'agit du titre qui apparaîtra dans les moteurs de recherche.</li>
<li>Remplir le champ "Description pour les moteurs de recherche" : il s'agit des quelques lignes qui apparaîtront sous le titre dans les moteurs de recherche.</li>
<li>Si besoin, cocher "noindex" afin d'empêcher que la page soit indexée par les moteurs de recherche (par exemple pour les mentions légales).</li>
<li>Si besoin, cocher "nofollow" afin que les liens de cette page ne soient pas suivis par les moteurs de recherche.</li>
<li>Si besoin, modifier l'adresse web formatée qui apparaîtra dans l'url de votre page.</li>
<li>Si besoin, ajouter une image qui apparaîtra lors d'un partage de votre page sur les réseaux sociaux.</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
</ul>
<h3>Ajouter du contenu</h3>
<ul>
<li> Après la création d'un événement/article/annuaire/page, le mode édition est automatiquement activé.</li>
<li>Se positionner sur chaque zone éditable et ajouter le contenu souhaité.</li>
<li>Pour ajouter une image, cliquer sur la zone grisée puis sélectionner l'image à télécharger.</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
</ul>
<h3>Ajouter une catégorie/tag dans un événement/article/annuaire</h3>
<ul>
<li>Aller sur l'événement/article/annuaire concerné.</li>
<li>Passer en mode édition en cliquant sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> en bas à gauche (apparaît au survol).</li>
<li>Cliquer sur le champ sous "Catégories/Tags".</li>
<li>Choisir une catégorie/tag dans la liste déroulante ou saisir une nouvelle catégorie/tag.</li>
<li>Pour en saisir plusieurs, les séparer par une virgule.</li>
</ul>
<h3>Mettre en brouillon/ligne du contenu</h3>
<ul>
<li>Aller sur la page concernée.</li>
<li>Cliquer sur l'icône "oeil" <i class="fa" aria-hidden="true"></i> / "oeil barré" <i class="fa" aria-hidden="true"></i> en haut à droite pour mettre en brouillon ou en ligne une page.</li>
<li>Cliquer sur "Enregistrer".</li>
</ul>
<h3>Mettre à jour du contenu</h3>
<ul>
<li> Se positionner sur la page/article concerné-e via le menu.</li>
<li>Passer en mode édition en cliquant sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> en bas à gauche (apparaît au survol).</li>
<li>Ou cliquer sur l'icône "menu" <i class="fa" aria-hidden="true"></i> en haut à gauche puis cliquer sur la page/article concerné-e.</li>
<li>Cliquer sur la zone à modifier, faire les modifications souhaitées (possibilité de mettre en forme le texte, la barre d'outils apparaît au survol du texte concerné).</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
</ul>
<h3>Modifier la date d'un événement/article/annuaire (pour en modifier l'ordre)</h3>
<ul>
<li>Aller sur la page concernée.</li>
<li>Cliquer sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> en bas à gauche de la page (apparaît au survol).</li>
<li>Survoler le titre de la page en haut du menu d'édition.</li>
<li>Modifier la date de création.</li>
</ul>
<h3>Supprimer un événement/article/annuaire/page</h3>
<ul>
<li>Aller sur la page concernée.</li>
<li>Cliquer sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> en bas à gauche de la page (apparaît au survol).</li>
<li>Cliquer sur le bouton "Supprimer" en haut à droite.</li>
<li>Cliquer sur "OK".</li>
</ul>
<div>
<h3>Ajouter une traduction</h3>
</div>
<ul>
<li>Aller sur la page concernée.</li>
<li>Cliquer sur le bouton "Langue" en haut à droite.</li>
<li>Si la page de traduction existe déjà, cliquer sur le champ après "Connecter" et choisir la page traduite dans la liste déroulante.</li>
<li>Pour créer une page de traduction, cliquer sur "Dupliquer" en face de la langue concernée.</li>
</ul>
<h2>Mettre en forme du contenu</h2>
<h3>Ajouter un titre</h3>
<ul>
<li>Sélectionner le texte du titre.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur H² (titre de 2ème niveau) ou H³ (titre de 3ème niveau).</li>
</ul>
<h3>Mettre en gras un mot ou une expression</h3>
<ul>
<li>Sélectionner le mot ou l'expression à mettre en gras.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "gras" <i class="fa" aria-hidden="true"></i>.</li>
</ul>
<h3>Mettre en italique un mot ou une expression</h3>
<ul>
<li>Sélectionner le mot ou l'expression à mettre en gras.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "italique" <i class="fa" aria-hidden="true"></i>.</li>
</ul>
<h3>Ajouter une citation</h3>
<ul>
<li>Sélectionner le mot ou l'expression à mettre en gras.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "citation" <i class="fa" aria-hidden="true"></i>.</li>
</ul>
<blockquote>Ceci est un exemple de citation.</blockquote>
<h3>Ajouter une liste à puces</h3>
<ul>
<li>Saisir le texte en appuyant sur "Entrée" à chaque nouvelle ligne.</li>
<li>Sélectionner tout le texte.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "liste à puces" <i class="fa" aria-hidden="true"></i>.</li>
</ul>
<h3>Aligner du contenu</h3>
<ul>
<li>Sélectionner le texte à aligner.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "aligner à gauche" <i class="fa" aria-hidden="true"></i>, "centrer" <i class="fa" aria-hidden="true"></i> ou "aligner à droite" <i class="fa" aria-hidden="true"></i>.</li>
</ul>
<h3>Éviter les mots isolés</h3>
<ul>
<li>Dans la barre d'outils, cliquer sur l'icône "voir le code source" <i class="fa" aria-hidden="true"></i>.</li>
<li>Placer votre curseur entre les 2 mots que vous voulez retrouver sur la même ligne. Il ne doit pas avoir d'espace entre les mots. Les mots doivent être collés.</li>
<li>Ajouter le code HTML "&nbsp;" pour avoir une espace insécable.</li>
</ul>
<h3>Ajouter un pictogramme</h3>
<ul>
<li>Se positionner à l'endroit où l'on souhaite insérer un pictogramme.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "drapeau" <i class="fa" aria-hidden="true"></i>.</li>
</ul>
<h3>Modifier la langue d'un mot ou d'une expression</h3>
<ul>
<li>Sélectionner le mot ou l'expression concerné•e.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "langage".</li>
<li>Saisir le code langue.</li>
<li>Cliquer sur "Ajouter une langue".</li>
</ul>
<h3>Ajouter un lien hypertexte</h3>
<ul>
<li>Sélectionner le texte pour lequel on souhaite ajouter un lien hypertexte.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "lien" <i class="fa" aria-hidden="true"></i>.</li>
<li>Pour une page interne, saisir la ou les premières lettres de la page et choisir la page dans le menu déroulant qui s'affiche.</li>
<li>Pour une page externe, saisir l'adresse (url) du lien.</li>
<li>Si besoin, cliquer sur l'icône "Apparence d'un bouton" <i class="fa" aria-hidden="true"></i> pour donner au lien la forme d'un bouton.</li>
<li>Si besoin, cliquer sur l'icône "lien externe" <i class="fa" aria-hidden="true"></i> pour que le lien s'ouvre dans un nouvel onglet (lien externe)</li>
<li>Cliquer sur "Ajouter le lien".</li>
</ul>
<h3>Ajouter une ancre </h3>
<ul>
<li>Sélectionner le texte pour lequel on souhaite ajouter une ancre.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "Ajouter une ancre" <i class="fa" aria-hidden="true"></i>.</li>
<li>Saisir un nom si possible simplifié, sans accent, sans espaces, sans caractères spéciaux. Exemple : ancre-dans-la-page</li>
<li>Cliquer sur "Ajouter une ancre".</li>
<li>Par la suite pour utiliser cette ancre (faire un lien vers cette element dans la même page) créer un lien et entrer le caractère dièse plus le nom simplifié saisi précédemment. Exemple : #ancre-dans-la-page</li>
<li>Si vous êtes sur une autre page et que vous voulez faire un lien vers cette ancre il vous faudra entré l'URL complète de la page destination et ajouter à la fin le dièse plus le nom simplifié. Exemple : /url-de-la-page-destination#ancre-dans-la-page</li>
</ul>
<h3>Mettre en avant du texte (highlight)</h3>
<ul>
<li>Sélectionner le texte à mettre en avant.</li>
<li>Dans la barre d'outils qui apparaît, cliquer sur l'icône "information" <i class="fa" aria-hidden="true"></i>.</li>
</ul>
<div class="highlight mtm">Exemple de texte mis en avant.</div>
<h2>Gérer des images</h2>
<h3>Ajouter une image dans une zone de texte</h3>
<ul>
<li> Après la création d'un événement/article/annuaire/page, le mode édition est automatiquement activé.</li>
<li>Se positionner à l'endroit souhaité dans la zone de texte.</li>
<li>Cliquer sur l'icône "image" <i class="fa" aria-hidden="true"></i> de la barre d'outil.</li>
<li>Redimensionner l'image si besoin en cliquant sur l'image puis sur le coin en bas à droite de l'image.</li>
<li>Si besoin, cliquer sur "Légende" pour ajouter une légende.</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
</ul>
<h3>Ajouter un texte alternatif à une image (pour le référencement et l'accessibilité)</h3>
<ul>
<li>Cliquer sur l'image.</li>
<li>Saisir une description dans le champ "Texte alternatif" au-dessus de l'image.</li>
</ul>
<h3>Ajouter une légende à une image (crédit/source)</h3>
<ul>
<li>Cliquer sur l'image.</li>
<li>Cliquer sur "Légende" au-dessus de l'image.</li>
<li>Remplacer le texte "Légende" qui vient de s'ajouter au-dessous de l'image.</li>
<li><i class="fa" aria-hidden="true"></i> Si vous mettez une légende il faut que le texte alternatif sur l'image soit identique pour l'accessibilité.</li>
</ul>
<h2>Gérer des modules (exemple du modèle de page "Personnalités")</h2>
<h3>Ajouter un module</h3>
<ul>
<li>Aller sur la page concernée.</li>
<li>Cliquer sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> en bas à droite (apparaît au survol).<br>
</li>
<li>Cliquer sur le bouton "Ajouter un module".</li>
<li>Saisir les données du module (texte, image...).</li>
<li>Cliquer sur "Enregistrer" en haut à droite.</li>
</ul>
<h3>Déplacer un module</h3>
<ul>
<li>Une fois plusieurs modules ajoutés, il est possible de les déplacer :</li>
<li>Cliquer sur le bouton "Déplacer".</li>
<li>Glisser-déposer le ou les modules à déplacer.</li>
</ul>
<h3>Supprimer un module</h3>
<p>Cliquer sur l'icône "croix" <i class="fa" aria-hidden="true"></i> dans le coin haut-droit du ou des modules concernés.</p>
<h2>Gérer des menus et sous-menus</h2>
<h3>Ajouter un menu de navigation</h3>
<ul>
<li> Se positionner sur le haut de la page et cliquer sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> (apparaît au survol).</li>
<li>Cliquer sur l'icône "plus" <i class="fa" aria-hidden="true"></i> en face de chaque menu qui doit être ajouté.</li>
<li>Pour modifier l'ordre des menus, se positionner sur la zone grisée au-dessus du menu concerné puis cliquer quand la petite main apparaît.</li>
</ul>
<h3>Supprimer un menu de navigation</h3>
<p>Se positionner sur la zone grisée au-dessus du menu concerné puis cliquer sur l'icône "croix" <i class="fa" aria-hidden="true"></i> du ou des menus à supprimer.</p>
<h3>Ajouter une page dans un sous-menu de navigation</h3>
<ul>
<li>Aller sur la page concernée.</li>
<li>Passer en mode édition en cliquant sur l'icône "crayon" <i class="fa" aria-hidden="true"></i> en bas à gauche (apparaît au survol).<br>
</li>
<li>Dans le fil d'ariane (sous le menu principal), choisir le sous-menu dans la liste déroulante.</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
</ul>
<h2>Gérer des utilisateurs </h2>
<h3>Ajouter un utilisateur</h3>
<ul>
<li> Cliquer sur l'icône "utilisateur" <i class="fa" aria-hidden="true"></i> puis sur l'icône "ajouter un utilisateur" <i class="fa" aria-hidden="true">.</i></li>
<li>Sélectionner les droits à attribuer à cet utilisateur (maintenir la touche CTRL appuyée pour en sélectionner plusieurs).</li>
<li>Saisir un pseudo, une adresse email.</li>
<li>Cliquer sur l'icône "enveloppe" <i class="fa" aria-hidden="true"></i> pour envoyer le mot de passe par mail.</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
</ul>
<h3>Modifier un utilisateur</h3>
<ul>
<li> Cliquer sur l'icône "utilisateur" <i class="fa" aria-hidden="true"></i> puis sur l'icône "groupe d'utilisateurs" <i class="fa" aria-hidden="true"></i> pour voir la liste de tous les utilisateurs.</li>
<li>Cliquer sur l'utilisateur à modifier.</li>
<li>Pour mettre à jour le pseudo, l'adresse email ou le mot de passe, les modifier simplement dans la zone concernée. </li>
<li>Pour mettre à jour les droits utilisateur (autorisations), sélectionner ou désélectionner les droits concernés (maintenir la touche CTRL appuyée pour en sélectionner plusieurs).</li>
<li>Cliquer sur le bouton "Enregistrer" en haut à droite.</li>
</ul>
<h3>Supprimer un utilisateur</h3>
<ul>
<li>Cliquer sur l'icône "utilisateur" <i class="fa" aria-hidden="true"></i> puis sur l'icône "groupe d'utilisateurs" <i class="fa" aria-hidden="true"></i> pour voir la liste de tous les utilisateurs.</li>
<li>Cliquer sur l'utilisateur à supprimer.</li>
<li>Cliquer sur l'icône "poubelle" <i class="fa" aria-hidden="true"></i> en bas à gauche du menu.</li>
<li>Confirmer en cliquant sur OK.</li>
</ul>
</article>
</section>
</main>
<footer role="contentinfo"></footer>
<button class="bt fixed top block" title="Retour en haut" aria-label="Retour en haut"><i class="fa fa-fw fa-up-open bigger" aria-hidden="true"></i></button>
<script>
//$(function(){
// Buuton pour remonter en haut
$(".bt.fixed.top").click(function() {
$("html, body").animate({scrollTop: 0}, 200);
$("a[href='#main']").focus();
return false;
});
// CONSTRUCTION DU SOMMAIRE
i = 1;
open = false;
html = '';
$("article h2, article h3").each(function(index)
{
// nom de l'ancre
var ancre = $(this).text().toLowerCase().replace(/[^a-z0-9]+/g,'-');
// 1er élément
if(i == 1) previous = $(this).prop("tagName");
// Ajoute l'encre dans le contenu
$(this).attr("id","ancre-"+ancre);
// Si changement de niveau
if($(this).prop("tagName") != previous)
{
if(open)// On doit fermer
{
html += "</ol></li>";
open = false;
}
else// On ouvre une sous-section
{
html += "<li><ol>";
open = true;
}
}
// Ajoute l'élément au sommaire
html += "<li><a href='#ancre-" + ancre + "'>" + $(this).text() + "</a></li>";
previous = $(this).prop("tagName");
++i;
});
// Si sommaire par fermer
if(open) html += "</ol></li>";
$("#sommaire").append(html);
//});
</script>
</body>
</html>