Unit 6: Wiki Design

In iGEM, wiki is a literal and visual presentation of the teams’ project. Each team need to complete their wiki before Wiki Freeze, a deadline about 10 days before Jamboree. The wiki consist of pages that describe your project, accomplishments and your team. It is where judges, other teams and public get the impression of your project before the presentation. Prior and during your presentation session, judges will look at your wiki page to familiarise themselves and as a reference and aid for understanding your presentation. They will also ask questions specific to the contents in your wiki. The presentation of the wiki is a huge factor in judging.

(The homepage of 2017 team Hong Kong UCCKE’s wiki)

Constructing the wiki

Web browser engine

Before we learn how to create a website, it is important to know how do web browser works, or how they display webpages. They make use of a web browser engine, such as Blink in Chrome, WebKit in Safari and Gecko in Firefox etc. The web browser engine will “read” the code from the server and render the website in the browser, giving us the interface.

Basic visualization of how rendering engine works

Main phases

Planning

This is the most critical step of the whole process. You would like to create a site map, which is a list of pages and structure of the website. While planning, bear in mind that the wiki isn’t only for internal use of for judges to view, it is open to public. Therefore, you should try to keep the wiki simple to navigate around. More importantly, you should think about how to deliver your message to the user, making the most important part more outstanding.

Team Hong Kong UCCKE’s 2017 iGEM wiki’s sitemap

2. Content preparation

You should now have a list of pages that you need to make. It is time for content preparation. In this step, you and your teammates will have to create and/or create content for the wiki pages. You probably would like to use a cloud storage system for easy online file storage, sharing and collaboration, so that everyone can contribute easily.

Using Google Drive as the storage of the Wiki’s content

3. Designing

First impressions matter. It affects what others think about your team. Your wiki will be super content heavy, which may be a little bit tricky to handle. In the world of design, there is no absolute right or wrong. However, here are some common features of the best iGEM wikis.

Use a easy-to-read typography

To make your wiki more readible, you should use the font, font size, line height that is best for reading. For font, you should choose a professional-looking font, as the below example. For font size, you should use no less than 16px for normal text and huge difference for headings, this allows user to read the text easily and distinguish headings from content. Finally, for line height, you should use at least than 125% of the font size, so that the text won’t be to packed.

Examples of typography

2. Make use of white space

Have a look at the below examples, which do you think is a better design? Obviously the one with more white spaces. Make use of white space between different elements in a page, such as between paragraphs, or different sections. This makes the web page less “visually-heavy”, easy to the eyes, giving the users a better experience.

White space vs. Less white space, using footer of a webpage as example

3. Mobile friendly

Mobile First designs or Responsive designs are trending nowadays because of their ability to handle web display in different devices, including phone, tablet, laptop to desktop. This gives users on mobile a better experience by allowing to use the site with ease.

An example of mobile friendly vs non mobile friendly (Google Developers / CC-BY-3.0)

Following the above rules, you should start brainstorming how would you like your site to look like then try to draw a wireframe of your design. Some may like to directly go to the coding part as soon as they have an idea of the design and structure of the website. However, this is usually more time consuming, because you may want to change the design as you are coding it. By drawing a wireframe, you can get a feel of the design. If you want to change something, just modify your drawing or just start a new one. This allows you to save more time over coding all over again if you want to modify your design.

(A hand-drawn wireframe)

4. Production

Finally, after all those brainstorming, content preparing and designing, here comes the last and the most important step, production. You will create code for the wiki according to your designs. Details of this stage will be discussed in the next section.

HTML Basics

Background

HyperText Markup Language is a markup language used for creating websites. A markup language is a standardized system of code designed to store information systematically. In this case, HTML code stores information about the structure and content of the webpage.

Files using the language HTML is saved as file type .html, for example, a web page file can have the name “PAGE.html”. Basically, you can assume that 1 web page = 1 HTML file.

Basic unit of HTML

An element, which consists of a start tag, some contents and usually an end tag, is the basic building block of a web page. For example, a basic block looks like this:

Nestability of HTML

