Asphalt Roads

In the begining there was only your eyes and the option to inspect the source code of each web page. Then came Firefox (was called Firebird at the time but dropped that name since a DB had it before) and with FF we got plugins — add-ons that can enhance the browser to each one’s desires.

One of the handiest plugins is/was Web Developer Toolbar. With it you can inspect code, do real-time edition, check sizes, validate, outline divs, show names… Very convenient. Then came Firebug, a kind of web developer toolbar. It has the same set of basic features that WDT but they are much more «visual». You can see all the parameters you’ll need and then some.

For the time, and it was recently updated to version 1.04, it’s my favorite tool.

When you work on a css-based web design basically you just work your way from the content to the aesthetics of your site. This is easy to say but difficult to understand.

At MBoffin.com I found a really nice GIF animation of the whole process. It’s mesmerizing, I shouted “that’s the way it’s done” when I saw it for the first time. Enjoy.

A vector-based paint program? Yes, but this time it’s a web tool. Great.LiThA – Paint {Alpha}

Transparency in images is something graphical designers have enjoyed for years but HTML design lacked this feature. W3C have published some specifications for it, but in my experience it wasn’t usefult since it was on CSS3 and, to the extent of my knowledge, support for it on major browsers was quirky at least.I was wrong, at least Firefox, IE and Opera already support it in a somewhat usable way. It came into my attention following closely the develop of techniques such as Lightbox.js and its descendants that make a dark shade appear over your viewport, similar to the Dashboard function in the recent versions of MacOS.

Now I found this explanation-tutorial at Mandarin Design, it shows some nifty uses fot this opacity property. I’ll be testing it very soon.

I found this while googling for a DOM inspector replacement. This is a good compendium of web developer tools available in Firefox. Link.

Here’s the example.

First, different header pictures on each page. That’s an easy one. Just edit the img tag on each one. What I’ve still haven’t figured out is how to implement that on WordPress. Main page will be index.php but different sections will be made with the so-called “static pages” function. I think that’s the CMS part of WP in action, but how do I control the header images on each one independently? My first approach will be making a page template file (page.php) without header information. That way I could edit each one on the Manage area.
Second, a navigation menu made up with images and with hover changes. This is not as easy and thus, at the moment it’s not reacting to hover action. My first thought is to use Flash for it, but I’m sure there must be another way. I’ve already search list-a-matic for a similar example but couldn’t find any lists based on different images. It could be a sliding background image, but I can’t think of some way to expand an empty list item so it can be clickable. There must be an obvious solution but right now it escapes my head. My last resource would be to use javascript and DOM in a way similar to what Dreamweaver calls behaviours.

Last problem — h2 tag color different for each section. That could be solved with a template that doesn’t include those h2 tags but since they come from the WP’s loop it’s rather hard to mess with it.

Anyway, happy birthday to me.

All those things that were the headlines of the major blogs some months ago now are real with WordPress.com. The Write Post section has resizeable text-area, AJAX, WYSIWYG, a photo-uploading tool and little small details that really look nice.

There’s also a preview section that actually embeds your site’s stylesheet and shows you the content as any reader would see it.

In the Links section I can see the “disappearing-yellow yellow-fade” technique when a new link is added. Also when deleting a post.

This technique was pioneered by the folks at 37signals — yes, the Basecamp team.

For a more general technique, you could try FAT — Fade Anything Technique.

Good.