Difference between revisions of "Team:Valencia UPV/pruebaSeminarioBlack6"

 
(33 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Valencia_UPV/bootstrap.css}}
 
{{Valencia_UPV/bootstrap.css}}
−
<!--{{Valencia_UPV/bootstrapMin.css}}-->
 
 
{{Valencia_UPV/custom.css}}
 
{{Valencia_UPV/custom.css}}
 
{{Valencia_UPV/flickity.css}}
 
{{Valencia_UPV/flickity.css}}
Line 17: Line 16:
 
#content { margin-left:0px; margin-top:-30px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-30px; padding:0px; width:100%;}
  
−
</style>
 
  
−
    <head>
 
−
        <meta charset="utf-8">
 
−
        <title>Stack Multipurpose HTML Template</title>
 
−
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
−
        <meta name="description" content="Site Description Here">
 
−
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700%7CMerriweather:300,300i" rel="stylesheet">
 
−
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
−
        <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
 
−
        <link href="https://2018.igem.org/Template:Valencia_UPV/fontAwesome?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
  
 +
</style>
  
 +
<head>
 +
  <meta charset="utf-8">
 +
  <title>Stack Multipurpose HTML Template</title>
 +
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
  <meta name="description" content="Site Description Here">
 +
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700%7CMerriweather:300,300i" rel="stylesheet">
 +
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 +
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
 +
  <link href="https://2018.igem.org/Template:Valencia_UPV/fontAwesome?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
 
 +
</head>
  
−
       
 
−
    </head>
 
−
  <body class="" style="background-color:#353535;">
 
−
        <a class="anchorOffset" id="start"></a>
 
  
  
−
<!--------- NAVBAR-------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!-- ESTE ES EL CODIGO DE LA IMAGEN DE LA ESQUINA DERECHA
  
 +
He puesto justo debajo los atributos height y width a 200 píxeles
 +
por defecto pero se puede modificar. Con esos valores, cualquier foto
 +
que pongas se va a ver con un tamaño de 200x200.
  
−
     
+
-->
 +
                                     
 +
<div style="
 +
    position: absolute;
 +
    padding-right: 1em;
 +
    padding-bottom: 1em;
 +
    padding-left: 1em;
 +
    z-index: 99;
 +
    width: 100%;
 +
    text-align: right;
 +
">
  
  
 +
<img style="
 +
    margin: 0 !important;
 +
    width: 200px;
 +
    height: 200px;
 +
" src="https://static.igem.org/mediawiki/2018/b/bc/T--Valencia_UPV--TROFEOGIF.jpeg">
  
−
<!------------CONTENEDOR PRINCIPAL ---------------------------------------------------------------------------------------------------------------------------------->
 
  
−
 
−
<div class="main-container">
 
−
   
 
−
            <section style="
 
−
; ; background-size: 100%;height: 44.2em;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
 
−
<div class="main-container" style="
 
−
height: 100%;">
 
−
<center style="
 
−
height: 100%;">
 
−
<div class="col-md-10" style="
 
−
  height: 100%;margin-top: 4em;">
 
−
  <div id="logoPrinteria" class="item" style="
 
