Add home content
authorJuliette Belin <juliette.belin@logilab.fr>
Fri, 20 Jan 2017 17:05:49 +0100
changeset 36 9956f59f05f9
parent 35 ff97c5bd6509
child 50 df90f18336c3
Add home content
data/cubes.sherpa.css
views/__init__.py
views/index.html
--- a/data/cubes.sherpa.css	Thu Jan 19 14:16:04 2017 +0100
+++ b/data/cubes.sherpa.css	Fri Jan 20 17:05:49 2017 +0100
@@ -3,10 +3,17 @@
 @font-face {
   font-family: 'OpenSans';
   src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
-  font-weight: 400;
+  font-weight: 300;
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'OpenSans';
+  src: url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
 body {
   font-family: 'OpenSans';
   font-size: 1.3em;
@@ -29,7 +36,7 @@
 .navbar-sherpa {
   background-color: #ffffff;
   border-radius: 0;
-  border-bottom: 1.2em solid #0b6ba8;
+  border-bottom: 1.2em solid #0d4e96;
 }
 
 .navbar-sherpa .logoSHERPA {
@@ -51,12 +58,12 @@
 }
 
 .navbar-sherpa h1 {
-  text-transform: uppercase;
   margin-bottom: 0px;
   width: 100%;
   padding: 15px;
   color: #626262;
   font-size: 2em;
+  font-style: italic;
 }
 
 .navbar-sherpa #search_box input {
@@ -67,7 +74,7 @@
 /*breadcrumbs */
 
 #breadcrumbs{
-  background-color: #0b6ba8;
+  background-color: #0d4e96;
   color: #fff;
   padding: 0;
   border-radius: 0;
@@ -89,7 +96,7 @@
 }
 
 #aside-main-left .panel-heading {
-  background-color: #0b6ba8;
+  background-color: #0d4e96;
   font-size: 1.2em;
 }
 
@@ -138,7 +145,7 @@
 
 #contentmain h1{
   text-align: center;
-  color: #0b6ba8;
+  color: #0d4e96;
   padding-bottom: 1.5em;
   padding-top: 0.5em;
 }
@@ -154,7 +161,7 @@
 }
 
 #contentmain .list-striped li:hover {
-  border-bottom: 1px solid #0b6ba8;
+  border-bottom: 1px solid #0d4e96;
   background-color: #f5f5f5;
 }
 
@@ -164,7 +171,7 @@
 }
 
 #contentmain .panel-heading {
-  background-color: #0b6ba8;
+  background-color: #0d4e96;
   font-size: 1.2em;
   border-radius: 0;
   color: white;
@@ -190,23 +197,23 @@
 
 /* table */
 
-#contentmain tr{
+#contentmain tr {
   border-bottom: 1px solid #dbdbdb;
 }
 
-#contentmain th{
+#contentmain th {
   font-weight: bold
 }
 
 /* tabs */
 
-#contentmain .nav-tabs li.active a{
-  border-bottom: 2px solid #0b6ba8;
+#contentmain .nav-tabs li.active a {
+  border-bottom: 2px solid #0d4e96;
   font-weight: bold;
   background-color: #f6f6f6;
 }
 
-#contentmain .nav-tabs li a{
+#contentmain .nav-tabs li a {
   color: #333;
   padding-right: 2em;
   padding-left: 2em;
@@ -215,7 +222,129 @@
   margin-bottom: 1px;
 }
 
-#contentmain .nav-tabs li:hover a{
-  border-bottom: 2px solid #0b6ba8;
+#contentmain .nav-tabs li:hover a {
+  border-bottom: 2px solid #0d4e96;
   background-color: #fff;
 }
