Shadowmaster’s Blog - Web design

Wesnoth.org and the Prosilver transition, Part II

nospam@example.com (shadowmaster) — Sun, 15 Aug 2010 05:46:28 +0000

After some hesitation, I have deployed Prosilver Special Edition on the Wesnoth.org forums, with multiple changes meant to make it more similar to mainline Prosilver in terms of layout. Wesnoth’s custom Prosilver changes have also been applied on our copy of Prosilver SE.

In fact, Prosilver SE as used in Wesnoth.org depends completely on the main Prosilver template rather than its own partial template set, and it also replaces the default Prosilver theme/stylesheets and imagesets, since otherwise very few people would choose to use it. Besides, OAB.

Of course, further changes are not unlikely to occur, depending both on the users’ feedback and my own testing experiences.

Wesnoth.org and the Prosilver transition

nospam@example.com (shadowmaster) — Fri, 13 Aug 2010 20:01:48 +0000

Most people who frequented phpBB 2 forums have met the Subsilver theme at some point. Wesnoth’s community is not the exception, and the phpBB 3 switch completed by cycholka/Mist in March 2008 during the third-to-last host migration involved switching everyone to Subsilver2, which is the last incarnation of the good old Subsilver. Most of us Wesnoth forumers have become accustomed to the cleanness, quirks and old-school feel of Subsilver2.

However, that will eventually change.

Maintaining patches for mods affecting the forum user and moderator front-ends involves editing three template sets, which are Prosilver (phpBB 3’s new built-in and default style), Subsilver2 and AcidTech, which is Subsilver2-based with some essential layout differences. There are even some mods that don’t provide MODX instructions for Subsilver2, since it’s not essential for approval in the official modifications database to include support for this style that’s most likely going to be dropped in future phpBB release series.

If you take a look at my Projects section you’ll also notice that I’ve needed to write a couple of Subsilver2 hacks in the past to add minor functionality that’s present in the official phpBB 3 “Olympus” forum theme by default. There’s a third custom change in my tree, corresponding to the Quick Reply editor toggle button.

Continue reading "Wesnoth.org and the Prosilver transition"

Dorset3

nospam@example.com (shadowmaster) — Sat, 27 Feb 2010 04:02:58 +0000

Almost two months after the completion of the “Dorset2” template, the website's appearance has changed again! This time it's “Dorset3”, with soft borders and shadows!

A couple of screenshots for comparison:

There's not much new besides the aforementioned (or is there?). IE 6 support was surprisingly easier to provide this time — except for a few template glitches in the blog which I haven't yet solved. Anyway, it's 2010 and you don't really want to use a 8-years old browser, do you?

umcreg

nospam@example.com (shadowmaster) — Sat, 30 Jan 2010 19:54:40 +0000

At last, umcreg, Wesnoth-UMC-Dev's Registry Service, is finished, deployed and announced in the forums, thus completing the first part of introducing the Registry system to the project.

There were some changes from its original incarnation, but everything turned out pretty well for a bot written from scratch in approximately 6 days by a Perl fanatic with no knowledge of object-oriented Perl — I actually learned some object-oriented Perl while at this and I feel like I can do anything with it now.

I was in a hurry to get this done right before freenode deployed ircd-seven today (yays!), for no particular reason; this resulted in a security feature not working with hyperion-ircd until I introduced a quickie hack that I'll be retiring later today.

We are using a private git repository for managing the source code, but since I wrote it with an open-source licensing model in mind as usual, here's umcreg version 0.1.1 for the curious, released under the terms of the GNU GPL version 3.

umcreg 0.1.1 (gzip tarball, 35.7 KiB; MD5 sum: 7877c82082d42c45d45f68647c223459)

I have already registered our current members using some basic, known information about them — even including their join date. Old projects' registration will be a little slow as I need to research the current structure of the repository, of which I lost track a year ago, and retrieve original timestamps. The registry's web interface, provided by the umcreg::Web and Thoria::Web packages, can be found here.

umcreg is already working at the project's admin channel on freenode too. It only obeys the project staff's orders, though, so there's no point in trying to send messages to it.

The next step in implementing the Registry model is writing the Statistics service, codenamed “Listra”, and most likely going to be named umcstat. That will definitively take much longer than umcreg's development. Meanwhile, Espreon is trying to convince me to take care of umcdist (codename “Blackmore”) first.

Dorset2

nospam@example.com (shadowmaster) — Thu, 21 Jan 2010 13:41:24 +0000

At last, the new layout is ready and deployed. Codename “Dorset2” was completed some days ago but I spent additional time figuring out ways to make a few parts work with Internet Explorer 5.5 and 6. Yes, I know those browsers are obsolete, but IE 6 is the last version that can be installed on Windows NT 4.0, Windows 98 and later (wikipedia) — yes, I know nobody should use anything older than Windows XP for Internet browsing nowadays, hush.

I also had to work around a couple of bugs in Mozilla Firefox 3.5, of all things. Webkit and KHTML-based browsers (Google Chrome understands some KHTML extensions for some odd reason) also displayed some quirks of their own.

Here's a few of screenshots that should display the overall differences between Dorset and Dorset2 (big files ahead!):

Naturally, this site is no longer very compatible with IE 5, 6 and 7 because it's using some CSS 2.1 characteristics that are not implemented correctly or at all by those versions. IE 8 works like a charm except for a minor problem with the pre element height rules — which I could fix with a small work-around if I cared enough — but there are also some CSS 3 techniques and/or vendor-specific extensions in use for round borders and text shadows. Nonetheless. I made sure that the site's functionality would not differ between IE 5, 6 and 7, so even if the appearance differs, nothing should work incorrectly.

