Difference between revisions of "Team:UNOTT/Description"

(Prototype team page)
 
 
(329 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{UNOTT}}
+
{{:Team:UNOTT/Template/NavBarTest}}
 +
 
 
<html>
 
<html>
  
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<meta charset="UTF-8">
 +
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  
 +
<style>
 +
      @import url(https://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);
  
−
<div class="column full_size">
+
      /* Base Styles
−
<h1>Description</h1>
+
      ===================================*/
 +
      body {
 +
     
 +
      font-family: 'Lato', sans-serif;
 +
      font-weight: 400;
 +
      line-height: 1.8;
 +
        background-color: #fff;
 +
        width: auto;
 +
        position:absolute;
  
−
<p>Tell us about your project, describe what moves you and why this is something important for your team.</p>
+
      }
  
  
−
<h5>What should this page contain?</h5>
+
      /* Layout Styles
−
<ul>
+
      ===================================*/
−
<li> A clear and concise description of your project.</li>
+
      section:not(:first-of-type),
−
<li>A detailed explanation of why your team chose to work on this particular project.</li>
+
      section:not(:nth-of-type(n2)) {
−
<li>References and sources to document your research.</li>
+
      margin-top: 80px;
−
<li>Use illustrations and other visual resources to explain your project.</li>
+
      }
−
</ul>
+
      .section-two,
 +
      .section-three,
 +
      footer {
 +
      margin-top: 80px;
 +
      }
  
  
−
</div>
+
     
  
−
<div class="column full_size" >
+
      /* Cover / Jumbotron Styles
 +
      ===================================*/
 +
      section .cover {
 +
      padding-top: 70px;
 +
     
 +
      background-repeat: no-repeat;
 +
      background-size: cover;
 +
      height: 100vh;
 +
        width: 100vw;
 +
     
 +
      display: -ms-flexbox;
 +
      display: flex;
 +
       
 +
      }
  
−
<h5>Advice on writing your Project Description</h5>
 
  
−
<p>
+
      /* Section One Styles
−
We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be consist, accurate and unambiguous in your achievements.  
+
      ===================================*/
−
</p>
+
      .section-one-content {
 +
      padding: 40px 20px;
 +
      color: #ffffff;
 +
      font-weight: 300;
 +
      }
 +
      .section-one-content h1 {
 +
      margin: 0 0 20px;
 +
      }
 +
      #section-one-left {
 +
      background: #183532;
 +
      }
 +
      #section-one-middle {
 +
      background: #244F4A;
 +
      }
 +
      #section-one-right {
 +
      background: #2A5C56;
 +
      }
  
−
<p>
+
      .section-two,
−
Judges like to read your wiki and know exactly what you have achieved. This is how you should think about these sections; from the point of view of the judge evaluating you at the end of the year.
+
      .section-three {
−
</p>
+
        margin: auto;
 +
    width: 60%;
 +
    padding: 10px;
 +
    font-family: 'Karla', sans-serif;
 +
    background-color: #ffffff;
 +
     
 +
      }
  
−
</div>
+
      /* CSS Image Styles
 +
      ====================================================*/
 +
      .css-img-wrapper {
 +
          display: -webkit-box;
 +
          display: -ms-flexbox;
 +
          display: flex;
 +
          -webkit-box-orient: vertical;
 +
          -webkit-box-direction: normal;
 +
              -ms-flex-direction: column;
 +
                  flex-direction: column;
 +
          -ms-flex-wrap: nowrap;
 +
              flex-wrap: nowrap;
 +
          -webkit-box-pack: center;
 +
              -ms-flex-pack: center;
 +
                  justify-content: center;
 +
          -ms-flex-line-pack: center;
 +
              align-content: center;
 +
          -webkit-box-align: center;
 +
              -ms-flex-align: center;
 +
                  align-items: center;
 +
      }
 +
      .img-designers,
 +
      .img-developers {
 +
      height: 400px;
 +
      width: 400px;
 +
      background-position: center center;
 +
      background-size: cover;
 +
      }
 +
      .img-designers {
 +
      background: #183532;
 +
      }
 +
      .img-developers {
 +
      background: #2A5C56;
 +
      }
  
  
