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

(Prototype team page)
 
 
(29 intermediate revisions by 4 users not shown)
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,400" rel="stylesheet">
  
  
−
<div class="column full_size judges-will-not-evaluate">
+
<style type="text/css">
−
<h3>★  ALERT! </h3>
+
#sideMenu, #top_title {display:none;}
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Medals">human practices silver medal criterion</a>. </p>
+
#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;}
  
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
html, body, div, span, applet, object, iframe,
−
</div>
+
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">
+
* {
 +
  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;
 +
    }
 +
}
  
−
<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>
 
−
</div>
 
  
 +
/*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:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:5px;
 +
    font-weight:400 !important;
 +
}
 +
/*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/6/64/NCTU_Formosa_SP.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="content" style="padding-left:0;">To qualify the criteria for the silver medal in human practices, we have categorized our human practices in an organized way.</p>
 +
    <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-2">1. Education—Public Online Survey</p>
 +
    <p class="content" style="padding-left:70px !important;padding-top:5px !important"">In order to know the general public consciousness for pest control and the related chemical toxin issues such as food safety and environmental pollutions, we did an online survey to grasp the directions of our project.<br>(see more about the <a href="https://2016.igem.org/Team:NCTU_Formosa/Engagement#Online_Survey"  style="color:#44E287;" >Public Online Survey</a>)</p>
 +
   
 +
    <p class="content-2">2. Study—Business Study</p>
 +
    <p class="content" style="padding-left:70px !important;padding-top:5px !important"">The downstream food industry influences on the upstream agricultural industry significantly. So it is essential for us to investigate the opinions from the proprietors. We went to investigate a famous up-scale tea shop—YinChuan. Through the investigation, we got a holistic panorama of the modern food industry, and the customers.<br>(see more about the <a href="https://2016.igem.org/Team:NCTU_Formosa/Integrated_Practices#Business_Study"  style="color:#44E287;" >Business Study</a>)</p>
 +
 
 +
    <p class="content-2">3. Further Considerations</p>
 +
    <p class="content" style="padding-left:70px !important;padding-top:5px !important"">In the further consideration, we have compared the existing methods for pest control and found out the pros and cons of them. Through the comparison, we may know the advantages and the potential disadvantages of our bio-repellent.</p>
 +
    <p class="content" style="padding-left:70px !important;padding-top:5px !important"">Apart from the human practice events that base on the contents of our project, we have also made some other activities that promote the concept of synthetic biology and have interactions with other iGEM teams. The context elaborating on the details of each activity, please see the link.<br>(see more about the <a href="https://2016.igem.org/Team:NCTU_Formosa/Further_Considerations"  style="color:#44E287;" >Further Considerations</a>)</p>
 +
 +
 +
    <p class="content-2">4. Education—Bio Camp</p>
 +
    <p class="content" style="padding-left:70px !important;padding-top:5px !important">In 2016 National Chiao-Tung University Bio Camp, we gave out discourses about iGEM competition and the concept and real applications of synthetic biology to the students from senior high schools islandwide.<br>(see more about the <a href="https://2016.igem.org/Team:NCTU_Formosa/Engagement#Bio_Camp"  style="color:#44E287;" >Bio Camp</a>)</p>
 +
 +
 +
    <p class="content-2">5. Collaborations—Aachen & Mingdao iGEM Teams</p>
 +
    <p class="content" style="padding-left:70px !important;">In collaboration with Aachen, we have planned a survey about general knowledge of synthetic biology and released it to other iGEM teams. It is an international survey that has been done in Asia, Europe, and America. In collaboration with Mingdao, we have characterized the biobricks bilaterally and expressed the protein with SDS-PAGE.<br>(see more about the <a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations#Aachen"  style="color:#44E287;" >Aachen</a> & <a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations#Mingdao"style="color:#44E287;">Mingdao</a> iGEM Teams</a>)</p>
 +
 +
 +
    <p class="content-2">6. Meetups</p>
 +
    <p class="content" style="padding-left:70px !important;">This year, we had attended four conferences held in Taiwan and China, and welcomed two iGEM teams in our school. Also, we had online meetups with two teams. iGEM competition is a connection that provides people around the world with valuable opportunity to make friends with people that share the same interest.<br>(see more about the <a href="https://2016.igem.org/Team:NCTU_Formosa/Meetups"  style="color:#44E287;" >Meetups</a>)</p>
 +
 +
  </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}}

Latest revision as of 00:15, 20 October 2016

To qualify the criteria for the silver medal in human practices, we have categorized our human practices in an organized way.

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.

1. Education—Public Online Survey

In order to know the general public consciousness for pest control and the related chemical toxin issues such as food safety and environmental pollutions, we did an online survey to grasp the directions of our project.
(see more about the Public Online Survey)

2. Study—Business Study

The downstream food industry influences on the upstream agricultural industry significantly. So it is essential for us to investigate the opinions from the proprietors. We went to investigate a famous up-scale tea shop—YinChuan. Through the investigation, we got a holistic panorama of the modern food industry, and the customers.
(see more about the Business Study)

3. Further Considerations

In the further consideration, we have compared the existing methods for pest control and found out the pros and cons of them. Through the comparison, we may know the advantages and the potential disadvantages of our bio-repellent.

Apart from the human practice events that base on the contents of our project, we have also made some other activities that promote the concept of synthetic biology and have interactions with other iGEM teams. The context elaborating on the details of each activity, please see the link.
(see more about the Further Considerations)

4. Education—Bio Camp

In 2016 National Chiao-Tung University Bio Camp, we gave out discourses about iGEM competition and the concept and real applications of synthetic biology to the students from senior high schools islandwide.
(see more about the Bio Camp)

5. Collaborations—Aachen & Mingdao iGEM Teams

In collaboration with Aachen, we have planned a survey about general knowledge of synthetic biology and released it to other iGEM teams. It is an international survey that has been done in Asia, Europe, and America. In collaboration with Mingdao, we have characterized the biobricks bilaterally and expressed the protein with SDS-PAGE.
(see more about the Aachen & Mingdao iGEM Teams)

6. Meetups

This year, we had attended four conferences held in Taiwan and China, and welcomed two iGEM teams in our school. Also, we had online meetups with two teams. iGEM competition is a connection that provides people around the world with valuable opportunity to make friends with people that share the same interest.
(see more about the Meetups)