Charl van Niekerk » Blog: July 2004

Main

Latest

XHTML 1.1 as text/html

According to the W3C, we SHOULD NOT send XHTML 1.1 as text/html. Note that this is not a MUST NOT, but that a SHOULD NOT is basically the same as a MUST NOT unless you have a very good reason.

XHTML 1.1 is not as backwards-compatible as XHTML 1.0 since the attributes lang and name on a is removed. However, if you don't use any bookmarks on the page, and you use content-language in the HTTP Response Header to set the base language of your document, I don't really see any practical implications when sending XHTML 1.1 as text/html.

I think only the base language of the document matters currently (and I could be wrong here), since I don't believe speech-enabled web browsers support lang attributes correctly anyway. I don't know about search engines, but I believe Google and those should be smart enough to look at content-language anyway. And if that fails, well then at least you still have those (apparently scaly) autodetection algorithms left.

I could be wrong here, but these are just a few thoughts. At least when you use XHTML 1.1 you can combine namespaces and use SVG and hope the user agent will support it. ;-)

GROS

Yes, the Garden Route Open Source (GROS) User Group. And it is pronounced as "gross". We all had a laugh about it. :-)

Yesterday evening we came together as the official first meeting. We were mainly talking about what Open Source is, the possibilities with it, and how it has progressed in the past few years. We had some elections, and we decided that we are going to hold a meeting the last Thursday of every Month at 5:30 PM.

I was also there (obviously), and was elected as Webmaster.

There was a number of computer-related companies in the area that was present yesterday. And then of course some of the local schools. The PE Technikon's George Campus is also going to be havily involved with this. For non-South-Africans, a technikon is our name for a polytech. However, the PE Technikon is soon going to be renamed to the Nelson Mandela Metropolitan University. PE is short for Port Elizabeth, a city, and the area has been named the Nelson Mandela Metropole.

Note that the George Campus is not in PE, nor is it in the Nelson Mandela Metropole. It is, as the name suggests, situated in George. It is therefore a "sattelite campus".

Get it? :-)

I will keep you updated on the progress of the website. I am also going to keep a keen eye on cross-browser compatibility and standards here, particularly because this is all related to open source. But then, I do that normally anyway. :-)

XHTML Content Negotiation with PHP

They have a good, thorough approach at Keystone, but there's a few things I don't really like.

Therefore I decided to take their solution, and modify it a bit. Here is the result:

<?php
 header('Content-Language: en');
 header('Vary: Accept');

 $xhtml = false;

 function fix_code($buffer)
 {
  return (preg_replace("!\s*/>!", ">", $buffer));
 }

 if($_SERVER['HTTP_ACCEPT'] != null && stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml'))
 {
  if(preg_match("/application\/xhtml\+xml;q=0(\.[1-9]+)/i",$_SERVER['HTTP_ACCEPT'],$matches))
  {
   $xhtml_q = $matches[1];
   if(preg_match("/text\/html;q=0(\.[1-9]+)/i",$_SERVER['HTTP_ACCEPT'],$matches))
   {
    $html_q = $matches[1];
    if($xhtml_q >= $html_q)
    {
     $xhtml = true;
    }
   }
  }
  else
  {
   $xhtml = true;
  }
 }
 if($xhtml)
 {
  header('Content-Type: application/xhtml+xml; charset=UTF-8');
  print '<?xml version="1.0" encoding="UTF-8"?>' . "\n";
  print '<?xml-stylesheet type="text/css" href="/design/style.css"?>' . "\n";
  print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">' . "\n";
  print '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">' . "\n";
 }
 else
 {
  ob_start('fix_code');
  header('Content-Type: text/html; charset=UTF-8');
  print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' . "\n";
  print '<html lang="en">' . "\n";
 }
?>
<head>
<title>This is a test.</title>
<?php if(!$xhtml) print '<link rel="stylesheet" type="text/css" href="/design/style.css">' . "\n" ?>
</head>
<body>
<div><img src="somewhere.jpg"/></div>
</body>
</html>

I made a number of changes. Firstly, I don't send XHTML 1.0 Transitional and HTML 4.01 Transitional, I send XHTML 1.1 and HTML 4.01 Strict. And when I'm sending under application/xhtml+xml, there's no reason to have the lang attribute on the html element. xml:lang will do just fine.

I also assume you're using UTF-8 (like you should be using when sending under application/xhtml+xml). I think I also straightened the code out a little bit and indented neatly and propperly. And note that my solution also works neatly with the xml-stylesheet processing instruction.

Anyway, credit goes to Keystone Websites for the base of the code. Their solution (and therefore also mine) addresses the q-value issue.

Disclaimer: Charl van Niekerk will not be held responsible for any loss or damage suffered due to use of this code.

Multimedia Design

Ok, for once I am going to move away from web standards-related posts and move into design. This is quite a bit of change from what I do normally, but as important as web standards are, I can't help myself being multimedia and design crazy as well.

Here are a few links to sites that I find are awesome in their design. Most (or all) of them are probably pathetic when it comes to standards, but you can't say they don't look great. :-)

