snapshot en OERu MediaWiki to WordPress Snapshot Toolchain <span class="field field--name-title field--type-string field--label-hidden">OERu MediaWiki to WordPress Snapshot Toolchain</span> <div class="field field-node--field-blog-tags field-name-field-blog-tags field-type-entity-reference field-label-above"> <h3 class="field__label">Blog tags</h3> <div class="field__items"> <div class="field__item field__item--wikieducator"> <span class="field__item-wrapper"><a href="/taxonomy/term/34" hreflang="en">wikieducator</a></span> </div> <div class="field__item field__item--wordpress"> <span class="field__item-wrapper"><a href="/taxonomy/term/35" hreflang="en">wordpress</a></span> </div> <div class="field__item field__item--multisite"> <span class="field__item-wrapper"><a href="/taxonomy/term/36" hreflang="en">multisite</a></span> </div> <div class="field__item field__item--snapshot"> <span class="field__item-wrapper"><a href="/taxonomy/term/37" hreflang="en">snapshot</a></span> </div> <div class="field__item field__item--mediawiki"> <span class="field__item-wrapper"><a href="/taxonomy/term/38" hreflang="en">mediawiki</a></span> </div> <div class="field__item field__item--nodejs"> <span class="field__item-wrapper"><a href="/taxonomy/term/39" hreflang="en">node.js</a></span> </div> <div class="field__item field__item--php"> <span class="field__item-wrapper"><a href="/taxonomy/term/40" hreflang="en">php</a></span> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/user/1" lang="" about="/user/1" typeof="schema:Person" property="schema:name" datatype="" class="username">dave</a></span> <span class="field field--name-created field--type-created field--label-hidden">Fri 16/06/2017 - 11:19</span> <div class="field field-node--field-image field-name-field-image field-type-image field-label-hidden has-multiple"> <figure class="field-type-image__figure image-count-1"> <div class="field-type-image__item"> <a href="" aria-controls="colorbox" aria-label="{&quot;alt&quot;:&quot;Example of a WikiEducator Outline Page with the Snapshot button&quot;}" role="button" title="Example of a WikiEducator Outline Page with the Snapshot button" data-colorbox-gallery="gallery-field_image-eexsTLSz8os" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Example of a WikiEducator Outline Page with the Snapshot button&quot;}"><img src="/sites/default/files/styles/medium/public/2017-06/WikiEducatorSnapshotExample.png?itok=4cDqr9-n" width="220" height="125" alt="Example of a WikiEducator Outline Page with the Snapshot button" loading="lazy" typeof="foaf:Image" class="image-style-medium" /> </a> </div> </figure> <figure class="field-type-image__figure image-count-2"> <div class="field-type-image__item"> <a href="" aria-controls="colorbox" aria-label="{&quot;alt&quot;:&quot;Example of Snapshot authentication for remote WordPress site&quot;}" role="button" title="Example of Snapshot authentication for remote WordPress site" data-colorbox-gallery="gallery-field_image-eexsTLSz8os" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Example of Snapshot authentication for remote WordPress site&quot;}"><img src="/sites/default/files/styles/medium/public/2017-06/WikiEducatorSnapshotAuthenticationExample.png?itok=iCXP2eXj" width="220" height="125" alt="Example of Snapshot authentication for remote WordPress site" loading="lazy" typeof="foaf:Image" class="image-style-medium" /> </a> </div> </figure> <figure class="field-type-image__figure image-count-3"> <div class="field-type-image__item"> <a href="" aria-controls="colorbox" aria-label="{&quot;alt&quot;:&quot;A sample course page showing the adaptive layout (mobile-friendly) interface and navigation.&quot;}" role="button" title="A sample course page showing the adaptive layout (mobile-friendly) interface and navigation." data-colorbox-gallery="gallery-field_image-eexsTLSz8os" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;A sample course page showing the adaptive layout (mobile-friendly) interface and navigation.&quot;}"><img src="/sites/default/files/styles/medium/public/2017-06/WikiEducatorSnapshotSampleCoursePage.png?itok=DOT2vvTM" width="220" height="145" alt="A sample course page showing the adaptive layout (mobile-friendly) interface and navigation." loading="lazy" typeof="foaf:Image" class="image-style-medium" /> </a> </div> </figure> <figure class="field-type-image__figure image-count-4"> <div class="field-type-image__item"> <a href="" aria-controls="colorbox" aria-label="{&quot;alt&quot;:&quot;Sample of the link (#1) back to the WikiEducator page from which this WordPress Course page is derived&quot;}" role="button" title="Sample of the link (#1) back to the WikiEducator page from which this WordPress Course page is derived" data-colorbox-gallery="gallery-field_image-eexsTLSz8os" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Sample of the link (#1) back to the WikiEducator page from which this WordPress Course page is derived&quot;}"><img src="/sites/default/files/styles/medium/public/2017-06/WikiEducatorSnapshotSampleCoursePageContentLink.png?itok=PTtiGfSy" width="220" height="145" alt="Sample of the link (#1) back to the WikiEducator page from which this WordPress Course page is derived" loading="lazy" typeof="foaf:Image" class="image-style-medium" /> </a> </div> </figure> <figure class="field-type-image__figure image-count-5"> <div class="field-type-image__item"> <a href="" aria-controls="colorbox" aria-label="{&quot;alt&quot;:&quot;The same Course Page example viewed on a narrower screen, demonstrating the adaptive &quot;mobile-friendly&quot; layout.&quot;}" role="button" title="The same Course Page example viewed on a narrower screen, demonstrating the adaptive &quot;mobile-friendly&quot; layout." data-colorbox-gallery="gallery-field_image-eexsTLSz8os" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;The same Course Page example viewed on a narrower screen, demonstrating the adaptive &quot;mobile-friendly&quot; layout.&quot;}"><img src="/sites/default/files/styles/medium/public/2017-06/WikiEducatorSnapshotSampleCoursePageNarrowLayout.png?itok=m5NnfsfY" width="65" height="220" alt="The same Course Page example viewed on a narrower screen, demonstrating the adaptive &quot;mobile-friendly&quot; layout." loading="lazy" typeof="foaf:Image" class="image-style-medium" /> </a> </div> </figure> </div> <div class="clearfix text-formatted field field-node--body field-name-body field-type-text-with-summary field-label-hidden"> <div class="field__items"> <div class="field__item"><p>One of the OERu's most compelling technological capabilities is the set of internally developed open source tools that allow us to automatically transform and inject a collection of MediaWiki content on <a href="">WikiEducator</a> (usually in form of micro-courses) making up a course into a mobile-friendly, easy-to-navigate WordPress site, usually situated on OERu's <a href="">Course WordPress Multisite</a> implementation.</p> <h2>How it works</h2> <p>Educators, usually working with one of our <a href="">OERu partner institutions</a>, can assemble the materials (either written by them or recruited from existing OERs on Wikieducator) into an "outline" which references all the content in one place. If they want to make the course available (either a cohort-based group or a "rolling" enrolment, either affiliated with their institution or under the OERu banner) they can do so either on a subsite on OERu's WordPress instance or some other WordPress, for example one hosted by their institution.</p> <h3>MediaWiki Widget</h3> <p>The process of linking an outline to a WordPress site and pushing a "snapshot" of the course content outlined to the WordPress site is remarkably simple. First, the author of the outline page includes a one line MediaWiki template or "widget" - which is managed by the open source <a href="" title="Open Source MediaWiki plugin component of the OERu Snapshotting process">OERu MediaWiki plugin</a> (written in <a href="">PHP</a>, like the rest of <a href="">MediaWiki</a>) developed by <a href="">Jim Tittsler</a> - that will look something like this (usually in one line, expanded here for clarity):</p> <p><code>{{ #widget:Snapshot |<br /> url= |<br /> logo= |<br /> link=}}</code></p> <p>This defines</p> <ul><li>the URL of the WordPress site, using the "shortcode" the educator has defined for that course (like the institution's course code),</li> <li>a logo image to display at the bottom of each page of the WordPress course site to identify the relevant institution, and</li> <li>the link to which a user will be sent if they click on the logo.</li> </ul><p>There is a <a href="">handy instruction page</a> for the widget if you want a bit more detail.</p> <h3>Course Snapshot Script</h3> <p>When the page containing this template is saved, the resulting page will have a "Request snapshot" button at the top of it (see attached screenshot). Clicking this will popup a modal dialog box into which the user will be asked to enter their login and password <em>for an admin user on the listed WordPress site</em> (either multisite or stand-alone implementation).</p> <p>If the WordPress site in question accepts these credentials, a new Snapshot task is added to WikiEducator's task list, handing over control to Jim's rather clever open source <a href="">Course Snapshot</a> script which runs in the background, and checks the task list ever minute or two. When it identifies as snapshot request, it uses the outline page and WikiEducator's API to grab all the relevant content automatically, and it builds a structured data archive (in a variant of XML) which, when completed, is imported directly into a WordPress site via WordPress' XMLRPC capabilities, replacing any existing content.</p> <p>Note: the default export format used by the Course Snapshot script is a WordPress-importable data object, however for historical reasons, it also has the ability to generate (more manually at this stage) a static, internally linked HTML version of the content.</p> <h3>WordPress Mobile-Friendly Course Site</h3> <p>The resulting WordPress course site uses the OERu-created open source mobile-friendly <a href="">Course WordPress theme</a> - see the sample page screen shot. Each page includes a link back to the original page in WikiEducator from which it was generated - see sample page screen shot with the link identified. Also see the sample image of the same page as it would look on a mobile device with a narrower (lower pixel resolution) screen width.</p> <p>Note: anyone can copy an outline page written by someone else and use it as the starting point for assembling their own version of the course - they will, however, have to have admin rights on the target WordPress site (and log in to it to initiate the process) protecting any existing snapshot sites from being overwritten by someone else's course content.</p> <h3>More examples</h3> <p><a href="" title="Examples of courses and course &quot;Outline pages&quot; on WikEducator">Here's a list</a> of some of the currently available course outlines on WikiEducator with corresponding links to the "rendered" WordPress courses so you can see what it looks like.</p> </div> </div> </div> <section class="field field-node--field-blog-comments field-name-field-blog-comments field-type-comment field-label-above comment-wrapper"> <a name="comments"></a> <div class="comment-form-wrapper"> <h2 class="comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=15&amp;2=field_blog_comments&amp;3=comment" token="Su39uEtmGb5TGwGIb3Eyr4NoVO4Ofw4MyngXZefYMqA"></drupal-render-placeholder> </div> </section> Thu, 15 Jun 2017 23:19:06 +0000 dave 15 at