Difference between revisions of "Team:Freiburg/Project"
Line 28: | Line 28: | ||
#slider { | #slider { | ||
− | height: | + | height: 400px; |
− | width: | + | width: 500px; |
overflow: visible; | overflow: visible; | ||
position: relative; | position: relative; | ||
Line 37: | Line 37: | ||
#mask { | #mask { | ||
overflow: hidden; | overflow: hidden; | ||
− | height: | + | 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: | + | width: 480px; /* Width slide */ |
− | height: | + | 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: - | + | left: -500px; |
− | -ms-transition: | + | -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: | + | #fourth{z-index: -100; left: 500px;} |
.container{ | .container{ | ||
− | position: | + | position: absolute; |
− | height: | + | height: 400px; |
− | margin: | + | margin: 0 auto; |
− | width: | + | width: 580px; |
+ | right: 10%; | ||
} | } | ||
Line 112: | Line 113: | ||
.container{ | .container{ | ||
− | position: | + | position: absolute; |
} | } | ||
.artboard{ | .artboard{ | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | height: | + | 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: | + | width: 150px |
} | } | ||
.slidertext{ | .slidertext{ | ||
margin: 3% 25px 0 65px; | margin: 3% 25px 0 65px; | ||
− | width: | + | 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( | + | $('#first').css({"transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"}); |
− | $('#second').css({"transform": "translateX( | + | $('#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(- | + | $('#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(- | + | $('#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( | + | $('#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( | + | $('#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( | + | $('#third').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"}); |
− | $('#fourth').css({"transform": "translateX(- | + | $('#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( | + | $('#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( | + | $('#third').css({"z-index": "100","transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"}); |
− | $('#fourth').css({"transform": "translateX(- | + | $('#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(- | + | $('#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( | + | $('#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(- | + | $('#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( | + | $('#first').css({"transform": "translateX(500px)", "-webkit-transform": "translateX(500px)", "-ms-transform": "translateX(500px)"}); |
− | $('#second').css({"z-index": "100","transform": "translateX( | + | $('#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=" | + | <div class="container" style="text-align:right"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<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
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.
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!