Team:TU Munich/Social Project

From 2010.igem.org

Revision as of 11:12, 25 October 2010 by Hartlmueller (Talk | contribs)

Navigation:

Home →  Social Project

iGEM MainPage

Contents


One major task for every iGEM team is the creation of a wiki describing their project. For this reason the MIT is hosting a MediaWiki and every iGEM participant is allowed to create wiki pages on this server. The great advantage of this setup is that no team has to have a server for hosting their own wiki. On the other hand, team members are not allowed to change any MediaWiki settings, such as changing the skin of the wiki or installing extensions. For our social project we will show how to create a team wiki that is easy to use and can still be customized as desired. The following tutorial will be divided into two parts:

  • Part I describes how to create and setup a team wiki at the first place. This part should be read by members in charge of the layout and design of the wiki and will require basic computer skills. An understanding of HTML and CSS will also be helpful.
  • Part II focuses on the everyday usage of the wiki create in part I. All team member that will contribute to their wiki should read this part.

Part I

Before creating your own wiki, you should be aware of some aspects that you have to deal with when you create your team wiki. The intention of a wiki is to provide an easy-to-use platform where team member can enter information without having to know any HTML, CSS, etc. Secondly, most teams want to add their own style and design to their wiki. The normal way to customize MediaWiki is by using skins and extensions. As all iGEM teams share you common wiki, this is not possible. Changes done by one team would screw up the wiki of some another team. Summing up, the following text has to goals: Create a wiki that every team member can easily edit. Demonstrate how to customize the look of your wiki.

Create an easy-to-use Wiki

Although team wikis tend to vary, most of them contain two areas. A navigation area is always found as well as a content section. These two sections are the most relevant parts of your wiki since every team member should be capable of adding information or arranging your wiki pages. In this tutorial I will use a straight forward, table-based layout that will be put into practice using an invisible HTML table (see figure). For a very short introduction on HTML open the up the following "Read more" section.

Read more

HTML (Hypertext Markup Language) is a computer language that tells a browser (e.g. Firefox, Internet Explorer, …) what a webpage is supposed to looks like. In fact, a HTML file comprises plain text and holds instructions, so-called tags, for the browser. Every tag is marked with brackets and has a name that specifies the tag type. The beginning of a tag always contains an opening an a closing bracket (<...>) and the ending of a tag additionally has a forward slash / (</...>). For example, and
tell the browser that there will be a table, whereas all text between

and

will be in one paragraph. Consequently, a complete webpage is build by just stringing together several tags.

It should be noted that every webpage is to be placed between a and a tag. Within this html-tag, there has to be one <head> … </head> that holds some invisible information about the webpage (e.g. the title of the page, the author, fonts and font-sizes, information for search robots such as Google, …). After the head-section, the body-section is declared (<body> … </body>). This is where all visible content of the page is specified (e.g. tables, paragraphs and text, images, flash content, …).

Another important aspect concerning tags are so-called attributes. Attributes represent options that can be applied to certain tags. Attributes are places inside the opening brackets of a tag. For example, ...
set the width of the border of this table to 1 pixel.

In order to learn more about HTML or to just look up some tags or attributes, many tutorials exist on the web. A small collection is available in the Wikipedia.

Close

Figure 1: A The top of the page will contain a header showing a banner representing your team. Underneath will be a horizontal navigation area. Below this area on the left, the large content area will be positioned. To the right of the content will be a narrow vertical range, where you can add optional extras, such as a countdown to the jamboree, a visitor counter or some art work etc. B HTML code for this table

Here will be a banner.
Place for the navigation.
This is the major part of page: it holds the content. Optional area to have some extra eye-candy, countdown, ...

Another important aspect is how to apply this table layout to the wiki page. In general, a wiki software allows the user to create different pages and to add content to this page. To view such a wiki page using a browser, the MediaWiki software has to generates the corresponding HTML page. For this purpose, the MediaWiki is supplied with a HTML framework holding the typical wiki interface and places the content of the requested page into a container within the HTML framework. So when a wiki page is edited, the only part that is change is within the container of this HTML framework. It is important to note, that in the case of the iGEM wiki this HTML framework cannot be modified. In other words, the layout and design has to be entered into the textbox on every edit page. But as the layout and navigation bar is identical for every page, it is useful to have these elements at one central place, rather than copying the same information on every single wiki page. For this purpose MediaWiki can handle so-called templates. These templates are wiki pages themselves and are included into other wiki page. This is accomplished by placing the name of the template between and opening “{{:” and a closing “}}”, for example {{:Team:xyz/Templates/Layout}}. When this page is requested by a browser, the MediaWiki software will replace {{:Team:xyz/Templates/Layout}} with the content of the page Team:xyz/Templates/Layout (Please note, that MediaWiki always treats names in a case-sensitive manner). Another handy aspect about templates are so-called parameters that can serve as a placeholder for content that can be set later. When creating a template page, a placeholder casn be inserted using “{{{“ and “}}}” with the name of the placeholder inbetween. For example a template page can contain a paragraph

The first step to use templates is to create a new page. In principle, the name of the new page can be anything. However, it might be useful to use a prefix such as “Templates/” and templates will therefore be easier to find and manage.


Retrieved from "http://2010.igem.org/Team:TU_Munich/Social_Project"