Team:SJTU-Software/Project/Tutorial

From 2014.igem.org

(Difference between revisions)
 
(146 intermediate revisions not shown)
Line 7: Line 7:
<p>
<p>
-
<style type="text/css"> body {background-image:url(https://static.igem.org/mediawiki/2014/5/57/Sjtu_software_background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style>
+
<style type="text/css"> body {background-color:#BEBEBE; background-attachment:fixed; width:1366px;height:auto;align:center} </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: 22px auto 4% auto;
+
     margin: 1.6% auto 3.9% auto;
-
     width: 957px;
+
     width: 71%;
     align: center;
     align: center;
}
}
Line 135: Line 136:
}
}
#nav {
#nav {
-
     background: url('https://static.igem.org/mediawiki/2014/1/17/Sjtu_software_menu_bg.png')no-repeat scroll 0 0 transparent ;
+
     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 9px;
+
     padding: 0 0 0 0px;
     position: relative;
     position: relative;
-
     width: 957px;
+
     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: 111px;
+
     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: 17px;
+
     left: 6px;
}
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
#nav li:nth-of-type(2):hover ~ #lavalamp {
-
     left: 111px;
+
     left: 93px;
}
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
#nav li:nth-of-type(3):hover ~ #lavalamp {
-
     left: 218px;
+
     left: 195px;
}
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
#nav li:nth-of-type(4):hover ~ #lavalamp {
-
     left: 335px;
+
     left: 310px;
}
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
#nav li:nth-of-type(5):hover ~ #lavalamp {
-
     left: 440px;
+
     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">
-
                 
+
            <a href="http://www.igem.org/Main_Page" target=blank><img src="https://static.igem.org/mediawiki/2014/6/60/Igemlogo_300px.png" style="width:100px; height:100px; position:fixed; top:10px; right:50px;"></img></a>
-
  <div class="container" style="position:relative;z-index:3">
+
  <div class="container" style="position:relative;z-index:3" >
-
 
+
             <ul id="nav">
-
             <ul id="nav" style="position:fixed;width:71%" >
+
                 <li><a href="https://2014.igem.org/Team:SJTU-Software"><font face="Jokerman">Home</font></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"><font face="Jokerman">Software</font></a>
-
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview">Software</a>
+
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview">Overview</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview"><font face="Jokerman">Overview</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial">Tutorial</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman">Tutorial</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy">User Study</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman">User Study</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo">Demo</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman">Demo</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download">Download</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman">Download</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Database">Document</a>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Document</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database">Database</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Database</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/AssessmentModel">A M</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/AssessmentModel"><font face="Jokerman">Assessment Model</font></a></li>
-
                         <li><a href="#">C D</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Conponent"><font face="Jokerman">Conponents</font></a></li>
-
                         <li><a href="#">F D</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/FutureDevelopment"><font face="Jokerman">For Future</font></a></li>
-
                         <li><a href="#">E S S</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Event"><font face="Jokerman">Events</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a class="hsubs" href="">Requirement</a>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Requirement</font></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="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Medal</font></a></li>
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Collaboration">Collaboration</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Acknowledgement"><font face="Jokerman">Acknowledgement</font></a></li>
-
                        <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Notebook">Notebook</a></li>
+
                       
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/HumanPractice">Human Practice</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/HumanPractice"><font face="Jokerman">Human Practice</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Team</a>
+
                 <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Team</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Member</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Member</font></a></li>
-
                        <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Join Us</a></li>
+
                     
-
                        <li><a href="https://2014.igem.org/Team:SJTU-Software/Team">Sponsor</a></li>
+
                     </ul>
                     </ul>
                 </li>
                 </li>
 +
               
                 <div id="lavalamp"></div>
                 <div id="lavalamp"></div>
             </ul>
             </ul>
         </div>
         </div>
-
 
<div align="center">
<div align="center">
-
     <div class="container2" style="height:700px;width:71%;">
+
     <div class="container2" style="height:11175px;width:71%;margin:4.3% 0 0 0">
           <div align=left>
           <div align=left>
-
           <div  class="container2" style="height:700px;width:28%;background-color:#E0E0E0;float:left; display:inline" >
+
           <div  class="container2" style="height:11175px;width:28%;background-color:#636363;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 439:
<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 face="Jokerman" color=#ffffff>Overview</font></a></span>
<span class="arrow up"></span>
<span class="arrow up"></span>
</div>
</div>
</li>
</li>
 +
                                     
