Team:Berlin/Project

From 2014.igem.org

(Difference between revisions)
m
 
(64 intermediate revisions not shown)
Line 22: Line 22:
   <ul class="main-menue-ul">
   <ul class="main-menue-ul">
     <a href="https://2014.igem.org/Team:Berlin" class="main-menue-links"><li>Home</li></a>
     <a href="https://2014.igem.org/Team:Berlin" class="main-menue-links"><li>Home</li></a>
-
     <a href="https://2014.igem.org/Team:Berlin/Project" class="main-menue-links"><li>Project</li></a>
+
     <a href="https://2014.igem.org/Team:Berlin/Project" class="main-menue-links"><li class="active">Project</li></a>
     <a href="https://2014.igem.org/Team:Berlin/Team" class="main-menue-links"><li>Team</li></a>
     <a href="https://2014.igem.org/Team:Berlin/Team" class="main-menue-links"><li>Team</li></a>
     <a href="https://2014.igem.org/Team:Berlin/Safety" class="main-menue-links"><li>Safety</li></a>
     <a href="https://2014.igem.org/Team:Berlin/Safety" class="main-menue-links"><li>Safety</li></a>
     <a href="https://2014.igem.org/Team:Berlin/Workshop" class="main-menue-links"><li>Workshop</li></a>
     <a href="https://2014.igem.org/Team:Berlin/Workshop" class="main-menue-links"><li>Workshop</li></a>
-
     <a href="https://2014.igem.org/Team:Berlin/Blog"><li>Blog</li></a>
+
     <a href="https://2014.igem.org/Team:Berlin/Blog" class="main-menue-links"><li>Blog</li></a>
     <a href="https://igem.org/Main_Page" class="igem-link"><li><img class="igem-logo" src="https://static.igem.org/mediawiki/2014/d/d8/Team_Berlin_igem_logo.png"></li></a>
     <a href="https://igem.org/Main_Page" class="igem-link"><li><img class="igem-logo" src="https://static.igem.org/mediawiki/2014/d/d8/Team_Berlin_igem_logo.png"></li></a>
   </ul>
   </ul>
Line 39: Line 39:
     <li><a href="https://2014.igem.org/Team:Berlin/Team">Team</a></li>
     <li><a href="https://2014.igem.org/Team:Berlin/Team">Team</a></li>
     <li><a href="https://2014.igem.org/Team:Berlin/Safety">Safety</a></li>
     <li><a href="https://2014.igem.org/Team:Berlin/Safety">Safety</a></li>
-
    <li><a href="http://igem.berlin/contact.php">Contact</a></li>
 
     <li><a href="https://2014.igem.org/Team:Berlin/Workshop">Workshop</a></li>
     <li><a href="https://2014.igem.org/Team:Berlin/Workshop">Workshop</a></li>
     <li><a href="https://2014.igem.org/Team:Berlin/Blog">Blog</a></li>
     <li><a href="https://2014.igem.org/Team:Berlin/Blog">Blog</a></li>
Line 63: Line 62:
     <div class="row featurette" id="main-featurette-row">
     <div class="row featurette" id="main-featurette-row">
-
       <div class="start-text-container">
+
       <div class="start-text-container-project">
-
         <h2><img src="https://static.igem.org/mediawiki/2014/f/ff/Team_Berlin_igem_questionmark.png" alt="" class="teaser-icons hidden-xs" />Discover Magnetic e.Coli</h2>
+
         <h2><img src="https://static.igem.org/mediawiki/2014/f/ff/Team_Berlin_igem_questionmark.png" alt="" class="teaser-icons hidden-xs" />Explore our Project:</h2>
           <div class="teaser-text-sub">
           <div class="teaser-text-sub">
-
            <div class="col-xs-12">
 
-
              <a name="top">&nbsp;</a>
 
-
              <a href="#description" class="sub-link-project"> 1. What is it all about?</a><br/>
 
-
              <a href="#animation" class="sub-link-project">2. Animation</a><br/>
 
-
              <a href="#detail-description" class="sub-link-project">3. Detailed description of the different strategies</a><br/>
 
-
              <a href="#flow-chart" class="sub-link-project">4. Flow Chart with the strategies</a><br/>
 
