Difference between revisions of "Team:UCL/Design"

 
(195 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{CSS_UCL5}}
+
{{CSS_UCL6}}
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
<script>
 +
 +
  $(function () {
 +
  $('.content').myTooltip({
 +
    speed: 200,
 +
    closeOnClick: true
 +
  });
 +
 
 +
});
 +
 +
 +
 +
$.fn.myTooltip = function ( options ) {
 +
 
 +
 
 +
  var defaults = {
 +
    speed: 650,
 +
    closeOnClick: false,
 +
    tooltipClass: 'tooltip'
 +
  };
 +
 
 +
  var settings = $.extend( {}, defaults, options );
 +
 
 +
  var $this = $(this),
 +
      $tooltip = $this.find('.'+settings.tooltipClass);
 +
 
 +
 
 +
  setPosition();
 +
  $(window).resize(function () {
 +
    setPosition();
 +
  });
 +
 
 +
 
 +
  $this.mouseenter(function () {
 +
    $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
 +
  }).mouseleave(function () {
 +
    $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
 +
  });
 +
 
 +
  if(settings.closeOnClick) {
 +
    $tooltip.click(function () {
 +
      $(this).stop(true, true).fadeOut(settings.speed);
 +
    });
 +
  }
 +
 
 +
 
 +
  function setPosition() {
 +
    $tooltip.css({top: $this.height(), left: -150});
 +
  }
 +
 
 +
};
 +
 +
</script>
 +
 +
<style>
 +
 +
 +
