Difference between revisions of "Team:Freiburg/testpage"

 
(166 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Freiburg/CSS}}
 
{{Freiburg/CSS}}
−
{{Freiburg/MenubarTest}}
+
{{Freiburg/Menubar}}
  
 
{{Freiburg/wiki_content_start}}
 
{{Freiburg/wiki_content_start}}
 
<html>
 
<html>
−
 
 
<style>
 
<style>
 
/*========= BEGIN: style for navigation bar ==========*/
 
/*========= BEGIN: style for navigation bar ==========*/
−
#project {
+
#results {
−
     background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat;
+
     background: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_icon_results_active_yellow.png) no-repeat;
 
}
 
}
  
−
#project a {
+
#results a {
 
     color: #ecdc18;
 
     color: #ecdc18;
 
}
 
}
  
 
#runningchip {
 
#runningchip {
−
     left: 18.6%;
+
     left: 52%;
 
}
 
}
 
/*========= END: style for navigation bar ==========*/
 
/*========= END: style for navigation bar ==========*/
  
−
/* code adapted from http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/*/
+
.responsive_center_image{
−
 
+
    text-align: center;
−
#slider {
+
   }
−
  background: #FCFCFC;
+
.responsive_center_image img{
−
   height: 500px;
+
    max-width: 100%;
−
  width: 900px;
+
    height: auto;
−
  overflow: visible;
+
    width: auto\9; /* ie8 */
−
  position: relative;
+
 
}
 
}
  
−
/* hides everything outside the slider box */
+
</style>
−
#mask {
+
−
  overflow: hidden;
+
−
  height: 500px;
+
−
}
+
  
−
/* initialize position for positioning slides outside the slider */
+
<div class="content_box">
−
#slider ul {
+
<h2> Modeling</h2>
−
  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;
 
−
}
 
  
 +
<div class="highlightBox">
 +
<h4>Note</h4>
  
−
#first,
+
</div>
−
#second,
+
<!-- begin formula -->
−
#third,
+
<div class="responsive_center_image">
−
#fourth{
+
<img src="https://static.igem.org/mediawiki/2015/c/c8/Freiburg_MOD_01_PDE.png" width="600">
−
  left: -1000px;
+
</div>
−
  -ms-transition: tranform 1s ease;
+
<!-- end formula -->
−
  -webkit-transition: transform 1s ease;
+
−
  transition: transform 1s ease;
+
−
  font-size: 100%;
+
−
}
+
  
−
#first{left: 0;}
+
<!-- begin formula -->
−
#third{z-index : -100;}
+
<div class="responsive_center_image">
−
#fourth{z-index: -100; left: 1000px;}
+
<img src="https://static.igem.org/mediawiki/2015/1/12/Freiburg_MOD_02_Diffterm.png" width="500">
 +
</div>
 +
<!-- end formula -->
  
−
.container{
+
<!-- begin formula -->
−
    position: relative;
+
<div class="responsive_center_image">
−
    height: 500px;
+
<img src="https://static.igem.org/mediawiki/2015/d/dd/Freiburg_MOD_03_Convterm.png" width="350">
−
    margin: 3% 0;
+
</div>
−
    width: 1000px;
+
<!-- end formula -->
−
}
+
  
−
#buttonleft {
+
<!-- begin formula -->
−
  z-index: 200;
+
<div class="responsive_center_image">
−
  position: absolute;
+
<img src="https://static.igem.org/mediawiki/2015/8/85/Freiburg_MOD_04_Velocity.png" width="500">
−
  top: 190px;
+
</div>
−
  left: 0;
+
<!-- end formula -->
−
}
+
  
−
#buttonright{
+
<!-- begin formula -->
−
  z-index: 200;
+
<div class="responsive_center_image">
−
  position: absolute;
+
<img src="https://static.igem.org/mediawiki/2015/c/c1/Freiburg_MOD_05_General_Production.png" width="500">
−
  right: 0;
+
</div>
−
  top: 190px;
+
<!-- end formula -->
−
}
+
  
−
#buttonleft img,
+
<!-- begin formula -->
−
#buttonright img{
+
<div class="responsive_center_image">
−
  width: 50px;
+
<img src="https://static.igem.org/mediawiki/2015/5/53/Freiburg_MOD_06_Taylor.png" width="600">
−
}
+
</div>
 +
<!-- end formula -->
  
−
#content-slider{
+
<!-- begin formula -->
−
  position: absolute;
