Team:UCL/FAQ/WikiDesign

From 2014.igem.org

(Difference between revisions)

Revision as of 01:23, 16 October 2014

Goodbye Azodye UCL iGEM 2014

Every iGEM team must produce a wiki to upload and present their work. When it comes to building your wiki, it helps to have some members with experience in web design. If you haven't had the chance to familiarise yourself with these basic aspects of web design, its worthwhile to start experimenting and learning the ropes. w3schools offers a good beginners platform to web design; whilst they may not explain things in too much detail, its a healthy start for you to begin editing bits of code. Sooner or later, you'll be able to recognise whats going on.

In the first section, I'll explain the basics of making a website. If you're looking to learn about wiki building approaches, read the second section. The third section explores the design process of our UCL iGEM 2014 wiki, and the fourth section explains a little about the basics of building your very own iGEM team wiki.

How can I make a website?

Firstly, the bread and butter: HTML and CSS. These two languages work together to create the basic design of a website. I won't be going on to explain exactly what HTML and CSS are, and what's different about them (at least not in detail), but I will make it simple for you: HTML is the backbone of your website, and CSS is the design and styling. For example, say you wanted to make a paragraph with bold text and a border around it. Using HTML you would be able to specify a paragraph and CSS would then be used to give it that bold text and border. That's basically the gist of it. Of course, I'm really really simplifying this; so if you really want to learn more, I've got a list of links below to help you learn more. INSERT LIST HERE WITH LINKS What's my personal suggestion? I suggest you get on Tumblr and start playing around with the themes and learn the ropes there. In web design as a beginner, you just need to image what you want, Google how to do it, and follow the instructions. The community of web developers is perhaps one of the most helpful online communities out there, and just remember, as a beginner - anything you're trying to do, it's been done before, and someone in your shoes has learned how to and done it before. It's just a matter of trial and error. Now, if you're familiar with HTML and CSS; let's delve a bit deeper into web design concepts. Javascript was something I stayed away from for a long time (until it came to editing this wiki), simply because it wasn't HTML or CSS, and I believed that since I couldn't understand it, I couldn't possibly use it. Well, I was wrong! Being able to simple incorporate javascript into your website makes it so much better. Over the course of the summer, I have learned to use and manipulate (to a very small degree) jQuery plugins. jQuery plugins offer a huge bunch of formatting and styling opportunities - from dropdown menus, to tabs, to image galleries etc. Below is a list of jQuery repositories I find very useful and interesting when browsing for different plugins to incorporate into your website INSERT LIST HERE WITH LINKS There are other web design languages and other aspects to Javascript as well, but my lack of experience with those means I won't be able to explain any further. When it comes to the basics of web design, the best thing to do is experiment. Download a text editor for coding, and experiment different things you come across. There are many different (and free!) styles, plugins etc. out there; and whilst some may be a little difficult to work with, many are simple and elegant on a variety of web pages.

How will I get my wiki done on time?

Firstly, lets talk content. You may be thinking that this is the easy part, but it really isn't. Getting all your content up before the wiki freeze is quite the unexpected challenge. You want to be able to, in detail, explain your entire project on your wiki; and if you don't get your content together before the last few weeks, you'll probably find yourself scrambling to get something onto your wiki as the deadline approaches - not a position you want to be in! Now, lets talk design. It's the most creative and fun part, but you'll have to work as a team to decide what sort of design you want. I suggest researching on good layouts and designs to base your wiki on; and remember, simple and functional beats problematic and complex. If you want to find out more about web design concepts, try googling or have a look at your favourite websites and the approaches they have taken. In terms of getting your wiki together, it's best to start early. Below I have outlined a quick process you should follow to ensure your wiki is ready in time: 1. Build a site map, note down which pages you'll need. -Look at the requirements -Look at what you're doing -Look at what past teams have done -Do you want to do anything new? 2. Get a graphics team together and start brainstorming -A good set of matching graphics can help set a theme to your wiki -Swag 3. Make a team portal page, link it to all the pages on the site map, this can work as a draft page for members to start uploading content. 4. Get your content together, keep revising it until you're 100% happy 5. Once you've got the basics together, start working on the design as a team, once your happy, freeze it and carry on with content. 6. Get it all done by the wiki deadline, and pray that your computer doesn't crash.

UCL iGEM 2014: Our wiki story