Note that HTML is nestable, that means that a HTML element can be nested in another HTML element. For example, a link can be nested in a paragraph element as shown below:

<p>Some text and <a href=””>a link here</a></p>

This will output as:

In this case, we call the link element a child of the paragraph element.

Basic structure of a HTML document

Below is the basic structure of a HTML document. Every webpage starts with this code with page information in the <head> tag and the page content in the <body> tag. You can copy the following code as the starter template everytime you start a new HTML file,

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Attributes

Attributes are properties of an element, it contains information of the particular element. Below is an example of an attribute.

In this example, you can see that an attribute has a name and a value in the following format: name=”value”. For the attribute value, you can choose to use either single or double quotes. However, you should be aware that if the value itself contains double quote(s), you should use single quotes to contain the value, and vice versa.

The table below shows the most commons attributes and examples of them.

Commenting in HTML

Comments in HTML will not be rendered by the browser, they serve multiple purposes. A comment is inserted like this:

Comments are usually used to label parts of the page, i.e. different sections in a page. This help maintaining consistency and help yourself or others to understand the code.

Elements of HTML

Structural elements

<title>

The title of the page will be shown in the tab of the website in the browser, as shown as the image below.

The title could be retrieved by the browser because the line below was included in the file.

Content elements

<h1> to <h6>

Headings are similar to paragraphs, but they have a bigger font size and it will be detected by search engines to understand the structure of the page. The heading level drops from <h1> to <h6>. A <h1> header and its code is as below:

<a>

The a tag creates a link element. The link target must be provided by specifying the href attribute. For example, the following code creates a link to Google.

<b>, <i>, <u>, <s>

Below are example of using the tag and their effect.

Multimedia elements

<img>

This tag creates an image element. The image source must be provided by specifying the src attribute, for example: (note that the img element doesn’t have an end tag.)

<audio> and <video>

They create audio and video elements, which should be used as below:

List elements

The use of ordered and unordered list:

Table elements

The use of table:

Special elements

The div element

This is a special element that is used for layouts usually. It does not have a very specific purpose as the above elements do. And it can carry anything in it.

Although it doesn’t have a specific use, it appears a lot in web pages. The use of the div element will be covered in later sections.

Similar to other elements, a div element has both start and end tag and can take different attributes.

The span element

The span element is used to contain text. You can think it as the div element for texts, it doesn’t have specific styles or functions.

Block vs Inline

Besides of their function, which div is used to contain anything but span only contains text, another major difference s that div is a by default a block element while span is an inline element. A block element occupies the whole line, while an inline element occupies only as wide as required. As shown in below examples, block elements will occupy the whole line while inline elements will share the space.

Block vs. Inline

Try HTML

So, that’s all for the basics. Let’s learn how to try out our HTML skills.

In your computer (Mac)

Open any text editor of your choice (TextEdit as example)
Select Format > Make Plain Text

3. Start typing your HTML code

4.Save as HTML document

5. Open the HTML file with a browser

In your computer (Windows)

Open any text editor of your choice (notepad as example)
Start typing your HTML code

3. Save as HTML document, with type set as “All Files”

4. Open the HTML file with a browser

Online

There are lots of websites you can find online that allows you to visualize your HTML code. Anyone that works will be fine. Here is a list of online HTML editors:

- https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

- https://html-online.com/editor/

- https://htmlg.com/html-editor/

CSS Background

CSS gives the style to a HTML document. In other words, the HTML part gives the content and structure to the webpage and the CSS part gives the style to the webpage.

Without CSS

After adding CSS

A complete CSS rule consists of a selector and one or more declaration(s).

Selectors

The selector part of a CSS rule determines what objects to target. Selectors can be used to target objects using their element name, class attribute, id attribute, etc. The table below shows how to use different selectors:

Combining multiple selectors

Selectors can be used together to select elements more specifically. Below are examples of combining multiple selectors:

Comments

Same as HTML, CSS also have their own syntax for comments. In CSS, we use /** and **/ to wrap around the comment. For example:

Single line vs Multiple lines

