Team:SUSTC-Shenzhen-B/tutorial.html

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> ...")
 
(22 intermediate revisions not shown)
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" />
+
-
<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" />
+
-
<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">
+
-
p {
+
-
text-indent: 2em;
+
-
}
+
-
#content-inner {
+
-
margin: 82px;
+
-
}
+
-
</style>
+
-
                <script>
+
-
$(document).ready(function(){
+
-
                        $("head style").remove();
+
-
                        $("#top-section").remove();
+
-
                        $("#top").remove();
+
-
                        $("#siteSub").remove();
+
-
                        $("#footer-box").remove(); 
+
-
                        $(".printfooter").remove();   
+
-
                        $(".firstHeading").remove();               
+
-
});
+
-
</script>
+
-
</head>
+
-
<body data-spy="scroll" data-target=".bs-docs-sidebar">
+
-
<div class="navbar navbar-inverse navbar-fixed-top">
+
-
  <div class="navbar-inner">
+
-
    <div class="container">
+
-
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
-
        <span class="icon-bar"></span>
+
-
        <span class="icon-bar"></span>
+
-
        <span class="icon-bar"></span>
+
-
      </a>
+
-
      <ul class="nav">
+
-
  <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">
+
-
                                                        <li><a href="2013.igem.org">Back to iGEM Homepage</a></li>
+
-
                                                        <li><a href="https://igem.org/Team_Wikis?year=2013">Back to iGEM Wiki Page</a></li>
+
-
                                                        <li class="divider"></li>
+
-
                                                        <li><a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/tutorial.html&amp;action=edit">Edit</a></li>
+
-
                                                        <li><a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/tutorial.html&amp;action=history">History</a></li>
+
-
                                                        <li><a href="https://igem.org/User_Information">My Account</a></li>
+
-
    </ul>
+
-
  </li>
+
-
</ul>
+
-
      <div class="nav-collapse collapse">
+
-
      <ul class="nav">
+
-
                                                        <li class="active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<b class="caret"></b></a>
+
-
                        <ul class="dropdown-menu">
+
-
                          <li><a href="project.html">Overview</a></li>
+
-
                          <li><a href="circuit.html">Circuit Registry</a></li>
+
-
                          <li><a href="lgd.html">LGD</a></li>
+
-
                          <li><a href="clotho.html">Clotho</a></li>
+
-
                                                                                <li><a href="tutorial.html>>Tutorial</a></li>"
+
-
                          <li><a href="safty.html">Safety Form</a></li>
+
-
                          <li><a href="technique.html">Technique Standard</a></li>
+
-
                                                                                <li><a href="future.html">Future Plan</a></li>
+
-
                          <li><a href="achievement.html">Achievement</a></li>
+
-
                                                                    </ul>
+
-
                                                        </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.html">Team Member</a></li>
+
-
                          <li><a href="sustc.html">About SUSTC</a></li>
+
-
                          <li><a href="notebook.html">Notebook</a></li>
+
-
                          <li><a href="thank.html">Special Thanks</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="meeting.html">Exchange Meeting</a></li>
+
-
                          <li><a href="publicity.html">Publicity</a></li>
+
-
                          <li><a href="lecture.html">Lecture</a></li>
+
-
                                                                    </ul>
+
-
                                                        </li>
+
-
</ul>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
<div id="content-inner" class="container">
+
-
<div class="row">
+
-
<div class="span3 bs-docs-sidebar">
+
-
<ul class="nav nav-list" data-spy="affix" data-offset-top="200">
+
-
                                                <li class="nav-header">Circuit Registry</li>
+
-
  <li class="active"><a href="#introduction">Introduction</a></li>
+
-
                                                <li><a href="#mindroad">Mind Road</a></li>
+
-
                                                <li><a href="#lgd">LGD</a></li>
+
-
                                                <li><a href="#tutorial">Tutorail</a></li>
+
-
                                                <li><a href="#future">Future Plan</a></li>
+
-
  <li><a href="#feedback">Feedback</a></li>
