faubourg-carte.git

ajout des informations
Parent 04bb71a
davvalent

davvalent commited on 2023-03-24 20:47:50
Showing 2 changed files, with 80 additions and 15 deletions.

css/style.css
View file @ be17d7d
... ... 
@@ -2,16 +2,36 @@ html,
2 2 
 body {
3 3 
   height: 100%;
4 4 
   overflow: hidden;
5 
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
6 
+  color: #333333;
5 7 
 }
6 8 
 body {
7 9 
   margin: 0;
8 10 
 }
9 11 
 header div#information-header {
10 12 
   display: none;
13 
+  padding: 10px;
14 
+}
15 
+header div#information-header h1 {
16 
+	margin: 0;
17 
+}
18 
+header div#information-header section {
19 
+  display: flex;
20 
+}
21 
+div.header-column {
22 
+  flex: 1;
23 
+  padding: 10px 20px 10px 0;
24 
+}
25 
+div.header-column h2 {
26 
+  margin-top: 0;
27 
+}
28 
+div.header-column p,
29 
+div.header-column ul {
30 
+	line-height: 1.25;
11 31 
 }
12 32 
 header div#application-header {
13 33 
   height: 40px;
14 
-  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
34 
+  box-shadow: 0 3px 3px rgba(0,0,0,0.4);
15 35 
   z-index: 500;
16 36 
   position: relative;
17 37 
 }
... ... 
@@ -33,12 +53,12 @@ header div#application-header a#icon {
33 53 
   right: 0;
34 54 
   top: 0;
35 55 
   color: #333333;
36 
-  width: 46px;
56 
+  width: 48px;
37 57 
   height: 40px;
38 58 
   margin-right: 10px;
39 59 
   font-size: x-large;
40 
-  padding-top: 5px;
41 
-  padding-left: 9px;
60 
+  text-align: center;
61 
+  padding-top: 6px;
42 62 
   box-sizing: border-box;
43 63 
 }
