a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify HTML site - link to beta

Browse Source
This commit is contained in:
Tom Russell 2018-11-21 22:52:15 +00:00
parent fe7f55ef67
commit 0a6e29b0fa
13 changed files with 32 additions and 645 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
html/faq.html
View File

@ -1,259 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FAQ | Colouring London</title>
<link rel="stylesheet" href="main.css?v=5ed692a6">
</head>
<body>
<a href="index.html" class="logo" id="top">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
</a>
<article class="main-col">
<h1 class="h1">Frequently Asked Questions</h1>
<dl>
<dt class="h2">Why have you set up the project?</dt>
<dd>
Initially we set out to collect and share numerical and categorical data
relating to the age and land use of buildings for research into the built environment and
demolition, but we soon realised that the opportunity existed to capture many
more types of data for use in all sorts of areas: from local history and
heritage to building conservation, sustainable urban planning, architecture and
the built environment.
</dd>
<dt class="h2">Who is it designed for?</dt>
<dd>
Anyone interested in London and its buildings and anyone interested in cities
and large-scale building attribute datasets.
</dd>
<dt class="h2">How will the data be used?</dt>
<dd>
We have some ideas, but we also hope to be surprised! Our main task is to
enable the collection, collation, visualisation and dissemination of the data.
We are very excited to see how they are used. To help stimulate discussion and
ideas we will include a data showcase which will allow anyone to share examples
of how they use Colouring London data, and to provide examples of how similar
datasets are being used elsewhere in the UK and around the world.
</dd>
<dt class="h2">Is there anywhere else you can access this type of information at building level?</dt>
<dd>
No, not for London as a whole. The Valuation Office Agency holds the most
comprehensive records for tax purposes, but these are restricted at the building
level, even for research within academia.
</dd>
<dt class="h2">Why aren’t you crowdsourcing textual information on the history of buildings?</dt>
<dd>
Our main focus is to collect data for modelling and statistical analysis, where
numerical and categorical data tends to be most useful. However, we will
collect links to other sites where text based information on a building can be
created and shared. The <a href="http://alpha.layersoflondon.org/"
target="_blank">Layers of London</a> project by the Institute for Historical
Research and the <a href="https://surveyoflondon.org/map/"
target="_blank">Histories of Whitechapel</a> project by the Survey of London
and the Bartlett Centre for Advanced Spatial Analysis (CASA) both have an
interest in text (and audio and photographs). We are working in close
collaboration with both projects.
</dd>
<dt class="h2">Why did you choose these categories of data?</dt>
<dd>
We have had conversations with many different groups, from academics and
teachers to community groups and built environment professionals, and found
many overlaps. We have limited ourselves to 12 main categories to keep things
simple, within which there are around thirty sub-categories. The prototype
testing period will allow us to see whether there are any key categories
missing&mdash;feedback is welcome.
</dd>
<dt class="h2">How will you deal with people who may want to disrupt the system? </dt>
<dd>
Our intention is to cultivate a community which can handle occasional
disruption, along the lines of other collaborative online projects. The site
will allow anyone to upload and edit data as they like and to go back and forth
over the details if necessary. Quantitative data on the building stock is, we
hope, not too controversial, other than perhaps for large developments. The
locations of utilities&rsquo; may be sensitive, but this is not within the main
scope of our data collection. For the &lsquo;Like me&rsquo; category, users
will have only one vote per building.
<dt class="h2">How do you deal with people who enter &lsquo;wrong&rsquo; information.</dt>
<dd>
Like Wikipedia, we as a community will have to keep re-editing, however edit
histories will help users see where data comes from, for example if it is
uploaded by a specialist body.
</dd>
<dt class="h2">What about the spaces in between buildings?</dt>
<dd>
We recognise the importance of this but in the first instance we will only
gather data on the buildings themselves. We will however include a sub-category
which records a building's position, i.e. mid-terrace, end-of-terrace,
semi-detached or detached.
</dd>
<dt class="h2">What do you do about multiple uses that the footprint doesn&rsquo;t record?</dt>
<dd>
We intend to record as many uses per building as necessary.
</dd>
<dt class="h2">What if several buildings are represented as a single outline?</dt>
<dd>
We rely on Ordnance Survey MasterMap for our building outlines, so if these are
not subdivided, we will need to attach extra data to the single outline, or
else consider altering the outlines manually. Some buildings have the opposite
problem, where there are multiple polygons for a single building. For example
some post-war estates have each of the balconies drawn separately. Our hope is
that the project will stimulate discussion with Ordnance Survey regarding a
more user friendly open version of the building outlines.
</dd>
<dt class="h2">Can this be rolled out to other cities?</dt>
<dd>
Yes, in principal. We hope that Colouring London will act as a proof of
concept. We rely on a sufficient set of building outlines to provide the basis
for all the building attribute data that we collect&mdash;for London, Ordnance
Survey and the Greater London Authority have supported us by providing
the MasterMap building outlines.
</dd>
<dt class="h2">Have you involved OpenStreetMap in the project?</dt>
<dd>
Yes, we had a discussion with OpenStreetMap contributors at an international
mapping conference in Leuven last year and would very much like the
OpenStreetMap community to become involved in the project. We hope that by
generating data of relevance to local areas we will also stimulate increased
interest in OpenStreetMap and in collecting building outline polygons as open
data.
</dd>
<dt class="h2">Will all the data collected be released as open data?</dt>
<dd>
Yes, all the building attributes which we collect will be available under an
open data license. However, we are limited by Ordnance Survey data licensing
and are not currently able to provide building outlines or geographical
coordinates. We will provide sufficient data for MasterMap users to link
building attributes to their own copies of the polygons.
</dd>
<dt class="h2">How can communities download the data with sufficient spatial information?</dt>
<dd>
We will collect details of building addresses, including postcodes, as a first
step towards providing location details. We will also look into the
possibility of creating and sharing geographical coordinates for our
dataset as open data, as suggested by a contributor, in collaboration with the
OpenStreetMap community.
</dd>
</dl>
</article>
<footer>
<a class="logo h2" href="index.html">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<div class="logotype">
<span>Colouring</span>
<span>London</span>
</div>
</a>
</footer>
<script src="main.js?v=1bbaabf2"></script>
</body>
</html>