-
              <a href="#results" class="sub-link-project">5) Our Results</a><br/>
 
-
              <a href="#lab-summary" class="sub-link-project">6. Lab-summary</a><br/>
 
-
              <a href="#notebook" class="sub-link-project">7. Notebook</a><br/>
 
-
              <br/>
 
-
            </div>
 
           </div>
           </div>
         <!--<a href="#" class="more-informations-white">More informations</a>-->
         <!--<a href="#" class="more-informations-white">More informations</a>-->
Line 87: Line 75:
<!--- ////////////////// DESCRIPTION////////////////// -->
<!--- ////////////////// DESCRIPTION////////////////// -->
<div class="container">
<div class="container">
-
  <div class="row hidden-xs">
+
    <div class="row">      
-
    <div class="col-xs-12">
+
            <div class="col-xs-3 submenue-project" style="text-align:left;">
-
      <div class="project-entry-tags">
+
              <a href="https://2014.igem.org/Team:Berlin/Project" class="sub-link-project"> 1. What is it all about?</a><br/><br/>
-
        <ul>
+
            <a href="https://2014.igem.org/Team:Berlin/Project/Activities" class="sub-link-project"> 2. Project-related Activities</a><br/><br/>
-
          <li><a href="#top">GO TO TOP</a></li>
+
              <a href="https://2014.igem.org/Team:Berlin/Project/Detailed-Description" class="sub-link-project">3. Detailed Description</a><br/><br/>
-
        </ul>
+
              <a href="https://2014.igem.org/Team:Berlin/Project/Results" class="sub-link-project">4. Our Results</a><br/><br/>
-
      </div>
+
              <a href="https://2014.igem.org/Team:Berlin/Project/Summary" class="sub-link-project">5. Lab Summary</a><br/><br/>
-
    </div>
+
              <a href="https://2014.igem.org/Team:Berlin/Project/Journal" class="sub-link-project">6. Lab Journal</a><br/><br/>
-
  </div>
+
              <a href="https://2014.igem.org/Team:Berlin/Project/Property" class="sub-link-project">7. Intellectual Property</a><br/><br/>
 +
              <br/>
 +
            </div>
-
  <div class="row">
+
     <div class="col-xs-11 col-sm-9 blog-text" style="margin-bottom:40px;">
-
     <div class="col-xs-12">
+
       <div class="project-number">1</div><div class="project-headline-float"><h2 class="green-text project-headline"> What is it all about?</h2></div>
       <div class="project-number">1</div><div class="project-headline-float"><h2 class="green-text project-headline"> What is it all about?</h2></div>
-
    </div>
+
 
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <!--<div class="col-sm-4 hidden-xs">
+
-
          <img src="img/blog/Team_Berlin_bacteria.png" class="img-responsive" style="margin: 0 auto;"/>
+
-
    </div>-->
+
-
    <div class="col-xs-12 col-sm-12 blog-text" style="margin-bottom:40px;">
+
       <p>     
       <p>     
         <a name="description">&nbsp;</a>
         <a name="description">&nbsp;</a>
-
              As previous iGEM teams have shown, synthesizing fully functional magnetosomes in E. coli is highly difficult as more than 60 highly regulated genes are involved. As a more feasible alternative, we simply want to synthesize magnetic nanoparticles in E. coli in order to attract cells with strong magnetic fields.<br/>
+
         
-
              Therefore we want to use different strategies including manipulation of the iron homeostasis of E. coli, expression of different metal binding proteins such as ferritins and metallothioneins as well as a high-throughput growth medium optimization.
+
          <strong>iGEM Berlin 2014: A remote control for E. coli</strong><br/>
-
              <br/><br/>
+
<p>
-
              Furthermore, we will work with other metal binding proteins such as metallothioneins and phytochelatin synthases in order to achieve nanoparticle synthesis.  