−
<div class="column half_size" >
 
  
−
<h5>References</h5>
+
      /* Media Styles
−
<p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.</p>
+
      ===================================*/
 +
      @media (min-width: 480px) {
 +
      body {
 +
      font-size: 16px;
 +
             
 +
               
 +
      }
 +
      }
 +
      @media (min-width: 768px) {
 +
      .section-one-content {
 +
      padding: 40px 40px;
 +
      }
 +
      }
 +
      @media (min-width: 992px) {
 +
      .section-one-content {
 +
      padding: 40px 20px;
 +
      }
 +
      }
 +
      @media (min-width: 1200px) {
 +
      .section-one-content {
 +
      padding: 40px 40px;
 +
      }
 +
      }
  
−
</div>
+
@media only screen and (max-width: 500px) {
 +
    .section.cover {
 +
        max-width:100%;
 +
    }
  
 +
    .cover {
 +
        max-width:100%;
 +
    }
  
−
<div class="column half_size" >
 
−
<h5>Inspiration</h5>
 
−
<p>See how other teams have described and presented their projects: </p>
 
  
−
<ul>
+
}
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Description">2016 Imperial College</a></li>
+
 
−
<li><a href="https://2016.igem.org/Team:Wageningen_UR/Description">2016 Wageningen UR</a></li>
+
   
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Project_Overview"> 2014 UC Davis</a></li>
+
.maintext {
−
<li><a href="https://2014.igem.org/Team:SYSU-Software/Overview">2014 SYSU Software</a></li>
+
position: absolute;
−
</ul>
+
left: 33%%;
 +
top: 10%;
 +
}
 +
 
 +
.maintext2 {
 +
position: absolute;
 +
left: 33%;
 +
top: 40%;
 +
}
 +
 
 +
.mainimage{
 +
max-width: 100%;
 +
height: auto;
 +
}
 +
 
 +
.contentmargin {
 +
    margin: auto;
 +
    width: 60%;
 +
    padding: 10px;
 +
    font-family: 'Karla', sans-serif;
 +
    background-color: #ffffff;
 +
}
 +
 
 +
h1 {
 +
  font-weight: normal;
 +
  letter-spacing: -1px;
 +
  color: #34495E;
 +
}
 +
h2 {
 +
  font-weight: normal;
 +
  letter-spacing: -1px;
 +
  color: #34495E;
 +
}
 +
