Difference between revisions of "Team:UCL/Software"
Lewismoffat (Talk | contribs) |
Lewismoffat (Talk | contribs) |
||
| Line 46: | Line 46: | ||
<h2>Construction</h2> | <h2>Construction</h2> | ||
| − | + | ||
| − | <img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png" width="50%"/> | + | <p>The spirit of the tool is to make editing and working on the iGEM wiki easier and more interactive for all. |
| − | <img src="https://static.igem.org/mediawiki/2015/9/9e/UCLSoft4.png" width="50%"/> | + | It was with this spirit that we built the tool. Although the code is part of chrome extension, it is really |
| + | a lightweight javascript tool.</p> | ||
| + | <h3>What is a Chrome Extension?</h3> | ||
| + | <p>A chrome extension at its base is a <b>.json</b> file called the "Manifest" file that contains the file | ||
| + | reference's and basic information about the tool. When used this tells the browser to load a piece of javascript or other files | ||
| + | on to specified pages. These then interact with the DOM (Document Object Model) of the page.</p> | ||
| + | <h3>Why use a Chrome Extension?</h3> | ||
| + | <p>Chrome is one of the most modern and widely used browser on the internet and has an easy to use and develop | ||
| + | extension system, on top of a very rich API. When loading files that interact with the DOM chrome extensions | ||
| + | also make sure that there is no interaction with any of the loaded scripts of libraries from the page, protecting | ||
| + | the user. To top it all off, the chrome extensions are very easy to install and distribute.</p> | ||
| + | <p>Our tool uses the commonly implemented "Content_Scripts" method | ||
| + | for loading our extension. By using a | ||
| + | chrome </p> | ||
| + | <p>In our case we load both Javascript and CSS whenever an iGEM edit page is loaded. The javascipt that is loaded | ||
| + | is the <b>background.js</b> file whi</p> | ||
| + | <p></p> | ||
| + | <p></p> | ||
| + | <p></p> | ||
| + | <p></p> | ||
| + | <!--<img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png" width="50%"/> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/9/9e/UCLSoft4.png" width="50%"/>--> | ||
<h1>Mind-the-Model</h1> | <h1>Mind-the-Model</h1> | ||
Revision as of 18:28, 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 into the Chrome browser, to install. Then its working!
For more information, the source code, and the extension go to Our Github Page.
Construction
The spirit of the tool is to make editing and working on the iGEM wiki easier and more interactive for all. It was with this spirit that we built the tool. Although the code is part of chrome extension, it is really a lightweight javascript tool.
What is a Chrome Extension?
A chrome extension at its base is a .json file called the "Manifest" file that contains the file reference's and basic information about the tool. When used this tells the browser to load a piece of javascript or other files on to specified pages. These then interact with the DOM (Document Object Model) of the page.
Why use a Chrome Extension?
Chrome is one of the most modern and widely used browser on the internet and has an easy to use and develop extension system, on top of a very rich API. When loading files that interact with the DOM chrome extensions also make sure that there is no interaction with any of the loaded scripts of libraries from the page, protecting the user. To top it all off, the chrome extensions are very easy to install and distribute.
Our tool uses the commonly implemented "Content_Scripts" method for loading our extension. By using a chrome
In our case we load both Javascript and CSS whenever an iGEM edit page is loaded. The javascipt that is loaded is the background.js file whi