+
As the first iGEM team from Berlin, we decided to construct a simple BioBrick that enables synthetic biologists to remotely control the movement of E. coli. A seemingly simple and non-invasive mechanism for this remote control is the use of magnetic fields. By altering the iron homeostasis of E. coli, we want to increase the total iron level of the cytosol. By sequestering iron in a ferritin protein, iron crystals are formed and the cell is detoxified. We also worked with other metal binding proteins such as metallothioneins and phytochelatin synthases in order to create various metal nanoparticles as an alternative strategy. Furthermore, we searched for the optimal conditions which yielded the most efficient formation of magnetic nanoparticles in E. coli. Once we have discovered the best way to magnetize E. coli bacteria, we will build and characterize suitable BioBricks that can be used to remote control the cellular movement of E. coli.</p><br/>
-
              Once we have discovered the best way to magnetize E. coli bacteria, we will build and characterize suitable BioBricks that can be used by any research lab or iGEM team in the world in order to remote control the cellular movement.</p>
+
           The following animation visualizes the concept of using ferritin iron storage proteins as a magnetism mediating module.<br/>
-
    </div>
+
           <br/>
-
  </div>   
+
<iframe src="//player.vimeo.com/video/109249906?byline=0&amp;portrait=0&amp;color=0ecd28" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
</div>
+
          <br/>
-
<!--- ////////////////// ANIMATION ////////////////// -->
+
          <br/>
-
<div class="container">
+
          This animation was developed by Florian Renner who is an science interested and very talented graphic designer based in Munich. We thank Florian for his amazing job he did voluntarily for iGEM Berlin helping us to overcome the limitations of our budget.
-
  <div class="row hidden-xs">
+
          <br/><br/>
-
    <div class="col-xs-12">
+
       
-
      <div class="project-entry-tags">
+
-
        <ul>
+
-
           <li><a href="#top">GO TO TOP</a></li>
+
-
        </ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-number">2</div><div class="project-headline-float"><h2 class="green-text project-headline"> Visualisation</h2></div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <!--<div class="col-sm-4 hidden-xs">
+
-
           <img src="img/blog/Team_Berlin_bacteria.png" class="img-responsive" style="margin: 0 auto;"/>
+
-
    </div>-->
+
-
    <div class="col-xs-12 col-sm-12 blog-text" style="margin-bottom:40px;">
+
-
      <p>   
+
-
        <a name="animation">&nbsp;</a>
+
-
<iframe src="//player.vimeo.com/video/108832894?byline=0&amp;portrait=0&amp;color=0ecd28" width="700" height="393" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+
-
    </div>
+
-
  </div>  
+
-
</div>
+
-
<!--- ////////////////// DETAILED DESCRIPTION ////////////////// -->
+
    </div>
-
<div class="container">
+
-
  <div class="row hidden-xs">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-entry-tags">
+
-
        <ul>
+
-
          <li><a href="#top">GO TO TOP</a></li>
+
-
        </ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-number">3</div><div class="project-headline-float"><h2 class="green-text project-headline"> Detailes Description</h2></div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <!--<div class="col-sm-4 hidden-xs">
+
-
          <img src="img/blog/Team_Berlin_bacteria.png" class="img-responsive" style="margin: 0 auto;"/>
+
-
    </div>-->
+
-
    <div class="col-xs-12 col-sm-12 blog-text" style="margin-bottom:40px;">
+
-
      <p>   
+
-
      <a name="detail-description">&nbsp;</a>
+
-
              MORE DETAILS, jo!
+
-
    </div>
+
   </div>     
   </div>     
</div>
</div>
-
 
+
-
<!--- ////////////////// FLOW CHART ////////////////// -->
+
</section>
-
<div class="container">
+
-
  <div class="row hidden-xs">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-entry-tags">
+
-
        <ul>
+
-
          <li><a href="#top">GO TO TOP</a></li>
+
-
        </ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-number">4</div><div class="project-headline-float"><h2 class="green-text project-headline"> Flow Chart</h2></div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <!--<div class="col-sm-4 hidden-xs">
+
-
          <img src="img/blog/Team_Berlin_bacteria.png" class="img-responsive" style="margin: 0 auto;"/>
+
-
    </div>-->
+
-
    <div class="col-xs-12 col-sm-12 blog-text" style="margin-bottom:40px;">
+
-
      <p>   
+
-
        <a name="flow-chart">&nbsp;</a>
+
-
              Flowchart, jo!
+
-
    </div>
+
-
  </div>   
+
-
</div>
+
-
 
+
-
<!--- ////////////////// Results ////////////////// -->
+
-
<div class="container">
+
-
  <div class="row hidden-xs">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-entry-tags">
