Using/editing the wiki is a trial-and-error process. Editing the wiki is a simple, fun thing to do and you definitely get better the more you play around with it. The key is to take a look at other wiki pages and see what you like. Then all you have to do is go to the source (either view source if you're not logged in, or edit if you are logged in), copy it, and modify it to fit your needs. It doesn't have to be perfect before you can take a look at what it looks like. Try things out and see what results they yield.

You should keep ALL your content within your team's namespace. This includes uploaded files, templates, CSS and Javascript pages, not just your main wiki pages.

Uploading a file

Teams can upload a file into the iGEM server by visiting: 2020.igem.org/Special:Upload.

There is a separate namespace for your team's images and files that you upload to the server. When you upload a new image, you have to name it: T--OFFICIAL team name--File_name
For example, if you were on Team Example and wanted to upload the image "project_overview", you would name it: T--Example--project_overview.png. Take a look at the image 1.1 for reference.

This is a breakdown of the characters:
[capital T] [hyphen] [hyphen] [official_team_name_with_underscores_and_no_spaces] [hyphen] [hyphen] [filename_and.extension]

1.1 Screenshot of an example file being uploaded.

Note

The permitted file types on the iGEM server are: png, gif, jpg, jpeg, pdf, ppt, txt, zip, mp3, mp4, webm, mov, swf, xls, xlsx, docx, pptx, csv, m, ogg, gb, tif, tiff, fcs, otf, eot, ttf, woff, svg.
Files must be 100MB or less.

Creating a page

To create a new page you have to type its name on your navigation bar and, when the wiki message says this page "there is currently no text on this page", click on: edit this page. This will allow you to enter the wiki editor for that specific namespace and start working on the page.

Make sure you follow the naming convention when creating a page: OFFICIAL team name/PageName. For example, if you were on Team Example and wanted to create a Biosensor project page you would name it Team:Example/Project/Biosensor. Take a look at image 1.2 below for reference.

1.2 Screenshot of an example page about to be created.

Uploading videos and using HTML 5 to display them

You can upload videos (ogg, mp4, webm) to the 2019 wiki by using Mediawiki's Upload tool. Make sure that your video is less than 100 MB, a good way to ensure this is to export the video for mobile devices.

To display your videos you can use the HTML 5 <video> tag, along with <source src="file_url" type="video/ogg" />. Here is an example using the code to load the Human Practices video.

< video width="100%" height="240" controls>
<source src="https://static.igem.org/mediawiki/2018/f/fe/IGEM_Human_Practices.mp4" type="video/mp4">
</video>

Using Wiki Templates

If there is standard text/code that you want to add to more than one page (for example CSS styling, JS script or your team's wiki menu) you can use MediaWiki templates ⇗.

Your team wiki comes with a default template styling that you can use and modify as you need, this is the template for team Example. Documentation for this template can be found in: Resources/Template_Documentation .

To create a new template you will need to name it: Template:OFFICIAL team name/Template Name and call it in your wiki mark up as: {{Template:OFFICIAL team name/Template Name}}

For example, if you were on Team Example and wanted to create a template for your CSS, you will name it Template:Example/CSS and call it on your other pages as: {{Template:Example/CSS}} Take a look at the code for an example.

2020.igem.org/Team:Example/Project

{{Example/CSS}}
<html>
<h2> Our Project </h2>
<p> Beginning of the page about our project.</p>
</html>

Using HTML, CSS and Javascript

HTML, CSS and Javascript can be used together to make stylish, interactive pages. There many resources online to learn each of them, a useful tool to practice and develop new skills in interactive tutorials is codecademy ⇗.

An example of using HTML, CSS and Javascript can be seen in your team's default template. Here is the link to team Example's code: Template:Example, you can click on "view" on the black menu bar to see the code.

In the following section we will go over the basics of each of these elements.

HTML

Hypertext Markup Language, or HTML, is a standardized system for tagging text to create font, color, graphic, and hyperlink styling on websites. This system is used all over the internet so there is a miriad of resources that you can access to learn, for example: W3 Schools ⇗ has a good reference guide. You can also take a quick look at the most common tags in the Template Documentation page.

To use HTML you will need to place your tags and content in between: <html> </html>

CSS

Cascading style sheets, or CSS, is used to describe how the HTML in a page will behave and how it will be displayed. HTML is the content of the page and CSS is the decoration of said content, W3 Schools ⇗ has a list of all the CSS properties you can use

You can also take a quick look at the most CSS elements in the Template Documentation page.

To use CSS you will need to place your tags and content in between: <style> </style>

Javascript

Javascript is the most common coding language used in the web. In the wiki context it can be used for interactive resources like the menu functionality. JavaScript.com ⇗ is a good reference if you want to learn how to code and find some useful tips. You can also use jQuery in your code, you do not need to include any extra source to use jQuery.

To use Javascript or jQuery you will need to place your tags and content in between: <script> </script>

MathJax

MathJax is a JavaScript library for displaying mathematical equations. A copy of MathJax 2.5 is installed on 2020.igem.org. To use it, add the following line to your HTML: <script src="https://2020.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> For more information, visit the MathJax documentation ⇗.

Wiki tips

In this section you will find a few useful tips for working with your team on your wiki. If you have any suggestions that we can add, please email hq [at] igem [dot] org.

Wiki Dos and Don'ts

Do	Don't	Why?
Make sure all wiki content is hosted on 2020.igem.org. (This includes text, files, HTML, CSS, Javascript, and other scripts.)	Don't host your wiki or parts of your wiki elsewhere. Don't include scripts or stylesheets from other servers.	iGEM content is preserved on our servers so future teams can learn from what you've done. When content is stored on other sites/servers, links may become broken, sites may go down, and information will be lost.
Work on your wiki throughout the year and save small edits for last	Don't wait to add/edit large portions of wiki content the day of the Wiki Freeze	Just before the Wiki Freeze, iGEM websites experience increased traffic and server loads. This can be a difficult time to make larger changes or additions to your wiki. Don't wait till the last minute!
Name uploaded files clearly and uniquely (T--TeamName--Filename.png)	Don't use generic names for you files (Header.png)	Using unique names makes searching/identification of uploaded files easier.
Load your CSS and Javascript into the wiki, either directly into your page or using templates.	Don't try to host your CSS and Javascript on a third party server	You are required to host all content on the iGEM servers (see above)

Tips for working on your wiki

Written by Ana Sifuentes - ana at igem dot org

Hello iGEMers!
I was also part of an iGEM team!
In 2011 and 2012 my role was to design and create our team’s wiki. So wiki freeze was my major deadline. I am by no means an expert but let me share with you some of the things I learned with two wiki freezes under my belt.

1. Test your webpage layout: is information easy to find?

I made the terrible mistake of not asking for a third party’s opinion about the layout of information on our site. It was obvious for me how things were laid out and organized. It wasn’t for the people evaluating us.
Also, stick to the 3 click rule: content must reachable within 3 clicks so the user does not feel lost or confused. If someone wants to read your abstract, their path should be something like this (Menu –> Project –> Project Description -> Abstract)

2. Look at other teams’ code, see how they documented and what resources they used.

It is always good to get inspiration from other iGEM teams. See what you liked that they did and strive to improve!

3. Start working on your documentation early on.

This was a good thing that we did; we created a common file that more than one person can edit at a time. Divide the documentation into smaller files and assign a team member to fully document that topic. In the end you will have a printable version of your project that you can share as a pdf file with other people!

4. Name your images according to the project and keep them all in a folder on your computer.

Sometimes naming your gel image “gelthingy_whyiamworkingat3am” sounds perfect at 3AM but later it may not be easy to know what or when that photograph was taken or that image created.
Also, the iGEM database doesn’t know that you created that file so if someone names their file with the same name it can end up being replaced! Avoid using generic names like “banner.png” or “logo.jpg”.
Try using your team’s name and the webpage where the image will appear, this helps you remember where to place it and reduce the risk of another team overwriting. “JoyUniversity_TeamBios_Richard.jpg”

5. Do not leave everything to the last minute!

Plan ahead. The last thing you want to be doing at 11:30PM the night of wiki freeze is uploading images. It is very stressful to be looking at the clock and hoping some kind of coding miracle helps you fix bugs faster. Plan to have everything online at least one week ahead so you can go enjoy a nice dinner with your team that night!

I hope this helps and if you have any questions, feel free to email me.

ana at igem dot org

Resources/Wiki Editing Help

Wiki Editing Help