Difference between revisions of "Resources/Wiki Editing Help"
m |
|||
| Line 62: | Line 62: | ||
<div class="twoColumns"> | <div class="twoColumns"> | ||
<h3>Uploading videos and using HTML 5 to display them</h3> | <h3>Uploading videos and using HTML 5 to display them</h3> | ||
| − | <p>You can upload videos (ogg, mp4, webm) to the 2015 wiki by using Mediawiki's <a href="https:// | + | <p>You can upload videos (ogg, mp4, webm) to the 2015 wiki by using Mediawiki's <a href="https://2016.igem.org/Special:Upload">Upload tool</a>.</p> |
<p>You can display videos by using the HTML 5 <i><video></i> tag, along with <i><source src="file_url" type="video/ogg" /></i>.</p> | <p>You can display videos by using the HTML 5 <i><video></i> tag, along with <i><source src="file_url" type="video/ogg" /></i>.</p> | ||
<p>Take a look at the <a href="https://2013.igem.org/Team:Leeds">2013 Leed's team wiki</a> to see how they displayed their video. You can do this by going to their wiki, and looking for <i>view source</i> in the default wiki links at the top of the page.</p> | <p>Take a look at the <a href="https://2013.igem.org/Team:Leeds">2013 Leed's team wiki</a> to see how they displayed their video. You can do this by going to their wiki, and looking for <i>view source</i> in the default wiki links at the top of the page.</p> | ||
Latest revision as of 20:54, 30 August 2016
How to Edit Your Wiki
NOTE: the iGEM wiki platform was upgraded to the new version of MediaWiki on June 8. For details on what this means, see the MediaWiki Update page.
Add a wiki page, change a wiki page, delete a wiki page, etc.
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.
Adding a page to your team's namespace?
You must keep your team's pages in your team namespace. For example, take a look at 2016.igem.org/Team:Example
Specifically, when you create a new page, you just have to name it Team: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/Biosensor_project.
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 an image or file?
There is a separate namespace for your team's images and files that you upload to the server. It uses a different format than team pages use. Specifically, when you upload a new image, you have to name it:
For example, if you were on Team Example and wanted to create a Biosensor project page you would name it
Using HTML in wiki pages
Instead of using wiki markup, you can use HTML in the wiki editor very easily: you just put your HTML code in between <html> ... </html> tags.
Using CSS and/or Javascript
You can also use CSS and Javascript on the wiki by adding your <style> and <script> tags into your <html> code. If you want to use a CSS stylesheet or Javascript on multiple pages, you can create a wiki template page (see below).
Using jQuery
jQuery 1.11.1 is already installed across all iGEM webpages. It adds many useful abilities to JavaScript. You do not need to include any extra source to use jQuery.
Using MathJax
MathJax is a JavaScript library for displaying mathematical equations. A copy of MathJax 2.5 is installed on 2015.igem.org. To use it, add the following line to your HTML:
<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
For more information, visit the MathJax documentation.
Using Wiki Templates
If there is standard text/code that you want to add to more than one page, like a CSS style or script, then you can use MediaWiki templates
You can create a wiki template page to house your HTML/CSS/Javascript, by entering {{Team:YourTeamName/CSS}} into your wiki markup. Saving the page will create a link for a new template page, which you can edit and enter all of your CSS code. You can then call {{Team:YourTeamName/CSS}} on other pages.
Take a look at a few 2013 team wikis to see how other teams setup the styling. You can do this by going to a wiki, and looking for view source in the default wiki links at the top of the page. See 2013 MIT's and 2013 TU-Munich's for examples.
Uploading videos and using HTML 5 to display them
You can upload videos (ogg, mp4, webm) to the 2015 wiki by using Mediawiki's Upload tool.
You can display videos by using the HTML 5 <video> tag, along with <source src="file_url" type="video/ogg" />.
Take a look at the 2013 Leed's team wiki to see how they displayed their video. You can do this by going to their wiki, and looking for view source in the default wiki links at the top of the page.
Need more technical details?
Visit our extra help page on Using HTML, CSS, and Javascript on the iGEM wikis.
Wiki Dos and Don'ts
| Do | Don't | Why? |
|---|---|---|
| Make sure all wiki content is hosted on 2016.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 (TeamName_Header.png) | Don't use generic names for you files (Header.png) | Using unique names makes searching/identification of uploaded files easier, and reduces the chance that another team will accidentally overwrite your file with a different one having the same name. |
| 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) |
Perspectives from an iGEM veteran
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