+
-
        <ul>
+
-
          <li><a href="#top">GO TO TOP</a></li>
+
-
        </ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-number">5</div><div class="project-headline-float"><h2 class="green-text project-headline"> The Results</h2></div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <!--<div class="col-sm-4 hidden-xs">
+
-
          <img src="img/blog/Team_Berlin_bacteria.png" class="img-responsive" style="margin: 0 auto;"/>
+
-
    </div>-->
+
-
    <div class="col-xs-12 col-sm-12 blog-text" style="margin-bottom:40px;">
+
-
      <p>   
+
-
        <a name="results">&nbsp;</a>
+
-
              Results, jo!
+
-
    </div>
+
-
  </div>   
+
-
</div>
+
-
 
+
-
<!--- ////////////////// Lab Diary ////////////////// -->
+
-
<div class="container">
+
-
  <div class="row hidden-xs">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-entry-tags">
+
-
        <ul>
+
-
          <li><a href="#top">GO TO TOP</a></li>
+
-
        </ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-number">6</div><div class="project-headline-float"><h2 class="green-text project-headline"> Lab Summary</h2></div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <!--<div class="col-sm-4 hidden-xs">
+
-
          <img src="img/blog/Team_Berlin_bacteria.png" class="img-responsive" style="margin: 0 auto;"/>
+
-
    </div>-->
+
-
    <div class="col-xs-12 col-sm-12 blog-text" style="margin-bottom:40px;">
+
-
      <p>   
+
-
        <a name="lab-summary">&nbsp;</a>
+
-
              Lab Diary, jo!
+
-
              <div class="sub-content-project">
+
-
                <h2 class="sub-content-project-headline">week one!</h2>
+
-
                  Furthermore, we will work with other metal binding proteins such as metallothioneins and phytochelatin synthases in order to achieve nanoparticle synthesis. Once we have discovered the best way to magnetize E. coli bacteria, we will build and characterize suitable BioBricks that can be used by any research lab or iGEM team in the world in order to remote control the cellular movement.
+
-
              </div>
+
-
              <div class="sub-content-project">
+
-
                <h2 class="sub-content-project-headline">week two!</h2>
+
-
                  Furthermore, we will work with other metal binding proteins such as metallothioneins and phytochelatin synthases in order to achieve nanoparticle synthesis. Once we have discovered the best way to magnetize E. coli bacteria, we will build and characterize suitable BioBricks that can be used by any research lab or iGEM team in the world in order to remote control the cellular movement.
+
-
              </div>
+
-
 
+
-
    </div>
+
-
  </div>   
+
-
</div>
+
-
 
+
-
<!--- ////////////////// Notebook////////////////// -->
+
-
<div class="container">
+
-
  <div class="row hidden-xs">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-entry-tags">
+
-
        <ul>
+
-
          <li><a href="#top">GO TO TOP</a></li>
+
-
        </ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <div class="col-xs-12">
+
-
      <div class="project-number">7</div><div class="project-headline-float"><h2 class="green-text project-headline"> Notebook</h2></div>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
  <div class="row">
+
-
    <!--<div class="col-sm-4 hidden-xs">
+
-
          <img src="img/blog/Team_Berlin_bacteria.png" class="img-responsive" style="margin: 0 auto;"/>
+
-
    </div>-->
+
-
    <div class="col-xs-12 col-sm-12 blog-text" style="margin-bottom:40px;">
+
-
      <p>   
+
-
        <a name="notebook">&nbsp;</a>
+
-
              Notebook, jo!
+
-
    </div>
+
-
  </div>   
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
</section>  
+
-
 
+
-
</div>
+
-
 
+
Line 386: Line 183:
       <img src="https://static.igem.org/mediawiki/2014/7/79/Team_Berlin_tuberlin_logo.png" class="img-responsive grayscale">
       <img src="https://static.igem.org/mediawiki/2014/7/79/Team_Berlin_tuberlin_logo.png" class="img-responsive grayscale">
     </div>
     </div>
 +
 +
    <div class="col-sm-2 col-sm-offset-1 col-xs-3">
 +
      <img src="https://static.igem.org/mediawiki/parts/c/cb/Team_Berlin_florian_renner_logo.png" class="img-responsive grayscale">
 +
    </div> 
   </div>   
   </div>   
    
    
