WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/saisie/squelettes/arbres-tetards/arbres-tetards.tpl.html

 		<!-- Javascript : bibliothèques -->
 		<!-- Google Map v3 -->
 		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
+		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
+		<!-- Proj4js -->
-		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
+		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
 		<!-- Jquery -->
 		<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
 		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
 		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
 		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
 		<!-- Jquery Form :nécessaire pour l'upload des images -->
 		<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
 		<!-- Bootstrap -->
 		<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modalmanager.js"></script>
-		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modal.js"></script>
-		<!-- Proj4js -->
-		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
 		<!-- Javascript : appli saisie -->
 		<script src="<?=$url_base?>saisie?projet=arbres-tetards&amp;service=taxons" type="text/javascript"></script>
 		<script>
 		<!-- CSS -->
 		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
 		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
 		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
 		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
-		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
 		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-tetards'?>.css" />
 	</head>
 	<body data-spy="scroll">
 		<div class="container">
 			<div class="row">
 				<div class="col-md-6">
 					<div id="intro" class="well well-lg">
 						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
 							<h3 class="titre">
-								Le projet
+								Le Projet «&nbsp;Arbres Têtards&nbsp;»
 								<span class="glyphicon glyphicon-plus-sign"></span>
 							</h3>
 						</a>
 						<div id="intro-txt" class="collapse in">
 							<p>
-								Les arbres têtards (trognes), sont des arbres taillés exploités depuis des siècles
-								pour leurs branches ou leurs feuilles.
-							</p>
-							<p>
-								La taille consiste à couper la tête de l’arbre à environ 2m du sol. Les branches
-								repoussent en couronne au sommet du tronc et sont taillées au même endroit tous
-								les 5 à 12 ans. De nombreuses espèces de feuillus peuvent être taillées en têtard,
-								les plus fréquentes sont les saules, les frênes, les peupliers et aussi les muriers.
+								Les <a data-toggle="modal" data-target="#projet-description">arbres têtards ou trognes</a>,
-							</p>
-							<p>
-								Ces arbres, témoins d’anciennes pratiques agricoles, embellissent le paysage,
+								sont des arbres taillés exploités depuis des siècles. Par leurs histoires et
-								retiennent les berges, participent au maintien des zones humides et abritent de
-								nombreuses espèces végétales et animales dont beaucoup sont menacées.<br />
+								leurs richesses écologiques, ils font partis de notre patrimoine.<br />
-								Victimes de la modernisation de l’agriculture et de l’urbanisation des zones
+								Victimes des changements de pratiques agricoles et de l’urbanisation des zones
 								rurales, ces arbres remarquables disparaissent !
 							</p>
 							<p>
 								C’est pourquoi <a href="http://www.gentiana.org/" target="_blank">Gentiana</a>
 								a lancé un programme de suivi, de sauvegarde et de restauration des arbres têtards
 								en Isère. Ce projet a pour but de mieux faire connaître ces arbres, de les entretenir,
-								de restaurer les arbres à l’abandon et d’en replanter.
+								de restaurer ceux à l’abandon et d’en replanter.
 							</p>
 							<p>
 								La première chose à faire est un état des lieux des arbres têtards sur tout le
-								département de l’Isère.<br />
+								département de l’Isère.
 								<strong>Nous avons besoin de vous pour améliorer notre connaissance !</strong><br />
 								Vous pouvez nous aider en nous signalant les arbres têtards que vous connaissez
 								à l’aide du formulaire suivant.
 							</p>
 						</div>
 					<div class="col-md-6">
 						<div class="row">
 							<div class="col-md-3">
 								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
 							</div>
-							<div class="col-md-8 text-right">
+							<div class="col-md-9 text-right">
 								<form id="form-carte-recherche" class="form-horizontal" role="form">
 									<div class="form-group">
 										<label for="carte-recherche" class="sr-only">Rechercher</label>
