Difference between revisions of "Team:Paris Bettencourt"

 
(248 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{Paris_Bettencourt}}
 
{{Paris_Bettencourt}}
 +
 
<html>
 
<html>
  
Line 5: Line 6:
  
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
−
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
 
 
<style type="text/css">
 
<style type="text/css">
 +
<style>
  
−
#header {
+
#content {
−
width : 100%;
+
    width: 100%;
−
margin-top : 65px;
+
    padding-top : 15px;
 +
    border: none;
 +
    color: black;
 +
    margin: 0;
 +
    padding:0;
 
}
 
}
−
#headerimg {
+
 
−
width : 100%;
+
#top_title {
 +
    display: none;
 
}
 
}
−
h1 {
+
 
−
text-align : center;
+
.neant {
 +
    height : 65px;
 +
    width : 100%;
 
}
 
}
−
h2 {
+
section.page-header {
−
text-align : center;
+
   
 +
    margin-bottom: 35px;
 
}
 
}
 +
 +
.page-header .logomedusa {
 +
    width: 370px;
 +
    margin-top : 60px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -185px !important;  /* 50% of your logo width */
 +
    display: block;
 +
    z-index:99;
 +
}
 +
#u1570{
 +
 
 +
    height:600px;
 +
}
 +
 
#description {
 
#description {
 
width : 25%;
 
width : 25%;
 
margin-left : 37.5%;
 
margin-left : 37.5%;
 
text-align : center;
 
text-align : center;
 +
  overflow : visible;
 
}
 
}
 
#projectdescription {
 
#projectdescription {
Line 30: Line 55:
 
width : 100%;
 
width : 100%;
 
text-align : center;
 
text-align : center;
−
        position : relative;
+
position : relative;
−
        min-height : 500px;
+
min-height : 500px;
 +
  overflow : visible;
 +
}
 +
#projectdescription h4 {
 +
text-align : center;
 +
        text-indent : 0px;
 +
overflow : visible;
 
}
 
}
 
#project1 {
 
#project1 {
 
position : absolute;
 
position : absolute;
−
width : 15%;
+
width : 20%;
−
margin-left : 13.75%;
+
 
float : left;
 
float : left;
 +
        overflow : visible;
 
}
 
}
 
#project2 {
 
#project2 {
 
position : absolute;
 
position : absolute;
−
width : 15%;
+
max-width : 20%;
−
margin-left : 42.5%;
+
margin-left : 26.66%;
 
float : left;
 
float : left;
 +
overflow : visible !important;
 
}
 
}
 
#project3 {
 
#project3 {
 
position : absolute;
 
position : absolute;
−
width : 15%;
+
width : 20%;
−
margin-left : 71.25%;
+
margin-left : 53.333%;
 +
float : left;
 +
  overflow : visible;
 +
        z-index : 49;
 +
}
 +
#project4 {
 +
position : absolute;
 +
width : 20%;
 +
margin-left : 80%;
 
float : left;
 
float : left;
 
}
 
}
 
.logo {
 
.logo {
−
pading : auto;
+
padding : auto;
 +
  overflow : visible;
 
}
 
}
 
.logosubp {
 
.logosubp {
 
display : none;
 
display : none;
 
margin : auto;
 
margin : auto;
 +
  overflow : visible;
 
}
 
}
 
.logosubpinerte {
 
.logosubpinerte {
 
display : block;
 
display : block;
 
margin : auto;
 
margin : auto;
 +
  overflow : visible;
 
}
 
}
 
.logo:hover .logosubp {
 
.logo:hover .logosubp {
Line 67: Line 110:
 
.logo:hover .logosubpinerte {
 
.logo:hover .logosubpinerte {
 
display : none;
 
display : none;
 +
}
 +
.text4 video {
 +
      margin : 0 auto;
 +
      display : block;
 +
}
 +
#maintitle {
 +
font-family : "Avenir", Lato, sans-serif;
 
}
 
}
  
 +
#blockverticalcenter {
 +
    display : table;
 +
    text-align : center;
 +
    vertical-align : middle;
 +
    padding : 0 auto;
 +
}
 +
#blockverticalcenter p {
 +
    display : table-cell;
 +
}
  
 +
 +
