Categories
Burningbird

Having one’s cake

Recovered from the Wayback Machine.

I’ve now mapped out a plan for moving forward on the organization of my site, including which tools to use, where and even some preliminary designs. I’ve also played around more with incorporating SVG into a site design, as well as trying out some of the newer CSS3 design attributes. I’m finding out that one can have one’s cake and eat it to.

For instance, you can use SVG for a site design, and the site doesn’t have to look either plain or ugly with IE–just different. If you’re comfortable with different, this isn’t a bad way to move forward with the more advanced browsers, such as Firefox/Gecko, Opera, and Safari/Webkit (the Big Three), while still accounting for a more primitive browser like IE.

Right now, today, at Realtech I have an experimental design up called “World War”, featuring both a photo from an air show, as well as three different SVG images. Only the photo shows with IE, but rather than have a completely white page, I added a background color and repeating background pattern, both of which are overlayed by the SVG ‘background’ image that the Big Three can see.

This is where it gets a little tricky. The SVG element supports both a width and a height attribute. If you specify the width and height in the element as SVG attributes, not in the CSS style attribute, Internet Explorer ignores both, which means the SVG element takes up no page space in IE.

However, the Big Three understand that width and height are supported attributes for SVG container elements, like the SVG element, itself. All three support the width and height setting directly in the SVG element. Not only that, but both Safari and Opera get a bit snitty if you don’t use these attributes and instead set the width and height using CSS, only.

The end result of this mechanization is that the Big Three see the SVG images and override the background image and background color. True, they still load the background image, but since it’s so tiny, it’s not a significant load on the server or client. Best of all: no conditional references have to be used, either in HTML, CSS, or JavaScript. If IE were ever to support SVG someday, the browser would then process the SVG just like the Big Three.

I continued this concept into using some CSS3 attributes. CSS 2.1 provides the meat of web page design, but CSS3 is the desert, and what’s a good meal without desert?

I use the rgba color function when setting the background color for both my sidebar and my article title bars. The rgba function takes four parameters: the three decimal values, in a range from 0 to 255, for the red, green, and blue channels, respectively, and a fourth representing the alpha channel. The alpha channel is what controls the transparency. Using the rgba function allows us to create semi-transparent backgrounds.

I could use a variation of opacity setting, including the CSS3 opacity attribute, as well as the older moz-opacity, filter, thing. However, the opacity settings effect the opacity of the element on which it is set and any child elements. Using the rgba function for the background-color creates a semi-transparent background for the element on which it is set, but has no impact on the child elements. (For more on opacity and rgba, see A brief introduction to Opacity and RGBA.)

What about a gracefully degrading design? For user agents that don’t support rgba, what I’ve found is that we can specify a background color using non-rgba functionality:

.sidebar
{

background-color: #fff;
background-color: rgba(255,255,255,0.8);
}

Either the agent will pick up the non-rgba background color, or it won’t pick up any background color at all. In the latter case, the behavior that the browser demonstrates is that it recognizes a supported CSS attribute (background-color), but not the value (rgba). Therefore it flushes the previously set background color, but doesn’t apply the new background color.

(I believe the former behavior is the correct, while the latter behavior is the incorrect. If you any input on this, please leave a note in comments.)

Combined, these two CSS background-color attribute settings result in the following: the sidebar and the inner panel background are both semi-transparent with Safari and Firefox, which support rgba; Opera doesn’t currently support rgba, but will pick up the earlier, solid white background-color; IE doesn’t pick up any background color, and both items are transparent.

Another CSS3 attribute I use that gracefully degrades is the new text-shadow attribute. With text-shadow, I can add shadow to text, such as the title in the page header. If the browser supports the text-shadow attribute, the shadow displays; otherwise, no shadow.

The text-shadow attribute takes four parameters: the color of the shadow, the x coordinate of the shadow as it relates to the original element; the y coordinate; the radius of the applied blur. I currently have the following text-shadow attribute setting on my main title:

text-shadow: #333 2px 2px 4px;

This CSS setting creates a dark gray shadow, offset 2 pixels to the right and bottom of my current text, with a blur radius of 4 pixels–a relatively soft shadow. The shadow shows with Opera and with Safari, though not with Firefox or IE. As long as no dependency is placed on the shadow (i.e. text the same color of the background, depending on the shadow to make the text show), the look degrades gracefully for browsers that don’t, currently, support text-shadow.

Best of all, when the text-shadow attribute is eventually supported by a browser, the shadow is displayed without any further intervention or modification of the page design. All you have to do to is accept that a page will look different in different browsers. Not “bad”, different. If you’re willing to live with “different”, you can have a lot of fun now with new design elements

Categories
Specs

XHTMLate WordPress comments

Recovered from the Wayback Machine.

I’ve pulled the plug-in. It cleaned out the comment text, but not the name, URL, and email of the person. The email isn’t an issue, as WP ensures the email is clean; the URL and the name, however, are still an issue. A new comment isn’t the problem; edited comments are.

