Difference between revisions of "Team:Queens Canada/Human Practices"

(trying to fix the layout)
(Undo revision 443575 by ElishaKrauss (talk))
 
(173 intermediate revisions by 4 users not shown)
Line 2: Line 2:
 
{{Queens Canada/Navbar}}
 
{{Queens Canada/Navbar}}
 
<html>
 
<html>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
 +
 
body {
 
body {
−
background-color: white;
+
    background-color: white;
−
}
+
    font-family: Helvetica, sans-serif;
−
</style>
+
    margin-top: 20px;
−
<head>
+
    position: relative;
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     margin-left: auto;
−
<style>
+
    margin-right: auto;
−
 
+
−
 
+
−
* {
+
−
     box-sizing: border-box;
+
 
}
 
}
  
 
/* Create two equal columns that floats next to each other */
 
/* Create two equal columns that floats next to each other */
−
.columns {
+
.column {
−
     float: left;
+
     float:left;
−
    width: 35%;
+
 
     padding: 10px;
 
     padding: 10px;
−
     height: 100px; /* Should be removed. Only for demonstration */
+
     margin: 30px;
 +
    width: 28%;
 +
    border: 20px double #0485BF;
 +
    border-radius: 15px;
 +
    text-align: center;
 +
height: 630px;
 +
min-width: 450px;
 +
 
 
}
 
}
  
Line 31: Line 35:
 
}
 
}
  
−
body {
+
h1 {
−
     background-color: white;
+
     text-align: center;
−
    font-family: Helvetica, sans-serif;
+
 
}
 
}
  
−
/* The actual timeline (the vertical ruler) */
+
h2 {
−
.timeline {
+
     text-align: center;
−
     position: relative;
+
−
    max-width: auto;
+
−
    margin: 0 auto;
+
 
}
 
}
  
−
/* The actual timeline (the vertical ruler) */
+
h3 {
−
.timeline::after {
+
     text-align: center;
−
     content: '';
+
−
    position: absolute;
+
−
    width: 6px;
+
−
    background-color: blue;
+
−
    top: 0;
+
−
    bottom: 0;
+
−
    left: 50%;
+
−
    margin-left: -3px;
+
 
}
 
}
  
−
/* Container around content */
+
a:visited {
−
.container {
+
     color: black;
−
     padding: 10px 40px;
+
     background-color: transparent;
−
    position: relative;
+
−
     background-color: white;
+
−
    width: 50%;
+
 
}
 
}
−
 
+
a:hover {
−
/* The circles on the timeline */
+
     color: #0485BF;
−
.container::after {
+
     background-color: transparent;
−
     content: '';
+
     text-decoration: underline;
−
    position: absolute;
+
−
    width: 25px;
+
−
    height: 25px;
+
−
    right: -17px;
+
−
     background-color: blue;
+
−
    border: 4px solid #2ECC71;
+
−
    top: 15px;
+
−
    border-radius: 50%;
+
−
     z-index: 1;
+
 
}
 
}
−
 
+
footer {
−
/* Place the container to the left */
+
  position:fixed;
−
.left {
+
  left:0px;
−
    left: 0;
+
  bottom:0px;
 +
  width:100%;
 
}
 
}
  
−
/* Place the container to the right */
+
</style>
−
.right {
+
−
    left: 50%;
+
−
}
+
  
−
/* Add arrows to the left container (pointing right) */
+
<body>
−
.left::before {
+
−
    content: " ";
+
−
    height: 0;
+
−
    position: absolute;
+
−
    top: 22px;
+
−
    width: 0;
+
−
    z-index: 1;
+
−
    right: 30px;
+
−
    border: medium solid white;
+
−
    border-width: 10px 0 10px 10px;
+
−
    border-color: transparent transparent transparent blue;
+
−
}
+
  
−
/* Add arrows to the right container (pointing left) */
+
<h2 style="width:70%;margin-left:15%">Human Practices</h2>
−
.right::before {
+
−
    content: " ";
+
−
    height: 0;
+
−
    position: absolute;
+
−
    top: 22px;
+
−
    width: 0;
+
−
    z-index: 1;
+
−
    left: 30px;
+
−
    border: medium solid white;
+
−
    border-width: 10px 10px 10px 0;
+
−
    border-color: transparent blue transparent transparent;
+
−
}
+
  
