Team:SUSTC-Shenzhen-A/Biodesign Tutorial

From 2012.igem.org

(Difference between revisions)
Line 102: Line 102:
#talkbubble_c2 {
#talkbubble_c2 {
   width: 862px;  
   width: 862px;  
-
   height:8000px;  
+
   height:6000px;  
//  background:#EFEFEF;
//  background:#EFEFEF;
   background:#ffffff;
   background:#ffffff;
Line 150: Line 150:
}
}
</style>
</style>
 +
</head>
</head>
<body >
<body >
-
<table width="899" border="0" cellspacing="10px" cellpadding="10px" align="center">
+
<table width="899" border="0" cellspacing="0px" cellpadding="0px" align="center">
<div>  <tr>
<div>  <tr>
-
    <td>
+
    <td><div>
-
<tr><td colspan="3"><h1 class="title">Quick tutorial</h1>
+
<h1 class="title">&nbsp;Search Tutorial</h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>
 +
        <a href="#Folder">Folder page 
 +
              </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
<ul>
+
        <a href="#File">File page
-
         <a href="#Select_pictures">Select pictures</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
+
              </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
         <a href="#Select_curves">Select curves and arrows</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
 
-
         <a href="#Delete">Delete curves and arrows</a>
+
         <a href="#Drawing">Drawing page
-
</ul>
+
              </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
 
 +
         <a href="#Mail">Mail page 
 +
              </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
         <a href="#Video">Video tutorial
 +
              </a>  
 +
            </ul>
 +
<table border="0" cellspacing="0" cellpadding="0">
 +
  <tr>
 +
    <td>&nbsp;</td>
 +
  </tr>
 +
 
 +
 
 +
<tr><td><a name="Folder" ></a>
 +
<p class="title1">&nbsp;&nbsp;Folder page</p>
 +
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 +
 
 +
<p><img src="http://2012.igem.org/wiki/images/e/e6/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_1.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ><img src="http://2012.igem.org/wiki/images/b/b7/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_2.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(1)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Fig.1 is the first page. </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;In order to create a new project/folder, you should click the ‘add’ button at the top right (Fig.2).</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
</td>
</td>
-
</tr>
+
  </tr>
 +
  <tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/3/35/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_3.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/4/4e/BiosearchPage4.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(3)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the icon, then click ‘enter’, it goes into the secondary page (Fig.3).</p>
 +
<!--
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;After entering, click ‘return’ button to hide the keyboard.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
-->
 +
</td>
 +
  </tr>
-
<tr><td><h2 class="title1"><a name="Select_pictures"></a>Select pictures</h2><br/></td></tr>
+
  <tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/c/c3/BiosearchPage5.png" valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/e/e2/BiosearchPage6.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
-
<tr>
+
      <p>&nbsp;&nbsp;</p>
-
  <td><img src="http://2012.igem.org/wiki/images/e/ec/Sustc_shenzhen_a_biodesign_tutorial1.png" valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(5)</p>
-
  </td>
+
      <p>&nbsp;&nbsp;</p>
-
  <td><p><p align="left"><b><big><-- Fig.1 </b></big> </p><br/><br/>&nbsp;&nbsp; A picture can be selected by touching it. As shown in Fig.1, you have selected 4 pictures whose borders become red or blue. The red border means that there will be lines coming from the corresponding pictures and pointing to the blue-border pictures.<br/><br/>
+
      <p>&nbsp;&nbsp;Click the ‘Search’ button to do the search. The loading will last for a few seconds. </p>
-
<p align="right"><b><big> Fig.2 --> </b></big></p><br/>
+
      <p>&nbsp;&nbsp;</p>
-
&nbsp;&nbsp;Fig.2 shows what happens after the selecting.</p>
+
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;You can get the result. Each record shows whether the biobrick is available or not and the short description of this biobrick. <strong>You can also click the right corner button to do a second level search.</strong></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(6)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
</td>
</td>
-
  <td><img src="http://2012.igem.org/wiki/images/6/63/Sustc_shenzhen_a_biodesign_tutorial2.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
   </tr>
