Subversion Repositories eFlore/Applications.cel

Rev

Rev 2328 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1210 jpm 1 
<!DOCTYPE html>
2 
<html>
3 
	<head>
4 
		<title>Saisie simplifiée du CEL</title>
2328 jpm 5 
 
1210 jpm 6 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7 
		<meta http-equiv="Content-style-type" content="text/css" />
8 
		<meta http-equiv="Content-script-type" content="text/javascript" />
9 
		<meta http-equiv="Content-language" content="fr" />
2328 jpm 10 
 
1210 jpm 11 
		<meta name="revisit-after" content="15 days" />
2328 jpm 12 
		<meta name="robots" content="index,follow" />
13 
		<meta name="author" content="Jean-Pascal MILCENT" />
14 
		<meta name="keywords" content="Tela Botanica, CEL" />
15 
		<meta name="description" content="Projet Ambrosia - Widget de saisie simplifiée pour le CEL" />
1210 jpm 16 
 
17 
		<!-- Viewport Mobile -->
18 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
2328 jpm 19 
 
1210 jpm 20 
		<!-- Favicones -->
2328 jpm 21 
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
22 
 
1210 jpm 23 
		<!-- Javascript : bibliothèques -->
24 
		<!-- Google Map v3 -->
25 
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
2328 jpm 26 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
27 
 
1210 jpm 28 
		<!-- Jquery -->
2328 jpm 29 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.7.1/jquery-1.7.1.min.js"></script>
1221 jpm 30 
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
2328 jpm 31 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
32 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
1210 jpm 33 
		<!-- Jquery Plugins -->
1221 jpm 34 
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2328 jpm 35 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.9.0/jquery.validate.min.js"></script>
36 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.9.0/messages_fr.js"></script>
1221 jpm 37 
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2328 jpm 38 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/2.95/jquery.form.min.js"></script>
39 
 
1210 jpm 40 
		<!-- Bootstrap -->
2328 jpm 41 
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
42 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/ambrosia/js/bootstrap-modalmanager.js"></script>
43 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/ambrosia/js/bootstrap-modal.js"></script>
44 
 
1210 jpm 45 
		<!-- Javascript : appli saisie -->
46 
		<script type="text/javascript">
47 
		//<![CDATA[
48 
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
49 
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
50 
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
2328 jpm 51 
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;<?=$url_base?>modules/saisie/squelettes/ambrosia/js/
1235 jpm 52 
			// Mot-clé du widget/projet
53 
			var TAG_PROJET = "WidgetSaisie";
54 
			// Mots-clés à ajouter aux images
55 
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
1913 raphael 56 
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
57 
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
1235 jpm 58 
			// Mots-clés à ajouter aux observations
59 
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
1913 raphael 60 
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
61 
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
2328 jpm 62 
 
63 
			// Précharger le formulaire avec les infos d'une observation
64 
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
1210 jpm 65 
			// URL du web service réalisant l'insertion des données dans la base du CEL.
66 
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
2328 jpm 67 
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
68 
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
1476 aurelien 69 
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
1215 jpm 70 
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
1476 aurelien 71 
			// Nom du référentiel utilisé pour les nom scientifiques.
72 
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
1215 jpm 73 
			// Code de la version du référentiel utilisé pour les nom scientifiques.
74 
			var NOM_SCI_VERSION = "<?=$ns_version?>";
1418 aurelien 75 
			// Indication de la présence d'une espèce imposée
76 
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
1419 aurelien 77 
			// Tableau d'informations sur l'espèce imposée
78 
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
1215 jpm 79 
			// Nombre d'élément dans les listes d'auto-complétion
80 
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
1476 aurelien 81 
			// Indication de la présence d'un référentiel imposé
82 
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
83 
			// Indication des version utilisées de chaque référentiel
84 
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
1210 jpm 85 
			// URL du web service permettant l'auto-complétion des noms scientifiques.
86 
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
87 
					"masque={masque}&"+
88 
					"recherche=etendue&"+
1239 jpm 89 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
1476 aurelien 90 
					//"version.projet="+NOM_SCI_VERSION+"&"+
