2018-08-01 12:58:02 -04:00
|
|
|
|
<!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>Colouring London</title>
|
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
|
|
|
|
|
|
<link rel="stylesheet" href="main.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="beta-banner" role="alert" >
|
|
|
|
|
|
|
2018-08-09 08:38:53 -04:00
|
|
|
|
Welcome to the prototype (beta) site for Colouring London. <a
|
2018-08-01 12:58:02 -04:00
|
|
|
|
href="http://colouringlondon.org">Find out more.</a>
|
|
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<header class="main-header">
|
2018-08-09 08:38:53 -04:00
|
|
|
|
<nav class="navbar navbar-light navbar-expand-md">
|
2018-08-01 12:58:02 -04:00
|
|
|
|
<a href="index.html" class="logo navbar-brand" id="top">
|
2018-08-09 08:38:53 -04:00
|
|
|
|
<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>
|
2018-08-01 12:58:02 -04:00
|
|
|
|
</a>
|
|
|
|
|
|
<ul class="navbar-nav ml-auto">
|
|
|
|
|
|
<li class="nav-item"><a href="maps.html" class="nav-link">View Maps</a></li>
|
|
|
|
|
|
<li class="nav-item active"><a href="about.html" class="nav-link">About</a></li>
|
|
|
|
|
|
<li class="nav-item"><a href="404.html" class="nav-link">Log in</a></li>
|
|
|
|
|
|
<li class="nav-item"><a href="404.html" class="nav-link">Sign up</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<main class="beta">
|
|
|
|
|
|
<article>
|
|
|
|
|
|
<div class="main-col">
|
|
|
|
|
|
<h1 class="h2">Can you help us capture information on every building in London?</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<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?
|
|
|
|
|
|
|
|
|
|
|
|
</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.
|
|
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
2018-08-09 08:48:18 -04:00
|
|
|
|
<div class="buttons-container btn-center">
|
|
|
|
|
|
<a class="btn btn-outline-dark btn-lg" href="#sign-up">Sign up for updates</a>
|
|
|
|
|
|
</div>
|
2018-08-01 12:58:02 -04:00
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
2018-08-09 08:48:18 -04:00
|
|
|
|
<div class="buttons-container btn-center">
|
|
|
|
|
|
<a class="btn btn-outline-dark btn-lg" href="files/colouring-london-online-exhibition.pdf">View online exhibition</a>
|
|
|
|
|
|
</div>
|
2018-08-01 12:58:02 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<hr/>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
</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—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>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
|
|
|
|
Receive occasional newsletters about the project as it develops. You can
|
|
|
|
|
|
read previous newsletters in our <a
|
|
|
|
|
|
href="https://tinyletter.com/colouringlondon/archive"
|
|
|
|
|
|
target="_blank">newsletter archive</a>.
|
|
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<label for="tlemail">Enter your email address:</label>
|
|
|
|
|
|
<input class="form-control" type="email" name="email" id="tlemail" placeholder="name@example.com" />
|
|
|
|
|
|
<input type="hidden" value="1" name="embed"/>
|
|
|
|
|
|
<small class="form-text text-muted">
|
|
|
|
|
|
<a href="https://tinyletter.com" target="_blank">powered by TinyLetter</a>.
|
|
|
|
|
|
We'll never share your email address.
|
|
|
|
|
|
</small>
|
2018-08-09 08:48:18 -04:00
|
|
|
|
<div class="buttons-container">
|
|
|
|
|
|
<input class="btn btn-outline-dark btn-block" type="submit" value="Sign up for updates" />
|
|
|
|
|
|
</div>
|
2018-08-01 12:58:02 -04:00
|
|
|
|
</form>
|
|
|
|
|
|
|
2018-08-09 08:48:18 -04:00
|
|
|
|
<div class="buttons-container">
|
|
|
|
|
|
<a class="btn btn-outline-dark btn-half" href="files/colouring-london-online-exhibition.pdf" target="_blank">View online exhibition</a><!--
|
|
|
|
|
|
--><a class="btn btn-outline-dark btn-half" href="faq.html">FAQ</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2018-08-01 12:58:02 -04:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
|
|
|
|
|
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
|
|
|
|
|
crossorigin=""></script>
|
2018-08-09 08:38:53 -04:00
|
|
|
|
|
2018-08-01 12:58:02 -04:00
|
|
|
|
<script src="main.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