<li>
<li>
<div class="header">
<div class="header">
-
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font color=#ffffff>Tutorial</font></a></span>
+
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman" color=#ffffff>Tutorial</font></a></span>
<span class="arrow up"></span>
<span class="arrow up"></span>
</div>
</div>
 +
                                                <ul class="menu">
 +
<li><a href="#start"><font face="Jokerman">How to start</font></a></li>
 +
<li><a href="#search"><font face="Jokerman">Search</font></a></li>
 +
<li><a href="#compare"><font face="Jokerman">Compare</font></a></li>
 +
                                                        <li><a href="#present"><font face="Jokerman">Present</font></a></li>
 +
<li><a href="#upload"><font face="Jokerman">Upload</font></a></li>
 +
                                                     
 +
</ul>
</li>
</li>
<li>
<li>
<div class="header">
<div class="header">
-
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font color=#ffffff>User Study</font></a></span>
+
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman" color=#ffffff>User Study</font></a></span>
-
<span class="arrow down"></span>
+
<span class="up"></span>
</div>
</div>
Line 413: Line 469:
<li>
<li>
<div class="header">
<div class="header">
-
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font color=#ffffff>Demo</font></a></span>
+
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman" color=#ffffff>Demo</font></a></span>
</div>
</div>
</li>
</li>
                                         <li>
                                         <li>
<div class="header">
<div class="header">
-
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font color=#ffffff>Download</font></a></span>
+
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman" color=#ffffff>Download</font></a></span>
</div>
</div>
</li>
</li>
Line 429: Line 485:
            
            
              
              
-
           <div  class="container2" style="height:700px;width:72%;background-color:#C4E1FF;float:left; display:inline" >
+
           <div  class="container2" style="height:800px;width:72%;background-color:#E0E0E0;float:left; display:inline" >
 +
          <div align=center >
 +
 +
    <div  class="container2" style="height:150px;width:100%;background-color:#C2FFC5;margin:0 0 0 0 ">
 +
<div align=left  >
 +
                          <br>
 +
                          <br>
 +
 
 +
                          <div  class="container2" style="margin:-4% 0 0 0;height:150px;width:100%;float:left; display:inline" >
 +
                          <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">Tutorial</font></p>
 +
 
 +
                            <p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">“Easy BBK(An Easy Biobrick Blueprint's pacKage)" has four main function: "search", "compare", "present", and "upload". This part will guide users about how to use this software tool.
 +
</font></p>
 +
                          </div>
 +
                         
 +
                        </div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<div align=center >
 +
 +
    <div  class="container2" style="height:525px;width:100%;background-color:#C2FFC5;margin:0 0 0 0 " id="start">
 +
<div align=left  >
 +
                          <br>
 +
                          <br>
 +
 
 +
                          <div  class="container2" style="margin:-4% 0 0 0;height:525px;width:100%;float:left; display:inline" >
 +
                          <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">1 How to start EASY BBK</font></p>
 +
                            <p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Software environment: Java SE Development Kit 6 and later version.<br>
 +
1. Download EASY BBK from github<br>
 +
2. Download the latest JDK from <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target=blank>http://www.oracle.com/technetwork/java/javase/downloads/index.html</a><br>(Later versions of our software(released before 21st Oct.) will not require users to install JDK before start EasyBBK)
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/a/a7/Sjtu_software_tu1.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">3. Double click the Easybbk.jar and start Easybbk
 +
</font></p>
 +
 
 +
 
 +
                          </div>
 +
                         
 +
                        </div>
 +
</div>
 +
</div>
 +
 +
<div align=center>
 +
    <div  class="container2" style="height:10500px;width:100%;background-color:#C2FFC5;" >
 +
<div align=left style="margin:0 0 0 0 ">
 +
                          <br>
 +
                          <br>
 +
 
 +
                          <div  class="container2" style="margin:-4% 0 0 0;height:10500px;width:100%;float:left; display:inline" >
 +
                          <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">2 Home Page<br><br></font></p>
 +
                            <img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/0/03/Sjtu_software_tu2.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424" id="search">1/2. Click each icon to enter each function
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">3 Search<br><br></font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/8/85/Sjtu_software_tu3.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Go back to home page<br>
 +
2. Input keyword or sequence<br>
 +
3. Search by keyword<br>
 +
4. Search by sequence<br>
 +
5. Display advanced search conditions<br>
 +