1232 jpm 91 
					"ns.structure=au"+"&"+
1215 jpm 92 
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
1476 aurelien 93 
			// URL du web service permettant l'auto-complétion des noms scientifiques.
94 
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
95 
					"masque={masque}&"+
96 
					"recherche=etendue&"+
97 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
2243 mathias 98 
					"retour.tri=alpharet&"+ // tri "à la CeL"
1476 aurelien 99 
					//"version.projet="+NOM_SCI_VERSION+"&"+
100 
					"ns.structure=au"+"&"+
101 
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
1240 jpm 102 
			// Nombre d'observations max autorisé avant transmission
103 
			var OBS_MAX_NBRE = 10;
1249 jpm 104 
			// Durée d'affichage en milliseconde des messages d'informations
105 
			var DUREE_MESSAGE = 15000;
2328 jpm 106 
			// Squelette d'URL du web service de l'annuaire.
107 
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
1210 jpm 108 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
1984 jpm 109 
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
1476 aurelien 110 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
1984 jpm 111 
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
1210 jpm 112 
			// URL du marqueur à utiliser dans la carte Google Map
2328 jpm 113 
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/marqueurs/epingle.png";
1210 jpm 114 
			// URL de l'icône du chargement en cours
2328 jpm 115 
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement.gif";
1493 aurelien 116 
			// URL de l'icône du chargement en cours d'une image
2328 jpm 117 
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement-image.gif";
1210 jpm 118 
			// URL de l'icône du calendrier
2328 jpm 119 
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/calendrier.png";
1239 jpm 120 
			// URL de l'icône du calendrier
2328 jpm 121 
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/pasdephoto.png";
122 
 
1210 jpm 123 
		//]]>
124 
		</script>
2328 jpm 125 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/ambrosia/js/ambrosia.js"></script>
126 
 
1210 jpm 127 
		<!-- CSS -->
2328 jpm 128 
		<link href="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
129 
		<link href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
130 
		<link href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
131 
		<link href="<?=$url_base?>modules/saisie/squelettes/ambrosia/css/bootstrap-modal.css" rel="stylesheet" type="text/css" media="screen" />
132 
		<link href="<?=$url_base?>modules/saisie/squelettes/ambrosia/css/<?=isset($_GET['style']) ? $_GET['style'] : 'ambrosia'?>.css" rel="stylesheet" type="text/css" media="screen" />
133 
 
1210 jpm 134 
	</head>
135 
 
1240 jpm 136 
	<body data-spy="scroll">
1210 jpm 137 
		<div class="container">
2328 jpm 138 
			<div class="row-fluid  page-header">
139 
				<div>
140 
					<h1>
141 
						<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/logos/tela_botanica.png" alt="Tela Botanica" />
142 
						À la recherche des <a href="#plte-description" data-toggle="modal">Ambroisies à épis lisses</a> (<i>Ambrosia psilostachya</i> DC.)
143 
					</h1>
144 
				</div>
145 
			</div>
1210 jpm 146 
			<div class="row-fluid">
2328 jpm 147 
				<div class="span6">
148 
					<div class="row-fluid">
149 
						<div id="intro" class ="well collapse in">
150 
							<a class="fermer" data-toggle="collapse" data-target="#intro">
151 
								<h3 class="titre">
152 
									Le projet
153 
									<i class="icone icon-plus-sign"></i>
154 
								</h3>
155 
							</a>
156 
							<p>
2330 jpm 157 
								L’<a href="http://www.ambroisie.info/pages/observatoire.htm" target="_blank">Observatoire des ambroisies</a>,
2328 jpm 158 
								en collaboration avec le
2330 jpm 159 
								<a href="http://www.anses.fr/fr/content/laboratoire-de-la-sant%C3%A9-des-v%C3%A9g%C3%A9taux" target="_blank">Laboratoire de la Santé des Végétaux
160 
								de l’Anses</a> et <a href="http://www.tela-botanica.org" target="_blank">Tela-Botanica</a>,
2328 jpm 161 
								lance une enquête pour recueillir vos observations sur cette
