Difference between revisions of "Team:Freiburg/Project"

Line 28: Line 28:
  
 
#slider {
 
#slider {
   height: 500px;
+
   height: 400px;
   width: 910px;
+
   width: 500px;
 
   overflow: visible;
 
   overflow: visible;
 
   position: relative;
 
   position: relative;
Line 37: Line 37:
 
#mask {
 
#mask {
 
   overflow: hidden;
 
   overflow: hidden;
   height: 500px;
+
   height: 400px;
 
}
 
}
  
Line 49: Line 49:
 
/* define image properties and position them outside the slider mask */
 
/* define image properties and position them outside the slider mask */
 
#slider li {
 
#slider li {
   width: 900px;  /* Width slide */
+
   width: 480px;  /* Width slide */
   height: 500px; /* Height slide */
+
   height: 400px; /* Height slide */
 
   position: absolute;
 
   position: absolute;
 
   right: 0; /* Original Position - Outside of the Slider */
 
   right: 0; /* Original Position - Outside of the Slider */
Line 61: Line 61:
 
#third,
 
#third,
 
#fourth{
 
#fourth{
   left: -1000px;
+
   left: -500px;
   -ms-transition: tranform 1s ease;
+
   -ms-transition: transform 1s ease;
 
   -webkit-transition: transform 1s ease;
 
   -webkit-transition: transform 1s ease;
 
   transition: transform 1s ease;
 
   transition: transform 1s ease;
Line 70: Line 70:
 
#first{left: 0;}
 
#first{left: 0;}
 
#third{z-index : -100;}
 
#third{z-index : -100;}
#fourth{z-index: -100; left: 1000px;}  
+
#fourth{z-index: -100; left: 500px;}  
  
 
.container{
 
.container{
     position: relative;
+
     position: absolute;
     height: 500px;
+
     height: 400px;
     margin: 3% 0;
+
     margin: 0 auto;
     width: 1000px;
+
     width: 580px;
 +
    right: 10%;
 
}
 
}
  
