This tutorial was created for non-computer science students by non-computer ones. In fact, the idea and the motivation of creating it arose from the difficulties found during the beginning of the summer while editing the wiki. The more we tried to make things work, the more we realized this tutorial could be very useful to other teams.

As the content is created by non-experts, all the concepts are explained so that they can be understood without prior knowledge in web development. This is a must in order to reach the final audience for which the tutorial was created, inexperienced students. However, some concepts might not be exactly accurate in its definition. We did our best to maintain a good equilibrium in being accurate without making things excessively difficult or confusing for inexperienced students. We encourage all expert students to give us their feedback so that we can improve this tutorial and make it even more useful for inexperienced students.

iGEM wikis are becoming more and more good-looking and well designed each year. The most important objective for the wikis is documenting as much as possible iGEM projects instead of impressing the users with its design. In fact, iGEM provides the teams with a standard format in which teams could easily create a simple but fully functional and complete wiki, fulfilling the most important requisite of a wiki. However, creating a well-designed wiki helps to make the information more accessible and clear to the users and improving the navigation through the team’s project. Furthermore, styling the wiki gives a distinctive look to each project which can reinforce the objective of the project. In this tutorial, we are going to show how to use Bootstrap, a popular front-end framework for designing websites. This will facilitate creating a distinctive look easily while making the information readily available to future teams.

This tutorial requires a prior background knowledge in HTML and CSS. Javascript it is not required since the Bootstrap framework provides the wiki with enough responsive elements to make it functional and attractive. This tutorial is not focused on teaching how to code a website, but on giving and teaching how to use some tools that make wiki editing more simple. Therefore, we suggest inexperienced users of this tutorial to look up for learning resources about HTML and CSS on the internet, like the ones found in W3schools or Sololearn. We also recommend learning just the basics of both languages, since during wiki editing it is always possible to look to a HTML and CSS reference to learn how to do specific things. In fact, wiki editing is a very nice opportunity to learn hands-on some front-end development.

The tools explained in this tutorial are very useful to edit the wiki locally and by multiple team members. The tutorial is focused on teaching how to edit the wiki locally (in order to take advantage of the tools that can not be used in the online wiki editing site) always keeping in mind the requirements of the iGEM wiki in the MediaWiki context. Users taking this tutorial will learn how to use a professional code editor like Visual Studio Code and take advantage of their features, how to use a version control system like Git, how to edit the wiki in collaboration with other team members using Github and how to use the Bootstrap framework from its source Sass files to style their wikis. Even more, experienced users will take advantage of learning how to submit files to the iGEM wiki server, how to reference stylesheets or other files in the Mediawiki interface and how iframes can be useful to simulate the useful templates used in the Mediawiki interface. The tutorial consists of 3 videos which sum up to 2 hours of tutorial. We encourage inexperienced students to go through this videos in an ordered way, but it is not a requisite because each video can be understood by itself. Therefore, more experienced users can get the most out of this tutorial jumping directly to their topics of interest to learn more about the iGEM wiki interface. A brief description of the topics covered in each video can be found below. The tutorial consists also of a GitHub repository where the examples used in each video are stored so that the students can reproduce what is done in each video and get hands-on experience. The final version of each example is also provided in order to let more experienced users navigate quickly through the code.

Note that the videos forming this tutorial are stored on the Youtube channel of our team instead of the iGEM server. The examples are also stored in the Github repository of our team. iGEM recommends storing all the information of iGEM projects in the iGEM server or the iGEM Github account because it is the only way to make sure that this information is available through the subsequent years. However, files uploaded to the iGEM server must be less than 100MB of size. This would not allow us to provide videos of the minimum length to teach one concept and with a decent resolution. Doing so is considered a form of cheating in the iGEM competition, but we made sure to be under equal conditions to other teams by uploading all the material of this tutorial before the wiki freeze deadline.

In addition, the wiki and GitHub freeze implies that users can not modify any of the contents after a certain date. By storing all the videos and examples in external servers which we are able to control we are able to incorporate the feedback we receive and improve this material. This way, we will be able to create erratum files or notes providing additional information for each video both in the description in the Youtube video and the Github repository. Therefore, storing the tutorial outside the iGEM server will make possible for us to maintain it.

Note that the audio of the videos is in the Spanish language for the moment due to time limitations. We will upload the English version of the videos as soon as possible to make sure all teams participating in the next year iGEM competition are able to use this tutorial. Meanwhile, only team members with a basic knowledge of Spanish will be able to make use of them. The English version of the videos will be available on our Youtube channel.

We strongly recommend you check out the work that other teams have done regarding wiki editing. The iGEM Marburg 2018 team created a series of indications on how to design an accessible wiki to people with disabilities. You can check them here. The iGEM Virginia 2018 team created a Wiki Build Tool which makes much easier to synchronize the content that we are editing locally with the iGEM server. We encourage all the iGEM team members taking this tutorial to make their wiki accessible following the Marburg team’s indications and use the Wiki Build Tool designed by the Virginia team.