Difference between revisions of "Team:Madrid-OLM/prueba"

 
(6 intermediate revisions by the same user not shown)
Line 20: Line 20:
 
     </style>
 
     </style>
 
     <body class=" ">
 
     <body class=" ">
        <a id="start"></a>
+
 
         <div class="nav-container ">
+
         <div class="main-container">
            <nav class="bar bar-4 bar--transparent bar--absolute" data-fixed-at="200">
+
<section class="imageblock switchable feature-large space--sm bg--secondary">
 +
 
 
                 <div class="container">
 
                 <div class="container">
                     <div class="row">
+
                     <div class="row justify-content-around">
                        <div class="col-lg-1 col-md-2 col-md-offset-0 col-4">
+
<div class="col-sm-4">
                             <div class="bar__module">
+
                             <h2>Embracing our aptamers</h2>
                                <a href="index.html">
+
                            <p class="lead">
                                    <img class="logo logo-dark" alt="logo" src="img/logo-dark.png" />
+
                              The hardware is the structure that embraces the aptamer to take it to its maximum potentiality. Without an aptamer, our hardware can barely measure anything, and without the hardware, the aptamer is just another molecule.
                                    <img class="logo logo-light" alt="logo" src="img/logo-light.png" />
+
<br><br>The structure of the device has evolved in parallel to the role that the aptamer assumes in the hardware. A good example is how the first prototype has mutated into the final version.
                                </a>
+
                             </p>
                            </div>
+
                             <!--end module-->
+
 
                         </div>
 
                         </div>
                        <div class="col-lg-4 col-lg-offset-0 col-md-5 col-md-offset-0 col-8 col-offset-2">
+
                             <div class="bar__module">
+
                                <a class="btn btn--sm type--uppercase" href="#">
+
<div class="col-sm-4">
                                    <span class="btn__text">
+
                             <h2>More than a piece of hardware</h2>
                                        Try Builder
+
                            <p class="lead">
                                    </span>
+
                                 Depending on the case, a piece of hardware could be only a tool or it could be a bit more than that. When we were brainstorming about how to face the issues related to traditional IoT devices, we concluded that the role of our hardware should walk alongside the aptamer development and integration.
                                </a>
+
                             </p>
                                <a class="btn btn--sm btn--primary type--uppercase" href="#">
+
                                    <span class="btn__text">
+
                                        Buy Now
+
                                    </span>
+
                                 </a>
+
                             </div>
+
                            <!--end module-->
+
 
                         </div>
 
                         </div>
 +
 
                     </div>
 
                     </div>
 
                     <!--end of row-->
 
                     <!--end of row-->
 
                 </div>
 
                 </div>
 
                 <!--end of container-->
 
                 <!--end of container-->
             </nav>
+
             </section>
            <!--end bar-->
+
        </div>
+
        <div class="main-container">
+
 
             <section class="imageblock switchable switchable--switch feature-large bg--dark space--sm">
 
             <section class="imageblock switchable switchable--switch feature-large bg--dark space--sm">
 
                 <div class="imageblock__content col-lg-6 col-md-4 pos-right">
 
                 <div class="imageblock__content col-lg-6 col-md-4 pos-right">
 
                     <div class="background-image-holder">
 
                     <div class="background-image-holder">
                         <img alt="image" src="img/landing-15.jpg" />
+
                         <img alt="image" src="https://static.igem.org/mediawiki/2018/8/84/T--Madrid-OLM--proto.png" />
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
Line 66: Line 56:
 
                     <div class="row">
 
                     <div class="row">
 
                         <div class="col-lg-5 col-md-7 mt--2">
 
                         <div class="col-lg-5 col-md-7 mt--2">
                             <h1>Streamline your workflow with Stack</h1>
+
                             <h1>Our first prototype</h1>
 
                             <p class="lead">
 
                             <p class="lead">
                                 Clean and contemporary style to suit a range of purposes from corporate, tech startup, marketing
+
                                 n our first prototype, the aptamer was just a filter, such that it only trapped the target protein. The role of the hardware was automating the extraction of the target protein from the DNA filter and quantifying the total concentration of the remaining protein at 280nm absorbance, once the pollutants were wiped away.
                                <br class="hidden-xs hidden-sm" /> site to digital storefront.
+
 
                             </p>
 
                             </p>
                            <div class="modal-instance block">
+
  <a class="btn" href="https://2018.igem.org/Team:Madrid-OLM/FirstPrototype">
                                <div class="video-play-icon video-play-icon--sm modal-trigger"></div>
+
<span class="btn__text">First prototype</span>
                                <span>
+
</a>
                                    <strong>Watch Overview</strong>&nbsp;&nbsp;&nbsp;104 Seconds</span>
+
                                <div class="modal-container">
+
                                    <div class="modal-content bg-dark" data-width="60%" data-height="60%">
+
                                        <iframe data-src="https://www.youtube.com/embed/6p45ooZOOPo?autoplay=1" allowfullscreen="allowfullscreen"></iframe>
+
                                    </div>
+
                                    <!--end of modal-content-->
+
                                </div>
+
                                <!--end of modal-container-->
+
                            </div>
+
 
                             <!--end of modal instance-->
 
                             <!--end of modal instance-->
 
                         </div>
 
                         </div>
Line 91: Line 71:
 
             </section>
 
             </section>
 
             <section class="imageblock switchable feature-large space--sm bg--secondary">
 
             <section class="imageblock switchable feature-large space--sm bg--secondary">
 +
 
                 <div class="imageblock__content col-lg-6 col-md-4 pos-right">
 
                 <div class="imageblock__content col-lg-6 col-md-4 pos-right">
 
                     <div class="background-image-holder">
 
                     <div class="background-image-holder">
                         <img alt="image" src="img/landing-19.jpg" />
+
                         <img alt="image" src="https://static.igem.org/mediawiki/2018/5/56/T--Madrid-OLM--final.png" />
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
Line 99: Line 80:
 
                     <div class="row">
 
                     <div class="row">
 
                         <div class="col-lg-5 col-md-7">
 
                         <div class="col-lg-5 col-md-7">
                             <h2>Build flexible, design-driven websites with ease.</h2>
+
                             <h2>The final device</h2>
 
                             <p class="lead">
 
                             <p class="lead">
                                Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away &mdash; Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.
+
                              But the concept of “aptamer as a filter” did not last long, as it was not sensitive enough to our purposes. And it evolved towards a different function.
                            </p>
+
 
 +
<br><br>The second prototype demanded a different role for the aptamer. In this new mission, the aptamer was expected to be part of the sensor. It had to adhere to an electrode and obstruct the electrons flow. So the microfluidic chip needed to be adapted to this demand. And thus, the structure of the hardware changed.
 +
 
 +
<br><br>In this final version, the device is responsible for pumping a variety of solutions and samples through the chip towards the bound aptamer, collecting the resulting data from the electrode.</p>
 +
  <a class="btn" href="https://2018.igem.org/Team:Madrid-OLM/FinalPrototype">
 +
<span class="btn__text">Final Device</span>
 +
</a>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 109: Line 96:
 
                 <!--end of container-->
 
                 <!--end of container-->
 
             </section>
 
             </section>
            <section class="text-center cta cta-4 space--xxs border--bottom ">
+
                <div class="container">
+
                    <div class="row">
+
                        <div class="col-md-12">
+
                            <span class="label label--inline">Hot!</span>
+
                            <span>Over 290 interface blocks, 140 demo pages and Variant Page Builder.
+
                                <a href="#">Purchase Stack</a> for $18 USD.</span>
+
                        </div>
+
                    </div>
+
                    <!--end of row-->
+
                </div>
+
 
                 <!--end of container-->
 
                 <!--end of container-->
             </section>
+
             </footer>
            <section class="text-center">
+
<section class="imageblock switchable switchable--switch feature-large bg--dark space--sm">
                 <div class="container">
+
                 <div class="imageblock__content col-lg-6 col-md-4 pos-right">
                     <div class="row justify-content-center">
+
                     <div class="background-image-holder">
                         <div class="col-md-10 col-lg-8">
+
                         <img alt="image" src="https://static.igem.org/mediawiki/2018/8/8a/T--Madrid-OLM--Device--000.png" />
                            <h2>All the tools you'll need</h2>
+
                            <p class="lead">
+
                                Whether you’re building a welcome mat for your SaaS or a clean, corporate portfolio, Stack has your design needs covered.
+
                            </p>
+
                        </div>
+
 
                     </div>
 
                     </div>
                    <!--end of row-->
 
 
                 </div>
 
                 </div>
                <!--end of container-->
 
            </section>
 
            <section class="text-center">
 
 
                 <div class="container">
 
                 <div class="container">
 
                     <div class="row">
 
                     <div class="row">
                         <div class="col-md-4">
+
                         <div class="col-lg-5 col-md-7 mt--2">
                            <div class="feature feature-1">
+
                            <h1>The IoT ecosystem</h1>
                                <img alt="Image" src="img/landing-16.jpg" />
+
                            <p class="lead">
                                <div class="feature__body boxed boxed--lg boxed--border">
+
                                As we required an IoT device, it had to satisfy other functionalities. The key one is to upload the acquired data to a cloud server.
                                    <h4>Built With Blocks</h4>