BIN
html/fonts/gidole-regular-webfont.woff
View File

Binary file not shown.

BIN
html/fonts/gidole-regular-webfont.woff2
View File

Binary file not shown.

BIN
html/images/slide-1-welcome.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 136 KiB

BIN
html/images/slide-2-categories.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
html/images/slide-3-edit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 123 KiB

BIN
html/images/slide-4-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 188 KiB

BIN
html/images/slide-5-download.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
html/images/slide-6-showcase.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 126 KiB

BIN
html/images/slide-7-partners.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

206
html/index.html
View File

@ -42,204 +42,26 @@
<p>
How many buildings are there in London? What are their characteristics? Where
are they located and how do they contribute to the city? How adaptable are
they? How long will they last, and what are the environmental and
socio-economic implications of demolition?
Colouring London is a citizen science platform collecting information on every building in
London. We're building it at the Centre for Advanced Spatial Analysis, University College
London, to help make London more sustainable.
</p>
<p>
Colouring London is being designed to address these questions by crowdsourcing
and visualising information on London’s buildings. We’re releasing the
prototype for testing in the late summer. See the slideshow below for what it
will look like.
Can you help us? We're looking for volunteers of all ages and abilities to test the site
before we launch next year. Just add your knowledge to make the buildings colour.
</p>
<a class="btn btn-center" href="#sign-up">Sign up for updates</a>
<a class="btn btn-center btn-bold" href="https://beta.colouring.london">Start Testing Here!</a>
<div class="carousel">
<button class="carousel-control offscreen-text back">Back</button>
<ul class="carousel-content">
<li><img src="images/slide-1-welcome.png" alt="Welcome"></li>
<li><img src="images/slide-2-categories.png" alt="Categories"></li>
<li><img src="images/slide-3-edit.png" alt="Add/edit data"></li>
<li><img src="images/slide-4-view.png" alt="View maps"></li>
<li><img src="images/slide-5-download.png" alt="Download data"></li>
<li><img src="images/slide-6-showcase.png" alt="Showcase"></li>
<li><img src="images/slide-7-partners.png" alt="Partners"></li>
</ul>
<button class="carousel-control offscreen-text next">Next</button>
</div>
<a class="btn btn-center" href="files/colouring-london-online-exhibition.pdf">View online exhibition</a>
</div>
<hr/>
<section class="pale-grey">
<div class="main-col">
<p>
Colouring London is being designed and built by the Centre for Advanced Spatial
Analysis (CASA), University College London and funded by Historic England.
Ordnance Survey is providing building footprints required to collect the data,
facilitated by the GLA, and giving access to its API and technical support. It
will launch in 2019.
</p>
<ul class="logo-list">
<li><a href="https://www.ucl.ac.uk/bartlett/casa/"><img src="images/logo-casa.png" alt="Centre for Advanced Spatial Analysis (CASA)"></a></li>
<li><a href="https://www.ucl.ac.uk/"><img src="images/logo-ucl.png" alt="University College London"></a></li>
<li><a href="https://www.historicengland.org.uk/"><img src="images/logo-he.png" alt="Historic England"></a></li>
<li><a href="https://www.ordnancesurvey.co.uk/"><img src="images/logo-os.png" alt="Ordnance Survey"></a></li>
<li><a href="https://www.london.gov.uk/"><img src="images/logo-gla.png" alt="Supported by the Mayor of London"></a></li>
</ul>
<a href="supporters.html" class="btn">People and Supporting Organisations</a>
</div>
<hr/>
<div class="main-col">
<h2 class="h1">Data Categories</h2>
<p>
12 categories have been chosen in consultation with specialists working in a
range of areas, from energy analysis and sustainable urban planning and design
to building conservation, community planning, architecture and historical
research.
</p>
<ol class="data-category-list">
<li class="bold-yellow">
<h3 class="category">Location</h3>
<p class="description">Where is it?</p>
</li><!--
--><li class="bright-yellow">
<h3 class="category">Use</h3>
<p class="description">How is it used?</p>
</li><!--
--><li class="bold-orange">
<h3 class="category">Type</h3>
<p class="description">How was it first used?</p>
</li><!--
--><li class="red">
<h3 class="category">Age</h3>
<p class="description">When was it built?</p>
</li><!--
--><li class="pastel-pink">
<h3 class="category">Size</h3>
<p class="description">How big is it?</p>
</li><!--
--><li class="pastel-purple">
<h3 class="category">Construction</h3>
<p class="description">How is it built?</p>
</li><!--
--><li class="blue-grey">
<h3 class="category">Design/Build</h3>
<p class="description">Who built it?</p>
</li><!--
--><li class="bright-green">
<h3 class="category">Street Front</h3>
<p class="description">How does it relate to the street?</p>
</li><!--
--><li class="pastel-green">
<h3 class="category">Greenery</h3>
<p class="description">Is it near a tree or park?</p>
</li><!--
--><li class="bright-blue">
<h3 class="category">Protection</h3>
<p class="description">Is it designated?</p>
</li><!--
--><li class="pale-grey">
<h3 class="category">Demolitions</h3>
<p class="description">How many rebuilds on the site?</p>
</li><!--
--><li class="pale-brown">
<h3 class="category">Like Me?</h3>
<p class="description">Do you like it?</p>
</li>
</ol>
</div>
<hr/>
<div class="main-col">
<h2 class="h1">Once built, our platform will allow you to:</h2>
</div>
<section class="pale-pink">
<div class="main-col">
<h3 class="h2">View maps</h3>
<p>
To view the data, navigate to the ‘View Maps’ page and find the category that
interests you.
</p>
<img class="border-image" src="images/slide-4-view.png" alt="Preview of view maps page">
</div>
</section>
<section class="pale-yellow">
<div class="main-col">
<h3 class="h2">Add and edit data</h3>
<p>
Find a building and add or edit data for any of the 12 core categories.
</p>
<img class="border-image" src="images/slide-3-edit.png" alt="Preview of add/edit data page">
</div>
</section>
<section class="pale-orange">
<div class="main-col">
<h3 class="h2">See how people are using our data</h3>
<p>
Find links to visualisations and analysis, art projects and applications
relating to the evolution of London, housing, energy, planning, heritage and
history&mdash;or something we haven’t imagined yet.
</p>
<img class="border-image" src="images/slide-6-showcase.png" alt="Preview of data showcase page">
</div>
</section>
<section class="pale-green">
<div class="main-col">
<h3 class="h2">Download, remix and reuse</h3>
<p>
Access bulk downloads of data created through the project to use and reuse
under a liberal open data license. Let us know and we’ll feature showcase
projects on the Colouring London site.
</p>
<img class="border-image" src="images/slide-5-download.png" alt="Preview of download page">
</div>
</section>
<div class="main-col">
<form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post" target="popupwindow"
onsubmit="window.open('https://tinyletter.com/colouringlondon', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
<h3 class="h1">Keep in touch</h3>
<h3 class="h2">Keep in touch</h3>
<p>
Receive occasional newsletters about the project as it develops. You can
@ -257,9 +79,17 @@ projects on the Colouring London site.
</small>
<input class="btn btn-full" type="submit" value="Sign up for updates" />
</form>
</div>
</section>
<a class="btn btn-half" href="files/colouring-london-online-exhibition.pdf" target="_blank">View online exhibition</a><!--
--><a class="btn btn-half" href="faq.html">FAQ</a>
<div class="main-col">
<ul class="logo-list">
<li><a href="https://www.ucl.ac.uk/bartlett/casa/"><img src="images/logo-casa.png" alt="Centre for Advanced Spatial Analysis (CASA)"></a></li>
<li><a href="https://www.ucl.ac.uk/"><img src="images/logo-ucl.png" alt="University College London"></a></li>
<li><a href="https://www.historicengland.org.uk/"><img src="images/logo-he.png" alt="Historic England"></a></li>
<li><a href="https://www.ordnancesurvey.co.uk/"><img src="images/logo-os.png" alt="Ordnance Survey"></a></li>
<li><a href="https://www.london.gov.uk/"><img src="images/logo-gla.png" alt="Supported by the Mayor of London"></a></li>
</ul>
</div>
</article>