162 
								plante afin de mieux connaître sa distribution, sa dynamique et mesurer ses impacts éventuels.
163 
							</p>
164 
							<p>
165 
								L’<a href="#plte-description" data-toggle="modal">ambroisie à épis lisses</a> est moins répandue que l’ambroisie à feuilles d’armoise (<i>Ambrosia
166 
								artemisiifolia</i>). Cependant son pollen est potentiellement allergisant. Présente en Camargue,
167 
								elle semble en extension et peut présenter une menace pour les habitats sensibles.
168 
								Grâce à vos observations notées sur cette page nous pourrons détecter précocement sa
169 
								présence, connaître sa géolocalisation et évaluer les risques potentiels.
170 
							</p>
1240 jpm 171 
						</div>
172 
					</div>
2328 jpm 173 
				</div>
174 
 
175 
				<div class="span6">
176 
					<div class="row-fluid">
177 
						<div id="aide" class="well collapse in">
178 
							<a class="fermer" data-toggle="collapse" data-target="#aide">
179 
								<h3 class="titre">
180 
									Aide
181 
									<i class="icone icon-plus-sign"></i>
182 
								</h3>
183 
							</a>
1235 jpm 184 
							<p>
2328 jpm 185 
								Cet outil vous permet de partager simplement vos observations avec le
1485 aurelien 186 
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
187 
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
1249 jpm 188 
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
1485 aurelien 189 
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
2328 jpm 190 
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
1235 jpm 191 
							</p>
192 
							<p class="discretion">
2082 mathias 193 
								Pour toute question ou remarque,
194 
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2328 jpm 195 
									target="_blank"
196 
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
197 
									contactez-nous</a>
1485 aurelien 198 
							</p>
199 
							<p class="discretion">
1257 jpm 200 
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
1253 jpm 201 
								<button id="btn-aide" class="btn btn-mini btn-success">
202 
									<span class="icon-question-sign icon-white"></span>
203 
									<span id="btn-aide-txt" >Désactiver l'aide</span>
2328 jpm 204 
								</button>
1253 jpm 205 
							</p>
1235 jpm 206 
						</div>
1210 jpm 207 
					</div>
208 
				</div>
2328 jpm 209 
			</div>
210 
			<div class="row-fluid">
211 
				<div class="well">
212 
					<h2>Observateur</h2>
213 
					<form id="form-observateur" action="#" class="" autocomplete="on">
214 
						<div class="row-fluid">
215 
							<div class="span6 control-group has-tooltip" data-placement="right"
216 
								title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
217 
									Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
218 
									ultérieurement. Des informations complémentaires vont vous être
219 
									demandées : prénom et nom.">
220 
								<label for="courriel"  class="control-label"
221 
									title="Veuillez saisir votre adresse courriel.">
222 
									<strong class="obligatoire">*</strong> Courriel
223 
								</label>
224 
								<div class="input-prepend">
225 
									<span class="add-on">
226 
										<i class="icon-envelope"></i>
227 
									</span>
228 
									<input id="courriel" name="courriel" type="text"/>
229 
									<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
1214 jpm 230 
								</div>
2328 jpm 231 
							</div>
232 
							<div id="zone-courriel-confirmation" class="span6 control-group hidden">
233 
								<label for="courriel_confirmation" class="control-label"
234 
									title="Veuillez saisir confirmer le courriel.">
235 
									<strong class="obligatoire">*</strong> Courriel (confirmation)
236 
								</label>
237 
								<div class="input-prepend">
238 
									<span class="add-on">
239 
										<i class="icon-envelope"></i>
240 
									</span>
241 
									<input id="courriel_confirmation" name="courriel_confirmation" type="text"/>
1218 jpm 242 
								</div>
1210 jpm 243 
							</div>
2328 jpm 244 
						</div>
245 
						<div id="zone-prenom-nom" class="row-fluid hidden">
246 
							<div class="span6">
247 
								<label for="prenom">Prénom</label>
248 
								<div>
249 
									<input id="prenom" name="prenom" type="text"/>
1241 jpm 250 
								</div>