−
/* Fix the circle for containers on the right side */
+
<p style="width:70%;margin-left:15%">Queen’s iGEM (QGEM) is excited to share, excite, and inspire the next generation of iGEMers. We’ve gone beyond our laboratory, into the Queen’s University and Kingston communities to teach and show applications of genetic engineering and synthetic biology. This has included internal safety training and synthetic biology ethics discussions, as well as externally-reaching activities with youth, interviewing local experts to gain insights throughout the development of our project, and collaborating with other iGEM teams. Browse our gallery of various activities as we explored how the community impacted our project, and how will our project impact the community.</p>
−
.right::after {
+
−
    left: -16px;
+
−
}
+
−
 
+
−
/* The actual content */
+
−
.content {
+
−
    padding: 20px 30px;
+
−
    background-color: #2ECC71;
+
−
    position: relative;
+
−
    border-radius: 6px;
+
−
}
+
−
 
+
−
/* Media queries - Responsive timeline on screens less than 600px wide */
+
−
@media screen and (max-width: 600px) {
+
−
  /* Place the timelime to the left */
+
−
  .timeline::after {
+
−
    left: 31px;
+
−
  }
+
−
 
+
−
  /* Full-width containers */
+
−
  .container {
+
−
    width: 100%;
+
−
    padding-left: 70px;
+
−
    padding-right: 25px;
+
−
  }
+
−
 
+
−
  /* Make sure that all arrows are pointing leftwards */
+
−
  .container::before {
+
−
    left: 60px;
+
−
    border: medium solid white;
+
−
    border-width: 10px 10px 10px 0;
+
−
    border-color: transparent white transparent transparent;
+
−
  }
+
−
 
+
−
  /* Make sure all circles are at the same spot */
+
−
  .left::after, .right::after {
+
−
    left: 15px;
+
−
  }
+
−
 
+
−
  /* Make all right containers behave like the left ones */
+
−
  .right {
+
−
    left: 0%;
+
−
  }
+
−
}
+
−
 
+
−
</style>
+
−
</head>
+
−
 
+
−
<body>
+
  
−
<div class="timeline">
+
<div>
−
   <div class="container left">
+
   <div class="column" style="background-color:#FFFFFF;">
−
    <div class="content">
+
  <div style="margin:auto;">
−
      <h2>Heading 1</h2>
+
    <a href="https://2018.igem.org/Team:Queens_Canada/Public_Engagement"><img src="https://static.igem.org/mediawiki/2018/c/cf/T--Queens_Canada--Public_Engagement.png" style="height=50%"/></a>
−
      <p>Text.</p>
+
    <font size="6px"><a href="https://2018.igem.org/Team:Queens_Canada/Public_Engagement">Engagement & Education</a></font>
−
        <div class="row">
+
    <p>Through community (Kingston, ON Canada) and University events, we educated young children on basic genetic principles
−
          <div class="columns" style="background-color:#E53935;">
+
      and encourage the community to initiate conversations with students and researchers in the field. Click to learn more
−
            <h2>Con's</h2>
+
      about our involvement in our communities</p>
−
            <p>Some text..</p>
+
    <br>
−
        </div>
+
</div>
−
        <div class="columns" style="background-color:#8BC34A  ;">
+
−
          <h2>Pro's</h2>
+
−
          <p>Some text..</p>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
 
   </div>
 
   </div>
−
   <div class="container right">
+
   <div class="column" style="background-color:#FFFFFF;">
−
    <div class="content">
+
    <a href="https://2018.igem.org/Team:Queens_Canada/Collaborations"><img src="https://static.igem.org/mediawiki/2018/e/e9/T--Queens_Canada--Collaboration.png" style="height=50%"/></a>
−
      <h2>Heading 2</h2>
+
    <font size="6px"><a href="https://2018.igem.org/Team:Queens_Canada/Collaborations">Collaborations</a></font>
−
      <p>Text.</p>
+
    <p>Just as bacteria undergo genetic exchange, collaboration is part of our DNA! We are advocates for collaborative
−
      <img src="https://static.igem.org/mediawiki/2018/a/a5/T--Queens_Canada--ScienceRendezvous1.jpeg" width=70% height=70% />
+
      exchanges being an important part of the iGEM experience. Click to learn more about our collaborations from reviewing
