Difference between revisions of "Team:Amazonas Brazil/Software"

Latest revision as of 00:50, 16 December 2017

Wiki_iGEM_Amazonas

SOFTWARE

A platform to expand the iGEM Experience

iProGRAm

A platform for expand the iGEM experience

What's the boost?

Protocols are a set of well-documented steps to perform an experiment. It is through protocols that scientists can abstract and engineer their solutions. This standardization is the key to make it possible for scientists from the other side of the globe to reliably reproduce, in their labs, the results obtained by another scientist.

The algorithms are to Computer Science as protocols are to Biotechnology. Following the principles that jumpstarted the exponential growth of software development techniques, promoting reuse of code, peer review, and incremental development, the open source community revolutionized the way that software was being made and those principles can easily be translated to Biotechnology.

Advances in the opening of biological 'codes' has already promoted unpreceded developments in biological systems engineering, the most remarkable is the easily accessible NCBI database, which allows anyone to access detailed genomic and proteomic information of various species.

We envision a future where the abstraction for the creation of bioengineered living beings becomes more open, enabling anyone with the proper equipment and care, to reproduce reliably experiments and develop solutions.

How will we do this?

To make our library available we created a Web Application decoupled from our WebServer, named iProGRAm, iGEM Protocol Git Repository from Amazonas_Brazil team, to deliver an environment to create, store and share lab protocols.

Moreover, any current web based application can migrate their data to AlexAPI format and use this database in a unified fashion. And with their own customization many applications can share a common space.

This protocols platform will be able to search, cite and create protocols in a easy and fast way, creating an ecosystem to bring people together and generate positive interactions, promoting scientific growth.

How will it impact iGEM?

We believe that having such space would help everyone in the development of their project, reducing the amount of time taken in project design plan and increasing the success rate of teams. Helping everyone to achieve their results on time to deliver to the competition.

We were inspired by the open software practices that brought github.com to life and over the year has made a tremendous impact on how open source software is being developed. We hope that iProGRAm can be ourProgram and really impact iGEMers from around the world.

Checkout our code in GitHub

@@ Line 21: / Line 21: @@
 <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Amazonas_Brazil/CSS?action=raw&ctype=text/css">
 <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Amazonas_Brazil/CSS:icon?action=raw&ctype=text/css">
 <title>Wiki_iGEM_Amazonas</title>
@@ Line 26: / Line 29: @@
 </head>
-<body style="width:100%; height:100%; padding: 0; margin: 0;">
+<body class="body">
    <!-- Add your content of header -->
-  <header>
+<header>
-     <nav class="navbar navbar-fixed-top navbar-default" style="opacity: 0.7;">
+     <nav class="navbar navbar-fixed-top navbar-default" id="#" style="background-color: rgba(255, 255, 255, 0);">
-       <ul style="list-style-type:none;margin:0;padding:0;background: linear-gradient(to left,#BD314C, #5F254A);overflow:hidden;position: fixed;top: 0;width: 100%;">
+       <ul class="Links_bar" style="background: linear-gradient(to left,#BD314C, #5F254A);opacity:0.75;">
-         <li><a class="Link-pg" style="padding: 0 1em;" href="#home"><img src="https://static.igem.org/mediawiki/2017/d/d4/T--Amazonas_Brazil--LogoBranco.png" width="104.04" height="90"style="margin-top: 0.3em;"></a></li>
+         <li><a class="Link-pg" href="https://2017.igem.org/Team:Amazonas_Brazil"><img src="https://static.igem.org/mediawiki/2017/d/d4/T--Amazonas_Brazil--LogoBranco.png"  width="104.04";height="90"; class="Menu_image"></a></li>
        </ul>
        <div class="container">
-         <button type="button" class="navbar-toggle" style="float: right">
+         <button type="button" class="navbar-toggle">
            <span class="sr-only">Menu</span>
            <span class="icon-bar" style="background-color: white"></span>
@@ Line 44: / Line 47: @@
          </button>
