Categories
Standards SVG XHTML/HTML

Microsoft: Fish, or cut bait

Recovered from the Wayback Machine.

Sam Ruby quotes a comment Microsoft’s Chris Wilson made in another weblog post:

I want to jam standards support into (this and future versions of) Internet Explorer. If a shiv is the only pragmatic tool I can use to do so, shouldn’t I be using it?

Sam responded with an SVG workaround, created using Silverlight–an interesting idea, though imperfect. Emulating one technology/specification using another only works when the two are comparable, and Silverlight and SVG are not comparable. When one specification is proprietary, the other open, there can be no comparison.

There was one sentence of Sam’s that really stood out for me:

You see, I believe that Microsoft’s strategy is sound. Stallstallstall, and generate demanddemanddemand.

Stall, stall, stall, and generate demand, demand, demand. Stalling on standards, creating more demand for proprietary specifications, like Silverlight. Seeing this, how can we be asked to accept, once more, a Microsoft solution and promises that the company will, eventually, deliver standards compliance? An ACID2 picture is not enough. We want the real thing.

Jeffrey Zeldman joins with others in support for the new IE8 meta tag, based on the belief that if Microsoft delivers a standards-based browser with IE8, and companies adopt this browser for internal use, intranets that have been developed specifically to compensate for IE shortcomings will break, and Microsoft will be held liable. According to statements he’s made in comments, heads will roll in Microsoft and standards abandoned forever:

…the many developers who don’t understand or care about web standards, and who only test their CSS and scripts in the latest version of IE, won’t opt in, so their stuff will render in IE8 the same way it rendered in IE7.

That sounds bad, but it’s actually good, because it means that their “IE7-tested” sites won’t “break” in IE8. Therefore their clients won’t scream. Therefore Microsoft won’t be inundated with complaints which, in the hands of the wrong director of marketing, could lead to the firing of standards-oriented browser engineers on the IE team. The wholesale firing of standards-oriented developers would jerk IE off the web standards path just when it has achieved sure footing. And if IE were to abandon standards, accessible, standards-compliant design would no longer have a chance. Standards only work when all browsers support them. That IE has the largest market share simply heightens the stakes.

From this we can infer that rather than Pauline, the evil villain (marketing) has standards tied to the railroad tracks and the locomotive is looming on the horizon. If we ride to the rescue of this damsel in distress, though, what happens in the next version of IE? Or moving beyond the browser, the next version of any new product that Microsoft puts out that is supposedly ‘open’ or ‘standards-based’? Will we, again, be faced with the specter that if we rock the boat, those who support standards in Microsoft will face the axe, as standards, themselves, face the tracks? There’s an ugly word for this type of situation. I don’t think it’s in Microsoft’s best interest if we start using this word, but we will if given no other choice.

If Microsoft really wants to make the next version of IE8 work–both for its corporate clients and with the rest of us–in my opinion it needs to do two things.

The first is accept the HTML5 DOCTYPE, as a declaration of intention for full standards compliance. Not just support the DOCTYPE, though. Microsoft has to return to the HTML5/XHTML5 work group and participate in the development of the new standard.

The next step is, to me, the most critical Microsoft can take: support application/xhtml+xml. In other words, XHTML. XHTML 1.1 has been a released standard for seven years. It’s been implemented by Firefox, Safari, and Opera, and a host of other user agents. There is no good reason for Microsoft not to support this specification. More importantly, support for XHTML can also be used as a declaration of intentions, in place of the IE8 meta tag.

This is Microsoft meeting us half-way. It gives a little, we give a little. Microsoft can still protect it’s corporate client intranets, while we continue to protect the future of standards. Not only protect, but begin to advance, because the next specification Microsoft must meet will be support for SVG. Perhaps it can use Silverlight as the engine implementing SVG, as Sam has demonstrated. However, if the company does, it must make this support part of the browser–I’m done with the days of plug-ins just to get a browser to support a five year old standard.

Microsoft is asking us to declare our intentions, it’s only fair we ask the same of it. If Microsoft won’t meet us half-way–if the company releases IE8 without support for the HTML5 DOCTYPE or XHTML, and without at least some guarantee as to when we’ll see SVG in IE–then we’ll have our answer. It may not be the answer we want, but it will be the answer we need.

I would rather find out now than some future time that Microsoft’s support for standards is in name, only. At the least, we’ll know, and there will be an end to the stalling.

Categories
Graphics/CSS SVG

Experiments: SVG Clock

I thought I would go into some detail on some of the experiments I’ve been trying out on the site, starting with the SVG clock in the sidebar.

A major advantage of SVG is that you can actually see how something is created. Try that with a Flash file.

The SVG clock in the sidebar is an adaption of a very simple SVG clock created by Jason Davis. I modified it by creating specific second tick actions, and then altering the appearance. I also added code so that it would reflect my time, not yours. I figured you had your computer clock and didn’t need me repeating it.

The clock is LGPL so you can copy the SVG file directly into your own space, set the width of the container, and even alter the coloring if you wish. I’m using linear gradients to create a clock highlight, interior shadow, and silvery frame. I also added a Gaussian blur as shadow, but this only shows up in Firefox 3, Opera, and Safari.

The function to change to your time zone is:

setInterval("setClock(calcTime(-6))", 1000);

The value to change is “-6”, which states that my timezone is currently 6 hours behind GMT.

It’s just a frill, true, but after seeing some of the crap I’ve seen in sidebars, you could do worse. It takes up less CPU than most animated ads, and requires no external load times. From a browser performance perspective, Safari requires less CPU to run the clock than Firefox or Opera. If you load the clock directly, it will be quite large, but will also eat up considerable CPU. Leave it up for a while and I guarantee your computer’s fan will come on.

Is the clock worth the extra burden on the client’s machine? Yes, and no. As a demonstration of what you can do with SVG and simple animation, I think it’s a valuable tool. There is a Catch 22 about SVG: we don’t use SVG because browser support is incomplete or inefficient; effort to better incorporate SVG is of secondary importance because SVG is little used. The only way to break this cycle is to actually start using the specification, and pushing a bit at the edges while we go about it.

As for the contents of the clock, how much do your web page readers really care about what time is it where you’re at? I would have thought probably not a whole lot, but I find that I’m not particularly good at understanding what particular bits of minutia interest people. I’m told people want to know you bought chewing gum–the brand, the flavor, the date and time when purchased. What time it is where you live must seem monstrously important in comparison.

Categories
SVG

Comments line graph

I had promised a WordPress pluggable version of the comments line graph and here it is. The line graph application is in two pieces: one to place in your theme directory and include in your page template; and a plug-in that will create the cached comment count file.

File one is graphcomments.php, which is installed in your theme. You’ll include the following in your web page template where you want the graph positioned:

<object style="width: 810px" data="/wp/theme/graphcomments.php" type="image/svg+xml" ></object>

Change the location for your environment. The element needs to be styled to fit the preferred width. The number of comments remains the same, but the graph resizes based on this width. The following is the same graph, but the containing element is set to 500 pixels wide.

[object removed]

In addition, the graphcomments.php has a style section with three values that you can change: line width (stroke-width), color (stroke), and opacity (stroke-opacity, a value between 0 and 1, with 0 being transparent, 1 being fully opaque).

The second piece is the plug-in, store_comments.php, which needs to be added to your plug-in directory. Both of the files require access to a single file, called comments.csv. This is a file that must be writable by the world, stored wherever you want. You can make it by creating an empty text file, and then use “chmod 766” to make it writable. If you don’t make this file, the application will attempt to create the file, which means the whole directory has to be world writable.

Both store_comments.php and graphcomments.php have a constant, FILENAME, which needs to be altered to fit the location of where the comments.csv file is stored.

How the comment graph line works is that whenever a new comment is saved, the comments.csv is updated to reflect the comment counts from the most recent 100 posts. The application that generates the SVG reads this file for the comma-separated values, and then creates the line graph.

At this time, the comments line graph is restricted to 100 comments or less, so, be forewarned if you get those 130+ comment days, the peak will be truncated.

The graphcomments.php application can be used on any data that is located in the file, each value separated by a comma. You can use it for category counts, unique visitor counts, anything that has simple totals over time.

Version 1.0 beta:

graphcomments.php store_comments.php

Steps:

  • Click the links and save the files, changing the extension to php from phps.
  • Place the graphcomments.php in your theme.
  • Place the store_comments.php in your plug-ins directory.
  • Create an empty text file named comments.csv, and place it in a directory. The directory does not have to be web accessible.
  • Change the file permissions to world writable, chmod 766.
  • Change the FILENAME value in both graphcomments.php and store_comments.php to the location of comments.csv file.
  • Add the line graph object element, example given above, to wherever your want the line graph to display.
  • Style the object element and the line graph.

