|
|
| (11 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{Team:NCTU_Formosa}}
| |
| − | <html>
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| | | | |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
| |
| − |
| |
| − | <link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
| |
| − | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
| |
| − |
| |
| − |
| |
| − | <style type="text/css">
| |
| − | #sideMenu, #top_title {display:none;}
| |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
| |
| − | body {background-color:white; }
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| − | #top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
| |
| − |
| |
| − |
| |
| − | html, body, div, span, applet, object, iframe,
| |
| − | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
| |
| − | a, abbr, acronym, address, big, cite, code,
| |
| − | del, dfn, em, font, img, ins, kbd, q, s, samp,
| |
| − | small, strike, strong, sub, tt, var,
| |
| − | b, u, i, center,
| |
| − | dl, dt, dd, ol, ul, li,
| |
| − | fieldset, form, label, legend,
| |
| − | table, caption, tbody, tfoot, thead, tr, th, td {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | outline: 0;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | * {
| |
| − | font-family: 'Open Sans', sans-serif;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − | body{
| |
| − | background-color:rgb(51,51,51) !important;
| |
| − | line-height:1;
| |
| − | }
| |
| − | /*大圖*/
| |
| − | @media screen and (min-width: 768px) {
| |
| − | .img-container{
| |
| − | height:100vh ;
| |
| − | overflow:hidden ;
| |
| − | width:100%;
| |
| − | }
| |
| − | .main-img{
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | width: 100%;
| |
| − | margin: auto;
| |
| − | z-index:999;
| |
| − | }
| |
| − | }
| |
| − | @media screen and (orientation: portrait) {
| |
| − | .img-container{
| |
| − | height:auto;
| |
| − | overflow:none;
| |
| − | width:100%;
| |
| − | }
| |
| − | .main-img{
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | width: 100%;
| |
| − | margin: auto;
| |
| − | z-index:999;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*scroll navigaiton*/
| |
| − | nav {
| |
| − | padding: 18px;
| |
| − | position: fixed;
| |
| − | height: auto;
| |
| − | left:0.5vw;
| |
| − | width: auto;
| |
| − | z-index: 9999;
| |
| − | top:25%;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | nav .wrapper {
| |
| − | padding: 0;
| |
| − | width:100%;
| |
| − | height: 785px;
| |
| − | }
| |
| − |
| |
| − | nav .nodes {
| |
| − | position: relative;
| |
| − | margin-top: 1px;
| |
| − | margin-left: 1px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .line {
| |
| − | position: absolute;
| |
| − | width:1px;
| |
| − | height:705px;
| |
| − | top: 13px;
| |
| − | }
| |
| − | .line .red {
| |
| − | width:1px; /*調line長度*/
| |
| − | height:47%; /*line寬度*/
| |
| − | position:relative;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .line .blue {
| |
| − | width: 1px; /*line寬度*/
| |
| − | height: 15%; /*調line長度*/
| |
| − | position:relative;
| |
| − | left:51px;
| |
| − |
| |
| − | }
| |
| − | .line .red-container {
| |
| − | position:relative;
| |
| − | width: 4px;
| |
| − | }
| |
| − | .line .red {
| |
| − | background-color:#00D6FF;/*cover line color*/
| |
| − | *zoom: 1;
| |
| − | background-size: 100%;
| |
| − | }
| |
| − | .line .blue {
| |
| − | background-color: white;/*line color*/
| |
| − | *zoom: 1;
| |
| − | background-size: 100%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .node {
| |
| − | margin-left: 40px;/*調node間距*/
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | margin-top: 30px;
| |
| − | position: relative;
| |
| − | }
| |
| − | .node .splash {
| |
| − | box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
| |
| − | transform: translateZ(0px) scale(1);
| |
| − | position: absolute;
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | border-radius: 100%;
| |
| − | pointer-events: none;
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .node.active .active-circle {
| |
| − | transform: scale(1);
| |
| − | opacity: 1;
| |
| − | background:white;/*active circle color*/
| |
| − | left:1.6px;
| |
| − | }
| |
| − | .node.active .splash {
| |
| − | transition: transform 1200ms, opacity 1500ms;
| |
| − | transform: translateZ(0px) scale(2.5);
| |
| − | opacity: 0 !important;
| |
| − |
| |
| − | }
| |
| − | .node.active .inactive-circle {
| |
| − | transition: opacity 200ms;
| |
| − | opacity: 0;
| |
| − | }
| |
| − | .node .active-circle {
| |
| − | transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
| − | transform: scale(0.7);
| |
| − | position: absolute;
| |
| − | opacity: 0;
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | border-radius: 100%;
| |
| − | background-color: #4b1202;
| |
| − | *zoom: 1;
| |
| − | background-size: 100%;
| |
| − |
| |
| − | }
| |
| − | .node .active-circle .cover {
| |
| − | transform: translateZ(0px);
| |
| − | width: 16px;
| |
| − | height: 16px;
| |
| − | background:#00D6FF;/*active circle color */
| |
| − | border-radius: 100%;
| |
| − | position: absolute;
| |
| − | top: 2px;
| |
| − | left: 2px;
| |
| − | }
| |
| − |
| |
| − | .node .inactive-circle {
| |
| − | transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
| − | width: 14px;
| |
| − | height: 14px;
| |
| − | display: block;
| |
| − | background: #000;
| |
| − | position: absolute;
| |
| − | border-radius: 100%;
| |
| − | border: 2px solid white;
| |
| − | top: 3px;
| |
| − | left: 3px;
| |
| − | }
| |
| − | .node:hover {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .node:hover .active-circle {
| |
| − | transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
| − | transform: scale(0.84);
| |
| − | }
| |
| − |
| |
| − | .node:hover .inactive-circle {
| |
| − | transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
| − | transform: scale(0.85);
| |
| − | }
| |
| − |
| |
| − | /*left-topic*/
| |
| − |
| |
| − | .topic{
| |
| − | position:relative;
| |
| − | margin-top:0vh !important;
| |
| − | width:200px;
| |
| − | height:auto;
| |
| − | left:210px;
| |
| − | float:right;
| |
| − | color:#F3F7F7;
| |
| − | }
| |
| − | .text_color{
| |
| − | color:#F3F7F7;
| |
| − | font-size:12pt !important;
| |
| − | }
| |
| − | /*content*/
| |
| − | .content_container{
| |
| − | position:relative;
| |
| − | left:6.5vw;
| |
| − | right:6.5vw;
| |
| − | margin:0 auto;
| |
| − | width:60vw;
| |
| − | height:auto;
| |
| − | }
| |
| − | .title{
| |
| − | font-size:25pt !important;
| |
| − | text-shadow:1px 1px 10px rgb(0, 206, 255);
| |
| − | border-left:3px solid rgb(0, 206, 255);
| |
| − | padding-left:10px !important;
| |
| − | color:rgb(0, 206, 255);
| |
| − | margin-top:20px;
| |
| − | margin-bottom:10px;
| |
| − | }
| |
| − | .content{
| |
| − | font-size:15pt !important;
| |
| − | text-align:justify;
| |
| − | text-indent:2em;
| |
| − | color:#F3F7F7;
| |
| − | padding-left:40px;
| |
| − | padding-top:15px;
| |
| − | padding-bottom:15px;
| |
| − | }
| |
| − | /*second title*/
| |
| − | .content-1{
| |
| − | font-size:19pt !important;
| |
| − | text-align:justify;
| |
| − | color:#F3F7F7;
| |
| − | font-weight: bold !important;
| |
| − | padding-top:30px;
| |
| − | padding-bottom:10px
| |
| − | }
| |
| − | .content-2{
| |
| − | font-size:17pt !important;
| |
| − | text-align:justify;
| |
| − | color:#F3F7F7;
| |
| − | font-weight: bold !important;
| |
| − | padding-top:30px;
| |
| − | padding-bottom:10px
| |
| − | }
| |
| − | .content-image{
| |
| − | text-align:center !important;
| |
| − | color:#F3F7F7 !important;
| |
| − | font-size:12pt !important;
| |
| − | padding-top:10px;
| |
| − | padding-bottom:50px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .appear{
| |
| − | display:none;
| |
| − |
| |
| − | }
| |
| − | .list{
| |
| − | font-size:15pt !important;
| |
| − | text-align:justify;
| |
| − | text-align:justify;
| |
| − | color:#F3F7F7;
| |
| − | }
| |
| − | .quote{
| |
| − | font-size:17pt !important;
| |
| − | text-align:justify;
| |
| − | color:#F3F7F7;
| |
| − | text-indent:2em !important;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*image*/
| |
| − | .web{
| |
| − | position:fixed !important;
| |
| − | left:0%;
| |
| − | bottom:0%;
| |
| − | display:block;
| |
| − | margin: auto;
| |
| − | }
| |
| − | .right{
| |
| − | position:fixed !important;
| |
| − | bottom:-15px;
| |
| − | right:0vw;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | .img-position{
| |
| − | position:absolute;
| |
| − | z-index:-1;
| |
| − | }
| |
| − | .box{
| |
| − | width:auto;
| |
| − | padding-top:10px;
| |
| − | padding-bottom:10px;
| |
| − | }
| |
| − | .picture{
| |
| − | position:relative;
| |
| − | left:7vw;
| |
| − | width:80%;
| |
| − | }
| |
| − |
| |
| − | .picture-1{
| |
| − | position:relative;
| |
| − | left:15vw;
| |
| − | width:50%;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <nav id="scroll">
| |
| − | <div class="wrapper">
| |
| − |
| |
| − | <div class="nodes">
| |
| − | <div class="line">
| |
| − | <div class="blue">
| |
| − | <div class="red-container">
| |
| − | <div class="red"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="node">
| |
| − | <div class="topic"><p class="text_color">Omega-hexatoxin-Hv1a</p></div>
| |
| − | <div class="active-circle">
| |
| − | <div class="splash"></div>
| |
| − | <div class="cover">
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="inactive-circle">
| |
| − | <div class="small-cover">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="node">
| |
| − | <div class="topic"><p class="text_color">Experience assistance</p></div>
| |
| − | <div class="active-circle">
| |
| − | <div class="splash"></div>
| |
| − | <div class="cover">
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="inactive-circle">
| |
| − | <div class="small-cover">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="node">
| |
| − | <div class="topic"><p class="text_color">Mentoring a new team</p></div>
| |
| − | <div class="active-circle">
| |
| − | <div class="splash"></div>
| |
| − | <div class="cover">
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="inactive-circle">
| |
| − | <div class="small-cover">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </nav>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--圖片-->
| |
| − | <div class="img-container">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/7/79/Parts.png" class="main-img" width="100%">
| |
| − | </div>
| |
| − | <div>
| |
| − | <img src='https://static.igem.org/mediawiki/2016/f/f8/Web.png' class="web img-position" height="200px" id="web">
| |
| − | </div>
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/6/65/Right_%281%29.png" class="right img-position" id="right" height="600px">
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--wiki content-->
| |
| − |
| |
| − |
| |
| − | <section class="content_container">
| |
| − | <div>
| |
| − | <p class="title">Omega-hexatoxin-Hv1a<p>
| |
| − | <p class="content">T7 Promoter+B0034+Hv1a+linker+6xHistag</p>
| |
| − | <p class="content-1">Introduction: </p>
| |
| − | <div>
| |
| − | <img src="a">
| |
| − | </div>
| |
| − | <p class="content">By ligating the IPTG induced promoter T7 (BBa_ I712074), strong ribosome binding site (BBa_B0034), hv1a, linker, and the 6xHistag (BBa_ K1223006), we can express Hv1a, the toxin by IPTG induction.</p>
| |
| − | <p class="content">This year we create a revolutionary system that integrates biological pesticides, an automatic detector, a sprinkler, and IoT. We made a database that contains most of the spider toxins and selected the target toxins by programming. Omega-hexatoxin-Hv1a is coded for the venom of a spider, Hadronyche versuta. It is under the control of the strong T7 promoter. A 6xHistag is added for further protein purification.</p>
| |
| − | <p class="content-1">Mechanism of Hv1a</p>
| |
| − | <p class="content">According to the reference, Omega-hexatoxin-Hv1a has a structure called ICK(inhibitor cysteine knot).[1] This kind of structure contains three disulfide bonds and beta-sheet. With this structure, Hv1a can resist the high temperature, acid base solution and the digest juice of insect gut. Hv1a can bind on insect voltage-gated Calcium channels (CaV1) in the central nervous system, making it paralyze and die eventually.</p>
| |
| − |
| |
| − | <div>
| |
| − | <img src="b">
| |
| − | <img src="c">
| |
| − | <img src="d">
| |
| − | </div>
| |
| − |
| |
| − | <p class="content-1">Features of Hv1a</p>
| |
| − | <p class="content">1. Non-toxic: Omega-hexatoxin-Hv1a is non-toxic to mammals and Hymenoptera (bees). Since the structure of the target ion channel is different, omega-hexatoxin-Hv1a does not harm mammals and bees. So it is safe to use it as a biological pesticide.</p>
| |
| − | <p class="content">2. Biodegradable: Omega-hexatoxin-Hv1a is a polypeptide so it must degrade over time. After degradation, the toxin will become nutrition in the soil.</p>
| |
| − | <p class="content">3. Species-specific: According to reference, Omega-hexatoxin-Hv1a has specificity to Lepidopteran (moths), Dipteran (flies) and Orthopteran (grasshoppers).</p>
| |
| − | <p class="content">4. Eco-friendly: Compare with chemical pesticides, Omega-hexatoxin-Hv1a will not remain in soil and water so that it will not pollute the environment and won’t harm the ecosystem. </p>
| |
| − | <p class="content">Altogether, using Hv1a is totally an environmentally friendly way for solving harmful insect problems by using this ion channel inhibitor as a biological pesticide.</p>
| |
| − |
| |
| − | <p class="content-1">Target insect:</p>
| |
| − | <li class="list">House cricket (<i>Acheta domesticus</i>) </li>
| |
| − | <li class="list"><i>Musca domestica</i></li>
| |
| − | <li class="list"><i>Amblyomma americanum</i></li>
| |
| − | <li class="list"><i>Heliothis virescens</i></li>
| |
| − |
| |
| − | <p class="content-1">Experiment</p>
| |
| − | <p class="content-2">1. Cloning </p>
| |
| − | <p class="content">After assembling the DNA sequences from the basic parts, we recombined each T7 Promoter+B0034+toxin +linker+6xHistag gene to pSB1C3 backbones and conducted a PCR experiment to check the size of each part. The DNA sequence length of these parts is around 250-500 bp. In this PCR experiment, the toxin product's size should be near at 450-700 bp. </p>
| |
| − | <div>
| |
| − | <img src="a">
| |
| − | </div>
| |
| − | <p class="content">proved that we successfully ligated the toxin sequence onto an ideal backbone.</p>
| |
| − | <p class="content-2">2. Expressing</p>
| |
| − | <p class="content"><i>E.coli</i>(DE3) express the protein and form the disulfide in the cytoplasm. We sonicated the bacteria and purified the protein by 6xHis-tag behind the toxin using Nickel resin column. </p>
| |
| − | <p class="content-2">3. Analysis</p>
| |
| − | <p class="content">We do the Bradford analysis to get the protein concentration. </p>
| |
| − | <div>
| |
| − | <img src="a">
| |
| − | </div>
| |
| − | <p class="content">Also, we do the UV test and model the degradation rate.</p>
| |
| − | <div>
| |
| − | <img src="a">
| |
| − | </div>
| |
| − | <p class="content">We did the feeding assay on the Tabacco cutworm (Spodoptera litura) to calculate the LC<sub>50/sub>.</p>
| |
| − | <p class="content">放蟲抽搐、死亡之影片</p>
| |
| − | <p class="content-2">4.Modeling</p>
| |
| − | <p class="content">According to reference, the energy of Ultraviolet will break the disulfide bonds and the toxicity is also decreased. To take the parameter into consideration for our automatic system, we modeled the degradation rate of the protein and modified the program in our device.</p>
| |
| − | <div>
| |
| − | <img src="a">放預測降解速率的圖
| |
| − | </div>
| |
| − | <p class="content-2">5. Device</p>
| |
| − | <p class="content">We designed a device that contains a detector, a sprinkler, and an integrated hardware with users by APP through IoT talk. We use an infrared detector to detect the number of the pest and predict what time to spray the farmland. Furthermore, other detectors like temperature, humidity, lamination, pressure of carbon dioxide are also installed in our device. At the same time, the APP that displays all the information about the farmland would contact the users and spray biological pesticides automatically. This device can make farmers control the farmland remotely.</p>
| |
| − | <div>
| |
| − | <img src="a">放device的真實圖
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div>
| |
| − | <p class="title">Experience assistance</p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content"></p>
| |
| − | </div>
| |
| − |
| |
| − | <div>
| |
| − | <p class="title">Mentoring a new team</p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content"></p>
| |
| − | <p class="content">t</p>
| |
| − | <p class="content"></p>
| |
| − | </div>
| |
| − | </section>
| |
| − | </div>
| |
| − |
| |
| − | <!--JS-->
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | var $document = $( document.body );
| |
| − | var $revealBar = $( '.red-container' );
| |
| − | var wrapperHeight = $document.height();
| |
| − | var stepDistance = 101;
| |
| − | var documentHeight = window.innerHeight;
| |
| − | var positions = [];
| |
| − | var heights = [];
| |
| − | var elements = $( '.title:not(".main")' );
| |
| − |
| |
| − | // Cache heights and positions
| |
| − | for( var i = 0; i < elements.length; i++ ) {
| |
| − | var $element = $(elements[i]);
| |
| − | var height = $element.offset().top + documentHeight;
| |
| − | if (height > wrapperHeight) {
| |
| − | height = wrapperHeight;
| |
| − | }
| |
| − | positions.push(height);
| |
| − | heights.push($element.height());
| |
| − | }
| |
| − |
| |
| − | var $nodes = $( '.node' );
| |
| − |
| |
| − | // Should totally be debounced /w animation frame. I know,
| |
| − | // this whole thing is slightly inefficient.
| |
| − | // And magic numbers too!
| |
| − | $( document ).scroll( function() {
| |
| − |
| |
| − | nodeTop = $document.scrollTop() + documentHeight + 1;
| |
| − | var current = 0;
| |
| − |
| |
| − | // Active/non active states
| |
| − | for( var i = 0; i < positions.length; i++ ) {
| |
| − | if(nodeTop >= positions[i]-80) {
| |
| − | current = i;
| |
| − | $nodes.eq( i ).addClass( 'active' );
| |
| − | } else {
| |
| − | $nodes.eq( i ).removeClass( 'active' );
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | if ( current < elements.length ) {
| |
| − | var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
| |
| − | var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
| |
| − | $revealBar.height( totalWidth+10 );
| |
| − | }
| |
| − |
| |
| − | })
| |
| − |
| |
| − | // Clicking the nodes... again, nothing special ;)
| |
| − | $nodes.each( function( index ) {
| |
| − | var $node = $( this );
| |
| − | $node.click( function() {
| |
| − | $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-80}, 1000 );
| |
| − | });
| |
| − | })
| |
| − | //scroll_relocate
| |
| − | function sticky_relocate() {
| |
| − | var window_top = $(window).scrollTop();
| |
| − | var div_top = $('.main-img').offset().top;;
| |
| − | if (window_top > div_top+500) {
| |
| − | $('#scroll').removeClass('appear');
| |
| − | } else {
| |
| − | $('#scroll').addClass('appear');
| |
| − | };
| |
| − | if(window_top > div_top+420) {
| |
| − | $('#web').fadeIn(200);
| |
| − | $('#right').fadeIn(200);
| |
| − | } else {
| |
| − | $('#web').fadeOut(200);
| |
| − | $('#right').fadeOut(200);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | $(function () {
| |
| − | $(window).scroll(sticky_relocate);
| |
| − | sticky_relocate();
| |
| − | });
| |
| − |
| |
| − |
| |
| − |
| |
| − | $(document).ready(function(
| |
| − |
| |
| − | ){})
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | {{Team:NCTU_Formosa/footer}}
| |