.mainmenu {background-color: #fff !important;}
 +
.menu-items a {color: #493C54;}
 +
.buttonblack {background-color: #22343C; border-color: #22343C; }
 +
a.buttonblack { color: #fff !important; font-size: 12px;}
 +
.buttonblack:hover {border-color: #22343C; color: #22343C !important;}
 +
 +
 +
 +
 +
 +
 +
 +
#header2 {
 +
 +
width: 100%;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
margin: 0 auto;
 +
min-height: 100%;
 +
height: auto;
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px;
 +
}
 +
 +
 +
 +
#header2:before
 +
{
 +
content: "";
 +
    background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg');
 +
  background-repeat: no-repeat;
 +
  background-attachment: fixed !important;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
pointer-events: none;
 +
overflow: hidden;
 +
display: block;
 +
border: none;}
 +
 +
#mobilebackground {
 +
  background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg');
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
 +
    top: 0;
 +
    right: 0;
 +
    left: 0;
 +
    background-position: 0 0 0 0;
 +
position: fixed;
 +
    background-repeat: no-repeat;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: none;
 +
width: 100%;
 +
height: 100%;
 +
 +
  }
 +
 +
 +
#text h2 {
 +
font-size: 30px !important;
 +
 +
}
 +
 +
 +
 +
#wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1;}
 +
 +
#submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
 +
 +
#text {margin-top: 50px; z-index: 9999;}
 +
#text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; }
 +
 +
.blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 +
#text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
 +
 +
.citecryan {background: #fff; border-radius: 4px; opacity: 0.8; margin-left: 340px; padding: 10px;}
 +
 +
.citecryan:hover {opacity: 1; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease;}
 +
 +
.constructs {border-radius: 4px;  margin: 0 auto; text-align: justify; font-size: 15px; width: 60%; z-index: 3; opacity: 1;  padding: 40px; line-height: 1.4; padding-top: 25px;}
 +
#text a {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:hover {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:visited {color: #33726c; font-weight: bold; text-decoration: none;}
 +
 +
 +
 +
 +
.content .tooltip {
 +
  background-color: #fff;
 +
border: 1px #22343C solid;
 +
  border-radius: 4px;
 +
  padding: 3px;
 +
  position: absolute;
 +
  width: 300px;
 +
  z-Index: 99999;
 +
  display: none;
 +
letter-spacing: 1px;
 +
line-height: 1;
 +
font-size: 11px;
 +
}
 +
 +
.tooltip a {color: #22343C;}
 +
.tooltip {color: #22343C;}
 +
 +
.content {
 +
  position: relative;
 +
}
 +
 +
.content {color: #d67166;}
 +
 +
.bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png'); text-align: center; line-height: 2;
 +
    background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;}
 +
 +
.bigtitle a {color: #22343C; text-decoration: none;}
 +
 +
.title2 {font-size: 340%;}
 +
 +
.titlecircle {width:85%; margin: 0 auto; padding-top: 12%;}
 +
 +
.arrow {font-size: 50px;}
 +
 +
 +
.buttonblack {
 +
text-transform: uppercase;
 +
  font-size: 14px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 4px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;
 +
  transition-timing-function: ease;
 +
            color: #FFFFFF;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
 +
 +
 +
@media(max-width:1280px){
 +
 +
.bigtitle {font-size: 15px;}
 +
.bigtitle {width: 50%;}
 +
.buttonblack {padding: 5px 11px;}
 +
 +
}
 +
 +
 +
@media(max-width:1152px){
 +
 +
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 80%;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
}
 +
 +
 +
@media(max-width:1024px){
 +
.bigtitle {width: 58%;}
 +
.titlecircle {padding-top: 15%; width: 75%;}
 +
#wrapper {top: 100px;}
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
 +
#header2:before {background-image: none;}
 +
#mobilebackground {display: block;}
 +
.constructs {font-size: 15px;}
 +
 +
 +
}
 +
 +
@media(max-width:960px){
 +
 +
.bigtitle {font-size: 13px; width: 65%;}
 +
.arrow {font-size: 40px;}
 +
.buttonblack {padding: 5px 5px;}
 +
#submenu {width: 110%; margin-left: -5%;}
 +
.constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
 +
.constructs {text-align: center;}
 +
}
 +
 +
 +
@media(max-width:910px){
 +
}
 +
 +
@media(max-width:850px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
 +
.buttonblack {padding: 4px 3px;}
 +
#submenu {width: 112%; margin-left: -6%;}
 +
.constructs img {min-width: 80% !important;}
 +
 +
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width: 768px){
 +
.bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
 +
.bigtitle p { font-size: 13px; margin-top: -20px !important;}
 +
.titlecircle {width: 70%; padding-top: 8%;}
 +
a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
.citecryan {margin-left: 50px;}
 +
 +
}
 +
 +
 +
 +
 +
@media(max-width:680px){
 +
#wrapper {width: 100%;}
 +
#text {margin: 50px 25px 0 25px;}
 +
#text h4 {font-size: 13px;}
 +
.constructs {font-size: 13px;}
 +
.bigtitle p { font-size: 13px; }
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 70%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
 +
}
 +
 +
@media(max-width:640px){
 +
.arrow {font-size: 30px;}
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width:530px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
 +
.bigtitle p {}
 +
.titlecircle {width: 60%;}
 +
.title2 {font-size: 320%;}
 +
#text h4 {line-height: 1.7;}
 +
.citecryan {margin-left: 10px;}
 +
 +
 +
}
 +
 +
@media(max-width: 480px) {
 +
.bigtitle p { font-size: 13px; text-align: center;}
 +
.titlecircle {width: 70%;}
 +
#submenu {width: 90%; margin: 0 auto;}
 +
 +
 +
 +
}
 +
 +
@media(max-width: 410px) {
 +
.titlecircle {width: 75%;}
 +
.title2 {font-size: 300%;}
 +
.bigtitle p {line-height: 1.5 !important;}
 +
}
 +
 +
@media(max-width: 380px) {
 +
.titlecircle {width: 75%; padding-top: 10%;}
 +
.bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
 +
.title2 {font-size: 260%;}
 +
 +
}
 +
 +
 +
@media(max-width: 360px) {
 +
.titlecircle {width: 80%;}
 +
.title2 {font-size: 240%;}
 +
.buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
 +
}
 +
 +
.idea:before {content: ""; background: url('https://static.igem.org/mediawiki/2015/d/d6/UCL_Screenshot_2015-09-03_at_00.png'); background-position: top right; opacity: 0.2; top: 0px; left: 0px; width: 100%; height: 300px; position: absolute; background-repeat: no-repeat; z-index: 1; pointer-events: none;}
 +
 +
 +
 +
.idea {line-height: 2; position: relative; z-index: 2; margin-top: 15px; padding-top: 20px;  border-top: 0px dotted #FF9B8E; border-bottom: 0px dotted #FF9B8E; padding-bottom: 20px;}
 +
 +
 +
 +
 +
.constructsdiv {position: relative; z-index: 1; width: 140%; height: 100%; background-color: #fff; opacity: 1;    margin-left: -20%;
 +
border-radius: 15px;  box-shadow: 0px 0px 20px #eaeaea;}
 +
 +
.constructsdiv:before {content: ""; background-image: url('https://static.igem.org/mediawiki/2015/4/40/UCLScreenshot_2015-09-03_at_13.png'); background-repeat: no-repeat; background-position: top 0% left 9%; opacity: 0.3;  top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: 2; pointer-events: none;    transition-duration: 1s; transition-property: opacity;
 +
    transition-timing-function: ease; }
 +
 +
 +
.constructsdiv:hover:before {opacity: 1; transition-duration: 1s; transition-property: opacity;
 +
    transition-timing-function: ease;}
 +
 +
.counttable {width:100%;}
 +
#count{width:25%;}
 +
 +
table tr td {width:16.7%;}
 +
 +
</style>
 
</head>
 
</head>
−
<body>
+
 
−
<div id="main">
+
<div id="mobilebackground"></div>
−
<h5>Gut-on-Chip</h5>
+
<div id="header2">
−
<br>
+
 
−
<h4>Introduction</h4>
+
<div id="wrapper">
 +
 
 +
<div class="bigtitle">
 +
<div class="titlecircle"><span class="title2">Gut-on-a-Chip</span><br><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a></span>
 +
 
 +
  </div></div>
 +
<div id="submenu" style="padding-top: 150px;">
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#introduction" class="buttonblack">Introduction</a>       
 +
<a data-scroll data-options='{ "easing": "linear" }' href="#monkey" class="buttonblack">Mammalian Cell Culture</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#protocol" class="buttonblack">Protocols</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#results" class="buttonblack">Results</a>
 +
     
 +
 
 +
  </div>
 +
 
 +
<div id="text">
 +
<div class="blockk">
 +
<h2><span id="introduction" style="padding-top: 150px;">Introduction</span> </h2>
 
<p>To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in:  
 
<p>To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in:  
−
<br>
+
 
−
<br><a href="http://pubs.rsc.org/en/Content/ArticleLanding/2013/IB/c3ib40126j#!divAbstract">http://pubs.rsc.org/en/Content/ArticleLanding/2013/IB/c3ib40126j#!divAbstract</a>
+
<br><a href="http://pubs.rsc.org/en/Content/ArticleLanding/2012/LC/c2lc40074j#!divAbstract" target="_blank">http://pubs.rsc.org/en/Content/ArticleLanding/2012/LC/c2lc40074j#!divAbstract</a>
−
<br><a href="http://pubs.rsc.org/en/Content/ArticleLanding/2012/LC/c2lc40074j#!divAbstract">http://pubs.rsc.org/en/Content/ArticleLanding/2012/LC/c2lc40074j#!divAbstract</a>
+
 
<br>
 
<br>
 
<br>
 
<br>
−
The idea is to model the rate at which our genetically engineered bacterial culture (E. Coli Nissle) grows and colonizes the gut, and to characterize its expression of 5-HTP, a serotonin precursor that acts as an anti-depressant, in the device. Dr. Chiang, from UCL’s very own Microfluidics Lab, has already drawn up the 3d design described in the attachment using SolidWorks.
+
The idea is to model the rate at which our genetically engineered bacterial culture (E. Coli Nissle) grows and colonizes the gut, and to characterize its expression of 5-HTP, a serotonin precursor that acts as an anti-depressant. With the assistance of Dr. Chiang, from UCL’s Microfluidics Lab, we designed using SolidWorks a 3D version of the chip model described in the attachment.
 
</p>
 
</p>
 
<br>
 
<br>
Line 21: Line 427:
 
<br>
 
<br>
 
<br>
 
<br>
−
<p>Dr. Paul Sharp, who works with human intestinal epithelial cell models at Kings College London, has kindly agreed to collaborate with us on this project, give us the Caco-2 cells we need, and advice us on the best ways to culture them. We then decided to improve on the original Gut-on-a-Chip designed at Harvard University by making it a more realistic mimic of reality and more financially feasible.The new design doesn't require a porous membrane, and is inspired by Dr. Marco's (UCL Biochemical Engineering) bulging bioreactor. It has been designed under the guidance of Dr. Paul Sharp. In addition to replicating the peristaltic motion of the longitudinal muscles in the intestines like Harvard's design, this model will also replicate the motions created by circular muscles.
+
<p>Dr. Paul Sharp, who works with human intestinal epithelial cells at Kings College London, kindly agreed to collaborate with us on this project. He gave us the Caco-2 cells we needed, and advised us on the best ways to culture them.  
 +
After attending a lecture by Dr. Marques (UCL Biochemical Engineering), we decided to improve the original Gut-on-a-Chip designed at Harvard University by making it a more realistic mimic of reality and more financially feasible.The new design doesn't require a porous membrane, and is inspired by Dr. Marco's bulging bioreactor. It has been designed under the guidance of Dr. Paul Sharp. In addition to replicating the peristaltic motion of the longitudinal muscles in the intestines like Harvard's design, this model will also replicate the motions created by circular muscles.
 
<br>
 
<br>
 
<br>
 
<br>
Line 28: Line 435:
 
<br>
 
<br>
 
<br>
 
<br>
−
The microfluidics device will be initially tested using Monkey Kidney Epithelial Cells, which are very similar to Intestinal Epithelial Cells (Caco-2). Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere.
+
Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere.
 
<br>
 
<br>
−
<h4>Monkey Kidney Fibroblast Cell Culture:</h4>
+
  </div>
 +
 
 +
<div id="text">
 +
<div class="blockk">
 +
<h2><span id="monkey" style="padding-top: 150px;">mammalian Cell Culture</span> </h2>
 
<br>
 
<br>
−
<img src="https://static.igem.org/mediawiki/2015/d/d6/08-25-2015_post_cd73_bead_trypsin_replate_0004.png" alt="Monkey kidney cells1"style="height:200px;">
+
<img src="https://static.igem.org/mediawiki/2015/d/d6/08-25-2015_post_cd73_bead_trypsin_replate_0004.png" alt="mammalian cells cells1"style="height:200px;">
−
<img src="https://static.igem.org/mediawiki/2015/e/ea/08-25-2015_post_cd73_bead_trypsin_replate_0005.png" alt="Monkey kidney cells2"style="height:200px;">
+
<img src="https://static.igem.org/mediawiki/2015/e/ea/08-25-2015_post_cd73_bead_trypsin_replate_0005.png" alt="mammalian cells cells2"style="height:200px;">
−
<img src="https://static.igem.org/mediawiki/2015/f/f5/08-25-2015_post_cd73_bead_trypsin_replate_0006.png" alt="Monkey kidney cells2"style="height:200px;">
+
<img src="https://static.igem.org/mediawiki/2015/f/f5/08-25-2015_post_cd73_bead_trypsin_replate_0006.png" alt="mammalian cells cells2"style="height:200px;">
−
<img src="https://static.igem.org/mediawiki/2015/9/94/08-25-2015_post_cd73_bead_trypsin_replate_0007.png" alt="Monkey kidney cells2"style="height:200px;">
+
<img src="https://static.igem.org/mediawiki/2015/9/94/08-25-2015_post_cd73_bead_trypsin_replate_0007.png" alt="mammalian cells cells2"style="height:200px;">
 
<br>
 
<br>
 
<br>
 
<br>
−
<h4>Protocol for Determining Optimum Seeding Cell Density:</h4>
+
 
 +
<div id="text">
 +
<div class="blockk">
 +
<h2><span id="protocol" style="padding-top: 150px;"></span>Protocol for Determining Optimum Seeding Cell Density</h2>  
 
<p>
 
<p>
−
MATERIALS
 
−
<ul>
 
−
<li>Phosphate-buffered saline (PBS), pH 7.2-7.4</li>
 
−
<li>Trypsin-EDTA (0.05% trypsin)</li>
 
−
<li>Serum-containing cell culture medium (e.g., 10% FBS in DMEM)</li>
 
−
</ul>
 
−
</p>
 
  
−
METHODS
+
<b>METHODS</b>
 
<ol>
 
<ol>
−
Preparation
+
<i>Preparation</i>
 
<li> Warm medium (DMEM (1x) + GlutaMAXTM-I + 10% FBS), PBS and TE solution in a water bath @ 37ºC</li>
 
<li> Warm medium (DMEM (1x) + GlutaMAXTM-I + 10% FBS), PBS and TE solution in a water bath @ 37ºC</li>
 
<li> Spray tubes, bottles, racks and everything that goes inside the hood with 70% ethanol</li>
 
<li> Spray tubes, bottles, racks and everything that goes inside the hood with 70% ethanol</li>
−
<li><b>Taking off the medium</b>
+
<i>Taking off the medium</i>
−
<li> Take off almost all the medium inside the flask</li>
+
<li>Take off almost all the medium inside the flask</li>
−
<li>
+
 
−
<p><b>Washing the cells</b></p>
+
<i>Washing the cells</i>
−
Wash gently the cells with PBS</li>
+
<li>Wash gently the cells with PBS</li>
−
<li><p><b>Trypsinization</b></p>
+
<i>Trypsinization</i>
−
Cover the flask with 3-5 mL with Trypsin/EDTA solution</li>
+
<p><li>Cover the flask with 3-5 mL with Trypsin/EDTA solution</li>
 
<li> Incubate for 3 - 5 minutes @ 37ºC</li>
 
<li> Incubate for 3 - 5 minutes @ 37ºC</li>
 
<li>Disperse the cells by hitting the flask (once)</li>
 
<li>Disperse the cells by hitting the flask (once)</li>
 
<li> Watch in the microscope to confirm trypsinization step</li>
 
<li> Watch in the microscope to confirm trypsinization step</li>
 
<li> Add 5 mL medium to inactivate trypsin</li>
 
<li> Add 5 mL medium to inactivate trypsin</li>
−
<li>Centrifuge 400 x g for 5 minutes @ 21 ºC (Eppendorf 5810 R)</li>
+
<li>Centrifuge 400 x g for 5 minutes @ 21 ºC (Eppendorf 5810 R)</li></p>
−
<li><p><b>Adding new medium</b></p>
+
<i>Adding new medium</i>
−
<li> Remove medium + TE without touching the pellet</li>
+
<p><li>Remove medium + TE without touching the pellet</li>
 
<li> Add 5 mL of medium to the centrifuge tube with cells</li>
 
<li> Add 5 mL of medium to the centrifuge tube with cells</li>
  
  
−
<li>Cells were pipetted into a 96 well plate with cell densities reducing by half in each following column (8 replicates)</li>
+
<li>Cells were pipetted into a 96 well plate with cell densities reducing by half in each following column (8 replicates)</li></p>
−
<!--<li>After 3 days, the cell confluency was checked under a microscope to determine the optimum level.</li>-->
+
  
 +
<i>Cell fixation</i><br>
 +
<li> Fix the cells in 4% paraformaldehyde for 15 min @ RT<br></li>
 +
<li> Wash with PBS three times (3 times, 5 minutes each)</li>
 +
 +
<p><i>Cell permeabilization for intracellular biomarkers</i>
 +
<li>Incubate with PBS + 0.1% Triton X-100 for 10 minutes @ RT</li>
 +
<li>Wash with PBS three times (5 minutes each)</li></p>
 +
<p><i>Blocking</i>
 +
<li> Block with PBS + 3% BSA for 1 hour @ RT</li>
 +
<li> Wash with PBS (3 times, 5 minutes each)</li></p>
 +
<!--<p><b>Primary antibody incubation</b>
 +
<li>Incubate the cells with primary antibody (1:200 – 1:2000) in PBS + 1% BSA for 3 hours @ RT</li>
 +
<li>Wash with PBS (3 times, 5 minutes each)</li></p>-->
 +
<p><i>DAPI/Hoechst addition</i>
 +
<li> Incubate the cells on 1:3000 DAPI for 5 minutes @ 4 ºC</li>
 +
<li> Wash with PBS (3 times, 5 minutes each)</li></p>
 +
<p><i>Imaging</i>
 +
<li>Cells were visualized by confocal microscopy. <!--machine--> Images were aquired at fluorescence peak excitation and emission wavelengths of 360 nm and 460 nm, respectively. </li>
 +
 
 
</ol>
 
</ol>
 
<br>
 
<br>
 
<br>
 
<br>
−
<h4>Column: Cell Count</h4>
+
  </div>
−
<ol>
+
 
−
<li>50000</li>
+
<div id="text">
−
<li>25000</li>
+
<div class="blockk">
−
<li>12500</li>
+
<h2><span id="results" style="padding-top: 150px;"></span>Results</h2>
−
<li>6250</li>
+
<h4>Column: Cell Count (Cells per ul)</h4>
−
<li>3125</li>
+
 
−
<li>1563</li>
+
<table style="width:100%; heigth:30%; visibility:visible;">
−
<li>781</li>
+
<tr><td><b>50000</b></td>  
−
<li>391</li>
+
<td><b>25000</b></td>  
−
<li>195</li>
+
<td><b>12500</b></td>  
−
<li>98</li>
+
<td><b>6250</b></td>  
−
<li>49</li>
+
<td><b>3125</b></td>  
−
<li>Negative Control</li>
+
<td><b>1563</b></td></tr>
−
</ol>
+
<tr><td><img src="https://static.igem.org/mediawiki/2015/a/a8/A1.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/1/11/A2_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/5/59/A3_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/d/d5/A4_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/8/89/A5_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/1/10/A6_UCL.png" class="counttable"></td></tr>
 +
<tr height="10"></tr>
 +
<tr><td><b>781</b></td>  
 +
<td><b>391</b></td>  
 +
<td><b>195</b></td>  
 +
<td><b>98</b></td>  
 +
<td><b>49</b></td>  
 +
<td><b>Negative Control</b></td></tr>
 +
<tr><td><img src="https://static.igem.org/mediawiki/2015/b/b0/A7_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/6/64/A8_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/2/25/A9_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/3/3a/A10_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/8/8f/A11_UCL.png" class="counttable"></td>
 +
<td><img src="https://static.igem.org/mediawiki/2015/6/61/A12_UCL.png" class="counttable"></td></tr>
 +
</table>
 
<br>
 
<br>
 +
 +
<p><img src="https://static.igem.org/mediawiki/2015/0/09/Gutchipseedinggraph.PNG"></p>
 +
 
<h4>Protocol for Determining Adherence Time:</h4>
 
<h4>Protocol for Determining Adherence Time:</h4>
 
<br>
 
<br>
−
Cells were pipetted into a 96 well plate at the optimum seeding density
+
<ol>
−
At intervals of 1 hour, the medium from 1 column was removed
+
<li>Repeat steps 1 to 12 as described in the protocol above.</li>
−
The cells were stained with DAPI, and cell counting was done under the microscope.
+
<li> Seed 6000 cells into 3 wells respectively of 4 96 well plates.</li>
 +
<li> Repeat steps 14 to 24 for one plate at intervals of 1 hour.</li>
 +
</ol>
 +
 
 +
 
 +
  <div style="float: left; display: inline; width: 45%;">
 +
<h3>Adherence Results</h3>
 +
 
 +
<p><h3>1 hour</h3>
 +
<img src="https://static.igem.org/mediawiki/2015/8/89/D3_t1_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/e/e9/D4_t1_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/8/8d/D5_UCL.png" id="count">
 +
</p>
 +
<p><h3>2 hours</h3>
 +
<img src="https://static.igem.org/mediawiki/2015/4/4c/D3_t2_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/1/1e/D4_t2_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/8/83/D5_t2_UCL.png" id="count">
 +
</p>
 +
<p><h3>3 hours</h3>
 +
<img src="https://static.igem.org/mediawiki/2015/1/15/D3_t3_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/8/8d/D4_t3_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/a/aa/D5_t3_UCL.png" id="count">
 +
</p>
 +
<p><h3>4 hours</h3>
 +
<img src="https://static.igem.org/mediawiki/2015/e/e0/D3_t4_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/b/b6/D4_t4_UCL.png" id="count">
 +
<img src="https://static.igem.org/mediawiki/2015/d/df/D5_t4_UCL.png" id="count">
 
</p>
 
</p>
 
</div>
 
</div>
 +
 +
 +
<div style="float:right; display: inline; width: 50%;">
 +
<img src="https://static.igem.org/mediawiki/2015/4/4a/Gut-adherencegraph.PNG" style="position: relative; width:100%; top: 0; margin-top: 40px;"/><br/><br/>
 +
<img src="https://static.igem.org/mediawiki/2015/f/f7/Gutchip_table.PNG" style="width: 100%;"/></div>
 +
 +
 +
 +
 +
</div>
 +
 +
 +
<br/>
 +
</div>
 +
<div style="display:inline; width:50%; margin-bottom:30px;">
 +
 +
<p><img src="https://static.igem.org/mediawiki/2015/c/cd/Bacterialgrowth.PNG" style="width:50%;"></p></div>
 +
<p>We cultured bacterial cells on mammalian cells in the chip to simulate the gut environment and measured the bacterial cell density</p>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:25, 19 September 2015

'

Gut-on-a-Chip
▼

Introduction

To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in:
http://pubs.rsc.org/en/Content/ArticleLanding/2012/LC/c2lc40074j#!divAbstract

The idea is to model the rate at which our genetically engineered bacterial culture (E. Coli Nissle) grows and colonizes the gut, and to characterize its expression of 5-HTP, a serotonin precursor that acts as an anti-depressant. With the assistance of Dr. Chiang, from UCL’s Microfluidics Lab, we designed using SolidWorks a 3D version of the chip model described in the attachment.


SolidWorks1 SolidWorks2

Dr. Paul Sharp, who works with human intestinal epithelial cells at Kings College London, kindly agreed to collaborate with us on this project. He gave us the Caco-2 cells we needed, and advised us on the best ways to culture them. After attending a lecture by Dr. Marques (UCL Biochemical Engineering), we decided to improve the original Gut-on-a-Chip designed at Harvard University by making it a more realistic mimic of reality and more financially feasible.The new design doesn't require a porous membrane, and is inspired by Dr. Marco's bulging bioreactor. It has been designed under the guidance of Dr. Paul Sharp. In addition to replicating the peristaltic motion of the longitudinal muscles in the intestines like Harvard's design, this model will also replicate the motions created by circular muscles.

GoC Design1 GoC Design2

Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere.

mammalian Cell Culture


mammalian cells cells1 mammalian cells cells2 mammalian cells cells2 mammalian cells cells2

Protocol for Determining Optimum Seeding Cell Density

METHODS

    Preparation
  1. Warm medium (DMEM (1x) + GlutaMAXTM-I + 10% FBS), PBS and TE solution in a water bath @ 37ºC
  2. Spray tubes, bottles, racks and everything that goes inside the hood with 70% ethanol
    3. Taking off the medium
  3. Take off almost all the medium inside the flask
    4. Washing the cells
  4. Wash gently the cells with PBS
    5. Trypsinization

  5. Cover the flask with 3-5 mL with Trypsin/EDTA solution
  6. Incubate for 3 - 5 minutes @ 37ºC
  7. Disperse the cells by hitting the flask (once)
  8. Watch in the microscope to confirm trypsinization step
  9. Add 5 mL medium to inactivate trypsin
  10. Centrifuge 400 x g for 5 minutes @ 21 ºC (Eppendorf 5810 R)

    11. Adding new medium

  11. Remove medium + TE without touching the pellet
  12. Add 5 mL of medium to the centrifuge tube with cells
  13. Cells were pipetted into a 96 well plate with cell densities reducing by half in each following column (8 replicates)

    14. Cell fixation
  14. Fix the cells in 4% paraformaldehyde for 15 min @ RT
  15. Wash with PBS three times (3 times, 5 minutes each)

    16. Cell permeabilization for intracellular biomarkers

  16. Incubate with PBS + 0.1% Triton X-100 for 10 minutes @ RT
  17. Wash with PBS three times (5 minutes each)

    18. Blocking

  18. Block with PBS + 3% BSA for 1 hour @ RT
  19. Wash with PBS (3 times, 5 minutes each)

    20. DAPI/Hoechst addition

  20. Incubate the cells on 1:3000 DAPI for 5 minutes @ 4 ºC
  21. Wash with PBS (3 times, 5 minutes each)

    22. Imaging

  22. Cells were visualized by confocal microscopy. Images were aquired at fluorescence peak excitation and emission wavelengths of 360 nm and 460 nm, respectively.


Results

Column: Cell Count (Cells per ul)

50000 25000 12500 6250 3125 1563
781 391 195 98 49 Negative Control

Protocol for Determining Adherence Time:


  1. Repeat steps 1 to 12 as described in the protocol above.
  2. Seed 6000 cells into 3 wells respectively of 4 96 well plates.
  3. Repeat steps 14 to 24 for one plate at intervals of 1 hour.

Adherence Results

1 hour

2 hours

3 hours

4 hours




We cultured bacterial cells on mammalian cells in the chip to simulate the gut environment and measured the bacterial cell density