Team:TU Delft/Modeling/wiki-tips-tricks

From 2010.igem.org

Wiki Tips and Tricks

Part of the iGEM competition is to publish your work on the iGEM wiki. During the spring workshop you will get a brief introduction on how to create and edit pages, but this probably leaves you with a lot of questions. How do you get from the default iGEM team page to a nice and shiny website?

The TU Delft wiki uses a number of MediaWiki features that might be worth mentioning, if you're working on a wiki too. Most of it can be found at http://www.mediawiki.org/wiki/Help:Contents as well.

The tips here are general advice, the tricks contain the technical details.


Tips

Tip 1: Start building your wiki immediately

Don't wait to the last week before the wiki lockdown with working on your wiki. When you update your wiki with your progress on a regular basis it does not only save time in the end, but it also helps others that might be struggling with the same issues in the lab. Your first wiki does not have to look fancy, basic navigation will suffice.

Tip 2: Look around on previous teams wiki for useful code

You don't have to reinvent the wheel. Webdevelopment has been an open source discipline for a much longer time than biotech, so there is plenty of code available to upgrade your wiki. Do remember to respect the authors and licenses.

After we discovered that other teams were copying our work, we had no other choice than to keep the rest secret until the very end. Luckily for you, we reveal all tricks on this page.

Tip 3: Learn everything about Wiki Markup

You can add a lot more than just text to a wiki. Wiki Markup codes help you to format your input and make your pages more dynamic. [http://en.wikipedia.org/wiki/Help:Wiki_markup Help:Wiki_markup]

Basic Tricks

Trick 1:

Use templates! This is the most used way create common parts of the page (For example, a header or footer)

  • Templates: 
{{:Team:TEAM_NAME/TemplateName}}

or with a template parameter: 

{{:Team:TEAM_NAME/TemplateName|ParameterName=abc}}

Within the template, you can then access the parameter with {{{ParameterName}}}

You can also put pages in Template:Team:TEAM_NAME/Page, and then omit the first ':': 

{{Team:TEAM_NAME/TemplateName|ParameterName=abc}}

Trick 2: Wiki URL parameters

  • Append ?action=raw to the URL to get the raw wiki page contents. This is mostly used for storing javascript
  • Append ?action=render to the URL to get the pure page content rendered as HTML (without the standard iGEM wiki headers around it). This can be used for ajax behavior, loading wiki pages dynamically.
  • Append ?ctype=text/javascript to your URL to change the HTTP content type.

Trick 3: Photo sources

The iGEM wiki picture management can be time consuming. Use our fb_photodisplay template to display pictures from facebook, or use a site such as flickr that has it's own photo javascript API.

Trick 4: Hide the default iGEM Header

The following code helps you to hide the default iGEM header and adjust the footer. Don't forget that the links on top of the page are still useful to the user. So don't hide them completely. Also remember to include a link to the iGEM homepage. 

/* Wiki Hacks - START */
/* Author: Pieter van Boheemen */
/* Team: TU Delft */
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
#content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: hidden; height:100%;}
#bodyContent { border: none; padding:0; margin:0; width:100%; height:100%;}
#top-section { height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important;
padding:0; border: none; font-size: 10px;}
#p-logo { height:1px; overflow:hidden; display: none;}
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
.left-menu { width: 500px !important; display:block; margin-top:-80px; border: none; text-align: right;}
.left-menu ul { border: none; }
#menubar.right-menu { width:300px; display:block; float:left; margin-top:-80px; border: none;}
.right-menu ul { border: none; width: 300px;}
#footer-box { width: 100%; margin: -10px auto 0 auto; padding: 20px 0;}
.visualClear { display: none; }
#footer { border: none; width: 965px; margin: 0 auto; padding: 0;}
.firstHeading { display: none;}
#f-list a { color: #333; font-size: 10px;}
#f-list a:hover { color: #666;}
.printfooter { display: none; }
#footer ul { margin: 0; padding: 0;}
#footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
#search-controls { display:none; }
h3#siteSub { display: none;}
#contentSub {display: none;}
p:first-child { display: none;}
/* Wiki Hacks - END */

Advanced Tricks

Trick 5: Bread crumbs

Easy navigation is very important from a usability point of view. By default the Wiki system does not have a tree like navigation structure. With the code below you can add bread crumbs to each page on your teams wiki like: Home > Project > Sub project > Sub page. For this to work you need to have a logical structure in your URLs like: Team:YOURTEAM/project/sub-project/sub-page. 

<script>
//Configure the script here
var teamname = "TU_Delft";

// Do not edit below

// Loop through the URL
function buildDepth(array,count) {
	var depthStr="";
	for (i=0;i<count;i++)
	{
		depthStr=depthStr + array[i] + "/" ;
	}
	return depthStr;
}

// The function
function buildBreadCrumbTrail(page) {
	// Declare vars
	var constituentFolders = new Array();
	var currentURL = page;

	// Split the URL
	constituentFolders=currentURL.split("/");

	// Start with a link to the team home page
	var outputStr="<a href='https://2010.igem.org/Team:'" + teamname + ">Home</a>";

	// Loop through the URL
	for (count=0;count<(constituentFolders.length);count++)
	{
		outputStr=outputStr + " > <a href='https://2010.igem.org/Team:" + teamname + 
buildDepth(constituentFolders,count) + constituentFolders[count] + "'>" + 
capitaliseFirstLetter(constituentFolders[count]).replace(/-/gi," ") + "</a>";
	}

	// Write to the div
	$("#breadcrumbs").html(outputStr);
}

// Capitalize the first letter
function capitaliseFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// Start the script upon page load
$(function() {
	buildBreadCrumbTrail(window.location.pathname);
}
</script>
<div id="breadcrumbs">The breadcrumbs will show up in this div</div>

Trick 6: Dynamic part query

If you want to get the part data in a dynamic way using javascript, check out [http://igempartview.appspot.com igempartview.appspot.com], a service running on Google App Engine that mirrors the partsregistry parts and allows queries on the parts (For example all parts in a certain category). The partsregistry part XML cannot be downloaded by wiki javascript due to [http://en.wikipedia.org/wiki/Same_origin_policy Same-Origin-Policy]. igempartview.appspot.com however, provides a web API that returns JSON and allows the use of [http://en.wikipedia.org/wiki/JSON#JSONP JSONP].

Retrieved from "http://2010.igem.org/Team:TU_Delft/Modeling/wiki-tips-tricks"