One of the things that isn’t mentioned in any of the training manuals that I’ve gone through is a “rock and a hard place” problem concerning experience with page layout programs. I started out with Aldus Pagemaker back in the 1980’s when it jumped from the Mac to the PC. Word processors (like Microsoft Word) came on to the scene and rapidly took on the characteristics of professional WYSIWYG page layout programs. Had I gone more in depth with the DOS version of Wordperfect, I may not have the difficulties I’m experiencing today with XHTML and CSS. Why? Because stylesheets and tags are more akin to the codes that PC veterans used in Wordstar and Wordperfect.

As more sophisticated page layout programs came out, text flow was directly manipulated on the screen. Images were dragged and dropped, fonts, leading and spacing were adjusted on the fly. Not so with web design. The esthetics of page layout are still there, but it’s turned inside out. Code drives the layout. Want to drop a picture into paragraph? A word processor allows you to drag it into position, and adjust the way the text flows around it. Web design demands that you wrap it in a div, float it, and assign CSS statements to it, each with its own attributes. The paradigm shift is like learning how to write with your left hand, when you’re a righty.

As web developers, we’re feeding browsers. There’s a completely different mindset. In the “Head First” series of training manuals (O’Reilly), there are some exceptional sections on “Be the Browser”. This, in effect, is core of it all. You need to “Be the Browser” as you put together code. This ain’t your dad’s wordprocessor.

The comments.php file saw a lot of slicing and dicing late last week and over the weekend. I expanded on the get_avatar discovery, and started delving into additional formatting. The gravatar first appeared on the right of the comment post, but appeared too isolated. I then floated it left, adjust margins, and came up with the tight look that I wanted. My template comes with code that allows you to alternate comment backgrounds by changing the class name with every comment. I disabled this, so my class remained constant as “graybox”. I then applied a CSS rule that put a nice border around the comment. Simple stuff for some, but major milestones for me.

It dawned on me that PHP can actually build code, and that a good way to tweak Wordpress templates is not only to analyze the PHP code, but to view the HTML code that is generated. This is particularly useful in tying in CSS for formatting. Classes and IDs that are not immediately apparent in PHP show up in the resultant HTML code.

Another thing that dawned on me is that the web developer toolbar for Firefox can (ironically enough) be used as a learning tool for web development. If you like something you see out there, it’s CSS, Images and View Source options allow you to reverse engineer what other people have accomplished in terms of formatting. It’s an excellent way to pick up tips and techniques.

After reading about Javascript last night, I moved a section of code out of my HTML, and called it instead. This dramatically uncluttered my webpage code.

I seriously have to find out how sections of code are posted on a blog with a grey background box behind them. Simply explaining what I’m doing lacks depth without examples.

An avatar is a computer user’s representation of himself/herself, and a new movie due out in 2009 by James Cameron. I couldn’t find much information on the movie, but thankfully, I was able to ferret out enough details about Wordpress internals to achieve a lifelong goal. I wanted to make my blog look Facebook-ish, by displaying my avatar with each of my posts.

The credit really goes to a blogger named Lyndi for information and code she supplied on http://nice2all.com/2009/07/22/wordpress-adding-gravatars-to-posts/. I’d display the 3 lines of code here, but it wouldn’t be pretty without a little CSS, so why embarrass myself so early in the day?

Surely enough, by placing it in the mysterious “loop” located in index.php, and after setting up an account on www.gravatar.com, my cropped mug magically appeared on the screen. A little more CSS work aligned both the picture and the comment text, and life was good. Lyndi also mentioned a file called single.php, however I couldn’t find this one in my template. That’s a research project for another day. Probably after I figure out how to get the gravatars of those kind enough to reply to my blog, next to their messages.

I’ve come to the conclusion that web development is a great hobby for the obsessive compulsive personality type.

I come from a database programming background, so I’m no stranger to the zero tolerance demands of code. But there’s a whole other dimension to working with XHTML. Just when you think it’s safe to go back into the water, there’s another tool available to show you how human and negligent you really are.

The masochist in me decided a while back to adopt XHTML 1.0 strict. I want to be cutting edge. I want to bleed on that edge. And I’m getting my wish.  Because yesterday, after proudly patting myself on the back for my recent website updates, the W3C Markup Validation Service cut me down to size. Turns out that I was missing some closing tags.  The _blank target is deprecated (this allowed another window to open up with content…and the alternative is now Java code), and there was a third minor thing that I have now blanked out due to mental trauma.

The service catches the mistakes, but you’ve got to interpret the results. In the old days, if you forgot an ENDCASE, not only would your code go AI on you, but source code formatters would go buggy as well, indenting your code into oblivion. Such is the case with W3C. It can list 12 errors (with that intimidating red banner at the top of the page), that all disappear with you place a </div> where it belongs.

And finally, there was the little issue of favicon.ico. I tried a plug in for Photoshop, and heeded the 16×16 pixel warning. Unfortunately, this didn’t work. What did work was a 32×32 favicon.ico, and furthermore it worked without any additional code in the <head> section. Testing is a bit of a pain because the browser cache tends to get in the way. For now, I just want to enjoy this little bit of extra “coolness” before I start to mess it up with competing images which may or may not work.

I remember reading somewhere that a fan of Stephen King met him at a book signing and said “I really wish I could write!” to which he responded “Then write!”  So I guess if you want to blog, you blog! And so begins my odyssey into the blogosphere.

I’m starting out with a template called Transparentia by a developer called arcsin http://templates.arcsin.se. It’s clean and simple, and matches my web page. The intent here is to create a seamless web page – blog page combination, and to follow some kind of best practices. For example, I’ve dispensed with tables, and for quite some time now have been ramping myself up on XTML/CSS. Of course now, I’ll have to get into PHP and God knows what else!

I’ve loaded XAMPP on my Vista machine (yes, I know, I’m using Vista…but we’ll talk about that some other time). It’s an Apache distribution which contains (among other things) MySQL and PHP www.apachefriends.org/en/xampp.html. So now, I’ve got a development platform on my local machine that will hopefully allow me to ferret out the mysteries of Wordpress. XAMPP has so far proven itself to be stable, and easy to use. With Wordpress loaded locally (accessed through http://localhost/wordpress/), the hope is that changes can be made progressively, tested, and then uploaded to my site.