Frankly, if you’re going to serve your pages up as XHTML, your best bet is to moderate comments so you can catch every variation of something that can go wrong. Either that, or get rid of comments, which is also an option.

I’ll post a new version, once I’ve checked those fields, and completed a few other odds and ends.

Categories
Semantics

And Nerds become queens: Yahoo and Smart searches

Recovered from the Wayback Machine.

Great idea on the part of Yahoo to begin incorporating semantic web information into its search open platform. How deep the semantics will go, and in how many directions is still TBA, but I’m please to see interest in microformat and more structured semantic data via RDF. I’ll be even more pleased when we start to see working examples.

Marshall Kirkpatrick believes that Google will follow suit. I just don’t see it. Google might embrace microformats, but the company has long pit its algorithms against human annotation of data, and the semantic web is based on some human annotation–even if the annotation is based, indirectly, on checking an option in a page.

My biggest concern about all of this is if we were to limit semantics to microformats. It’s with relief that I see that Yahoo is going beyond just microformats into the broader scope of the structured semantics based on RDF and its various serializations. Paul Miller also brings up other needed caveats:

The tools to create and embed that structure need to follow, of course. And issues that efforts like Dublin Core struggled with over a decade ago need to be thrashed out in some more detail, as the malicious, the malevolent, the careless and the mischievous rush to ‘game’ the rich structured data with which their web pages will soon be filled.

Putting pressure on the tool makers is essential, though probably not as essential as it once was because most tools provide a plug-in infrastructure that enables expansion. Still, there’s a lot more that tools can do, which is one reason why I’ve been so interested in Drupal: this tools is definitely ahead of this curve.

What’s key to all of this is showing people what they can get if they go that little extra step. I read people who write reviews on books. If we start showing more intelligent search results based on adding a little additional information to their writings that reflect that the work is a book review of a certain book by a certain author, etc., they will, most likely, be willing to spend a little time adding this additional information.

Someday when I’m looking for a new book to download from the web, I’ll be able to pull up a browser in my Kindle ebook reader and see all the reviews written about this book, online. Everywhere. We are so close to making this work, and I’m not normally the type to to tap dance every time someone comes along, breathing the words “semantic web”, through lips moist with anticipation.

Yahoo should have received a hostile takeover bid a long time ago. Lately, the company has been galvanized.

Categories
Technology Weblogging

Upgrading to WordPress 2.5: First, install Drupal

Recovered from the Wayback Machine.

Anil Dash had a clever and humorous, as well as telling, guide titled, A WordPress 2.5 Upgrade Guide. His advice?

As you might know, WordPress 2.5 is about to be released, and we wanted to encourage WordPress users to upgrade. To Movable Type.

I wasn’t even aware that a 2.5 upgrade was on the horizon until I read Anil’s posting. Why on earth do the WordPress people embed a link to the WordPress weblog in the Dashboard if they don’t use it to give people a head’s up? Especially since I gather this upgrade is making some major modifications. Modifications that will probably trash some of the changes I’ve made to XHTMLate WordPress. I am now faced with a decision: do I upgrade to 2.5, and continue to XHTMLate? Or move to Drupal? Or increase my pain, and use both?

Moving to another tool sounds about as much fun as having dental implants. However, now is the time to make this movie if you’re considering it. Though using minor version numbering, from what I can gleam, WP 2.5 is a major upgrade.

For me, the logical move is to Drupal. The tool has just come out with a major new version, which means I don’t have to go through major upgrade blues for a long time. I’ve written in the past about the tool’s support for both SVG and RDF, as noted in the keynote at DrupalCon (thanks, James!). And now Laura Scott writes on the number of women involved with the Drupal development, which I did not know about. Probably because of problems with visibility of women associated with open source, generally. According to Laura:

Part of the problem lies not in macho coding culture, but rather in the woeful state of computer and software education in our schools. Most of the people involved in open source are there in spite of their formal educations (or lack thereof). Computer work is pretty much taught only in Computer Science departments, which usually are subsets of Mathematics departments. Despite the fact that nearly every student will be working with computers in whatever field they enter, they likely will never have even one class where they study any sort of computer science or algorithm theory.

…

Is it any wonder that women especially are not likely to end up in an open source software community? As I noted before, the leading women involved with Drupal came to it from other vocations and educational backgrounds.

I’m not surprised about women coming in from other vocations. I’ve long thought the problem with the Computer Science degree programs in college is that there are Computer Science degree programs in college. I was pleasantly surprised, though, about the significant women’s involvement in Drupal. This involvement becomes yet another reason to make a move to Drupal.

All appreciation to Laura for her kind words about yours truly, I doubt I’ll have any visible impact on the growth of Drupal, and Matt at WordPress will attest to the fact that I can be a real pain-in-the-butt to have as a user. To be honest, I think Drupal, itself, with its forward moves into semantics and SVG and related technologies, and the community around Drupal are what will have a positive impact on the growth of this tool. Enough to be a threat to WordPress? That’s a silly way of looking at it, because there’s plenty of business for WordPress AND Drupal, and yes, even Anil’s Movable Type. Everybody has different needs.

