| Line -... |
Line 110... |
| - |
|
110 |
|
| - |
|
111 |
|
| - |
|
112 |
<!-- pas pour la version 1 -->
|
| - |
|
113 |
<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
|
| - |
|
114 |
<h2>Révision</h2>
|
| - |
|
115 |
<h3>Proposition de détermination</h3>
|
| - |
|
116 |
|
| - |
|
117 |
</div>
|
| - |
|
118 |
|
| - |
|
119 |
|
| - |
|
120 |
|
| - |
|
121 |
<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
|
| - |
|
122 |
<h2>Métadonnées</h2>
|
| - |
|
123 |
<ul id="contenu-meta">
|
| - |
|
124 |
<li id="nom" class="row">
|
| - |
|
125 |
<div class="col-5 label">Nom</div>
|
| - |
|
126 |
<div class="col-5 contenu"></div>
|
| - |
|
127 |
<a class="bouton btn btn-sm btn-outline-secondary" target="_blank" title="Lien vers eflore"
|
| - |
|
128 |
><i class="fas fa-search"></i></a>
|
| - |
|
129 |
</li>
|
| - |
|
130 |
<li id="localisation" class="row">
|
| - |
|
131 |
<div class="col-5 label">Localisation</div>
|
| - |
|
132 |
<div class="col-5 contenu"></div>
|
| - |
|
133 |
<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"
|
| - |
|
134 |
title="Afficher la localisation"><i
|
| - |
|
135 |
class="fas fa-map-marker-alt"></i></a>
|
| - |
|
136 |
</li>
|
| - |
|
137 |
<li id="auteur" class="row">
|
| - |
|
138 |
<div class="col-5 label">Auteur</div>
|
| - |
|
139 |
<div class="col-5 contenu"></div>
|
| - |
|
140 |
<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
|
| - |
|
141 |
title="Afficher le profil"><i class="fas fa-user"></i></a>
|
| - |
|
142 |
</li>
|
| - |
|
143 |
<li id="date-obs" class="row">
|
| - |
|
144 |
<div class="col-5 label">Date d'observation</div>
|
| - |
|
145 |
<div class="col-5 contenu"></div>
|
| - |
|
146 |
</li>
|
| - |
|
147 |
<li id="commentaire" class="row">
|
| - |
|
148 |
<div class="col-5 label">Commentaires</div>
|
| - |
|
149 |
<div class="col-5 contenu"></div>
|
| - |
|
150 |
</li>
|
| - |
|
151 |
<li id="certitude" class="row">
|
| - |
|
152 |
<div class="col-5 label">Certitude de l'identification</div>
|
| - |
|
153 |
<div class="col-5 contenu"></div>
|
| - |
|
154 |
</li>
|
| - |
|
155 |
<li id="fiabilite" class="row">
|
| - |
|
156 |
<div class="col-5 label">Grade</div>
|
| - |
|
157 |
<div class="col-5 contenu"></div>
|
| - |
|
158 |
<a
|
| - |
|
159 |
href="https://www.tela-botanica.org/ressources/donnees/qualification-des-donnees-dobservation/#standard" target="_blank" class="bouton btn btn-sm btn-outline-secondary"
|
| - |
|
160 |
title="Voir plus d'information sur les grades"><i class="fas fa-question-circle"></i></a>
|
| - |
|
161 |
</li>
|
| - |
|
162 |
</ul>
|
| - |
|
163 |
<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i> Afficher plus de métadonnées sur l'observation</a>
|
| 126 |
|
164 |
<ul id="contenu-meta-plus"></ul>
|
| - |
|
165 |
<ul id="contenu-meta-suite">
|
| - |
|
166 |
<li id="num-photo" class="row">
|
| - |
|
167 |
<div class="col-5 label">Photo n°</div>
|
| - |
|
168 |
<div class="col-5 contenu"></div>
|
| - |
|
169 |
</li>
|
| - |
|
170 |
<li id="licence" class="row">
|
| 127 |
<div id="info-img-galerie">
|
171 |
<div class="col-5 label">Licence</div>
|
| 128 |
<div class="conteneur-precedent">
|
172 |
<div class="col-5 contenu">
|
| - |
|
173 |
<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
|
| - |
|
174 |
</div>
|
| - |
|
175 |
</li>
|
| - |
|
176 |
</ul>
|
| - |
|
177 |
|
| 129 |
<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
|
178 |
<a id="signaler-erreur-id" class="btn btn-sm btn-warning signaler-erreur-obs"
|
| - |
|
179 |
title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank" href="https://www.tela-botanica.org/appli:identiplante"><i class="fas fa-exclamation-triangle"></i> Signaler une erreur d'identification</a>
|
| - |
|
180 |
|
| - |
|
181 |
<h2>Téléchargement</h2>
|
| - |
|
182 |
<ul id="contenu-telechargement">
|
| - |
|
183 |
<li id="titre-original" class="row">
|
| - |
|
184 |
<div class="col-5 label">Titre original</div>
|
| - |
|
185 |
<div class="col-7 contenu"></div>
|
| - |
|
186 |
</li>
|
| - |
|
187 |
<li id="date-photo" class="row">
|
| - |
|
188 |
<div class="col-5 label">Date de la photo</div>
|
| - |
|
189 |
<div class="col-7 contenu"></div>
|
| - |
|
190 |
</li>
|
| - |
|
191 |
<li id="Licence-bis" class="row">
|
| - |
|
192 |
<div class="col-5 label">Licence</div>
|
| - |
|
193 |
<div class="col-7 contenu">
|
| - |
|
194 |
<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
|
| - |
|
195 |
</div>
|
| - |
|
196 |
</li>
|
| - |
|
197 |
<li id="attribution" class="row">
|
| - |
|
198 |
<div class="col-12 label">Attribution</div>
|
| - |
|
199 |
<div class="col-12 contenu">
|
| - |
|
200 |
<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
|
| - |
|
201 |
</div>
|
| - |
|
202 |
</li>
|
| - |
|
203 |
<li id="url" class="row">
|
| - |
|
204 |
<div class="col-12 label">Url</div>
|
| - |
|
205 |
<div class="col-12 contenu">
|
| - |
|
206 |
<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
|
| - |
|
207 |
</div>
|
| - |
|
208 |
</li>
|
| - |
|
209 |
</ul>
|
| - |
|
210 |
<ul id="contenu-telechargement-suite" class="mb-0">
|
| - |
|
211 |
<li id="autres-formats" class="row">
|
| - |
|
212 |
<div class="col-12 label">Autres formats</div>
|
| - |
|
213 |
<div class="col-12 contenu">
|
| - |
|
214 |
<select name="formats" id="formats" class="form-control custom-select">
|
| - |
|
215 |
<?php foreach ($formats_description as $format => $description):?>
|
| - |
|
216 |
<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
|
| - |
|
217 |
<?php endforeach; ?>
|
| - |
|
218 |
</select>
|
| - |
|
219 |
</div>
|
| - |
|
220 |
</li>
|
| - |
|
221 |
</ul>
|
| - |
|
222 |
<a href="" data-url-base-telechargement="<?php echo $url_base_telechargement; ?>" id="telecharger" class="btn btn-success mt-0"><i class="fas fa-upload"></i> Télécharger</a>
|
| - |
|
223 |
<h2 class="todo hidden">Partagez !</h2>
|
| - |
|
224 |
<p class="message todo hidden">
|
| - |
|
225 |
Partagez cette photo sur les réseaux sociaux
|
| - |
|
226 |
</p>
|
| - |
|
227 |
<div id="boutons-reseaux-sociaux" class="todo hidden">
|
| - |
|
228 |
<a id="facebook" class="btn btn-outline-secondary btn-lg"
|
| - |
|
229 |
href="https://www.facebook.com/telabotanica/" target="_blank"><i class="fab fa-facebook-f"></i></a>
|
| - |
|
230 |
<a id="twitter" class="btn btn-outline-secondary btn-lg" href="https://twitter.com/TelaBotanica" target="_blank"><i
|
| - |
|
231 |
class="fab fa-twitter"></i></a>
|
| 130 |
<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="<" />
|
232 |
<a id="mail" class="btn btn-outline-secondary btn-lg" href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i>
|
| - |
|
233 |
</a>
|
| 131 |
</a>
|
234 |
</div>
|
| - |
|
235 |
</div>
|
| - |
|
236 |
<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
|
| - |
|
237 |
<h2>Modifier la photo</h2>
|
| - |
|
238 |
<h3 class="todo">Faire pivoter la photo</h3>
|
| - |
|
239 |
<div id="pivoter-photo" class="d-flex justify-content-around todo">
|
| - |
|
240 |
<div id="bloc-pivoter-droite" class="d-flex flex-column">
|
| - |
|
241 |
<label for="pivoter-droite">Pivoter à droite</label>
|
| - |
|
242 |
<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
|
| - |
|
243 |
</div>
|
| - |
|
244 |
<div id="bloc-pivoter-gauche" class="d-flex flex-column">
|
| - |
|
245 |
<label for="pivoter-gauche">Pivoter à gauche</label>
|
| - |
|
246 |
<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
|
| - |
|
247 |
</div>
|
| - |
|
248 |
</div>
|
| - |
|
249 |
<h3>Régénérer miniature</h3>
|
| - |
|
250 |
<p id="message-regenerer" class="message">
|
| - |
|
251 |
Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
|
| - |
|
252 |
</p>
|
| - |
|
253 |
<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i> Régénérer la miniature</a>
|
| - |
|
254 |
</div>
|
| - |
|
255 |
<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
|
| - |
|
256 |
<h2>Aide</h2>
|
| - |
|
257 |
<div id="texte-aide" class="message">
|
| - |
|
258 |
<p>
|
| - |
|
259 |
Cette galerie d'images permet de consulter les photos accompagnant les observations saisies dans le Carnet en Ligne.
|
| - |
|
260 |
C'est aussi une plateforme collaborative où chacun peut caractériser l'ensemble des photos, grâce à
|
| - |
|
261 |
un système de votes et de tags.</p>
|
| - |
|
262 |
|
| - |
|
263 |
<p>Cette caractérisation est mise à disposition des différents projets du réseau, par exemple : la
|
| - |
|
264 |
sélection de photos adaptées à la détermination, des projets de sciences participatives et
|
| - |
|
265 |
observatoires citoyens (Pl@ntNet, Arbres Têtards, etc.), le Défi Photo et tout autre projet qui
|
| - |
|
266 |
nous sera proposé.</p>
|
| - |
|
267 |
|
| - |
|
268 |
<p>Pour en savoir plus sur les différents protocoles et le fonctionnement du système de vote (étoile)
|
| - |
|
269 |
et de tags (étiquette), consulter le wiki d'aide de PictoFlora.
|
| - |
|
270 |
<a href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper" target="_blank">https
|
| - |
|
271 |
://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper</a></p>
|
| - |
|
272 |
|
| - |
|
273 |
<h3>Cet outil étant collaboratif, chacun peut participer librement !</h3>
|
| - |
|
274 |
|
| - |
|
275 |
<p>En bas de la photographie, vous trouverez différentes icônes correspondant à des onglets qui
|
| - |
|
276 |
s'afficheront à gauche ou à la place de la photo selon la taille de votre écran. Sur petit écran,
|
| - |
|
277 |
pour cacher l'onglet, cliquer sur la barre avec la double fléche vers le bas.</p>
|
| - |
|
278 |
|
| - |
|
279 |
<p>Le premier onglet <i class="fas fa-info-circle"></i> contient les informations sur l'observation à laquelle est liée la photo
|
| - |
|
280 |
ainsi que les liens de téléchargement. Vous trouverez également un lien pour signaler une mauvaise
|
| - |
|
281 |
identification.</p>
|
| - |
|
282 |
|
| - |
|
283 |
<p>Le deuxième onglet <i class="far fa-star"></i> permet de voter sur la qualité d'une image selon différents protocoles
|
| 132 |
</div>
|
284 |
reflettant différents aspects de la photo. Par exemple,
|
| - |
|
285 |
dans le protocole "Défi Photo", la note représente l'appréciation personnelle de l'esthétique de la photo et de son adéquation avec le thème du défi en cours, alors que dans le protocole "Aide à l'identification" la note qualifie la pertinence de la photo pour aider à la détermination de l'espèce.
|
| - |
|
286 |
Pour noter une photo, choisir un protocole puis utiliser les étoiles qui se colorent en vert. Les notes vont de 1 à 5. Pour supprimer un vote,
|
| - |
|
287 |
cliquer sur la croix à côté des étoiles.</p>
|
| - |
|
288 |
|
| - |
|
289 |
<p>Le troisième onglet <i class="fas fa-tags"></i> permet de qualifier les photos et de leur associer un ou plusieurs
|
| - |
|
290 |
mots-clés ou tags. Vous pourrez également y consulter les tags déjà associés à la photos :</p>
|
| 133 |
<div class="img-cadre">
|
291 |
<ul><li>les tags du Carnet en Ligne, qui ont été ajoutés par l'auteur de la photo et apparaissent dans un cadre gris foncé. Ils ne sont pas modifiables depuis PictoFlora, mais seulement depuis le CEL de l'utilisateur qui les a ajoutés.</li>
|
| - |
|
292 |
<li>les tags dits publics ou tags PictoFlora qui ont été ajoutés via cette interface et apparaissent dans un cadre gris plus clair. Ils sont modifiables par l'ensemble de la communauté (il est donc conseillé de faire un usage non abusif de cette fonctionnalité).</li></ul>
|
| - |
|
293 |
<p>Pour ajouter un mot-clé, cliquer sur un terme déjà défini comme port, fleur ou feuille, ou ajouter
|
| - |
|
294 |
votre propre tag.</p>
|
| - |
|
295 |
|
| - |
|
296 |
<p>Le quatrième onglet <i
|
| - |
|
297 |
class="fas fa-redo-alt"></i> permet de modifier une photo en la faisant pivoter ou en régénérant la
|
| - |
|
298 |
miniature si vous avez remarqué un problème dans son affichage.</p>
|
| - |
|
299 |
|
| - |
|
300 |
<p>Le cinquième onglet <i
|
| - |
|
301 |
class="fas fa-question-circle"></i> contient cette aide ainsi qu'un lien vers le wiki expliquant comment
|
| - |
|
302 |
paramétrer et intégrer ce widget à votre site.</p>
|
| - |
|
303 |
|
| - |
|
304 |
<p>Vous pouvez passer d'une image à l'autre, en cliquant sur les fléches à gauche ou à droite. Pour
|
| - |
|
305 |
refermer une image et retourner à la galerie, cliquer sur la croix en haut à droite.
|
| - |
|
306 |
</p>
|
| - |
|
307 |
</div>
|
| - |
|
308 |
|
| - |
|
309 |
<ul id="aide-plus">
|
| - |
|
310 |
<li id="plus-infos" class="row">
|
| - |
|
311 |
<div class="col-10 label">Plus d'infos sur le wiki</div>
|
| - |
|
312 |
<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
|
| - |
|
313 |
href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideCELWidgetPhoto" title="Lien vers le wiki"><i
|
| - |
|
314 |
class="fas fa-question-circle"></i></a>
|
| - |
|
315 |
</li>
|
| - |
|
316 |
<li id="autres-questions" class="row">
|
| - |
|
317 |
<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
|
| - |
|
318 |
<a class="bouton btn btn-sm btn-outline-secondary"
|
| - |
|
319 |
href="mailto:cel_remarques@tela-botanica.org"
|
| - |
|
320 |
title="Envoyer un courriel"><i class="fas fa-envelope"></i></a>
|
| - |
|
321 |
</li>
|
| - |
|
322 |
</ul>
|
| - |
|
323 |
|
| - |
|
324 |
</div>
|
| - |
|
325 |
|
| 134 |
<img id="illustration" src="<?=$urls[0]?>" alt="" /><br />
|
326 |
<div class="nettoyage-volet bas"></div>
|
| - |
|
327 |
</div>
|
| - |
|
328 |
|
| - |
|
329 |
</div>
|
| 135 |
</div>
|
330 |
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
|
| - |
|
331 |
<div class="carousel-inner h-100 w-100">
|
| - |
|
332 |
<?php $urls = array_keys($infos_images); ?>
|
| - |
|
333 |
<?php for($index = 0; $index < count($urls); $index++):?>
|
| - |
|
334 |
<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
|
| - |
|
335 |
<img id="illustration-<?php echo $index;?>" class="d-block align-middle"
|
| - |
|
336 |
src="<?php echo $urls[$index] . '?timestamp=' . time();?>" alt=""
|
| - |
|
337 |
data-width="<?php echo $infos_image[$urls[$index]]['width'];?>" data-height="<?php echo $infos_image[$urls[$index]]['height'];?>">
|
| - |
|
338 |
</div>
|
| 136 |
<div class="conteneur-suivant">
|
339 |
<?php endfor; ?>
|
| - |
|
340 |
<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
|
| - |
|
341 |
<i class="fas fa-chevron-circle-left"></i>
|
| - |
|
342 |
<span class="sr-only">Precedent</span>
|
| 137 |
<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
|
343 |
</a>
|
| - |
|
344 |
<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
|
| - |
|
345 |
<i class="fas fa-chevron-circle-right"></i>
|
| 138 |
<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt=">" />
|
346 |
<span class="sr-only">Suivant</span>
|
| 139 |
</a>
|
347 |
</a>
|
| 140 |
</div>
|
- |
|
| 141 |
<hr class="nettoyage" />
|
- |
|
| 142 |
<div id="bloc-infos-img"></div>
|
348 |
</div>
|
| 143 |
</div>
|
- |
|
| 144 |
</body>
|
- |
|
| 145 |
</html>
|
349 |
</div>
|
| - |
|
350 |
<div id="boutons-footer">
|
| - |
|
351 |
<div id="bloc-fct" class="">
|
| - |
|
352 |
<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"
|
| - |
|
353 |
title="Informations / métadonnées"><i class="fas fa-info-circle"></i></a>
|
| - |
|
354 |
<a id="bouton-noter" class="btn bouton-fct noter" data-volet="noter"
|
| - |
|
355 |
title="noter la photo"><i class="far fa-star"></i></a>
|
| - |
|
356 |
<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"
|
| - |
|
357 |
title="tags"><i class="fas fa-tags"></i></a>
|
| - |
|
358 |
<a id="bouton-signaler" class="btn bouton-fct signaler todo hidden" data-volet="signaler" title="signaler"><i
|
| - |
|
359 |
class="fas fa-exclamation-triangle"></i></a>
|
| - |
|
360 |
<a id="bouton-revision" class="btn bouton-fct revision todo hidden" data-volet="revision" title="révision"><i
|
| - |
|
361 |
class="fas fa-edit"></i></a>
|
| - |
|
362 |
<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif" title="modifier la photo"><i
|
| - |
|
363 |
class="fas fa-redo-alt"></i></a>
|
| - |
|
364 |
<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide" title="aide"><i
|
| - |
|
365 |
class="fas fa-question-circle"></i></a>
|
| - |
|
366 |
</div>
|
| - |
|
367 |
<a id="retour-galerie" class="btn btn-outline-dark btn-lg bouton-fct hidden"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
|
| - |
|
368 |
</div>
|
| - |
|
369 |
<script type="text/Javascript">
|
| - |
|
370 |
//<![CDATA[
|
| - |
|
371 |
var widgetProp = {
|
| - |
|
372 |
'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
|
| - |
|
373 |
'urlWidget' : "<?php echo $url_widget; ?>",
|
| - |
|
374 |
'urls' : [<?php echo '"'.implode($urls, '","').'"'; ?>],
|
| - |
|
375 |
'infosImages' : <?php echo json_encode($infos_images); ?>,
|
| - |
|
376 |
'urlImage' : "<?php echo $url_image; ?>",
|
| - |
|
377 |
'indexPremiereImage' : <?php echo array_search($url_image, $urls); ?>,
|
| - |
|
378 |
'tailleMax' : 580,
|
| - |
|
379 |
'popupUrl' : "<?php echo $popup_url; ?>",
|
| - |
|
380 |
'urlBaseTelechargement' : "<?php echo $url_base_telechargement; ?>",
|
| - |
|
381 |
'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>",
|
| - |
|
382 |
'urlServiceDel' : "<?php echo $del_url; ?>",
|
| - |
|
383 |
'urlServiceNewCel' : "<?php echo $new_cel_url; ?>",
|
| - |
|
384 |
'userId' : "<?php echo $userId; ?>",
|
| - |
|
385 |
'token' : "<?php echo $token; ?>",
|
| - |
|
386 |
'protocoles' : <?php echo json_encode($protocoles); ?>
|
| - |
|
387 |
};
|
| - |
|
388 |
$( document ).ready( function() {
|
| - |
|
389 |
popup = new WidgetPhotoPopup( widgetProp );
|
| - |
|
390 |
popup.init();
|
| - |
|
391 |
});
|
| - |
|
392 |
//]]>
|
| - |
|
393 |
</script>
|