Team:SUSTC-Shenzhen-B/clotho.html

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
  <head>
-
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
    <meta charset="utf-8" />
-
                <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
+
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
                <script type="text/javascript" src="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/bootstrap.min.js?action=raw&amp;ctype=text/javascript"></script>
+
 
-
                <link type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:SUSTC-Shenzhen-B/CSS/style.css?action=raw&amp;ctype=text/css" />
+
    <meta name="description" content="" />
-
<link type="text/css" rel="stylesheet" href="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/CSS/bootstrap.min.css?action=raw&amp;ctype=text/css" />
+
    <meta name="author" content="SUSTC-ShenZhen-B" />
-
<link type="text/css" rel="stylesheet" href="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/CSS/bootstrap-responsive.min.css?action=raw&amp;ctype=text/css" />
+
 
-
<style type="text/css">
+
    <title>SUSTC-ShenZhen-B</title>
-
p {
+
 
-
text-indent: 2em;
+
    <style type="text/css">
-
}
+
      #globalWrapper {width: 100%;font-size: 100%;}
-
#content-inner {
+
      #top-section {width: 100%; height:100%; border:none;}
-
margin: 82px;
+
      #p-logo {display:none;}
-
}
+
      #search-controls {display:none;}
-
</style>
+
      .printfooter {display:none;}
-
                <script>
+
      #footer-box {border:none;}
-
$(document).ready(function(){
+
      .firstHeading {display:none;}
-
                        $("head style").remove();
+
      #content { border:none !important; width:1024px !important; background: url('') !important;}
-
                        $("#top-section").remove();
+
      #bodyContent {border:none;}
-
                        $("#top").remove();
+
      #catlinks {display:none;}
-
                        $("#siteSub").remove();
+
      #footer-box {display:none;}
-
                        $("#footer-box").remove();  
+
      #menubar {display:none;}
-
                        $(".printfooter").remove();  
+
      body {
-
                        $(".firstHeading").remove();                
+
        padding: 0;
-
});
+
      }
-
</script>
+
 
-
</head>
+
      .caret {
-
<body data-spy="scroll" data-target=".bs-docs-sidebar">
+
        display: inline-block;
-
<div class="navbar navbar-inverse navbar-fixed-top">
+
        width: 0;
-
  <div class="navbar-inner">
+
        height: 0;
-
    <div class="container">
+
        margin-left: 2px;
-
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
        vertical-align: middle;
-
        <span class="icon-bar"></span>
+
        border-top: 4px solid #000000;
-
        <span class="icon-bar"></span>
+
        border-right: 4px solid transparent;
-
        <span class="icon-bar"></span>
+
        border-bottom: 0 dotted;
-
      </a>
+
        border-left: 4px solid transparent;
-
      <ul class="nav">
+
        content: "";
-
  <li class="dropdown"><a id="iGEM_nav" href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="https://static.igem.org/mediawiki/2013/2/26/2013ustcigem_IGEM_basic_Logo.png" /><b class="caret"></b></a>
+
      }
-
    <ul class="dropdown-menu">
+
      .icon.caret {
-
                                                        <li><a href="2013.igem.org">Back to iGEM Homepage</a></li>
+
        opacity: 0.75;
-
                                                        <li><a href="https://igem.org/Team_Wikis?year=2013">Back to iGEM Wiki Page</a></li>
+
      }
-
                                                        <li class="divider"></li>
+
      .white.caret {
-
                                                        <li><a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/clotho.html&amp;action=edit">Edit</a></li>
+
        border-top-color: #FFFFFF;
-
                                                        <li><a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/clotho.html&amp;action=history">History</a></li>
+
      }
-
                                                        <li><a href="https://igem.org/User_Information">My Account</a></li>
+
      .main.menu {
-
    </ul>
+
        top: 0;
-
  </li>
+
      }
-
</ul>
+
      .script.image {
-
      <div class="nav-collapse collapse">
+
        display: none;
-
      <ul class="nav">
+
      }
-
                                                        <li class="active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<b class="caret"></b></a>
+
    </style>
-
                        <ul class="dropdown-menu">
+
    <link rel="stylesheet" type="text/css" href="/SUSTC-SZ-B_2013iGEM/CSS/wiki-all.min.css?action=raw&amp;ctype=text/css" />
