Team:CBNU-Korea/Project/BD/Method

From 2012.igem.org

(Difference between revisions)
 
(4 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:CBNU-Korea/css_new}}
<html>
<html>
<head>
<head>
-
 
-
<link href='http://fonts.googleapis.com/css?family=Droid+Sans'
 
-
rel='stylesheet' type='text/css'>
 
-
<link href='http://fonts.googleapis.com/css?family=Francois+One'
 
-
rel='stylesheet' type='text/css'>
 
-
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,900'
 
-
rel='stylesheet' type='text/css'>
 
-
 
-
<!--[if lt IE 9]>
 
-
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
-
    <script src="http://scottjehl.github.com/Respond/respond.min.js"></script>
 
-
    <![endif]-->
 
-
 
-
 
-
<meta name="viewport"
 
-
content="width=device-width, initial-scale=1.0 minimum-scale=1, maximum-scale=1, user-scalable=yes, target-densitydpi=medium-dpi" />
 
<style>
<style>
-
/******/
 
-
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption
 
-
{
 
-
display: block;
 
-
}
 
-
 
-
/* ----------------Display:none---------------- */
 
-
#p-logo {
 
-
display: none;
 
-
}
 
-
 
-
#search-controls {
 
-
display: none;
 
-
}
 
-
 
-
.firstHeading {
 
-
display: none;
 
-
}
 
-
 
-
#catlinks {
 
-
display: none;
 
-
}
 
-
 
-
#footer-box {
 
-
display: none;
 
-
}
 
-
 
-
#contentSub {
 
-
display: none;
 
-
}
 
-
 
-
/* ----------------TopSection---------------- */
 
-
#top-section {
 
-
height: 30px;
 
-
width: 100%;
 
-
background: none repeat scroll 0 0 #343838; /*per Page*/
 
-
border-bottom: 1px solid #262B35; /*per Page*/
 
-
border-left: medium none;
 
-
border-right: medium none;
 
-
}
 
-
 
-
#menubar {
 
-
top: 2px;
 
-
font-family: 'Droid Sans', sans-serif;
 
-
}
 
-
 
-
/* ----------------Body---------------- */
 
-
body {
 
-
font-family: 'Lato' sans-serif;
 
-
background: white;
 
-
}
 
-
 
-
#globalWrapper {
 
-
padding-bottom: 0px;
 
-
}
 
-
 
-
/* ----------------TopSection_left-menu---------------- */
 
-
.left-menu,.left-menu a {
 
-
color: white;
 
-
left: 0px;
 
-
text-transform: capitalize;
 
-
}
 
-
 
-
.left-menu:hover {
 
-
background-color: transparent;
 
-
}
 
-
 
-
.left-menu:hover a {
 
-
color: white;
 
-
text-decoration: none !important;
 
-
}
 
-
 
-
.left-menu li a:hover {
 
-
color: #aaaaff;
 
-
}
 
-
 
-
/* ----------------TopSection_right-menu---------------- */
 
-
.right-menu li {
 
-
background-color: transparent;
 
-
}
 
-
 
-
.right-menu,.right-menu a {
 
-
color: white;
 
-
right: 0;
 
-
text-align: right;
 
-
}
 
-
 
-
.right-menu:hover {
 
-
background-color: transparent;
 
-
}
 
-
 
-
.right-menu:hover a {
 
-
color: white;
 
-
}
 
-
 
-
.right-menu li a {
 
-
background-color: transparent;
 
-
color: white;
 
-
padding: 0 15px 0 0;
 
-
}
 
-
 
-
.right-menu li a:hover {
 
-
color: #aaaaff;
 
-
}
 
-
 
-
/* ----------------CB_top---------------- */
 
-
#CB_top {
 
-
background: url(https://static.igem.org/mediawiki/2012/f/fd/CBK_back_010.png);
 
-
font-family: 'Francois One', sans-serif;
 
-
overflow: auto;
 
-
padding-bottom: 20px;
 
-
}
 
-
 