2328 jpm 251 
							</div>
252 
							<div class="span6">
253 
								<label for="nom">Nom</label>
254 
								<div>
255 
									<input id="nom" name="nom"  type="text"/>
1241 jpm 256 
								</div>
257 
							</div>
2328 jpm 258 
						</div>
259 
					</form>
1218 jpm 260 
				</div>
1210 jpm 261 
			</div>
1220 jpm 262 
			<!-- Messages d'erreur du formulaire-->
263 
			<div class="row">
264 
				<div class="zone-alerte span6 offset3">
1249 jpm 265 
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
1220 jpm 266 
						<a class="close">×</a>
267 
						<h4 class="alert-heading">Information : copier/coller</h4>
268 
						<p>
269 
							Merci de ne pas copier/coller votre courriel.<br/>
270 
							La double saisie permet de vérifier l'absence d'erreurs.
271 
						</p>
272 
					</div>
1249 jpm 273 
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
274 
						<a class="close">×</a>
275 
						<h4 class="alert-heading">Information : courriel introuvable</h4>
276 
						<p>
277 
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
278 
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
2328 jpm 279 
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
1249 jpm 280 
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
281 
						</p>
282 
					</div>
1576 jpm 283 
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
284 
						<a class="close">×</a>
285 
						<h4 class="alert-heading">Information sur Google Map</h4>
286 
						<div class="contenu"></div>
287 
					</div>
1220 jpm 288 
				</div>
289 
			</div>
1239 jpm 290 
			<div class="row-fluid">
291 
				<div class="span12">
1216 jpm 292 
					<div class="well">
1210 jpm 293 
						<div class="row-fluid">
1239 jpm 294 
							<div class="span6">
295 
								<div>
296 
									<div class="row-fluid">
297 
										<div class="span12">
298 
											<h2>Lieu du relevé</h2>
1216 jpm 299 
										</div>
300 
									</div>
1239 jpm 301 
									<div class="row-fluid">
302 
										<div class="span4">
303 
											<label for="map_canvas" title="Veuillez localiser l'observation">
304 
												Géolocalisation
305 
											</label>
1216 jpm 306 
										</div>
1239 jpm 307 
										<div class="span8 droite">
308 
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
309 
												<div class="control-group">
310 
													<label for="carte-recherche">Rechercher</label>
2328 jpm 311 
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
1239 jpm 312 
														title="Permet de centrer la carte sur le lieu recherché."
313 
														placeholder="Centrer la carte sur un lieu..."/>
314 
												</div>
315 
											</form>
316 
										</div>
1216 jpm 317 
									</div>
1239 jpm 318 
									<div class="row-fluid">
319 
										<div class="span12">
2328 jpm 320 
											<div id="map-canvas" class="has-tooltip"
1249 jpm 321 
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
2328 jpm 322 
													représentant votre station ou bien le glisser-déposer sur
1249 jpm 323 
													le lieu souhaité."></div>
1216 jpm 324 
										</div>
325 
									</div>
1239 jpm 326 
									<div class="row-fluid">
2328 jpm 327 
										<label class="span7 control-label">
1239 jpm 328 
											<a href="#" class="afficher-coord">Afficher</a>
329 
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
330 
											les coordonnées géographiques
2328 jpm 331 
											<span id="lat-lon-info" class="info has-tooltip"
1239 jpm 332 
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
333 
												(WGS84)
334 
											</span>
335 
										</label>
336 
										<div id="info-commune" class="span5">
337 
								    		<span for="marqueur-commune">Commune : </span>
338 
								    		<span id="marqueur-commune">
339 
								    			<span id="commune-nom" class="commune-info"></span>
2328 jpm 340 
								    			(<span id="commune-code-insee" class="commune-info has-tooltip"
1239 jpm 341 
								    				title="Code INSEE de la commune"></span>)
342 
								    		</span>
343 
							    		</div>
1214 jpm 344 
									</div>
2328 jpm 345 
									<form id="form-station" action="#" enctype="multipart/form-data" autocomplete="on">
1239 jpm 346 
										<div id="coordonnees-geo" class="well" style="display:none;">