-
   </td>
+
-
</tr>
+
-
<tr><td><h2 class="title1"><a name="Select_curves"></a>Select curves and arrows</h2><br/></td></tr>
+
  <tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/0/0e/BiosearchPage7.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/4/43/BiosearchPage8.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(7)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the biobrick name, you can browse the detail information of this BioBrick. </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘add’ button, you can add this biobrick to your bookmark (Favorites). In the alert, you can add your own tag to this biobrick. <strong>You need to click the ‘return’ button to submit.</strong></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(8)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
<tr>
+
  <tr>
-
  <td><img src="http://2012.igem.org/wiki/images/7/7b/Sustc_shenzhen_a_biodesign_tutorial3.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
    <td><a name="Catalog" ></a>
-
  </td>
+
<p class="title1">&nbsp;&nbsp;Catalog page</p>
-
  <td><p><p align="left"><b><big><-- Fig.3 </b></big> </p><br/><br/>&nbsp;&nbsp;Touching curves, if they become red and dashed, it means that you've selected it, as it is shown in Fig.3.<br/><br/>
+
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
-
<p align="right"><b><big> Fig.4 --> </b></big></p><br/>
+
    <p><img src="http://2012.igem.org/wiki/images/2/26/BiosearchPage9.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/b/bf/BiosearchPage10.pngvalign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
-
&nbsp;&nbsp;After selecting the curves, click the 'Edit' button on the top right to change the arrow type of the selected curves. See Fig.4</p>
+
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(9)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;The second page is the catalog page. </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;The‘tutorial’ button is located at the top right corner. Click the ‘Okey’ button to exit.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(10)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
</td>
</td>
-
  <td><img src="http://2012.igem.org/wiki/images/9/9a/Sustc_shenzhen_a_biodesign_tutorial4.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
   </tr>
-
   </td>
+
-
</tr>
+
-
<tr>
+
  <tr>
-
  <td><img src="http://2012.igem.org/wiki/images/3/3f/Sustc_shenzhen_a_biodesign_tutorial5.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
    <td>
-
  </td>
+
    <p><img src="http://2012.igem.org/wiki/images/1/10/BiosearchPage11.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/0/0d/BiosearchPage12.pngvalign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
-
  <td><p><p align="left"><b><big><-- Fig.5 </b></big> </p><br/><br/>&nbsp;&nbsp;Please pay attention to the arrows of the red dashed curves. They have changed from triangle-like arrows into spear-like arrows. See Fig.5 <br/><br/>
+
      <p>&nbsp;&nbsp;</p>
-
</tr>
+
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(11)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the option name, you can get the submenu.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘list’ button, you can browse all the biobricks in this catagery.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(12)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
-
<tr><td><h2 class="title1"><a name="Delete"></a>Delete curves and arrows</h2><br/></td></tr>
+
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
  <tr>
 +
    <td><a name="Favourite" ></a>
 +
<p class="title1">&nbsp;&nbsp;Favourite page</p>
 +
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 +
    <p><img src="http://2012.igem.org/wiki/images/b/bb/BiosearchPage13.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/3/31/BiosearchPage14.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(13)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;In the "favorites" page, you can see all the biobricks you have added.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘edit’ button to enter the edit mode. Click the ‘done’ button to exit.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(14)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
<tr>
+
<tr>
-
  <td><img src="http://2012.igem.org/wiki/images/1/1e/Sustc_shenzhen_a_biodesign_tutorial6.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
    <td>
-
  </td>
+
    <p><img src="http://2012.igem.org/wiki/images/3/34/BiosearchPage15.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
-
  <td><p><p align="left"><b><big><-- Fig.6 </b></big> </p><br/><br/>&nbsp;&nbsp;Select a curve. Then press the 'Delete' button the top left. The selected curve and arrow will be deleted. <br/><br/>
+
      <p>&nbsp;&nbsp;</p>