-
                          <li><a href="project.html">Overview</a></li>
+
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700" />
-
                          <li><a href="circuit.html">Circuit Registry</a></li>
+
 
-
                          <li><a href="lgd.html">LGD</a></li>
+
  </head>
-
                          <li><a href="clotho.html">Clotho</a></li>
+
  <body id="example">
-
                                                                                <li><a href="tutorial.html">Tutorial</a></li>
+
    <div class="ui fixed transparent inverted main menu">
-
                          <li><a href="safty.html">Safety Form</a></li>
+
      <div class="container">
-
                          <li><a href="technique.html">Technique Standard</a></li>
+
        <a href="#" class="brand">SUSTC-ShenZhen-B</a>
-
                                                                                <li><a href="future.html">Future Plan</a></li>
+
        <div class="right menu">
-
                          <li><a href="feedback.html">Feedback</a></li>
+
          <a href="https://igem.org/User_Information" class="item">My Account</a>
-
                                                                    </ul>
+
        </div>
-
                                                        </li>
+
        <div href="/" class="ui dropdown link item">
-
                                                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<b class="caret"></b></a>
+
          iGEM Home
-
                        <ul class="dropdown-menu">
+
          <span class="icon white caret"></span>
-
                          <li><a href="team.html">Team Member</a></li>
+
          <div class="menu">
-
                          <li><a href="sustc.html">About SUSTC</a></li>
+
            <a href="https://2013.igem.org/Main_Page" class="item">iGEM homepage</a>
-
                          <li><a href="notebook.html">Notebook</a></li>
+
            <a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/clotho.html&amp;action=edit" class="item">Edit</a>
-
                          <li><a href="thank.html">Special Thanks</a></li>
+
          </div>
-
                                                                    </ul>
+
        </div>
-
                                                        </li>
+
        <a href="project.html" class="item">Overview</a>
-
                                                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice<b class="caret"></b></a>
+
        <a href="standard.html" class="item">Standard and database</a>
-
                        <ul class="dropdown-menu">
+
        <div href="/Team:SUSTC-Shenzhen-B/Project" class="ui dropdown link item">
-
                          <li><a href="meeting.html">Exchange Meeting</a></li>
+
          Software
-
                          <li><a href="publicity.html">Publicity</a></li>
+
          <span class="white caret"></span>
-
                          <li><a href="lecture.html">Lecture</a></li>
+
          <div class="menu">
-
                                                                    </ul>
+
            <a href="circuitplus.html" class="item">Circuit+</a>
-
                                                        </li>
+
            <a href="feature.html" class="item">Feature</a>
-
</ul>
+
            <a href="tutorial.html" class="item">Tutorial</a>
-
      </div>
+
            <a href="safety.html" class="item">Safety</a>
-
    </div>
+
            <a href="APIs.html" class="item">APIs</a>
-
  </div>
+
            <a href="feedback.html" class="item">Feedback</a>
-
</div>
+
            <a href="future.html" class="item">Future</a>
-
<div id="content-inner" class="container">
+
          </div>
-
<div class="row">
+
        </div>
-
<div class="span3 bs-docs-sidebar">
+
        <a href="clotho.html" class="item active">Clotho</a>
-
<ul class="nav nav-list" data-spy="affix" data-offset-top="200">
+
        <a href="lab.html" class="item">Lab management</a>
-
                                                <li class="nav-header">Clotho</li>
+
        <div href="/Team:SUSTC-Shenzhen-B/Project" class="ui dropdown link item">
-
  <li class="active"><a href="#introduction">Introduction</a></li>
+
          Human practice
-
                                                <li><a href="#ttec">TTEC</a></li>
+
          <span class="white caret"></span>
-
                                                <li><a href="#circuitlist">Circuit List</a></li>
+
          <div class="menu">
-
                                                <li><a href="#refrence">Refrence</a></li>
+
            <a href="workshop.html" class="item">Workshop meeting</a>
-
</ul>
+
            <a href="publicity.html" class="item">Publicity</a>
-
</div>
+
          </div>
-
<div class="span9">
+
        </div>
-
                                        <h1>Clotho</h1>
+
        <div href="/Team:SUSTC-Shenzhen-B/Project" class="ui dropdown link item">
-
                                        <div id="introduction">
+
          Team
