Team:SDU-Denmark/Tour13

From 2013.igem.org

(Difference between revisions)
Line 8: Line 8:
<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 tour is the result, and below are the keys to the wiki.
<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 tour is the result, and below are the keys to the wiki.
</p>
</p>
-
 
<p>
<p>
-
<h4>Better overview: A metro-map of all pages</h4>
+
<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.
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.  
While allowing a custom experience and viewing order, the navigation bar ensures that the user is never lost.  
Line 19: Line 18:
<p>
<p>
-
<h4>Smarter tour: Usable by both casual and thorough readers</h4>
+
<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.
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.
Our fix: Allowing our readers the freedom to choose between a quick and a detailed tour by including all pages in our tour.
Line 29: Line 28:
<p>
<p>
-
<h4>Quicker navigation: Tour buttons and menu always visible</h4>
+
<span class="intro">Quicker navigation: Tour buttons and menu always visible</span><br>
Additional ease of navigation was created by making sure that tour-buttons and menu are always available - no matter whereto on a particularly page, you scroll. When searching for a specific page, a traditional menu as a means of a shortcut may be desirable. This is made available at the top of every page, too.
Additional ease of navigation was created by making sure that tour-buttons and menu are always available - no matter whereto on a particularly page, you scroll. When searching for a specific page, a traditional menu as a means of a shortcut may be desirable. This is made available at the top of every page, too.
Line 46: Line 45:
<p>
<p>
-
<h4>Stay on track: Many external sites are shown as in-page dialogs</h4>
+
<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.
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>
 +
 +
<br><br><br>
<br><br><br>
Line 73: Line 74:
<p>
<p>
-
<span class="intro">No flash was used in the making of this wiki</span>
+
<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.
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.  
</span>, which would make the wiki less accessible. Consequently, all animations were done using javascript.  
Line 81: Line 82:
<p>
<p>
-
<span class="intro">Project description on front page</span>
+
<span class="intro">Project description on front page</span><br>
To welcome new readers, the front page focuses on our project description.
To welcome new readers, the front page focuses on our project description.
Line 89: Line 90:
<p>
<p>
-
<span class="intro">All pages are in the team namespace</span>
+
<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>
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>
Line 97: Line 98:
<p>
<p>
-
<span class="intro">There is a link to the completed safety form and an attributions section as part of the wiki</span>
+
<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 class="dialogLink" href="https://2013.igem.org/Team:SDU-Denmark/Tour34">safety page.</a>
The completed safety form can be viewed on our <a class="dialogLink" href="https://2013.igem.org/Team:SDU-Denmark/Tour34">safety page.</a>
The attributions page can be found <a class="dialogLink" href="https://2013.igem.org/Team:SDU-Denmark/Tour12">here.</a>
The attributions page can be found <a class="dialogLink" href="https://2013.igem.org/Team:SDU-Denmark/Tour12">here.</a>
Line 106: Line 107:
<p>
<p>
-
<span class="intro">iGEM logo and user editing menu is found on the top of every page</span>
+
<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.
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.
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.

Revision as of 23:39, 3 October 2013

A different wiki

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 tour 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.

Quicker navigation: Tour buttons and menu always visible
Additional ease of navigation was created by making sure that tour-buttons and menu are always available - no matter whereto on a particularly page, you scroll. When searching for a specific page, a traditional menu as a means of a shortcut may be desirable. This is made available at the top of every page, too.

To reach broader audiences, we wanted our wiki articles to be easily understandable without compromising the scientific aspect. To solve this, we added tooltips Tooltips like thisIn bold blue 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: - like this.

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.




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.

The following requirements are made, and followed:

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.