+
 
                                    <p class="lead">
+
<br><br>We have also developed an IoT ecosystem that surrounds the device. We have implemented an iOS app to enable the clients to visualize data on a heat map. We have set up a firebase cloud server to gather the data from our sensors, and a PC application to control directly the final device and test our different protocols </p>
                                        Save time with over 240 carefully styled components designed to showcase your content
+
  <a class="btn" href="https://2018.igem.org/Team:Madrid-OLM/FirstPrototype">
                                    </p>
+
<span class="btn__text">First prototype</span>
                                    <a href="#">
+
</a>
                                        Learn More
+
                             <!--end of modal instance-->
                                    </a>
+
                                </div>
+
                            </div>
+
                            <!--end feature-->
+
                        </div>
+
                        <div class="col-md-4">
+
                            <div class="feature feature-1">
+
                                <img alt="Image" src="img/landing-17.jpg" />
+
                                <div class="feature__body boxed boxed--lg boxed--border">
+
                                    <h4>Modern Aesthetic</h4>
+
                                    <p class="lead">
+
                                        Jump start your project with Stack's diverse array of beautiful pre-built templates
+
                                    </p>
+
                                    <a href="#">
+
                                        Learn More
+
                                    </a>
+
                                </div>
+
                            </div>
+
                            <!--end feature-->
+
                        </div>
+
                        <div class="col-md-4">
+
                            <div class="feature feature-1">
+
                                <img alt="Image" src="img/landing-18.jpg" />
+
                                <div class="feature__body boxed boxed--lg boxed--border">
+
                                    <h4>Beautiful Markup</h4>
+
                                    <p class="lead">
+
                                        With fully documented elements pages that help you customize Stack to your needs
+
                                    </p>
+
                                    <a href="#">
+
                                        Learn More
+
                                    </a>
+
                                </div>
+
                            </div>
+
                             <!--end feature-->
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 189: Line 123:
 
                 <!--end of container-->
 
                 <!--end of container-->
 
             </section>
 
             </section>
            <section class="subscribe-form-2 space--xs">
+
                 
                <div class="container">
+
 
                    <div class="row justify-content-around">
+
 
                        <div class="col-lg-4">
+
  </div>
                            <p class="lead">Subscribe for our monthly newsletter</p>
+
                        </div>
+
                        <div class="col-lg-7">
+
                            <form action="//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=f300c9cce8" data-success="Thanks for signing up.  Please check your inbox for a confirmation email." data-error="Please provide your email address.">
+
                                <div class="row">
+
                                    <div class="col-md-6">
+
                                        <input class="validate-required validate-email" type="email" name="EMAIL" placeholder="Email Address" />
+
                                    </div>
+
                                    <div class="col-lg-4 col-md-6">
+
                                        <button class="btn btn--primary type--uppercase" type="submit">Subscribe</button>
+
                                    </div>
+
                                </div>
+
                                <div style="position: absolute; left: -5000px;" aria-hidden="true">
+
                                    <input type="text" name="b_77142ece814d3cff52058a51f_f300c9cce8" tabindex="-1" value="">
+
                                </div>
+
                            </form>
+
                        </div>
+
                    </div>
+
                    <!--end of row-->
+
                </div>
+
                <!--end of container-->
+
            </section>
+
            <section class="text-center bg--secondary">
+
                <div class="container">
+
                    <div class="row">
+
                        <div class="col-md-12">
+
                            <div class="heading-block">
+
                                <h2>Follow us for updates and more</h2>
+
                            </div>
+
                            <div class="instafeed" data-user-name="mediumrarethemes" data-amount="6" data-grid="6"></div>
+
                            <a class="btn btn--icon bg--instagram type--uppercase" href="#">
+
                                <span class="btn__text">
+
                                    <i class="socicon socicon-instagram"></i>
+
                                    Follow @mrareweb
+
                                </span>
+
                            </a>
+
                        </div>
+
                    </div>
+
                    <!--end row-->
+
                </div>
+
                <!--end of container-->
+
            </section>
+
            <section class="text-center imagebg" data-overlay="3">
+
                <div class="background-image-holder">
+
                    <img alt="background" src="img/landing-20.jpg" />
+
                </div>
+
                <div class="container">
+
                    <div class="row justify-content-center">
+
                        <div class="col-md-8 col-lg-6">
+
                            <div class="cta">
+
                                <h2 class="h1">Build yours now.</h2>
+
                                <p class="lead">
+
                                    Each purchase of Stack comes with six months free support &mdash; and a lifetime of free content and bug-fix updates.
+
                                </p>
+
                                <a class="btn btn--primary type--uppercase" href="#">