+
+#contentmain p {
+  font-size: 1.1em;
+  line-height: 2em;
+  padding-bottom: 0;
+}
+
+#contentmain li {
+  font-size: 1.1em;
+  line-height: 2em;
+  text-align: justify;
+}
+
+/* home page */
+
+#contentmain .emphasis {
+  font-weight: bold;
+  color: #000;
+}
+
+#contentmain #accueil h1 {
+  padding-bottom: 0.1em;
+  margin: auto;
+  display: block;
+  width: 10em;
+  font-size: 2.5em;
+  margin-bottom: 2em;
+  margin-top: 2em;
+}
+
+#contentmain #accueil h2{
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: 1.5em;
+}
+
+#contentmain #accueil h3{
+  color: #333;
+  text-transform: uppercase;
+  text-align: center;
+  min-height: 50px;
+}
+
+#contentmain #accueil h2:after {
+  display: block;
+  margin: auto;
+  content: " ";
+  border-bottom: 1px solid #999999;
+  width: 150px;
+  padding-top: 0.5em;
+}
+
+#contentmain h2 {
+  margin-top: 3em;
+  font-size: 1.8em;
+  text-transform: uppercase;
+  color: #999999;
+}
+
+#accueil section {
+  overflow: auto;
+}
+
+
+#contentmain p {
+  text-align: justify;
+}
+
+#contentmain .utilisation {
+  padding-right : 5em;
+}
+
+#contentmain .utilisation h4 {
+  color: #0d4e96;
+  margin-top: 1.1em;
+}
+
+.iconWrapper{
+  text-align: center;
+}
+
+.icon-section {
+  font-size: 40px;
+}
+
+.underline {
+  position: relative;
+  bottom: 9px;
+  display: inline-block;
+  z-index: 1;
+  width: 5em;
+  height: 1px;
+  background: #626262;
+}
+
+.losange {
+  height: 1em;
+  width: 1em;
+  display: inline-block;
+  background: #0d4e96;
+  -ms-transform: rotate(45deg); /* Internet Explorer */
+  -moz-transform: rotate(45deg); /* Firefox */
+  -webkit-transform: rotate(45deg); /* Safari et Chrome */
+  -o-transform: rotate(45deg); /* Opera */
+}
+
+.mr {
+  margin-right: 20px;
+}
+
+.ml {
+  margin-left: 20px;
+}
+
+.titleUnderline {
+  text-align: center;
+  margin-bottom: 1.5em;
+}
+
+.icon-chevron-right:before {
+  content: "\ \2771";
+}
--- a/views/__init__.py	Thu Jan 19 14:16:04 2017 +0100
+++ b/views/__init__.py	Fri Jan 20 17:05:49 2017 +0100
@@ -16,6 +16,8 @@
 
 from logilab.common.decorators import monkeypatch
 from cubes.squareui.views.basetemplates import basetemplates
+from cubicweb.web.views import baseviews, startup
+from os.path import dirname, join
 
 # Bootstrap configuration.
 basetemplates.TheMainTemplate.twbs_container_cls = 'container-fluid'
@@ -50,3 +52,13 @@
         comp.render(w=w)
     w(u'''</div></div>
     </nav>''')
