Team:SDU-Denmark/Tour11
From 2013.igem.org
(14 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{:Team:SDU-Denmark/core/header| }} | {{:Team:SDU-Denmark/core/header| }} | ||
<html> | <html> | ||
+ | <h2>A different wiki</h2> | ||
+ | <h4>Our way of showing the world what we accomplished - intuitively and thoroughly</h4> | ||
+ | <p> | ||
+ | <a class="popupImg alignRight" style="width:300px" target="_blank" | ||
- | + | href="https://static.igem.org/mediawiki/2013/8/84/SDU2013_WikConstruction.jpg" title="Team members working hard to polish the wiki before wiki-freeze."> | |
- | + | <img src="https://static.igem.org/mediawiki/2013/8/84/SDU2013_WikConstruction.jpg" style="width:300px" /> | |
- | + | Team members working hard to polish the wiki before the European Jamboree wiki-freeze. | |
- | + | </a> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
+ | <span class="intro">Most of our team members</span> have never tried creating a wiki, so when Heidi’s boyfriend Kenneth offered to help us out a bit, we were quick to accept. As a professional software developer, Kenneth had a unique perspective, which shone throughout our preliminary meetings. We set out to present the best, most intuitive wiki possible; to improve the standard wiki experience. This very wiki is the result, and below are the keys to the wiki. | ||
+ | </p> | ||
+ | <p> | ||
- | < | + | <span class="intro">Better overview: A metro-map of all pages</span><br> |
- | < | + | A general issue observed on many wikis is that the user struggles to navigate. We designed a metro-style navigation bar at the top of each page, giving the user knowledge of his exact location. |
+ | While allowing a custom experience and viewing order, the navigation bar ensures that the user is never lost. | ||
- | |||
- | |||
- | |||
</p> | </p> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<p> | <p> | ||
- | < | + | |
+ | <span class="intro">Smarter tour: Usable by both casual and thorough readers</span><br> | ||
+ | A lot of wiki-tours do a great job at introducing the reader to the project. However, users who want details are left to fend for themselves in a jungle of pages. | ||
+ | Our fix: Allowing our readers the freedom to choose between a quick and a detailed tour by including all pages in our tour.</br> | ||
+ | The result is an interactive wiki tour, which sets up a choice between digging deeper to detailed pages or fast-forward to the next major chapter. The two buttons (on the bottom of the screen) even have a small text explaining what you can expect to read on the coming pages. Also, take the time to click on our photos; this brings forward a detailed figure description. | ||
+ | |||
</p> | </p> | ||
- | + | ||
+ | |||
<p> | <p> | ||
- | + | ||
- | <span class="sourceReference"> | + | <span class="intro">Quicker navigation: Tour buttons and menu always visible</span><br> |
+ | Additional ease of navigation was created by ensuring that tour-buttons and menu are always available - even when scrolling through the text! While searching for a topic of interest, a traditional menu as a means of a shortcut may be desirable. Such a menu allows users to access a specific page that they might wish to revisit. Perhaps a certain page sprung to mind after completing the tour, perhaps a user accesses our wiki looking for a particular subject. The menu makes such personalized experiences easier and more user-friendly. | ||
+ | </p> | ||
+ | <p> | ||
+ | |||
+ | <span class="intro">Tooltips: Simplifying the text</span><br> | ||
+ | To reach broader audiences, we wanted our wiki articles to be easily understandable without compromising the scientific aspect. | ||
+ | To solve this, we added | ||
+ | <span class="tooltipLink">tooltips</span> | ||
+ | <span class="tooltip"><span class="tooltipHeader">Tooltips</span>All tooltips are marked with bold, blue text to draw attention.</span> | ||
+ | |||
+ | to many of our pages. The tooltips enable us to maintain short and precise texts with great scientific value, while explaining some of the more exotic words and abbreviations.</br> | ||
+ | We also use tooltips when quoting a source without cluttering the | ||
+ | |||
+ | <span class="sourceReference">text.</span> | ||
<span class="tooltip"> | <span class="tooltip"> | ||
- | <span class="tooltipHeader">Source</span> | + | <span class="tooltipHeader">Source:</span> |
- | + | <i>A reference to our source will be placed here</i> | |
- | </span> | + | </span> |
+ | |||
</p> | </p> | ||
- | + | ||
<p> | <p> | ||
- | + | ||
- | < | + | <span class="intro">Stay on track: Many external sites are shown as in-page dialogs</span><br> |
- | + | Sometimes we link to external content, such as our submitted parts. These links will open inside the page using a dialog box, which can be easily closed by clicking the escape button in the top right corner. This helps users stay on track when browsing our wiki. | |
- | </ | + | |
- | + | ||
</p> | </p> | ||
+ | |||
+ | <p> | ||
+ | |||
+ | <span class="intro">The best part</span><br> | ||
+ | As with everything else in iGEM regi, the entire structure and underlying HTML code for this website is open source and easy to access for everyone. Just press 'View source' in the top of the page or hit F12 to access the source codes. This is a great way for future iGEM teams to get inspiration and the tools to build great wikis, and was one of our main goals with this wiki, to give the community some tools to make good looking, easy to navigate wikis. Access our <a href="https://2013.igem.org/Team:SDU-Denmark/core/stylesheet" target="_blank">Style Sheet</a>, <a href="https://2013.igem.org/Team:SDU-Denmark/core/tourmenu" target="_blank">Tour Menu</a>, <a href="https://2013.igem.org/Team:SDU-Denmark/core/header" target="_blank">Header</a> and <a href="https://2013.igem.org/Team:SDU-Denmark/core/footer" target="_blank">Footer</a> to get a glimpse of the source codes behind our wikis standard elements. | ||
+ | |||
+ | |||
+ | |||
+ | </p> | ||
+ | |||
+ | |||
+ | |||
+ | <br> | ||
+ | |||
+ | <p> | ||
+ | |||
+ | <h2>Compliance with the iGEM 2013 wiki requirements</h2> | ||
+ | The <a href="https://2013.igem.org/Requirements/Wiki" target="_blank">wiki requirements’</a> primary purpose is to ensure that the wiki will continue to function, even several years from now. Also, it is important that future teams can look to previous wikis and learn from them; hopefully resulting in even better wikis in the future in the spirit of iGEM’s community sharing. | ||
+ | <br><br> | ||
+ | <span class="intro">All wiki requirements are met. </span>Below is an outline of focal points:<br> | ||
+ | |||
+ | </p> | ||
+ | |||
+ | |||
+ | <p> | ||
+ | |||
+ | <span class="intro">All pages, images, and files are hosted on the 2013.igem.org server</span><br> | ||
+ | This also includes all necessary javascript and JQuery code needed for the wiki to function properly. | ||
+ | |||
+ | </p> | ||
+ | |||
+ | <p> | ||
+ | |||
+ | <span class="intro">No flash was used in the making of this wiki</span><br> | ||
+ | Since flash is not open-source, it would be impossible for other teams to see how it is made. Besides, flash is not visible from many <span class="tooltipLink">modern mobile devices</span><span class="tooltip"><span class="tooltipHeader">Modern mobile devices</span>iPhones, iPads, Windows Phone 8 and Windows tablets. | ||
+ | </span>, which would make the wiki less accessible. Consequently, all animations were done using javascript. | ||
+ | |||
+ | </p> | ||
+ | |||
+ | <p> | ||
+ | |||
+ | <span class="intro">Project description on front page</span><br> | ||
+ | To welcome new readers, the front page focuses on our project description. | ||
+ | |||
+ | |||
+ | </p> | ||
+ | |||
+ | <p> | ||
+ | |||
+ | <span class="intro">All pages are in the team namespace</span><br> | ||
+ | We made sure that all our pages are created in the correct namespace, in our case under the <span class="spceialWord">Team:SDU-Denmark.</span> | ||
+ | |||
+ | </p> | ||
+ | |||
+ | |||
+ | <p> | ||
+ | |||
+ | <span class="intro">There is a link to the completed safety form and an attributions section as part of the wiki</span><br> | ||
+ | The completed safety form can be viewed on our <a href="https://2013.igem.org/Team:SDU-Denmark/Tour34">safety page.</a><br> | ||
+ | The attributions page can be found <a href="https://2013.igem.org/Team:SDU-Denmark/Tour12">here.</a> | ||
+ | |||
+ | </p> | ||
+ | |||
+ | |||
+ | <p> | ||
+ | |||
+ | <span class="intro">iGEM logo and user editing menu is found on the top of every page</span><br> | ||
+ | We kept the original iGEM logo in the header as a link to igem.org. | ||
+ | The user editing menu is also visible on every page, just above our header. Note that the header collapses to save space, and you may have to scroll to the top of the page to view it, exactly as it does on the igem.org site. This way, menus are in their expected positions and easily accessible to future teams. | ||
+ | |||
+ | |||
+ | </p> | ||
+ | |||
</html> | </html> | ||
{{:Team:SDU-Denmark/core/footer}} | {{:Team:SDU-Denmark/core/footer}} |
Latest revision as of 13:41, 21 March 2014
A different wiki
Our way of showing the world what we accomplished - intuitively and thoroughly
Team members working hard to polish the wiki before the European Jamboree wiki-freeze. Most of our team members have never tried creating a wiki, so when Heidi’s boyfriend Kenneth offered to help us out a bit, we were quick to accept. As a professional software developer, Kenneth had a unique perspective, which shone throughout our preliminary meetings. We set out to present the best, most intuitive wiki possible; to improve the standard wiki experience. This very wiki is the result, and below are the keys to the wiki.
Better overview: A metro-map of all pages
A general issue observed on many wikis is that the user struggles to navigate. We designed a metro-style navigation bar at the top of each page, giving the user knowledge of his exact location.
While allowing a custom experience and viewing order, the navigation bar ensures that the user is never lost.
Smarter tour: Usable by both casual and thorough readers
A lot of wiki-tours do a great job at introducing the reader to the project. However, users who want details are left to fend for themselves in a jungle of pages.
Our fix: Allowing our readers the freedom to choose between a quick and a detailed tour by including all pages in our tour.
The result is an interactive wiki tour, which sets up a choice between digging deeper to detailed pages or fast-forward to the next major chapter. The two buttons (on the bottom of the screen) even have a small text explaining what you can expect to read on the coming pages. Also, take the time to click on our photos; this brings forward a detailed figure description.
Quicker navigation: Tour buttons and menu always visible
Additional ease of navigation was created by ensuring that tour-buttons and menu are always available - even when scrolling through the text! While searching for a topic of interest, a traditional menu as a means of a shortcut may be desirable. Such a menu allows users to access a specific page that they might wish to revisit. Perhaps a certain page sprung to mind after completing the tour, perhaps a user accesses our wiki looking for a particular subject. The menu makes such personalized experiences easier and more user-friendly.
Tooltips: Simplifying the text
To reach broader audiences, we wanted our wiki articles to be easily understandable without compromising the scientific aspect.
To solve this, we added
tooltips
TooltipsAll tooltips are marked with bold, blue text to draw attention.
to many of our pages. The tooltips enable us to maintain short and precise texts with great scientific value, while explaining some of the more exotic words and abbreviations.
We also use tooltips when quoting a source without cluttering the
text.
Source:
A reference to our source will be placed here
Stay on track: Many external sites are shown as in-page dialogs
Sometimes we link to external content, such as our submitted parts. These links will open inside the page using a dialog box, which can be easily closed by clicking the escape button in the top right corner. This helps users stay on track when browsing our wiki.
The best part
As with everything else in iGEM regi, the entire structure and underlying HTML code for this website is open source and easy to access for everyone. Just press 'View source' in the top of the page or hit F12 to access the source codes. This is a great way for future iGEM teams to get inspiration and the tools to build great wikis, and was one of our main goals with this wiki, to give the community some tools to make good looking, easy to navigate wikis. Access our Style Sheet, Tour Menu, Header and Footer to get a glimpse of the source codes behind our wikis standard elements.
Compliance with the iGEM 2013 wiki requirements
The wiki requirements’ primary purpose is to ensure that the wiki will continue to function, even several years from now. Also, it is important that future teams can look to previous wikis and learn from them; hopefully resulting in even better wikis in the future in the spirit of iGEM’s community sharing.All wiki requirements are met. Below is an outline of focal points:
All pages, images, and files are hosted on the 2013.igem.org server
This also includes all necessary javascript and JQuery code needed for the wiki to function properly.
No flash was used in the making of this wiki
Since flash is not open-source, it would be impossible for other teams to see how it is made. Besides, flash is not visible from many modern mobile devicesModern mobile devicesiPhones, iPads, Windows Phone 8 and Windows tablets.
, which would make the wiki less accessible. Consequently, all animations were done using javascript.
Project description on front page
To welcome new readers, the front page focuses on our project description.
All pages are in the team namespace
We made sure that all our pages are created in the correct namespace, in our case under the Team:SDU-Denmark.
There is a link to the completed safety form and an attributions section as part of the wiki
The completed safety form can be viewed on our safety page.
The attributions page can be found here.
iGEM logo and user editing menu is found on the top of every page
We kept the original iGEM logo in the header as a link to igem.org.
The user editing menu is also visible on every page, just above our header. Note that the header collapses to save space, and you may have to scroll to the top of the page to view it, exactly as it does on the igem.org site. This way, menus are in their expected positions and easily accessible to future teams.