NRG.be: This site is the homepage of the designer Peter van den Wyngaert (Belgium). He has designed many stunning sites in Flash. Although this website seems to stay unchanged, and does have a bit of a 90's feel to it, at the time he created it, it must have been cutting-edge (especially with the limited technology at that stadium).
Versuz: This site has been designed by NRG and I like the intro and the Flash. There is probably nothing cutting-edge here either, but it is still well done and energetic.
Ultrashock: Excellent resource about Flash and related technologies. There's the Bombshock awards, tutorials, forums, etc.
2Advanced: These guys are just breathtaking. They must be serious contenders for the best in the world in my opinion.
Pixelranger: I love his "Genesis Project". Really fantastic what you can do with multimedia. Very good designer, and I love some (if not all) of his sites.
Realvast: One of the sites Pixelranger has been involved in. Truly excellent.
Robert Reich: I like his style of design. Clean, neat, modern, simple.
Level Vodka: I'm not promoting alcohol here, but this site showcases some of what is probably the best of Swedish design. Breaks about every usability rule in the book, but for creativity, design, and elegancy I would give them 10/10.
Firewater: This list wouldn't be complete without a South African entry. I actually used to like these guys' old design better, and the annoying flashes at the top really irritate me. I like their logo though.
Iganic: Usability sucks, but for creativity I give them 10/10. Pity they don't update their site, though! Oh yes, this is another South African company.
Toni & Guy Ireland: Now that is what I call style!
Hybride: What is it with the French and orange? Anyway, this site is really worth seeing, believe me! Stylish and modern at its best!

There are probably many more, but I'll make more posts as I remember/discover them.

Creativity is good, but I personally believe that it shouldn't take higher precedence than usability. I believe that there is a happy medium for this.

One common problem I see is that designers like to make their font sizes too small, which makes the text uncomfortable to read. This is a real pity, since I (and many others) believe that small font sizes don't make a site look better at all.

On the design front, one thing that I personally discovered to make text look neater is to use a descent line height. It makes the text look less cluttered, while improving readability and scannability too.

One thing what I still would love to see, and that is a standardized multimedia format set forth by the W3C. I don't think this is unreasonable, since they have standardized markup, style, metadata, etc. Wouldn't that be great? A copy of Macromedia Flash MX 2004 Pro will cost about R4 000 (at best) in South Africa. I can get a whole new computer for that amount of money. An open source alternative built on open standards would be a dream come true for me. Needless to say, I will find a new hobby in trying to see how far we can push design while not forgetting about usability, accessibility, and standards.

Blogger Suggestions

I have been wanting to make a post about this for quite a while now, but never got around to it. So here goes.