First, the header. Lewis Iain was the source of inspiration for this, I think it caught his eye whilst he was browsing for different website design templates. He looked through a bunch of code and managed to pull it out of the bag, and even spice it up a little (if you view our site on a mobile device, or simple make your window smaller; there's a keen feature he managed to fix up). Our team then decided on our colour scheme and it was all set. We decided to go with a simplistic approach, breaking our content into 3 main categories: Project, Science and Humans. It works well because it ensures we avoid having a menu full of clutter, and allows users to go through each aspect of our project step by step. Next, the header images. Oran Maguire, who contributed in UCL iGEM 2013 was happy to lend a hand in the graphics team this year as well. Initially, we used a bunch of photos that were all different sizes; but with a more consistent set of images, everything looks a little neater now. Now, there are a few keen features you may have noticed on our pages. The tabs feature, the expanding box, the hover tooltip, the carousel gallery, and the sticky note! That's all jQuery plugins, something I had a real good bit of fun experimenting with. On some of our pages, you may have come across the mini tutorial feature; that's yet another jQuery plugin. Our wiki does well with a good number of images, as do all wikis. I strongly suggest you keep a camera with you at all times, because those images will go a long way; plus it makes for a great bit of eye candy to go with a bunch of text! Lastly, we have our footer, it's simple yet elegant. All the necessary info, and of course our Twitter feed! Be sure to follow UCL iGEM on Twitter, and keep up with our progress and of course keep up with the 2015 UCL iGEM team!

Wiki how-to: Basics

Firstly, lets talk about loading your js and css files onto your page. Firstly, you'll want to create a template (Team:Name/Template:TemplateName.###(where ### could be js or css depending on your file)). Create the template page and load your css and js files onto them. The next step is to create another template, to hold the links to all your js and css files, for example this page (Team:UCL/Template:BioprocessStyles and Team:UCL/Template:WikiDesignStyles). It simply loads all the js and css templates, and it makes it a lot easier to insert onto your page (it also makes all the clutter disappear!) Once you've done that, load it onto your page, and voilà, it's all working! What we've done to ensure all our members can easily edit the pages, it using comments in the source code (it also makes it easy for you to go through and copy out bits of our code). This allows our members to know exactly where to start typing and what they can touch; it really helps avoid someone coming along and breaking an entire page! Now, you might be wondering if I'm going to explain about the nitty gritty coding that we've got going on. The good thing is, I don't have to! In the process of making all those comments for our own team members to understand the code, you can just as easily look at the source code and understand it yourself! Two birds with one stone!

@@ Line 41: / Line 41: @@
 <!-------- This is the beginning of the expanding box-------->
-<div class="collapse-card"><div class="title">
+<div class="collapse-card" data-step="3" data-position='top' data-intro="So you're looking to build your wiki! Think about your layout, and how you want to present your work. I suggest looking at the wikis of past iGEM teams (especially those who won awards for their wiki). There are two things to think about when building your wiki: content and design."><div class="title">
 <i class="fa fa-pencil-square  fa-2x fa-fw"></i><strong>
 <!--- Title start --->
@@ Line 48: / Line 48: @@
 </strong></div><div class="body">
 <!--- Content start--->
-So you're looking to build your wiki! Think about your layout, and how you want to present your work. I suggest looking at the wikis of past iGEM teams (especially those who won awards for their wiki). There are two things to think about when building your wiki: content and design.
 Firstly, lets talk content. You may be thinking that this is the easy part, but it really isn't. Getting all your content up before the wiki freeze is quite the unexpected challenge. You want to be able to, in detail, explain your entire project on your wiki; and if you don't get your content together before the last few weeks, you'll probably find yourself scrambling to get something onto your wiki as the deadline approaches - not a position you want to be in!
 Now, lets talk design. It's the most creative and fun part, but you'll have to work as a team to decide what sort of design you want. I suggest researching on good layouts and designs to base your wiki on; and remember, simple and functional beats problematic and complex.
@@ Line 73: / Line 71: @@
 <!-------- This is the beginning of the expanding box-------->
-<div class="collapse-card"><div class="title">
+<div class="collapse-card" data-step="4" data-position='top' data-intro="I thought it best to approach this by breaking it down into sections based on what you see in front of you."><div class="title">
 <i class="fa fa-pencil-square  fa-2x fa-fw"></i><strong>
 <!--- Title start --->
@@ Line 80: / Line 78: @@
 </strong></div><div class="body">
 <!--- Content start--->
-I thought it best to approach this by breaking it down into sections based on what you see in front of you.
 First, the header. Lewis Iain was the source of inspiration for this, I think it caught his eye whilst he was browsing for different website design templates. He looked through a bunch of code and managed to pull it out of the bag, and even spice it up a little (if you view our site on a mobile device, or simple make your window smaller; there's a keen feature he managed to fix up). Our team then decided on our colour scheme and it was all set. We decided to go with a simplistic approach, breaking our content into 3 main categories: Project, Science and Humans. It works well because it ensures we avoid having a menu full of clutter, and allows users to go through each aspect of our project step by step.
@@ Line 96: / Line 92: @@
 <!-------- This is the beginning of the expanding box-------->
-<div class="collapse-card"><div class="title">
+<div class="collapse-card" data-step="5" data-position='top' data-intro="Over here, I'm just going to explain the following: inserting your javascript and css into a template, linking that template into your wiki page, and how to ensure members (who aren't as tech savvy as you are) can edit content on the page without having to read between a bunch of code they don't understand at all. The best way to do this is to use an example, so use this page as an example - open the source and have a look at how it's laid out. ><div class="title">
 <i class="fa fa-pencil-square  fa-2x fa-fw"></i><strong>
 <!--- Title start --->
@@ Line 103: / Line 99: @@
 </strong></div><div class="body">
 <!--- Content start--->
-Over here, I'm just going to explain the following: inserting your javascript and css into a template, linking that template into your wiki page, and how to ensure members (who aren't as tech savvy as you are) can edit content on the page without having to read between a bunch of code they don't understand at all. The best way to do this is to use an example, so use this page as an example - open the source and have a look at how it's laid out.
 Firstly, lets talk about loading your js and css files onto your page. Firstly, you'll want to create a template (Team:Name/Template:TemplateName.###(where ### could be js or css depending on your file)). Create the template page and load your css and js files onto them. The next step is to create another template, to hold the links to all your js and css files, for example this page (Team:UCL/Template:BioprocessStyles and Team:UCL/Template:WikiDesignStyles). It simply loads all the js and css templates, and it makes it a lot easier to insert onto your page (it also makes all the clutter disappear!) Once you've done that, load it onto your page, and voilà, it's all working!