Team:Dundee/Project/Mop

From 2013.igem.org

(Difference between revisions)
 
(50 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Dundee/Templates/Navigationbar}}
 +
<html>
<html>
-
<html lang="en">
+
<head>
-
  <head>
+
<meta charset=utf-8 />
-
    <meta charset="utf-8">
+
-
    <title>iGEM Dundee 2013 &middot; Toxi-Mop</title>
+
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
-
    <meta name="description" content="">
+
-
    <meta name="author" content="">
+
-
    <!-- CSS -->
+
<!-- Website Design By: www.happyworm.com -->
-
    <link href=' http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
<title>Demo : jPlayer circle player</title>
-
    <link href="http://www.kyleharrison.co.uk/igem/assets/css/bootstrap.css" rel="stylesheet">
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
    <link href="http://www.kyleharrison.co.uk/igem/assets/css/style.css" rel="stylesheet">
+
<link rel="stylesheet" href="http://www.kyleharrison.co.uk/igem/digiposter/skin/circle.skin/circle.player.css">
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.jplayer.min.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.transform2d.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.grab.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/mod.csstransforms.min.js"></script>
 +
<script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/circle.player.js"></script>
-
    <!--
+
<script type="text/javascript">
-
    <link href="http://www.kyleharrison.co.uk/igem/assets/css/bootstrap-responsive.css" rel="stylesheet">
+
//<![CDATA[
-
-->
+
-
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+
-
    <!--[if lt IE 9]>
+
-
      <script src="http://www.kyleharrison.co.uk/igem/assets/js/html5shiv.js"></script>
+
-
    <![endif]-->
+
-
    <!-- Fav and touch icons -->