+
                                    <span class="btn__text">
+
                                        Purchase on Envato
+
                                    </span>
+
                                    <span class="label">$18 USD</span>
+
                                </a>
+
                            </div>
+
                        </div>
+
                    </div>
+
                    <!--end of row-->
+
                </div>
+
                <!--end of container-->
+
            </section>
+
            <footer class="text-center space--sm footer-5 bg--dark  ">
+
                <div class="container">
+
                    <div class="row">
+
                        <div class="col-md-12">
+
                            <div class="heading-block">
+
                                <ul class="list-inline list--hover">
+
                                    <li>
+
                                        <a href="#">
+
                                            <span>Our Company</span>
+
                                        </a>
+
                                    </li>
+
                                    <li>
+
                                        <a href="#">
+
                                            <span>Locations</span>
+
                                        </a>
+
                                    </li>
+
                                    <li>
+
                                        <a href="#">
+
                                            <span>Products</span>
+
                                        </a>
+
                                    </li>
+
                                    <li>
+
                                        <a href="#">
+
                                            <span>Work With Us</span>
+
                                        </a>
+
                                    </li>
+
                                </ul>
+
                            </div>
+
                            <div>
+
                                <ul class="social-list list-inline list--hover">
+
                                    <li>
+
                                        <a href="#">
+
                                            <i class="socicon socicon-google icon icon--xs"></i>
+
                                        </a>
+
                                    </li>
+
                                    <li>
+
                                        <a href="#">
+
                                            <i class="socicon socicon-twitter icon icon--xs"></i>
+
                                        </a>
+
                                    </li>
+
                                    <li>
+
                                        <a href="#">
+
                                            <i class="socicon socicon-facebook icon icon--xs"></i>
+
                                        </a>
+
                                    </li>
+
                                    <li>
+
                                        <a href="#">
+
                                            <i class="socicon socicon-instagram icon icon--xs"></i>
+
                                        </a>
+
                                    </li>
+
                                </ul>
+
                            </div>
+
                            <div>
+
                                <span class="type--fine-print">Made in Melbourne</span>
+
                                <img alt="Image" class="flag" src="img/flag-2.png" />
+
                            </div>
+
                            <div>
+
                                <span class="type--fine-print">&copy;
+
                                    <span class="update-year"></span> Stack Inc.</span>
+
                                <a class="type--fine-print" href="#">Privacy Policy</a>
+
                                <a class="type--fine-print" href="#">Legal</a>
+
                            </div>
+
                        </div>
+
                    </div>
+
                    <!--end of row-->
+
                </div>
+
                <!--end of container-->
+
            </footer>
+
        </div>
+
 
   
 
   
 
     </body>
 
     </body>
 
</html>
 
</html>
 
{{Madrid-OLM/footer}}
 
{{Madrid-OLM/footer}}

Latest revision as of 03:43, 18 October 2018

Madrid-OLM

Embracing our aptamers

The hardware is the structure that embraces the aptamer to take it to its maximum potentiality. Without an aptamer, our hardware can barely measure anything, and without the hardware, the aptamer is just another molecule.

The structure of the device has evolved in parallel to the role that the aptamer assumes in the hardware. A good example is how the first prototype has mutated into the final version.

More than a piece of hardware

Depending on the case, a piece of hardware could be only a tool or it could be a bit more than that. When we were brainstorming about how to face the issues related to traditional IoT devices, we concluded that the role of our hardware should walk alongside the aptamer development and integration.

image

Our first prototype

n our first prototype, the aptamer was just a filter, such that it only trapped the target protein. The role of the hardware was automating the extraction of the target protein from the DNA filter and quantifying the total concentration of the remaining protein at 280nm absorbance, once the pollutants were wiped away.

First prototype
image

The final device

But the concept of “aptamer as a filter” did not last long, as it was not sensitive enough to our purposes. And it evolved towards a different function.

The second prototype demanded a different role for the aptamer. In this new mission, the aptamer was expected to be part of the sensor. It had to adhere to an electrode and obstruct the electrons flow. So the microfluidic chip needed to be adapted to this demand. And thus, the structure of the hardware changed.

In this final version, the device is responsible for pumping a variety of solutions and samples through the chip towards the bound aptamer, collecting the resulting data from the electrode.

Final Device
image

The IoT ecosystem

As we required an IoT device, it had to satisfy other functionalities. The key one is to upload the acquired data to a cloud server.

We have also developed an IoT ecosystem that surrounds the device. We have implemented an iOS app to enable the clients to visualize data on a heat map. We have set up a firebase cloud server to gather the data from our sensors, and a PC application to control directly the final device and test our different protocols

First prototype