<br>
 +
 
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/9/92/Sjtu_software_tu4.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Adjust the weight of the 4 properties to make them add up to 100<br>
 +
2. Click “Confirm” before starting search by keyword or sequence<br>
 +
 
 +
<br></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/6b/Sjtu_software_tu5.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Forward or Back to previous or next page<br>
 +
2. Display detail information of the biobrick<br>
 +
3. Click to view the main page of the biobrick on iGEM Registry<br>
 +
4. Check to add the biobrick to “compare”<br>
 +
5. Click to view the result most related to the biobrick on Google Scholar<br>
 +
6. Go to the previous page of search results<br>
 +
7. Go to the next page of search results<br>
 +
8. After biobricks being added from “search”, click to go to “compare” the biobricks<br>
 +
</font></p>
 +
<p class="text"  style="margin:3% 60px auto"id="compare"><font face="Helvetica" size="3px"  color="#242424">
 +
<br>
 +
</font></p>
 +
 
 +
 
 +
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >4 Compare<br><br></font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/9/91/Sjtu_software_tu6.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto" id="present"><font face="Helvetica" size="3px"  color="#242424">1. Remove the biobrick below from “Compare”<br>
 +
2. Click to view the main page of the biobrick on iGEM Registry<br>
 +
3. After biobricks being viewed in “compare”, click to go back to “search” results
 +
 
 +
<br><br>
 +
</font></p>
 +
<p class="text"  style="margin:3% 60px auto"id="compare"><font face="Helvetica" size="3px"  color="#242424" >
 +
 
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424" >5 Present
 +
 
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">5.1 General introduction of Present Page
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/b/b6/Sjtu_software_tu7.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Basic Functions<br>
 +
2. Backbone<br>
 +
3. Components on backbone<br>
 +
4. Proteins, plasmid, virus and bacteria<br>
 +
5. Relation between biobricks<br>
 +
6. Style settings of lines above<br>
 +
7. Bio-system drawing panel<br>
 +
8. Status bar
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#242424">Basic Functions<br><br>
 +
 
 +
</font></p>
 +
<img  style="margin:1% auto auto 9%;height:150px;width:auto;" src="https://static.igem.org/mediawiki/2014/3/3b/Sjtu_software_tu8.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Discard previous work and create a new bio-system<br>
 +
2. Open previously saved XML file<br>
 +
3. Save the drawn bio-system as an XML file to further edit next time<br>
 +
4. Export the picture of the bio-system as .jpg, .bmp or .png file.<br>
 +
5. Add text to the drawing panel<br>
 +
6. Change the font, size and color of the text<br>
 +
7. Delete components on drawing panel<br>
 +
8. Undo<br>
 +
9. Redo
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
 
 +
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#242424">Components on in bio-systems<br><br></font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:250px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/68/Sjtu_software_tu9.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Promoter<br>
 +
2. Ribosome binding site (RBS)<br>
 +
3. Protein coding sequence<br>
 +
4. Terminator<br>
 +
5. Primer<br>
 +
6. Reporter<br>
 +
7. Protein 1<br>
 +
8. Protein 2<br>
 +
9. Combined protein<br>
 +
10. Plasmid<br>
 +
11. Virus<br>
 +
12. Bacteria
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:4% 60px auto"><font face="Helvetica" size="4px"  color="#242424">Relation and backbone in bio-systems<br><br></font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:150px;width:auto;" src="https://static.igem.org/mediawiki/2014/0/04/Sjtu_software_tu10.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Inhibit<br>
 +
2. Enhance<br>
 +
3. Other relations (e.g. this could denote a coding sequence code a protein.)<br>
 +
4. Backbone<br>
 +
5. Style settings of lines above
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="4px"  color="#242424">5.2 Start presenting your bio-system
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1<SUP>st</SUP>: Draw backbone<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/6e/Sjtu_software_tu11.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Backbone" icon<br>
 +
Step 2. Click anywhere on drawing panel to add a "Backbone"<br>
 +
Step 3. Stretch the "Backbone"<br>
 +
Step 4. Drag the "Backbone" to anywhere on drawing panel<br><br>
 +
 
 +
2<SUP>nd</SUP>: Add a component to backbone
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/d/d2/Sjtu_software_tu12.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Promoter" icon<br>
 +
Step 2. Click anywhere on drawing panel to add a "Promoter"<br>
 +
Step 3. Drag the "Promote" near "Backbone"<br>
 +