+
<div class="responsive_center_image">
−
  top:0;
+
<img src="https://static.igem.org/mediawiki/2015/9/9e/Freiburg_MOD_07_Crank_Nicholson.png" width="600">
−
  left:50px
+
</div>
−
}
+
<!-- end formula -->
  
 +
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/3/37/Freiburg_MOD_08_DXDZ.png" width="150">
 +
</div>
 +
<!-- end formula -->
  
−
#buttonright:hover,
+
<!-- begin formula -->
−
#buttonleft:hover{
+
<div class="responsive_center_image">
−
  cursor: pointer;
+
<img src="https://static.igem.org/mediawiki/2015/9/94/Freiburg_MOD_09_Disc.png" width="600">
−
  cursor: hand;
+
</div>
−
}
+
<!-- end formula -->
  
−
.container{
+
<!-- begin formula -->
−
  position: relative;
+
<div class="responsive_center_image">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/4/48/Freiburg_MOD_10_Diff_Expan.png" width="700">
 +
</div>
 +
<!-- end formula -->
  
−
.artboard{
+
<!-- begin formula -->
−
    box-sizing: border-box;
+
<div class="responsive_center_image">
−
    height: 470px;
+
<img src="https://static.igem.org/mediawiki/2015/4/48/Freiburg_MOD_11_Lambda_Mu.png" width="300">
−
    border-radius: 60px;
+
</div>
−
    background-color: rgba(0, 81, 162, 0.3);
+
<!-- end formula -->
−
}
+
  
−
.sliderimage{
+
<!-- begin formula -->
−
  float: right;
+
<div class="responsive_center_image">
−
  margin: 3% 75px 3% 25px;
+
<img src="https://static.igem.org/mediawiki/2015/c/c8/Freiburg_MOD_12_CN_Scheme.png" width="700">
−
  width: 350px
+
</div>
−
}
+
<!-- end formula -->
  
−
.slidertext{
+
<!-- begin formula -->
−
  margin: 3% 25px 0 75px;
+
<div class="responsive_center_image">
−
  width: 350px;
+
<img src="https://static.igem.org/mediawiki/2015/9/90/Freiburg_MOD_13_Conc_Vec.png" width="700">
−
  text-align: justify;
+
</div>
−
  line-height: 1;
+
<!-- end formula -->
−
  float: left;
+
−
}
+
  
−
.slidertext h1{
+
<!-- begin formula -->
−
  text-align: left;
+
<div class="responsive_center_image">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/7/75/Freiburg_MOD_14_Prot_F.png" width="600">
 +
</div>
 +
<!-- end formula -->
  
−
.slidertext p{
+
<!-- begin formula -->
−
margin-bottom: 0;
+
<div class="responsive_center_image">
−
}
+
<img src="https://static.igem.org/mediawiki/2015/5/52/Freiburg_MOD_15_F_Vec.png" width="500">
 +
</div>
 +
<!-- end formula -->
  
−
.slidertext.indent{
+
<!-- begin formula -->
−
  clear: both;
+
<div class="responsive_center_image">
−
  margin-left: 15%;
+
<img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_MOD_16_Spot_Split.png" width="250">
−
  margin-top: 0;
+
</div>
−
  width: 290px;
+
<!-- end formula -->
−
}
+
  
−
.dummy-image{
+
<!-- begin formula -->
−
  background-color: black;
+
<div class="responsive_center_image">
−
  height: 400px;
+
<img src="https://static.igem.org/mediawiki/2015/d/de/Freiburg_MOD_17_CN_System.png" width="300">
−
  width: 350px;
+
</div>
−
}
+
<!-- end formula -->
  
−
</style>
+
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/b/bc/Freiburg_MOD_18_Math_Sys.png" width="600">
 +
</div>
 +
<!-- end formula -->
  
 +
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/7/73/Freiburg_MOD_19_Boundary.png" width="400">
 +
</div>
 +
<!-- end formula -->
  
−
<script>
+
<!-- begin formula -->
−
$(document).ready(function(){
+
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
 +
</div>
 +
<!-- end formula -->
  
−
    var distance = 2;
+
<!-- begin formula -->
−
    // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
+
<div class="responsive_center_image">
−
    // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
−
    $("#buttonleft").bind("click", moveleft);
+
</div>
−
function moveleft(e) {
+
<!-- end formula -->
−
// unbind the button //
+
−
$("#buttonleft").unbind();
+
−
console.log("Click "+distance);
+
  
−
if (distance == 1) {
+
<!-- begin formula -->
−
console.log("Distance: "+distance);
+
<div class="responsive_center_image">
−
$('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
−
    $('#second').css({"z-index": "100"});
+
</div>
−
    $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
<!-- end formula -->
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
−
    distance = 2;
+
−
}
+
  
−
else if (distance ==2) {
+
<!-- begin formula -->
−
console.log("Distance: "+distance);
+
<div class="responsive_center_image">
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
−
    $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
</div>
−
    $('#third').css({"z-index": "100"});
+
<!-- end formula -->
−
    $('#fourth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
−
    distance = 3;
+
−
}
+
  
−
else if (distance ==3) {
+
<!-- begin formula -->
−
console.log("Distance: "+distance);
+
<div class="responsive_center_image">
−
$('#first').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Freiburg_MOD_20_Boundary_Eqs.png" width="800">
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
</div>
−
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
<!-- end formula -->
−
    $('#fourth').css({"z-index": "100"});
+
−
    distance = 4;
+
−
}
+
  
−
else if (distance ==4) {
+
<!-- begin formula -->
−
console.log("Distance: "+distance);
+
<div class="responsive_center_image">
−
$('#first').css({"z-index": "100"});
+
<img src="https://static.igem.org/mediawiki/2015/1/1d/Freiburg_MOD_21_MatrixA.png" width="800">
−
    $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
</div>
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
<!-- end formula -->
−
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
−
    distance = 1;
+
−
}
+
  
−
// see: http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery //
+
<!-- begin formula -->
−
// wait until css-animation has finished. time is specified in css-transition property //
+
<div class="responsive_center_image">
−
setTimeout(function(){
+
<img src="https://static.igem.org/mediawiki/2015/0/0c/Freiburg_MOD_22_MatrixB.png" width="800">
−
$("#buttonleft").bind("click", moveleft);
+
</div>
−
}, 1000);
+
<!-- end formula -->
−
}
+
  
 +
<!-- begin formula -->
 +
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/2/2b/Freiburg_MOD_23_Prod_Curve.png" width="400">
 +
</div>
 +
<!-- end formula -->
  
−
    $("#buttonright").bind("click", moveright);
 
−
function moveright(e) {
 
  
−
$("#buttonright").unbind();
+
<!-- begin formula -->
−
console.log("Click "+distance);
+
<div class="responsive_center_image">
 +
<img src="https://static.igem.org/mediawiki/2015/0/0d/Freiburg_MOD_24_Corner_Boundaries.png" width="800">
 +
</div>
 +
<!-- end formula -->
  
−
if (distance == 1) {
 
−
$('#first').css({"z-index": "-100"});
 
−
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
 
−
    $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
 
−
    $('#fourth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
 
−
    distance = 4;
 
−
}
 
  
−
else if (distance ==2) {
+
<!-- begin formula -->
−
console.log("Distance: "+distance);
+
<div class="responsive_center_image">
−
$('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
<img src="https://static.igem.org/mediawiki/2015/7/70/Freiburg_MOD_25_Diff_Simp.png" width="800">
−
    $('#second').css({"z-index": "-100"});
+
</div>
−
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
<!-- end formula -->
−
    $('#fourth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
−
    distance = 1;
+
−
}
+
  
−
else if (distance ==3) {
 
−
console.log("Distance: "+distance);
 
−
$('#first').css({"z-index": "100","transform": "translateX(0px)", "-webkit-transform": "translateX(0px)", "-ms-transform": "translateX(0px)"});
 
−
    $('#second').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    $('#third').css({"z-index": "-100"});
 
−
    $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
−
    distance = 2;
 
−
}
 
  
−
else if (distance ==4) {
+
<!-- begin formula -->
−
console.log("Distance: "+distance);
+
<div class="responsive_center_image">
−
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
<img src="https://static.igem.org/mediawiki/2015/3/39/Freiburg_MOD_26_F_Vec.png" width="700">
−
    $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
</div>
−
    $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
+
<!-- end formula -->
−
    $('#fourth').css({"z-index": "-100"});
+
−
    distance = 3;
+
−
}
+
−
 
+
−
setTimeout(function(){
+
−
$("#buttonright").bind("click", moveright);
+
−
}, 1000);
+
−
}
+
−
});
+
−
</script>
+
  
  
  
−
<div class="container">
+
<!-- begin formula -->
−
<div id="buttonright">
+
<div class="responsive_center_image">
−
<img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
+
<img src="https://static.igem.org/mediawiki/2015/0/0b/Freiburg_modeling_matrix.png" width="400">
−
</div>
+
−
<div id="buttonleft">
+
−
<img src="https://static.igem.org/mediawiki/2015/4/4d/Freiburg_lightbulb_slider_27.png">
+
−
</div>
+
−
  <div id="content-slider">
+
−
      <div id="slider">  <!-- Slider container -->
+
−
        <div id="mask">  <!-- Mask -->
+
−
        <ul>
+
−
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
+
−
        <div class="artboard">
+
−
        <div class="sliderimage">
+
−
        <img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_Slider-DIY_scaled.png" width="350px">
+
−
        </div>
+
−
        <div class="slidertext">
+
−
        <h1>Building our own device</h1>
+
−
        <p>The device orginally used, in collaboration with AG Roth, was a pricy machine based on rather simple physics. Therefore, we decided to build our own apparatus in a cost-efficient manner. We were able to produce reliable results with it and provided a construction plan. This plan will make it possible for future iGEM generations to built and use their own label-free protein array analysis tool.</p>
+
−
        </div>
+
−
        <div class="slidertext indent">
+
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/OwnDevice"> more?</a>
+
−
        </p>
+
−
        </div>
+
−
        </div>
+
−
        </li>
+
−
        <li id="second" class="secondanimation">
+
−
        <div class="artboard">
+
−
        <div class="sliderimage">
+
−
        <img src="https://static.igem.org/mediawiki/2015/b/b8/Freiburg_Slider-HumanPractice_scaled.png" width="350px">
+
−
        </div>
+
−
        <div class="slidertext">
+
−
        <h1>Communicating science</h1>
+
−
        <p>Diagnosing diseases fast and reliable has not just been an issue among medical staff, it has also been subject to public interest. This has lead us to ask for people's opinions regarding the DiaCHIP. Although the device is labeled as a product of synthetic biology, which has been problematic for the broad public according to a survey initiated by the Leopoldina (National academy of science), we recieved lot of positive feedback. </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>
+
−
        <li id="third" class="thirdanimation">
+
−
        <div class="artboard">
+
−
        <div class="sliderimage">
+
−
        <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px">
+
−
        </div>
+
−
        <div class="slidertext">
+
−
        <h1>Modeling cellfree expression</h1>
+
−
        <p>In order to optimize the DiaCHIP for future applications, we optimized the process of cell-free expression and diffusion over time. Making use of xxx parameters and xxx ordinary differential equations, we computed the size of the resulting antigen spots and identified the factors limiting cell-free expression in the DiaCHIP. </p>
+
−
        </div>
+
−
        <div class="slidertext indent">
+
−
        <p> Want to read <a href="https://2015.igem.org/Team:Freiburg/Modeling">more?</a> </p>
+
−
        </div>
+
−
        </div>
+
−
        </li>
+
−
        <li id="fourth" class="fourthanimation">
+
−
        <div class="artboard">
+
−
        <div class="sliderimage">
+
−
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
+
−
        </div>
+
−
        <div class="slidertext">
+
−
        <h1>Measuring our own blood</h1>
+
−
        <p>One of the most promising results came from the detection of anti-tetanus antibodies in human blood serum. The DiaCHIP analysis made it possible for us to distinguish serum samples from an individual before and after vaccination. Samples taken three weeks after vaccination produced positive signals, compared to negative results prior to antigen exposure. </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>
+
−
    </ul>
+
−
        </div>  <!-- End Mask -->
+
−
      </div>  <!-- End Slider Container -->
+
−
  </div>
+
 
</div>
 
</div>
 +
<!-- end formula -->
  
  
  
−
<div class="content_box">
+
<!-- begin video -->
−
<!-- Labjournal content goes in here -->
+
−
+
  
−
<h1 class="sectionedit1">Project overview: The DiaCHIP</h1>
+
<div class="image_box right">
−
<div class="level1">
+
      <div class="thumbinner"style="width:700px;">
−
<div class="image_box left">
+
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
−
<img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" width="420px">
+
        <video poster="https://static.igem.org/mediawiki/2015/c/c4/Freiburg_Diffusion_1_preview.jpg" width="700" height="350" controls>
−
</div>
+
          <source src="https://static.igem.org/mediawiki/2015/5/5a/Freiburg_Diffusion_1_720p.mp4" type="video/mp4">
−
<p>
+
          Your browser does not support the HTML5 video tag.
−
<!--korrigiert von Philipp05/09/15-->
+
        </video>
−
<!--neu von Ramona08/09/15-->
+
        <div class="thumbcaption">Video 1: Demonstration of the diffusion model.  
−
The DiaCHIP is an innovative tool to screen for a broad range of antibodies present in serum. Antibodies can be an indicator for  an immune response towards an infection or a succesfull vaccination. Antibodies also play a role in the diagnosis of autoimmune diseases. Especially the ability to differentiate between life threatening diseases and a mild infection within minutes bears the potential to save lifes. 
+
        </div>  
−
</br>
+
      </div>
−
Spotting diseases by detecting correspondent antibodies in a patient's serum is an established method in  <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Diagnostics" title="diagnostics_today">modern diagnostics</a>. The DiaCHIP makes this possible using a single blood sample.
+
    </div>
−
</br>
+
−
The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis and a novel method of label-free detection packed in 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.  (LINK – new device).
+
  
−
</p>
+
<!-- end video -->
  
  
−
<p>
+
<div class="image_box right">
−
<b>Step 1: Preparing the DiaCHIP by protein synthesis</b>
+
        <div class="thumb2 trien" style="width:376px">
−
</br>
+
            <div class="thumbinner">
−
<!--korrigiert von Philipp05/09/15-->
+
                <a href="https://static.igem.org/mediawiki/2015/b/bc/Freiburg_MOD_IM_01_Simplification.png" class="lightbox_trigger">
−
<!--neu von Ramona08/09/15-->
+
                    <img src="https://static.igem.org/mediawiki/2015/6/63/Freiburg_MOD_IM_01_Simplification_preview.png" width="376">
−
Pior to screening for antibody-antigen interactions, the antigens have to be synthesized and immobilized in a microarray set-up. Facilitated by a copy mechanism, which converts a DNA template into a protein microarray by cell-free protein expression. This expression system based on a bacterial lysate makes the need for genetically engineered organisms to produce each single antigen redudant.
+
                </a>
−
</br>
+
                <div class="thumbcaption">
−
In order to collect the DNA templates, the respective sequences containing transcriptional and translational initiation sites, the antigen coding sequence and terminating regions have to be constructed and labeled with an amino group. An activated PDMS slide provides the basis for immobilization of the DNA by covalent binding of the amino group. Spotting the antigen coding sequences in a distinct pattern enables to retrace a detected binding event to a certain disease.
+
                    <p>
−
The template slide is placed in close proximity to the future protein array enabling the expressed proteins to reach this other surface by diffusion. Complex chemistry ensures that target proteins are specifically immobilized on this surface, while components of the expression mix can be washed away before sample analysis.
+
                        <strong>Figure:
 +
                    </p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
  
−
</p>
 
−
 
−
<p>
 
−
<b>Step 2: Measuring serum samples by iRIf</b>
 
−
</br>
 
−
<!--korrigiert von Philipp05/09/15-->
 
−
<!--neu von Ramona08/09/15-->
 
−
After preparation of the DiaCHIP, a patient’s serum sample can be flushed over the protein array. The binding of antibodies to the protein surface causes a minimal change in the thickness of the slide right at the corresponding antigen spot. This change can be measured without the need for a further label with an emerging method called iRIf (imaging reflectometric interference). Based on the interference of light beams reflected on different thin layers, binding events can be recorded in real-time.
 
−
</p>
 
−
<p>
 
−
After weeks of opimizing the different components of the DiaCHIP, we reveal our great results. The highlight of our project was reached with the successful <a href="https://2015.igem.org/Team:Freiburg/Results">detection of antibodies in our own blood!</a>
 
−
</p>
 
−
</div>
 
−
<div class="tags"><span>
 
−
<a class="wikilink1" href="/igem2015/doku.php?id=tag:info&amp;do=showtag&amp;tag=info" rel="tag" title="tag:info">info</a>
 
−
</span></div>
 
−
</div>
 
−
<!-- EDIT3 SECTION "Measuring" [1231-] -->
 
−
</div>
 
  
  
  
 
</html>
 
</html>
−
<!-- Labjournal content ends here -->
 
 
{{Freiburg/wiki_content_end}}
 
{{Freiburg/wiki_content_end}}

Latest revision as of 01:37, 19 September 2015

""

Modeling

Note

Video 1: Demonstration of the diffusion model.

Figure: