Difference between revisions of "Team:UCL/Software"

Line 3: Line 3:
 
<html>
 
<html>
 
   <!--Banner should go here-->
 
   <!--Banner should go here-->
−
   <h1>Our Tools</h1>
+
   <div class="bodyx">
−
 
+
    <h1>Our Tools</h1>
−
  <h1>Mind-the-Mark</h1>
+
 
−
  <h2>Summary</h2>
+
    <h1>Mind-the-Mark</h1>
−
  <p>
+
    <h2>Summary</h2>
−
  This tool takes the bland and boring wiki input box and transforms it into a proper code editor with several
+
    <p>
−
    interactive and assistive features. Having talked to several iGEM teams this year, and years past, one of the  
+
          This tool takes the bland and boring wiki input box and transforms it into a proper code editor with several
−
    issues they lamented over was the issue of entering code into the wiki. The bland and simple text input on each  
+
      interactive and assistive features. Having talked to several iGEM teams this year, and years past, one of the  
−
    page made developing interactive and pretty wikis a real hassle. Due to this many teams developed their code
+
      issues they lamented over was the issue of entering code into the wiki. The bland and simple text input on each  
−
    externally and then transfered it in, costing them time and effort. We have changed that.
+
      page made developing interactive and pretty wikis a real hassle. Due to this many teams developed their code
−
  </p>
+
      externally and then transfered it in, costing them time and effort. We have changed that.
−
  <table style="width:95%;margin:0 auto;border:1px solid grey;">
+
    </p>
−
  <tr>
+
    <table style="width:95%;margin:0 auto;border:1px solid grey;">
−
    <td><div class="bigCenterText">Before</div></td>
+
    <tr>
−
    <td><div class="bigCenterText">After</div></td>  
+
      <td><div class="bigCenterText">Before</div></td>
−
  </tr>
+
      <td><div class="bigCenterText">After</div></td>  
−
  <tr>
+
    </tr>
−
    <td>
+
    <tr>
−
      <div class="centerRize">
+
      <td>
−
        <img src="https://static.igem.org/mediawiki/2015/9/91/UCLSoft2.png"  width="100%"/>
+
        <div class="centerRize">
−
      </div>
+
          <img src="https://static.igem.org/mediawiki/2015/9/91/UCLSoft2.png"  width="100%"/>
−
    </td>
+
        </div>
−
    <td>
+
      </td>
−
      <div class="centerRize">
+
      <td>
−
        <img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png" width="100%"/>
+
        <div class="centerRize">
−
      </div>
+
          <img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png" width="100%"/>
−
    </td>  
+
        </div>
−
  </tr>
+
      </td>  
−
</table>
+
    </tr>
−
 
+
  </table>
−
  <p>The boring wiki input box</p>
+
 
−
 
+
    <p>The boring wiki input box</p>
−
  <p>By taking advantage of Google's easy to use extension system for the Chrome Browser, we devised a powerful
+
 
−
  and lightweight extension that transforms the wiki editor on whatever page you choose to edit, be it in the
+
    <p>By taking advantage of Google's easy to use extension system for the Chrome Browser, we devised a powerful
−
  future in 2020 or now in 2015. The extension is easily downloaded and then drag and dropped in the Chrome browser,
+
    and lightweight extension that transforms the wiki editor on whatever page you choose to edit, be it in the
−
  and then its working!</p>
+
    future in 2020 or now in 2015. The extension is easily downloaded and then drag and dropped in the Chrome browser,
−
  <img src="https://static.igem.org/mediawiki/2015/d/df/UCLSoft3.png"/>
+
    and then its working!</p>
−
 
+
    <img src="https://static.igem.org/mediawiki/2015/d/df/UCLSoft3.png"/>
−
  <p>Find our tool on<a href="https://github.com/ucligem2015/Mind-The-Mark">Our Github Page</a>.</p>
+
 
−
 
+
    <p>Find our tool on<a href="https://github.com/ucligem2015/Mind-The-Mark">Our Github Page</a>.</p>
−
 
+
 
−
  <h2>Construction</h2>
+
 
−
 
+
    <h2>Construction</h2>
−
  <img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png"/>
+
 
−
  <img src="https://static.igem.org/mediawiki/2015/9/9e/UCLSoft4.png" width="100%"/>
+
    <img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png"/>
−
 
+
    <img src="https://static.igem.org/mediawiki/2015/9/9e/UCLSoft4.png" width="100%"/>
−
  <h1>Mind-the-Model</h1>
+
 
−
  <h1>Mind-the-Maybe</h1>
+
    <h1>Mind-the-Model</h1>
−
 
+
    <h1>Mind-the-Maybe</h1>
−
  <style>
+
 
−
    .centerRize {
+
    <style>
−
    width: 80%;
+
      .bodyx {
−
    margin:0 auto;
+
      width:75%;
−
        padding-bottom:20px;
+
      margin:0 auto;
−
    }
+
        background-color:51E8C5;
−
    .bigCenterText {
+
      }
−
    width:100%;
+
      .centerRize {
−
      text-align:center;
+
          width: 80%;
−
      font-size:20px;
+
          margin:0 auto;
−
      padding: 20px 0px;
+
          padding-bottom:20px;
−
    }
+
      }
−
  </style>
+
      .bigCenterText {
 +
          width:100%;
 +
          text-align:center;
 +
          font-size:20px;
 +
          padding: 20px 0px;
 +
      }
 +
    </style>
 +
  </div>
 
</html>
 
</html>

Revision as of 14:54, 8 September 2015

'

Our Tools

Mind-the-Mark

Summary

This tool takes the bland and boring wiki input box and transforms it into a proper code editor with several interactive and assistive features. Having talked to several iGEM teams this year, and years past, one of the issues they lamented over was the issue of entering code into the wiki. The bland and simple text input on each page made developing interactive and pretty wikis a real hassle. Due to this many teams developed their code externally and then transfered it in, costing them time and effort. We have changed that.

Before
After

The boring wiki input box

By taking advantage of Google's easy to use extension system for the Chrome Browser, we devised a powerful and lightweight extension that transforms the wiki editor on whatever page you choose to edit, be it in the future in 2020 or now in 2015. The extension is easily downloaded and then drag and dropped in the Chrome browser, and then its working!

Find our tool onOur Github Page.

Construction

Mind-the-Model

Mind-the-Maybe