+										<div class="col-md-12">
-										<div class="input-group">
+											<div class="input-group">
-											<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
+												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
-													title="Permet de centrer la carte sur le lieu recherché."
+														title="Permet de centrer la carte sur le lieu recherché."
-													placeholder="Centrer la carte sur un lieu..."/>
+														placeholder="Centrer la carte sur un lieu..."/>
-											<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
+												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
+											</div>
 										</div>
 									</div>
 								</form>
 							</div>
 						</div>
 									title="Indiquez le type de taille de l'arbre.">
 								<label for="taille-type" class="col-sm-4 control-label">
 									Type de taille
 								</label>
 								<div class="col-sm-8">
+									<div class="input-group">
-									<select id="taille-type" class="form-control obs-chp-etendu"
+										<select id="taille-type" class="form-control obs-chp-etendu"
-											name="arbreTetardTailleType"
+												name="arbreTetardTailleType"
-											data-label="Type de taille">
+												data-label="Type de taille">
-										<option selected value="">Sélectionnez le type de taille</option>
+											<option selected value="">Sélectionnez le type de taille</option>
-										<option value="trogne">Trogne</option>
+											<option value="trogne">Trogne</option>
-										<option value="tête de chat">Tête de chat</option>
+											<option value="tête de chat">Tête de chat</option>
-										<option value="émonde">Émonde</option>
+											<option value="émonde">Émonde</option>
-										<option value="autre">Autre, précisez le type de taille dans les notes</option>
+											<option value="autre">Autre, précisez le type de taille dans les notes</option>
-									</select>
+										</select>
+										<div class="input-group-btn">
+											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#taille-description">
+												<span class="glyphicon glyphicon-info-sign"></span> Aide
+											</button>
+										</div>
+									</div>
 								</div>
 							</div>
 							<div class="form-group has-tooltip"
 			<footer class="row">
 				<p class="col-md-12">&copy; Tela Botanica 2014</p>
-			</footer>
-			<!-- Fenêtres modales -->
-			<div id="chargement" class="modal-fenetre" style="display:none;">
-				<div id="chargement-centrage" class="modal-contenu">
-					<div class="progress progress-striped active">
-						<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
-							<span class="sr-only">0/10 observations transmises</span>
-						</div>
-					</div>
-					<p id="chargement-txt" style="color:white;font-size:1.5em;">
-						Transfert des observations en cours...<br />
-						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
-						d'observations à transférer.
-					</p>
-				</div>
-			</div>
+			</footer>
 			<!-- Templates HTML -->
 			<div id="tpl-transmission-ok" style="display:none;">
 				<p class="msg">
 								  le formulaire de signalement d'erreurs</a>.
 				</p>
 			</div>
 			<!-- Fenêtres modales -->
-			<div id="projet-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
+			<div id="chargement" class="modal-fenetre" style="display:none;">
-				 aria-labelledby="projet-description-titre" aria-hidden="true">
+				<div id="chargement-centrage" class="modal-contenu">
-				<div class="modal-header">
+					<div class="progress progress-striped active">
+						<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
+							<span class="sr-only">0/10 observations transmises</span>
+						</div>
+					</div>
-					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+					<p id="chargement-txt" style="color:white;font-size:1.5em;">
+						Transfert des observations en cours...<br />
+						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
+						d'observations à transférer.
-					<h1 id="projet-description-titre">Les arbres têtards</h1>
+					</p>
 				</div>