+
-
</ul>
+
-
</div>
+
-
<div class="span9">
+
-
<h2 id="introduction">Introduction</h2>
+
-
<h3>Mind Road</h3>
+
-
<p>A useful net structural mind map to help users know what the existing synthetic biology projects and what else they can do.</p>
+
-
<h3>LGD</h3>
+
-
<p>Short for logical genetic designer, LGD is a genetic circuit CAD that can present the detail information of the engineering bacteria and “calculate” the relationship of related parts based on our database.</p>
+
-
<h3>TTEC</h3>
+
-
<p>TTEC is the abbreviation of Transcriptional Terminator Efficiency Calculator. It is the last year’s project of SUSTC and can calculate the efficiency of a terminator. TTEC plays an important role of building up our synthetic biology community in the future.</p>
+
-
<h2 id="circuit">Circuit Registry</h2>
+
    <meta name="description" content="" />
-
                                        <h4>Mind Road</h4>
+
    <meta name="author" content="SUSTC-ShenZhen-B" />
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
 
-
                                        <h4>Circuit List</h4>
+
    <title>SUSTC-ShenZhen-B</title>
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
 
-
<h2 id="lgd">LGD</h2>
+
    <style type="text/css">
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #globalWrapper {width: 100%;font-size: 100%;}
-
<h2 id="ttec">TTEC on Clotho</h2>
+
      #top-section {width: 100%; height:100%; border:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #p-logo {display:none;}
-
<h2 id="tutorial">Tutorial</h2>
+
      #search-controls {display:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      .printfooter {display:none;}
-
<h2 id="feedback">Feedback</h2>
+
      #footer-box {border:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      .firstHeading {display:none;}
-
<h2 id="safety">Safety Form</h2>
+
      #content { border:none !important; width:1024px !important; background: url('') !important;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #bodyContent {border:none;}
-
<h2 id="achievement">Achievement</h2>
+
      #catlinks {display:none;}
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
      #footer-box {display:none;}
-
</div>
+
      #menubar {display:none;}
