March 10th, 2007

As you may or may not have noticed, I switched my web site to serving pages as XHTML, using a Wordpress plug-in Content Negotiation. Until I work through all the kinks, the pages may serve up oddly based on browser.

One thing about this approach is that whenever I make a mistake when manually adding elements–forgetting to close a tag or some such–you and I will both know immediately: for most browsers, the page should show an error.

I'm also having to modify the JavaScript for the photo expansion application. As noted in my comments, using innerHTML when serving up pages as XML can cause some problems. In Opera, it caused the sidebar float to not work properly. Right now, I've made this change so that it only takes effect when a person is actually expanding a photo. It works in many browsers, but Opera still has a problem and I'll continue to refine the example until it works properly in all my target browsers.

By serving pages as properly formatted XML, not only am I made acutely aware of my markup errors, I'm able to experiment around with newer technologies, such as the use of inline SVG. I'm using SVG in this post, though it will only show in browsers that support inline SVG. There are plugins for Internet Explorer that allow it to display SVG, but not when served inline. Same with Safari.

I'm using a proper DOCTYPE, though I'm not using the most efficient subset of the SVG specification. That will all come in time, though I'd love to hear suggestions and comments.

Why experiment with SVG and, eventually, the Canvas element? I think we're getting to the point where we need to take our browsers to the next level, and that level includes a more sophisticated CSS, as well as the ability to work with advanced graphics–without having to use Flash or plug-ins. To make a start, we need to increase the use of such technologies, and encourage browser developers to support the specifications.

I favor SVG because it's not a proprietary graphics concept, and it a proper markup. In particular, SVG allows Document Object Model (DOM) access, which makes it a very attractive approach–though the use of Canvas is more cross-browser compatible. VML is a dead-end because it's a Microsoft specification. So was innerHTML but that one now has broad user agent support, and is not going away.

I believe that web pages and applications can be both valid and accessible, and still make use of advanced graphics techniques as well as scripted effects. The key, though, is finding ways of communicating all of this to people who aren't so-called experts, so that everyone can benefit from advances made in specifications–not just the hackers.

I don't have access to every browser or other user agent in every environment, so I've also created a page where people can leave comments whenever the site generates errors or doesn't display well in their browser. This way, people have a place to put their comments without adding them on to whatever is the last post. Well, unless the comment is related to the post, such as anything to do with serving the pages as XHTML and the use of SVG associated with this post.

Comments
1
Sam Ruby - 9:36 am 3/10/2007

I would appreciate it if you could declare the svg namespace someplace in your feed.

2
Shelley - 9:47 am 3/10/2007

Sam, I've tucked it into the SVG element for now.

3

I believe that web pages and applications can be both valid and accessible, and still make use of advanced graphics techniques as well as scripted effects.

I agree. I once thought this was a pipe dream, but a while back I started developing all new sites in PHP 5 using server-side DOM construction, which doesn't allow for invalid XHTML anywhere. I initially expected this would require a lot of extra work to keep everything valid, but it's in practice very rare that a markup error shows up and when it happens PHP 5's exception handling gives me a friendly message so the rest of the site can keep working while I fix the problem. And knowing all my content is valid XHTML allows me to reuse it without worry. I highly recommend going all-valid.

4
Sam Ruby - 12:36 pm 3/10/2007

OK, I see what the problem is on my end (or actually ends: FeedValidator and FeedParser). I didn't expect to see namespace qualified element names inside of context explicitly marked as type="html".

5
Shelley - 12:58 pm 3/10/2007

Okee dokee, Atom feed updated.

Live preview with embedded elements is also a problem, and I'm working on a replacement.

6
Bud Gibson - 1:05 pm 3/10/2007

I believe that web pages and applications can be both valid and accessible, and still make use of advanced graphics techniques as well as scripted effects. The key, though, is finding ways of communicating all of this to people who aren't so-called experts, so that everyone can benefit from advances made in specifications–not just the hackers.

And the last sentence is really critical. You're a prolific writer. Have you considered doing a book in the head rush series? If the stars align right, I'm going to use their xhtml book in an intro course next term. To get these ideas widely accepted, I think you really have to create workbook-like examples.

Most people view validation as a pain. However, to do most advanced stuff, you really need it. Otherwise, nothing works right. This is particularly the case with DOM manipulation in ajax.

7
Sam Ruby - 1:11 pm 3/10/2007

Okee dokee, Atom feed updated.

Thanks! Your "art" now shows up on my planet.

8
Shelley - 1:24 pm 3/10/2007

Bud, no I'm not a Head First type of author, and this isn't to be critical of Head First, which is extremely successful. I am more of a 'text' person than a graphics when it comes to communication.

The Adding Ajax book does some of this, but it does assume familiarity with XHTML/HTML, CSS, and script. What we need to do is provide demonstrations, tutorials, and yes even code, for people to use in their spaces — and good reasons why they want to. It's become a hackers impressing hackers environment, and that's not healthy for anyone — hackers included.

Tough though. A lot of this isn't easy to implement, and a lot of the tools don't care.

Sam, you got any suggestions on the blankety blank RSS 1.0 feed? Planet RDF 'wants' RSS 1.0. Grr.

9
Sam Ruby - 2:05 pm 3/10/2007

bug report

Sam, you got any suggestions on the blankety blank RSS 1.0 feed? Planet RDF 'wants' RSS 1.0. Grr.

I'd try startting here, and don't forget to follow the update link.

10

You're trying to do real XHTML in WordPress? Wow!

My hat's off to you.

What are you going to do about comments?

11
Shelley - 2:31 pm 3/10/2007

I'll have to replace some stuff with plugins eventually, but yeah, knock on wood, so far it's working.

I'm going to be adding a Preview button. For those with script enabled, it will show a preview of the comment within the list, but not save it until the Save button is clicked. For those without script, it will open the page again with the new comment previewed, and re-displayed in the textarea so they can make edits again.

I am thinking of two preview buttons: one that's scripting, one that's not. Adding the scripting one in dynamically, but give the not-scripting option for those who have script enabled, but don't want to use a dynamic preview. This would be better for screen readers.

I'm also adding in-content editing for those with scripting, and editing in a separate page for those without. Similar to what I had before, but more robust.

I'm thinking of incorporating OpenID, specifically for allowing editing. Not required, just for allowing editing.

Lastly, I plan on adding a polling Ajax function, which checks for new comments every minute and appends new ones to the bottom of the list. This approach already has an accessible alternative: reload the page using the Preview button. But when you're writing a long comment, it's good to see if what someone else writes addressed what you were going to say.

That should take care of all the bases: be accessible, valid, and useful.

12
Shelley - 8:09 pm 3/10/2007

Sam, thanks for the 401 on the 404. It's now fixed. And I'm still playing around with the RDF feed.

I'd rather that Planet RDF accept the Atom feed. I'm going to see what Norm Walsh is doing. He only supplies an Atom feed, I believe.

13
Sam Ruby - 8:20 pm 3/10/2007

It looks like Norm provides a summary only (and for some items, title only) RSS 1.0 feed.

14
Shelley - 8:22 pm 3/10/2007

You know, I think that's a darn good idea. Coming up: abbreviated RSS 1.0 posts.

15

[…] popular reason is very clearly explained by Ajay. Shelley Powers points out that it is important to educate the experts about benefits of the technology behind […]

16
napoli - 4:55 am 3/13/2007

E evidente che il luogo e stato fatto dalla persona che realmente conosce il mestiere!

Thanks to all those who have contributed to the discussion. Comments are now closed, but you can contact the author of the post directly.