Skip to content

Commit

Permalink
update content page
Browse files Browse the repository at this point in the history
  • Loading branch information
@LucienMLD
LucienMLD committed Dec 6, 2018
1 parent 79b62c2 commit 4635b88
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 68 deletions.
4 changes: 2 additions & 2 deletions accompagnement.html
View file
Expand Up @@ -41,7 +41,7 @@ <h1 class="blue mb-5">Plusieurs accompagnements sont possibles</h1>
</div>

<div class="col-12">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<ul class="nav nav-tabs" id="Tab" role="tablist">
<li class="nav-item">
<a class="nav-link active text-dark" id="autodidacte-tab" data-toggle="tab" href="#autodidacte" role="tab"
aria-controls="autodidacte" aria-selected="false">Faire soi-même avec Etalab</a>
Expand Down Expand Up @@ -232,7 +232,7 @@ <h2 class="mb-3 mt-5 blue">Données des marchés publics</h2>
activeLink.addClass('active')
activeLink.attr('aria-selected', true)
$('html,body').animate({
scrollTop: $('#myTab').offset().top
scrollTop: $('#Tab').offset().top
}, 500);
})
</script>
Binary file added img/comprendre-demarches.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
162 changes: 96 additions & 66 deletions laconsultation.html
View file
Expand Up @@ -14,7 +14,7 @@
<a class="nav-link text-dark" id="profile-tab" data-toggle="tab" target="_blank" href="#pendant" role="tab" aria-controls="pendant" aria-selected="false">Détails</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" id="apres-tab" data-toggle="tab" target="_blank" href="#apres" role="tab" aria-controls="apres" aria-selected="false">Les démarches de parcticipation</a>
<a class="nav-link text-dark" id="apres-tab" data-toggle="tab" target="_blank" href="#apres" role="tab" aria-controls="apres" aria-selected="false">Les démarches de participation</a>
</li>
</ul>
</div>
Expand All @@ -24,10 +24,46 @@

<!--Préparez-->
<div class="tab-pane fade show active" id="avant" role="tabpanel" aria-labelledby="avant-tab">
<h1 class="blue mb-5">Préparez votre consultation</h1>
<div class="row">
<div class="col-md-8 col-12">
<h2 class="blue mb-3 mt-5">Réaliser une consultation nécessite une préparation</h2>
<h2 class="blue mb-3">Préparez votre consultation</h2>
<p>Réussir sa démarche de participation nécessite de prendre en compte les axes suivants :</p>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Les objectifs de la démarche</li>
<li><i class="fas fa-angle-right blue"></i> Le périmètre de la démarche</li>
<li><i class="fas fa-angle-right blue"></i> La documentation existante</li>
<li><i class="fas fa-angle-right blue"></i> Le ou les outils à utiliser</li>
<li><i class="fas fa-angle-right blue"></i> Le plan de communication</li>
<li><i class="fas fa-angle-right blue"></i> L'engagement vis à vis du consulté</li>
</ul>
<h2 class="blue mb-3 mt-5">Remplissez en équipe ce kit de cadrage de votre consultation</h2>
<p>Organisez un atelier avec toutes les personnes concernées :</p>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> équipe "cœur"</li>
<li><i class="fas fa-angle-right blue"></i> commanditaire</li>
<li><i class="fas fa-angle-right blue"></i> équipe communication...</li>
</ul>
<p>Etalab et la DITP peuvent vous aider à animer cet atelier <a href="/accompagnement.html">sur demande</a></p>
</div>
<div class="py-3 col-md-4 col-12 wide column container-kit-cadrage d-flex justify-content-center align-items-center">
<div>
<div class="kit-cadrage">
<i class="fas fa-file-download"></i>
<span>Téléchargez le kit de cadrage (ppt - 32ko)</span>
</div>
<div>
<a href="/uploads/atelier-adrage.pptx" class="btn btn-primary btn-lg"><i class="fas fa-chevron-right"></i> Kit de cadrage</a>
</div>
</div>
</div>
</div>
</div>