#block1 {
 +
      display : flex !important;
 +
      vertical-align : middle !important;
 +
}
 
</style>
 
</style>
  
−
<head>
+
<body>
 +
            <div class=neant></div>
 +
            <section class=page-header>
 +
                    <div class="col-md-12"  id="u1570" ><!-- image -->
 +
                        <img  class="logomedusa"  src="/wiki/images/thumb/0/00/Logo-medusa.png/599px-Logo-medusa.png" />
 +
                    </div>
 +
 
 +
            </section>
 +
<div class=textbody>
 +
<h1 id=maintitle>BRINGING CONTROL TO THE</br>THIRD DIMENSION</h1>
 +
<div class=text4 id=block1>
 +
<div class=text4left><video width="560" height="315" controls><source src="https://static.igem.org/mediawiki/2017/7/7e/PB_MedusaTrailer.mp4" type="video/mp4"></source></video></div>
 +
<div class=text4right id=blockverticalcenter>By creating logic circuits with photo sensitive proteins, we <b>control and study cells in 3D.</b></div>
 +
</div>
 +
 
 +
<div class=text1><b>Proof of concept - 3D printer: </b>
 +
by creating a printer, it is a clear and easily quantified way to validate our 3D controls.
 +
It also allowed us to engineer biomaterials that would be compatible and useful in
 +
biotech. We also optimised production by creating local concnetrations of enzymes in
 +
the RNA organelles.
 +
</div>
 +
<div id="projectdescription">
 +
<div id="project1"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/Biomaterials"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/2/2c/RocheinertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/6/61/RochePB.gif"></div><h2>Biomaterials</div></a>
 +
<div id="project2"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/Transmembrane_Proteins"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/5/51/LaserinertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/a/ad/LaserPB.gif"></div><h2>Membrane Photoreceptor</h2></a></div>
 +
<div id="project3"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/RNA"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/1/17/GifRNAinertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/5/53/GifRNAPB.gif"></div><h2>RNA Organelle</h2></div></a>
 +
<div id="project4"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/Proteins_Caging"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/c/c5/GifdrompainertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/e/e7/GifdrompaPB.gif"></div><h2>Proteins Photocaging</h2></div></a>
 +
</div>
 +
        </div>
 +
    </body>
 +
 
 +
 
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 +
 
 +
<script>
 +
 
 +
 
 +
