-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtutorials_fr.html
173 lines (151 loc) · 13.7 KB
/
tutorials_fr.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Citadel on the Move</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="javascripts/scale.fix.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$("#toc").prepend("<strong>SUMMARY</strong>");
$("h2, h3, h4").each(function(i) {
var current = $(this);
current.attr("id", "title" + i);
$("#toc .body").append("<li title=\"" + this.nodeName.toLowerCase() + "\"><a id=\"link" + i + "\" href=\"#title" + i + "\">" + current.text() + "</a></li>");
});
});
</script>
</head>
<body>
<nav>
<ul>
<li><a href="http://citadelonthemove.github.io/index_fr.html">Retour à l'accueil' to Home page</a></li>
<li><a href="#tutorial1">Trouvez et préparez les données</a></li>
<li><a href="#tutorial2">Convertissez les données</a></li>
<li><a href="#tutorial3">Utilisez AGT pour créer une application</a></li>
<li><a href="#tutorial4">Forkez et modifiez une application</a></li>
<li class="lang"><a href="tutorials.html">EN</a></li>
</ul>
</nav>
<div class="wrapper">
<header>
<h1 class="header"><img src="images/Citadel-logo.png" alt= "Citadel on the Move" /></h1>
<p class="header">vous aide à tirer partie des <strong>Données Ouvertes</strong> pour créer des <strong>Applications Mobiles</strong> qui rendent votre ville plus "intelligente"</p>
<ul>
<li><a class="buttons" href="http://www.citadelonthemove.eu/"><i class="fa fa-link"></i> Site web</a></li>
<li><a class="buttons" href="https://github.com/CitadelOnTheMove"><i class="fa fa-github"></i> Profil GitHub</a></li>
<li><a class="buttons" href="https://github.com/CitadelOnTheMove/CitadelOnTheMove.github.io/issues"><i class="fa fa-github"></i> Votre avis !</a></li>
</ul>
</header>
<section>
<div id="toc"><ul class="body"></ul></div>
<a name="top" class="anchor" href="#top"></a>
<h2><a name="tutorial1" class="anchor" href="#tutorial1"><span class="octicon octicon-link"></span></a><i class="fa fa-rocket"></i> Tutoriel 1 : Trouvez et préparez les données</h2>
<p>The first step on getting data displayed on your mobile app is actually to get the data, and make it compliant with the converter.</p>
<h3>How to find data ?</h3>
<p>This can be achieved in various ways : you may already have some data you'd like to put on a map (such as a spreadsheet or a list of places), or you can get existing files on data portals. All you need is <strong>data that contains a location or an address</strong>.</p>
<ul>
<li>Easiest way is to check an open data portal, and get CSV or Excel files from there. You can start by browsing these portals :
<ul>
<li>Citadel Data index : http://www.citadelonthemove.eu/en-us/opendata/opendataindex.aspx</li>
<li>Belgium : http://data.gov.be/datasets</li>
<li>France : http://www.data.gouv.fr/</li>
<li>UK : http://data.gov.uk/data</li>
<li><strong>Tip:</strong> Try to search for "Data" + your city or location to check if there are data in your area</li>
</ul>
</li>
<li>You can also get a file from your city, association, or made by yourself. In that case you need to ensure that it doesn't contain personal data and that your are allowed to publish it (but that's another topic).</li>
</ul>
<h3>How should the data look like ?</h3>
<p>Once you've got your data file, you need to check that it meet the (few) pre-requisites so you will be able to convert it. Note this is really the trickiest part of the process, as having the rest of the process is pretty straight-forward.</p>
<ul>
<li>The <strong>data format should be whether CSV or XLS or XLSX (Excel)</strong>. If you have a spreadsheet or table data in an other format (or web), you may have to "Export" or "Save as" Excel or CSV format. Most softwares and also databases will allow you to do that, including online editors such as Google Spreadsheet or Zoho.</li>
<li>Ensure that you have some basic fields which will be helpful when you will want to display your data : a title and description for each element is fine to start (you could also include addresses, time information, or any other data). An nice field to add would be a "Category" field", as it will allow you to filter various data in the resulting app, and let user choose to display only markers for one specific category.</li>
<li>Ensure that you have <strong>geographical coordinates</strong> in your file, that is "latitude" " and "longitude" or "LatLong" or "Geo-something", which contains numbers like "48.12345", or "48.12345,2.32105". That may sound like a tricky part, but if you have only addresses there are many tools around the web that will let you easily and freely convert adresses to geographical coordinates : that process is called <em>geocoding</em>. Here we will assume that your data does have this information, as there are many tutorials around the web to help you add it to your data have it if it doesn't have it already.</li>
<li>Ensure that you have an "ID" for each line : an ID is basically a number which can be no more that a line number. All is required is having a different ID for each line, because only data with a unique ID will be displayed. So if there is no ID yet, just add a new column, name it "ID" or "unique number" (at your convenience), and put a line number in each field. If you're using Excel or LibreOffice, put "1" in first field, then write "=1+" in next field below, and select the "1" field. Then copy-paste that field to the whole column so that it automatically fills all IDs.</li>
</ul>
<h3>Troubleshooting tips</h3>
<h4>Character encoding</h4>
<ul>
<li>If you experience problems with accents (é, ù, ß, etc.), your file may be encoded in something else than UTF-8. What you need is to save it using UTF-8 encoding (also known as Unicode) which is the world standard, and that will make it compatible anywhere. The process may differ depending of used software, but it's usually available as an option while saving the file.</li>
<li>The dataset must be encoded in UTF8 (UCS Transformation Format – 8bit) to properly handle all characters. When using CSV, make sure to export using UTF8 or use an external tool before attempting to convert the file. When using Excel, use the xlsx format if possible since it is more up to date; otherwise save as CSV and ensure UTF8 coding from there.</li>
</ul>
<h4>Completeness of the file</h4>
<p>All of the fields required by the JSON schema must be filled in every row:</p>
<ul>
<li>An ID,</li>
<li>POI title,</li>
<li>POI category, </li>
<li>POI geographical coordinates, </li>
<li>POI address.</li>
</ul>
<h4>Latitude and Longitude</h4>
<p>The coordinates in the original file must be in one of two ways:</p>
<ol>
<li>Latitude and longitude can be in two separate columns. In this case, the Citadel JSON format can be “created” by first dragging “Latitude”, then dragging “Custom text” and typing in a space, finally dragging “Longitude”.</li>
<li>Otherwise the original file can already contain the correct formatting, namely latitude and longitude separated by a space. In this case you simply drag “Geographical Coordinates”.</li>
<p>Any other formatting (ie separated by a comma, a semicolon or whatever) will not work since it is not recognized by the Citadel JSON schema.</p>
<h4>Coordinate values</h4>
<p>The coordinates can be without a sign or with a minus sign, and can range from -90 (or -90.0 or -90.00) until 90 (or 90.0 or 90.00) and, in a similar fashion, from -180 to 180, with any number of decimals. Note that coherence with these values is checked during validation (not during conversion) and if there is an error it is not possible to download (or upload) the file.</p>
</ul>
<br />
<br />
<h2><a name="tutorial2" class="anchor" href="#tutorial2"><span class="octicon octicon-link"></span></a><i class="fa fa-rocket"></i> Tutoriel 2 : Convertissez les données</h2>
<h3>Converting process</h3>
<p>Use the <a href="http://www.citadelonthemove.eu/en-us/opendata/convertmydataset.aspx" target="_blank"><i class="fa fa-icon-external-link"></i> Citadel table to JSON Converter tool</a> to convert your CSV or XLS files into Citadel JSON that will be directly usable into your apps (see Converter tutorials, FAQ and How-tos)</p>
<p><a href="http://rbox.tv/citadel/converter/java/bd_restaurants_bars.mpg" target="_blank"><i class="fa fa-eye"></i> Watch a screencast that demonstrate how to use the converter (Quicktime required)</a></p>
<p>Note : there are some less visible features or useful tips to make the most out of the converter. Here are a few common tips, but please refer to the Community forum and FAQ for detailed documentation and discussion.</p>
<ul>
<li>The conversion process is a 2-step process : first step is the fields mapping, which associates the CSV columns to a list of fields used by the Citadel mobile application templates. The second step let's you complete the metadata fields (licence, author, etc.), and define in more details which fields should be used to display information on the mobile application. E.g.: This way you can use several field in marker popups by adding them to the Description field.</li>
<li>Geographical coordinates : if you have 2 separate "latitude" and "longitude" fields, you will need to "merge" them at step 2. To to that, drop the latitude field into the Geo coordinates, then drop the longitude field.</li>
</ul>
<h3>Sample files</h3>
<p>These files all come from real life situations in each of the four pilot cities. Each file introduces something a little new so users can learn different functionalities one at a time.</p>
</p>
<ul>
<li>1. <a href="examples/Training/1_Sortir_le_soir_a_Issy_v1.0.xlsx" target="_blank">Sortir le soir à Issy</a>: this is a classic demo file that converts smoothly, with geographical coordinates in one column</li>
<li>2. <a href="examples/Training/2_Galleries_in_Athens_v1.0.xlsx" target="_blank">Galleries in Athens</a>: this file (that required a bit of reworking since the original is full of null values) has latitude and longitude in two separate columns so you put first one then the other into Geographical Coordinates when converting.</li>
<li>3. <a href="examples/Training/3_Manchester_libraries_v1.0.csv" target="_blank">Manchester libraries</a>: this file is a CSV as published in the Manchester City Council website. It's missing a column with POI categories (a required field for the AGT), so you have to add it yourself; you simply drag "Custom text" over to "POI categories" and then manually type in "libraries".</li>
<li>4. <a href="examples/Training/4_Sportcentres_in_Ghent_v1.0.csv" target="_blank">Sportcentres in Ghent</a>: this is also a CSV from the Ghent open data hub. It has not only latitude and longitude (but we learned that with n. 2) but also street names and street numbers under separate colums. It will convert successfully if you only put "Straat" or even "Straat" followed by "nr" in the Address field, but the result is much better if you first put "Straat", then "Custom text" inserting a comma and space, and finally "nr".</li>
</ul>
<br />
<br />
<h2><a name="tutorial3" class="anchor" href="#tutorial3"><span class="octicon octicon-link"></span></a><i class="fa fa-rocket"></i> Tutoriel 3 : Utilisez AGT pour créer une application</h2>
<p>If you've got that far, this is the easiest part:</p>
<ol>
<li>Please log in to the platform. You can create an account in a minute if you don't have one yet.</li>
<li>Use the Publish your Data menu to publish your converted file on the platform.</li>
<li>Then click on Create an app, and fill the form :
<ol>
<li>select your desired city
<li>select the dataset you want to display ; note you can select multiple datasets, and switch cities in the process to get datasets from various cities</li>
<li>select the 2 main colors for your app interface</li>
<li>find a nice icon to represent your app</li>
<li>name and describe the app...</li>
</ol>
</li>
<li>Click on the submit button, and you're done ! It's that simple.</li>
</ol>
<p>You'll certainly want to repeat the process a few times to try different datasets, combine datasets, or get back to the first 2 steps to adjust your raw or converted data to your needs.</p>
<br />
<br />
<h2><a name="tutorial4" class="anchor" href="#tutorial4"><span class="octicon octicon-link"></span></a><i class="fa fa-rocket"></i> Tutoriel 4 : Forkez et modifiez une application</h2>
<p>Once you've played with the Application Generation Tool, you might want to get a bit further and probably host the application on your own server. This is were the templates matter : they basically provide the same kind of applications as the AGT, but you will be able to download them, and put them where you want. Furthermore, templates are fully reusable, so you can tweak them to include your town or organization logo, change the styles, interface, etc.</p>
<br />
<br />
</section>
<footer>
<p><small>Hébergé sur les <a href="http://pages.github.com">Pages GitHub</a> et librement adapté du thème Dinky</small></p>
</footer>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>