+
+class SherpaIndexView(startup.IndexView):
+
+    def call(self, **kwargs):
+        with open(join(dirname(__file__), 'index.html')) as stream:
+            self.w(stream.read().decode("UTF8"))
+
+
+def registration_callback(vreg):
+    vreg.register_and_replace(SherpaIndexView, startup.IndexView)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/views/index.html	Fri Jan 20 17:05:49 2017 +0100
@@ -0,0 +1,122 @@
+<div class="col-md-12" id="accueil">
+
+  <section id="presentation">
+      <h1>Le projet SHERPA</h1>
+      <div class="col-md-6 col-md-offset-3">
+        <p>
+        Le projet <span class="emphasis">SHERPA</span> a été conduit par le Service interministériel des Archives de France en 2016 afin de doter le <span class="emphasis">réseau des services publics d’archives</span> d’un outil disponible en ligne et permettant de <span class="emphasis">rédiger des profils d’archivage</span> conformes au <span class="emphasis">Standard</span> d’échange des données pour l’archivage, version 2.0.
+        <br />
+        Le projet SHERPA a été réalisé en collaboration avec le projet <a href="http://saem.e-bordeaux.org/">SAEM</a> auquel participent le Conseil départemental de la Gironde, Bordeaux Métropole et la Ville de Bordeaux, dans une optique de mutualisation des moyens.
+
+        SHERPA a été réalisé par la société LOGILAB. Son code source est librement réutilisable.<br />
+        Licence :
+        </p>
+      </div>
+  </section>
+
+  <section id="projetSherpa">
+    <h1>Mode d'emploi</h1>
+    <div id="utilisationWrapper">
+      <div class="utilisation col-md-4 col-sm-10 col-xs-12">
+        <div>
+          <h3>Formulaire complet &amp; formulaire simplifié</h3>
+
+          <div class="titleUnderline">
+            <span class="underline mr"></span>
+            <span class="losange"></span>
+            <span class="underline ml"></span>
+          </div>
+
+          <p>
+            SHERPA est basé sur la version 2.0 du Standard d’échange de données pour l’archivage.
+          </p>
+            <h4><span class="icon-right-dir"></span>Formulaire complet</h4>
+            <ul>
+              <li>propose l’<span class="emphasis">exhaustivité</span> des métadonnées du SEDA 2.0</li>
+              <li>ne permet pas d’exporter le profil créé dans les anciennes versions du SEDA, moins riches en métadonnées </li>
+            </ul>
+            <h4><span class="icon-right-dir"></span>Formulaire simplifié</h4>
+            <ul>
+              <li><span class="emphasis">facilite</span> sa prise en main </li>
+              <li><span class="emphasis">l'export</span> des profils simples dans toutes les versions du Standard (0.2, 1.0 et 2.0)</li>
+            </ul>
+            <p>
+              Ces profils simples sont nécessairement moins riches en métadonnées que les profils complets conformes au SEDA 2.0.
+            </p>
+        </div>
+      </div>
+
+      <div class="utilisation col-md-4 col-sm-10 col-xs-12">
+
+        <div>
+          <h3>Travail en référentiel</h3>
+          <div class="titleUnderline">
+            <span class="underline mr"></span>
+            <span class="losange"></span>
+            <span class="underline ml"></span>
+          </div>
+          <p>
+            Le SEDA 2.0 fonctionne, pour un certain nombre de valeurs, avec des référentiels externes à définir à l’extérieur du profil. SHERPA propose des zones permettant d’alimenter et de mettre à jour les agents et les vocabulaires utilisés dans les échanges. <br />
+            Le rédacteur peut gérer:
+            <ul>
+              <li>des listes de valeurs contrôlées référencées dans les bordereaux de transfert</li>
+              <li>des notices d’agents employées pour identifier les acteurs</li>
+            </ul>
+                Ces deux types de ressources centralisées peuvent être utilisés dans l’ensemble du corpus de profils.
+          </p>
+        </div>
+    </div>
+
+    <div class="utilisation col-md-4 col-sm-12">
+
+      <div>
+        <h3>Travail collaboratif</h3>
+        <div class="titleUnderline">
+          <span class="underline mr"></span>
+          <span class="losange"></span>
+          <span class="underline ml"></span>
+        </div>
+        <p>
+          Les modules référentiels d’Agents et de Vocabulaires sont communs à toute la communauté d’utilisateurs, de même que le corpus de profils. <br/>
+          <ul>
+            <li>Les utilisateurs connectés peuvent <span class="emphasis">consulter le travail des autres utilisateurs</span></li>
+            <li>Le rédacteur d’un profil peut le <span class="emphasis">modifier</span> à tout moment et étendre les droits de modifications à d’autres utilisateurs</li>
+            <li>L’ensemble des contenus est <span class="emphasis">accessible en lecture</span> à la communauté d’utilisateurs de SHERPA</li>
+            <li>Un utilisateur donner des droits d’écriture à un autre utilisateur sur les profils et les notices d’autorité qu’il a créés </li>
+            <li>Copier un profil existant afin de le modifier ne nécessite pas les droits en écriture</li>
+          </ul>
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="seda">
+  <h1> Le SEDA </h1>
+
+  <div class="col-md-6 col-md-offset-3">
+    <p>
+      Le standard d’échange de données pour l’archivage permet de modéliser les transactions d’un processus d’archivage (transfert, communication, élimination, modification et restitution) entre différents acteurs (service producteur, service versant, service d’archives et demandeur d’archives).
+      Il précise les types, l’ordre et la forme des messages échangés.
+      Il définit d’autre part les métadonnées à utiliser pour décrire, gérer et pérenniser l’information.
+          Plusieurs versions du standard ont été successivement publiées en mars 2006 (version 0.1), janvier 2010 (version 0.2), septembre 2012 (version 1.0) et décembre 2015 (version 2.0 conforme à la norme MEDONA).
+    </p>
+
+    <p>
+      Le standard est une déclinaison technique des pratiques archivistiques utilisées dans le monde papier. Les principes du SEDA reprennent donc largement les concepts métier :
+      <ul>
+        <li>Usage des bordereaux (versement, élimination) </li>
+        <li>l’application du contrôle scientifique et technique (transaction de demande d’autorisation)</li>
+        <li>la définition des acteurs ou l’apposition de règles de gestion (sorts finaux et communicabilité)</li>
+      </ul>
+    </p>
+
+    <p>
+      La description archivistique à plusieurs niveaux du SEDA est ainsi directement issue d’ISAD-G et de l’EAD, son modèle organisationnel adopte celui de la norme ISO 14721 (OAIS) et la préservation des informations techniques qu’il transporte empreinte les définitions présentes dans le modèle PREMIS. Le SEDA est techniquement structuré en XML.
+    </p>
+  </div>
+</section>
+
+
+
+</div>