Team:UCL/FAQ/WikiDesign
From 2014.igem.org
(6 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{:Team:UCL/Template:headerx}} | {{:Team:UCL/Template:headerx}} | ||
{{:Team:UCL/Template:BioprocessStyles}} | {{:Team:UCL/Template:BioprocessStyles}} | ||
- | |||
<html> | <html> | ||
<!--- | <!--- | ||
Line 9: | Line 8: | ||
<div id="TopGapO"></div> | <div id="TopGapO"></div> | ||
<div id="BPimagewrapperHeader"> | <div id="BPimagewrapperHeader"> | ||
- | <img src="https://static.igem.org/mediawiki/2014/ | + | <img src="https://static.igem.org/mediawiki/2014/e/e2/UCLOwiki_how_to_Bannero-27.jpg" width="100%" height="100%" alt="About Our Project" /> |
</div> | </div> | ||
<div class="textArena"> | <div class="textArena"> | ||
Line 65: | Line 64: | ||
</strong></div><div class="body"> | </strong></div><div class="body"> | ||
<!--- Content start---> | <!--- Content start---> | ||
- | 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 | + | 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 <a data-tip="true" class="top large" data-tip-content="If you view our site on a mobile device, or simple make your window smaller; there's a cool feature he managed to fix up." href="javascript:void(0)"><b>spice it up a little</b></a>. 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 <a data-tip="true" class="top large" data-tip-content="Project, Science and Humans." href="javascript:void(0)"><b>3 main categories</b></a>. 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. |
- | + | <br><br> | |
- | Next, the | + | Next, the <a data-tip="true" class="top large" data-tip-content=" 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." href="javascript:void(0)"><b>header images</b></a>. Oran Maguire, who contributed in UCL iGEM 2013 was happy to lend a hand in the graphics team this year. |
- | + | <br><br> | |
- | 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 | + | We would like to thank Dr Darren Nesbeth, our supervisor, for his feedback in helping us convey our project efficiently. |
- | + | <br><br> | |
- | + | Now, there are a few keen features you may have noticed on our pages. The tabs feature, the expanding box, the <a data-tip="true" class="top large" data-tip-content="Hey, that's me!." href="javascript:void(0)"><b>hover tooltip</b></a>, the carousel gallery, and the sticky note! That's all <a data-tip="true" class="top large" data-tip-content="On some of our pages, you may have come across the mini tutorial feature; that's yet another jQuery plugin." href="javascript:void(0)"><b>jQuery plugins</b></a>, something I had a real good bit of fun experimenting with. | |
- | + | <br><br> | |
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! | 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! | ||
<!--- Content end---> | <!--- Content end---> | ||
Line 86: | Line 85: | ||
</strong></div><div class="body"> | </strong></div><div class="body"> | ||
<!--- Content start---> | <!--- Content start---> | ||
- | 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. | + | 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.<a data-tip="true" class="top large" data-tip-content="Where ### could be js or css depending on your file." href="javascript:void(0)"><b>###</b></a>). 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 our styles pages (Team:UCL/Template:BioprocessStyles and Team:UCL/Template:WikiDesignStyles). It simply loads all the js and css templates, and it makes it a lot <a data-tip="true" class="top large" data-tip-content="It also makes all the clutter disappear!" href="javascript:void(0)"><b>easier</b></a> to insert onto your page. Once you've done that, load it onto your page, and voilà, it's all working! |
- | + | <br><br> | |
- | What we've done to ensure all our members can easily edit the pages, | + | What we've done to ensure all our members can easily edit the pages, is using comments in the source code. This allows our members to know <a data-tip="true" class="top large" data-tip-content="It really helps avoid someone coming along and breaking an entire page!" href="javascript:void(0)"><b>exactly</b></a> where to start typing and what they can touch. 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, <a data-tip="true" class="top large" data-tip-content="Two birds with one stone!" href="javascript:void(0)"><b>I don't have to</b></a>! 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! |
<!--- Content end---> | <!--- Content end---> | ||
</div></div><br> | </div></div><br> | ||
Line 133: | Line 132: | ||
font-size:90%; | font-size:90%; | ||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
+ | text-align: justify; | ||
} | } | ||
Latest revision as of 01:25, 17 October 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, w3schools offers a good beginners platform to web design. 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.
Of course, I'm really really simplifying this; so if you really want to learn more, I suggest checking out mozilla developer, codecademy and w3schools.
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 imagine what you want. The community of web developers is perhaps one of the most helpful online communities out there, 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. 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 jQuery plugins. jQuery plugins offer a huge bunch of formatting and styling oppotunities. If you are looking for a bunch of jQuery plugins, have a look at unheap!
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 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.
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.
Next, the header images. Oran Maguire, who contributed in UCL iGEM 2013 was happy to lend a hand in the graphics team this year.
We would like to thank Dr Darren Nesbeth, our supervisor, for his feedback in helping us convey our project efficiently.
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.
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!
What we've done to ensure all our members can easily edit the pages, is using comments in the source code. This allows our members to know exactly where to start typing and what they can touch. 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!