Difference between revisions of "Team:Tongji Shanghai/Model"

Line 1: Line 1:
−
{{Tongji_Shanghai}}
+
{{Team:Tongji_Shanghai/head}}
−
<html>
+
<!doctype html>
 +
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
 +
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
 +
<html lang="en">
  
 +
<head>
  
 +
  <!-- Basic -->
 +
  <title>Margo | Blog</title>
  
 +
  <!-- Define Charset -->
 +
  <meta charset="utf-8">
  
−
<div class="column full_size">
+
  <!-- Responsive Metatag -->
−
<h2> Modeling</h2>
+
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
−
<p>Mathematical models and computer simulations provide a great way to describe the function and operation of BioBrick Parts and Devices. Synthetic Biology is an engineering discipline, and part of engineering is simulation and modeling to determine the behavior of your design before you build it. Designing and simulating can be iterated many times in a computer before moving to the lab. This award is for teams who build a model of their system and use it to inform system design or simulate expected behavior in conjunction with experiments in the wetlab.</p>
+
  
 +
  <!-- Page Description and Author -->
 +
  <meta name="description" content="Margo - Responsive HTML5 Template">
 +
  <meta name="author" content="Margo">
  
−
<h5> Inspiration </h5>
+
 
−
<p>
+
  <!-- Bootstrap CSS  -->
−
Here are a few examples from previous teams:
+
  <link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">
−
</p>
+
 
−
<ul>
+
  <!-- Font Awesome CSS -->
−
<li><a href="https://2014.igem.org/Team:ETH_Zurich/modeling/overview">ETH Zurich 2014</a></li>
+
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
−
<li><a href="https://2014.igem.org/Team:Waterloo/Math_Book">Waterloo 2014</a></li>
+
 
−
</ul>
+
  <!-- Slicknav -->
 +
  <link rel="stylesheet" type="text/css" href="css/slicknav.css" media="screen">
 +
 
 +
  <!-- Margo CSS Styles  -->
 +
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
 +
 
 +
  <!-- Responsive CSS Styles  -->
 +
  <link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
 +
 
 +
  <!-- Color CSS Styles  -->
 +
  <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/jade.css" title="jade" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/peach.css" title="peach" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/sky-blue.css" title="sky-blue" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
 +
 
 +
 
 +
  <!-- Margo JS  -->
 +
  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.migrate.js"></script>
 +
  <script type="text/javascript" src="js/modernizrr.js"></script>
 +
  <script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.fitvids.js"></script>
 +
  <script type="text/javascript" src="js/owl.carousel.min.js"></script>
 +
  <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.appear.js"></script>
 +
  <script type="text/javascript" src="js/count-to.js"></script>
 +
  <script type="text/javascript" src="js/jquery.textillate.js"></script>
 +
  <script type="text/javascript" src="js/jquery.lettering.js"></script>
 +
  <script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.parallax.js"></script>
 +
  <script type="text/javascript" src="js/jquery.slicknav.js"></script>
 +
 
 +
  <!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 +
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
  <!-- Container -->
 +
  <div id="container">
 +
 
 +
    <!-- Start Header -->
 +
 
 +
    <!-- End Header -->
 +
 
 +
 
 +
    <!-- Start Page Banner -->
 +
    <div class="page-banner">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="col-md-6">
 +
            <h2>Achievment</h2>
 +
            <p>Why we deserve a medal.</p>
 +
          </div>
 +
          <div class="col-md-6">
 +
            <ul class="breadcrumbs">
 +
              <li><a href="#">Home</a></li>
 +
              <li>Achievement</li>
 +
            </ul>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div> 
 +
    <!-- End Page Banner -->
 +
 
 +
 
 +
    <!-- Start Content -->
 +
    <div id="content">
 +
      <div class="container">
 +
        <div class="row blog-page">
 +
 
 +
          <!--Sidebar-->
 +
          <div class="col-md-3 sidebar left-sidebar">
 +
 
 +
            <!-- Categories Widget -->
 +
            <div class="widget widget-categories" style="display: block;position: fixed;" id="sidebar1">
 +
              <h4>Judging<span class="head-line"></span></h4>
 +
              <ul>
 +
                <li>
 +
                  <a href="#">Topic 1</a>
 +
                </li>
 +
                <li>
 +
                  <a href="#">Topic 2</a>
 +
                </li>
 +
                <li>
 +
                  <a href="#">Topic 3</a>
 +
                </li>
 +
              </ul>
 +
            </div>
 +
 
 +
          </div>
 +
          <!--End sidebar-->
 +
 
 +
 
 +
      <!-- Classic Heading -->
 +
            <div class="col-md-9 page-content" style="text-align:justify;">
 +
            <div id="project">
 +
            <!-- Classic Heading -->
 +
           
 +
              <h3 class="classic-title" style="margin-top:0px"><span><a href="https://2015.igem.org/Team:Peking/Design/PC_Reporter">Paired dCas9 reporter</a></span></h3>
 +
              <div style="margin-top:0px; margin-bottom:0">
 +
                <div class="row">
 +
                  <div class="col-md-6">
 +
                    <img style="max-with:400px;" src="https://static.igem.org/mediawiki/2015/4/4e/Peking-Project-Overview1.png">
 +
                  </div>
 +
                  <div class="col-md-6">
 +
                <p> It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, <i>M. tuberculosis</i>) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.</p>
 +
                </div>
 +
              </div>
 +
            </div>
 +
 
 +
              <h3 class="classic-title" style="margin-top:0px"><span><a href="https://2015.igem.org/Team:Peking/Design/PC_Reporter">Paired dCas9 reporter</a></span></h3>
 +
              <div style="margin-top:0px; margin-bottom:0">
 +
                <div class="row">
 +
                  <div class="col-md-6">
 +
                    <img style="max-with:400px;" src="https://static.igem.org/mediawiki/2015/4/4e/Peking-Project-Overview1.png">
 +
                  </div>
 +
                  <div class="col-md-6">
 +
                <p> It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, <i>M. tuberculosis</i>) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.</p>
 +
                </div>
 +
              </div>
 +
            </div>           
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
          </div>
 +
        </div>
  
  
 