−
      <img src="https://static.igem.org/mediawiki/2018/f/f2/T--Queens_Canada--ScienceRendezvous2.jpeg" width=70% height=70% />
+
      protocols and models, to co-creating informational videos/pamphlets!</p>
−
      <img src="https://static.igem.org/mediawiki/2018/e/e8/T--Queens_Canada--ScienceRendezvous3.jpeg" width=70% height=70% />
+
     <br>
−
     </div>
+
 
   </div>
 
   </div>
−
   <div class="container left">
+
   <div class="column" style="background-color:#FFFFFF;">
−
     <div class="content">
+
     <a href="https://2018.igem.org/Team:Queens_Canada/Safety"><img src="https://static.igem.org/mediawiki/2018/7/77/T--Queens_Canada--SafetyImg.png" style="height=50%"/></a>
−
      <h2>Heading 3</h2>
+
    <font size="6px"><a href="https://2018.igem.org/Team:Queens_Canada/Safety">Safety</a></font>
−
      <p>Text.</p>
+
    <p>QGEM demonstrates safe and responsible working practices to protect ourselves, others in the lab, and beyond. This
−
     </div>
+
      includes thorough safety training, using low-risk E. coli, and working under supervision. Learn more about our safe
 +
      ways of working here.</p>
 +
     <br>
 
   </div>
 
   </div>
−
  <div class="container right">
+
 
−
     <div class="content">
+
 
−
      <h2>Heading 4</h2>
+
<div class="column" style="background-color:#FFFFFF;">
−
      <p>Text.</p>
+
     <a href="https://2018.igem.org/Team:Queens_Canada/Interviews"><img src="https://static.igem.org/mediawiki/2018/4/4c/T--Queens_Canada--Experts.png" style="height=50%"/></a>
−
     </div>
+
<font size="6px"><a href="https://2018.igem.org/Team:Queens_Canada/Interviews">Expert Interviews</a></font>
 +
    <p>QGEM has performed a series of interviews with physicians, professors, researchers, and support groups, regarding
 +
      their unique perspectives and utility on our product. Click to learn more from our Experts, and visit our Market
 +
      Direction Analysis to see the application of the consultations.</p>
 +
     <br>
 
   </div>
 
   </div>
−
   <div class="container left">
+
   <div class="column" style="background-color:#FFFFFF;">
−
     <div class="content">
+
     <a href="https://2018.igem.org/Team:Queens_Canada/InterLab"><img src="https://static.igem.org/mediawiki/2018/8/82/T--Queens_Canada--Interlab.png" style="height=50%"/></a>
−
      <h2>Heading 5</h2>
+
    <font size="6px"><a href="https://2018.igem.org/Team:Queens_Canada/InterLab">The Interlab Measurement Study</a></font>
−
      <p>Text.</p>
+
    <p>QGEM has participated in the Fifth International InterLaboratory Measurement Study to help create standardized
−
     </div>
+
      protocols across laboratories in the synthetic biology community. Click to see our contributions on the GFP
 +
      measurements this year!</p>
 +
   
 +
     <br>
 
   </div>
 
   </div>
−
   <div class="container right">
+
   <div class="column" style="background-color:#FFFFFF;">
−
     <div class="content">
+
     <a href="https://2018.igem.org/Team:Queens_Canada/Market"><img src="https://static.igem.org/mediawiki/2018/4/43/T--Queens_Canada--Market_Direction_Analysis.png" style="height=50%"/></a>
−
      <h2>Heading 6</h2>
+
    <font size="6px"><a href="https://2018.igem.org/Team:Queens_Canada/Market">Market Direction Analysis</a></font>
−
      <p>Text.</p>
+
    <p>Our team explored multiple potential uses for our device, with pressure-testing from our Expert Interviewees. After
−
     </div>
+
      collecting input from experts and the general public, we were able to evaluate the safety, sustainability, and
 +
      practicality of each marketing approach. Click to explore the how we integrated the feedback into the development of
 +
      our device’s purpose and features.</p>
 +
     <br>
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
<div class="t-cover" style="height:1vh;"></div><p>
 +
></p>
 +
<!--
 +
<p style="width:70%;margin-left:15%">
 +
Sources:<br>
  