-
<h3>Introduction</h3>
+
          <span class="white caret"></span>
-
<p>Clotho is for engineering synthetic biological systems and managing the data which is used to create them. It also provides a mechanism to begin the process of creating standardized data, algorithms, and methodologies for synthetic biology.<a href="#ref1">[1]</a></p>
+
          <div class="menu">
-
<p>So, in order to enrich the function of Clotho, our team developed two Apps. One is TTEC,another is Circuit List. The more details are show below.</p>
+
            <a href="about.html" class="item">About us</a>
-
                                        </div>
+
            <a href="achievement.html" class="item">Achievement</a>
-
                                        <div id="ttec">
+
            <a href="notebook.html" class="item">Notebook</a>
-
<h3>TTEC</h3>
+
            <a href="acknowledgement.html" class="item">Acknoledgement</a>
-
<p>TTEC was developed by team SUSTC-Shenzhen-B in 2012, to calculate the efficiency of transcription terminator from the primary nucleotide sequences. We reprogramed TTEC and transfer it to Clotho platform.</p>
+
          </div>
-
                                        <img title="The main interface of TTEC" src="https://static.igem.org/mediawiki/2013/1/1f/SUSTC-BClotho1.png" class="img-polaroid">
+
        </div>
-
                                        <img title="The function interface" src="https://static.igem.org/mediawiki/2013/9/92/SUSTC-BClotho2.png" class="img-polaroid">
+
      </div>
-
</div>
+
    </div>
-
                                        <div id="circuitlist">
+
    <div class="header">
-
<h3>Circuit List</h3>
+
      <div class="segment">
-
<p>Circuit List is the Registry of Standard Genetic Circuits, which is our main project in 2013. We also made an Clotho version for it.</p>
+
        <div id="overview" class="container">
-
                                        <img title="The function interface" src="https://static.igem.org/mediawiki/2013/2/2f/SUSTC-BCL1.png" class="img-polaroid">
+
          <div class="introduction">
-
                                        <img title="The function interface" src="https://static.igem.org/mediawiki/2013/0/07/SUSTC-BCL2.png" class="img-polaroid">
+
            <h1 class="ui dividing header">Clotho</h1>
-
                                        </div>
+
            <p class="lead">Clotho applications.</p>
-
                                        <div id="reference">
+
          </div>
-
<h3>Reference</h3>
+
        </div>
-
<p id="ref1">[1]<a href="https://igem.org/software">https://igem.org/software</a></p>
+
      </div>
-
                                        </div>
+
    </div>
-
</div>
+
    <div class="main container page">
-
</div>
+
      <div class="peek">
-
</div>
+
        <div class="ui vertical pointing secondary menu">