98
html/main.css
View File

@ -97,7 +97,6 @@ form .btn {
.btn {
background: #cecfd3;
border: 0;
border-radius: 1em;
margin: 0.5em 0;
padding: 0.5em 1em;
width: 100%;
@ -107,12 +106,25 @@ form .btn {
color: #000;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s;
}
.btn:hover,
.btn:focus,
.btn:active {
background-color: #bcbec0;
}
.btn-bold {
background: #fff;
border: 1px solid #222;
font-size: 1.25em;
box-shadow: #222 2px 2px 4px -2px;
}
.btn-bold:hover,
.btn-bold:focus,
.btn-bold:active {
background-color: #fff;
box-shadow: #222 2px 2px 4px -1px;
}
.btn.btn-half {
width: 49%;
margin-left: 0;
@ -172,7 +184,7 @@ form .btn {
background-color: #72b2fe;
}
.pale-grey {
background-color: #a6a6a7;
background-color: #efefef;
}
.pale-brown {
background-color: #918e6e;
@ -356,60 +368,6 @@ img {
text-indent: -999px;
}
/**
* Carousel
*/
.carousel {
position: relative;
}
.carousel-control {
display: none;
}
.carousel.active .carousel-control {
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 1.75em;
border: 0;
background-color: #fff;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.carousel.active .carousel-control:hover,
.carousel.active .carousel-control:active,
.carousel.active .carousel-control:focus {
border: 0;
outline: none;
opacity: 0.6;
}
.carousel button::-moz-focus-inner {
border:0;
}
.carousel-control.next {
right: -1em;
background-image: url('images/arrow-next.png');
}
.carousel-control.back {
left: -1em;
background-image: url('images/arrow-back.png');
}
.carousel-content {
padding: 0;
list-style: none;
}
.carousel-content li {
text-align: center;
}
.carousel.active .carousel-content li {
display: none;
}
.carousel.active .carousel-content li.current {
display: block;
}
/**
* Logos
*/
@ -427,31 +385,3 @@ img {
.logo-list li:first-child {
width: 4em;
}
/**
* Data categories
*/
.data-category-list {
padding: 0;
text-align: center;
list-style: none;
margin: 0 -0.75em;
}
.data-category-list li {
display: inline-block;
vertical-align: bottom;
width: 9em;
height: 9em;
margin: 0.375em;
padding: 0.1em;
}
.data-category-list .category {
text-align: center;
font-size: 1.5em;
margin: 1.4em 0 0.5em;
}
.data-category-list .description {
text-align: center;
font-size: 1em;
margin: 0;
}

114
html/supporters.html
View File

@ -1,114 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Supporting Organisations | Colouring London</title>
<link rel="stylesheet" href="main.css?v=5ed692a6">
</head>
<body>
<a href="index.html" class="logo" id="top">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<h1 class="logotype">
<span>Colouring</span>
<span>London</span>
</h1>
</a>
<article class="main-col">
<h1 class="h1">People and organisations</h1>
<h2 class="h2">Lead organisation</h2>
<p>Bartlett Centre for Advanced Spatial Analysis, University College London (UCL)</p>
<h2 class="h2">Core Partners</h2>
<p>Ordnance Survey</p>
<p>Historic England</p>
<p>Greater London Authority</p>
<h2 class="h2">Supporting organisations</h2>
<p>Institute of Historical Research, Layers of London</p>
<p>Royal Borough of Kensington and Chelsea</p>
<p>UCL Institute for Environmental Design and Engineering</p>
<p>UCL Survey of London</p>
<p>UCL Energy Institute</p>
<p><a href="https://www.ucl.ac.uk/resarch-it-services/research-software-development">
UCL Research Software Development Group
</a></p>
<h2 class="h2">Project Team</h2>
<p>Polly Hudson &ndash; Concept design and direction</p>
<p>Tom Russell &ndash; Platform design and development</p>
<p>Adam Dennett &ndash; Project supervision</p>
<p>Duncan Smith &ndash; Technical adviser</p>
<p>
We are very grateful to our supporting organisations for kindly
disseminating the Colouring London link to their memberships, offering bulk
uploads of data, and/or providing specialist advice. If you would like to
be included on our list please contact Polly Hudson at
<a href="mailto:p.a.hudson@ucl.ac.uk">p.a.hudson@ucl.ac.uk</a>.
</p>
</article>
<footer>
<a class="logo h2" href="index.html">
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<div class="logotype">
<span>Colouring</span>
<span>London</span>
</div>
</a>
</footer>
<script src="main.js?v=1bbaabf2"></script>
</body>
</html>