Team:SUSTC-Shenzhen-B/tutorial.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/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="https://igem.org/User_Information" class="item">My Account</a>
-
                          <li><a href="thank.html">Special Thanks</a></li>
+
            <a href="/wiki/index.php?title=Team:SUSTC-Shenzhen-B/tutorial.html&amp;action=edit" class="item">Edit</a>
-
                                                                    </ul>
+
          </div>
-
                                                        </li>
+
        </div>
-
                                                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice<b class="caret"></b></a>
+
        <a href="project.html" class="item">Overview</a>
-
                        <ul class="dropdown-menu">
+
        <a href="standard.html" class="item">Standard and database</a>
-
                          <li><a href="meeting.html">Exchange Meeting</a></li>
+
        <div href="/Team:SUSTC-Shenzhen-B/Project" class="ui dropdown link item active">
-
                          <li><a href="publicity.html">Publicity</a></li>
+
          Software
-
                          <li><a href="lecture.html">Lecture</a></li>
+
          <span class="white caret"></span>
-
                                                                    </ul>
+
          <div class="menu">
-
                                                        </li>
+
            <a href="circuitplus.html" class="item">Circuit+</a>
-
</ul>
+
            <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>
+
          </div>
-
<div id="content-inner" class="container">
+
        </div>
-
<div class="row">
+
        <a href="clotho.html" class="item">Clotho</a>
-
<div class="span3 bs-docs-sidebar">
+
        <a href="lab.html" class="item">Lab Manager</a>
-
<ul class="nav nav-list" data-spy="affix" data-offset-top="200">
+
        <div href="/Team:SUSTC-Shenzhen-B/Project" class="ui dropdown link item">
-
                                                <li class="nav-header">Tutorial</li>
+
          Human practice
-
                                                <li class="active"><a href="#mindroad">Mind Road</a></li>
+
          <span class="white caret"></span>
-
                                                <li><a href="#lgd">LGD</a></li>
+
          <div class="menu">
-
                                                <li><a href="#ttec">TTEC</a></li>
+
            <a href="workshop.html" class="item">Workshop meeting</a>
-
  <li><a href="#circuit">Circuit List</a></li>
+
            <a href="publicity.html" class="item">Publicity</a>
-
</ul>
+
          </div>
-
</div>
+
        </div>
-
<div class="span9">
+
        <div href="/Team:SUSTC-Shenzhen-B/Project" class="ui dropdown link item">
-
                                        <h1>Tutorial</h1>
+
          Team
-
                                        <div id="mindroad">
+
          <span class="white caret"></span>
-
<h3>Mind Road</h3>
+
          <div class="menu">
-
<h4><a href="circuit.html">See an Online Version</a></h4>
+
            <a href="about.html" class="item">About us</a>
-
                                        <h4><a href="https://static.igem.org/mediawiki/2013/6/6e/Tutorial_circuit_registry.pdf">Download the Tutorial</a></h4>
+
            <a href="achievement.html" class="item">Achievement</a>
-
                                        <h4>Online Video</h4>
+
            <a href="notebook.html" class="item">Notebook</a>
-
<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="acknowledgement.html" class="item">Acknoledgement</a>
-
                                        </div>
+
          </div>
-
                                        <div id="lgd">
+
        </div>
-
<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 class="header">
-
                                        </div>
+
      <div class="segment">
-
                                        <div id="ttec">
+
        <div id="overview" class="container">
-
<h3>TTEC</h3>
+
          <div class="introduction">
-
<h4><a href="clotho.html#ttec">See an Online Version</a></h4>
+
            <h1 class="ui dividing header">Tutorial</h1>
-
                                        <h4><a href="https://static.igem.org/mediawiki/2013/1/10/Tutorial_TTEC_clotho.pdf">Download the Tutorial</a></h4>
+
            <p class="lead">Some FAQs.</p>
-
                                        </div>
+
          </div>
-
                                        <div id="circuit">
+
        </div>
-
<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 class="main container page">
-
                                        </div>
+
      <div class="peek">
-
</div>
+
        <div class="ui vertical pointing secondary menu">
-
</div>
+
          <div class="link item">Retrieving circuits
-
</div>
+
            <div class="menu">
-
</body>
+
              <a class="item">Search</a>
 +
              <a class="item">Circuit List</a>
 +
              <a class="item">Mindmap</a>
 +
            </div>
 +
          </div>
 +
          <a class="active item">Result page</a>
 +
          <a class="active item">Upload</a>
 +
          <a class="active item">Information page</a>
 +
          <a class="active item">Export as SBOL</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. You can search by genetic circuit name, description and tags. You can also find search box in circuit list and circuit information page and start your search convenient.</p>
 +
        <h3>Circuit List</h3>
 +
        <p>You can firstly choose a category to exclude the unneeded result and then use search box to do some keywords matching searching.</p>
 +
        <h3>Mindmap</h3>
 +
        <p>Just click bubbles to find the circuit you want</p>
 +
        <h2 class="ui dividing header">Result page</h2>
 +
        <section id="motivation"></section>
 +
        <p>When you have entered your words in the search box and press Enter, a well-designed result page appears. The results make a list in a certain order. The keywords you input in the search box are highlight to be outstand. In the left part of this page is a list of categories. The number besides some categories show the number of related circuit in the categories. You can click one of it to restrict the result in the category. In the top of the page, some filter and sort options can be found. They all can optimize your searching experience. Information page</p>
 +
        <h2 class="ui dividing header">Upload</h2>
 +
        <section id="motivation"></section>
 +
        <p>In the result page, choose “create”.</p>
 +
        <h2 class="ui dividing header">Information page</h2>
 +
        <section id="motivation"></section>
 +
        <p>After finishing your retrieving and click one of the 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 102, 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>
 +
        <h2 class="ui dividing header">Export as SBOL</h2>
 +
        <section id="motivation"></section>
 +
        <p>Click the “Export to SBOL”.</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 17:10, 28 October 2013

SUSTC-ShenZhen-B

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

Tutorial

Some FAQs.

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

Retrieving circuits

Search

Input keywords in the search box and choose search or press enter. You can search by genetic circuit name, description and tags. You can also find search box in circuit list and circuit information page and start your search convenient.

Circuit List

You can firstly choose a category to exclude the unneeded result and then use search box to do some keywords matching searching.

Mindmap

Just click bubbles to find the circuit you want

Result page

When you have entered your words in the search box and press Enter, a well-designed result page appears. The results make a list in a certain order. The keywords you input in the search box are highlight to be outstand. In the left part of this page is a list of categories. The number besides some categories show the number of related circuit in the categories. You can click one of it to restrict the result in the category. In the top of the page, some filter and sort options can be found. They all can optimize your searching experience. Information page

Upload

In the result page, choose “create”.

Information page

After finishing your retrieving and click one of the 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 102, 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.

Export as SBOL

Click the “Export to SBOL”.

© SUSTC-ShenZhen-B

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