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

(Undo revision 443575 by ElishaKrauss (talk))
 
(119 intermediate revisions by 4 users not shown)
Line 2: Line 2:
 
{{Queens Canada/Navbar}}
 
{{Queens Canada/Navbar}}
 
<html>
 
<html>
−
<head>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
 
<style>
 
<style>
  
−
 
+
body {
−
* {
+
     background-color: white;
−
     box-sizing: border-box;
+
    font-family: Helvetica, sans-serif;
 +
    margin-top: 20px;
 +
    position: relative;
 +
    margin-left: auto;
 +
    margin-right: auto;
 
}
 
}
  
 
/* 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%;    /*Pros and Cons next to each other, within content*/
+
 
     padding: 10px;
 
     padding: 10px;
−
     height: auto;
+
     margin: 30px;
 +
    width: 28%;
 +
    border: 20px double #0485BF;
 +
    border-radius: 15px;
 +
    text-align: center;
 +
height: 630px;
 +
min-width: 450px;
 +
 
 
}
 
}
  
Line 26: Line 35:
 
}
 
}
  
−
body {
+
h1 {
−
     background-color: white;
+
     text-align: center;
−
    font-family: Helvetica, sans-serif;
+
−
    margin-top: 50px;
+
−
    max-width: 1200px;
+
−
    position: relative;
+
−
    margin-left: auto;
+
−
    margin-right: auto;
+
 
}
 
}
  
−
/* The actual timeline (the vertical ruler) */
+
h2 {
−
.timeline {
+
     text-align: center;
−
     max-width: 1200px;
+
−
    position: relative;
+
−
    margin-left: auto;
+
−
    margin-right: auto;
+
 
}
 
}
  
−
/* The actual timeline (the vertical ruler) */
+
h3 {
−
.timeline::after {
+
     text-align: center;
−
     content: '';
+
−
    position: absolute;
+
−
    width: 6px;
+
−
    background-color: black;
+
−
    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;
+
−
    left: 50%;
+
−
    width: 25px;
+
−
    height: 25px;
+
−
     background-color: blue;
+
−
     border: 4px solid #2ECC71;
+
−
    top: 15px;
+
−
    border-radius: 50%;
+
−
    z-index: 1;
+
−
}*//*out for now*/
+
−
 
+
−
/* Place the container to the left */
+
−
.left {
+
−
    left: -25%;
+
 
}
 
}
−
 
+
footer {
−
/* Place the container to the right */
+
  position:fixed;
−
.right {
+
  left:0px;
−
    left: 25%;
+
  bottom:0px;
 +
  width:100%;
 
}
 
}
  
−
/* Add arrows to the left container (pointing right) */
+
</style>
−
.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) */
+
<body>
−
.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 */
+
<h2 style="width:70%;margin-left:15%">Human Practices</h2>
−
.right::after {
+
−
    left: -16px;
+
−
}
+
  
−
/* The actual content */
+
<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>
−
.content {
+
−
    padding: 20px 30px;
+
−
    background-color: #2ECC71;
+
−
    position: relative;
+
−
    border-radius: 6px;
+
−
}
+
  
−
/* Media queries - Responsive timeline on screens less than 600px wide */
+
<div>
−
@media screen and (max-width: 600px) {
+
  <div class="column" style="background-color:#FFFFFF;">
−
  /* Place the timelime to the left */
+
   <div style="margin:auto;">
−
  .timeline::after {
+
     <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>
−
    left: 31px;
+
    <font size="6px"><a href="https://2018.igem.org/Team:Queens_Canada/Public_Engagement">Engagement & Education</a></font>
−
   }
+
    <p>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
−
  /* Full-width containers */
+
      about our involvement in our communities</p>
−
  .container {
+
    <br>
−
    width: 100%;
+
</div>
−
     padding-left: 5px;
+
−
    padding-right: 25px;
+
−
  }
+
−
 
+
−
  /* Make sure that all arrows are pointing leftwards */
+
−
  .container::before {
+
−
    left: 10px;
+
−
    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>
+
−
 
+
−
<h1>Community Engagement</h1>
+
−
 
+
−
<div class="timeline">
+
−
  <div class="container left">
+
−
    <div class="content">
+
−
      <h2>Science Rendezvous</h2>
+
−
      <p>The Kingston Science Rendezvous is an annual event that showcases current research in the fields of science and engineering to the community. QGEM saw it as an excellent opportunity to connect with people from different ages and background, and we held a booth that presented some interesting science experiments and demonstrations. At the event we had three stations, the first demonstrated the process of kiwi DNA extraction with household materials. This was meant to establish the idea that science experiments can take place in everyday life and to encourage parents to explore science-related projects with their children at home. The second was a microscope station presenting a set of fruit fly abdomen cross section under the microscope. This was prepared by one of our volunteers and many were impressed by the anatomy of the fruit fly. We took the chance to explain the importance of fruit flies in genetic research and gave children an idea of the variety of work geneticists carry out. Both parents and children had shown great interest as fruit flies are commonly seen in households and yet it was rare for people to be able to see their organs and inner structures. Our microscope set-up also featured other prepared slides containing different types of plankton. By allowing participants to use the microscope, they were able to gain a better appreciation for both how this technology works, as well as the microorganisms and microparticles that compose the world we live in. The third component of our booth was the use of a virtual reality (VR) headset with the app InCell VR. This application allowed participants to get an in-depth view of the inside of a human cell at the molecular level. Children were able to see cell components including the nucleus, mitochondria, and ribosomes during this interactive virtual experience. Although it was difficult to explain complicated concepts and experimental procedures to young children as it was their first time approaching the field of genetics, they were mostly fascinated and intrigued. 
+
−
</p>
+
−
        <div class="row">
+
−
          <div class="columns" style="background-color:#E53935;">
+
−
            <h2>Cons</h2>
+
−
            <p>Some text...</p>
+
−
        </div>
+
−
        <div class="columns" style="background-color:#8BC34A  ;">
+
−
          <h2>Pros</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>
  
 +
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>
 +
 +
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>
 +
 +
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>
 +
 +
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>
 +
 +
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>
 +
 +
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>
 +
 +
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>
 +
 +
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>
 +
-->
  
 
</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.


>