|
|
| (46 intermediate revisions by the same user not shown) |
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | <!DOCTYPE html> | | <!DOCTYPE html> |
| | + | <style> |
| | + | @media screen and (max-width: 1000px) { |
| | + | <!--MAKE MOBILE VERSION APPEAR HERE--> |
| | + | } |
| | + | @media screen and (min-width: 1200px) { |
| | + | .TeamImg { |
| | + | height: 25em; |
| | + | width: 21em; |
| | + | } |
| | + | } |
| | + | </style> |
| | <body style="background-color: #fff;"> | | <body style="background-color: #fff;"> |
| | <div> | | <div> |
| Line 33: |
Line 44: |
| | <div class="row text-center"> | | <div class="row text-center"> |
| | <div class="col-md-4"> | | <div class="col-md-4"> |
| − | <a href="//2017.igem.org/Team:York/Description#Co-culture"> | + | <a href="//2017.igem.org/Team:York/Results#Modifying-Chlamydomonas"> |
| | <img class="Iconlink" src="//2017.igem.org/wiki/images/1/1c/TeamYork-BiologyIcon.png" width="100px" height="100px"> | | <img class="Iconlink" src="//2017.igem.org/wiki/images/1/1c/TeamYork-BiologyIcon.png" width="100px" height="100px"> |
| | </a> | | </a> |
| Line 57: |
Line 68: |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <!--------------TRYING OUT THE TEAM STUFF HERE---------------------> | + | </section> |
| − | <section id="Meet_The_Team">
| + | <div class="cam-container" style="background-color: #dddddd; color: #444444;"> |
| − | | + | <section id="Project-Intro" style="padding-top: 10px; padding-bottom: 20px; margin-top: 0px;"> |
| − | <div class="row text-center">
| + | <br> |
| − | <!----------------------------------------------------LEFT IMAGE------------------------------------------------------->
| + | <div class="container" style="background-color: rgb(250,250,250); color: #000000; border-style: solid; border-color: #000000; border-radius: 25px;"> |
| − | <div class="col-md-4">
| + | <div class="text-center"> |
| − | <button style="background-color: #000; color: #fff; opacity: 0.7; height: 3em; width: 2em; position: absolute; left: 1em; top: 9em;" onclick="plusDivs(-1);plusDivs2(-1);plusDivs3(-1);">❮</button>
| + | <h1>The Project</h1> |
| − | <center class="TeamImg1">
| + | <br> |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d4/TeamYork-Headshots-Sam1.jpg" width="100%" height="100%">
| + | <p style="text-align: center; font-size: 20px;">Upon being asked to find the number of microorganisms in a given sample, the response from members of our iGEM team has invariably been a long sigh and a plea to the realms of the supernatural. <br><br>That most human quality - laziness - alongside flaws in traditional techniques, which we will revisit below, has led to us designing a potential solution in the form of a Digital Inline Holographic Microscope (DIHM). <br><br>In particular, we discovered that, when studying co-cultures, there are precious few methods of counting cells that are accurate, fast, cheap and non-destructive. <br><br>We decided, therefore, to try to bring together two promising areas of science in this project: <br>Digital Holographic Microscopy and Co-Culturing.</p> |
| − | <span id="TeamImg1Text">Sam F: a proud member of <em>Homo cynicus.</em></span>
| + | <br style="line-size: 10px;"> |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/f/f9/TeamYork-Headshots-Sam2.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Sam A: likes to pretend he's only half German... but look at him.</span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d0/TeamYork-Headshots-Helen.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Helen: loud and proud. Mostly loud.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/0b/TeamYork-Headshots-Marta.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Marta: half human, half Jaffa Cake.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/b/b3/TeamYork-Headshots-Joel.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Joel: can see the matrix... if it's written in MATLAB.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/8/8a/TeamYork-Headshots-Igors.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Igors: he's ALIVE!</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/09/TeamYork-Headshots-Nathan.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Nathan: lean, mean, meme machine.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/08/TeamYork-Headshots-Aeri.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Malin Imo Kristina Olsson Sundstrom: Aeri, for short.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg1">
| + | |
| − | <img id="TeamImg1" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/1/1c/TeamYork-Headshots-Joe.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg1Text">Joe: now with 10% less fat!</em></span>
| + | |
| − | </center>
| + | |
| − | </div> | + | |
| − | <!------------------------------------------------END LEFT IMAGE------------------------------------------------------->
| + | |
| − | <!--------------------------------------------------MIDDLE IMAGE------------------------------------------------------->
| + | |
| − | <div class="col-md-4"> | + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;"
| + | |
| − | src="https://static.igem.org/mediawiki/2017/f/f9/TeamYork-Headshots-Sam2.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Sam A: likes to pretend he's only half German... but look at him.</span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d0/TeamYork-Headshots-Helen.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Helen: loud and proud. Mostly loud.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/0b/TeamYork-Headshots-Marta.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Marta: half human, half Jaffa Cake.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/b/b3/TeamYork-Headshots-Joel.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Joel: can see the matrix... if it's written in MATLAB.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/8/8a/TeamYork-Headshots-Igors.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Igors: he's ALIVE!</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/09/TeamYork-Headshots-Nathan.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Nathan: lean, mean, meme machine.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/08/TeamYork-Headshots-Aeri.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Malin Imo Kristina Olsson Sundstrom: Aeri, for short.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/1/1c/TeamYork-Headshots-Joe.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Joe: now with 10% less fat!</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg2">
| + | |
| − | <img id="TeamImg2" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d4/TeamYork-Headshots-Sam1.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Sam F: a proud member of <em>Homo cynicus.</em></span>
| + | |
| − | </center>
| + | |
| − | </div>
| + | |
| − | <!-----------------------------------------------END MIDDLE IMAGE------------------------------------------------------>
| + | |
| − | <!--------------------------------------------------RIGHT IMAGE-------------------------------------------------------->
| + | |
| − | <div class="col-md-4">
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d0/TeamYork-Headshots-Helen.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg3Text">Helen: loud and proud. Mostly loud.</span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/0b/TeamYork-Headshots-Marta.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg3Text">Marta: half human, half Jaffa Cake.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/b/b3/TeamYork-Headshots-Joel.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg3Text">Joel: can see the matrix... if it's written in MATLAB.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/8/8a/TeamYork-Headshots-Igors.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Igors: he's ALIVE!</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/09/TeamYork-Headshots-Nathan.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg2Text">Nathan: lean, mean, meme machine.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/0/08/TeamYork-Headshots-Aeri.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg3Text">Malin Imo Kristina Olsson Sundstrom: Aeri, for short.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/1/1c/TeamYork-Headshots-Joe.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg3Text">Joe: now with 10% less fat!</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;" src="https://static.igem.org/mediawiki/2017/d/d4/TeamYork-Headshots-Sam1.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg3Text">Sam F: a proud member of <em>Homo cynicus.</em></span>
| + | |
| − | </center>
| + | |
| − | <center class="TeamImg3">
| + | |
| − | <img id="TeamImg3" class="TeamImg" style="height: 21em; width: 21em; position: center; object-fit: cover;"
| + | |
| − | src="https://static.igem.org/mediawiki/2017/f/f9/TeamYork-Headshots-Sam2.jpg" width="100%" height="100%">
| + | |
| − | <span id="TeamImg3Text">Sam A: likes to pretend he's only half German... but look at him.</span>
| + | |
| − | </center>
| + | |
| − | <button style="background-color: #000; color: #fff; opacity: 0.7; height: 3em; width: 2em; position: relative; right: -8.5em; bottom: 9em;" onclick="plusDivs(1);plusDivs2(1);plusDivs3(1);">❯</button>
| + | |
| − | </div>
| + | |
| − | <!-----------------------------------------------END RIGHT IMAGE------------------------------------------------------->
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| | </section> | | </section> |
| − | | + | </div> |
| − | <script>
| + | <div class="cam-container" style="background-color: #ddd; color: #000;"> |
| − | var slideIndex = 1;
| + | <section style="padding-top: 10px; padding-bottom: 20px; margin-top: 0px;"> |
| − | showDivs(slideIndex);
| + | <div class=" container" style="background- color: rgb( 250,250,250); color: # 000000; border-style: solid; border-color: # 000000; border- radius: 25px;"> |
| − | | + | <div class=" text- center"> |
| − | function plusDivs(n) {
| + | <h1>Our Work</h1> |
| − | showDivs(slideIndex += n);
| + | </div> |
| − | }
| + | <div class="text -left" style="margin: 0px;"> |
| − | | + | <p style="font-size: 18px; text-align: center;">To easily find our achievements with respect to the iGEM 2017 competition, please see our <a style=" color: #0000ff;" href="//2017.igem.org/ Team:York/ Achievements"> Achievements</ a> page for a list of direct links.</ p> |
| − | function showDivs(n) {
| + | </div> |
| − | var i;
| + | <br style="line-height: 10px;"> |
| − | var x = document.getElementsByClassName("TeamImg1");
| + | |
| − | if (n > x.length) {slideIndex = 1}
| + | |
| − | if (n < 1) {slideIndex = x.length}
| + | |
| − | for (i = 0; i < x.length; i++) {
| + | |
| − | x[i].style.display = "none";
| + | |
| − | }
| + | |
| − | x[slideIndex-1].style.display = "block";
| + | |
| − | }
| + | |
| − | | + | |
| − | var slideIndex2 = 1;
| + | |
| − | showDivs2(slideIndex2);
| + | |
| − | | + | |
| − | function plusDivs2(n) {
| + | |
| − | showDivs2(slideIndex2 += n);
| + | |
| − | }
| + | |
| − | | + | |
| − | function showDivs2(n) {
| + | |
| − | var i;
| + | |
| − | var x = document.getElementsByClassName("TeamImg2");
| + | |
| − | if (n > x.length) {slideIndex2 = 1}
| + | |
| − | if (n < 1) {slideIndex2 = x.length}
| + | |
| − | for (i = 0; i < x.length; i++) {
| + | |
| − | x[i].style.display = "none";
| + | |
| − | }
| + | |
| − | x[slideIndex2-1].style.display = "block";
| + | |
| − | }
| + | |
| − | | + | |
| − | var slideIndex3 = 1;
| + | |
| − | showDivs3(slideIndex3);
| + | |
| − | | + | |
| − | function plusDivs3(n) {
| + | |
| − | showDivs3(slideIndex3 += n);
| + | |
| − | }
| + | |
| − | | + | |
| − | function showDivs3(n) {
| + | |
| − | var i;
| + | |
| − | var x = document.getElementsByClassName("TeamImg3");
| + | |
| − | if (n > x.length) {slideIndex3 = 1}
| + | |
| − | if (n < 1) {slideIndex3 = x.length}
| + | |
| − | for (i = 0; i < x.length; i++) {
| + | |
| − | x[i].style.display = "none";
| + | |
| − | }
| + | |
| − | x[slideIndex3-1].style.display = "block";
| + | |
| − | }
| + | |
| − | </script> | + | |
| − | | + | |
| − | <!----------------------------------------------------------------->
| + | |
| − | <br>
| + | |
| − | <div class="container" style="background-color: # fff; border-style: solid; border-color: # 000000; border-radius: 25px; padding: 10px 10px 10px 10px; display: none;"> | + | |
| − | <br>
| + | |
| − | <h1 class="text-center">A Brief Overview</h1>
| + | |
| − | <hr>
| + | |
| − | <div class="row description-text" style="margin-right: 1em; margin-left: 1em;">
| + | |
| − | <div class="col-md-7">
| + | |
| − | <p style="font-size: 0.9em;">Initially, we aimed to develop and optimize a stable microbial co-culture system whereby the source of energy would be light, and carbon would flow from CO₂ in the atmosphere to synthesise ethanol: acting as a surrogate for biofuel. This simple synthetic microbial community comprises <em>Chlamydomonas reinhardtii</em>, an algae, that produces sugars through photosynthesis to feed the ethanol-producing <em>Escherichia coli</em>, ideally resulting in a growth system that could reduce the cost of feedstock materials for biofuel production. However, their differing growth rates would likely result in an unstable system in which one organism might outgrow the other and, in trying to monitor this, we discovered that many methods of co-culture analysis require substantial improvement.</p>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class=" col-md-5 description-images" style="background- image: url( //2017.igem.org/wiki/images/c/c9/IGEM-York-Biology-Overview.jpg); background-size: 100% 100%; background-position: 0px 0px; background-repeat: no-repeat; border-radius: 25px; border-color: # ddd; border-style: solid ;"> | + | |
| − | <br style="line-height:16em;">
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <hr>
| + | |
| − | <div class="row description-text" style="margin-right: 1em; margin-left: 1em;">
| + | |
| − | <div class="col-md-5 description-images" style="background-image: url(//2017.igem.org/wiki/images/b/b4/IGEM-York-Hardware2-Overview.png); background-size: cover; background-position: 0px 0px; background-repeat: no-repeat; border-radius: 25px; border-color: #ddd; border-style: solid;">
| + | |
| − | <br style="line-height:17em;">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | | + | |
| − | <p style="font-size: 0.9em;">In response to this realisation, we aim to use Digital Inline Holographic Microscopy (DIHM) to analyse co-cultures. This involves illuminating a sample of the co-culture with a laser and observing the diffraction pattern formed by the microbes. This pattern is sensitive to the wavelength of the laser light, the distance from the co-culture sample and the shape, size and position of the microbes. The relationship between these quantities is well described, so we can calculate what the cross-section of the sample would look like at various levels. This allows us to form a stack of 2D images which, when combined, represent the 3D sample. We then analyse this stack of images to track the number of each type of microbe present. This method of co-culture analysis has a great deal of potential in relation to counting organisms in co-cultures more quickly and less expensively than other methods.</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <hr>
| + | |
| − | <div class=" row description-text" style="margin -right: 1em; margin-left: 1em;"> | + | |
| − | <div class="col-md-7">
| + | |
| − | <p style="font-size: 0.9em;">To implement this, images are taken from a camera via Raspberry Pi computer and sent to a computer running Windows. Here, code written in MATLAB forms the aforementioned stack of 2D images. We can then analyse this stack of images to establish the number of each type of microorganism present in the co-culture. From this information we are able to compare these results to our mathematical model. Then, we can then identify the best ways to modify the conditions of the co-culture in order to optimise the growth of the bacteria and, thence, the output of ethanol from the system. A Windows application has been written, in C#, which allows a user to fully control the system without any interaction with the code itself.</p> | + | |
| − | </div>
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <div class="col-md-5 description-images" style="background: url(//2017.igem.org/wiki/images/c/cf/Software-into.png); background-size: cover; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); border-radius: 25px; border-color: #ddd; border-style: solid;">
| + | |
| − | <br style="line-height:14em;">
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </section>
| + | |
| − | <br> | + | |
| | </div> | | </div> |
| | + | </section> |
| | + | </div> |
| | </body> | | </body> |
| | </html> | | </html> |
| | {{:Team:York/Templates/Footer}} | | {{:Team:York/Templates/Footer}} |
