Difference between revisions of "Team:UCL/Design"
Mariola.se (Talk | contribs) |
|||
(36 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{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> | ||
− | < | + | |
− | <div id=" | + | <div id="mobilebackground"></div> |
− | < | + | <div id="header2"> |
− | <br> | + | |
− | < | + | <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" >▼ </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><a href="http://pubs.rsc.org/en/Content/ArticleLanding/ | + | <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> | <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. With the assistance of Dr. Chiang, from UCL’s Microfluidics Lab, we designed | + | 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 30: | Line 427: | ||
<br> | <br> | ||
<br> | <br> | ||
− | <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 | + | <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. | 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> | ||
Line 38: | Line 435: | ||
<br> | <br> | ||
<br> | <br> | ||
− | + | Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere. | |
<br> | <br> | ||
− | < | + | </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=" | + | <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=" | + | <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=" | + | <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=" | + | <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> | ||
− | < | + | |
+ | <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> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<b>METHODS</b> | <b>METHODS</b> | ||
Line 132: | Line 501: | ||
<br> | <br> | ||
<br> | <br> | ||
+ | </div> | ||
+ | |||
+ | <div id="text"> | ||
+ | <div class="blockk"> | ||
+ | <h2><span id="results" style="padding-top: 150px;"></span>Results</h2> | ||
<h4>Column: Cell Count (Cells per ul)</h4> | <h4>Column: Cell Count (Cells per ul)</h4> | ||
Line 202: | Line 576: | ||
<div style="float:right; display: inline; width: 50%;"> | <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/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%;"/> | + | <img src="https://static.igem.org/mediawiki/2015/f/f7/Gutchip_table.PNG" style="width: 100%;"/></div> |
− | </div> | + | |
</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
'
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.
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.
Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere.
mammalian Cell Culture
Protocol for Determining Optimum Seeding Cell Density
METHODS
-
Preparation
- Warm medium (DMEM (1x) + GlutaMAXTM-I + 10% FBS), PBS and TE solution in a water bath @ 37ºC
- Spray tubes, bottles, racks and everything that goes inside the hood with 70% ethanol Taking off the medium
- Take off almost all the medium inside the flask Washing the cells
- Wash gently the cells with PBS Trypsinization
- Cover the flask with 3-5 mL with Trypsin/EDTA solution
- Incubate for 3 - 5 minutes @ 37ºC
- Disperse the cells by hitting the flask (once)
- Watch in the microscope to confirm trypsinization step
- Add 5 mL medium to inactivate trypsin
- Centrifuge 400 x g for 5 minutes @ 21 ºC (Eppendorf 5810 R) Adding new medium
- Remove medium + TE without touching the pellet
- Add 5 mL of medium to the centrifuge tube with cells
- Cells were pipetted into a 96 well plate with cell densities reducing by half in each following column (8 replicates) Cell fixation
- Fix the cells in 4% paraformaldehyde for 15 min @ RT
- Wash with PBS three times (3 times, 5 minutes each)
- Incubate with PBS + 0.1% Triton X-100 for 10 minutes @ RT
- Wash with PBS three times (5 minutes each)
- Block with PBS + 3% BSA for 1 hour @ RT
- Wash with PBS (3 times, 5 minutes each)
- Incubate the cells on 1:3000 DAPI for 5 minutes @ 4 ºC
- Wash with PBS (3 times, 5 minutes each)
- Cells were visualized by confocal microscopy. Images were aquired at fluorescence peak excitation and emission wavelengths of 360 nm and 460 nm, respectively.
Cell permeabilization for intracellular biomarkers
Blocking
DAPI/Hoechst addition
Imaging
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:
- Repeat steps 1 to 12 as described in the protocol above.
- Seed 6000 cells into 3 wells respectively of 4 96 well plates.
- 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