1) Valid XHTML for Ads: Blogger has already come quite a long way to standards compliance, but because Google is inserting invalid code at the top for ads, it makes it impossible to validate, doesn't matter what doctype you use. I suggest that valid XHTML 1.0 Strict be inserted, since that is what the doctype says on the template.
2) External Stylesheet: One of the advantages of being standards-compliant is that you can create leaner code that downloads faster. However, the stylesheet must be external so that it can be cached by the browser. Having the stylesheet embedded into the (X)HTML means that it must be loaded along with the markup every time a page is loaded. Having exteral stylesheets reduce the loading time for users, and it will also save some of Blogger's bandwidth. So an option to have your stylesheet external would be nice.
3) Uploading Your Own Images: There is a problem with creating your own look-and-feel for your weblog: You can edit the markup and the stylesheet, but you can't upload your own graphics. Not everybody has the facility to upload them somewhere else and then just link to them from your markup/stylesheet here. Google will be offering 2GB of e-mail space to people soon, so is it possible that you Blogger guys can offer weblogs a little bit of upload space on your servers as well? Even half a MB or so will do for most users, I think.
4) Encoding of Ampersands: I have an ampersand in my description, but it isn't encoded to & when it is inserted into the XHTML. It is, however, encoded in the Atom feed. Could it please be encoded in both places as it should? This is also very important for valid markup and forwards-compatibility.
5) Sending application/xhtml+xml to Compliant Browsers: Ok, I might be nitpicking here, but this is also important for the standards. Not having this limits you to not using MathML, SVG, etc. Of course this would require a separate option which is switched to OFF by default, because most people's pages will probably crash anyway if you have it like this.
6) XHTML in Comments: We definitely can't move into the semantic web and into accessibility if users can't insert XHTML into their comments. I know that there are many problems associated with this, but I just want to stress the importance of this again. I think the individual weblog authors should be given most of the control over this and over which tags are allowed.

I haven't officially sent these suggestions to Blogger yet, since I would first like to sleep over this for a few nights to make sure I don't forget anything. I don't want to waste these people's time with multiple e-mails if I can avoid it. If anybody has anything to add, please comment so that I can include it before I send it to Blogger.

Lastly I would like to say that, for a free service, Blogger is truly excellent. They have gone a much longer way to standards-compliancy so far than most other companies, and I believe that it will only improve in the future. I also like the templates and the admin section, so I can honestly congratulate Blogger for such a fantastic service.

Mozilla Beats Explorer's Ass!

Oh yeah!

Internet Explorer - Where are Users Going?: 10% Decline in IE use in only 6 months. US-CERT is advising users to stop using IE. Via Anne.
IE only at 80%: See IE 5's decline? IE 6 only went up ~~marginally~~ slightly. Opera is climbing slowly, and look at Mozilla!

Standards Compliance in South Africa

I would like to keep track of how many standards-compliant websites there currently are in South Africa.

Since I don't have the time to do a in-depth study of all of these sites, I only validated the homepage. That should already give you an indication of how many people are at least aware of valid markup.

Validated:

Hello.za.com (Valid XHTML 1.0 Transitional)
Abury.co.za (Valid XHTML 1.1)
Yvonne Carola Pearce's African Wildlife Art Gallery (Valid XHTML 1.1 as application/xhtml+xml)

4 out of 9 sites I tested so far validated. But of course I only tested sites in what was supposedly the "standards-compliant sector".

I also found a lot of companies that stated that they designed according to web standards. If you can't even get your homepage to validate, and additionally you can't use semantic markup, don't say that you design with web standards!

It is also important to note that even if your homepage validates, you still can't claim standards compliancy. You must first make sure your CSS/RDF/XML/whatever validates and then you must make sure that you are sending under the correct mime-type. You must also make sure that your markup is semantical, and that you used all of your tags correctly as they should be used according to specification. And don't forget about accessibility. :-)

The information in this post is correct at time of writing. Updates will be made as necessary.

Leiden.nl Improvements

There was quite a bit of talking going on a while ago about the standards-uncompliancy of Leiden.nl

However, they seem to have fixed some of their problems now. The markup is also a lot neater than originally, and it seem to work correctly in Mozilla.

However, I still think Anne's version was better. :-)

RssReader and Atom Feeds

Update: I accidentally typed xmlns:p instead of xhtml:p like I used in the feed. Just modified that.

I am using RssReader version 1.0.88.0

This morning, I felt like experimenting. Instead of using the following:

<div xmlns="http://www.w3.org/1999/xhtml"><p>

I used this:

<xhtml:p>

With this on the root element:

xmlns:xhtml="http://www.w3.org/1999/xhtml"

Isn't that correct? The FeedValidator says it is correct. But the XHTML doesn't get formatted correctly now in RssReader. It used to work perfect with the other technique, which I see on most feeds. However, mine should work also, yes?

Link Log - Post 3

Sorry for not posting for a while, but I am quite busy at the moment. I'll see what I can do next week.

Anyway, here are some links:

Submitexpress.com: Submit to various search engines. Most of them are useless, since they don't accept automatic submissions. It does seem to submit to a few meta search engines, but who knows.
XHTML MIME Type: A must-read if you're sending application/xhtml+xml to compliant browsers through content negotiation.
Mathibus.com - No more www: Redirect propperly and throw away that ugly "www"
All in the <head> - And Breathe Out: Be careful with PHP...

Link Log - Post 2

Web design related:

Webforumz.com: Discussions about web design/development.

Search Engine Optimization:

Top25.com: Good resource with forums and Google pagerank tool.
Pagerank Wins!: Worth a read if you're into search engine optimization.

Don't send XHTML as text/html

Ian Hickson has been saying this for I don't even know how long. At first I disagreed, thinking that the more forwards-compatible we can get, the better. However, this morning (or was it yesterday evening?) I suddenly thought of something else:

In XHTML, it is completely valid to say the following:

<script type="text/javascript" src="myscript.js"/>

This opens and closes the script element, and after that line you can just continue with other stuff. However, that is not the same for HTML. The "/" at the end doesn't mean the tag gets closed. It actually means something else, and I forgot what. Anyway, for HTML you need the following:

<script type="text/javascript" src="myscript.js"></script>

So, although it is valid to use the "/" shortcut in XHTML, it doesn't have the same effect in HTML and therefore you need the extra </script> tag.

Ok, you can make XHTML backwards-compatible, but it isn't backwards-compatible by nature. In other words, you can also write valid XHTML and make it totally incompatible when sent as text/html. Even an XML-enabled user agent will choke on this, simply because it isn't sent under the correct MIME-type.

So, what I am trying to say? Validation doesn't tell you if something is wrong. Something which will break in browsers will still validate as XHTML.

The solution? Use an HTML doctype when sending as text/html and only use XHTML when sending under a propper XML MIME-type. You have more reliable debugging when doing so.

Also note that, like I said, you can write backwards-compatible XHTML. You can (and it is still valid) to use </script> when writing XHTML. However, standard validation isn't enough now anymore.

Agree? Disagree? Comment!

Also, remember that in my example above text/javascript is actually not correct and it should be application/x-javascript. However, this, like most things, doesn't work in Internet Explorer. But who cares, right?

More standards-UNcompliance

I don't even really know why I attempted to validate. Freeservers is now including banner ads on their free websites (which is what I would expect), but they are now inserting incompliant HTML for ads. My validating site I made for a client now doesn't validate anymore.

I should probably complain, but I can't spend my days bitching and moaning about every single free service out there. I really don't understand why they just can't insert valid HTML into their customers' pages.

This is a general problem with ads. We see this on Blogger, Freeservers, and probably most other free ad-driven sites and services out there.

Like we say in South Africa: EISH!!!

XHTML in Internet Explorer

Via Anne van Kesteren: Dean Edwards discovered a way to get Internet Explorer to display XHTML correctly when sent as application/xml.

However, Dean commented that there were some problems worth note:

apparently it doesn't work too well with ASP/JSP, although i haven't tested it myself.

...

it doesn't work with the XHTML1.1 DTD. (it chokes on an entity reference)

Since I am an avid ASP.NET developer, I decided to drop Dean an e-mail asking more about the ASP/JSP thing. He then referred me to Rob Collyer, who came back to me with some rather interesting information. I quote some stuff below out from the e-mail he sent me:

Hi Charl...

The issues I've found is that Internet Explorer working in application/xml mode, will not pass on the referrer string to pages. This is slightly annoying if your pages use the referrer string to track users around your site, or to make sure they have come by a certain route into a secure area, etc.