-
</body>
+
          <a class="active item">Introduction</a>
 +
          <a class="item">Circuit List</a>
 +
          <a class="item">TTEC</a>
 +
        </div>
 +
      </div>
 +
      <div class="page-container">
 +
        <h2 class="ui dividing header">Introduction</h2>
 +
        <section id=""></section>
 +
        <p>Clotho is a popular software framework in synthetic biology. It provides many applications which are very useful in synthetic biology. It can also extend itself by utilizing applications developed by others. So, in order to enrich the function of Clotho and to make more people experience our software, we developed two applications, Circuit List and TTEC.</p>
 +
        <h2 class="ui dividing header">Circuit List</h2>
 +
        <section id=""></section>
 +
        <h2 class="ui dividing header">Circuit List</h2>
 +
        <p>This year we invited our advisor Qie Boyu to upload a new open course about interesting synthetic biology to YouTube. This video could let rookies be more interested in synthetic biology and iGEM. And we made the open course livelier and easier to understand. So we believe that more and more people who have watched our video would develop an interest in iGEM and synthetic biology.</p>
 +
        <section id=""></section>
 +
        <h2 class="ui dividing header">TTEC</h2>
 +
        <section id=""></section>
 +
        <p>TTEC, which is short for Transcriptional Terminator Efficiency Calculator, was developed by team SUSTC-Shenzhen-B in 2012. It calculate the efficiency of transcription terminator from the primary nucleotide sequences. We transplanted TTEC to Clotho platform to make more people use this useful tool. And this is prompted by iGEM that use existing iGEM software to develop new tools.If you want to know more about TTEC, the older one, please visit <a href="https://2012.igem.org/Team:SUSTC-Shenzhen-B">wiki of SUSTC-Shenzhen-B 2012</a>. Here we only provide tutorial.</p>
 +
      </div>
 +
    </div>
 +
 
 +
    <div class="footer">
 +
      <div class="ui divider">
 +
      </div>
 +
      <div class="ui divided horizontal footer link list">
 +
        <div class="item">
 +
          &copy; SUSTC-ShenZhen-B
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
 +
    <script type="text/javascript" src="https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/wiki-all.min.js?action=raw&amp;ctype=text/javascript"></script>
 +
 
 +
    <script type="text/javascript">
 +
      function png2text(pngurl, id, callback) {
 +
        var canvas = document.createElement("canvas"),
 +
        ctx = canvas.getContext("2d");
 +
        img = new Image();
 +
   
 +
        img.id = 'pt-' + id;
 +
        img.className = 'script image';
 +
        img.style.position = "absolute";
 +
        img.style.left = "-10000px";
 +
        document.body.appendChild(img);
 +
 
 +
        img.onload = function() {
 +
          var
 +
            w = this.width,
 +
            h = this.height;
 +
 
 +
          canvas.width = w;
 +
          canvas.height = h;
 +
          canvas.style.width = w+"px";
 +
          canvas.style.height = h+"px";
 +
 
 +
          ctx.drawImage(this, 0, 0);
 +
 
 +
          var data = ctx.getImageData(0, 0, w, h).data,
 +
            a = [],
 +
            len = data.length,
 +
            p = -1;
 +
         
 +
          for (var i=0; i < len; i += 4) {
 +
            if (data[i] > 0)
 +
              a[++p] = String.fromCharCode(data[i]);
 +
          };
 +
 
 +
          canvas = undefined;
 +
          try {
 +
            //document.body.removeChild(img);
 +
            $('#pt-' + id).remove();
 +
          } catch (e) {
 +
          }
 +
 
 +
          if (callback) callback(a.join(""));
 +
        };
 +
 
 +
        img.src = pngurl;
 +
      }
 +
 
 +
      function baseRemove() {
 +
        $('#top-section').remove();
 +
        $('#content').attr('id', '');
 +
        $('#bodyContent').attr('id', '');
 +
        $('#globalWrapper').attr('id', '');
 +
 
 +
        $('.main.container.page').parent().attr('id', 'example');
 +
      }
 +
 
 +
      function loadJavascript() {
 +
        /* $.get("https://2013.igem.org/SUSTC-SZ-B_2013iGEM/JS/wiki-all.min.js?action=raw&ctype=text/javascript", function (data) {
 +
          eval(data);
 +
        }); */
 +
        /* png2text('https://static.igem.org/mediawiki/2013/4/43/Wiki-all-min-js.png', 'wiki-all', function (text) {
 +
          eval(text);
 +
        }); */
 +
      }
 +
 
 +
      $(document).ready(function () {
 +
        baseRemove();
 +
        loadJavascript();
 +
      });
 +
    </script>
 +
  </body>
</html>
</html>

Revision as of 11:14, 28 October 2013

SUSTC-ShenZhen-B

Clotho

Clotho applications.

Introduction

Clotho is a popular software framework in synthetic biology. It provides many applications which are very useful in synthetic biology. It can also extend itself by utilizing applications developed by others. So, in order to enrich the function of Clotho and to make more people experience our software, we developed two applications, Circuit List and TTEC.

Circuit List

Circuit List

This year we invited our advisor Qie Boyu to upload a new open course about interesting synthetic biology to YouTube. This video could let rookies be more interested in synthetic biology and iGEM. And we made the open course livelier and easier to understand. So we believe that more and more people who have watched our video would develop an interest in iGEM and synthetic biology.

TTEC

TTEC, which is short for Transcriptional Terminator Efficiency Calculator, was developed by team SUSTC-Shenzhen-B in 2012. It calculate the efficiency of transcription terminator from the primary nucleotide sequences. We transplanted TTEC to Clotho platform to make more people use this useful tool. And this is prompted by iGEM that use existing iGEM software to develop new tools.If you want to know more about TTEC, the older one, please visit wiki of SUSTC-Shenzhen-B 2012. Here we only provide tutorial.