Difference between revisions of "Team:Cambridge-JIC/Wiki Design"
Simonhkswan (Talk | contribs) |
Simonhkswan (Talk | contribs) m |
||
| Line 26: | Line 26: | ||
<div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#fff"> | <div style="width: 100%; padding:0% 10%; margin: 30px 0px;color:#fff"> | ||
<h3> Using CSS and JS </h2> | <h3> Using CSS and JS </h2> | ||
| − | <p>As iGEM teams are unable to upload and refer to CSS and Javascript files, styling your webpages takes a different method to the standard way. Instead, we have uploaded pages that end in _CSS and _JS that are linked to in the html of our other pages. To use a page as a file, simply put the code in HTML and refer to the URL with <span style="background-color:#fff; color:#123a68"> ?action=raw</span> | + | <p>As iGEM teams are unable to upload and refer to CSS and Javascript files, styling your webpages takes a different method to the standard way. Instead, we have uploaded pages that end in _CSS and _JS that are linked to in the html of our other pages. To use a page as a file, simply put the code in HTML and refer to the URL with: |
| + | <br> | ||
| + | <span style="background-color:#fff; color:#123a68"> <plaintext> <script src="//2015.igem.org/Team:YourTeam/file?action=raw&ctype=text/javascript"></plaintext> </script> </span> | ||
| + | <br> | ||
| + | for javascript and: | ||
| + | <br> | ||
| + | <span style="background-color:#fff; color:#123a68"> <plaintext><link href="//2015.igem.org/Team:Cambridge-JIC/Assets/OpenSans_css?action=raw&ctype=text/css" rel="stylesheet"></plaintext></span> | ||
| + | <br> for css. This takes the raw code that was entered as if it was an uploaded file.</p> | ||
<h3> Bootstrapping your Wiki <h3> | <h3> Bootstrapping your Wiki <h3> | ||
| Line 48: | Line 55: | ||
<p><ul> | <p><ul> | ||
<li class="list">We used four different hues that were all cool colours.</li><br> | <li class="list">We used four different hues that were all cool colours.</li><br> | ||
| − | <li class="list">Each hue | + | <li class="list">Each hue was split into two or three shades, made by changing the lightness and saturation.</li><br> |
<li class="list">For backgrounds, avoid using highly saturated colours. None of the colours we chose were very saturated, this is to reduce the strain on viewers' eyes. This is why pastel palettes can be so visually pleasing.</li><br> | <li class="list">For backgrounds, avoid using highly saturated colours. None of the colours we chose were very saturated, this is to reduce the strain on viewers' eyes. This is why pastel palettes can be so visually pleasing.</li><br> | ||
<li class="list"> It's useful to have both dark (around 80/255 lightness) and light (around 220/250 lightness) colours when considering text on backgrounds. High contrast is needed to easily make out the features of words. Note also that fine details in bright blue can be hard to resolve with the human eye due to the lower abundance of S-cone receptor cells in the eye.</li><br> | <li class="list"> It's useful to have both dark (around 80/255 lightness) and light (around 220/250 lightness) colours when considering text on backgrounds. High contrast is needed to easily make out the features of words. Note also that fine details in bright blue can be hard to resolve with the human eye due to the lower abundance of S-cone receptor cells in the eye.</li><br> | ||
| Line 82: | Line 89: | ||
</center> | </center> | ||
<br> | <br> | ||
| − | <p> By structuring the website as a 2 layer deep hierarchy, users can travel through our wiki to get an overall idea | + | <p> By structuring the website as a 2 layer deep hierarchy, users can travel through our wiki to get an overall idea and go indepth on anything that catches their eye. Of course, they are also free to teleport to any page with the menu bar above. Finally, our downloads page contain all the possible downloads found throughout the website for ease of access.</p> |
<center> | <center> | ||
<hr> | <hr> | ||
Revision as of 22:12, 18 September 2015