Difference between revisions of "Team:NCTU Formosa/HP/Silver"

Line 1: Line 1:
−
{{NCTU_Formosa}}
+
{{Team:NCTU_Formosa}}
 
<html>
 
<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;
  
−
<div class="column full_size">
+
}
  
−
<p>iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
 
−
<p>Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. </p>
+
* {
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
  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: 20%;  /*調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;
 +
    font-weight:bold;
 +
}
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
.content-2{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    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
 +
    font-weight:400 !important;
 +
}
 +
 
 +
.content-image{
 +
    color:#F3F7F7 !important;
 +
    font-size:11pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
    width:50vw;
 +
    margin:auto;
 +
    padding-left:60px;
 +
}
 +
 
 +
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    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:20px;
 +
    padding-bottom:20px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:8vw;
 +
    width:80%;
 +
    padding-bottom:10px;
 +
}
 +
 
 +
.picture-1{
 +
    position:relative;
 +
    left:17vw;
 +
    width:50%;
 +
    padding-bottom:10px;
 +
}
 +
 
 +
</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">Study</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">Expert Study</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">User Study</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">Business Study</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/f/f2/NCTU_study_big.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">Human Practices for Silver Medal<p>
 +
    <p class="content-1">Judging Criteria</p>
 +
 
 +
    <p class="content">iGEM projects involve important questions beyond the lab bench, for example relating to (but not limited to) ethics, sustainability, social justice, safety, security, and intellectual property rights. Demonstrate how your team has identified, investigated, and addressed one or more of these issues in the context of your project. Your activity could center around education, public engagement, public policy issues, public perception, or other activities.</p>
 +
 
 +
 
 +
    <p class="content-1">Our Human Practices</p>
 +
 
 +
    <p class="content">The directions of our human practices are oriented to the issues including food safety, agricultural sustainability, and the growing age of agricultural working labor. The three issues are becoming more and more prominent in the agriculture industry in Taiwan. Here are the human practices designed for the related issues. The context elaborating on the details of each activity, please see the link.</p>
 +
 
 +
 
 +
<!---->
 +
    <p class="content">According to our product demonstration, apart from introducing insecticidal peptide—PANTIDE, we also asked them some questions about the device including the detector and the automatic sprinkler to get farmers’ recognitions and recommendations. </p>
 +
    <p class="content">Most farmers appreciated our project because, in the recent organic agricultural system, the pests of cruciferous vegetables still rage on the farm. The major pests are Lepidopterans that damage the produce significantly. They had positive feedbacks for Pantide and were willing to take a try if it is effective. For farmers, PANTIDE coupled with the automatic detector and sprinkler device can not only solve the problem of pests but also achieve the functions of monitoring the farm in real-time, thus realizing the idea of labor-free agriculture. Surprisingly, some of them are willing to use the whole system. Additionally, the farmers are glad to let us go to their farm to catch pests for intra-laboratory experiment and provide us with their farm to let us have a real test for the field test. They expect us to finish our project quickly because they hope that they could use our product to solve the problem of pests in cruciferous vegetables—Lepidopterans as soon as possible. </p>
 +
   
 +
    <div class="box">
 +
    <img src="https://static.igem.org/mediawiki/2016/thumb/d/d0/Study4.jpg/800px-Study4.jpg" class="picture">
 +
    <p class="content-image" style="text-align:justify !important;">Figure 4. Visiting potential users, a group photo with the manager of Foshan organic tea garden, and she is the third person on the left hand.</p>
 +
    </div>
 +
   
 +
    <div class="box">
 +
    <img src="https://static.igem.org/mediawiki/2016/thumb/a/aa/Study5.jpg/800px-Study5.jpg" class="picture">
 +
    <p class="content-image" style="text-align:justify !important;">Figure 5. Visiting potential users, a group photo with the elder of 石磊 farm, and he is the third person on the left hand.</p>
 +
    </div>
 +
   
 
</div>
 
</div>
 +
 
 +
  <div>
 +
    <p class="title">Business Study—Visit the proprietors</p>
 +
    <p class="content">Pesticide residue has covertly jeopardized our health as vegetables, fruits, crops, and other produces sneak into supermarkets, food stands, teashops, and even the domestic dining tables. In particular, the culture of hand-shake beverages is common in Taiwan, and citizens in Taiwan drinks 44 cups of beverage per year on average. We want to investigate the tea leaves sources in teashops further and ask the proprietors of teashops about their views on the related issues. Therefore, we went to the famous organic tea store—Yinchuan and consulted with the owner about the general choice of tea leaves and the tea quality in tea shops. </p>
 +
    <p class="content">Yinchuan is an up-scale teashop targeted for affluent customers. He said though the cost of organic tea is high, it still has its market value. He also reminded us that if the upstream farm using pesticides, the downstream farm will be polluted by the pesticides residues, too. This better substantiates the importance of non-toxic pesticide. We think our project will solve this problem due to PANTIDE is biodegradable. He believed that the business trend of local, organic and safe agriculture would become the major in the future as customers are gaining the consciousness of food safety. </p>
 +
    <div>
 +
    <img src="https://static.igem.org/mediawiki/2016/6/6e/Study6.jpg" class="picture">
 +
    <p class="content-image"style="text-align:justify !important;">Figure 6. Visiting the boss of the Yinchuan organic tea store. The picture shows our team members focused on the sharing of boss. </p>
 +
    </div>
 +
 
 +
  </div>
 +
</section>
 +
 +
 +
 +
<!--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' );
 +
 +
// 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]-70) {
 +
      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)-70}, 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>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Revision as of 05:45, 16 October 2016

Human Practices for Silver Medal

Judging Criteria

iGEM projects involve important questions beyond the lab bench, for example relating to (but not limited to) ethics, sustainability, social justice, safety, security, and intellectual property rights. Demonstrate how your team has identified, investigated, and addressed one or more of these issues in the context of your project. Your activity could center around education, public engagement, public policy issues, public perception, or other activities.

Our Human Practices

The directions of our human practices are oriented to the issues including food safety, agricultural sustainability, and the growing age of agricultural working labor. The three issues are becoming more and more prominent in the agriculture industry in Taiwan. Here are the human practices designed for the related issues. The context elaborating on the details of each activity, please see the link.

According to our product demonstration, apart from introducing insecticidal peptide—PANTIDE, we also asked them some questions about the device including the detector and the automatic sprinkler to get farmers’ recognitions and recommendations.

Most farmers appreciated our project because, in the recent organic agricultural system, the pests of cruciferous vegetables still rage on the farm. The major pests are Lepidopterans that damage the produce significantly. They had positive feedbacks for Pantide and were willing to take a try if it is effective. For farmers, PANTIDE coupled with the automatic detector and sprinkler device can not only solve the problem of pests but also achieve the functions of monitoring the farm in real-time, thus realizing the idea of labor-free agriculture. Surprisingly, some of them are willing to use the whole system. Additionally, the farmers are glad to let us go to their farm to catch pests for intra-laboratory experiment and provide us with their farm to let us have a real test for the field test. They expect us to finish our project quickly because they hope that they could use our product to solve the problem of pests in cruciferous vegetables—Lepidopterans as soon as possible.

Figure 4. Visiting potential users, a group photo with the manager of Foshan organic tea garden, and she is the third person on the left hand.

Figure 5. Visiting potential users, a group photo with the elder of 石磊 farm, and he is the third person on the left hand.

Business Study—Visit the proprietors

Pesticide residue has covertly jeopardized our health as vegetables, fruits, crops, and other produces sneak into supermarkets, food stands, teashops, and even the domestic dining tables. In particular, the culture of hand-shake beverages is common in Taiwan, and citizens in Taiwan drinks 44 cups of beverage per year on average. We want to investigate the tea leaves sources in teashops further and ask the proprietors of teashops about their views on the related issues. Therefore, we went to the famous organic tea store—Yinchuan and consulted with the owner about the general choice of tea leaves and the tea quality in tea shops.

Yinchuan is an up-scale teashop targeted for affluent customers. He said though the cost of organic tea is high, it still has its market value. He also reminded us that if the upstream farm using pesticides, the downstream farm will be polluted by the pesticides residues, too. This better substantiates the importance of non-toxic pesticide. We think our project will solve this problem due to PANTIDE is biodegradable. He believed that the business trend of local, organic and safe agriculture would become the major in the future as customers are gaining the consciousness of food safety.

Figure 6. Visiting the boss of the Yinchuan organic tea store. The picture shows our team members focused on the sharing of boss.