-
</div>
+
      body {
-
</div>
+
        padding: 0;
-
</body>
+
      }
 +
 
 +
      .caret {
 +
        display: inline-block;
 +
        width: 0;
 +
        height: 0;
 +
        margin-left: 2px;
 +
        vertical-align: middle;
 +
        border-top: 4px solid #000000;
 +
        border-right: 4px solid transparent;
 +
        border-bottom: 0 dotted;
 +
        border-left: 4px solid transparent;
 +
        content: "";
 +
      }
 +
      .icon.caret {
 +
        opacity: 0.75;
 +
      }
 +
      .white.caret {
 +
        border-top-color: #FFFFFF;
 +
      }
 +
      .main.menu {
 +
        top: 0;
 +
      }
 +
      .script.image {
 +
        display: none;
 +
      }
 +
    </style>
 +
    <link rel="stylesheet" type="text/css" href="/SUSTC-SZ-B_2013iGEM/CSS/wiki-all.min.css?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700" />
 +
 
 +
  </head>
 +
  <body id="example">
 +
    <div class="ui fixed transparent inverted main menu">
 +
      <div class="container">
 +
        <a href="#" class="brand">SUSTC-ShenZhen-B</a>
 +
        <div class="right menu">
 +
          <a href="http://circuitplus.org" class="item">Visit Circuit+</a>
 +
        </div>
 +
        <div href="/" class="ui dropdown link item">
 +
          iGEM
 +
          <span class="icon white caret"></span>
 +
          <div class="menu">
 +
            <a href="https://2013.igem.org/Main_Page" class="item">iGEM homepage</a>
 +
            <a href="/Team:SUSTC-Shenzhen-B" class="item">wiki homepage</a>
 +
            <a href="https://igem.org/User_Information" class="item">My Account</a>
 +
            <a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/tutorial.html&amp;action=edit" class="item">Edit</a>
 +
          </div>
 +
        </div>
 +
        <a href="project.html" class="item">Overview</a>
 +
        <a href="standard.html" class="item">Standard and database</a>
 +
        <div href="/Team:SUSTC-Shenzhen-B/Software" class="ui dropdown link item active">
 +
          Software
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="circuitplus.html" class="item">Circuit+</a>
 +
            <a href="tutorial.html" class="item">Tutorial</a>
 +
            <a href="safety.html" class="item">Safety</a>
 +
            <a href="feedback.html" class="item">Feedback</a>
 +
            <a href="future.html" class="item">Future</a>
 +
            <a href="lab.html" class="item">Lab Manager</a>
 +
            <a href="clotho.html" class="item">Clotho</a>
 +
          </div>
 +
        </div>
 +
        <div href="/Team:SUSTC-Shenzhen-B/HumanPractice" class="ui dropdown link item">
 +
          Human practice
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="workshop.html" class="item">Workshop meeting</a>
 +
            <a href="publicity.html" class="item">Publicity</a>
 +
          </div>
 +
        </div>
 +
        <a href="achievement.html" class="item">Achievement</a>
 +
        <div href="/Team:SUSTC-Shenzhen-B/Team" class="ui dropdown link item">
 +
          Team
 +
          <span class="white caret"></span>
 +
          <div class="menu">
 +
            <a href="about.html" class="item">About us</a>
 +
            <a href="notebook.html" class="item">Notebook</a>
 +
            <a href="acknowledgement.html" class="item">Acknoledgement</a>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="header">
 +
      <div class="segment">
 +
        <div id="overview" class="container">
 +
          <div class="introduction">
 +
            <h1 class="ui dividing header">Tutorial</h1>
 +
            <p class="lead">Some FAQs.</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="main container page">
 +
      <div class="peek">
 +
        <div class="ui vertical pointing secondary menu">
 +
          <div class="link item">Retrieving circuits
 +
            <div class="menu">
 +
              <a class="item">Search</a>
 +
              <a class="item">Circuit List</a>
 +
              <a class="item">Mindmap</a>
 +
            </div>
 +
          </div>
 +
          <a class="item">Result page</a>
 +
          <a class="item">Upload</a>
 +
          <a class="item">Information page</a>
 +
          <a class="item">Export as SBOL</a>
 +
          <a class="active item" href="/Team:SUSTC-Shenzhen-B">Back to Homepage</a>
 +
        </div>
 +
      </div>
 +
      <div class="page-container">
 +
        <h2 class="ui dividing header">Retrieving circuits</h2>
 +
        <section id="motivation"></section>
 +
        <h3>Search</h3>
 +
        <p>Input keywords in the Search Box and choose search or press enter. Three searching methods are all available, by genetic circuit name, by description and by tags. Search Box can also be found in circuit list and circuit information pages, which enable searching to be convenient.</p>
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/b/b5/Search1.png" style="height:400px;width:800px"/>
 +
<br>step2:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/e/eb/Search2.png" style="height:400px;width:800px"/>
 +
<br>
 +
        <h3>Circuit List</h3>
 +
        <p>Choose a category first to exclude the unneeded results and then use Search Box to do some keywords matching searching.
 +
</p>
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/3/3f/Circuit_List1.png" style="height:400px;width:800px"/>
 +
<br>step2:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/b/bc/Circuit_List2.png" style="height:400px;width:800px"/>
 +
<br>
 +
        <h3>Mindmap</h3>
 +
        <p>Click the bubbles one by one to find the circuit you want.</p>
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/a/ae/Mindmap1.png" style="height:400px;width:800px"/>
 +
<br>step2:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/c/c0/Mindmap2.png" style="height:400px;width:800px"/>
 +
<br>
 +
        <h2 class="ui dividing header">Result page</h2>
 +
        <section id="motivation"></section>
 +
        <p>When having entered words in the Search Box, press Enter or click search, a well-designed result page will show up. The results list is in a certain order. The keywords searched in the Search Box are highlight to outstand. On the left section of this page is a list of categories. The numbers besides some categories indicate the number of related circuits in these categories. Click one of it to restrict the result in the category. On top of the page, some filter and sort options can be found. They all can optimize the searching experience.  
 +
</p>
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/b/bb/Result1.png" style="height:400px;width:800px"/>
 +
<br>
 +
        <h2 class="ui dividing header">Submit</h2>
 +
        <section id="motivation"></section>
 +
        <p>In List page, Create button lays under the List button. Click the Create button and a form will show up. Fill all required information and accomplish submitting. Also, Create is accessible in the result page.</p>
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/6/69/Upload1.png" style="height:400px;width:800px"/>
 +
