Difference between revisions of "Team:William and Mary/Practices"

(Prototype team page)
 
Line 1: Line 1:
−
{{William_and_Mary}}
 
−
<html>
 
  
−
<h2> Human Practices </h2>
+
<html lang="en">
 +
<cfheader name="X-XSS-Protection" value="1">
 +
    <head>
 +
        <meta charset="utf-8" />
 +
<link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2015/e/ea/WMFavicon.png">
  
−
<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>
+
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
−
<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>
+
        <title>NOISE - W&M iGEM</title>
−
<p>For more information, please see the <a href="https://2015.igem.org/Practices_Hub">Practices Hub</a>.</p>
+
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 +
        <link href="https://2015.igem.org/Team:William_and_Mary/bootstrap?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
 +
        <link href="https://2015.igem.org/Team:William_and_Mary/rubick?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
 +
        <link href="https://2015.igem.org/Team:William_and_Mary/demo?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
 +
        <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:William_and_Mary/jquerybxsliderCSS?action=raw&ctype=text/css" />
  
−
<div class="highlightBox">
+
        <!--    Fonts and icons    -->
−
<h4>Note</h4>
+
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
−
<p>You must fill out this page in order to be considered for all <a href="https://2015.igem.org/Judging/Awards">awards</a> for Human Practices:</p>
+
        <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
−
<ul>
+
        <link href="https://2015.igem.org/Team:William_and_Mary/pe-icon-7-stroke?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
−
<li>Human Practices silver medal criterion</li>
+
        <link href="https://2015.igem.org/Team:William_and_Mary/Rubik-Fonts?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
−
<li>Human Practices gold medal criterion</li>
+
       
−
<li>Best Integrated Human Practices award</li>
+
<!-- the wiki settings in the section immediately below are from UC San Diego 2015 -->
−
<li>Best Education and Public Engagement award</li>
+
        <style type="text/css">
−
</ul>
+
/* WIKI SETTINGS*/
−
</div>
+
 +
/* Hide first heading */
 +
.firstHeading {
 +
display: none;
 +
}
 +
 +
/*-- Remove borders, float content left and remove padding/margin */
 +
#globalWrapper, #content{
 +
background-color: transparent;
 +
border: none;
 +
float: center;
 +
                                width: 101%;
 +
margin-left: -3px;
 +
margin-top: -8px;
 +
padding: auto;
 +
}
  
 +
/*left align Black Menu Bar */
 +
#top_menu_inside {
 +
margin-left: 0px;
 +
}
 +
</style>
  
−
<h5>Some Human Practices topic areas </h5>
+
    </head>
−
<ul>
+
    <body class="landing-page">
−
<li>Philosophy</li>
+
        <nav class="navbar navbar-default navbar-transparent navbar-fixed-top navbar-burger" role="navigation">
−
<li>Public Engagement / Dialogue</li>
+
            <!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"-->
−
<li>Education</li>
+
            <div class="container">
−
<li>Product Design</li>
+
                <div class="navbar-header">
−
<li>Scale-Up and Deployment Issues</li>
+
                    <button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
−
<li>Environmental Impact</li>
+
                    <span class="sr-only">Toggle navigation</span>
−
<li>Ethics</li>
+
                    <span class="icon-bar bar1"></span>
−
<li>Safety</li>
+
                    <span class="icon-bar bar2"></span>
−
<li>Security</li>
+
                    <span class="icon-bar bar3"></span>
−
<li>Public Policy</li>
+
                    </button>
−
<li>Law and Regulation</li>
+
<a href="https://2015.igem.org/Team:William_and_Mary" class="navbar-brand">W&M iGEM 2015</a>
−
<li>Risk Assessment</li>
+
                </div>
−
</ul>
+
                <div class="collapse navbar-collapse">
 +
                    <ul class="nav navbar-nav navbar-right navbar-uppercase">
 +