347 
											<div class="row-fluid form-inline">
2328 jpm 348 
												<div id="coord-lat" class="span4">
1239 jpm 349 
													<label for="latitude">Latitude</label>
350 
													<div>
351 
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
352 
													</div>
353 
												</div>
354 
												<div id="coord-lng" class="span4">
355 
													<label for="longitude">Longitude</label>
356 
													<div>
357 
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
358 
													</div>
359 
												</div>
360 
												<div class="span1">
361 
													<div>
2328 jpm 362 
														<input id="geolocaliser" type="button" value="Voir sur la carte"
363 
															class="has-tooltip"
1239 jpm 364 
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
365 
													</div>
366 
												</div>
367 
									    	</div>
368 
										</div>
369 
										<div class="row-fluid">
2328 jpm 370 
											<div class="span6 control-group has-tooltip"
1485 aurelien 371 
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
2328 jpm 372 
												<label class="control-label">
373 
													Lieu-dit
374 
													<input type="text" id="lieudit" class="" name="lieudit"/>
375 
												</label>
1239 jpm 376 
											</div>
2328 jpm 377 
											<div class="span6 control-group has-tooltip"
1485 aurelien 378 
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
2328 jpm 379 
												<label class="control-label">
380 
													Station
381 
													<input type="text" id="station" class="" name="station"/>
382 
												</label>
1239 jpm 383 
											</div>
2328 jpm 384 
										</div>
385 
 
386 
										<div class="row-fluid">
387 
											<div class="span12 control-group has-tooltip"
388 
												title="Indiquez la surface en m² de la station au sein de laquelle la plante est présente.">
389 
												<label class="span12 control-label">
390 
													<strong class="obligatoire">*</strong>
391 
													Surface de la station
392 
													<select id="station-surface" class="span8 obs-chp-etendu" name="stationSurface"
393 
															data-label="Surface couverte dans la station">
394 
														<option selected value="">Sélectionnez une surface</option>
395 
														<option value="0-5">&lt;5 m²</option>
396 
														<option value="5-10">5-10 m²</option>
397 
														<option value="10-50">10-50 m²</option>
398 
														<option value="50-100">50-100 m²</option>
399 
														<option value="100-500">100-500 m²</option>
400 
														<option value="500-1000">500-1000 m²</option>
401 
														<option value="1000+">&gt; 1000 m²</option>
402 
													</select>
403 
												</label>
404 
											</div>
405 
										</div>
406 
 
407 
										<div class="row-fluid">
408 
											<div class="span12 control-group" >
409 
												<label class="span12 control-label">
410 
													<strong class="obligatoire">*</strong>
411 
													Milieu
412 
													<select id="milieu" class="span8" name="milieu">
413 
														<option selected value="">Sélectionnez un milieu</option>
414 
														<?php foreach ($milieux as $milieu => $description) : ?>
415 
														<option value="<?=strtolower($milieu)?>">
416 
															<?=$milieu?> <?=($description != '') ? "($description)" : '' ?>
417 
														</option>
418 
														<?php endforeach; ?>
419 
														<option value="">Autre : préciser dans les commentaires.</option>
420 
													</select>
421 
												</label>
422 
											</div>
423 
										</div>
424 
 
425 
										<div class="row-fluid">
426 
											<div class="span12">
427 
												<label for="milieuCommentaire">Commentaires sur le milieu</label>
1239 jpm 428 
												<div>
2328 jpm 429 
													<textarea id="milieu-commentaire" class="span12 obs-chp-etendu" rows="7"
430 
														name="milieuCommentaire" data-label="Commentaires sur le milieu"
431 
														placeholder="Vous pouvez éventuellement ajouter des informations complémentaires concernant le milieu"></textarea>
1239 jpm 432 
												</div>
433 
											</div>
434 
										</div>
435 
									</form>
1210 jpm 436 
								</div>
1239 jpm 437 
							</div>
438 
							<div class="span6">
439 
								<form id="form-obs" action="#" autocomplete="on">
2328 jpm 440 
									<h2>Observation</h2>