-         <nav class="navbar-fullscreen" id="navbar-middle">
+         <nav class="navbar-fullscreen" id="navbar-middle" style="opacity:0.9;">
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <div class="main-container">
-           <div class="subcontainer" style="margin-top: 3em;">
+           <div class="subcontainer" id ="top">
-<img src="https://static.igem.org/mediawiki/2017/7/76/T--Amazonas_Brazil--Menu2.png" style ="margin-right:1em;width: 40%;">
+    <a class="Menu" id="Link_Menu1" href="https://2017.igem.org/Team:Amazonas_Brazil/Project">PROJECT</a>
-<img src="https://static.igem.org/mediawiki/2017/e/ea/T--Amazonas_Brazil--Menu3.png" style="width: 80%;">
+    <a class="Menu" id="Link_Menu2" href="https://2017.igem.org/Team:Amazonas_Brazil/Biobricks">BIOBRICKS</a>
-</div>
+    </div>
            <div class="subcontainer">
-<img src="https://static.igem.org/mediawiki/2017/e/ee/T--Amazonas_Brazil--Menu5.png" style ="margin-right:1em;width: 60%;">
+    <a class="Menu" id="Link_Menu3" href="https://2017.igem.org/Team:Amazonas_Brazil/Software">SOFTWARE</a>
-<img src="https://static.igem.org/mediawiki/2017/6/68/T--Amazonas_Brazil--Menu1.png" style="width: 60%;">
+    <a class="Menu" id="Link_Menu4" href="https://2017.igem.org/Team:Amazonas_Brazil/Human_Practices">HUMAN PRACTICES</a>
+    </div>
+    <div class="subcontainer" id="bottom" style="margin-bottom: 1em;">
+<a class="Menu" id="Link_Menu5" href="https://2017.igem.org/Team:Amazonas_Brazil/Achievements">ACHIEVEMENTS</a>
+<a class="Menu" id="Link_Menu6" href="https://2017.igem.org/Team:Amazonas_Brazil/People">PEOPLE</a>
 </div>
-          <div class="subcontainer" style="margin-bottom: 1em;">
-<img src="https://static.igem.org/mediawiki/2017/d/d8/T--Amazonas_Brazil--Menu4.png" style ="margin-right:1em;width: 50%;">
-<img src="https://static.igem.org/mediawiki/2017/2/2a/T--Amazonas_Brazil--Menu6.png" style="width: 70%;">
-</div>
            </div>
          </nav>
        </div>
      </nav>
    </header>
+   <div class="hero-full-container background-image-container white-text-container" style="background-image: url(https://static.igem.org/mediawiki/2017/0/02/T--Amazonas_Brazil--SOFTWARE.jpg);">
-   <div class="hero-full-container background-image-container white-text-container" style="background: linear-gradient(to left,#BD314C, #5F254A); width:100%;">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <div class="hero-full-wrapper">
-             <div class="text-content  text-center" style="left: 0;margin-left: 0;margin-top: 23%;padding: 0">
+             <div class="text-content  text-center">
-                 <h1 align="middle" style="font-size: 3em; margin: -1em 0 0;padding: 0;">Software</h1>
+                 <h2 class="Page_Title" align="middle">SOFTWARE</h2>
-                 <h2 align="middle" style="font-size: 1.5em; margin: 0;padding: 0;">A platform to expand the iGEM Experience</h2>
+                 <h2 class="Page_Subtitle" align="middle">A platform to expand the iGEM Experience</h2>
              </div>
            </div>
@@ Line 91: / Line 90: @@
          <div class="row section-container-spacer">
            <div class="col-xs-12">