<p>     </p>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Description">
 +
                            Project Description
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Parts">
 +
                            Parts
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Basic_Part">
 +
                            Basic Part
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Composite_Part">
 +
                            Composite Part
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Part_Collection">
 +
                            Part Collections
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Measurement">
 +
                            Measurement
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Interlab_Study">
 +
                            Interlab Study
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Collaborations">
 +
                            Collaboration
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Software">
 +
                          Software
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Practices">
 +
                            Human Practices
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary#ref">
 +
                            Notebook, Safety, & Attributions
 +
                            </a>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
        </nav>
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
        <div class="wrapper">
 +
       
 +
       
 +
       
 +
            <!--    replace this line with the code generated with the rubik-builder.html              -->
 +
                   
 +
                        <!-- Section "What We do" example 3: Small Title & 3 columns icons -->
 +
                        <div class="section section-we-do-2" id="workflow2">
 +
                            <div class="container">
 +
                                <div class="row">
 +
                                    <div class="title">
 +
                                        <p class = "h2WM">Our Outreach</p>
 +
                                    </div>
 +
                                    <div class="col-md-10 col-md-offset-1">
 +
                                        <div class="row">
 +
                                            <div class="col-md-4">
 +
                                                <div class="card">
 +
                                                    <div class="icon">
 +
                                                        <i class="pe-7s-paint"></i>
 +
                                                    </div>
 +
                                                    <h3>Adult Communication</h3>
 +
                                                    <p>After hearing the community's concerns about SynBio, we held workshops and seminars to clear misconceptions.</p>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="col-md-4">
 +
                                                <div class="card">
 +
                                                    <div class="icon">
 +
                                                        <i class="pe-7s-scissors"></i>
 +
                                                    </div>
 +
                                                    <h3>Youth Education</h3>
 +
                                                    <p>Synthetic biology can be a blast with the right approach. The ___ kids at our workshops sure thought so.</p>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="col-md-4">
 +
                                                <div class="card">
 +
                                                    <div class="icon">
 +
                                                        <i class="pe-7s-plugin"></i>
 +
                                                    </div>
 +
                                                    <h3>Long-Term Sustainability</h3>
 +
                                                    <p>We made a teacher-friendly curriculum to keep up the momentum even after the competion</p>
 +
                                                </div>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                        <!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
  
−
<h5>What should we write about on this page?</h5>
 
−
<p>On this page, you should write about the Human Practices topics you considered in your project, and document any special activities you did (such as visiting experts, talking to lawmakers, or doing public engagement).</p>
 
  
 +
                                            <div class="section section-we-are-1">
 +
                            <div class="text-area">
 +
                                <div class="container">
 +
                                    <div class="row">
 +
                                        <div class="title">
 +
                                            <h5 class="text-gray"> 1 Column Text &amp; Images</h5>
 +
                                            <h2>Who we are section</h2>
 +
                                            <div class="separator-container">
 +
                                                <div class="separator line-separator">✻</div>
 +
                                            </div>
 +
                                            <p>Creative tim is a tight-knit team of designers, developers, writers, and strategists. For over a decade, we've helped businesses to craft honest, emotional experiences through strategy, brand development, graphic design, web design, and storytelling.</p>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                            <div class="container">
 +
                                <div class="row">
 +
                                    <div class="col-md-4 col-md-offset-2">
 +
                                        <div class="card">
 +
                                            <img alt="..." src="assets/img/builder/projects/project.jpg">
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-md-4">
 +
                                        <div class="card">
 +
                                            <img alt="..." src="assets/img/builder/projects/project.jpg">
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                        <!-- Section "Our Projects" example 5: Single Line Photos -->
 +
                        <div class="section section-we-made-2 section-with-hover" id="projects2">
 +
                            <div class="projects" style="overflow: hidden;">
 +
                                <div class="text-area">
 +
                                    <div class="title">
 +
                                        <h5 class="text-gray">Example No.5</h5>
 +
                                        <h2>Projects section</h2>
 +
                                        <div class="separator-container">
 +
                                            <div class="separator line-separator">✻</div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                                <div class="info">
 +
                                    <p class="text-center text-gray">One of our best projects outside of America</p>
 +
                                </div>
 +
                                <div class="row scroller" style="-webkit-transform: translateX(-741.4299516908213px);">
 +
                                    <div class="col-lg-3 col-md-6 col-sm-6">
 +
                                        <div class="project">
 +
                                            <img alt="..." src="assets/img/builder/projects/project.jpg">
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-lg-3 col-md-6 col-sm-6">
 +
                                        <div class="project">
 +
                                            <img alt="..." src="assets/img/builder/projects/project.jpg">
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-lg-3 col-md-6 col-sm-6">
 +
                                        <div class="project">
 +
                                            <img alt="..." src="assets/img/builder/projects/project.jpg">
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-lg-3 col-md-6 col-sm-6">
 +
                                        <div class="project">
 +
                                            <img alt="..." src="assets/img/builder/projects/project.jpg">
 +
                                            <a class="over-area color-black" href="#" target="_blank">
 +
                                                <div class="content">
 +
                                                    <h4>America Trip</h4>
 +
                                                    <p>Click to open a new link.</p>
 +
                                                </div>
 +
                                            </a>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                        <!-- End Section "Our Projects" example 5: Single Line Photos -->
 +
                   
 +
                   
 +
                        <!-- Section "Numbers" example 3: Text & Parallax -->
 +
                        <div class="section section-numbers-2" id="numbers2">
 +
                            <div class="parallax pattern-image">
 +
                                <img alt="..." src="assets/img/rubik_background.jpg">
 +
                            </div>
 +
                            <div class="container">
 +
                                <div class="row">
 +
                                    <div class="col-md-8 col-md-offset-2 text-center">
 +
                                        <div class="description">
 +
                                            <div class="title">
 +
                                                <h5>Text &amp; Parallax</h5>
 +
                                                <h2>Numbers Section</h2>
 +
                                                <div class="separator-container">
 +
                                                    <div class="separator line-separator">✻</div>
 +
                                                </div>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                                <div class="clearfix"></div>
 +
                                <div class="row">
 +
                                    <div class="col-md-4">
 +
                                        <div class="card card-plain">
 +
                                            <h3>Customers</h3>
 +
                                            <h5>Enterprises and private</h5>
 +
                                            <div class="number" id="customersNo">
 +
                                                574
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-md-4">
 +
                                        <div class="card card-plain">
 +
                                            <h3>Projects</h3>
 +
                                            <h5>Design, Sketch and Plan</h5>
 +
                                            <div class="number" id="projectsNo">
 +
                                                1.257
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-md-4">
 +
                                        <div class="card card-plain">
 +
                                            <h3>Cities</h3>
 +
                                            <h5>Where you can find our work</h5>
 +
                                            <div class="number" id="citiesNo">
 +
                                                52
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                        <!-- End Section "Numbers" example 3: Text & Parallax -->
  