441 
									<input id="referentiel" type="hidden" value="bdtfx" />
442 
 
443 
									<div class="row-fluid">
444 
										<div id="taxon-input-groupe" class="span8 has-tooltip"
445 
											title="Sélectionnez une espèce dans la liste déroulante pour lier
446 
												votre nom au référentiel selectionné. Si vous
447 
												le désirez vous pouvez aussi saisir un nom absent du référentiel
448 
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
449 
											<label class="span12 control-label">Espèce
450 
												<div class="input-prepend input-append">
451 
													<span class="add-on"><i class="icon-leaf"></i></span>
452 
													<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
453 
													<a href="#plte-description" role="button" class="btn btn-success add-on" data-toggle="modal">Voir la description</a>
454 
												</div>
455 
											</label>
1476 aurelien 456 
										</div>
2328 jpm 457 
									</div>
458 
 
1239 jpm 459 
									<div class="row-fluid">
2328 jpm 460 
										<div class="span12 control-group has-tooltip"
461 
												title="Vous pouvez cliquer sur l'icône de calendrier pour
462 
													sélectionner une date dans un calendrier.">
463 
											<label class="span12 control-label"  title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
464 
												<strong class="obligatoire">*</strong>
1485 aurelien 465 
												Date du relevé
2328 jpm 466 
												<div class="input-prepend">
467 
													<span id="date-icone" class="add-on"></span>
468 
													<input id="date" name="date" type="text" placeholder="jj/mm/aaaa" />
469 
												</div>
1239 jpm 470 
											</label>
471 
										</div>
2328 jpm 472 
									</div>
473 
 
474 
									<div class="row-fluid">
475 
										<div class="span12 control-group has-tooltip"
476 
												title="Indiquez ici le pourcentage de recouvrement par la plante sur la surface de la station.">
477 
											<label class="span12 control-label">
478 
												<strong class="obligatoire">*</strong>
479 
												Recouvrement par la plante de la surface de la station
480 
												<select id="recouvrement" class="span8 obs-chp-etendu" name="recouvrement"
481 
														data-label="Recouvrement au sein de la surface couverte dans la station">
482 
													<option selected value="">Sélectionnez un recouvrement</option>
483 
													<option value="+">&lt;1 %</option>
484 
													<option value="1">1-5 %</option>
485 
													<option value="2">5-25 %</option>
486 
													<option value="3">25-50 %</option>
487 
													<option value="4">50-75 %</option>
488 
													<option value="5">75-100 %</option>
489 
												</select>
1239 jpm 490 
											</label>
491 
										</div>
1214 jpm 492 
									</div>
2328 jpm 493 
 
1239 jpm 494 
									<div class="row-fluid">
495 
										<div class="span12">
2330 jpm 496 
											<label for="notes">Notes</label>
1239 jpm 497 
											<div>
2328 jpm 498 
												<textarea id="notes" class="span12" rows="7" name="notes"
1239 jpm 499 
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
500 
											</div>
501 
										</div>
1214 jpm 502 
									</div>
2328 jpm 503 
 
1239 jpm 504 
								</form>
1894 mathias 505 
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=sauvages"
1239 jpm 506 
									method="post" enctype="multipart/form-data">
2328 jpm 507 
									<h2>Image(s) de cette plante</h2>
508 
									<strong>Ajouter une image</strong>
1524 aurelien 509 
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
510 
									<div id ="photos-conteneur">
1239 jpm 511 
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
512 
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
1524 aurelien 513 
										<div id="miniatures">
514 
										</div>
515 
										<p class="miniature-msg" class="span12">&nbsp;</p>
1210 jpm 516 
									</div>
1239 jpm 517 
								</form>
1210 jpm 518 
							</div>
519 
							<div class="row-fluid">
2328 jpm 520 
								<div class="span12 centre has-tooltip"
521 
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
1253 jpm 522 
										ajouter votre observation à la liste à transmettre.">
523 
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
1239 jpm 524 
										Créer
525 
									</button>
1210 jpm 526 
								</div>
527 
							</div>
1239 jpm 528 
						</div>