-<h1>CRISPeasy</h1>
+             <h2 style="font-size: 110px;margin-top: 54px;" align="middle">iProGRAm</h2>
-             <h3>Our perspective is to provide a bacterial genome editing vector based on BioBrick parts assembly easy to engineer as A, B, C… CRISPR.
-              </h3>
-               <h4 style="padding: 20px 0 0 0">What's the boost?</h4>
-               <div style="padding: 20px 0 0 0;  text-align: justify;
+            <h3 align="center" style="margin-top:0;font-size:39px;margin-bottom:70px;">A platform for expand the iGEM experience</h3>
-              text-justify: inter-word;">
-               <p>Scientific community have been achieved great results using CRISPR-Cas9 mediated
-               genome editing techniques. While these methods are moving forward, some methodological
-                aspects related to this technique could be further improved to bring up this science
+              <div>
-                 revolution even more.</p>
+              <div class="">
-              <p>In prokaryotes, the genome editing based on CRISPR/Cas9 machinery require quite
+               <h4 style="font-size:30px!important;margin:1em 3.5em;" class="p">What's the boost?</h4>
-                 laborious days of work in lab due to the multi-plasmid based edition. The system
+               <p style="font-size: 27px !important;margin: 1em 4em;">Protocols are a set of well-documented steps to perform an experiment. It is through protocols that scientists can abstract and engineer their solutions. This standardization is the key to make it possible for scientists from the other side of the globe to reliably reproduce, in their labs, the results obtained by another scientist.</p>
-                 não é padronizado e, em determinadas metodologias, demands more than one plasmid,
+               <p style="font-size: 27px !important;margin: 1em 4em;">The algorithms are to Computer Science as protocols are to Biotechnology. Following the principles that jumpstarted the exponential growth of software development techniques, promoting reuse of code, peer review, and incremental development, the open source community revolutionized the way that software was being made and those principles can easily be translated to Biotechnology.</p>
-                each one carrying a part of the CRISPR/Cas9 apparatus. Other critical problem consist
-               in the addition of a linear DNA carrying homologous arms to provide a donor
+    <p style="font-size: 27px !important;margin: 1em 4em;">Advances in the opening of biological 'codes' has already promoted unpreceded developments in biological systems engineering, the most remarkable is the easily accessible NCBI database, which allows anyone to access detailed genomic and proteomic information of various species.
-                DNA to insert information into the genome during the HDR repair via. However,
+</p>
-               the linear donor DNA system has low edition efficiency due the action of DNA restriction
+    <p style="font-size: 27px !important;margin: 1em 4em;">We envision a future where the abstraction for the creation of bioengineered living beings becomes more open, enabling anyone with the proper equipment and care, to reproduce reliably experiments and develop solutions.
-                systems present in wild type and E. coli strains, which can degrade the linear DNAs
+</p>
-               before integration into genome. All this demands plenty of time and a lot of wet lab
-                hours of work. To verify this information, we got in touch with other iGEM's teams who
-                 had work with CRISPR/Cas9 in the previous years, you can check this outreach part with
-                 more details here.</p>
+    <div id="myCarousel" style="max-width:1360px;margin: 58px auto;" class="carousel slide" data-ride="carousel">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+    <li data-target="#myCarousel" data-slide-to="1"></li>
+    <li data-target="#myCarousel" data-slide-to="2"></li>
+  </ol>
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner">
+    <div class="item active">
+      <img src="https://static.igem.org/mediawiki/2017/d/dd/Iprogram_plataform1.gif" alt="Chicago">
+    </div>
+    <div class="item">
+      <img src="https://static.igem.org/mediawiki/2017/5/59/Iprogram_plataform2.gif" alt="New York">
+    </div>
+    <div class="item">
+      <img src="https://static.igem.org/mediawiki/2017/7/74/Iprogram_plataform3.gif" alt="Los Angeles">
+    </div>
+  </div>
+  <!-- Left and right controls -->
+  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#myCarousel" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+    <h4 style="font-size:30px!important;margin:1em 3.5em;" class="p">How will we do this?</h4>
+    <p style="font-size: 27px !important;margin: 1em 4em;">To make our library available we created a Web Application decoupled from our WebServer, named iProGRAm, iGEM Protocol Git Repository from Amazonas_Brazil team, to deliver an environment to create, store and share lab protocols. </p>
+    <p style="font-size: 27px !important;margin: 1em 4em;">Moreover, any current web based application can migrate their data to AlexAPI format and use this database in a unified fashion. And with their own customization many applications can share a common space. </p>
+      <p style="font-size: 27px !important;margin: 1em 4em;">This protocols platform will be able to search, cite and create protocols in a easy and fast way, creating an ecosystem to bring people together and generate positive interactions, promoting scientific growth.</p>
+    <h4 style="font-size:30px!important;margin:1em 3.5em;" class="p">How will it impact iGEM?</h4>
+      <p style="font-size: 27px !important;margin: 1em 4em;">We believe that having such space would help everyone in the development of their project, reducing the amount of time taken in project design plan and increasing the success rate of teams. Helping everyone to achieve their results on time to deliver to the competition.</p>
+      <p style="font-size: 27px !important;margin: 1em 4em;">We were inspired by the open software practices that brought github.com to life and over the year has made a tremendous impact on how open source software is being developed. We hope that iProGRAm can be ourProgram and really impact iGEMers from around the world.</p>
+<p style="font-size:26px"><b><a href="https://github.com/iGemAmazonas/alexAPI">Checkout our code in GitHub</a></b></p>
+</div>
              </div>
