Team:Aberdeen Scotland/DNA

From 2014.igem.org

(Difference between revisions)
 
(17 intermediate revisions not shown)
Line 1: Line 1:
-
/* REMOVE WIKI STYLING */
+
<html>
 +
<head>
-
body, html, #globalWrapper, #content {
+
<!-- Charset -->
-
background: transparent;
+
<meta charset="UTF-8">
-
margin: 0;
+
-
padding: 0;
+
-
border: 0 none transparent;
+
-
font-size: 1em;
+
-
width: auto;
+
-
border-top: 1px solid transparent;
+
-
margin-top: -1px;
+
-
}
+
-
#top-section {
+
<title>Team:Aberdeen Scotland/DNA - 2014.ogem.org</title>
-
border: 0 none transparent;
+
-
margin: auto;
+
-
padding: 0;
+
-
width: 975px;
+
-
height: 1.5em;
+
-
margin-bottom: -1.5em;
+
-
text-decoration: none;
+
-
}
+
-
li.selected a {
+
<!-- JavaScript -->
-
border: 0 none transparent;
+
<script src="https://2014.igem.org/Template:Team:Aberdeen_Scotland/JS?action=raw&ctype=text/js"></script>
-
color: transparent;
+
-
margin: auto;
+
-
padding: 0;
+
-
width: 975px;
+
-
height: 1.5em;
+
-
margin-bottom: -1.5em;
+
-
text-decoration: none;
+
-
}
+
-
#menubar.left-menu li {
+
<!-- Include CSS -->
-
color: transparent;
+
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Template:Team:Aberdeen_Scotland/CSS?action=raw&ctype=text/css">
-
}
+
-
#top-section:hover #menubar * {
+
<!-- Include jQuery -->
-
color: blue !important;
+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
-
text-decoration: none;
+
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
-
}
+
-
#top-section:hover #menubar.left-menu {
+
<!-- DNA Translator -->
-
background: rgba(255, 255, 255, 0.75) !important;
+
<script src="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/JS?action=raw&ctype=text/js"></script>
-
}
+
-
#search-controls{
+
-
        height: 0px;
+
-
        display: none !important;
+
-
}
+
-
#content>p:first-child {
+
<!-- DNA CSS -->
-
        margin: 0;
+
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/CSS?action=raw&ctype=text/css">
-
        height: 0;
+
-
        display: none;
+
-
}
+
-
.toc {
+
<!-- Manual scripting -->
-
        display: none;
+
<script type="text/javascript">
-
}
+
function update() {
 +
dna = translate.toDNA({ text: $("#text_in").val() });
 +
$("#dna_out").val(dna);
 +
}
-
.editsection {
+
function colors() {
-
        display: none;
+
dna = $("#dna_out").val();
-
}
+
var canvas = "";
 +
if(dna !== "") { // check for dna sequence
 +
canvas = translate.colorDNA({ text: $("#dna_out").val() });
 +
}
-
#contentSub, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none;}
+
$("#color_dna").html(canvas);
 +
}
-
/* END OF STYLING REMOVAL*/
+
$(document).ready(
 +
function() {
 +
$("#dna_out").val("");
 +
translate = new dna({});
-
#top, .firstHeading {
+
$("#to_dna").click(update); // update DNA on button click
-
display: none;
+
$("#text_in").keypress( function() { // update DNA on Enter key
-
}
+
var kcode = event.keyCode || event.which;
 +
if(kcode == 13) { //Enter keycode
 +
update();
 +
}
 +
});
-
body {
+
$("#to_color").click(colors); // create color DNA canvas
-
background: #8B2942; /*E6E6E6*/
+
}
-
color: #8B2942;
+
);
-
font-family: Arial, Helvetica, sans-serif;
+
</script>
-
}
+
-
.pg_break {
+
</head>
-
clear: both;
+
<body>
-
border: 1px dotted #8B2942;
+
<div id="wrapper">
-
}
+
<div id="header">
 +
<div class="logo">
 +
<a href="http://abdn.ac.uk" title="University of Aberdeen"></a>
 +
</div>
 +
<div id="navbar">
 +
<ul class="navbar">
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland">Home</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Team">Team</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Project">Project</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Parts">Parts</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Modeling">Modelling</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Notebook">Notebook</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Safety">Safety</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Attributions">Attributions</a></li>
 +
<li><a class="Act" href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics">Ethics & Outreach</a></li>
 +
</ul>
 +
<div id="social">
 +
