|
|
| (8 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | {{Freiburg/CSS}}
| |
| − | {{Freiburg/Menubar}}
| |
| | | | |
| − | {{Freiburg/wiki_content_start}}
| |
| − | <html>
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | body {
| |
| − | color: #000;
| |
| − | }
| |
| − |
| |
| − | /*========= BEGIN: style for navigation bar ==========*/
| |
| − | #project {
| |
| − | background: url(https://static.igem.org/mediawiki/2015/d/da/Freiburg_icon_project_active_yellow.png) no-repeat;
| |
| − | }
| |
| − |
| |
| − | #project a {
| |
| − | color: #ecdc18;
| |
| − | }
| |
| − |
| |
| − | #runningchip {
| |
| − | left: 18.6%;
| |
| − | }
| |
| − | /*========= END: style for navigation bar ==========*/
| |
| − |
| |
| − | /* 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{
| |
| − | 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;}
| |
| − | #fourth{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{
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | .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>
| |
| − |
| |
| − |
| |
| − | <html>
| |
| − |
| |
| − | <script>
| |
| − | $(document).ready(function(){
| |
| − |
| |
| − | var distance = 2;
| |
| − | // see: http://atomicrobotdesign.com/blog/web-development/how-to-disable-a-button-until-a-jquery-animation-has-finished/ //
| |
| − | // bind the button to the function, so it can be unbound in the code and the button isnt clickable any more //
| |
| − | $("#buttonleft").bind("click", moveleft);
| |
| − | function moveleft(e) {
| |
| − | // unbind the button //
| |
| − | $("#buttonleft").unbind();
| |
| − | console.log("Click "+distance);
| |
| − |
| |
| − | if (distance == 1) {
| |
| − | console.log("Distance: "+distance);
| |
| − | $('#first').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
| |
| − | $('#second').css({"z-index": "100"});
| |
| − | $('#third').css({"z-index": "-100", "transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
| |
| − | $('#fourth').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
| |
| − | distance = 2;
| |
| − | }
| |
| − |
| |
| − | else if (distance ==2) {
| |
| − | console.log("Distance: "+distance);
| |
| − | $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
| |
| − | $('#second').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
| |
| − | $('#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)"});
| |
| − | distance = 3;
| |
| − | }
| |
| − |
| |
| − | else if (distance ==3) {
| |
| − | 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)"});
| |
| − | $('#second').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)"});
| |
| − | $('#fourth').css({"z-index": "100"});
| |
| − | distance = 4;
| |
| − | }
| |
| − |
| |
| − | else if (distance ==4) {
| |
| − | console.log("Distance: "+distance);
| |
| − | $('#first').css({"z-index": "100"});
| |
| − | $('#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)"});
| |
| − | $('#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 //
| |
| − | // 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();
| |
| − | console.log("Click "+distance);
| |
| − |
| |
| − | 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) {
| |
| − | console.log("Distance: "+distance);
| |
| − | $('#first').css({"transform": "translateX(-1000px)", "-webkit-transform": "translateX(-1000px)", "-ms-transform": "translateX(-1000px)"});
| |
| − | $('#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)"});
| |
| − | $('#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) {
| |
| − | console.log("Distance: "+distance);
| |
| − | $('#first').css({"transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
| |
| − | $('#second').css({"z-index": "100","transform": "translateX(1000px)", "-webkit-transform": "translateX(1000px)", "-ms-transform": "translateX(1000px)"});
| |
| − | $('#third').css({"transform": "translateX(0)", "-webkit-transform": "translateX(0)", "-ms-transform": "translateX(0)"});
| |
| − | $('#fourth').css({"z-index": "-100"});
| |
| − | distance = 3;
| |
| − | }
| |
| − |
| |
| − | setTimeout(function(){
| |
| − | $("#buttonright").bind("click", moveright);
| |
| − | }, 1000);
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <div class="image_box left">
| |
| − | <img align="left" alt="DiaCHIP_Sabi" src="https://static.igem.org/mediawiki/2015/a/af/Freiburg_DiaCHIP_Sabi.png" width="420px">
| |
| − | </div>
| |
| − |
| |
| − | <div class="content_text">
| |
| − |
| |
| − | <h1 class="sectionedit1">Project overview: The DiaCHIP</h1>
| |
| − |
| |
| − | <p>
| |
| − | <!--korrigiert von Philipp05/09/15-->
| |
| − | <!--neu von Ramona08/09/15-->
| |
| − | 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.
| |
| − | </br>
| |
| − | 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 it possible to screen for multiple specific antibodies simply using a drop of blood.
| |
| − | </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 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. (LINK – new device).
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <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">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/b/b3/Freiburg_lightbulb_slider_30.png">
| |
| − | </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 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.</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 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. </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>
| |
| − |
| |
| − | </html>
| |
| − | <!-- Labjournal content ends here -->
| |
| − | {{Freiburg/wiki_content_end}}
| |