Introduction
The Exopaedia is an encyclopaedia for the new exo-sciences. With thousands of visitors every week, and its topics usually ending up among the top results in Google, it definitely qualifies as a success story. The Exopaedia uses 'state of the art' technology with regard to both knowledge management systems, as well as with regard to the latest web technologies and principles:
HTML5
The Exopaedia takes full advantage of HTML 5 (while at the same time using alternative Cascading Style Sheets and Javascript to accomodate older browsers).
Pages in the Exopaedia use the new semantic markup tags of HTML5: <nav> for navigation, <header> for the header, <article> for the actual content, <footer> for the footer, sidebars for links to other topics and other websites. (The content of the <article> and <sidebar> sections are retrieved from the database).
Another advantage of HTML5 is the ability to add video and audio to the information in a way that will work across different platforms. (At present, the standards for video and audio are not fully implemented across all browsers yet).
Progressive Enhancement
Wikipedia: "Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or better bandwidth."
The underlying principle for progressive enhancement is that one separates content from presentation (or layout), and from behaviour. In essence, one distinguishes among 3 separate layers:
- content with semantic markup (HTML),
- presentation / styling (External CSS),
- and behaviour / client side scripting (External Javascript, jQuery, etc.)
In the Exopaedia, the actual content is stored in a database, where each topic has its own record, which consists of HTML code with minimal markup.
The actual layout of the page is stored in a series of separate and external CSS sheets.
Client-side behaviour is stored in external Javascript (and php scripts).
Repsonsive Web Design
Stanford University: "A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices. "
Responsive Web Design works with fluid grids (which dynamically position page elements, depending on the device and available screen width), flexible images (which dynamically resize), media queries (which give instructions on what layout to choose, depending on the device and available screen width) and device detection.
With fluid grids, one can define different layouts for different devices. The first screenshot above, e.g., shows a page layout that will work for browsers with a screen width of 768 pixels and higher. Top navigation and the header take the full width of the page, while the content of the article takes up 75% of the page width (6 out of 8 columns of the grid), and the sidebars take up 25% of the page (2 out of 8 columns).
In the second screenshot, which is defined for smartphones with lower resolutions, the elements are repositioned and resized. The actual content (i.e. the 'article) is spread over fewer columns of the fluid grid, and the sidebars are all moved underneath the article, because there is no space available next to the article.
Device detection and the media queries determine which of the available layouts should be used.
Knowledge Management
The Exopaedia is also an interesting case study as a 'state of the art' knowledge management system that uses an intelligent thesaurus, built from a lexicon that in turn consists of an authoritative file, and a synonym ring. It also allows to use multiple Taxonomies.
An example can clarify what this means. At present there are no universally agreed upon names and terminologies for emerging sciences. What one author will call astrobiology, another may call exobiology or xenobiology, yet they're talking about the same thing. In the Exopaedia, one name will be chosen for the actual record in the database that has the information about the topic (e.g. exobiology), while the alternatives or synonyms will be stored in a list of synonyms (and derivatives). The list with the actual terminology that is used within the database is called the 'authoritative file' while the list of synonyms is called the 'synonym ring.' (The name 'synonym ring' can be misleading because apart from synonyms it can also contain derivatives, like, e.g. 'exiobiological,' and antonyms). The authoritative file and the synonym ring together make up the lexicon. When one searches for a term, the lexicon is used. So it doesn't matter whether one searches on 'exobiology' or 'astrobiology,' one will always find the relevant information.
Many scholars like to organise ('classify') information in complex tree structures. In the terminology of Knowledge Management Systems, these are calle 'taxonomies.' The Exopaedia allows to work with multiple taxononies. These can be integrated into the 'related topics,' where links will then be provided to 'singling' entries, parent and child entries. Or they can be set up as a separate and autonomous taxonomy, which will then appear as a third option as a sidebar, apart from the 'related topics' and 'external links.'
The Exopaedia also works with object types and categories, subcategories, etc.