<ul class="social">
 +
<li><a href="http://twitter.com/iGEM2014ABDN" title="Twitter"><img src="https://static.igem.org/mediawiki/2014/7/78/Tw_inv_22.png"></a></li>
 +
<li><a href="http://plus.google.com/106825238674841642988" rel="publisher" title="Google+"><img src="https://static.igem.org/mediawiki/2014/4/45/G%2B22.png"></a></li>
 +
<li><a href="http://www.facebook.com/iGEM2014ABDN" title="Facebook"><img src="https://static.igem.org/mediawiki/2014/3/35/Fb_icon_22.png"></a></li>
 +
</ul>
 +
</div>
 +
</div>
-
* {
+
</div> <br class="clear"> <!-- END OF HEADER -->
-
margin: 0px;
+
-
padding: 0px;
+
<div id="pcontent">
-
}
+
<br class="clear">
 +
<!-- SIDEBAR -->
 +
<div id="sidebar">
 +
<ul class="sidebar">
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics">Summary</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics/Introspection">Introspection</a></li>
 +
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics/Social">Social</a></li>
 +
<li class="curr"><a class="curr" href="#">DNA App</a></li>
 +
</ul>
 +
</div>
-
p {
+
<div id="container">
-
margin: 0px;
+
-
padding: 0px;
+
-
}
+
-
a {
+
<!-- SECTION HEAD -->
-
margin: 0px;
+
<div class="t_overview">
-
padding: 0px;
+
<h1>Write in DNA</h1>
-
text-decoration: none;
+
<p>DNA stands for deoxyribonucleic acid. It is the instruction material for all cells in your body. DNA is a long molecule with a double-helix structure that looks something like this:</p>
-
}
+
<img class="fl_left" src="http://upload.wikimedia.org/wikipedia/commons/8/81/ADN_animation.gif" alt="DNA Helix">
 +
<p>"<a href="http://commons.wikimedia.org/wiki/File:ADN_animation.gif#mediaviewer/File:ADN_animation.gif">ADN animation</a>" by <a href="//en.wikipedia.org/wiki/User:Brian0918" class="extiw" title="en:User:Brian0918">brian0918</a><a href="//en.wikipedia.org/wiki/User_talk:Brian0918" class="extiw" title="en:User talk:Brian0918">™</a> - <span class="int-own-work">Own work</span>. Licensed under Public domain via <a href="//commons.wikimedia.org/wiki/">Wikimedia Commons</a>.</p>
 +
<p>This looks very complicated. In order to simplify things, scientists talk about DNA in terms of the sequence of its bases. Bases are the basic building parts of DNA and they carry its information. A DNA molecule can then be characterized more easily in terms of its sequence of bases. This is called genetic sequence or genetic code.</p>
 +
<p>Different genes have different sequences and those sequences determine exactly what the gene does. Some genes regulate other genes, other genes produce proteins and some genes are there for backup in case of something bad happening. So to illustrate all of this, we have created a small app that lets you convert letters, sentences and text into DNA to see how it looks.</p>
 +
<p>This app will let you transcode letters, number and simple punctuation to DNA. The mapping alphabet is using the E. Coli codon bias and can translate the following characters:</p>
 +
<p class="list_chars">Letters [a to z] and [A to Z], Digits [0 to 9],<br>Spaces [ ] and the Full-Stop[.]</p>
 +
</div> <br class="clear"> <!-- END OF HEAD -->
 +
 +
<!-- INPUT -->
 +
<div class="input_text">
 +
<p>Type in the text you wish translated to DNA in the following box:</p>
 +
<textarea id="text_in" rows="2" cols="70" placeholder="Type your text here"></textarea>
 +
<input id="to_dna" type="button" name="to_dna" value="Translate">
 +
<br class="clear">
 +
<p class="color_black"><sub>*You can try entering your name for instance</sub></p>
 +
</div>
-
ul {
+
<!-- OUTPUT -->
-
margin: 0px;
+
<div class="output_dna">
-
padding: 0px;
+
<p>The translation of your text will appear here:</p>
-
list-style: none;
+
<textarea id="dna_out" rows="5" cols="70" placeholder="DNA will appear here" readonly></textarea>
-
}
+
<input id="to_color" type="button" name="to_color" value="Color Code DNA">
 +
<div id="color_dna"></div>
 +
</div>
-
#wrapper{
 
-
background: #8B2942;
 
-
width: 975px;
 
-
margin: auto;
 
