Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

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