Team:SUSTC-Shenzhen-A/Biodesign Tutorial

From 2012.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 158: Line 158:
<div>  <tr>
<div>  <tr>
    <td><div>
    <td><div>
-
  <h1 class="title">&nbsp;Search Tutorial</h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>
+
 
 +
  <h1 class="title">&nbsp;BioDesign Tutorial</h1>
 +
 
 +
 
 +
<a name="Video" ></a>
 +
<h3 class="title1">&nbsp;&nbsp;Video tutorial</h3>
 +
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg"/>
 +
   
 +
<p align="center">
 +
<embed src="http://player.youku.com/player.php/sid/XNDY3Mzg4Njcy/v.swf"
 +
width="480" height="400"
 +
type="application/x-shockwave-flash">
 +
</embed></p>
 +
<p align="center">&nbsp;&nbsp;Note: There will be a 6-second Chinese ad at the beginning of this video.</p>
 +
 
 +
<h3 class="title1">&nbsp;&nbsp;Step by step instruction</h3>
 +
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg"/>
 +
<ul>
         <a href="#Folder">Folder page   
         <a href="#Folder">Folder page   
               </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;
Line 170: Line 187:
         <a href="#Mail">Mail page   
         <a href="#Mail">Mail page   
               </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="#Video">Video tutorial
+
     
-
              </a>
+
             </ul>
             </ul>
 +
<br/>
<table border="0" cellspacing="0" cellpadding="0">
<table border="0" cellspacing="0" cellpadding="0">
   <tr>
   <tr>
Line 181: Line 198:
<tr><td><a name="Folder" ></a>  
<tr><td><a name="Folder" ></a>  
<p class="title1">&nbsp;&nbsp;Folder page</p>
<p class="title1">&nbsp;&nbsp;Folder 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/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><img src="http://2012.igem.org/wiki/images/e/e6/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_1.png"  valign="top" align="left" width="300" height = "480" 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" height="480" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(1)</p>
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(1)</p>
Line 210: Line 227:
   <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" height="480" 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;</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;After entering, click ‘return’ button to hide the keyboard.</p>
+
<p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</p>
 +
 
 +
</td>
 +
  </tr>
 +
 
 +
  <tr>
 +
    <td><a name="File" ></a>
 +
<p class="title1">&nbsp;&nbsp;File 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/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_4.png"  valign="top" align="left" width="300" height="480" 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" height="480" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(4)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</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 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 234: Line 283:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
-->
 
</td>
</td>
   </tr>
   </tr>
Line 240: Line 288:
   <tr>
   <tr>
     <td>
     <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>
+
<a name="Drawing"></a>
 +
<p class="title1">&nbsp;&nbsp;Drawing page</p>
 +
<img src="http://2012.igem.org/wiki/images/0/0b/Devidingline_whole.jpg"/>
 +
     <p><img src="http://2012.igem.org/wiki/images/4/41/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_6.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/5/54/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_7.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(6)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click a object at the bottom to set it on the screen.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(7)--></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>
-
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(5)</p>
 
       <p>&nbsp;&nbsp;</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>
+
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/8/8f/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_8.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/b/b2/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_9.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(8)</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the text field next to a part to rename this part.</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;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>&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;For the objects in “comp”, you can zoom them by ywo fingers to change the their sizes.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(9)--></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 261: Line 337:
       <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>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 266: Line 345:
   </tr>
   </tr>
-
  <tr>
+
<tr>
     <td>
     <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><img src="http://2012.igem.org/wiki/images/1/14/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_10.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/f/f6/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_11.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(7)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(10)</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;You can rotate the object clockwisely by clicking the rotating button.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 278: Line 357:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;You can get a vector on the canvas from “part”.</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 class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(11)--></p>
       <p>&nbsp;&nbsp;</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>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
+
      <p>&nbsp;&nbsp;</p>
 +
<br/>
 +
 
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 292: Line 373:
   </tr>
   </tr>
-
  <tr>
+
<tr>
-
     <td><a name="Catalog" ></a>
+
     <td>
