Team:SUSTC-Shenzhen-A/Biosearch Tutorial

From 2012.igem.org

(Difference between revisions)
m
 
(37 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:SUSTC_A}}
+
{{Template:SUSTC_A2}}
<html>
<html>
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><div id="talkbubble_c2">
+
    <td><div>
-
  <p class="title"><strong>Search Toturial</strong></p><ul>
+
  <h1 class="title">&nbsp;BioSearch Tutorial</h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>
-
         <a href="http://2012.igem.org/Team:SUSTC-Shenzhen-A/Biosearch_Tutorial">Search page <src="http://2012.igem.org/wiki/images/0/0f/Arrow_down.gif"></img> 
+
         <a href="#Search">Search page
-
               </a>  
+
               </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
         <a href="http://2012.igem.org/Team:SUSTC-Shenzhen-A/Biosearch_Tutorial">Catalog page <src="http://2012.igem.org/wiki/images/0/0f/Arrow_down.gif"></img> 
+
         <a href="#Catalog">Catalog page  
-
               </a>  
+
               </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
         <a href="http://2012.igem.org/Team:SUSTC-Shenzhen-A/Biosearch_Tutorial">Favourite page <src="http://2012.igem.org/wiki/images/0/0f/Arrow_down.gif"></img> 
+
         <a href="#Favourite">Favourite page  
-
               </a>  
+
              </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
         <a href="http://2012.igem.org/Team:SUSTC-Shenzhen-A/Biosearch_Tutorial">more <src="http://2012.igem.org/wiki/images/0/0f/Arrow_down.gif"></img> 
+
 
 +
        <a href="#More">More 
 +
               </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
         <a href="#Video">Video tutorial
               </a>  
               </a>  
             </ul>
             </ul>
Line 175: Line 179:
-
<tr><td>
+
<tr><td><a name="Search" ></a>
 +
<p class="title1">&nbsp;&nbsp;Search 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/e4/BiosearchPage1.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ><img src="http://2012.igem.org/wiki/images/0/0d/BiosearchPage2.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
<p><img src="http://2012.igem.org/wiki/images/e/e4/BiosearchPage1.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ><img src="http://2012.igem.org/wiki/images/0/0d/BiosearchPage2.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 187: Line 194:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p>&nbsp;&nbsp;Click the ‘Tutorial’ button, you can learn how to  use the function this page. Click ‘Okey’ button to exit.</p>
+
       <p>&nbsp;&nbsp;Click the ‘Tutorial’ button, you can learn how to  use the functions of this page. Click ‘Okey’ button to exit.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)--></p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)--></p>
Line 224: Line 231:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 253: Line 259:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 265: Line 270:
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(7)</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(7)</p>
       <p>&nbsp;&nbsp;</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;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>
Line 272: Line 277:
       <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 click the ‘return’ button to submit.</strong></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>&nbsp;&nbsp;</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(8)--></p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(8)--></p>
Line 279: Line 284:
       <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 class="title">catalog</p>
+
-
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
+
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 289: Line 291:
   <tr>
   <tr>
-
     <td>
+
     <td><a name="Catalog" ></a>
 +
<p class="title1">&nbsp;&nbsp;Catalog page</p>
 +
<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/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>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 310: Line 314:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 337: Line 340:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
      <p>&nbsp;&nbsp;</p>
+
<br/>
-
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
+
 
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 345: Line 348:
   <tr>
   <tr>
-
     <td>
+
     <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><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>&nbsp;&nbsp;</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(13)</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(13)</p>
       <p>&nbsp;&nbsp;</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;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>
Line 366: Line 371:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 391: Line 395:
       <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>
 +
  </tr>
 +
 +
  <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">
<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>
       <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>
</td>
   </tr>
   </tr>
Line 399: Line 474:
</table>
</table>
</p>
</p>
-
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg">
 
<div></td>
<div></td>
       </tr>
       </tr>
</table>
</table>
</table>
</table>
 +
 +
 +
<!-- end of header -->
<!-- end of header -->

Latest revision as of 10:32, 26 October 2012

 BioSearch Tutorial

      
 

  Search page

  

    <--(1)

  

  After loading, it’s the search page.

  

  

  

  

  

  

  Click the ‘Tutorial’ button, you can learn how to use the functions of this page. Click ‘Okey’ button to exit.

  

        (2)-->

  

  

  

  

  

  

  

  

  

  

    <--(3)

  

  Click the button in the top right corner, you can choose to add a search keyword.

  

  

  

  

  

  

  After entering, click ‘return’ button to hide the keyboard.

  

        (4)-->

  

  

  

  

  

  

  

  

  

  

    <--(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