-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (96 loc) · 4.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>« J'te parle du Nord ! »</title>
<link rel="shortcut icon" href="map.ico" type="image/x-icon">
<!-- jquery ui styles -->
<link rel="stylesheet" href="css/jquery_style.css">
<!-- link to leaflet styles -->
<link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css" />
<!-- link to custom styles -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- link to leaflet scripts -->
<script type="text/javascript" src="lib/leaflet/leaflet.js"></script>
<!-- link to jquery for geojson layer -->
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- load only needed js vars for passing to launchmap function-->
<script async type="text/javascript" src="js/initial_functions.js" defer></script>
<!-- so that IG works properly
<script async="" defer="defer" src="//platform.instagram.com/en_US/embeds.js"></script>
-->
<!-- jquery ui -->
<script async src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<!-- goatcounter -->
<script data-goatcounter="https://tryspaces.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6G5HES9YCZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-6G5HES9YCZ');
</script>
</head>
<body>
<ul class="navbar">
<li class="li-nav" id="title"><h1><a href="index.html">« J'te parle du Nord ! »</a></h1></li>
<!--<li class="li-nav"><a href="#12" onclick='fetchJsonObjectFromUrl(13)'>demo 13</a></li>-->
<!--
<li class="li-nav">
<div id="searchBar" class="ui-widget">
<label for="tags"></label>
<input id="tags" placeholder="Rechercher un lieu">
</div>
</li>
<select class="li-nav" name="mapdropdown" id="mapdropdown">
<option value="map0" selected="selected" disabled>Sélectionner une carte</option>
<option value='options1'>Leurs yeux (Affichages photos)</option>
<option value='options2'>Leurs lieux (Parcours commentés)</option>
</select>
-->
<select class="li-nav" name="mapdropdown" id="mapdropdown">
<option selected="selected" disabled>Sélectionner une carte</option>
</select>
<li class="li-nav"><a href="https://tryspaces.org/montreal/" target="_blank"><img id="logo" src="imgs/trymontreal.png"></a></li>
</ul>
<div id="leftPane" class="scroller grid-container hide">
</div>
<div id="mapid" class="scroller2">
<div id="splash-grid" class='splash-grid-container'>
<div id='splash-item1'>
<h2>
Bienvenue dans « J'te parle du Nord », un projet cartographique qui permet de rentrer dans le quotidien de cinq résidents de 18 à 23 ans du Nord-Est de l’arrondissement de Montréal-Nord.<br><br>
Pendant un peu plus d’une année nous nous sommes rencontrées pour mener une recherche collaborative et passer un autre message sur Montréal-Nord : le leur.<br><br>
</h2>
</div>
<div id='splash-item2'>
<h2>
<b>Deux cartes complémentaires sont sélectionnables en haut à gauche de l'écran</b>, elles restituent les représentations et pratiques de leurs espaces quotidiens : une carte dessinée par l’un d'eux, vous permet de parcourir des lieux du quotidien qu'ils ont photographiés sur Instagram (carte « leurs yeux ») et une cartographie web (carte « leurs lieux ») vous permet de suivre leur discours au gré d’une marche commentée enregistrée sur un cellulaire.<br><br>
Une fois selectionnée, <b>pour naviguer la carte</b>, vous devez utiliser les flèches situées en haut à droite de l’écran pour changer de lieu, vous pouvez également choisir de naviguer le quartier à travers le parcours d'un seul des personnages en cliquant sur son pseudonyme.<br><br>
</h2>
</div>
<div id='splash-item3'>
<p>
Ce projet a été réalisé au sein du partenariat Tryspaces par les chercheur.e.s Violaine Jolivet, Célia Bensiali-Hadaud et Chakib Khelifi. La plateforme cartographique a été conçue par Emory Shaw. Elle permet de naviguer les matériaux audios, visuels et narratifs colligés par les jeunes et chercheur.e.s au cours du projet.
</p>
</div>
<div id='splash-item4'>
</div>
<div id='splash-item5'>
<img name="slide1" width ="auto" height="300px"/>
</div>
</h2>
</div>
<!-- remove floating path legend
<div id='parent-div' class='some-div'>
<div class='some-div' id='legend'>
</div>
</div>
-->
</div>
<footer>
<p></p>
</footer>
</body>
</html>