Team:CBNU-Korea/Team

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
{{Team:CBNU-Korea/css_slide2}}
 +
<html>
<html>
<head>
<head>
Line 8: Line 10:
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,900'
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,900'
rel='stylesheet' type='text/css'>
rel='stylesheet' type='text/css'>
 +
<!--[if lt IE 9]>
<!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <script src="http://scottjehl.github.com/Respond/respond.min.js"></script>
     <script src="http://scottjehl.github.com/Respond/respond.min.js"></script>
 +
</script>
 +
   
     <![endif]-->
     <![endif]-->
Line 198: Line 203:
}
}
-
.PROJECT {
+
.HOME {
border-bottom-color: white !important;
border-bottom-color: white !important;
}
}
Line 216: Line 221:
/* ----------------CB_content---------------- */
/* ----------------CB_content---------------- */
-
#CB_content a {
 
-
color: black;
 
-
}
 
-
 
#CB_subcontent {
#CB_subcontent {
width: 90%;
width: 90%;
Line 226: Line 227:
background: transparent;
background: transparent;
overflow: auto;
overflow: auto;
 +
margin-bottom: 15px;
}
}
Line 231: Line 233:
background: white;
background: white;
color: black;
color: black;
 +
float: left;
font-size: 2.2em;
font-size: 2.2em;
font-weight: 900;
font-weight: 900;
Line 255: Line 258:
}
}
-
#CB_sub_title {
+
#CB_content_slide {
 +
background: transparent;
 +
width: 100%;
 +
max-width: 1200px;
 +
margin: 0 auto;
 +
}
 +
 
 +
#CB_sub_jm {
width: 100%;
width: 100%;
overflow: auto;
overflow: auto;
-
margin-bottom: 30px;
 
}
}
-
#CB_subcontent h2 {
+
#CB_sub_menu {
 +
width: 28%;
 +
float: left;
 +
margin-right: 2%;
 +
height: 200px;
background: white;
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;
 
}
}
Line 283: Line 281:
width: 70%;
width: 70%;
float: right;
float: right;
 +
height: 400px;
 +
background: white;
}
}
-
#CB_sub_menu {
+
#CB_sub_cont {
-
width: 28%;
+
width: 100%;
-
float: left;
+
max-width: 1080px;
-
border-top: 1px dotted #41C7BC;
+
background: white;
-
padding-top: 10px;
+
}
}
-
#CB_sub_menu ul {
+
/* ---------------CB_map------------------- */
-
list-style-type: none;
+
#CB_map {
-
margin: 0;
+
height: 300px;
-
padding: 10px 0 0 0;
+
background: url("https://static.igem.org/mediawiki/2012/a/ae/CBK_map_002.png")
-
margin-right: 20%;
+
no-repeat #32B6DB;
-
font-size: 16px;
+
cursor: pointer;
}
}
-
#CB_sub_menu li {
+
#CB_map h1 {
-
border-bottom: 1px dotted #41C7BC;
+
margin: 0;
 +
padding: 4% 10% 0% 65%;
 +
border: 0;
 +
font-size: 1.7em;
 +
font-weight: 900;
 +
color: white;
}
}
-
#li_sub {
+
#CB_map h2 {
-
+
margin: 0;
 +
padding: 1% 10% 0% 65%;
 +
border: 0;
 +
font-size: 1em;
 +
color: white;
}
}
-
.MGD a {
+
/* ----------------CB_footer---------------- */
-
font-weight: 900;
+
#CB_responsive {
-
color: #A56BAA !important;
+
background: url(https://static.igem.org/mediawiki/2012/e/e1/CBK_back_013.png);
-
padding-left: 10px;
+
border-top: 1px solid #B483F1;
}
}
-
#CB_sub_main {
+
#CB_res_cont {
-
border-top: 1px dotted #41C7BC;
+
background: url(https://static.igem.org/mediawiki/2012/0/0c/CBK_responsive_001.png) no-repeat center;
-
padding-top: 10px;
+
height: 250px;
 +
width: 100%;
 +
position: absolute;
}
}
-
#CB_sub_main h1 {
+
#CB_responsive h1 {
-
font-size: 2.4em;
+
padding: 4% 0 1% 50%;
-
font-weight: 900;
+
color: #3EA77D;
margin: 0;
margin: 0;
-
line-height: 1.2em;
+
border: 0;
 +
font-size: 2.5em;
}
}
-
#CB_sub_main h2 {
+
#CB_responsive h2 {
-
font-size: 1.5em;
+
padding: 0% 15% 2% 50%;
-
font-weight: 900;
+
color: #633F3F;
margin: 0;
margin: 0;
-
line-height: 1.2em;
 