Step 4. Release the mouth to make the "Promoter" automatically become part of the sequence
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">3<SUP>rd</SUP>: Adjust the position of the components or backbones already existing on the drawing panel
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/4/46/Sjtu_software_tu13.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Drag the "Protein Coding Sequence" to a suitable position<br>
 +
2. Stretch the "Backbone" to a suitable length<br>
 +
3. Drag the "Backbone" to anywhere on drawing panel
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">4<SUP>th</SUP>: Add proteins to bio-system
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/a/af/Sjtu_software_tu14.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Protein 2" icon<br>
 +
Step 2. Click anywhere on drawing panel to add proteins
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">5<SUP>th</SUP>: Draw a relation between components
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/66/Sjtu_software_tu15.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the "Inhibit" icon<br>
 +
Step 2. Click here<br>
 +
Step 3. Click here<br>
 +
Step 4. Click here (More clicks could be done until you get your desired shape of this relation.)
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">6<SUP>th</SUP>: Add text to drawing panel
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/a/a1/Sjtu_software_tu16.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click the “Text” icon<br>
 +
Step 2. Click anywhere on drawing panel to add text<br>
 +
Step 3. Click to change the font, size and color of the text
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">7<SUP>th</SUP>: Delete a component on drawing panel
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/3/33/Sjtu_software_tu17.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Click this icon<br>
 +
Step 2. Click any component on drawing panel to delete it
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">8<SUP>th</SUP>: Set the detail of the component on drawing panel
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/5/5f/Sjtu_software_tu18.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">Step 1. Double click any component on backbone<br>
 +
Step 2. Input a part name<br>
 +
Step 3. Click “Set” to search this part out from database<br>
 +
Step 4. Click “OK” to set the detail of the component
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">9<SUP>th</SUP>: Upload the presented biobrick
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/5/5c/Sjtu_software_tu19.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424" >By setting the detail on all the biobricks on a single backbone, user can choose to upload the biobrick to Registry or Easy BBK database. The upload form will be automatically filled out.<br>
 +
Step 1. Double click the backbone of the biobrick<br>
 +
Step 2. Click "OK" to confirm to upload the biobrick<br>
 +
Step 3. Go to "upload" to check the filled out form
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">10<SUP>th</SUP>: On finishing presenting the bio-system (Using 2013 Buenos Aires as example)
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/2/24/Sjtu_software_tu20.jpg"></img>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424" >Step 1. Save the drawn bio-system as an XML file to further edit next time<br>
 +
Step 2. Export the picture of the bio-system as .jpg, .bmp or .png file.<br>
 +
Step 3. Open previously saved XML file continue drawing</font></p>
 +
<p id="upload">
 +
<br>
 +
<br>
 +
</p>
 +
 
 +
<p class="text"  style="margin:5% 60px auto" ><font face="Helvetica" size="5px"  color="#242424" >6 Upload<br><br></font></p>
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/9/9f/Sjtu_software_tu21.jpg"></img>
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Input information of biobrick
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
<img  style="margin:1% auto auto 9%;height:300px;width:auto;" src="https://static.igem.org/mediawiki/2014/6/60/Sjtu_software_tu22.jpg"></img>
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">1. Input iGEM user name and password<br>
 +
2. Click to submit the biobrick to Easy BBK database<br>
 +
3. Click to submit the biobrick to Registry
 +
 
 +
<br>
 +
<br>
 +
</font></p>
 +
 
 +
                          </div>
 +
                         
 +
                        </div>
 +
</div>
 +
</div>
 +
 
           </div>           
           </div>           
           </div>
           </div>
Line 437: Line 835:
      
      
<div align=center>
<div align=center>
-
     <div  class="container2" style="height:150px;width:71%;background-color: #272727;" >
+
     <div  class="container2" style="height:150px;width:71%;background-color: #272727;margin:0.5% " >
-
           <div  class="container2" style="height:150px;width:68%;background-color: #272727;float:left; display:inline;" >
+
           <div  class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" >
  <div  style=" float:left;margin:3% auto auto 4%;">       
  <div  style=" float:left;margin:3% auto auto 4%;">       
<a href="http://www.sjtu.edu.cn"target="_blank">     
<a href="http://www.sjtu.edu.cn"target="_blank">     
<img  style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/7/77/Sjtu_software_SJTU_Logo.png"></img></a></div>
<img  style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/7/77/Sjtu_software_SJTU_Logo.png"></img></a></div>
 +
 +
