Team:SUSTC-Shenzhen-B/tutorial.html

From 2013.igem.org

(Difference between revisions)
 
(16 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" />
+
    <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/tutorial.html&amp;action=edit">Edit</a></li>
+
        border-top-color: #FFFFFF;
-
                                                        <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>
+
      .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="http://circuitplus.org" class="item">Visit Circuit+</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
-
                        <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="/Team:SUSTC-Shenzhen-B" class="item">wiki homepage</a>
-
                          <li><a href="thank.html">Special Thanks</a></li>
+
            <a href="https://igem.org/User_Information" class="item">My Account</a>
-
                                                                    </ul>
+
            <a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/tutorial.html&amp;action=edit" class="item">Edit</a>
-
                                                        </li>
+
          </div>
-
                                                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice<b class="caret"></b></a>
+
        </div>
-
                        <ul class="dropdown-menu">
+
        <a href="project.html" class="item">Overview</a>
-
                          <li><a href="meeting.html">Exchange Meeting</a></li>
+
        <a href="standard.html" class="item">Standard and database</a>
-
                          <li><a href="publicity.html">Publicity</a></li>
+
        <div href="/Team:SUSTC-Shenzhen-B/Software" class="ui dropdown link item active">
-
                          <li><a href="lecture.html">Lecture</a></li>
+
          Software
-
                                                                    </ul>
+
          <span class="white caret"></span>
-
                                                        </li>
+
          <div class="menu">
-
</ul>
+
            <a href="circuitplus.html" class="item">Circuit+</a>
-
      </div>
+
            <a href="tutorial.html" class="item">Tutorial</a>
-
    </div>
+
            <a href="safety.html" class="item">Safety</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">
+
            <a href="lab.html" class="item">Lab Manager</a>
-
<div class="row">
+
            <a href="clotho.html" class="item">Clotho</a>
-
<div class="span3 bs-docs-sidebar">
+
          </div>
-
<ul class="nav nav-list" data-spy="affix" data-offset-top="200">
+
        </div>
-
                                                <li class="nav-header">Tutorial</li>
+
        <div href="/Team:SUSTC-Shenzhen-B/HumanPractice" class="ui dropdown link item">
-
                                                <li class="active"><a href="#mindroad">Mind Road</a></li>
+
          Human practice
-
                                                <li><a href="#lgd">LGD</a></li>
+
          <span class="white caret"></span>
-
                                                <li><a href="#ttec">TTEC</a></li>
+
          <div class="menu">
-
  <li><a href="#circuit">Circuit List</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>Tutorial</h1>
+
        <a href="achievement.html" class="item">Achievement</a>
-
                                        <div id="mindroad">
+
        <div href="/Team:SUSTC-Shenzhen-B/Team" class="ui dropdown link item">
-
<h3>Mind Road</h3>
+
          Team
-
<h4><a href="circuit.html">See an Online Version</a></h4>
+
          <span class="white caret"></span>
-
                                        <h4><a href="https://static.igem.org/mediawiki/2013/6/6e/Tutorial_circuit_registry.pdf">Download the Tutorial</a></h4>
+
          <div class="menu">
-
<embed src="http://player.youku.com/player.php/sid/XNjE0NTI3NTI0/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
+
            <a href="about.html" class="item">About us</a>
-
                                        </div>
+
            <a href="notebook.html" class="item">Notebook</a>
-
                                        <div id="lgd">
+
            <a href="acknowledgement.html" class="item">Acknoledgement</a>
-
<h3>LGD</h3>
+
          </div>
-
<h4><a href="lgd.html#tutorial">See an Online Version</a></h4>
+
        </div>
-
                                        <h4><a href="https://static.igem.org/mediawiki/2013/7/73/Tutorial_LGD.pdf">Download the Tutorial</a></h4>
+
      </div>
-
                                        </div>
+
    </div>
-
                                        <div id="ttec">
+
    <div class="header">
-
<h3>TTEC</h3>
+
      <div class="segment">
-
<h4><a href="clotho.html#ttec">See an Online Version</a></h4>
+
        <div id="overview" class="container">
-
                                        <h4><a href="https://static.igem.org/mediawiki/2013/1/10/Tutorial_TTEC_clotho.pdf">Download the Tutorial</a></h4>
+
          <div class="introduction">
-
                                        </div>
+
            <h1 class="ui dividing header">Tutorial</h1>
-
                                        <div id="circuit">
+
            <p class="lead">Some FAQs.</p>
-
<h3>Circuit List</h3>
+
          </div>
-
<h4><a href="clotho.html#circuitlist">See an Online Version</a></h4>
+
        </div>
-
                                        <h4><a href="https://static.igem.org/mediawiki/2013/7/7b/Tutorial_circuit_list_clotho.pdf">Download the Tutorial</a></h4>
+
      </div>
-
                                        </div>
+
    </div>
-
</div>
+
    <div class="main container page">
-
</div>
+
      <div class="peek">
-
</div>
+
        <div class="ui vertical pointing secondary menu">
-
</body>
+
          <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"