Difference between revisions of "Team:Nagahama"

Line 1: Line 1:
−
{{Nagahama}}
+
<html lang="en" dir="ltr" class="client-nojs">
−
私たちのチームは'''長浜'''です。
+
<head>
 +
<meta charset="UTF-8" />
 +
<title>Team:iGEM nagahama/Wiki Design - 2016.igem.org</title>
 +
<meta name="generator" content="MediaWiki 1.24.1" />
 +
<link rel="shortcut icon" href="/favicon.ico" />
 +
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2015.igem.org (en)" />
 +
<link rel="EditURI" type="application/rsd+xml" href="https://2015.igem.org/wiki/api.php?action=rsd" />
 +
<link rel="alternate" hreflang="x-default" href="/Team:Cambridge-JIC/Wiki_Design" />
 +
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
 +
<link rel="alternate" type="application/atom+xml" title="2015.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
 +
<link rel="stylesheet" href="https://2015.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
 +
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
 +
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
 +
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
 +
/* cache key: 2015_igem_org:resourceloader:filter:minify-css:7:875d2068ffef0b9ce1dbab8400ce2379 */</style>
 +
<script src="https://2015.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
 +
<script>if(window.mw){
 +
mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Team:Cambridge-JIC/Wiki_Design","wgTitle":"Team:Cambridge-JIC/Wiki Design","wgCurRevisionId":403872,"wgRevisionId":403872,"wgArticleId":29385,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"SOY","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Team:Cambridge-JIC/Wiki_Design","wgUserId":6323,"wgUserEditCount":0,"wgUserRegistration":1470879031000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgWikiEditorEnabledModules":{"toolbar":false,"dialogs":false,"hidesig":true,"preview":false,"previewDialog":false,"publish":false}});
 +
}</script><script>if(window.mw){
 +
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
 +
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false,"watchlisttoken":"36de1ae59b2982f2d3c501039686f4c47150cf0f"});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"1b232769ae91d9eae8765f7cf81f79fa+\\","patrolToken":"dab0fcc035fc14067fbc214d88c4cb9b+\\","watchToken":"d656ef07fd263ccdf5ec7c12a87c3911+\\"});},{},{});
 +
/* cache key: 2015_igem_org:resourceloader:filter:minify-js:7:193790777e72eb752fe49c5b9473c134 */
 +
}</script>
 +
<script>if(window.mw){
 +
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
 +
}</script>
 +
</head>
 +
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject page-Team_Cambridge-JIC_Wiki_Design skin-igem action-view">
  
 +
        <script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
 +
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
 +
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
  
−
<html>
+
    <div id='globalWrapper'>
 +
        <div id='top_menu_under' class='noprint'></div>
 +
        <div id='top_menu_14' class='noprint'>Loading menubar.....</div> <!-- Will be replaced with the jQuery.load -->
 +
<script>jQuery('#top_menu_14').load('https://2015.igem.org/cgi/top_menu_14/menubar_reply.cgi',
 +
    {  t:"Team%3ACambridge-JIC%2FWiki%20Design",
 +
a:"View+%2FTeam%3ACambridge-JIC%2FWiki_Design++View source+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3ACambridge-JIC%2FWiki_Design%26action%3Dedit++History+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3ACambridge-JIC%2FWiki_Design%26action%3Dhistory++Move+%2FSpecial%3AMovePage%2FTeam%3ACambridge-JIC%2FWiki_Design++Watch+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3ACambridge-JIC%2FWiki_Design%26action%3Dwatch%26token%3D3857efba85824737213867d5db4e98f3%252B%255C++Page+%2FTeam%3ACambridge-JIC%2FWiki_Design++Discussion+%2Fwiki%2Findex.php%3Ftitle%3DTalk%3ATeam%3ACambridge-JIC%2FWiki_Design%26action%3Dedit%26redlink%3D1++" });
 +
 +
</script>
 +
<div id="content" class="mw-body" role="main">
 +
    <a id="top"></a>
 +
    <h1 id="firstHeading" class="firstHeading">
 +
        <span dir="auto">Team:Cambridge-JIC/Wiki Design</span>
 +
    </h1>
 +
    <div id="bodyContent">
 +
<div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><p>
  
 +
<!--<meta name="viewport" content="user-scalable=1, width=400">-->
 +
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
 +
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Bootstrap_part0_css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Bootstrap_part1_css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Bootstrap_part2_css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Bootstrap_part3_css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Bootstrap_part4_css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Bootstrap_part5_css?action=raw&amp;ctype=text/css" rel="stylesheet">
  