<div  style="float:left;margin:3% auto auto 4%;">     
<div  style="float:left;margin:3% auto auto 4%;">     
<a href="http://life.sjtu.edu.cn"target="_blank">         
<a href="http://life.sjtu.edu.cn"target="_blank">         
Line 447: Line 847:
<div  style=" float:left;margin:3% auto auto 4%;">  
<div  style=" float:left;margin:3% auto auto 4%;">  
-
<a href="http://skmml.sjtu.edu.cn/"target="_blank">        
+
<a href="http://www.seiee.sjtu.edu.cn/"target="_blank">        
-
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/2/28/Sjtu_software_%E5%BE%AE%E7%94%9F%E7%89%A9%E4%BB%A3%E8%B0%A2%E9%87%8D%E7%82%B9%E5%AE%9E%E9%AA%8C%E5%AE%A4logo.png"></img></a></div>
+
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/5b/Sjtu_software_seiee.png"></img></a></div>
 +
         
 +
 
<div  style="float:left;margin:3% auto auto 4%;">  
<div  style="float:left;margin:3% auto auto 4%;">  
-
<a href="http://apex.sjtu.edu.cn/"target="_blank">
+
<a href="http://bme.sjtu.edu.cn/"target="_blank">
-
<img  style=height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/52/Sjtu_software_lablogo.png"></img></a></div>
+
<img  style=height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/3/31/Sjtu_software_sbe.jpg"></img></a></div>
<div  style=" float:left;margin:3% auto auto 4%;">  
<div  style=" float:left;margin:3% auto auto 4%;">  
-
<a href="http://www.seiee.sjtu.edu.cn/"target="_blank">        
+
<a href="http://skmml.sjtu.edu.cn/"target="_blank">        
-
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/5b/Sjtu_software_seiee.png"></img></a></div>
+
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/2/28/Sjtu_software_%E5%BE%AE%E7%94%9F%E7%89%A9%E4%BB%A3%E8%B0%A2%E9%87%8D%E7%82%B9%E5%AE%9E%E9%AA%8C%E5%AE%A4logo.png"></img></a></div>
-
          </div>
+
 
-
             <div  class="container2" style="height:150px;width:32%;background-color: #272727;float:left; display:inline;" >
+
 
-
<div align=right style="margin:-3px ">
+
 
 +
 
 +
             <div  class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" >
 +
<div align=center style="margin:-10px ">
                           <br>
                           <br>
                           <br>
                           <br>
-
  <p class="container2"  style="margin:2% 5% auto"><font face="SimSun" size="4px"  color="#FFFFFF">SJTU-Software</font></p>
+
  <p class="container2"  style="margin:0% 5% auto"><font face="MoolBoran" size="5px"  color="#FFFFFF">iGemdry2014@163.com</font></p>
-
                           <p class="container2" style="margin:0 5% auto"><font face="SimSun" size="4px"  color="#FFFFFF">Shanghai Jiao Tong University</font></p>
+
                           <p class="container2" style="margin:0 5% auto"><font face="MoolBoran" size="5px"  color="#FFFFFF">SJTU-Software,Shanghai,China</font></p>
-
                          <p class="container2" style="margin:0 5% auto"> <font face="SimSun" size="4px"  color="#FFFFFF">800, Dongchuan Road</font></p>
+
                            
-
                           <p class="container2" style="margin:0 5% auto"> <font face="SimSun" size="4px"  color="#FFFFFF">200240 Shanghai, China</font></p>
+
                            
                            
                         </div>
                         </div>
Line 496: Line 900:
     });
     });
</script>
</script>
 +

Latest revision as of 20:09, 17 October 2014




Tutorial