-
#CB_top_shadow {
 
-
background: url(https://static.igem.org/mediawiki/2012/b/b0/CBK_back_011.png);
 
-
height: 10px;
 
-
margin-bottom: 12px;
 
-
}
 
-
 
-
#CB_top_logo_cont {
 
-
width: 90%;
 
-
max-width: 1080px;
 
-
margin: 0 auto;
 
-
line-height: 1em;
 
-
}
 
-
 
-
#CB_top_CBNU_logo {
 
-
width: 55%;
 
-
margin: 0 auto;
 
-
color: white;
 
-
font-size: 50px;
 
-
float: left;
 
-
padding-top: 25px;
 
-
}
 
-
 
-
#CB_top_CBNU_logo_img {
 
-
background: url(https://static.igem.org/mediawiki/2012/2/2c/CBK_logo_003.png)
 
-
no-repeat;
 
-
width: 140px;
 
-
height: 120px;
 
-
float: left;
 
-
}
 
-
 
-
#CB_top_CBNU_logo_text_1 p {
 
-
padding: 0;
 
-
margin: 0;
 
-
margin-top: 12px;
 
-
font-size: 30px;
 
-
}
 
-
 
-
#CB_top_CBNU_logo_text_2 p {
 
-
padding: 0;
 
-
margin: 0;
 
-
margin-top: -18px;
 
-
}
 
-
 
-
#CB_top_MENU {
 
-
width: 45%;
 
-
float: right;
 
-
text-align: right;
 
-
padding-top: 45px;
 
-
}
 
-
 
-
#CB_top_MENU ul {
 
-
margin: 0;
 
-
padding: 0;
 
-
font-size: 18px;
 
-
padding-bottom: 10px;
 
-
}
 
-
 
-
#CB_top_MENU li {
 
-
display: inline-block;
 
-
*display: inline;
 
-
border-bottom: 5px solid #221B1B;
 
-
height: 30px;
 
-
padding: 0 15px;
 
-
margin: 0 4px;
 
-
}
 
-
 
.PROJECT {
.PROJECT {
border-bottom-color: white !important;
border-bottom-color: white !important;
-
}
 
-
 
-
#CB_top_MENU li:hover {
 
-
background: white;
 
-
border-bottom: 5px solid white;
 
-
}
 
-
 
-
#CB_top_MENU li:hover a {
 
-
color: #24BED3;
 
-
}
 
-
 
-
#CB_top_MENU a {
 
-
color: #0E0B0B;
 
-
}
 
-
 
-
/* ----------------CB_content---------------- */
 
-
#CB_content a {
 
-
color: black;
 
-
}
 
-
 
-
#CB_subcontent {
 
-
width: 90%;
 
-
max-width: 1080px;
 
-
margin: 0 auto;
 
-
background: transparent;
 
-
overflow: auto;
 
-
}
 
-
 
-
#CB_subcontent h2 {
 
-
background: white;
 
-
color: black;
 
-
font-size: 2.2em;
 
-
font-weight: 900;
 
-
border: 0;
 
-
margin: 0;
 
-
padding: 25px 10px 10px 2%;
 
-
}
 
-
 
-
#CB_subcontent h3 {
 
-
font-weight: 400;
 
-
border: 0;
 
-
margin: 0;
 
-
padding: 2% 0 1% 4.2%;
 
-
font-size: 2em;
 
-
line-height: 1.5em;
 
-
}
 
-
 
-
#CB_subcontent p {
 
-
font-weight: 400;
 
-
border: 0;
 
-
margin: 0;
 
-
padding: 1% 0 1% 4.5%;
 
-
font-size: 1.4em;
 
-
}
 
-
 
-
#CB_sub_title {
 
-
width: 100%;
 
-
overflow: auto;
 
-
margin-bottom: 30px;
 
-
}
 
-
 
-
#CB_subcontent h2 {
 
-
background: white;
 
-
color: black;
 
-
font-size: 3.5em;
 
-
font-weight: 900;
 
-
border: 0;
 
