"
Team:SJTU-Software/Project/Tutorial
From 2014.igem.org
(Difference between revisions)
| Line 7: | Line 7: | ||
<p> | <p> | ||
| - | <style type="text/css"> body {background- | + | <style type="text/css"> body {background-color:#E0E0E0; background-attachment:fixed} </style> |
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script> | ||
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script> | ||
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script> | ||
<style type="text/css"> | <style type="text/css"> | ||
| + | |||
ul.expmenu { width: 200px; } | ul.expmenu { width: 200px; } | ||
ul.expmenu * { list-style: none; } | ul.expmenu * { list-style: none; } | ||
| Line 125: | Line 126: | ||
.container { | .container { | ||
height: 5px; | height: 5px; | ||
| - | margin: | + | margin: 1.6% auto 3.9% auto; |
| - | width: | + | width: 71%; |
align: center; | align: center; | ||
} | } | ||
| Line 135: | Line 136: | ||
} | } | ||
#nav { | #nav { | ||
| - | background: url('https://static.igem.org/mediawiki/2014/ | + | background: url('https://static.igem.org/mediawiki/2014/c/c7/Sjtu_software_menu_bg2.png')no-repeat scroll 0 0 transparent ; |
clear: both; | clear: both; | ||
font-size: 16px; | font-size: 16px; | ||
height: 58px; | height: 58px; | ||
| - | padding: 0 0 0 | + | padding: 0 0 0 0px; |
position: relative; | position: relative; | ||
| - | width: | + | width: 100%; |
} | } | ||
#nav ul { | #nav ul { | ||
| Line 223: | Line 224: | ||
background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent; | background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent; | ||
height: 16px; | height: 16px; | ||
| - | left: | + | left: 93px; |
position: absolute; | position: absolute; | ||
top: 0px; | top: 0px; | ||
| Line 243: | Line 244: | ||
#nav li:nth-of-type(1):hover ~ #lavalamp { | #nav li:nth-of-type(1):hover ~ #lavalamp { | ||
| - | left: | + | left: 6px; |
} | } | ||
#nav li:nth-of-type(2):hover ~ #lavalamp { | #nav li:nth-of-type(2):hover ~ #lavalamp { | ||
| - | left: | + | left: 93px; |
} | } | ||
#nav li:nth-of-type(3):hover ~ #lavalamp { | #nav li:nth-of-type(3):hover ~ #lavalamp { | ||
| - | left: | + | left: 195px; |
} | } | ||
#nav li:nth-of-type(4):hover ~ #lavalamp { | #nav li:nth-of-type(4):hover ~ #lavalamp { | ||
| - | left: | + | left: 310px; |
} | } | ||
#nav li:nth-of-type(5):hover ~ #lavalamp { | #nav li:nth-of-type(5):hover ~ #lavalamp { | ||
| - | left: | + | left: 415px; |
} | } | ||
#nav li:nth-of-type(6):hover ~ #lavalamp { | #nav li:nth-of-type(6):hover ~ #lavalamp { | ||
| Line 265: | Line 266: | ||
#nav li:nth-of-type(8):hover ~ #lavalamp { | #nav li:nth-of-type(8):hover ~ #lavalamp { | ||
left: 647px; | left: 647px; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <style type="text/css"> | ||
| + | .firstHeading { | ||
| + | width: 0px; | ||
| + | height: 0px; | ||
| + | margin: -38px auto; | ||
| + | padding-top: 0px; | ||
| + | margin-bottom: 0px; | ||
| + | font-family: Georgia, Times, "Times New Roman", serif; | ||
| + | } | ||
| + | |||
| + | /*returnTop*/ | ||
| + | p#back-to-top{ | ||
| + | position:fixed; | ||
| + | display:none; | ||
| + | bottom:50px; | ||
| + | right:30px; | ||
| + | } | ||
| + | p#back-to-top a{ | ||
| + | text-align:center; | ||
| + | text-decoration:none; | ||
| + | color:#d1d1d1; | ||
| + | display:block; | ||
| + | width:112px; | ||
| + | /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ | ||
| + | -moz-transition:color 1s; | ||
| + | -webkit-transition:color 1s; | ||
| + | -o-transition:color 1s; | ||
| + | } | ||
| + | p#back-to-top a:hover{ | ||
| + | color:#979797; | ||
| + | } | ||
| + | p#back-to-top a span{ | ||
| + | background:transparent url(https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png) no-repeat -25px -290px; | ||
| + | border-radius:6px; | ||
| + | display:block; | ||
| + | height:40px; | ||
| + | width:112px; | ||
| + | margin-bottom:5px; | ||
| + | /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ | ||
| + | -moz-transition:background 1s; | ||
| + | -webkit-transition:background 1s; | ||
| + | -o-transition:background 1s; | ||
| + | } | ||
| + | #back-to-top a:hover span{ | ||
| + | background:transparent url(https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png) no-repeat -25px -290px; | ||
} | } | ||
</style> | </style> | ||
| Line 336: | Line 385: | ||
</script> | </script> | ||
</head> | </head> | ||
| - | <body class="background"> | + | <body class="background" bgcolor="yellow"> |
| - | + | ||
| - | <div class="container" style="position:relative;z-index:3"> | + | <div class="container" style="position:relative;z-index:3" > |
| - | + | <ul id="nav" style="position:fixed;width:71%" > | |
<li><a href="https://2014.igem.org/Team:SJTU-Software">Home</a></li> | <li><a href="https://2014.igem.org/Team:SJTU-Software">Home</a></li> | ||
<li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview">Software</a> | <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview">Software</a> | ||
| Line 362: | Line 411: | ||
<li><a class="hsubs" href="">Requirement</a> | <li><a class="hsubs" href="">Requirement</a> | ||
<ul class="subs"> | <ul class="subs"> | ||
| - | <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal">Medal</a></li> | + | <li><a href="href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"">Medal</a></li> |
| - | <li><a href="https://2014.igem.org/Team:SJTU-Software/ | + | <li><a href="href="https://2014.igem.org/Team:SJTU-Software/Team"">Collaboration</a></li> |
| - | <li><a href=" | + | <li><a href="href="https://2014.igem.org/Team:SJTU-Software//Requirement/Notebook"">Notebook</a></li> |
| - | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
| Line 375: | Line 423: | ||
</ul> | </ul> | ||
</li> | </li> | ||
| + | |||
<div id="lavalamp"></div> | <div id="lavalamp"></div> | ||
</ul> | </ul> | ||
| Line 382: | Line 431: | ||
<div align="center"> | <div align="center"> | ||
| - | <div class="container2" style="height: | + | <div class="container2" style="height:1525px;width:71%;margin:0 0 0 0"> |
<div align=left> | <div align=left> | ||
| - | <div class="container2" style="height: | + | <div class="container2" style="height:1525px;width:28%;background-color:#E0E0E0;float:left; display:inline" > |
| - | <div id="content"> | + | <div id="content" > |
| - | <ul id="expmenu-freebie" style="position:fixed;"> | + | <ul id="expmenu-freebie" style="position:fixed;" > |
<li> | <li> | ||
<!-- Start Freebie --> | <!-- Start Freebie --> | ||
| Line 392: | Line 441: | ||
<li> | <li> | ||
<div class="header" > | <div class="header" > | ||
| - | <span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Overview"><font color=#ffffff>Overview</font></a></span> | + | <span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Overview" ><font color=#ffffff>Overview</font></a></span> |
<span class="arrow up"></span> | <span class="arrow up"></span> | ||
</div> | </div> | ||
| Line 429: | Line 478: | ||
| - | <div class="container2" style="height: | + | <div class="container2" style="height:800px;width:72%;background-color:#6F00D2;float:left; display:inline" > |
| + | <div align=center > | ||
| + | |||
| + | <div class="container2" style="height:425px;width:100%;background-color: #6F00D2;margin:0 0 0 0 "> | ||
| + | <div align=left > | ||
| + | <br> | ||
| + | <br> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:425px;width:28%;float:left; display:inline;" > | ||
| + | <img style="margin:1% auto auto 10%;height:200px;width:auto;" src="https://static.igem.org/mediawiki/2014/c/cc/Sjtu_software_top2.jpg"></img> | ||
| + | </div> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:425px;width:72%;float:left; display:inline" > | ||
| + | <p class="text" style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px" color="#FFFFFF">EASY BBK:</font></p> | ||
| + | <p class="text" style="margin:5% 60px auto"><font face="Microsoft YaHei" size="4px" color="#FFFFFF">An EASY Biobrick Blueprint’s <br>pacKage | ||
| + | </font></p> | ||
| + | <p class="text" style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px" color="#FFFFFF">Digging into the current biobrick database maintained by the iGEM foundation, we have found the current biobrick database is difficult for users to interpret and find biobricks of good quality. In addition, different types of biobricks which were presented in the previous biosystems varied from each other so greatly that even the most experienced synthetic biologists might find it difficult to interpret the biosystem the teams had created.<br> | ||
| + | |||
| + | Given the above reasons, we have constructed an Easy Biobrick Blueprint’s pacKage (EASY BBK) to solve the problems. Its functions are listed as follows. | ||
| + | </font></p> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div align=center > | ||
| + | |||
| + | <div class="container2" style="height:450px;width:100%;background-color:#408080;margin:0 0 0 0 "> | ||
| + | <div align=left > | ||
| + | <br> | ||
| + | <br> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:450px;width:28%;float:left; display:inline;" > | ||
| + | <img style="margin:10% auto auto 20%;height:150px;width:auto;" src="https://static.igem.org/mediawiki/2014/5/5f/Sjtu_software_searching.png"></img> | ||
| + | </div> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:450px;width:72%;float:left; display:inline" > | ||
| + | <p class="text" style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px" color="#FFFFFF">Search</font></p> | ||
| + | <p class="text" style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px" color="#FFFFFF">This function is provide to users to search and evaluate the candidate biobricks based on keywords or part names. It can help users to decide if an existing biobrick meets their requirements before they start their experiments.<br> | ||
| + | |||
| + | The searching engine is based on a database converted from the iGEM biobrick database (Date, or version number). There are 27,093 biobricks in the database If the input are one or more keywords, the biobricks related to the keywords will be listed, sorted and displayed to the users. Advanced search mode is also provided to refine or sort the search results based. | ||
| + | Besides, users can search the biobrick database based on sequence similarity. If users input a DNA sequence, the hit sequences in the database by NCBI Blastn will be returned, sorted by their E-values and displayed. | ||
| + | </font></p> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div align=center> | ||
| + | <div class="container2" style="height:250px;width:100%;background-color:#64A600;" > | ||
| + | <div align=left style="margin:0 0 0 0 "> | ||
| + | <br> | ||
| + | <br> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:250px;width:28%;float:left; display:inline;" > | ||
| + | <img style="margin:10% auto auto 20%;height:150px;width:auto" src="https://static.igem.org/mediawiki/2014/8/85/Sjtu_software_painting.png"></img> | ||
| + | </div> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:250px;width:72%;float:left; display:inline" > | ||
| + | <p class="text" style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px" color="#FFFFFF">Present</font></p> | ||
| + | <p class="text" style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px" color="#FFFFFF">Users could draw their biobrick system diagram using EASY BBK. With standardized biobrick icons according to the iGEM Registry, a standardized picture of a biosystem could be plotted using our tool. The result can be exported to a picture file in jpeg, bmp and png format, which could be used for the presentation in the publication, presentation or later design.</font></p> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div align=center> | ||
| + | <div class="container2" style="height:200px;width:100%;background-color:#9F4D95;" > | ||
| + | <div align=left style="margin:0 0 0 0 "> | ||
| + | <br> | ||
| + | <br> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:200px;width:28%;float:left; display:inline;" > | ||
| + | <img style="margin:10% auto auto 20%;height:150px;width:auto" src="https://static.igem.org/mediawiki/2014/7/79/Sjtu_software_upload.png"></img> | ||
| + | </div> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:200px;width:72%;float:left; display:inline" > | ||
| + | <p class="text" style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px" color="#FFFFFF">Upload</font></p> | ||
| + | <p class="text" style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px" color="#FFFFFF">Here, users could not only upload their self-created biobricks to our database, but also submit their form filled out in our software to the Registry to upload their self-created biobricks.</font></p> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div align=center> | ||
| + | <div class="container2" style="height:200px;width:100%;background-color:#D94600;" > | ||
| + | <div align=left style="margin:0 0 0 0 "> | ||
| + | <br> | ||
| + | <br> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:200px;width:28%;float:left; display:inline;" > | ||
| + | <img style="margin:10% auto auto 20%;height:150px;width:auto" src="https://static.igem.org/mediawiki/2014/e/ef/Sjtu_software_compare.png"></img> | ||
| + | </div> | ||
| + | <div class="container2" style="margin:-4% 0 0 0;height:200px;width:72%;float:left; display:inline" > | ||
| + | <p class="text" style="margin:5% 60px auto"><font face="Microsoft YaHei" size="5px" color="#FFFFFF">Compare</font></p> | ||
| + | <p class="text" style="margin:3% 60px auto"><font face="Microsoft YaHei" size="3px" color="#FFFFFF">Multiple biobricks can be selected and compared. You can search and get multiple (up to three) biobricks, and compare them side by side. </font></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 496: | Line 638: | ||
}); | }); | ||
</script> | </script> | ||
| + | |||
Revision as of 15:28, 16 October 2014
EASY BBK:
An EASY Biobrick Blueprint’s
pacKage
Digging into the current biobrick database maintained by the iGEM foundation, we have found the current biobrick database is difficult for users to interpret and find biobricks of good quality. In addition, different types of biobricks which were presented in the previous biosystems varied from each other so greatly that even the most experienced synthetic biologists might find it difficult to interpret the biosystem the teams had created.
Given the above reasons, we have constructed an Easy Biobrick Blueprint’s pacKage (EASY BBK) to solve the problems. Its functions are listed as follows.
Search
This function is provide to users to search and evaluate the candidate biobricks based on keywords or part names. It can help users to decide if an existing biobrick meets their requirements before they start their experiments.
The searching engine is based on a database converted from the iGEM biobrick database (Date, or version number). There are 27,093 biobricks in the database If the input are one or more keywords, the biobricks related to the keywords will be listed, sorted and displayed to the users. Advanced search mode is also provided to refine or sort the search results based.
Besides, users can search the biobrick database based on sequence similarity. If users input a DNA sequence, the hit sequences in the database by NCBI Blastn will be returned, sorted by their E-values and displayed.
Present
Users could draw their biobrick system diagram using EASY BBK. With standardized biobrick icons according to the iGEM Registry, a standardized picture of a biosystem could be plotted using our tool. The result can be exported to a picture file in jpeg, bmp and png format, which could be used for the presentation in the publication, presentation or later design.
Upload
Here, users could not only upload their self-created biobricks to our database, but also submit their form filled out in our software to the Registry to upload their self-created biobricks.
Compare
Multiple biobricks can be selected and compared. You can search and get multiple (up to three) biobricks, and compare them side by side.
SJTU-Software
Shanghai Jiao Tong University
800, Dongchuan Road
200240 Shanghai, China
back to top