<!--Détails-->
<div class="tab-pane fade" id="pendant" role="tabpanel" aria-labelledby="pendant-tab">
<div class="row">
<div class="col-md-10 col-12">
<h2 class="blue mb-3">Réaliser une consultation nécessite une préparation</h2>
<p>Cela nécessite certains pré-requis :</p>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Un portage hiérarchique et politique clair</li>
Expand All @@ -37,19 +73,10 @@ <h2 class="blue mb-3 mt-5">Réaliser une consultation nécessite une préparatio
<p>Sachez que ce n’est pas simplement de la communication, des résultats sont attendus de la part de vos
commanditaires et participants, n’hésitez pas à bien vous entourer !</p>
</div>
<div class="py-3 col-md-4 col-12 wide column container-kit-cadrage d-flex justify-content-center align-items-center">
<div class="kit-cadrage">
<i class="fas fa-file-download"></i>
<span>Téléchargez le kit de cadrage (ppt - 32ko)</span>
</div>
<div>
<a href="/uploads/atelier-adrage.pptx" class="btn btn-primary btn-lg"><i class="fas fa-chevron-right"></i> Kit de cadrage</a>
</div>
</div>
</div>
<div>
<h2 class="blue mb-3 mt-5">Définissez les objectifs, le périmètre et les moyens de votre consultation</h2>
<div class="">
<div class="row mt-5">
<div class="col-md-10">
<h2 class="blue mb-3">Définissez les objectifs, le périmètre et les moyens de votre consultation</h2>
<h4>Comment bien préparer le cadre de votre consultation ? </h4>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Pensez à vos objectifs et à vos engagements</li>
Expand All @@ -74,23 +101,22 @@ <h4>Quel plan de communication élaborer ? </h4>
</ul>
</div>
</div>
</div>

<!--Détails-->
<div class="tab-pane fade" id="pendant" role="tabpanel" aria-labelledby="pendant-tab">
<div>
<h2 class="blue mb-3">Au lancement de la consultation, il ne faut pas relâcher vos efforts !</h2>
<p>Il est important de vous concentrer sur les actions suivantes :</p>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Mobiliser les participants pour créer une véritable communauté</li><li><i class="fas fa-angle-right blue"></i> Identifier les acteurs clés sur votre sujet de consultation et mobilisez les<br></li>
<li><i class="fas fa-angle-right blue"></i> Être réactif lors des échanges et garantir le respect des règles de la modération en tout temps</li>
<li><i class="fas fa-angle-right blue"></i> S'accorder du temps pour réaliser un reporting de qualité, si nécessaire</li>
</ul>
<div class="row mt-4">
<div class="col-md-10 col-12">
<h2 class="blue mb-3">Au lancement de la consultation, il ne faut pas relâcher vos efforts !</h2>
<p>Il est important de vous concentrer sur les actions suivantes :</p>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Mobiliser les participants pour créer une véritable communauté</li><li><i class="fas fa-angle-right blue"></i> Identifier les acteurs clés sur votre sujet de consultation et mobilisez les<br></li>
<li><i class="fas fa-angle-right blue"></i> Être réactif lors des échanges et garantir le respect des règles de la modération en tout temps</li>
<li><i class="fas fa-angle-right blue"></i> S'accorder du temps pour réaliser un reporting de qualité, si nécessaire</li>
</ul>
</div>
</div>

<div class="consultation-points">
<h2 class="blue mb-3 mt-5">Impliquez vos participants, soyez réactifs pour des échanges dynamiques</h2>
<div class="consultation-elements">
<div class="consultation-points row mt-4">
<div class="consultation-elements col-md-10 col-12">
<h2 class="blue mb-3">Impliquez vos participants, soyez réactifs pour des échanges dynamiques</h2>
<h4>Quelles ressources fournir à vos participants ?</h4>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Élaborez une documentation qui servira à vos participants dans un souci de compréhension : lois, communiqués de presse, MOOCs, éléments objectifs du contexte, charte de la participation, etc...</li>
Expand Down Expand Up @@ -118,22 +144,20 @@ <h4>Que faire en cours de consultation ?</h4>
</ul>
</div>
</div>
</div>

<!--Les démarches de parcticipation-->
<div class="tab-pane fade" id="apres" role="tabpanel" aria-labelledby="apres-tab">
<div>
<h2 class="blue mb-3">La clôture, c’est toujours le moment charnière !</h2>
<p>Il faut tenir ses engagements et communiquer en fonction afin de démontrer qu'on respecte bien la promesse tenue aux participants. Pour cela, il vous est conseillé de :</p>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Communiquer sur les suites réelles de la consultation</li>
<li><i class="fas fa-angle-right blue"></i> Expliciter vos arbitrages</li>
</ul>
<div class="row mt-4">
<div class="col-md-10 col-12">
<h2 class="blue mb-3">La clôture, c’est toujours le moment charnière !</h2>
<p>Il faut tenir ses engagements et communiquer en fonction afin de démontrer qu'on respecte bien la promesse tenue aux participants. Pour cela, il vous est conseillé de :</p>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Communiquer sur les suites réelles de la consultation</li>
<li><i class="fas fa-angle-right blue"></i> Expliciter vos arbitrages</li>
</ul>
</div>
</div>

<div>
<h2 class="blue mb-3 mt-5">Remerciez vos participants et tenez-les au courant des suites de votre consultation</h2>
<div>
<div class="row mt-4">
<div class="col-md-10 col-12">
<h2 class="blue mb-3">Remerciez vos participants et tenez-les au courant des suites de votre consultation</h2>
<h4>Que faire à la fin de la consultation ? </h4>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i> Remerciez les participants et annoncez-leur les suites prévues</li>
Expand All @@ -152,30 +176,36 @@ <h4>Que faire à la fin de la consultation ? </h4>
</div>
</div>
</div>
</div>

<div class="col-12">
<h2 class="blue mb-3 mt-5">Comprendre les démarches de participation</h2>
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.gouvernement.fr/sites/default/files/contenu/piece-jointe/2016/12/coepia_consultations_ouvertes_sur_internet_2016.pdf">Rapport du COEPIA (Nov 2016) : Consultations ouvertes sur internet organisées par les administrations</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.participation-et-democratie.fr/sites/default/files/charte_participation_du_public.pdf">CGDD (Sept 2016) : Charte de la participation du public</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://participation-et-democratie.fr/fr/system/files/23Romain%20Badouard.pdf">Travaux de recherche : Analyse critique des consultations en ligne menées par l'Union Européenne</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.participation-et-democratie.fr/sites/default/files/atelier_2-2_romain_badouard.pdf">Travaux de recherche : Les publics de la consultation</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.cairn.info/load_pdf.php?ID_ARTICLE=PARTI_001_0156">Travaux de recherche : Participation en ligne et démocratie</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="https://www.institutions-democratiques.gouv.qc.ca/institutions-democratiques/documents/cadre-ref-participation-publique.pdf">Ailleurs : Cadre de référence de la participation publique au Québec</a>
</li>
</ul>
<!--Les démarches de parcticipation-->
<div class="tab-pane fade" id="apres" role="tabpanel" aria-labelledby="apres-tab">
<div class="row">
<div class="col-12">
<h2 class="blue mb-3">Comprendre les démarches de participation</h2>
<img class="w-100 my-5" src="/img/comprendre-demarches.png" alt="explication des démarches">
<ul class="list-unstyled ml-4">
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.gouvernement.fr/sites/default/files/contenu/piece-jointe/2016/12/coepia_consultations_ouvertes_sur_internet_2016.pdf">Rapport du COEPIA (Nov 2016) : Consultations ouvertes sur internet organisées par les administrations</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.participation-et-democratie.fr/sites/default/files/charte_participation_du_public.pdf">CGDD (Sept 2016) : Charte de la participation du public</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://participation-et-democratie.fr/fr/system/files/23Romain%20Badouard.pdf">Travaux de recherche : Analyse critique des consultations en ligne menées par l'Union Européenne</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.participation-et-democratie.fr/sites/default/files/atelier_2-2_romain_badouard.pdf">Travaux de recherche : Les publics de la consultation</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="http://www.cairn.info/load_pdf.php?ID_ARTICLE=PARTI_001_0156">Travaux de recherche : Participation en ligne et démocratie</a>
</li>
<li><i class="fas fa-angle-right blue"></i>
<a target="_blank" href="https://www.institutions-democratiques.gouv.qc.ca/institutions-democratiques/documents/cadre-ref-participation-publique.pdf">Ailleurs : Cadre de référence de la participation publique au Québec</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Expand Down

0 comments on commit 4635b88

Please sign in to comment.