-
text-align: left;
 
-
}
 
-
#wrapper h1, h2, h3, h4, h5, h6 {
+
</div> <!-- END OF CONTAINER -->
-
color: #8B2942;
+
-
font-family: Arial, Helvetica, sans-serif;
+
-
border: none;
+
-
}
+
-
#header {
+
</div> <br class="clear"> <!-- END OF PAGE CONTENT -->
-
width: auto;
+
-
margin: auto;
+
-
}
+
-
.logo a {
+
<div id="footer">
-
background-image: url(https://static.igem.org/mediawiki/2014/5/51/Head.png);
+
-
background-repeat: no-repeat;
+
<ul class="sponsors">
-
display: block;
+
<li><a href="http://www.abdn.ac.uk/" title="University of Aberdeen"><img src="https://static.igem.org/mediawiki/2014/c/c6/Uni_of_ab.png"></a></li>
-
width: 975px;
+
<li><a href="http://www.bbsrc.ac.uk/" title="BBSRC"><img src="https://static.igem.org/mediawiki/2014/a/a9/Bbsrc.png"></a></li>
-
height: 327px;
+
<li><a href="http://www.biochemistry.org" title="Biochemical Society"><img src="https://static.igem.org/mediawiki/2014/7/7c/Biochem_soc.png"></a></li>
-
z-index: -1;
+
<li><a href="http://www.sgm.ac.uk/" title="Society for General Microbiology"><img src="https://static.igem.org/mediawiki/2014/f/f5/Soc_general_microb.png"></a></li>
-
}
+
<li><a href="http://www.sulsa.ac.uk/" title="SULSA"><img src="https://static.igem.org/mediawiki/2014/2/24/Sulsa.png"></a></li>
 +
</ul>
-
#navbar {
+
</div> <!-- END OF FOOTER -->
-
margin-top: -33px;
+
</div> <!-- END OF PAGE WRAPPER-->
-
z-index: 1;
+
</body>
-
}
+
</html>
-
 
+
-
ul.navbar {
+
-
float: center;
+
-
margin: 0px;
+
-
margin-left: 10px;
+
-
padding: 0px;
+
-
text-align: center;
+
-
display: block;
+
-
}
+
-
 
+
-
ul.navbar li {
+
-
padding: 0px;
+
-
margin: 0px;
+
-
display: inline-block;
+
-
float: left;
+
-
}
+
-
 
+
-
.navbar li a {
+
-
float: left;
+
-
margin-top: 3px;
+
-
margin-bottom: 1px;
+
-
padding-left: 12px;
+
-
padding-right: 12px;
+
-
font-family: "Calibri", tahoma, arial, sans-serif;
+
-
font-size: 18px;
+
-
color: #FFF;
+
-
background: #8B2942;
+
-
line-height: 30px;
+
-
text-decoration: none;
+
-
border-right: 1px dotted #FFF;
+
-
}
+
-
 
+
-
.navbar li a.Act {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
margin-top: 0px;
+
-
border-bottom: 3px solid #FFF;
+
-
}
+
-
 
+
-
.navbar li a:hover {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
position: relative;
+
-
margin-top: 0px;
+
-
border-bottom: 3px solid #FFF;
+
-
}
+
-
 
+
-
.navbar li a.Act:hover {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
margin-top: 0px;
+
-
border-bottom: 3px solid #FFF;
+
-
}
+
-
 
+
-
#social {
+
-
float: right;
+
-
background: url(https://static.igem.org/mediawiki/2014/f/f4/Blur.png);
+
-
background-repeat: no-repeat;
+
-
width: 114px;
+
-
height: 30px;
+
-
padding-top: 4px;
+
-
display: block;
+
-
z-index: 1;
+
-
}
+
-
 
+
-
ul.social {
+
-
display: block;
+
-
}
+
-
 