−
<div class="column full_size judges-will-not-evaluate">
+
1. 19 Doctor clip black and white lab coat HUGE FREEBIE! Download for PowerPoint presentations on melbournechapter. (n.d.). Retrieved October 15, 2018, from https://melbournechapter.net/explore/doctor-clipart-lab-coat/#gal_post_1079_clipart-coat-clipart-overcoat-9.png<br>
−
<h3>★  ALERT! </h3>
+
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
  
 +
2. Black Atom Clip Art at Clker.com - vector clip art online, royalty free & public domain. (n.d.). Retrieved October 15, 2018, from http://www.clker.com/clipart-black-atom.html<br>
  
−
<div class="clear"></div>
+
3. Clipart - Microscope. (n.d.). Retrieved October 15, 2018, from https://openclipart.org/detail/797/microscope<br>
  
 +
4. Cooperative Voluntary association Society Business Organization, Community PNG clipart | free cliparts | UIHere. (n.d.). Retrieved October 15, 2018, from https://www.uihere.com/free-cliparts/cooperative-voluntary-association-society-business-organization-community-1816308<br>
  
 +
5. Dna free vector icons designed by Smashicons. (n.d.). Retrieved October 15, 2018, from https://www.flaticon.com/free-icon/dna_223738<br>
  
−
<div class="column full_size">
+
6. Image - Megaphone.PNG | Club Penguin Wiki | FANDOM powered by Wikia. (n.d.). Retrieved October 15, 2018, from http://clubpenguin.wikia.com/wiki/File:Megaphone.PNG<br>
  
−
<h1>Human Practices</h1>
+
7. Public Relations Marketing Media relations Management - flat decoration - Unlimited Download. Kisspng.com. (n.d.). Retrieved October 15, 2018, from https://www.kisspng.com/png-public-relations-marketing-media-relations-managem-1337814/<br>
−
<p>
+
−
At iGEM we believe societal considerations should be upfront and integrated throughout the design and execution of synthetic biology projects. “Human Practices” refers to iGEM teams’ efforts to actively consider how the world affects their work and the work affects the world. Through your Human Practices activities, your team should demonstrate how you have thought carefully and creatively about whether your project is responsible and good for the world. We invite you to explore issues relating (but not limited) to the ethics, safety, security, and sustainability of your project, and to show how this exploration feeds back into your project purpose, design and execution.
+
−
</p>
+
  
 +
8. Sign Symbol Laboratory Goggles Clip art - Eye Protection Cliparts - Unlimited Download. Kisspng.com. (n.d.). Retrieved October 15, 2018, from https://www.kisspng.com/png-sign-symbol-laboratory-goggles-clip-art-eye-protec-637874/<br>
  
 +
9. Transparent bacteria gambar ~ Frames ~ Illustrations ~ HD images ~ Photo Designs. (n.d.). Retrieved October 15, 2018, from https://kathleenhalme.com/explore/transparent-bacteria-gambar/<br>
  
−
<p>For more information, please see the <a href="https://2018.igem.org/Human_Practices">Human Practices Hub</a>. There you will find:</p>
+
10. Wear Gloves Clip Art at Clker.com - vector clip art online, royalty free & public domain. (n.d.). Retrieved October 15, 2018, from https://www.clker.com/clipart-wear-gloves.html<br>
−
+
−
<ul>
+
−
<li> an <a href="https://2018.igem.org/Human_Practices/Introduction">introduction</a> to Human Practices at iGEM </li>
+
−
<li>tips on <a href="https://2018.igem.org/Human_Practices/How_to_Succeed">how to succeed</a> including explanations of judging criteria and advice about how to conduct and document your Human Practices work</li>
+
−
<li>descriptions of <a href="https://2018.igem.org/Human_Practices/Examples">exemplary work</a> to inspire you</li>
+
−
<li>links to helpful <a href="https://2018.igem.org/Human_Practices/Resources">resources</a></li>
+
−
<li>And more! </li>
+
−
</ul>
+
−
+
  
 +
11. Wheeler, R. (2006). Green Fluorescent Protein (GFP). Produced from PDB: 1EMA, rendered in PyMOL. Retrieved from https://commons.wikimedia.org/wiki/File:GFP_structure.png<br>
  
−
 
−
 
−
<p>On this page, your team should document all of your Human Practices work and activities. You should write about the Human Practices topics you considered in your project, document any activities you conducted to explore these topics (such as engaging with experts and stakeholders), describe why you took a particular approach (including referencing any work you built upon), and explain if and how you integrated takeaways from your Human Practices work back into your project purpose, design and/or execution. </p>
 
