Subversion Repositories eFlore/Applications.cel

Compare Revisions

No changes between revisions

Ignore whitespace Rev 2372 → Rev 2373

/trunk/widget/modules/saisie/squelettes/arbres-tetards/arbres-tetards.tpl.html
21,6 → 21,8
<!-- 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://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>
33,15 → 35,9
<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>
121,9 → 117,7
<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">
139,26 → 133,16
<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.
</p>
<p>
Ces arbres, témoins d’anciennes pratiques agricoles, embellissent le paysage,
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 />
Victimes de la modernisation de l’agriculture et de l’urbanisation des zones
Les <a data-toggle="modal" data-target="#projet-description">arbres têtards ou trognes</a>,
sont des arbres taillés exploités depuis des siècles. Par leurs histoires et
leurs richesses écologiques, ils font partis de notre patrimoine.<br />
Victimes des changements de pratiques agricoles et de l’urbanisation des zones
rurales, ces arbres remarquables disparaissent !
</p>
<p>
165,11 → 149,11
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.
306,15 → 290,17
<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="input-group">
<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
title="Permet de centrer la carte sur le lieu recherché."
placeholder="Centrer la carte sur un lieu..."/>
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<div class="col-md-12">
<div class="input-group">
<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
title="Permet de centrer la carte sur le lieu recherché."
placeholder="Centrer la carte sur un lieu..."/>
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</div>
</form>
717,15 → 703,22
Type de taille
</label>
<div class="col-sm-8">
<select id="taille-type" class="form-control obs-chp-etendu"
name="arbreTetardTailleType"
data-label="Type de taille">
<option selected value="">Sélectionnez le type de taille</option>
<option value="trogne">Trogne</option>
<option value="tête de chat">Tête de chat</option>
<option value="émonde">Émonde</option>
<option value="autre">Autre, précisez le type de taille dans les notes</option>
</select>
<div class="input-group">
<select id="taille-type" class="form-control obs-chp-etendu"
name="arbreTetardTailleType"
data-label="Type de taille">
<option selected value="">Sélectionnez le type de taille</option>
<option value="trogne">Trogne</option>
<option value="tête de chat">Tête de chat</option>
<option value="émonde">Émonde</option>
<option value="autre">Autre, précisez le type de taille dans les notes</option>
</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>
 
875,22 → 868,6
<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>
 
<!-- Templates HTML -->
<div id="tpl-transmission-ok" style="display:none;">
<p class="msg">
922,18 → 899,116
</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;">
<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>
 
<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="projet-description-titre" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 id="projet-description-titre">Les arbres têtards</h1>
<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>
</div>
</div>
<div class="modal-body">
</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 class="modal-footer dsc-clean">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
</div>
</div>
</div>
<div class="modal-footer dsc-clean">
<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
</div>
</div>
 
<!-- Stats : Google Analytics-->
/trunk/widget/modules/saisie/squelettes/arbres-tetards/css/arbres-tetards.css
400,6 → 400,8
 
/*+--------------------------------------------------------------------------------------------------------+*/
/*Modal description */
 
/* Modal : projet description */
.dsc-imgs {
max-width: 800px;
margin:0 auto;
410,7 → 412,29
.dsc-clean {
clear:both;
}
 
/* Modal : taille description */
.taille-img {
position: relative;
float:left;
width:300px;
height: 450px;
margin-left: 10px;
}
.taille-img img {
margin: 0 auto;
}
.taille-img .caption {
position: absolute;
bottom:0;
width:300px;
text-align: center;
}
 
@media (min-width: 600px) and (max-width: 800px) {
.taille-img, .taille-img .caption {
width: 190px;
}
.dsc-imgs {
width: 600px;
}
422,21 → 446,32
}
}
@media (min-width: 801px) and (max-width: 1359px) {
.modal {
#taille-description .modal-content {
width:800px;
margin-left:-400px;
margin-left: -100px;
}
.taille-img, .taille-img .caption {
width: 240px;
}
#projet-description .modal-content {
width:800px;
margin-left: -100px;
}
.dsc-imgs {
width: 780px;
}
.dsc-infos {
width: 700px;
width: 750px;
}
}
@media (min-width: 1360px) {
.modal {
#taille-description .modal-content {
width:980px;
margin-left: -175px;
}
#projet-description .modal-content {
width:1360px;
margin-left:-680px;
margin-left: -380px;
}
.dsc-imgs {
float:left;
443,9 → 478,9
}
.dsc-infos {
float:left;
max-width: 500px;
margin-left: 50px;
max-width: 700px;
}
 
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Correction style CSS Bootstrap */
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/tetard_simple.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/tetard_simple.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_ragosse.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_ragosse.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tetard.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tetard.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tete_de_chat.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
/trunk/widget/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tete_de_chat.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property