Resources/Wiki Editing Help
Wiki Editing Help
All iGEM wiki sites are powered by Mediawiki. See the Mediawiki Help page for details on how to edit wiki pages and more.
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
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_over.png. Take a look at the image below 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]
Creating a page
When you create a new page, you just have to name it 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 below for reference.
Uploading videos and using HTML 5 to display them
You can upload videos (ogg, mp4, webm) to the 2018 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 the code for loading 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: here
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 image below for reference.
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
Javasscript 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 2018.igem.org. To use it, add the following line to your HTML: <script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> For more information, visit the MathJax documentation.
Wiki Dos and Don'ts
| Do | Don't | Why? |
|---|---|---|
| Make sure all wiki content is hosted on 2018.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
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 or send me a tweet!
ana at igem dot org
@anita_sifuentes
iGEM Foundation
The International Genetically Engineered Machine (iGEM) Foundation is an independent, non-profit organization dedicated to the advancement of synthetic biology, education and competition, and the development of an open community and collaboration. Visit us at igem.org
hq AT igem DOT org
One Kendall Square, Suite B6104
Cambridge, MA 02139
+1.617.500.3106