+
-
.social li a {
+
-
float: right;
+
-
margin-right: 12px;
+
-
width: 22px;
+
-
height: 22px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
.social li a:hover {
+
-
position: relative;
+
-
margin-top: -2px;
+
-
margin-left: -1px;
+
-
margin-right: 13px;
+
-
}
+
-
 
+
-
.social li a:hover img {
+
-
display: block;
+
-
width: 23px;
+
-
height: 23px;
+
-
}
+
-
 
+
-
#pcontent {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
margin-top: -1px;
+
-
z-index: 1;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
#sidebar {
+
-
float: left;
+
-
margin: 0;
+
-
padding-left: 20px;
+
-
width: 130px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
#container {
+
-
clear: right;
+
-
float: right;
+
-
width: 825px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
.t_overview {
+
-
display: block;
+
-
float: left;
+
-
}
+
-
 
+
-
.t_overview h1 {
+
-
padding-top: 1px;
+
-
margin-bottom: 10px;
+
-
}
+
-
 
+
-
.t_overview p {
+
-
margin-top: 5px;
+
-
margin-bottom: 5px;
+
-
}
+
-
 
+
-
ul.back_button {
+
-
display: inline-block;
+
-
}
+
-
 
+
-
ul.back_button li {
+
-
margin: 10px;
+
-
}
+
-
 
+
-
.back_button li a {
+
-
padding-top: 6px;
+
-
padding-bottom: 6px;
+
-
padding-left: 7px;
+
-
padding-right: 7px;
+
-
text-decoration: none;
+
-
color: #FFF;
+
-
background: #8B2942;
+
-
border: 2px solid #8B2942;
+
-
}
+
-
 
+
-
.back_button li a:hover {
+
-
color: #8B2942;
+
-
background: #FFF;
+
-
}
+
-
 
+
-
.external {
+
-
display: block;
+
-
float: left;
+
-
}
+
-
 
+
-
#member {
+
-
+
-
}
+
-
 
+
-
div#member {
+
-
width: 100%;
+
-
float: left;
+
-
display: block;
+
-
/*background: rgba(139, 41, 66, 0.1);*/
+
-
-webkit-box-sizing: border-box;
+
-
  -moz-box-sizing: border-box;
+
-
        box-sizing: border-box;
+
-
border: 20px solid #FFF;
+
-
-webkit-border-radius: 30px;
+
-
        border-radius: 30px;
+
-
}
+
-
 
+
-
#member div {
+
-
display: inline-block;
+
-
}
+
-
 
+
-
#members {
+
-
 
+
-
}
+
-
 
+
-
img.prof_pic {
+
-
float: right;
+
-
height: auto;
+
-
max-width: 190px;
+
-
margin-left: 25px;
+
-
margin-right: 25px;
+
-
margin-bottom: 5px;
+
-
margin-top: 0px;
+
-
}
+
-
 
+
-
#member img {
+
-
+
-
}
+
-
 
+
-
.name {
+
-
float: left;
+
-
margin: auto;
+
-
padding: 15px;
+
-
}
+
-
 
+
-
.member_descr {
+
-
margin: auto;
+
-
padding: 15px;
+
-
display: inline-block;
+
-
text-align: justify;
+
-
}
+
-
 
+
-
.member_descr h2 {
+
-
margin-top: 0px;
+
-
font-size: 20px;
+
-
}
+
-
 
+
-
.member_descr p {
+
-
+
-
}
+
-
 
+
-
.clear {
+
-
clear: both;
+
-
}
+
-
 
+
-
#footer {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
width: 975px;
+
-
margin-top: 0px;
+
-
padding-top: 15px;
+
-
padding-bottom: 15px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
.sponsors li a img {
+
-
width: 150px;
+
-
}
+

Latest revision as of 01:49, 18 October 2014

Team:Aberdeen Scotland/DNA - 2014.ogem.org



Write in DNA

DNA stands for deoxyribonucleic acid. It is the instruction material for all cells in your body. DNA is a long molecule with a double-helix structure that looks something like this:

DNA Helix

"ADN animation" by brian0918™ - Own work. Licensed under Public domain via Wikimedia Commons.

This looks very complicated. In order to simplify things, scientists talk about DNA in terms of the sequence of its bases. Bases are the basic building parts of DNA and they carry its information. A DNA molecule can then be characterized more easily in terms of its sequence of bases. This is called genetic sequence or genetic code.

Different genes have different sequences and those sequences determine exactly what the gene does. Some genes regulate other genes, other genes produce proteins and some genes are there for backup in case of something bad happening. So to illustrate all of this, we have created a small app that lets you convert letters, sentences and text into DNA to see how it looks.

This app will let you transcode letters, number and simple punctuation to DNA. The mapping alphabet is using the E. Coli codon bias and can translate the following characters:

Letters [a to z] and [A to Z], Digits [0 to 9],
Spaces [ ] and the Full-Stop[.]


Type in the text you wish translated to DNA in the following box:


*You can try entering your name for instance

The translation of your text will appear here:


Retrieved from "http://2014.igem.org/Team:Aberdeen_Scotland/DNA"