Difference between revisions of "Team:British Columbia/Human Practices"

m
m
Line 1: Line 1:
 
{{British_Columbia_2}}
 
{{British_Columbia_2}}
 
{{British_Columbia_Navbar}}
 
{{British_Columbia_Navbar}}
−
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
−
   <title>S-Layer</title>
+
   <title>Bootstrap Example</title>
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
<style>
 
<style>
−
body{
 
−
  position: relative; top: -14px;
 
−
}
 
−
 
 
.cover{
 
.cover{
−
   background: url("https://static.igem.org/mediawiki/2016/8/8e/T--British_Columbia--header-fog-far-away.JPG");
+
   background: url("https://static.igem.org/mediawiki/2016/9/98/T--British_Columbia--header-front.JPG");
 
   background-size: cover; background-repeat: no-repeat;
 
   background-size: cover; background-repeat: no-repeat;
 
}
 
}
Line 19: Line 15:
 
@media screen and (min-width: 768px) {
 
@media screen and (min-width: 768px) {
 
   .cover{
 
   .cover{
−
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0) 100%), url("https://static.igem.org/mediawiki/2016/8/8e/T--British_Columbia--header-fog-far-away.JPG");
+
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0) 100%), url("https://static.igem.org/mediawiki/2016/9/98/T--British_Columbia--header-front.JPG");
 
     background-size: cover; background-repeat: no-repeat;
 
     background-size: cover; background-repeat: no-repeat;
 
     background-position: 0 0, 0 -220px;
 
     background-position: 0 0, 0 -220px;