Line 441: Line 242:
         $(".main-menue-ul a").each(function() {
         $(".main-menue-ul a").each(function() {
                 // checks if its the same on the address bar
                 // checks if its the same on the address bar
-
             if(url == (this.href)) {  
+
             if(url <strong> (this.href)) {  
                 $(this).children("li").addClass("active");
                 $(this).children("li").addClass("active");
                 $(this).removeClass("main-menue-links");
                 $(this).removeClass("main-menue-links");
Line 558: Line 359:
$( "html" ).css( "margin-top","-10px" );
$( "html" ).css( "margin-top","-10px" );
-
 
-
 
-
 
-
// Grayscale
 
-
 
-
// On window load. This waits until images have loaded which is essential
 
-
$(window).load(function(){
 
-
 
-
// Fade in images so there isn't a color "pop" document load and then on window load
 
-
$(".grayscale").fadeIn(500);
 
-
 
-
// clone image
 
-
$('.grayscale').each(function(){
 
-
var el = $(this);
 
-
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
 
-
var el = $(this);
 
-
el.parent().css({"width":this.width,"height":this.height});
 
-
el.dequeue();
 
-
});
 
-
this.src = grayscale(this.src);
 
-
});
 
-
 
-
// Fade image
 
-
$('.grayscale').mouseover(function(){
 
-
$(this).parent().find('img:first').stop().animate({opacity:1}, 500);
 
-
})
 
-
$('.img_grayscale').mouseout(function(){
 
-
$(this).stop().animate({opacity:0}, 1000);
 
-
});
 
-
});
 
-
 
-
// Grayscale w canvas method
 
-
function grayscale(src){
 
-
var canvas = document.createElement('canvas');
 
-
var ctx = canvas.getContext('2d');
 
-
var imgObj = new Image();
 
-
imgObj.src = src;
 
-
canvas.width = imgObj.width;
 
-
canvas.height = imgObj.height;
 
-
ctx.drawImage(imgObj, 0, 0);
 
-
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
-
for(var y = 0; y < imgPixels.height; y++){
 
-
for(var x = 0; x < imgPixels.width; x++){
 
-
var i = (y * 4) * imgPixels.width + x * 4;
 
-
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
 
-
imgPixels.data[i] = avg;
 
-
imgPixels.data[i + 1] = avg;
 
-
imgPixels.data[i + 2] = avg;
 
-
}
 
-
}
 
-
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
 
-
return canvas.toDataURL();
 
-
    }
 

Latest revision as of 21:59, 17 October 2014

Explore our Project:

1. What is it all about?

2. Project-related Activities

3. Detailed Description

4. Our Results

5. Lab Summary

6. Lab Journal

7. Intellectual Property


1

What is it all about?

  iGEM Berlin 2014: A remote control for E. coli

As the first iGEM team from Berlin, we decided to construct a simple BioBrick that enables synthetic biologists to remotely control the movement of E. coli. A seemingly simple and non-invasive mechanism for this remote control is the use of magnetic fields. By altering the iron homeostasis of E. coli, we want to increase the total iron level of the cytosol. By sequestering iron in a ferritin protein, iron crystals are formed and the cell is detoxified. We also worked with other metal binding proteins such as metallothioneins and phytochelatin synthases in order to create various metal nanoparticles as an alternative strategy. Furthermore, we searched for the optimal conditions which yielded the most efficient formation of magnetic nanoparticles in E. coli. Once we have discovered the best way to magnetize E. coli bacteria, we will build and characterize suitable BioBricks that can be used to remote control the cellular movement of E. coli.


The following animation visualizes the concept of using ferritin iron storage proteins as a magnetism mediating module.



This animation was developed by Florian Renner who is an science interested and very talented graphic designer based in Munich. We thank Florian for his amazing job he did voluntarily for iGEM Berlin helping us to overcome the limitations of our budget.

Müller-Breslau-Str. 10
10623 Berlin
Phone: +49 1778800244
Mail: mail@igem.berlin
©2014 iGem Berlin, Layout/Umsetzung: Valerian Blos, Marius Wessel

Retrieved from "http://2014.igem.org/Team:Berlin/Project"