Photo of Seemant

Seemant's Blog

Apr 19 2007

Building My Django Weblog: Part 4

Categories: , , Filed by: Seemant Kulleen
3 Comments Subscribe to this entry's comments RSS feed Subscribe to this entry's comments Atom feed

In one of my earliest blog posts, I wished my sister a happy birthday. Today is exactly two years since, so Happy Birthday to Sindhu :)

Edit: My sincerest apologies to all your feed readers -- my blog programming skills are not good enough, apparently, to keep drafts from getting published. I thought I'd fixed the problem this morning, before getting on the plane in San Jose to return Boston, but apparently not. I don't think I even fixed the feed, so I'm not entirely sure what it was I fixed. In any case, my humblest apologies to everyone for the inconvenience caused. I hope it doesn't put you off my blog. It definitely shows how much I have yet to learn.

I like to get my news from reddit usually. The nice thing about reddit is that there tends to be a variety of stories, and every so often you get a gem of an article about CSS. So, for example, you get a menu of css techniques, or you find out about Yahoo's javascript and CSS library--yui, and reading these open up possibilities. So, I've never delved into web-two-point-oh stuff yet. The last line of Javascript I ever wrote was probably a good 11 years ago (an image map).

So, when I found out about this YUI thing, I was quite excited about it and pored through the documentation. Then in #django, I heard about jQuery and the kinds of fun people are having with that. At around the same time, I got a great piece of advice -- again from James: first make the site functional, then worry about sexing it up with AJAX, etc. And that's the piece of advice about JS that I've taken to heart. This site is still being hacked on -- there are applications that I still need to write for it.

I'd love, for example, to have a photo gallery type application. I'm sort of vacillating between using the flickr API and writing a Django-based web application for this site. The latter is attractive to me from the point of view of learning about web development even more and dusting off more of my programming training. The former is appealing because it's a solution that pretty much exists already.

So, I haven't yet decided, is the bottom line. So, back to YUI: I read a bit about using YUI's resetting stylesheets. Essentially, there are three pieces to it. The goal of YUI's reset is to equalise all browsers so that every browser renders the base elements in a similar way. So, margins and padings are set to 0, lists become unstyled and unindented, and so on. Then you have YUI's fonts stylesheet, which essentially tries to set the same base font size for every browser. Furthermore, it reduces all special elements (h1, h2, bold/strong, em/italic) to that font size as well. Even more, elements like bold/strong become unstyled. I use both of those stylesheets, and if you have a look at my stylesheet, you'll notice that I have to manually set all those font sizes and styles my own self. In fact, there are probably elements I'm still missing, which I will fix as I see them.

The YUI grids stylesheet was something I wanted to use, but wound up ditching. The thing is, I wanted a fluid 3-column layout. And YUI's grids seemed like just the ticket. But then, at some point, it just got overly complex with the number of divs involved. I think that by the time I ended, I had the same type of div nested 3 deep, just with different id's and classes. The markup became too much for me to understand, and so I abandoned it. Instead, I went with a much simpler CSS template from the Layout Gala -- the three percentage columns layout. Or one of those layouts, anyway. I think they keep getting re-arranged, because initially it was number 30, now it looks like number 1 or 2. Anyway, that layout turned out to be a lot simpler to implement and understand.

Well, I also started reading about accessibility and web typography: I wanted my pages readable by text to speech readers, and I wanted them to look visually appealing to sighted readers. So rather than spend time on colour schems and the like, I decided to start with the basics of good typography. And in this area, there were two sites that were particularly instructive: Mark Boulton's series of blogs and of course, Web Typography. They are both tremendously instructive sites that give you a quick introduction to the principles of typography, and how they apply to web based publishing.

And so that, in turn, reaffirmed my choice of having a fluid three column layout. In the next few weeks, I'll be moving the navigation menu up to the top of the page so I can put contextual content along the sides: sub-menus, interesting links and the like.

Next episode: The look and feel of the site -- themes and logos -- all will be revealed.

Permanent Link
Subscribe to this entry's comments RSS feed Subscribe to this entry's comments Atom feed

3 Comments

France Comment by sebastien after 15 hours, 53 minutes

Don't worry about your feed. Your site is still attractive with its great content. I will not move away ;)

By the way, another link around YUI : YUI Extensions (comment system of DjangoBook came from this library)

Ho, and happy birthday to your sister.

PS: all apologizes for my poor English

United States Comment by cbmeeks after 3 weeks

I'm really liking your tutorial.

I am currently learning Python/Django myself and I also enjoyed the Gala link.

Great job!

~cbmeeks http://www.signaldev.com

United States Comment by Seemant Kulleen after 3 weeks, 2 days

Hi cbmeeks,

Thanks for the compliments :) I'm glad my articles are at least somewhat helpful!

Join the conversation