Difference between revisions of "Team:Freiburg/Testpage3"

Line 4: Line 4:
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}
 
<html>
 
<html>
 
 
<style>
 
<style>
/*======= BEGIN: General Styling ========*/
 
body {
 
    color: #000;
 
}
 
 
.page_content {
 
    margin-bottom: 0px;
 
}
 
 
.content_box3 {
 
    /*box-shadow: none;*/
 
    overflow: hidden;
 
    background-color: #FFF;
 
    padding: 1% 2% 0% 2%;
 
    border-radius: 30px 60px;
 
    margin-top: 2em;
 
}
 
 
h1 {
 
    text-align: center;
 
}
 
 
.header_box {
 
  display: none;
 
    overflow: hidden;
 
    padding: 2% 0%;
 
    margin: auto;
 
    width: 70%;
 
    text-align: left;
 
    /*background-color: #FFF;
 
    border-radius: 30px 60px;
 
    box-shadow: 1px 1px 10px #888;
 
    -webkit-box-shadow: 1px 1px 10px #888;
 
    -moz-box-shadow: 1px 1px 10px #888;*/
 
}
 
 
.image_box {
 
    margin-bottom 10%;
 
    margin-left: -8%;
 
    margin-top: -10%;
 
    margin-right: -10%;
 
}
 
/*======= END: General Styling ========*/
 
 
 
 
/*========= BEGIN: style for navigation bar ==========*/
 
/*========= BEGIN: style for navigation bar ==========*/
 
#project {
 
#project {
Line 65: Line 19:
 
/*========= END: style for navigation bar ==========*/
 
/*========= END: style for navigation bar ==========*/
  
 
+
.horizontal_menu li {
/*========= BEGIN: Linkbutton in slider ============*/
+
    display: block;
.intro_button a:hover {
+
     margin-top: 5px;
     text-decoration: underline;
+
 
}
 
}
  
.intro_button a {  
+
.biobrick_emphasize {
     color: #FFF;
+
     font-size: 15pt;
 
}
 
}
 
.intro_button {
 
    margin: 0px auto;
 
    padding: 2px 5px 5px 10px;
 
    width: 180px;
 
    line-height: 16px;
 
    text-align: center;
 
    /*background-color: #326aab;*/
 
    background-color: #0051A2;
 
    font-size: 14pt;
 
    border-radius: 8px;
 
    /*box-shadow: 1px -1px 1px 0px #888;*/
 
    /*border: 1px solid #F9F9F9;*/
 
    color: #FFF;
 
}
 
 
.menu-arrow{
 
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
 
background-repeat: no-repeat;
 
background-position: 5% 50%;
 
background-size: 10px 13px;
 
}
 
/*========= END: Linkbutton in slider ============*/
 
 
 
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
 
 
#slider {
 
  height: 500px;
 
  width: 910px;
 
  overflow: visible;
 
  position: relative;
 
}
 
 
/* hides everything outside the slider box */
 
#mask {
 
  overflow: hidden;
 
  height: 500px;
 
}
 
 
/* initialize position for positioning slides outside the slider */
 
#slider ul {
 
  margin: 0;
 
  padding: 0;
 
  position: relative;
 
}
 
 
/* define image properties and position them outside the slider mask */
 
#slider li {
 
  width: 900px;  /* Width slide */
 
  height: 500px; /* Height slide */
 
  position: absolute;
 
  right: 0; /* Original Position - Outside of the Slider */
 
  list-style: none;
 
}
 
 
 
#first,
 
#second,
 
#third,
 
#fourth,
 
#fifth,
 
#sixth,
 
#seventh,
 
#eightth {
 
  left: -1000px;
 
  -ms-transition: tranform 1s ease;
 
  -webkit-transition: transform 1s ease;
 
  transition: transform 1s ease;
 
  font-size: 100%;
 
}
 
 
#first{left: 0;}
 
#third{z-index : -100;}
 
#sixth{z-index: -100;}
 
#fifth{z-index: -100;}
 
#fourth{z-index: -100}
 
#seventh{z-index: -100;}
 
#eightth{z-index: -100; left: 1000px}
 
 
.container{
 
    position: relative;
 
    height: 500px;
 
    margin: 3% 0;
 
    width: 1000px;
 
}
 
 
#buttonleft {
 
  z-index: 200;
 
  position: absolute;
 
  top: 190px;
 
  left: 0;
 
}
 
 
#buttonright{
 
  z-index: 200;
 
  position: absolute;
 
  right: 0;
 
  top: 190px;
 
}
 
 
#buttonleft img,
 
#buttonright img{
 
  width: 50px;
 
}
 
 
#content-slider{
 
  position: absolute;
 
  top:0;
 
  left:50px
 
}
 
 
 
#buttonright:hover,
 
#buttonleft:hover{
 
  cursor: pointer;
 
  cursor: hand;
 
}
 
 
.container{
 
  position: relative;
 
}
 
 
.artboard{
 
    box-sizing: border-box;
 
    height: 470px;
 
    border-radius: 60px;
 
    background-color: #FCFCFC;
 
  box-shadow: 1px 1px 10px rgb(136, 136, 136);
 
  margin: 5px;
 
  border: 2px solid rgb(0, 81, 162);
 
}
 
 
.sliderimage{
 
  float: right;
 
  margin: 3% 70px 3% 25px;
 
  width: 350px
 
}
 
 
.slidertext{
 
  margin: 3% 25px 0 65px;
 
  width: 350px;
 
  text-align: justify;
 
  line-height: 1;
 
  float: left;
 
}
 
 
.slidertext h1{
 
 
}
 
 
.slidertext p{
 
  margin-bottom: 0;
 
}
 
 
.slidertext.indent{
 
  clear: both;
 
  margin-left: 15%;
 
  margin-top: 0;
 
  width: 290px;
 
}
 
 
.dummy-image{
 
  background-color: black;
 
  height: 400px;
 
  width: 350px;
 
}
 
 
 
</style>
 