border: 0;
border: 0;
-
padding: 10px 0 5px 2%;
+
font-size: 1.3em;
-
}
+
-
 
+
-
#CB_sub_main h3 {
+
-
+
-
}
+
-
 
+
-
#CB_sub_main p {
+
-
+
-
}
+
-
 
+
-
#CB_sub_img {
+
-
height: 140px;
+
-
background: aqua;
+
-
}
+
-
 
+
-
#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 {
#CB_footer {
-
height: 200px;
+
height: 250px;
-
background: #EBEBEB;
+
background: url(https://static.igem.org/mediawiki/2012/a/a9/CBK_back_012.png);
-
border-top: 1px solid silver;
+
border-top: 1px solid white;
}
}
Line 420: Line 399:
/* iPhone, etc portrait ---- */
/* iPhone, etc portrait ---- */
-
@media all and (min-width : 320px) and (max-width : 768px) {
+
@media all and (min-width : 320px) and (max-width : 767px) {
#menubar {
#menubar {
display: none;
display: none;
Line 452: Line 431:
width: 100%;
width: 100%;
text-align: center;
text-align: center;
-
padding-top: 40px;
+
padding-top: 20px;
}
}
#CB_top_MENU ul {
#CB_top_MENU ul {
Line 477: Line 456:
#CB_top_MENU a {
#CB_top_MENU a {
color: #0E0B0B;
color: #0E0B0B;
 +
}
 +
#CB_map {
 +
background: url("https://static.igem.org/mediawiki/2012/a/ae/CBK_map_002.png")
 +
no-repeat #32B6DB -160px 0px;
 +
}
 +
#CB_map h1 {
 +
color: black;
 +
padding: 4% 10% 0 10%;
 +
}
 +
#CB_map h2 {
 +
color: black;
 +
padding: 1% 10% 0 10%;
}
}
}
}
/* iPad, tablets etc portrait ---- */
/* iPad, tablets etc portrait ---- */
-
@media all and (min-width : 769px) and (max-width : 1024px ) {
+
@media all and (min-width : 768px) and (max-width : 1023px ) {
#menubar {
#menubar {
display: block;
display: block;
Line 532: Line 523:
#CB_top_MENU a {
#CB_top_MENU a {
color: #0E0B0B;
color: #0E0B0B;
 +
}
 +
#CB_map h1 {
 +
color: black;
 +
}
 +
#CB_map h2 {
 +
color: black;
}
}
}
}
Line 548: Line 545:
/* large Desktops */
/* large Desktops */
-
@media all and (min-width: 1025px) {
+
@media all and (min-width: 1024px) {
#menubar {
#menubar {
display: block;
display: block;
Line 554: Line 551:
}
}
</style>
</style>
 +
<script type="text/javascript">
<script type="text/javascript">
-
$(function() {
+
function divLink(url) {
-
$("*#scrolltotop").click(function() {
+
window.open(url);
-
$("html,body").animate({
+
}
-
scrollTop : 0
+
-
});
+
-
});
+
-
});
+
</script>
</script>
Line 569: Line 563:
<body>
<body>
 +
 +
 +
<div id="CB_top">
<div id="CB_top">
Line 583: Line 580:
<div id="CB_top_MENU">
<div id="CB_top_MENU">
<ul>
<ul>
-
<li class="HOME"><a
+
<li class="HOME"><a href="#">HOME</a></li>
-
href="https://2012.igem.org/Team:CBNU-Korea">HOME</a></li>
+
<li class="TEAM"><a href="#">TEAM</a></li>
<li class="TEAM"><a href="#">TEAM</a></li>
<li class="PROJECT"><a href="#">PROJECT</a></li>
<li class="PROJECT"><a href="#">PROJECT</a></li>
Line 600: Line 596:
<div id="CB_content">
<div id="CB_content">
 +
<div id="CB_content_slide">
 +
<ul class="rslides">
 +
<li><img
 +
src="https://static.igem.org/mediawiki/2012/3/39/CBK_slide_001.png" /></li>
 +
<li><img
 +
src="https://static.igem.org/mediawiki/2012/6/69/CBK_slide_002.png" /></li>
 +
<li><img
 +
src="https://static.igem.org/mediawiki/2012/a/a0/CBK_slide_003.png" /></li>
 +
<li><img
 +
src="https://static.igem.org/mediawiki/2012/f/f6/CBK_slide_004.png" /></li>
 +
</ul>
 +
 +