44 64 
 main {
index.html
View file @ be17d7d
... ... 
@@ -1,5 +1,6 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-CA">
3 
+
3 4 
 <head>
4 5
5 6 
   <meta charset="utf-8" />
... ... 
@@ -20,18 +21,64 @@
20 21
21 22 
   <!-- Custom rules -->
22 23 
   <link rel="stylesheet" href="css/style.css" />
23 
-  <!-- <script src="js/window.js"></script> -->
24 24
25 25 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
26 26
27 27 
 </head>
28 
+
28 29 
 <body>
29 30 
   <header>
30 31 
     <div id="information-header">
31 
-      <p>FOO BAR</p>
32 
+      <h1>Plan interactif du Faubourg à m’lasse</h1>
33 
+      <section>
34 
+        <div class="header-column">
35 
+          <h2><abbr title="Système d’information gégraphique">SIG</abbr> historique et <abbr
36 
+              title="Ressource description framework">RDF</abbr></h2>
37 
+          <p>Le plan interactif du Faubourg à m’lasse (PIFM) est un prototype de système d’information géographique historique (SIGH) basé sur un ensemble de documents d’archives montréalais. Il intègre un jeu de données ouvertes et liées en se branchant directement sur l’API d’un entrepôt <abbr title="Ressource description framework">RDF</abbr>.</p>
38 
+          <p><!-- La principale retombée dudit projet consiste permettre la formalisation du lien entre le plan d’expropriation et les photographies qui y sont associées grâce au numéro d’inventaire assigné à chaque document par les fonctionnaires de la ville de Montréal. -->
39 
+          Le <abbr title="Plan interactif du Faubourg à m’lasse">PIFM</abbr> permet l’exploration de la recension photographique effectuée par la ville de Montréal en 1963 dans le cadre d’une procédure d’expropriation massive liée à la construction de la Maison de Radio-Canada. Les 56 bâtiments actuellement géolocalisés sont associés à n photographies sur un total de 1526 documents.</p>
40 
+          <p>Photographies et plan :</p>
41 
+          <ul>
42 
+            <li>Quadrilatère rue Amherst, rue Papineau, rue Craig et rue Dorchester (Radio-Canada). (1963). Fonds du service des affaires institutionnelles (<a href="https://archivesdemontreal.ica-atom.org/c196-quartier-demoli-radio-canada">VM094, SY, SS1, SSS3, C196</a>), Archives de la Ville de Montréal.</li>
43 
+            <li>licence <a href="https://creativecommons.org/licenses/by-nc-sa/2.5/ca/deed.fr">CC BY-NC-SA 2.5 CA</a></li>
44 
+          </ul>
45 
+        </div>
46 
+        <div class="header-column">
47 
+          <h2>À propos</h2>
48 
+          <h3>Réalisation</h3>
49 
+          <ul>
50 
+            <li>programmation de l’application et géoréférencement du plan : David Valentine</li>
51 
+            <li>dépouillement des archives et géolocalisation des bâtiments : Yannic Rozon</li>
52 
+          </ul>
53 
+          <h3>Données</h3>
54 
+          <p>Le <abbr title="Plan interactif du Faubourg à m’lasse">PIFM</abbr> utilise les données du <a href="https://qdmtl.ca">projet <abbr title="Quartiers disparus de Montréal">QDMTL</abbr></a> :</p>
55 
+          <ul>
56 
+            <li><a href="http://qdmtl.ca/sparql/">interface de requête SPARQL</a></li>
57 
+            <li><a href="http://qdmtl.ca/sparql/endpoint.php">point d’accès</a></li>
58 
+          </ul>
59 
+          <h3>Contact</h3>
60 
+          <p>Questions ou commentaires? N’hésitez pas :</p>
61 
+          <ul>
62 
+            <li><a href="mailto:david.valentine@umontreal.ca">david.valentine@umontreal.ca</a></li>
63 
+            <li><a href="mailto:yannicrozon@gmail.com">yannicrozon@gmail.com</a></li>
64 
+          </ul>
65 
+        </div>
66 
+        <div class="header-column">
67 
+          <h2>Notes techniques</h2>
68 
+          <p>Version : 0.1 - avril 2023</p>
69 
+          <p>Cette application n’a pas été testée sur de petits écrans (tablette et appareils mobiles).</p>
70 
+          <p>Dimensions minimales recommandées :</p>
71 
+          <ul>
72 
+            <li>largeur : 1200px</li>
73 
+            <li>hauteur : 335px</li>
74 
+          </ul>
75 
+          <p>Feuille de route :</p>
76 
+          <ul><li><a href="https://github.com/qdmtl/pifm">https://github.com/qdmtl/pifm/</a></li></ul>
77 
+        </div>
78 
+      </section>
32 79 
     </div>
33 80 
     <div id="application-header">
34 
-      <h1>Plan interactif du Faubourg à m’lasse <span>v0.1</span></h1>
81 
+      <h1><abbr title="Plan interactif du Faubourg à m’lasse">PIFM</abbr> <span>v0.1</span></h1>
35 82 
       <a href="#" id="icon" onclick="displayInformation()">
36 83 
         <i class="fa fa-bars"></i>
37 84 
       </a>
... ... 
@@ -42,17 +89,15 @@
42 89 
   </main>
43 90 
   <script src="js/main.js" type="module"></script>
44 91 
   <script>
45 
-  function myFunction() {
46 
-    const x = document.getElementById("myLinks");
47 
-    if (x.style.display === "block") {
48 
-      x.style.display = "none";
92 
+    function displayInformation() {
93 
+      const information = document.querySelector("#information-header");
94 
+      if (information.style.display == "block") {
95 
+        information.style.display = "none";
49 96 
       } else {
50 
-      x.style.display = "block";
51 
-    }
97 
+        information.style.display = "block";
52 98 
       }
53 
-  function displayInformation() {
54 
-    alert("foobar");
55 99 
     }
56 100 
   </script>
57 101 
 </body>
102 
+
58 103 
 </html>
59 104 
\ No newline at end of file
60 105