-
margin: 0;
 
-
padding: 25px 10px 10px 2%;
 
-
}
 
-
 
-
#CB_sub_title h3 {
 
-
font-weight: 400;
 
-
border: 0;
 
-
margin: 0;
 
-
padding: 0 0 1% 4.2%;
 
-
font-size: 2em;
 
-
line-height: 1.5em;
 
-
}
 
-
 
-
#CB_sub_main {
 
-
width: 70%;
 
-
float: right;
 
-
}
 
-
 
-
#CB_sub_menu {
 
-
width: 28%;
 
-
float: left;
 
-
border-top: 1px dotted #41C7BC;
 
-
padding-top: 10px;
 
-
}
 
-
 
-
#CB_sub_menu ul {
 
-
list-style-type: none;
 
-
margin: 0;
 
-
padding: 10px 0 0 0;
 
-
margin-right: 20%;
 
-
font-size: 16px;
 
-
}
 
-
 
-
#CB_sub_menu li {
 
-
border-bottom: 1px dotted #41C7BC;
 
-
}
 
-
 
-
#li_sub {
 
-
font-size: 14px;
 
-
padding-left: 17%;
 
}
}
Line 317: Line 16:
color: #A56BAA !important;
color: #A56BAA !important;
padding-left: 10px;
padding-left: 10px;
-
}
 
-
 
-
#CB_sub_main {
 
-
border-top: 1px dotted #41C7BC;
 
-
padding-top: 10px;
 
-
}
 
-
 
-
#CB_sub_main h1 {
 
-
font-size: 2.4em;
 
-
font-weight: 900;
 
-
margin: 0;
 
-
line-height: 1.2em;
 
-
}
 
-
 
-
#CB_sub_main h2 {
 
-
font-size: 1.5em;
 
-
font-weight: 900;
 
-
margin: 0;
 
-
line-height: 1.2em;
 
-
border: 0;
 
-
padding: 10px 0 5px 2%;
 
-
}
 
-
 
-
#CB_sub_main h3 {
 
-
 
-
}
 
-
 
-
#CB_sub_main p {
 
-
 
}
}
#CB_sub_img {
#CB_sub_img {
-
height: 140px;
+
background-image:
-
background:
+
url(https://static.igem.org/mediawiki/2012/e/ed/CBK_sub_img_003.png);
url(https://static.igem.org/mediawiki/2012/e/ed/CBK_sub_img_003.png);
-
background-size: 100% 100%;
 
-
}
 
-
 
-
#CB_sub_img img {
 
-
width: 100%;
 
-
height: 100%;
 
-
}
 
-
 
-
#CB_sub_cont {
 
-
 
-
}
 
-
 
-
#scrolltotop {
 
-
width: 100%;
 
-
height: 20px;
 
-
background: url(https://static.igem.org/mediawiki/2012/7/7e/CBK_STT.png)
 
-
no-repeat right;
 
-
cursor: pointer;
 
-
}
 
-
/* ----------------CB_footer---------------- */
 
-
#CB_responsive {
 
-
height: 200px;
 
-
background: #DFD4E7;
 
-
border-top: 1px solid #AAA6B6;
 
-
}
 
-
 
-
#CB_footer {
 
-
height: 200px;
 
-
background: #EBEBEB;
 
-
border-top: 1px solid silver;
 
-
}
 
-
 
-
#CB_footer_logo {
 
-
 
-
}
 
-
 
-
#CB_footer_text {
 
-
 
-
}
 
-
 
-
/* ----------------Content---------------- */
 
-
#content {
 
-
background: transparent;
 
-
padding: 0;
 
-
width: 100%;
 
-
border: 0px;
 
-
}
 
-
 
-
a {
 
-
color: #0088cc;
 
-
text-decoration: none;
 
-
}
 
-
 
-
a:hover {
 
-
color: #005580;
 
-
text-decoration: none !important;
 
-
}
 
-
 
-
p {
 
-
margin: 0px;
 
-
}
 
-
 
