Team:SUSTC-Shenzhen-A/Biodesign Tutorial

From 2012.igem.org

(Difference between revisions)
 
(15 intermediate revisions not shown)
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><div><h1 class="title">Quick tutorial</h1></div>
+
 +
<h1 class="title">&nbsp;BioDesign Tutorial</h1>
 +
 +
 +
<a name="Video" ></a>
 +
<h3 class="title1">&nbsp;&nbsp;Video tutorial</h3>
 +
<img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg"/>
<ul>
<ul>
-
         <a href="#Select_pictures">Select pictures</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
+
         <a href="#Folder">Folder page 
-
         <a href="#Select_curves">Select curves and arrows</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="#Delete">Delete curves and arrows</a>
+
 
-
</ul>
+
         <a href="#File">File page
 +
              </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
 
 +
         <a href="#Drawing">Drawing page
 +
              </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;
 +
     
 +
            </ul>
 +
<br/>
 +
<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="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg"/>
 +
 
 +
<p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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 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="https://static.igem.org/mediawiki/2012/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 class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(3)</p>
 +
      <p>&nbsp;&nbsp;</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;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
-
<a name="Select_pictures"></a>
+
</td>
-
<tr><td><h2 class="title1">Select pictures</h2><br/></td></tr>
+
  </tr>
-
<tr>
+
  <tr>
-
  <td><img src="https://static.igem.org/mediawiki/2012/e/ec/Sustc_shenzhen_a_biodesign_tutorial1.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
    <td><a name="File" ></a>
-
  </td>
+
<p class="title1">&nbsp;&nbsp;File page</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/>
+
<img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg"/>
-
<p align="right"><b><big> Fig.2 --> </b></big></p><br/>
+
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/6/60/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_5.pngvalign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
-
&nbsp;&nbsp;Fig.2 shows what happens after the selecting.</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>
 +
      <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="https://static.igem.org/mediawiki/2012/6/63/Sustc_shenzhen_a_biodesign_tutorial2.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
   </tr>
-
   </td>
+
-
</tr>
+
-
<a name="Select_curves"></a>
+
-
<tr><td><h2 class="title1">Select curves and arrows</h2><br/></td></tr>
+
-
<tr>
+
  <tr>
-
  <td><img src="https://static.igem.org/mediawiki/2012/7/7b/Sustc_shenzhen_a_biodesign_tutorial3.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
    <td>
-
  </td>
+
<a name="Drawing"></a>
-
  <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/>
+
<p class="title1">&nbsp;&nbsp;Drawing page</p>
-
<p align="right"><b><big> Fig.4 --> </b></big></p><br/>
+
<img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg"/>
-
&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><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/5/54/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_7.pngvalign="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>
</td>
</td>
-
  <td><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/b/b2/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_9.pngvalign="top" align="right" width="300" height="480" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></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;<--(8)</p>
-
<a name="Delete"></a>
+
      <p>&nbsp;&nbsp;</p>
-
<tr><td><h2 class="title1">Delete curves and arrows</h2><br/></td></tr>
+
      <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;For the objects in “comp”, you can zoom them by ywo fingers to change the their sizes.</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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
-
<tr>
+
      <p>&nbsp;&nbsp;</p>
-
   <td><img src="https://static.igem.org/mediawiki/2012/1/1e/Sustc_shenzhen_a_biodesign_tutorial6.png"  valign="top" align="left" width="300"  style="BORDER:#CCFFCC 5px dashed;margin:10px;" >
+
      <p>&nbsp;&nbsp;</p>
-
  </td>
+
</td>
-
  <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/>
+
   </tr>
-
</tr>
+
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/f/f6/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_11.pngvalign="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;<--(10)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;You can get a vector on the canvas from “part”.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(11)--></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>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(12)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</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;(13)--></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>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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 class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(14)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;In “reac.”, you have various choices to connect objects by Bezier curve.</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
 +
 
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(16)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</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 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>
 +
<br/>
 +
 
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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>
 +
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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 class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(20)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <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 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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
 +
    <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
 +
    <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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 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>
 +
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(26)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</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 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>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
 +
 
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
<tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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>
 +
</td>
 +
  </tr>
 +
 
 +
  <tr>
 +
    <td><a name="Mail" ></a>
 +
<p class="title1">&nbsp;&nbsp;Mail page</p>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg" />
 +
    <p><img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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 class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(30)</p>
 +
      <p>&nbsp;&nbsp;</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>
 +
      <p>&nbsp;&nbsp;</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>&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>
 +
 
 +
 
 +
 
</table>
</table>
 +
 +
<div></td>
 +
      </tr>
 +
</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