All of us have our daemons. They lurk behind the scenes, driving us, seducing us. Their powers may be fairly magical.
Article Continues Beneath
Within the Unix working system, for example, the numerous background duties that happen behind the scenes are managed by processes known as daemons. Following the Unix custom of holding the names of issues brief, a “d” is appended to the tip of the title of the duty that the daemon controls. Thus the daemon that controls the hypertext transport protocol (http) on Unix based mostly internet servers known as httpd. Equally, ftpd controls TCP/IP file switch.
As designers, I usually assume that we’ve a design daemon (designd) controlling our inventive impulses. When my designd goes to work, I can’t relaxation till I’ve carried out an thought to its conclusion. I discuss with this course of as “exorcising designd.”
My newest exorcism took the type of an experiment in separating content material from presentation, leading to a number of new designs for my private web site. Relatively than merely add a static redesign, I listened to my daemon, and the outcome was a sequence of user-customizable “skins” for my weblog. On this article, I’ll clarify how I did it, why I did it, and what it taught me about the way forward for the net.
Skins — the “newest in customization”#section2
Skins are nothing new. They’ve been round for a very long time on the Mac OS. One of many hallmarks of the Macintosh Working System has been its potential to be personalized — from customized icons to utilizing the shareware Kaleidoscope to customise the complete Consumer Interface. Apple even constructed the potential into their now defunct Themes. Home windows and Linux customers have additionally had the power to pores and skin their UI for a while. Mozilla has launched XUL (pronounced “zool”), permitting a excessive diploma of customization.
Software program from mp3 gamers to browsers and extra are providing this degree of customization to the diploma that it has turn out to be an essential promoting level for many individuals. Skins proliferate all through software program and working programs, so why not enable individuals to pores and skin the presentation of content material on the internet — or not less than on my weblog?
One of many first websites I got here throughout that allowed the person to alter the look was Cameron Barrett’s CamWorld. Jason Kottke used to have a number of variations of his web site as nicely. Daniel Bogan’s waferbaby means that you can create your personal stylesheet proper all the way down to the font, its measurement and shade. Contenu.nu’s NUblog has challenged its readership to create a stylesheet to “pores and skin their weblog.” This concept is nothing new, in reality it’s actually what the w3c would have us do (that’s: separate presentation from content material), if not in follow, not less than in idea.
So, after seeing these different websites I made a decision to embark by myself experiment, to see if I might create a web page or a web site that utterly separated the content material from the presentation. In so doing I wished to permit for max flexibility within the presentation, with out compromising the content material or the markup.
Kind versus operate or the separation of content material from presentation, nicely nearly…#section4
In a perfect world we might use CSS to explain the structure of the content material, leading to an entire separation of the 2. Sadly we will’t try this but. Since I wished the location to be viewable on model 4+ of the foremost browsers, I nonetheless want to make use of tables for structure.
So I analyzed my web site, a weblog. It’s actually quite simple. I’ve the principle content material on one facet, and an inventory of hyperlinks on the opposite. I exploit headings and textual content in addition to a number of small icons to indicate the sort of submit that follows or, for the hyperlinks, the class they fall beneath. In my fashion sheet I outlined a content material class and a hyperlinks class for desk information tags
Subsequent I went to work creating some new stylesheets to use. I needed to recreate the unique look to suit the brand new pondering. Then I created a stylesheet that was radically completely different. A 3rd stylesheet is completely different nonetheless. Within the course of I created the iCDK, or iBlog CSS Improvement Toolkit. This can be a CSS file that features all the tags and lessons I exploit in my weblog, able to be outlined.
I’m not likely a geek, I simply play one on the internet…#section5
As soon as I had outlined my fashion sheets, and restricted the html structure to a easy desk, I used to be able to attempt my experiment. I linked to a special stylesheet in my HTML file, leading to, wow, a radically completely different web page. However the content material was the identical. This was cool, I assumed. So I wished to offer a means for any guests to my weblog to expertise the identical factor.
Usually this could possibly be carried out with some server facet magic, to make the expertise comparatively seamless for the person. However I’m serving my weblog off of Apple’s homepage.mac.com servers, so I don’t have entry to the server facet of issues. I’ve to depend on the shopper. Time for some JavaScript.
I’m not a programmer, however I can giả it if I have to. I remembered that Porter Glendinning had written some JavaScript that might take a look at a URI and strip off a named anchor, if there was one within the string. I figured I might adapt this concept for my functions. If I might seize the title of a CSS file from the tip of an URI string, I might use doc.write to hyperlink to that stylesheet.
I received’t go into the gory particulars right here (however if you happen to actually need to know you possibly can learn the sidebar), however suffice it to say that I spent a few days poring over Netscape’s JavaScript reference web site, and discovered one thing about common expressions in JavaScript. If this
MyRe=/?(w*).css/g; MyArray = MyRe.exec(anchorString); anchor = RegExp.$1;
makes you all tingly inside, you then most likely don’t have to learn the sidebar, as I’m certain you might do what I’ve carried out way more elegantly and effectively. Apart from, the purpose of the train was to not flex my programming muscle tissue (although it was enjoyable to try this), however to take a single file and its content material, and current it in many various methods, all with a single mouse click on.
Occult calisthenics (or: Why all of the supernatural exorcise?)#section6
In my unique design I selected to place the content material on the left and the hyperlinks on the appropriate. This turned out to be design determination for a number of causes. Because the design is an easy two-column desk, it will likely be a easy matter to alter the code from <desk>
<div class=“content material”>and use CSS positioning for structure, as soon as it’s supported in all main browsers. Having the hyperlinks on the appropriate means much less mouse motion when going backwards and forwards between scrolling and clicking hyperlinks. Since we learn from left to proper, having the content material on the left makes it simpler to trace the textual content. With textual content browsers and voice studying software program for the blind, the content material is introduced first, adopted by the hyperlinks. And it breaks with the frequent follow of placing the hyperlinks on the left, making me seem arty and postmodern. And I sort of like that.
Past the position of content material, this little train has quite a few different advantages. In my actual job I’m an internet designer for a federally funded scientific group. Which means our website online have to be accessible. Whereas the Feds are nonetheless ironing out what meaning, I’m making an attempt to get a head begin on accessibility points and internet design. This experiment has helped me see that not solely is it potential to separate content material from presentation, it’s fascinating.
On this situation the content material is served individually from the stylesheet, so there is no such thing as a want for a blind particular person to obtain the stylesheet or its related pictures. Or, as voice browsers turn out to be extra subtle, a separate stylesheet that describes voice inflection may be created and served for these browsers, however the content material will stay the identical.
These people who find themselves nonetheless utilizing Lynx or different text-based browsers, older browsers, or browsing with a 14.4 modem and pictures turned off will nonetheless get the content material, and in an affordable format. In concept customers might create their very own stylesheet that would offer higher distinction, bigger fonts, even pictures of their very own selecting.
After which there are the choice shoppers — like PDAs and WAP enabled cell telephones. Most of those don’t assist stylesheets but, so that they get the textual content, and the pictures that add to the content material, however don’t have to hassle with the background pictures that present eye sweet.
Everyone wins. And I like that.