(function(){
 +
    var BACTERIE_COUNT = 100;
 +
    var colors = ['#062D75', '#E8292F'];
 +
    var bacteries = [];
 +
    var container = window.document.getElementById("u1570");
 +
    var interval1;
 +
    var interval2
 +
 
 +
   
 +
    function fillContainer () {
 +
        var k = 1;
 +
        for(var i=0; i<BACTERIE_COUNT; i++) {
 +
            k = 1-k;
 +
            var bacterie = new Bacterie(colors[k]);
 +
            bacterie.setPosition(container);
 +
            bacteries.push(bacterie);
 +
            container.appendChild(bacterie.element);
 +
        }
 +
        runColorChanging();
 +
    }
 +
 
 +
 
 +
 
 +
 
 +
    function clearBacteries() {
 +
        if(bacteries.length ==0) return;
 +
        for(var i=0; i<BACTERIE_COUNT; i++) {
 +
                container.removeChild(bacteries[i].element);
 +
        }
 +
        bacteries = [];
 +
    }
 +
 
 +
    function runFillingInterval(){
 +
        interval1 = setInterval(function(){
 +
            clearInterval(interval2);
 +
            clearBacteries();
 +
            fillContainer();
 +
        }, 4000);
 +
    }
 +
 
 +
    function runColorChanging(){
 +
        interval2 = setInterval(function(){
 +
            for(var i=0; i<BACTERIE_COUNT; i++) {
 +
                //console.log(bacteries[i]);
 +
                bacteries[i].changeColor(colors[Math.round(Math.random())]);
 +
            }
 +
 
 +
        }, 2000);
 +
    }
 +
       
 +
 
 +
 
 +
    function Bacterie(color) {
 +
 
 +
           
 +
            this.height = 26;
 +
            this.width = 60;
 +
 
 +
            this.color;
 +
            this.x;
 +
            this.y;
 +
            this.rotation;
 +
            this.element;
 +
 
 +
           
 +
 
 +
         
 +
            this.changeColor = function(color){
 +
                Object.assign(this.element.style, {
 +
                    backgroundColor : color//colors[Math.round(Math.random())]
 +
                });
 +
            }
  
−
<div id="header"><img id="headerimg" src="https://static.igem.org/mediawiki/2017/f/f3/HeaderhomePB.gif"></div>
+
            this.getRotation = function() {
 +
                return Math.floor((Math.random() * 360) + 1);
 +
            }
 +
            this.getPosition = function(max, padding){
 +
                return Math.floor((Math.random() * max) + padding);
 +
            }
 +
            this.setPosition = function(container){
 +
                Object.assign(this.element.style, {
 +
                    top: this.getPosition(container.clientHeight-this.width, 70) +'px',
 +
                    left: this.getPosition(container.clientWidth-this.width, 1) +'px',
 +
                });
 +
            }
  
−
</head>
+
            this.createElement = function(){
  
−
<body>
+
                this.element = document.createElement('div');
 +
                Object.assign(this.element.style, {
 +
                    height: this.height +"px",
 +
                    width: this.width+"px",
 +
                    backgroundColor: color,
 +
                    borderRadius: '20px',
 +
                    transform: 'rotate('+ this.getRotation() + 'deg)',
 +
                    position:'absolute',
 +
                    //top: this.getPosition(380) +'px',
 +
                    //left: this.getPosition(1596) +'px',
 +
                    zIndex:2
 +
                });
 +
               
 +
             
 +
            }
  
−
<h1>Medusa</h1>
+
            this.createElement();
−
<h2>Bringing control to the 3rd Dimension</h2>
+
            return this;
−
<p id="description">We believe that biology is something that should be shared. That’s why we went to talk to the DIY biohacking community to connect to citizen scientists and anyone who just loved biology. With their help, we decided to make a microbial 3D printer, an accessible multifunctional and synthetic biology tool.</p>
+
  
−
<div id="projectdescription">
+
    }
−
<div id="project1"><div class="logo">
+
−
<img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/9/9f/LogobiomatPB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/d/d8/BiomatlogoPB.gif"></div><h6>Biomaterials</h6>Three different biomaterials with differing/distinct properties were developed on: Calcium Carbonate, Polysilicate and P3HB. Each material has unique properties and differing applications, allowing for a broad spectrum of fields that the 3D printer belongs to.</div>
+
−
<div id="project2"><div class="logo">
+
−
<img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/b/bc/LogolaserPB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/8/87/LaserlogoPB.gif"></div><h6>Light control</h6>Optogenetics allows fully reversible control of gene expression in both time and space. Both photosensory transmembrane proteins as well as photoswitchable protein caging were developed to expand the existing library of optogenetic tools.</div>
+
−
<div id="project3"><div class="logo">
+
−
<img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/2/28/LogoRNAPB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/e/ec/RNAtlogoPB.gif"></div><h6>RNA Agglomerations</h6>RNA is a light cost nucleotide material in the cell, which has potential to act as a scaffold and transporter. We aim to recreate RNA agglomerations as formed in mammalian cells with triple repeat disorders, which show liquid phase separation, forming a organelle-like vesicle, where local concentrations of enzymes can be created.</div>
+
−
</div>
+
  
−
</body>
 
  
 +
    fillContainer(); 
 +
    runFillingInterval();
 +
 
 +
})();
 +
</script>
 +
   
 
</html>
 
</html>
 
{{Paris_Bettencourt/footer}}
 
{{Paris_Bettencourt/footer}}

Latest revision as of 17:20, 12 December 2017

BRINGING CONTROL TO THE
THIRD DIMENSION

By creating logic circuits with photo sensitive proteins, we control and study cells in 3D.
Proof of concept - 3D printer: by creating a printer, it is a clear and easily quantified way to validate our 3D controls. It also allowed us to engineer biomaterials that would be compatible and useful in biotech. We also optimised production by creating local concnetrations of enzymes in the RNA organelles.
Centre for Research and Interdisciplinarity (CRI)
Faculty of Medicine Cochin Port-Royal, South wing, 2nd floor
Paris Descartes University
24, rue du Faubourg Saint Jacques
75014 Paris, France
bettencourt.igem2017@gmail.com