Team:SUSTC-Shenzhen-B/tutorial.html
From 2013.igem.org
(18 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | + | <head> | |
- | + | <meta charset="utf-8" /> | |
- | + | <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
- | + | ||
- | + | <meta name="description" content="" /> | |
- | + | <meta name="author" content="SUSTC-ShenZhen-B" /> | |
- | + | ||
- | + | <title>SUSTC-ShenZhen-B</title> | |
- | + | ||
- | + | <style type="text/css"> | |
- | + | #globalWrapper {width: 100%;font-size: 100%;} | |
- | + | #top-section {width: 100%; height:100%; border:none;} | |
- | + | #p-logo {display:none;} | |
- | + | #search-controls {display:none;} | |
- | + | .printfooter {display:none;} | |
- | + | #footer-box {border:none;} | |
- | + | .firstHeading {display:none;} | |
- | + | #content { border:none !important; width:1024px !important; background: url('') !important;} | |
- | + | #bodyContent {border:none;} | |
- | + | #catlinks {display:none;} | |
- | + | #footer-box {display:none;} | |
- | + | #menubar {display:none;} | |
- | + | body { | |
- | + | padding: 0; | |
- | + | } | |
- | + | ||
- | + | .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&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&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"> | ||
+ | © 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&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
Tutorial
Some FAQs.
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: