JustinLee.sg

I just borrowed this book, “Designing with Web Standards” by Jeffrey Zeldman, from the library today (just 2.5 hours ago actually). It was recommended by the guy who wrote “Creating Websites by Hand” in the previous post, “Some Website Tips“. Here’s his website. http://www.zeldman.com/dwws/

I’ve just started reading it, and it looks quite interesting, in terms of that it’s no ordinary “tutorial” book which teaches you everything, but more on coding design. It feels much like “Design Patterns” for websites.

So far, benefits of using CSS layout instead of table layout reduces your html code by more than half (wow… impressive), and because of that it improves the loading speed. The rest of the other benefits doesn’t really seem that much of a biggy thing to me, but I’m really more interested in how this way of coding will actually help in my creation of custom controls for ASP.Net.

A few things I must clarify with my previous post on “Some Website Tips“, for those who doesn’t know, those codes are actually for custom controls. Just to add on to what I mentioned earlier, if you write your own custom controls, you’ll end up having problems with your html close tags as it might have to exist in another file if you use the normal table layout concept. But if you use the CSS layout concept, meaning using &#60div&#62 to style your layout, basically you can close your tags within the same file. So your entire custom control can exist within a &#60div&#62 tag.

Now that’s what I call proper coding. For web development.

Upcoming events:

I’ll be going KL during this weekend (Saturday, 1 day) to attend the MIND meeting at the Twin Towers, so I might not be able to post on that day, but I’ll post some pictures on Sunday. I hope I survive the coach trip, 5 hours there and 5 hours back. *Groans*

Anyway, I’ve got to sleep soon, but I’ll leave you guys with a quote from Jeffrey Zeldman.

“Web Standards are a continuum, not a set of inflexible rules.” – by Jeffrey Zeldman

Creating Websites by Hand

http://www.osnews.com/story.php?news_id=8838

I feel stupid after reading this article, because I’ve always been coding websites and writing the layout using &#60tables&#62 and &#60tr&#62 and &#60td&#62, but this article (yes, I’m kind of outdated) teaches you how to use the modern XHTML way to do it. It teaches you the basic stuff of dividing your code into layout and data (or text, whatever way you want to see it). Layout being the CSS file, and data being your text you wanna show.

I’m not much of a web developer, but I’ve recently learnt quite alot about web development, especially using CSS (Cascading Style Sheet) extensively. But this article brings it to an entirely whole new level for me. I’m quite excited to try it out.

Anyway I’ve been working on the SgDotNet website for some time, from time to time updating it, and improving it. But using &#60div&#62 and CSS to completely disect your layout/style and data would be interesting to do, and I would love to try it out on the SgDotNet website.

Another thing I see this different way of coding your webpages would be dividing your webpage into sections, e.g. header, sidebar, menu, content. The thing about this, why I’m touching on, is because each section are enclosed in a &#60div&#62 and the styles are controlled by your css file. Furthermore, creating your templates would be much easier using ASP.Net, i.e. Masterpages, because currently I’m using tables and it’s quite the mess. Using &#60div&#62 tag to seperate it into different sections would be excellent in this case.

Oh btw, perfect masterpages framework to use. Grab it from MetaBuilders – MasterPages Templating Framework. It beats waiting for ASP.Net 2.0′s Masterpages.

Anyway, back to code.

e.g.

in the header.ascx file



&#60% @ Control Language="C#" %&#62

&#60!-- add your inline code --&#62

&#60div id="header"&#62

&#160&#60!-- add your content header --&#62

&#60/div&#62



instead of doing something like this (which is what i’m currently doing)



&#60% @ Control Language="C#" %&#62

&#60!-- add your inline code --&#62

&#60table&#62

&#160&#60tr&#62

&#160&#160&#60td&#62

&#160&#160&#60!-- add your content header --&#62

&#160&#160&#60/td&#62

&#160&#60/tr&#62



Ok. Did I mention my html sucks? Did you know HOW freaking difficult it was to type those code? Can anyone tell me how to write html code in blogger?! Life would be SO much easier because I’ll be writing LOTS of code here! Dang.

Anyway back to that example. Notice how bad the tables method was? Basically there wasn’t a close table tag, i.e. &#60/table&#62 which totally sucks because you’ll have to close it somewhere. And it screws up everything if you don’t know where to close it. Bad coding. In my sense at least. Using &#60div&#62 looks alot much better, well formatted, well structured, and it closes within the same control page. Perfect. Nothing to worry about closing tags.

Enough of my chattering. That was something I’d like to share with everyone. Hope you guys found it interesting. For those who are still stuck to tables, and do server-side web development, PLEASE take a look at this method. It’s much better and cleaner, and guarantees proper html structure, instead of putting your close tags in another file. And of course, the other benefit is that layout is seperated from data. Not quite an exciting feature for a developer like me.

P.S.

As you can see, I diverge and converge quite alot on my thought process, branching out to various other sub-topics and sometimes never coming back to the original topic, but bear with me, I’ll try to do better as I write more.