Difference between revisions of "Team:KCL UK/Collaborations"

(Prototype team page)
 
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{KCL_UK}}
+
{{:Team:KCL_UK/Templates/Header}}
 
<html>
 
<html>
 +
    <head>
  
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width= device-width, initial-scale=1">
 +
    <title>KCL iGEM</title>
  
  
−
<div class="column full_size judges-will-not-evaluate">
+
    <style>  
−
<h3>★  ALERT! </h3>
+
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
  
 +
    @import url('https://fonts.googleapis.com/css?family=Raleway');
 +
    #top_title {display:none;}
 +
   
  
−
<div class="clear"></div>
 
  
 +
  #HQ_page p {
 +
font-family: 'Raleway', sans-serif;
 +
font-size: 1em;
 +
text-align: center;
  
−
<div class="column full_size">
+
}
−
<h1>Collaborations</h1>
+
   
 +
    #HQ_page h1,h2,h3 {
 +
font-family: 'Raleway', sans-serif;
 +
font-weight: 300;
 +
}
  
−
<p>
+
      #content, #HQ_page {
−
Sharing and collaboration are core values of iGEM. We encourage you to reach out and work with other teams on difficult problems that you can more easily solve together.
+
            animation : none;
−
</p>
+
    animation-delay : 0;
 +
    animation-direction : normal;
 +
    animation-duration : 0;
 +
    animation-fill-mode : none;
 +
    animation-iteration-count : 1;
 +
    animation-name : none;
 +
    animation-play-state : running;
 +
    animation-timing-function : ease;
 +
    backface-visibility : visible;
 +
    background : 0;
 +
    background-attachment : scroll;
 +
    background-clip : border-box;
 +
    background-color : transparent;
 +
    background-image : none;
 +
    background-origin : padding-box;
 +
    background-position : 0 0;
 +
    background-position-x : 0;
 +
    background-position-y : 0;
 +
    background-repeat : repeat;
 +
    background-size : auto auto;
 +
    border : 0;
 +
    border-style : none;
 +
    border-width : medium;
 +
    border-color : inherit;
 +
    border-bottom : 0;
 +
    border-bottom-color : inherit;
 +
    border-bottom-left-radius : 0;
 +
    border-bottom-right-radius : 0;
 +
    border-bottom-style : none;
 +
    border-bottom-width : medium;
 +
    border-collapse : separate;
 +
    border-image : none;
 +
    border-left : 0;
 +
    border-left-color : inherit;
 +
    border-left-style : none;
 +
    border-left-width : medium;
 +
    border-radius : 0;
 +
    border-right : 0;
 +
    border-right-color : inherit;
 +
    border-right-style : none;
 +
    border-right-width : medium;
 +
    border-spacing : 0;
 +
    border-top : 0;
 +
    border-top-color : inherit;
 +
    border-top-left-radius : 0;
 +
    border-top-right-radius : 0;
 +
    border-top-style : none;
 +
    border-top-width : medium;
 +
    bottom : auto;
 +
    box-shadow : none;
 +
    box-sizing : content-box;
 +
    caption-side : top;
 +
    clear : none;
 +
    clip : auto;
 +
    color : inherit;
 +
    columns : auto;
 +
    column-count : auto;
 +
    column-fill : balance;
 +
    column-gap : normal;
 +
    column-rule : medium none currentColor;
 +
    column-rule-color : currentColor;
 +
    column-rule-style : none;
 +
    column-rule-width : none;
 +
    column-span : 1;
 +
    column-width : auto;
 +
    content : normal;
 +
    counter-increment : none;
 +
    counter-reset : none;
 +
    cursor : auto;
 +
    direction : ltr;
 +
    display : inline;
 +
    empty-cells : show;
 +
    float : none;
 +
    font : normal;
 +
    font-family: 'Raleway', sans-serif;
 +
    font-size : medium;
 +
    font-style : normal;
 +
    font-variant : normal;
 +
    font-weight : normal;
 +
    height : auto;
 +
    hyphens : none;
 +
    left : auto;
 +
    letter-spacing : normal;
 +
    line-height : normal;
 +
    list-style : none;
 +
    list-style-image : none;
 +
    list-style-position : outside;
 +
    list-style-type : disc;
 +
    margin : 0;
 +
    margin-bottom : 0;
 +
    margin-left : 0;
 +
    margin-right : 0;
 +
    margin-top : 0;
 +
    max-height : none;
 +
    max-width : none;
 +
    min-height : 0;
 +
    min-width : 0;
 +
    opacity : 1;
 +
    orphans : 0;
 +
    outline : 0;
 +
    outline-color : invert;
 +
    outline-style : none;
 +
    outline-width : medium;
 +
    overflow : visible;
 +
    overflow-x : visible;
 +
    overflow-y : visible;
 +
    padding : 0;
 +
    padding-bottom : 0;
 +
    padding-left : 0;
 +
    padding-right : 0;
 +
    padding-top : 0;
 +
    page-break-after : auto;
 +
    page-break-before : auto;
 +
    page-break-inside : auto;
 +
    perspective : none;
 +
    perspective-origin : 50% 50%;
 +
    position : static;
 +
    /* May need to alter quotes for different locales (e.g fr) */
 +
    quotes : '\201C' '\201D' '\2018' '\2019';
 +
    right : auto;
 +
    tab-size : 8;
 +
    table-layout : auto;
 +
    text-align : inherit;
 +
    text-align-last : auto;
 +
    text-decoration : none;
 +
    text-decoration-color : inherit;
 +
    text-decoration-line : none;
 +
    text-decoration-style : solid;
 +
    text-indent : 0;
 +
    text-shadow : none;
 +
    text-transform : none;
 +
    top : auto;
 +
    transform : none;
 +
    transform-style : flat;
 +
    transition : none;
 +
    transition-delay : 0s;
 +
    transition-duration : 0s;
 +
    transition-property : none;
 +
    transition-timing-function : ease;
 +
    unicode-bidi : normal;
 +
    vertical-align : baseline;
 +
    visibility : visible;
 +
    white-space : normal;
 +
    widows : 0;
 +
    width : auto;
 +
    word-spacing : normal;
 +
    z-index : auto;
 +
      }
  