The above issue can be worked round with tweaks at the server end... Embedding referring page names into querystrings, or forms, etc (not very sightly in querystrings, I must say)

The above also, wont affect many sites, but it's something to consider.

The second and most major issue I've had, is that when you refresh a page that's had http POST data posted to it...

Normally, explorer (and all other browsers) politely asks you if you want to repost the data. In application/xml mode, it does not ask you this at all, and it DOES NOT repost the data which is very annoying to the user (especially on multi-page forms.... It would be a big issue in .NET, as the webforms would lost state and postdata, and isPostBack would always return false for a refreshed form.

So as long as you are prepared to code round the referrer issue, and to make all form actions a GET instead of POST, then you will probabally be ok.

I personally, would just sniff the q value, and serve up content based on what the q values actually request as their preferred content-type... Eg.. Give IE html 4.0 strict / transitional, and everything whose q value asks for it, XHTML.

Ie, was never supposed to be XHTML compliant, and the fact that Dean has found a clever work-around is remarkable, but not without issues as described above....

I personally, would not like to see this hack perpetuated nor anything that keeps Internet Explorer's heavy head above water... It would be far better to leave Internet Explorer to take its current path to rack and ruin, and then maybe one day when either Microsoft release a better and compliant version, or when they lose their foothold in the browser market, our lives as web developers will be much easier (c'mon, you hate coding xBrowser IE issues too don't ya?)

Leave standard-skirting browsers in the past where they belong, and help spread the word of mozilla, firebird and opera.

That's just my personal opinion of course.

Cheers,

Rob

Ok, so I quoted the entire e-mail. I hope Rob doesn't mind.

At this moment I don't really think that it is viable in practice to use this technique, because there are many bugs as Rob pointed out, and the advantages are not really too clear. (Except for the fact that you can now send pages under a single content type to all browsers.)

Also note that you should actually send XHTML as application/xhtml+xml for many reasons.

Another thing that came to mind is how this would work with search engines. I don't really know if Google recognizes the important tags like title that are important for search engine optimization when it is sent as XML. That would probably depend on Google's XHTML/XML compatibility, but nobody really knows too much about this yet.

So, probably still best to stick with text/html for non-XHTML/XML user agents. Very interesting experiment though. Congratulations, Dean!

Oh yes, and before I forget, I like to hear more people (like what I quoted from Rob above) saying that we should leave Internet Explorer behind and design for Mozilla and Opera in full XHTML glory. The only problem is that this isn't viable for commercial sites, but for personal sites I say: Go right ahead! I plan on making some Internet Explorer-incompatible websites myself within the next few weeks. I'll keep you posted!

Simple ASP.NET Content Negotiation for application/xhtml+xml

Ok, this is just a simple example for how to send pages as application/xhtml+xml to user agents that supports it. This is of course in ASP.NET. Note that this does not address the q-value issue, but I'll get around to that later with a more complex example.

Here is the minimal code in C#:

<%@ Page Language="C#" ResponseEncoding="UTF-8" %>

<script language="C#" runat="server">
	void Page_Load()
	{
		Response.CacheControl = "No-cache";

		string httpAccept = Request.ServerVariables["HTTP_ACCEPT"];
		if(httpAccept != null && httpAccept.IndexOf("application/xhtml+xml") != -1)
		{
			Response.ContentType = "application/xhtml+xml";
			Response.Write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
		}
		else
		{
			Response.ContentType = "text/html";
		}
	}
</script>

Note that this does not include user agent sniffing (like sniffing for the W3C Validator to send it the correct MIME-type, etc).

Also note that the above example sets cache-control to no-cache. This is to prevent problems with proxy servers. In PHP, you would have had:

header("Vary: Accept");

The PHP solution is much better, because it doesn't completely stop caching like my solution, but only selectively stops caching.

However, I don't know of an alternative in ASP.NET. It seems like that system has limited support for HTTP and that it doesn't allow you to directly write to the HTTP response header. I could be wrong though.

I don't know if the code is 100% correct, so please comment if you think something is wrong. Thanks.

And another thing, the above code is in C# so obviously you need to ajust it if you prefer VB. But that shouldn't be too difficult for you, right?