-
hr {
 
-
height: 1px;
 
-
color: transparent;
 
-
background-color: transparent;
 
-
border: 0;
 
-
background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
 
-
transparent );
 
-
background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
 
-
transparent );
 
-
background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
 
-
transparent );
 
-
background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25),
 
-
transparent );
 
-
}
 
-
 
-
/* ----------------responsive---------------- */
 
-
 
-
/* iPhone, etc portrait ---- */
 
-
@media all and (min-width : 320px) and (max-width : 768px) {
 
-
#menubar {
 
-
display: none;
 
-
}
 
-
#CB_top {
 
-
padding-bottom: 0px;
 
-
}
 
-
#CB_top_logo_cont {
 
-
width: 100%;
 
-
max-width: 1080px;
 
-
margin: 0 auto;
 
-
line-height: 1em;
 
-
}
 
-
#CB_top_CBNU_logo {
 
-
width: 100%;
 
-
margin: 0 auto;
 
-
color: white;
 
-
font-size: 30px;
 
-
padding-top: 15px;
 
-
text-align: center;
 
-
}
 
-
#CB_top_CBNU_logo_img {
 
-
background: url(https://static.igem.org/mediawiki/2012/2/2c/CBK_logo_003.png)
 
-
no-repeat;
 
-
width: 120px;
 
-
height: 120px;
 
-
margin: 0 auto;
 
-
float: none;
 
-
}
 
-
#CB_top_MENU {
 
-
width: 100%;
 
-
text-align: center;
 
-
padding-top: 40px;
 
-
}
 
-
#CB_top_MENU ul {
 
-
margin: 0;
 
-
padding: 0;
 
-
font-size: 12px;
 
-
padding-bottom: 10px;
 
-
}
 
-
#CB_top_MENU li {
 
-
display: inline-block;
 
-
*display: inline;
 
-
border-bottom: 5px solid #221B1B;
 
-
height: 20px;
 
-
padding: 0 15px;
 
-
margin: 0 4px;
 
-
}
 
-
#CB_top_MENU li:hover {
 
-
background: white;
 
-
border-bottom: 5px solid white;
 
-
}
 
-
#CB_top_MENU li:hover a {
 
-
color: #24BED3;
 
-
}
 
-
#CB_top_MENU a {
 
-
color: #0E0B0B;
 
-
}
 
-
}
 
-
 
-
/* iPad, tablets etc portrait ---- */
 
-
@media all and (min-width : 769px) and (max-width : 1024px ) {
 
-
#menubar {
 
-
display: block;
 
-
}
 
-
#CB_top {
 
-
padding-bottom: 0px;
 
-
}
 
-
#CB_top_CBNU_logo {
 
-
width: 100%;
 
-
margin: 0 auto;
 
-
color: white;
 
-
font-size: 45px;
 
-
padding-top: 15px;
 
-
text-align: center;
 
-
}
 
-
#CB_top_CBNU_logo_img {
 
-
background: url(https://static.igem.org/mediawiki/2012/2/2c/CBK_logo_003.png)
 
-
no-repeat;
 
-
width: 120px;
 
-
height: 120px;
 
-
margin: 0 auto;
 
-
float: none;
 
-
}
 
-
#CB_top_MENU {
 
-
width: 100%;
 
-
text-align: center;
 
-
padding-top: 20px;
 
-
}
 
-
#CB_top_MENU ul {
 
-
margin: 0;
 
-
padding: 0;
 
-
font-size: 16px;
 
-
padding-bottom: 10px;
 
-
}
 
-
#CB_top_MENU li {
 
-
display: inline-block;
 
-
*display: inline;
 
-
border-bottom: 5px solid #221B1B;
 
-
height: 20px;
 
-
padding: 0 15px;
 
-
margin: 0 4px;
 
-
}
 
-
#CB_top_MENU li:hover {
 
-
background: white;
 
-
border-bottom: 5px solid white;
 
-
}
 
-
#CB_top_MENU li:hover a {
 
-
color: #24BED3;
 
