Difference between revisions of "Team:Kyoto/Software"

 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Kyoto}}
+
{{Kyoto_Common}}
 
<html>
 
<html>
  
−
<div>
+
<style>
−
We developed a software named “KELN”: Kyoto-team Electronic Lab Note.<br>
+
−
Have you ever felt it difficult to write tables in html documents? KELN is a solution!<br>
+
−
KELN provides you user-friendly graphical user interface so that those who don’t know html tags can make tables in html documents very easily!<br>  
+
  
−
User’s voice<br>
 
  
 +
  #background{
 +
    position:fixed;
 +
    min-width: 1024px;
 +
    width:100%;
 +
    z-index:-1;
 +
  }
 +
  #background-image{
 +
    width:100%;
 +
  }
 +
  #topbanner-wrapper{
 +
    min-width:1024px;
 +
    position:relative;
 +
  }
 +
  #topbanner{
 +
    position:absolute;
 +
    width: 565px;
 +
    height: 105px;
 +
    top:0;
 +
    bottom:0;
 +
    left:0;
 +
    right:0;
 +
    margin: auto;
 +
    background-image: url(https://static.igem.org/mediawiki/2016/d/da/T--Kyoto--titlesoftware.png);
 +
    background-position: center center;
 +
  }
 +
  #button_wrapper{
 +
    width: 1023px;
 +
    height: 186px;
 +
    margin: 0 auto;
 +
    padding: 0;
 +
    letter-spacing: -1em;
 +
  }
 +
  #button_left{
 +
    /*float: left;*/
 +
    display: inline-block;
 +
    width:341px;
 +
    height: 186px;
 +
    letter-spacing: normal;
 +
    border: 1px solid #000;
 +
  }
 +
  #button_center{
 +
    display: inline-block;
 +
    width:341px;
 +
    height: 186px;
 +
    letter-spacing: normal;
 +
    border: 1px solid #000;
 +
  }
 +
  #button_right{
 +
    display: inline-block;
 +
    width:341px;
 +
    height: 186px;
 +
    letter-spacing: normal;
 +
    border: 1px solid #000;
 +
  }
 +
  #contents{
 +
    background-color:#ffffff;
 +
  }
 +
</style>
  
−
KELN is now available on <a href="https://github.com/iGEMKyoto/KELN/releases">https://github.com/iGEMKyoto/KELN/releases</a> .<br>
+
<head>
−
Because KELN is a open source, everyone can modify this software. Please add functions you need, and start writing electronic lab notes today!
+
<script type="text/javascript">
−
</div>
+
  window.onload = function bwWidth(){
 +
    var bw = document.getElementById("topbanner-wrapper");
 +
    var width = Math.max(parseInt(document.documentElement.clientWidth),1024);
 +
    var newwidth = width * 397 / 1368 - 72
 +
    bw.style.height = newwidth + "px";
 +
  }
 +
  window.onresize = function bwWidth(){
 +
    var bw = document.getElementById("topbanner-wrapper");
 +
    var width = Math.max(parseInt(document.documentElement.clientWidth),1024);
 +
    var newwidth = width * 397 / 1368 - 72
 +
    bw.style.height = newwidth + "px";
 +
  }
 +
</script>
 +
</head>
 +
<body>
 +
  <div id="background">
 +
    <img id="background-image" src="https://static.igem.org/mediawiki/2016/b/be/T--Kyoto--pagephoto-05.png">
 +
  </div>
 +
    <div id="header">
 +
      <div id="nav-wrapper">
 +
        <div class="nav">
 +
          <ul class="nv">
 +
            <li id ="nv0" style="width:56px"><a href="https://2016.igem.org/Team:Kyoto"></a></li>
 +
            <li id ="nv1">
 +
              <a></a>
 +
              <ul>
 +
                <li id="nv11"><a href="https://2016.igem.org/Team:Kyoto/Description"></a></li>
 +
                <li id="nv12"><a href="https://2016.igem.org/Team:Kyoto/Proof"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv2">
 +
              <a></a>
 +
              <ul>
 +
                <li id="nv21"><a href="https://2016.igem.org/Team:Kyoto/Software"></a></li>
 +
                <li id="nv22"><a href="https://2016.igem.org/Team:Kyoto/Collaborations"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv3"><a href="https://2016.igem.org/Team:Kyoto/Achievements"></a></li>
 +
            <li id ="nv4"><a href="https://2016.igem.org/Team:Kyoto/Experiments"></a></li>
 +
            <li id ="nv5">
 +
              <a></a>
 +
              <ul>
 +
                <li id="nv51"><a href="https://2016.igem.org/Team:Kyoto/Integrated_Practices"></a></li>
 +
                <li id="nv52"><a href="https://2016.igem.org/Team:Kyoto/HP/Silver"></a></li>
 +
                <li id="nv53"><a href="https://2016.igem.org/Team:Kyoto/HP/Gold"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv6"><a href="https://2016.igem.org/Team:Kyoto/Notebook"></a></li>
 +
            <li id ="nv7">
 +
              <a></a>
 +
              <ul>
 +
                <li id="nv71"><a href="https://2016.igem.org/Team:Kyoto/Team"></a></li>
 +
                <li id="nv72"><a href="https://2016.igem.org/Team:Kyoto/Attributions"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv8"><a href="https://2016.igem.org/Team:Kyoto/Safety"></a></li>
 +
          </ul>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div id="topbanner-wrapper">
 +
      <div id="topbanner">
 +
      </div>
 +
    </div>
 +
    <div id="contents-wrapper">
 +
  <div id="contents">
 +
    <div>
 +