+
$(document).ready(function(){
-
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+
-
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
+
-
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+
-
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+
-
                                  <link rel="shortcut icon" href="../assets/ico/favicon.png">
+
-
  </head>
+
-
   <body>
+
   /*
 +
  * Instance CirclePlayer inside jQuery doc ready
 +
  *
 +
  * CirclePlayer(jPlayerSelector, media, options)
 +
  *  jPlayerSelector: String - The css selector of the jPlayer div.
 +
  *  media: Object - The media object used in jPlayer("setMedia",media).
 +
  *  options: Object - The jPlayer options.
 +
  *
 +
  * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
 +
  *
 +
  * The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
 +
  * Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
 +
  * However, the OGA format would be used in this case with the HTML solution.
 +
  */
-
     <!-- Part 1: Wrap all page content here -->
+
  var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
-
     <div id="wrap">
+
  {
 +
     m4a: "http://www.kyleharrison.co.uk/igem/digiposter/Introduction.wav",
 +
  }, {
 +
     cssSelectorAncestor: "#cp_container_1",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
-
      <!-- Fixed navbar -->
+
  var myCirclePlayer2 = new CirclePlayer("#jquery_jplayer_2",
-
      <div class="navbar navbar-fixed-top">
+
  {
-
        <div class="navbar-inner">
+
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/BrianStory.wav",
 +
  }, {
 +
    cssSelectorAncestor: "#cp_container_2",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
-
          <div class="container">
+
    var myCirclePlayer3 = new CirclePlayer("#jquery_jplayer_3",
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
  {
-
              <span class="icon-bar"></span>
+
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/ScoobyDoo.wav",
-
              <span class="icon-bar"></span>
+
  }, {
-
              <span class="icon-bar"></span>
+
    cssSelectorAncestor: "#cp_container_3",
-
            </button>
+
    swfPath: "js",
-
            <a class="brand" href="/Team:Dundee">Dundee iGEM 2013</a>
+
    wmode: "window",
-
            <div class="nav-collapse collapse">
+
    keyEnabled: true
-
              <ul class="nav">
+
  });
-
                <li class="active"><a href="/Team:Dundee">Home</a></li>
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="/Team:Dundee/Team">Meet the Team</a></li>
+
-
                    <li><a href="https://igem.org/Team.cgi?id=1012">Team Information</a></li>
+
-
                    <li><a href="/Team:Dundee/Team/Acknowledgements">Acknowledgements</a></li>
+
-
                    <li><a href="/Team:Dundee/Team/Attributions">Attributions</a></li>
+
-
                    <li><a href="/Team:Dundee/Team/Gallery">Gallery</a></li>
+
-
                    <li><a href="/Team:Dundee/Team/Contact">Contact</a></li>
+
-
                  </ul>
+
-
                </li>
+
-
                <li class="dropdown">
+
});
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
+
//]]>
-
                  <ul class="dropdown-menu">
+
</script>
-
                    <li><a href="/Team:Dundee/Project">Project Overview</a></li>
+
</head>
-
                    <li><a href="/Team:Dundee/Project/Notebook">Notebook</a></li>
+
<body>
-
                    <li class="divider"></li>
+
-
                    <li class="nav-header">Lab</li>
+
-
                    <li><a href="/Team:Dundee/Project/LabOverview">Lab Overview</a></li>
+
<!-- Begin page content -->
-
                    <li><a href="/Team:Dundee/Project/Mop">Mop</a></li>
+
-
                    <li><a href="/Team:Dundee/Project/Detector">Detector</a></li>
+
-
                    <li class="divider"></li>
+
-
                    <li class="nav-header">Modelling </li>
+
-
                    <li><a href="/Team:Dundee/Project/MathOverview">Modelling Overview</a></li>
+
-
                    <li><a href="/Team:Dundee/Project/MathTheory">Theory</a></li>
+
-
                    <li class="divider"></li>
+
-
                    <li class="nav-header">Software</li>
+
-
                  <li><a href="/Team:Dundee/Project/SoftwareOverview">Software Overview</a></li>
+
-
                  <!--<li><a href="/Team:Dundee/Project/SoftwareTheory">Mop-toppus</a></li>-->
+
-
                  </ul>
+
-
                </li>
+
-
 
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="#">Our Biobricks</a></li>
+
-
                    <li><a href="#">Improvements</a></li>
+
-
                  </ul>
+
-
                </li>
+
-
 
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Safety <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="#">General Safety</a></li>
+
-
                    <li><a href="#">Safety in the Lab</a></li>
+
-
                    <li><a href="#">Public Safety and Awareness</a></li>
+
-
                    <li><a href="#">Enviromental Safety</a></li>
+
-
                  </ul>
+
-
                </li>
+
-
 
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="#">Overview</a></li>
+
-
                    <li><a href="#">Collaboration</a></li>
+
-
                    <li><a href="#">Outreach</a></li>
+
-
                    <li><a href="/Team:Dundee/HumanPractice/CaseStudy">Clatto Case Study</a></li>
+
-
                    <li class="divider"></li>
+
-
                    <li class="nav-header">Media</li>
+
-
                    <li><a href="http://www.youtube.com/channel/UCvHOQ9Y1PqKInj6iCwLqTJw/feed?view_as=public">Youtube Channel</a></li>
+
-
                    <li><a href="#">Graphic Novel</a></li>
+
-
                    <li><a href="http://www.flickr.com/photos/97927329@N05/">Flickr</a></li>
+
-
                    <li><a href="#">Video Game</a></li>
+
-
                    <li class="divider"></li>
+
-
                    <li class="nav-header">Social Media</li>
+
-
                    <li><a href="https://www.facebook.com/DundeeiGem2013">Facebook</a></li>
+
-
                    <li><a href="https://twitter.com/DundeeiGEMTeam">Twitter</a></li>
+
-
                    <li><a href="https://plus.google.com/u/0/116223511035478208262/posts?hl=en_US">Google+</a></li>
+
-
                   
+
-
                  </ul>
+
-
                </li>
+
-
 
+
-
                <!--
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sponsors <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="/Team:Dundee/Sponsors">Our Sponsors</a></li>
+
-
                    <li><a href="#">Sponsorship Levels</a></li>
+
-
                  </ul>
+
-
                </li>
+
-
              -->
+
-
              <li><a href="/Team:Dundee/Sponsors">Our Sponsors</a></li>
+
-
 
+
-
 
+
-
              </ul>
+
-
            </div><!--/.nav-collapse -->
+
-
          </div>
+
-
        </div>
+
-
      </div>
+
-
 
+
-
 
+
-
      <!-- Begin page content -->
+
       <div class="container">
       <div class="container">
-
      <!-- Title -->
+
<div class="row">
-
      <div class="page-header">
+
<div class="span12">
-
          <h2><b>The Mop</b> </h2>
+
<h2> An Introductin by Brian Cox </h2><br>
-
        </div>
+
</div></div>
-
      <!-- Title End -->
+
-
      <div class="row" style="text-align:justify;margin-top:-20px;">
+
<div class="row">
-
        <div class="span12">
+
<div class="span12">
-
          <h2>Aim: To engineer the <i> B. subtilis</i> receptor PrkC to respond to microcystin</h2>
+
<center><img src="https://static.igem.org/mediawiki/2013/2/2b/PosterBanner.jpg" style="height:150px;width:98%;padding-left:20px"></img</center>
-
          <p> <i> B. subtilis</i> forms resistant structures called spores in order to survive harsh environmental conditions. In order for the spores to recognise that the conditions have again become favourable for growth the spores have to monitor the extracellular environment. This is done via a number of inner-membrane receptors described as germinant receptors. PrkC is an example of a germinant receptor and it binds to cell wall associated peptides.</p>
+
</div></div>
-
        </div>
+
 +
<div class="row">
 +
<div class="span4">
 +
<centeR>
 +
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
 +
      <div id="jquery_jplayer_1" class="cp-jplayer"></div>
-
        <div class="span6">
+
      <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
 +
      <div id="cp_container_1" class="cp-container">
 +
        <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
 +
          <div class="cp-buffer-1"></div>
 +
          <div class="cp-buffer-2"></div>
         </div>
         </div>
-
 
+
        <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
-
      </div><!-- Row End -->
+
          <div class="cp-progress-1"></div>
-
 
+
          <div class="cp-progress-2"></div>
-
            <div class="row" style="text-align:justify">
+
-
 
+
-
        <div class="span12">
+
-
          <h2>Sensing cell wall peptides & conditions that are permissive for growth </h2>
+
-
          <p> Actively growing cells turnover cell wall components and these can thus be found in the extracellular milieu. So by sensing cell wall components, through the PrkC receptor, the spore can tell that other cells are growing in the nearby environment. This is how the PrkC receptor can signal to the spore that conditions are permissive for growth.</p><br>
+
         </div>
         </div>
 +
        <div class="cp-circle-control"></div>
 +
        <ul class="cp-controls">
 +
          <li><a class="cp-play" tabindex="1">play</a></li>
 +
          <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
 +
        </ul>
 +
      </div><p><strong> Introduction</strong> </p></center>
 +
</div>
 +
<div class="span4">
 +
    <center> <div id="jquery_jplayer_2" class="cp-jplayer"></div>
-
       </div><!-- Row End -->
+
       <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
-
 
+
-
 
+
-
 
+
-
        <div class="row" style="text-align:justify">
+
-
 
+
-
        <div class="span6">
+
-
 
+
-
        <h2>PrkC receptor activation</h2>
+
-
        <p>PrkC receptor activation triggers a process called germination which is the conversion of the spore back into an actively growing cell.</p><br>
+
-
       
+
-
        <h2>PrkC receptor</h2>
+
-
        <p>The PrkC receptor has 4 extracellular domains PASTA 1, 2 and 3 which are capped by a C-terminal domain and this sits on the outside of the spore inner membrane. The 3 PASTA domains are implicated in binding of the cell wall components and are thus described as the ligand binding domains (fig 1).</p><br>
+
-
       
+
-
        <h2>PrkC receptor to detect microcystin</h2>
+
-
        <p>We hope to detect microcystin by replacing the 3 ligand binding domains with the human protein- protein phosphatase 1 (PP1) (fig 2).</p><br>
+
-
       
+
-
        <p>We hope that when the microcystin binds to PP1 this will still result in activation of the downstream pathways controlled by the native PrkC receptor. Additionally, we hope to have our <i> B. subtilis</i> strain constitutively expressing green fluorescent protein so that when it is relieved from dormancy it will fluoresce and this will hopefully be detectable with our electronic Moptopus device.</p>
+
 +
      <div id="cp_container_2" class="cp-container">
 +
        <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
 +
          <div class="cp-buffer-2"></div>
 +
          <div class="cp-buffer-2"></div>
         </div>
         </div>
-
 
+
         <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
-
         <div class="span6">
+
          <div class="cp-progress-2"></div>
-
          <div class="span6" style="margin-top:20px;">
+
          <div class="cp-progress-2"></div>
-
              <img id="image-6" src="http://placehold.it/600x300/8066DB/000000&text=Figure 1">
+
-
            </div><br>
+
-
 
+
-
            <div class="span6" >
+
-
          <br> <p><i><b>Figure 1.</b> .</i></p><br>
+
-
            </div>
+
-
 
+
-
            <div class="span6">
+
-
              <img id="image-6" src="http://placehold.it/600x300/8066DB/000000&text=Figure 2">
+
-
            </div><br><br>
+
-
 
+
-
            <div class="span6">
+
-
            <p><br><i>Figure 2. .</i></p>
+
-
          </div>
+
         </div>
         </div>
 +
        <div class="cp-circle-control"></div>
 +
        <ul class="cp-controls">
 +
          <li><a class="cp-play" tabindex="1">play</a></li>
 +
          <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
 +
        </ul>
 +
      </div><p><strong> Personal Story</strong> </p></center>
 +
</div>
-
        <div class="span12">
+
<div class="span4">
-
        <h2>Progress so far...</h2>
+
<centeR>
-
        <p>We are currently in the process of cloning this receptor and we are having some difficulty. We have successfully cloned the N-terminal part of the receptor and are currently in the process of adding on the PP1s which we will be doing by suicide ligation. The final step after adding the PP1s will be to add on the C-terminal domain. </p><br><br>
+
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
-
        </div>
+
      <div id="jquery_jplayer_3" class="cp-jplayer"></div>
-
       </div><!-- Row End -->
+
       <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
-
<hr>
+
-
 
+
       <div id="cp_container_3" class="cp-container">
-
 
+
         <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
-
<!-- Detector 2 -->
+
          <div class="cp-buffer-3"></div>
-
 
+
           <div class="cp-buffer-3"></div>
-
       <div class="row" style="text-align:justify;margin-top:-20px;">
+
-
         <div class="span12">
+
-
          <h2>Aim: To engineer the <i>E. coli</i> EnvZ sensor kinase to respond to microcystin</h2>
+
-
           <p>The EnvZ system is a signal transduction system composed of two parts and is, therefore, described as a two-component regulatory system. Part 1 is the sensor kinase protein located in the membrane of the cell and Part 2 is the response regulator protein. The native EnvZ sensor detects changes in osmolarity. </p>
+
         </div>
         </div>
-
 
+
         <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
-
 
+
          <div class="cp-progress-3"></div>
-
         <div class="span6">
+
          <div class="cp-progress-3"></div>
-
 
+
         </div>
         </div>
 +
        <div class="cp-circle-control"></div>
 +
        <ul class="cp-controls">
 +
          <li><a class="cp-play" tabindex="1">play</a></li>
 +
          <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
 +
        </ul>
 +
      </div><p><strong> What is Synthetic Biology?</strong> </p></center>
 +
</div>
-
      </div><!-- Row End -->
+
</div>
-
 
+
-
 
+
-
        <div class="row" style="text-align:justify">
+
-
 
+
-
        <div class="span6" style="text-align:justify">
+
-
 
+
-
        <h2>EnvZ sensor kinase</h2>
+
-
          <p> The sensor kinase EnvZ detects a signal from the environment and auto-phosphorylates. The phosphoryl group is then transferred to the response regulator OmpR. OmpR is a DNA-binding protein.
+
-
          <br><br>
+
-
          E.coli is a gram-negative bacteria which means that is has both an inner and outer membrane. The EnvZ sensor sits on the inner membrane (Fig 3).
+
-
          </p><br>
+
-
       
+
-
        <h2>EnvZ sensor to detect microcystin</h2>
+
-
        <p>What we want to do for our project is replace the periplasmic domain of EnvZ with the PP1 protein (Fig 4). We hope that when microcystin binds to PP1 then it will activate the receptor.</p><br>
+
-
       
+
-
        <p>This will lead to the phosphorylation and activation of the DNA binding protein OmpR. We will also express in our engineered bacteria a DNA construct encoding GFP that’s expression is under control of the OmpR protein.<br><br> So our cells will turn green in the presence of microcystin and in this way act as a microcystin detector. </p>
+
-
 
+
-
        </div>
+
-
 
+
-
        <div class="span6">
+
-
          <div class="span6" style="margin-top:20px;">
+
-
              <img id="image-6" src="http://placehold.it/600x300/8066DB/000000&text=Figure 3">
+
-
            </div><br>
+
-
 
+
-
            <div class="span6" >
+
-
          <br> <p><i><b>Figure 3.</b> .</i></p><br>
+
-
            </div>
+
-
 
+
-
            <div class="span6">
+
-
              <img id="image-6" src="http://placehold.it/600x300/8066DB/000000&text=Figure 4">
+
-
            </div><br><br>
+
-
 
+
-
            <div class="span6">
+
-
            <p><br><i>Figure 4. .</i></p>
+
-
          </div>
+
-
        </div>
+
-
 
+
-
        <div class="span12">
+
-
        <h2>Progress so far...</h2>
+
-
        <p>WSo far we have successfully cloned the N-terminus with PP1 and we are in the process of adding on the C-terminus. We have also found an OmpR regulated construct in the distribution kit and we have transformed cells to make more of this part. We have also identified GFP in the kit and we will try and join these 2 parts together to make our reporter construct.
+
-
        </p>
+
-
        </div>
+
-
       
+
-
        <div class="span12">
+
-
        <h2>Characterisation of our receptors</h2>
+
-
        <p>We will be looking to quantify how many of our PrkC receptors are expressed on the surface of the spores and also how many EnvZ sensors are present on our <i>E. coli</i> cells.<br><br>
+
-
        We will be able to get hold of some microcystin and we can use this to bind and activate our receptors. We will then measure the amount of fluorescence by flow cytometry or microscopy. We can then quantify the expression of GFP in relation to how much microcystin is presented to our cells. By using values for how many receptors we have on each cell we can calculate the efficiency of our detectors and hopefully use all this information in order to quantify the effectiveness of our detector.
+
-
 
+
-
        </p><br><br>
+
-
        </div>
+
-
       
+
-
      </div><!-- Row End -->
+
-
   
+
-
 
+
-
 
+
-
 
+
-
 
+
-
      <div id="push"></div>
+
-
    </div>
+
-
 
+
-
    <div id="footer">
+
-
      <div class="container">
+
-
        <p class="muted credit"> Created for <a href="https://igem.org/Main_Page">iGEM 2013</a> Dundee. Based upon <a href ="http://twitter.github.io/bootstrap/">Bootstrap</a> and <a href="http://jquery.com/">JQuery</a>. Design by <a href="www.kyleharrison.co.uk"> Kyle Harrison </a>. </p>
+
-
      </div>
+
-
    </div>
+
-
 
+
Line 307: Line 164:
     <!-- the neccessary javascript -->
     <!-- the neccessary javascript -->
-
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 
     <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
     <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
 +
</body>
-
  </body>
 
</html>
</html>

Latest revision as of 00:08, 5 October 2013

iGEM Dundee 2013 · ToxiMop

Demo : jPlayer circle player

An Introductin by Brian Cox


Introduction

Personal Story

What is Synthetic Biology?