...

Well, as promised, I've written a tutorial about how I hacked this blog into having some more permenant pages. Also made a "Tutorials" page, in anticipation of the substantial number of tutorials which I am going to write and post on this blog. That's the plan, anyway.

Next thing to do would probably be my CV. That might take a little while. But not too long because I want to arrange to have a job lined up for when I leave university next year. We'll see how it goes.

Tutorials

Structured Website Hack for Blogger
This tutorial describes a way of adding to the default Blogger blog a structure that resembles a conventional website.

3ds Max Tutorial 001: Cubed
This is an introductory overview of modelling methods in Discreet 3d Studio Max.

3ds Max Tutorial 002: Give us a Hand
This is a demonstration of making materials in 3ds Max.

Post-Render Tutorial 001: Dull Renders? Use Bloom!
Easy Photoshop trick to add a little atmosphere to your renders.

Structured Website Hack for Blogger

Introduction
This tutorial describes a way of adding to the default Blogger blog a structure that resembles a conventional website. Technically, the methods described in this tutorial are very simple and involves nothing more than coding a few links with HTML. This tutorial is more of an exercise in the rearrangement of information for a particular purpose, using Blogger as an example. It is also a minor exploration of the possibilities and limits of Blogger.

The Blogger blog structure
The typical blog operates like a stream-of-consciousness narrative: entries to the blog are posted sequentially in chronological order, and every post has the same importance as every other post. The blog structure does not privilege any individual post over any other. Recent posts are listed on the main page, while older posts are stored sequentially in the archives. It is one story with one timeline. Below is a diagram describing this structure.


A typical website structure
When we consider website structures, we often encounter a hierarchal tree structure. At the top is the home page, which has links to a number of pages with more specific content on each. From each of these content pages, there may be more links to further sub-pages with even more specialised content. The tree structure is an effective way of organising substantial amounts of information by categorising the information into related groups. Below is a diagram describing this structure.


Problem
Personally, I do not wish to have a website entirely devoted to a continuous stream-of-consciousness rant. Although I am quite happy to rant occasionally, I can also think of other things to publish online which I would rather not disappear into the archives of a blog. For example, I am considering putting my Curriculum Vitae online. However, if I post my CV as a blog entry, and then I keep posting blog entries as usual, my CV will soon disappear into my archives and new visitors to my blog would not know about it unless they stumble across it in the archives. I can also think of other things to put online which I would rather have relatively permanent.

How, then, do I use Blogger (which is free) to publish permanent content like a conventional website, while still having a blog to rant in?