−
<br />
+
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Style_css?action=raw&amp;ctype=text/css" rel="stylesheet">
−
Project description
+
<style>#mw-content-text > p {display:none}</style>
−
<br />
+
<!--<script src="//2015.igem.org/Team:Cambridge-JIC/Assets/jquery?action=raw&amp;ctype=text/javascript"></script>-->
−
<br />
+
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/OpenSans_css?action=raw&amp;ctype=text/css" rel="stylesheet">
−
To innovate a refrigerator without electricity, we invented a prototype of FRAVORATOR that is possible to preserve food by antibacterial volatiles synthesized by Escherichia coli.
+
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Awesome_css?action=raw&amp;ctype=text/css" rel="stylesheet">
−
<br />
+
<link href="//2015.igem.org/Team:Cambridge-JIC/Assets/Fudge_css?action=raw&amp;ctype=text/css" rel="stylesheet">
−
<br />
+
−
For high-efficiency synthetic processs, we tried two methods. 1, 1-deoxy-D-xylulose 5-phosphate（DXP）synthase, Dxs, is down-regulated when its downstream material has been produced to some extent. So, we tried to over-express, another DXP synthase, nDXP, that rarely has been used in normal conditions. 2, Using genomic editing method, we tried to knock out synthase, that we<br /> used to produce unnecessary by product.
+
  
−
</html>
+
<link href="//2015.igem.org/wiki/images/3/3a/CamJIC-Favicon.png" rel="icon">
 +
<script src="//2015.igem.org/Team:Cambridge-JIC/Assets/Bootstrap_js?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="//2015.igem.org/Team:Cambridge-JIC/Assets/Fudge_js?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="//2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  
−
==TRACK==
+
<!--<nav class="col-xs-3 bs-docs-sidebar" style="float:right;">
−
'''Food Nutrition'''
+
        <ul id="sidebar" class="nav nav-stacked fixed">
 +
            <li>
 +
                <a href="#GroupA">Home</a>
 +
                <ul class="nav nav-stacked">
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="#GroupB">Project</a>
 +
                <ul class="nav nav-stacked">
 +
                    <li><a href="#GroupBSub1">Description</a></li>
 +
                    <li><a href="#GroupBSub2">Make Your Own</a></li>
 +
                    <li><a href="#GroupBSub3">Gallery</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="#GroupC">Hardware</a>
 +
                <ul class="nav nav-stacked">
 +
                    <li><a href="#GroupCSub1">Design</a></li>
 +
                    <li><a href="#GroupCSub2">Specs</a></li>
 +
                    <li><a href="#GroupCSub3">3D Printing</a></li>
 +
                    <li><a href="#GroupCSub4">Modeling</a></li>
 +
                    <li><a href="#GroupCSub5">Stretch Goals</a></li>
 +
                </ul>
 +
            </li>
 +
                        <li>
 +
                <a href="#GroupD">Software</a>
 +
                <ul class="nav nav-stacked">
 +
                    <li><a href="#GroupDSub1">Webshell</a></li>
 +
                    <li><a href="#GroupDSub2">MicroMaps</a></li>
 +
                    <li><a href="#GroupDSub3">Autofocus</a></li>
 +
                    <li><a href="#GroupDSub4">ImageJ</a></li>
 +
                    <li><a href="#GroupDSub5">Wiki Design</a></li>
 +
                </ul>
 +
            </li>
 +
                        <li>
 +
                <a href="#GroupE">Community</a>
 +
                <ul class="nav nav-stacked">
 +
                    <li><a href="#GroupESub1">Outreach</a></li>
 +
                    <li><a href="#GroupESub2">Human Practises</a></li>
 +
                    <li><a href="#GroupESub3">Collaboration</a></li>
 +
                </ul>
 +
            </li>
 +
                        <li>
 +
                <a href="#GroupF">Our Lab</a>
 +
                <ul class="nav nav-stacked">
 +
                    <li><a href="#GroupFSub1">Notebook</a></li>
 +
                    <li><a href="#GroupFSub2">Safety</a></li>
 +
                    <li><a href="#GroupFSub3">Achievements</a></li>                 
 +
                </ul>
 +
            <a href="#GroupG">About Us</a>
 +
                <ul class="nav nav-stacked">
 +
                    <li><a href="#GroupGSub1">Meet the Team</a></li>
 +
                    <li><a href="#GroupGSub2">Attributions</a></li>
 +
                    <li><a href="#GroupGSub3">Sponsors</a></li>
 +
                </ul>
 +
                            </li>
 +
            </li>
 +
        </ul>
 +
    </nav>
 +
-->
  
−
==We certainly achieved GOLD Medal Criteria!==
+
<div class="cam-container">
−
=== Bronze Medal ===
+
    <div class="navbar navbar-inverse navbar-fixed-top navbar-pad">