Line 112: Line 113:
  
 
.container{
 
.container{
   position: relative;
+
   position: absolute;
 
}
 
}
  
 
.artboard{
 
.artboard{
 
     box-sizing: border-box;
 
     box-sizing: border-box;
     height: 470px;
+
     height: 370px;
 
     border-radius: 60px;
 
     border-radius: 60px;
 
     background-color: #FCFCFC;
 
     background-color: #FCFCFC;
Line 128: Line 129:
 
   float: right;
 
   float: right;
 
   margin: 3% 70px 3% 25px;
 
   margin: 3% 70px 3% 25px;
   width: 350px
+
   width: 150px
 
}
 
}
  
 
.slidertext{
 
.slidertext{
 
   margin: 3% 25px 0 65px;
 
   margin: 3% 25px 0 65px;
   width: 350px;
+
   width: 340px;
 
   text-align: justify;
 
   text-align: justify;
 
   line-height: 1;
 
   line-height: 1;
Line 188: Line 189:
 
else if (distance ==2) {
 
else if (distance ==2) {
 
console.log("Distance: "+distance);
 
console.log("Distance: "+distance);
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
$('#first').css({"transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"});
    $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
    $('#second').css({"transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"});
 
    $('#third').css({"z-index": "100"});
 
    $('#third').css({"z-index": "100"});
    $('#fourth').css({"z-index": "-100", "transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
    $('#fourth').css({"z-index": "-100", "transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
 
    distance = 3;
 
    distance = 3;
 
}
 
}
Line 197: Line 198:
 
else if (distance ==3) {
 
else if (distance ==3) {
 
console.log("Distance: "+distance);
 
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)"});
+
$('#first').css({"z-index": "-100", "transform": "translateX(-500px)", "-webkit-transform": "translateX(-500px)", "-ms-transform": "translateX(-500px)", "-webkit-transform": "translateX(-500px)", "-ms-transform": "translateX(-500px)"});
    $('#second').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
    $('#second').css({"transform": "translateX(100px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(500px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
    $('#third').css({"transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"});
 
    $('#fourth').css({"z-index": "100"});
 
    $('#fourth').css({"z-index": "100"});
 
    distance = 4;
 
    distance = 4;
Line 208: Line 209:
 
$('#first').css({"z-index": "100"});
 
$('#first').css({"z-index": "100"});
 
    $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
    $('#second').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
    $('#fourth').css({"transform": "translateX(-500px)", "-webkit-transform": "translateX(-500px)", "-ms-transform": "translateX(-500px)"});
 
    distance = 1;
 
    distance = 1;
 
}
 
}
Line 229: Line 230:
 
if (distance == 1) {
 
if (distance == 1) {
 
$('#first').css({"z-index": "-100"});
 
$('#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)"});
+
    $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
    $('#third').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
    $('#third').css({"z-index": "100","transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"});
    $('#fourth').css({"transform": "translateX(-2000px)", "-webkit-transform": "translateX(-2000px)", "-ms-transform": "translateX(-2000px)"});
+
    $('#fourth').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
 
    distance = 4;
 
    distance = 4;
 
}
 
}
Line 237: Line 238:
 
else if (distance ==2) {
 
else if (distance ==2) {
 
console.log("Distance: "+distance);
 
console.log("Distance: "+distance);
$('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
$('#first').css({"transform": "translateX(-500px)", "-webkit-transform": "translateX(-500px)", "-ms-transform": "translateX(-500px)"});
 
    $('#second').css({"z-index": "-100"});
 
    $('#second').css({"z-index": "-100"});
    $('#third').css({"transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)", "-webkit-transform": "translateX(2000px)", "-ms-transform": "translateX(2000px)"});
+
    $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
    $('#fourth').css({"z-index": "100","transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
+
    $('#fourth').css({"z-index": "100","transform": "translateX(-500px)", "-webkit-transform": "translateX(-500px)", "-ms-transform": "translateX(-500px)"});
 
    distance = 1;
 
    distance = 1;
 
}
 
}
Line 255: Line 256:
 
else if (distance ==4) {
 
else if (distance ==4) {
 
console.log("Distance: "+distance);
 
console.log("Distance: "+distance);
$('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
$('#first').css({"transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"});
    $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
+
    $('#second').css({"z-index": "100","transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(1000px)"});
 
    $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
    $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
 
    $('#fourth').css({"z-index": "-100"});
 
    $('#fourth').css({"z-index": "-100"});
Line 297: Line 298:
  
  
<div class="content_box" style="width:90%; margin:0px auto">
+
<div class="container" style="text-align:right">
<p>
+
<b>Step 1: Preparing the DiaCHIP by protein synthesis</b>
+
</br>
+
<!--korrigiert von Philipp05/09/15-->
+
<!--neu von Ramona08/09/15-->
+
Prior to screening for antibody-antigen interactions, the antigens have to be synthesized and immobilized in a microarray set-up. The DiaCHIP facilitates this process by a copying 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 redundant.
+
</br>
+
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 silicone 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.
+
The template slide is placed in close proximity to the future protein array enabling the expressed proteins to reach this other surface by diffusion. We established a surface for specific immobilization of the target proteins. Thus, components of the expression mix can be washed away and do not hinder the analysis of the actual sample.
+
</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 optimizing the different components of the DiaCHIP, we present 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> <!-- end level1 -->
+
</div> <!-- end content_box -->
+
 
+
<div class="container">
+
 
<div id="buttonright">
 
<div id="buttonright">
 
<img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
 
<img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
Line 335: Line 311:
 
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 
        <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 
        <div class="artboard">
 
        <div class="artboard">
        <div class="sliderimage">
+
        <!--<div class="sliderimage">
 
        <img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_Slider-DIY_scaled.png" width="350px">
 
        <img src="https://static.igem.org/mediawiki/2015/8/89/Freiburg_Slider-DIY_scaled.png" width="350px">
        </div>
+
        </div>-->
 
        <div class="slidertext">
 
        <div class="slidertext">
 
        <h1>Building our own device</h1>
 
        <h1>Building our own device</h1>
Line 350: Line 326:
 
        <li id="second" class="secondanimation">
 
        <li id="second" class="secondanimation">
 
        <div class="artboard">
 
        <div class="artboard">
        <div class="sliderimage">
+
        <!--<div class="sliderimage">
 
        <img src="https://static.igem.org/mediawiki/2015/b/b8/Freiburg_Slider-HumanPractice_scaled.png" width="350px">
 
        <img src="https://static.igem.org/mediawiki/2015/b/b8/Freiburg_Slider-HumanPractice_scaled.png" width="350px">
        </div>
+
        </div>-->
 
        <div class="slidertext">
 
        <div class="slidertext">
 
        <h1>Communicating science</h1>
 
        <h1>Communicating science</h1>
Line 364: Line 340:
 
        <li id="third" class="thirdanimation">
 
        <li id="third" class="thirdanimation">
 
        <div class="artboard">
 
        <div class="artboard">
        <div class="sliderimage">
+
        <!--<div class="sliderimage">
 
        <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px">
 
        <img src="https://static.igem.org/mediawiki/2015/1/14/Freiburg_Slide-Modelling_scaled.png" width="350px">
        </div>
+
        </div>-->
 
        <div class="slidertext">  
 
        <div class="slidertext">  
 
        <h1>Modeling cellfree expression</h1>
 
        <h1>Modeling cellfree expression</h1>
Line 378: Line 354:
 
        <li id="fourth" class="fourthanimation">
 
        <li id="fourth" class="fourthanimation">
 
        <div class="artboard">
 
        <div class="artboard">
        <div class="sliderimage">
+
        <!--<div class="sliderimage">
 
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
 
        <img src="https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Slider-Eigenblut.png" width="350px">
        </div>
+
        </div>-->
 
        <div class="slidertext">  
 
        <div class="slidertext">  
 
        <h1>Measuring our own blood</h1>
 
        <h1>Measuring our own blood</h1>
Line 394: Line 370:
 
       </div>  <!-- End Slider Container -->
 
       </div>  <!-- End Slider Container -->
 
   </div>
 
   </div>
 +
</div>
 +
 +
<div class="content_box" style="width:90%; margin:0px auto">
 +
<p>
 +
<b>Step 1: Preparing the DiaCHIP by protein synthesis</b>
 +
</br>
 +
<!--korrigiert von Philipp05/09/15-->
 +
<!--neu von Ramona08/09/15-->
 +
Prior to screening for antibody-antigen interactions, the antigens have to be synthesized and immobilized in a microarray set-up. The DiaCHIP facilitates this process by a copying 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 redundant.
 +
</br>
 +
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 silicone 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.
 +
The template slide is placed in close proximity to the future protein array enabling the expressed proteins to reach this other surface by diffusion. We established a surface for specific immobilization of the target proteins. Thus, components of the expression mix can be washed away and do not hinder the analysis of the actual sample.
 +
</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 optimizing the different components of the DiaCHIP, we present 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> <!-- end level1 -->
 +
</div> <!-- end content_box -->
 +
 +
 
</div>
 
</div>
  

Revision as of 21:44, 12 September 2015

""

DiaCHIP_Sabi

Project overview: The DiaCHIP

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 successful 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 a short time bears the potential to save lives.

Spotting diseases by detecting correspondent antibodies in a patient's serum is an established method in modern diagnostics. The DiaCHIP makes it possible to screen for multiple specific antibodies simply using a drop of blood.

The key feature of the DiaCHIP concept is the combination of on-demand protein synthesis and a novel method for label-free detection 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.

All about our Own Device

  • Building our own device

    The device originally used, in collaboration with AG Roth, is a expensive 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 provide a construction plan [LINK]. This plan will make it possible for future iGEM generations to built and use their own label-free protein array analysis tool.

    Want to read more?

  • Communicating science

    Diagnosing diseases fast and reliable is not only an issue among medical staff, it is also subject to public interest. This has lead us to ask for people's opinions regarding the DiaCHIP. Although the method is based on synthetic biology, which is a problematic definition for the broad public according to a survey initiated by the Leopoldina (National academy of science), we received lots of positive feedback.

    Want to read more?

  • Modeling cellfree expression

    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.

    Want to read more?

  • Measuring our own blood

    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.

    Want to read more?

Step 1: Preparing the DiaCHIP by protein synthesis
Prior to screening for antibody-antigen interactions, the antigens have to be synthesized and immobilized in a microarray set-up. The DiaCHIP facilitates this process by a copying 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 redundant.
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 silicone 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. The template slide is placed in close proximity to the future protein array enabling the expressed proteins to reach this other surface by diffusion. We established a surface for specific immobilization of the target proteins. Thus, components of the expression mix can be washed away and do not hinder the analysis of the actual sample.

Step 2: Measuring serum samples by iRIf
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.

After weeks of optimizing the different components of the DiaCHIP, we present our great results. The highlight of our project was reached with the successful detection of antibodies in our own blood!