Solution
(This section involves HTML. For more information on HTML than you might want to know about, see http://www.w3.org/MarkUp/. Or alternatively, do an internet search for HTML tutorials. You might also like to consult the Blogger help at http://help.blogger.com/.)

Fortunately, Blogger blogs are fairly customisable if you know a little bit about HTML and web programming, and each post has a permanent URL and acts as an individual webpage. Most templates come with a sidebar that has a heading for links. The general assumption is that these would be links to other websites, but they can just as easily be links to individual posts of the same blog. Thus, we can co-opt or copy the links section into being an internal navigation.

Firstly, we need to create the pages that we wish to be permanent. This is as simple as making a posts with the appropriate titles and content for the pages. For example, I might post my CV as a blogger entry, and title it “My CV” or something similar. After the posts have been published, visit them and take a note of their URLs.

Next, we make the navigation. To do this, go to the Blogger Dashboard > Change blog settings > Template > Edit current, and scroll down to something that looks like . I began with the Minima template, and the section we are concerned with looked like this:



describes the title of the section, and I replaced “Links” with “Navigation”, although you may call it whatever you like.

describes the links. The "li" tag works with "ui" tag to put the links into a list, which I thought was good so I left them. The bit inside the quote marks after href= is the URL of the link, so copy the URL of one of your pages into this. The bit after that are the words that appear on the page, so probably put the title of the page here.

You can have as many lines of the code as you like, so make one for each of your links.

Last of all, get rid of the "MainOrArchivePage" tags, because you want the navigation to be on all pages.

As of the writing of this tutorial, my HTML looked like this:



Republish your blog, and you should have a navigation panel in your sidebar that directly links to specific important posts, though they really are more like pages. These pages are now permanent in the sense that they are always directly accessible from all your pages. If you ever want to change the content of these pages, you simply edit the posts.

Elaboration
The method described above only creates one level of content pages beyond the main page. Websites with substantial amounts of content can easily have many levels of sub-pages as categories are subdivided to make the information manageable. If, for example, I have a collection of tutorials, some of them are Blogger hacks, some of them are for photo editing, and some of them are for 3D modelling, how can I organise them? Because it is possible (and quite easy) to put links in posts, I would create a “Tutorials” post, which is in actuality a list of links to the individually posted tutorials. Then I would place a link to the “Tutorials” post in the navigation panel. That way, in order to find any particular tutorial from any page, a visitor would click on “Tutorials” in the navigation panel, click on the desired tutorial that comes up in the list, much the same way as one would navigate a website which was not a blog.

Conclusion
After doing the above, one would have a website that was simultaneously a blog and a conventional website. The blog continues to be a blog, with its continuous stream-of-consciousness postings, although occasionally there would be a post that seemed to want to be a permanent page (like a tutorial or a CV). On the sidebar is a navigation panel, and clicking into this would bypass all the interesting but inconsequential blog entries, taking the visitor into the content pages. Below are two diagrams describing this new arrangement. The first diagram shows the blog as primary and the content as secondary, and the second diagram shows the content as primary and the blog as secondary. Thus the same information can be conceptually arranged in more than one way, even though its physical arrangement is one and the same.



Simon Chun Kwan Chui
5/26/2006

Ghost of website past

Ok, I got my mug into the profile. Couldn't use the image I uploaded into Blogger for some unknown reason, so I resurrected my old Orcon website to host the image from there. Orcon used to do free web hosting for personal and non-profit sites, but they've stopped offering it. Think they had some trouble with inappropriate content. I heard that they're still willing to give free web hosting if you email them and ask them nicely. That's unconfirmed though.

A bit sad, looking at my old page. Smart enough kid to figure out how to make a webpage, brave enough to publish stuff like that to the world, and immature enough to discontinue the thing after three days. And, to be honest, I didn't really have anything useful to say, at that stage. Oh well.

I've put a link to it on the "links" page, just because there's not much here to look at yet, so maybe you can look at me from three years ago.

...

Um, I'm having a hard time trying to get my mugshot into my profile. Says the image needs to be jpg or gif. The image IS a jpg.

Might come back and try again later. Wasted enough time for one morning.

Check me out

Arrgh! What the hell's that?

Oh wait, that's my face.

That's better

Alright! Put up a quick "links" page. I'll probably find more links to add later.

Hacked the Template code to change the font and colours to something more to my liking. Wonder if I could have found some web design software to help me with the CSS stuff. Might try that out later.

Anyway, I guess I'm happy enough with the look of the blog now. Those previous colours were really cold and harsh. If you want to see what they were:

Yeeee.... "Hi. I am Bland, and I want to hurt your eyes with glare." Actually, I shouldn't say that, because I was the one who chose that template in the first place.

Links

MAKE Architecture
A bunch of us architecture students getting together and making clever stuff.

Modos 2006
Project website for a finished side-project I was helping out with at the Architecture School. I cobbled that site together using Microsoft Word, of all things. For that, it's not bad.

http://www.simonchui.orcon.net.nz/
This is my old website from back in 2003. Built it with Dreamweaver. It's kinda sad: two entries on the news page. Unfulfilled promises. To be honest though, I didn't have much to say back then.

Wikipedia
This thing has potential. Well, it's actually a very good encyclopaedia as it is, but the idea of it has much greater potential. Free knowledge.

Sourceforge
Open source software. It's surprising how much good stuff is free, and how much of the stuff you pay for is actually really bad.

Blender
Professional open source 3D modelling, animation, rendering, post-production, AND interactive content creation. The Windows build weighs in at a tiny 14.8 megs installed. Amazing.

...

Hey check it out, I hacked a "Navigation" panel to the sidebar on my blog. Allows me to turn some of my posts into more permanent pages. I've got a Copyleft Notice up, for starters. Yes, that's for real.

Thinking I'll make a "Links" page and axe the one on the sidebar, 'cause I'll probably end up with a pretty huge list of links. Probably do a "CV" page for a bit of shameless self promotion. And probabaly a bit of a "Tutorials" page teaching people how to hack their free blog into something they might otherwise pay for (hahaha. big up's to Google and Pyra).

I'm sure I'll think of plenty more things to do, but right now I'm at University and I'm actually supposed to be doing some real work, as opposed to fun stuff like this.

Right. Bye.

Copyleft Notice

I, Simon Chun Kwan Chui, hereby release the work which is created by me and is published on this blog into the public domain, unless explicitly stated otherwise. This applies worldwide.

In the case where this is not legally possible:

I grant anyone the right to use the work which is created by me and is published on this blog for any purpose, without any conditions, unless such conditions are required by law, unless explicitly stated otherwise.


(Which basically means you can do whatever you like with this stuff, except to claim ownership or authorship of it. Keep in mind that this doesn't apply to stuff on this blog which isn't created by me.)

Ah, new blog smell.

Well, there's nothing here yet, so I'm sorry you've spent the time finding your way to this corner of the Web.

If it's worth anything to you, I've decided that I don't like any of these Blogger templates, and I will proceed to make my own as soon as I've figured out how. It seems like all they expect us to want to do is rant.

Rant rant rant rant rant. No, I'm sure I can be more useful than that.

Ok, that's enough.