1210 jpm 529 
					</div>
2328 jpm 530 
				</div>
1210 jpm 531 
			</div>
2328 jpm 532 
 
1249 jpm 533 
			<!-- Messages d'erreur du formulaire-->
534 
			<div class="row">
535 
				<div class="zone-alerte span6 offset3">
536 
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
537 
						<a class="close">×</a>
538 
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
539 
						<p>
1416 aurelien 540 
							Vous venez d'ajouter votre 10ème observation.<br/>
1249 jpm 541 
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
542 
						</p>
543 
					</div>
544 
				</div>
545 
				<div class="zone-alerte span6 offset3">
546 
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
547 
						<a class="close">×</a>
548 
						<h4 class="alert-heading">Information : champs en erreur</h4>
549 
						<p>
550 
							Certains champs du formulaire sont mal remplis.<br/>
551 
							Veuillez vérifier vos données.
552 
						</p>
553 
					</div>
554 
				</div>
555 
			</div>
2328 jpm 556 
 
557 
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
1210 jpm 558 
			<div id="zone-liste-obs" class="row-fluid">
1239 jpm 559 
				<div class="span12">
560 
					<div class="well">
1249 jpm 561 
						<div class="row-fluid">
562 
							<div class="span8">
563 
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
564 
							</div>
565 
							<div class="span4 droite">
2328 jpm 566 
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
567 
									type="button" disabled="disabled"
568 
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
1249 jpm 569 
									Transmettre
570 
								</button>
571 
							</div>
572 
						</div>
1240 jpm 573 
						<div id="liste-obs" ></div>
1239 jpm 574 
						<div class="row">
575 
							<div class="zone-alerte span6 offset3">
576 
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
577 
									<a class="close">×</a>
578 
									<h4 class="alert-heading">Attention : aucune observation</h4>
579 
									<p>Veuillez saisir des observations pour les transmettres.</p>
580 
								</div>
2328 jpm 581 
 
1249 jpm 582 
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
1239 jpm 583 
									<a class="close">×</a>
584 
									<h4 class="alert-heading">Information : transmission des observations</h4>
585 
									<div class="alert-txt"></div>
586 
								</div>
2328 jpm 587 
 
1249 jpm 588 
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
1239 jpm 589 
									<a class="close">×</a>
590 
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
591 
									<div class="alert-txt"></div>
592 
								</div>
1220 jpm 593 
							</div>
1239 jpm 594 
						</div>
2328 jpm 595 
 
1220 jpm 596 
					</div>
1239 jpm 597 
				</div>
1210 jpm 598 
			</div>
2328 jpm 599 
 
1210 jpm 600 
			<footer class="row-fluid">
2328 jpm 601 
				<p class="span12">&copy; Tela Botanica 2014</p>
1210 jpm 602 
			</footer>
2328 jpm 603 
 
1239 jpm 604 
			<!-- Fenêtres modales -->
2328 jpm 605 
			<div id="chargement" class="modal-fenetre" style="display:none;">
1249 jpm 606 
				<div id="chargement-centrage" class="modal-contenu">
2110 aurelien 607 
					<div class="progress progress-striped active">
608 
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
609 
			    			<span class="sr-only">0/10 observations transmises</span>
610 
			  			</div>
611 
					</div>
1239 jpm 612 
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
613 
						Transfert des observations en cours...<br />
2328 jpm 614 
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
1493 aurelien 615 
						d'observations à transférer.
1239 jpm 616 
					</p>
617 
				</div>
1210 jpm 618 
			</div>
2328 jpm 619 
 
1249 jpm 620 
			<!-- Templates HTML -->
621 
			<div id="tpl-transmission-ok" style="display:none;">
622 
				<p class="msg">
623 
					Vos observations ont bien été transmises.<br />
2328 jpm 624 
					Elles sont désormais consultables à travers les différents outils de visualisation
625 
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
626 
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
1493 aurelien 627 
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
628 
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
2328 jpm 629 
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
1249 jpm 630 
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
2328 jpm 631 
					N'oubliez pas qu'il est nécessaire de