-
}
 
-
#CB_top_MENU a {
 
-
color: #0E0B0B;
 
-
}
 
-
}
 
-
 
-
/* Laptops, Desktops, etc ---- */
 
-
/*@media all and (min-width: 1024px) {
 
-
            body {
 
-
                font-family: 'Droid Sans', sans-serif;
 
-
                background-color: green;
 
-
            }
 
-
 
-
            #menubar {
 
-
                display: block;
 
-
            }
 
-
}*/
 
-
 
-
/* large Desktops */
 
-
@media all and (min-width: 1025px) {
 
-
#menubar {
 
-
display: block;
 
-
}
 
}
}
</style>
</style>
-
 
-
<script type="text/javascript">
 
-
$(function() {
 
-
$("*#scrolltotop").click(function() {
 
-
$("html,body").animate({
 
-
scrollTop : 0
 
-
});
 
-
});
 
-
});
 
-
</script>
 
</head>
</head>
Line 595: Line 42:
<div id="CB_top_MENU">
<div id="CB_top_MENU">
<ul>
<ul>
-
<li class="HOME"><a href="https://2012.igem.org/Team:CBNU-Korea">HOME</a></li>
+
<li class="HOME"><a
-
<li class="TEAM"><a href="https://2012.igem.org/Team:CBNU-Korea/Team">TEAM</a></li>
+
href="https://2012.igem.org/Team:CBNU-Korea">HOME</a></li>
 +
<li class="TEAM"><a
 +
href="https://2012.igem.org/Team:CBNU-Korea/Team">TEAM</a></li>
<li class="PROJECT"><a href="#">PROJECT</a></li>
<li class="PROJECT"><a href="#">PROJECT</a></li>
-
<li class="NOTEBOOK"><a href="https://2012.igem.org/Team:CBNU-Korea/Notebook">NOTEBOOK</a></li>
+
<li class="NOTEBOOK"><a
 +
href="https://2012.igem.org/Team:CBNU-Korea/Notebook">NOTEBOOK</a></li>
</ul>
</ul>
<ul>
<ul>
-
<li class="SAFETY"><a href="https://2012.igem.org/Team:CBNU-Korea/Safety">SAFETY</a></li>
+
<li class="SAFETY"><a
-
<li class="JUDGING"><a href="https://2012.igem.org/Team:CBNU-Korea/JG/judging">JUDGING</a></li>
+
href="https://2012.igem.org/Team:CBNU-Korea/Safety">SAFETY</a></li>
-
<li class="iGEM"><a href="https://2012.igem.org/" target="_blank">iGEM</a></li>
+
<li class="JUDGING"><a
 +
href="https://2012.igem.org/Team:CBNU-Korea/JG/judging">JUDGING</a></li>
 +
<li class="iGEM"><a href="https://2012.igem.org/"
 +
target="_blank">iGEM</a></li>
</ul>
</ul>
</div>
</div>
Line 618: Line 71:
</div>
</div>
<div id="CB_sub_menu">
<div id="CB_sub_menu">
-
<ul>
+
<div id="CB_sub_mobile_menu">+ MENU</div>
 +
<ul class="CB_ul">
<li class="OVERVIEW"><a
<li class="OVERVIEW"><a
href="https://2012.igem.org/Team:CBNU-Korea/Project">01 +
href="https://2012.igem.org/Team:CBNU-Korea/Project">01 +
Line 659: Line 113:
Type) that is registered in
Type) that is registered in
http://partsregistry.org/fasta/parts/All_Parts.</p>
http://partsregistry.org/fasta/parts/All_Parts.</p>
 +
<img src="https://static.igem.org/mediawiki/2012/9/95/CBK_A_001.png">
<p>- All this saved information, will be shown in the download
<p>- All this saved information, will be shown in the download
screen for the user. By choosing the BioBrick that the user wants,
screen for the user. By choosing the BioBrick that the user wants,
Line 665: Line 120:
after parsed by XML Part Information (http://partsregistry.org/
after parsed by XML Part Information (http://partsregistry.org/
xml/part.+BioBrick Name).</p>
xml/part.+BioBrick Name).</p>
 +
