User:JimTittsler/Theming

Over the past few years I have experimented with a variety of ways to reuse content stored in WikiEducator, often with an eye toward changing the presentation format. This separation of content and presentation facilitates reuse.

Reader Mode

In 2012 I built a Reader Mode (now a WikiEducator gadget) that relegates wiki navigation to a slide out tab. This recovers a lot of precious screen real estate on mobile devices while also removing a lot of wiki-specific distractions for a read-mostly experience.

Pedagogical Templates

Also in 2012, I created an iDevice Template to allow Otago Polytechnic to add a custom style to the pedagogical templates that form a strong, consistent theme throughout WikiEducator content. It adds another layer of indirection that allows anyone to change the "theme" of their templates.

Widgets

For the 2013 meeting of OERu partners, I demonstrated theming content using a widget to load custom CSS and Javascript on specified pages. Javascript built navigation menus based on an outline of course content. This allowed both theming the pages and reusing the pages in different orders/combinations because the outline could be separate from the pages it referenced.

• User:JimTittsler/OCL4Ed

WEtheme

I've built a simple tag extension WEtheme that allows the author to specify HTML header fields from a selection of choices. This has better performance than using a Widget because it can happen at initial page load time.

Because of the potential security implementations, CSS and Javascript would need to be reviewed before making them available on WikiEducator. To make that manageable, this feature was first made available to OERu partner institutions.

Example pages with the same content with two different WEthemes specified.

• Themed
• Themed2

Theme from URI

As an even simpler alternative, I demonstrated how a page might be rendered differently based on the URI used to reference it. Different OERu partner institutions could be given a distinctive URL that would style resources in their preferred layout.

• Course
• Themed Course

Course Snapshot

Building on the experience I gained from my WikiEducator->IMS Package application (2008), I've demonstrated a script that pulls a snapshot of WikiEducator pages and makes a static copy. This scheme has some potential advantages:

• building from an outline of pages nicely separates not only content and presentation, but also flow through content, facilitating reuse of individual pages in different contexts
• modifications to wiki pages after the snapshot is taken will not be reflected in the "course" pages
• the script that pulls the content from WikiEducator is free to modify the HTML: deleting, wrapping, modifying, or rearranging sections as desired to simplify layout concerns

Examples:

• OCL4Ed (based on Bootstrap)
  • built from an outline
• OCL (demonstrates different outline of course pages, and a different CSS framework, this time based on Foundation)
  • from from this outline

Snapshot in Wordpress

And building on the same basic scheme, the script can be modified to use the Wordpress API instead of writing the pages to the filesystem.

Example:

• OCL4Ed using the Wordpress Twenty Fourteen theme

I've prototyped scripts in Python (the packager) and Javascript (using JSDOM and jQuery). These are based on outlines of course pages (either identical to or inspired by the outlines built by the Collection extension). The HTML is modified to facilitate using the existing HTML5 frameworks which can be opinionated about page layout. A more ambitious alternative would be to adapt the framework source to the Mediawiki Vector layout which would have the advantage of working in the wiki as well.