+			</div>
+			<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
+				 aria-labelledby="projet-description-titre" aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+							</button>
+							<h1 id="projet-description-titre" class="modal-title">Les arbres têtards</h1>
+						</div>
+						<div class="modal-body">
+							<div class="dsc-imgs">
+								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/tetard_simple.png" alt="Illustration d'un arbre tétârd"/>
+							</div>
+							<div class="dsc-infos text-justify">
+								<h2>Qu'est-ce qu'un arbre têtard&nbsp;?</h2>
+								<p>
+									Les arbres taillés en têtard présentent une morphologie particulière du fait de l’entretien
+									qu'ils ont connu au fil des ans. Leur tronc, plus ou moins tortueux, supporte une « tête »
+									présentant de nombreux renflements. Cette partie de l’arbre s’est formée à la suite d’une
+									taille répétée, créant ainsi des bourrelets cicatriciels et donnant un aspect très
+									caractéristique à ces arbres.<br />
+									De nombreuses essences d’arbres peuvent être conduites en têtard. En Isère, les plus
+									fréquentes sont les saules, les frênes, les peupliers et aussi les mûriers.
+								</p>
+								<h2>Patrimoine naturel</h2>
+								<p>
+									Au fur et à mesure de la croissance et de la taille des arbres têtards, des <strong>cavités</strong> plus
+									ou moins importantes s’ouvrent au cœur du tronc. Ces abris naturels sont occupés par de
+									<strong>nombreuses espèces d’oiseaux et d’insectes</strong> s'y installant pour les conditions particulières
+									que ces cavités procurent.<br/>
+									Outres ses qualités de gîte et de source de nourriture, les trognes jouent
+									<strong>d'autres rôles écologiques</strong> en retenant les berges des
+									cours d'eau, limitant les crues, protégeant les cultures des vents, etc.
+								</p>
+								<h2>Patrimoine culturel</h2>
+								<p>
+									Ces arbres sont les témoins de pratiques agricoles ancestrales. Ils produisent la matière
+									première pour la <strong>vannerie</strong>, des <strong>liens flexibles</strong>
+									pour l'agriculture (lier les fagots, attacher la vigne et les fruitiers,...),
+									du <strong>fourrage</strong>, du <strong>bois de chauffage</strong>. De plus
+									ils étaient largement utilisés pour marquer le bornage des parcelles agricoles ainsi
+									que pour la <strong>sériciculture</strong>, afin de nourrir les vers à soie.<br />
+									Enfin ce sont aujourd'hui des <strong>éléments remarquables de nos paysages</strong>
+									qui participe à l'identité culturelle de nos territoires.
+								</p>
+								<p class="bg-success text-center">
+									<strong>
+										Afin d’œuvrer à leur conservation, nous avons besoin de vous :
+										transmettez nous vos observations.
+									</strong>
+								</p>
+							</div>
+						</div>
+						<div class="modal-footer dsc-clean">
+							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
-				<div class="modal-body">
+						</div>
+					</div>
+				</div>
+			</div>
+			<div id="taille-description" class="modal fade" tabindex="-1" role="dialog"
+				 aria-labelledby="taille-description-titre" aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+							</button>
+							<h1 id="taille-description-titre" class="modal-title">Les types de taille les plus courants</h1>
+						</div>
+						<div class="modal-body text-center">
+							<div class="taille-img thumbnail">
+								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tetard.png"
+									 alt="Illustration d'un arbre tétârd taillé en têtard ou trogne"/>
+								<div class="caption"><h3>En têtard ou trogne</h3></div>
+							</div>
+							<div class="taille-img thumbnail">
+								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tete_de_chat.png"
+									 alt="Illustration d'un arbre tétârd taillé en têtard de chat"/>
+								<div class="caption"><h3>En tête de chat</h3></div>
+							</div>
+							<div class="taille-img thumbnail">
+								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_ragosse.png"
+									 alt="Illustration d'un arbre tétârd taillé en ragosse"/>
+								<div class="caption"><h3>En ragosse</h3></div>
+							</div>
-				</div>
+						</div>
+						<div class="modal-footer dsc-clean">
+							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
-				<div class="modal-footer dsc-clean">
+						</div>
-					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
+					</div>
 				</div>
 			</div>

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/saisie/squelettes/arbres-tetards/arbres-tetards.tpl.html – Rev 2372 → 2373