Constructing the Classes and their Templates

Use this to discuss edits or changes to the wiki.
Post Reply
User avatar
Arin Mara
Member
Member
Posts: 286
Joined: 2020.07.10 13:53

Constructing the Classes and their Templates

Post by Arin Mara »

Constructing the Classes and their Templates
Image
Teaching Manager Mike Kingswell, Director of Education YooJin Moon and Wiki Manager Rayanth entrusted me with the construction of the Classes Wiki Pages, Templates and Cascading Style Sheets for the Teaching Department.

Just like Making of The Ploy, this Report details:
  • how Templates enabled others to construct beautiful and harmonious Pages
  • how to overcome difficulties you'll encounter during Template and Page construction
  • explains how to use advanced Wiki techniques and technologies through an example

Background and Requirements

After a pleasurable evening of scanning down sixty Cosmic Signatures inside a Drifter Wormhole for Yto-Marek Nullbear Fleet, Mike Kingswell took me aside. Mike wanted advice about creating Wiki Pages for the Teaching Department's new CORE Classes. Mike wanted the Page to have an image, a headline, a summary, a reach out note and a link to the slides. I told them they weren't ambitious enough and suggested they leave the construction to me. :P

It has long been my ambition to put our Teachers and their work on a marble pedestal, to celebrate their Classes. The Mission Statement of the University is clear: teach players about EVE Online. We must never lose sight of this noble goal: to teach the next generation of capsuleers about the beauties of New Eden. Let this be my small contribution. :)

Guided by Rayanth's Manifesto, before I even begun the construction, I knew I wanted the Templates to be:
  • simple, small and readable
    • I'll have to change the Template in a months. If I couldn't because it's too complicated, the Templates would be rendered useless and my work would be all for naught.
  • accessible
    • I ain't making the Templates for myself, but for the Teaching Department. I must be able to teach others how to use it.
  • hide implementation details
    • you shouldn't have to know how every single Template works in order to edit a Page. That's technological snobbery.
  • mobile phone friendly
    • I remember Rayanth justly complain about mobile unfriendly websites. Have no fear, Arin is here! :) Phone users won't have to scroll sideways while visiting the Classes Page.
  • labor saving
    • I should be able to propagate all requirement changes with a single edit of a Template. I don't want to edit hundreds of Pages. I don't have a script that would help me automate editing. Therefor, the Templates should be in charge of all features.
  • purposeful
    • each Template should do only one thing and it should do it well.
  • connected
    • just like the Class Pages, the Templates should also be nested and connected by links.
  • well documented
    • a succinct, but exhaustive documentation greatly prolongs Templates' shelf life. There should be a wealth of examples, parameter descriptions and Template renders to guide future users.
  • independent
    • I should be able to improve the Templates, while a Teacher is simultaneously creating Class Pages. We shouldn't have to care what the other person is doing. This'll also greatly speed up the Class construction :)

Architecture Design

I've knew what features I'd like the finished Templates and Pages to have. Now comes the hard part: transforming words into Templates and Pages. The first step is to draw a diagram.
Image


I'm not constructing these Pages for myself, but for the Teaching Department. Therefor, I sent it to Teaching Manager Mike Kingswell and Director of Education YooJin Moon for review. Here's what they had to say:
I feel bad for stating it bluntly but I don't even understand half the words you are using :) I trust you completely with this and any decisions you do for wiki-wizardry! I am overjoyed to see you just 'running away' with it! But do take your time and enjoy the game every once in a while.
Wow! I trust your judgement Sir. I look forward to seeing it live!
What the diagram is trying to convey is how I intend to implement each feature.

Implementation

Classes Page

This is:
  • the hub
  • where every Template comes together
  • the Page everyone is going to share
  • where every reader will come
  • where everyone will be in shock and awe
  • where beauty and truth will shine most brightly
  • the marble pedestal Classes and Teachers will stand upon

All the Page features and their complexity in hidden from the users:
  • the Page is a list of Infoboxes
  • editors can only change the order of the Infoboxes not the Infoboxes themselves
  • all Infoboxes are Sectionally Transcluded (read: copied and synchronized from their respective Class Page)
  • the Infobox list grows from left to right, not from right to left
  • the Infobox list grows from the center, not from the left edge of the Page
  • the Infobox list doesn't divide a text paragraph into two parts
  • Infoboxes and glorified tables
  • Infoboxes are stacked next to each other, not below each other
  • as you reduce the page resolution, the Infobox list will break into multiple rows. Mobile phone users rejoice! No more sideway scrolling :)
  • Infoboxes have different heights
  • Infoboxes are vertically aligned at the top
  • in spite of different heights, the top of the next row of Infoboxes is aligned with the bottom of the tallest Infobox in the previous row

