{"id":6710,"date":"2026-08-28T17:40:45","date_gmt":"2026-08-28T15:40:45","guid":{"rendered":"https:\/\/weblearning.co.za\/blog\/?p=6710"},"modified":"2026-09-03T14:13:59","modified_gmt":"2026-09-03T12:13:59","slug":"wir-final-month","status":"publish","type":"post","link":"https:\/\/weblearning.co.za\/blog\/wir-final-month\/","title":{"rendered":"WIR Final Month"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"729\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/IMG_1421-1024x729.jpeg\" alt=\"\" class=\"wp-image-6612\" style=\"aspect-ratio:1.404725290088075;width:628px;height:auto\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/IMG_1421-1024x729.jpeg 1024w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/IMG_1421-300x213.jpeg 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/IMG_1421-768x547.jpeg 768w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/IMG_1421.jpeg 1179w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Screenshot of the booklet front page.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m back from Paris where I attended WikiMania 2026 and I picked up this <a href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/47\/Wikifying_a_Conference_%E2%80%A2_Braisher_%26_Dickison_%E2%80%A2_July_2026.pdf?utm_source=commons.wikimedia.org&amp;utm_campaign=index&amp;utm_content=original\">Wikifying a Conference booklet<\/a>. It has been put together by Tamsin Braisher and Mike Dickison. They have been &#8220;<a href=\"https:\/\/www.wikimedia.nz\/how-can-a-conference-contribute-to-wikipedia\/\">thinking openly<\/a>&#8221; about how to <a href=\"https:\/\/www.wikidata.org\/wiki\/Q140444938\">Wikify a Conference<\/a>. Their book is licensed <a href=\"https:\/\/en.wikipedia.org\/wiki\/Template:CC_BY-SA_4.0\">CC BY SA.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I thought that I&#8217;d try to digitalize (not digitize) this booklet and take a different approach to capacity building. As part of  my Wikipedia Work, I&#8217;m planning to run master classes. This Wikifyying Concept (if it works) might be turned into a Github repository, where we could Wikify other entities. These are the rough steps that I plan to take as I work to transmogrify (Finn, 1999 quoting Watterston, B) the booklet.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Planning the page<\/li>\n\n\n\n<li>Choosing a palette<\/li>\n\n\n\n<li>Creating  a root folder<\/li>\n\n\n\n<li>Building on what I developed previosly<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Plan your page<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you check out the following simple diagram (chat GPT started this off) you will see that this proposed site has four page types.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u251c\u2500\u2500 index.html<br>\u251c\u2500\u2500 style.css<br>\u251c\u2500\u2500 script.js<br>\u2514\u2500\u2500 API<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1|Index &#8211; a clear structure.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The Wikifying a conference booklet TOC has three sections to it &#8211; <strong>Before<\/strong>, <strong>During<\/strong> and <strong>After<\/strong>. Each of these sections has a number of subsections. Although the index page in a paper based book usually contains all those options, on the web, I&#8217;d prefer not to show all the subsections (listed below) right away. People are overwhelmed with too much information.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Before the event<\/strong><\/td><td><strong>During the event<\/strong><\/td><td><strong>After the event<\/strong><\/td><\/tr><tr><td><a href=\"https:\/\/weblearning.co.za\/blog\/to-wikify\/\">To Wikify&#8230; <br><\/a><a href=\"https:\/\/weblearning.co.za\/blog\/the-w-pitch\/\">The &#8220;W&#8221; Pitch<\/a> <br><a href=\"https:\/\/weblearning.co.za\/blog\/plan-to-wikify\/\">Plan to Wikify<\/a> <br>Sharing your Credentials<br>Wikidata for the event <br>Wikidata for people <br>Commons before the event <br><\/td><td>Setting up <br>Identifying yourself<br>Photos and SSP<br>Name badges<br>Swag and Handouts <br>Wikidata clinic<br>Managing your time<br>Say your name <br>Uploading images<br><\/td><td>Tidy-up checklist<br>OpenRefine<br>Conference video <br>Scholia <br>Bulk uploading of images <br>Plan your reporting <br>Acknowledgements<br>Resources<br>Notes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On the index page, I will have make three visible sections (before., during and after) with links. Then once a person clicks on a section, they will then see a grid of posts that relate to the topics mentioned in the three columns (see above). The content of the posts will be served in different ways. This is not final, but &#8220;Before&#8221; might have a HTML page, &#8220;During&#8221; will pull its content using Javascript and a JSON file. And the &#8220;After&#8221; section could pull content from a my wordpress blog. This would allow me to have a guide that has both static and live information. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2| Style &#8211;  Choose you palette<\/h4>\n\n\n\n<style data-wp-block-html=\"css\">\n:root {\n--primary: #E0552D;\n--secondary: #DF7B61;\n--tertiary: #224A6E\n}\n\n.wikify-palette {\n  width: 300px;\n  height: 200px;\n  border: solid 1px black;\n  background: linear-gradient(\n    to bottom,\n    var(--primary) 0%,\n    var(--primary) 33.33%,\n    var(--secondary) 33.33%,\n    var(--secondary) 66.66%,\n    var(--tertiary) 66.66%,\n    var(--tertiary) 100%\n  );\n}\n<\/style>\n\n<div class=\"wikify-palette\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">I have used CSS and HTML to create a palette in the root folder.<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>:root {\n--primary: #E0552D;\n--secondary: #DF7B61;\n--tertiary: #224A6E\n}\n\n.palette {\n  width: 300px;\n  height: 200px;\n  border: solid 1px black;\n  background: linear-gradient(\n    to bottom,\n    var(--primary) 0%,\n    var(--primary) 33.33%,\n    var(--secondary) 33.33%,\n    var(--secondary) 66.66%,\n    var(--tertiary) 66.66%,\n    var(--tertiary) 100%\n  );\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Change is good<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a screenshot of the index page intended. You&#8217;ll notice a similar layout that I used in my previous post. I am still using the primary and secondary colours but this time my banner does not have a gradient. I have still got the three buttons, a shadow, a globe and a plain (but slightly different coloured) background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-23-165705-1024x557.png\" alt=\"\" class=\"wp-image-6677\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-23-165705-1024x557.png 1024w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-23-165705-300x163.png 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-23-165705-768x418.png 768w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-23-165705.png 1218w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Look and Feel 1:<\/strong> Screenshot of a the front page but with a different root folder.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I am not the greatest fan of the &#8220;<strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/White-label_product\">White label<\/a><\/strong>&#8221; practice, as I think that diminishes an organisations internal capacity. But as you can see, a simple switch of the root folder can quickly create a new look and feel. There is a chance that I might improve this page. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mobile Friendly Page<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The colours that Mike and Tamsin used on their pamphlet have been inserted them into my root file. I have also added a mobile stylesheet, with a media query. The screen layout changes with the hamburger menu and we get a pattywhen the screen is small. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Making it mobile friendly with a &#8220;hamburger menu&#8221;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Small screens are pressed for space and so we need to create a condensed interface. Sometimes the navigation is called a hamburger.  I have created a patty. A media query on the style sheet determines when the screen is wide or narrow. When the screen is narrow, then the patty becomes visible. I&#8217;ve been experimenting with another option. When the menu is small and the links are only visible on a mobile screen, then the shape of the horizontal navigation changes. <\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>\/* =========================\nVery small screens\n========================= *\/\n@media (max-width: 480px) {\n  horizontalnav {\n    min-height: 70px;\n    padding: 0.85rem 1rem;\n  }\n\n  horizontalnav h1 {\n    font-size: 1.25rem;\n  }\n\n  horizontalnav label {\n    font-size: 1.5rem;\n  }\n\n  .patty {\n    top: 15px;\n    right: 15px;\n    width: 64px;\n    height: 64px;\n    font-size: 9px;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can <a href=\"https:\/\/codepen.io\/editor\/Web-learning-the-bold\/pen\/01a02f39-d6b2-72d1-ac74-fcd63c932ecb\">see this in action<\/a> when you go to codepen and widen or narrow the browser window <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"675\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-140331.png\" alt=\"\" class=\"wp-image-6606\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-140331.png 580w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-140331-258x300.png 258w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption class=\"wp-element-caption\"><strong>Look and Feel 3:<\/strong> Screenshot of the solid background on a mobile device<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now lets say I want to have a collection of conference images and I want to combine it with an orange coloured gradient overlay. In the code, I&#8217;d switch to back ground <strong>image<\/strong> (instead of a background colour). Then add the variable called <strong>bgimage<\/strong> to my root folder.<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>:root {\n  --bg: #E0552D;\n  --primary: #BD3417;\n  --secondary:#224A6E;\n  --dark: #BD3417; \n  --cream: #DF7B61;\n  --white: #ffffff;\n  --shadow: 0 4px 15px rgba(83, 97, 116, 0.5);\n  --globe: #ccc;\n  --<strong>bgimage<\/strong>: linear-gradient(\n          110deg,\n          rgba(224, 85, 45, 0.1) 5%,\n          rgba(224, 85, 45, 0.4) 20%,\n          rgba(224, 85, 45, 0.9) 90%\n        ),      \nurl(\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/03\/Wikify_Conference_Cover.jpg\");\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-143916-1024x505.png\" alt=\"\" class=\"wp-image-6608\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-143916-1024x505.png 1024w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-143916-300x148.png 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-143916-768x379.png 768w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-21-143916.png 1361w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Look and Feel 4<\/strong>: Screenshot of code and a background image that has a gradual gradient<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A background image that now appears on the front cover and there is a colour gradient. The one side of the hero image is relatively transparent while the other side is strongly orange in colour.  heading and turned it into a gradient.<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>.presentation {\nwidth: 100vw;\nheight: 100vh;\nbackground: <strong>var(--bgimage);<\/strong>\nbackground-position: center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Replace var(&#8211;bgimage) with var(&#8211;bg) and you will have a solid color again. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now after all this work, I&#8217;m still wondering if my index page should have three columns. And so I throw in three columns below the white background and text (or the image, depending which one you selected)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3 | Script JS<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Confession: I cannot really do javascript from scratch and although I&#8217;ve been playing and programming with Javascript components and I know enough about variables, DOM manipulation and dynamically modifying pages. Chat GPT has made me feel far more cleverer than I am.  I have used it to create a number of functions that talk to the Wikimedia API. These functions include a <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Username checker  <\/li>\n\n\n\n<li>Contribution checker<\/li>\n\n\n\n<li>Wiki list tool<\/li>\n\n\n\n<li>People List Builder<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"> These scripts are in still production and will appear on Github and licensed openly<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4| The API<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The text and media that I have drawn on is not contained within the page. Some of the text sits on Wikimedia and servers. And other content is being pulled in from my blog or an individual JSON file by means of a call back function.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Broad strokes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\u201cTo transform is to execute change that can be reconciled with what pre-existed. To transmogrify is to change in a way that cannot be so squared (Finn, 1999). You can check out the idea at <a href=\"https:\/\/codepen.io\/editor\/Web-learning-the-bold\/pen\/01a0146e-7f40-7adc-b9e0-36207882b25a\">Codepen.io\/<\/a> Please note that all of these plans are open to change and interpretation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Credit to:<\/strong> Braisher, Tamsin and Mike Dickison (2026). Wikifying a Conference: a guide for Wikipedians. Christchurch (N.Z.): Rove. Wikidata Q138850793<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">References <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finn, J.E. Transformation or Transmogrification? Ackerman, Hobbes (as in Calvin and Hobbes), and the Puzzle of Changing Constitutional Identity.&nbsp;<em>Constitutional Political Economy<\/em>&nbsp;<strong>10<\/strong>, 355\u2013365 (1999). https:\/\/doi.org\/10.1023\/A:1009023000354<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m back from Paris where I attended WikiMania 2026 and I picked up this Wikifying a Conference booklet. It has been put together by Tamsin Braisher and Mike Dickison. They have been &#8220;thinking openly&#8221; about how to Wikify a Conference. Their book is licensed CC BY SA. I thought that I&#8217;d try to digitalize (not &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/weblearning.co.za\/blog\/wir-final-month\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;WIR Final Month&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"episode_type":"","audio_file":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[217],"tags":[],"class_list":["post-6710","post","type-post","status-publish","format-standard","hentry","category-wir","entry"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/comments?post=6710"}],"version-history":[{"count":26,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6710\/revisions"}],"predecessor-version":[{"id":6815,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6710\/revisions\/6815"}],"wp:attachment":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/media?parent=6710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/categories?post=6710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/tags?post=6710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}