Difference between revisions of "Team:Cambridge-JIC/Wiki Design"
(7 intermediate revisions by 2 users not shown) | |||
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> Creating new pages </h3> | <h3> Creating new pages </h3> | ||
− | <p>To create a new page, simply type in the name of the page in your address bar, e.g. | + | <p>To create a new page, simply type in the name of the page in your address bar, e.g. https://2015.igem.org/Team:YourTeam/OurNewPage, and edit it. MediaWiki (iGEM's website engine) will automatically create the page for you</p> |
<h3> Using HTML </h3> | <h3> Using HTML </h3> | ||
− | <p> To use html, simply wrap everything in html tags: <code><html>...</ | + | <p> To use html, simply wrap everything in html tags: <code><html>...</html></code>. It's useful to note that these html tags will <em>not</em> actually appear in your page source—they just tell MediaWiki to output the html within directly, without modification (almost; lone ampersands will be replaced with <code>&amp;</code>, which won't be a problem unless they're in some javascript code. If this is a problem, try externalising your JS code, see below for instructions.) </p> |
<h3> Using Templates </h3> | <h3> Using Templates </h3> | ||
<p>Using templates helps to avoid typing in the same html again and again, and also allows you to make changes in one place that apply to all your pages. We have two templates we use, <code>Team:Cambridge/Templates/Menu</code> and <code>Team:Cambridge/Templates/Footer</code>. These templates are created as normal new pages, and are then directly <em>included</em> in your page using MediaWiki syntax:</p> | <p>Using templates helps to avoid typing in the same html again and again, and also allows you to make changes in one place that apply to all your pages. We have two templates we use, <code>Team:Cambridge/Templates/Menu</code> and <code>Team:Cambridge/Templates/Footer</code>. These templates are created as normal new pages, and are then directly <em>included</em> in your page using MediaWiki syntax:</p> | ||
− | < | + | <pre>{{:Team:YourTeam/Templates/OurHeader}} |
<html>Our page</html> | <html>Our page</html> | ||
− | {{:Team:YourTeam/Templates/OurFooter}}</ | + | {{:Team:YourTeam/Templates/OurFooter}}</pre> |
<p>Note carefully the above notice regarding the function of the html tags - this means that your template can end without closing all its tags and it won't mess up your page! For example, you can wrap your site in a container div by opening the tag in your header template, and then closing it in your footer template.</p> | <p>Note carefully the above notice regarding the function of the html tags - this means that your template can end without closing all its tags and it won't mess up your page! For example, you can wrap your site in a container div by opening the tag in your header template, and then closing it in your footer template.</p> | ||
<h3> Using CSS and JS </h3> | <h3> Using CSS and JS </h3> | ||
− | <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 | + | <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 created new pages within our wiki which we then ask MediaWiki to treat as <em>raw</em> files when we link to them in the html of our other pages. We tend to use page names that end in _CSS and _JS.</p> |
<code> <script src="//2015.igem.org/Team:YourTeam/file_js?action=raw&ctype=text/javascript"></script></code> | <code> <script src="//2015.igem.org/Team:YourTeam/file_js?action=raw&ctype=text/javascript"></script></code> | ||
<p> | <p> | ||
Line 42: | Line 42: | ||
<code><link href="//2015.igem.org/Team:YourTeam/file_css?action=raw&ctype=text/css" rel="stylesheet"></code> | <code><link href="//2015.igem.org/Team:YourTeam/file_css?action=raw&ctype=text/css" rel="stylesheet"></code> | ||
<p>for css. This takes the raw code that was entered as if it was an uploaded file.</p> | <p>for css. This takes the raw code that was entered as if it was an uploaded file.</p> | ||
+ | <p>Note how we've removed the http: from the beginning of the URLs above. This allows the browser to choose http: or https: depending on how you're connecting to iGEM and improves security! We apply it to all our URLs.</p> | ||
<h3> JQuery </h3> | <h3> JQuery </h3> | ||
Line 77: | Line 78: | ||
</center> | </center> | ||
<hr> | <hr> | ||
− | <p>When including fonts in style tags in your wiki, assign a family of fonts using < | + | <p>When including fonts in style tags in your wiki, assign a family of fonts using <code>font-family: font1, font2,...</code> where font1, font2,... is the preferential order of similar fonts to be displayed in case a certain font isn't supported by the user's browser.</p><br> |
<h3> Making Images with Inkscape </h3> | <h3> Making Images with Inkscape </h3> | ||
Line 89: | Line 90: | ||
<h2>User Experience </h2> | <h2>User Experience </h2> | ||
<h3>Responsive Design</h3> | <h3>Responsive Design</h3> | ||
− | <p>Most iGEM Wiki pages aren't made with a responsive design. This means that when viewing the pages on a phone or tablet, or by simply shrinking the browser window, the wiki loses its formatting. Our website has used various JQuery functions, CSS and Bootstrap, so that | + | <p>Most iGEM Wiki pages aren't made with a responsive design. This means that when viewing the pages on a phone or tablet, or by simply shrinking the browser window, the wiki loses its formatting. Our website has used various JQuery functions, CSS and Bootstrap, so that the same design will work and scale for any screen size - giving support for mobiles, tablets and desktops/laptops alike. |
<h3>Navigation</h3> | <h3>Navigation</h3> |
Latest revision as of 03:28, 19 September 2015