colouring-montreal/html/index.html

310 lines
9.4 KiB
HTML
Raw Normal View History

2018-04-11 17:02:43 -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="main.css">
</head>
<body>
2018-04-13 07:48:06 -04:00
<a href="index.html" class="logo" id="top">
2018-04-11 17:02:43 -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>
2018-04-13 07:48:06 -04:00
<h1 class="logotype">
2018-04-11 17:02:43 -04:00
<span>Colouring</span>
<span>London</span>
2018-04-13 07:48:06 -04:00
</h1>
</a>
2018-04-11 17:02:43 -04:00
<article>
2018-04-13 07:48:26 -04:00
<div class="main-col">
<h1 class="h2">Can you help us capture information on every building in London?</h1>
2018-04-11 17:02:43 -04:00
<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 Londons buildings. Were releasing the
prototype for testing in the late summer. See the slideshow below for what it
will look like.
</p>
<a class="btn btn-center" href="#sign-up">Sign up for updates</a>
<div class="carousel">
<button class="carousel-control offscreen-text back">Back</button>
<ul class="carousel-content">
2018-04-13 07:48:06 -04:00
<li><img src="images/slide-1-welcome.png" alt="Welcome"></li>
2018-04-11 17:02:43 -04:00
<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>
2018-04-13 07:48:26 -04:00
</div>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:26 -04:00
<hr/>
<div class="main-col">
2018-04-11 17:02:43 -04:00
<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>
2018-04-13 08:47:50 -04:00
<a href="supporters.html" class="btn">Supporting Organisations</a>
<p>Project Team:</p>
<p>
Polly Hudson &ndash; Concept design and direction<br>
Tom Russell &ndash; Platform design and development<br>
Adam Dennett &ndash; Project supervision<br>
Duncan Smith &ndash; Technical adviser<br>
</p>
2018-04-13 07:48:26 -04:00
</div>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:26 -04:00
<hr/>
<div class="main-col">
<h2 class="h1">Data Categories</h2>
2018-04-11 17:02:43 -04:00
<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>
2018-04-13 07:48:26 -04:00
</div>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:26 -04:00
<hr/>
<div class="main-col">
<h2 class="h1">Once built, our platform will allow you to:</h2>
</div>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:06 -04:00
<section class="pale-pink">
2018-04-13 07:48:26 -04:00
<div class="main-col">
<h3 class="h2">View maps</h3>
2018-04-11 17:02:43 -04:00
<p>
To view the data, navigate to the View Maps page and find the category that
interests you.
</p>
2018-04-13 07:48:26 -04:00
<img class="border-image" src="images/slide-4-view.png" alt="Preview of view maps page">
</div>
2018-04-13 07:48:06 -04:00
</section>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:06 -04:00
<section class="pale-yellow">
2018-04-13 07:48:26 -04:00
<div class="main-col">
<h3 class="h2">Add and edit data</h3>
2018-04-11 17:02:43 -04:00
<p>
Find a building and add or edit data for any of the 12 core categories.
</p>
2018-04-13 07:48:26 -04:00
<img class="border-image" src="images/slide-3-edit.png" alt="Preview of add/edit data page">
</div>
2018-04-13 07:48:06 -04:00
</section>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:06 -04:00
<section class="pale-orange">
2018-04-13 07:48:26 -04:00
<div class="main-col">
<h3 class="h2">See how people are using our data</h3>
2018-04-11 17:02:43 -04:00
<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 havent imagined yet.
</p>
2018-04-13 07:48:26 -04:00
<img class="border-image" src="images/slide-6-showcase.png" alt="Preview of data showcase page">
</div>
2018-04-13 07:48:06 -04:00
</section>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:06 -04:00
<section class="pale-green">
2018-04-13 07:48:26 -04:00
<div class="main-col">
<h3 class="h2">Download, remix and reuse</h3>
2018-04-11 17:02:43 -04:00
<p>
Access bulk downloads of data created through the project to use and reuse
under a liberal open data license. Let us know and well feature showcase
projects on the Colouring London site.
</p>
2018-04-13 07:48:26 -04:00
<img class="border-image" src="images/slide-5-download.png" alt="Preview of download page">
</div>
2018-04-13 07:48:06 -04:00
</section>
2018-04-11 17:02:43 -04:00
2018-04-13 07:48:26 -04:00
<div class="main-col">
2018-04-11 17:02:43 -04:00
<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">
2018-04-13 07:48:26 -04:00
<h3 class="h1">Keep in touch</h3>
2018-04-11 17:02:43 -04:00
<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>
<input class="btn btn-full" type="submit" value="Sign up for updates" />
</form>
2018-04-13 07:48:26 -04:00
<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>
2018-04-11 17:02:43 -04:00
</article>
<footer>
2018-04-13 08:54:08 -04:00
<a class="logo h2" href="index.html">
2018-04-11 17:35:35 -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>
<div class="logotype">
<span>Colouring</span>
<span>London</span>
</div>
</a>
2018-04-11 17:02:43 -04:00
</footer>
2018-04-13 07:48:06 -04:00
<script src="main.js"></script>
2018-04-11 17:02:43 -04:00
</body>
</html>