***We have not finished uploading our current wiki guide draft, please email us for the whole thing!! :D

Introduction

The wiki is a vital part in telling the judges, public, current, and past iGEM teams about your team. Here's another vital iGEM truth - everyone dreads the wiki freeze and many teams are hesitant to begin their wiki. It can be a struggle, but we're here to help.

What are we doing? We're putting together a wiki wealth of knowledge - a comprehensive guide that combines all wiki knowledge from teams past and present, source code that you can use on your wiki, and a YouTube video series where we walk you through all the major things you need to know about everything wiki related.

Who are we looking to help us? Everyone. We need first year teams to give us feedback on if our guide covers all of their questions and how it helped them create their wiki. We need teams to write up a couple bullet points describing how they create their wiki. If you use our guide/video series in any way, please let us know so that we can make sure to thank you on our collaborations page!

What inspired us? We are a third year team who puts many hours into our wiki every year. Our very first year, we collaborated with a team who answered a lot of our initial questions about how to code our wiki; this helped us immensely. Our team has spent many hours trying to get our code to function properly when the fix was simple. We want teams to combine their knowledge into one, easy to find place for current and future teams to use. Additionally, the individuals that work on each team’s wiki may change from year to year. With this guide, they do not have to completely start from scratch; they can build off of previous years’ experience.

Instagram, Twitter, and Facebook - @iGEMLabPats

YouTube Channel - US AFRL Carroll HS

GitHub - https://github.com/us-afrl-carrollhs

Email - igem@carrollhs.org

Collaboration Credits

A huge thank you to all the teams who have collaborated with us (this far) to create this guide:

• iGEM TAU
• iGEM Thessaly
• OhioState
• Nottingham iGEM
• Edinburgh
• ASIJ Tokyo
• Stockholm (memes coming soon!)
• Aux Marseille
• uOttawa
• NCTU Formosa
• iGEM AMU
• Gothenburg
• TU_Dresden
• UCL
• iGEM NCKU-Tainan
• Your team! Our list is growing everyday :)

Wiki 101

Becoming Familiar with the iGEM Wiki

Hosted on the iGEM server, every iGEM team is given a wiki page to create for your team. It is essentially your team’s website to document, not only your lab work, but your entire iGEM project. The judges review it before going to your presentation. It is essential that all work is explained on the wiki as clearly as possible to ensure that judges (and the public) understand your project.

What is it?

Logging In and Finding Your Team's Wiki

Video Tutorial Here - https://youtu.be/tARHk2RWDSk

Planning

Decide on your involvement with the wiki

Basic Understanding - using iGEM’s template and altering it to accommodate content

• It is recommended that several/almost all team members have a basic understanding of the wiki. This way, they can edit content and basic formatting.

Advanced Understanding - in depth knowledge of web development. Not only editing content, but creating HTML structures and more detailed CSS customization

• It is recommended that at least 2-3 team members have some sort of deeper knowledge of how HTML/CSS coding works. This way multiple team members can develop code, along with fix errors in code
• If your team is lacking members who are able to dedicate this much time to understanding the wiki, or if additional help is needed, collaborate with another team who can help.

Basic Understanding Guide

Getting Started

Working With the Wiki

...

How to Navigate the Wiki

...

All You Need to Know about HTML/CSS

...

...

HTML/CSS Understanding Guide

Basic Elements

...

Using CSS Code

...

Combining Elements

...

Example (Uploading Project Description/Inspirations)

...

...

Advanced Understanding Guide

Getting Started

...

Know How to Upload Your CSS and JavaScript Files

...

How to Upload a Video to the Wiki

...

Decide on how you want to create your Wiki

...

...

Designing Your Team's Wiki

Decide on Branding

...

Recommended Templates/Elements in Your Wiki

...

...

jQuery

What is it?

...

How to use the newer jQuery and Bootstrap in your Wiki

...

...

Bootstrap

What is it?

...

Example of Bootstrap in Action (Credit: TU_Dresden)

(in HTML without bootstrap):

I’m a Button, push me

(in HTML, with bootstrap):

I’m a Button, push me

Note how the aspect of the button changed only by adding 3 classes to the HTML element (bin, btn-primary, bin-lg). This is possible to do with EVERY SINGLE COMPONENT OF YOUR WIKI, as long as you go through the documentation of bootstrap and understand how to use its classes. This is super useful to make your content layout “responsive” and well organized.

The entire documentation of Bootstrap can be reached here: https://getbootstrap.com/

Using Bootstrap in your Wiki (Credit: TU_Dresden)

Currently, Bootstrap is on its 4th version. Earlier versions are very similar but not quite, so bear in mind if you use an earlier version the class names will slightly change from version 4.

You should note that the MediaWiki engine of the IGEM server implements a VERY old bootstrap version that renders all modern templates useless.

For the purpose of your Wiki, it is recommended you upload the newer version of bootstrap into your namespace as template files. Normally, this means to upload the bootstrap JS file and a CSS files that you will later import into your pages.

Have in mind that, as per IGEM guidelines, YOU CAN NOT IMPORT SOURCES FROM AN EXTERNAL SERVER, as usually done in many sites. You need to get the sources yourself and upload them as explained later in this guide.

Why is it difficult?

iGEM expressly states that all wiki content/code must be hosted on the iGEM server!!! Although Bootstrap has many ways to implement their code on a website, many of them link to external stylesheets on the Bootstrap website. iGEM states that this is a form of cheating. Even when all stylesheets are copied from Bootstrap and hosted on the iGEM server, there is a segment of JavaScript in one of the stylesheets that inhibits the menu bar from working, which is also against iGEM’s wiki rules. If you still have trouble with this, iGEM team ASIJ Tokyo brought this fix to our attention (http://2015.igem.org/Team:Stockholm/fixbootstrap.css? fbclid=IwAR1ZxdFtMx6XJPS8KJ6dpLoQ4hAsnlBNp2rP6R- w9dR_7e2LoGz4miFWAmc)

• Video tutorial here -https://www.youtube.com/watch? v=IK6JjS_LjQg&list=PLg5B0YEXzgEorRa8vuZPoHaH5e1jmgVQ6&index=4&t= 0s
• GitHub Code here - https://github.com/us-afrl-carrollhs

Helpful Hints

• Look at past team’s wiki pages. Look at their code, you can even use pieces of it on your team’s wiki (just make sure to cite it).
• Google is your best friend. Whether you are trying to find some example code or find a solution to your problem, Google will help.
• UNSW iGEM - “Because the iGEM html editor does not let you do indentations, that could compromise the readability of your code. It's really messy and hard to follow. Thus, it's a good idea to write your code in an external text editor. I use a free software called Sublime Text, which you can download here https://www.sublimetext.com/. It makes your code easy to follow.”

Contact Other Contributing Teams

Do you have specific questions about what teams wrote about? Either contact the US_AFRL_CarrollHS team (and we’ll either answer or redirect your questions for you) or, if a team has been cited on a section, find their information below.

• TU_Dresden - We hope it serves a good purpose for all teams that require to use the latest technology into their websites. Kindly address ANY questions on this matter to tudigem2019@gmail.com