−
    background-image: url(https://static.igem.org/mediawiki/2018/3/3d/T--Valencia_UPV--SoftwareFondoUPV2018.jpeg);
 
−
    height: 100%;
 
−
    width: 100%;background-attachment: fixed;background-size: cover;"><img src="https://static.igem.org/mediawiki/2018/thumb/c/c0/T--Valencia_UPV--SoftwareTextoUPV2018.jpeg/1200px-T--Valencia_UPV--SoftwareTextoUPV2018.jpeg.png" style=" margin-top: 0px;">
 
−
      <a class="btn down inner-link active" href="#story" style="font-size: 82%;right: 50%;/* position: fixed; *//* bottom: 7%; */top: 85.2%;z-index: 99;background-color: white;position: absolute;border-radius: 80%;width: 3.8em;height: 3.8em;padding: 0;padding-top: 14px;">
 
−
        <i class="stack-interface stack-down-open-big"></i>
 
−
      </a>
 
−
    </div>
 
−
</div>
 
−
</center>
 
−
</div><div class="all-page-modals"></div><div class="all-page-modals"></div>
 
−
<div class="all-page-modals"></div>
 
−
</section>
 
 
</div>
 
</div>
−
<a class="anchorOffset" id="story"></a>
 
−
<section class="feature-large" style="padding-top: 6em; padding-bottom: 50px; outline: none;" data-scroll-id="story" tabindex="-1">
 
−
  <div class="container">
 
−
      <div class="row">
 
−
        <div class="col-md-3" style="
 
−
            margin-left: 0em;
 
−
            padding-right: 0px;
 
−
            padding-left: 0.2em;">
 
−
            <div class="tabs-container tabs--vertical page-navigator" style="position: -webkit-sticky;position: sticky;padding-bottom: 0px;margin-top: 11.4em;">
 
−
              <h4 style="
 
−
                  padding-left: 1em;
 
−
                  ">Index</h4>
 
−
              <ul class="lateral">
 
−
                  <li class="lateral">
 
−
                    <div class="tab__title" style="
 
−
                        line-height: 1.3em;
 
−
                        ">
 
−
                        <a href="#models" class="lateral inner-link" style="
 
−
                          color: #353535;
 
−
                          opacity: 1;
 
−
                          ">Models &amp; Experiments</a>
 
−
                         
 
−
                    </div>
 
−
                  </li>
 
−
                  <li class="lateral">
 
−
                    <div class="tab__title" style="
 
−
                        line-height: 1.3em;
 
−
                        ">
 
−
                        <a href="#simtool" class="lateral inner-link" style="
 
−
                          color: #353535;
 
−
                          opacity: 1;
 
−
                          ">Simulation Tool</a>
 
−
                    </div>
 
−
                  </li>
 
−
                  <li class="lateral">
 
−
                    <div class="tab__title" style="
 
−
                        line-height: 1.3em;
 
−
                        ">
 
−
                        <a href="#references" class="lateral inner-link" style="
 
−
                          color: #353535;
 
−
                          opacity: 1;
 
−
                          ">References</a>
 
−
                    </div>
 
−
                  </li>
 
−
              <!--</ul>
 
−
              <ul class="tabs-content">-->
 
−
              </ul>
 
−
            </div>
 
−
        </div>
 
−
        <div class="col-md-9 col9Attr" style="padding-left: 6em;padding-right: 2em;">
 
−
            <div>
 
−
              <a class="anchorOffset" id="Intro"></a>
 
−
              <h3>Printeria Controller</h3>
 
−
             
 
−
              <p>
 
−
When it comes to automating the process of designing and printing genetic circuits in the lab, there is no denying that Printeria facilitates those tasks for both the average and the experienced user. But, without an interface to define all the necessary parameters, keep track of the device’s inventory, and monitor all of the steps of the process, that would not be possible.
 
  
−
</p>
+
<!---->
−
<p>
+
−
We aim to solve that with Printeria Controller, an intuitive software that provides a user-friendly interface meant for all kinds of users, so that everyone can have access to the capabilities of Printeria. This controller help us to achieve the goal of our project: Make synthetic biology easier.
+
  
−
</p>
 
−
<h3>Design Considerations</h3>
 
−
<h4> A web application </h4>
 
−
<p>Scientists nowadays use computers in the lab to take notes of their experiments, do research, make measurements from the laboratory devices… So we thought, why don’t they also use Printeria from the lab computer? That way, extra devices won’t be necessary. Once that decision was made, we found a setback: installing software in the computer and setting it all up can be very time-consuming, and sometimes scientists rely on a system administrator in order to do so. That’s why we opted for a web application implemented in a Raspberry PI inside Printeria. This approach, solved both the problem of installing the software and the problem of administering it in several computers, because once it’s installed, it will only be necessary to monitor the server. </p> <p>When deciding which set of technologies will suit best this kind of application, we had several options in mind, and the key aspects we were searching for were:</p><ul style="
 
−
padding-bottom: 2e;
 
−
font-size: 16px;"><li>Modern technologie</li><li>Reduced computational workload</li><li style="
 
−
padding-bottom: 1em;">The use of versatile programming languages.</li></ul><p>That’s why we chose the MEAN stack, an open source framework to develop dynamic web applications. This framework, backed by google, provides a highly reliable and scalable infrastructure, and all the components of the stack are compatible with JavaScript, one of the most used programming languages nowadays. </p><p>The MEAN stack is composed of MongoDB, Express.js, Angular.js and Node.js. With all those technologies we were able to develop all the layers of our application from the client-side to the server-side with ease and flexibility.</p><p></p>
 
−
                <p>
 
−
                We used MEAN stack, an open source framework to develop dynamic web applications in JavaScript. We chose this technology because it is very flexible, it allowed us to test and upload the application in the cloud easily, and because it uses only one language,  JavaScript, both in the server-side and the client-side, wich made it very fast to develop.
 
−
            </p>
 
−
<video loop="" id="landing-page-video" class="landing-video" style="width: 100%;" playsinline="" autoplay="" muted="">
 
−
                                        <source src="https://static.igem.org/mediawiki/2018/d/d2/T--Valencia_UPV--njFormUPV2018.mp4" type="video/mp4">
 
−
                                      </video>
 
  
−
<p>
 
−
It’s composed with MongoDB, our database, Express.js, a web application framework for Node.js, Angular.js, that runs in the browser JavaScript, and Node.js, where server-side is executed in JavaScript outside the browser.
 
−
</p>
 
  
−
<h4>Definition of Requirements</h4>
+
<div class="t-cover" style="
−
             
+
height: 100vh; margin-top: -20px;background-color: #DCDEDC;">
−
              <p>
+
−
We used SCRUM, an agile framework to improve productivity. We talked and discussed with biotechnologists and possible users about what features would the controller be useful to have, and we listed them in a backlog, categorizing them by priority. Then the computer scientist decided the amount of work required for the first sprint.
+
  
−
</p>
 
−
<p>
 
−
Every week a meetup was made to update to all the team the progress that was made and to generate feedback in order to apply changes if needed. Once we achieved the goals of each sprint, we decided new backlog features to add to the software. This way, we achieved the team and user satisfaction because they saw the breakthrough and they could actively get involved in the development.
 
  
−
</p>
 
  
−
</div>
 
  
−
<div>
 
−
              <a class="anchorOffset" id="Req"></a>
 
−
             
 
−
<h3> Software flow </h3>
 
−
<p>
 
−
When the user first access to Printeria Controller he has to register in order to have a registry of all of his experiments and save his configurations to ease future printings. We decided it would be useful for the user to know which person has done a determinate job in the past, see whose job is now being printed or before his, and adjust a specific configuration for the experiments so every time he wants to print something he would not have to configure it again, Printeria Controller does for him.
 
  
−
                </p>
+
<div id="media-box">
−
                <p>
+
−
                Once he is registered, he would be able to create a “New Job”, a genetic circuit, entering a name and a description for the experiment. He can choose from a wide variety of parts allocated in our database to design a Transcriptional Unit. This parts are represented following the SBOL standard visual symbols. Information about the parts such "p" or "dm" is displayed in the info button if it is needed. More advanced options are provided, such as cycle configuration, in the “Advanced Mode”. With these options the user will be able to select the exact sequence of cycles, the time spent on each of the zones and the temperature, thus defining the instructions for the droplets.
+
−
            </p>
+
  
−
<p>
 
−
When all the data about the experiment is fulfilled, a modelling simulation can be made before the experiment starts. First of all, the software will collect all the necessary information about the experiment and will create a string to be sent through all the layers of the application till it reaches the Backend. Here, a python script will be executed and all the data will be generated. Finally, after the modeling results have been stored, a link to their location will be sent to the Frontend in order to be displayed in dynamic charts, giving the user the possibility to download or print them.
 
−
</p>
 
  
−
<p>
+
<video loop="" id="landing-page-video" class="landing-video" style="position:absolute;width: 100%;" playsinline="" autoplay="" muted="">
−
Among the printeria options, the possibility of save the genetic circuit in a public recipes repository stands out. This repository is full of recipes added by Printeria users that can be printed in our device at any time. The recipes contain all the information about already made experiments and the results that were obtained, including charts added by the user after an experiment has been done, dates of the experiments, number of times they have been replicated and of course information about the biological parts used. Those recipes can also be quickly printed if it is needed to add them to a report, for example.
+
                                        <source src="https://static.igem.org/mediawiki/2018/c/cc/T--Valencia_UPV--VideoHome.mov" type="video/mp4">
−
</p>
+
                                      </video>
 +
                                    <center style="
 +
height: 100%;
 +
/* right: 14em !important; *//* position: absolute; *//* top: 81%; *//* padding-left: 31em; */">
 +
<a class="btn down inner-link active" href="#story" style="
 +
;;
 +
font-size: 82%;/* position: fixed; *//* bottom: 7%; */; top: 80vh;z-index: 93;background-color: white;position: relative;border-radius: 80%;width: 3.8em;height: 3.8em;padding: 0;padding-top: 14px;">
 +
            <i class="stack-interface stack-down-open-big"></i>
 +
        </a>
 +
</center></div>
 +
</div>
 +
<div class="main-container" style=""><row>
  
−
<p>
 
−
Recipes can be very useful for non-scientific users. They can just search easily a functionality that they want the bacteria to express, for example a fluorescent red bacteria, and just send it to print. Bio artists can benefit from this functionality, as well as students who want to recreate an experiment done by their teacher.
 
−
</p>
 
  
−
<p>
+
<!-------------------------------IMAGEN PRINCIPAL------------------------------------------------>
−
After a recipe or a job has been selected to be printed, the inventory will be checked in order to confirm that the experiment can be executed with the available parts.
+
  
−
</p>
 
−
 
−
<p>
 
−
The inventory provides a graphical representation of the wheel that can be found inside of our device, Printeria, with all the cartridges and their contents. The content of the cartridges can be modified, refilled and deleted in order to reflect the changes that are made in the real wheel.
 
−
</p>
 
  
−
<p>
 
−
The wheel distribution is the following:
 
−
</p>
 
−
<ul>
 
−
<li>3 for promoters. </li>
 
−
<li>3 for RBSs.</li>
 
−
<li>4 for CDSs.</li>
 
−
<li>2 for terminators. </li>
 
−
<li>2 for bacteria.</li>
 
−
<li>2 for buffers.</li>
 
−
<li>4 for enzima.</li>
 
−
<li>6 for water and alcohol.</li>
 
−
</ul>
 
  
−
<p>
 
−
The wheel cartridge distribution was made accordingly to Printeria needs and capabilities. We were aware that the parts couldn’t remain much time at room temperature, and because our hardware device nowadays doesn’t have a refrigerator, the maximum number of parts that could remain on it are two, given that one reaction takes ~4 hours. Nevertheless this fact, we added extra holes for cartridges to add them when they are needed if they are preserved in a refrigerator until the job is sent to be printed. Additionally, water and alcohol cartridges are included to clean the surface of the PCB automatically after every reaction.
 
−
</p>
 
−
<p>
 
−
The inventory also gives the user the possibility to include parts in the repository either one by one with user-friendly forms for each of the parts or all at once by using a csv (comma-separated values) processing script, allowing the user to load thousands of parts and recipes. The usual workflow would be defining all the parts or recipes to be stored beforehand in Microsoft Excel or another spreadsheet software following the format guidelines, exporting the file in csv format, pasting the contents of the file inside the text form and selecting the type of content to be introduced: Recipes, Promoters, RBSs, CDSs or Terminators.
 
  
−
</p>
+
<!----------------------EMPIEZA LA SECCIÓN DE DEBAJO DE LA IMAGEN ----------------------------->
−
<p>
+
<div class="col-md-12" style="
−
After a recipe or a job has been sent to be printed, it will be placed in the job queue. This way, the user can follow the experiment and see in real-time how it goes through all the steps of the process.
+
z-index: 99;
−
</p>
+
position: relative;width: 100%;padding-left: 0;padding-right: 0;">
−
<p>
+
−
In order to manage the job queue and the communication with the device, we have implemented a heartbeat mechanism. When Printeria Controller is started for the first time, a script is executed, and it will remain sending periodic signals till the device is turned off. This way, we have been able not only to control that the job queue does all the necessary checks before printing a job, but also to retrieve all the information sent from the device and to store it, everything done automatically.
+
  
−
</p>
+
<section class="imageblock " style="
−
<p>
+
padding-bottom: 0px !important;
−
When the job has just entered the job queue, it is marked as “To Do”, allowing the user to make modifications or delete the job. When there are no jobs in execution, the next job is dequeued and the printing process can start, thus being marked as “Doing”, only  giving the possibility to cancel it. After the job has been correctly printed, it will be marked as “Done”, and it will provide the generated results.
+
height: 722px;
 +
padding-bottom: 24px;
 +
;background-color: #DCDEDC;
 +
"><a class="anchorOffset" id="story" data-scroll-id="story" tabindex="-1" style="outline: none;"></a><row>
 +
               
 +
               
 +
<div class=" col-lg-6 col-md-6" style="
 +
float: left !important;
 +
padding-right: 0px;
 +
padding-left: 0px;
 +
position:  relative;
 +
float: left;">
 +
                    <div class="row" style="
 +
padding: 5em;
 +
;
 +
display: block;
 +
position: absolute;
 +
height: 100%;
 +
/*! background-color: #DCDEDC; */
 +
">
 +
                        <div class="col-lg-12 col-md-12 mt--12" style="
 +
padding-right: 3em;
 +
display: block;">
 +
                           
 +
                     
 +
                            <div class="modal-instance block">
 +
                               
 +
                               
 +
                               
 +
                                <!--end of modal-container-->
 +
                            </div>
 +
                            <!--end of modal instance-->
 +
                        </div>
 +
                    </div>
 +
<a href="https://2018.igem.org/Team:Valencia_UPV/Description"><img alt="image" src="https://static.igem.org/mediawiki/2018/e/e0/T--Valencia_UPV--ImagenHomeIzq2UPV2018.png" style="
 +
margin-bottom: 0px !important;width: 132em;height: auto;margin-top: 0em;border-radius: 0;overflow;overflow: hidden;" class="visible-xs"></a><a href="https://2018.igem.org/Team:Valencia_UPV/Description"><img alt="image" src="https://static.igem.org/mediawiki/2018/2/2b/T--Valencia_UPV--ImagenHomeIzqUPV2018.png" style="width: 132em;height: auto;margin-top: 0em;border-radius: 0;overflow;overflow: hidden;" class="hidden-xs"></a>
 +
</div>
 +
<div class=" col-lg-6 col-md-6 pos-left" style="
 +
padding-right: 0px;
 +
padding-left: 0px;
 +
position: relative;
 +
height: 100%;
 +
background-color: #DCDEDC;
 +
float: right;">
 +
<a href="https://2018.igem.org/Team:Valencia_UPV/Description"><img alt="image" src="https://static.igem.org/mediawiki/2018/1/12/T--Valencia_UPV--ImagenHomeDerUPV2018.png" style="width: 132em;height: auto;margin-top: 0em;border-radius: 0;overflow;overflow: hidden;" class="hidden-xs"></a>
 +
<img alt="image" src="https://static.igem.org/mediawiki/2018/8/87/T--Valencia_UPV--ImagenHomeDer2UPV2018.png" style="width: 132em;height: auto;margin-top: 0em;border-radius: 0;overflow;overflow: hidden;" class="visible-xs">
  
−
</p>
+
                   
 +
                    <!--end of row-->
 +
                </div>
 +
                <!--end of container--></row>
 +
            </section>
 +
<section class="" style="
 +
padding-top: -1px;
 +
padding-bottom: 0px !important;
 +
height: 722px;
 +
padding-bottom: 24px;
 +
;"><div style="
 +
float: left;">
 +
               
 +
               
 +
<div class=" col-lg-6 col-md-6" style="
 +
top: -7.5em;float: left !important;
 +
padding-right: 0px;
 +
padding-left: 0px;
 +
position:  relative;
 +
float: left;">
 +
                    <img alt="image" loop="infinite" src="https://static.igem.org/mediawiki/2018/archive/4/46/20181017075815%21T--Valencia_UPV--gifhomeUPV2018.jpeg" style="
 +
float: left;
 +
margin-bottom: 0px !important;width: 132em;height: auto;margin-top: 0em;border-radius: 0;overflow;overflow: hidden;">
 +
</div>
 +
<div class=" col-lg-6 col-md-6" style="
 +
top: -7.5em;float: right !important;
 +
padding-right: 0px;
 +
padding-left: 0px;
 +
position:  relative;
 +
float: left;">
 +
                    <div style="
 +
width: 100%;
 +
height: 16%;"><h1 style="
 +
padding-top: 1.8em !important; padding-left: 2em !important; margin: 0em !important; height: 87% !important; margin-bottom: 11em !important;margin-left: 6em; margin-top: 5em; padding-right: 5em !important; /* font-size: 18px !important; */; width: 102%; overflow-x: hidden !important; padding: 0; height: 100%; overflow: scroll; letter-spacing: 0px; line-height: 27px !important; color: white; position: absolute; left: 0em; z-index: 20;">Abstract</h1><p style="
 +
padding-top: 9.5em !important;
 +
padding-left: 6em !important;
 +
margin: 0em !important;
 +
height: 87% !important;
 +
margin-bottom: 11em !important;margin-left: 6em;
 +
margin-top: 5em;
 +
padding-right: 5em !important;
 +
font-size: 18px !important;
 +
width: 102%;
 +
overflow-x: hidden !important;
 +
padding: 0;
 +
height: 100%;
 +
overflow: scroll;
 +
letter-spacing: 0px;
 +
line-height: 27px !important;
  
−
</div>
+
color: white;
 +
    position: absolute;
 +
    left: 0em;
 +
    z-index: 20;">
 +
                              Access to Synthetic Biology by an interested layperson is currently hampered by several barriers, including a required background knowledge and availability of expensive and often bulky technological equipment.  <font size="+1"><b>Printeria</b></font>  is a fully-equipped bioengineering device able to automate the process of printing genetic circuits in bacteria but made as simple and easy to operate as a domestic desktop printer. It breaks down these barriers using a digital microfluidic system creating little droplets that can be mixed and moved across predefined electrode paths on a PCB surface. Printeria combines this novel system with Golden Gate Technology, low-cost sensors and electronics, and a user-friendly software application. In this way, the user is capable of assembling DNA parts in a one-step reaction and control all steps: from the parts assembly and transformation to perform experiments of the printed genetic circuit with high accuracy.
 +
Printeria opens the door to a world of applications affordable for the general public.
 +
                            </p></div><img alt="image" loop="infinite" src="https://static.igem.org/mediawiki/2018/3/37/T--Valencia_UPV--ImagenHomeNegroDerUPV2018.jpeg" style="
 +
margin-bottom: 0px !important;width: 132em;height: auto;margin-top: 0em;border-radius: 0;overflow;overflow: hidden;">
 +
</div>
  
−
+
                <!--end of container--></div>
−
            <div>
+
            </section></div>
−
              <a class="anchorOffset" id="Future"></a>
+
−
              <h3>Future</h3>
+
−
             
+
−
              <p>
+
−
In future lines of development, we pretend to add more features in order to make a more powerful Controller. The most significant of them will be the possibility of a Level 2 assembly. In the New Job tab, users will be able to choose a second Transcriptional Unit as an extra element of the experiment, opening a wider range of possibilities.
+
  
−
</p>
 
−
<p>
 
−
The more data we have, the more precise our experiments can be. Therefore, if data about the experiments made in other Printerias was in our hands, apart of having a wider range of different experiments, we could achieve more precision at doing an specific experiment that has already been done by other scientists on their Printerias. That is one of our goals, improving the Recipes tab by adding recipes with information about results of experiments done in another Printeria. Thus, charts and statistics with the average results of experiments could be generated and consulted by the user.
 
  
 +
<!--------------------------------------------TEXTO------------------------------------------------>
  
−
</p>
 
−
 
−
<p>
 
−
When a biological part runs out it’s possible that the user wants to buy more of it for future experiments. We thought that would be very useful that the application offers the user prices of the element from different suppliers, so he can directly contact with them if he needs to.
 
  
−
                </p>
 
−
                <p>
 
−
                Finally, to achieve a better user experience we will implement a functionality to send an e-mail to the user when its job is finished, because, maybe he is not in the lab at the moment, and that way he doesn’t have to worry about his job.
 
  
−
            </p>
+
   
 +
<div class="container hashlink" tabindex="-1" style="outline: none;position: relative;">
  
−
 
  
−
</div>
 
−
             
 
  
 +
                                   
 +
                                   
 +
<div class="col-md-12" style="padding-top: 1em; padding-right: 0em; padding-left: 0em; position: relative; margin-right: 11em; outline: none;" tabindex="-1">
  
 +
<div style="
 +
margin-top: -14px;"><img src="https://static.igem.org/mediawiki/2018/5/55/T--Valencia_UPV--EsquemaHomeUPV2018.png" style="
 +
margin-bottom: 0px !important;
 +
margin-top: -8em;"><div><a href="https://2018.igem.org/Team:Valencia_UPV/Software"><div style="
 +
position: relative;
 +
z-index: 50;
 +
float: left; width: 52%;;"><img src="https://static.igem.org/mediawiki/2018/b/b5/T--Valencia_UPV--EsquemaHomeSoftUPV2018.png" style="
 +
float: left;
 +
margin-top: 0;
 +
  /* width: 56%; */">
 +
<div class="blue" style="
 +
opacity: 0.2;
 +
height: 100%;
 +
width: 100%;
 +
position: absolute;"></div>
 +
</div></a></div><div><a href="https://2018.igem.org/Team:Valencia_UPV/Parts"><div style="
 +
position: relative; z-index: 50; float: left; width: 47%;;"><img src="https://static.igem.org/mediawiki/2018/5/5a/T--Valencia_UPV--EsquemaHomePartsUPV2018.png" style="
 +
float: right;
 +
margin-top: 0;"><div class="yellow" style="
 +
opacity: 0.2;
 +
height: 100%;
 +
width: 100%;
 +
position: absolute;"></div></div>
  
 +
</a></div>
 +
<a href="https://2018.igem.org/Team:Valencia_UPV/Parts" style="
 +
position: relative; z-index: 50; float: left; width: 52%;;
 +
width: 48%;
 +
float: right;"></a>
  
 +
<a style="
 +
margin-top: 0em;
 +
width: 35%; position: relative; z-index: 50; float: left; /* width: 52%; */;;
 +
float: left;"><img src="https://static.igem.org/mediawiki/2018/1/1c/T--Valencia_UPV--EsquemaHomePrintUPV2018.png" style="
 +
margin-top: 0px;"></a></div><div><a href="https://2018.igem.org/Team:Valencia_UPV/Model"><div style="
 +
position: relative; z-index: 50; float: left; width: 65%;;"><img src="https://static.igem.org/mediawiki/2018/2/2d/T--Valencia_UPV--EsquemaHomeModelUPV2018.png" style="
 +
float: right;
 +
margin-top: 0;"><div class="red" style="
 +
opacity: 0.2;
 +
height: 100%;
 +
width: 100%;
 +
position: absolute;"></div></div>
  
 +
</a></div><div><a href="https://2018.igem.org/Team:Valencia_UPV/Hardware"><div style="
 +
position: relative; z-index: 50; float: left; width: 100%;;"><img src="https://static.igem.org/mediawiki/2018/e/ed/T--Valencia_UPV--EsquemaHomeHardUPV2018.png" style="
 +
float: right;
 +
margin-top: 0;"><div class="yellow" style="
 +
opacity: 0.2;
 +
height: 100%;
 +
width: 100%;
 +
position: absolute;"></div></div>
  
 +
</a></div>
  
 +
</div><div class="col-md-12 row" style="
 +
padding-left: 2em;
 +
padding-right: 0em !important;margin-bottom: 5em;">
 +
                   
 +
<div class="col-md-3"><div style="
 +
;
 +
float: left;
 +
border: 1px solid #535353;margin: 5px;padding: 0px;border-radius: 16px; ;"><a href="https://2018.igem.org/Team:Valencia_UPV/Hardware"><div style="
 +
background-position: center center;
 +
background-size: cover;
 +
;
 +
height: 142px !important;
 +
border-top-left-radius: 13px;
 +
border-top-right-radius: 13px;
 +
background-image: url(https://static.igem.org/mediawiki/2018/9/90/T--Valencia_UPV--GifHomeHardwareUPV2018.gif);"></div><p style="
 +
padding: 24px;">Find out how we made possible the automatization of printing genetic circuits on bacteria</p></a>
  
 +
</div></div>
 +
<div class="col-md-3"><div style="
 +
;
 +
float: left;
 +
border: 1px solid #535353;margin: 5px;padding: 0px;border-radius: 16px; ;"><a href="https://2018.igem.org/Team:Valencia_UPV/Software"><div style="
 +
background-position: center center;
 +
background-size: cover;
 +
;
 +
height: 142px !important;
 +
border-top-left-radius: 13px;
 +
border-top-right-radius: 13px;
 +
background-image: url(https://static.igem.org/mediawiki/2018/7/70/T--Valencia_UPV--GifHomeSoftwareUPV2018.gif);"></div><p style="
 +
padding: 24px;">Check out the intuitive software that we have developed to design genetic circuits.</p></a>
  
 +
</div></div>
 +
<div class="col-md-3"><div style="
 +
;
 +
float: left;
 +
border: 1px solid #535353;margin: 5px;padding: 0px;border-radius: 16px; ;"><a href="https://2018.igem.org/Team:Valencia_UPV/Design"><div style="
 +
background-position: center center;
 +
background-size: cover;
 +
;
 +
height: 142px !important;
 +
border-top-left-radius: 13px;
 +
border-top-right-radius: 13px;
 +
background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Valencia_UPV--GifHomeDesignUPV2018.gif);"></div><p style="
 +
padding: 24px;">See how we have designed our part collection to facilitate assembly automation.</p></a>
  
−
             
+
</div></div><div class="col-md-3"><div style="
−
            </div>
+
;
−
        </div>
+
float: left;
−
      </div>
+
border: 1px solid #535353;margin: 5px;padding: 0px;border-radius: 16px; ;"><a href="https://2018.igem.org/Team:Valencia_UPV/Model"><div id="btnHomeModel" style="
−
  </section>
+
background-position: center center;
 +
background-size: cover;
 +
;
 +
height: 142px !important;
 +
border-top-left-radius: 13px;
 +
border-top-right-radius: 13px;
 +
background-image: url(https://static.igem.org/mediawiki/2018/2/21/T--Valencia_UPV--GifHomeModelUPV2018.gif);"></div><p style="
 +
padding-bottom: 22px;
 +
padding-top: 24px;
 +
padding-right: 12px;
 +
padding-left: 24px !important;">Do you want to discover the multiple possibilities that Printeria modeling offers you?</p>
  
 +
</a>
  
 +
</div></div>
 +
                   
  
 +
                   
 +
                   
 +
                   
 +
                   
 +
                   
 +
                   
 +
                   
 +
                   
 +
                    </div><!--end of row-->
 +
                                </div></row></div>
 +
</body>
  
 +
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/scriptsJS?action=raw&ctype=text/javascript"></script>
 +
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquery311minJS?action=raw&ctype=text/javascript"></script>
 +
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/parallaxJS?action=raw&ctype=text/javascript"></script>
 +
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/smoothscrollminJS?action=raw&ctype=text/javascript"></script>
 +
      <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquerystepsminJS?action=raw&ctype=text/javascript"></script>
 +
<script>
  
 +
(function ($) {
 +
  $(document).ready(function(){
 +
   
 +
// hide .nav-container first
 +
$(".nav-container").hide();
 +
 +
// fade in .nav-container
 +
$(function () {
 +
$(window).scroll(function () {
 +
            // set distance user needs to scroll before we fadeIn navbar
 +
if ($(this).scrollTop() > 100) {
 +
$('.nav-container').fadeIn();
 +
} else {
 +
$('.nav-container').fadeOut();
 +
}
 +
});
  
 +
 +
});
  
−
        <!--<div class="loader"></div>-->
+
});
−
        <a class="back-to-top inner-link" href="#start" data-scroll-class="100vh:active" style="font-size: 82%;">
+
  }(jQuery));
−
            <i class="stack-interface stack-up-open-big"></i>
+
−
        </a>
+
  
−
    </body>
+
</script>
  
−
 
−
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/scriptsJS?action=raw&ctype=text/javascript"></script>
 
−
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquery311minJS?action=raw&ctype=text/javascript"></script>
 
−
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/bootstrapMinJS?action=raw&ctype=text/javascript"></script>
 
−
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/parallaxJS?action=raw&ctype=text/javascript"></script>
 
−
      <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/smoothscrollminJS?action=raw&ctype=text/javascript"></script>
 
−
      <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquerystepsminJS?action=raw&ctype=text/javascript"></script>
 
−
       
 
  
  
  
 
</html>
 
</html>
−
 
 
{{Valencia_UPV/footer}}
 
{{Valencia_UPV/footer}}

Latest revision as of 16:23, 6 December 2018

Stack Multipurpose HTML Template

image
image
image

Abstract

Access to Synthetic Biology by an interested layperson is currently hampered by several barriers, including a required background knowledge and availability of expensive and often bulky technological equipment. Printeria is a fully-equipped bioengineering device able to automate the process of printing genetic circuits in bacteria but made as simple and easy to operate as a domestic desktop printer. It breaks down these barriers using a digital microfluidic system creating little droplets that can be mixed and moved across predefined electrode paths on a PCB surface. Printeria combines this novel system with Golden Gate Technology, low-cost sensors and electronics, and a user-friendly software application. In this way, the user is capable of assembling DNA parts in a one-step reaction and control all steps: from the parts assembly and transformation to perform experiments of the printed genetic circuit with high accuracy. Printeria opens the door to a world of applications affordable for the general public.

image

CONTACT US igem.upv.2018@gmail.com