p {
 +
  font-weight: normal;
 +
  letter-spacing: -1px;
 +
  color: #4b524a;
 +
 
 +
.ourkey {
 +
position: relative;
 +
top:15px;
 +
}
 +
h5 {
 +
  font-weight: normal;
 +
  letter-spacing: -1px;
 +
  color: #4b524a;
 +
</style>
 +
</head>
 +
 
 +
<body>
 +
<div id="container" style=" background-color: #02263E;">
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<h1 style="text-align: center;"><span style="color: #ffffff;">PROJECT DESCRIPTION</span></h1>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 
</div>
 
</div>
  
 +
<br>
 +
<br>
 +
<br>
 +
<!-- Section Two; -->
 +
<section class="container section-two" id="spydesingers">
 +
<div class="row">
 +
<div class="col-md-6 to-match">
 +
<h1>What?</h1>
 +
<article>
 +
<p><b><i>Key. coli</i> provides a new, more secure, form of key for accessing content.</b> It uses random ligations and large repertoires of possible components to generate unique combinations of expression profiles; this next generation biological key could be the next BIG thing in security; watch this space!
  
 +
</p>
 +
                 
 +
 +
 +
</article>
 +
</div>
 +
 +
<img class="ourkey" src="https://static.igem.org/mediawiki/2017/3/36/T--UNOTT--keyk.png" style="width:40%;height:auto;">
  
 +
 +
 +
 +
</section>
 +
<!--//Close Section Two -->
 +
 +
 +
 +
<div class="contentmargin">
 +
<h1>Why?</h1>
 +
 +
 +
<p><b>Major hacking incidents are increasingly common,</b> with accounts being hacked and sensitive information stolen. Many companies are moving away from conventional passwords, which are proving to be unreliable in the hands of the public. Banks are now using physical biometric authentication procedures to correctly identify account owners. This new direction opens a market for biological “passwords”. An ideal system would be as separate from online software programs as possible while maintaining the complexity and uniqueness of a biometric system. Cells are effectively living computers, so we can programme cells to act as a changeable biometric password. </p>
 +
 +
 +
 +
 +
 +
 +
<h1>How?</h1>
 +
 +
<p><b>A key must be unique, measurable and unpredictable.</b> In <i>Key. coli</i>, all these requirements are achieved by the random generation of modular vectors that are expressed in Escherichia coli to produce a unique and detectable fluorescent pattern. This pattern is obtained when different fluorescent proteins (GFP, RFP, CFP) and various promoters, subjected to transcription interference by dCas9, are randomly combined during ligation and transformed into the cells to generate the key. </p>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
 +
<img src="https://static.igem.org/mediawiki/2017/8/84/UNOTT2017-How1.png" alt="" width="100%" height="100%">
 +
<h5><b> Figure 1:</b> Two-plasmid modular process used to generate random<i>Key. coli</i> construct(s)<p>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p><p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<img src="https://static.igem.org/mediawiki/2017/b/bc/UNOTT2017-How2.png" alt="" width="100%" height="100%"></h5>
 +
 +
<h5><b>Figure 2:</b> Random ligation process and colony picking allows large numbers of plasmid variants to be created for use in keys. </p> <p><span style="color: #ffffff;">&nbsp;</span></p></h5>
 +
<p><span style="color: #ffffff;">&nbsp;</span></p>
 +
<br>
 +
<p>A key transport device, based on freeze-dried <i>Key. coli</i>, allows the bacteria to survive and be transported anywhere with ease. Once entry to a lock is desired, the <i>Key. coli</i> device can be activated, and the output read in a suitable detection device. </p>
 +
 +
<h1><i>Key. coli</i> Summary</h1>
 +
 +
 +
<p><img src="https://static.igem.org/mediawiki/2017/8/83/UNOTT2017-summary.png" alt="" width="100%" height="auto" /></p>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
 +
 +
</div>
 +
</body>
 
</html>
 
</html>
 +
{{:Team:UNOTT/Template/Footer}}

Latest revision as of 03:45, 2 November 2017

 

 

 

PROJECT DESCRIPTION

 




What?

Key. coli provides a new, more secure, form of key for accessing content. It uses random ligations and large repertoires of possible components to generate unique combinations of expression profiles; this next generation biological key could be the next BIG thing in security; watch this space!

Why?

Major hacking incidents are increasingly common, with accounts being hacked and sensitive information stolen. Many companies are moving away from conventional passwords, which are proving to be unreliable in the hands of the public. Banks are now using physical biometric authentication procedures to correctly identify account owners. This new direction opens a market for biological “passwords”. An ideal system would be as separate from online software programs as possible while maintaining the complexity and uniqueness of a biometric system. Cells are effectively living computers, so we can programme cells to act as a changeable biometric password.

How?

A key must be unique, measurable and unpredictable. In Key. coli, all these requirements are achieved by the random generation of modular vectors that are expressed in Escherichia coli to produce a unique and detectable fluorescent pattern. This pattern is obtained when different fluorescent proteins (GFP, RFP, CFP) and various promoters, subjected to transcription interference by dCas9, are randomly combined during ligation and transformed into the cells to generate the key.

 

 

Figure 1: Two-plasmid modular process used to generate randomKey. coli construct(s)

 

 

 

 

Figure 2: Random ligation process and colony picking allows large numbers of plasmid variants to be created for use in keys.

 

 


A key transport device, based on freeze-dried Key. coli, allows the bacteria to survive and be transported anywhere with ease. Once entry to a lock is desired, the Key. coli device can be activated, and the output read in a suitable detection device.

Key. coli Summary