−
<h3>Silver Medal Criterion #2</h3>
+
h1 {
−
<p>
+
display: block;
−
Complete this page if you intend to compete for the silver medal criterion #2 on collaboration. Please see the <a href="https://2018.igem.org/Judging/Medals">2018 Medals Page</a> for more information.  
+
font-size: 2em;
−
</p>
+
margin-bottom: 0.67em;
−
</div>
+
margin-left: 0;
 +
margin-right: 0;
 +
  }
  
−
<div class="column two_thirds_size">
+
  a:hover {text-decoration:none;}
 +
a:visited {
 +
  color:red;
 +
  text-decoration:none;
 +
}
  
−
<h4> Which other teams can we work with? </h4>
+
  .dropdown-nav-buttonmasks:visited {
−
<p>
+
    color:white;
−
You can work with any other team in the competition, including software, hardware, high school and other tracks. You can also work with non-iGEM research groups, but they do not count towards the iGEM team collaboration silver medal criterion.
+
      text-decoration: none;
−
</p>
+
    }
 +
.standalonenav:visited {
 +
  color:white;
 +
  text-decoration: none;
 +
}
  
−
<p>
+
 
−
In order to meet the silver medal criteria on helping another team, you must complete this page and detail the nature of your collaboration with another iGEM team.
+
−
</p>
+
  
−
</div>
+
        * {
 +
            box-sizing: border-box;
 +
            font-family: 'Raleway', sans-serif;
 +
        }
  
  
 +
        body{
 +
        margin: 0;
 +
    padding: 0;
 +
        font-family: 'Raleway', sans-serif;
 +
        text-align: center;
 +
        }
  
−
<div class="column third_size">
+
        img {
−
<p>
+
            max-width: 100%;
−
Here are some suggestions for projects you could work on with other teams:
+
            height: auto;
−
</p>
+
        }
  
−
<ul>
+
        .container {
−
<li> Improve the function of another team's BioBrick Part or Device</li>
+
            width: 95%;
−
<li> Characterize another team's part </li>
+
            margin: 0 auto;
−
<li> Debug a construct </li>
+
        }
−
<li> Model or simulate another team's system </li>
+
        .fixcontainer {
−
<li> Test another team's software</li>
+
          width:100%;
−
<li> Help build and test another team's hardware project</li>
+
          margin: 0 auto;
−
<li> Mentor a high-school team</li>
+
        }
−
</ul>
+
 