<h6>Contents</h6>
 +
<ul id="cont">
 +
  <li><a href="#overview">1 Overview</a></li>
 +
  <li><a href="#background story">2 Background story</a></li>
 +
  <li><a href="#improvements">3 Improvements</a></li>
 +
  <li><a href="#user's voice">4 User's voice</a></li>
 +
  <li><a href="#how to use">5 How to use</a></li>
 +
  <li><a href="#additional features">6 Additional features</a></li>
 +
  <li><a href="#customize for your team">7 Customize for your team</a></li>
 +
  <li><a href="#downloads">8 Downloads</a></li>
 +
</ul>
  
−
<!--
 
−
<div class="column full_size judges-will-not-evaluate">
 
−
<h3>★  ALERT! </h3>
 
−
<p>This page is used by the judges to evaluate your team for the<a href="https://2016.igem.org/Judging/Awards"> Best Software Tool award</a>. </p>
 
  
 +
            <h1 id="overview">Overview</h1>
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
          <p>We developed a software named "KELN": Kyoto-team Electronic Lab Note.
−
</div>
+
  
 +
        Ever felt it difficult to write tables in HTML documents? KELN is the solution! KELN provides user-friendly graphical user interface so that those who don't know HTML tags can make tables in HTML documents very easily!</p>
  
 +
        </div>
  
  
  
 +
        <div>
  
−
<div class="column full_size">
+
          <h1 id="background story">Background story</h1>
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.</p>
+
  
 +
          <p>Before we developed this software, it took a long time to write HTML documents such as tables of our lab notes. Because not all of us are a HTML expert, it was a heavy burden on the experts to do all the work. How wonderful it would be if we could assign this work to all the members in our team? </p>
  
−
<h5> Inspiration </h5>
+
        </div>
−
<p>
+
 
−
Here are a few examples from previous teams:
+
 
−
</p>
+
 
−
<ul>
+
        <div>
−
<li><a href="https://2013.igem.org/Team:TU-Munich/Results/Software">TU Munich 2013</a></li>
+
 
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">Heidelberg 2014</a></li>
+
          <h1 id="improvements">Improvements</h1>
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">Aachen 2014</a></li>
+
 