You may see a CSS rule formatted in single line or in multiple lines, they have the same function. Most of the time, people choose to use single line format to save space or multiple lines format to make the code neat, so that's completely up to you.

Single line

Multiple lines

Applying CSS

There are three methods to apply CSS to a HTML web page.

External stylesheet

A CSS file can be saved as an independent file. A CSS file has the filetype “.css”. You can save all style rules in a seperate CSS file and link the file into the HTML page by adding the "link" tag into the "head" element of the HTML file.

style.css

home.html

In the above example, the style.css file will be loaded into the html file.

Internal stylesheet

Styles can be added directly into the HTML file by using the style tag. Check out the example below:

In the above example, the css rules are directly included in the HTML file.

Embed in element

Styles can also be directly embedded in an element. However, this method is not suggested as it will make maintenance more complicated. Styles are embedded by adding the rules into the style attribute of any element. The style will only apply for that element. For example:

The font size and color rules will only apply on this element, other elements will not be affected.

The CSS Box Model

The CSS Box Model is the foundation to all stylings of elements, it determines the size, position and other properties of an element. To CSS, every element is actually a “box”, with different properties, such as it’s height and width, padding width, border width etc.

(Mozilla Contributors / CC-BY-SA-2.5)

You can think of each element like an onion. The content is the innermost layer, towards outer layers, we have padding, border and margin. Each layer carries different properties:

Below are a bunch of examples of applications of the box model and its properties:

(To make the result image easier to understand, every element is given a light background and a container containing the element with a slightly darker background)

CSS Properties and Values

Besides the above mentioned box model properties, there are lots of other properties in CSS to define the style of elements. In this section, we will cover the most used properties.

Length Units

While defining the sizes of elements, CSS have different units to represent the length:

Color

There are few methods to specify a color value, below are details of commons methods:

Font styling

Element display and position

Great learning resources for newbies

w3schools - HTML5 Tutorial series - https://www.w3schools.com/html/
w3schools - CSS3 Tutorial series - https://www.w3schools.com/css/
Stack Overflow - Q&A platform for finding great answers to programming questions - https://stackoverflow.com/
Google. No one on earth knows everything, in case you have any doubt or questions about HTML and CSS, do google it yourself first. You will be able to find answers most of the time.

iGEM requirements

Note: Below information is based on iGEM 2017’s requirements, these requirements may change year to year, please check the iGEM wiki for the latest requirement.

Standard pages

iGEM requires teams to use specific page names in their wiki for facilitate the judging process. For example, the page which contains attributions must be names exactly as “Attributions” etc. Besides, if you want to be evaluated for special prizes, you must create wiki pages according to the same set of rules listed in iGEM’s Pages for Awards page. Please check the page for the list of page name and functions.

Specific rules for team wikis set by iGEM

Teams cannot edit, disable, hide, or alter the iGEM Login Bar

All iGEM 2018 Team Wikis are required to have the iGEM Login Bar. The Login Bar includes essential links, tools, and information for all users: including wiki creators, viewers and the judge. It serves as a quick navigation tool for all users and must be maintained on all of your team wiki pages as a result.

Teams must use the Standard Pages on their wiki to be considered for awards and medals

iGEM have created standard pages with static links for all awards and for most medal criteria. If your team wants to be evaluated for an award, you will need to document your achievements related to this award on a standard page.

Teams cannot use Adobe Flash on their wiki

Adobe flash is not permitted on team wikis. It's now considered to be an outdated video player and has had many security issues in the past. It's also not open source, which goes against iGEM's goal of making everything in the competition open source.

Teams must host all content on 2018.igem.org

All team pages, images, documents and code must be hosted on the 2018.igem.org server. Load your CSS and Javascript into the wiki, either directly into your page or using templates. Do not link to scripts or stylesheets that are hosted on other servers. iGEM preserve all iGEM content on our own servers so future teams can learn from what you have done. When you store content on your own sites or servers, after time, links might become broken, sites might go down, and information will be lost.

(Content in “specific rules for team wikis set by iGEM” are copied and slightly modified from iGEM website, iGEM / CC-BY-4.0)

Report abuse