But, oh, I hate having to go through yet another tool switch.

Manilla->Radio->Blogger->MT->Wordpress->Drupal.

In the meantime, if you are a WordPress user, heads up, as change is coming at you. And if you see strange happenings around here…well, come to think of it, you always see strange things happening around my web sites, so, never mind.

Categories
SVG

ACIDBird

Recovered from the Wayback Machine.

Today’s design is based on the Open Road SVG image that was just uploaded. This SVG image is ideal for a background, because it lends itself to morphing. It’s also a horizontal image, which works better for a background image.

The image is adding into the page in such a way that it expands to fill the page, regardless of how small or large the browser window is. It is resolution independent. I use two SVG attributes to manage how the images show in my sites, both set on the SVG element, itself.

The first SVG attribute I set is viewBox. The viewBox attribute is a way of capturing a specific section of the SVG image, and using this captured section to fill a given viewport. For instance, if the image naturally sizes to 400 pixels wide, 200 pixels tall, setting a viewBox to 0 0 400 200 is equivalent to how the image would fill the viewport by default without a viewBox. If you use different settings, say 50 20 350 150, then you’re modifying the viewport for the image, setting the beginning x at 50, beginning y at 20, the width at 350 and the height at 150. Since, by default, x increases from left to right, y increases from top to bottom, setting the beginning x and y clips the upper and leftmost edges of the image. If the width and height is less than what the image’s true width and height is, this clips the bottom and rightmost section of the image. You can use any combination, including negative for min-x and min-y, but you can’t use negative values for the width and height. If you use a negative value for the min-x and min-y, it’s about the same as using a margin–it pushes the image over and down.

The viewBox I put on the Open Highway SVG is 50 50 600 400. I decided I didn’t like the sun showing, so I set a smaller width, clipping the image on the right. I didn’t like as much blue sky, and I liked having the road focused a little off-centered, to the right, so I set the min-y and min-x accordingly.

Now, if I used the SVG, as is, with my expanded background, what would happen is the browser engine would attempt to fill my space, but still maintain the image’s original aspect ratio. The image would expand to fill the width at a 100%, but to preserve the aspect ratio, the height wouldn’t be enough to fill the space. The image expands in both dimensions until one fills the space, and then stops expanding along the other dimension.

This can work sometimes, and sometimes it doesn’t work. In this case, it doesn’t work.

I use the second SVG attribute, preserveAspectRatio, set to a value of “none” to tell the browser engine not to preserve the aspect ratio. Then the image expands 100% along the width and height–stretching the image, true, but filling in the space. If you choose the right background, such as Open Road, which works rather well, it doesn’t matter the perspective, it works. There are also other settings for peserveAspectRatio, but I’ll play around with those another day, with another design.

My two other images are not the same as the background, as I’m not demonstrating the resolution independent nature of SVG today. I used a coffee cup for the top image, and a little car for the bottom, both of which I think complement the “open road” scheme. Both have the viewBox set, otherwise the SVG images would not resize to fit the container. Instead, I’d be stuck with scrollbars (more on scrollbars later). The coffee cup viewBox creates a viewport big enough for the entire image. The car’s height is clipped, so that the wheels line up directly on the bottom of the page.

I used the object element rather than inputting the SVG inline for today’s theme, as I wanted to record another couple of bugs with WebKit and Opera.

Webkit stretches the image, but it doesn’t draw the content over the SVG until I scroll down and back again. In addition, WebKit also adds a white background for the SVG, which is something we can’t seem to control. This can really ruin a nice effect, such as the top coffee mug, and the bottom car.

 

Opera doesn’t stretch it at all, and also persists in putting scrollbars on the objects. No matter what I do to try and control the object overflow, the scrollbars get added.

I’ve turned in bug reports for WebKit about the drawing problem and the white background. I’ve also noted problems with pages for Opera, but I’m going to make sure formal bugs are entered for the gradient problem with yesterday’s design, and the object scrollbars and inaccurate resizing with yesterday’s and today’s design.

The work on the themes does demonstrate another important issue. Something like ACID2 and ACID3 are handy ways of seeing if key web technologies are supported, but they’re not comprehensive. Firefox 3b3 scores less than Opera 9.5b and the WebKit nightly on ACID3, but it has better overall support for SVG; especially as integrated into a web page. If the browser makers focus too much on the Acid tests, they may miss the overall picture, which is ensuring that SVG works well in a web page. I have confidence, though, that my reported bugs will generate activity.

I won’t keep this design for long–or at least, I won’t use the object elements–because IE does not deal well with SVG loaded into an object elements that are supposed to be in the background, no matter what version of IE I use. The content is pushed down with IE7, and gone altogether with IE8. I’m getting this behavior even when using the Adobe SVG plug-in.

In the meantime, since Microsoft isn’t welcoming bug reports from the general public related to IE8, my only recourse is to remove the Adobe plug-in. Once the Adobe SVG plug-in was de-installed, then the page opened just fine in IE. Well, it’s in black and white, but legible.

updated

Bud didn’t like the clouds.

*poof*

Clouds gone.