This repository was archived by the owner on Jan 17, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
1031 lines (940 loc) · 49.6 KB
/
index.html
File metadata and controls
1031 lines (940 loc) · 49.6 KB
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
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html prefix="talk: http://w3c.github.io/dpub/idpf-digital-book-2015/index.html ore: http://www.openarchives.org/ore/terms/" lang="fr">
<head about="talk:">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title property="dc:title">Documents numériques & le Web : construire la convergence</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="ore:describes" resource="talk:#talk">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=792, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="shower/themes/w3c/styles/style.css">
<script src="js/hyphenate.js" type="text/javascript"></script>
<style type="text/css">
.slide:after {
padding: 60px 0 0 !important;
height: 150px ;
background: url(figures/W3C_ribbon.png) no-repeat ;
}
.titlepage p.copyright {
left: 10em;
}
h2, h3 { hyphens: none;}
</style>
</head>
<body class="list hyphenate" about="talk:#talk" prefix="bibo: http://purl.org/ontology/bibo/ event: http://purl.org/NET/c4dm/event.owl#" typeof="cc:Work bibo:Slideshow">
<header class="caption">
<h1 property="dc:title" rel="dc:subject" resource="http://id.loc.gov/authorities/subjects/sh85042368#concept">
Documents numériques & le Web : construire la convergence</h1>
<h3>12 janvier 2016</h3>
<h2> <span rel="bibo:authorList" inlist=""> <span resource="http://www.ivan-herman.net/foaf#me" typeof="foaf:Person"> <span property="foaf:name">Ivan Herman</span>, <span property="rdfs:seeAlso" resource="http://www.ivan-herman.net/foaf">W3C</span></span> </span> </h2>
<p class="c1"><a href="http://creativecommons.org/licenses/by-nd/3.0/"><img class="plain" alt="Creative Commons License in French" src="figures/80x15.png"></a> Cette œuvre est mise à disposition selon les termes de la Licence <a rel="cc:license" href="http://creativecommons.org/licenses/by-nd/3.0/fr/">« Creative Commons Attribution—Pas de Modification 3.0 »</a>, attribution au<span style="color: red;"></span> W3C</p>
<p> Copyright<sup>©</sup> 2016 W3C<sup>®</sup> (MIT, ERCIM, Keio, Beihang)
</p>
</header>
<section class="slide titlepage"><div>
<h2 class="donthyphenate">Documents numériques & le Web : construire la convergence</h2>
<h3>Ivan Herman, W3C </h3>
<h4>2016-01-12</h4>
<p class="copyright">Cette œuvre est mise à disposition selon les termes de la Licence <a target="_blank" href="http://creativecommons.org/licenses/by-nd/3.0/fr/">« Creative Commons Attribution—Pas de Modification 3.0 »</a>, attribution au <a target="_blank" href="http://www.w3.org">W3C</a><br />
Copyright <sup>©</sup>2016 W3C<sup>®</sup> (MIT, ERCIM, Keio, Beihang)</p>
</div></section>
<section class="slide"><div>
<h2>La présentation est disponible en ligne</h2>
<p>La présentation est en HTML, avec des liens actifs : <a href="http://www.w3.org/2016/Talks/ministere-IH/"><code style="font-size:80%">http://www.w3.org/2016/Talks/ministere-IH/</code></a></p>
</div></section>
<section class="slide"><div>
<h2>W3C : « mener le Web à son plein potentiel »</h2>
<figure class="right">
<img src="figures/timbl.jpg" alt="Photo of Tim Berners-Lee"/>
<figcaption class="credit">LeFevre communications, 2001</figcaption>
</figure>
<ul>
<li>Créé en 1994, dirigé par <span lang="en">Tim Berners-Lee</span>, le créateur du Web</li>
<li>Une organisation de membres (≈410)</li>
<li>Une équipe de ≈80 personnes, attachées au « hôtes » aux USA (MIT), en Chine (Université Beihang), au Japon (Université de Keio), et en France (ERCIM)</li>
<li>Se concentre sur l’écosystème du Web : utilisateurs, développeurs, navigateurs, mais aussi des problèmes mis en avant par des branches spécifiques de l'industrie</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Historique du groupe DPUB IG</h2>
<ul>
<li>Au-delà des navigateurs Web, les éditeurs sont vraisemblablement les plus grands utilisateurs des technologies Web développées par le W3C :
<ul>
<li>la quasi-totalité des journaux et magazines publient désormais une version en ligne</li>
<li>l’édition scolaire est aujourd’hui étroitement liée au Web</li>
<li>le format EPUB est, dans sa structure, un site Web figé, coulé dans un fichier</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Historique du groupe DPUB IG</h2>
<ul>
<li>Les exigences du monde de l’édition sont, en termes de qualité, très élevées :<br>
<ul>
<li>il y a une grande attention portée à la composition du texte, aux graphiques, etc.</li>
<li>les nouvelles formes de publications reposent sur un niveau élevé d‘interactivité, sur l’enrichissement par des contenus média, etc.</li>
<li>les « publications » contenant aussi des données, des vidéos, etc., gagnent en importance</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Historique du groupe DPUB IG</h2>
<ul>
<li>Mais… le secteur de l‘édition est resté, jusqu‘à récemment, dans une attitude passive vis-à-vis des standards du Web :<br>
<ul>
<li>il n‘est pas acteur du développement des technologies fondamentales du Web</li>
<li>le W3C (et les autres instances de développement des standards) connaît très mal les besoins de ce secteur</li>
<li>la synergie qui pourrait naître de la collaboration entre les développeurs du Web et les éditeurs n‘est pas exploitée</li>
</ul>
</li>
<li><i>Conséquence : les groupes de travail du W3C établissent leurs priorités sans connaître, et donc sans prendre en considération, les impacts de leurs développements pour l‘industrie du livre</i></li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Historique du groupe DPUB IG</h2>
</a>
<ul>
<li>Le W3C et l‘IDPF ont organisé, en 2012, plusieurs réunions de travail pour créer cette synergie manquante entre les communautés</li>
<li>Le groupe de travail « <a target="_blank" href="https://www.w3.org/dpub/IG/" lang="en">Digital Publishing Interest Group</a> » (DPUB IG) a été officiellement créé en mai 2013</li>
<li>Le DPUB IG organise des téléconférences hebdomadaires et une ou deux rencontres personnelles annuelles</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">La mission du DPUB IG</h2>
<ul>
<li>Les experts de l‘édition numérique identifient les enjeux qui ne sont pas traités par les technologies du W3C
<ul><li>notre objectif est de faire émerger les technologies que les groupes de travail du W3C pourraient mettre à jour (ou développer) à partir des informations que nous leur fournissons</li></ul>
</li>
<li>le groupe s‘organise en sous-groupes de travail qui se concentrent sur des sujets précis</li>
</ul>
<p>Consulter le <a target="_blank" href="https://www.w3.org/dpub/IG/wiki/Main_Page">site Web</a> pour plus de détails</p>
</div></section>
<section class="slide shout cover" id="results"><div>
<img src="figures/achievements.png">
<h3 class="donthyphenate">Quelques résultats des deux dernières années</h3>
<style type="text/css">
#results h3 {
color: red;
margin-top: 2.4em;
}
</style>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Contenus et typographie</h2>
<figure class="right" >
<img src="figures/latinreq.png" alt="Screen dump of the latinreq document">
</figure>
<ul>
<li>Un document qui évolue : <a href="http://w3c.github.io/dpub-pagination/" lang="en">« Requirements for Latin Text Layout and Pagination »</a></li>
<li>Décrit des problèmes comme césure, pagination, etc.</li>
<li>A eu une influence importante sur le travail du groupe CSS, comme par exemple sur les documents <a href="http://www.w3.org/TR/css-inline-3/" lang="en">« CSS Inline Layout Module Level 3 »</a> ou <a href="http://www.w3.org/TR/css-gcpm-3/" lang="en">« CSS Generated Content for Paged Media Module »</a></li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Priorités pour CSS</h2>
<figure class="right">
<img src="figures/css_priorities.png" class="noborder" alt="Screen dumps of the CSS Priorities' document">
</figure>
<ul>
<li>Un autre document du groupe qui évolue aussi : <a href="http://w3c.github.io/dpub-pagination/" lang="en">« Priorities for CSS from the DPUB IG »</a></li>
<li>A aussi une influence importante sur le travail de groupe CSS</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Contenus et balisage</h2>
<ul>
<li>Le but : ajouter de la sémantique aux éléments HTML
<ul><li>« abstract », « indexed term », « footnote », « chapter », …</li></ul>
</li>
<li>Exprimer des informations structurelles (« où pouvons-nous utiliser tel ou tel élément »)</li>
<li>Le faire en termes de standards actuels et futurs du W3C
<ul>
<li>par exemple, ne pas utiliser <code>epub:type</code> d’EPUB 3</li>
<li>le fichier HTML doit donc être valide</li>
</ul>
</li>
<li>Ces termes sont, en fait, utiles pour le Web en général !
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Contenus et balisage : l’approche choisi</h2>
<ul>
<li>Utiliser la technologie W3C <a href="http://www.w3.org/TR/wai-aria/" lang="en">« Accessible Rich Internet Applications (WAI-ARIA) »</a> :
<ul>
<li>définit des attributs spéciaux en HTML</li>
<li>les valeurs de ces attributs reflètent les sémantiques voulues</li>
<li>les valeurs sont transférés aux « <span lang="en">Accessibility API</span> » du système</li>
</ul>
</li>
<li><i>Une technologie de base pour la création de sites accessibles</i></li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Contenus et balisage : le module DPUB ARIA</h2>
<figure class="right" style="width:280px">
<img src="figures/dpub-aria.png" alt="Screen dump of the DPUB ARIA document">
</figure>
<ul>
<li><a href="http://www.w3.org/TR/dpub-aria-1.0/" lang="en">« Digital Publishing WAI-ARIA module »</a> est en développement
<ul><li>les termes de publication feront donc partie d’ARIA</li></ul>
</li>
<li>Un autre <a href='http://www.w3.org/TR/dpub-aam-1.0/'>document</a> spécifie l’application de ces termes sur l’« <span lang="en">Accessibility API</span> »</li>
</ul>
<pre style="font-size:60%"><section <mark>role="doc-appendix"</mark>>
<h1>Appendix A. Historical Timeline</h1>
…
</section></pre>
</div></section>
<section class="slide shout cover"><div id="major">
<img src="covers/future.jpg">
<h3 class="donthyphenate">Un travail important à venir : « <span lang="en">Portable Web Publications</span> » (PWP)<br><span style="font-size:70%">né EPUB+WEB</span></h3>
<style type="text/css">
#major h3 {
color: blue;
}
</style>
</div></section>
<section class="slide shout"><div>
<h3>Le message central :</h3>
</div></section>
<section class="slide shout cover"><div id="webpubl">
<img src="covers/blackboard.jpg">
<h2>Web = Publication !</h2>
<style type="text/css">
#webpubl h2 {
color: snow;
font-style: italic;
}
</style>
</div></section>
<section class="slide shout"><div>
<h3 class="donthyphenate">une autre façon de dire la même chose…</h3>
</div></section>
<section class="slide shout cover"><div id="publweb">
<img src="covers/blackboard.jpg">
<h2>Publication = Web !</h2>
<style type="text/css">
#publweb h2 {
color: snow;
font-style: italic;
}
</style>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Qu'est-ce que cela signifie ?</h2>
<figure class="right">
<img src="figures/pwp.svg" alt="Portable Web Publication at a glance"/>
</figure>
<ul>
<li>La séparation entre les formats « en ligne » (c.-à-d. sur le Web) et « à télécharger » (comme EPUB) devient obsolète</li>
<li>Autrement dit :
<ul>
<li>les contenus édités pour un usage mobile hors connexion peuvent être consultés en ligne dans un navigateur</li>
<li>les contenus édités pour un usage en ligne peuvent facilement être enregistrés en tant que document mobile pour un usage hors connexion</li>
<li>ces transitions se font facilement, si possible automatiquement</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Qu'est-ce que cela signifie ?</h2>
<figure>
<img src="figures/pwp.svg" alt="Portable Web Publication at a glance" width="100%">
</figure>
</div></section>
<section class="slide shout cover"><div>
<img src="covers/why.jpg">
<p class="credit">ibta arabia</p>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Exemple d‘un livre affiché dans un navigateur</h2>
<figure class="right"> <img src="figures/joseph-web.png" alt="Extrait du livre de Joseph Reagle sur le web"
width="98%"> <figcaption class="credit"><a target="_blank" href="http://reagle.org/joseph/2010/gfc/chapter-4.html">Extrait du livre de Joseph Reagle</a> sur le web</figcaption> </figure>
<ul>
<li>Sur un ordinateur, je veux pouvoir lire un livre à la manière d‘une page du Web :
<ul>
<li>liens hypertextes pour « sortir » facilement du livre</li>
<li>créer un marque-page « à l‘intérieur » du livre</li>
<li>utiliser des outils installés dans mon navigateur</li>
<li>ajouter des annotations</li>
<li>je peux avoir besoin de la puissance de mon ordinateur pour afficher des contenus interactifs en 3D par exemple</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Exemple du même livre affiché dans une liseuse</h2>
<figure class="right"> <img src="figures/joseph-book.png" alt="Extrait du livre de Joseph Reagle comme EPUB"
> <figcaption class="credit"><a target="_blank" href="http://reagle.org/joseph/2010/gfc/chapter-4.html">Extrait du livre de Joseph Reagle</a> comme EPUB</figcaption> </figure>
<ul>
<li>Mais, à d‘autres moments, je veux lire le livre à la plage avec une liseuse… </li>
<li>Cela devient possible pour <em>le même</em> livre (aucune conversion requise d‘un format à l‘autre !)</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Exemple d‘un lecteur sans connexion… </h2>
<figure class="right">
<img src="figures/commute.jpg" alt="Une personne dans le metro avec un portable">
<figcaption class="credit">Photo : <a target="_blank" href="http://j.mp/1t7BxJN">Bryan Ong</a>, Flickr</figcaption>
</figure>
<ul>
<li>Je peux avoir un article que je veux revoir, annoter, etc., pendant que je rentre chez moi en train</li>
<li>Je voudrais que mes annotations soient transférées en ligne quand je me reconnecterai au Web</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Exemple d‘édition scientifique </h2>
<figure class="right">
<img src="figures/f1000.png" alt="Page d'un article sur le site F1000">
<figcaption class="credit">Image de l‘article <a target="_blank" href="http://bit.ly/1wFcfWC" lang="en">“Sub-strains of Drosophila Canton-S…”</a> sur F1000</figcaption>
</figure>
<ul>
<li class="donthyphenate">Mon article est publié en ligne mais des utilisateurs veulent le télécharger</li>
<li>Le format de ce document doit s‘adapter à mon environnement de lecture :
<ul>
<li>exemple : ne pas afficher deux colonnes, pas de mise en page fixe…</li>
</ul>
</li>
<li>Mon document peut aussi contenir des vidéos, de l‘audio, des données, des programmes…
<ul>
<li>l‘édition scientifique est devenue plus qu‘une édition d‘un texte linéaire !</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"> Exemple du matériel éducatif</h2>
<figure class="right">
<img src="figures/auditorium.jpg" alt="Amphitéatre et étudiants dotés, pour la plupart, de tablettes">
<figcaption class="credit">Photo: <a target="_blank" href="http://j.mp/1t7Gpie" lang="en">Merrill College of Journalism</a>, Flickr</figcaption>
</figure>
<ul>
<li>Qu‘est-ce qu‘une publication éducative ?</li>
<ul>
<li><em>un livre</em> avec des textes plus ou moins longs, disponible sur liseuse ?</li>
<li><em>une application</em> avec des tests interactifs et des exemples animés ?</li>
<li><em>un client sur le Web</em> qui se relie à des services sur le Web pour obtenir les résultats d'un test, pour consulter une encyclopédie,… ?</li>
<li><em>un conteneur de données interactives </em>entreposant différentes données pour, par exemple, réaliser une démonstration ?</li>
</ul>
<li>La frontière entre un « livre » et une « application » devient floue !</li>
</ul>
</div></section>
<section class="slide shout cover" id="synergy"><div>
<img src="covers/synergy.jpg">
<h3 class="donthyphenate">Les effets synergiques de la convergence</h3>
<style type="text/css">
#synergy h3 {
margin-top: 3em;
background: hsla(181, 9%, 78%, 0.5);
padding-right: 0em;
padding-left: 0em;
color: hsla(240,50%,30%,1);
}
</style>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Avantages pour la communauté des éditeurs</h2>
<figure class="right">
<img src="figures/javascript.jpg" alt="Photo de deux livres sur javascript">
<figcaption class="credit">Photo : <a target="_blank" href="http://j.mp/1CP4M41">Nathan Smith</a>, Flickr</figcaption>
</figure>
<ul>
<li>Les éditeurs désirent se concentrer sur ce qu‘<em>ils</em> savent faire le mieux : produire et éditer un contenu de qualité</li>
<li>Les éditeurs ne sont <em>pas</em> des entreprises technologiques, et n‘en­tendent pas le devenir : ils veulent en revanche s‘appuyer sur le dynamisme de la communauté du Web !</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Avantages pour la communauté du Web</h2>
<figure class="right">
<img src="figures/manuscript.jpg" alt="photo d'un manuscript médiéval" >
<figcaption class="credit">Photo : <a target="_blank" href="http://j.mp/ZMp3KM">e-codices</a>, Flickr</figcaption>
</figure>
<ul>
<li>Les éditeurs ont une longue expérience à partager sur l‘ergonomie, la pagination, l‘esthétique, les mises en pages complexes (notamment pour les dé­marches pédagogique)</li>
<li>La maîtrise des éditeurs de la chaîne complète de production de contenus représente aussi un savoir-faire considérable</li>
<li>Tout ceci peut devenir un atout pour la conception des pages Web</li>
</ul>
</div></section>
<section class="slide shout cover" id="road_tech"><div>
<img src="covers/road.jpg">
<h3 class="donthyphenate"> Comment y parvenir ?<br>(d‘un point de vue technique) </h3>
<style type="text/css">
#road_tech h3 {
color:yellow;
background-color: hsla(181, 9%, 78%, 0.5);
padding-bottom: 0.1em;
}
</style>
<p class="credit">Moyan Brenn, Flickr</p>
</div></section>
<section class="slide shout cover" id="warning"><div>
<img src="covers/warning.jpg">
<h3 class="donthyphenate">Attention : tout ce que je dis est temporaire et peut changer !</h3>
<style type="text/css">
#warning h3 {
margin-top: 0.5em;
color: hsla(0,100%,60%,1.0);
}
</style>
<p class="credit">Catherine Kolodziej, Flickr</p>
</div></section>
<section class="slide shout cover" id="terminology"><div>
<img src="covers/terminology.jpg">
<h3 class="donthyphenate">Défi technologique : terminologie de base</h3>
<style type="text/css">
#terminology h3 {
color: snow;
font-size: 2.2em;
}
</style>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Qu’est-ce qu’un « Portable Web Publication » ?</h2>
<ul>
<li>Un <em>ensemble de ressources Web, considéré comme une unité</em>
<ul><li>il y a donc une adresse sur le Web pour l’<i>ensemble</i> (en non pas seulement pour les constituants)</li></ul>
</li>
<li><em>Le navigateur (ou liseuse) peut faire un rendu du « contenu essentiel » en se basant uniquement sur les ressources de l’ensemble</em>
<ul><li>le contenu peut donc être en ligne ou non, sans le danger d’un lien qui ne mène nulle part</li></ul>
</li>
<li>Le <i>même</i> PWP peut être en ligne ou non, peut être archivé ou non…</li>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Exemples de ce qui peut être un PWP</h2>
<ul>
<li>Un article d‘un journal, c.à.d. le fichier HTML de base, plus les fichiers CSS, les images, etc., qui constituent l’article</li>
<li>Un article ou un livre scolaire, y compris les fichiers Javascript pour les exercices interactifs</li>
<li>Un roman ou un poème dans un fichier HTML, plus les jeux de caractères, fichiers CSS, etc., pour reproduire l'esthétique voulue par l’éditeur</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Exemples pour ce qui n’est <i>pas</i> un PWP</h2>
<ul>
<li>Une application de messagerie sur le Web</li>
<li>Un site de réseau social, comme Facebook ou Twitter</li>
<li class="donthyphenate">Une page dynamique qui dépend, par exemple, d’un fichier Javascript quelque-part dans le cloud</li>
</ul>
</div></section>
<section class="slide shout cover" id="arch"><div>
<img src="covers/architecture.jpg">
<h3 class="donthyphenate">Défi technologique : architecture générale</h3>
<style type="text/css">
#arch h3 {
color: hsla(240, 69%, 50%, 1);
font-size: 2.2em;
}
</style>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Nouvelle approche pour les navigateurs modernes : « <span lang="en">Web and Service Workers</span> »</h2>
<ul>
<li>Un navigateur peut contenir un « moteur » interne, <i>véritablement parallèle</i>
<li>Le moteur « attrape » les demandes d’accès vers le Web, et peut choisir
<ul>
<li>d’exécuter l’accès en retournant les résultats ; ou</li>
<li>d’exécuter un processus local, p.e. retourner le contenu d’un cache local</li>
</ul>
</li>
<li>Le processus principal du navigateur ne se rend pas compte de ce qui se passe au niveau du « proxy »
<ul><li>cela fonctionne comme si toutes les ressources étaient sur le Web</li></ul>
</li>
</ul>
</div></section>
<section class="slide stamped"><div>
<h2 class="donthyphenate">Nouvelle approche pour les navigateurs modernes : « <span lang="en">Web and Service Workers</span> »</h2>
<ul>
<li>Un navigateur peut contenir un « moteur » interne, <i>véritablement parallèle</i>
<li>Le moteur « attrape » les demandes d’accès vers le Web, et peut choisir
<ul>
<li>d’exécuter l’accès en retournant les résultats ;ou</li>
<li>d’exécuter un processus local, p.e. retourner le contenu d’un cache local</li>
</ul>
</li>
<li>Le processus principal du navigateur ne se rend pas compte de ce qui se passe au niveau du « proxy »
<ul><li>cela fonctionne comme si toutes les ressources étaient sur le Web</li></ul>
</li>
</ul>
<p class="stamp small" style="left:12%; top:41%">En développement !</p>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">L’architecture envisagée : <br/>cas traditionnel</h2>
<figure>
<img class="plain" src="figures/Workers-basic.svg" alt="Document consumed through the Web in a traditional way" width="99%">
</figure>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">L’architecture envisagée : <br/>données locales</h2>
<figure>
<img class="plain" src="figures/Workers-cache.svg" alt="Document consumed through a Service Worker, possibly cached" width="99%">
</figure>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">L’architecture envisagée : <br/>données archivées</h2>
<figure>
<img class="plain" src="figures/Workers-package.svg" alt="Document consumed through a Service Worker, possibly unpacked" width="99%">
</figure>
</div></section>
<section class="slide stamped"><div>
<h2 class="donthyphenate">L’architecture envisagée : <br/>données archivées</h2>
<figure>
<img class="plain" src="figures/Workers-package.svg" alt="Document consumed through a Service Worker, possibly unpacked" width="99%">
</figure>
<p class="stamp" style="left:8%; top:41%">Brouillon…</p>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Brouillon, en effet, mais…</h2>
<ul>
<li>Il y a déjà eu des expérimentations antérieures (par exemple par le Readium Consortium)</li>
<li>Une maquette préliminaire a déjà été réalisée</li>
</ul>
</div></section>
<section class="slide shout cover" id="ident"><div>
<img src="covers/library.jpg">
<h3 class="donthyphenate">Défi technologique : adresses, identificateur</h3>
<style type="text/css">
#ident h3 {
color:snow;
margin-top: 0.2em;
}
</style>
</div></section>
<section class="slide shout" ><div>
<h3 class="donthyphenate">Des questions à répondre…</h3>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Est-ce une « adresse » ou une « identification » ?</h2>
<ul>
<li>Ces deux rôles sont différents</li>
<li>La situation traditionnelle est telle que :
<ul>
<li>une adresse est utilisée pour <i>accéder</i> à une ressource sur le Web</li>
<li>une autre adresse est utilisée pour <i>identifier</i>, d’une manière unique, une ressource</li>
<li>dans certains cas les deux rôles peuvent coïncider, mais pas toujours</li>
</ul>
</li>
<li>Par exemple, pour identifier un livre numérique :
<ul>
<li><code>urn:isbn:1-56592-521-1</code> identifie la publication</li>
<li><code>http://www.ex.org/ex.pwp</code> est l’adresse sur le Web pour une copie spécifique</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Est-ce une « adresse » ou une « identification » ?</h2>
<ul>
<li>Il est donc nécessaire qu’un PWP puisse contenir <i>les deux</i> fonctionnalités en parallèle</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Que répond une requête sur le Web ?</h2>
<ul>
<li>Il y a plusieurs possibilités :
<ul>
<li>une sorte de fichier de « manifest » décrivant le publication tout entière (c.à.d. la liste de fichiers, des métadonnées, etc.) ; ou</li>
<li>un fichier avec un lien vers un « manifest » dans la réponse du Web ; ou</li>
<li>un fichier HTML avec un lien interne vers un « manifest »</li>
</ul>
</li>
<li>Les détails du contenu du « manifest » doivent être définis
<ul><li>cela peut devenir un constituant crucial d’un PWP</li></ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Si j’ai l’adresse du PWP, quel est l’adresse d‘une partie constituante ?</h2>
<ul>
<li>Là encore, il peut y avoir plusieurs possibilités :
<ul>
<li><code>http://www.ex.org/doc.pwp#pwp(…)</code></li>
<li><code>http://www.ex.org/doc.pwp!chapter1.html</code></li>
<li><code>http://www.ex.org/doc.pwp/chapter1.html</code></li>
</ul>
</li>
<li>La troisième alternative est la plus proche du Web en général</li>
</ul>
</div></section>
<section class="slide shout cover" id="presentation"><div>
<img src="covers/choice.jpg">
<h3 class="donthyphenate">Défi technologique : contrôle interactif de l‘affichage</h3>
<style type="text/css">
#presentation h3 {
color: hsla(240, 69%, 50%, 1);
font-size: 2.4em;
}
</style>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Défi technologique : contrôle interactif de l‘affichage </h2>
<ul>
<li>Les traditions du Web et des livres numériques diffèrent sur ce point :
<ul>
<li>dans un navigateur, le concepteur du site est (presque) le seul maître :
<ul>
<li>certains aspects de l‘interface utilisateur peuvent être contrôlés mais uniquement au niveau du navigateur lui-même et non du site</li>
</ul>
</li>
<li>dans une liseuse, l‘utilisateur a généralement plus de libertés :
<ul>
<li>couleur du texte ou de l‘arrière-plan</li>
<li>choix des polices</li>
</ul>
</li>
</ul>
</li>
<li>Il faudra réconcilier ces traditions</li>
</ul>
</div></section>
<section class="slide shout cover" id="road_pract"><div>
<img src="covers/road.jpg">
<h3 class="donthyphenate">Comment y parvenir ? <br>(d‘un point de vue organisationnel)</h3>
<style type="text/css">
#road_pract h3 {
color:hsla(240, 69%, 50%, 1);
padding-bottom: 0.1em;
}
</style>
<p class="credit">Moyan Brenn, Flickr</p>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">DPUB IG et PWP</h2>
<figure class="right">
<img src="figures/pwp-doc.png" alt="screen dump of the PWP draft" width="98%">
</figure>
<ul>
<li>Les travaux sur le PWP jouent un rôle central au sein du DPUB IG</li>
<li>Le groupe va contribuer à la formulation des défis techniques posés par PWP afin de mieux définir le travail à effectuer</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">IDPF, W3C, et les autres</h2>
<ul>
<li>Sur le long terme, un certain nombre de spécifications spécifiques au PWP devront être créées
<ul>
<li>cela requiert un large consensus entre les différentes communautés</li>
</ul>
</li>
<li>À terme, l‘IDPF et le W3C (et peut-être d‘autres ?) vont vraisemblablement créer les groupes de travail requis</li>
</ul>
</div></section>
<section class="slide">
<div>
<h2 class="donthyphenate">Conclusions</h2>
<ul>
<li>La convergence entre les technologies due Web et les documents adaptés à la lecture « mobile » recèle un potentiel important ;</li>
<li>Le révéler requiert un effort commun et une coopération entre nos deux communautés ;</li>
<li>Mais c‘est une perspective enthousiasmante !</li>
</ul>
<div style="text-align:center; height:45%; position: relative; top: -45px">
<img src="figures/contents.jpg" height="85%">
</div>
</div>
</section>
<section class="slide shout cover" id="edupub"><div>
<img src="covers/sorbonne.jpg">
<h3>EDUPUB</h3>
<style type="text/css">
#edupub h3 {
color: yellow;
margin-top: 1.5em;
}
</style>
</div></section>
<section class="slide shout cover" id="edupub_what"><div>
<img src="covers/sorbonne.jpg">
<h3 class="donthyphenate">EDUPUB<br><br> Un profil d‘EPUB centré sur l‘Éducation</h3>
<style type="text/css">
#edupub_what h3 {
color: yellow;
margin-top: 1.5em;
}
</style>
</div></section>
<section class="slide shout"><div>
<h3>Pourquoi ?</h3>
</div></section>
<section class="slide shout"><div>
<h3 class="donthyphenate">Les documents pour l'éducation sont parmi les plus complexes…</h3>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Qu’est-ce que EDUPUB ?</h2>
<ul>
<li>Un <a href="http://www.idpf.org/epub/profiles/edu/spec/">profil de EPUB</a> centré sur l‘Éducation
<ul>
<li>développé en 2014-15</li>
<li>basé, à l‘origine, sur des soumissions de O’Reilly et de Pearson</li>
<li>aujourd’hui en « <span lang="en">public draft</span> »</li>
<li>les implémentations sont en cours</li>
</ul>
</li>
<li>Un modèle complet pour l’échange et le déploiement de contenus éducationnels
<ul>
<li>…basé sur les technologies Web du W3C</li>
<li>…exprimé à travers d’une famille intégrée de spécifications, y compris EPUB 3 (de IDPF) et LTI, QTI (de IMS Global), LRMI, etc.</li>
</li>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">L’alliance EDUPUB</h2>
<ul>
<li>Formée par IDPF, IMS Global, BISG, W3C, et DAISY</li>
<li>Une communauté globale, avec un focus sur la coopération des organisations</li>
<li>Une <i>alliance</i>, non pas une nouvelle organisation !</li>
<div style="text-align:center; height:45%; position: relative; top: 35px">
<img src="figures/edupub-logos.jpg" height="187" width="595">
</div>
</div></section>
<section class="slide"><div>
<h2><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>Qu’est-ce EDUPUB apporte à EPUB ?</h2>
<ol>
<li>Métadonnées</li>
<li>Structure du contenu</li>
<li>Composants pour scripts</li>
<li>Annotations ouvertes</li>
<li>Intégration avec des systèmes éducationnels (LTI, Caliper, QTI)</li>
</ol>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>1. Métadonnées</h2>
<ul>
<li>Métadonnées d’éducation
<ul>
<li>basées sur les termes éducationnels de schema.org</li>
<li>par exemple :
<ul lang="en">
<li><code>audienceType</code>: corporate, higher-ed, professional, schools</li>
<li><code>learningResourceType</code>: activity, assessment, discussion,…</li>
<li><code>typicalAgeRange</code>: 5-8, 8-10, 10-12…</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre style="font-size:60%"><dc:type>edupub</dc:type>
<meta property="schema:learningResourceType">activity</meta>
<meta property="schema:timeRequired">P90M</meta></pre>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>1. Métadonnées</h2>
<ul>
<li>Métadonnées pour l‘accessibilité
<ul>
<li>basées sur les termes de schema.org pour l‘accessibilité</li>
<li>par exemple :
<ul lang="en">
<li><code>accessibilityFeature</code>: <code>alternativeText</code>, <code>printPageNumbers</code></li>
<li><code>accessibilityControl</code>: <code>fullKeyboardControl</code>, <code>fullVoiceControl,…</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<pre style="font-size:60%"><dc:type>edupub</dc:type>
<meta property="schema:typicalAgeRange">18+</meta>
<meta property="schema:accessibilityFeature">alternativeText</meta>
<meta property="schema:accessibilityFeature">printPageNumbers</meta>
<meta property="schema:accessibilityFeature">readingOrder</meta>
<meta property="schema:accessibilityFeature">structuralNavigation</meta>
<meta property="schema:accessibilityFeature">tableOfContents</meta></pre>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>1. Métadonnées</h2>
<ul>
<li>Possibilité d’identifier que le document est :
<ul>
<li>une version destinée à l‘éducateur (avec plus de détails et d‘informations)</li>
<li><i>guide</i> pour l‘éducateur (contient des instructions pour l’enseignement du cours)</li>
<li>version (par défaut) pour les étudiants</li>
</ul>
</li>
</ul>
<pre style="font-size:60%"><dc:type>edupub</dc:type>
<dc:type>teacher-edition</dc:type>
<dc:source>urn:isbn:9780000000001</dc:source></pre>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>2. Structure du contenu</h2>
<ul>
<li>Définit une structure et une sémantique de contenu HTML (c.à.d. un profile HTML spécifique)</li>
<li>Renforce l’utilisation d’une structure (sections, en-tête, etc.)</li>
<li>Encourage l‘utilisation des informations structurelles
<ul>
<li>aujourd’hui exprimées par l‘utilisation de <code>epub:type</code>
<ul><li><code>assessment</code>, <code>footnote</code>, <code>bibliography</code>, <code>qna</code></li></ul>
</li>
<li>dans le futur il y aura une migration vers les attributs ARIA</li>
</ul>
</li>
</ul>
<pre style="font-size:60%"><section epub:type="appendix">
<h1>Appendix A. Historical Timeline</h1>
…
</section></pre>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>2. Structure du contenu</h2>
<ul>
<li>Des recommandations sur l‘utilisation des images 
<ul>
<li>sRGB pour les couleurs</li>
<li>utilisations de PNG ou JPG avec qualité de 80% pour des images</li>
<li>SVG pour des images vectorielles</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>2. Structure du contenu</h2>
<ul>
<li>Définition de « <span lang="en"><a href="http://www.idpf.org/epub/do/">EPUB Distributable Objects</a></span> »
<ul>
<li>un moyen de transport et de réutilisation d‘un contenu EPUB</li>
<li>par exemple : un chapitre, des exercices produits séparément par un système d’éducation,…</li></ul>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>3. Composants pour scripts</h2>
<ul>
<li>Définition de « <span lang="en"><a href="http://www.idpf.org/epub/sc/api/">EPUB Scriptable Components</a></span> »
<ul>
<li>une API et un format d‘archivage pour des composantes interactives en EPUB</li>
<li>intégration plus facile de composantes produites par d‘autres institutions ou compagnies
<ul><li>par exemple, des widgets interactifs</li></ul>
</li>
<li>permet une sécurité accrue et de meilleurs performances</li>
</ul>
</li>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>4. Annotations ouvertes</h2>
<ul>
<li>Les annotations sont essentielles en éducation</li>
<li>Elles peuvent être de direction :
<ul>
<li>étudiant ⬄ étudiant</li>
<li>étudiant ⬄ éducateur</li>
<li>parent ⬄ professeur</li>
<li>etc.</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>4. Annotations ouvertes</h2>
<ul>
<li>L’élément essentiel manquant : un format standard pour l’échange d’annotations</li>
<li>EPUB reprend un format créé par un « Community Group » du W3C
<ul>
<li>une version de standard formel est en préparation dans un groupe de travail au W3C</li>
</ul>
</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">Les fonctionnalités essentielles d‘EDUPUB</span><br/>5. Intégration avec des systèmes éducationnels</h2>
<ul>
<li>Intégration avec des spécifications de IMS Global :
<ul>
<li>« <a href="http://www.imsglobal.org/activity/learning-tools-interoperability" lang="en">Learning Tools Interoperability (LTI)</a> »
<ul>
<li>connexion avec des applications éducationnelles hébergées sur le Web</li>
</ul>
</li>
<li>« <a href="http://www.imsglobal.org/question/index.html" lang="en">Question and Test Interoperability (QTI)</a> framework »
<ul>
<li>échanges d’objets spécifiques, comme des tests ou leurs résultats</li>
</ul>
</li>
<li>« <a href="http://www.imsglobal.org/activity/caliperram">Caliper Analytics Framework</a> »
<ul>
<li>analyse de l‘activité de l‘étudiant</li>
</ul>
</li>
</ul>
</li>
<li>La première phase de l’intégration se concentre sur LTI ; les étapes suivantes viendront plus tard</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate"><span style="font-size:70%">…et, naturellement</span><br/>6. Utilisation d’autres fonctionnalités d‘EPUB</h2>
<ul>
<li>Outils de navigation d‘EPUB</li>
<li>Plusieurs formes de rendus d’un contenu EPUB
<ul>
<li>le même document peut contenir des versions en langues différentes, des versions audio pour malentendants, etc.</li>
</ul>
</li>
<li>etc.</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Le futur : 2015-16</h2>
<ul>
<li>L‘attention immédiate est sur les implémentations et la certification d‘une version 1 :
<ul>
<li>contenu via <a href="https://github.com/IDPF/epubcheck/releases/tag/v4.0.1">epubcheck</a> (la nouvelle version fonctionne avec EDUPUB)</li>
<li>les liseuses via <a href="http://epubtest.org/">EPUBTest.org</a></li>
<li>intégration avec des systèmes éducationnels via des serveurs test de IMS</li>
</ul>
</li>
<li>Rassembler des demandes pour une deuxième version</li>
<li>Il y aura, sans doute, un changement de nom, comme par exemple  : « EPUB for Éducation »</li>
<li>Projet de IDPF+DAISY pour la certification de contenu d‘un point de vue accessibilité</li>
</ul>
</div></section>
<section class="slide"><div>
<h2 class="donthyphenate">Exemples de documents EDUPUB</h2>
<figure class="center">
<img src="figures/edupub_examples.png" height="400" >
<figcaption style="font-size:smaller"><code><a href="https://idpf.github.io/edupub/samples.html">https://idpf.github.io/edupub/samples.html</a></code></figcaption>
</figure>
</div></section>
<section class="slide">
<div>
<h2 class="donthyphenate">Quelques références</h2>
<dl>
<dt>DPUB IG Wiki :</dt>
<dd><a target="_blank" href="https://www.w3.org/dpub/IG/wiki/Main_Page"><code>https://www.w3.org/dpub/IG/wiki/Main_Page</code></a></dd>
<dt>Le dernier draft de PWP :</dt>
<dd><a target="_blank" href="http://www.w3.org/TR/pwp/"><code>http://www.w3.org/TR/pwp/</code></a></dd>
<dt>Listes des problèmes à considérer pour le PWP :</dt>
<dd><a target="_blank" href="https://github.com/w3c/dpub-pwp/issues"><code>https://github.com/w3c/dpub-pwp/issues</code></a></dd>
<dt>Site dédié à EDUPUB :</dt>
<dd><a target="_blank" href="http://idpf.org/edupub"><code>http://idpf.org/edupub</code></a></dd>
</dl>
</div>
</section>
<section class="slide"><div>
<h2 class="donthyphenate">La présentation est disponible en ligne</h2>
<dl>
<dt>Version HTML :</dt>