−
</div>
+
        /*typography------------------------------*/
 +
        .title {
 +
            font-weight: 900;
 +
            font-weight: bold;
 +
            font-size: 3.2rem;
 +
            margin-bottom: 1em;
 +
            padding-bottom: 2em;
 +
            text-emphasis: bold;
 +
        }
 +
        .smallertitle {
 +
          font-weight: 900;
 +
          font-weight: bold;
 +
          font-size: 1.4rem;
 +
          margin-bottom: 1em;
 +
          padding-top: 3.1em;
 +
          padding-bottom: 0em;
 +
          text-emphasis: bold;
 +
 
 +
        }
 +
        h1 {
 +
            font-weight: 300;
 +
            font-size: 2.5em;
 +
            text-transform: capitalize;
 +
          }
 +
        .title span {
 +
            margin-top: 1em;
 +
            font-weight: 200;
 +
            display: block;
 +
            font-size: .9em;
 +
        }
 +
 
 +
 
 +
        /*buttonmasks -------------------------------*/
 +
        .buttonmask {
 +
            display: inline-block;
 +
            font-size: 1.25rem;
 +
            text-decoration: none;
 +
            text-transform: uppercase;
 +
            border-width: 2px;
 +
            border-style: solid;
 +
            padding: .5em 1.75em;
 +
 
 +
        }
 +
  .buttonmask}
 +
 
 +
        .buttonmask-small {
 +
            font-size: .9rem;
 +
            font-weight: 700;
 +
        }
 +
 
 +
        .buttonmask-accent {
 +
            color: #FF0000;
 +
            border-color: #FF0000;
 +
        }
 +
 
 +
        .buttonmask-accent:hover {
 +
        background: #FF0000;
 +
        color: black;
 +
        }
 +
 
 +
 
 +
        /*header------------------------------*/
 +
 
 +
        header {
 +
            background-color: rgba(0,0,0,.75);
 +
            position: absolute;
 +
            left: 0;
 +
            right: 0;
 +
            max-height: 7em;
 +
        }
 +
 
 +
        nav ul {
 +
            margin: 0;
 +
            padding: 0;
 +
            list-style: none;
 +
            float: right;
 +
            margin-right: 5em!important;
 +
            margin-top: 2em;
 +
            position: relative;
 +
        }
 +
 
 +
        nav li {
 +
            display: inline-block;
 +
            margin: 1em;
 +
            position: relative;
 +
        }
 +
 
 +
        .nav-buttonmasks {
 +
            font-weight: 900;
 +
            text-decoration: none;
 +
            text-transform: uppercase;
 +
            font-size: 0.95rem;
 +
            padding: .5em;
 +
            color: #FFF;
 +
            position: relative;
 +
            padding-bottom: 3em;
 +
        }
 +
 
 +
        .nav-buttonmasks:hover {color: #FF0000;}
 +
        .dropdown-nav-buttonmasks:hover {color: #FF0000;}
 +
 
 +
        .dropdown-nav-buttonmasks {
 +
            font-weight: 900;
 +
            text-decoration: none;
 +
            text-transform: uppercase;
 +
            font-size: 0.95rem;
 +
            padding: .5em;
 +
            color: #FFF;
 +
            display: none;
 +
            background-color:  rgba(0,0,0,.75);
 +
            z-index: 10;
 +
            width: 10em;
 +
            margin-left: -3em;
 +
        }
 +
        #navadjust {
 +
          margin-left:-0.3em;
 +
        }
 +
 
 +
     
 +
 
 +
        .nav-buttonmasks:hover .dropdown-nav-buttonmasks{
 +
            display: block;
 +
            position: absolute;
 +
        }
 +
        .logo {
 +
            height: 90px;
 +
            width: 90px;
 +
            float: left;
 +
            margin-left: 6em;
 +
            margin-top: .5em;
 +
        }
 +
.uselessspacer {
 +
          height: 16vh;
 +
          background-color: black;
 +
        }
 +
 
 +
        /*top------------------------------*/
 +
        .top {
 +
          background-color: black;
 +
          height: 19vh;
 +
        }
 +
        .line {
 +
                width: 30%;
 +
                height: 1.5px;
 +
                margin: auto;
 +
            background: red;
 +
        }
 +
        .top h1 {
 +
          color: red!important;
 +
        }
 +
 
 +
        /*content------------------------------*/
 +
        .divisiontitletext {
 +
          margin: auto;
 +
 
 +
          font-size: 2em!important;
 +
        }
 +
        .leftline {
 +
          float: left;
 +
          width: 37%;
 +
          height: 1.5px;
 +
          background: red;
 +
          margin-left: -33em!important;
 +
          margin-top: 5em;
 +
        }
 +
        .divisiontitle {
 +
          width: 100%;
 +
          height: 7em;
 +
          background-color: black;
 +
          color: white;
 +
          margin: auto;
 +
        }
 +
        .collab {
 +
          width: 100%;
 +
          background-color: black;
 +
          outline: 2px solid red;
 +
          outline-offset: -2em;
 +
        }
 +
        #first {
 +
          height: 180em;
 +
        }
 +
        #second {
 +
          height: 30em;
 +
        }
 +
        #third {
 +
          height: 50em;
 +
        }
 +
        .longname {
 +
          font-size: 2em;
 +
          color: white;
 +
          background-color: black;
 +
          width: 80vw;
 +
          margin-top: .6em;
 +
          z-index: 1;
 +
          position: absolute;
 +
          margin: auto;
 +
          margin-left: 10vw;
 +
          padding-top: .4em;
 +
        }
 +
        #secondlongname {
 +
          width: 40vw;
 +
          margin-left: 30vw;
 +
        }
 +
        .smallname {
 +
          font-size: 2em;
 +
          color: red;
 +
          background-color: black;
 +
          width: 18vw;
 +
          margin-top: .4em;
 +
          z-index: 1
 +
;
 +
          position: absolute;
 +
        }
 +
        .leftname {
 +
          float:left;
 +
          margin-left: 3em!important;
 +
        }
 +
        .rightname {
 +
          float:right;
 +
          margin-left: 60vw;
 +
        }
 +
 
 +
        .description {
 +
          text-align: left;
 +
          background-color: black;
 +
          padding-top: 2em;
 +
          width: 80vw;
 +
          margin: auto;
 +
          font-size: 1.2em;
 +
          color: white;
 +
        }
 +
        .descriptionfix {
 +
          text-align: left;
 +
          background-color: black;
 +
          padding-top: 2em;
 +
          width: 80vw;
 +
          margin: auto;
 +
          font-size: 1.2em;
 +
          color: white;
 +
        }
 +
        .leftdescription {
 +
          float: left;
 +
          margin-left: 10vw;
 +
          width: 40vw;
 +
          display: inline-block;
 +
          background-color: black;
 +
          padding-top: 8em;
 +
 
 +
        }
 +
        .ourwiki {
 +
          display: inline-block;
 +
          width: 30vw;
 +
          background-color: black;
 +
          float: left;
 +
          margin-left: 8vw;
 +
        }
 +
        .firstdescription{
 +
          padding-top: 8em;
 +
        }
 +
        .linedescadjust {
 +
          margin-top: 2em;
 +
          margin
 +
        }
 +
        .bullet {
 +
          margin-top: 1em;
 +
          color: white;
 +
          font-size: 1.1em;
 +
          text-align: left;
 +
        }
 +
        .ourwikidesc {
 +
          margin-bottom: 1em;
 +
        }
 +
        .test {
 +
          height: 25em;
 +
          background-color: black;
 +
        }
 +
        .collabinfographic {
 +
          width: 70em;
 +
          height: 130em;
 +
          background-image: url(https://static.igem.org/mediawiki/2018/0/0d/T--KCL_UK--collaborationinfographic.png);
 +
          background-size:contain;
 +
          background-repeat: no-repeat;
 +
            margin: auto;
 +
        }
 +
        .spacer {
 +
          background-color: black;
 +
          height: 3em!important;
 +
        }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    </style>
 +
 
 +
 
 +
 
 +
 
 +
    </head>
 +
 
 +
 
 +
    <body>
 +
 
 +
   
 +
 
 +
    <div class="uselessspacer"></div>
 +
 
 +
    <section class="top">
 +
      <h1>Collaborations</h1>
 +
      <div class="line"></div>
 +
    </section>
 +
 
 +
    <section class="collabcontent">
 +
      <div class="collab" id="first">
 +
        <div class="longname">What does DNA stand for? The National Dyslexics Association!</div>
 +
        <div class="firstdescription description">Ignoring the attitudes of Brexit, our iGEM team has set up a two-way collaboration with iGEM Marburg. We’ve worked hard to create easily understandable resources to help teams make the content they produce more accessible for those with disabilities and special educational needs.
 +
        </div>
 +
          <div class="line linedescadjust"></div>
 +
        <div class="leftdescription description">iGEM Marburg reached out to us, asking if our wiki fit their criteria for being an accessible web-page. We checked out their page, and we met most of them!
 +
        </div>
 +
        <div class="test">
 +
          <ul class="ourwiki">
 +
            <div class="description ourwiki ourwikidesc">Our wiki has:</div>
 +
            <li class="bullet">Has a high colour contrast. Our text is easily distinguishable from the background, and we do not use a red-green combination to make text distinctive.</li>
 +
            <li class="bullet">Text and headings are distinguished by both size and colour, and is defined in boxes/obvious segmentation.
 +
The links we use are descriptive.</li>
 +
            <li class="bullet">The page is scalable- we used % and ems.</li>
 +
            <li class="bullet">Information that belongs together is shown in one frame.</li>
 +
          </ul>
 +
        </div>
 +
        <div class="line"></div>
 +
        <div class="description">We sent them an infographic (see below) in turn on how to make sure all content the team produces is dyslexia friendly. iGEM Marburg were proud to tell us that they had made an effort tick off every box!
 +
        </div>
 +
 
 +
      <img class="collabinfographic" src="https://static.igem.org/mediawiki/2018/0/0d/T--KCL_UK--collaborationinfographic.png"></img>
 +
 
 +
      </div>
 +
 
 +
      <div class="collab" id="second">
 +
        <div class="longname" id="secondlongname">Double Trouble(shooting)</div>
 +
        <div class="firstdescription description">In September, we hosted a troubleshooting meet-up with Imperial, UCL and Westminster that had been in the workings since the Oxford Conference. We were lucky enough to have design students from UAL give us advice on how to make the materials we present look decent, and had the opportunity to discuss our projects.
 +
        </div>
 +
        <div class="spacer"></div>
 +
 
 +
        <div class="description">Imperial were keen to continue our collaboration, and asked us to review the app that they are producing. In turn, they offered to work with our Max to help him with mathematical modelling.
 +
        </div>
 +
      </div>
 +
      <div>
 +
 
 +
      <div class="collab" id="third">
 +
        <div class="longname" id="secondlongname">Wading into Research</div>
 +
        <div class="firstdescription descriptionfix">We kicked off our collaborations by supporting Warwick’s lab research. Our own lab team headed down to London’s “beach” and into the river to collect samples of water and sediment from the Thames.
 +
        </div>
 +
 
 +
      <img style="height:30em; margin-top:2em;" src="https://static.igem.org/mediawiki/2018/e/e4/T--KCL_UK--thames.jpg"></img>
 +
      </div>
 +
 
 +
      </div>
 +
 
 +
    </section>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    </body>
  
  
 
</html>
 
</html>

Latest revision as of 12:08, 17 October 2018

KCL iGEM

KCL iGEM

Collaborations

What does DNA stand for? The National Dyslexics Association!
Ignoring the attitudes of Brexit, our iGEM team has set up a two-way collaboration with iGEM Marburg. We’ve worked hard to create easily understandable resources to help teams make the content they produce more accessible for those with disabilities and special educational needs.
iGEM Marburg reached out to us, asking if our wiki fit their criteria for being an accessible web-page. We checked out their page, and we met most of them!
    Our wiki has:
  • Has a high colour contrast. Our text is easily distinguishable from the background, and we do not use a red-green combination to make text distinctive.
  • Text and headings are distinguished by both size and colour, and is defined in boxes/obvious segmentation. The links we use are descriptive.
  • The page is scalable- we used % and ems.
  • Information that belongs together is shown in one frame.
We sent them an infographic (see below) in turn on how to make sure all content the team produces is dyslexia friendly. iGEM Marburg were proud to tell us that they had made an effort tick off every box!
Double Trouble(shooting)
In September, we hosted a troubleshooting meet-up with Imperial, UCL and Westminster that had been in the workings since the Oxford Conference. We were lucky enough to have design students from UAL give us advice on how to make the materials we present look decent, and had the opportunity to discuss our projects.
Imperial were keen to continue our collaboration, and asked us to review the app that they are producing. In turn, they offered to work with our Max to help him with mathematical modelling.
Wading into Research
We kicked off our collaborations by supporting Warwick’s lab research. Our own lab team headed down to London’s “beach” and into the river to collect samples of water and sediment from the Thames.