−
{| class="wikitable"
+
        <div class="container">
−
|-
+
            <div class="navbar-header">
−
|1
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
−
|Register for iGEM, have a great summer, and attend the Giant Jamboree.
+
                    <span class="icon-bar"></span>
−
|Yes, we are looking forward to taking part in the Giant Jamboree.
+
                    <span class="icon-bar"></span>
−
|-
+
                    <span class="icon-bar"></span>
−
|2
+
                </button>
−
|Meet all deliverables on the Requirements page (section 3).
+
                <a class="navbar-brand" href="//2015.igem.org/Team:Cambridge-JIC">CAMBRIDGE-JIC</a>
−
|Please check [https://igem.org/2015_Judging_Form?id=1653 Here].
+
            </div>
−
|-
+
−
|3
+
−
|Create a page on your team wiki with clear attribution of each aspect of your project. This page must clearly attribute work done by the students and distinguish it from work done by others, including host labs, advisors, instructors, sponsors, professional website designers, artists, and commercial services.|style="white-space:nowrap"  
+
−
|Please check [https://2016.igem.org/Team:Nagahama/Attributions Here].
+
−
|-
+
−
|4
+
−
|Document at least one new standard BioBrick Part or Device central to your project and submit this part to the iGEM Registry (submissions must adhere to the iGEM Registry guidelines). You may also document a new application of a BioBrick part from a previous iGEM year, adding that documentation to the part's main page.
+
−
|Please check [https://2016.igem.org/Team:Nagahama/Parts Here].
+
−
|-
+
  
−
|}
 
  
−
===Silver Medal===
+
            <div class="navbar-collapse collapse">
−
{| class="wikitable"
+
                <ul class="nav navbar-nav navbar-right">
−
|-
+
                    <li><a href="//2015.igem.org/Team:Cambridge-JIC">HOME</a></li>
−
|1
+
                    <li><a href="//2015.igem.org/Team:Cambridge-JIC/Project">PROJECT</a>
−
|Experimentally validate that at least one new BioBrick Part or Device of your own design and construction works as expected. Document the characterization of this part in the Main Page section of the Registry entry for that Part/Device. This working part must be different from the part you documented in Bronze medal criterion #4. Submit this part to the iGEM Parts Registry.
+
                        <div class="navsub">
−
|We created 3 new BioBrick devices for silver medal criterion. Please look at [http://parts.igem.org/wiki/index.php?title=Part:BBa_K1653025 BBa_K1653025] , [http://parts.igem.org/wiki/index.php?title=Part:BBa_K1653024 BBa_K1653024], and [http://parts.igem.org/wiki/index.php?title=Part:BBa_K1653027 BBa_K1653027].
+
                            <ul>
−
|-
+
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Description">DESCRIPTION</a></li>
−
|2
+
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Design">APPLIED DESIGN</a></li>
−
|Convince the judges you have helped any registered iGEM team from a high-school, different track, another university, or institution in a significant way by, for example, mentoring a new team, characterizing a part, debugging a construct, modeling/simulating their system or helping validate a software/hardware solution to a synthetic biology problem.
+
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Make_Your_Own">MAKE YOUR OWN</a></li>
−
|Please check [https://2016.igem.org/Team:Nagahama/Collaborations here].
+
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Downloads">DOWNLOADS</a></li>
−
|-
+
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Gallery">GALLERY</a></li>
−
|3
+
                            </ul>
−
|iGEM projects involve important questions beyond the bench, for example relating to (but not limited to) ethics, sustainability, social justice, safety, security, and intellectual property rights. We refer to these activities as Human Practices in iGEM. Demonstrate how your team has identified, investigated and addressed one or more of these issues in the context of your project. (See the Human Practices Hub for more information.)
+
                        </div>
−
|Please check [https://2016.igem.org/Team:Nagahama/HP/Silver here].
+
                    </li>
−
|}
+
                    <li><a href="//2015.igem.org/Team:Cambridge-JIC/Hardware">HARDWARE</a>
 +
                        <div class="navsub">
 +
                            <ul>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Tech_Specs">TECHNICAL SPECIFICATIONS</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Modeling">MODELING</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/3D_Printing">3D PRINTING</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Stretch_Goals">STRETCH GOALS</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                    <li><a href="//2015.igem.org/Team:Cambridge-JIC/Software">SOFTWARE</a>
 +
                        <div class="navsub">
 +
                            <ul>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Webshell">WEBSHELL</a></li>
 +
                                <!--<li><a href="//2015.igem.org/Team:Cambridge-JIC/ScopeScratch">SCOPESCRATCH</a></li>-->
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/MicroMaps">MICROMAPS</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Autofocus">AUTOFOCUS</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/ImageJ">IMAGEJ</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                    <li><a href="//2015.igem.org/Team:Cambridge-JIC/Practices">COMMUNITY</a>
 +
                        <div class="navsub">
 +
                            <ul>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Outreach">OUTREACH</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/OpenHardwareRevolution">OPEN HARDWARE LICENSING</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Collaborations">COLLABORATION</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Wiki_Design">WIKI DESIGN</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                    <li><a href="//2015.igem.org/Team:Cambridge-JIC/Lab">OUR LAB</a>
 +
                        <div class="navsub">
 +
                            <ul>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Notebook">NOTEBOOK</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Safety">SAFETY</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Achievements">ACHIEVEMENTS</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                    <li><a href="//2015.igem.org/Team:Cambridge-JIC/People">ABOUT US</a>
 +
                        <div class="navsub">
 +
                            <ul>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Team">MEET THE TEAM</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Attributions">ATTRIBUTION</a></li>
 +
                                <li><a href="//2015.igem.org/Team:Cambridge-JIC/Sponsors">SPONSORS</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                </ul>
 +
            </div>
  
−
===Gold Medal===
+
        </div>
−
{| class="wikitable"
+
    </div>
−
|-
+
−
|1
+
−
|Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the design and/or execution of your project.
+
−
|Please check [https://2016.igem.org/Team:Nagahama/HP/Gold here].
+
−
|-
+
−
|2
+
−
|Improve the function OR characterization of a previously existing BioBrick Part or Device (created by another team, or by your own team in in a previous year of iGEM), and enter this information in the part's page on the Registry. Please see the Registry Contribution help page for help on documenting a contribution to an existing part. This part must NOT come from your team's 2016 range of part numbers.
+
−
|Please check [https://2016.igem.org/Team:Nagahama/Description here].
+
−
|-
+
−
|3
+
−
|Demonstrate a functional proof of concept of your project. Your proof of concept must consist of a BioBrick device; a single BioBrick part cannot constitute a proof of concept. (Remember, biological materials may not be taken outside the lab.)
+
−
|Please check [https://2016.igem.org/Team:Nagahama/Proof here].
+
−
|-
+
−
|4
+
−
|Show your project working under real-world conditions. To achieve this criterion, you should demonstrate your whole system, or a functional proof of concept working under simulated conditions in the lab (Remember, biological materials may not be taken outside the lab.) 
+
−
|Please check [https://2016.igem.org/Team:Nagahama/Demonstrate here].
+
−
|-
+
−
|}
+
  
  
  
−
<html>
 
  
−
<div class="column full_size" >
+
<style>
−
<h2> Welcome to iGEM 2016! </h2>
+
p {
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
font-family: Open Sans; font-weight: 300; font-size: 120%; line-height:30px;
 +
}
 +
li.list {
 +
font-family: Open Sans; font-weight: 300; font-size: 120%; line-height:30px;
 +
</style>
  
−
</div>  
+
<section style="background-color:#fff">
  
−
<div class="column half_size" >
+
    <div class="slide" style="min-height:0px">
−
<h5>Before you start: </h5>
+
        <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#123a68">
−
<p> Please read the following pages:</p>
+
<center>
−
<ul>
+
<h1 style="line-height:1.295em"> Wiki Design Guide </h1>
−
<li>  <a href="https://2016.igem.org/Requirements">Requirements page </a> </li>
+
<p> Make your wiki more beautiful than our team. </p>
−
<li> <a href="https://2016.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
+
<hr>
−
<li> <a href="https://2016.igem.org/Resources/Template_Documentation"> Template Documentation </a></li>
+
<p> This guide briefly dives into incorporating CSS, Java Script and JQuery into your wiki, a few graphic design tips, and ways to improve the user experience.
−
</ul>
+
</center>
−
</div>
+
</div></div></section>
  
−
<div class="column half_size" >
+
<section style="background-color:#123a68">
−
<div class="highlight">
+
    <div class="slide" style="min-height:0px">
−
<h5> Styling your wiki </h5>
+
        <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#fff">
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
<h3> Creating new pages </h3>
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>  
+
<p>To create a new page, simply type in the name of the page in your address bar, e.g. https://2015.igem.org/Team:YourTeam/OurNewPage, and edit it. MediaWiki (iGEM's website engine) will automatically create the page for you</p>
−
</div>
+
<h3> Using HTML </h3>
−
</div>
+
<p> To use html, simply wrap everything in html tags: <code>&lt;html&gt;...&lt;/html&gt;</code>. It's useful to note that these html tags will <em>not</em> actually appear in your page source&#8212;they just tell MediaWiki to output the html within directly, without modification (almost; lone ampersands will be replaced with <code>&amp;amp;</code>, which won't be a problem unless they're in some javascript code. If this is a problem, try externalising your JS code, see below for instructions.) </p>
 +
<h3> Using Templates </h3>
 +
<p>Using templates helps to avoid typing in the same html again and again, and also allows you to make changes in one place that apply to all your pages. We have two templates we use, <code>Team:Cambridge/Templates/Menu</code> and <code>Team:Cambridge/Templates/Footer</code>. These templates are created as normal new pages, and are then directly <em>included</em> in your page using MediaWiki syntax:</p>
 +
<pre>{{:Team:YourTeam/Templates/OurHeader}}
 +
&lt;html&gt;Our page&lt;/html&gt;
 +
{{:Team:YourTeam/Templates/OurFooter}}</pre>
 +
<p>Note carefully the above notice regarding the function of the html tags - this means that your template can end without closing all its tags and it won't mess up your page! For example, you can wrap your site in a container div by opening the tag in your header template, and then closing it in your footer template.</p>
 +
<h3> Using CSS and JS </h3>
 +
<p>As iGEM teams are unable to upload and refer to CSS and Javascript files, styling your webpages takes a different method to the standard way. Instead, we have created new pages within our wiki which we then ask MediaWiki to treat as <em>raw</em> files when we link to them in the html of our other pages. We tend to use page names that end in _CSS and _JS.</p>
 +
<code> &lt;script src="//2015.igem.org/Team:YourTeam/file_js?action=raw&amp;ctype=text/javascript">&lt;/script&gt;</code>
 +
<p>
 +
for javascript and:</p>
 +
<code>&lt;link href="//2015.igem.org/Team:YourTeam/file_css?action=raw&amp;ctype=text/css" rel="stylesheet"&gt;</code>
 +
<p>for css. This takes the raw code that was entered as if it was an uploaded file.</p>
 +
<p>Note how we've removed the http: from the beginning of the URLs above. This allows the browser to choose http: or https: depending on how you're connecting to iGEM and improves security! We apply it to all our URLs.</p>
  
−
<div class="column full_size" >
+
<h3> JQuery </h3>
−
<h5> Wiki template information </h5>
+
<p> Visit JQuery's website <a href="//jquery.com"> <u>here</u></a>. JQuery is a javascript library that allows for easy implementation of various javascript functions. Our website's gallery, notebook and quizzes all use JQuery. Even our OpenScope Webshell was developed with JQuery. Try it out and save some time!</p>
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
  
−
</div>  
+
<!--<h3> Page Header/Footer Templates </h3>-->
  
 +
</div></div></section>
  
 +
<section style="background-color:#fff">
 +
    <div class="slide" style="min-height:0px">
 +
        <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#123a68">
 +
<h2> Graphic Design </h2>
 +
<h3> Colours </h3>
 +
<p>Before creating too many images and colouring in your wiki, deciding on a colour scheme can ensure your wiki looks professional. </p>
  
 +
<p>Colours in HTML are given as RGB values. These can be difficult to visualise and match. Instead pick your colours first with HSL (hue, saturation and lightness) values. As a guide, three to four different hues is easy to work with.</p>
 +
<center>
 +
<hr>
 +
<img src="//2015.igem.org/wiki/images/2/2f/CamJIC-Colours.png" style="height: 300px; margin-right: 70px">
 +
<hr>
 +
</center>
 +
<p><ul>
 +
<li class="list">We used four different hues that were all delicate temperatures</li><br>
 +
<li class="list">Each hue was split into two or three shades, made by changing the lightness and saturation.</li><br>
 +
<li class="list">For backgrounds, avoid using highly saturated colours. None of the colours we chose were very saturated, this is to reduce the strain on viewers' eyes. This is why pastel palettes can be so visually pleasing.</li><br>
 +
<li class="list"> It's useful to have both dark (around 80/255 lightness) and light (around 220/250 lightness) colours when considering text on backgrounds. High contrast is needed to easily make out the features of words. Note also that fine details in bright blue can be hard to resolve with the human eye due to the lower abundance of S-cone receptor cells in the eye.</li><br>
 +
<li class="list"> Once you have picked a few colours then find their RGB values, ready to use for your website!</li><br>
 +
</ul></p>
 +
<h3> Fonts </h3>
 +
<p>Unify your fonts across your webpage. Ideally, decide on one or two serif fonts and one or two sans-serif fonts. Serifs are the ticks on text that can make it easier to read, as letters are identified more easily. Our wiki uses three fonts: Sabon - a serif font, Open Sans, and Hiragino Sans GB.</p>
 +
<center>
 +
<hr>
 +
<img src="//2015.igem.org/wiki/images/5/5b/CamJIC-Font.png" style="width: 600px; margin-right: 70px">
 +
</center>
 +
<hr>
 +
<p>When including fonts in style tags in your wiki, assign a family of fonts using <code>font-family: font1, font2,...</code> where font1, font2,... is the preferential order of similar fonts to be displayed in case a certain font isn't supported by the user's browser.</p><br>
  
−
<div class="column half_size" >
+
<h3> Making Images with Inkscape </h3>
−
<h5> Editing your wiki </h5>
+
<p>Almost all of our images have been made on the program Inkscape. Inkscape is a free multi platform graphic designing software which is extremely easy to pick up and make graphics with. Three of our team learned the basics over night and created all of the back-panels of this website subsequently with it.</p>
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
−
<p> <a href="https://2016.igem.org/wiki/index.php?title=Team:Example&action=edit"> Click here to edit this page! </a></p>
+
  
−
</div>
+
<p> Check out Inkscape <a style="color:#123a68;" href="//inkscape.org"><u>here</u></a>.</p>
 +
</div></div></section>
 +
<section style="background-color:#123a68">
 +
    <div class="slide" style="min-height:0px">
 +
        <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#fff">
 +
<h2>User Experience </h2>
 +
<h3>Responsive Design</h3>
 +
<p>Most iGEM Wiki pages aren't made with a responsive design. This means that when viewing the pages on a phone or tablet, or by simply shrinking the browser window, the wiki loses its formatting. Our website has used various JQuery functions, CSS and Bootstrap, so that the same design will work and scale for any screen size - giving support for mobiles, tablets and desktops/laptops alike.
  
 +
<h3>Navigation</h3>
 +
<p>Navigation is really important in an iGEM wiki. Users need to be guided through the website, with out losing the freedom to navigate quickly to any other location. Whereever you are in a team's wiki, having an impression of how much information is on the page, and on the other pages keeps the user from feeling lost.</p>
  
−
<div class="column half_size" >
+
<p>Our approach to the navigation of our website involves two depth levels of information. The top menu bar contains the six different aspects of our project and going one by one through these allows for a brief overview of everything that we've done. Links to each of these pages are available from our home page. Each page has links to the deeper level of information, clicking on one of these from our home page gives you the details and specifics, including downloads and reports.</p>
−
<h5>Tips</h5>
+
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
−
<ul>
+
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2016.igem.org/Calendar">iGEM 2016 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<h5>Inspiration</h5>
+
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
−
<ul>
+
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
−
 
+
−
<div class="column half_size" >
+
−
<h5> Uploading pictures and files </h5>
+
−
<p> You can upload your pictures and files to the iGEM 2016 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
−
When you upload, set the "Destination Filename" to <code>Team:YourOfficialTeamName/NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
−
 
+
−
 
+
−
<div class="button_click"  onClick=" parent.location= 'https://2016.igem.org/Special:Upload '"> 
+
−
UPLOAD FILES
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
  
 +
<p> And the best part, at any point you can swap between the brief overviews and detailed information. Just click "learn more" for details.</p>
 +
<br>
 +
<center>
 +
<img src="//2015.igem.org/wiki/images/e/ea/CamJIC-SiteMap.png" style="width:90%">
 +
</center>
 +
<br>
 +
<p> By structuring the website as a 2 layer deep hierarchy, users can travel through our wiki to get an overall idea and go indepth on anything that catches their eye. Of course, they are also free to teleport to any page with the menu bar above. Finally, our downloads page contain all the possible downloads found throughout the website for ease of access.</p>
 +
<center>
 +
<hr>
 +
<p>Happy Navigating!</p>
 +
</center>
  
 +
</div></div></section>
  
  
 +
<style>img.sponsor{max-width:90%; filter: grayscale(100%);-webkit-filter: grayscale(100%); opacity:0.7; max-height:30px; margin:10px} img.sponsor:hover {filter:grayscale(0%); -webkit-filter: grayscale(0%);opacity:1; max-height:30px; margin:10px}</style>
 +
    <section id="footer-sec">
 +
        <div class="container">
 +
            <div class="row  pad-bottom">
 +
                <div class="col-md-3">
 +
                    <h4> <strong>ABOUT US</strong> </h4>
 +
                    <p>
 +
                    We are a team of Cambridge undergraduates, competing in the Hardware track in iGEM 2015.
 +
                    </p>
 +
                    <a href="//2015.igem.org/Team:Cambridge-JIC/Team">read more</a>
 +
                </div>
 +
                <div class="col-md-3">
 +
                    <h4> <strong>FOLLOW US ON</strong> </h4>
 +
                    <p>
 +
                    <a href="https://www.facebook.com/CambridgeJIC2015" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a> 
 +
                    <a href="https://twitter.com/iGEMCambridge" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a> 
 +
                    <a href="https://instagram.com/iGEMCambridge" target="_blank"><i class="fa fa-instagram fa-3x"></i></a> 
 +
                    </p>
 +
                </div>
 +
                <div class="col-md-3">
 +
                    <h4> <strong>LOCATION</strong> </h4>
 +
                    <p>
 +
                    Department of Plant Sciences, <br>
 +
                    University of Cambridge  <br>
 +
                    Downing Street <br>
 +
                    CB2 3EA
 +
                    </p>
 +
                </div>
 +
                <div class="col-md-3">
 +
                    <h4> <strong>CONTACT US</strong> </h4>
 +
                    <p>
 +
                    Email: <a href="mailto:&#105;&#103;&#101;&#109;&#99;&#97;&#109;&#98;&#114;&#105;&#100;&#103;&#101;&#50;&#48;&#49;&#53;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;">&#105;&#103;&#101;&#109;&#99;&#97;&#109;&#98;&#114;&#105;&#100;&#103;&#101;&#50;&#48;&#49;&#53;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;</a> <br>
 +
                    Tel: <a href="tel:+447721944314">+447721944314</a>
 +
                    </p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section> 
 +
<section style="background-color: white" id="footer-sec2">
 +
    <div style="padding: 20px;">
 +
        <section style="text-align: center; padding: 0px; margin: 0px">
 +
            <a href="http://www.eng.cam.ac.uk"><img src="//2015.igem.org/wiki/images/b/b9/CamJIC-Sponsors-Engineering.png" style="margin:10px" class="sponsor"></a>
 +
            <a href="http://www.plantsci.cam.ac.uk"><img src="//2015.igem.org/wiki/images/d/df/CamJIC-Sponsors-PlantScience.png" class="sponsor"></a>
 +
            <a href="https://www.jic.ac.uk"><img src="//2015.igem.org/wiki/images/b/bb/CamJIC-Sponsors-JIC.png" class="sponsor" ></a>
 +
            <a href="http://www.wellcome.ac.uk"><img src="//2015.igem.org/wiki/images/7/74/CamJIC-Sponsors-WT.png" class="sponsor"></a>
 +
            <a href="http://www.bbsrc.ac.uk"><img src="//2015.igem.org/wiki/images/8/81/CamJIC-Sponsors-BBSRC.png" class="sponsor"></a>
 +
            <a href="https://www.idtdna.com"><img src="//2015.igem.org/wiki/images/8/80/IDT_logo.png" class="sponsor"></a>
 +
            <a href="http://www.phy.cam.ac.uk"><img src="//2015.igem.org/wiki/images/0/06/CamJIC-Sponsors-Cavendish.gif" class="sponsor"></a>
 +
            <a href="http://www.bibby-scientific.com"><img src="//2015.igem.org/wiki/images/0/09/CamJIC-Sponsors-BibbyScientific.jpg" class="sponsor"></a>
 +
            <a href="http://shop.pimoroni.com"><img src="//2015.igem.org/wiki/images/3/3d/CamJIC-Pimoroni.jpg" class="sponsor"></a>
 +
            <a href=""><img src="//2015.igem.org/wiki/images/8/84/CamJIC-Sponsors-OpenIOLabsLogo_lg.png" class="sponsor"></a>
 +
        </section>
 +
    </div>
 +
</section> 
 +
</div> 
  
 +
</p>
 +
<!--
 +
NewPP limit report
 +
CPU time usage: 0.007 seconds
 +
Real time usage: 0.008 seconds
 +
Preprocessor visited node count: 14/1000000
 +
Preprocessor generated node count: 64/1000000
 +
Post‐expand include size: 82/2097152 bytes
 +
Template argument size: 0/2097152 bytes
 +
Highest expansion depth: 2/40
 +
Expensive parser function count: 0/100
 +
-->
  
 +
<!-- Saved in parser cache with key 2015_igem_org:pcache:idhash:29385-0!*!*!*!*!*!* and timestamp 20161012025041 and revision id 403872
 +
-->
 +
</div> <div class="visualClear"></div>
 +
    </div>
 +
</div>
 +
    </div>
 +
</body>
 
</html>
 
</html>

Revision as of 09:51, 12 October 2016

Team:iGEM nagahama/Wiki Design - 2016.igem.org

Loading menubar.....

Team:Cambridge-JIC/Wiki Design

CAMBRIDGE-JIC

Wiki Design Guide

Make your wiki more beautiful than our team.

This guide briefly dives into incorporating CSS, Java Script and JQuery into your wiki, a few graphic design tips, and ways to improve the user experience.

Creating new pages

To create a new page, simply type in the name of the page in your address bar, e.g. https://2015.igem.org/Team:YourTeam/OurNewPage, and edit it. MediaWiki (iGEM's website engine) will automatically create the page for you

Using HTML

To use html, simply wrap everything in html tags: <html>...</html>. It's useful to note that these html tags will not actually appear in your page source—they just tell MediaWiki to output the html within directly, without modification (almost; lone ampersands will be replaced with &amp;, which won't be a problem unless they're in some javascript code. If this is a problem, try externalising your JS code, see below for instructions.)

Using Templates

Using templates helps to avoid typing in the same html again and again, and also allows you to make changes in one place that apply to all your pages. We have two templates we use, Team:Cambridge/Templates/Menu and Team:Cambridge/Templates/Footer. These templates are created as normal new pages, and are then directly included in your page using MediaWiki syntax:

{{:Team:YourTeam/Templates/OurHeader}}
<html>Our page</html>
{{:Team:YourTeam/Templates/OurFooter}}

Note carefully the above notice regarding the function of the html tags - this means that your template can end without closing all its tags and it won't mess up your page! For example, you can wrap your site in a container div by opening the tag in your header template, and then closing it in your footer template.

Using CSS and JS

As iGEM teams are unable to upload and refer to CSS and Javascript files, styling your webpages takes a different method to the standard way. Instead, we have created new pages within our wiki which we then ask MediaWiki to treat as raw files when we link to them in the html of our other pages. We tend to use page names that end in _CSS and _JS.

<script src="//2015.igem.org/Team:YourTeam/file_js?action=raw&ctype=text/javascript"></script>

for javascript and:

<link href="//2015.igem.org/Team:YourTeam/file_css?action=raw&ctype=text/css" rel="stylesheet">

for css. This takes the raw code that was entered as if it was an uploaded file.

Note how we've removed the http: from the beginning of the URLs above. This allows the browser to choose http: or https: depending on how you're connecting to iGEM and improves security! We apply it to all our URLs.

JQuery

Visit JQuery's website here. JQuery is a javascript library that allows for easy implementation of various javascript functions. Our website's gallery, notebook and quizzes all use JQuery. Even our OpenScope Webshell was developed with JQuery. Try it out and save some time!

Graphic Design

Colours

Before creating too many images and colouring in your wiki, deciding on a colour scheme can ensure your wiki looks professional.

Colours in HTML are given as RGB values. These can be difficult to visualise and match. Instead pick your colours first with HSL (hue, saturation and lightness) values. As a guide, three to four different hues is easy to work with.

  • We used four different hues that were all delicate temperatures

  • Each hue was split into two or three shades, made by changing the lightness and saturation.

  • For backgrounds, avoid using highly saturated colours. None of the colours we chose were very saturated, this is to reduce the strain on viewers' eyes. This is why pastel palettes can be so visually pleasing.

  • It's useful to have both dark (around 80/255 lightness) and light (around 220/250 lightness) colours when considering text on backgrounds. High contrast is needed to easily make out the features of words. Note also that fine details in bright blue can be hard to resolve with the human eye due to the lower abundance of S-cone receptor cells in the eye.

  • Once you have picked a few colours then find their RGB values, ready to use for your website!

Fonts

Unify your fonts across your webpage. Ideally, decide on one or two serif fonts and one or two sans-serif fonts. Serifs are the ticks on text that can make it easier to read, as letters are identified more easily. Our wiki uses three fonts: Sabon - a serif font, Open Sans, and Hiragino Sans GB.

When including fonts in style tags in your wiki, assign a family of fonts using font-family: font1, font2,... where font1, font2,... is the preferential order of similar fonts to be displayed in case a certain font isn't supported by the user's browser.


Making Images with Inkscape

Almost all of our images have been made on the program Inkscape. Inkscape is a free multi platform graphic designing software which is extremely easy to pick up and make graphics with. Three of our team learned the basics over night and created all of the back-panels of this website subsequently with it.

Check out Inkscape here.

User Experience

Responsive Design

Most iGEM Wiki pages aren't made with a responsive design. This means that when viewing the pages on a phone or tablet, or by simply shrinking the browser window, the wiki loses its formatting. Our website has used various JQuery functions, CSS and Bootstrap, so that the same design will work and scale for any screen size - giving support for mobiles, tablets and desktops/laptops alike.

Navigation

Navigation is really important in an iGEM wiki. Users need to be guided through the website, with out losing the freedom to navigate quickly to any other location. Whereever you are in a team's wiki, having an impression of how much information is on the page, and on the other pages keeps the user from feeling lost.

Our approach to the navigation of our website involves two depth levels of information. The top menu bar contains the six different aspects of our project and going one by one through these allows for a brief overview of everything that we've done. Links to each of these pages are available from our home page. Each page has links to the deeper level of information, clicking on one of these from our home page gives you the details and specifics, including downloads and reports.

And the best part, at any point you can swap between the brief overviews and detailed information. Just click "learn more" for details.



By structuring the website as a 2 layer deep hierarchy, users can travel through our wiki to get an overall idea and go indepth on anything that catches their eye. Of course, they are also free to teleport to any page with the menu bar above. Finally, our downloads page contain all the possible downloads found throughout the website for ease of access.

Happy Navigating!