-
<p class="title1">&nbsp;&nbsp;Catalog page</p>
+
     <p><img src="http://2012.igem.org/wiki/images/f/fd/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_12.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/c/c8/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_13.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></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>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(9)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(12)</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p>&nbsp;&nbsp;The second page is the catalog page. </p>
+
       <p>&nbsp;&nbsp;You can change the size of the vector by zooming with two fingers.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 306: Line 385:
       <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;If you have add a cell, you may find it covers the vector or other object. Click the “down” button to lower layer.</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 class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(13)--></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 316: Line 394:
       <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>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 321: Line 401:
   </tr>
   </tr>
-
  <tr>
+
<tr>
     <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.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
+
     <p><img src="http://2012.igem.org/wiki/images/6/63/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_14.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/7/71/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_15.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></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;<--(14)</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;You can put objects(in”mole. & part.”) on vector by draging it into the vector.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 333: Line 413:
       <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;In “reac.”, you have various choices to connect objects by Bezier curve.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(12)--></p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(15)--></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 349: Line 429:
   </tr>
   </tr>
-
  <tr>
+
<tr>
-
     <td><a name="Favourite" ></a>
+
     <td>
-
<p class="title1">&nbsp;&nbsp;Favourite page</p>
+
     <p><img src="http://2012.igem.org/wiki/images/2/24/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_16.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/f/fa/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_17.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></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>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(13)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(16)</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;Click two objects in turn and they will be connected.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 363: Line 441:
       <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;You can click the place near the line to pitch the curve. And then change the shape of the curve by dragging with one or two fingers.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(14)--></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>
Line 372: Line 450:
       <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>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 +
<tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/c/cb/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_18.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/9/99/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_19.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(18)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;You can change the type of the arrow by clicking the first button at the right.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Fig.19 shows the changed arrow.</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>
 +
<br/>
 +
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 378: Line 485:
   </tr>
   </tr>
-
<tr>
+
<tr>
     <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>
+
     <p><img src="http://2012.igem.org/wiki/images/7/77/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_20.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/0/0e/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_21.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(15)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(20)</p>
       <p>&nbsp;&nbsp;</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;You can pitch the center point to edit both parts at the same time.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 390: Line 497:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;In “regu.”, choose one to connect two or three parts by polygonal line.</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(21)--></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 397: Line 506:
       <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>
       <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 +
<tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/c/ca/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_22.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/0/00/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_23.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(22)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Fig.22 shows what happens after choosing the "regu".</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Fig.23 also shows what happens after choosing the "regu".</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(23)--></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 405: Line 534:
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
<br/>
<br/>
 +
    <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
<tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/6/66/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_24.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/6/6d/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_25.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(24)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;For objects in “part.”,  you can move one group close to another to connet them.</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 press the button to disconnect them.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(25)--></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>
       <p>&nbsp;&nbsp;</p>
</td>
</td>
   </tr>
   </tr>
-
  <tr>
+
<tr>
-
     <td><a name="More" ></a>
+
     <td>
-
<p class="title1">&nbsp;&nbsp;More</p>
+
     <p><img src="http://2012.igem.org/wiki/images/d/df/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_70.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/9/90/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_71.png"  valign="top" align="right" width="300"height="480"  style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></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>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(16)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(26)</p>
       <p>&nbsp;&nbsp;</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;Click the button at the top right to save this picture (Fig.26). </p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 425: Line 578:
       <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;Come back, you’ll see the icon has change into the saved picture (Fig.27).</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(17)--></p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(27)--></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 434: Line 587:
       <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>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 +
<tr>
 +
    <td>
 +
    <p><img src="http://2012.igem.org/wiki/images/e/ef/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_72.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/f/f8/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_73.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(28)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the microscope button in FIle page at the bottom to search a file (Fig.28).  </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbspClick the button at the bottom right to present the files in a table (Fig.29).</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(29)--></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>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 441: Line 623:
   <tr>
   <tr>
-
     <td>
+
     <td><a name="Mail" ></a>
-
     <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 class="title1">&nbsp;&nbsp;Mail 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/bf/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_74.png"  valign="top" align="left" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="http://2012.igem.org/wiki/images/5/5a/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_75.png"  valign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(18)</p>
+
       <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(30)</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