</div>
<div id="CB_subcontent">
<div id="CB_subcontent">
-
<div id="CB_sub_title">
+
<div id="CB_sub_jm">
-
<h2>Minimal Genome Designer</h2>
+
<h2>+ What is BUGS</h2>
-
<h3>- Overview</h3>
+
</div>
</div>
-
<div id="CB_sub_menu">
+
<div id="CB_sub_cont">
-
<ul>
+
<h3>Brick & Unique minimal Genome Software</h3>
-
<li class="OVERVIEW"><a
+
<p>
-
href="https://2012.igem.org/Team:CBNU-Korea/Project">01 +
+
We have developed two distinct software tools. <br> <br>
-
Overview</a></li>
+
The first tool, MG-designer, is functionally divided into designer
-
<li class="BD"><a
+
and viewer. The viewer shows the information of genomes in both
-
href="https://2012.igem.org/Team:CBNU-Korea/Project/BD/Overview">02
+
linear and circular form. So it is easier for users to understand
-
+ Brick Designer</a></li>
+
the characteristic of genomes. By the designer, user can design
-
<li class="MGD"><a href="#">03 + Minimal Genome Designer</a></li>
+
minimal genomes by essential genes which are analogized by our team
-
<li id="li_sub" class="MGD_Overview">- Overview</li>
+
in this year. The minimal genome can be designed depending on
-
<li id="li_sub" class="MGD_Method">- Method</li>
+
characteristics of species by inserting the function of genes into
-
<li id="li_sub" class="MGD_Analysis">- Analysis</li>
+
particular locations. <br> <br> With the second tool,
-
<li class="DOWNLOAD"><a
+
brick-designer, user can design new bio-bricks. It is also able to
-
href="https://2012.igem.org/Team:CBNU-Korea/Project/Download">04
+
synthesize bricks by using the bricks registered in partsregistry.
-
+ Download</a></li>
+
User can also utilize bricks he just designed. We tried to enhance
-
<li class="TUTORIAL"><a
+
software potability by enabling the bricks to save as Genbank and
-
href="https://2012.igem.org/Team:CBNU-Korea/Project/Tutorial">05
+
SBOL types. Brick also can be saved as picture file so that it is
-
+ Tutorial</a></li>
+
helpful in the Wiki implementation.
-
</ul>
+
</p>
-
 