The last feature was the most difficult, fiddly and painful to implement. If it wasn't like this, you'd notice it right away. Now that it is, you'll think that's the only way it could be. Enjoy the harmony, beauty and elegance. :)

Sectional Transclusion

A technique used between never and seldom on the Wiki. To Transclude means to include the content of one Page within another Page by reference. Here's Transclusion in action on the Gallente Syndication Epic Arc Page. Sectional Transclusion means that only a part of the Page will be included within another Page.

I need it to synchronize each Class Page Infobox with the list of Class Infoboxes on the Classes Page. If synchronized, both Infoboxes could be changed simultaneously with a single edit rather then requiring the editor to perform two identical edits on two different Pages.

An Extension enables Labeled Sectional Transclusion. Unfortunately, it isn't turned on. Even worse, I only found that out when I constructed the Templates. I had to scrap everything and start from scratch.

First, I had to forge the tools that would allow me to perform Sectional Transclusion.

Tools for Sectional Transclusion

It is possible to, without any Wiki Extensions, to mark parts of a Page you want to and don't want to Transclude. I just want the Class Page Infobox to be Transcluded. Unfortunately, you can't select the Infobox on the Class Page because its constructed using a Template:

Code: Select all

{CORE class
| class name      =
| class page name =
| image           =
| summary         =
| reading list    =
| author          =
| slides link     =
| video link      =
| body            =
}}
The syntax will generate an Infobox, but it will also create a banner promoting the Teaching Department, Class bullet points, Navigation Box and Class summary. What I had to do is construct the Class Template itself in such a way that it would support Sectional Transclusion.

Class Template

The Class Template is a Template of Templates. Every character has a purpose and does only one thing:
  • remove the Table of Contents
  • categorize the Page
  • inject bullet points into the Page's body
  • construct the Infobox

Additionally, Templates StartOnlyinclude and StopOnlyinclude, made with character precision, are Substituted, not Transcluded, next to the Infobox Class Template.


Substitution also references another Page, but unlike Transclusion, when a Template is Substituted on a Page, its appearance on that Page will no longer be affected by later changes made to the Template itself.. One unfortunate consequence of Substitution is that Templates StartOnlyinclude and StopOnlyinclude cannot have a Documentation Page because Substitution will attempt to copy it too. :P

Infobox Class Template

Infoboxes are seldom used on the Wiki. I discovered this when I was reviewing other Wikis' Template Categories. I find this puzzling because Infoboxes are an elegant and beautify way to summarize a Page.

The Wiki does have a Template called Infobox that's suppose to be the root of all other Infoboxes, but no one uses it because:
  • the Template has no documentation whatsoever, however ...
  • if through divine providence you were able to decipher what the Template does and want to edit it...
  • you are met with a scary label that reads "This page or template is used to hold the wiki together. Please do not edit it. "...
  • but not even if you summon the courage and are endowed with the technical knowhow, can you edit the Template because it's Protected

This did not discourage me from making an Infobox from scratch. Using the knowledge I've gained during my previous COSMOS Agent Infobox Template construction I was able to make an Infobox in record time. Let the Infobox Template remain Protected. I think mine looks much better. :P

InfoboxCSS Template

Speaking of looks, what controls the look and feel of the Infobox is the Cascading Style Sheet (CSS). I rarely worked with CSS before. Trying to beatify the Infobox table using a foreign style sheet language is hard enough. Now imagine wrestling with the intricacies of the Wiki syntax at the same time! :D Some of the horrifyingly difficult features to implement are:
  • color gradients
  • text alignment
  • splitting text in two rows
  • table borders
  • style override and overlap

In order to harmonize the look and feel of my Infoboxes, both current and future, I decided to put Infobox CSS for both current Infobox Templates into the same CSS Template. This way, all Infoboxes will be styled in the same way, but you will be able to override the default look and feel by referencing unique identifiers embedded in each Infobox.

ClassNav Template

Besides beauty, my main concern and first suggestion to Mike was to construct a Navigation Box. It would connects all the Classes with each other and each of them to the main Classes Page.

I've decided to use the Navigation Box rather then the more frequently used Sidebar Navigation Template because the top-right corner of each Class page was already occupied by the Infobox. It's suggested that long lists of verbose links be placed in a horizontal Navigation Box rather then a vertical Sidebar.

Class reach out Template

It's a banner that invites capsuleers to become Teachers. Huzzah! :)

Gathering Feedback

Immediately after drawing the diagram I asked for feedback. I asked for feedback on five separate occasions, at each iteration, at each crossroads. Remember, the idea is for these Templates to be used by the Teachers, not by Wiki Curators. Therefor, it's important to ask for feedback, not just from YooJin Moon and Mike Kingswell, but the rest of the Teachers as well.