-
       <p>&nbsp;&nbsp;The ‘About us’ part  show the information of our team.</p>
+
       <p>&nbsp;&nbsp;Come back to the Folder page. Click the envelope button at the bottom right to the file that you want to email to your friend! (Fig.30)</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
       <p>&nbsp;&nbsp;</p>
Line 452: Line 636:
       <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;Click the ‘done’ button. Send the chosen files to your friends (Fig.31)!</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(31)--></p>
       <p>&nbsp;&nbsp;</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>
Line 462: Line 647:
       <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>&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>
 +
 +
</table>
</table>
-
</p>
+
 
<div></td>
<div></td>
       </tr>
       </tr>
</table>
</table>
-
</table>
+
 

Latest revision as of 03:57, 27 October 2012

 BioDesign Tutorial

  Video tutorial

  Note: There will be a 6-second Chinese ad at the beginning of this video.

  Step by step instruction


 

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

  

  

  

  

  

  

  

  

  

  Drawing page

  

    <--(6)

  

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

  

  

  

  

  

  Click a object at the bottom to set it on the screen.

  

        (7)-->

  

  

  

  

  

  


  

  

  

    <--(8)

  

  Click the text field next to a part to rename this part.

  

  

  

  

  

  For the objects in “comp”, you can zoom them by ywo fingers to change the their sizes.

  

        (9)-->

  

  

  

  

  

  


  

  

  

    <--(10)

  

  You can rotate the object clockwisely by clicking the rotating button.

  

  

  

  

  

  You can get a vector on the canvas from “part”.

  

        (11)-->

  

  

  

  

  

  


  

  

  

    <--(12)

  

  You can change the size of the vector by zooming with two fingers.

  

  

  

  

  

  If you have add a cell, you may find it covers the vector or other object. Click the “down” button to lower layer.

  

        (13)-->

  

  

  

  

  

  


  

  

  

    <--(14)

  

  You can put objects(in”mole. & part.”) on vector by draging it into the vector.

  

  

  

  

  

  In “reac.”, you have various choices to connect objects by Bezier curve.

  

        (15)-->

  

  

  

  

  

  


  

  

  

    <--(16)

  

  Click two objects in turn and they will be connected.

  

  

  

  

  

  You can click the place near the line to pitch the curve. And then change the shape of the curve by dragging with one or two fingers.

  

        (17)-->

  

  

  

  

  

  


  

  

  

    <--(18)

  

  You can change the type of the arrow by clicking the first button at the right.

  

  

  

  

  

  Fig.19 shows the changed arrow.

  

        (19)-->

  

  

  

  

  

  


  

  

  

    <--(20)

  

  You can pitch the center point to edit both parts at the same time.

  

  

  

  

  

  In “regu.”, choose one to connect two or three parts by polygonal line.

  

        (21)-->

  

  

  

  

  

  


  

  

  

    <--(22)

  

  Fig.22 shows what happens after choosing the "regu".

  

  

  

  

  

  Fig.23 also shows what happens after choosing the "regu".

  

        (23)-->

  

  

  

  

  

  


  

  

  

    <--(24)

  

  For objects in “part.”, you can move one group close to another to connet them.

  

  

  

  

  

  You can press the button to disconnect them.

  

        (25)-->

  

  

  

  

  

  


  

  

  

    <--(26)

  

  Click the button at the top right to save this picture (Fig.26).

  

  

  

  

  

  Come back, you’ll see the icon has change into the saved picture (Fig.27).

  

        (27)-->

  

  

  

  

  

  


  

  

  

    <--(28)

  

  Click the microscope button in FIle page at the bottom to search a file (Fig.28).

  

  

  

  

  

 &nbspClick the button at the bottom right to present the files in a table (Fig.29).

  

        (29)-->

  

  

  

  

  

  


  

  

  Mail page

  

    <--(30)

  

  Come back to the Folder page. Click the envelope button at the bottom right to the file that you want to email to your friend! (Fig.30)

  

  

  

  

  

  Click the ‘done’ button. Send the chosen files to your friends (Fig.31)!

  

        (31)-->

  

  

  

  

  

  

  

  

  

Footbar.jpg