"
Team:UCL/FAQ/WikiDesign
From 2014.igem.org
(Difference between revisions)
| Line 6: | Line 6: | ||
<a data-tip="true" class="top large" data-tip-content="TOOLTIP TEXT" href="javascript:void(0)"><b>VISIBLE TEXT</b></a> | <a data-tip="true" class="top large" data-tip-content="TOOLTIP TEXT" href="javascript:void(0)"><b>VISIBLE TEXT</b></a> | ||
---> | ---> | ||
| - | |||
<div id="bodyContent"> | <div id="bodyContent"> | ||
| - | |||
| - | |||
<div id="TopGapO"></div> | <div id="TopGapO"></div> | ||
| - | |||
<div id="BPimagewrapperHeader"> | <div id="BPimagewrapperHeader"> | ||
<img src="https://static.igem.org/mediawiki/2014/3/3c/OAbout_Bannero.jpg" width="100%" height="100%" alt="About Our Project" /> | <img src="https://static.igem.org/mediawiki/2014/3/3c/OAbout_Bannero.jpg" width="100%" height="100%" alt="About Our Project" /> | ||
</div> | </div> | ||
| - | |||
<div class="textArena"> | <div class="textArena"> | ||
| + | |||
| + | Every iGEM team must produce a wiki to upload and present their work. Usually, teams will have a basic website built and members will come along and fill in content as they go along. When it comes to building your wiki, it helps to have some members with experience (or at least members with an interest) with web design (at least familiarity with HTML and CSS). 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. http://www.w3schools.com/ 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 building a website. If you're looking to learn about web design concepts, the section section should answer, at least some of, your questions. 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. | ||
<!-------- This is the beginning of the expanding box--------> | <!-------- This is the beginning of the expanding box--------> | ||
| Line 22: | Line 21: | ||
<i class="fa fa-pencil-square fa-2x fa-fw"></i><strong> | <i class="fa fa-pencil-square fa-2x fa-fw"></i><strong> | ||
<!--- Title start ---> | <!--- Title start ---> | ||
| - | + | Understanding the basics of building a website | |
<!--- Title end ---> | <!--- Title end ---> | ||
</strong></div><div class="body"> | </strong></div><div class="body"> | ||
<!--- Content start---> | <!--- Content start---> | ||
| + | I'm not a web design expert myself (I started learning web design whilst using Tumblr, back in 2009; I would experiment with the different themes and whatnot), so I'll explain it all in simple terms that I would have been able to understand back when I was learning. | ||
| - | + | Lets begin! | |
| - | + | 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. | ||
<!--- Content end---> | <!--- Content end---> | ||
| - | </div></div> | + | </div></div><br> |
<!--------- This is the end of the expanding box--------> | <!--------- This is the end of the expanding box--------> | ||
| - | |||
| - | |||
| - | |||
<!-------- This is the beginning of the expanding box--------> | <!-------- This is the beginning of the expanding box--------> | ||
<div class="collapse-card"><div class="title"> | <div class="collapse-card"><div class="title"> | ||
| - | <i class="fa fa- | + | <i class="fa fa-pencil-square fa-2x fa-fw"></i><strong> |
<!--- Title start ---> | <!--- Title start ---> | ||
| - | + | Understanding the basics of building a website | |
| - | + | ||
| - | + | ||
<!--- Title end ---> | <!--- Title end ---> | ||
</strong></div><div class="body"> | </strong></div><div class="body"> | ||
<!--- Content start---> | <!--- Content start---> | ||
| - | |||
| - | |||
<!--- Content end---> | <!--- Content end---> | ||
| - | </div></div> | + | </div></div><br> |
<!--------- This is the end of the expanding box--------> | <!--------- This is the end of the expanding box--------> | ||
<!-------- This is the beginning of the expanding box--------> | <!-------- This is the beginning of the expanding box--------> | ||
<div class="collapse-card"><div class="title"> | <div class="collapse-card"><div class="title"> | ||
| - | <i class="fa fa- | + | <i class="fa fa-pencil-square fa-2x fa-fw"></i><strong> |
<!--- Title start ---> | <!--- Title start ---> | ||
| - | + | Exploring the basics of web design | |
| - | + | ||
| - | + | ||
<!--- Title end ---> | <!--- Title end ---> | ||
</strong></div><div class="body"> | </strong></div><div class="body"> | ||
<!--- Content start---> | <!--- Content start---> | ||
| - | |||
| - | |||
<!--- Content end---> | <!--- Content end---> | ||
| - | </div></div> | + | </div></div><br> |
<!--------- This is the end of the expanding box--------> | <!--------- This is the end of the expanding box--------> | ||
Revision as of 00:13, 16 October 2014
Every iGEM team must produce a wiki to upload and present their work. Usually, teams will have a basic website built and members will come along and fill in content as they go along. When it comes to building your wiki, it helps to have some members with experience (or at least members with an interest) with web design (at least familiarity with HTML and CSS). 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. http://www.w3schools.com/ 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 building a website. If you're looking to learn about web design concepts, the section section should answer, at least some of, your questions. 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.
Understanding the basics of building a website
I'm not a web design expert myself (I started learning web design whilst using Tumblr, back in 2009; I would experiment with the different themes and whatnot), so I'll explain it all in simple terms that I would have been able to understand back when I was learning.
Lets begin!
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.
Understanding the basics of building a website
Exploring the basics of web design