The line graph is created using SVG. You don’t have to serve your pages as XHTML when you include SVG via an object element, as this application does. The line graph should work in IE if the person has the Adobe SVG plug-in installed, but no promises. Or you can set a container DIV element in which the object is installed to not display for IE. Check my header to see how to create IE specific style sheets.

I tried to center the line graph so that the tips aren’t truncated until after the 100 comment mark. There is white space at the top and bottom, but using negative margins for the top and bottom should eliminate most of it.

NOTE:

Safari fills in the background with white, by default, for the object container. I’m exploring how to change this, but I don’t expect to have a lot of luck. It looks like this behavior is a bug (or as planned, but not wanted). Feel free to use, but the graph won’t have a transparent background like the graph in my header, which is inline SVG. Of course, you can also copy my inline SVG, but then you’ll have to serve your pages as XHTML.

Categories
Standards SVG XHTML/HTML

Even the mistakes are fun

Anne Van Kesteren:

A new survey reveals that at least Microsoft and IBM think the HTML charter does not cover the canvas element.

I have to wonder, when reading the survey results, how much the people who voted actually used either SVG or the Canvas element. I covered both SVG and the Canvas Element in the book, but I focused more on SVG. Comparing the two–SVG and Canvas–is like comparing the old FONT element with CSS.

The Canvas element requires scripting. The SVG element doesn’t, even for animation if you use the animate elements. In addition, mistakes in SVG can be fun, as I found when I missed a parameter value in mistaken animation. A couple lines of markup. No script. Both Opera and Safari do an excellent job with the animation elements. I’m expecting Firefox to join this group in the next year.

If you use scripting, you can access each element in the SVG document as a separate element. You can’t do that with Canvas.

I still don’t think the Canvas element should be part of a new HTML 5, whatever the grand plans. However, since all but IE supports the Canvas element, it would be foolish to drop it. A better option would be to consider the Canvas element a bitmapped version of SVG and create a separate group to ensure it grows in a standard manner.

I did like what David Dailey wrote in the survey results:

I have considerable ambivalence about <canvas> as I have noted previously. If we were designing HTML 5 from the ground up , SVG and canvas ought to share syntax and ought not to duplicate so much functionality. <canvas> brings a few needed things with it, though it seems rather a bit of poor planning on the part of the advocates of <canvas> that has gotten us to this point. Those historically frustrated with W3C chose to ignore SVG and now seem to want W3C to ignore SVG in favor of a lesser technology. At the same time, <canvas> does enable client-side image analysis by giving the developer access to pixel values, and that alone allows for some tolerance of what otherwise seems to be a curious decoupling of reason from politics. Does it re-invent the wheel? — only about 95% of it is redundant with 20% of SVG.

As for all the discussion about semantic API…years ago I, and others, made a fight for a model and associated XML vocabulary, RDF, we said would stand the test of time and hold up under use. The road’s been rough, and few people are going to defend reification, but RDF fuels the only truly open social graph in existence. Five years ago. That was about the time when everyone believed that all we’d need for semantics was RSS. Including Microsoft.

Categories
SVG

Flawed Safari on Leopard

It would seem that Apple released Leopard with the branch of Webkit that can’t hack certain uses of SVG. Because of this, you won’t be able to see the comments, due to the use of SVG to provide head and footer caps surrounding my comments.

This was a known problem with Webkit, and I filed a bug. I’m disappointed that Apple would release a broken version of Safari. I mean, it’s not as if the company isn’t taking a hit for it’s use of graphics in Leopard, already. At the least, it could put out software that’s working.

In the meantime, I may end up pulling my use of SVG. Or I might ask if you would please use another browser and let Apple/Safari/Webkit know that the browser’s handling of SVG is broken.

update

I found the problem, and an old unassigned bug related to this at WebKit.

What’s happening is that the SVG is expanding to fill the entire containing DIV element within which the SVG is placed (when display is set to ‘block’, not ‘inline’), either wiping out or ‘hiding’ the other contents. I surrounded the SVG in the comments and sidebar within a containing DIV element, and the SVG is no longer ‘overlaying’ (or removing) the rest of the content.

Question is, where is the bug here? Me for not embedding the SVG element in it’s own DIV element? Or WebKit for wiping the other content out on the parent element?

Regardless, the SVG is now working for Safari on Leopard.