−
</ul>
+
          <h2>Speed</h2>
 +
 
 +
          <p>KELN improved writing speed dramatically.</p>
 +
 
 +
          <h2>Consistency</h2>
 +
 
 +
          <p>You don't have to worry about syntax errors. All files generated by KELN are formatted in the same way, including class tags for customizing their appearance.</p>
 +
 
 +
        </div>
 +
 
 +
 
 +
 
 +
        <div>
 +
 
 +
          <h1 id="user's voice">User's voice</h1>
 +
          <p><q>The user interface was very natural, and the time-consuming work of writing HTML codes were significantly shortened</q> --Gifu</p>
 +
          <p><q>It was very easy to use.</q> --Hokkaido-U</p>
 +
        </div>
 +
 
 +
 
 +
 
 +
        <div>
 +
 
 +
          <h1 id="how to use">How to use</h1>
 +
 
 +
          <ul>
 +
 
 +
            <li>Enter the date of an experiment</li>
 +
 
 +
            <img src="https://static.igem.org/mediawiki/2016/c/c2/T--Kyoto--kelnmanual_1.png" width="388" height="336">
 +
 
 +
            <li>Select the author</li>
 +
 
 +
            <img src="https://static.igem.org/mediawiki/2016/5/53/T--Kyoto--kelnmanual_2.png" width="388" height="336">
 +
 
 +
            <li>Check your teammates who conducted the experiment</li>
 +
 
 +
            <img src="https://static.igem.org/mediawiki/2016/4/45/T--Kyoto--kelnmanual_3.png" width="388" height="336">
 +
 
 +
            <li>Choose a template</li>
 +
 
 +
            <img src="https://static.igem.org/mediawiki/2016/0/0b/T--Kyoto--kelnmanual_4.png" width="388" height="336">
 +
 
 +
            <li>Edit the table</li>
 +
 
 +
            <img src="https://static.igem.org/mediawiki/2016/2/2c/T--Kyoto--kelnmanual_5.png" width="388" height="336">
 +
 
 +
            <li>Push convert button</li>
 +
 
 +
            <img src="https://static.igem.org/mediawiki/2016/b/b5/T--Kyoto--kelnmanual_6.png" width="388" height="336">
 +
 
 +
          </ul>
 +
 
 +
        </div>
 +
 
 +
 
 +
 
 +
        <div>
 +
 
 +
          <h1 id="additional features">Additional features</h1>
 +
 
 +
          <p>You can add descriptions of the table here</p>
 +
 
 +
          <img src="https://static.igem.org/mediawiki/2016/d/dd/T--Kyoto--kelnmanual_7.png" width="388" height="336">
 +
 
 +
          <p>You can also make custom tables. Please enter the numbers of columns and table title here, then push "apply" button.</p>
 +
 
 +
          <img src="https://static.igem.org/mediawiki/2016/4/49/T--Kyoto--kelnmanual_8.png" width="388" height="336">
 +
 
 +
          <p>Note: first row of the table will be titles of columns.</p>
 +
 
 +
        </div>
 +
 
 +
 
 +
 
 +
        <div>
 +
 
 +
          <h1 id="customize for your team">Customize for your team</h1>
 +
 
 +
          <p>You can customize the checkboxes of teammates in KELN by editing settings.txt.</p>
 +
 
 +
          <p>note: Please write names separated by comma. If KELN says "Syntax error", please confirm that settings.txt is correct.</p>
 +
 
 +
          <p>Because KELN is a open source, everyone can modify this software. Please add functions you need, and start writing electronic lab notes today! </p>
 +
 
 +
        </div>
 +
 
 +
 
 +
 
 +
        <div>
 +
 
 +
          <h1 id="downloads">Downloads</h1>
 +
 
 +
          <p>KELN is now available on <a href="https://github.com/iGEMKyoto/KELN/releases">https://github.com/iGEMKyoto/KELN/releases</a>.</p>
 +
 
 +
        </div>    
  
−
</div>
+
          </div>
−
-->
+
      </div>
 +
  </div>
 +
    <div id="footer">
 +
    <div id="footer_logos">
 +
      <img src="https://static.igem.org/mediawiki/2016/e/e6/T--Kyoto--Footer-24.png" width="874" height="95">
 +
    </div>
 +
    <div id="footer_contact">
 +
      <img src="https://static.igem.org/mediawiki/2016/e/ec/T--Kyoto--Footer-25.png">
 +
    </div>
 +
    <div id="footer_social">
 +
      <a href="mailto:igemkyoto@gmail.com"><img src="https://static.igem.org/mediawiki/2016/2/28/T--Kyoto--Footer-28.png"></a>
 +
      <a href="https://twitter.com/igemkyoto"><img src="https://static.igem.org/mediawiki/2016/8/82/T--Kyoto--Footer-26.png"></a>
 +
      <a href="https://www.facebook.com/IgemKyoto/"><img src="https://static.igem.org/mediawiki/2016/a/a3/T--Kyoto--Footer-27.png"></a>
 +
    </div>
 +
  </div>
  
 
</html>
 
</html>

Latest revision as of 01:23, 3 November 2016

Contents

Overview

We developed a software named "KELN": Kyoto-team Electronic Lab Note. Ever felt it difficult to write tables in HTML documents? KELN is the solution! KELN provides user-friendly graphical user interface so that those who don't know HTML tags can make tables in HTML documents very easily!

Background story

Before we developed this software, it took a long time to write HTML documents such as tables of our lab notes. Because not all of us are a HTML expert, it was a heavy burden on the experts to do all the work. How wonderful it would be if we could assign this work to all the members in our team?

Improvements

Speed

KELN improved writing speed dramatically.

Consistency

You don't have to worry about syntax errors. All files generated by KELN are formatted in the same way, including class tags for customizing their appearance.

User's voice

The user interface was very natural, and the time-consuming work of writing HTML codes were significantly shortened --Gifu

It was very easy to use. --Hokkaido-U

How to use

  • Enter the date of an experiment
  • Select the author
  • Check your teammates who conducted the experiment
  • Choose a template
  • Edit the table
  • Push convert button

Additional features

You can add descriptions of the table here

You can also make custom tables. Please enter the numbers of columns and table title here, then push "apply" button.

Note: first row of the table will be titles of columns.

Customize for your team

You can customize the checkboxes of teammates in KELN by editing settings.txt.

note: Please write names separated by comma. If KELN says "Syntax error", please confirm that settings.txt is correct.

Because KELN is a open source, everyone can modify this software. Please add functions you need, and start writing electronic lab notes today!

Downloads

KELN is now available on https://github.com/iGEMKyoto/KELN/releases.