-
</tr>
+
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(15)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘browse’ button, you can choose the way to browse your bookmarks.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
</td>
</td>
   </tr>
   </tr>
-
</div>
+
 
 +
  <tr>
 +
    <td><a name="More" ></a>
 +
<p class="title1">&nbsp;&nbsp;More</p>
 +
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 +
    <p><img src="http://2012.igem.org/wiki/images/d/dc/BiosearchPage16.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/6/64/BiosearchPage17.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(16)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;In the "more" page, you can get some information about synthetic biology and biobricks.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;On the bottom, there is the feedback part.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(17)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
  <tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/e/ef/BiosearchPage19.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/5/5c/BiosearchPage20.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(18)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;The ‘About us’ part  show the information of our team.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘Compose the mail’ to send your suggestion to us.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(19)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</br>
 +
</br>
 +
</br>
 +
</br>
 +
      <a name="Video"></a>
 +
      <p class="title1">&nbsp;&nbsp;Video tutorial</p>
 +
      <img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 +
      <p>&nbsp;&nbsp;</p>
 +
<p align="center"><embed src="http://player.youku.com/player.php/sid/XNDU1MTY3OTQ0/v.swf" play="true"  quality="high" width="540" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed></p><a name="video"></a>
 +
</td>
 +
  </tr>
 +
 
</table>
</table>
 +
</p>
 +
<div></td>
 +
      </tr>
 +
</table>
 +
</table>
 +
 +

Revision as of 04:36, 26 October 2012

 Search Tutorial

      
 

  Folder page

  

    <--(1)

  

  Fig.1 is the first page.

  

  

  

  

  

  

  In order to create a new project/folder, you should click the ‘add’ button at the top right (Fig.2).

  

        (2)-->

  

  

  

  

  

  

  

  

  

  

    <--(3)

  

  Click the icon, then click ‘enter’, it goes into the secondary page (Fig.3).

  

  

  

  

  

  

  

  

  

-->

  

    <--(5)

  

  Click the ‘Search’ button to do the search. The loading will last for a few seconds.

  

  

  

  

  

  You can get the result. Each record shows whether the biobrick is available or not and the short description of this biobrick. You can also click the right corner button to do a second level search.

  

        (6)-->

  

  

  

  

  

  

  

  

  

  

    <--(7)

  

  Click the biobrick name, you can browse the detail information of this BioBrick.

  

  

  

  

  

  

  Click the ‘add’ button, you can add this biobrick to your bookmark (Favorites). In the alert, you can add your own tag to this biobrick. You need to click the ‘return’ button to submit.

  

        (8)-->

  

  

  

  

  

  

  Catalog page

  

    <--(9)

  

  The second page is the catalog page.

  

  

  

  

  

  The‘tutorial’ button is located at the top right corner. Click the ‘Okey’ button to exit.

  

        (10)-->

  

  

  

  

  

  

  

  

  

  

    <--(11)

  

  Click the option name, you can get the submenu.

  

  

  

  

  

  Click the ‘list’ button, you can browse all the biobricks in this catagery.

  

        (12)-->

  

  

  

  

  

  


  

  

  Favourite page

  

    <--(13)

  

  In the "favorites" page, you can see all the biobricks you have added.

  

  

  

  

  

  Click the ‘edit’ button to enter the edit mode. Click the ‘done’ button to exit.

  

        (14)-->

  

  

  

  

  

  

  

  

  

  

    <--(15)

  

  Click the ‘browse’ button, you can choose the way to browse your bookmarks.

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  


  

  

  More

  

    <--(16)

  

  In the "more" page, you can get some information about synthetic biology and biobricks.

  

  

  

  

  

  On the bottom, there is the feedback part.

  

        (17)-->

  

  

  

  

  

  

  

  

  

  

    <--(18)

  

  The ‘About us’ part show the information of our team.

  

  

  

  

  

  Click the ‘Compose the mail’ to send your suggestion to us.

  

        (19)-->

  

  

  

  

  

  

  





  Video tutorial

  

Footbar.jpg