Special thanks to:
  • Anidien Dallacort for your feedback on the Navigation Template design
  • Fonggar Akiga for your feedback on the Page design and architecture
  • Gryff Jones for your feedback on the image size and fresh student perspective
  • Mike Kingswell and YooJin Moon for enduring a four hour Discord Template demo session as well as "The Architect" title (Jace, Architect of Thought is my favorite Planeswalker!) :D

Gryff said that a differently sized Infobox image would be more appropriate. I asked them to play around with the Template and to tell me which resolution works the best for them. They had problems using the Template, so I said:
Gryff, you should not be prevented from joining in because of technical difficulties. You are a Teacher executing the Mission Statement of the University :) I'm making this for you, not for myself :) Therefor, I've created a Viewing Gallery for your pleasure :) Which size works the best for you? :)
Leave no feedback giver behind! :)

Successive Refinement

Design is a vicious problem. The probability I'll get everything right on the first try is zero. However I can prepare for implementing the inevitable changes by:
  • asking for feedback often and early
  • making Templates simple, small and readable
  • testing the Templates in a Sandbox
  • investing at least half the resources into research and design

Here are just a few changes I had to implement:
  • remove the "author" entry from the Infobox - my original intention was to push the Teachers into the foreground, to put faces to their work rather then have them all represented by a nameless Teaching Department. Individuals matter. Unfortunately, this caused friction rather then celebration. Therefor, YooJin requested that I remove the entry. I remove it with a single edit and had it propagate to all forty Infoboxes. Hurray for Templates and Sectional Transclusion! :)
  • Infobox hyperlink color is too close to its background color - a tricky one. They are both orange-yellow. Do I change the background or the hyperlink color? I changed the background color because everyone expects links to be yellow-orange. If I did my job right, you'll never notice the difference. :)
  • rename CORE Classes Page to Classes - will the links break? Thanks to Templates, Redirects and modular design, everything will be preserved.
  • add another row to the Navigation Box Template - easy peasy lemon squeezy! :) Edit and the changes will propagate automatically to all existing Class Pages! :)
  • change the Class Templates to accommodate Additional Classes - that one was tricky. In the end I decided not to make another Template for Additional Classes, but to make a series of manual edits to every single Page. Painful, but worth it. :)

Summary
  • Used Sectional and regular Transclusion and Substitution
  • 8 Templates constructed and documented
  • 21 Class Pages beatified
  • 1000+ edits made
  • 300+ changes propagated
  • REDACTED hours invested (I better not count! :D)
  • 10 weeks in the making
  • 8 hours of meetings
  • 5 rounds of feedback and iteration
  • 6 alternative designs rejected
  • 15 000+ character Report :P

When you use the Class Template to create a Page for your Class, just concentrate on making an awesome Class. Leave everything else to the Templates :) If you need to know what happens every time you use the Class Template, here it is:
  • body is injected into the Page
  • the Table of Content is removed
  • Infobox is populated with data and formatted
  • the Infobox is marked for Sectional Transclusion
  • the Page is categorized
  • Navigation Box is populated with links and formatted
  • Teaching Department's banner is hoisted :)

What a long strange trip its been :)

If you have an idea on how to improve the Wiki and need assistance, feel free to contact me through EVE email, Forum or Discord. :)
User avatar
Jilokari Kurvora
Chief Executive Officer
Chief Executive Officer
Posts: 1377
Joined: 2014.11.14 21:13
Title: CEO, The Architect, 24/7 Mental
Location: Scotland

Re: Constructing the Classes and their Templates

Post by Jilokari Kurvora »

An excellent piece of work on the wiki Arin. With the end result being Simple, Clear and Concise. Thank you for all the effort you have put in to this, it’s not going unnoticed. :)
CEO of EVE University
He/Him
Victyrael > Jilokari Kurvora: the choice of lighting is inspired as it neatly highlights both your avatar and the background without being obnoxious. Your pose artistically emulates someone popping into the office to check if anyone would like a coffee - this nicely highlights the intention to employ a 'serve to lead' mentality. The wardrobe choices are inspired; like the Top Gun franchise crashed into a prostate exam instructional video. 9.7/10.
ImageImageImageImageImageImage
ImageImageImageImage
User avatar
Mike Kingswell
Teaching Manager
Teaching Manager
Posts: 680
Joined: 2018.05.02 18:19

Re: Constructing the Classes and their Templates

Post by Mike Kingswell »

Still don't understand half of it, love it though :D
Teaching Manager
Image Image Image Image
User avatar
Arin Mara
Member
Member
Posts: 286
Joined: 2020.07.10 13:53

Re: Constructing the Classes and their Templates

Post by Arin Mara »

Aaaaaw, thank you guys! :) :) :)

May our Wiki continue to be the Alexandrian Lighthouse of New Eden! :)
Post Reply