<br>
 +
        <h2 class="ui dividing header">Information page</h2>
 +
        <section id="motivation"></section>
 +
        <p>After finishing retrieving and click one circuit in the result list or the deepest level bubble of Mindmap, an information page will jump out. The information of a circuit is divided into four parts, information, LGD, feedback, and comment. We will discuss information here. The information part holds information defined in RFC 97, including basic information, ranking, circuit construct, input, output, regulatory information and result. Information such as reference is also included. You can find as many as information that defined in the RFC standard in a prime way. You can also start a new search by clicking the tags. The circuits which have same tag can be found in a result page.</p>
 +
<img src="https://static.igem.org/mediawiki/2013/4/4a/Infor1.png" style="height:100px;width:800px" />
 +
 
 +
 
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/a/ac/Information1.png" style="height:400px;width:800px"/>
 +
<br>step2:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/a/aa/Information2.png" style="height:400px;width:800px"/>
 +
<br>
 +
<br>As shown in the figure, the relationship between different biobricks is based on the substance. When you move your mouse above the picture, you can gain information about the biobrick.
 +
</br>
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/8/88/Lgd1.png" style="height:400px;width:800px"/>
 +
<img src="https://static.igem.org/mediawiki/2013/8/81/Lgd2.png" style="height:120px;width:800px"/>
 +
<br>
 +
 
 +
        <h2 class="ui dividing header">Export in SBOL</h2>
 +
        <section id="motivation"></section>
 +
        <p>Click the “Export to SBOL”.</p>
 +
<br>step1:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/c/c2/SBOL1.png" style="height:400px;width:800px"/>
 +
<br>step2:</br>
 +
<img src="https://static.igem.org/mediawiki/2013/d/da/SBOL2.png" style="height:400px;width:800px"/>
 +
<br>
 +
      </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>

Latest revision as of 03:36, 29 October 2013

SUSTC-ShenZhen-B

SUSTC-ShenZhen-B
Visit Circuit+
iGEM
iGEM homepage wiki homepage My Account Edit
Overview Standard and database
Software
Circuit+ Tutorial Safety Feedback Future Lab Manager Clotho
Human practice
Workshop meeting Publicity
Achievement
Team
About us Notebook Acknoledgement

Tutorial

Some FAQs.

Retrieving circuits
Search Circuit List Mindmap
Result page Upload Information page Export as SBOL Back to Homepage

Retrieving circuits

Search

Input keywords in the Search Box and choose search or press enter. Three searching methods are all available, by genetic circuit name, by description and by tags. Search Box can also be found in circuit list and circuit information pages, which enable searching to be convenient.


step1:

step2:

Circuit List

Choose a category first to exclude the unneeded results and then use Search Box to do some keywords matching searching.


step1:

step2:

Mindmap

Click the bubbles one by one to find the circuit you want.


step1:

step2:

Result page

When having entered words in the Search Box, press Enter or click search, a well-designed result page will show up. The results list is in a certain order. The keywords searched in the Search Box are highlight to outstand. On the left section of this page is a list of categories. The numbers besides some categories indicate the number of related circuits in these categories. Click one of it to restrict the result in the category. On top of the page, some filter and sort options can be found. They all can optimize the searching experience.


step1:

Submit

In List page, Create button lays under the List button. Click the Create button and a form will show up. Fill all required information and accomplish submitting. Also, Create is accessible in the result page.


step1:

Information page

After finishing retrieving and click one circuit in the result list or the deepest level bubble of Mindmap, an information page will jump out. The information of a circuit is divided into four parts, information, LGD, feedback, and comment. We will discuss information here. The information part holds information defined in RFC 97, including basic information, ranking, circuit construct, input, output, regulatory information and result. Information such as reference is also included. You can find as many as information that defined in the RFC standard in a prime way. You can also start a new search by clicking the tags. The circuits which have same tag can be found in a result page.


step1:

step2:


As shown in the figure, the relationship between different biobricks is based on the substance. When you move your mouse above the picture, you can gain information about the biobrick.

step1:

Export in SBOL

Click the “Export to SBOL”.


step1:

step2:

© SUSTC-ShenZhen-B

Retrieved from "http://2013.igem.org/Team:SUSTC-Shenzhen-B/tutorial.html"