Simplify HTML site - link to beta

2018-11-21 22:52:15 +00:00 · 2018-11-21 22:52:15 +00:00 · 0a6e29b0fa
commit 0a6e29b0fa
parent fe7f55ef67
13 changed files with 32 additions and 645 deletions
--- a/html/faq.html
+++ b/html/faq.html
@ -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>
--- a/html/fonts/gidole-regular-webfont.woff
+++ b/html/fonts/gidole-regular-webfont.woff
--- a/html/fonts/gidole-regular-webfont.woff2
+++ b/html/fonts/gidole-regular-webfont.woff2
--- a/html/images/slide-1-welcome.png
+++ b/html/images/slide-1-welcome.png
--- a/html/images/slide-2-categories.png
+++ b/html/images/slide-2-categories.png
--- a/html/images/slide-3-edit.png
+++ b/html/images/slide-3-edit.png
--- a/html/images/slide-4-view.png
+++ b/html/images/slide-4-view.png
--- a/html/images/slide-5-download.png
+++ b/html/images/slide-5-download.png
--- a/html/images/slide-6-showcase.png
+++ b/html/images/slide-6-showcase.png
--- a/html/images/slide-7-partners.png
+++ b/html/images/slide-7-partners.png
--- a/html/index.html
+++ b/html/index.html
@ -42,204 +42,26 @@
 <p>
-How many buildings are there in London? What are their characteristics? Where
+Colouring London is a citizen science platform collecting information on every building in
-are they located and how do they contribute to the city? How adaptable are
+London. We're building it at the Centre for Advanced Spatial Analysis, University College
-they? How long will they last, and what are the environmental and
+London, to help make London more sustainable.
 socio-economic implications of demolition?
 </p>
 <p>
-Colouring London is being designed to address these questions by crowdsourcing
+Can you help us? We're looking for volunteers of all ages and abilities to test the site
-and visualising information on London’s buildings. We’re releasing the
+before we launch next year. Just add your knowledge to make the buildings colour.
 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>
+<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>
-
+<section class="pale-grey">
 <a class="btn btn-center" href="files/colouring-london-online-exhibition.pdf">View online exhibition</a>
 </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>
 <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><!--
+<div class="main-col">
--><a class="btn btn-half" href="faq.html">FAQ</a>
+<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>
--- a/html/main.css
+++ b/html/main.css
@ -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;
 }
--- a/html/supporters.html
+++ b/html/supporters.html
@ -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>