Team:SDU-Denmark/Tour11

From 2013.igem.org

(Difference between revisions)
 
(13 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"
-
<script>
+
href="https://static.igem.org/mediawiki/2013/8/84/SDU2013_WikConstruction.jpg" title="Team members working hard to polish the wiki before wiki-freeze.">
-
$(document).ready(function () {
+
  <img src="https://static.igem.org/mediawiki/2013/8/84/SDU2013_WikConstruction.jpg" style="width:300px" />
-
  $('#va-accordion').vaccordion({
+
Team members working hard to polish the wiki before the European Jamboree wiki-freeze.
-
    accordionW      : '100%',
+
</a>
-
    accordionH      : 1200,
+
-
    expandedHeight  : 500,
+
-
    animSpeed      : 400,
+
-
    contentAnimSpeed: 120,
+
-
    animOpacity    : 0.7,
+
-
    visibleSlices  : 13,
+
-
    animEasing      : 'easeOutQuart',
+
-
  });
+
-
});
+
-
</script>
+
 +
<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>
-
<h2>The Team</h2>
+
<span class="intro">Better overview: A metro-map of all pages</span><br>
-
<h4>SDU's brightest</h4>
+
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 class='intro'>
 
-
"Every gun makes its own tune."
 
-
<b>- Clint Eastwood</b> in The Good, the Bad and the Ugly
 
</p>
</p>
-
<div id="va-accordion" class="va-container contentBorder">
 
-
    <div class="va-nav">
 
-
        <span class="va-nav-prev">Previous</span>
 
-
        <span class="va-nav-next">Next</span>
 
-
    </div>
 
-
    <div class="va-wrapper">
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/5/59/SDU2013_Andreas.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div>Andreas</div>
 
-
            <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Andreas Kjær</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Biochemistry and Molecular Biology</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">andkj11@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText"> Last year he ‘only’ received the Bronze medal, so he is back, and he is fierce.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">3<sup>rd</sup> year bachelor student who was part of SDU’s iGEM team 2012. </div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">Leading our characterization nightmare, including detection of rubber, and the master of our prezi’s.</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/c/c3/SDU2013_Heidi.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Heidi</div>
 
-
            <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Heidi Wille Jørgensen</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Biomedicine</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">heijo11@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">Boston sounded like a great city!
 
-
</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">3<sup>rd</sup> year bachelor student with a passion for new experiences such as lab-work, travels, and especially chocolate.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">With her hands in almost every single part of the project, she gets the stuff done.
 
-
</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/2/2a/SDU2013_Nicky.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Nicky</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Nicky Cordua Mattson</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Applied mathematics</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">nmatt11@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">Stability properties of enzyme kinetics.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">The magician - wait, we mean mathematician, right? - of our team.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">As an applied mathematician, he has done all our dry-lab modelling and simulations of the systems. Furthermore, he helped Edinburgh with their model.</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/d/d5/SDU2013_Maria.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Maria</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Maria Højberg Knudsen</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Medicine</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">maknu12@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">Eating chocolate with Sofie - that and getting a chance to work on an exciting lab project.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">2<sup>nd</sup> year bachelor student with a little pixie on her shoulder luring her into the field of synthetic biology.
 
-
</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">Headmaster of our elementary school outreach projects, writer of several articles on our wiki, and a wet-labber!</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/0/0f/SDU2013_Mattias.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Mattias</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Mattias Horan</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Medicine</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">mahor12@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">iGEM provided a great opportunity to wear a lab coat over short shorts.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">2<sup>nd</sup> year bachelor student with an insatiable hunger.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">With superior English skills, he is an important contributor to the grammar of the wiki. Quickly, he learned how to behave in the wet-lab, adding a dash of alchemy to our work.</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/e/e2/SDU2013_Patrick.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Patrick</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Patrick Rosendahl Andreassen</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Biochemistry and Molecular Biology</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">paand11@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">The challenge provided by the iGEM competition.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">3<sup>rd</sup> year bachelor student with a passion for working in the lab and obtaining results.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">He had the overview of all the wet-lab projects, the subprojects, and the sub-subprojects. He helped the wet-lab newbies by explaining need-to-know stuff, thereby avoiding huge or irreversible mistake.</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/e/e1/SDU2013_Sissel.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Sissel</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Sissel Ida Schmidt</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Biomedicine</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">sschm11@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">Getting hands-on experience.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">3<sup>rd</sup> year biomedicine student with a strict sense of order (humor). She’s the reason that we haven’t redone everything!</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText"> She has been an major asset in the Wet-lab. Furthermore, she wrote out the agenda each and every morning in her beautiful handwriting.</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/2/29/SDU2013_Sofie.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Sofie</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Anne Sofie Fredberg Jørgensen</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Medicine</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">asfredberg@gmail.com</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">Studied biomedicine for a year after attending a presentation about iGEM, and had to see for herself what all the rage was about. And lots of chocolate!</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">1<sup>st</sup> year bachelor student curious about lab work and undecided whether the ER or the lab is better.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">A great contributor in the wet-lab and a writer of multiple articles for the wiki.</div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/6/6f/SDU2013_Th%C3%B8ger.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Team member</div> Thøger</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Thøger Jensen Krogh</div>
 
-
                <div class="aboutLabel">Line of study</div>
 
-
                <div class="aboutText">Biochemistry and Molecular Biology</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">thkro11@student.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">The artificial light emission from the lab ceiling and computer screen.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">The nocturnal being and wiki master of our team.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">Being positioned in front of his computer most of the time, he did our dry-lab (not modelling, but sequence analysis, wiki, primer design, etc.). Carried out some wet-lab work during the nights. </div>
 
-
            </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/d/dd/SDU2013_Ann.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Instructor</div> Ann</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Ann Zahle Andersen</div>
 
-
                <div class="aboutLabel">Profession</div>
 
-
                <div class="aboutText">Business Scouting Officer</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">zahle@sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">Once an iGEM’er, always an iGEM’er!</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">PhD in Biochemistry and later postdoc in Microbiology, but deep down just a person who loves trying new things.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">Getting the team funded and acting lab-mom when needed</div>
 
-
        </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/a/a2/SDU2013_Kirstine.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Instructor</div> Kirstine</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Kirstine Jacobsen</div>
 
-
                <div class="aboutLabel">Profession</div>
 
-
                <div class="aboutText">PhD Fellow</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">kijacobsen@health.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText"> Participant on SDUs first iGEM team and supervisor of the second team - She never left!</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">PhD student, Master of Science in Biochemistry and Molecular Biology.</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">Trying to keep the great overview and especially contributed to get the wild ideas for characterizing our systems into shaped procedures.</div>
 
-
        </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/7/78/SDU2013_Tina.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Instructor</div> Tina</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Tina Kronborg</div>
 
-
                <div class="aboutLabel">Profession</div>
 
-
                <div class="aboutText">Academic Assistant at Department of Biochemistry and Molecular Biology of SDU</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">tkron@bmb.sdu.dk</div>
 
-
                <div class="aboutLabel">Motivation</div>
 
-
                <div class="aboutText">Curiosity.</div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">Master of Science in Biomedicine</div>
 
-
                <div class="aboutLabel">Major area of contribution</div>
 
-
                <div class="aboutText">Having her office only few meters from ours, she has always been there for a chat or help in times of need. Always a invaluable source of inputs and feedback, and the FACS queen!</div>
 
-
        </div>
 
-
        </div>
 
-
        <div class="va-slice" style="background-image:url(https://static.igem.org/mediawiki/2013/1/1e/SDU2013_Jakob.jpg);">
 
-
            <div class="va-title"><div class="va-title-sub">Advisor</div> Jakob</div>
 
-
        <div class="va-content">
 
-
                <div class="aboutLabel">Full name</div>
 
-
                <div class="aboutText">Jakob Møller-Jensen</div>
 
-
                <div class="aboutLabel">Profession</div>
 
-
                <div class="aboutText">Associate Professor at Department of Biochemistry and Molecular Biology of SDU.</div>
 
-
                <div class="aboutLabel">E-mail</div>
 
-
                <div class="aboutText">jakobm@bmb.sdu.dk </div>
 
-
                <div class="aboutLabel">About</div>
 
-
                <div class="aboutText">PhD degree in molecular microbiology and later postdoctoral fellow at the MRC-Laboratory of Molecular Biology in Cambridge, UK. Currently heading a research group of 10 people working in the field of molecular microbiology with focus on pathogenic strains of Escherichia coli and their interactions with host cells.</div>
 
-
        </div>
 
-
        </div>
 
-
    </div>
 
-
</div>
 
-
</br>
 
<p>
<p>
-
<a class="dialogLink" href="https://igem.org/Team.cgi?id=1088">Our team page at www.iGEM.org</a>
+
 
 +
<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>
-
<h2>University of Southern Denmark (SDU)</h2>
+
 
 +
 
<p>
<p>
-
The work was carried out in the Microbiology laboratory at the department of Biochemistry and Molecular Biology at the University of Southern Denmark in the city of Odense. Odense University was established in 1966. In 1998, it merged with two other institutes of Southern Denmark and became SDU. It has locations in multiple cities all over Denmark including Odense, Kolding, Esbjerg, Sønderborg, Slagelse, and Copenhagen with a shared focus on education and research. There are approximately 3.200 employees and more than 20.000 students enrolled; about half live and study in the city of
+
 
-
<span class="sourceReference">Odense.</span>
+
<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>
-
    <a href="http://www.sdu.dk/en/Om_SDU" target="_blank">http://www.sdu.dk/en/Om_SDU</a>
+
    <i>A reference to our source will be placed here</i>
-
</span>  
+
</span>
 +
 
</p>
</p>
-
<h2>Odense</h2>
+
 
<p>
<p>
-
Odense is quite an extraordinary city. Even though it’s the 3rd largest city of Denmark, Odense only has 2 buildings taller than the 4th floor. The city name originates from “Odins Vi”, meaning a shrine for the worshiping of Odin, the allfather of all gods from the Nordic mythology.
+
 
-
</p><p>
+
<span class="intro">Stay on track: Many external sites are shown as in-page dialogs</span><br>
-
Located on the isle of Funen, placed almost perfectly in the middle of Denmark and with it’s direct connection to the ocean through a cove, Odense was a rich city of trade. A number of Danish kings lived in the city, Knud the Holy was even killed on the altar of the Albani cathedral during a tax-induced revolt. However, any historical figure pales in comparison to the famous author and storyteller Hans Christian Andersen, the most cherished son of Odense.
+
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>
+
 
-
Today, Odense is a city of knowledge. A fact that is hard to dispute with the University of Southern Denmark and Odense University Hospital being the two largest workplaces in the city.  
+
 
</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.