−
<h5>Inspiration</h5>
+
                   
−
<p>Read what other teams have done:</p>
+
                   
−
<ul>
+
                        <footer class="footer footer-color-black" data-color="black">
−
<li><a href="https://2014.igem.org/Team:Dundee/policypractice/experts">2014 Dundee </a></li>
+
                            <div class="container">
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Policy_Practices_Overview">2014 UC Davis </a></li>
+
                                <nav class="pull-left navbar-burger">
−
<li><a href="https://2013.igem.org/Team:Manchester/HumanPractices">2013 Manchester </a></li>
+
                                    <ul>
−
<li><a href="https://2013.igem.org/Team:Cornell/outreach">2013 Cornell </a></li>
+
                                        <li>
−
</ul>
+
                                            <a href="#">
 +
                                                Home
 +
                                            </a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="#">
 +
                                                Contact
 +
                                            </a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="#">
 +
                                              Blog
 +
                                            </a>
 +
                                        </li>
 +
                                    </ul>
 +
                                </nav>
 +
                                <div class="social-area pull-right">               
 +
                                    <a class="btn btn-social btn-facebook btn-simple">
 +
                                        <i class="fa fa-facebook-square"></i>
 +
                                    </a>
 +
                                    <a class="btn btn-social btn-twitter btn-simple">
 +
                                        <i class="fa fa-twitter"></i>
 +
                                    </a>
 +
                                </div>
 +
                                <div class="copyright">
 +
                                    © 2015 William & Mary iGEM
 +
                                </div>
 +
                            </div>
 +
                        </footer>
 +
        </div>
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
        <!--  Here are the examples of the content for each project that is viewed inside of the page. You can create how many projects you want if you set the specific #id     
 +
        -->
 +
       
 +
        <div class="project-content" id="und">
 +
          <div>
 +
            <div class="project-details">
 +
              <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 +
              <div class="container">
 +
                <div class="project-title">
 +
                    <h5>Collaboration With Univerity of Maryland<span>.</span></h5>
 +
                    <h2>title</h2>
 +
                </div>
 +
                <div class="row">
 +
                  <div class="col-md-4">
 +
                    <div class="project-text">
 +
                      <p><span>Detail</span>1</p>
 +
                      <p><span>Detail</span>2</p>
 +
                      <p><span>Detail</span>3</p>
 +
                      <p><span>Detail</span>4</p>
 +
                      <br>
 +
                      <p>text</p>
 +
                      <p>text</p>
 +
                    </div>
 +
                  </div>
 +
                  <div class="col-md-8">
 +
                    <div class="row">
 +
                        <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                          <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
  