-            </div>
-           </div>
          </div>
        </div>
      </div>
    </div>
+</div>
 <script>
      document.addEventListener("DOMContentLoaded", function (event) {
@@ Line 127: / Line 172: @@
        navActivePage();
      });
+    $(".nav").addClass("fechada");
+    	$(".nav").after("<a class=\"nav-toggle\">Menu</a>");
+    	$(".nav-toggle").click(function() {
+    		var altura = $(".nav ul").height();
+    		if($(".nav").hasClass("fechada")) {
+    			$(".nav").animate({height:altura},{queue:false, duration:200}).removeClass("fechada");
+    		}
+    		else {
+    			$(".nav").animate({height:"0px"},{queue:false, duration:200}).addClass("fechada");
+    		}
+    	});
+    	$(window).resize(function() {
+    		var tamanhoViewport = $(window).width();
+    		if (tamanhoViewport > 800) {
+    			$(".nav").css("height","auto").addClass("fechada");
+    		} else {
+    			$(".nav").css("height","0px").addClass("fechada");
+    		}
+    	});
 </script>
 <script type="text/javascript" src="https://2017.igem.org/Template:Amazonas_Brazil/JS?action=raw&ctype=text/javascript"></script>
 </body>
+<footer style="position:fixed;">
+<div class="subcontainer">
+<a href="#"><img src="https://static.igem.org/mediawiki/2017/5/55/T--Amazonas_Brazil--IconTop.png" style="width: 4%;position: absolute;bottom: 0.5em;right: 0.5em;opacity: 0.5;"></a>
+</div>
+</footer>
 <footer style="background: linear-gradient(to left,#BD314C, #5F254A);">
    <div class="footer-container" >
    <p class="footer-share-icons">
-     <a href="https://twitter.com/IGEM_Amazonas" class="fa-icon1" title="" style="padding-right: 0;color: #fff;">
+     <a href="https://twitter.com/IGEM_Amazonas" class="fa-icon" title="">
          <i class="fa fa-twitter" aria-hidden="true"></i>
      </a>
-     <a href="https://www.instagram.com/igem_amazonas_brazil/" class="fa-icon1" title="" style="padding-right: 0;color: #fff;">
+     <a href="https://www.instagram.com/igem_amazonas_brazil/" class="fa-icon" title="">
          <i class="fa fa-instagram" aria-hidden="true"></i>
      </a>
-     <a href="https://www.facebook.com/ManausnoiGEM/" class="fa-icon1" title="" style="padding-right: 0;color: #fff;">
+     <a href="https://www.facebook.com/ManausnoiGEM/" class="fa-icon" title="">
          <i class="fa fa-facebook" aria-hidden="true"></i>
      </a>
+<a href="#"><img src="https://static.igem.org/mediawiki/2017/5/55/T--Amazonas_Brazil--IconTop.png" style="width: 4%;position: absolute;bottom: 5.5em;right: 0.5em;opacity: 0.5;"></a>
    </p>
    </div>