</style>
  
  
<html>
 
  
<script>
+
<div class="content_box" style="margin-top:0">
$(document).ready(function(){
+
<h1 class="sectionedit1">DNA Engineering</h1>
  
    var distance = 2;
+
<div class="floatbox left">
    // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
+
<p>
    // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
+
A protein array containing different antigens specific for distinct diseases is one of the main parts of the DiaCHIP. Manufacturing this array can be done by conventional <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification" title="ProtPur">protein expression</a> and spotting of the proteins on a specific surface by hand or via <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression" title="cell_free">cell-free expression</a>. Both systems are based on different expression backbones. Therefore, a lot of cloning was required to obtain all constructs.
    $("#buttonleft").bind("click", moveleft);
+
<br>
  function moveleft(e) {
+
To reduce this ambitious task to a minimum of effort, we elaborated a well-structured <a class="wikilink1" href="#detailed_cloning_anchor" title="Detailed_cloning">cloning strategy</a> including a self-designed <a class="wikilink1" href="#cloning_site_anchor" title="Cloning site">multiple cloning site</a>. The cloning site for these purposes was incorporated into the commercial expression vector pET22b+ resulting in <a class="wikilink1" href="#vector_design_anchor" title="vector_design">pET_iGEM</a>.
    // unbind the button //
+
</p>
    $("#buttonleft").unbind();
+
</div>
    console.log("Click "+distance);
+
  
    if (distance == 1) {
+
<div class="floatbox right">
      console.log("Distance: "+distance);
+
<p>
      $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
+
We soon realized that protein expression is probably a problem many iGEM Teams around the world are facing during their projects. Therefore, we decided to improve the plasmid backbone <a class="media" href="http://parts.igem.org/Part:pSB6A1" target="_blank" title="pSB6A1">pSB6A1</a> for protein overexpression providing the Registry with <a  class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Description" title=„pOP“>pOP</a>, an expression backbone suitable for iGEM standard cloning procedures.
        $('#second').css({"z-index": "100"}); /* begin second */
+
<br>
        $('#third').css({});
+
To help future iGEM Teams with their decision, which cloning method to use, we compared and contrasted classical cloning and Gibson Assembly in a <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson" title="Review">short review</a>.
        $('#fourth').css({});
+
</p>
        $('#fifth').css({});
+
        $('#sixth').css({});
+
        $('#seventh').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 seventh */
+
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 3 eightth */
+
        distance = 2;
+
    }
+
  
    else if (distance ==2) {
+
<div class="horizontal_menu">
      console.log("Distance: "+distance);
+
<ul>
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 first */
+
    <li><a href="#cloning_site_anchor" title="Cloning site">1. Our Cloning Site</a></li>
        $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 second */
+
    <li><a href="#vector_design_anchor" title="vector_design">2. Design of pET_iGEM</a></li>
        $('#third').css({"z-index": "100"}); /* begin third */
+
    <li><a href="#detailed_cloning_anchor" title="Detailed_cloning">3. Detailed Cloning Strategy</a></li>
        $('#fourth').css({});
+
    <li><a href="https://2015.igem.org/Team:Freiburg/Description" title=„pOP“>4. pOP - Protein Expression Meets iGEM Standards</a></li>
        $('#fifth').css({});
+
    <li><a href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson" title="Review">5. Short Review on Cloning Methods</a></li>
        $('#sixth').css({});
+
</ul>
        $('#seventh').css({});
+
</div>
        $('#eightth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 4 eightth */
+
</div>
        distance = 3;
+
    }
+
  
    else if (distance ==3) {
+
</div>
      console.log("Distance: "+distance);
+
      $('#first').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 4 first */
+
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 second */
+
        $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 third */
+
        $('#fourth').css({"z-index": "100"}); /* begin fourth */
+
        $('#fifth').css({});
+
        $('#sixth').css({});
+
        $('#seventh').css({});
+
        $('#eightth').css({});
+
        distance = 4;
+
    }
+
  
    else if (distance ==4) {
+
<span id="cloning_site_anchor" class="anchor"></span>
      console.log("Distance: "+distance);
+
<div id="cloning_site" class="content_box">
      $('#first').css({});
+
<h1>1. Our Cloning Site</h1>
        $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 second */
+
<div class="floatbox left">
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
+
<p>
        $('#fourth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
+
The cloning site we developed enables the assembly of different antigens with a number of tags in a standardized manner making it simple for many people to work with. A first calculation based on the assumption of using about 15 antigens and four different tag systems resulted in a total of 120 constructs to be cloned. This underlines the need for a simplified cloning procedure.  
        $('#fifth').css({"z-index": "100"}); /* begin fifth */
+
         </p>
        $('#sixth').css({});
+
         <p>
         $('#seventh').css({});
+
We did not use one of the available iGEM standards as a new cloning site for several reasons.
         $('#eightth').css({});
+
         </p>
         distance = 5;
+
</div>
    }
+
  
    else if (distance ==5) {
+
<div class="floatbox right">
      console.log("Distance: "+distance);
+
         <p>
      $('#first').css({});
+
The RFCs are designed to enable serial assembly of various sequences, but the exchange of single parts at a later time point is not possible<sup><a class="fn_top" href="#fn__1" id="fnt__1" name="fnt__1">1)</a></sup>. In order to be able to exchange tags at the N-terminus as well as at the C-terminus, distinct restriction sites need to persist between the parts. Moreover, we first wanted to establish an expression cassette inserted between BioBrick pre- and suffix of the submission backbone <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a>. Therefore, making use of an additional RFC was not possible.
         $('#second').css({});
+
</p>
        $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 third */
+
</div>
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fourth */
+
<div style="clear:both"></div>
        $('#fifth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fifth */
+
        $('#sixth').css({"z-index": "100"}); /* begin sixth */
+
        $('#seventh').css({});
+
        $('#eightth').css({});
+
        distance = 6;
+
    }
+
  
    else if (distance == 6) {
 
      console.log("Distance: "+distance);
 
      $('#first').css({});
 
        $('#second').css({});
 
        $('#third').css({});
 
        $('#fourth').css({"z-index" : "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fourth */
 
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 fifth */
 
        $('#sixth').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 sixth */
 
        $('#seventh').css({"z-index": "100"}); /* begin seventh */
 
        $('#eightth').css({});
 
        distance = 7;
 
    }
 
  
    else if (distance == 7) {
 
      console.log("Distance: "+distance);
 
      $('#first').css({});
 
        $('#second').css({});
 
        $('#third').css({});
 
        $('#fourth').css({});
 
        $('#fifth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 fifth */
 
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 sixth */
 
        $('#seventh').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 seventh */
 
        $('#eightth').css({"z-index": "100"}); /* begin eightth */
 
        distance = 8;
 
    }
 
  
    else if (distance == 8) {
+
<div class="flexbox">
      console.log("Distance: "+distance);
+
<div class="thumb2 trien" style="width:680px">
      $('#first').css({"z-index": "100"}); /* begin first */
+
                <div class="thumbinner">
        $('#second').css({});
+
                    <a href="https://static.igem.org/mediawiki/2015/6/6c/150917_ownMCS_ls.png" class="lightbox_trigger">
        $('#third').css({});
+
                    <img src="https://static.igem.org/mediawiki/2015/6/6c/150917_ownMCS_ls.png" width="600px"
        $('#fourth').css({});
+
                    <div class="thumbcaption">
        $('#fifth').css({});
+
                  </a>
        $('#sixth').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 sixth */
+
                      <p><strong> Figure 1: Self-designed cloning site.</strong> Our cloning site containing the restriction sites <i>Acc</i>65I, <i>Bam</i>HI, <i>Hind</i>III and <i>Afl</i>II, that are assembled in a way that facilitates exchange of tags without getting a frame-shift.</p>
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 seventh */
+
                  </div>
        $('#eightth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 2 eightth */
+
              </div>
        distance = 1;
+
</div>
    }
+
</div>
 +
<div class="kommentar">
 +
Die buchstaben von Restirktionsenzymen immer kursiv - sind abgekürzte Artnamen. Im Text hab ichs geändert, aber nicht in der Abbildung (ps1709)
 +
</div>
  
    // see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery //
 
    // wait until css-animation has finished. time is specified in css-transition property //
 
    setTimeout(function(){
 
      $("#buttonleft").bind("click", moveleft);
 
    }, 1000);
 
  }
 
  
  
    $("#buttonright").bind("click", moveright);
 
  function moveright(e) {
 
  
    $("#buttonright").unbind();
+
<div class="floatbox left">
    console.log("Click "+distance);
+
<p>
 +
The basic idea was to have distinct restriction sites which can be used for the insertion of antigens, while others can be used for the exchange of tags. Finally, this resulted in a cloning site containing <i>Acc</i>65I, <i>Bam</i>HI, <i>Hind</i>III and <i>Afl</i>II restriction sites (figure 1). Using those sites for the assembly of different antigen-tag combinations will never result in a frameshift, if the coding sequence is in frame with the restriction sites flanking it.
 +
<br>
 +
The restriction sites have been chosen according to the amino acids that result from the translation of their sequence. <i>Acc</i>65I (G/GTACC) and <i>Bam</i>HI (G/GATCC) are translated into glycine and either serine or threonine.
 +
        </p>
 +
</div>
  
    if (distance == 1) {
+
<div class="floatbox right">
      $('#first').css({"z-index": "-100"}); /* 1 second */
+
         <p>
         $('#second').css({});
+
Those are hydrophilic, soluble amino acids, which are commonly used in flexible linkers. The translation of <i>Hind</i>III (A/AGCTT) results in lysine and leucin. Especially lysine is highly hydrophobic, which is why some soluble amino acids should be used as a linker in front of a C-terminal tag. The last restriction site, <i>Afl</i>II (C/TTAAG), is also translated to leucin and lysine. This will not highly affect protein function or folding since these are the last translated codons. Anyways, in order to prevent rapid protein degradation according to the N-end-rule in bacteria<sup><a class="fn_top" href="#fn__2" id="fnt__2" name="fnt__2">2)</a></sup>, a few additional amino acids have been inserted between the <i>Afl</i>II site and the stop codon (TGA).
        $('#third').css({});
+
</p>
        $('#fourth').css({});
+
</div>
        $('#fifth').css({});
+
<div style="clear:both"></div>
        $('#sixth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 6 third */
+
        $('#seventh').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 7 third */
+
        $('#eightth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"}); /* 8 first */
+
        distance = 8;
+
    }
+
  
    else if (distance ==2) {
+
            <div class="footnotes">
      console.log("Distance: "+distance);
+
            <div class="fn"><sup><a class="fn_bot" href="#fnt__1" id="fn__1" name="fn__1">1)</a></sup><a class="urlextern" href="http://dspace.mit.edu/handle/1721.1/21168" rel="nofollow" target="_Blank" title="http://dspace.mit.edu/handle/1721.1/21168">Knight T 2003. Idempotent Vector Design for Standard Assembly of BioBricks.</a></div>
      $('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 1 first */
+
            <div class="fn"><sup><a class="fn_bot" href="#fnt__2" id="fn__2" name="fn__2">2)</a></sup><a class="urlextern" href="http://www.sciencemag.org/content/254/5036/1374.long" rel="nofollow" target="_Blank" title="http://www.sciencemag.org/content/254/5036/1374.long">Tobias JW 1991. The N-end rule in bacteria. Science.</a></div>
        $('#second').css({"z-index": "-100"}); /* 2 second */
+
            </div>
        $('#third').css({});
+
</div>
        $('#fourth').css({});
+
        $('#fifth').css({});
+
        $('#sixth').css({});
+
        $('#seventh').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 7 third */
+
        $('#eightth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"}); /* 8 fourth */
+
        distance = 1;
+
    }
+
  
    else if (distance ==3) {
+
<!-- EDIT1 SECTION "Cloning site" [3-3437] -->
      console.log("Distance: "+distance);
+
      $('#first').css({"z-index": "100","transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 1 fourth */
+
        $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 2 first */
+
        $('#third').css({"z-index": "-100"}); /* 3 second */
+
        $('#fourth').css({});
+
        $('#fifth').css({});
+
        $('#sixth').css({});
+
        $('#seventh').css({});
+
        $('#eightth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 8 third */
+
        distance = 2;
+
    }
+
  
    else if (distance ==4) {
+
<span id="vector_design_anchor" class="anchor"></span>
      console.log("Distance: "+distance);
+
<div id="vector_design" class="content_box">
      $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 1 third */
+
<h1>2. Design of pET_iGEM</h1>
        $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 2 fourth */
+
        $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /*3 first */
+
        $('#fourth').css({"z-index": "-100"}); /* 4 second*/
+
        $('#fifth').css({});
+
        $('#sixth').css({});
+
        $('#seventh').css({});
+
        $('#eightth').css({});
+
        distance = 3;
+
    }
+
  
    else if (distance ==5) {
+
<div class="image_box right">
      console.log("Distance: "+distance);
+
<div class="thumb2 trien" style="width:260px">
      $('#first').css({});
+
                <div class="thumbinner">
        $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 2 third */
+
                    <a href="https://static.igem.org/mediawiki/2015/a/a1/Freiburg_labjournal-cloning-pig15_001neu.jpg" class="lightbox_trigger">
        $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 3 fourth */
+
                    <img src="https://static.igem.org/mediawiki/2015/a/a1/Freiburg_labjournal-cloning-pig15_001neu.jpg" width="250px">  
        $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 4 first */
+
                    <div class="thumbcaption">
        $('#fifth').css({"z-index": "-100"}); /* 5 second */
+
                  </a>
        $('#sixth').css({});
+
                      <p><strong>Figure 2: pIG15_001.</strong> <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a> backbone containing an altered cloning site in the middle of an expression cassette for improved assembly of protein coding sequences with different tags (N- or C-terminal), which avoids the formation of frameshifts. Important parts for overexpression of proteins in <i>E. coli</i> were added inside the RFC[10].</p>
        $('#seventh').css({});
+
                  </div>
        $('#eightth').css({});
+
              </div>
        distance = 4;
+
    }
+
 
+
    else if (distance == 6) {
+
      console.log("Distance: "+distance);
+
      $('#first').css({});
+
        $('#second').css({});
+
        $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 3 third */
+
        $('#fourth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 4 fourth */
+
        $('#fifth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 5 first */
+
        $('#sixth').css({"z-index": "-100"}); /* 6 second */
+
        $('#seventh').css({});
+
        $('#eightth').css({});
+
        distance = 5;
+
    }
+
 
+
    else if (distance == 7) {
+
      console.log("Distance: "+distance);
+
      $('#first').css({});
+
        $('#second').css({});
+
        $('#third').css({});
+
        $('#fourth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 4 third */
+
        $('#fifth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 5 fourth */
+
        $('#sixth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 6 first */
+
        $('#seventh').css({"z-index": "-100"}); /* 7 second */
+
        $('#eightth').css({});
+
        distance = 6;
+
    }
+
 
+
    else if (distance == 8) {
+
      console.log("Distance: "+distance);
+
      $('#first').css({});
+
        $('#second').css({});
+
        $('#third').css({});
+
        $('#fourth').css({});
+
        $('#fifth').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"}); /* 5 third */
+
        $('#sixth').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); /* 6 fourth */
+
        $('#seventh').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"}); /* 7 first */
+
        $('#eightth').css({"z-index": "-100"}); /* 8 second */
+
        distance = 7;
+
    }
+
 
+
    setTimeout(function(){
+
      $("#buttonright").bind("click", moveright);
+
    }, 1000);
+
  }
+
});
+
</script>
+
 
+
<div class="todo_box">
+
expand text s.t. it leads to system overview <br>
+
write appropriate content for slider: should present main subpoints of project in short sentence and link to them
+
 
</div>
 
</div>
 
<div class="header_box">   
 
<h1>The DiaCHIP - A Versatile Detection System</h1>
 
 
</div>
 
</div>
  
<div class="image_box left" style="margin-bottom:10%;margin-left:-8%;margin-top:-10%;margin-right:-10%">
 
  <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" height="1430px">
 
</div>
 
  
<div style="width:120%;margin-bottom:22%">
 
<div class="content_box3" style="margin-right:20%;margin-left:30%">
 
<h2>Project Motivation</h2>
 
 
<p>
 
<p>
        Serological tests are a key element in modern medicine. Especially for detection and identification of infectious diseases, performing several blood tests is inevitable. Testing for more than one disease at a time or diagnosing a patient with diffuse symptoms usually requires more than one serological test. Every single test that is performed increases the time of waiting for a result as well as the bill. In case of dangerous infectious diseases every minute until the onset of the appropriate treatment is important for life. What if there was a possibility to combine all this testing in one single chip which is affordable for everyone?
+
For protein expression, we designed two vectors based on the submission backbone <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a>. pIG15_001 (figure 2) was supposed to be adapted for inducible protein overexpression in <i>E. coli</i>. Therefore, we inserted main features derived from the commercial expression vector pET22b+ between the BioBrick pre- and suffix of <a href="http://parts.igem.org/Part:pSB1C3" target="_blank">pSB1C3</a>. These include a T7 promoter and terminator, a ribosomal binding site, the self-designed <a class="wikilink1" href="#cloning_site_anchor" title="Cloning site">cloning site</a> and a lacI expression cassette. Additionally, a pelB signal sequence for periplasmic translocation was added 5’ to the cloning site.
 
</p>
 
</p>
 +
<div class="kommentar">
 +
Der pIG15002 ist doch für eukaryotische Expression gewesen, nicht für cell-free. Sonst macht der CMV promoter wenig sinn, oder? ich pass den text mal dahingehend an...(ps1709)
 
</div>
 
</div>
 +
<div class="image_box left">
 +
<div class="thumb2 trien" style="width:260px">
 +
                <div class="thumbinner">
 +
                    <a href="https://static.igem.org/mediawiki/2015/a/ac/Freiburg_labjournal-cloning-pig15_002neu.jpg" class="lightbox_trigger">
 +
                    <img src="https://static.igem.org/mediawiki/2015/a/ac/Freiburg_labjournal-cloning-pig15_002neu.jpg" width="250px"> 
 +
                    <div class="thumbcaption">
 +
                  </a>
 +
                      <p><strong>Figure 3: pIG15_002.</strong> For expression in eukaryotic cells the <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a> backbone was altered similarly, but without a pelB secretion signal or lacI coding sequence and with a CMV promoter instead of a T7 promoter.</p>
 +
                  </div>
 +
              </div>
 +
</div>
 +
</div>
 +
  
<div class="content_box3" style="margin-left:38%;margin-right:12%">
 
<h2>Detecting Antigen-Antibody Interactions</h2>
 
 
<p>
 
<p>
  The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies serve as indicator for an immune response towards an infectious diseases or a successful vaccination. They also play an important role in the diagnosis of autoimmune diseases. Identifying diseases by detecting disease associated antibodies in a patient's serum is an established method in  <a href="https://2015.igem.org/Team:Freiburg/Design" title="diagnostics_today">modern diagnostics</a>. <br>
+
The vector for expression in mammalian cells(pIG15_002; figure 3) was designed analogously, but lacking the lacI expression cassette and the signal sequence. The T7 promoter and terminator were exchanged by a CMV promoter and a WPRE terminator region for secretion into the medium.  
Based on the very same principle, the DiaCHIP enables to simultaneously screen for multiple diseases at time, thereby reducing time and cost of a diagnosis. Especially the ability to differentiate between life threatening diseases and mild infections within a short time bears the potential to save lives.
+
<p>
 +
Unfortunately, after the first expression experiment in <i>E. coli</i>, we realized that the yields of protein expression are not sufficient for our purposes. Instead of wasting time trying to optimize our own expression vector, we went on using the original vector and modified the cloning site to fit our requirements. The original vector pET22b+ and the modified version pET_iGEM are compared in figure 4.
 
</p>
 
</p>
</div>
 
  
<div class="content_box3" style="margin-right:25%">
 
<h2>The Concept</h2>
 
 
<p>
 
<p>
  The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis of disease related antigens and a novel method for label-free detection - all this packed into one device. The idea is to overcome challenges commonly found in protein array production and preservation. In addition, results can be obtained in a time- and cost-efficient manner; with a device simple enough to be rebuilt by future iGEM Teams.
+
Using an adapted commercial expression vector finally resulted in sufficiently high protein yields. The advantages of expression vectors like pET22b+ in contrast to cloning vectors like <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a> are discussed in detail on the introduction page for <a  class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Description" title=„pOP“>pOP</a>. This is a plasmid backbone we submitted to the iGEM Registry that is optimized for protein overexpression purposes and fully compatible with iGEM idempotent cloning standards of RFC[25].
 +
</br>
 +
The backbone for cell-free expression was not changed because a PCR product of the expression cassette serves as a template for the actual expression purpose making the vector it is assembled on irrelevant. Using a high-copy plasmid as <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a> rather simplifies cloning efforts.  
 
</p>
 
</p>
</div>
 
  
 +
<div class="flexbox">
 +
<div class="thumb2 trien" style="width:1000px">
 +
                <div class="thumbinner">
 +
                    <a href="https://static.igem.org/mediawiki/2015/b/b9/150917_pETComp_WIKI2neu_LS.png" class="lightbox_trigger">
 +
                    <img src="https://static.igem.org/mediawiki/2015/b/b9/150917_pETComp_WIKI2neu_LS.png" width="780px"> 
 +
                    <div class="thumbcaption">
 +
                  </a>
 +
                      <p><strong>Figure 4: Comparison of pET_iGEM and pET22b+.</strong> The two vectors differ in the cloning site that contains only four restriction sites in pET_iGEM (<i>Acc</i>65I, <i>Bam</i>HI, <i>Hind</i>III, <i>Afl</i>II) compared to the more complex multiple cloning site of the original pET22b+ (<i>BamHI</i>, <i>Eco</i>RI, <i>Sac</i>I, <i>Sal</i>I, <i>Hind</i>III, <i>Not</i>I, <i>Ava</i>I, <i>Xho</i>I). The 6xHis-Tag from pET22b+ was also removed to enable easy tag-exchanges with our system.</p>
 +
                  </div>
 +
              </div>
 +
</div>
 +
</div>
 
</div>
 
</div>
  
  
  
 +
<span id="detailed_cloning_anchor" class="anchor"></span>
 +
<div id="detailed_cloning" class="content_box">
 +
  <h1>3. Detailed Cloning Strategy</h1>
 +
  <p>
 +
As mentioned before, we established a cloning strategy, which is easy to handle for a team of researchers working together on the same project. It facilitates easy exchange of tags for custom purposes. All our cloning efforts began with either pET_iGEM, the modified version of pET22b+, for <i>E. coli</i>-based protein expression or pIG15_104, where the expression site derived from pET22b+ was inserted into <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a>.
  
<!---------------BEGIN SLIDER------------------>
+
        <h3>The Basic Constructs (Protein Purification Using <i>E. coli</i>)</h3>
<div class="container">
+
        <p>
  <div id="buttonright">
+
<span class="biobrick_emphasize"><strong>pET_iGEM</strong></span>: To modify the multiple cloning site of pET22b+ for our purposes, we performed a Gibson Assembly with only one fragment. Therefore, we designed primers for the amplification of the whole plasmid, except the MCS. The cloning site we designed ourselves was part of the primer extension.
    <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
+
        </p>
  </div>
+
        <p>
  <div id="buttonleft">
+
<span class="biobrick_emphasize"><strong>pET_803</strong></span>: To insert the very small but commonly used His-tag, we again used Gibson Assembly because classical cloning of such small parts can be a challenging task. The respective primers were designed for amplification of <a class="media" href="http://parts.igem.org/Part:BBa_K1621002" target="_blank" title="BBa_1621002">antigen 8 (Herpes Simplex Virus Type 1, glycoprotein G1)</a> to combine the insertion of the tag and an antigen. While the forward primer was a regular Gibson primer, the reverse primer additionally contained the sequence of a 10xHis-tag. After amplification, the part was inserted into the <i>Bam</i>HI and <i>Afl</i>II digested backbone pET_iGEM resulting in the first antigen with N-terminal His-tag.
    <img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
+
        </p>
  </div>
+
        <p>
  <div id="content-slider">
+
<span class="biobrick_emphasize"><strong>pET_804</strong></span>: Another tag we wanted to use for immobilization of the antigens on the surface is the <a class="media" href="http://parts.igem.org/Part:BBa_K1159201" target="_blank" title="BBa_K1158201">SpyTag</a>. This part of 39 bp length was inserted into pET_iGEM analogous to the 10xHis-tag. The only difference was that the forward primer for amplification of antigen 8 included a standard 6xHis-tag, which enables the purification of the protein. Consistent with our cloning strategy, the amplified part was inserted between <i>Acc</i>65I and <i>Afl</i>II as it contains an N-terminal as well as a C-terminal tag. <i>Bam</i>HI and <i>Hind</i>III restriction sites were retained flanking the antigen making it freely exchangeable.
      <div id="slider"> <!-- Slider container -->
+
        </p>
        <div id="mask"> <!-- Mask -->
+
        <p>
          <ul>
+
<span class="biobrick_emphasize"><strong>pET_805</strong></span>: The only tag we used that was not inserted via Gibson Assembly was the HaloTag. With a length of about 900 bp, classical cloning of this part was no trouble. The <a class="wikilik1" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry#halo_surface_anchor" titlre="halo">HaloTag</a> exists in two variants, one being optimized for C-terminal tagging of the protein, the other for N-terminal tagging. As the tag we had access to was the C-terminal one, the SpyTag in pET_804 was exchanged using the restriction sites <i>Hind</i>III and <i>Afl</i>II resulting in <b>pET_805</b>.
 +
        </p>
  
            <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 
              <div class="artboard">
 
              <div class="sliderimage" style="margin-top:10%">
 
                <img src="https://static.igem.org/mediawiki/2015/6/6a/Freiburg_DiaCHIP_overview_scaled.jpg" width="350px">
 
              </div>
 
              <div class="slidertext">
 
                <h1>The DiaCHIP - System Overview</h1>
 
                <p>The core of our new diagnostic device are two slides that form a microfluidic chamber. Therein an antigen array can be generated on demand on the bottom slide. By flushing the chamber with a blood sample, binding of antibodies present in the sample is detected with the optical detection method iRIf in real-time.</p>
 
                <p style="margin-top:30px">
 
              <div class="intro_button menu-arrow">         
 
                <a href="https://2015.igem.org/Team:Freiburg/Project/System" title="System Overview">Step by Step Overview</a>
 
              </div>
 
                </p>
 
  
              </div>
+
<h3 class="sectionedit2">Tagged Constructs (Protein Purification Using <i>E. coli</i>)</h3>
              </div>
+
<p>
            </li>
+
We wanted to establish a tag-system, which minimizes unspecific binding of proteins to the chip surface, therefore testing different <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry" title="tag_systems">tag systems</a>.
 +
</p>
  
 +
<p>
 +
<span class="biobrick_emphasize"><strong>His-tag</strong></span>: Every antigen was genetically fused to a C-terminal 10xHis-tag, which could be used for its immobilization on the surface as well as for its purification. The basic construct for this purpose was pET_803. The <a class="media" href="http://parts.igem.org/Part:BBa_K1621002" target="_blank" title="BBa_1621002">Herpes Simplex Virus derived antigen</a>, which was initially finished cloning, had to be excised by restriction with <i>Bam</i>HI and <i>Hind</i>III. Thus, all the other antigens digested in the same way could be ligated into this backbone.
 +
</p>
  
            <li id="second" class="secondanimation">
+
<p>
              <div class="artboard">
+
<span class="biobrick_emphasize"><strong>SpyTag</strong></span>: Another tag for surface immobilization of the antigen is the <a class="media" href="http://parts.igem.org/Part:BBa_K1159201" target="_blank" title="BBa_K1158201">SpyTag</a>. To enable protein purification via Ni-NTA columns proteins fused to the SpyTag were additionally fused to a C-terminal 6xHis-tag. The basic vector for cloning these constructs was pET_804. Excision of the <a class="media" href="http://parts.igem.org/Part:BBa_K1621002" target="_blank" title="BBa_1621002">Herpes Simplex Virus derived antigen</a> and insertion of other antigens was performed analogous to the antigen exchange in His-tag constructs.
              <div class="sliderimage">
+
</p>
                <img src="" width="350px">
+
              </div>
+
              <div class="slidertext">
+
                <h1>Outlook</h1>
+
                <p></p>
+
              </div>
+
              <div class="slidertext indent">
+
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Practices">more</a>?</p>
+
              </div>
+
              </div>
+
            </li>
+
  
 +
<p>
 +
<span class="biobrick_emphasize"><strong>HaloTag</strong></span>: As a second covalent tag-system for immobilization of the antigens on the surface we used the HaloTag, which specifically binds to a <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry#halo_surface_anchor" title="halo_surface">chloroalkane surface</a>. Using our own cloning strategy, the HaloTag could easily be inserted between <i>Hind</i>III and <i>Afl</i>II, using pET_803 as basis. Cloning of the HaloTag into pET_803 leads to a new vector, pET_805. This vector is then used to substitute the antigens. As in the SpyTag construct, this new vector contains a C-terminal 6xHis-tag for purification of the antigens.
 +
</p>
  
            <li id="third" class="thirdanimation">
 
              <div class="artboard">
 
              <div class="sliderimage" style="margin:6% auto">
 
                <img src="https://static.igem.org/mediawiki/2015/d/db/Freiburg_iRiF_slider.png" width="70%">
 
              </div>
 
              <div class="slidertext">
 
                <h1>Optical Detection: iRIf</h1>
 
                <p>One disadvantage of currently available serological tests is the need for secondary labels that allow the detection of disease markers. Making use of an optical method based on the interference of light, the DiaCHIP can detect specific binding events on a protein microarray without further labeling. Read more about this innovative tool and the physics behind it.
 
                </p>
 
  
                <p style="margin-top:30px">
+
<h3 class="sectionedit2">Cell-Free Backbone</h3>
              <div class="intro_button menu-arrow">        
+
<p>
                <a href="https://2015.igem.org/Team:Freiburg/Project/iRIf" title="Optical Detection">iRIf Principle and Physics</a>
+
As described above we decided to use the <a class="media" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a> standard vector as backbone for our <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression" title="cellfree">cell-free expression</a> constructs. Inserted between the <a class="wikilink1" href="http://parts.igem.org/Help:Standards/Assembly/RFC10" target="_blank" title="RFC10">RFC 10</a> prefix and suffix is our own cloning site, containing the following restriction sites: <i>Acc</i>65I, <i>Bam</i>HI, <i>Hind</i>III and <i>Afl</i>II. We included a T7 promoter and a ribosomal binding site between the <a class="urlextern" href="http://parts.igem.org/Help:Standards/Assembly/RFC10" target="_blank" title="RFC10">RFC 10</a> prefix and the <i>Acc</i>65I restriction site. A stop codon cassette and a T7 terminator were inserted between the <i>Afl</i>II restriction site and the <a class="urlextern" href="http://parts.igem.org/Help:Standards/Assembly/RFC10" target="_blank" title="RFC10">RFC 10</a> suffix. These similarities to the expression vector facilitate the easy exchange of fragments between the standard expression vector and the cell-free expression vector. Using our cloning site it is rather simple to exchange different tag-combinations. The advantage of the <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a> backbone is the high copy origin, allowing a rapid multiplication and easy cloning. For the cell-free expression itself the vector backbone is dispensable as only the part amplified via PCR between the prefix and the suffix is mandatory for cell-free expression.
              </div>
+
</p>
                </p>
+
  
              </div>
 
              </div>
 
            </li>
 
  
 
+
<h3 class="sectionedit2">The Basic Constructs (Cell-Free Expression)</h3>
            <li id="fourth" class="fourthanimation">
+
<p>
              <div class="artboard">
+
<span class="biobrick_emphasize"><strong>pIG15_104</strong></span>: For the first basic construct we ordered a gBlock from <a class="urlextern" href="https://eu.idtdna.com/site" target="_blank" title="IDT">IDT</a> containing the T7 promoter, ribosomal binding site, our cloning site and the T7 terminator with adjoining stop codon cassette. Between <i>Bam</i>HI and <i>Hind</i>III the coding sequence for tYFP and between <i>Hind</i>III and <i>Afl</i>II the SpyTag sequence was inserted. This gBlock was then inserted into the pJET1.2 vector. Afterwards, it was digested out of pJET1.2 and classically cloned into the <a class="urlextern" href="http://parts.igem.org/Part:pSB1C3" target="_blank" title="pSB1C3">pSB1C3</a> backbone resulting in the first basic construct for cell-free expression. We inserted tYFP as default fragment into the cell-free expression backbone because we already had some anti-tYFP antibody available. Hence, first measurements for analyzing the binding of anti-tYFP to tYFP could be performed as soon as the basic construct was finished. Besides, tYFP could be used as reporter. Using <i>Bam</i>HI and <i>Hind</i>III restriction sites tYFP could be excised and replaced by antigen sequences analogous to the cloning system used for the expression vector.
              <div class="sliderimage" style="margin:8% auto">
+
                <img src="https://static.igem.org/mediawiki/2015/0/03/Freiburg_specific_surface_RJ_preview.jpg" width="230px">
+
              </div>
+
              <div class="slidertext">  
+
                <h1>Surface Chemistry</h1>
+
                <p>The production of a customized protein microarray in the DiaCHIP is based on selective immobilization of antigens on a glass slide. Therefore, a specific surface chemistry needs to be established in order to reduce the proportion of unspecific binding of non-target proteins to a minimum.
+
                  Read more about the different layer compositions we tested on our way to high specificity.
+
                </p>
+
 
+
                <p style="margin-top:30px">
+
              <div class="intro_button menu-arrow">         
+
                <a href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry" title="Surface Chemistry">Establishing a Specific Surface</a>
+
              </div>
+
                </p>
+
 
+
              </div>
+
              </div>
+
            </li>
+
 
+
 
+
            <li id="fifth" class="fifthanimation">
+
              <div class="artboard">
+
              <div class="sliderimage">
+
                <img src="" width="350px">
+
              </div>
+
              <div class="slidertext">  
+
                <h1>Protein Purification</h1>
+
                <p>Protein expression in the DiaCHIP is mediated by cell-free expression. As this is an advanced method dependent on the optimization of many parameters, we got back to conventional protein purification in <i>E. coli</i> for being able to compare the results of both techniques. <br>
+
Read more about the overexpression and purification of several antigenic peptides. 
+
                </p>
+
 
+
                <p style="margin-top:30px">
+
              <div class="intro_button menu-arrow">         
+
                <a href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification" title="Protein Purification">Purification of Antigens</a>
+
              </div>
+
                </p>
+
 
+
              </div>
+
              </div>
+
            </li>
+
 
+
 
+
            <li id="sixth" class="sixthanimation">
+
              <div class="artboard">
+
              <div class="sliderimage">
+
                <img src="" width="350px">
+
              </div>
+
              <div class="slidertext">
+
                <h1>Cell-Free Expression</h1>
+
                <p> A key feature of the DiaCHIP is the capability to produce protein arrays on demand via cell-free expression.  
+
 
</p>
 
</p>
              </div>
 
              <div class="slidertext indent">
 
                <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Results">more?</a></p>
 
              </div>
 
              </div>
 
            </li>
 
  
 
+
<p>
            <li id="seventh" class="seventhanimation">
+
<span class="biobrick_emphasize"><strong>pIG15_105</strong></span>: Using the <i>Hind</i>III and <i>Afl</i>II restriction sites, the SpyTag sequence was excised from pIG15_104. For our second covalent tag system we inserted the sequence for the HaloTag via classical cloning and thereby producing our next basic construct for cell-free expression, pIG15_105. This backbone again contains tYFP as default insert, this time with a C-terminal HaloTag.<br>
              <div class="artboard">
+
Using identical cloning strategies as with the first basic construct (pIG15_104) all antigen sequences could be inserted into this vector using <i>Bam</i>HI and <i>Hind</i>III.
              <div class="sliderimage">
+
                <img src="<!--https://static.igem.org/mediawiki/2015/3/3a/Freiburg_pOP_home_scaled.png-->" width="350px">
+
              </div>
+
              <div class="slidertext">  
+
                <h1>DNA Engineering</h1>
+
                <p>Genetic fusion of different antigens and tags is a basic requirement of our project. In order to enable several people to work in parallel we designed a cloning strategy easy to follow and additionally easy to expand for further needs.
+
Read more about combining different cloning methods to reduce efforts in <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" class="wikilink1">DNA Engineering.</a>
+
 
</p>
 
</p>
  
                <p style="margin-top:10%">
+
</div> <!--- End of content box -->
              <div class="intro_button menu-arrow">         
+
                <a href="https://2015.igem.org/Team:Freiburg/Methods/Cloning" title="DNA Engineering">DNA Engineering</a>
+
              </div>
+
                </p>
+
 
+
              </div>
+
              </div>
+
            </li>
+
 
+
 
+
            <li id="eightth" class="eightthanimation">
+
              <div class="artboard">
+
              <div class="sliderimage">
+
                <img src="" width="350px">
+
              </div>
+
              <div class="slidertext">
+
                <h1>Diagnostics Today</h1>
+
                <p>Currently used serological tests are available for a broad range of infectious diseases. However, they meet limitations that can be life-saving for some patient groups. The necessity of performing several tests in order to check for more than one disease at once is not only time-consuming but also costly. The DiaCHIP tackles these issues by providing a fast and affordable method for simultaneous testing.
+
                </p>
+
 
+
                <p style="margin-top:30px">
+
              <div class="intro_button menu-arrow">         
+
                <a href="https://2015.igem.org/Team:Freiburg/Design" title="Diagnostics today">Limitations and Solutions</a>
+
              </div>
+
                </p>
+
 
+
              </div>
+
            </li>
+
 
+
        </ul>
+
        </div>  <!-- End Mask -->
+
      </div>  <!-- End Slider Container -->
+
  </div>
+
</div>
+
  
 
</html>
 
</html>
<!-- Labjournal content ends here -->
 
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Revision as of 08:55, 18 September 2015

""

DNA Engineering

A protein array containing different antigens specific for distinct diseases is one of the main parts of the DiaCHIP. Manufacturing this array can be done by conventional protein expression and spotting of the proteins on a specific surface by hand or via cell-free expression. Both systems are based on different expression backbones. Therefore, a lot of cloning was required to obtain all constructs.
To reduce this ambitious task to a minimum of effort, we elaborated a well-structured cloning strategy including a self-designed multiple cloning site. The cloning site for these purposes was incorporated into the commercial expression vector pET22b+ resulting in pET_iGEM.

We soon realized that protein expression is probably a problem many iGEM Teams around the world are facing during their projects. Therefore, we decided to improve the plasmid backbone pSB6A1 for protein overexpression providing the Registry with pOP, an expression backbone suitable for iGEM standard cloning procedures.
To help future iGEM Teams with their decision, which cloning method to use, we compared and contrasted classical cloning and Gibson Assembly in a short review.

1. Our Cloning Site

The cloning site we developed enables the assembly of different antigens with a number of tags in a standardized manner making it simple for many people to work with. A first calculation based on the assumption of using about 15 antigens and four different tag systems resulted in a total of 120 constructs to be cloned. This underlines the need for a simplified cloning procedure.

We did not use one of the available iGEM standards as a new cloning site for several reasons.

The RFCs are designed to enable serial assembly of various sequences, but the exchange of single parts at a later time point is not possible1). In order to be able to exchange tags at the N-terminus as well as at the C-terminus, distinct restriction sites need to persist between the parts. Moreover, we first wanted to establish an expression cassette inserted between BioBrick pre- and suffix of the submission backbone pSB1C3. Therefore, making use of an additional RFC was not possible.

Figure 1: Self-designed cloning site. Our cloning site containing the restriction sites Acc65I, BamHI, HindIII and AflII, that are assembled in a way that facilitates exchange of tags without getting a frame-shift.

Die buchstaben von Restirktionsenzymen immer kursiv - sind abgekürzte Artnamen. Im Text hab ichs geändert, aber nicht in der Abbildung (ps1709)

The basic idea was to have distinct restriction sites which can be used for the insertion of antigens, while others can be used for the exchange of tags. Finally, this resulted in a cloning site containing Acc65I, BamHI, HindIII and AflII restriction sites (figure 1). Using those sites for the assembly of different antigen-tag combinations will never result in a frameshift, if the coding sequence is in frame with the restriction sites flanking it.
The restriction sites have been chosen according to the amino acids that result from the translation of their sequence. Acc65I (G/GTACC) and BamHI (G/GATCC) are translated into glycine and either serine or threonine.

Those are hydrophilic, soluble amino acids, which are commonly used in flexible linkers. The translation of HindIII (A/AGCTT) results in lysine and leucin. Especially lysine is highly hydrophobic, which is why some soluble amino acids should be used as a linker in front of a C-terminal tag. The last restriction site, AflII (C/TTAAG), is also translated to leucin and lysine. This will not highly affect protein function or folding since these are the last translated codons. Anyways, in order to prevent rapid protein degradation according to the N-end-rule in bacteria2), a few additional amino acids have been inserted between the AflII site and the stop codon (TGA).

2. Design of pET_iGEM

Figure 2: pIG15_001. pSB1C3 backbone containing an altered cloning site in the middle of an expression cassette for improved assembly of protein coding sequences with different tags (N- or C-terminal), which avoids the formation of frameshifts. Important parts for overexpression of proteins in E. coli were added inside the RFC[10].

For protein expression, we designed two vectors based on the submission backbone pSB1C3. pIG15_001 (figure 2) was supposed to be adapted for inducible protein overexpression in E. coli. Therefore, we inserted main features derived from the commercial expression vector pET22b+ between the BioBrick pre- and suffix of pSB1C3. These include a T7 promoter and terminator, a ribosomal binding site, the self-designed cloning site and a lacI expression cassette. Additionally, a pelB signal sequence for periplasmic translocation was added 5’ to the cloning site.

Der pIG15002 ist doch für eukaryotische Expression gewesen, nicht für cell-free. Sonst macht der CMV promoter wenig sinn, oder? ich pass den text mal dahingehend an...(ps1709)

Figure 3: pIG15_002. For expression in eukaryotic cells the pSB1C3 backbone was altered similarly, but without a pelB secretion signal or lacI coding sequence and with a CMV promoter instead of a T7 promoter.

The vector for expression in mammalian cells(pIG15_002; figure 3) was designed analogously, but lacking the lacI expression cassette and the signal sequence. The T7 promoter and terminator were exchanged by a CMV promoter and a WPRE terminator region for secretion into the medium.

Unfortunately, after the first expression experiment in E. coli, we realized that the yields of protein expression are not sufficient for our purposes. Instead of wasting time trying to optimize our own expression vector, we went on using the original vector and modified the cloning site to fit our requirements. The original vector pET22b+ and the modified version pET_iGEM are compared in figure 4.

Using an adapted commercial expression vector finally resulted in sufficiently high protein yields. The advantages of expression vectors like pET22b+ in contrast to cloning vectors like pSB1C3 are discussed in detail on the introduction page for pOP. This is a plasmid backbone we submitted to the iGEM Registry that is optimized for protein overexpression purposes and fully compatible with iGEM idempotent cloning standards of RFC[25].
The backbone for cell-free expression was not changed because a PCR product of the expression cassette serves as a template for the actual expression purpose making the vector it is assembled on irrelevant. Using a high-copy plasmid as pSB1C3 rather simplifies cloning efforts.

Figure 4: Comparison of pET_iGEM and pET22b+. The two vectors differ in the cloning site that contains only four restriction sites in pET_iGEM (Acc65I, BamHI, HindIII, AflII) compared to the more complex multiple cloning site of the original pET22b+ (BamHI, EcoRI, SacI, SalI, HindIII, NotI, AvaI, XhoI). The 6xHis-Tag from pET22b+ was also removed to enable easy tag-exchanges with our system.

3. Detailed Cloning Strategy

As mentioned before, we established a cloning strategy, which is easy to handle for a team of researchers working together on the same project. It facilitates easy exchange of tags for custom purposes. All our cloning efforts began with either pET_iGEM, the modified version of pET22b+, for E. coli-based protein expression or pIG15_104, where the expression site derived from pET22b+ was inserted into pSB1C3.

The Basic Constructs (Protein Purification Using E. coli)

pET_iGEM: To modify the multiple cloning site of pET22b+ for our purposes, we performed a Gibson Assembly with only one fragment. Therefore, we designed primers for the amplification of the whole plasmid, except the MCS. The cloning site we designed ourselves was part of the primer extension.

pET_803: To insert the very small but commonly used His-tag, we again used Gibson Assembly because classical cloning of such small parts can be a challenging task. The respective primers were designed for amplification of antigen 8 (Herpes Simplex Virus Type 1, glycoprotein G1) to combine the insertion of the tag and an antigen. While the forward primer was a regular Gibson primer, the reverse primer additionally contained the sequence of a 10xHis-tag. After amplification, the part was inserted into the BamHI and AflII digested backbone pET_iGEM resulting in the first antigen with N-terminal His-tag.

pET_804: Another tag we wanted to use for immobilization of the antigens on the surface is the SpyTag. This part of 39 bp length was inserted into pET_iGEM analogous to the 10xHis-tag. The only difference was that the forward primer for amplification of antigen 8 included a standard 6xHis-tag, which enables the purification of the protein. Consistent with our cloning strategy, the amplified part was inserted between Acc65I and AflII as it contains an N-terminal as well as a C-terminal tag. BamHI and HindIII restriction sites were retained flanking the antigen making it freely exchangeable.

pET_805: The only tag we used that was not inserted via Gibson Assembly was the HaloTag. With a length of about 900 bp, classical cloning of this part was no trouble. The HaloTag exists in two variants, one being optimized for C-terminal tagging of the protein, the other for N-terminal tagging. As the tag we had access to was the C-terminal one, the SpyTag in pET_804 was exchanged using the restriction sites HindIII and AflII resulting in pET_805.

Tagged Constructs (Protein Purification Using E. coli)

We wanted to establish a tag-system, which minimizes unspecific binding of proteins to the chip surface, therefore testing different tag systems.

His-tag: Every antigen was genetically fused to a C-terminal 10xHis-tag, which could be used for its immobilization on the surface as well as for its purification. The basic construct for this purpose was pET_803. The Herpes Simplex Virus derived antigen, which was initially finished cloning, had to be excised by restriction with BamHI and HindIII. Thus, all the other antigens digested in the same way could be ligated into this backbone.

SpyTag: Another tag for surface immobilization of the antigen is the SpyTag. To enable protein purification via Ni-NTA columns proteins fused to the SpyTag were additionally fused to a C-terminal 6xHis-tag. The basic vector for cloning these constructs was pET_804. Excision of the Herpes Simplex Virus derived antigen and insertion of other antigens was performed analogous to the antigen exchange in His-tag constructs.

HaloTag: As a second covalent tag-system for immobilization of the antigens on the surface we used the HaloTag, which specifically binds to a chloroalkane surface. Using our own cloning strategy, the HaloTag could easily be inserted between HindIII and AflII, using pET_803 as basis. Cloning of the HaloTag into pET_803 leads to a new vector, pET_805. This vector is then used to substitute the antigens. As in the SpyTag construct, this new vector contains a C-terminal 6xHis-tag for purification of the antigens.

Cell-Free Backbone

As described above we decided to use the pSB1C3 standard vector as backbone for our cell-free expression constructs. Inserted between the RFC 10 prefix and suffix is our own cloning site, containing the following restriction sites: Acc65I, BamHI, HindIII and AflII. We included a T7 promoter and a ribosomal binding site between the RFC 10 prefix and the Acc65I restriction site. A stop codon cassette and a T7 terminator were inserted between the AflII restriction site and the RFC 10 suffix. These similarities to the expression vector facilitate the easy exchange of fragments between the standard expression vector and the cell-free expression vector. Using our cloning site it is rather simple to exchange different tag-combinations. The advantage of the pSB1C3 backbone is the high copy origin, allowing a rapid multiplication and easy cloning. For the cell-free expression itself the vector backbone is dispensable as only the part amplified via PCR between the prefix and the suffix is mandatory for cell-free expression.

The Basic Constructs (Cell-Free Expression)

pIG15_104: For the first basic construct we ordered a gBlock from IDT containing the T7 promoter, ribosomal binding site, our cloning site and the T7 terminator with adjoining stop codon cassette. Between BamHI and HindIII the coding sequence for tYFP and between HindIII and AflII the SpyTag sequence was inserted. This gBlock was then inserted into the pJET1.2 vector. Afterwards, it was digested out of pJET1.2 and classically cloned into the pSB1C3 backbone resulting in the first basic construct for cell-free expression. We inserted tYFP as default fragment into the cell-free expression backbone because we already had some anti-tYFP antibody available. Hence, first measurements for analyzing the binding of anti-tYFP to tYFP could be performed as soon as the basic construct was finished. Besides, tYFP could be used as reporter. Using BamHI and HindIII restriction sites tYFP could be excised and replaced by antigen sequences analogous to the cloning system used for the expression vector.

pIG15_105: Using the HindIII and AflII restriction sites, the SpyTag sequence was excised from pIG15_104. For our second covalent tag system we inserted the sequence for the HaloTag via classical cloning and thereby producing our next basic construct for cell-free expression, pIG15_105. This backbone again contains tYFP as default insert, this time with a C-terminal HaloTag.
Using identical cloning strategies as with the first basic construct (pIG15_104) all antigen sequences could be inserted into this vector using BamHI and HindIII.