Difference between revisions of "Team:Kyoto"
| Line 3: | Line 3: | ||
<style> | <style> | ||
| + | |||
#background{ | #background{ | ||
| − | + | position:fixed; | |
| − | + | min-width: 1024px; | |
| − | + | width:100%; | |
| − | + | z-index:-1; | |
| − | + | } | |
| + | #background-image{ | ||
| + | width:100%; | ||
| + | } | ||
| + | #topbanner-wrapper{ | ||
| + | min-width:1024px; | ||
| + | position:relative; | ||
} | } | ||
#topbanner{ | #topbanner{ | ||
| − | width: | + | position:absolute; |
| + | width: 565px; | ||
height: 105px; | height: 105px; | ||
| − | margin: | + | top:0; |
| − | background-image: url(https://static.igem.org/mediawiki/2016/ | + | 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; | background-position: center center; | ||
} | } | ||
#button_wrapper{ | #button_wrapper{ | ||
| − | width: | + | width: 1023px; |
height: 186px; | height: 186px; | ||
margin: 0 auto; | margin: 0 auto; | ||
| Line 25: | Line 37: | ||
letter-spacing: -1em; | letter-spacing: -1em; | ||
} | } | ||
| − | + | #button_left{ | |
| − | float:left; | + | /*float: left;*/ |
| − | width: | + | display: inline-block; |
| + | width:341px; | ||
height: 186px; | height: 186px; | ||
letter-spacing: normal; | 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> | </style> | ||
<head> | <head> | ||
| − | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
window.onload = function bwWidth(){ | window.onload = function bwWidth(){ | ||
| Line 49: | Line 79: | ||
} | } | ||
</script> | </script> | ||
| − | |||
</head> | </head> | ||
<body> | <body> | ||
<div id="background"> | <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="header"> | ||
<div id="nav-wrapper"> | <div id="nav-wrapper"> | ||
| Line 95: | Line 126: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | <div id="topbanner-wrapper"> | |
| − | <div id="topbanner | + | <div id="topbanner"> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
</div> | </div> | ||
| − | <div id=" | + | <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> | ||
| + | |||
| + | |||
| + | <h1 id="overview">Overview</h1> | ||
| + | |||
| + | <p>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!</p> | ||
| + | |||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <div> | ||
| + | |||
| + | <h1 id="background story">Background story</h1> | ||
| + | |||
| + | <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 good at HTML works, it was a heavy burden on HTML experts to do all the work. How wonderful would it would be if we could assign this work to all the members in our team? </p> | ||
| + | |||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <div> | ||
| + | |||
| + | <h1 id="improvements">Improvements</h1> | ||
| + | |||
| + | <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 colmns and table titel 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> | ||
| − | + | <div id="footer"> | |
<div id="footer_logos"> | <div id="footer_logos"> | ||
<img src="https://static.igem.org/mediawiki/2016/e/e6/T--Kyoto--Footer-24.png" width="874" height="95"> | <img src="https://static.igem.org/mediawiki/2016/e/e6/T--Kyoto--Footer-24.png" width="874" height="95"> | ||
| Line 156: | Line 283: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | |||
| − | |||
</html> | </html> | ||
Revision as of 14:30, 19 October 2016
Contents
- 1 Overview
- 2 Background story
- 3 Improvements
- 4 User's voice
- 5 How to use
- 6 Additional features
- 7 Customize for your team
- 8 Downloads
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 good at HTML works, it was a heavy burden on HTML experts to do all the work. How wonderful would 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 colmns and table titel 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.
