Team:SUSTC-Shenzhen-A/Biodesign Tutorial

From 2012.igem.org

(Difference between revisions)
Line 210: Line 210:
   <tr>
   <tr>
     <td>
     <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><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;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(3)</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(3)</p>
       <p>&nbsp;&nbsp;</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;Click the icon, then click ‘enter’,<br/> 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>
+
-
    <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>
+
-
 
+
-
      <p>&nbsp;&nbsp;</p>
+
-
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(5)</p>
+
-
      <p>&nbsp;&nbsp;</p>
+
-
      <p>&nbsp;&nbsp;Click the ‘Search’ button to do the search. The loading will last for a few seconds. </p>
+
-
      <p>&nbsp;&nbsp;</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>
+
-
  </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>
</td>
   </tr>
   </tr>
   <tr>
   <tr>
-
     <td><a name="Catalog" ></a>  
+
     <td><a name="File" ></a>  
-
  <p class="title1">&nbsp;&nbsp;Catalog page</p>
+
  <p class="title1">&nbsp;&nbsp;File page</p>
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
-
     <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.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
+
     <p><img src="http://2012.igem.org/wiki/images/2/26/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_4.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/6/60/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_5.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(9)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(4)</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p>&nbsp;&nbsp;The second page is the catalog page. </p>
+
       <p>&nbsp;&nbsp;The secondary page looks like Fig.4. </p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 306: Line 232:
       <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;Click the button name ‘add’ at the top right to create a new file (Fig.5).</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(10)--></p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5)--></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 325: Line 251:
     <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.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
     <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.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(11)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(6)</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p>&nbsp;&nbsp;Click the option name, you can get the submenu.</p>
+
       <p>&nbsp;&nbsp;Click the newly created file, choose ‘edit’ to do the drawing (Fig.6).</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>

Revision as of 04:48, 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).

  File page

  

    <--(4)

  

  The secondary page looks like Fig.4.

  

  

  

  

  

  Click the button name ‘add’ at the top right to create a new file (Fig.5).

  

        (5)-->

  

  

  

  

  

  

  

  

  

  

    <--(6)

  

  Click the newly created file, choose ‘edit’ to do the drawing (Fig.6).

  

  

  

  

  

  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