Team:Dundee/Project/Mop

From 2013.igem.org

(Difference between revisions)
 
(39 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
-
<html lang="en">
+
<head>
 +
<meta charset=utf-8 />
-
      <!-- Begin page content -->
+
<!-- Website Design By: www.happyworm.com -->
-
      <div class="container">
+
<title>Demo : jPlayer circle player</title>
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 +
<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>
-
      <!-- Title -->
+
<script type="text/javascript">
-
      <div class="page-header">
+
//<![CDATA[
-
          <h2><b>ToxiMop</b> – What it is & how it works </h2>
+
-
        </div>
+
-
      <!-- Title End -->
+
-
<div class="row">
+
$(document).ready(function(){
-
    <div class="span12" style="text-align:justify">
+
-
<p>The ToxiMop are two bacterial strains that have been designed to clean microcystin from contaminated water. These strains have been engineered to express human PP1, to which microcystin binds covalently, and target it outside the bacterial membrane to allow easy binding of the toxin. This binding inactivates the toxic activity of microcystin, effectively ‘mopping’ it up.</p><br>
+
-
<p>There are currently two chassis in which PP1 is being expressed: <i>Bacillus subtilis</i>and <i>Escherichia coli</i>. These two organisms were selected as they have different membrane layouts and allowed us to take two different approaches to the mop. Localisation of PP1 is mediated via different signal sequences that direct PP1 to the periplasm in <i>E. coli </i>and membrane in <i>B. subtilis</i>.</p><br>
+
-
<p>We considered two protein transport pathways for the transport of PP1 in our mop, the Sec and Tat protein transport pathways. We took these into consideration as Sec deals with unfolded protein (inserts membrane proteins into the inner membrane) and Tat deals with folded protein. In this way we could find out if PP1 was folding correctly in the periplasm by comparing blots of samples using Sec and samples using Tat.</p><br>
+
-
<p>As <i>B. subtilis</i> is Gram positive, PP1 is transported to the membrane. In this instance, export of PP1 is mediated by the Sec protein transport system, towards this aim; we fused PP1 to the PrsA signal sequence.<i>E. coli </i>is Gram negative and PP1 is targeted to the periplasm. Transport of PP1 to the periplasm can be mediated by either the Sec or Tat protein transport systems. For our project, we chose the MalE (Sec) and TorA (Tat) signal sequences.</p><br>
+
-
<strong>Explain Sec and Tat (possible link to NetLogo)</strong>
+
-
</div>
+
  /*
-
</div>
+
  * 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.
 +
  */
 +
 
 +
  var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
 +
  {
 +
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/Introduction.wav",
 +
  }, {
 +
    cssSelectorAncestor: "#cp_container_1",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
 +
 
 +
  var myCirclePlayer2 = new CirclePlayer("#jquery_jplayer_2",
 +
  {
 +
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/BrianStory.wav",
 +
  }, {
 +
    cssSelectorAncestor: "#cp_container_2",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
 +
 
 +
    var myCirclePlayer3 = new CirclePlayer("#jquery_jplayer_3",
 +
  {
 +
    m4a: "http://www.kyleharrison.co.uk/igem/digiposter/ScoobyDoo.wav",
 +
  }, {
 +
    cssSelectorAncestor: "#cp_container_3",
 +
    swfPath: "js",
 +
    wmode: "window",
 +
    keyEnabled: true
 +
  });
 +
 
 +
});
 +
//]]>
 +
</script>
 +
</head>
 +
<body>
 +
 
 +
<!-- Begin page content -->
 +
      <div class="container">
-
<!-- Row 2 -->
 
<div class="row">
<div class="row">
-
    <div class="span12" style="text-align:justify">
+
<div class="span12">
-
<h2>How was toximop made in the lab?</h2>
+
<h2> An Introductin by Brian Cox </h2><br>
 +
</div></div>
-
<Strong>PP1</strong><br>
+
<div class="row">
-
<p>We were kindly gifted a pGEX6P plasmid containing PP1 from the Division of Signal Transduction Therapy at the University of Dundee. </p><br>
+
<div class="span12">
-
<p>To adhere to the iGEM rules and regulations, it was necessary to remove the specified illegal site present in PP1, Pst1. We introduced a missense mutation through site directed mutagenesis of adenine 900 base to be substituted by cytosine without disturbing the alanine amino acid towards the N terminus of the protein. This was done by designing appropriate primers and a method of polymerase chain reaction (PCR). The PCR product was digested using restriction endonuclease Dpn1 as it recognises methylated sites, therefore recognising the original sequence and destroying it, leaving only mutated PP1 fragments. It was then cloned into both pUniprom and pSB1C3 plasmids and grown in E.coli DH5α cells </p><br>
+
<center><img src="https://static.igem.org/mediawiki/2013/2/2b/PosterBanner.jpg" style="height:150px;width:98%;padding-left:20px"></img</center>
-
<p>In order to carry future tests on PP1, we decided to fuse it to a HA-tag (a DNA sequence derived from human influenza hemagglutinin) which can be detected by antibodies. This was carried out  at the C terminus of PP1 by the use of PCR, digestion with XbaI/HindIII (enzyme) and ligation. </p><br><br>
+
</div></div>
-
<strong>Signalling sequences</strong></br>
+
-
<p>TorA is a TMAO reductase. Its signalling sequence is often used in research, as it is a twin-arginine translocation (Tat) pathway signal and it relies on pre-translocation protein folding in the cytoplasm.  TorAss was obtained from the Division of Molecular Microbiology. </p><br>
+
-
<p>MalE (Maltose binding periplasmic protein) is involved in the high-affinity membrane transport system, MalEFGK, which uses the Secretory transport pathway (Sec). In contrast to Tat, Sec relies on post-translocation protein folding and in some cases it also pushes protein into the inner membrane of bacteria. malEss was obtained by PCR from the chromosomal DNA of E.coli MG1655. </p><br>
+
-
<p>PrsA (penicillin binding protein) is membrane bound and it is present at distinct spots on the membrane forming a helical pattern. Its main role is to catalyse post-translocation folding of membrane proteins and it is also essential for normal growth of <i>B. subtilis</i> ;  prsAss was  amplified by PCR using appropriate primers from B. Subtillis strain 3610. </p><br>
+
-
<p>All of the signalling sequences were cloned into pUniprom by themselves and after sequencing they were fused at the N-terminus of HA-tagged PP1.  This is only useful for the E.coli ToxiMop, as pUniprom is a plasmid unsuitable for use in <i>B. subtilis</i>. PrsAss-PP1-HA had to be cloned into pDR110 vector, which would then recombine into the AmyE locus of the chromosomal DNA creating the <i>B. subtilis</i> ToxiMop. </p><br>
+
 +
<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>
+
      <!-- 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 class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
 +
          <div class="cp-progress-1"></div>
 +
          <div class="cp-progress-2"></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>
-
   
+
<div class="span4">
 +
    <center> <div id="jquery_jplayer_2" class="cp-jplayer"></div>
 +
      <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
-
   
+
       <div id="cp_container_2" class="cp-container">
-
       <div id="push"></div>
+
        <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
-
    </div>
+
          <div class="cp-buffer-2"></div>
 +
          <div class="cp-buffer-2"></div>
 +
        </div>
 +
        <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
 +
          <div class="cp-progress-2"></div>
 +
          <div class="cp-progress-2"></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 id="footer">
+
<div class="span4">
-
      <div class="container">
+
<centeR>
-
        <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>
+
<!-- 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>
+
 +
      <!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
 +
 +
      <div id="cp_container_3" class="cp-container">
 +
        <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
 +
          <div class="cp-buffer-3"></div>
 +
          <div class="cp-buffer-3"></div>
 +
        </div>
 +
        <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
 +
          <div class="cp-progress-3"></div>
 +
          <div class="cp-progress-3"></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>
Line 63: 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?