-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
176 lines (148 loc) · 9.22 KB
/
index.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
<!DOCTYPE HTML>
<!--
Read Only by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>IIIF à l'INHA</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<section id="header">
<header>
<span class="image avatar"><img src="images/avatar.jpg" alt="" /></span>
<h1 id="logo"><a href="#">IIIF@INHA </a></h1>
<p>Implémentation de IIIF au sein de <br />
l'Institut national d'histoire de l'art</p>
</header>
<nav id="nav">
<ul>
<li><a href="#one" class="active">IIIF : c'est quoi ?</a></li>
<li><a href="#two">Et à l'INHA ? </a></li>
<li><a href="#three">Exploiter les images avec Mirador</a></li>
<li><a href="#four">Cas d'utilisation</a></li>
<li><a href="#five">Nous contacter</a></li>
</ul>
</nav>
<footer>
<ul class="icons">
<li><a href="https://twitter.com/INHA_Fr" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/INHAParis" class="icon fa-github"><span class="label">Github</span></a></li>
</ul>
</footer>
</section>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<!-- One -->
<section id="">
<!-- pour l'image d'en-tête
<div class="image main" data-position="center">
<img src="images/banner.jpg" alt="" />
</div>
-->
<div class="container">
<header class="major">
<h2>International Image Interoperability Framework </h2>
<p>Implémentation de IIIF au sein de
<a href="https://inha.fr">l'Institut national d'histoire de l'art</a>.</p>
</header>
</div>
</section>
<section id="one">
<div class="container">
<h3>IIIF : c'est quoi ?</h3>
<p>IIIF (pour <i>International Image Interoperability Framework</i>) est le nom d’une initiative lancée par l’Université de Stanford et par plusieurs grandes bibliothèques nationales - dont la Bibliothèque nationale de France -, dans le but de normaliser les méthodes de manipulation des images numériques. Concrètement, ce projet a abouti à définir un ensemble de spécifications dont l’objectif est de doter les bibliothèques numériques d’un cadre technique commun pour la diffusion et la manipulation des images. Du point de vue de l’expérience utilisateur, ce cadre offre de nouvelles possibilités pour exploiter les documents et rend possible les usages suivants :</p>
<ul class="feature-icons">
<li class="fa-eye">en utilisant une visionneuse compatible IIIF (Mirador, Universal Viewer, etc...), juxtaposer dans la même interface de consultation des documents issus de bibliothèques numériques différentes ; </li>
<li class="fa-copy">associer dans une même présentation plusieurs états d’un même document, par exemple pour montrer la page d'un manuscrit découpé avec ou sans la partie qui en a été détachée ;</li>
<li class="fa-bookmark">extraire ou citer précisément une partie d'une image ;</li>
<li class="fa-pencil">utiliser une application tierce pour annoter les images d'une bibliothèque numérique. </li>
</ul>
<p>Sur le plan technique, l'initiative IIIF a rendu ces opérations possibles en définissant plusieurs API (pour <i>application programming interface</i>, interface de programmation), dont les plus importantes sont les API Image et Présentation, qui définissent les normes d'exposition des images et de leurs métadonnées. L'API présentation expose les métadonnées concernant les images et la structure des documents dans un fichier appelé manifest.</p>
</div>
</section>
<section id="two">
<div class="container">
<h3>Et à l'INHA ?</h3>
<p>Une visionneuse libre compatible avec IIIF a été choisie par l'INHA et mise à disposition pour expérimentation : <a href="https://iiif.inha.fr/mirador.html">Mirador</a>. Par ailleurs, les collections et projets suivants sont manipulables avec le protocole IIIF :</p>
<ul>
<li><a href="https://bibliotheque-numerique.inha.fr/">la bibliothèque numérique de l'INHA</a> ;</li>
<li><a href="https://digitalmuret.inha.fr/s/digital-muret/page/accueil">le projet Digital Muret</a>.</li>
</ul>
<p>Dans la bibliothèque numérique, l'adresse URI du manifest IIIF d'un document se trouve dans sa notice, signalé par l'icône <img src="https://bibliotheque-numerique.inha.fr/themes/INHA/images/logo-iiif-34x30_60pc.png">. Il est possible d'utiliser cette URI pour ajouter l'image à une collection d'objets numériques dans une visionneuse compatible avec IIIF.</p>
<!-- Il faut d'abord vérifier avec Yoolib pourquoi il s ont foutu cet uuuid
<p>Par ailleurs, l'API Image offre de larges possibilités pour manipuler les images de la bibliothèque numérique. Elle définit en effet pour chaque image une URI dont la forme doit respecter la syntaxe suivante : {scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}, chacune des valeurs entre crochet correspondant à un paramètre de présentation potentiellement modifiable. Il est par conséquent possible d'adresser des requêtes à la bibliothèque numérique pour en extraire les images en modifiant les paramètres de présentation. Par exemple, la requête https://bibliotheque-numerique.inha.fr/i/?IIIF=/b1/8b/1f/7d/b18b1f7d-1d95-4c21-abfe-27fa1f0d461f/iiif/0887_doucet_EMTOULOUSELAUTREC223GDF.tif/full/full/90/default.jpg renverra cette estampes de Toulouse-Lautrec avec une rotation horaire de 90°, la valeur 90 ayant été passée en paramètre {rotation}. Les URI à utiliser pour passer ces requêtes se trouvent dans les manifest des images. On peut trouver plus d'informations sur l'API Image en lisant ses <a href="https://iiif.io/api/image/2.1/">spécifications</a> sur le site du consortium IIIF.</p>-->
</div>
</section>
<section id="three">
<div class="container">
<h3>Exploiter les images avec Mirador</h3>
<p>Mirador peut ainsi devenir une veritable <i> table de travail</i> permettant d'appeler des corpus visuels provenant de plusieurs sources différentes </br>
<a class="url" href="https://iiif.inha.fr/viewer" title="Learn More">Accéder à l'instance Mirador</a>
</p>
<video width="800" height="422" controls="controls">
<source src="video/mirador.webm" type="video//mp4" />
<source src="video/mirador.mp4" type="video/webm" />
Vous n'avez pas de navigateur moderne, donc pas de balise video HTML5 !
</video>
</div>
</section>
<section id="four">
<div class="container">
<h3>Des cas d'utilisation</h3>
<p>Le protocole IIIF est particulièrement intéressant pour des recherches en histoire de l'art car il permet d'effectuer des comparaisons entre oeuvres. </p>
<div class="features">
<article>
<a href="#" class="image"><img src="images/ex1.png" alt="" /></a>
<div class="inner">
<h4>Croiser les infos autour du Digital Muret</h4>
<p>
1er manifest : <code>https://bibliotheque-numerique.inha.fr/iiif/32405/manifest</code>
2em manifest : <code>https://bibliotheque-numerique.inha.fr/iiif/32405/manifest</code>
</p>
</div>
</article>
</div>
</div>
</section>
<div class="image main" data-position="center">
<img src="images/banner.jpg" alt="" />
</div>
<!-- Four -->
<section id="five">
<div class="container">
<h3>Nous contacter</h3>
<p>Pour toutes questionscomplémentaires, n'hésitez pas à nous contacter aux adresses suivantes :</p>
<ul>
<li><a href="mailto:[email protected]">la bibliothèque de l'INHA</a> ;</li>
<li><a href="mailto:info-bibliothè[email protected]">La cellule d'ingéierie documentaire du département des études et de la recherche</a>.</li>
</ul>
</div>
</section>
</div>
<!-- Footer -->
<section id="footer">
<div class="container">
<ul class="copyright">
<li>INHA- 2019 </li><li>Design: <a href="http://html5up.net">template insiprée par HTML5 UP</a></li>
</ul>
</div>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>