1249 jpm 632 
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
633 
					au préalable, si ce n'est pas déjà fait.
634 
				</p>
635 
			</div>
636 
			<div id="tpl-transmission-ko" style="display:none;">
637 
				<p class="msg">
2110 aurelien 638 
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
2328 jpm 639 
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
2110 aurelien 640 
					et transmettre les suivantes.<br />
2117 aurelien 641 
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
2328 jpm 642 
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
2110 aurelien 643 
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
644 
								  target="_blank"
645 
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
646 
								  le formulaire de signalement d'erreurs</a>.
1249 jpm 647 
				</p>
648 
			</div>
2328 jpm 649 
 
650 
			<!-- Fenêtres modales -->
651 
			<div id="plte-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
652 
				 aria-labelledby="plte-description-titre" aria-hidden="true">
653 
				<div class="modal-header">
654 
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
655 
					<h1 id="plte-description-titre"><i>Ambrosia psilostachya</i> DC. (Ambroisie à épis lisses)</h1>
656 
				</div>
657 
				<div class="modal-body">
658 
					<div class="dsc-imgs">
659 
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/allure_generale.jpg" alt="Allure générale"/>
660 
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/feuille.jpg" alt="Feuille"/>
661 
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/fruit.jpg" alt="Fruit"/>
662 
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/racine.jpg" alt="Racine"/>
663 
					</div>
664 
					<div class="dsc-infos">
665 
						<p><b>Floraison :</b> de fin mai à septembre.</p>
666 
						<p>
667 
							<b>Plante vivace</b> de 10-60(80) cm à <b>rhizome grêle</b> d’où naissent des drageons (voir <b>photo 4</b>) . <b class="text-error">Attention: en
668 
							arrachant la plante la tige casse facilement au ras du rhizome et la portion enfouie de la tige ressemble à une racine
669 
							pivotante (=confusion possible avec une espèce annuelle) !</b>
670 
						</p>
671 
						<p><b>Tiges</b> simples ou à rameaux courts, souvent nues au-dessous du collet.</p>
672 
						<p>
673 
							<b>Feuilles</b> médianes 1 à 2 fois découpées, à bande médiane > 2 mm entre les 2 premières divisions (voir <b>photo 2</b>).<br />
674 
							Morphologie des feuilles généralement uniforme au sein d’un même colonie.
675 
						</p>
676 
						<p><b>Inflorescence</b> mâle (au sommet) dépassant rarement 10 cm (6-20 cm chez <i>A. artemisiifolia</i>).</p>
677 
						<p>
678 
							<b>Fruits</b> (rarement produits en France) de plus 3,5 mm à bec de moins de 1 mm (>1 mm chez <i>A. artemisiifolia</i>) et
679 
							épines obtuses courtes <0,3 mm (épines aiguës > 0,3 mm chez <i>A. artemisiifolia</i>) : voir <b>photo 3</b>.
680 
						</p>
681 
						<p class="muted">
682 
							<b>Références :</b> Tison et al. (2014) Flore de la France méditerranéenne continentale ; Tison & De Foucault (2014) Flora Gallica ; Jauzein (1995)
683 
							Flore des champs cultivés
684 
						</p>
685 
						<p>
686 
							<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/ambrosia_psilostachya.pdf" target="_blank">
687 
								Télécharger cette description au format PDF (173 Ko)
688 
							</a>.
689 
						</p>
690 
					</div>
691 
				</div>
692 
				<div class="modal-footer dsc-clean">
693 
					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
694 
				</div>
695 
			</div>
696 
 
1239 jpm 697 
			<!-- Stats : Google Analytics-->
698 
			<script type="text/javascript">
699 
				//<![CDATA[
700 
				var _gaq = _gaq || [];
701 
				_gaq.push(['_setAccount', 'UA-20092557-1']);
702 
				_gaq.push(['_trackPageview']);
2328 jpm 703 
 
1239 jpm 704 
				(function() {
705 
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
706 
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
707 
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
708 
				})();
709 
				//]]>
710 
			</script>
1210 jpm 711 
		</div>
712 
	</body>
713 
</html>