“Easy BBK(An Easy Biobrick Blueprint's pacKage)" has four main function: "search", "compare", "present", and "upload". This part will guide users about how to use this software tool.



1 How to start EASY BBK

Software environment: Java SE Development Kit 6 and later version.
1. Download EASY BBK from github
2. Download the latest JDK from http://www.oracle.com/technetwork/java/javase/downloads/index.html
(Later versions of our software(released before 21st Oct.) will not require users to install JDK before start EasyBBK)

3. Double click the Easybbk.jar and start Easybbk



2 Home Page

1/2. Click each icon to enter each function

3 Search

1. Go back to home page
2. Input keyword or sequence
3. Search by keyword
4. Search by sequence
5. Display advanced search conditions

1. Adjust the weight of the 4 properties to make them add up to 100
2. Click “Confirm” before starting search by keyword or sequence

1. Forward or Back to previous or next page
2. Display detail information of the biobrick
3. Click to view the main page of the biobrick on iGEM Registry
4. Check to add the biobrick to “compare”
5. Click to view the result most related to the biobrick on Google Scholar
6. Go to the previous page of search results
7. Go to the next page of search results
8. After biobricks being added from “search”, click to go to “compare” the biobricks


4 Compare

1. Remove the biobrick below from “Compare”
2. Click to view the main page of the biobrick on iGEM Registry
3. After biobricks being viewed in “compare”, click to go back to “search” results

5 Present

5.1 General introduction of Present Page

1. Basic Functions
2. Backbone
3. Components on backbone
4. Proteins, plasmid, virus and bacteria
5. Relation between biobricks
6. Style settings of lines above
7. Bio-system drawing panel
8. Status bar

Basic Functions

1. Discard previous work and create a new bio-system
2. Open previously saved XML file
3. Save the drawn bio-system as an XML file to further edit next time
4. Export the picture of the bio-system as .jpg, .bmp or .png file.
5. Add text to the drawing panel
6. Change the font, size and color of the text
7. Delete components on drawing panel
8. Undo
9. Redo

Components on in bio-systems

1. Promoter
2. Ribosome binding site (RBS)
3. Protein coding sequence
4. Terminator
5. Primer
6. Reporter
7. Protein 1
8. Protein 2
9. Combined protein
10. Plasmid
11. Virus
12. Bacteria

Relation and backbone in bio-systems

1. Inhibit
2. Enhance
3. Other relations (e.g. this could denote a coding sequence code a protein.)
4. Backbone
5. Style settings of lines above

5.2 Start presenting your bio-system

1st: Draw backbone

Step 1. Click the "Backbone" icon
Step 2. Click anywhere on drawing panel to add a "Backbone"
Step 3. Stretch the "Backbone"
Step 4. Drag the "Backbone" to anywhere on drawing panel

2nd: Add a component to backbone

Step 1. Click the "Promoter" icon
Step 2. Click anywhere on drawing panel to add a "Promoter"
Step 3. Drag the "Promote" near "Backbone"
Step 4. Release the mouth to make the "Promoter" automatically become part of the sequence

3rd: Adjust the position of the components or backbones already existing on the drawing panel

1. Drag the "Protein Coding Sequence" to a suitable position
2. Stretch the "Backbone" to a suitable length
3. Drag the "Backbone" to anywhere on drawing panel

4th: Add proteins to bio-system

Step 1. Click the "Protein 2" icon
Step 2. Click anywhere on drawing panel to add proteins

5th: Draw a relation between components

Step 1. Click the "Inhibit" icon
Step 2. Click here
Step 3. Click here
Step 4. Click here (More clicks could be done until you get your desired shape of this relation.)

6th: Add text to drawing panel

Step 1. Click the “Text” icon
Step 2. Click anywhere on drawing panel to add text
Step 3. Click to change the font, size and color of the text

7th: Delete a component on drawing panel

Step 1. Click this icon
Step 2. Click any component on drawing panel to delete it

8th: Set the detail of the component on drawing panel

Step 1. Double click any component on backbone
Step 2. Input a part name
Step 3. Click “Set” to search this part out from database
Step 4. Click “OK” to set the detail of the component

9th: Upload the presented biobrick

By setting the detail on all the biobricks on a single backbone, user can choose to upload the biobrick to Registry or Easy BBK database. The upload form will be automatically filled out.
Step 1. Double click the backbone of the biobrick
Step 2. Click "OK" to confirm to upload the biobrick
Step 3. Go to "upload" to check the filled out form

10th: On finishing presenting the bio-system (Using 2013 Buenos Aires as example)

Step 1. Save the drawn bio-system as an XML file to further edit next time
Step 2. Export the picture of the bio-system as .jpg, .bmp or .png file.
Step 3. Open previously saved XML file continue drawing



6 Upload

1. Input information of biobrick

1. Input iGEM user name and password
2. Click to submit the biobrick to Easy BBK database
3. Click to submit the biobrick to Registry



iGemdry2014@163.com

SJTU-Software,Shanghai,China

back to top

Retrieved from "http://2014.igem.org/Team:SJTU-Software/Project/Tutorial"