Line 26: Line 22:
  
 
@media(max-width:768px) {
 
@media(max-width:768px) {
−
   #side-menu {
+
   .sidebar-nav {
 
     text-align: center;
 
     text-align: center;
 
     position: static;
 
     position: static;
Line 34: Line 30:
  
 
@media(min-width:768px){
 
@media(min-width:768px){
−
   #side-menu{
+
   .sidebar-nav{
 
     text-align: right;
 
     text-align: right;
 
   }
 
   }
Line 47: Line 43:
 
.nav-pills a {
 
.nav-pills a {
 
   color: black;
 
   color: black;
 +
}
 +
 +
body {
 +
  position: relative; top: -14px;
 
}
 
}
  
−
.anchor{
+
.affix {
−
   padding-top: 40px;
+
   top: 100px;
 
}
 
}
 +
 +
  div.col-sm-9 div {
 +
      height: 250px;
 +
      font-size: 28px;
 +
  }
 +
  #who{color: #fff; background-color: #1E88E5;}
 +
  #background{color: #fff; background-color: #673ab7;}
 +
  #sci-comm{color: #fff; background-color: #ff9800;}
 +
 
  
 
</style>
 
</style>
 
<script>
 
<script>
−
$(document).ready(function(){
+
 
−
     $('#nav-wrapper').height($("#side-menu").height());
+
$(function() {
 +
     $('#nav-wrapper').height($(".sidebar-nav").height());
 
      
 
      
 
     $('.sidebar-nav').affix({
 
     $('.sidebar-nav').affix({
−
         offset: { top: $("#side-menu").offset().top }
+
         offset: { top: $('.sidebar-nav').offset().top }
 
     });
 
     });
−
 
−
/*set appropriate width on page load */
 
−
if ($(window).width() >= 768) {
 
−
  $('.sidebar-nav').css('width', $('.col-sm-3').width());
 
−
} else {
 
−
  $('.sidebar-nav').css('width', 'auto');
 
−
}
 
−
 
 
});
 
});
  
−
/* adjust width on window resize */
 
−
$(window).resize(function() {
 
−
if ($(window).width() >= 768) {
 
−
  $('.sidebar-nav ').css('width', $('.col-sm-3').width());
 
−
} else {
 
−
  $('.sidebar-nav ').css('width', 'auto');
 
−
}
 
−
});
 
 
</script>
 
</script>
 
</head>
 
</head>
 +
<header>
 +
</header>
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="95">
  
−
 
−
<body data-spy="scroll" data-target="#side-menu" data-offset="95">
 
 
<div class="cover">
 
<div class="cover">
 
   <div class="container-fluid">
 
   <div class="container-fluid">
Line 94: Line 89:
 
</div><!--cover-->
 
</div><!--cover-->
  
−
<div class="content-wrap">
 
−
<div id="nav-wrapper">
 
−
  <nav class="col-sm-3" id="side-menu">
 
−
        <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
 
−
          <li class="active"><a href="#who">Who We Are</a></li>
 
−
          <li><a href="#background">Background</a></li>
 
−
          <li><a href="#sci-comm">The Importance of Science Communication</a></li>
 
−
        </ul>
 
−
  </nav>
 
−
</div><!--#nav-wrapper-->
 
  
−
      <div class="col-sm-9">
+
<div class="container">
−
<div class="col-lg-12">
+
  <div class="row">
−
     <h3 class="page-header anchor" id="who">Who we are</h3>
+
     <nav class="col-sm-3" id="myScrollspy">
−
<p>
+
      <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
−
The UBC iGEM team is composed of ten undergraduate students under the guidance of six graduate and two faculty advisors. We are pleased to be composed of students from over eight disciplines and multiple years of study. This year we are fortunate to be based out of the Murphy and Hallam Labs located in UBC’s Life Science Center to conduct our wet lab research. Our summer goal was to build off the findings of the Smit Lab (also located at UBC) to develop a new enzyme display system with the application for biomass decomposition.</p>
+
        <li><a href="#who">Section 1</a></li>
−
  </div>
+
        <li><a href="#background">Section 2</a></li>
−
  <div class="col-lg-12">
+
        <li><a href="#sci-comm">Section 3</a></li>
−
    <h3 class="page-header anchor" id="background">Background</h3>
+
      </ul>
−
<p>
+
    </nav>
−
Emerging scientists everywhere are taught in jargon that requires the structure of post-secondary education to understand and decipher the complex topics that arise regularly in every science field ranging from micro-processors to planetary science. Given this, there is no surprise there exists a large gap between the science community and the general public with the passage of information from primary research to that which a person would see on the news or in a magazine. Given this explanatory divide, we set about discovering what has worked in the scientific community in the past and who is currently having the most success in conveying scientific information. </p>
+
    <div class="col-sm-9">
−
 
+
      <div id="who">
−
<p>
+
         <h1>Section 1</h1>
−
Every scientist has been there, sitting at home enjoying dinner with your family or close friends and a news story arises on the television which is broadly related to the field of your study. Announced over the news is the next cure for cancer, miracle energy source that provides clean sustainable energy, or the discovery of a new planet that can sustain human life. However, as someone who is familiar one of the aforementioned topics, your left explaining why the discovery, yet still extremely exciting, still has to go through clinical trials, make it commercially accessible, or is 30 light years away. 
+
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
−
</p>  
+
      </div>
−
 
+
      <div id="background">
−
<p>
+
         <h1>Section 2</h1>
−
For the average consumer of science information, it can be really misleading to level of the discoveries made the how quickly science actually progresses. It’s not the news agencies fault for wanting to report a possible emerging cure for a current problem plaguing humanity, but there needs to be a better delivery of the information such that the general public can understand the research, be excited by it, but not leave them disappointed that it may be five to ten years away. </p>
+
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
−
 
+
      </div>
−
<p>
+
      <div id="sci-comm">
−
To accomplish this task we set out to interview some of the key people in the outreach of scientific research at UBC and key stakeholders related to the topic of our project learn the best ways to convey scientific research and key methods for making scientific research more understandable. </p>
+
        <h1>Section 3</h1>
−
 
+
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
−
  </div>
+
−
  <div class="col-lg-12">
+
−
    <h3 class="page-header anchor" id="sci-comm">The Importance of Science Communication</h3>
+
−
         <h4>How to Effectively Communicate Science</h4>
+
−
         <h4>Common Mistakes in Science Communication<h4>
+
−
        <h4>An Example: CRISPR Gene Editing Articles</h4>
+
−
          <p>On February 15th, 2013, an article was published in <i>Science</i> magazine about a new way of editing genes very precisely. We will compare and contrast the original article, with the press release following it, as well as articles aimed at the general public. </p>
+
−
         
+
−
          <p>The original article (DOI 10.1126/science.1231143) contains many difficult words, such that only someone studying biology would understand the specifics. The main idea of the article can be understood from the abstract.</p>
+
−
          <blockquote>Functional elucidation of causal genetic variants and elements requires precise genome editing technologies. The type II prokaryotic CRISPR (clustered regularly interspaced short palindromic repeats)/Cas adaptive immune  system has been shown to facilitate RNA-guided site-specific DNA cleavage. We engineered two different type II CRISPR/Cas systems and demonstrate that Cas9 nucleases can be directed by short RNAs to induce precise cleavage at endogenous genomic loci in human and mouse cells. Cas9 can also be converted into a nicking enzyme to facilitate homology-directed repair with minimal mutagenic activity. Lastly, multiple guide sequences can be encoded into a single CRISPR array to enable simultaneous editing of several sites within the mammalian genome, demonstrating easy programmability and wide applicability of the RNA-guided nuclease technology.</blockquote>
+
−
          <p>While a science student might know the meaning of <mark>causal,</mark> <mark>genome,</mark> or <mark>prokaryotic,</mark> they would have a harder time with <mark>functional elucidation,</mark> <mark>endogenous,</mark> or <mark>homology.</mark> Again, the main idea that the CRISPR system allows for precise editing of genes is clear.
+
−
</p>
+
−
       
+
−
        <p>The <a href="https://www.broadinstitute.org/news/5672">press release</a> is more suitable for a general audience. Using simpler words, even colloquialisms such as <mark>home in,</mark> the press release explains more clearly the purpose of the CRISPR/Cas 9 system.</p>
+
−
         <blockquote>...the engineered CRISPR-Cas9 system can be programmed to target specific stretches of genetic code and to make cuts at precise locations. Over the past few years, those capabilities have been harnessed and used as genome editing tools, enabling researchers to permanently modify genes in mammalian cells. In the future, these tools may make it possible to correct mutations at precise locations in the three billion-letter sequence of the human genome to treat genetic causes of disease in patients.</blockquote>
+
−
         <p>Being meant for a general audience, the press release is a summary the key points of the article. Very little of the specifics of the CRISPR system are brought up, as the general public would be unable to understand anyways. Most importantly, the foggy main idea from above is clarified: "Researchers can now harness the engineered system to home in on specific nucleic acid sequences and cut the DNA at those precise targets."
+
−
        </p>
+
−
   
+
−
       
+
−
    <p>Very rarely did the more "general audience" articles cite from just the original source. This <a href="http://www.nature.com/news/crispr-gene-editing-is-just-the-beginning-1.19510">nature article</a> provides a good overview of recent developments in CRISPR, and explains the science in an accessible way. It cites 15 scholarly articles, and includes <a href="http://www.nature.com/polopoly_fs/7.34674.1457358573!/image/crispr-graphic-ONLINE.jpg_gen/derivatives/landscape_630/crispr-graphic-ONLINE.jpg">graphics</a> to clearly illustrate the gene editing process. It is worth noting that, because the nature article covers so much, it is quite long. The writer offsets this by grouping the advancements into sections, to make the article easier to process.</p>
+
−
   
+
−
    <p>More specialized websites such as <a href="https://www.addgene.org/crispr/reference/history/">Addgene</a> referenced several articles about CRISPR as well. Like nature, the entry about CRISPR's history has diagrams illustrating the process. The short "reference" is a lot more technical in nature. Rather than mention the researchers, the webpage explains just the science and its strengths and limitations.</p>
+
−
    <p>The McGovern Institute at MIT's<a href="https://mcgovern.mit.edu/CRISPR"> article </a>is similar in that it references more than just one scholarly article. Instead of illustrations, a video explains the process. The video is targeted to a very broad audience, even giving the definition of "a gene" in the introduction. The animations illustrate each step of the CRISPR/Cas9 process very clearly.</p>
+
−
  </div>
+
 
       </div>
 
       </div>
 +
    </div><!--.col-sm-9-->
 +
  </div><!--.row-->
 +
</div><!--.container-->
  
−
</div><!--.content-wrap-->
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 19:18, 16 October 2016

Main CSS Navbar CSS

Bootstrap Example

Human Practices

Section 1

Try to scroll this section and look at the navigation list while scrolling!

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!