</div>
 
</div>
 +
</div>             
 +
 +
          </div>
 +
           
 +
 +
        </div>
 +
    <!-- End Content -->
 +
 +
 +
    <!-- Start Footer -->
 +
 +
    <!-- End Footer -->
 +
 +
 +
  <!-- End Container -->
 +
 +
  <!-- Go To Top Link -->
 +
  <a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>
 +
 +
  <!-- Style Switcher -->
 +
  <div class="switcher-box">
 +
   
 +
    <h4>Style Switcher</h4>
 +
    <span>12 Predefined Color Skins</span>
 +
    <ul class="colors-list">
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('blue'); return false;" title="Blue" class="blue"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('sky-blue'); return false;" title="Sky Blue" class="sky-blue"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('cyan'); return false;" title="Cyan" class="cyan"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('jade'); return false;" title="Jade" class="jade"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('green'); return false;" title="Green" class="green"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('purple'); return false;" title="Purple" class="purple"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('pink'); return false;" title="Pink" class="pink"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('red'); return false;" title="Red" class="red"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('orange'); return false;" title="Orange" class="orange"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('yellow'); return false;" title="Yellow" class="yellow"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('peach'); return false;" title="Peach" class="peach"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('beige'); return false;" title="Biege" class="beige"></a>
 +
      </li>
 +
    </ul>
 +
    <span>Top Bar Color</span>
 +
    <select id="topbar-style" class="topbar-style">
 +
      <option value="1">Light (Default)</option>
 +
      <option value="2">Dark</option>
 +
      <option value="3">Color</option>
 +
    </select>
 +
    <span>Layout Style</span>
 +
    <select id="layout-style" class="layout-style">
 +
      <option value="1">Wide</option>
 +
      <option value="2">Boxed</option>
 +
    </select>
 +
    <span>Patterns for Boxed Version</span>
 +
    <ul class="bg-list">
 +
      <li>
 +
        <a href="#" class="bg1"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg2"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg3"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg4"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg5"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg6"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg7"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg8"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg9"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg10"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg11"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg12"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg13"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg14"></a>
 +
      </li>
 +
    </ul>
 +
  </div>
 +
 +
  <script type="text/javascript" src="https://2016.igem.org/Team:Tongji_Shanghai/js/script_js?action=raw&amp;ctype=text/javascript"></script>
 +
    <script type="text/javascript" >       
 +
function menuFixed(id){
 +
var obj = document.getElementById(id);
 +
var _getHeight = obj.offsetTop;
 +
 +
window.onscroll = function(){
 +
changePos(id,_getHeight);
 +
}
 +
}
 +
function changePos(id,height){
 +
var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop - 150;
 +
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
var w = window.innerWidth;
 +
if(w>=1024){
 +
  if($(window).scrollTop() + $(window).height() > $(document).height() - 260){
 +
                $('#sidebar1').fadeOut("fast");}else{$('#sidebar1').fadeIn("fast");}
 +
}
 +
if(scrollTop < height){ obj.style.position = 'relative';     
 +
}else{
 +
obj.style.position = 'fixed';
 +
}
 +
}
 +
</script>
 +
 +
<script type="text/javascript">
 +
window.onload = function(){
 +
menuFixed('sidebar1');
 +
}
 +
</script>
 +
 +
</body>
  
 
</html>
 
</html>
 +
{{Team:Tongji_Shanghai/footer}}

Revision as of 03:02, 16 October 2016

Tongji_Shanghai-2016.igem.org Tongji Shanghai

<!doctype html> Margo | Blog

Achievment

Why we deserve a medal.

Paired dCas9 reporter

It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, M. tuberculosis) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.

Paired dCas9 reporter

It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, M. tuberculosis) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.

Style Switcher

12 Predefined Color Skins
Top Bar Color Layout Style Patterns for Boxed Version