−
 
−
<p>If your team has gone above and beyond in work related to safety, then you should document this work on your Safety wiki page and provide a description and link on this page. If your team has developed education and public engagement efforts that go beyond a focus on your particular project, and for which would like to nominate your team for the Best Education and Public Engagement Special Prize, you should document this work on your Education and Education wiki page and provide a description and link here. </p>
 
−
</div>
 
−
 
−
<div class="clear"></div>
 
−
 
−
 
−
<div class="column full_size">
 
−
<div class="highlight decoration_background">
 
−
<p>The iGEM judges will review this page to assess whether you have met the Silver and/or Gold medal requirements based on the Integrated Human Practices criteria listed below. If you nominate your team for the <a href="https://2018.igem.org/Judging/Awards">Best Integrated Human Practices Special Prize</a> by filling out the corresponding field in the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>, the judges will also review this page to consider your team for that prize.
 
 
</p>
 
</p>
−
</div>
+
-->
−
</div>
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column full_size">
+
−
+
−
<h3>Silver Medal Criterion #3</h3>
+
−
<p>Convince the judges you have thought carefully and creatively about whether your work is responsible and good for the world. Document how you have investigated these issues and engaged with your relevant communities, why you chose this approach, and what you have learned. Please note that surveys will not fulfill this criteria unless you follow scientifically valid methods. </p>
+
−
 
+
−
 
+
−
<h3>Gold Medal Criterion #1</h3>
+
−
<p>Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the purpose, design and/or execution of your project. Document how your project has changed based upon your human practices work.
+
−
</p>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column full_size">
+
−
<h3>Best Integrated Human Practices Special Prize</h3>
+
−
 
+
−
<p>To compete for the Best Integrated Human Practices prize, please describe your work on this page and also fill out the description on the judging form. </p>
+
−
 
+
−
<p>How does your project affect society and how does society influence the direction of your project? How might ethical considerations and stakeholder input guide your project purpose and design and the experiments you conduct in the lab? How does this feedback enter into the process of your work all through the iGEM competition? Document a thoughtful and creative approach to exploring these questions and how your project evolved in the process to compete for this award!</p>
+
−
<p>You must also delete the message box on the top of this page to be eligible for this prize.</p>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 19:51, 17 October 2018

Human Practices

Queen’s iGEM (QGEM) is excited to share, excite, and inspire the next generation of iGEMers. We’ve gone beyond our laboratory, into the Queen’s University and Kingston communities to teach and show applications of genetic engineering and synthetic biology. This has included internal safety training and synthetic biology ethics discussions, as well as externally-reaching activities with youth, interviewing local experts to gain insights throughout the development of our project, and collaborating with other iGEM teams. Browse our gallery of various activities as we explored how the community impacted our project, and how will our project impact the community.

Engagement & Education

Through community (Kingston, ON Canada) and University events, we educated young children on basic genetic principles and encourage the community to initiate conversations with students and researchers in the field. Click to learn more about our involvement in our communities


Collaborations

Just as bacteria undergo genetic exchange, collaboration is part of our DNA! We are advocates for collaborative exchanges being an important part of the iGEM experience. Click to learn more about our collaborations from reviewing protocols and models, to co-creating informational videos/pamphlets!


Safety

QGEM demonstrates safe and responsible working practices to protect ourselves, others in the lab, and beyond. This includes thorough safety training, using low-risk E. coli, and working under supervision. Learn more about our safe ways of working here.


Expert Interviews

QGEM has performed a series of interviews with physicians, professors, researchers, and support groups, regarding their unique perspectives and utility on our product. Click to learn more from our Experts, and visit our Market Direction Analysis to see the application of the consultations.


The Interlab Measurement Study

QGEM has participated in the Fifth International InterLaboratory Measurement Study to help create standardized protocols across laboratories in the synthetic biology community. Click to see our contributions on the GFP measurements this year!


Market Direction Analysis

Our team explored multiple potential uses for our device, with pressure-testing from our Expert Interviewees. After collecting input from experts and the general public, we were able to evaluate the safety, sustainability, and practicality of each marketing approach. Click to explore the how we integrated the feedback into the development of our device’s purpose and features.


>