<img src="https://static.igem.org/mediawiki/2012/7/75/CBK_A_002.png">
 +
<img src="https://static.igem.org/mediawiki/2012/4/41/CBK_A_003.png">
 +
<p>- DB Tables</p>
 +
<img src="https://static.igem.org/mediawiki/2012/5/54/CBK_A_004.png" width="450px">
 +
<img src="https://static.igem.org/mediawiki/2012/2/2a/CBK_A_005.png" width="450px">
<div id="scrolltotop"></div>
<div id="scrolltotop"></div>
Line 717: Line 177:
http://www.ncbi.nlm.nih.gov/Sitemap/samplerecord.</p>
http://www.ncbi.nlm.nih.gov/Sitemap/samplerecord.</p>
<h2>5-3. Fasta</h2>
<h2>5-3. Fasta</h2>
-
<p>- The Fasta file was made to be saved as seen in below.</p>
+
<p>
 +
- The Fasta file was made to be saved as seen in below.<br>
 +
<br> > Part_Name Type "Description"<br> Sequence
 +
</p>
<div id="scrolltotop"></div>
<div id="scrolltotop"></div>
</div>
</div>

Latest revision as of 01:01, 27 September 2012

Brick Designer

- Method

1. BioBrick Database

- The program will be installed and run in the local computer. When the program is distributed to the user. If the whole information about BioBrick is included in the install program, this will not only increase the size of the install file, but also the user won’t need all of these informations. So we made our program allow the users to choose the BioBrick information that they want, and download it selectively.

- To bring the already registered BioBrick data, our program parse and save the simple informations(ID, Name, Description, Type) that is registered in http://partsregistry.org/fasta/parts/All_Parts.

- All this saved information, will be shown in the download screen for the user. By choosing the BioBrick that the user wants, and pressing the download button, the Bricks information (Suparts, Sequence, Status, Rating etc.) will be saved in the local database after parsed by XML Part Information (http://partsregistry.org/ xml/part.+BioBrick Name).

- DB Tables

2. The user's BioBrick

- If the user wants to use a BioBrick with their own style, not the BioBrick that is already registered in the program, they can personally add a new BioBrick and design it.

3. Management of Sequence

3-1. Suffix, Prefix, Scar

- The program automatically process the restriction enzyme between the Bricks when the user designs the BioBrick. By pressing the ‘Scar’ icon and including the BioBrick in there, the program will analyze the sequences of the Bricks and automatically choose where to make the adequate Scar form.

3-2. Cloning

- When the user selects the Plasmid Backbone, the program will check the sequence and find the restriction enzyme site. If the Plasmid Backbone does not include in the restriction site of Prefix, Suffix, then the user has to choose another plasmid backbone.

- When the user choose one restriction site from each of Prefix, Suffix and press the ‘OK’ button. it will process the designed BioBrick and the Plasmid Backbone sequence and show it on the screen.

4. Screen Shot function

- The teams participating the iGEM with experiments should register first in BioBrick. In this process, the informations about BioBricks in Wiki Pages and documents can be used through graphic work.We hope that our program will lighten the load used in those kind of progress, so the users can be more focused on the experiment. This program is made to design and save the images at the same time.

5. BioBrick Data Export

- Our program can save the BioBrick that the user designed in various forms. The user can use the data right away without any additional work.

5-1. SBOL

- SBOL(Synthetic Biology Open Language) is the exchange standard for the genetic tools, the device modules, and the explanation of the system data. We use libSBOLc(SBOL C library) to save the designed information as a SBOL form, so that itcan be easily transferred to the user.

5-2. Genbank

- This program is designed to save the information as Genbank form, and we referred the form from http://www.ncbi.nlm.nih.gov/Sitemap/samplerecord.

5-3. Fasta

- The Fasta file was made to be saved as seen in below.

> Part_Name Type "Description"
Sequence