VirtualBox was very helpful when testing all this stuff. It'd been very hard to run Debian lenny and squeeze at the same time otherwise!

Opera 10.00 showed problems handling multiple children elements with transparent background images. That's a real pity and I hope that newer versions don't have this problem.

The bottom-left corner is not round. There's a good reason for this, and I hope to fix it in the next iteration, some day. For now, Dorset2 is here to brighten and soften your day!

Dorset2 on the horizon

nospam@example.com (shadowmaster) — Sun, 17 Jan 2010 03:11:34 +0000

I have recently discovered that the color scheme and overall “look and feel” of an user interface, including web sites, can do a lot with my mood. Two days ago, someone on freenode.net's social channel (#defocus) linked to her blog, which has a black background — that's not bad or unusual, but I noticed that the dark scheme affected my mood making me feel slightly upset for a few minutes. I have no idea if this is just another quirk in my brain's functionality, or normal.

Nevertheless, it does sound like something I could use to my advantage, and to please my somewhat loyal reader (hi Espreon!).

Codename “Dorset2” has been a work in progress since last November. I had experimented with round shapes, box shadows and gradients, using CSS 2.1 and background image tricks, but I didn't get very far due to Dorset's inflexibility and design flaws at the PHP level; basically, I'd have had to edit every single page to adapt them to the new scheme, and that'd be boring and tedious. However, a few days ago, “Poison Ivy” was completed, enabling me to share the basic and simple functional code with three websites, or document sets, so to speak:

The Wesnoth-UMC-Dev website, (now codename “Kalari”);
This website (codename “Dorset”); and
Dorset2, not yet online.

Ivy's design allows me to simply “flip the switch” to convert every web page in my laptop's test Apache instance to use the new scheme, thanks to a extremely primitive, yet effective template and configuration system. A couple of lines of code:

define('DORSET2_ENABLED', TRUE);
define('SKEL_BASE_PATH', DORSET2_ENABLED ? '/dorset2' : '/dorset');

By toggling DORSET2_ENABLED, I can test my code with the old and new templates and stylesheets as necessary, without editing any of the actual pages!

I deployed “Poison Ivy” on the online site last night, so this is already theoretically possible in here... except that the Dorset2 files are not finished or online yet. I did resume my work on it some days ago after finishing Kalari, though.

If a dark scheme can have negative effects on my psyche, what could bright (but not too bright), soft colors and shapes do for me? Basically, Dorset2 aims for a relatively simplistic look, with soft shapes and colors using gradients and round corners for some elements. The color scheme is also slightly brighter than Dorset for some elements; but the shapes are what matters here. A box with round corners and no solid border makes the contents look soft to me; compare current Dorset which uses (way too many) rectangular boxes with solid and dark borders everywhere, inside and outside the main body.

Here's a (rather big) screenshot of Dorset2. Apologies for the admittedly awful rendering of Verdana Bold; that must be freetype's fault.

Dorset2 (PNG screenshot)

Since it's a work in progress, I have not gotten around to tweaking the CSS to make it work as best as it's possible with Internet Explorer. It doesn't look too bad at first glance, but it gets worse at the bottom (not pictured) thanks a gradient background trick that makes some text disappear at random in IE 6 SP 1 — and for whatever reason, this doesn't affect IE 5.5 or IE 6 SP 2 and later. I figured that I'll make my work easier for now if I write rules to disable certain decoration elements with these broken browsers.

Hopefully this gets finished soon.

Kalari at last

nospam@example.com (shadowmaster) — Tue, 12 Jan 2010 23:43:58 +0000

It took me much less time than I expected to put the new layout of the Wesnoth-UMC-Dev website together. Observe.

Okay, that's basically because most of the design was already made long time ago, in the form of the site's earlier incarnation, codenamed “Soradoc”, which looked rather busy and useless with the sidebar and other design elements. The new design, “Kalari”, removes the sidebar, clears the site banner a bit, and blends the site with Wesnoth.org as far as appearance is concerned. It's not the same design, but it's similar — that should be a good thing considering the purpose of Wesnoth-UMC-Dev.

That site also had a Blosxom-based blog, but I removed it since nobody was making actual use of the space.

The greatest thing about all this is that most of the PHP, “Poison Ivy” was finished in 1 night, while the rest took me just a few additional hours. Now that Poison Ivy is completed, I can reuse its code for the next incarnation of this very website and blog.

It's all for teaching some web design and programming basics to myself, really.

Sexy and poisonous

nospam@example.com (shadowmaster) — Tue, 12 Jan 2010 02:00:08 +0000

(No, not that one.)

There are many content management systems out but all of them seem to require some sort of database server and occasionally sacrifice flexibility in favor of ease of use.

This is why neither this site or Wesnoth-UMC-Dev's use one of those nifty software packages although they still use PHP. The latter website uses a bunch of ugly code codenamed “Soradoc” which has the actual XHTML layout embedded on it; the CSS stylesheet is also codenamed Soradoc and it's derived from “Glamdrol”, the Wesnoth.org wiki skin by Ettin; and “Dorset”, which is Soradoc's immediate ancestor, used on this very personal website — which in turn uses PHP code derived from the current incarnation of “Soradoc”.

Enter codename “Poison Ivy”, which is basically the same thing as Soradoc/Dorset, except written from scratch, much cleaner and more flexible; in particular, the XHTML layout and the site configuration are no longer part of the engine's source code which will allow me to share that among both websites more easily. It also introduces seamless support for document compression, which may be useful for my personal website.

Ivy is mostly finished, but I'm now busy reworking the Wesnoth-UMC-Dev site's design under a secret project, codename “Kalari”. Maybe once I'm finished with that, my next web project will be bringing umcreg (codename “Thoria”) to life.

(Okay, it's not a secret anymore. Dammit.)