+
</div>
</div>
-
<div id="CB_sub_main">
+
</div>
-
<div id="CB_sub_img"></div>
+
</div>
-
<div id="CB_sub_cont">
+
-
<h1>1. Overview</h1>
+
-
<p>- The importance of the transfer, saving and management of
+
-
bio-information is now closely related to the computers. Nowadays
+
-
bio-informatics are used in many fields from simple biological
+
-
models to complicated algorithm forecast and more. And in
+
-
synthetic biology, since designing a biological circuit by using
+
-
the computer became available, it has opened a new era. In the
+
-
past, synthetic biology used to find subjects like a genetic part
+
-
that is about a specific purpose and the connection between the
+
-
fastest designing process only by experiments. But now in the
+
-
future of synthetic biology, experiment and the computational
+
-
designing program must be in a mutual relationship. The purpose of
+
-
our project is to increase the efficiency of the experiment by
+
-
using the designing process of BioBrick prior to the experiment,
+
-
and improve the efficiency of the connection between the next
+
-
experiment conducted by the program user.</p>
+
-
<div id="scrolltotop"></div>
+
-
<h1>2. Feature</h1>
+
<div id="CB_map" onclick="divLink('http://goo.gl/maps/SH8VO');">
-
<h2>2-1. BioBrick Data Download</h2>
+
<h1>CBNU</h1>
-
<p>- The registered BioBrick information needed for designing
+
<h2>
-
in this program, can be easily downloaded without being typed in.</p>
+
Chungbuk National University<br> 52 Naesudong-ro, Heungdeok-gu,<br>
-
<h2>2-2. Design</h2>
+
Cheongju Chungbuk, South-Korea<br> <br> +82 -43-261-2947<br>
-
<p>- The user can arrange the BioBrick in any sequence they
+
<br> iGEM.CBNU+2012@gmail.com
-
want. And if they want, the user can put a proper Prefix, Suffix
+
</h2>
-
restriction enzyme site between the Bricks by the software.</p>
+
</div>
-
<p>- By selecting the Plasmid Backbone and the restriction
+
-
enzyme in sequence, the cloning will be done automatically.</p>
+
-
<h2>2-3. Screen Shot</h2>
+
-
<p>- The BioBrick that the user designed from the program is
+
-
saved in image files to be readily used in Wiki or documents.</p>
+
-
<h2>2-4. Various Storage Formats</h2>
+
-
<p>- The project in designing in progress can be saved or
+
-
imported. Also, by saving the informations as a SBOL, GenBank,
+
-
Fasta form, the user can use the information that they design in
+
-
other programs as well.</p>
+
-
<div id="scrolltotop"></div>
+
-
<h1>3. The process of the program designing</h1>
+
<div id="CB_responsive">
-
<h2>3-1. Problem Recognition</h2>
+
<div id="CB_res_cont"></div>
-
<p>- In many common laboratories today, there is a limit that
+
<h1>Responsive Web</h1>
-
the user themselves has to put in the BioBrick Data, and draw it
+
<h2>
-
as an image after they finish the design. So we decided to develop
+
Responsive design is a method to building a single website that works
-
the designing a program that, based on BioBrick DataBase, directly
+
just as well on your mobile phones it does when you're sat at a desk.<br>
-
provide designing process with convenient additional functions as
+
Just adjust your browser width now to see what we mean.<br> <br>
-
well.</p>
+
Mobile phones, Tablet, Desktop(iE 9+, Chrome, Safari, FF etc)
-
<h2>3-2. Requirement Checking</h2>
+
</h2>
-
<p>- We checked on other programs that many people are using
+
-
nowadays, and analyzed the steps that are needed in designing.</p>
+
-
<p>- For the connection within other programs that can be used
+
-
after the experiment, we checked on the needs of the saving
+
-
methods on GenBank, SBOL, Fasta.</p>
+
-
<h2>3-2. Design</h2>
+
-
<p>- Visual Studio 2010, 2012 (C#)</p>
+
-
<p>- Windows 7</p>
+
-
<p>- OleDB (MS OFFICE)</p>
+
-
<p>- * When running the program, Microsoft Runtime is required.</p>
+
-
<h2>3-2. Discussion and Feedback</h2>
+
-
<p>- Our team members repeated testing the program, finding the
+
-
errors and fixing the problems.</p>
+
-
<div id="scrolltotop"></div>
+
-
 
+
-
<h1>4. Future Work</h1>
+
-
<p>Our program is now version 1.0.0, and will be updated and
+
-
offer better information and performance about the designing
+
-
process in next versions. First, simplification of the
+
-
registration process of the iGEM Part will be offered. The
+
-
registration of BioBrick is now available only in online. But by
+
-
co-working with iGEM, we will develop a better functioning
+
-
program, and make it possible to design and register the Brick at
+
-
the same time. Secondly, we are planning to add a communication
+
-
function between the users. This function will help the users to
+
-
share opinions, and discuss designing information about a specific
+
-
Brick. This discussion will help the users improve their
+
-
experiment or project. Third, the expression rate will be produced
+
-
in a numerical value. The expression rate value is a score that
+
-
will show the users how the expression of the BioBrick designed by
+
-
cloning is working in the experiment. To make it as a score,
+
-
theoretical background and algorithm based on a lot of data are
+
-
required. The last is the import of the files with various saving
+
-
forms. Nowadays we can only save the designed BioBrick data after
+
-
exporting it. But the next version of the program will be improved
+
-
to read the data modified and saved in other process, and reading,
+
-
processing and saving it will be available as well.</p>
+
-
<div id="scrolltotop"></div>
+
-
</div>
+
-
</div>
+
-
</div>
+
</div>
</div>
Line 724: Line 661:
<div id="CB_footer_text"></div>
<div id="CB_footer_text"></div>
</div>
</div>
 +
 +
 +
 +
</body>
</body>
</html>
</html>

Revision as of 06:48, 26 September 2012

+ What is BUGS

Brick & Unique minimal Genome Software

We have developed two distinct software tools.

The first tool, MG-designer, is functionally divided into designer and viewer. The viewer shows the information of genomes in both linear and circular form. So it is easier for users to understand the characteristic of genomes. By the designer, user can design minimal genomes by essential genes which are analogized by our team in this year. The minimal genome can be designed depending on characteristics of species by inserting the function of genes into particular locations.

With the second tool, brick-designer, user can design new bio-bricks. It is also able to synthesize bricks by using the bricks registered in partsregistry. User can also utilize bricks he just designed. We tried to enhance software potability by enabling the bricks to save as Genbank and SBOL types. Brick also can be saved as picture file so that it is helpful in the Wiki implementation.

CBNU

Chungbuk National University
52 Naesudong-ro, Heungdeok-gu,
Cheongju Chungbuk, South-Korea

+82 -43-261-2947

iGEM.CBNU+2012@gmail.com

Responsive Web

Responsive design is a method to building a single website that works just as well on your mobile phones it does when you're sat at a desk.
Just adjust your browser width now to see what we mean.

Mobile phones, Tablet, Desktop(iE 9+, Chrome, Safari, FF etc)

Retrieved from "http://2012.igem.org/Team:CBNU-Korea/Team"