−
<h3>Integrated Human Practices</h3>
+
        <div class="project-content" id="uga">
 +
          <div>
 +
            <div class="project-details">
 +
              <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 +
              <div class="container">
 +
                <div class="project-title">
 +
                  <h5 >Collaboration With University of Georgia</h5>
 +
                  <h2>title</h2>
 +
                  <div class="separator-container">
 +
                      <div class="separator line-separator">✻</div>
 +
                    </div>
 +
                    <p>text</p>
 +
                </div>
 +
                <div class="row">
 +
                  <div class="col-md-10 col-md-offset-1">
 +
                    <div class="article">
 +
                      <div class="project-image">
 +
                        <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                      </div>
 +
                      <div class="project-text">
 +
                          <h3>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce<span>.</span></h3>
 +
                          <p>text</p>
 +
                      <p>etc<span>.</span></p>
 +
                      </div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
  
−
<p>Do you want to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Integrated Human Practices award</a>? Make it easy for the judges to find any wiki content that is relevant to this prize. Highlight this content with a header or separate section.</p>
+
        <div class="project-content" id="cambridge">
 +
          <div>
 +
            <div class="project-details">
 +
              <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 +
              <div class="container">
 +
                <div class="project-title">
 +
                  <h5 >Collaboration With Cambridge University</h5>
 +
                  <h2>title</h2>
 +
                  <div class="separator-container">
 +
                      <div class="separator line-separator">✻</div>
 +
                    </div>
 +
                    <p>text</p>
 +
                </div>
 +
                <div class="row">
 +
                  <div class="col-md-10 col-md-offset-1">
 +
                    <div class="article">
 +
                      <div class="project-image">
 +
                        <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                      </div>
 +
                      <div class="project-text">
 +
                          <h3>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce<span>.</span></h3>
 +
                          <p>text</p>
 +
                      <p>etc<span>.</span></p>
 +
                      </div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
       
 +
        <div class="body-layer"></div>
 +
    </body>
 +
   
 +
   
 +
   
 +
    <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/jquery1112minJS?
 +
action=raw&ctype=text/javascript"></script>
 +
   
 +
    <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/bootstrapJS?
 +
action=raw&ctype=text/javascript"></script>
 +
 
  
−
<h3>Education and Public Engagement</h3>
+
    <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/jquerywaypointsminJS?
 +
action=raw&ctype=text/javascript"></script>
  
−
<p>Do you want to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Education and Public Outreach award</a>? Make it easy for the judges to find any wiki content that is relevant to this prize. Highlight this content with a header or separate section.</p>
+
    <script type="text/javascript" src="http://presentation.paperplane.io/assets/js/modernizr.js"></script>
  
−
</div>
+
    <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/rubickJS?
 +
action=raw&ctype=text/javascript"></script>
 
</html>
 
</html>

Revision as of 15:44, 17 September 2015

NOISE - W&M iGEM

Our Outreach

Adult Communication

After hearing the community's concerns about SynBio, we held workshops and seminars to clear misconceptions.

Youth Education

Synthetic biology can be a blast with the right approach. The ___ kids at our workshops sure thought so.

Long-Term Sustainability

We made a teacher-friendly curriculum to keep up the momentum even after the competion

1 Column Text & Images

Who we are section

✻

Creative tim is a tight-knit team of designers, developers, writers, and strategists. For over a decade, we've helped businesses to craft honest, emotional experiences through strategy, brand development, graphic design, web design, and storytelling.

...
...
Example No.5

Projects section

✻

One of our best projects outside of America

...
...
...
...

America Trip

Click to open a new link.
...
Text & Parallax

Numbers Section

✻

Customers

Enterprises and private
574

Projects

Design, Sketch and Plan
1.257

Cities

Where you can find our work
52
Collaboration With Univerity of Maryland.

title

Detail1

Detail2

Detail3

Detail4


text

text

...
...
...
...
Collaboration With University of Georgia

title

✻

text

...

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

text

etc.

Collaboration With Cambridge University

title

✻

text

...

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

text

etc.