Difference between revisions of "Team:EMW Street Bio"

 
(15 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
<html>
 
<html>
 
<head>
 
<head>
−
<title>Biota Beats - by EMW Streetbio</title>
+
<title>Biota Beats - by EMW Street Bio</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" />
Line 24: Line 24:
  
 
                     <!-- Logo -->
 
                     <!-- Logo -->
−
                         <h1 id="logo"><a href="https://2016.igem.org/Team:EMW_Street_Bio">Biota Beats</a></h1>
+
                         <h1 id="logo"><a href="https://2016.igem.org/Team:EMW_Street_Bio"></a></h1>
  
 
                     <!-- Nav -->
 
                     <!-- Nav -->
−
                         <nav id="nav">
+
                         <nav id="nav" class="row">
−
                             <ul>
+
                             <ul class="5u 6u(narrow)" style="position:absolute; left: 0;">
 +
                                <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Concept">Concept</a></li>
 
                                 <li>
 
                                 <li>
 
                                     <a href="https://2016.igem.org/Team:EMW_Street_Bio/Hardware">Hardware</a>
 
                                     <a href="https://2016.igem.org/Team:EMW_Street_Bio/Hardware">Hardware</a>
 
                                     <ul>
 
                                     <ul>
−
                                        <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Hardware/Player">Record Player</a></li>
 
 
                                         <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Hardware/Incubator">Incubator</a></li>
 
                                         <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Hardware/Incubator">Incubator</a></li>
 
                                         <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Hardware/Records">Microbiome Records</a></li>
 
                                         <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Hardware/Records">Microbiome Records</a></li>
Line 39: Line 39:
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Wetware">Culturing</a></li>
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Wetware">Culturing</a></li>
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Software">Sonification</a></li>
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Software">Sonification</a></li>
−
                                 <li class="break">
+
                                 </ul>
 +
                                <ul class="5u 6u(narrow)" style="position:absolute; right: 0;">
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Team">Team</a></li>
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Team">Team</a></li>
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Engagement">Engagement</a></li>
 
                                 <li><a href="https://2016.igem.org/Team:EMW_Street_Bio/Engagement">Engagement</a></li>
Line 48: Line 49:
 
</div>
 
</div>
 
<!-- Hero -->
 
<!-- Hero -->
−
                    <section id="hero" class="carousel">
+
        <section id="hero" class="carousel">
 +
            <header>
 +
                <h2>Biota Beats is a microbiome record player
 +
                    developed by EMW Street Bio iGEM team.</h2>
 +
            </header>
  
 
             <ul class=panes>
 
             <ul class=panes>
  
 
                 <li>
 
                 <li>
−
                     <img src="https://static.igem.org/mediawiki/2016/9/93/T--EMW_Street_Bio--images_ginkgo.jpg" alt="">
+
                     <img src="https://static.igem.org/mediawiki/2016/e/e6/T--EMW_Street_Bio--images_front1.jpg" alt="">
 
                 </li>
 
                 </li>
  
 
                 <li>
 
                 <li>
−
                     <img src="https://static.igem.org/mediawiki/2016/c/c1/T--EMW_Street_Bio--images_htgaa.jpg" alt="">
+
                     <img src="https://static.igem.org/mediawiki/2016/5/52/T--EMW_Street_Bio--images_front2.jpg" alt="">
 
                 </li>
 
                 </li>
  
 
                 <li>
 
                 <li>
−
                     <img src="https://static.igem.org/mediawiki/2016/9/93/T--EMW_Street_Bio--images_ginkgo.jpg" alt="">
+
                     <img src="https://static.igem.org/mediawiki/2016/7/72/T--EMW_Street_Bio--images_front3.jpg" alt="">
 
                 </li>
 
                 </li>
  
 
                 <li>
 
                 <li>
−
                     <img src="https://static.igem.org/mediawiki/2016/c/c1/T--EMW_Street_Bio--images_htgaa.jpg" alt="">
+
                     <img src="https://static.igem.org/mediawiki/2016/3/32/T--EMW_Street_Bio--images_front4.jpg" alt="">
 
                 </li>
 
                 </li>
  
 
                 <li>
 
                 <li>
−
                     <img src="https://static.igem.org/mediawiki/2016/9/93/T--EMW_Street_Bio--images_ginkgo.jpg" alt="">
+
                     <img src="https://static.igem.org/mediawiki/2016/0/0c/T--EMW_Street_Bio--images_front5.jpg" alt="">
 
                 </li>
 
                 </li>
  
 
             </ul>
 
             </ul>
−
                        <header>
+
            <ul class="actions">
−
                            <h2>Biota Beats is a microbiome record player
+
                <li><a href="#intro" class="button">More</a></li>
−
                            <br />
+
            </ul>
−
                            designed by EMW Streetbio iGEM team.</h2>
+
        </section>
−
                        </header>
+
    </div>
−
                        <p>Super awesome subtitle will go here.</p>
+
−
                        <ul class="actions">
+
−
                            <li><a href="#" class="button">I do nothing - Click me</a></li>
+
−
                        </ul>
+
−
                    </section>
+
−
</div>
+
  
−
    <!-- Features 1 -->
+
    <!-- Features 1 -->
 
     <div class="wrapper">
 
     <div class="wrapper">
 
         <div id="main" class="container">
 
         <div id="main" class="container">
Line 113: Line 112:
 
             </section>
 
             </section>
  
 +
         
 
             <section class="main">
 
             <section class="main">
−
                <div class="spotlight">
 
−
                    <div class="content">
 
−
                        <header class="major">
 
−
                            <h2>The human microbiome</h2>
 
−
                        </header>
 
−
                        <p>In the mirror, we all see ourselves as one whole, individual organism. Wave at your
 
−
                            reflection. Smile. Wiggle your ears. This is who you recognize as ‘you’; but, this
 
−
                            perspective overlooks the trillions of bacteria that live on and inside you, your
 
−
                            microbiome. The earth is teeming with bacteria and other microorganisms, but the place with
 
−
                            the highest density in right in your gut, the human colon.</p>
 
−
 
−
                        <p>So, what are all these organisms doing in your body, and how are you connected? The answers
 
−
                            are still being explored by researchers today, but the recent studies have come to exciting
 
−
                            conclusions. In studying the microbiome, scientists have bred a mouse strain without one, a
 
−
                            blank slate upon which to observe phenotypes of different gut profiles. Experiments involve
 
−
                            the transfer of fecal matter containing a sample of a microbial ecosystem, which comes from
 
−
                            another mouse categorized as having some specific trait. In one study, shy mice donated
 
−
                            stool to microbiome-deficient mice; and, extraordinarily, the recipient mice took on those
 
−
                            personality traits as well.</p>
 
−
 
−
                        <p>In humans, similar studies have been conducted with equally exciting findings. For instance, the
 
−
                            tendency towards being overweight or obese can also be influenced by your microbiota, as
 
−
                            well as countless other complex phenotypes. The network underlying these connections has
 
−
                            been dubbed the “brain-gut-microbiota axis,” composed of the vagus nerve, immune system, and
 
−
                            more.</p>
 
−
 
−
                        <p>Enthusiasm over these findings has already led to visions of a whole new pathway for medical
 
−
                            therapy; one of them is OpenBiome, a nonprofit stool bank, which gathers interesting and
 
−
                            healthy samples from individuals to support research into microbiota and fecal microbiota
 
−
                            transplants (FMT). Provided you pass the rigorous screenings to ensure your sample is
 
−
                            uncontaminated and healthy enough to be of use to the medical community, you could find
 
−
                            yourself a part of this movement too and donate your stool over the course of 60 days!</p>
 
−
                    </div>
 
−
                    <!--
 
−
                </div>
 
−
            </section>
 
−
 
−
            <section id="intro" class="main">
 
−
                <div class="spotlight">
 
−
                    <div class="content">
 
−
                        <header class="major">
 
−
                            <h2>Applications of Biota Beats</h2>
 
−
                        </header>
 
−
                        <p> Something will go here.</p>
 
−
                    </div>
 
−
                    <!-- <span class="image"><img src="images/pic01.jpg" alt="" /></span>-->
 
−
                </div>
 
−
            </section>
 
−
 
−
            <section id="intro" class="main">
 
 
                 <div class="spotlight">
 
                 <div class="spotlight">
 
                     <div class="content">
 
                     <div class="content">
Line 178: Line 128:
 
                         </p>
 
                         </p>
 
                     </div>
 
                     </div>
−
                     <span class="image"><img src="images/system.jpg" alt=""/></span>
+
                     <span class="image"><img src="https://static.igem.org/mediawiki/2016/b/b2/T--EMW_Street_Bio--images-system.jpg" alt=""/></span>
 
                 </div>
 
                 </div>
 
             </section>
 
             </section>
 +
        </div>
 +
    </div>
  
−
            <!-- Second Section -->
+
    <!-- Footer -->
−
            <!--
+
    <div id="footer-wrapper">
−
                                        <section id="second" class="main special">
+
        <div id="footer" class="container">
−
                                            <header class="major">
+
            <header>
−
                                                <h2>Ipsum consequat</h2>
+
                <h2>Contact Us</h2>
−
                                                <p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br />
+
            </header>
−
                                                posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
+
            <div class="row">
−
                                            </header>
+
                <section class="6u 12u(narrower)">
−
                                            <ul class="statistics">
+
                    <form method="post" action="#">
−
                                                <li class="style1">
+
                        <div class="row 50%">
−
                                                    <span class="icon fa-code-fork"></span>
+
                            <div class="6u 12u(mobile)">
−
                                                    <strong>5,120</strong> Etiam
+
                                <input name="name" placeholder="Name" type="text"/>
−
                                                </li>
+
                            </div>
−
                                                <li class="style2">
+
                            <div class="6u 12u(mobile)">
−
                                                    <span class="icon fa-folder-open-o"></span>
+
                                <input name="email" placeholder="Email" type="text"/>
−
                                                    <strong>8,192</strong> Magna
+
                            </div>
−
                                                </li>
+
                        </div>
−
                                                <li class="style3">
+
                        <div class="row 50%">
−
                                                    <span class="icon fa-signal"></span>
+
                            <div class="12u">
−
                                                    <strong>2,048</strong> Tempus
+
                                <textarea name="message" placeholder="Message"></textarea>
−
                                                </li>
+
                            </div>
−
                                                <li class="style4">
+
                        </div>
−
                                                    <span class="icon fa-laptop"></span>
+
                        <div class="row 50%">
−
                                                    <strong>4,096</strong> Aliquam
+
                            <div class="12u">
−
                                                </li>
+
                                <ul class="actions">
−
                                                <li class="style5">
+
                                    <li><input type="submit" value="Send Message"/></li>
−
                                                    <span class="icon fa-diamond"></span>
+
                                    <li><input type="reset" value="Clear form"/></li>
−
                                                    <strong>1,024</strong> Nullam
+
                                </ul>
−
                                                </li>
+
                            </div>
−
                                            </ul>
+
                        </div>
−
                                            <p class="content">Nam elementum nisl et mi a commodo porttitor. Morbi sit amet nisl eu arcu faucibus hendrerit vel a risus. Nam a orci mi, elementum ac arcu sit amet, fermentum pellentesque et purus. Integer maximus varius lorem, sed convallis diam accumsan sed. Etiam porttitor placerat sapien, sed eleifend a enim pulvinar faucibus semper quis ut arcu. Ut non nisl a mollis est efficitur vestibulum. Integer eget purus nec nulla mattis et accumsan ut magna libero. Morbi auctor iaculis porttitor. Sed ut magna ac risus et hendrerit scelerisque. Praesent eleifend lacus in lectus aliquam porta. Cras eu ornare dui curabitur lacinia.</p>
+
                    </form>
−
                                            <footer class="major">
+
                </section>
−
                                                <ul class="actions">
+
                <section class="6u 12u(narrower)">
−
                                                    <li><a href="generic.html" class="button">Learn More</a></li>
+
                    <div class="row 0%">
−
                                                </ul>
+
                        <ul class="divided icons 6u 12u(mobile)">
−
                                            </footer>
+
                            <li class="icon fa-dribbble"><a href="http://www.emwbookstore.com/street-bio/"><span
−
                                        </section>
+
                                    class="extra"></span>EMW Street Bio</a></li>
−
            -->
+
                            <li class="icon fa-twitter"><a href="https://twitter.com/emwbookstore"><span class="extra"></span>emwbookstore</a>
−
 
+
                            </li>
−
            <!-- Get Started -->
+
                            <li class="icon fa-facebook"><a href="https://www.facebook.com/emwbookstore/"><span
−
            <!--
+
                                    class="extra"></span>EMW Bookstore</a></li>
−
                                        <section id="cta" class="main special">
+
                        </ul>
−
                                            <header class="major">
+
                    </div>
−
                                                <h2>Congue imperdiet</h2>
+
                </section>
−
                                                <p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br />
+
            </div>
−
                                                posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
+
        </div>
−
                                            </header>
+
        <div id="copyright" class="container">
−
                                            <footer class="major">
+
            <ul class="menu">
−
                                                <ul class="actions">
+
                <li>&copy; EMW Streetbio and iGEM 2016</li>
−
                                                    <li><a href="generic.html" class="button special">Get Started</a></li>
+
                <li>Design: Thras Karydis &amp; <a href="http://html5up.net">HTML5 UP</a></li>
−
                                                    <li><a href="generic.html" class="button">Learn More</a></li>
+
            </ul>
−
                                                </ul>
+
−
                                            </footer>
+
−
                                        </section>
+
−
            -->
+
 
         </div>
 
         </div>
 
     </div>
 
     </div>
  
−
<!-- Footer -->
+
</div>
−
<div id="footer-wrapper">
+
−
<div id="footer" class="container">
+
−
<header>
+
−
<h2>Contact Us</h2>
+
−
</header>
+
−
<div class="row">
+
−
<section class="6u 12u(narrower)">
+
−
<form method="post" action="#">
+
−
<div class="row 50%">
+
−
<div class="6u 12u(mobile)">
+
−
<input name="name" placeholder="Name" type="text" />
+
−
</div>
+
−
<div class="6u 12u(mobile)">
+
−
<input name="email" placeholder="Email" type="text" />
+
−
</div>
+
−
</div>
+
−
<div class="row 50%">
+
−
<div class="12u">
+
−
<textarea name="message" placeholder="Message"></textarea>
+
−
</div>
+
−
</div>
+
−
<div class="row 50%">
+
−
<div class="12u">
+
−
<ul class="actions">
+
−
<li><input type="submit" value="Send Message" /></li>
+
−
<li><input type="reset" value="Clear form" /></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</form>
+
−
</section>
+
−
<section class="6u 12u(narrower)">
+
−
<div class="row 0%">
+
−
<ul class="divided icons 6u 12u(mobile)">
+
−
<li class="icon fa-twitter"><a href="#"><span class="extra">twitter.com/</span>untitled</a></li>
+
−
<li class="icon fa-facebook"><a href="#"><span class="extra">facebook.com/</span>untitled</a></li>
+
−
<li class="icon fa-dribbble"><a href="#"><span class="extra">dribbble.com/</span>untitled</a></li>
+
−
</ul>
+
−
<ul class="divided icons 6u 12u(mobile)">
+
−
<li class="icon fa-instagram"><a href="#"><span class="extra">instagram.com/</span>untitled</a></li>
+
−
<li class="icon fa-youtube"><a href="#"><span class="extra">youtube.com/</span>untitled</a></li>
+
−
<li class="icon fa-pinterest"><a href="#"><span class="extra">pinterest.com/</span>untitled</a></li>
+
−
</ul>
+
−
</div>
+
−
</section>
+
−
</div>
+
−
</div>
+
−
<div id="copyright" class="container">
+
−
<ul class="menu">
+
−
<li>&copy; EMW Streetbio and iGEM 2016</li>
+
−
                            <li>Design: Thras Karydis &amp; <a href="http://html5up.net">HTML5 UP</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
 
+
−
</div>
+
  
 
<!-- Scripts -->
 
<!-- Scripts -->
Line 302: Line 194:
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/jquery_min_js?action=raw&ctype=text/javascript"></script>
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/jquery_min_js?action=raw&ctype=text/javascript"></script>
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/jquery_dropotron_min_js?action=raw&ctype=text/javascript"></script>
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/jquery_dropotron_min_js?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/jquery_scrollex_min_js?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/jquery_scrolly_min_js?action=raw&ctype=text/javascript"></script>
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/skel_min_js?action=raw&ctype=text/javascript"></script>
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/skel_min_js?action=raw&ctype=text/javascript"></script>
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/util_js?action=raw&ctype=text/javascript"></script>
 
<script src="https://2016.igem.org/Team:EMW_Street_Bio/assets/js/util_js?action=raw&ctype=text/javascript"></script>

Latest revision as of 02:57, 20 October 2016

Biota Beats - by EMW Street Bio

Concept

The combination of arts and science captures our imaginations with compelling narratives of initiative and innovation. People go beyond traditional ways to work in whatever medium best fits their skills and messages. By rooting stories in authenticity, people can spark emotion and action, transmit values and information, foster collaboration, and invent the future.

Lifeforms inhabiting the surface of our bodies need a form of communication for people to understand the information those lifeforms contained. What if we can hear the physical attributes of a microbiota? Music, as a universal language, suggests a certain wholeness. Sonification of the microbiome is an attempt to engage the public and provide a better understanding of the random nature of gene expression, cellular changes, and bacterial evolutions. Such an undertaking can bring personal understanding to what is going on with the surface of our bodies.

What if you could make music from your microbiota?

That’s what our community biology lab at EMW Street Bio wanted to find out. Our team has built a record player called Biota Beats that can hold a petri dish plated with cultures from the human microbiome. Currently, a still image is taken of the colonies and translated into sound by a program coded by one of our teammates, but the ultimate vision for Biota Beats is real-time tracking of colonies and conversion of a video into sound.
With Biota Beats, you’ll be able to listen to music from different cultures!